/* Minesweeper Mobile Styles */
:root{
  --bg: #0b0f14;
  --fg: #e9eef5;
  --muted:#93a1b3;
  --accent:#2fb573;
  --danger:#ff4d4f;
  --panel:#171d26;
  --cell:#1c2430;
  --cell-raised:#223040;
  --cell-sunken:#0f141b;
  --shadow: rgba(0,0,0,.35);
  --gap: 8px;
  --cell-size: 36px;
  --radius: 10px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font-family:var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
}
#app{min-height:100%;display:flex;flex-direction:column}

.topbar{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg,var(--panel),#0f141b);
  padding:12px env(safe-area-inset-right) 12px env(safe-area-inset-left);
  box-shadow:0 2px 8px var(--shadow);
}
.brand{display:flex; align-items:center; justify-content:space-between; gap:8px}
.title{font-weight:700; letter-spacing:.3px}
.stats{margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.stat{display:flex; flex-direction:column; align-items:center; min-width:80px}
.label{font-size:12px; color:var(--muted)}
.value{font-variant-numeric: tabular-nums; font-size:20px; font-weight:700}
.reset{font-size:22px; padding:8px 12px; border-radius:12px; border:none; background:var(--cell); color:var(--fg); box-shadow:0 2px 6px var(--shadow)}
.reset:active{transform:translateY(1px)}

main{flex:1; display:flex; flex-direction:column; gap:10px; padding:10px}
#board-wrap{flex:1; display:flex; align-items:center; justify-content:center}
.board{
  display:grid; gap:2px;
  background:var(--panel);
  padding:6px; border-radius:12px;
  box-shadow:0 6px 16px var(--shadow) inset, 0 6px 18px rgba(0,0,0,.25);
  max-width:100%; max-height:100%;
}
.cell{
  width:var(--cell-size); height:var(--cell-size);
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,var(--cell),var(--cell-raised));
  border-radius:6px;
  user-select:none; -webkit-user-select:none;
  font-weight:700; font-size:16px;
  line-height:1; cursor:pointer;
  touch-action: manipulation;
}
.cell.revealed{
  background:linear-gradient(145deg,var(--cell-sunken),#0a0f14);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,.5), inset -2px -2px 4px rgba(255,255,255,.02);
}
.cell.mine.revealed{ background:#3b0a0a }
.cell.flag::after{ content:"🚩" }
.cell.mine.hit{ background:var(--danger) }
.cell.num-1{ color:#87d7ff }
.cell.num-2{ color:#7ee28a }
.cell.num-3{ color:#ffb570 }
.cell.num-4{ color:#c5a3ff }
.cell.num-5{ color:#ff9bb3 }
.cell.num-6{ color:#b2f0ff }
.cell.num-7{ color:#e5f27f }
.cell.num-8{ color:#d0d0d0 }

.toolbar{
  display:flex; gap:8px; justify-content:space-between;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.mode-toggle{
  flex:1; padding:12px; border-radius:12px; border:none;
  background:var(--panel); color:var(--fg); font-weight:600;
  box-shadow:0 2px 6px var(--shadow);
}
.mode-toggle[aria-pressed="true"]{ outline:2px solid var(--accent) }

dialog{
  border:none; border-radius:14px; max-width:560px; width:92vw;
  background:var(--panel); color:var(--fg);
  box-shadow:0 20px 40px rgba(0,0,0,.5);
  padding:0;
}
dialog::backdrop{ background:rgba(0,0,0,.5) }
dialog form{ padding:18px; display:flex; flex-direction:column; gap:12px }
fieldset{ border:1px solid #263040; border-radius:12px; padding:12px }
legend{ padding:0 6px; color:var(--muted) }
.custom .custom-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px }
menu{ display:flex; gap:8px; justify-content:flex-end }
button{ color:inherit }

/* Compact option toggles cell size down */
body.compact{ --cell-size: 28px }

/* Light mode */
body.light{
  --bg:#f6f8fc; --fg:#0b0f14; --muted:#5b6678; --panel:#ffffff;
  --cell:#e8edf4; --cell-raised:#f4f6fa; --cell-sunken:#d8dee8;
  --shadow: rgba(0,0,0,.08);
}
body.light .reset{ background:#eef2f8 }