:root{
  --bg:#0f172a;--bg2:#111827;--panel:#172033;--panel2:#1f2a44;--border:#334155;
  --text:#f8fafc;--muted:#94a3b8;--accent:#22c55e;--danger:#ef4444;
  --cell:#334155;--cell2:#475569;--open:#e2e8f0;--open-text:#0f172a;
}
body.light{
  --bg:#e2e8f0;--bg2:#f8fafc;--panel:#fff;--panel2:#f1f5f9;--border:#cbd5e1;
  --text:#0f172a;--muted:#475569;--cell:#cbd5e1;--cell2:#b8c4d3;--open:#fff;--open-text:#0f172a;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(160deg,var(--bg),var(--bg2));color:var(--text)}
button,input,a{font:inherit} button{cursor:pointer}
.topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px max(18px,calc((100% - 1440px)/2));border-bottom:1px solid var(--border);background:rgba(15,23,42,.88)}
body.light .topbar{background:rgba(255,255,255,.9)}
.topbar h1{margin:4px 0 6px;font-size:clamp(25px,4vw,40px)} .topbar p{margin:0;color:var(--muted)}
.eyebrow{font-size:12px;letter-spacing:.16em;color:var(--accent);font-weight:800}
.app-shell{max-width:1440px;margin:auto;display:grid;grid-template-columns:290px minmax(0,1fr);gap:20px;padding:22px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:18px}
.sidebar{align-self:start} h2{margin:0 0 14px}
.mode-list{display:grid;gap:10px}
.mode-card{display:block;text-align:left;width:100%;padding:13px 14px;text-decoration:none;color:var(--text);background:var(--panel2);border:1px solid var(--border);border-radius:12px}
.mode-card strong,.mode-card span,.mode-card small{display:block}.mode-card span{margin-top:4px;color:var(--muted);font-size:13px}.mode-card small{margin-top:3px;color:var(--muted)}
.mode-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.custom-form{display:none;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}.custom-form.show{display:grid}
.custom-form label{font-size:13px;color:var(--muted)}.custom-form input{width:100%;margin-top:5px;padding:10px 11px;color:var(--text);background:var(--bg2);border:1px solid var(--border);border-radius:9px}
.primary{border:0;background:var(--accent);color:#052e16;font-weight:800;padding:11px 14px;border-radius:10px}
.controls button:not(.primary),.ghost{border:1px solid var(--border);background:var(--panel2);color:var(--text);padding:10px 14px;border-radius:10px}
.instructions{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}.instructions h3{margin:0 0 10px}.instructions p{margin:7px 0;color:var(--muted);font-size:13px;line-height:1.45}
.game-area{display:grid;gap:20px;min-width:0}.game-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}.mode-label{font-size:12px;color:var(--muted);text-transform:uppercase}.game-head h2{margin:4px 0 0}
.stats{display:flex;gap:10px;flex-wrap:wrap}.stat{min-width:95px;background:var(--panel2);border:1px solid var(--border);border-radius:11px;padding:9px 11px}.stat span{display:block;font-size:11px;color:var(--muted)}.stat strong{display:block;margin-top:3px;font-size:18px}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.message{min-height:42px;display:flex;align-items:center;padding:10px 13px;border-radius:10px;background:var(--panel2);color:var(--muted);margin-bottom:14px}
.message.win{color:#bbf7d0;border:1px solid var(--accent)}.message.lose{color:#fecaca;border:1px solid var(--danger)}
.board-scroll{overflow:auto;padding:10px;background:var(--bg2);border:1px solid var(--border);border-radius:14px}
.board{display:grid;grid-template-columns:repeat(var(--cols),34px);gap:3px;width:max-content;margin:auto}
.cell{width:34px;height:34px;border:1px solid #64748b;border-radius:6px;display:grid;place-items:center;user-select:none;font-weight:900;background:linear-gradient(145deg,var(--cell2),var(--cell));color:var(--text);box-shadow:inset 1px 1px rgba(255,255,255,.08),inset -2px -2px rgba(0,0,0,.15);padding:0}
.cell:hover{filter:brightness(1.12)}.cell.open{background:var(--open);color:var(--open-text);border-color:#cbd5e1;box-shadow:none}.cell.mine{background:#fecaca;color:#7f1d1d}.cell.exploded{background:#ef4444;color:#fff}.cell.flagged{background:#fde68a;color:#7c2d12}
.cell.n1{color:#2563eb}.cell.n2{color:#16a34a}.cell.n3{color:#dc2626}.cell.n4{color:#7c3aed}.cell.n5{color:#92400e}.cell.n6{color:#0891b2}.cell.n7{color:#111827}.cell.n8{color:#64748b}
.records{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.records div{padding:11px 13px;border-radius:10px;background:var(--panel2);border:1px solid var(--border)}.records span{display:block;font-size:12px;color:var(--muted)}.records strong{display:block;margin-top:3px}
footer{text-align:center;color:var(--muted);padding:22px;font-size:12px}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.records{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.app-shell{padding:10px}.panel{padding:13px}.board{grid-template-columns:repeat(var(--cols),30px)}.cell{width:30px;height:30px;border-radius:5px;font-size:13px}.records{grid-template-columns:1fr}}