/* Biuno · one stylesheet · light + dark.
   Theme is set on <html data-theme>. Without JS the system preference applies. */
:root{
  color-scheme:light;
  --bg:#f5f6fb; --surface:#fff; --surface-2:#eef0f8; --surface-3:#e3e7f5;
  --ink:#141a33; --ink-2:#4a5174; --line:#dde0ee; --line-2:#c9cee4;
  --brand:#2444ac; --brand-2:#3b63e0; --brand-ink:#fff; --brand-soft:#e4e9fb;
  --good:#12805c; --good-soft:#dff5ec; --bad:#c2384a; --bad-soft:#fbe6ea; --warn:#b7791f;
  --back-a:#2444ac; --back-b:#4a72ee;
  --pad-0:#1f9d6b; --pad-1:#e0475b; --pad-2:#f2b01e; --pad-3:#3b63e0;
  --water:#2f7fe0; --water-soft:#dcebff; --ship:#47506f;
  --n1:#2444ac; --n2:#12805c; --n3:#c2384a; --n4:#6b3fb5; --n5:#9a5b12; --n6:#0f7f8f; --n7:#141a33; --n8:#6b7191;
  --x-col:var(--brand); --o-col:#d9475f;
  --glow:rgba(36,68,172,.35);
  --shadow-1:0 1px 2px rgba(20,26,51,.06),0 2px 8px rgba(20,26,51,.04);
  --shadow-2:0 2px 4px rgba(20,26,51,.06),0 14px 36px rgba(36,68,172,.12);
  --r-sm:10px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#0d1020; --surface:#161a30; --surface-2:#1e2340; --surface-3:#272d52;
  --ink:#eef0fb; --ink-2:#a9b0d4; --line:#2a3052; --line-2:#3a4270;
  --brand:#7d97ff; --brand-2:#9fb2ff; --brand-ink:#0d1020; --brand-soft:#232b57;
  --good:#4fd1a1; --good-soft:#143a31; --bad:#ff7a8c; --bad-soft:#42202a; --warn:#f2b45a;
  --back-a:#3548b8; --back-b:#6283f5;
  --pad-0:#34d399; --pad-1:#ff6b81; --pad-2:#fbbf24; --pad-3:#6f93ff;
  --water:#4b9bff; --water-soft:#14284d; --ship:#8c97c4;
  --n1:#7d97ff; --n2:#4fd1a1; --n3:#ff7a8c; --n4:#c2a1ff; --n5:#f2b45a; --n6:#5fd4e4; --n7:#eef0fb; --n8:#a9b0d4;
  --o-col:#ff7a8c;
  --glow:rgba(125,151,255,.45);
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 14px 36px rgba(0,0,0,.45);
}
@media(prefers-color-scheme:dark){:root:not([data-theme]){
  color-scheme:dark;
  --bg:#0d1020; --surface:#161a30; --surface-2:#1e2340; --surface-3:#272d52;
  --ink:#eef0fb; --ink-2:#a9b0d4; --line:#2a3052; --line-2:#3a4270;
  --brand:#7d97ff; --brand-2:#9fb2ff; --brand-ink:#0d1020; --brand-soft:#232b57;
  --good:#4fd1a1; --good-soft:#143a31; --bad:#ff7a8c; --bad-soft:#42202a; --warn:#f2b45a;
  --back-a:#3548b8; --back-b:#6283f5;
  --pad-0:#34d399; --pad-1:#ff6b81; --pad-2:#fbbf24; --pad-3:#6f93ff;
  --water:#4b9bff; --water-soft:#14284d; --ship:#8c97c4;
  --n1:#7d97ff; --n2:#4fd1a1; --n3:#ff7a8c; --n4:#c2a1ff; --n5:#f2b45a; --n6:#5fd4e4; --n7:#eef0fb; --n8:#a9b0d4;
  --o-col:#ff7a8c; --glow:rgba(125,151,255,.45);
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 14px 36px rgba(0,0,0,.45);
}}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 1.0625rem/1.6 var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;
  background-image:radial-gradient(60rem 30rem at 85% -10%,var(--brand-soft),transparent 70%);background-repeat:no-repeat;transition:background-color .35s,color .35s}
main{flex:1}
.wrap{width:min(100% - 2*var(--sp-4),980px);margin-inline:auto}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{line-height:1.15;letter-spacing:-.03em;font-weight:800}
.skip{position:absolute;left:var(--sp-4);top:-60px;background:var(--ink);color:var(--bg);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);z-index:60;transition:top .2s var(--ease)}
.skip:focus{top:var(--sp-3)}
[hidden]{display:none!important}

/* ───────── Header ───────── */
.site-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.site-header.stuck{border-color:var(--line);box-shadow:var(--shadow-1)}
.topbar{display:flex;align-items:center;gap:var(--sp-4);height:68px}
.wordmark{display:inline-flex;align-items:baseline;font-weight:800;font-size:1.6rem;letter-spacing:-.04em;color:var(--ink);text-decoration:none;padding:4px 2px;border-radius:var(--r-sm);user-select:none}
.wordmark .l{display:inline-block;transform-origin:50% 85%}
.wordmark .dot{display:inline-block;color:var(--brand);transform-origin:50% 80%;transition:transform .45s var(--spring),color .25s}
.wordmark:hover .dot,.wordmark:focus-visible .dot{transform:scale(2.1) translateY(-3px);color:var(--brand-2)}
.wordmark:hover .l,.wordmark:focus-visible .l{animation:wm-wave .7s var(--spring) both;animation-delay:calc(var(--i)*55ms)}
.wordmark .l.hop{animation:wm-hop .8s var(--spring)}
.wordmark .dot.hop{animation:wm-dot 1s var(--spring)}
@keyframes wm-wave{0%{transform:translateY(0)}35%{transform:translateY(-9px) rotate(-6deg) scale(1.12)}100%{transform:translateY(0)}}
@keyframes wm-hop{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-12px) scale(1.25,.9) rotate(-8deg)}55%{transform:translateY(0) scale(.9,1.12)}100%{transform:none}}
@keyframes wm-dot{0%{transform:scale(1)}30%{transform:scale(2.4) translateY(-5px)}60%{transform:scale(.8)}100%{transform:scale(1)}}
.main-nav{display:flex;gap:2px;margin-left:var(--sp-3)}
.main-nav a{position:relative;color:var(--ink-2);text-decoration:none;font:600 .9375rem var(--font);padding:8px 14px;border-radius:var(--r-pill);transition:color .2s,background .2s,transform .25s var(--spring)}
.main-nav a:hover{color:var(--ink);background:var(--surface-2);transform:translateY(-1px)}
.main-nav a[aria-current]{color:var(--brand);background:var(--brand-soft)}
.nav-controls{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}
.language{position:relative}
.language select{appearance:none;font:600 .875rem var(--font);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:0 32px 0 16px;height:40px;cursor:pointer;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.language::after{content:"";position:absolute;right:14px;top:50%;width:6px;height:6px;border:solid var(--ink-2);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none;transition:transform .25s var(--ease)}
.language:hover select{border-color:var(--brand);box-shadow:var(--shadow-1)}
.language:focus-within::after{transform:translateY(-30%) rotate(225deg)}
.icon-btn{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:transform .35s var(--spring),border-color .2s,background .2s,box-shadow .2s}
.icon-btn:hover{border-color:var(--brand);box-shadow:var(--shadow-1);transform:translateY(-2px) rotate(14deg)}
.icon-btn:active{transform:scale(.9)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#theme .sun{display:none}
:root[data-theme=dark] #theme .sun{display:block}
:root[data-theme=dark] #theme .moon{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme]) #theme .sun{display:block}:root:not([data-theme]) #theme .moon{display:none}}
.spin-once{animation:theme-spin .6s var(--spring)}
@keyframes theme-spin{from{transform:rotate(-180deg) scale(.6)}}

/* ───────── Shared bits ───────── */
.field-label{display:block;font:700 .6875rem var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.button,.text-button,.btn{font:700 .9375rem var(--font);border:0;cursor:pointer;border-radius:var(--r-pill);padding:12px 24px;min-height:44px;color:var(--brand-ink);background:var(--brand);
  box-shadow:0 4px 14px var(--glow);transition:transform .25s var(--spring),box-shadow .25s,background .2s,color .2s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.button:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px var(--glow)}
.button:active,.btn:active{transform:translateY(1px) scale(.97);box-shadow:0 2px 6px var(--glow)}
.button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.button.secondary{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.button.secondary:hover{box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--brand)}
.text-button{background:none;color:var(--brand);box-shadow:none;padding:8px 12px;min-height:0}
.text-button:hover{background:var(--brand-soft);box-shadow:none;transform:none}
.button.ghost{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}
.invite-play{font-size:1.0625rem;padding:15px 34px;position:relative;overflow:hidden}
.invite-play::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:shine 3.6s 1.2s infinite}
@keyframes shine{40%,100%{transform:translateX(120%)}}
.notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:var(--r-pill);box-shadow:var(--shadow-2);font-size:.9375rem;display:flex;gap:12px;align-items:center;animation:rise .4s var(--ease)}
.notice .text-button{color:var(--bg);text-decoration:underline}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes notice-in{from{opacity:0}}

/* ───────── Heading ───────── */
.game-heading,.home-heading{padding:var(--sp-7) 0 var(--sp-5);max-width:680px}
h1{font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.05;letter-spacing:-.035em;margin-bottom:var(--sp-3)}
.game-heading p,.home-heading p{font-size:1.125rem;color:var(--ink-2);max-width:58ch}
.game-heading>*,.home-heading>*{animation:rise .7s var(--ease) both}
.game-heading>*:nth-child(2),.home-heading>*:nth-child(2){animation-delay:.08s}

/* ───────── Play panel ───────── */
.play-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden;animation:rise .8s .15s var(--ease) both;transition:background .35s,border-color .35s}
.play-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-4) var(--sp-6);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line);background:var(--surface-2);transition:background .35s}
.toolbar-end{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
/* Difficulty: calm, neutral. The primary button is the one thing that shouts. */
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface-3);border-radius:var(--r-pill);padding:4px;height:44px;transition:opacity .25s}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{position:relative;z-index:1;display:grid;place-items:center;padding:0 18px;font:600 .875rem var(--font);color:var(--ink-2);cursor:pointer;border-radius:var(--r-pill);transition:color .25s;white-space:nowrap}
.seg label:hover{color:var(--ink)}
.seg input:checked+label{color:var(--ink)}
.seg input:focus-visible+label{outline:3px solid var(--brand);outline-offset:2px}
.seg .thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);background:var(--surface);border-radius:var(--r-pill);transition:transform .4s var(--spring);box-shadow:0 1px 3px rgba(20,26,51,.18),0 0 0 1px var(--line)}
.seg.is-locked{opacity:.55}.seg.is-locked label{cursor:not-allowed}
.pill{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--surface-3);font:600 .875rem var(--font);color:var(--ink)}
.pill strong{font:800 1rem var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pill .trophy{font-size:1rem;filter:saturate(.9)}
.pill.bump strong{animation:bump .5s var(--spring)}
@keyframes bump{40%{transform:scale(1.35);color:var(--brand)}}
.toolbar-note{font:700 .75rem var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);padding:8px 14px;border-radius:var(--r-pill)}
#sound[aria-pressed=false] .on,#sound[aria-pressed=true] .off{display:none}
.progress{height:6px;background:var(--surface-2);position:relative;overflow:hidden}
.progress i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--brand),var(--good));border-radius:0 var(--r-pill) var(--r-pill) 0;transition:width .6s var(--ease)}
#game-area{padding:var(--sp-5);min-height:420px;display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);position:relative}

