/* Rule Stack web. A falling-block playfield: cobalt ground, an inset well, words built from bevelled minos.
   Each category owns one of the seven tetromino colours (--m0..--m6). See knowledge-base/15-ui-redesign.md. */
:root{
  /* minos: the same in both themes */
  --m0:oklch(0.80 0.13 205);  /* cyan   */
  --m1:oklch(0.87 0.16 95);   /* yellow */
  --m2:oklch(0.70 0.17 305);  /* purple */
  --m3:oklch(0.79 0.17 145);  /* green  */
  --m4:oklch(0.68 0.19 27);   /* red    */
  --m5:oklch(0.70 0.14 258);  /* blue   */
  --m6:oklch(0.78 0.16 60);   /* orange */
  --tile-ink:oklch(0.22 0.07 268);
  --pass:var(--m3); --fail:var(--m4); --boss:var(--m2); --go:var(--m1);

  /* night (default) */
  --ground:oklch(0.27 0.09 268);
  --well:oklch(0.19 0.065 268);
  --cell:oklch(0.235 0.07 268);
  --panel:oklch(0.32 0.095 268);
  --line:oklch(0.42 0.09 268);
  --ink:oklch(0.97 0.012 268);
  --ink-2:oklch(0.82 0.05 268);
  --scrim:oklch(0.12 0.05 268 / .7);

  --display:"Bungee","Rubik",system-ui,sans-serif;
  --body:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --ground:oklch(0.88 0.05 255); --well:oklch(0.965 0.016 255); --cell:oklch(0.925 0.025 255);
  --panel:oklch(0.94 0.03 255); --line:oklch(0.76 0.06 262); --ink:oklch(0.23 0.08 268); --ink-2:oklch(0.40 0.08 268);
  --scrim:oklch(0.25 0.08 268 / .45); color-scheme:light}}
:root[data-theme="light"]{
  --ground:oklch(0.88 0.05 255); --well:oklch(0.965 0.016 255); --cell:oklch(0.925 0.025 255);
  --panel:oklch(0.94 0.03 255); --line:oklch(0.76 0.06 262); --ink:oklch(0.23 0.08 268); --ink-2:oklch(0.40 0.08 268);
  --scrim:oklch(0.25 0.08 268 / .45); color-scheme:light}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45}
::selection{background:var(--go);color:var(--tile-ink)}
html{scrollbar-color:var(--line) var(--ground)}
.app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;
  padding:max(8px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2{font-family:var(--display);font-weight:400;line-height:1.02;margin:0;text-transform:uppercase;text-wrap:balance;letter-spacing:.01em}
h2{font-size:1.55rem}
p{margin:0;text-wrap:pretty}
b{font-weight:700}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--go);outline-offset:3px;border-radius:6px}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- the mino: one tile, bevelled like a falling block ---------- */
.mino,.row b,.go,.lamp.pass,.lamp.fail{
  background:var(--c,var(--go));color:var(--tile-ink);
  box-shadow:inset 0 3px 0 oklch(1 0 0 / .42),inset 3px 0 0 oklch(1 0 0 / .18),inset 0 -3px 0 oklch(0 0 0 / .26),inset -3px 0 0 oklch(0 0 0 / .12)}
.c0{--c:var(--m0)}.c1{--c:var(--m1)}.c2{--c:var(--m2)}.c3{--c:var(--m3)}.c4{--c:var(--m4)}.c5{--c:var(--m5)}.c6{--c:var(--m6)}

/* ---------- shell ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;margin-bottom:8px}
.logo{font:400 1.15rem/1 var(--display);display:flex;align-items:center;gap:8px;text-transform:uppercase;background:none;border:0;padding:6px 6px 6px 0;cursor:pointer;color:var(--ink)}
.logo svg{width:26px;height:26px;flex:none}
.icons{display:flex;gap:4px;align-items:center}
.icon{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;border:0;background:transparent;cursor:pointer;color:var(--ink-2)}
.icon:hover{background:var(--panel);color:var(--ink)}
main{display:flex;flex-direction:column;gap:16px;flex:1}
/* no visible scrollbar; the page still scrolls */
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}

