/* ============================================================
   SHINGLES — symmetric number pyramid — styles
   ============================================================ */
/* display face: Fraunces Black, self-hosted 12.6KB subset (A-Z 0-9 + puzzle punctuation).
   Characters outside the subset fall back to the system stack per-glyph. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:900;font-display:swap;
  src:url('fonts-fraunces-900.woff2') format('woff2');
  unicode-range:U+20-21,U+25,U+27,U+2B-2C,U+2E,U+30-3A,U+3D,U+3F,U+41-5A,U+B7,U+D7,U+2014;}
:root{
  --bg0:#0b0d1f;
  --bg1:#141833;
  --bg2:#1c2145;
  --ink:#eef1ff;
  --ink-dim:#9aa2cc;
  --line:rgba(255,255,255,.10);
  --card:rgba(255,255,255,.05);
  --accent:#7c9cff;
  --accent2:#ff8bd0;
  --good:#4ade80;
  --bad:#ff5a72;
  --warn:#fbbf24;
  --wood:#c68b52;
  --wood-d:#9a6636;
  /* the color grammar: cedar = givens, violet = your moves, gold = the rule/totals */
  --cedar-1:#e8b07a; --cedar-2:#c68b52; --cedar-3:#8a5a2e;
  --violet-1:#a99bff; --violet-2:#8a7dff; --violet-3:#5a63d8;
  --gold-1:#ffe0a8; --gold-2:#ffd27a; --gold-3:#f0a63a;
  /* the sky (defaults = night, the hour the game was born; body.tod-* overrides) */
  --sky-r1:#2a2166; --sky-r2:#1b3a5e; --sky-end:#0a0b18;
  --ridge1:rgba(158,168,255,.055); --ridge2:rgba(190,200,255,.09);
  --aur1:rgba(90,99,216,.13); --aur2:rgba(255,166,88,.05);
  --cell:52px;                        /* the tile HEIGHT (the taller dimension) */
  --cellw:calc(var(--cell) * .82);    /* tiles are ~18% narrower than tall — bigger digits, and a
                                         narrower board scales up larger on phones (fitStage is width-bound) */
  --gap:8px;
  --tab-w:calc(var(--cell) * 0.58);   /* row-total column: as narrow as a 2-digit total needs, to free width */
  --radius:16px;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --display:'Fraunces','Segoe UI',system-ui,sans-serif;
}
/* dawn / day / dusk / night — the title sky knows what time it is */
body.tod-dawn{--sky-r1:#4a2b56;--sky-r2:#7a3d48;--sky-end:#160f22;--aur2:rgba(255,140,110,.10);--ridge2:rgba(255,205,190,.10);}
body.tod-day{--sky-r1:#274a86;--sky-r2:#1e5f77;--sky-end:#0d1226;--aur1:rgba(103,180,249,.10);--ridge2:rgba(190,220,255,.10);}
body.tod-dusk{--sky-r1:#43246a;--sky-r2:#803a55;--sky-end:#0e0a1e;--aur2:rgba(255,150,90,.09);}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;overscroll-behavior:none;}
body{
  font-family:var(--font);color:var(--ink);
  background:
    radial-gradient(1200px 800px at 20% -10%, var(--sky-r1) 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 20%, var(--sky-r2) 0%, transparent 55%),
    linear-gradient(160deg, var(--bg0), var(--bg1) 60%, var(--sky-end));
  transition:background 1.2s ease;
  overflow:hidden;user-select:none;touch-action:manipulation;
  -webkit-user-select:none;-webkit-touch-callout:none;
}
/* the display face carries the wordmark, headers, and difficulty names — WORDS only.
   Game NUMBERS stay on the system stack: a heavy sans reads far cleaner at tile size
   than a display serif (the Fraunces numerals were hard to read on the board). */
.logo-shingle,.screen-title,.overlay-card h1,.overlay-card h2,.ov-praise,.diff-name{font-family:var(--display);}
button{touch-action:manipulation;}
.c-good{color:var(--good);}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;}
#app{position:relative;z-index:2;height:100vh;height:100dvh;}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
          calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  animation:fadeIn .35s ease both;}
#screen-game{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom));}
.screen.is-active{display:flex;animation:screenIn .32s cubic-bezier(.22,.9,.36,1) both;}
@keyframes screenIn{from{opacity:0;transform:translateY(12px) scale(.995);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.screen-title{font-size:clamp(18px,4vw,26px);letter-spacing:.22em;margin:6vh 0 4vh;font-weight:800;}

/* ---------- title ---------- */
.title-wrap{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:560px;}
/* the name IS a roof: letters lap like shingle courses and climb to a gold-capped apex */
.logo{display:flex;gap:0;margin-bottom:6px;flex-wrap:nowrap;justify-content:center;position:relative;
  padding:14px 0 16px;}
.logo::after{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:30px;height:13px;background:linear-gradient(180deg,var(--gold-1),var(--gold-3));
  clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));
  animation:fadeIn .5s ease .75s both;}
.logo-shingle{display:grid;place-items:center;width:clamp(34px,9vw,58px);height:clamp(42px,11vw,70px);
  font-size:clamp(20px,5vw,34px);font-weight:900;color:#fff;border-radius:12px;position:relative;
  background:linear-gradient(160deg,#d79a5c,#a76b38);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.30), inset 0 -5px 0 rgba(255,255,255,.10),
    -6px 5px 12px -5px rgba(0,0,0,.55), 0 10px 20px rgba(90,50,20,.5);
  transform:translateY(var(--rise,0px)) rotate(var(--tilt,0deg));
  animation:logoDrop .6s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--i)*.06s);}