/* start screen */
.round-start{margin:auto;text-align:center;padding:var(--sp-5) var(--sp-4);max-width:440px;display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.start-hero{font-size:4rem;line-height:1;display:inline-block;animation:float 3.2s ease-in-out infinite;filter:drop-shadow(0 10px 14px rgba(36,68,172,.25));cursor:default;font-family:var(--font-emoji)}
.start-hero:hover{animation:wiggle .6s var(--spring)}
@keyframes float{50%{transform:translateY(-10px) rotate(6deg)}}
@keyframes wiggle{30%{transform:scale(1.25) rotate(-12deg)}60%{transform:scale(1.15) rotate(10deg)}}
.round-start h2{font-size:1.625rem}
.round-start p{color:var(--ink-2)}
.start-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;margin-top:var(--sp-2)}
.start-note{font-size:.875rem}

/* readout + generic */
.readout{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;width:100%}
.readout span{background:var(--surface-2);border-radius:var(--r-pill);padding:6px 16px;font:600 .875rem var(--font);color:var(--ink-2);font-variant-numeric:tabular-nums;transition:background .3s}
.readout strong{color:var(--ink);font-weight:800}
.readout .streak{background:linear-gradient(90deg,#ff8a3d,#ff4d6d);color:#fff;animation:streak-in .5s var(--spring)}
@keyframes streak-in{from{transform:scale(.5);opacity:0}}
.game-message{font-weight:700;font-size:1.0625rem;text-align:center;min-height:1.6em;animation:rise .4s var(--ease)}
.action-row{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap;margin-top:auto;padding-top:var(--sp-2)}
.save-warning,.board-note,.code-legend{font-size:.875rem;color:var(--ink-2);text-align:center;max-width:46ch}
.board{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:clamp(8px,1.8vw,16px);width:min(100%,var(--bw,520px));margin-inline:auto}
.cell{aspect-ratio:1;display:grid;place-items:center;position:relative;border:2px solid var(--line);background:var(--surface);border-radius:var(--r-md);padding:0;cursor:pointer;font-size:clamp(1.9rem,6.2vw,3rem);line-height:1;
  transition:transform .3s var(--spring),border-color .2s,background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;animation:deal .5s var(--ease) both;animation-delay:calc(var(--i,0)*30ms)}
.cell .emoji-symbol{font-size:1em;font-family:var(--font-emoji);line-height:1;display:block}
button.cell:hover:not(:disabled){transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--shadow-1)}
button.cell:active:not(:disabled){transform:scale(.93)}
div.cell,span.cell{cursor:default}
@keyframes deal{from{opacity:0;transform:translateY(22px) scale(.82) rotate(-4deg)}}

/* ───────── Matching Pairs ───────── */
.pairs-board{perspective:1000px}
.card{aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;font-size:clamp(1.9rem,6.5vw,3rem);animation:deal .5s var(--ease) both;animation-delay:calc(var(--i)*32ms)}
.card .in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s var(--spring)}
.card:not(.up):hover .in{transform:translateY(-5px) rotateX(8deg)}
.card:not(.up):active .in{transform:scale(.93)}
.card.up .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;display:grid;place-items:center;border-radius:var(--r-md);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face .emoji-symbol{font-size:1em;font-family:var(--font-emoji);line-height:1}
.back{background:linear-gradient(145deg,var(--back-a),var(--back-b));box-shadow:0 6px 16px var(--glow);overflow:hidden}
.back::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.34),transparent 55%),repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 6px,transparent 6px 12px)}
.back::after{content:"b.";position:relative;font:800 .6em var(--font);letter-spacing:-.04em;color:rgba(255,255,255,.7)}
.card:not(.up):hover .back{filter:brightness(1.12)}
.front{transform:rotateY(180deg);background:var(--surface);border:2px solid var(--line-2);transition:background .3s,border-color .3s,box-shadow .3s}
.card.match .front{background:var(--good-soft);border-color:var(--good)}
.card.match .in{animation:pop .6s var(--spring)}
@keyframes pop{0%{transform:rotateY(180deg) scale(1)}40%{transform:rotateY(180deg) scale(1.2) rotate(4deg)}100%{transform:rotateY(180deg) scale(1)}}
.card.wrong .in{animation:shake .45s}
.card.wrong .front{border-color:var(--bad);background:var(--bad-soft)}
@keyframes shake{0%,100%{transform:rotateY(180deg)}20%{transform:rotateY(180deg) translateX(-7px)}40%{transform:rotateY(180deg) translateX(7px)}60%{transform:rotateY(180deg) translateX(-4px)}80%{transform:rotateY(180deg) translateX(4px)}}
.card[aria-disabled=true]{cursor:default}
.ring{position:absolute;inset:0;border-radius:var(--r-md);border:3px solid var(--good);pointer-events:none;animation:ring .7s var(--ease) forwards}
@keyframes ring{to{transform:scale(1.55);opacity:0}}
.spark{position:fixed;left:0;top:0;z-index:80;pointer-events:none;font-size:1rem;line-height:1;will-change:transform,opacity}

/* ───────── What Changed ───────── */
.question-board .cell{font-size:clamp(2.2rem,8vw,3.6rem)}
.question-board.selecting .cell{border-color:var(--line-2)}
.question-board.shuffled .cell{animation:shuffle .65s var(--ease) both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes shuffle{0%{transform:scale(.4) rotate(-30deg);opacity:0}60%{transform:scale(1.1) rotate(6deg);opacity:1}}
.cell.is-answer{border-color:var(--good);background:var(--good-soft);animation:pop2 .6s var(--spring)}
.cell.is-picked-wrong{border-color:var(--bad);background:var(--bad-soft);animation:shake2 .45s}
@keyframes pop2{40%{transform:scale(1.15)}}
@keyframes shake2{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.cell.is-answer::after{content:"NEW";position:absolute;top:-9px;right:-6px;font:800 .625rem var(--font);letter-spacing:.08em;background:var(--good);color:var(--surface);padding:3px 8px;border-radius:var(--r-pill)}

/* ───────── Sequence Memory ───────── */
.sequence-board{--bw:380px;--cols:2}
.sequence-pad{font:800 1.5rem var(--font);color:rgba(255,255,255,.9);border:0;border-radius:var(--r-lg);background:color-mix(in srgb,var(--c) 78%,var(--surface));box-shadow:inset 0 -6px 0 rgba(0,0,0,.14);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.sequence-pad:hover:not(:disabled){background:color-mix(in srgb,var(--c) 80%,var(--surface));border-color:transparent}
.sequence-pad.pad-0{--c:var(--pad-0)}.sequence-pad.pad-1{--c:var(--pad-1)}.sequence-pad.pad-2{--c:var(--pad-2)}.sequence-pad.pad-3{--c:var(--pad-3)}
.sequence-pad:disabled{cursor:default}
.sequence-pad.flash{background:var(--c);transform:scale(1.05);box-shadow:0 0 0 4px var(--surface),0 0 0 8px var(--c),0 0 42px var(--c);z-index:1}
.sequence-steps{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sequence-steps span{width:12px;height:12px;border-radius:50%;background:var(--surface-3);transition:background .3s,transform .4s var(--spring)}
.sequence-steps span.done{background:var(--brand);transform:scale(1.25)}

/* ───────── Codebreaker ───────── */
.code-board{display:grid;gap:8px;width:min(100%,calc(var(--length)*78px + 120px))}
.code-row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;animation:rise .45s var(--ease) both}
.code-number{font:700 .8125rem var(--font);color:var(--ink-2);text-align:center}
.code-pegs{display:grid;grid-template-columns:repeat(var(--length),1fr);gap:8px}
.code-peg{aspect-ratio:1;margin-inline:auto;width:100%;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--surface-2);border:2px solid var(--line);font-size:clamp(1.4rem,5vw,2rem);line-height:1;padding:0}
.code-peg .emoji-symbol{font-size:1em}
button.code-peg{cursor:pointer;transition:transform .25s var(--spring),border-color .2s}
button.code-peg:hover{transform:translateY(-3px)}
.code-peg[aria-current=true]{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);animation:pulse-ring 1.6s infinite}
@keyframes pulse-ring{50%{box-shadow:0 0 0 8px transparent}}
.code-peg.filled{animation:pegpop .35s var(--spring)}
@keyframes pegpop{from{transform:scale(.6)}}
.code-peg span{color:var(--ink-2);font-weight:800}
.code-clues{display:grid;grid-template-columns:repeat(3,14px);gap:4px;min-width:58px;justify-content:center}
.code-clues i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);display:block;animation:pegpop .4s var(--spring) both;animation-delay:calc(var(--k)*70ms)}
.code-clues i.exact{background:var(--good);border-color:var(--good)}
.code-clues i.other{background:var(--surface);border-color:var(--warn)}
.code-clues.none{display:block;color:var(--ink-2);text-align:center}
.code-legend{display:flex;gap:16px;align-items:center;justify-content:center}
.code-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:6px;border:2px solid var(--line-2)}
.code-legend i.exact{background:var(--good);border-color:var(--good)}.code-legend i.other{border-color:var(--warn)}
.code-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:min(100%,460px)}
.code-palette button{aspect-ratio:1;border-radius:var(--r-md);background:var(--surface);border:2px solid var(--line);cursor:pointer;font-size:clamp(1.5rem,5.6vw,2.2rem);line-height:1;display:grid;place-items:center;padding:0;position:relative;transition:transform .25s var(--spring),border-color .2s,box-shadow .2s}
.code-palette button:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--shadow-1)}
.code-palette button:active{transform:scale(.9)}
.code-palette button kbd{position:absolute;right:5px;bottom:2px;font:700 .625rem var(--font);color:var(--ink-2);opacity:.7}
.code-palette .emoji-symbol{font-size:1em}