/* ---------- buttons ---------- */
.btn{font:700 1rem var(--body);min-height:48px;padding:10px 18px;border-radius:8px;border:2px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .12s,border-color .12s}
.btn:hover{border-color:var(--ink-2);background:color-mix(in oklch,var(--panel) 60%,transparent)}
.btn.danger{border-color:color-mix(in oklch,var(--fail) 70%,var(--line));color:var(--fail)}
.btn.wide{width:100%}
.go{font:400 1.05rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em;min-height:52px;padding:14px 22px;border:0;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .08s,filter .12s}
.go:hover{filter:brightness(1.06)}
.go:active{transform:translateY(2px);box-shadow:inset 0 2px 0 oklch(1 0 0 / .35),inset 0 -1px 0 oklch(0 0 0 / .26)}
.go.big{min-height:68px;font-size:1.5rem;width:100%}
.go:disabled{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 2px var(--line);cursor:default;filter:none;transform:none}

/* ---------- home ---------- */
.title{display:flex;flex-direction:column;gap:6px;padding:28px 0 8px}
.title .row{--t:58px;height:var(--t);display:flex;gap:6px}
.title .row b{width:var(--t);height:var(--t);display:grid;place-items:center;font:400 2rem/1 var(--display);border-radius:5px}
.title .row:nth-child(1){padding-left:12%}
.title .row:nth-child(2){padding-left:2%}
.title.drop b{animation:fall .55s var(--ease) both;animation-delay:calc(var(--k) * 55ms)}
.lede{font-size:1.1rem;color:var(--ink-2);max-width:34ch}
.lede b{color:var(--ink)}
.record{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:.95rem;color:var(--ink-2)}
.record b{font:400 1.05rem var(--display);color:var(--ink);font-variant-numeric:tabular-nums;margin-right:4px}
.daily{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-top:2px solid var(--panel);border-bottom:2px solid var(--panel)}
.daily h2{font-size:1.15rem}
.daily p{font-size:.92rem;color:var(--ink-2);margin-top:2px}
.daily p b{color:var(--ink);font-variant-numeric:tabular-nums}
.note{font-size:.92rem;color:var(--ink-2)}
.note b{color:var(--ink)}
details.howto summary{font:700 1rem var(--body);cursor:pointer;min-height:48px;display:flex;align-items:center;list-style:none;gap:10px}
details.howto summary::-webkit-details-marker{display:none}
details.howto summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2.5px solid var(--ink-2);border-bottom:2.5px solid var(--ink-2);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
details.howto[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
details.howto ol{margin:0 0 8px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:s}
details.howto li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;color:var(--ink-2);counter-increment:s}
details.howto li b{color:var(--ink)}
details.howto li::before{content:counter(s);width:26px;height:26px;display:grid;place-items:center;font:400 .8rem var(--display);border-radius:4px;background:var(--c);color:var(--tile-ink);
  box-shadow:inset 0 2px 0 oklch(1 0 0 / .4),inset 0 -2px 0 oklch(0 0 0 / .25)}

