:root { --bg:#0f172a; --panel:#1e293b; --line:#334155; --text:#e2e8f0; --muted:#94a3b8; --accent:#38bdf8; 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; }
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; align-items:center; }
.hud { color:var(--muted); } .hud b { color:var(--text); }
#board { --s:min(440px, calc(100vw - 24px)); --gap:6px; --c:calc((var(--s) - var(--gap) * (var(--n) + 1)) / var(--n)); position:relative; width:var(--s); height:var(--s); background:var(--panel); border-radius:12px; touch-action:none; user-select:none; -webkit-user-select:none; }
.tile { position:absolute; left:0; top:0; width:var(--c); height:var(--c); padding:0; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:linear-gradient(145deg,#647d98,#344b65); color:#fff; font:700 calc(var(--c) * .42)/1 system-ui,sans-serif; box-shadow:0 4px 0 #25384e, 0 7px 11px rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.17); transform:translate(calc(var(--gap) + var(--x) * (var(--c) + var(--gap))), calc(var(--gap) + var(--y) * (var(--c) + var(--gap)))); transition:transform .14s ease-out, background .2s; }
.tile.home { background:linear-gradient(145deg,#1ba2b7,#0a6881); }
.tile:disabled { cursor:default; opacity:1; }
#board.done { animation:done .5s; }
@keyframes done { 50% { transform:scale(1.03); } }
#msg { min-height:1.4em; margin:0; font-weight:600; }
.help { margin:0; color:var(--muted); font-size:.8rem; text-align:center; }
@media (prefers-reduced-motion: reduce) { .tile { transition:none; } }

/* Cream number tiles on the blue tray shown in the cover. */
#board { background:linear-gradient(145deg,#2a88cf,#155b9b); box-shadow:0 14px 27px rgba(10,64,117,.22), inset 0 3px 0 rgba(255,255,255,.18); }
.tile { color:#1c4874; border:1px solid #d2e3f0; background:linear-gradient(145deg,#fffef2,#e6edf1); box-shadow:0 4px 0 #bbcede, 0 7px 10px rgba(11,58,100,.25), inset 0 2px 0 #fff; }
.tile.home { color:#fff; border-color:#65c7d1; background:linear-gradient(145deg,#62d7dc,#1097ab); box-shadow:0 4px 0 #0a6d85, 0 7px 10px rgba(11,58,100,.25); }