/* Shared look for the puzzles: squared paper, ballpoint blue, pencil grey, red pen, yellow highlighter. */
@font-face{font-family:Archivo;src:url(../assets/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{--paper:#fbfdff;--rule:#cfe0f3;--ink:#1f3fbf;--pencil:#2c3038;--soft:#6b7385;--red:#d6342f;--hi:#ffe866;--ok:#167a45;--fill:#e9f1fb;
 --c1:#e4572e;--c2:#2e86de;--c3:#17a673;--c4:#f2b01e;--c5:#9b5de5;--c6:#e056a0;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#10151f;--rule:#2a3a55;--ink:#9db8ff;--pencil:#e8ebf2;--soft:#9aa5ba;--red:#ff7b74;--hi:#6b5a00;--ok:#6fdca6;--fill:#1a2333;color-scheme:dark}}
:root[data-theme=dark]{--paper:#10151f;--rule:#2a3a55;--ink:#9db8ff;--pencil:#e8ebf2;--soft:#9aa5ba;--red:#ff7b74;--hi:#6b5a00;--ok:#6fdca6;--fill:#1a2333;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--pencil);font:500 16px/1.4 Archivo,system-ui,sans-serif;display:flex;flex-direction:column;
 background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:24px 24px;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--paper);border-bottom:2px solid var(--pencil)}
#status{font-weight:700;font-variant-numeric:tabular-nums}
#stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:14px;min-height:0;overflow:auto}
#msg{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);max-width:92%;padding:12px 18px;border:2px solid var(--pencil);background:var(--paper);font-weight:800;text-align:center;box-shadow:4px 4px 0 var(--pencil);z-index:5}
#msg.won{border-color:var(--ok);box-shadow:4px 4px 0 var(--ok);color:var(--ok)}
#msg.lost{border-color:var(--red);box-shadow:4px 4px 0 var(--red);color:var(--red)}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.btn{min-height:40px;padding:0 14px;border:2px solid var(--pencil);background:var(--paper);font-weight:700;border-radius:4px}
.btn:hover{background:var(--fill)}
.btn.on{background:var(--hi)}
.btn:disabled{opacity:.4;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.note{color:var(--soft);font-size:.9rem;text-align:center;max-width:36ch}
.grid{--n:5;--w:min(92vw,62vh,440px);display:grid;grid-template-columns:repeat(var(--n),1fr);width:var(--w);border:2px solid var(--pencil);background:var(--paper)}
.cell{aspect-ratio:1;border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:transparent;padding:0;display:grid;place-items:center;
 font-weight:800;font-size:calc(var(--w)/var(--n)*.5);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;border-radius:0;min-width:0;overflow:hidden}
.cell:hover:not(:disabled){background:var(--fill)}
.cell.sel{background:var(--hi)}
.cell.given{color:var(--pencil)}
.cell.bad{color:var(--red)}
.cell.dark{background:var(--fill)}
.cell.on{background:var(--ink);color:var(--paper)}
.cell.hint{box-shadow:inset 0 0 0 3px var(--hi)}
.k1{background:var(--c1)!important;color:#fff!important}.k2{background:var(--c2)!important;color:#fff!important}.k3{background:var(--c3)!important;color:#fff!important}
.k4{background:var(--c4)!important;color:#1b1b1b!important}.k5{background:var(--c5)!important;color:#fff!important}.k6{background:var(--c6)!important;color:#fff!important}
.pad .btn{min-width:44px;min-height:44px;font-size:1.15rem;font-weight:800}
svg{display:block}