/* ───────── Pipes ───────── */
.pipe-board{--bw:420px;gap:6px}
.pipe-tile{border-radius:var(--r-sm);color:var(--ink-2);background:var(--surface-2);border:2px solid var(--line);padding:6px;animation:deal .5s var(--ease) both;animation-delay:calc(var(--i,0)*28ms)}
.pipe-tile svg{width:100%;height:100%;display:block;overflow:hidden;border-radius:6px}
.pipe-tile.spin svg{animation:rot90 .32s var(--spring)}
@keyframes rot90{from{transform:rotate(-90deg)}}
.pipe-tile.reached{color:var(--water);background:var(--water-soft);border-color:color-mix(in srgb,var(--water) 40%,transparent)}
.pipe-tile.reached svg{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--water) 60%,transparent))}
.pipe-tile.source{border-color:var(--brand)}
.pipe-board.solved .pipe-tile{animation:wave .7s var(--spring) both;animation-delay:calc(var(--i)*40ms)}
@keyframes wave{40%{transform:translateY(-8px) scale(1.06)}}

/* ───────── Mental Math ───────── */
.math-card{width:min(100%,460px);background:linear-gradient(145deg,var(--brand-soft),var(--surface-2));border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-4);text-align:center}
.math-equation{font:800 clamp(2.4rem,9vw,3.8rem)/1.1 var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums;animation:equation .5s var(--spring)}
.math-equation span{color:var(--brand)}
@keyframes equation{from{opacity:0;transform:translateY(16px) scale(.92)}}
.math-answers{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);width:min(100%,460px)}
.math-answers button{position:relative;font:800 1.75rem var(--font);font-variant-numeric:tabular-nums;padding:20px 12px;border-radius:var(--r-md);border:2px solid var(--line);background:var(--surface);cursor:pointer;transition:transform .25s var(--spring),border-color .2s,background .2s,box-shadow .2s;animation:deal .45s var(--ease) both;animation-delay:calc(var(--i,0)*60ms)}
.math-answers button:hover:not(:disabled){transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow-1)}
.math-answers button:active:not(:disabled){transform:scale(.95)}
.math-answers button kbd{position:absolute;left:10px;top:8px;font:700 .6875rem var(--font);color:var(--ink-2);opacity:.6}
.math-answers button.is-right{border-color:var(--good);background:var(--good-soft);animation:pop2 .55s var(--spring)}
.math-answers button.is-wrong{border-color:var(--bad);background:var(--bad-soft);animation:shake2 .45s}
.math-answers button:disabled{cursor:default}
.math-answers button:disabled:not(.is-right):not(.is-wrong){opacity:.5}
.round-dots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.round-dots i{width:10px;height:10px;border-radius:50%;background:var(--surface-3);transition:background .3s,transform .4s var(--spring)}
.round-dots i.ok{background:var(--good)}.round-dots i.no{background:var(--bad)}.round-dots i.now{background:var(--brand);transform:scale(1.4)}

/* feedback */
.feedback-box{width:min(100%,460px);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);text-align:center;border:1px solid;animation:rise .4s var(--ease);display:flex;flex-direction:column;align-items:center;gap:6px}
.feedback-box.good{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.feedback-box.bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.feedback-box h2{font-size:1.25rem}
.feedback-box p{color:var(--ink-2);font-size:.9375rem}
.feedback-box .button{margin-top:4px}

/* ───────── Minesweeper ───────── */
.mine-tools{display:inline-grid;grid-template-columns:1fr 1fr;background:var(--surface-3);border-radius:var(--r-pill);padding:4px;gap:2px}
.mine-tools button{border:0;background:none;padding:10px 22px;border-radius:var(--r-pill);font:700 .875rem var(--font);color:var(--ink-2);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.mine-tools button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(20,26,51,.18),0 0 0 1px var(--line)}
.classic-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(4px,1vw,8px);width:min(100%,var(--bw,420px));margin-inline:auto}
.mine-cell{aspect-ratio:1;border-radius:var(--r-sm);border:0;padding:0;cursor:pointer;font:800 clamp(1.1rem,4.4vw,1.7rem) var(--font);display:grid;place-items:center;position:relative;
  background:linear-gradient(160deg,var(--brand-2),var(--brand));color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2);transition:transform .2s var(--spring),filter .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-touch-callout:none;user-select:none}
.mine-cell:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-2px)}
.mine-cell:active:not(:disabled){transform:scale(.92)}
.mine-cell.opened{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);cursor:default;animation:reveal .35s var(--ease) both;animation-delay:calc(var(--d,0)*55ms)}
@keyframes reveal{from{transform:scale(.6);opacity:.3;background:var(--brand)}}
.number-1{color:var(--n1)}.number-2{color:var(--n2)}.number-3{color:var(--n3)}.number-4{color:var(--n4)}.number-5{color:var(--n5)}.number-6{color:var(--n6)}.number-7{color:var(--n7)}.number-8{color:var(--n8)}
.mine-cell:disabled:not(.opened){opacity:1}
.mine-cell .flag{animation:plant .45s var(--spring);display:block}
@keyframes plant{from{transform:translateY(-14px) scale(.4);opacity:0}}
.mine-cell.boom{background:var(--bad)!important;animation:boom .7s var(--ease)}
@keyframes boom{0%{transform:scale(1)}20%{transform:scale(1.5) rotate(8deg)}100%{transform:scale(1)}}
.board-shake{animation:shake2 .5s}

