:root{--bg: #15161a;--panel: #1d1f25;--ink: #f1f1ee;--muted: #9aa0ab;--line: #2c2f37;--shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 10px 30px rgba(0, 0, 0, .35);--terr-rim: rgb(255 255 255 / .5);color-scheme:dark}:root[data-theme=light]{--bg: #f1f1ee;--panel: #ffffff;--ink: #1b1c20;--muted: #6b7280;--line: #e2e2dc;--shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 10px 30px rgba(0, 0, 0, .08);--terr-rim: rgb(255 255 255 / .65);color-scheme:light}@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--bg: #f1f1ee;--panel: #ffffff;--ink: #1b1c20;--muted: #6b7280;--line: #e2e2dc;--shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 10px 30px rgba(0, 0, 0, .08);--terr-rim: rgb(255 255 255 / .6);color-scheme:light}}:root{--c0: #c7000b;--c1: #d97900;--c2: #ffd404;--c3: #00af59;--c4: #0087fe;--c5: #8900bc;--c0-ink: #ffddd8;--c1-ink: #3e1e00;--c2-ink: #6a580d;--c3-ink: #003415;--c4-ink: #001b3e;--c5-ink: #e1c5f3;--accent: #f1f1ee;--accent-ink: #15161a}:root[data-theme=light]{--c0: #bb061a;--c1: #c96906;--c2: #d5b10e;--c3: #0fc557;--c4: #1171fd;--c5: #8d06c7;--c0-ink: #ffd2cc;--c1-ink: #270d00;--c2-ink: #514100;--c3-ink: #09451d;--c4-ink: #00081f;--c5-ink: #e7cdfc;--accent: #1b1c20;--accent-ink: #f1f1ee}@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--c0: #bb061a;--c1: #c96906;--c2: #d5b10e;--c3: #0fc557;--c4: #1171fd;--c5: #8d06c7;--c0-ink: #ffd2cc;--c1-ink: #270d00;--c2-ink: #514100;--c3-ink: #09451d;--c4-ink: #00081f;--c5-ink: #e7cdfc;--accent: #1b1c20;--accent-ink: #f1f1ee}}:root{--ease: cubic-bezier(.2, .7, .3, 1);--wash-step: 22ms;--wash-tail: .3s;--terr: #101116;--terr-w: 2.5px;--crest: rgb(255 255 255 / .5);--accent-dim: color-mix(in srgb, var(--accent) 35%, var(--panel))}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0}body{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}header,main,footer{width:100%;max-width:30rem;margin:0 auto}header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:14px 16px calc(14px + env(safe-area-inset-top));padding-top:max(14px,env(safe-area-inset-top))}header h1{margin:0;text-align:center;font-size:1.1rem;font-weight:650;letter-spacing:.01em}.icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--ink);cursor:pointer}.icon:hover{background:var(--panel)}.icon-spacer{width:40px}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 16px 24px;gap:14px;width:100%}#game{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}.tutorial-intro{margin:0;color:var(--muted);font-size:.95rem}.counter{margin:0;min-height:1.5em;font-size:1.05rem;color:var(--muted);text-align:center}.counter.flash.good{color:var(--accent);font-weight:650}.challenge{width:fit-content;margin:0 auto;padding:.35rem .9rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums}.board{--size: 12;container-type:inline-size;isolation:isolate;display:grid;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr);width:100%;aspect-ratio:1;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);transition:box-shadow .5s ease}.cell{position:relative;display:grid;place-items:center;background:var(--panel);transition:background-color var(--wash-tail) var(--ease),filter var(--wash-tail) var(--ease);transition-delay:calc(var(--d, 0) * var(--wash-step))}.cell:not(.mine){filter:brightness(.8) saturate(.9)}.cell[data-colour="0"],.swatch[data-colour="0"]{background:var(--c0);color:var(--c0-ink)}.cell[data-colour="1"],.swatch[data-colour="1"]{background:var(--c1);color:var(--c1-ink)}.cell[data-colour="2"],.swatch[data-colour="2"]{background:var(--c2);color:var(--c2-ink)}.cell[data-colour="3"],.swatch[data-colour="3"]{background:var(--c3);color:var(--c3-ink)}.cell[data-colour="4"],.swatch[data-colour="4"]{background:var(--c4);color:var(--c4-ink)}.cell[data-colour="5"],.swatch[data-colour="5"]{background:var(--c5);color:var(--c5-ink)}.glyph{opacity:0;line-height:1;user-select:none;transition:opacity .18s ease}:root[data-symbols=on] .glyph{opacity:1}.cell .glyph{font-size:13px;font-size:min(calc(100cqw / var(--size) * .5),28px)}.cell:before,.cell:after{content:"";position:absolute;inset:0;border:0 solid transparent;pointer-events:none;transition:border-width var(--wash-tail) var(--ease),border-color var(--wash-tail) var(--ease);transition-delay:calc(var(--d, 0) * var(--wash-step))}.cell:before{z-index:2}.cell:after{z-index:1}.cell.mine.b-t:before{border-top:var(--terr-w) solid var(--terr)}.cell.mine.b-r:before{border-right:var(--terr-w) solid var(--terr)}.cell.mine.b-b:before{border-bottom:var(--terr-w) solid var(--terr)}.cell.mine.b-l:before{border-left:var(--terr-w) solid var(--terr)}.cell.mine.b-t:after{border-top:calc(var(--terr-w) + 1px) solid var(--terr-rim)}.cell.mine.b-r:after{border-right:calc(var(--terr-w) + 1px) solid var(--terr-rim)}.cell.mine.b-b:after{border-bottom:calc(var(--terr-w) + 1px) solid var(--terr-rim)}.cell.mine.b-l:after{border-left:calc(var(--terr-w) + 1px) solid var(--terr-rim)}@keyframes wash{0%{transform:scale(1);box-shadow:inset 0 0 0 100px transparent}40%{transform:scale(1.06);box-shadow:inset 0 0 0 100px var(--crest)}to{transform:scale(1);box-shadow:inset 0 0 0 100px transparent}}.cell.wash{z-index:3;animation:wash var(--wash-tail) var(--ease) calc(var(--d, 0) * var(--wash-step))}.board.solved{box-shadow:0 0 0 1px var(--accent),0 0 40px -6px var(--accent)}.board.solved .cell:before,.board.solved .cell:after{border-color:transparent}.palette{display:flex;justify-content:center;gap:8px;width:min(100%,460px)}.swatch{flex:1 1 0;max-width:84px;aspect-ratio:1;display:grid;place-items:center;border:0;border-radius:14px;cursor:pointer;box-shadow:var(--shadow);transition:transform .18s var(--ease),opacity .3s var(--ease),box-shadow .18s var(--ease)}.swatch:active{transform:scale(.94)}.swatch .glyph{font-size:1.5rem}.swatch.current{transform:scale(.82);box-shadow:inset 0 0 0 3px color-mix(in srgb,currentColor 60%,transparent);cursor:default}.swatch:disabled{cursor:default}.swatch:disabled:not(.current){opacity:.5}.swatch.guide{outline:3px solid var(--accent);outline-offset:3px;animation:pulse 1.3s ease-in-out infinite}@keyframes pulse{0%,to{outline-color:var(--accent)}50%{outline-color:transparent}}.swatch.shake{animation:shake .34s ease}@keyframes shake{20%{transform:translate(-6px)}50%{transform:translate(5px)}80%{transform:translate(-3px)}}.moves{margin:0;color:var(--muted);font-variant-numeric:tabular-nums}#complete{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:20px}.done-label{margin:0;color:var(--muted)}.final-moves{margin:0;font-size:3.4rem;font-weight:700;line-height:1;color:var(--accent)}.done-unit{margin:0 0 6px;color:var(--muted)}.vs{margin:0;color:var(--ink)}.muted{color:var(--muted)}.streak{margin:2px 0 14px;color:var(--muted);min-height:1.4em}.primary,.secondary{border:0;border-radius:12px;padding:12px 22px;font-size:1rem;font-weight:600;cursor:pointer}.primary{background:var(--accent);color:var(--accent-ink)}.secondary{background:var(--panel);color:var(--ink);border:1px solid var(--line)}.link{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:.9rem}footer{text-align:center;color:var(--muted);font-size:.8rem;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}dialog{border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink);padding:20px;width:min(92vw,420px);box-shadow:var(--shadow)}dialog::backdrop{background:#00000080}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}dialog h2{margin:0;font-size:1.2rem}dialog h3{margin:16px 0 8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}dialog ol{margin:0;padding-left:1.2em;color:var(--ink)}dialog ol li{margin:6px 0}dialog .primary{margin-top:16px;width:100%}.segmented{display:flex;gap:6px}.segmented button{flex:1;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:10px;padding:8px;cursor:pointer}.segmented button.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.menu-actions{display:flex;gap:8px;margin-top:18px}.menu-actions .secondary{flex:1}.archive-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;max-height:60vh;overflow-y:auto;margin-top:8px}.archive-card{display:flex;flex-direction:column;gap:2px;padding:10px 8px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);cursor:pointer;text-align:left}.archive-card.solved{border-color:var(--accent-dim)}.archive-card.current{outline:2px solid var(--accent)}.archive-n{font-weight:650}.archive-note{font-size:.78rem;color:var(--muted)}@media(prefers-reduced-motion:reduce){:root{--wash-step: 0ms;--wash-tail: .12s}.cell.wash,.swatch.guide{animation:none}.swatch.shake{animation:blink .3s ease 2}@keyframes blink{50%{opacity:.45}}}