/* ---------- round: HUD ---------- */
.hud{display:flex;align-items:center;justify-content:space-between;gap:12px}
.score{display:flex;align-items:baseline;gap:10px;min-width:0}
.score b{font:400 1.9rem/1 var(--display);font-variant-numeric:tabular-nums}
.score span{font-size:.85rem;font-weight:500;color:var(--ink-2);white-space:nowrap}
.score span.beaten{color:var(--go);font-weight:700}
.hudr{display:flex;align-items:center;gap:10px}
.combo{font:400 .9rem/1 var(--display);padding:7px 9px 6px;border-radius:5px}
.combo.pop{animation:pop .3s var(--ease)}
.lives{display:flex;gap:4px}
.lives svg{width:20px;height:18px;shape-rendering:crispEdges}
.lives .on{fill:var(--fail)} .lives .off{fill:none;stroke:var(--line);stroke-width:.5}
.lives.hit{animation:shake .25s 2}
.meter{display:flex;align-items:center;gap:10px;font:500 .78rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.meter b{color:var(--ink);font-weight:700}
.cells{display:flex;gap:3px}
.cells i{width:20px;height:12px;border-radius:2px;background:var(--panel)}
.cells i.done{background:var(--pass)}
.cells i.now{background:var(--go);animation:blink .9s infinite alternate}
.cells i.boss{box-shadow:inset 0 0 0 2px var(--boss)}
.cells i.boss.done{box-shadow:none;background:var(--boss)}
.bosstag{font:400 .72rem/1 var(--display);padding:5px 7px 4px;border-radius:4px;--c:var(--boss);letter-spacing:.04em}

/* ---------- round: category ---------- */
.cat{display:flex;flex-direction:column;gap:4px}
.cat span{font:500 1rem var(--body);text-transform:none;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.cat span i{width:14px;height:14px;border-radius:3px;display:inline-block}
.cat strong{font:400 clamp(1.7rem,8vw,2.4rem)/1 var(--display)}
.round.boss .cat strong{color:var(--ink)}

/* ---------- round: rules ---------- */
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rules li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:52px;padding:8px 14px 8px 10px;border-radius:8px;background:var(--panel);font-weight:700;font-size:1.02rem;transition:background .15s}
.rules li.twist{background:color-mix(in oklch,var(--boss) 26%,var(--panel))}
.rules li .live{font:500 .82rem var(--body);color:var(--ink-2);font-variant-numeric:tabular-nums}
.rules li.none{grid-template-columns:minmax(0,1fr);font-weight:500;color:var(--ink-2)}
.lamp{width:28px;height:28px;border-radius:4px;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--line)}
.lamp svg{width:16px;height:16px;fill:none;stroke:var(--tile-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lamp.pass{--c:var(--pass)} .lamp.fail{--c:var(--fail)}
.flip .lamp{animation:pop .25s var(--ease)}
.tag{font:400 .62rem/1 var(--display);letter-spacing:.06em;padding:4px 6px 3px;border-radius:3px;margin-left:8px;vertical-align:2px;--c:var(--go)}
.tag.tw{--c:var(--boss)}
.rules li.new{animation:slam .45s var(--ease)}
.rules.smashing li[data-no]{cursor:pointer;box-shadow:inset 0 0 0 2px var(--fail)}
.rules.smashing li[data-no]:hover{background:color-mix(in oklch,var(--fail) 22%,var(--panel))}

/* ---------- round: the well ---------- */
.well{position:relative;height:clamp(150px,26vh,280px);border-radius:10px;background-color:var(--well);overflow:hidden;cursor:text;
  /* the playfield's cell grid */
  background-image:linear-gradient(var(--cell) 1px,transparent 1px),linear-gradient(90deg,var(--cell) 1px,transparent 1px);
  background-size:26px 26px;background-position:-1px -1px;
  box-shadow:inset 0 3px 10px oklch(0 0 0 / .25),inset 0 -4px 0 var(--line)}
.well:focus-within{outline:3px solid var(--go);outline-offset:3px}
.well input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;padding:0;z-index:2;cursor:text}
.tower{position:absolute;inset:10px 10px 4px;display:flex;flex-direction:column;container-type:inline-size}
.tower .stack{margin-top:auto;display:flex;flex-direction:column;gap:3px;padding-bottom:6px}
.well.tall .tower{-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
.row{--t:34px;--s:min(var(--t),calc((100cqi - (var(--n) + 1) * 3px) / var(--n)));display:flex;gap:3px;height:var(--s);flex:none}
.row > i{flex:1 1 0;min-width:0}
.row b{width:var(--s);height:var(--s);flex:none;display:grid;place-items:center;border-radius:3px;font:400 calc(var(--s) * .5)/1 var(--display);text-transform:uppercase}
.row b.gap,.row.boss b.gap{background:none;box-shadow:none}
.row.lock b{animation:lock .32s var(--ease) both}
.row.boss b{box-shadow:inset 0 3px 0 oklch(1 0 0 / .42),inset 0 -3px 0 oklch(0 0 0 / .26),0 0 0 2px var(--boss)}
.floorline{display:flex;align-items:center;gap:8px;font:400 .62rem/1 var(--display);color:var(--boss);letter-spacing:.06em;height:14px;flex:none}
.floorline::before,.floorline::after{content:"";flex:1;height:2px;background:var(--boss);opacity:.6}

/* the ghost piece: what you are typing, sitting where it will land */
.ghost b{background:color-mix(in oklch,var(--c) 14%,transparent);color:var(--c);box-shadow:inset 0 0 0 2px var(--c);transition:background .12s,color .12s}
.ghost b.new{animation:pop .14s var(--ease)}
.ghost b.cur{background:none;box-shadow:inset 0 -3px 0 var(--c);animation:blink .55s steps(2) infinite;opacity:0}
.well:focus-within .ghost b.cur{opacity:1}
.ghost.valid b:not(.cur):not(.gap){background:var(--c);color:var(--tile-ink);box-shadow:inset 0 3px 0 oklch(1 0 0 / .42),inset 3px 0 0 oklch(1 0 0 / .18),inset 0 -3px 0 oklch(0 0 0 / .26),inset -3px 0 0 oklch(0 0 0 / .12)}
.ghost.valid b.cur{display:none}
.ghost.drop{animation:settle .3s var(--ease) both}
.ghost.empty{align-items:center;font:500 1rem var(--body);color:var(--ink-2);gap:10px}
.ghost.empty b.cur{width:22px;height:22px;opacity:1}

.under{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.check{font-size:.95rem;font-weight:500;color:var(--ink-2);min-width:0;display:flex;flex-direction:column;gap:2px}
.check .ok{color:var(--pass);font-weight:700}
.check .no{color:var(--fail);font-weight:700}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .check .ok{color:oklch(0.50 0.15 145)}:root:not([data-theme="dark"]) .check .no{color:oklch(0.52 0.19 27)}}
:root[data-theme="light"] .check .ok{color:oklch(0.50 0.15 145)} :root[data-theme="light"] .check .no{color:oklch(0.52 0.19 27)}
.linkbtn{background:none;border:0;padding:4px 0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);cursor:pointer;font:500 .9rem var(--body);text-align:left}
.under .go{flex:none}

.hint{display:flex;gap:4px;flex-wrap:wrap;align-items:center;font-size:.88rem;color:var(--ink-2)}
.hint b{width:24px;height:24px;display:grid;place-items:center;border-radius:3px;font:400 .8rem var(--display);color:var(--go);box-shadow:inset 0 0 0 2px color-mix(in oklch,var(--go) 60%,transparent)}
.hint b.blank{color:transparent;box-shadow:inset 0 0 0 2px var(--line)}
.hint b.sp{box-shadow:none}
.hint span{margin-left:8px}

/* ---------- round: powers ---------- */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:8px}
.tools .pw.skip{grid-column:span 2}
.pw{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;padding:8px 4px;border-radius:8px;border:0;background:var(--panel);cursor:pointer;font:500 .8rem var(--body);color:var(--ink)}
.pw:hover:not(:disabled){background:color-mix(in oklch,var(--panel) 75%,var(--ink))}
.pw .ct{position:absolute;top:-6px;right:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:4px;font:400 .72rem/22px var(--display);--c:var(--go)}
.pw:disabled{opacity:.4;cursor:default}
.pw.armed{background:color-mix(in oklch,var(--fail) 30%,var(--panel));box-shadow:inset 0 0 0 2px var(--fail)}
.pw.skip{flex-direction:row;gap:8px;font-weight:700;font-size:.92rem}
.pw.skip .cost{display:inline-flex;align-items:center;gap:3px;font-weight:500;color:var(--ink-2)}
.pw.skip .cost svg{width:12px;height:11px;fill:var(--fail);shape-rendering:crispEdges}
.toast{font-size:.92rem;font-weight:500;color:var(--ink-2);min-height:1.4em}