/* ───────── Sea Battle ───────── */
.sea-boards{display:grid;gap:var(--sp-5);width:100%;justify-items:center}
@media(min-width:720px){.sea-boards{grid-template-columns:1.25fr 1fr;align-items:start}}
.sea-board{width:100%;text-align:center}
.sea-board h3{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--sp-2)}
.sea-board>p{font-size:.875rem;color:var(--ink-2);margin-top:var(--sp-2)}
.sea-grid{padding:8px;border-radius:var(--r-md);background:linear-gradient(180deg,var(--water-soft),color-mix(in srgb,var(--water) 18%,var(--surface)));border:1px solid color-mix(in srgb,var(--water) 30%,transparent);--bw:100%}
.sea-cell{aspect-ratio:1;border:0;border-radius:8px;padding:0;position:relative;display:grid;place-items:center;background:color-mix(in srgb,var(--water) 20%,transparent);cursor:pointer;font:800 1rem var(--font);transition:transform .2s var(--spring),background .2s;overflow:hidden;-webkit-tap-highlight-color:transparent}
.sea-cell:disabled{cursor:default}
.sea-cell:hover:not(:disabled){background:color-mix(in srgb,var(--water) 45%,transparent);transform:scale(1.1);z-index:1}
.sea-cell.ship-cell{background:var(--ship);color:var(--surface)}
.sea-cell.hit-cell{background:var(--bad);color:#fff}
.sea-cell.hit-cell::before{content:"🔥";font-size:1.1em;animation:burn .7s var(--spring)}
.sea-cell.hit-cell.ship-cell.sunk-cell{background:var(--ink);}
.sea-cell.miss-cell::before{content:"";width:28%;aspect-ratio:1;border-radius:50%;background:var(--water);opacity:.8;animation:splash .6s var(--ease)}
.sea-cell.new-cell.miss-cell::after{content:"";position:absolute;inset:20%;border-radius:50%;border:2px solid var(--water);animation:ripple .8s var(--ease) forwards}
@keyframes burn{from{transform:scale(0) rotate(-40deg)}}
@keyframes splash{from{transform:scale(2.4);opacity:0}}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

/* ───────── Tic-tac-toe ───────── */
.tic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2vw,14px);width:min(100%,340px);margin-inline:auto}
.tic-cell{aspect-ratio:1;border-radius:var(--r-md);border:2px solid var(--line);background:var(--surface);padding:14%;cursor:pointer;display:grid;place-items:center;position:relative;transition:transform .25s var(--spring),border-color .2s,background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.tic-cell:disabled{cursor:default}
.tic-cell:hover:not(:disabled){transform:translateY(-3px);border-color:var(--brand);background:var(--brand-soft)}
.tic-cell:hover:not(:disabled)::after{content:"";position:absolute;inset:26%;background:var(--x-col);opacity:.18;clip-path:polygon(10% 0,50% 40%,90% 0,100% 10%,60% 50%,100% 90%,90% 100%,50% 60%,10% 100%,0 90%,40% 50%,0 10%)}
.tic-cell svg{width:100%;height:100%;overflow:visible;fill:none;stroke-width:11;stroke-linecap:round}
.mark-x svg{stroke:var(--x-col)}.mark-o svg{stroke:var(--o-col)}
.tic-cell svg path,.tic-cell svg circle{stroke-dasharray:1;stroke-dashoffset:0}
.tic-cell.new-cell svg path,.tic-cell.new-cell svg circle{animation:draw .45s var(--ease) both}
.tic-cell.new-cell svg path+path{animation-delay:.18s}
@keyframes draw{from{stroke-dashoffset:1}}
.tic-cell.winning-cell{background:var(--good-soft);border-color:var(--good);animation:pop2 .6s var(--spring)}
.tic-cell.winning-cell svg{stroke:var(--good)}

/* ───────── Result ───────── */
.result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);width:min(100%,640px);animation:rise .5s var(--ease)}
.result h2{font-size:clamp(1.75rem,5vw,2.25rem);outline:0}
.result-overview{display:grid;gap:var(--sp-5);align-items:center;justify-items:center;width:100%}
@media(min-width:620px){.result-overview{grid-template-columns:auto 1fr;justify-items:start;text-align:left;gap:var(--sp-6)}.score-summary{text-align:left}}
.result-snapshot{width:176px;margin:0;pointer-events:none;background:var(--surface-2);border-radius:var(--r-md);padding:10px;border:1px solid var(--line)}
.result-snapshot figcaption{font-size:.75rem;color:var(--ink-2);margin-top:6px;text-align:center}
.snapshot-art .board{gap:4px}.snapshot-art .cell{animation:none;border-width:1px;font-size:1.1rem;border-radius:6px}
.snapshot-art .cell.matched{background:var(--good-soft);border-color:var(--good)}
.snapshot-art .cell.snapshot-answer{border-color:var(--good);background:var(--good-soft)}
.snapshot-art .classic-grid{--bw:100%;gap:2px}.snapshot-art .mine-cell,.snapshot-art .sea-cell{font-size:.55rem;animation:none}
.snapshot-art .tic-grid{gap:4px}.snapshot-art .tic-cell{padding:12%}.snapshot-art .tic-cell svg *{animation:none!important}
.snapshot-art .sea-boards{grid-template-columns:1fr}.snapshot-art .sea-board:last-child,.snapshot-art .mine-tools,.snapshot-art .board-note,.snapshot-art .game-message,.snapshot-art .sea-board h3,.snapshot-art .sea-board>p{display:none}
.snapshot-art .sea-grid{padding:3px}
.snapshot-art .pipe-tile{padding:2px;animation:none;border-width:1px}
.snapshot-sequence{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.snapshot-sequence span{aspect-ratio:1;display:grid;place-items:center;border-radius:6px;color:#fff;font:800 .8rem var(--font)}
.snapshot-sequence .pad-0{background:var(--pad-0)}.snapshot-sequence .pad-1{background:var(--pad-1)}.snapshot-sequence .pad-2{background:var(--pad-2)}.snapshot-sequence .pad-3{background:var(--pad-3)}
.snapshot-code{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;font-size:1.1rem}
.snapshot-code .cell{animation:none;border-width:1px}
.snapshot-math{font:800 1.4rem/1.3 var(--font);padding:12px 0}
.result-label{display:block;font:700 .6875rem var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.result-score{font:800 clamp(3.4rem,12vw,4.8rem)/1 var(--font);color:var(--brand);letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin-top:4px}
.score-unit{font-weight:600;color:var(--ink-2);font-size:.9375rem}
.result-detail{color:var(--ink-2);font-size:.9375rem;margin-top:var(--sp-2)}
.result-encouragement{font-weight:700;font-size:1.0625rem}
.result-invite{color:var(--ink-2);font-size:.9375rem}
.result-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;align-items:center;width:min(100%,640px)}
.result-secondary{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.play-again{margin-left:auto}
.intro-game{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);max-width:420px}
.intro-game h2{outline:0}.intro-game p{color:var(--ink-2)}
.intro-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center}
.confetti-0{background:var(--brand)}.confetti-1{background:var(--good)}.confetti-2{background:#f5a524}.confetti-3{background:#e5484d}

/* ───────── Info accordions: stacked, animated ───────── */
.game-facts{display:grid;gap:var(--sp-3);margin:var(--sp-6) 0 var(--sp-8)}
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);transition:border-color .25s,box-shadow .25s,background .35s}
details:hover{border-color:var(--line-2)}details[open]{box-shadow:var(--shadow-1);border-color:var(--line-2)}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);font-weight:700;font-size:1.0625rem;cursor:pointer;border-radius:var(--r-md)}
summary::-webkit-details-marker{display:none}
.help-toggle{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-weight:800;transition:transform .35s var(--spring),background .25s,color .25s}
summary:hover .help-toggle{transform:scale(1.12)}
details[open] .help-toggle{transform:rotate(135deg);background:var(--brand);color:var(--brand-ink)}
.collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
details[open] .collapse{grid-template-rows:1fr}
.collapse>div{overflow:hidden}
.collapse .body{padding:0 var(--sp-5) var(--sp-5);color:var(--ink-2);max-width:72ch}
.collapse h2{font-size:1.0625rem;color:var(--ink);margin-bottom:var(--sp-2);letter-spacing:-.02em}
.collapse p+p,.collapse li+li{margin-top:var(--sp-3)}
.collapse ol,.collapse ul{padding-left:1.3em}
.collapse li::marker{color:var(--brand);font-weight:800}
.brain-note{font-size:.875rem;border-left:3px solid var(--line-2);padding-left:var(--sp-3)}

/* ───────── Home ───────── */
.catalog{margin-bottom:var(--sp-7)}
.filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.filters button{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:600 .9375rem var(--font);padding:9px 18px;border-radius:var(--r-pill);cursor:pointer;transition:transform .25s var(--spring),background .2s,color .2s,border-color .2s}
.filters button:hover{transform:translateY(-2px);border-color:var(--brand);color:var(--ink)}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.game-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.game-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;transition:transform .35s var(--spring),box-shadow .3s,border-color .2s;animation:rise .6s var(--ease) both}
.game-card:nth-child(2){animation-delay:.04s}.game-card:nth-child(3){animation-delay:.08s}.game-card:nth-child(4){animation-delay:.12s}.game-card:nth-child(5){animation-delay:.16s}.game-card:nth-child(6){animation-delay:.2s}.game-card:nth-child(7){animation-delay:.24s}.game-card:nth-child(8){animation-delay:.28s}.game-card:nth-child(9){animation-delay:.32s}
.game-card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--shadow-2);border-color:var(--brand)}
.card-art{height:150px;display:grid;place-items:center;background:linear-gradient(145deg,var(--brand-soft),var(--surface-2));overflow:hidden;transition:background .35s}
.card-art>*{transition:transform .5s var(--spring)}
.game-card:hover .card-art>*{transform:scale(1.08) rotate(2deg)}
.card-details{padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.card-details h3{font-size:1.25rem;margin:4px 0}
.card-details p{color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.game-meta{display:flex;gap:var(--sp-2);font:700 .6875rem var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.game-meta span+span{color:var(--ink-2)}
.game-meta span+span::before{content:"· ";}
.emoji-symbol{font-family:var(--font-emoji)}
/* card previews */
.preview-cards{display:grid;grid-template-columns:repeat(3,52px);gap:8px}
.preview-cards span{aspect-ratio:1;display:grid;place-items:center;font-size:1.6rem;background:var(--surface);border:2px solid var(--line);border-radius:10px}
.preview-cards .covered{background:linear-gradient(145deg,var(--back-a),var(--back-b));border:0}
.card-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.6)}
.preview-change{display:grid;grid-template-columns:repeat(2,58px);gap:8px}
.preview-change span{aspect-ratio:1;display:grid;place-items:center;font-size:1.8rem;background:var(--surface);border:2px solid var(--line);border-radius:12px}
.preview-change .outlined{border-color:var(--good);background:var(--good-soft)}
.preview-sequence{display:grid;grid-template-columns:repeat(2,54px);gap:8px}
.preview-sequence span{aspect-ratio:1;display:grid;place-items:center;border-radius:14px;color:#fff;font:800 1.1rem var(--font)}
.preview-sequence .pad-0{background:var(--pad-0)}.preview-sequence .pad-1{background:var(--pad-1)}.preview-sequence .pad-2{background:var(--pad-2)}.preview-sequence .pad-3{background:var(--pad-3)}
.game-card:hover .preview-sequence .pad-1{animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.14);box-shadow:0 0 22px var(--pad-1)}}
.preview-pipes{display:grid;grid-template-columns:repeat(3,48px);gap:4px;color:var(--water)}
.preview-pipes span{aspect-ratio:1;background:var(--surface);border:2px solid var(--line);border-radius:8px;padding:4px;display:block}
.preview-pipes svg{width:100%;height:100%;display:block}
.preview-code{display:grid;gap:6px}
.preview-code>div{display:flex;align-items:center;gap:6px;background:var(--surface);padding:5px 8px;border-radius:10px;border:1px solid var(--line)}
.preview-code span{font-size:1.1rem}.preview-code b{font-size:.75rem;color:var(--good);margin-left:6px;letter-spacing:.1em}
.preview-math{text-align:center}
.preview-math>span{font:800 1.9rem var(--font);display:block;margin-bottom:8px}.preview-math b{color:var(--brand)}
.preview-math>div{display:flex;gap:6px}
.preview-math i{font:700 .95rem var(--font);font-style:normal;background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:6px 12px}
.preview-math .answer-preview{border-color:var(--good);background:var(--good-soft)}
.classic-preview{font:800 1.35rem/1.55 var(--font);text-align:center;letter-spacing:.12em}
.tic-preview{font-size:1.9rem;line-height:1.2}
.classic-preview b{color:var(--brand)}
.daily-section{margin-bottom:var(--sp-8)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.section-head h2{font-size:1.5rem}.section-head time{color:var(--ink-2);font-size:.9375rem}
.daily-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.daily-item{display:flex;gap:var(--sp-4);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);text-decoration:none;color:inherit;transition:transform .3s var(--spring),border-color .2s,box-shadow .2s}
.daily-item:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow-1)}
.daily-item>span:first-child{font:800 1.5rem var(--font);color:var(--brand);letter-spacing:-.03em}
.daily-item h3{font-size:1.0625rem}.daily-item small{color:var(--ink-2)}