.logo-shingle:nth-child(even){background:linear-gradient(160deg,#8a7dff,#5a63d8);}
.logo-shingle + .logo-shingle{margin-left:-10px;}
/* 🏠 a real gable: straight pitch down from the ridge, tiles laid along the slope */
.logo-shingle:nth-child(2){--rise:24px;--tilt:-7deg;z-index:1;}
.logo-shingle:nth-child(3){--rise:17px;--tilt:-5deg;z-index:2;}
.logo-shingle:nth-child(4){--rise:10px;--tilt:-3.5deg;z-index:3;width:clamp(26px,6.6vw,44px);}
.logo-shingle:nth-child(5){--rise:4px;--tilt:-1.5deg;z-index:4;}
.logo-shingle:nth-child(6){--rise:4px;--tilt:1.5deg;z-index:4;}
.logo-shingle:nth-child(7){--rise:10px;--tilt:3.5deg;z-index:3;}
.logo-shingle:nth-child(8){--rise:17px;--tilt:5deg;z-index:2;}
.logo-shingle:nth-child(9){--rise:24px;--tilt:7deg;z-index:1;}
@keyframes logoDrop{from{opacity:0;transform:translateY(-40px) rotate(-14deg);}to{opacity:1;}}
.tagline{color:var(--ink-dim);font-size:15px;line-height:1.5;max-width:46ch;margin:4px 0 8px;}
.best-line{color:var(--ink-dim);font-size:13px;letter-spacing:.04em;min-height:20px;margin-top:10px;
  display:flex;flex-wrap:wrap;gap:6px 8px;justify-content:center;align-items:center;max-width:340px;}
.best-line b{color:var(--warn);font-variant-numeric:tabular-nums;}
.best-head{width:100%;font-size:11px;letter-spacing:.18em;color:var(--ink-dim);opacity:.7;}
.best-item{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);}
.best-diff{font-weight:800;letter-spacing:.05em;font-size:11px;color:var(--ink);}
.best-round{color:var(--accent2);opacity:.9;font-size:11px;}

/* ---------- buttons ---------- */
.btn{font-family:inherit;font-weight:800;letter-spacing:.06em;border:none;border-radius:14px;cursor:pointer;
  padding:13px 22px;font-size:15px;color:#fff;background:var(--card);border:1px solid var(--line);
  transition:transform .12s ease, box-shadow .12s ease, background .2s;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(1px) scale(.98);}
.btn-primary{background:linear-gradient(160deg,#8a7dff,#5a63d8);border:none;
  box-shadow:0 10px 24px rgba(90,70,220,.45), inset 0 1px 0 rgba(255,255,255,.4);}
.btn-lg{padding:16px 46px;font-size:19px;letter-spacing:.14em;}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink-dim);}
.btn-ghost:hover{color:#fff;}

/* ---------- difficulty ---------- */
/* compact enough that all six cards fit without scrolling, even on short desktop windows */
#screen-difficulty{overflow-y:auto;}
#screen-difficulty .screen-title{margin:3vh 0 2.5vh;}
.diff-grid{display:flex;flex-direction:column;gap:8px;width:min(420px,92vw);margin:auto 0;}
.diff-card{text-align:left;display:flex;flex-direction:column;gap:3px;position:relative;padding:11px 18px;
  border-radius:var(--radius);cursor:pointer;color:#fff;background:var(--card);border:1px solid var(--line);
  transition:transform .14s ease, box-shadow .14s ease, border-color .2s;font-family:inherit;}
.diff-card:hover{transform:translateY(-3px) scale(1.01);border-color:var(--accent);box-shadow:var(--shadow);}
.diff-name{font-size:19px;font-weight:900;letter-spacing:.1em;}
.diff-desc{color:var(--ink-dim);font-size:13px;}
.diff-dots{position:absolute;right:16px;top:16px;display:flex;gap:5px;}
.diff-dots i{width:9px;height:9px;border-radius:50%;background:var(--accent2);opacity:.85;}
.diff-card.diff-timed{background:linear-gradient(160deg, rgba(103,232,249,.14), rgba(255,139,208,.10));border-color:rgba(103,232,249,.45);}
.diff-card.diff-timed .diff-name{background:linear-gradient(90deg,#67e8f9,#ff8bd0);-webkit-background-clip:text;background-clip:text;color:transparent;}
.diff-card.diff-3d{background:linear-gradient(160deg, rgba(138,125,255,.16), rgba(240,166,58,.10));border-color:rgba(138,125,255,.5);}
.diff-card.diff-3d .diff-name{background:linear-gradient(90deg,#a99bff,#ffd27a);-webkit-background-clip:text;background-clip:text;color:transparent;}
.diff-card.diff-cascade{background:linear-gradient(160deg, rgba(142,166,255,.14), rgba(63,208,122,.10));border-color:rgba(142,166,255,.5);}
.diff-card.diff-cascade .diff-name{background:linear-gradient(90deg,#8ea6ff,#8effb0);-webkit-background-clip:text;background-clip:text;color:transparent;}
.diff-card.diff-bringit{background:linear-gradient(160deg, rgba(255,90,60,.18), rgba(255,180,60,.08));border-color:rgba(255,110,60,.55);}
.diff-card.diff-bringit .diff-name{background:linear-gradient(90deg,#ff7a45,#ffd24a);-webkit-background-clip:text;background-clip:text;color:transparent;}
.diff-card.diff-bringit .diff-dots i{background:#ff7a45;}
/* Time Attack intro: the clock ticks at you */
.ta-demo{font-size:54px;text-align:center;margin:2px 0 6px;animation:taPulse 1s ease-in-out infinite;}
@keyframes taPulse{50%{transform:scale(1.18) rotate(-6deg);}}
@media (prefers-reduced-motion:reduce){.ta-demo{animation:none;}}
.diff-card.diff-timed .diff-dots i{background:#67e8f9;}
/* countdown urgency */
.hud-stat.low .hud-val{color:var(--bad);animation:timePulse .5s ease-in-out infinite;}
.hud-stat.low .hud-label{color:var(--bad);}
@keyframes timePulse{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}
#btn-diff-back{margin-top:18px;}

/* ---------- HUD ---------- */
.hud{width:min(720px,100%);display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);backdrop-filter:blur(8px);margin-bottom:10px;}
.hud-stat{display:flex;flex-direction:column;align-items:center;gap:1px;flex:1;min-width:0;}
.hud-label{font-size:10px;letter-spacing:.14em;color:var(--ink-dim);}
.hud-val{font-size:19px;font-weight:900;font-variant-numeric:tabular-nums;}
.hud-lives .hud-val{letter-spacing:1px;font-size:16px;}
.hud-btn{width:40px;height:40px;flex:none;border-radius:12px;font-size:18px;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--line);}
.hud-btn:active{transform:scale(.92);}
.heart{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
.heart.lost{opacity:.22;filter:grayscale(1);}

/* ---------- rule banner ---------- */
.rule-banner{width:min(720px,100%);display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:8px;font-size:13px;color:var(--ink-dim);flex-wrap:wrap;}
.rule-pill{font-weight:900;letter-spacing:.05em;color:#0b0d1f;padding:8px 20px;border-radius:999px;font-size:18px;}

/* new-variation modal (rendered inside .overlay-card) */
.ci-tag{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.14em;color:#0b0d1f;padding:3px 12px;border-radius:999px;margin-bottom:10px;}
.ci-body{font-size:17px;color:var(--ink);line-height:1.5;margin-bottom:14px;}
.ci-body b{color:#ffe0a8;}
.ci-nums{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;}
.ci-num{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-weight:900;font-size:20px;color:#fff;
  background:linear-gradient(180deg,#8a7dff,#5a63d8);box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px rgba(60,40,140,.35);
  animation:pop .3s ease both;}
.ci-num:nth-child(2){animation-delay:.05s;} .ci-num:nth-child(3){animation-delay:.1s;}
.ci-num:nth-child(4){animation-delay:.15s;} .ci-num:nth-child(5){animation-delay:.2s;}
.ci-note{font-size:13px;color:var(--ink-dim);line-height:1.4;margin-bottom:16px;}

/* ---------- stage / pyramid ---------- */
.board-scroll{width:100%;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:flex;justify-content:center;align-items:center;padding:6px 0;}
.stage{display:flex;flex-direction:column;align-items:stretch;transform-origin:top center;}
.pyramid{display:flex;flex-direction:column;align-items:stretch;gap:var(--gap);}

/* each row: centered cells (flex:1) + a fixed total tab, so all totals line up in a right column */
.prow{display:flex;align-items:center;gap:var(--gap);animation:rowIn .4s cubic-bezier(.2,1.1,.4,1) both;}
@keyframes rowIn{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:none;}}
.prow-cells{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--gap);perspective:520px;}

/* row target tab — a single aligned column on the right of the pyramid */
/* row totals: a bare underlined number (no capsule) — bigger digits, less chrome.
   State reads through colour: gold = target, green = met, red = broken, dim dashed = hidden */
.sumtab{flex:none;width:var(--tab-w);height:calc(var(--cell) * .72);border-radius:0;
  display:flex;align-items:center;justify-content:center;gap:1px;padding:0 1px 3px;
  font-weight:900;font-size:calc(var(--cell) * .58);color:#ffd27a;font-variant-numeric:tabular-nums;
  background:none;border-bottom:3px solid rgba(255,210,122,.7);box-shadow:none;
  text-shadow:0 2px 6px rgba(0,0,0,.45);}
.sumtab.ghost{visibility:hidden;}
.sumtab.hidden{background:none;color:#b9aede;border-bottom:3px dashed rgba(185,174,222,.5);box-shadow:none;}
.prow.done .sumtab{background:none;color:#4ade80;border-bottom-color:#3fd07a;}
.prow.done .sumtab.hidden{animation:revealTab .5s ease;border-bottom-style:solid;}
@keyframes revealTab{0%{transform:scale(.7) rotate(-8deg);}60%{transform:scale(1.12);}100%{transform:scale(1);}}
.sum-spacer{flex:none;width:6px;}

/* cells — portrait tiles (taller than wide) so the single digit reads large */
.cell{flex:none;width:var(--cellw);height:var(--cell);border-radius:12px;display:grid;place-items:center;
  font-size:calc(var(--cell) * .66);font-weight:900;color:#fff;position:relative;
  transition:transform .1s ease, border-color .15s, background .15s, box-shadow .15s;}
.cell.blank{cursor:pointer;background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  border:2px solid var(--line);box-shadow:inset 0 2px 6px rgba(0,0,0,.28);color:#fff;}
.cell.blank:hover{border-color:rgba(255,255,255,.3);}
.cell.given{background:linear-gradient(180deg,#c68b52,#9a6636);border:2px solid rgba(255,235,205,.35);
  color:#fff6e9;box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.24), inset 0 -4px 0 rgba(255,255,255,.08), 0 5px 10px rgba(70,40,15,.4);}
.cell.filled{background:linear-gradient(180deg,#8a7dff,#5a63d8);border:2px solid rgba(255,255,255,.35);
  color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.24), inset 0 -4px 0 rgba(255,255,255,.08), 0 6px 12px rgba(60,40,140,.35);animation:pop .18s ease;}
@keyframes pop{0%{transform:scale(.6);}70%{transform:scale(1.12);}100%{transform:scale(1);}}
/* the ONE armed tile: white-hot — nothing else on the board is ever white */
.cell.sel{border-color:#fff!important;box-shadow:0 0 0 3px rgba(255,255,255,.85), 0 6px 16px rgba(0,0,0,.45)!important;transform:translateY(-2px) scale(1.05);z-index:4;}
.prow.done .cell{background:linear-gradient(180deg,#4ade80,#22b463)!important;border-color:rgba(255,255,255,.4)!important;color:#06210f!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 6px 12px rgba(30,150,80,.35)!important;}
/* victory celebration: a golden shimmer ripples row-by-row, then the whole pyramid bounces */
@keyframes winPop{0%{transform:scale(1);}35%{transform:scale(1.13);}100%{transform:scale(1);}}
@keyframes cellGlow{0%,100%{box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 6px 12px rgba(30,150,80,.35);}
  40%{box-shadow:0 0 26px rgba(255,224,140,.95), 0 0 10px #fff, inset 0 0 8px rgba(255,255,255,.8);}}
.prow.celebrate{animation:winPop .55s cubic-bezier(.2,1.4,.4,1);z-index:4;}
.prow.celebrate .cell{animation:cellGlow .6s ease;}
/* small-pool variations: an entered number lands like a rolling die */
.cell.dice{animation:diceRoll .6s cubic-bezier(.3,.75,.35,1);}
@keyframes diceRoll{
  0%{transform:rotateX(-360deg) scale(.88);}
  55%{transform:rotateX(-108deg) scale(1.05);}
  80%{transform:rotateX(-18deg);}
  100%{transform:none;}
}
/* wheel preview: the value hasn't committed yet */
.cell.wheeling{outline:2px dashed var(--accent);outline-offset:-2px;color:#cdd6ff!important;}
#screen-tetra .t3-cell.wheeling{box-shadow:inset 0 0 0 2px var(--accent), 0 0 10px rgba(124,156,255,.5)!important;}
/* give-up reveal: each missing tile pops in as the solution unfolds */
.cell.reveal-pop{animation:revealPop .5s cubic-bezier(.2,1.4,.4,1);}
@keyframes revealPop{0%{transform:scale(.3) rotate(-10deg);opacity:.15;}100%{transform:none;opacity:1;}}
.prow.celebrate .sumtab{animation:cellGlow .6s ease;}
@keyframes winBounce{0%{transform:translateY(0);}22%{transform:translateY(-12px);}48%{transform:translateY(5px);}72%{transform:translateY(-4px);}100%{transform:translateY(0);}}
.pyramid.winbounce{animation:winBounce .9s cubic-bezier(.2,1,.3,1) .12s;}
/* line focus / spotlight */
.board.focusing .cell{transition:opacity .15s, outline-color .15s;}
.board.focusing .cell:not(.focus-row):not(.focus-col){opacity:.4;}
/* row/column spotlight: a soft TINT, never an outline — outlines mean "a specific
   thing is here"; the wash just guides the eye to the selected tile's lines */
.cell.focus-row{box-shadow:inset 0 0 0 99px rgba(124,156,255,.18);}
.cell.focus-col{box-shadow:inset 0 0 0 99px rgba(255,139,208,.15);}
.sumtab.focus{color:#fff;border-bottom-color:var(--accent);text-shadow:0 0 14px rgba(124,156,255,.9);box-shadow:none;}
.colchip.focus .cc-clue{color:#fff;border-bottom-color:var(--accent2);text-shadow:0 0 14px rgba(255,139,208,.9);box-shadow:none;}
.cell.reject{animation:reject .32s ease;border-color:var(--bad)!important;}
/* a cell that's part of an impossible line (can no longer reach its target/balance) */
.cell.bad{border-color:var(--bad)!important;
  box-shadow:0 0 0 2px rgba(255,90,114,.65), 0 0 12px rgba(255,90,114,.5)!important;}
.cell.bad::after{content:'!';position:absolute;top:2px;right:5px;font-size:11px;font-weight:900;color:var(--bad);}
/* shared middle cell of each row (the axis the two Σ halves share) */
.cell.mid::before{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:40%;height:3px;border-radius:3px;background:rgba(255,210,120,.7);}
.cell.mid.given::before,.cell.mid.filled::before{background:rgba(255,255,255,.55);}
/* wrong-row flash (numbers are kept so you can fix the offending cell) */
.prow.wrong .cell.filled{background:linear-gradient(180deg,#ff7a8f,#e0455f)!important;border-color:transparent!important;color:#fff!important;}
.prow.wrong .sumtab.right{background:none;color:#ff5a72;border-bottom-color:#ff5a72;}
@keyframes reject{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}
.prow.shake{animation:shake .4s ease;}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-9px);}40%{transform:translateX(8px);}60%{transform:translateX(-6px);}80%{transform:translateX(4px);}}

/* column clue bar under the base: running total (top) + fixed target clue (gold tab) */
/* column bar aligns under the base cells: centered chips + a spacer matching the totals column */
.colbar-row{display:flex;align-items:flex-start;gap:var(--gap);margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.14);}
.colbar-row .tab-spacer{flex:none;width:var(--tab-w);}
.colbar{flex:1;display:flex;gap:var(--gap);justify-content:center;}
.colchip{flex:none;width:var(--cellw);display:flex;flex-direction:column;align-items:center;gap:4px;}   /* align under the base cells */
.colchip .cc-cur{font-weight:800;font-size:calc(var(--cell) * .30);font-variant-numeric:tabular-nums;
  color:var(--ink-dim);line-height:1;transition:color .2s;}
.colchip .cc-cur i{font-style:normal;opacity:.5;font-size:.8em;}
/* column totals: same bare underlined-number treatment as the row totals */
.colchip .cc-clue{width:100%;height:calc(var(--cell) * .56);border-radius:0;display:grid;place-items:center;
  font-weight:900;font-size:calc(var(--cell) * .50);font-variant-numeric:tabular-nums;color:#ffd27a;
  background:none;padding-bottom:2px;border-bottom:3px solid rgba(255,210,122,.7);
  box-shadow:none;text-shadow:0 2px 6px rgba(0,0,0,.45);transition:all .2s;}
.colchip .cc-clue.hidden{color:#b9aede;border-bottom-style:dashed;border-bottom-color:rgba(185,174,222,.5);}
.colchip.match .cc-cur{color:var(--good);}
.colchip.match .cc-clue{background:none;color:#4ade80;border-bottom-color:#3fd07a;border-bottom-style:solid;box-shadow:none;}
.colchip.mism .cc-cur{color:var(--bad);}
.colchip.mism .cc-clue{background:none;color:#ff5a72;border-bottom-color:#ff5a72;}


/* ---------- assist panel + next-move highlight ---------- */
.assist-panel{width:min(720px,100%);display:none;flex-direction:column;gap:3px;margin:2px 0 8px;
  padding:10px 14px;border-radius:14px;
  background:linear-gradient(180deg, rgba(124,156,255,.18), rgba(124,156,255,.08));
  border:1px solid rgba(124,156,255,.5);box-shadow:0 6px 18px rgba(60,80,180,.25);}
.assist-panel.show{display:flex;animation:fadeIn .2s ease both;}
.assist-panel .as-move{font-size:clamp(16px,4vw,18px);font-weight:800;color:#e9edff;}
.assist-panel .as-move b{color:#fff;background:linear-gradient(180deg,#8a7dff,#5a63d8);
  padding:2px 11px;border-radius:8px;margin:0 1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}
.assist-panel .as-why{font-size:clamp(14px,3.6vw,16px);line-height:1.45;color:#c8d0f0;}
/* solid gold = "part of the arithmetic being explained" (dashed stays reserved
   for provisional things: the joker and the wheel preview) */
.cell.assist-line{outline:2px solid rgba(255,210,122,.55);outline-offset:-2px;}
.cell.assist-target{animation:assistPulse 1.15s ease-in-out infinite;z-index:2;}
@keyframes assistPulse{0%,100%{box-shadow:0 0 0 3px rgba(124,156,255,.5), 0 0 8px rgba(124,156,255,.4);}
  50%{box-shadow:0 0 0 5px rgba(124,156,255,.9), 0 0 20px rgba(124,156,255,.8);}}
.btn-assist{background:linear-gradient(160deg,#8ea6ff,#5a72e8);color:#fff;border:none;box-shadow:0 8px 18px rgba(90,114,232,.35);}
.btn-assist.on{background:linear-gradient(160deg,#7cf0c0,#22b48a);color:#03271c;box-shadow:0 8px 18px rgba(34,180,138,.45);}

/* ---------- controls (mobile-first: actions row + full-width numpad) ---------- */
.controls{width:min(520px,100%);display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.actions{display:flex;gap:8px;}
.actions .btn{flex:1;min-height:48px;padding:12px 10px;font-size:15px;}
.numpad{width:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
/* 📱 phones go T-9: 1-2-3 / 4-5-6 / 7-8-9 with the delete key down the right edge.
   HEX boards ([data-max="15"], 16 keys) keep the wide grid; landscape stays 2-row. */
@media (max-width:520px) and (orientation:portrait){
  .numpad:not([data-max="15"]){grid-template-columns:repeat(3,1fr) .8fr;}
  .numpad:not([data-max="15"]) .np:last-child{grid-column:4;grid-row:1/4;min-height:0;height:100%;}
  #tut-numpad{grid-template-columns:repeat(3,1fr);}
  #tut-numpad .np:last-child{grid-column:auto;grid-row:auto;height:auto;}
}
.np{min-height:clamp(54px,15vw,68px);border-radius:14px;font-size:clamp(24px,7vw,30px);font-weight:900;color:#fff;cursor:pointer;
  display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03));border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 12px rgba(0,0,0,.25);transition:transform .08s ease, background .15s, opacity .2s;}
.np:hover{background:rgba(255,255,255,.15);}
.np:active{transform:translateY(2px) scale(.95);background:var(--accent);}
.np.flash{animation:npFlash .25s ease;}
@keyframes npFlash{0%{background:var(--accent);}100%{}}
.np.disabled{opacity:.2;cursor:not-allowed;pointer-events:none;}
.np.glow{animation:npGlow 1.15s ease-in-out infinite;}
@keyframes npGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 rgba(124,156,255,0);}
  50%{box-shadow:0 0 18px 3px rgba(124,156,255,.75);}}
.btn-hint{background:linear-gradient(160deg,#ffcf5c,#f0a63a);color:#3a2600;border:none;box-shadow:0 8px 18px rgba(240,166,58,.4);}
.btn-hint:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.btn-giveup{flex:0 1 38%;background:linear-gradient(180deg, rgba(255,90,114,.16), rgba(255,90,114,.06));
  color:#ffaebb;border:1px solid rgba(255,90,114,.4);}
.btn-giveup:hover{border-color:rgba(255,90,114,.7);}
.btn-erase{padding:11px;}

/* ---------- learn button + tutorial ---------- */
/* learning IS the gold rule — LEARN rhymes with the gold sum tabs it explains */
.btn-learn{background:linear-gradient(160deg,var(--gold-1),var(--gold-3));color:#3a2408;border:none;
  box-shadow:0 10px 24px rgba(255,180,80,.35), inset 0 1px 0 rgba(255,255,255,.5);font-weight:900;letter-spacing:.08em;}
.tut-top{width:min(720px,100%);display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.tut-progress{flex:1;display:flex;gap:6px;justify-content:center;}
.tut-progress i{width:26px;height:6px;border-radius:6px;background:rgba(255,255,255,.15);transition:background .3s;}
.tut-progress i.on{background:linear-gradient(90deg,#ffd27a,#ff8bd0);}
.tut-progress i.done{background:var(--good);}
.tut-step-label{font-size:11px;letter-spacing:.14em;color:var(--ink-dim);min-width:64px;text-align:right;}
/* board gets priority; the coach is a compact bar that can't dominate */
#screen-tutorial .board-scroll{flex:1 1 auto;min-height:38vh;}
.coach{flex:none;width:min(600px,100%);display:flex;gap:12px;align-items:center;margin:8px auto 6px;padding:12px 16px;border-radius:16px;
  max-height:30vh;overflow-y:auto;
  background:linear-gradient(180deg, rgba(255,210,122,.14), rgba(255,139,208,.09));
  border:1px solid rgba(255,180,120,.4);box-shadow:0 8px 20px rgba(120,60,90,.22);}
.coach.pop{animation:coachIn .3s cubic-bezier(.2,1.3,.4,1) both;}
@keyframes coachIn{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:none;}}
.coach-emoji{position:relative;width:clamp(42px,10vw,54px);flex:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));animation:bob 2.4s ease-in-out infinite;}
.coach-emoji .otto-img{width:100%;display:block;}
.coach-emoji .otto-badge{position:absolute;right:-7px;bottom:-4px;font-size:19px;font-style:normal;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-4px) rotate(3deg);}}
.coach-text{font-size:clamp(16px,4.2vw,20px);line-height:1.45;color:#fff5ea;font-weight:500;}
.coach-text b{color:#ffe0a8;font-weight:800;}
.coach-text .k{background:linear-gradient(180deg,#8a7dff,#5a63d8);color:#fff;padding:2px 10px;border-radius:8px;font-weight:800;white-space:nowrap;}
.coach-text .c-lft{color:#ffd98a;}
.coach-text .c-rgt{color:var(--violet-1);}
.cell.tut-hi{animation:assistPulse 1.1s ease-in-out infinite;z-index:2;cursor:pointer;}
.colchip.tut-hi .cc-clue{box-shadow:0 0 0 3px rgba(255,139,208,.8);animation:assistPulse 1.1s ease-in-out infinite;}
#tut-next{width:100%;min-height:52px;font-size:17px;}
/* animated "these tiles are being added up" sweep (tutorial + assist) */
@keyframes sumHi{0%,100%{box-shadow:inset 0 2px 6px rgba(0,0,0,.25);}
  50%{box-shadow:0 0 0 3px rgba(255,214,130,.9), 0 0 16px rgba(255,184,90,.65);transform:translateY(-3px) scale(1.05);}}
.cell.sum-hi{animation:sumHi 1.5s ease-in-out infinite;animation-delay:var(--d,0s);z-index:3;}
@keyframes sumHiR{0%,100%{box-shadow:inset 0 2px 6px rgba(0,0,0,.25);}
  50%{box-shadow:0 0 0 3px rgba(255,139,208,.95), 0 0 16px rgba(255,120,190,.65);transform:translateY(-3px) scale(1.05);}}
.cell.sum-hi-r{animation:sumHiR 1.5s ease-in-out infinite;animation-delay:var(--d,0s);z-index:3;}
.cell.mid-share{outline:2px dashed rgba(255,255,255,.55);outline-offset:-3px;}
@keyframes totalGlow{0%,100%{filter:brightness(1);box-shadow:inset 0 2px 0 rgba(255,255,255,.5);}
  50%{filter:brightness(1.22);box-shadow:0 0 0 3px rgba(255,214,130,.9), 0 0 18px rgba(255,184,90,.7);}}
.sumtab.total-hi{animation:totalGlow 1.5s ease-in-out infinite;animation-delay:.5s;}
.colchip.total-hi .cc-clue{animation:totalGlow 1.5s ease-in-out infinite;animation-delay:.5s;}
/* tutorial selection matches the real game exactly — train the eye once */
.cell.tut-sel{border-color:#fff!important;box-shadow:0 0 0 3px rgba(255,255,255,.85), 0 6px 16px rgba(0,0,0,.45)!important;transform:translateY(-2px) scale(1.05);z-index:4;}

/* ---------- completion banding box ---------- */
.band-box{position:fixed;z-index:8;pointer-events:none;border:3px solid var(--band,#4ade80);border-radius:15px;
  box-shadow:0 0 20px var(--band,#4ade80), inset 0 0 14px color-mix(in srgb, var(--band,#4ade80) 40%, transparent);
  animation:bandPop .85s cubic-bezier(.2,1.1,.4,1) forwards;}
@keyframes bandPop{0%{opacity:0;transform:scale(1.12);}18%{opacity:1;transform:scale(1);}70%{opacity:1;}100%{opacity:0;transform:scale(1.02);}}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;top:24%;transform:translate(-50%,-50%) scale(.6);z-index:20;pointer-events:none;opacity:0;
  font-size:clamp(30px,8vw,54px);font-weight:900;letter-spacing:.06em;color:#fff;text-shadow:0 6px 24px rgba(0,0,0,.5);
  text-align:center;white-space:nowrap;}
.toast.show{animation:toastPop 1.1s cubic-bezier(.2,1.4,.4,1) forwards;}
@keyframes toastPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-6deg);}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(-2deg);}
  70%{opacity:1;transform:translate(-50%,-60%) scale(1) rotate(0);}
  100%{opacity:0;transform:translate(-50%,-90%) scale(.95);}}
/* 🃏 the joker (opt-in via ⚙ settings) */
.qr-joker{display:none;}
body.joker-on .qr-joker{display:list-item;}
.set-check{display:flex;align-items:center;gap:8px;font-size:14px;grid-column:1 / -1;}
.set-check input{width:18px;height:18px;accent-color:#b48be8;}

.btn-joker{flex:0 0 auto;min-width:64px;background:linear-gradient(160deg,#b48be8,#7b5cc9);border:none;color:#fff;font-weight:900;
  box-shadow:0 8px 18px rgba(120,80,200,.4), inset 0 1px 0 rgba(255,255,255,.4);}
.btn-joker:disabled{opacity:.4;}
.cell.joker{background:linear-gradient(160deg,#3d2a63,#2a1d49);border:2px dashed rgba(212,180,255,.65);
  font-size:calc(var(--cell) * .52);animation:jokerShimmer 2.2s ease-in-out infinite;cursor:default;}
@keyframes jokerShimmer{0%,100%{box-shadow:0 0 6px rgba(190,150,255,.35);}50%{box-shadow:0 0 18px rgba(190,150,255,.75);}}
.cell.joker-solved{background:linear-gradient(180deg,#b48be8,#7b5cc9)!important;border-color:rgba(255,255,255,.4)!important;}
@media (prefers-reduced-motion:reduce){.cell.joker{animation:none;}}

/* 🌅 daily shingle */
.btn-daily{background:linear-gradient(160deg,#f6a54c,#e56b6f);border:none;color:#2a1030;font-weight:900;
  box-shadow:0 10px 24px rgba(230,120,80,.35), inset 0 1px 0 rgba(255,255,255,.45);}
.dl-tri{font-size:15px;line-height:1.25;letter-spacing:1px;margin:6px 0 2px;}

/* 📖 technique codex */
.cx-list{display:flex;flex-direction:column;gap:8px;margin:12px 0;text-align:left;}
.cx-card{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:13px;
  background:var(--card);border:1px solid var(--line);}
.cx-icon{font-size:24px;flex:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4));}
.cx-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.cx-body b{font-size:15px;}
.cx-body span{font-size:12.5px;color:var(--ink-dim);line-height:1.35;}
.cx-count{flex:none;font-weight:900;color:var(--warn);font-variant-numeric:tabular-nums;}
.cx-card.cx-locked{opacity:.55;}
.cx-card.cx-locked .cx-icon{filter:grayscale(1);}

/* ❤️ danger banner: red, urgent, lingers — "2 lives left" / "LAST LIFE" */
.toast.danger{font-size:clamp(20px,6vw,34px);white-space:normal;max-width:92vw;line-height:1.2;
  background:linear-gradient(90deg,#ff5a72,#ffb45a);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 4px 16px rgba(255,60,80,.45));}
.toast.danger.show{animation:toastPop 2.2s cubic-bezier(.2,1.4,.4,1) forwards;}
.colchip.shake{animation:shake .4s ease;}
/* milestone banner: gold-gradient, wraps, lingers longer */
.toast.milestone{font-size:clamp(18px,5.5vw,30px);white-space:normal;max-width:92vw;line-height:1.2;
  background:linear-gradient(90deg,#ffd27a,#ff8bd0,#67e8f9);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 4px 16px rgba(0,0,0,.55));}
.toast.milestone.show{animation:toastPop 2.4s cubic-bezier(.2,1.4,.4,1) forwards;}

/* ---------- ☰ anchored dropdown menu ---------- */
.dd-menu{position:fixed;z-index:60;min-width:210px;padding:6px;display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(180deg,var(--bg2),var(--bg1));border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);animation:ddIn .16s ease both;}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.dd-item{display:block;text-align:left;background:none;border:none;color:var(--ink);font-family:inherit;
  font-size:14px;font-weight:800;letter-spacing:.05em;padding:12px 14px;border-radius:10px;cursor:pointer;}
.dd-item:hover{background:rgba(255,255,255,.08);}
.dd-item:active{transform:scale(.98);}

/* ---------- overlay ---------- */
.overlay{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(6,7,18,.72);backdrop-filter:blur(6px);}
.overlay.is-active{display:flex;animation:fadeIn .3s ease both;}
.overlay-card{width:min(500px,94vw);max-height:92vh;overflow:auto;
  background:linear-gradient(180deg, var(--bg2), var(--bg1));border:1px solid var(--line);border-radius:24px;
  padding:28px 26px;box-shadow:var(--shadow);text-align:center;animation:cardPop .4s cubic-bezier(.2,1.3,.4,1) both;}
@keyframes cardPop{from{opacity:0;transform:scale(.85) translateY(20px);}to{opacity:1;transform:none;}}
.overlay-card h1{font-size:30px;margin:0 0 6px;letter-spacing:.06em;}
.overlay-card h2{font-size:22px;margin:0 0 14px;letter-spacing:.08em;}
.ov-praise{font-size:clamp(26px,7vw,40px);font-weight:900;letter-spacing:.05em;margin:0 0 6px;
  background:linear-gradient(90deg,#ffd27a,#ff8bd0,#7c9cff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ov-stars{font-size:38px;letter-spacing:8px;margin:2px 0 8px;line-height:1;}
.ov-stars .on{color:#ffd27a;filter:drop-shadow(0 2px 6px rgba(255,190,80,.5));animation:starPop .5s cubic-bezier(.2,1.4,.4,1) both;}
.ov-stars .on:nth-child(2){animation-delay:.12s;}
.ov-stars .on:nth-child(3){animation-delay:.24s;}
.ov-stars .off{color:rgba(255,255,255,.16);}
@keyframes starPop{from{opacity:0;transform:scale(.2) rotate(-30deg);}to{opacity:1;transform:none;}}
.ov-stats{display:flex;flex-direction:column;gap:8px;margin:16px 0 20px;text-align:left;}
.ov-stat{display:flex;justify-content:space-between;padding:9px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);}
.ov-stat b{color:var(--warn);font-variant-numeric:tabular-nums;}
.ov-stat.big{font-size:18px;}
.overlay-card .btn{width:100%;margin-top:8px;}

/* ---------- ⚡ BONUS ROUND ---------- */
.overlay-card.bonus-card{position:relative;overflow:hidden;border:none;
  background:linear-gradient(160deg,#2a1e4d,#3a2140);
  box-shadow:0 0 60px rgba(255,180,80,.35), 0 18px 40px rgba(0,0,0,.55);}
.overlay-card.bonus-card::before{content:'';position:absolute;inset:0;padding:2px;border-radius:24px;pointer-events:none;
  background:linear-gradient(90deg,#ffd27a,#ff8bd0,#67e8f9,#ffd27a);background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:bonusBorder 3s linear infinite;}
@keyframes bonusBorder{to{background-position:300% 0;}}
.bonus-bolts{font-size:44px;display:flex;justify-content:center;gap:14px;margin-bottom:2px;}
.bonus-bolts span{display:inline-block;filter:drop-shadow(0 0 14px #ffd27a);animation:boltZap .9s ease-in-out infinite;}
.bonus-bolts span:nth-child(2){animation-delay:.15s;}
.bonus-bolts span:nth-child(3){animation-delay:.3s;}
@keyframes boltZap{0%,100%{transform:translateY(0) scale(1) rotate(-6deg);}50%{transform:translateY(-6px) scale(1.28) rotate(6deg);}}
.bonus-title{font-size:clamp(42px,12vw,72px);font-weight:900;letter-spacing:.03em;line-height:.9;margin:2px 0 12px;
  background:linear-gradient(90deg,#ffd27a,#ff8bd0,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(255,150,80,.5));animation:bonusZoom .7s cubic-bezier(.2,1.5,.4,1) both;}
@keyframes bonusZoom{0%{opacity:0;transform:scale(.3) rotate(-8deg);}60%{transform:scale(1.12);}100%{opacity:1;transform:none;}}
.bonus-sub{color:var(--ink-dim);font-size:15px;line-height:1.5;margin:7px 0;}
.bonus-sub b{color:#ffd27a;}
.bonus-rule{background:rgba(163,230,53,.12);border:1px solid rgba(163,230,53,.4);border-radius:14px;
  padding:11px 14px;margin:8px 0;font-size:14px;line-height:1.5;color:var(--ink);text-align:left;}
.bonus-rule b{color:#c6f866;}
.br-tag{display:inline-block;background:#a3e635;color:#1a2408;font-weight:900;font-size:11px;
  letter-spacing:.04em;padding:3px 9px;border-radius:999px;margin-right:6px;}
.bonus-timer{font-size:36px;font-weight:900;color:#ff8bd0;margin:14px 0 6px;font-variant-numeric:tabular-nums;
  animation:bonusPulse 1s ease-in-out infinite;}
@keyframes bonusPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.09);}}
.bonus-praise{background:linear-gradient(90deg,#ffd27a,#ff8bd0,#67e8f9);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.rule-pill.bonus-pill{background:linear-gradient(90deg,#ffd27a,#ff8bd0);color:#2a1030;animation:bonusPulse 1.2s ease-in-out infinite;}
body.bonus-round #screen-game{box-shadow:inset 0 0 120px rgba(255,180,90,.10);}

/* ---------- how to ---------- */
.howto-card{text-align:left;}
.howto-list{margin:0 0 16px;padding-left:20px;line-height:1.55;color:var(--ink-dim);font-size:14px;}
.howto-list li{margin-bottom:9px;}
.howto-list b{color:var(--ink);}
.howto-demo{display:flex;flex-direction:column;align-items:center;gap:5px;margin:4px 0 16px;--cell:34px;}
.howto-demo .prow{gap:5px;}

/* ---------- responsive ---------- */
@media (max-width:560px){
  :root{--cell:52px;--gap:6px;}   /* taller tiles; --cellw ratio keeps them narrow so the board scales up big */
  .numpad{gap:6px;}
  .hud{gap:6px;padding:7px 8px;margin-bottom:6px;}
  .hud-label{letter-spacing:.06em;}
  .hud-val{font-size:17px;}
  .hud-btn{width:38px;height:38px;}
  /* keep the banner tight but the variation label big and legible */
  .rule-banner{gap:6px;margin-bottom:5px;}
  .rule-pill{padding:6px 16px;font-size:16px;}
  .assist-panel{margin:3px 0 5px;padding:8px 12px;}
  /* keypad spans (almost) the full screen width on phones: trim the screen's side padding
     and let the controls run edge-to-edge instead of the 520px cap */
  #screen-game, #screen-cascade, #screen-tetra{padding-left:calc(5px + env(safe-area-inset-left));padding-right:calc(5px + env(safe-area-inset-right));}
  .controls{gap:6px;margin-top:6px;width:100%;}
  .actions{width:100%;}
  .actions .btn{min-height:46px;}
}
@media (max-width:380px){
  :root{--cell:48px;}
  .hud-label{font-size:9px;}
  .hud-val{font-size:15px;}
  .actions .btn{font-size:13px;padding:11px 6px;}
}
@media (min-height:780px){:root{--cell:56px;}}
@media (min-height:900px){:root{--cell:60px;}}
/* landscape phones: reclaim vertical space, keep everything on one screen */
@media (orientation:landscape) and (max-height:520px){
  :root{--cell:34px;--gap:4px;}
  .rule-banner{margin-bottom:4px;}
  .hud{margin-bottom:6px;padding:6px 10px;}
  .controls{width:min(680px,100%);}
  .np{min-height:40px;font-size:20px;}
  .actions .btn{min-height:40px;padding:8px;}
  .assist-panel{margin:2px 0 4px;padding:6px 12px;}
}

/* ============================================================
   3D MODE (triangular pyramid) — all scoped to #screen-tetra and
   prefixed .t3- so nothing collides with the 2D board.
   ============================================================ */
#screen-tetra{ --t3-slope:21deg; --t3-apexX:42.8%; --t3-apexY:18%; --t3-scale:1; justify-content:flex-start; gap:9px; overflow-y:auto; overflow-x:hidden; }
#screen-tetra .hud{ margin-bottom:0; }
#screen-tetra .t3-modebar{ width:min(720px,100%); display:flex; align-items:center; justify-content:space-between; gap:8px; }
#screen-tetra .t3-pills{ display:flex; gap:6px; }
#screen-tetra .t3-pill{ font-family:inherit; font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--ink-dim);
  border:1px solid var(--line); border-radius:999px; padding:7px 14px; cursor:pointer; background:transparent; transition:.15s; }
#screen-tetra .t3-pill[aria-pressed="true"]{ color:#1a1230; background:linear-gradient(160deg,#ffd27a,#f0a63a); border-color:transparent; }
#screen-tetra .t3-pill.t3-ghost[aria-pressed="true"]{ color:var(--ink); background:linear-gradient(160deg, rgba(124,156,255,.4), rgba(90,99,216,.35)); }

/* no card frame — the pyramid floats on the screen background like the 2D board */
/* 🦉 post-reveal review gate */
.reveal-continue{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:55;
  display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;width:min(500px,94vw);
  background:linear-gradient(180deg,rgba(38,44,92,.98),rgba(23,27,60,.98));border:1px solid rgba(255,210,122,.55);
  box-shadow:0 18px 50px rgba(0,0,0,.6);animation:coachIn .3s cubic-bezier(.2,1.3,.4,1) both;}
.reveal-continue img{width:58px;flex:none;}
.reveal-continue span{font-size:15px;font-weight:600;color:#fff5ea;line-height:1.35;flex:1;}
.reveal-continue .btn{margin:0;padding:14px 20px;font-size:15px;flex:none;}

/* 🌅 daily result card: everything above the fold, no scrolling */
.dl-card .ov-otto{width:56px;margin:0 auto 2px;}
.dl-card h2{font-size:clamp(19px,4.6vw,24px);margin:2px 0 4px;}
.dl-card .dl-tri{font-size:12px;line-height:1.15;margin:2px 0 0;}
.dl-card .ov-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0 12px;}
.dl-card .ov-stat{padding:7px 12px;font-size:13px;}
.dl-card .ov-stat.big{grid-column:1/-1;}
.dl-card .btn{margin:3px 0;padding:12px 14px;}
.dl-card .lb-note{margin-top:2px;}
.dl-btnrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
.dl-btnrow .btn{width:100%;}
@media (max-height:760px){
  .dl-card .ov-otto{display:none;}
  .dl-card .dl-tri{font-size:10px;line-height:1.1;}
  .dl-card .btn{padding:10px 12px;}
}

/* ⚡ leaderboard sort toggle */
.lb-sorts{display:flex;gap:8px;justify-content:center;margin:2px 0 8px;}
.lb-sort{font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--ink-dim);
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;}
.lb-sort.on{color:#1a1230;background:linear-gradient(160deg,#ffd27a,#f0a63a);border-color:transparent;}

/* 🎬 replay mode: the board is a stage — stray taps must not derail the show */
.replaying .board-scroll,.replaying .numpad,.replaying .actions,.replaying .colbar{pointer-events:none;}
/* &clean=1: recording mode — controls gone, the board takes the room (fitStage grows it) */
.replay-clean .controls{display:none;}
.replay-clean .hud-btn{visibility:hidden;}
/* the board self-fits (fitStage) — a scrollbar there is always noise, everywhere */
.board-scroll{scrollbar-width:none;}
.board-scroll::-webkit-scrollbar{display:none;}

/* 🦉 Otto on result cards */
.ov-otto{width:78px;max-width:24vw;margin:2px auto 4px;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));}
#screen-title{overflow-y:auto;overflow-x:hidden;}   /* safety: reachable, never sideways-scrolls */
/* 🦉 Otto perches ON the wordmark roof — top of the window, out of the column's way,
   one placement for every screen size. Feet tuck 12px behind the shingle tops. */
.title-otto-wrap.otto-roof{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% - 12px);
  width:clamp(48px,12vw,64px);margin:0;z-index:0;pointer-events:none;}
.otto-roof .title-otto{animation:bob 3.4s ease-in-out infinite;}
@keyframes ottoIn{from{opacity:0;}to{opacity:1;}}
#screen-title.intro .otto-roof{animation:ottoIn .6s ease 1.35s both;}   /* he appears after the shingles land */
.title-otto{width:100%;display:block;filter:drop-shadow(0 5px 14px rgba(0,0,0,.45));}
/* 😉 the blink: eyelids matched to Otto's face color slide over the measured eye discs
   (creams at x 18–48% / 52–81.5%, centered 33.6% down) for ~320ms every 5.4s */
.otto-lid{position:absolute;width:26.5%;aspect-ratio:1;border-radius:50%;
  background:linear-gradient(180deg,#4d579f,#3a4183);
  top:22.2%;transform-origin:50% 8%;transform:scaleY(.05);opacity:0;
  transition:transform .09s ease-in,opacity .06s;pointer-events:none;}
.otto-lid-l{left:19.8%;}
.otto-lid-r{left:53.5%;}
/* JS (ottoBlinker in game.js) rolls the dice: .blink closes both, .wink just one */
.title-otto-wrap.blink .otto-lid,
.title-otto-wrap.wink .otto-lid-r{transform:scaleY(1);opacity:1;}
@media (max-height:560px){.title-otto-wrap{display:none;}}
@media (prefers-reduced-motion:reduce){.otto-lid,.title-otto-wrap{animation:none;transition:none;}}
.as-otto{width:32px;vertical-align:middle;margin-right:7px;display:inline-block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4));}

/* 📊 daily stats: solve-time distribution bars */
.st-dist{width:100%;display:flex;flex-direction:column;gap:6px;margin:10px 0 2px;}
.st-row{display:flex;align-items:center;gap:8px;font-size:12px;}
.st-lbl{width:38px;text-align:right;color:var(--ink-dim);font-weight:700;}
.st-track{flex:1;height:14px;border-radius:7px;background:rgba(255,255,255,.06);overflow:hidden;}
.st-bar{height:100%;border-radius:7px;background:linear-gradient(90deg,#ffd27a,#f0a63a);min-width:2px;transition:width .4s ease;}
.st-ct{width:22px;font-weight:800;font-variant-numeric:tabular-nums;}

#screen-tetra .t3-stage{ width:min(720px,100%); flex:1; min-height:290px; position:relative;
  display:grid; place-items:center; overflow:hidden; perspective:1150px; touch-action:none; cursor:grab; }
#screen-tetra .t3-stage:active{ cursor:grabbing; }
#screen-tetra .t3-stage.solved{ background:radial-gradient(90% 60% at 50% 46%, rgba(63,208,122,.15), transparent 62%); }
#screen-tetra .t3-stage::after{ content:''; position:absolute; left:50%; top:73%; width:236px; height:40px; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.4), transparent 70%); filter:blur(3px); pointer-events:none; }
#screen-tetra .t3-solid{ position:relative; width:360px; height:248px; transform-style:preserve-3d;
  transform:scale(var(--t3-scale)) rotateX(7deg) rotateY(calc(var(--t3-spin,0deg) - 4deg)); transform-origin:var(--t3-apexX) var(--t3-apexY);
  transition:transform .55s cubic-bezier(.2,.85,.25,1); }
#screen-tetra .t3-solid.dragging{ transition:none; }

/* faces are invisible full-size rects rotated in 3D — without this they intercept
   clicks meant for the front face's tiles (selection silently fails) */
#screen-tetra .t3-face{ position:absolute; inset:0; transform-style:preserve-3d; transform-origin:var(--t3-apexX) var(--t3-apexY); backface-visibility:hidden; pointer-events:none; }
#screen-tetra .t3-face.is-front .t3-cell{ pointer-events:auto; }
/* opaque fill = the body of the solid; away-facing sides shade darker like a lit object */
#screen-tetra .t3-face-bg{ position:absolute; inset:0; clip-path:polygon(42.8% 5%, 79% 80%, 7% 80%); border-radius:6px;
  background:linear-gradient(170deg, #262c5c 0%, #171b3c 55%, #111430 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); transition:filter .35s, opacity .3s; }
/* side faces show only their tiles — the big backdrop triangles sweeping past during
   rotation read as an artifact, so they exist on the FRONT face alone (the pulsing
   .action highlight is the exception: it's the "go here" signpost) */
#screen-tetra .t3-face:not(.is-front) .t3-face-bg{ filter:brightness(.6) saturate(.85); opacity:0; }
#screen-tetra .t3-face:not(.is-front).action .t3-face-bg{ opacity:1; }
#screen-tetra .t3-solid.dragging .t3-face-bg, #screen-tetra .t3-solid.spinning .t3-face-bg{ opacity:0; }
#screen-tetra .t3-face:not(.is-front) .t3-cell{ filter:brightness(.72); }
#screen-tetra .t3-face.action .t3-face-bg{ background:linear-gradient(170deg, rgba(240,166,58,.24), rgba(124,156,255,.08));
  box-shadow:inset 0 0 0 2px rgba(255,210,122,.65), 0 0 26px rgba(240,166,58,.32); animation:t3-seam 1.3s ease-in-out infinite; }
@keyframes t3-seam{ 50%{ box-shadow:inset 0 0 0 2px rgba(255,210,122,1), 0 0 40px rgba(240,166,58,.6); } }

#screen-tetra .t3-cell{ position:absolute; width:52px; height:58px; margin:-29px 0 0 -26px; border-radius:12px;
  display:grid; place-items:center; font-weight:900; font-size:30px; font-variant-numeric:tabular-nums;
  color:#fff; transition:transform .16s, box-shadow .2s, filter .35s; backface-visibility:hidden;
  transform:translateZ(7px); }   /* lifted off the face so shared-edge tiles on two faces never intersect */
#screen-tetra .t3-cell.blank{ background:rgba(255,255,255,.045); box-shadow:inset 0 0 0 2px rgba(255,255,255,.15); cursor:pointer; }
#screen-tetra .t3-cell.given{ background:linear-gradient(180deg,#d79a5c,#9a6636);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -4px 8px rgba(0,0,0,.25), 0 4px 8px rgba(90,50,20,.4); }
#screen-tetra .t3-cell.fill{ background:linear-gradient(180deg,#8a7dff,#5a63d8); cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -4px 8px rgba(0,0,0,.25), 0 4px 8px rgba(60,40,140,.45); }
#screen-tetra .t3-cell.ready{ box-shadow:inset 0 0 0 2px var(--accent2), 0 0 13px rgba(255,139,208,.55); animation:t3-ready 1.15s ease-in-out infinite; }
@keyframes t3-ready{ 50%{ box-shadow:inset 0 0 0 2px #fff, 0 0 18px rgba(255,139,208,.85); } }
#screen-tetra .t3-cell.sel{ box-shadow:inset 0 0 0 3px var(--accent), 0 0 0 3px rgba(124,156,255,.45), 0 5px 12px rgba(0,0,0,.35)!important; transform:translateZ(7px) scale(1.12); z-index:3; }
#screen-tetra .t3-cell.pop{ animation:t3-pop .4s cubic-bezier(.2,1.4,.4,1); }
@keyframes t3-pop{ 0%{transform:translateZ(7px) scale(.4);opacity:.2;} 100%{transform:translateZ(7px) scale(1);opacity:1;} }
#screen-tetra .t3-cell.reject{ animation:t3-reject .4s ease; }
@keyframes t3-reject{ 0%,100%{transform:translateZ(7px);} 20%{transform:translateZ(7px) translateX(-4px);} 40%{transform:translateZ(7px) translateX(4px);} 60%{transform:translateZ(7px) translateX(-3px);} 80%{transform:translateZ(7px) translateX(3px);} }
#screen-tetra .t3-solid.win .t3-cell:not(.blank){ background:linear-gradient(180deg,#8effb0,#3fd07a)!important; color:#06210f!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 12px rgba(63,208,122,.5)!important; }

#screen-tetra .t3-tgt{ position:absolute; transform:translate(-50%,-50%) translateZ(7px); display:grid; place-items:center; pointer-events:none;
  font-weight:900; font-variant-numeric:tabular-nums; color:#ffd27a; box-shadow:none;
  text-shadow:0 2px 6px rgba(0,0,0,.65);
  white-space:nowrap; backface-visibility:hidden; transition:opacity .3s; }
/* while the solid is turning, the floating pills retract so only the pyramid body moves */
#screen-tetra .t3-solid.dragging .t3-tgt, #screen-tetra .t3-solid.spinning .t3-tgt{ opacity:0; }
/* shared tiles (apex, slant edges, corners) exist on 2–3 faces — during a turn only the
   front face's copy shows, so the seams don't read as doubled tiles */
#screen-tetra .t3-cell{ transition:transform .16s, box-shadow .2s, filter .35s, opacity .25s; }
#screen-tetra .t3-solid.dragging .t3-face:not(.is-front) .t3-cell.t3-shared,
#screen-tetra .t3-solid.spinning .t3-face:not(.is-front) .t3-cell.t3-shared{ opacity:0; }
#screen-tetra .t3-tgt.row{ min-width:30px; padding:0 3px 3px; border-radius:0; font-size:31px; background:none; border-bottom:3px solid rgba(255,210,122,.8); }
#screen-tetra .t3-tgt.col{ min-width:24px; padding:0 2px 2px; border-radius:0; font-size:22px; background:none; border-bottom:2px solid rgba(255,210,122,.8); }
#screen-tetra .t3-face:not(.is-front) .t3-tgt{ opacity:0; }
#screen-tetra .t3-tgt.met{ background:none!important; color:#4ade80!important; border-bottom-color:#3fd07a!important; }

#screen-tetra .t3-status{ width:min(520px,100%); border:1px solid var(--line); border-radius:12px; padding:9px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); display:flex; flex-direction:column; gap:2px; }
#screen-tetra .t3-status .t3-now{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); font-weight:800; }
#screen-tetra .t3-status .t3-msg{ font-size:14px; font-weight:600; }
#screen-tetra .t3-status.stuck{ border-color:rgba(240,166,58,.5); background:linear-gradient(180deg, rgba(240,166,58,.12), rgba(255,255,255,.02)); }
#screen-tetra .t3-status.done{ border-color:rgba(63,208,122,.5); background:linear-gradient(180deg, rgba(63,208,122,.14), rgba(255,255,255,.02)); }

#screen-tetra .t3-controls{ width:min(520px,100%); display:grid; grid-template-columns:1.6fr 1.6fr 1fr 1fr 1.3fr; gap:8px; }
#screen-tetra .t3-assist, #screen-tetra .t3-giveup{ padding:12px 4px; font-size:13px; white-space:nowrap; }
#screen-tetra .t3-controls .btn{ min-height:46px; padding:10px 6px; font-size:14px; margin:0; }
#screen-tetra .t3-assist{ background:linear-gradient(160deg,#ffcf5c,#f0a63a); color:#3a2600; border:none; }
#screen-tetra .t3-assist.pulse{ animation:t3-apulse 1.2s ease-in-out infinite; }
@keyframes t3-apulse{ 50%{ box-shadow:0 6px 22px rgba(240,166,58,.8);} }
#screen-tetra .t3-turn{ background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03)); border:1px solid var(--line); font-size:18px; }
#screen-tetra .t3-new{ background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03)); border:1px solid var(--line); }
#screen-tetra .t3-new.go{ background:linear-gradient(160deg,#8effb0,#3fd07a); color:#06210f; border:none; }
#screen-tetra .numpad{ width:min(520px,100%); }
#screen-tetra .numpad .np{ min-height:clamp(44px,6vh,56px); }
/* ============================================================
   CASCADE MODE (gravity drops) — scoped to #screen-cascade; reuses
   the 2D board's .cell/.sumtab/.colchip visuals inside cs- layout.
   ============================================================ */
#screen-cascade{ justify-content:flex-start; gap:9px; overflow-y:auto; }
#screen-cascade .hud{ margin-bottom:0; }
#screen-cascade .cs-modebar{ width:min(720px,100%); display:flex; align-items:center; justify-content:space-between; }
#screen-cascade .cs-pills{ display:flex; gap:6px; }
#screen-cascade .cs-pill{ font-family:inherit; font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--ink-dim);
  border:1px solid var(--line); border-radius:999px; padding:7px 14px; cursor:pointer; background:transparent; transition:.15s; }
#screen-cascade .cs-pill[aria-pressed="true"]{ color:#1a1230; background:linear-gradient(160deg,#ffd27a,#f0a63a); border-color:transparent; }

#screen-cascade .cs-boardwrap{ width:100%; flex:1; min-height:0; display:flex; justify-content:center; align-items:center; overflow:visible; }
/* rows all span the stage width, so every row-total tab lines up in one right column (like 2D) */
/* both axes are game gestures now (horizontal = slide, vertical = number spin) */
#screen-cascade .cs-stage{ display:flex; flex-direction:column; align-items:stretch; width:max-content; gap:var(--gap); transform-origin:top center; cursor:grab; touch-action:none; }
#screen-cascade .cs-stage:active{ cursor:grabbing; }
/* the number wheel: each scrubbed step rolls the digit in from above/below */
#screen-cascade .cs-num{ display:block; }
#screen-cascade .cs-num.roll-u{ animation:csRollU .14s cubic-bezier(.2,.8,.4,1); }
#screen-cascade .cs-num.roll-d{ animation:csRollD .14s cubic-bezier(.2,.8,.4,1); }
@keyframes csRollU{ from{ transform:translateY(55%); opacity:.25; } to{ transform:none; opacity:1; } }
@keyframes csRollD{ from{ transform:translateY(-55%); opacity:.25; } to{ transform:none; opacity:1; } }
#screen-cascade .cs-pyr, #screen-cascade .cs-colbar{ display:flex; flex-direction:column; align-items:stretch; gap:var(--gap); }
#screen-cascade .cs-row{ display:flex; align-items:center; gap:var(--gap); }
#screen-cascade .cs-rail{ flex:none; width:var(--tab-w); display:grid; place-items:center; }
#screen-cascade .cs-cells{ flex:1; display:flex; gap:var(--gap); align-items:center; justify-content:center; }
#screen-cascade .sumtab.met{ background:none; color:#4ade80; border-bottom:3px solid #3fd07a; }

/* the carrier lane above the pyramid: the tile (or its waiting outline) slides/drags along it */
#screen-cascade .cs-lane{ position:relative; width:100%; height:calc(var(--cell) + 10px); cursor:grab; touch-action:none; }
#screen-cascade .cs-lane:active{ cursor:grabbing; }
#screen-cascade .cs-carrier{ transform:translateY(var(--cs-fy,0px)); position:absolute; top:4px; left:calc(50% + (var(--cs-col,0) * (var(--cellw) + var(--gap))) - (var(--cellw) / 2));
  width:var(--cellw); height:var(--cell); display:none; place-items:center; z-index:3;
  transition:left .18s ease; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 20px rgba(60,40,140,.55), 0 0 0 3px rgba(124,156,255,.45); }
#screen-cascade .cs-carrier.cs-empty{ background:rgba(255,255,255,.04); box-shadow:none; border:2px dashed rgba(124,156,255,.65); }
#screen-cascade .cs-carrier::after{ content:'⬇'; position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); font-size:14px; color:var(--accent); opacity:.85; }
#screen-cascade .cs-shake{ animation:cs-shake .4s ease; }
@keyframes cs-shake{ 0%,100%{margin-left:0;} 20%{margin-left:-6px;} 40%{margin-left:6px;} 60%{margin-left:-4px;} 80%{margin-left:4px;} }

/* the landing slot for the current column + slots that are logically forced */
#screen-cascade .cs-ghost{ outline:2px dashed rgba(124,156,255,.75); outline-offset:-2px; }
#screen-cascade .cs-ready{ box-shadow:inset 0 0 0 2px rgba(255,139,208,.5), 0 0 12px rgba(255,139,208,.35); }

/* the drop: tile falls in from the lane */
#screen-cascade .cs-fall{ animation:cs-fall .32s cubic-bezier(.35,0,.6,1); }
@keyframes cs-fall{ from{ transform:translateY(calc(-1 * var(--fall,120px))); } to{ transform:none; } }

#screen-cascade .cs-status{ width:min(520px,100%); border:1px solid var(--line); border-radius:12px; padding:9px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); display:flex; flex-direction:column; gap:2px; }
#screen-cascade .cs-status .cs-now{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); font-weight:800; }
#screen-cascade .cs-status .cs-msg{ font-size:14px; font-weight:600; }
#screen-cascade .cs-status.done{ border-color:rgba(63,208,122,.5); background:linear-gradient(180deg, rgba(63,208,122,.14), rgba(255,255,255,.02)); }

#screen-cascade .cs-controls{ width:min(520px,100%); display:grid; grid-template-columns:1.5fr 1.5fr .75fr .75fr 1fr; gap:7px; }
#screen-cascade .cs-assist, #screen-cascade .cs-giveup{ white-space:nowrap; font-size:13px; padding:12px 4px; }
#screen-cascade .cs-controls .btn{ min-height:46px; padding:10px 6px; font-size:14px; margin:0; }
#screen-cascade .cs-assist{ background:linear-gradient(160deg,#ffcf5c,#f0a63a); color:#3a2600; border:none; }
#screen-cascade .cs-turn, #screen-cascade .cs-new{ background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03)); border:1px solid var(--line); }
#screen-cascade .cs-drop{ background:linear-gradient(160deg,#8ea6ff,#5a72e8); color:#fff; border:none; }
#screen-cascade .cs-new.go{ background:linear-gradient(160deg,#8effb0,#3fd07a); color:#06210f; border:none; }
#screen-cascade .numpad{ width:min(520px,100%); }
#screen-cascade .numpad .np{ min-height:clamp(44px,6vh,56px); }
@media (prefers-reduced-motion:reduce){ #screen-cascade .cs-fall, #screen-cascade .cs-shake, #screen-cascade .cs-num.roll-u, #screen-cascade .cs-num.roll-d{ animation:none; } #screen-cascade .cs-carrier{ transition:none; } }

/* the folded-in modes hide from the menu unless ?settings is in the URL */
.diff-card.diff-extra{ display:none; }
body.show-extras .diff-card.diff-extra{ display:flex; }

/* ⚙ settings playground */
.set-grid{ display:flex; flex-direction:column; gap:10px; margin:14px 0 18px; text-align:left; }
.set-grid label{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; color:var(--ink-dim); font-weight:600; }
.set-grid select, .set-grid input{ font-family:inherit; font-size:14px; font-weight:700; color:var(--ink);
  background:rgba(255,255,255,.07); border:1px solid var(--line); border-radius:10px; padding:9px 12px; width:60%; }
.set-grid select option{ background:#1c2145; }

/* ============================================================
   Special-round integration: intro demo animations + run chrome
   ============================================================ */
/* spinning mini-pyramid for the 3D Rotate intro — the pulsing tiles are the shared edges */
.t3demo{ height:150px; display:grid; place-items:center; perspective:520px; margin:4px 0 8px; }
.t3demo-solid{ position:relative; width:120px; height:104px; transform-style:preserve-3d; transform-origin:50% 22%;
  animation:t3demoSpin 8s linear infinite; }
@keyframes t3demoSpin{ from{ transform:rotateX(14deg) rotateY(0); } to{ transform:rotateX(14deg) rotateY(360deg); } }
.t3demo-face{ position:absolute; inset:0; transform-origin:50% 12%; backface-visibility:hidden; transform-style:preserve-3d; }
.t3demo-face .bg{ position:absolute; inset:0; clip-path:polygon(50% 0, 92% 96%, 8% 96%);
  background:linear-gradient(170deg,#262c5c,#141838); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.t3demo-face i{ position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:6px;
  background:linear-gradient(180deg,#d79a5c,#9a6636); transform:translateZ(4px); }
.t3demo-face i.e{ background:linear-gradient(180deg,#ff8bd0,#c9539b); animation:t3demoPulse 1.3s ease-in-out infinite; }
@keyframes t3demoPulse{ 50%{ box-shadow:0 0 12px rgba(255,139,208,.95); } }
/* falling-tile demo for the Tile Drop intro */
.csdemo{ height:130px; display:flex; justify-content:center; align-items:flex-end; gap:6px; margin:4px 0 8px; }
.csdemo .cd-col{ display:flex; flex-direction:column-reverse; gap:5px; }
.csdemo b{ width:26px; height:26px; border-radius:7px; background:linear-gradient(180deg,#d79a5c,#9a6636);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
.csdemo b.ghost{ background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 2px rgba(124,156,255,.5); }
.csdemo b.fall{ background:linear-gradient(180deg,#8a7dff,#5a63d8); animation:csdemoFall 1.8s cubic-bezier(.4,0,.7,1) infinite; }
@keyframes csdemoFall{ 0%,12%{ transform:translateY(-92px); opacity:0; } 22%{ opacity:1; } 55%{ transform:none; } 100%{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .t3demo-solid, .t3demo-face i.e, .csdemo b.fall{ animation:none; } }

/* while a special round is part of an EASY/MEDIUM/HARD run: hide the mode's own
   difficulty pills and NEW button — the run drives progression */
body.mode-run #screen-tetra .t3-pills, body.mode-run #screen-tetra .t3-new,
body.mode-run #screen-cascade .cs-pills, body.mode-run #screen-cascade .cs-new{ display:none; }
body.mode-run #screen-tetra .t3-controls{ grid-template-columns:1.5fr 1.5fr 1fr 1fr; }
body.mode-run #screen-cascade .cs-controls{ grid-template-columns:1.5fr 1.5fr .8fr .8fr; }

/* 4-row faces (late rounds): smaller tiles so the 7-wide base fits the same face */
#screen-tetra .t3-solid.r4 .t3-cell{ width:38px; height:42px; margin:-21px 0 0 -19px; font-size:23px; border-radius:9px; }
#screen-tetra .t3-solid.r4 .t3-tgt.row{ min-width:24px; font-size:23px; }
#screen-tetra .t3-solid.r4 .t3-tgt.col{ min-width:20px; font-size:18px; }

/* the solid's scale is computed by fitSolid() in tetra.js (fills the stage, up or down) */
@media (max-height:680px){ #screen-tetra{ gap:6px; } #screen-tetra .t3-stage{ min-height:190px; } }
@media (max-width:400px){ #screen-tetra .t3-stage{ min-height:240px; } }
@media (prefers-reduced-motion:reduce){ #screen-tetra .t3-solid{ transition:none; } .screen.is-active, #screen-tetra .t3-face.action .t3-face-bg, #screen-tetra .t3-cell.ready, #screen-tetra .t3-assist.pulse, #screen-tetra .t3-cell.pop, #screen-tetra .t3-cell.reject, .cell.dice, .cell.reveal-pop{ animation:none; } }

/* 🏆 leaderboard */
.lb-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:10px 0 12px;}
.lb-tab{font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--ink-dim);
  border:1px solid var(--line);border-radius:999px;padding:6px 11px;cursor:pointer;background:transparent;}
.lb-tab.on{color:#1a1230;background:linear-gradient(160deg,#ffd27a,#f0a63a);border-color:transparent;}
.lb-list{height:min(44vh,400px);overflow-y:auto;display:flex;flex-direction:column;gap:5px;margin-bottom:12px;text-align:left;}   /* FIXED height: the card never jumps between tabs */
.lb-row{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.05);font-size:14px;}
.lb-row.me{background:linear-gradient(90deg,rgba(124,156,255,.25),rgba(124,156,255,.08));outline:1px solid rgba(124,156,255,.5);}
.lb-rank{width:30px;font-weight:900;color:var(--warn);font-variant-numeric:tabular-nums;}
.lb-nm{flex:1;font-weight:800;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-rd{color:var(--ink-dim);font-size:12px;}
.lb-sc{font-weight:900;font-variant-numeric:tabular-nums;}
.lb-you{margin-top:8px;text-align:center;color:var(--accent);font-weight:700;font-size:13px;}
.lb-sep{text-align:center;color:var(--ink-dim);letter-spacing:.3em;padding:2px 0;}
.lb-list{transition:opacity .16s ease;}
.lb-list.lb-loading{opacity:.45;pointer-events:none;}
.lb-empty{text-align:center;color:var(--ink-dim);padding:16px 0;}
.lb-submit{display:flex;gap:8px;margin:12px 0 4px;}
.lb-submit input{flex:1;font-family:inherit;font-size:16px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px;padding:11px 14px;min-width:0;}
.lb-submit .btn{margin:0;white-space:nowrap;width:auto;flex:0 0 auto;}   /* beat .overlay-card .btn{width:100%} — the name input needs the room */
.lb-note{font-size:11px;color:var(--ink-dim);margin-bottom:10px;}

/* tutorial bounding regions: which tiles a total covers */
.pyramid{position:relative;}
.tut-band{position:absolute;border:2px dashed;border-radius:16px;pointer-events:none;z-index:3;animation:tutBandIn .45s ease;}
.tut-band.l{border-color:#ffd27a;background:rgba(255,210,122,.09);}
.tut-band.r{border-color:var(--violet-1);background:rgba(169,155,255,.10);}
.tut-band.c{border-color:#67e8f9;background:rgba(103,232,249,.09);}
.tut-band::after{content:attr(data-label);position:absolute;top:-9px;left:12px;font-size:9px;font-weight:900;letter-spacing:.12em;
  padding:1px 8px;border-radius:999px;background:#141833;}
.tut-band.l::after{color:#ffd27a;} .tut-band.r::after{color:var(--violet-1);} .tut-band.c::after{color:#67e8f9;}
.tut-band.r{border-style:dashed;}
.tut-band.r::after{left:auto;right:12px;}   /* the two side labels share a row — keep them apart */
/* input steps: the two side regions take turns, selling "two sides, one total" while the player thinks */
.tut-band.alt-l{animation:tutBandIn .45s ease, tutAltL 3.4s ease-in-out .45s infinite;}
.tut-band.alt-r{animation:tutBandIn .45s ease, tutAltR 3.4s ease-in-out .45s infinite;}
@keyframes tutAltL{0%,42%{opacity:1;} 52%,92%{opacity:.15;} 100%{opacity:1;}}
@keyframes tutAltR{0%,42%{opacity:.15;} 52%,92%{opacity:1;} 100%{opacity:.15;}}
@media (prefers-reduced-motion:reduce){.tut-band.alt-l,.tut-band.alt-r{animation:none;}}
@keyframes tutBandIn{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.tut-band{animation:none;}}

/* title: hamburger + live concept demo */
.title-menu{position:absolute;top:calc(12px + env(safe-area-inset-top));left:14px;z-index:4;}
.title-demo{display:flex;flex-direction:column;align-items:center;gap:10px;margin:2px 0 4px;}
.td-board{position:relative;display:flex;align-items:center;gap:8px;padding:12px 10px;}
.td-cells{display:flex;gap:8px;}
.td-cell{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;font-weight:900;color:#fff;
  background:linear-gradient(180deg,#c68b52,#9a6636);border:2px solid rgba(255,235,205,.35);}
.td-cell.td-mid{background:linear-gradient(180deg,#8a7dff,#5a63d8);border-color:rgba(255,255,255,.35);}
.td-tab{min-width:38px;height:42px;border-radius:0;display:grid;place-items:center;font-size:22px;font-weight:900;color:#ffd27a;
  padding-bottom:2px;background:none;border-bottom:3px solid rgba(255,210,122,.75);text-shadow:0 2px 5px rgba(0,0,0,.45);}
.td-band{position:absolute;top:5px;height:60px;border:2px dashed;border-radius:16px;pointer-events:none;}
.td-band::after{content:attr(data-label);position:absolute;top:-8px;left:10px;font-size:8px;font-weight:900;letter-spacing:.12em;
  padding:1px 7px;border-radius:999px;background:#141833;}
.td-band.l{left:2px;width:112px;border-color:#ffd27a;background:rgba(255,210,122,.08);animation:tdPulseL 4s ease-in-out infinite;}
.td-band.l::after{color:#ffd27a;}
.td-band.r{left:56px;width:112px;border-color:#ff8bd0;background:rgba(255,139,208,.08);animation:tdPulseR 4s ease-in-out infinite;}
.td-band.r::after{color:#ff8bd0;left:auto;right:10px;}
@keyframes tdPulseL{0%,45%{opacity:1;box-shadow:0 0 14px rgba(255,210,122,.35);}55%,95%{opacity:.35;box-shadow:none;}100%{opacity:1;}}
@keyframes tdPulseR{0%,45%{opacity:.35;box-shadow:none;}55%,95%{opacity:1;box-shadow:0 0 14px rgba(255,139,208,.35);}100%{opacity:.35;}}
.td-eq{display:flex;gap:18px;font-size:14px;color:var(--ink-dim);font-weight:600;}
.td-eq b{color:#ffd27a;}
.td-eq-l{animation:tdPulseL 4s ease-in-out infinite;}
.td-eq-r{animation:tdPulseR 4s ease-in-out infinite;}
.ab-fine{font-size:12px;color:var(--ink-dim);margin-top:10px;}
#screen-title .tagline{margin-top:0;}
@media (prefers-reduced-motion:reduce){.td-band,.td-eq-l,.td-eq-r{animation:none;opacity:1;}}
/* about story */
.ab-story{max-height:56vh;overflow-y:auto;padding-right:6px;}
.ab-story p{margin-bottom:10px;line-height:1.55;}
.ab-sign{font-weight:800;color:#ffd27a;font-style:italic;}

/* title demo v3: rows only — each wing lights up, then a tile drops in to solve the row.
   12s loop, six 2s slots: row2 L → row2 R (?) → tile lands → row3 R → row3 L (?) → tile lands. */
.td3{position:relative;width:240px;height:118px;margin:0 auto;}
.td3-row{position:absolute;left:0;width:100%;height:34px;}
.td3-cell{position:absolute;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:17px;font-weight:900;color:#fff;
  background:linear-gradient(180deg,#c68b52,#9a6636);border:2px solid rgba(255,235,205,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.24), inset 0 -4px 0 rgba(255,255,255,.08);}
.td3-cell.td3-mid{background:linear-gradient(180deg,#8a7dff,#5a63d8);border-color:rgba(255,255,255,.3);}
.td3-cell.td3-q{background:rgba(255,255,255,.06);border:2px dashed rgba(255,255,255,.26);color:rgba(255,255,255,.5);}
.td3-tab{position:absolute;left:206px;top:3px;width:32px;height:28px;border-radius:0;display:grid;place-items:center;
  font-size:18px;font-weight:900;color:#ffd27a;padding-bottom:2px;
  background:none;border-bottom:2.5px solid rgba(255,210,122,.75);text-shadow:0 2px 5px rgba(0,0,0,.45);}
.td3-band{position:absolute;border:2px dashed;border-radius:13px;opacity:0;animation:td3w1 12s linear infinite;pointer-events:none;}
.td3-band.l{border-color:var(--gold-2);background:rgba(255,210,122,.1);}
.td3-band.r{border-color:var(--violet-1);background:rgba(169,155,255,.12);}
.td3-band.w2{animation-name:td3w2;}
.td3-eq{display:grid;height:26px;margin-top:12px;font-size:16px;font-weight:700;text-align:center;}
.td3-eq span{grid-area:1/1;opacity:0;animation:td3w1T 12s linear infinite;}
.td3-eq .l{color:var(--gold-2);} .td3-eq .r{color:var(--violet-1);}
.td3-eq b{color:#fff;}
.td3 .d2,.td3-eq .d2{animation-delay:-10s;} .td3 .d4,.td3-eq .d4{animation-delay:-8s;} .td3 .d6,.td3-eq .d6{animation-delay:-6s;}
.td3 .d8,.td3-eq .d8{animation-delay:-4s;} .td3 .d10,.td3-eq .d10{animation-delay:-2s;}
/* sharp handoffs — a slot fades out fully BEFORE the next lights up, so captions never ghost.
   Bands rest fully invisible: exactly ONE highlight on screen at any moment. */
@keyframes td3w1{0%,14%{opacity:1;} 16%,100%{opacity:0;}}        /* one 2s slot lit */
@keyframes td3w2{0%,30%{opacity:1;} 32%,100%{opacity:0;}}        /* two slots lit — wing stays on while its tile lands */
@keyframes td3w1T{0%,14%{opacity:1;} 16%,100%{opacity:0;}}
/* the row's sum tab flares up right before its missing tile drops in — the "why" of the solve */
.td3-tab.hi{animation:td3tab 12s linear infinite;}
.td3-tab.hi.d6{animation-delay:-6s;}   /* the shorthand above resets the shared .d6 delay — restate it */
@keyframes td3tab{
  0%,22%{transform:none;text-shadow:0 2px 5px rgba(0,0,0,.45);}
  27%,38%{transform:scale(1.25);color:#fff;text-shadow:0 0 16px rgba(255,210,122,1), 0 0 5px rgba(255,210,122,.9);}
  46%,100%{transform:none;text-shadow:0 2px 5px rgba(0,0,0,.45);}}
.td3-fly{position:absolute;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:17px;font-weight:900;color:#fff;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#c68b52,#9a6636);border:2px solid rgba(255,235,205,.55);box-shadow:0 6px 16px rgba(0,0,0,.4);
  opacity:0;animation:td3fly 12s linear infinite;}
.td3-fly.td3-flyB{animation-delay:-6s;}
@keyframes td3fly{
  0%,33%{opacity:0;transform:translateY(-54px) rotate(-10deg) scale(.85);}
  34.5%{opacity:1;}
  38%{transform:translateY(0) rotate(0) scale(1.08);}
  40%,47.5%{opacity:1;transform:translateY(0) rotate(0) scale(1);}
  49.5%,100%{opacity:0;transform:translateY(0) rotate(0) scale(1);}}
@media (prefers-reduced-motion:reduce){.td3-band{animation:none;opacity:0;} .td3-band.d0{opacity:.55;} .td3-eq span{animation:none;opacity:0;} .td3-eq span.d0{opacity:1;} .td3-fly{animation:none;opacity:0;} .td3-tab.hi{animation:none;}}

/* title layout: header up top, demo in a floating glass card */
#screen-title .title-wrap{margin:auto;gap:12px;padding:calc(16px + env(safe-area-inset-top)) 0 16px;}
#screen-title .logo{margin-bottom:16px;}
#screen-title .title-demo{margin:16px 0 0;}
#screen-title .tagline{margin:4px 0 10px;text-wrap:balance;max-width:36ch;}
@media (min-width:560px){ .td3-frame{zoom:1.2;} }   /* the hook deserves real estate on wide screens */
/* 📱 tall phones: the logo becomes a header and the GAME gets the space — bigger demo,
   wider buttons, airier rhythm. Short phones (SE) keep the compact layout. */
@media (max-width:520px) and (min-height:700px) and (orientation:portrait){
  #screen-title .title-wrap{gap:18px;}
  #screen-title .logo{margin-bottom:6px;gap:6px;}
  #screen-title .logo-shingle{width:clamp(28px,7.6vw,40px);height:clamp(34px,9vw,48px);font-size:clamp(17px,4.4vw,24px);}
  .td3-frame{zoom:1.26;}
  .title-btn{width:min(340px,88vw);font-size:16px;padding:16px 18px;}
  #screen-title .tagline{font-size:16px;max-width:30ch;}
  .tlink{font-size:13px;padding:10px 2px;}
}
/* the two actions share one shape; everything else steps back to quiet text links */
.title-btn{width:min(300px,84vw);font-size:15px;font-weight:900;letter-spacing:.1em;padding:15px 18px;}
.title-links{display:flex;align-items:center;gap:14px;margin-top:8px;}
.tlink{background:none;border:none;cursor:pointer;font-family:inherit;color:var(--ink-dim);white-space:nowrap;
  font-size:12px;font-weight:800;letter-spacing:.14em;padding:8px 2px;transition:color .15s;}
@media (max-width:380px){ .title-links{gap:8px;} .tlink{font-size:11px;letter-spacing:.09em;} }
.tlink:hover{color:#fff;}
.tdot{color:rgba(255,255,255,.22);font-weight:900;}
#btn-settings-title{display:none;}
body.show-extras #btn-settings-title{display:inline-block;}

/* ---------- 🌆 the world: rooftop horizon + aurora washes (title screen only) ---------- */
.aurora{position:fixed;width:160vw;height:70vh;pointer-events:none;z-index:0;}
.aur-a{left:-40vw;top:-16vh;background:radial-gradient(46% 42% at 50% 50%,var(--aur1),transparent 70%);
  animation:aurDrift 46s ease-in-out infinite alternate;}
.aur-b{right:-50vw;bottom:-20vh;background:radial-gradient(44% 40% at 50% 50%,var(--aur2),transparent 70%);
  animation:aurDrift 58s ease-in-out -20s infinite alternate-reverse;}
@keyframes aurDrift{from{transform:translate(0,0);}to{transform:translate(6vw,3vh);}}
.skyline{position:fixed;left:0;right:0;bottom:0;height:15vh;min-height:84px;max-height:150px;pointer-events:none;z-index:1;}
.skyline svg{position:absolute;bottom:0;left:0;width:100%;height:100%;}
.sky-far path{fill:var(--ridge1);}
.sky-near path{fill:var(--ridge2);}
.sky-near .w{fill:var(--gold-2);opacity:0;animation:winGlow 13s ease-in-out infinite;}
@keyframes winGlow{0%,18%{opacity:0;}30%,62%{opacity:.75;}74%,100%{opacity:0;}}
.title-wrap{position:relative;z-index:2;}

/* ---------- 🕯 the card lights the scene — glow swells when its demo pays off (12s sync) ---------- */
.td3-frame::before{content:'';position:absolute;inset:-70px -60px;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 46% at 50% 46%, rgba(255,190,110,.16), transparent 70%);
  animation:cardGlow 12s linear infinite;}
@keyframes cardGlow{0%,22%{opacity:.55;} 30%,38%{opacity:1;} 46%,100%{opacity:.55;}}

/* ---------- 🏗 entrance: the screen lays itself like courses of shingles (once per session) ---------- */
@keyframes settleIn{from{opacity:0;transform:translateY(16px) rotate(.8deg);}to{opacity:1;transform:none;}}
#screen-title.intro #btn-play{animation:settleIn .55s cubic-bezier(.2,1.3,.4,1) .48s both;}
#screen-title.intro .title-demo{animation:settleIn .6s cubic-bezier(.2,1.3,.4,1) .62s both;}
#screen-title.intro .tagline{animation:settleIn .5s cubic-bezier(.2,1.3,.4,1) .8s both;}
#screen-title.intro #btn-learn{animation:settleIn .5s cubic-bezier(.2,1.3,.4,1) .9s both;}
#screen-title.intro .tlink:nth-of-type(1){animation:settleIn .4s cubic-bezier(.2,1.3,.4,1) 1s both;}
#screen-title.intro .tlink:nth-of-type(2){animation:settleIn .4s cubic-bezier(.2,1.3,.4,1) 1.08s both;}
#screen-title.intro .tlink:nth-of-type(3){animation:settleIn .4s cubic-bezier(.2,1.3,.4,1) 1.16s both;}
#screen-title.intro .tdot{animation:fadeIn .3s ease 1.24s both;}
#screen-title.intro .skyline,#screen-title.intro .aurora{animation:fadeIn 1.2s ease .3s both;}

/* ---------- ✋ first-visit: the demo pauses at "5 + ? = 6" and the ? is yours ---------- */
.title-demo.td3-try .td3-band,.title-demo.td3-try .td3-eq span,
.title-demo.td3-try .td3-fly,.title-demo.td3-try .td3-tab.hi{animation:none;}
.title-demo.td3-try .td3-band.d2{opacity:1;}
.title-demo.td3-try .td3-eq span.d2{opacity:1;}
.title-demo.td3-try .td3-tab.hi:not(.d6){transform:scale(1.16);color:#fff;text-shadow:0 0 14px rgba(255,210,122,1);}
.title-demo.td3-try #td3-try,.title-demo.td3-try #td3-try2{pointer-events:auto;cursor:pointer;}
.title-demo.td3-try #td3-try{animation:qPulse 1.7s ease-in-out infinite;}
@keyframes qPulse{0%,100%{transform:scale(1);border-color:rgba(255,255,255,.26);}
  50%{transform:scale(1.08);border-color:var(--gold-2);box-shadow:0 0 12px rgba(255,210,122,.45);}}
/* solving the OTHER ? (row 3's left end) shifts the spotlight to its row */
.title-demo.td3-done2 .td3-band.d2{opacity:0;}
.title-demo.td3-done2 .td3-band.d8{opacity:1;}
.title-demo.td3-done2 .td3-tab.hi:not(.d6){transform:none;color:#ffd27a;text-shadow:0 2px 5px rgba(0,0,0,.45);}
.title-demo.td3-done2 .td3-tab.hi.d6{transform:scale(1.16);color:#fff;text-shadow:0 0 14px rgba(255,210,122,1);}
.title-demo.td3-try .td3-q.td3-solved{animation:none;background:linear-gradient(180deg,var(--violet-2),var(--violet-3));
  border:2px solid rgba(255,255,255,.35);color:#fff;transform:scale(1.04);}
.td3-chips{display:flex;gap:12px;justify-content:center;margin-top:12px;}
.td3-chips[hidden]{display:none;}
.td3-chip{width:46px;height:46px;border-radius:11px;border:none;cursor:pointer;font-size:20px;font-weight:900;color:#fff;
  background:linear-gradient(180deg,var(--violet-2),var(--violet-3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.28), 0 6px 14px rgba(0,0,0,.4);
  animation:chipIn .35s cubic-bezier(.2,1.4,.4,1) both;}
.td3-chip:nth-child(2){animation-delay:.07s;} .td3-chip:nth-child(3){animation-delay:.14s;}
@keyframes chipIn{from{opacity:0;transform:translateY(10px) scale(.6);}to{opacity:1;transform:none;}}
.td3-chip.nope{animation:chipNope .4s ease;}
@keyframes chipNope{0%,100%{transform:none;}25%{transform:translateX(-5px) rotate(-3deg);}65%{transform:translateX(4px) rotate(2deg);}}
#btn-play.pulse-once{animation:playPulse .65s ease 2;}
@keyframes playPulse{0%,100%{transform:none;}50%{transform:scale(1.045);}}

/* the links row must never exceed the viewport — its width sets the mobile layout viewport */
.title-links{flex-wrap:wrap;justify-content:center;max-width:96vw;}
@media (max-width:430px){ .title-links{gap:9px;} .tlink{font-size:11px;letter-spacing:.1em;padding:8px 1px;} }

@media (prefers-reduced-motion:reduce){
  .aurora,.sky-near .w{animation:none;}
  .td3-frame::before{animation:none;opacity:.6;}
  #screen-title.intro #btn-play,#screen-title.intro .title-demo,#screen-title.intro .tagline,
  #screen-title.intro #btn-learn,#screen-title.intro .tlink,#screen-title.intro .tdot{animation:none;}
  .title-demo.td3-try #td3-try{animation:none;}
}
.td3-frame{position:relative;padding:26px 24px 14px;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(124,156,255,.2);
  box-shadow:0 22px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
  animation:td3float 6s ease-in-out infinite;}
.td3-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:10px;font-weight:900;letter-spacing:.22em;color:#ffd27a;
  padding:3px 14px;border-radius:999px;background:#141833;border:1px solid rgba(255,210,122,.35);}
@keyframes td3float{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@media (prefers-reduced-motion:reduce){.td3-frame{animation:none;}}

/* ── height-tiered title compression (LAST in file on purpose: must outrank the
   title rules above). The whole column must fit REAL windows — browser chrome
   eats 80-150px — on phones and desktop alike. Each tier reclaims space from
   the biggest consumers: gaps → demo zoom → logo → Otto → tagline. */
@media (max-height:920px){
  #screen-title .title-wrap{gap:10px;padding:calc(8px + env(safe-area-inset-top)) 0 10px;}
  #screen-title .logo{margin-bottom:4px;}
  #screen-title .title-demo{margin:4px 0 0;}
  #screen-title .tagline{margin:0 0 2px;}
  .title-links{margin-top:0;}
  .title-btn{padding:12px 18px;}
}
@media (max-height:820px){
  #screen-title .logo-shingle{width:clamp(27px,7.4vw,42px);height:clamp(33px,8.8vw,52px);font-size:clamp(16px,4.3vw,25px);}
  .td3-frame{zoom:.94;}
  #screen-title .tagline{font-size:13px;}
}
@media (max-height:720px){
  .td3-frame{zoom:.8;}
  #screen-title .tagline{display:none;}
  #screen-title .title-wrap{gap:7px;}
  .title-btn{padding:10px 16px;font-size:14px;}
}

/* ── spacious-screen enlargement (desktop): when there's real room, USE it.
   Placed after the compression tiers so it wins where both match. */
@media (min-width:1080px) and (min-height:850px){
  #screen-title .title-wrap{gap:20px;padding:calc(64px + env(safe-area-inset-top)) 0 16px;}   /* headroom: Otto lives above the logo now */
  #screen-title .logo{margin-bottom:10px;}
  #screen-title .logo-shingle{width:54px;height:66px;font-size:32px;}
  .td3-frame{zoom:1.5;}
  .title-btn{width:min(400px,88vw);font-size:17px;padding:17px 18px;}
  #screen-title .tagline{display:block;font-size:17px;margin:2px 0 6px;}
  .title-links{margin-top:6px;}
  .tlink{font-size:13px;}
}
@media (min-width:1080px) and (min-height:820px){
  .hud{width:min(860px,100%);padding:12px 16px;}
  .hud-val{font-size:22px;}
  .hud-label{font-size:11px;}
  .controls{width:min(660px,100%);gap:10px;margin-top:12px;}
  .numpad{gap:10px;}
  .numpad .np{min-height:58px;font-size:22px;}
  .actions .btn{min-height:54px;font-size:16px;}
  .rule-banner{font-size:15px;}
}

/* 3D Rotate on spacious desktops: wider stage, one-row numpad — the freed height
   goes straight into the solid via fitSolid */
@media (min-width:1080px) and (min-height:820px){
  #screen-tetra .t3-stage{ width:min(880px,100%); }
  #screen-tetra .t3-modebar, #screen-tetra .t3-status, #screen-tetra .t3-controls{ width:min(620px,100%); }
  #screen-tetra .numpad{ width:min(620px,100%); grid-template-columns:repeat(10,1fr); }
  #screen-tetra .numpad .np{ min-height:52px; font-size:20px; }
  #screen-tetra .t3-status .t3-msg{ font-size:15px; }
}

/* ⬇ Freefall: the lane doubles to two tile-rows — the drop starts two tiles above the apex */
#screen-cascade.cs-ffmode .cs-lane{ height:calc((var(--cell) + 10px) * 2); }

/* ⬇ Freefall: the carrier becomes the falling tile */
#screen-cascade .cs-carrier.cs-falling{ transition:transform .24s linear, left .12s ease; z-index:6;
  box-shadow:0 8px 22px rgba(0,0,0,.55), 0 0 0 2px rgba(142,166,255,.55); }
#screen-cascade .cs-carrier.cs-falling::after{ display:none; }
@media (prefers-reduced-motion:reduce){ #screen-cascade .cs-carrier.cs-falling{ transition:none; } }

/* 🎓 tutorial step 1 hosts the "one rule" demo (moved from the title screen) */
#tut-demo-host{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;}

/* 🎓 the step-1 demo gets the room the tutorial stage offers: width-bound on
   phones, luxurious on desktop (scoped tighter than the title-era zoom tiers) */
#tut-demo-host .td3-frame{zoom:1.25;}
@media (min-width:560px){ #tut-demo-host .td3-frame{zoom:1.7;} }
@media (min-width:1080px) and (min-height:800px){ #tut-demo-host .td3-frame{zoom:2.2;} }

/* 🎓 td3-live: the tutorial variant of the demo — the solve story CYCLES FOREVER
   while the ? tiles stay tappable the whole time (no freeze) */
.title-demo.td3-live #td3-try,.title-demo.td3-live #td3-try2{pointer-events:auto;cursor:pointer;}
.title-demo.td3-live #td3-try{animation:qPulse 1.7s ease-in-out infinite;}
.title-demo.td3-live .td3-q.td3-solved{animation:none;background:linear-gradient(180deg,var(--violet-2),var(--violet-3));
  border:2px solid rgba(255,255,255,.35);color:#fff;transform:scale(1.04);}

/* 🌅 the Daily leads: a two-line card with live personal context */
.btn-daily{display:flex;flex-direction:column;align-items:center;gap:3px;}
.btn-daily .db-top{letter-spacing:.06em;}
.btn-daily .db-top b{font-variant-numeric:tabular-nums;}
.btn-daily .db-sub{font-size:11px;font-weight:600;letter-spacing:.03em;opacity:.92;}
.daily-pulse{min-height:17px;font-size:12px;color:var(--ink-dim);opacity:0;transition:opacity .8s ease;}
.daily-pulse b{color:var(--gold-2);font-variant-numeric:tabular-nums;}
.daily-pulse.show{opacity:1;}

/* ══ opening-screen composition (research pass): living scene, ritual strip,
   ONE hero CTA — placed last to outrank earlier title rules ══ */

/* 📅 the ritual strip */
.daily-date{font-size:11px;letter-spacing:.24em;font-weight:800;color:var(--ink-dim);min-height:14px;}
/* hero CTA: the Daily owns the screen */
.btn-daily.title-btn{width:min(360px,90vw);padding:16px 20px;font-size:16px;
  box-shadow:0 12px 30px rgba(240,140,60,.45), inset 0 1px 0 rgba(255,255,255,.45);
  animation:dailyGlow 3.4s ease-in-out infinite;}
@keyframes dailyGlow{0%,100%{box-shadow:0 12px 30px rgba(240,140,60,.45), inset 0 1px 0 rgba(255,255,255,.45);}
  50%{box-shadow:0 12px 40px rgba(240,140,60,.7), inset 0 1px 0 rgba(255,255,255,.45);}}
/* subordinate secondary */
.btn-quiet{width:min(360px,90vw);padding:14px 20px;font-size:14px;opacity:.94;
  background:rgba(122,132,255,.16);border:1px solid rgba(138,125,255,.5);box-shadow:none;}
.btn-quiet:hover{background:rgba(122,132,255,.28);}
.tlink-learn{color:var(--gold-2);}
/* ⏳ anticipation, after completion */
.dl-next{font-size:12px;color:var(--ink-dim);margin-top:6px;font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion:reduce){.btn-daily.title-btn{animation:none;}}

/* result cards deserve desktop presence */
@media (min-width:1080px) and (min-height:800px){
  .overlay-card{width:min(580px,92vw);padding:34px 32px;}
  .overlay-card h2{font-size:34px;}
  .ov-stat{font-size:15px;padding:11px 16px;}
  .ov-praise{font-size:clamp(30px,4vw,46px);}
}
/* 🧭 the stuck-nudge */
.btn-hint.pulse{animation:hintPulse 1.2s ease-in-out infinite;}
@keyframes hintPulse{50%{box-shadow:0 6px 24px rgba(240,166,58,.9);transform:translateY(-1px);}}
@media (prefers-reduced-motion:reduce){.btn-hint.pulse{animation:none;}}

/* 🌅 the Daily HERO CARD: one component, few words, big type (replaces the old
   two-line button — placed last to outrank .btn-daily/.title-btn history) */
.daily-card{width:min(360px,90vw);display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:14px 20px 15px;border-radius:22px;
  box-shadow:0 14px 34px rgba(240,140,60,.45), inset 0 1px 0 rgba(255,255,255,.45);
  animation:dailyGlow 3.4s ease-in-out infinite;}
.daily-card .dc-kicker{font-size:10px;letter-spacing:.26em;font-weight:800;opacity:.85;min-height:12px;}
.daily-card .dc-main{font-family:var(--display);font-size:clamp(24px,6vw,30px);font-weight:900;line-height:1.05;letter-spacing:.02em;}
.daily-card .dc-num{color:#fff;text-shadow:0 2px 8px rgba(120,50,0,.4);}
.daily-card .dc-sub{font-size:13px;font-weight:800;letter-spacing:.1em;opacity:.95;font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion:reduce){.daily-card{animation:none;}}

/* ============ 🌆 WORLD-CLASS TITLE SCENE (2026-08-06) ============
   The game is named after rooftops — so the title screen IS a twilight shingle
   village: starfield + moon above, dusk light on the horizon, three parallax
   roof layers with lit windows, a light pool cradling the brand, chip nav. */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;background-repeat:no-repeat;}
.stars-a{background-image:
  radial-gradient(1.6px 1.6px at 6% 9%,rgba(255,255,255,.85),transparent 60%),
  radial-gradient(1.3px 1.3px at 13% 31%,rgba(255,255,255,.5),transparent 60%),
  radial-gradient(1.7px 1.7px at 19% 15%,rgba(255,255,255,.75),transparent 60%),
  radial-gradient(1.2px 1.2px at 27% 6%,rgba(255,255,255,.55),transparent 60%),
  radial-gradient(1.5px 1.5px at 34% 24%,rgba(255,255,255,.65),transparent 60%),
  radial-gradient(1.2px 1.2px at 44% 10%,rgba(255,255,255,.5),transparent 60%),
  radial-gradient(1.8px 1.8px at 55% 5%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(1.3px 1.3px at 64% 18%,rgba(255,255,255,.55),transparent 60%),
  radial-gradient(1.5px 1.5px at 74% 8%,rgba(255,255,255,.7),transparent 60%),
  radial-gradient(1.2px 1.2px at 83% 27%,rgba(255,255,255,.5),transparent 60%),
  radial-gradient(1.7px 1.7px at 91% 12%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(1.3px 1.3px at 97% 33%,rgba(255,255,255,.45),transparent 60%);
  animation:twink 8s ease-in-out infinite;}
.stars-b{background-image:
  radial-gradient(1.4px 1.4px at 3% 22%,rgba(255,244,214,.6),transparent 60%),
  radial-gradient(2px 2px at 10% 7%,rgba(255,248,225,.9),transparent 60%),
  radial-gradient(1.2px 1.2px at 22% 26%,rgba(255,255,255,.45),transparent 60%),
  radial-gradient(1.5px 1.5px at 30% 13%,rgba(255,255,255,.6),transparent 60%),
  radial-gradient(1.2px 1.2px at 40% 30%,rgba(255,255,255,.4),transparent 60%),
  radial-gradient(1.6px 1.6px at 50% 16%,rgba(255,248,225,.7),transparent 60%),
  radial-gradient(1.2px 1.2px at 59% 28%,rgba(255,255,255,.45),transparent 60%),
  radial-gradient(1.4px 1.4px at 69% 4%,rgba(255,255,255,.65),transparent 60%),
  radial-gradient(2px 2px at 79% 14%,rgba(255,248,225,.85),transparent 60%),
  radial-gradient(1.2px 1.2px at 87% 36%,rgba(255,255,255,.4),transparent 60%),
  radial-gradient(1.5px 1.5px at 94% 6%,rgba(255,255,255,.7),transparent 60%);
  animation:twink 11s ease-in-out infinite reverse;}
@keyframes twink{0%,100%{opacity:1;}50%{opacity:.45;}}
.moon{position:fixed;top:8vh;right:8vw;width:54px;height:54px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 36% 34%,#fff8e9 0%,#f4e6c4 48%,#dcc7a0 100%);
  box-shadow:0 0 36px 10px rgba(255,240,205,.16),0 0 110px 44px rgba(255,225,170,.07);}
.moon::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(9px 9px at 62% 58%,rgba(160,135,95,.35),transparent 70%),
             radial-gradient(6px 6px at 38% 68%,rgba(160,135,95,.3),transparent 70%),
             radial-gradient(5px 5px at 58% 30%,rgba(160,135,95,.28),transparent 70%);}
/* the village: taller, layered, backlit by the last of the dusk */
.skyline{height:26vh;min-height:150px;max-height:300px;z-index:1;}
.dusk{position:absolute;left:0;right:0;bottom:0;height:130%;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(255,150,95,.04) 40%,rgba(255,140,85,.12) 74%,rgba(255,125,70,.19) 100%);}
.sky-far{z-index:1;} .sky-mid{z-index:2;} .dusk{z-index:3;} .sky-near{z-index:4;}
.sky-far path{fill:rgba(125,118,200,.30);}
.sky-mid path{fill:rgba(66,58,120,.55);}
.sky-near path,.sky-near .c{fill:#201941;}
.sky-mid .wm{fill:#e8b96a;opacity:.32;}
/* light pool cradles the brand + CTAs */
.title-wrap::before{content:'';position:absolute;top:-48px;left:50%;transform:translateX(-50%);
  width:min(620px,96vw);height:min(430px,60vh);border-radius:50%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 42%,rgba(148,128,255,.13),transparent 72%);}
/* gentle vignette focuses the eye; over the scene, under the UI */
#screen-title::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(130% 95% at 50% 40%,transparent 58%,rgba(8,6,18,.38) 100%);}
/* brand block reads as one unit: wordmark -> whispered tagline -> actions */
#screen-title .tagline{margin:-4px 0 8px;font-size:14px;letter-spacing:.01em;color:rgba(213,206,238,.8);}
#screen-title.intro .tagline{animation:settleIn .5s cubic-bezier(.2,1.3,.4,1) .4s both;}
#screen-title.intro .moon{animation:fadeIn 1.4s ease .25s both;}
/* nav: tappable chips, not a website footer */
.tdot{display:none;}
.title-links{gap:9px;margin-top:4px;}
.tlink{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:999px;
  padding:9px 15px;font-size:12px;letter-spacing:.11em;color:#cfc9e6;}
.tlink:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;}
.tlink-learn{background:linear-gradient(160deg,rgba(255,200,110,.16),rgba(255,165,80,.08));
  border-color:rgba(255,200,110,.38);color:var(--gold-2);}
@media (max-width:430px){.title-links{gap:7px;}.tlink{font-size:11px;padding:8px 12px;letter-spacing:.09em;}}
/* keep the village out of the content's way */
#screen-title .title-wrap{padding-bottom:clamp(120px,24vh,270px);}
@media (max-height:720px){.skyline{height:18vh;max-height:190px;}
  #screen-title .title-wrap{padding-bottom:clamp(80px,16vh,150px);}.moon{width:44px;height:44px;}}
@media (prefers-reduced-motion:reduce){.stars-a,.stars-b{animation:none;}}
/* mini brand wordmark on the tutorial's first screen */
.logo-mini{transform:scale(.72);transform-origin:center bottom;margin:0 auto -8px;}
.logo-mini .logo-mini-spacer{display:none;}
/* the demo host stacks brand over demo (it's a flex row by default) */
#tut-demo-host{flex-direction:column;gap:16px;}
/* windows keep a warm ember even between glow waves; halo sells the light */
.sky-near .w{opacity:.35;animation-name:winGlow2;filter:drop-shadow(0 0 6px rgba(255,200,110,.9));}
@keyframes winGlow2{0%,18%{opacity:.35;}30%,62%{opacity:1;}74%,100%{opacity:.35;}}
.sky-mid .wm{filter:drop-shadow(0 0 4px rgba(255,200,110,.5));}
/* dusk rim-light traces the near roofline (open path, no bottom edge) */
.sky-near .ridge{fill:none;stroke:rgba(255,185,125,.38);stroke-width:2.5;stroke-linejoin:round;}
/* horizon glow sits between the mid and near layers: the far town soaks in dusk */
.dusk{height:170%;background:linear-gradient(180deg,transparent 0%,rgba(255,150,95,.06) 34%,rgba(255,138,82,.20) 54%,rgba(255,120,66,.32) 72%,rgba(255,110,60,.26) 100%);}
/* mini brand: the SAME pitched-roof arc as the title, scaled to fit (rise x .55) */
#tut-demo-host{gap:22px;}
.logo-mini{transform:none;margin:0 auto 14px;padding:10px 0 6px;}
.logo-mini .logo-shingle{width:31px;height:38px;font-size:19px;border-radius:9px;
  transform:translateY(calc(var(--rise,0px)*.55)) rotate(var(--tilt,0deg));}
.logo-mini .logo-shingle + .logo-shingle{margin-left:-6px;}
.logo-mini::after{width:22px;height:10px;animation:none;}

/* ============ CTA rework (2026-08-07): ONE hero, one pill ============
   Two same-width rectangles of different heights read as a mistake. Now the
   Daily is the only card; PLAY ENDLESS is a rounded pill — a different shape
   species, auto-width, clearly secondary but still a headline action. */
.daily-card{width:min(340px,88vw);padding:12px 20px 13px;gap:2px;}
.daily-card .dc-main{font-size:clamp(23px,5.6vw,28px);}
.btn-quiet{width:auto;min-width:0;padding:13px 36px;border-radius:999px;font-size:13px;
  letter-spacing:.16em;opacity:1;color:#e8e3ff;
  background:linear-gradient(160deg,rgba(138,125,255,.22),rgba(90,99,216,.10));
  border:1px solid rgba(150,140,255,.5);
  box-shadow:0 4px 16px rgba(20,10,60,.4), inset 0 1px 0 rgba(255,255,255,.14);}
.btn-quiet:hover{background:linear-gradient(160deg,rgba(138,125,255,.34),rgba(90,99,216,.20));
  border-color:rgba(170,160,255,.7);}

/* ============ reveal-review fix (2026-08-07) ============
   coachIn ends with transform:none, which erased this fixed panel's
   translateX(-50%) centering once the entrance finished — it hung half
   off-screen. It gets its OWN keyframes that keep the centering, and a
   bigger, unmissable presence. While it's up, the dead keypad/assist/give-up
   controls leave the stage in every engine: the winning board is the show. */
.reveal-continue{width:min(560px,94vw);padding:18px 20px;gap:16px;
  animation:revealIn .35s cubic-bezier(.2,1.3,.4,1) both;
  box-shadow:0 18px 50px rgba(0,0,0,.65), 0 0 0 1px rgba(255,210,122,.25), 0 6px 30px rgba(240,166,58,.25);}
@keyframes revealIn{from{opacity:0;transform:translate(-50%,14px) scale(.96);}to{opacity:1;transform:translate(-50%,0);}}
.reveal-continue img{width:64px;}
.reveal-continue span{font-size:17px;line-height:1.4;}
.reveal-continue .btn{padding:15px 22px;font-size:16px;}
body:has(.reveal-continue) #screen-game .controls,
body:has(.reveal-continue) #t3-pad,
body:has(.reveal-continue) .t3-assist,
body:has(.reveal-continue) .t3-giveup,
body:has(.reveal-continue) #cs-pad,
body:has(.reveal-continue) .cs-assist,
body:has(.reveal-continue) .cs-giveup{display:none;}

/* ============================================================
   🔤 OTTO'S MOTTO — scoped to #screen-motto; reuses the 2D board's
   .cell visuals inside mt- layout. Color grammar as everywhere:
   cedar = given letters, violet = yours, gold = a balanced row.
   ⚙ settings-only mode. */
#screen-motto{ justify-content:flex-start; gap:9px; overflow-y:auto; }
#screen-motto .hud{ margin-bottom:0; }
/* board wrap is FLEX-sized (like cascade's), never content-sized — fit() reads its
   height, so a content-sized wrap would feed the scale back into itself and ratchet
   the pyramid smaller on every resize */
/* 🦉 the board riddle: ONE hand-written sentence cluing every row at once;
   it strikes through when the pyramid is solved */
.mt-riddle{ width:min(720px,100%); text-align:center; font-size:17px; line-height:1.55; color:var(--ink);
  font-style:italic; transition:opacity .4s; }
.mt-riddle.done{ opacity:.5; text-decoration:line-through; }
.mt-riddle.sealed{ opacity:.55; }   /* HARD+ keep the riddle sealed until the board bites */
.mt-boardwrap{ width:100%; flex:1; min-height:0; display:flex; justify-content:center; align-items:center; overflow:visible; }
.mt-stage{ transform-origin:center; padding:4px 0; }
.mt-row{ display:flex; align-items:center; justify-content:center; gap:8px; margin:3px 0; }
.mt-cells{ display:flex; gap:var(--gap); }
.mt-rail{ width:46px; display:flex; justify-content:center; }
.mt-cell{ position:relative; font-size:calc(var(--cell) * .52); }   /* room for the value subscript */
.mt-cell .mt-val{ position:absolute; right:4px; bottom:2px; font-size:calc(var(--cell) * .19); font-weight:800;
  opacity:.6; text-decoration:none; font-style:normal; letter-spacing:0; }
.mt-cell.mt-sel{ border-color:var(--accent)!important; box-shadow:inset 0 2px 6px rgba(0,0,0,.28), 0 0 0 2px var(--accent), 0 0 14px rgba(124,156,255,.45); animation:mtArm 1.4s ease-in-out infinite; }
@keyframes mtArm{ 50%{ box-shadow:inset 0 2px 6px rgba(0,0,0,.28), 0 0 0 2px var(--accent), 0 0 4px rgba(124,156,255,.2); } }
.mt-shake{ animation:mtShake .4s ease; }
@keyframes mtShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.mt-chip{ min-width:36px; padding:5px 10px; border-radius:999px; background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line); text-align:center; font-weight:900; font-size:13px;
  color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.mt-chip i{ font-style:normal; opacity:.6; }
.mt-chip.match{ color:var(--gold-2); box-shadow:inset 0 0 0 1px rgba(240,166,58,.8), 0 0 12px rgba(255,210,122,.25); }
.mt-row.done .mt-cell{ filter:brightness(1.07); }
.mt-status{ width:min(720px,100%); display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:13px; color:var(--ink-dim); text-align:center; }
.mt-status.done .mt-msg{ color:var(--good); font-weight:700; }
.mt-controls{ width:min(520px,100%); display:flex; gap:8px; }
.mt-controls .btn{ flex:1; min-height:46px; padding:10px 6px; font-size:14px; margin:0; }
.mt-assist{ background:linear-gradient(160deg,#ffcf5c,#f0a63a); color:#3a2600; border:none; }
.mt-pad{ width:min(520px,100%); }   /* 9 letters + ⌫ = two tidy rows of five */
.mt-pad .np{ position:relative; font-size:clamp(20px,6vw,26px); }
.mt-pad .np u{ position:absolute; right:6px; bottom:4px; font-size:11px; font-weight:800; opacity:.55; text-decoration:none; }
.mt-pad .mt-del{ font-size:clamp(18px,5vw,22px); color:var(--ink-dim); }
/* a full row that doesn't spell-and-balance flashes red and clears (same voice as .prow.wrong) */
.mt-row.mt-wrong{ animation:mtShake .4s ease; }
.mt-row.mt-wrong .cell.filled{ background:linear-gradient(180deg,#ff7a8f,#e0455f)!important;
  border-color:transparent!important; color:#fff!important; }

/* 🔤 OTTO'S MOTTO intro demo — _LEAN: G drops in (GLEAN spells, but 19≠15 tips the
   scale) and bounces out; C lands CLEAN and both sides light up 15 = 15 */
.modemo{ display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:56px; margin:4px 0 8px; }
.mo-row{ display:flex; gap:5px; }
.mo-row b{ position:relative; width:34px; height:40px; border-radius:8px; display:grid; place-items:center;
  font:900 20px/1 var(--font); color:#2b1a08; background:linear-gradient(180deg,var(--cedar-1),var(--cedar-3));
  box-shadow:0 3px 8px rgba(0,0,0,.35); }
.mo-row b i{ position:absolute; right:3px; bottom:2px; font:800 9px/1 var(--font); opacity:.6; }
.mo-slot{ position:relative; width:34px; height:40px; border-radius:8px;
  box-shadow:inset 0 0 0 2px rgba(124,156,255,.5); animation:moSlotPulse 1.6s ease-in-out infinite; }
.mo-slot b{ position:absolute; inset:0; color:#fff; background:linear-gradient(180deg,var(--violet-1),var(--violet-3)); }
.mo-slot b i{ opacity:.75; }
.mo-g{ animation:moG 5.6s ease-in-out infinite; }
.mo-c{ animation:moC 5.6s ease-in-out infinite, moCGlow 5.6s ease infinite; }
.mo-sums{ display:flex; align-items:center; gap:8px; font:900 13px/1 var(--font); color:var(--ink-dim); }
.mo-chip{ display:grid; min-width:40px; padding:4px 10px; border-radius:999px; background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line); font-variant-numeric:tabular-nums; }
.mo-chip u, .mo-sign u{ grid-area:1/1; text-decoration:none; }
.mo-sign{ display:grid; }
.mo-left{ animation:moChipL 5.6s ease infinite; }
.mo-right{ animation:moChipR 5.6s ease infinite; }
.mo-left u.rest{ animation:moRestU 5.6s ease infinite; }
.mo-left u.try{ color:var(--bad); opacity:0; animation:moTryU 5.6s ease infinite; }
.mo-left u.win, .mo-sign u.win{ color:var(--gold-2); opacity:0; animation:moWinU 5.6s ease infinite; }
.mo-sign u.neq{ animation:moNeqU 5.6s ease infinite; }
.mo-right u.fix{ animation:moFixU 5.6s ease infinite; }
@keyframes moG{ 0%,8%{ transform:translate(-19px,-50px) scale(.9); opacity:.85; }
  13%{ transform:translateY(-5px); opacity:1; } 15%,19%{ transform:none; opacity:1; }
  21%{ transform:rotate(-6deg); } 24%{ transform:rotate(5deg); } 27%,36%{ transform:none; opacity:1; }
  43%,100%{ transform:translate(-19px,-50px) scale(.9); opacity:.85; } }
@keyframes moC{ 0%,48%{ transform:translate(19px,-50px) scale(.9); opacity:.85; }
  53%{ transform:translateY(-5px); opacity:1; } 55%,93%{ transform:none; opacity:1; }
  99%,100%{ transform:translate(19px,-50px) scale(.9); opacity:.85; } }
@keyframes moCGlow{ 0%,58%,97%,100%{ filter:none; } 62%,90%{ filter:drop-shadow(0 0 9px rgba(255,210,122,.85)); } }
@keyframes moSlotPulse{ 50%{ box-shadow:inset 0 0 0 2px rgba(124,156,255,.22); } }
@keyframes moRestU{ 0%,14%{ opacity:1; } 17%,38%{ opacity:0; } 41%,56%{ opacity:1; } 59%,93%{ opacity:0; } 97%,100%{ opacity:1; } }
@keyframes moTryU{ 0%,14%{ opacity:0; } 17%,38%{ opacity:1; } 41%,100%{ opacity:0; } }
@keyframes moWinU{ 0%,56%{ opacity:0; } 59%,93%{ opacity:1; } 97%,100%{ opacity:0; } }
@keyframes moNeqU{ 0%,14%{ color:var(--ink-dim); opacity:.7; } 17%,38%{ color:var(--bad); opacity:1; }
  41%,56%{ color:var(--ink-dim); opacity:.7; } 59%,93%{ opacity:0; } 97%,100%{ color:var(--ink-dim); opacity:.7; } }
@keyframes moFixU{ 0%,56%,97%,100%{ color:var(--ink-dim); } 59%,93%{ color:var(--gold-2); } }
@keyframes moChipL{ 0%,14%,41%,56%,97%,100%{ box-shadow:inset 0 0 0 1px var(--line); }
  17%,38%{ box-shadow:inset 0 0 0 1px rgba(255,90,114,.65); }
  59%,93%{ box-shadow:inset 0 0 0 1px rgba(240,166,58,.8), 0 0 14px rgba(255,210,122,.3); } }
@keyframes moChipR{ 0%,56%,97%,100%{ box-shadow:inset 0 0 0 1px var(--line); }
  59%,93%{ box-shadow:inset 0 0 0 1px rgba(240,166,58,.8), 0 0 14px rgba(255,210,122,.3); } }
@media (prefers-reduced-motion:reduce){
  .mo-g,.mo-c,.mo-slot,.mo-left,.mo-right,.mo-left u,.mo-right u,.mo-sign u,.mt-cell.mt-sel{ animation:none; }
  .mo-g{ transform:translate(-19px,-50px) scale(.9); opacity:.85; }   /* parked in the rack */
  .mo-left u.rest,.mo-sign u.neq{ opacity:0; }        /* show the solved read: CLEAN, 15 = 15 */
  .mo-left u.win,.mo-sign u.win{ opacity:1; }
  .mo-right u.fix{ color:var(--gold-2); }
  .mo-left,.mo-right{ box-shadow:inset 0 0 0 1px rgba(240,166,58,.8); }
}

/* ============ ONE ALIGNED COLUMN (2026-08-08) ============
   Every actionable element on the title snaps to the same 340px column:
   hero card -> full-width endless pill -> 2x2 grid of EQUAL nav cells ->
   tiny footer links. No mismatched widths, nothing ragged. */
.btn-quiet{width:min(340px,88vw);padding:14px 20px;}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:min(340px,88vw);margin-top:2px;}
.menu-cell{font-family:inherit;cursor:pointer;height:46px;border-radius:14px;
  font-size:12px;font-weight:800;letter-spacing:.07em;color:#d6d0ee;white-space:nowrap;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);}
.menu-cell:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;}
.menu-learn{background:linear-gradient(160deg,rgba(255,200,110,.16),rgba(255,165,80,.08));
  border-color:rgba(255,200,110,.38);color:var(--gold-2);}
.title-foot{display:flex;align-items:center;gap:10px;margin-top:0;}
.title-foot .tlink{background:none;border:none;border-radius:0;padding:6px 4px;
  font-size:11px;letter-spacing:.15em;color:var(--ink-dim);}
.title-foot .tlink:hover{color:#fff;background:none;}
.tfdot{color:var(--ink-dim);opacity:.6;}
#screen-title.intro .menu-grid{animation:settleIn .5s cubic-bezier(.2,1.3,.4,1) 1s both;}
#screen-title.intro .title-foot{animation:fadeIn .4s ease 1.15s both;}
@media (max-width:370px){.menu-cell{font-size:11px;letter-spacing:.04em;}}
/* the footer dot only exists when SETTINGS does */
.tfdot{display:none;}
body.show-extras .tfdot{display:inline;}

/* ============ daily card on a diet (2026-08-08) ============
   Two short lines: identity + action. The date is on the player's phone
   already; the kicker still receives JS writes but stays hidden. */
.daily-card{padding:10px 20px 12px;gap:1px;}
.daily-card .dc-kicker{display:none;}
.daily-card .dc-main{font-size:clamp(22px,5.2vw,26px);}
.daily-card .dc-sub{font-size:12px;letter-spacing:.12em;}

/* ============ 3D parity + toast wrap (2026-08-08) ============ */
/* wrong 3D entries stay on the board marked bad, like the 2D game */
#screen-tetra .t3-cell.bad{ border-color:#ff6b6b !important; color:#ffd7d7;
  box-shadow:0 0 0 2px rgba(255,80,80,.4), inset 0 2px 6px rgba(0,0,0,.28); }
#screen-tetra .t3-cell.bad::after{ content:'!'; position:absolute; top:-8px; right:-4px;
  font-size:12px; font-weight:900; color:#ff6b6b; text-shadow:0 1px 2px rgba(0,0,0,.6); }
/* toasts wrap instead of marching off-screen (danger/milestone already did) */
.toast{white-space:normal;max-width:92vw;line-height:1.25;}