/* ---------- power pick ---------- */
.headline{display:flex;flex-direction:column;gap:8px}
.headline p{color:var(--ink-2)}
.pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pick button{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 12px 16px;border-radius:10px;border:0;background:var(--panel);cursor:pointer;font:700 1rem var(--body);text-align:left;transition:transform .12s var(--ease),background .12s}
.pick button:hover{transform:translateY(-3px);background:color-mix(in oklch,var(--panel) 80%,var(--ink))}
.pick .mino{width:44px;height:44px;border-radius:5px;display:grid;place-items:center}
.pick .mino svg{stroke:var(--tile-ink);width:24px;height:24px}
.pick small{font-weight:400;color:var(--ink-2);font-size:.82rem;line-height:1.35}

/* ---------- results ---------- */
.over{display:flex;flex-direction:column;gap:18px}
.over h1{font-size:clamp(2.2rem,11vw,3.2rem)}
.final{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.bigscore{font:400 clamp(3rem,15vw,4.6rem)/.9 var(--display);font-variant-numeric:tabular-nums}
.bigscore small{display:block;font:500 .95rem var(--body);color:var(--ink-2);margin-top:8px}
.newbest{align-self:flex-start;font:400 .95rem/1 var(--display);padding:9px 12px 8px;border-radius:5px;animation:pop .5s var(--ease)}
.facts{display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--ink-2);font-size:.95rem}
.facts b{color:var(--ink);font-variant-numeric:tabular-nums}
.over .well{height:auto;max-height:280px;min-height:120px;cursor:default}
.over .well .tower{position:relative;inset:auto;padding:10px 10px 4px;max-height:280px;min-height:120px}
.recap{display:flex;flex-direction:column;gap:8px;color:var(--ink-2)}
.recap b{color:var(--ink)}
.unlock{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:8px;background:color-mix(in oklch,var(--go) 18%,var(--panel));font-weight:700}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ---------- collection ---------- */
.coll{display:flex;flex-direction:column;gap:6px}
.coll details{background:var(--panel);border-radius:8px}
.coll summary{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;cursor:pointer;list-style:none;font-weight:700}
.coll summary::-webkit-details-marker{display:none}
.coll summary .sw{width:16px;height:16px;border-radius:3px;box-shadow:inset 0 2px 0 oklch(1 0 0 / .4),inset 0 -2px 0 oklch(0 0 0 / .25)}
.coll summary small{font:500 .85rem var(--body);color:var(--ink-2);font-variant-numeric:tabular-nums}
.coll .bar{grid-column:2 / -1;display:grid;grid-template-columns:repeat(10,1fr);gap:2px}
.coll .bar i{height:6px;border-radius:1px;background:color-mix(in oklch,var(--line) 60%,transparent)}
.coll .bar i.on{background:var(--c)}
.coll .words{display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 14px 42px}
.coll .words span{font:500 .85rem var(--body);padding:3px 8px;border-radius:4px;background:color-mix(in oklch,var(--c) 22%,var(--well));color:var(--ink)}
.coll .locked summary{color:var(--ink-2);cursor:default;grid-template-columns:16px minmax(0,1fr) auto}
.coll .locked summary .sw{background:none;box-shadow:inset 0 0 0 2px var(--line)}