/* ───────── Documents / progress ───────── */
.document,.progress-section{max-width:720px;padding:var(--sp-7) 0 var(--sp-8)}
.document h1,.progress-section h1{font-size:clamp(2rem,4.5vw,2.8rem)}
.document h2{font-size:1.25rem;margin:var(--sp-5) 0 var(--sp-2)}
.document p,.document address{margin-bottom:var(--sp-3);color:var(--ink-2)}
.document address{font-style:normal}
.lede{font-size:1.125rem}
.email,.text-link{color:var(--brand);font-weight:700}
.summary-stats{display:flex;gap:var(--sp-4);margin:var(--sp-5) 0}
.summary-stats>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);min-width:140px}
.summary-stats strong{display:block;font:800 2rem var(--font);color:var(--brand);letter-spacing:-.03em}
.summary-stats span{font-size:.875rem;color:var(--ink-2)}
.progress-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-size:.9375rem}
.progress-table th,.progress-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
.progress-table th{font:700 .6875rem var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:var(--surface-2)}
.progress-table a{color:var(--brand);font-weight:700;text-decoration:none}
.data-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-5) 0 var(--sp-3);align-items:center}
.local-caption{font-size:.875rem;color:var(--ink-2)}
.empty-progress{padding:var(--sp-6) 0}.empty-progress p{color:var(--ink-2);margin:var(--sp-2) 0 var(--sp-4)}
.share-dialog,dialog{border:0;border-radius:var(--r-lg);padding:var(--sp-6);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2);width:min(92vw,420px);margin:auto}
dialog::backdrop{background:rgba(13,16,32,.55);backdrop-filter:blur(4px)}
dialog[open]{animation:modal .45s var(--spring)}
@keyframes modal{from{opacity:0;transform:translateY(24px) scale(.92)}}
.share-dialog label{display:block;margin:var(--sp-3) 0;color:var(--ink-2);font-size:.9375rem}
.share-dialog input{width:100%;margin-top:var(--sp-2);padding:12px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface-2)}

/* ───────── Footer ───────── */
.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);padding:var(--sp-5) 0 var(--sp-6);border-top:1px solid var(--line);color:var(--ink-2);font-size:.9375rem}
.footer nav{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.footer a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .3s var(--ease),color .2s}
.footer a:hover{color:var(--brand);background-size:100% 2px}

