:root { --bg:#0f172a; --panel:#1e293b; --line:#334155; --text:#e2e8f0; --muted:#94a3b8; --accent:#38bdf8; --lit:#fbbf24; color-scheme:dark; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
main { max-width:560px; margin:0 auto; padding:12px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.home { align-self:flex-start; color:var(--accent); text-decoration:none; }
h1 { margin:0; font-size:1.5rem; }
.lead { margin:0; color:var(--muted); text-align:center; }
button { font:inherit; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px 12px; cursor:pointer; }
button.on, button:hover { border-color:var(--accent); }
.bar, .hud { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.hud { color:var(--muted); } .hud b { color:var(--text); }
#board { --s:min(440px, calc(100vw - 24px)); display:grid; grid-template-columns:repeat(var(--n), 1fr); gap:6px; width:var(--s); height:var(--s); padding:6px; background:var(--panel); border-radius:12px; touch-action:manipulation; }
.cell { padding:0; border-radius:11px; border:1px solid rgba(177,207,233,.13); background:linear-gradient(145deg,#334561,#18263e); box-shadow:inset 0 2px 2px rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.13); transition:background .12s, box-shadow .12s; }
.cell.on { background:radial-gradient(circle at 35% 28%,#fff1b3,var(--lit) 68%,#d88612); border-color:#ffdc7a; box-shadow:0 0 18px rgba(251,191,36,.64), inset 0 2px 3px rgba(255,255,255,.5); }
.cell.hint { outline:3px solid var(--accent); outline-offset:-3px; }
.cell:disabled { cursor:default; }
#msg { min-height:1.4em; margin:0; font-weight:600; }

/* A deep stone frame keeps the lit squares luminous, like the illustrated board. */
#board { border:8px solid #263c5b; background:linear-gradient(145deg,#263c5b,#101e38); box-shadow:inset 0 2px 7px rgba(0,0,0,.35),0 16px 28px rgba(17,38,66,.24); }
.cell:not(.on) { background:radial-gradient(circle at 30% 24%,#3b5070,#172741 75%); border-color:#506481; }
.cell.on { background:radial-gradient(circle at 34% 27%,#fff7c9 0%,#ffd65e 50%,#efa914 90%); border-color:#ffe392; box-shadow:0 0 16px rgba(255,189,37,.65),inset 0 2px 5px rgba(255,255,255,.66),inset 0 -4px 6px rgba(184,102,11,.2); }