/* ---------- settings ---------- */
.set{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;border-bottom:2px solid var(--panel)}
.set:last-child{border-bottom:0}
.set span{font-size:.88rem;color:var(--ink-2)}
.switch{appearance:none;-webkit-appearance:none;width:52px;height:30px;border-radius:6px;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line);position:relative;cursor:pointer;flex:none;margin:0;transition:background .15s}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:3px;background:var(--ink-2);transition:transform .18s var(--ease),background .15s}
.switch:checked{background:var(--pass);box-shadow:none} .switch:checked::after{transform:translateX(22px);background:var(--tile-ink)}
select{font:500 .95rem var(--body);min-height:44px;padding:6px 10px;border-radius:8px;border:2px solid var(--line);background:var(--panel);color:var(--ink)}
.fine{font-size:.82rem;color:var(--ink-2)}

/* ---------- sheet ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:12px;animation:fade .15s}
.sheet{width:100%;max-width:520px;background:var(--ground);border-radius:12px;padding:22px 20px 20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 -6px 24px oklch(0 0 0 / .3),inset 0 0 0 2px var(--panel);animation:up .25s var(--ease)}
.sheet p{color:var(--ink-2)}
.stackbtns{display:flex;flex-direction:column;gap:8px;margin-top:4px}

/* ---------- effects ---------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:60;display:grid;place-items:center}
.float{position:absolute;top:44%;font:400 2.2rem var(--display);color:var(--go);text-shadow:0 3px 0 var(--tile-ink);animation:floatup 1s var(--ease) forwards}
.float.small{top:52%;font:700 1rem var(--body);color:var(--tile-ink);background:var(--go);padding:6px 10px;border-radius:5px;text-shadow:none}
.banner{position:absolute;top:26%;font:400 2.4rem/1 var(--display);text-transform:uppercase;padding:14px 22px 12px;border-radius:6px;animation:stamp 1.3s var(--ease) forwards}
.shake{animation:shake .25s 2}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes pop{50%{transform:scale(1.12)}}
@keyframes slam{0%{transform:translateY(-24px);opacity:0}60%{transform:translateY(3px);opacity:1}100%{transform:none}}
@keyframes lock{0%{transform:translateY(-14px);filter:brightness(1.6)}55%{transform:translateY(1px);filter:brightness(1.35)}100%{transform:none;filter:none}}
@keyframes settle{to{transform:translateY(4px)}}
@keyframes fall{from{transform:translateY(-120px);opacity:0}to{transform:none;opacity:1}}
@keyframes blink{to{opacity:.35}}
@keyframes floatup{0%{transform:translateY(20px);opacity:0}15%{opacity:1}100%{transform:translateY(-90px);opacity:0}}
@keyframes stamp{0%{transform:scale(1.8);opacity:0}14%{transform:scale(1);opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes fade{from{opacity:0}} @keyframes up{from{transform:translateY(30px);opacity:0}}

/* ---------- home columns (stacked on phones) ---------- */
.side,.more{display:flex;flex-direction:column;gap:16px;min-width:0}
.well.static{height:150px;cursor:default}

