*{box-sizing:border-box}
:root{--bg:#0a0c12;--panel:#111827;--muted:#9ca3af;--border:#1f2937;--brand:#7dd3fc;--brand2:#34d399;--text:#e5e7eb}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%, rgba(40,70,255,.15), transparent),linear-gradient(180deg, #0a0c12, #0a0c12);color:var(--text);font:16px/1.4 system-ui,Segoe UI,Roboto,Arial}
.container{max-width:1080px;margin:0 auto;padding:32px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.logo{font-weight:800;letter-spacing:.3px;font-size:20px}
.badge{padding:4px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 6;background:linear-gradient(180deg,#0f172a,#0b1020);border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.35);overflow:hidden}
.card h2{margin:0;padding:16px 16px 0}
.card .content{padding:16px}
.btn{background:linear-gradient(135deg,var(--brand),var(--brand2));border:none;padding:10px 14px;border-radius:10px;color:#03111a;font-weight:700;cursor:pointer}
.btn.secondary{background:#1f2937;color:var(--text);border:1px solid var(--border)}
.input{background:#0b1020;border:1px solid var(--border);color:var(--text);padding:10px;border-radius:10px;width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap}
pre{background:#0a0f1c;border:1px solid var(--border);border-radius:12px;padding:12px;overflow:auto;font-size:13px;color:#a7f3d0}
#minesGrid{display:grid;gap:6px}
.cell{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#121b2e;border:1px solid #223;cursor:pointer;user-select:none;transition:transform .05s}
.cell:hover{transform:translateY(-1px)}
.cell.revealed{background:#0f1a2a;color:#9ae6b4}
.cell.mine{background:#2a0f18;border-color:#3b1320;color:#fecaca}
.canvasWrap{height:420px;background:linear-gradient(180deg,#0c1222,#0a0f1c);border:1px solid var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center}
footer{opacity:.6;text-align:center;margin-top:20px}