/* ===== マインスイーパー スタイル ===== */
body:has(.minesweeper){background:#0d151b;color:#eaf3f1}
body:has(.minesweeper)>header{max-width:1100px;padding-bottom:12px}
body:has(.minesweeper)>header a{color:#9dafaf;font-size:13px}
main:has(.minesweeper){max-width:1100px;background:transparent;padding-top:12px}

.minesweeper{--accent:#f5c16b;--muted:#9bafba;--panel:#17242d;--border:#2b3e49;--cell-bg:#1e3040;--cell-bg-open:#0b131b;--cell-border:#2b3e49;--flag:#f43f5e;--mine:#ff3c3c;--safe:#99efcc}

/* ===== 見出し ===== */
.game-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--muted);margin:0 0 8px;font-weight:700}
.game-heading h1{font-size:40px;line-height:1.2;letter-spacing:.08em;margin:0}
.game-heading h1 span{display:inline-block;font-size:12px;letter-spacing:.12em;margin-left:16px;color:var(--muted);font-weight:400}
.game-tag{font-size:13px;color:var(--accent)}

/* ===== シェル ===== */
.ms-shell{display:flex;flex-direction:column;align-items:center;gap:16px}

/* ===== 難易度ボタン ===== */
.ms-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.ms-difficulty{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.diff-btn{font:inherit;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--border);border-radius:8px;background:#213440;color:var(--muted);padding:8px 14px;transition:background .15s,color .15s,border-color .15s;touch-action:manipulation;line-height:1.3;text-align:center}
.diff-btn span{display:block;font-size:10px;font-weight:400;margin-top:2px;opacity:.7}
.diff-btn:hover{background:#304a59;color:#eaf3f1}
.diff-btn.active{background:var(--accent);color:#1a0e00;border-color:var(--accent)}
.diff-btn.active span{opacity:.7}
.ms-restart{font:inherit;font-size:22px;cursor:pointer;border:1px solid var(--border);border-radius:8px;background:#213440;color:#eaf3f1;padding:6px 12px;transition:background .15s;touch-action:manipulation;line-height:1}
.ms-restart:hover{background:#304a59}

/* ===== ステータスバー ===== */
.ms-statusbar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:780px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 20px}
.ms-stat{display:flex;align-items:center;gap:8px;min-width:80px}
.stat-icon{font-size:18px}
.stat-value{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.05em;min-width:3ch;display:inline-block}
.ms-face{font-size:26px;cursor:pointer;user-select:none;-webkit-user-select:none;transition:transform .1s}
.ms-face:active{transform:scale(.88)}

/* ===== 盤面ラッパー ===== */
.ms-board-wrap{overflow-x:auto;width:100%;max-width:calc(100vw - 32px);display:flex;justify-content:center;padding-bottom:4px}

/* ===== 盤面グリッド ===== */
.ms-board{display:inline-grid;gap:2px;background:#0b131b;border:2px solid var(--border);border-radius:8px;padding:6px;touch-action:none;-webkit-tap-highlight-color:transparent}

/* ===== セル ===== */
.ms-cell{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;line-height:1;
  background:var(--cell-bg);
  border:1px solid var(--cell-border);
  border-radius:4px;
  cursor:pointer;
  user-select:none;-webkit-user-select:none;
  transition:background .08s;
  position:relative;
}
.ms-cell:hover:not(.open):not(.exploded){background:#2a4558}
.ms-cell.open{background:var(--cell-bg-open);cursor:default;border-color:#1a2b38}
.ms-cell.flagged::after{content:'🚩';font-size:16px}
.ms-cell.flagged:hover{background:#2a3645}
.ms-cell.question::after{content:'❓';font-size:14px}
.ms-cell.open.n1{color:#5fb8f8}
.ms-cell.open.n2{color:#99efcc}
.ms-cell.open.n3{color:#f87171}
.ms-cell.open.n4{color:#818cf8}
.ms-cell.open.n5{color:#f97316}
.ms-cell.open.n6{color:#22d3ee}
.ms-cell.open.n7{color:#f0abfc}
.ms-cell.open.n8{color:#94a3b8}
.ms-cell.mine-reveal{background:#200808;border-color:#5a1010;cursor:default}
.ms-cell.mine-reveal::after{content:'💣';font-size:16px}
.ms-cell.exploded{background:#ff2020!important;border-color:#ff2020!important}
.ms-cell.exploded::after{content:'💣';font-size:18px}
.ms-cell.wrong-flag{background:#200808;border-color:#5a1010;cursor:default}
.ms-cell.wrong-flag::after{content:'❌';font-size:15px}
.ms-cell.safe-open{background:#0a2416;border-color:#1e5e35}

/* ===== ベストタイム ===== */
.ms-best{min-height:1.6em;text-align:center}
.best-time-label{font-size:12px;color:var(--accent);margin:0}

/* ===== 遊び方 ===== */
.how-to{border-top:1px solid var(--border);padding-top:12px;color:var(--muted);width:100%;max-width:780px}
.how-to h2{font-size:13px;color:#eaf3f1;margin:0 0 8px}
.how-to dl{margin:0;font-size:12px}
.how-to dl div{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px}
.how-to dt{font-family:monospace;color:#dce8e8}
.how-to dd{margin:0}
.how-to p{font-size:11px;margin:8px 0 0}

/* ===== レスポンシブ ===== */
@media(max-width:640px){
  main:has(.minesweeper){margin:0;padding:12px}
  .game-heading{margin-bottom:16px;flex-direction:column;align-items:flex-start;gap:6px}
  .game-heading h1{font-size:28px}
  .game-heading h1 span{display:block;margin:4px 0 0;font-size:10px}
  .game-tag{font-size:11px}
  .ms-cell{width:32px;height:32px;font-size:13px}
  .ms-cell.flagged::after,.ms-cell.mine-reveal::after{font-size:14px}
  .ms-cell.exploded::after{font-size:16px}
  .stat-value{font-size:20px}
  .ms-statusbar{padding:8px 14px}
  .diff-btn{font-size:11px;padding:7px 10px}
}
@media(max-width:380px){
  .ms-cell{width:28px;height:28px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .ms-cell,.diff-btn,.ms-restart{transition:none}
}