/* ---------- wide screens: a real web layout, not a phone in the middle ----------
   The well becomes the tall board on the left; everything you read and press sits beside it. */
@media (min-width:960px){
  .app{max-width:1200px;padding-left:40px;padding-right:40px}
  .topbar{margin-bottom:20px}

  main[data-screen="home"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start}
  .side{position:sticky;top:24px}
  .more{padding-top:36px}
  .title{padding-top:12px}
  .title .row{--t:88px}.title .row b{font-size:3rem;border-radius:7px}
  .lede{font-size:1.2rem}

  /* the board keeps one portrait shape (4:5) and takes ~70% of the screen height, so shorter
     laptop screens get the same composition as a big monitor, with room left under the board */
  .app{--wellh:clamp(400px,70dvh,720px);--wellw:calc(var(--wellh) * .8)}
  .app:has(> main[data-screen="round"],> main[data-screen="pick"],> main[data-screen="over"]){max-width:calc(var(--wellw) + 624px)}

  main[data-screen="round"],main[data-screen="pick"]{display:grid;grid-template-columns:var(--wellw) minmax(360px,1fr);
    grid-template-rows:repeat(12,auto) 1fr;column-gap:56px;row-gap:16px;align-content:start}
  main[data-screen="round"] .well,main[data-screen="pick"] .well{grid-column:1;grid-row:1 / -1;height:var(--wellh);background-size:32px 32px}
  main[data-screen="round"] .rules li{min-height:56px}
  .under{min-height:60px}
  .under .go{min-width:180px}

  .over{display:grid;grid-template-columns:var(--wellw) minmax(0,1fr);grid-template-rows:repeat(11,auto) 1fr;column-gap:56px;row-gap:18px;align-content:start}
  .over > .well{grid-column:1;grid-row:1 / -1;height:var(--wellh);max-height:none;background-size:32px 32px}
  .over > .well .tower{position:absolute;inset:10px 10px 4px;max-height:none;min-height:0;padding:0}

  .coll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .achs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  main[data-screen="words"] #back,main[data-screen="awards"] #back{align-self:flex-start;width:auto;min-width:200px}
  main[data-screen="settings"]{max-width:680px}
  .headline p{max-width:60ch}
  .scrim{align-items:center}
}
@media (min-width:960px) and (max-height:720px){.title .row{--t:64px}.title .row b{font-size:2.2rem}}

@media (max-width:380px){.pw .lb{display:none}.title .row{--t:50px}.title .row b{font-size:1.7rem}.pick{grid-template-columns:1fr}}
@media (min-width:700px){.app{padding-top:24px}.row{--t:42px}.title .row{--t:72px}.title .row b{font-size:2.5rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.ghost b.cur{opacity:1}}