@media(max-width:760px){.main-nav a:not(.all){display:none}}
@media(max-width:640px){
  .topbar{gap:var(--sp-2)}.main-nav{margin-left:0}
  .play-toolbar{padding:var(--sp-4);gap:var(--sp-3)}
  .play-toolbar>.field:first-child{width:100%}.seg{width:100%}
  .seg label{padding:0 8px}
  #game-area{padding:var(--sp-5) var(--sp-3)}
  summary{padding:var(--sp-4)}.collapse .body{padding:0 var(--sp-4) var(--sp-4)}
  .game-heading,.home-heading{padding-top:var(--sp-6)}
  .result-actions{flex-direction:column-reverse;align-items:stretch}.play-again{margin-left:0;width:100%}.result-secondary .button{flex:1}
}
@media(max-width:380px){.wordmark{font-size:1.35rem}.language select{padding-left:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ───────── state refinements: animate only what is new ───────── */
.game-message{animation:none}
.static .cell{animation:none}
.static .cell.is-answer{animation:pop2 .6s var(--spring)}
.static .cell.is-picked-wrong{animation:shake2 .45s}
.math-card.static .math-equation{animation:none}
.math-answers.static button:not(.is-right):not(.is-wrong){animation:none}
.sequence-board .cell,.code-palette button{animation:none}
.pipe-board:not(.fresh) .pipe-tile{animation:none}
.pipe-board.solved .pipe-tile{animation:wave .7s var(--spring) both;animation-delay:calc(var(--i)*40ms)}
.mine-cell.opened{animation:none}
.mine-cell.opened.new-cell{animation:reveal .35s var(--ease) both;animation-delay:calc(var(--d,0)*55ms)}
.mine-cell .flag{animation:none}
.mine-cell.just-flag .flag{animation:plant .45s var(--spring)}
.sea-cell.hit-cell::before{animation:none}
.sea-cell.new-cell.hit-cell::before{animation:burn .7s var(--spring)}
.sea-cell.miss-cell::before{animation:none}
.sea-cell.new-cell.miss-cell::before{animation:splash .6s var(--ease)}
.code-row{animation:none}
.code-row.fresh{animation:rise .45s var(--ease) both}
.code-clues i{animation:none}
.code-row.fresh .code-clues i{animation:pegpop .4s var(--spring) both;animation-delay:calc(var(--k)*70ms)}
.card.match .in{animation:pop .6s .42s var(--spring)}
.ring{opacity:0;animation:ring .7s .42s var(--ease) forwards}
@keyframes ring{from{opacity:.9;transform:scale(1)}to{transform:scale(1.55);opacity:0}}
.card.wrong .in{animation:shake .45s}

/* ───────── Landing: daily hero ───────── */
.daily-hero{display:grid;gap:var(--sp-5);margin:var(--sp-6) 0 var(--sp-7);padding:var(--sp-6);border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(135deg,var(--brand-soft),var(--surface) 70%);box-shadow:var(--shadow-2);position:relative;overflow:hidden;animation:rise .7s var(--ease) both}
.daily-hero::before{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 70%);opacity:.5;pointer-events:none}
@media(min-width:820px){.daily-hero{grid-template-columns:1.1fr 1fr;align-items:center}}
.kicker{display:inline-flex;font:700 .75rem var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--brand);background:var(--surface);padding:6px 12px;border-radius:var(--r-pill);margin-bottom:var(--sp-3);box-shadow:var(--shadow-1)}
.daily-hero h1{font-size:clamp(2rem,4.6vw,3.1rem);margin-bottom:var(--sp-3)}
.daily-hero p{color:var(--ink-2);font-size:1.0625rem;max-width:46ch}
.dh-actions{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-5)}
.dh-count{font:700 .875rem var(--font);color:var(--ink-2)}
.dh-games{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);position:relative}
.dh-game{display:flex;align-items:center;gap:var(--sp-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);text-decoration:none;color:inherit;transition:transform .3s var(--spring),border-color .2s,box-shadow .2s;animation:rise .6s calc(.15s + var(--k)*.07s) var(--ease) both;position:relative}
.dh-game:hover{transform:translateY(-4px) rotate(-.6deg);border-color:var(--brand);box-shadow:var(--shadow-1)}
.dh-emoji{font-size:1.7rem;line-height:1;font-family:var(--font-emoji);transition:transform .4s var(--spring)}
.dh-game:hover .dh-emoji{transform:scale(1.2) rotate(-8deg)}
.dh-name{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.dh-name strong{font-size:.9375rem;letter-spacing:-.01em}.dh-name small{color:var(--ink-2);font-size:.75rem}
.dh-check{margin-left:auto;display:none;width:22px;height:22px;border-radius:50%;background:var(--good);color:#fff;font:800 .75rem var(--font);place-items:center}
.dh-game.done{border-color:var(--good);background:var(--good-soft)}.dh-game.done .dh-check{display:grid}
@media(max-width:480px){.dh-games{grid-template-columns:1fr}.daily-hero{padding:var(--sp-5)}}
.catalog .section-head{margin-bottom:var(--sp-4)}
.art-svg{width:100%;height:100%;display:block;overflow:visible}
.a-card{transition:transform .5s var(--spring);transform-box:fill-box;transform-origin:center}
.game-card:hover .a-card:nth-of-type(1){transform:translate(66px,70px) rotate(-16deg)}
.a-flow{stroke-dasharray:1;stroke-dashoffset:1;animation:flow 2.6s var(--ease) infinite}
@keyframes flow{0%{stroke-dashoffset:1}60%,100%{stroke-dashoffset:0}}
.a-spark{animation:twinkle 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes twinkle{50%{transform:scale(1.35) rotate(15deg);opacity:.7}}
.a-glow{animation:pulse-art 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse-art{50%{transform:scale(1.1);filter:drop-shadow(0 0 10px var(--pad-1))}}
.a-lens{animation:lens 4s ease-in-out infinite}
@keyframes lens{50%{transform:translate(168px,76px)}}
.a-ship{animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px) rotate(-1.5deg)}}
.a-ripple{animation:ripple-art 2s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ripple-art{to{transform:scale(2.2);opacity:0}}
.a-drop{animation:dropdisc 2.4s var(--ease) infinite}
@keyframes dropdisc{0%{transform:translateY(-14px);opacity:0}15%{opacity:1}60%,100%{transform:translateY(98px);opacity:1}}
.a-flip{animation:flipdisc 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes flipdisc{50%{transform:scaleX(.1)}}
.a-merge{animation:mergepop 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes mergepop{50%{transform:scale(1.12)}}
.a-draw{stroke-dasharray:60;animation:drawart 3s ease infinite}
@keyframes drawart{0%{stroke-dashoffset:60}50%,100%{stroke-dashoffset:0}}
.a-bomb{animation:twinkle 1.8s infinite;transform-box:fill-box;transform-origin:center}

/* ───────── Start hero pair ───────── */
.start-hero.pair{display:inline-flex;gap:14px;filter:none;animation:none}
.start-hero.pair i{font-style:normal;display:grid;place-items:center;width:74px;height:96px;font-size:2.6rem;background:var(--surface);border:2px solid var(--good);border-radius:16px;box-shadow:0 10px 22px rgba(0,0,0,.14);animation:pairhop 3s ease-in-out infinite}
.start-hero.pair i:first-child{transform:rotate(-7deg)}.start-hero.pair i:last-child{transform:rotate(7deg);animation-delay:.25s}
@keyframes pairhop{50%{translate:0 -10px}}

/* ───────── Feedback overlay (mistakes interrupt the game) ───────── */
.feedback-overlay{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:var(--sp-4);animation:fade-in .25s}
.feedback-overlay.bad{background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.feedback-overlay.good{inset:var(--sp-3) 0 auto 0;display:flex;justify-content:center;pointer-events:none;padding:0}
.feedback-overlay .feedback-box{box-shadow:var(--shadow-2);background:var(--surface);animation:modal .45s var(--spring);width:min(100%,380px);pointer-events:auto}
.feedback-overlay.good .feedback-box{background:var(--good-soft);flex-direction:row;gap:var(--sp-3);width:auto;padding:var(--sp-2) var(--sp-5);border-radius:var(--r-pill)}
.feedback-overlay.good .feedback-box p{display:none}
.feedback-overlay.bad .feedback-box{background:var(--bad-soft);padding:var(--sp-5)}
.feedback-box.bad h2{font-size:1.5rem}
@keyframes fade-in{from{opacity:0}}

/* ───────── Constant play window ───────── */
#game-area{min-height:var(--stage,640px);justify-content:center}
.round-start,.intro-game{margin-block:auto}

/* ───────── Confetti: more, longer, fixed to the viewport ───────── */
.confetti{position:fixed;inset:0;z-index:60;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-20px;left:var(--x);width:var(--w,10px);height:var(--h,14px);border-radius:3px;animation:fall var(--dur,3.6s) var(--delay,0s) cubic-bezier(.25,.6,.5,1) forwards;opacity:0}
.confetti-4{background:#a46cff}.confetti-5{background:#2fc7e6;border-radius:50%!important}
@keyframes fall{0%{opacity:1;transform:translate(0,0) rotate(0)}85%{opacity:1}100%{transform:translate(var(--drift),108vh) rotate(var(--spin));opacity:0}}

/* ───────── Connect four ───────── */
.chip-disc{display:inline-block;width:.8em;height:.8em;border-radius:50%;vertical-align:-1px;margin-right:6px}
.d-x{background:var(--pad-2)}.d-o{background:var(--pad-1)}
.c4-board{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:10px;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--brand-2),var(--brand));width:min(100%,460px);box-shadow:var(--shadow-2),inset 0 -6px 0 rgba(0,0,0,.2)}
.c4-col{display:grid;gap:6px;padding:0;border:0;background:transparent;border-radius:12px;cursor:pointer;position:relative;transition:background .2s;-webkit-tap-highlight-color:transparent}
.c4-col:disabled{cursor:default}
.c4-col:hover:not(:disabled),.c4-col:focus-visible{background:rgba(255,255,255,.18)}
.c4-col:hover:not(:disabled)::before{content:"";position:absolute;left:12%;right:12%;top:-22px;aspect-ratio:1;border-radius:50%;background:var(--pad-2);animation:hover-disc .8s ease-in-out infinite alternate}
@keyframes hover-disc{to{transform:translateY(-4px)}}
.disc{display:block;aspect-ratio:1;border-radius:50%;background:var(--surface);box-shadow:inset 0 3px 6px rgba(0,0,0,.35);position:relative}
.disc.d-x,.disc.d-o{box-shadow:inset 0 -4px 0 rgba(0,0,0,.22),inset 0 3px 4px rgba(255,255,255,.35)}
.disc.drop{animation:disc-drop .55s var(--r) cubic-bezier(.5,0,.75,.4) both;animation-duration:calc(.28s + var(--r)*.07s)}
@keyframes disc-drop{from{transform:translateY(calc(var(--r)*-110% - 140%))}60%{transform:translateY(0)}78%{transform:translateY(-14%)}100%{transform:none}}
.disc.win-disc{animation:winpulse .7s ease-in-out infinite alternate;box-shadow:0 0 0 3px #fff,0 0 22px #fff}
@keyframes winpulse{to{transform:scale(1.12)}}

/* ───────── Reversi ───────── */
.rv-board{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:8px;width:min(100%,420px);border-radius:var(--r-md);background:color-mix(in srgb,var(--good) 55%,var(--surface-3));box-shadow:var(--shadow-1)}
.rv-cell{aspect-ratio:1;border:0;padding:6%;border-radius:8px;background:color-mix(in srgb,var(--good) 28%,var(--surface));display:grid;place-items:center;position:relative;transition:background .2s,transform .2s var(--spring)}
.rv-cell:disabled{cursor:default;opacity:1}
.rv-cell.legal{cursor:pointer}
.rv-cell.legal::after{content:"";width:26%;aspect-ratio:1;border-radius:50%;background:var(--good);opacity:.6;animation:legal 1.6s ease-in-out infinite}
@keyframes legal{50%{transform:scale(1.4);opacity:.3}}
.rv-cell.legal:hover{background:color-mix(in srgb,var(--good) 50%,var(--surface));transform:scale(1.07)}
.rv-cell .disc{width:100%;box-shadow:inset 0 -4px 0 rgba(0,0,0,.22),0 3px 6px rgba(0,0,0,.25)}
.rv-cell .d-x{background:var(--brand)}.rv-cell .d-o{background:var(--o-col)}
.rv-cell .disc.flip{animation:rvflip .55s var(--spring)}
@keyframes rvflip{0%{transform:rotateY(180deg) scale(.7)}60%{transform:rotateY(0) scale(1.18)}}
.rv-cell.placed .disc{animation:rvplace .4s var(--spring)}
@keyframes rvplace{from{transform:scale(.2)}}
.rv-cell{perspective:300px}

/* ───────── Tile merge ───────── */
.merge-wrap{display:grid;gap:var(--sp-4);justify-items:center}
.merge-board{--gap:10px;position:relative;width:min(100%,400px);aspect-ratio:1;padding:var(--gap);border-radius:var(--r-lg);background:var(--surface-3);touch-action:none;user-select:none}
.merge-bg,.merge-tiles{position:absolute;inset:var(--gap);display:grid;grid-template:repeat(4,1fr)/repeat(4,1fr);gap:var(--gap)}
.merge-bg i{border-radius:12px;background:var(--surface-2)}
.tile{display:grid;place-items:center;border-radius:12px;font:800 clamp(1.3rem,6vw,2rem) var(--font);letter-spacing:-.03em;animation:slide .16s ease-out both;background:var(--surface);color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.12)}
@keyframes slide{from{transform:translate(calc(var(--dx)*(100% + var(--gap))),calc(var(--dy)*(100% + var(--gap))))}}
.tile.spawned{animation:spawn .25s .14s var(--ease) both}
@keyframes spawn{from{transform:scale(0)}}
.tile.merged{animation:slide .16s ease-out both,merge-pop .28s .15s var(--spring)}
@keyframes merge-pop{50%{transform:scale(1.22)}}
.tile.v2{background:#eee4da;color:#6b5d44}.tile.v4{background:#ede0c8;color:#6b5d44}.tile.v8{background:#f2b179;color:#fff}.tile.v16{background:#f59563;color:#fff}.tile.v32{background:#f67c5f;color:#fff}.tile.v64{background:#f65e3b;color:#fff}.tile.v128{background:#edcf72;color:#fff;font-size:clamp(1.15rem,5vw,1.7rem)}.tile.v256{background:#edcc61;color:#fff;font-size:clamp(1.15rem,5vw,1.7rem)}.tile.v512{background:#edc850;color:#fff;font-size:clamp(1.15rem,5vw,1.7rem)}.tile.v1024{background:#edc53f;color:#fff;font-size:clamp(1rem,4.4vw,1.4rem)}.tile.v2048{background:#edc22e;color:#fff;font-size:clamp(1rem,4.4vw,1.4rem)}
:root[data-theme=dark] .tile.v2{background:#3a4272;color:#eef0fb}:root[data-theme=dark] .tile.v4{background:#4a5390;color:#eef0fb}
.merge-board.nudge{animation:shake2 .3s}
.slide-pad{display:grid;grid-template:repeat(2,44px)/repeat(3,56px);gap:6px;justify-content:center}
.slide-pad button{border:0;border-radius:12px;background:var(--surface-3);color:var(--ink);font:800 1.2rem var(--font);cursor:pointer;transition:transform .2s var(--spring),background .2s}
.slide-pad button:hover:not(:disabled){background:var(--brand-soft);transform:translateY(-2px)}.slide-pad button:active:not(:disabled){transform:scale(.9)}
.slide-up{grid-column:2;grid-row:1}.slide-left{grid-column:1;grid-row:2}.slide-down{grid-column:2;grid-row:2}.slide-right{grid-column:3;grid-row:2}
@media(hover:hover) and (pointer:fine){.slide-pad{display:none}}

/* ───────── Sudoku ───────── */
.sd-board{display:grid;grid-template-columns:repeat(var(--n),1fr);width:min(100%,var(--sw,440px));aspect-ratio:1;border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--surface)}
.sd-board.n4{--sw:320px}.sd-board.n6{--sw:390px}.sd-board.n9{--sw:450px}
.sd-cell{border:0;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--surface);color:var(--brand);font:600 clamp(1.1rem,5vw,1.75rem) var(--font);padding:0;cursor:pointer;display:grid;place-items:center;transition:background .15s;font-variant-numeric:tabular-nums}
.sd-cell.bx{border-right:3px solid var(--ink)}.sd-cell.by{border-bottom:3px solid var(--ink)}
.sd-cell.given{color:var(--ink);font-weight:800;background:var(--surface-2)}
.sd-cell.near{background:color-mix(in srgb,var(--brand) 9%,var(--surface))}.sd-cell.given.near{background:color-mix(in srgb,var(--brand) 12%,var(--surface-2))}
.sd-cell.same{background:color-mix(in srgb,var(--brand) 22%,var(--surface))}
.sd-cell.sel{background:var(--brand);color:var(--brand-ink)}
.sd-cell.conflict{color:var(--bad)}.sd-cell.conflict.sel{background:var(--bad);color:#fff}
.sd-cell.set{animation:pegpop .3s var(--spring)}
.sd-cell:disabled{cursor:default}
.sd-pad{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:460px}
.sd-pad button{width:46px;height:50px;border-radius:12px;border:2px solid var(--line);background:var(--surface);font:800 1.2rem var(--font);cursor:pointer;transition:transform .2s var(--spring),border-color .2s,background .2s}
.sd-pad button:hover:not(:disabled){transform:translateY(-3px);border-color:var(--brand);background:var(--brand-soft)}.sd-pad button:active:not(:disabled){transform:scale(.92)}
.sd-pad .wide{width:auto;padding:0 16px;font-size:.9rem}.sd-pad .wide span{font-weight:700}

/* ───────── Progress chart ───────── */
.chart-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);margin:var(--sp-5) 0;box-shadow:var(--shadow-1)}
.chart-card h2{font-size:1.375rem}.chart-text{color:var(--ink-2);font-size:.9375rem;margin:var(--sp-2) 0 var(--sp-4)}.chart-empty{color:var(--ink-2);padding:var(--sp-5);text-align:center;background:var(--surface-2);border-radius:var(--r-md)}
.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
.topic{display:flex;flex-direction:column;gap:2px;background:var(--surface-2);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4)}
.topic-name{font:700 .75rem var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.topic-name i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.topic strong{font:800 1.75rem var(--font);letter-spacing:-.03em}.topic small{color:var(--ink-2);font-size:.75rem}.topic b{font-size:.8125rem;color:var(--ink-2)}.topic b.up{color:var(--good)}.topic b.down{color:var(--warn)}
.s-memory{--c:var(--brand)}.s-logic{--c:var(--good)}.s-numbers{--c:var(--warn)}
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}.chart .axis{fill:var(--ink-2);font:600 11px var(--font)}
.chart .series path{fill:none;stroke:var(--c);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:drawline 1.4s var(--ease) forwards}
.chart .series circle{fill:var(--surface);stroke:var(--c);stroke-width:2.5;opacity:.9}
@keyframes drawline{to{stroke-dashoffset:0}}
body[data-game=matching-pairs]{--stage:690px}body[data-game=what-changed]{--stage:720px}body[data-game=pipes]{--stage:690px}body[data-game=minesweeper]{--stage:720px}body[data-game=reversi]{--stage:670px}body[data-game=sudoku]{--stage:780px}body[data-game=codebreaker]{--stage:720px}body[data-game=sea-battle]{--stage:700px}
.sea-board .sea-grid{margin-inline:auto}
.sea-board:first-child .sea-grid{width:min(100%,360px)}.sea-board:last-child .sea-grid{width:min(100%,270px)}
@media(max-width:719px){.sea-board:last-child .sea-grid{width:min(100%,220px)}}
.card-art .art-svg{width:100%;height:150px}
.disc.d-x{background:var(--pad-2)}.disc.d-o{background:var(--pad-1)}
.merge-wrap{width:100%;grid-template-columns:min(100%,400px);justify-content:center}
.merge-board{width:100%}
.rv-cell .disc.d-x{background:var(--brand)}.rv-cell .disc.d-o{background:var(--o-col)}

/* ───────── No layout jumps: content starts at the top, only start/result screens centre ───────── */
#game-area{justify-content:flex-start}
.action-row{min-height:44px}
.result{margin-top:auto}.result-actions{margin-bottom:auto}
.game-message{min-height:1.7em}

/* ───────── Round complete: more air ───────── */
.result{gap:var(--sp-5);padding-top:var(--sp-5)}
.result h2{margin-bottom:var(--sp-1)}
.result-overview{gap:var(--sp-6);margin-block:var(--sp-3)}
.result-snapshot{width:168px;padding:12px}
.score-summary .score-unit{display:block;margin-top:2px}
.result-detail{margin-top:var(--sp-3)}
.result-encouragement{margin-top:var(--sp-2);font-size:1.125rem}
.result-invite{margin-top:calc(var(--sp-2)*-1);opacity:.85}
.result-actions{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line);gap:var(--sp-4)}
.result-secondary{gap:var(--sp-3)}

/* ───────── Lights out ───────── */
.lo-board{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:clamp(6px,1.6vw,12px);width:min(100%,calc(var(--n)*84px));padding:12px;border-radius:var(--r-lg);background:var(--surface-3)}
.lo-cell{aspect-ratio:1;border:0;border-radius:14px;background:var(--surface);box-shadow:inset 0 -4px 0 rgba(0,0,0,.12);cursor:pointer;transition:background .25s,box-shadow .25s,transform .25s var(--spring);-webkit-tap-highlight-color:transparent}
.lo-cell:hover:not(:disabled){transform:translateY(-3px)}.lo-cell:active:not(:disabled){transform:scale(.92)}
.lo-cell.on{background:radial-gradient(circle at 35% 30%,#fff6c2,var(--warn) 70%);box-shadow:0 0 22px color-mix(in srgb,var(--warn) 70%,transparent),inset 0 -4px 0 rgba(0,0,0,.12)}
.lo-cell.pressed{animation:pegpop .3s var(--spring)}
.lo-cell:disabled{cursor:default}
.a-glow2{animation:glowlamp 2.2s ease-in-out infinite}
@keyframes glowlamp{50%{filter:drop-shadow(0 0 8px var(--warn))}}

/* ───────── Slide puzzle ───────── */
.sp-board{--gap:8px;position:relative;width:min(100%,calc(var(--n)*92px + 24px));aspect-ratio:1;padding:var(--gap);border-radius:var(--r-lg);background:var(--surface-3)}
.sp-bg,.sp-tiles{position:absolute;inset:var(--gap);display:grid;grid-template:repeat(var(--n),1fr)/repeat(var(--n),1fr);gap:var(--gap)}
.sp-bg i{border-radius:12px;background:var(--surface-2)}
.sp-tile{border:0;border-radius:12px;background:linear-gradient(160deg,var(--brand-2),var(--brand));color:var(--brand-ink);font:800 clamp(1.1rem,5.5vw,1.9rem) var(--font);cursor:pointer;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2);transition:filter .2s;-webkit-tap-highlight-color:transparent}
:root[data-theme=dark] .sp-tile{color:#fff}
.sp-tile.home{background:linear-gradient(160deg,var(--good),color-mix(in srgb,var(--good) 70%,#000))}
.sp-tile.moved{animation:slide .16s ease-out both}
.sp-tile:hover:not(:disabled){filter:brightness(1.12)}.sp-tile:disabled{cursor:default}
.a-slide{animation:slidetile 2.4s ease-in-out infinite}
@keyframes slidetile{40%,60%{transform:translateX(32px)}}

/* ───────── Colour flood ───────── */
.fl-board{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:2px;width:min(100%,400px);aspect-ratio:1;padding:6px;border-radius:var(--r-md);background:var(--surface-3)}
.fl-cell{display:grid;place-items:center;border-radius:4px;font-style:normal;font-size:clamp(.5rem,1.8vw,.8rem);color:rgba(255,255,255,.55);background:var(--fc);transition:background .25s}
.fl-cell.wave{animation:flwave .45s calc(var(--d)*28ms) var(--ease) both}
@keyframes flwave{from{transform:scale(.5);filter:brightness(1.6)}}
.c0{--fc:#e0475b}.c1{--fc:#f2b01e}.c2{--fc:#1f9d6b}.c3{--fc:#3b63e0}.c4{--fc:#9b59d0}.c5{--fc:#17a7bd}
:root[data-theme=dark] .c0{--fc:#ff6b81}:root[data-theme=dark] .c1{--fc:#fbbf24}:root[data-theme=dark] .c2{--fc:#34d399}:root[data-theme=dark] .c3{--fc:#6f93ff}:root[data-theme=dark] .c4{--fc:#b98af0}:root[data-theme=dark] .c5{--fc:#4fd3e6}
.fl-pad{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.fl-btn{width:56px;height:56px;border-radius:16px;border:0;background:var(--fc);color:rgba(255,255,255,.9);font:800 1.3rem var(--font);cursor:pointer;box-shadow:inset 0 -5px 0 rgba(0,0,0,.18);transition:transform .25s var(--spring),opacity .2s}
.fl-btn:hover:not(:disabled){transform:translateY(-4px) rotate(-3deg)}.fl-btn:active:not(:disabled){transform:scale(.9)}
.fl-btn:disabled{opacity:.3;cursor:default}
.a-wave{animation:flwave 2.4s ease-in-out infinite}

/* ───────── Pattern recall ───────── */
.pr-board{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:clamp(6px,1.6vw,12px);width:min(100%,calc(var(--n)*86px + 24px))}
.pr-cell{aspect-ratio:1;border:0;border-radius:14px;background:var(--surface-3);cursor:pointer;transition:background .2s,transform .3s var(--spring),box-shadow .2s;box-shadow:inset 0 -4px 0 rgba(0,0,0,.1)}
.pr-cell:hover:not(:disabled){transform:translateY(-3px);background:var(--brand-soft)}
.pr-cell.lit{background:var(--brand);box-shadow:0 0 26px var(--glow);transform:scale(1.05)}
.pr-cell.found{background:var(--good);animation:pegpop .3s var(--spring)}
.pr-cell.missed{background:var(--brand);opacity:.55}
.pr-cell.wrong{background:var(--bad);animation:shake2 .4s}
.pr-cell:disabled{cursor:default}
.a-blink{animation:blink 2.6s ease-in-out infinite}
@keyframes blink{20%,50%{fill:var(--warn)}}
.daily-strip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:var(--sp-2)}
.daily-strip span{font:600 .8125rem var(--font);padding:6px 14px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2)}
.daily-strip .done{background:var(--good-soft);color:var(--good)}.daily-strip .here{box-shadow:0 0 0 2px var(--brand)}

/* ───────── Checkers ───────── */
.ck-board{display:grid;grid-template-columns:repeat(8,1fr);width:min(100%,440px);aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;border:3px solid var(--ink);box-shadow:var(--shadow-1)}
.ck-cell{border:0;padding:0;display:grid;place-items:center;background:var(--surface-2);position:relative}
.ck-cell.dark{background:color-mix(in srgb,var(--brand) 22%,var(--surface-3))}
button.ck-cell{cursor:pointer;-webkit-tap-highlight-color:transparent}
button.ck-cell:disabled{cursor:default}
.ck-cell.last{background:color-mix(in srgb,var(--warn) 30%,var(--surface-3))}
.ck-cell.sel{background:color-mix(in srgb,var(--good) 40%,var(--surface))}
.ck-cell.target::after{content:"";width:30%;aspect-ratio:1;border-radius:50%;background:var(--good);opacity:.7;animation:legal 1.4s ease-in-out infinite}
.ck-piece{width:78%;aspect-ratio:1;border-radius:50%;display:block;position:relative;box-shadow:inset 0 -5px 0 rgba(0,0,0,.22),0 3px 6px rgba(0,0,0,.3);transition:transform .2s var(--spring)}
.ck-piece.p-x{background:radial-gradient(circle at 35% 30%,var(--brand-2),var(--brand))}
.ck-piece.p-o{background:radial-gradient(circle at 35% 30%,#ff9aa7,var(--o-col))}
.ck-piece.king::after{content:"♛";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:clamp(.9rem,3.6vw,1.5rem);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.ck-piece.can{animation:pulse-ring2 1.8s ease-in-out infinite}
@keyframes pulse-ring2{50%{box-shadow:inset 0 -5px 0 rgba(0,0,0,.22),0 0 0 5px color-mix(in srgb,var(--good) 55%,transparent)}}
.ck-cell.sel .ck-piece{transform:scale(1.1);animation:none}
.ck-piece.land{animation:rvplace .4s var(--spring)}

/* ───────── Dots and boxes ───────── */
.db-board{--d:14px;display:grid;grid-template-columns:repeat(var(--n),var(--d) 1fr) var(--d);grid-template-rows:repeat(var(--n),var(--d) 1fr) var(--d);width:min(100%,calc(var(--n)*86px + 20px));aspect-ratio:1;padding:6px}
.db-dot{width:var(--d);height:var(--d);border-radius:50%;background:var(--ink)}
.db-edge{border:0;padding:0;background:transparent;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.db-edge::before{content:"";position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:99px;background:var(--surface-3);transition:background .15s,transform .2s var(--spring)}
.db-edge.h::before{width:calc(100% - 4px);height:8px}.db-edge.v::before{height:calc(100% - 4px);width:8px}
.db-edge:hover:not(:disabled)::before{background:var(--brand-soft);box-shadow:0 0 0 2px var(--brand)}
.db-edge.set::before{background:var(--brand)}.db-edge.set.own-o::before{background:var(--o-col)}
.db-edge.fresh::before{animation:pegpop .35s var(--spring)}
.db-edge:disabled{cursor:default}
.db-box{display:grid;place-items:center;font-style:normal;font-size:clamp(1rem,4vw,1.6rem);border-radius:8px;transition:background .3s}
.db-box.own-x{background:color-mix(in srgb,var(--brand) 25%,transparent);color:var(--brand)}.db-box.own-o{background:color-mix(in srgb,var(--o-col) 25%,transparent);color:var(--o-col)}
.db-box.pop{animation:pop2 .5s var(--spring)}

/* ───────── Nonogram ───────── */
.ng-board{--cs:clamp(22px,6.4vw,38px);display:grid;grid-template-columns:auto repeat(var(--n),var(--cs));gap:2px;align-items:stretch;touch-action:none;user-select:none}
.ng-clue{display:flex;font:700 .75rem var(--font);color:var(--ink-2);gap:2px;align-items:center;justify-content:center;padding:2px 4px;border-radius:6px;transition:color .2s,background .2s}
.ng-clue.col{flex-direction:column;justify-content:flex-end}
.ng-clue.row{justify-content:flex-end;padding-right:8px}
.ng-clue.ok{color:var(--good);background:var(--good-soft)}
.ng-clue b{font-weight:800}
.ng-cell{width:var(--cs);height:var(--cs);border:0;border-radius:5px;background:var(--surface-2);cursor:pointer;padding:0;font:800 .9rem var(--font);color:var(--ink-2);transition:background .15s,transform .15s var(--spring);box-shadow:inset 0 0 0 1px var(--line)}
.ng-cell:hover:not(:disabled){background:var(--brand-soft)}
.ng-cell.on{background:var(--ink);box-shadow:none;animation:pegpop .2s var(--spring)}
.ng-cell.bx{margin-right:4px}.ng-cell.by{margin-bottom:4px}
.ng-cell:disabled{cursor:default}

/* ───────── Peg solitaire ───────── */
.pg-board{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(4px,1.4vw,10px);width:min(100%,380px);padding:14px;border-radius:var(--r-lg);background:linear-gradient(160deg,#b98a5c,#8d6238);box-shadow:var(--shadow-1),inset 0 3px 8px rgba(0,0,0,.25)}
:root[data-theme=dark] .pg-board{background:linear-gradient(160deg,#6b4a2c,#4a3019)}
.pg-hole{aspect-ratio:1;border:0;border-radius:50%;background:rgba(0,0,0,.35);box-shadow:inset 0 3px 6px rgba(0,0,0,.45);padding:0;display:grid;place-items:center;position:relative;cursor:default}
.pg-hole.can,.pg-hole.target{cursor:pointer}
.pg-hole i{width:84%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8fb0ff,var(--brand) 60%,#14307f);box-shadow:0 3px 5px rgba(0,0,0,.4);display:block;transition:transform .2s var(--spring)}
.pg-hole.can i{animation:pulse-ring2 2s ease-in-out infinite}
.pg-hole.sel i{transform:scale(1.15);background:radial-gradient(circle at 35% 30%,#fff3b0,var(--warn) 60%,#a86a00);animation:none}
.pg-hole.target::after{content:"";width:34%;aspect-ratio:1;border-radius:50%;background:var(--good);opacity:.9;animation:legal 1.3s ease-in-out infinite}
.pg-hole.land i{animation:rvplace .4s var(--spring)}

/* ───────── Look back (n-back) ───────── */
.nb-dots{max-width:380px}
.nb-stage{display:grid;place-items:center;min-height:210px}
.nb-card{width:160px;height:190px;border-radius:24px;display:grid;place-items:center;font-size:5rem;background:var(--surface);border:3px solid var(--line-2);box-shadow:var(--shadow-2);animation:nb-in .4s var(--spring)}
.nb-card .emoji-symbol{font-size:1em}
@keyframes nb-in{from{transform:translateX(60px) rotate(8deg);opacity:0}}
.nb-actions{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
.a-nb{animation:mergepop 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

/* ───────── Word guess ───────── */
.wd-grid{display:grid;gap:6px}
.wd-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:min(100%,330px);margin-inline:auto}
.wd-tile{aspect-ratio:1;display:grid;place-items:center;border:2px solid var(--line-2);border-radius:8px;font:800 clamp(1.2rem,5vw,1.7rem) var(--font);font-style:normal;text-transform:uppercase;background:var(--surface);transition:border-color .15s}
.wd-tile.has{border-color:var(--ink-2);animation:pegpop .12s}
.wd-tile.correct{background:var(--good);border-color:var(--good);color:#fff}.wd-tile.present{background:var(--warn);border-color:var(--warn);color:#fff}.wd-tile.absent{background:var(--ship);border-color:var(--ship);color:#fff}
.wd-row.reveal .wd-tile{animation:wdflip .55s calc(var(--i)*.16s) both}
@keyframes wdflip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.wd-row.shake{animation:shake2 .4s}
.wd-kb{display:grid;gap:6px;width:min(100%,480px)}
.wd-kb>div{display:flex;gap:5px;justify-content:center}
.wd-key{flex:1;max-width:44px;height:48px;border:0;border-radius:8px;background:var(--surface-3);color:var(--ink);font:700 .9375rem var(--font);cursor:pointer;transition:transform .15s var(--spring),background .2s;padding:0}
.wd-key.wide{flex:1.6;max-width:70px;font-size:1.1rem}
.wd-key:hover{transform:translateY(-2px)}.wd-key:active{transform:scale(.92)}
.wd-key.correct{background:var(--good);color:#fff}.wd-key.present{background:var(--warn);color:#fff}.wd-key.absent{background:var(--ship);color:#fff;opacity:.7}
.a-tile{animation:wdflip 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

/* ───────── Crazy eights ───────── */
.ce-table{display:grid;gap:var(--sp-4);width:min(100%,560px);justify-items:center}
.pcard{position:relative;width:62px;height:88px;border-radius:10px;border:2px solid var(--line-2);background:var(--surface);padding:0;display:grid;place-items:center;font-family:var(--font);box-shadow:0 2px 4px rgba(0,0,0,.12);transition:transform .25s var(--spring),box-shadow .2s;cursor:default}
.pcard b{position:absolute;left:6px;top:4px;font:800 .95rem var(--font)}.pcard span{font-size:1.7rem}.pcard em{position:absolute;right:6px;bottom:4px;font-style:normal;font-size:.8rem}
.pcard.red{color:#d33a4d}.pcard.black{color:var(--ink)}
:root[data-theme=dark] .pcard.red{color:#ff7a8c}
.pcard.ok{cursor:pointer;border-color:var(--good);box-shadow:0 0 0 2px color-mix(in srgb,var(--good) 40%,transparent),0 6px 12px rgba(0,0,0,.18)}
.pcard.ok:hover{transform:translateY(-12px)}
.pcard.dim{opacity:.5}
.pcard.new{animation:nb-in .4s var(--spring)}
.pcard.back{background:linear-gradient(145deg,var(--back-a),var(--back-b));border-color:transparent;color:#fff}
.pcard.back span{font:800 1rem var(--font);opacity:.85}
.pcard.stock{cursor:pointer}.pcard.stock:disabled{cursor:default;opacity:.7}.pcard.stock.hint{animation:pulse-ring2 1.6s infinite}
.pcard.top.drop{animation:rvplace .4s var(--spring)}
.ce-opp{display:flex;align-items:center;justify-content:center;min-height:68px}
.ce-opp .pcard{width:40px;height:58px;margin-left:-22px;border-radius:7px}.ce-opp .pcard:first-child{margin-left:0}
.ce-opp>span{margin-left:12px;font:800 1.1rem var(--font);color:var(--ink-2)}
.ce-center{display:flex;gap:var(--sp-5);align-items:center}
.ce-top{display:flex;align-items:center;gap:12px}
.suit-now{font-size:2rem;line-height:1;color:var(--ink)}.suit-now.red{color:#d33a4d}
.ce-suits{display:flex;gap:10px}
.ce-suits button{width:56px;height:56px;border-radius:14px;border:2px solid var(--line-2);background:var(--surface);font-size:1.8rem;cursor:pointer;color:var(--ink);transition:transform .2s var(--spring)}
.ce-suits button.red{color:#d33a4d}.ce-suits button:hover{transform:translateY(-4px);border-color:var(--brand)}
.ce-hand{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding-top:8px}
.ce-hand .pcard{margin-inline:-6px}
.snapshot-art .ce-table .pcard{width:34px;height:48px}.snapshot-art .ce-hand .pcard span{font-size:1rem}
body[data-game=checkers]{--stage:700px}body[data-game=dots-boxes]{--stage:700px}body[data-game=nonogram]{--stage:720px}body[data-game=word-guess]{--stage:760px}body[data-game=n-back]{--stage:640px}body[data-game=crazy-eights]{--stage:720px}body[data-game=peg-solitaire]{--stage:680px}
.a-jump{animation:jump 2.8s ease-in-out infinite}@keyframes jump{40%,60%{transform:translate(20px,-48px)}}
.a-fade{animation:twinkle 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.a-fan{animation:fan 2.6s ease-in-out infinite;transform-box:fill-box}
@keyframes fan{50%{transform:translateY(-8px)}}
.a-jump2{animation:jump2 3s ease-in-out infinite}@keyframes jump2{40%,60%{transform:translate(0,-40px)}}
.ng-clue.row b+b{margin-left:5px}