/* Muddlework game screen. Tokens, sizes and timings follow specification section 3;
   most of the look is carried over from reference/preview.html. */

@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/newsreader-latin-400-italic.woff2) format("woff2")}

:root{
  --ground:#EEF0F3; --surface:#FFFFFF; --ink:#1F2A44; --ink-muted:#5A6475; --line:#CBD2DB;
  --slab:#1F2A44; --chalk:#F6F4EF; --mustard:#E8B931; --teal:#2F8F83; --coral:#EF6F5E;
  --on-accent:#1F2A44; --focus:#1F2A44; --tint:#FBF3D9; --tile-border:#FFFFFF; --try:#FBF0CC;
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --voice:"Newsreader",Georgia,serif;
  --board:min(calc(100vw - 32px),420px);
  --gap:5px;
  --tile:calc((var(--board) - 3 * var(--gap)) / 4);
  /* section 3, Motion */
  --slide:.16s;
  --t-appear:.5s; --t-flow-in:.4s; --t-flow:.8s; --flow-times:2; --t-hop:.6s; --t-grow:1.8s; --t-ring:.7s;
}
@media (prefers-color-scheme: dark){
  :root{--ground:#141B2B;--surface:#1F2A44;--ink:#EEF0F3;--ink-muted:#A7B0BE;--line:#34405A;--slab:#2E3B5C;
    --mustard:#F0C74A;--teal:#4FB3A5;--coral:#F4877A;--focus:#F0C74A;--tint:#2A2F33;--try:#3A3324;color-scheme:dark}
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.artdefs{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:452px;margin:0 auto;padding-inline:16px;padding-block:max(14px,env(safe-area-inset-top)) 48px}
.loading{text-align:center;color:var(--ink-muted);margin-top:40px}

/* header */
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.brandrow{display:flex;align-items:center;gap:10px}
.logo{width:40px;height:40px;flex:0 0 auto}
.logo svg{display:block;width:100%;height:100%}
.brand{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-0.02em;line-height:1}
.brand small{display:block;font-family:var(--body);font-weight:400;font-size:13px;letter-spacing:0;color:var(--ink-muted);margin-top:4px}
.icons{display:flex;align-items:center;gap:4px}
/* the beta tag (register 85): a small pill with a full-size tap target, and what it shows */
header{position:relative}
.brandtext{display:flex;align-items:center;gap:8px;min-width:0}
/* the pill is small; the tap area round it is the full 44 px */
.betatag{position:relative;display:inline-flex;padding:0;border:0;background:none;cursor:pointer;flex:0 0 auto}
.betatag::after{content:"";position:absolute;inset:-11px -8px}
.betatag span{display:inline-block;background:var(--ink);color:var(--ground);border-radius:999px;padding:3px 8px;font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.2}
.betatag[aria-expanded="true"] span{background:var(--mustard);color:var(--on-accent)}
.betapop{position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:8px;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:0 8px 24px rgba(20,27,43,.18)}
.betapop p{margin:0}
.bpday{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.2;margin-bottom:4px!important}
.bpthanks{color:var(--ink-muted);font-size:15px}
.ib{width:44px;height:44px;border:0;background:none;border-radius:12px;display:grid;place-items:center;cursor:pointer}
.ib:hover{background:var(--surface)}
.ib svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ib[aria-pressed="false"] .on{display:none}.ib[aria-pressed="true"] .off{display:none}

/* practice controls: test builds only (section 15, Environments) */
.practice{margin:14px 0 0;padding:10px;border:2px dashed var(--line);border-radius:16px}
.samplehead{margin:0 0 8px;font-size:13px;color:var(--ink-muted)}
.daypick{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.daypick .btn.small{min-width:44px;font-size:18px;line-height:1}
#toToday{font-size:14px}
.playdate{flex:1 1 140px;text-align:center;font-weight:700;font-size:15px}
.testrow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px}
.testline{margin:0;font-size:13px;color:var(--ink-muted);font-variant-numeric:tabular-nums;min-width:0}
.btn.small{min-height:44px;padding:6px 12px;font-size:14px}

/* meta row and title */
/* the top line (register 93): the chip and the board number, one line, even with a long topic */
.meta{display:flex;align-items:center;gap:10px;margin:18px 0 6px;min-height:30px}
.chip{display:inline-flex;align-items:center;font-size:14px;font-weight:700;padding:4px 12px;border-radius:999px;color:#1F2A44;background:#DCE2E9;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.boardno{font-size:14px;color:var(--ink-muted);white-space:nowrap;flex:0 0 auto}
.clockbtn{font-size:14px;background:none;border:1.5px solid var(--line);border-radius:999px;padding:3px 10px 3px 12px;min-height:44px;min-width:44px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.clockbtn .pz{display:inline-flex;gap:2.5px}.clockbtn .pz i{width:3px;height:11px;background:var(--ink);border-radius:1px}
.clockbtn:disabled{border-color:transparent;cursor:default;padding:3px 0}.clockbtn:disabled .pz{display:none}
h1{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.15;letter-spacing:-0.01em;margin:0 0 12px;text-wrap:balance}
/* the promise line under the title (section 3; register 92): plain body text, no box */
.promise{font-size:16px;line-height:1.4;color:var(--ink);margin:-4px 0 12px;text-align:left}
.promise b{font-weight:700}
@media (max-width:359px){.promise{font-size:15px}}
/* A short phone (an iPhone SE is 667 px tall): tighter spacing above the board, so the header,
   the chips, the title, the promise line, the level choice and all four rows fit on the
   first screen (register 92). Taller phones keep the roomier spacing. */
@media (max-height:740px){
  /* and the board gives up a little on the shortest screens: 325 px rather than 343 px at
     667 px tall, never below 280 px */
  :root{--board:min(calc(100vw - 32px),420px,max(280px,calc(100vh - 342px)));--board:min(calc(100vw - 32px),420px,max(280px,calc(100svh - 342px)))}
  .wrap{padding-block-start:max(8px,env(safe-area-inset-top))}
  header{padding-bottom:8px}
  .meta{margin:10px 0 4px}
  h1{margin-bottom:8px}
  .promise{margin:-2px 0 8px}
  .levelrow{margin-bottom:4px}
  .levelnote{line-height:1.35;margin-bottom:8px;min-height:0}
}

/* level choice */
/* the level line (register 93): three columns, so the buttons sit over the middle of the
   board, Play to their left and the clock at the right end; the clock keeps its place when
   the buttons go (a solved board or a replay) */
.levelrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:10px;margin:0 0 6px;min-height:44px}
.levels{display:contents}
.levels .lbl{grid-column:1;justify-self:end;font-size:14px;color:var(--ink-muted)}
.levels .seg{grid-column:2}
#clockWrap{grid-column:3;justify-self:end}
/* narrow and zoomed phones: tighter buttons and clock, so the longest level ("Fiendish") and
   a running clock never meet */
@media (max-width:379px){
  .levelrow{column-gap:6px}
  .levels .seg button{min-width:0;padding:6px 10px;font-size:14px}
  .clockbtn{padding:3px 8px;gap:5px}
}
.seg{display:inline-flex;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.seg button{min-height:44px;min-width:72px;border:0;background:none;padding:6px 14px;font-weight:700;font-size:15px;cursor:pointer}
.seg button+button{border-left:2px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.levels.fixed .seg{opacity:.6}.levels.fixed .seg button{cursor:default}
.levelnote{text-align:center;font-size:13px;color:var(--ink-muted);margin:0 0 12px;min-height:20px}

/* the board */
.stage{position:relative;width:var(--board);height:var(--board);margin:0 auto}
.grid{position:absolute;inset:0;isolation:isolate;background:var(--slab);border-radius:16px;touch-action:none;user-select:none;-webkit-user-select:none;transition:opacity .4s}
.grid .t{position:absolute;left:0;top:0;width:var(--tile);height:var(--tile);border:0;padding:0;border-radius:6px;overflow:hidden;cursor:pointer;background:#1F2A44;
  transform:translate(calc(var(--c) * (var(--tile) + var(--gap))),calc(var(--r) * (var(--tile) + var(--gap))));transition:transform var(--slide) ease-out}
/* the empty square during play is a dark well with the game's M, not part of the picture
   (register 80, on trial; replaces the light hole of register 75): darker than the board and
   sunken, a thin mustard edge, the M in mustard about 45% of the square's width. The same in
   either style and in dark mode. It sits under the tiles, moves with the gap, and fades on
   the solve, so the missing square stays clear in the finished picture (register 44). */
.grid .hole{position:absolute;left:0;top:0;z-index:0;width:var(--tile);height:var(--tile);border-radius:6px;pointer-events:none;background:#0B1020;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 4px 14px rgba(0,0,0,.8),inset 0 0 0 2px rgba(232,185,49,.35);
  transform:translate(calc(var(--c) * (var(--tile) + var(--gap))),calc(var(--r) * (var(--tile) + var(--gap)))) scale(.94);transition:opacity .2s}
.grid .hole svg{display:block;width:45%;height:auto}
.grid .hole.gone{opacity:0}
.grid .t{z-index:1}
.grid .t svg{display:block;width:100%;height:100%;pointer-events:none}
.grid .t::after{content:"";position:absolute;inset:0;border:2.5px solid var(--tile-border);border-radius:6px;pointer-events:none}
.grid .t .n{position:absolute;left:5px;top:3px;font-size:12px;font-weight:700;color:#1F2A44;background:#F6F4EF;border-radius:4px;padding:0 4px;line-height:16px;display:none}
.grid.nums .t .n{display:block}
.grid .t:focus-visible{outline-offset:-4px;z-index:2}
.full,.peek{position:absolute;inset:0;border-radius:16px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .35s}
.full svg,.peek svg{display:block;width:100%;height:100%}
.peek.on{opacity:1;pointer-events:auto;cursor:pointer}
.full.on{opacity:1;pointer-events:auto}
.paused{position:absolute;inset:-1px;border-radius:16px;background:var(--slab);color:#F6F4EF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:5;text-align:center;padding:20px}
.paused strong{font-family:var(--display);font-size:30px}
.paused p{margin:0 0 6px;font-size:15px;opacity:.85}

/* the reveal (section 4): entrance and delay come with the board, durations live here */
.full .before{opacity:1;transition:opacity .8s ease .3s}
.full.revealed .before{opacity:0}
.full .reveal .anim{opacity:0}
.full.revealed .reveal .appear{animation:pop var(--t-appear) ease-out var(--d,0s) forwards}
.full.revealed .reveal .flow{animation:pop var(--t-flow-in) ease-out var(--d,0s) forwards,flow var(--t-flow) linear var(--d,0s) var(--flow-times)}
.full.revealed .reveal .hop{transform-box:fill-box;transform-origin:50% 100%;animation:hop var(--t-hop) cubic-bezier(.3,1.6,.5,1) var(--d,0s) forwards}
.full.revealed .reveal .grow{transform-box:fill-box;transform-origin:0 50%;animation:grow var(--t-grow) cubic-bezier(.6,0,.3,1) var(--d,0s) forwards}
.full.revealed .reveal .ring{transform-box:fill-box;transform-origin:50% 50%;animation:ring var(--t-ring) ease-out var(--d,0s) 1}
.full.still .before{opacity:0;transition:none}
.full.still .reveal .anim{opacity:1;transform:none;animation:none}
.full.still .reveal .ring{opacity:0}
@keyframes pop{from{opacity:0}to{opacity:1}}
@keyframes flow{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
@keyframes hop{0%{opacity:0;transform:translateY(-14px) scale(.5)}70%{opacity:1;transform:translateY(1px) scale(1.08)}100%{opacity:1;transform:none}}
@keyframes grow{0%{opacity:1;transform:scaleX(.158)}100%{opacity:1;transform:scaleX(1)}}
@keyframes ring{0%{opacity:0;transform:scale(.5)}35%{opacity:1}100%{opacity:0;transform:scale(1.9)}}

/* tools and hint */
.tools{display:flex;gap:8px;justify-content:center;margin:14px 0 4px;flex-wrap:wrap}
.btn{min-height:44px;border-radius:12px;border:2px solid var(--line);background:var(--surface);padding:8px 16px;font-weight:700;font-size:15px;cursor:pointer;touch-action:manipulation}
.btn[aria-pressed="true"]{border-color:var(--ink)}
.btn.primary{background:var(--mustard);border-color:var(--mustard);color:var(--on-accent)}
.hint{text-align:center;font-size:15px;color:var(--ink-muted);margin:6px 0 0;min-height:24px}

/* Look again and the reveal card */
.look{margin:14px auto 0;max-width:var(--board);text-align:center;font-size:17px;line-height:1.4;opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s}
.look.on{opacity:1;transform:none}
.look b{display:block;font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:2px}
.tolesson{display:block;margin:12px auto 0;min-height:44px;padding:8px 14px;border:0;border-radius:999px;background:none;color:var(--teal);font:600 15px/1.2 var(--display);cursor:pointer;animation:up .5s ease-out}
.tolesson[hidden]{display:none}
.card{background:var(--surface);border-radius:24px;padding:22px 20px;margin-top:22px}
.card.rise{animation:up .5s ease-out}
@keyframes up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.winrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.winrow h2{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;margin:0}
.winrow .meta2{font-size:15px;color:var(--ink-muted);margin:4px 0 0;font-variant-numeric:tabular-nums}
.badge{display:inline-flex;align-items:baseline;gap:4px;background:var(--mustard);color:var(--on-accent);border-radius:14px;padding:8px 14px;font-weight:700}
.badge .n{font-family:var(--display);font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.badge.replay{background:var(--ground);color:var(--ink);font-size:14px}
.sum{font-size:14px;color:var(--ink-muted);margin:0 0 16px;font-variant-numeric:tabular-nums}
.quote{position:relative;background:var(--slab);color:#F6F4EF;border-radius:18px;padding:30px 20px 20px;margin:0 0 18px}
.quote::before{content:"\201C";position:absolute;left:14px;top:-14px;font-family:var(--display);font-weight:800;font-size:72px;line-height:1;color:var(--mustard)}
.saying{font-family:var(--voice);font-style:italic;font-weight:400;font-size:24px;line-height:1.3;margin:0;color:#F6F4EF}
.label{font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 6px}
.finding{margin:0 0 10px}
/* the home-screen prompt (register 69) */
.homeprompt{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.hptitle{margin:0 0 8px;font-weight:700}
.hpsteps{margin:0 0 4px;padding-left:22px}
.hpsteps li{margin-bottom:4px}
.shareicon{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;background:var(--ground);vertical-align:middle}
.shareicon svg{width:18px;height:18px;stroke:#2F7DF6;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Try this today and the source card (register 68) */
.trytoday{background:var(--try);border-left:4px solid var(--mustard);border-radius:14px;padding:12px 14px;margin:14px 0 0}
.trytoday .label{margin:0 0 4px}
.trytext{margin:0;font-weight:700;line-height:1.4}
.sourcecard{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;align-items:start;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:14px 0 0}
.srcicon{grid-row:1;width:40px;height:40px;border-radius:10px;background:var(--ground);display:grid;place-items:center}
.srcicon svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.srcwords{min-width:0}
.srcwords p{margin:0}
.srckind{font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.srctitle{font-weight:700;line-height:1.3}
.srcdetails{font-size:14px;color:var(--ink-muted)}
.readbtn{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;margin-top:8px;text-decoration:none;color:var(--ink)}
.added{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0;font-size:15px;font-weight:700;color:var(--teal)}
.added svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.linkbtn{border:0;background:none;padding:0;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.toast{font-size:14px;font-weight:700;color:var(--teal)}
.nextline{font-size:14px;color:var(--ink-muted);font-variant-numeric:tabular-nums;margin:12px 0 0}
textarea.share{width:100%;min-height:110px;margin-top:10px;font-size:14px;border:1px solid var(--line);border-radius:10px;background:var(--ground);color:var(--ink);padding:10px}

.promoted{margin:-8px 0 16px;font-weight:700;color:var(--teal)}

/* My library */
.libhead{margin:16px 0 10px}
.libh{font-family:var(--display);font-weight:800;font-size:30px;line-height:1.05;margin:0 0 4px}
.libsub{color:var(--ink-muted);font-size:15px;margin:0 0 14px}
#libSearch{width:100%;min-height:44px;border:2px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:8px 12px;font-size:17px;margin:0 0 16px}
.shelf{margin:0 0 20px}
.shelf h3{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 8px;border-bottom:1px solid var(--line);padding-bottom:6px}
.lesson{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;background:var(--surface);border-radius:16px;padding:12px;margin-bottom:8px}
.lesson .thumb{width:76px;height:76px;border-radius:10px;overflow:hidden;background:var(--slab)}
.lesson .thumb svg{display:block;width:100%;height:100%}
.lsay{font-family:var(--voice);font-style:italic;font-size:19px;line-height:1.3;margin:0 0 4px}
.lmeta{font-size:13px;color:var(--ink-muted);margin:0}
.lesson summary{cursor:pointer;font-weight:700;font-size:15px;min-height:44px;display:flex;align-items:center}
.lesson details p{font-size:15px;margin:6px 0}
.lesson details .trytoday,.lesson details .sourcecard{margin-top:10px}
.empty,.missed{border:2px dashed var(--line);border-radius:16px;padding:14px;color:var(--ink-muted);font-size:15px;margin:0 0 16px}
.empty b{color:var(--ink)}
.cnt{display:inline-block;background:var(--mustard);color:var(--on-accent);border-radius:999px;min-width:22px;padding:0 6px;text-align:center;font-size:13px;line-height:20px;margin-left:4px}

/* stats screen (section 9) */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.view h3.label{margin:24px 0 8px}
.rankcard{display:flex;align-items:center;gap:16px;background:var(--surface);border-radius:20px;padding:18px}
.bigm{width:76px;height:76px;flex:0 0 auto}.bigm svg{display:block;width:100%;height:100%}
.rankcard p{margin:0}
.youare{font-size:15px;color:var(--ink-muted)}
.rankbig{font-family:var(--display);font-weight:800;font-size:30px;line-height:1.05;text-wrap:balance}
.rankpts{font-weight:700;font-variant-numeric:tabular-nums}
.since{font-size:14px;color:var(--ink-muted)}
.bar{height:12px;border-radius:999px;background:var(--line);overflow:hidden;margin:16px 0 6px}
.bar i{display:block;height:100%;background:var(--mustard);border-radius:999px;min-width:6px}
.nextrank{font-size:15px;color:var(--ink-muted);margin:0;font-variant-numeric:tabular-nums}
.ladder{list-style:none;padding:0;margin:0}
.ladder li{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:10px;font-size:16px;font-variant-numeric:tabular-nums}
.ladder li.me{background:var(--tint);font-weight:700}
.ladder li.gone{color:var(--ink-muted)}
.ladder li .you{color:var(--ink)}
.libbtn{margin-top:12px}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:360px}
.day{display:flex;flex-direction:column;align-items:center;gap:4px}
.day .dot{width:30px;height:30px;border-radius:50%;border:2.5px solid var(--line);background:var(--surface)}
.day.done .dot{background:var(--mustard);border-color:var(--mustard)}
.day.now .dot{border-color:var(--ink)}
.day.skipped .dot{border-style:dashed}
.day .dl{font-size:13px;font-weight:700;color:var(--ink-muted)}
.weeknote{font-size:15px;color:var(--ink-muted);margin:8px 0 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:0}
.stat{background:var(--surface);border-radius:14px;padding:10px 12px}
.stat dt{font-size:13px;color:var(--ink-muted)}
.stat dd{margin:0;font-family:var(--display);font-weight:800;font-size:24px;font-variant-numeric:tabular-nums}
.moves{display:grid;gap:6px}
.mrow{display:grid;grid-template-columns:96px minmax(0,1fr) 28px;align-items:center;gap:8px;font-size:14px}
.mtrack{height:14px;background:var(--line);border-radius:999px;overflow:hidden}
.mbar{display:block;height:100%;background:var(--mustard)}
.mn{text-align:right;font-variant-numeric:tabular-nums}
.recent{list-style:none;padding:0;margin:0;background:var(--surface);border-radius:16px}
.recent li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px}
.recent li+li{border-top:1px solid var(--line)}
.recent .rt{display:block;font-weight:700}
.recent .rd{display:block;font-size:13px;color:var(--ink-muted)}
.recent .rr{display:flex;gap:10px;align-items:baseline;font-size:15px;font-variant-numeric:tabular-nums;text-align:right;flex-wrap:wrap;justify-content:flex-end}
.howpts,.howto{padding-left:20px;margin:0}
.howpts li,.howto li{margin-bottom:6px}

/* when there is no board (section 2) */
.notice{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--tint);border-radius:16px;padding:14px 16px;margin:16px 0}
.notice p{margin:0;font-weight:700}
.noboardmore{display:flex;flex-direction:column;gap:8px}
.notice .noboardmore p{font-weight:400}
.gamenote{font-weight:700;margin:16px 0 0}
/* beta over */
.soon{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 0}
.soon .bigm{margin-bottom:16px}
.soonline{font-size:19px;margin:4px 0}
.soonbtns{justify-content:center;margin-top:24px}

/* help and settings (section 3) */
.setrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.setrow small{display:block;font-size:13px;color:var(--ink-muted)}
.btn.toggle{min-width:72px}
.btn.toggle[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.privacy{font-size:15px;margin:0 0 10px}
.privacy p{margin:0 0 10px}
.privacy ul{margin:0 0 10px;padding-left:22px}
.privacy li{margin:0 0 4px}

/* Want a hint? (section 3; registers 82 and 83): a small box over the top of the screen */
.hintscrim{position:fixed;inset:0;z-index:20;background:rgba(11,16,32,.45);display:flex;justify-content:center;align-items:flex-start;padding:max(16px,env(safe-area-inset-top)) 16px 16px;overflow-y:auto}
.hintbox{width:100%;max-width:400px;background:var(--surface);border-radius:18px;border-top:5px solid var(--mustard);padding:16px 18px 14px;box-shadow:0 12px 32px rgba(11,16,32,.3)}
.hintbox h2{font-family:var(--display);font-weight:800;font-size:24px;margin:0 0 4px}
.hintbox p{margin:0 0 12px}
.hintbox .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.egintro{margin:0 0 10px;font-size:15px}

/* Send feedback (section 3; register 88): first in Help, a small link on the reveal card, one box */
/* Help's top row: Back to the board and Send feedback side by side, equal widths, on every phone */
.helphead{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.helphead .btn{min-width:0;padding:8px 10px;text-align:center;line-height:1.2}
@media (max-width:359px){.helphead{gap:8px}.helphead .btn{font-size:14px;padding:8px 6px}}
.fbline{margin:10px 0 0;font-size:15px}
.fbbox textarea,.fbbox input{width:100%;border:2px solid var(--line);border-radius:12px;background:var(--ground);color:var(--ink);padding:10px 12px;font-size:17px}
.fbbox textarea{min-height:130px;resize:vertical;display:block;margin-top:6px}
.fbbox input{min-height:44px}
.fbbox .fbcount{margin:4px 0 10px;font-size:13px;color:var(--ink-muted);text-align:right}
.fblabel{display:block;font-size:15px;margin:0 0 4px}
.fbbox .fberr{margin:8px 0 0;font-size:15px;font-weight:700;color:var(--ink)}
.fbbox .fberr:empty{display:none}
.fbbox .actions{margin-top:12px}
#helpDemo{margin-bottom:10px}

/* How to finish a board: the practice board, numbered tiles, never the player's own */
.endgame{--eb:min(calc(100vw - 80px),220px);--eg:4px;--et:calc((var(--eb) - 3 * var(--eg)) / 4)}
.egboard{position:relative;width:var(--eb);height:var(--eb);margin:4px auto 10px;background:var(--slab);border-radius:12px;padding:0}
.egt{position:absolute;left:0;top:0;width:var(--et);height:var(--et);border-radius:6px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px;
  background:#F6F4EF;color:#1F2A44;transform:translate(calc(var(--c) * (var(--et) + var(--eg))),calc(var(--r) * (var(--et) + var(--eg))));transition:transform .22s ease-out,background-color .2s}
.egt.done{background:#8E98A8;color:#F6F4EF}
.egt.focus{background:var(--mustard);color:#1F2A44;box-shadow:0 0 0 3px #F6F4EF inset}
.egsay{min-height:72px;text-wrap:balance;font-size:15px;text-align:center;margin:0 0 6px}

@media (max-width:440px){header{gap:8px}.brandrow{gap:8px;min-width:0}.logo{width:34px;height:34px}.brand{font-size:24px}.brand small{display:none}.icons{gap:0}
  /* on phones the BETA tag sits under the name, where the tagline would be: beside it, it doesn't fit with the three buttons */
  .brandtext{flex-direction:column;align-items:flex-start;gap:3px}.betatag span{font-size:13px;padding:2px 7px}}
@media (max-width:360px){.brand{font-size:20px}.logo{width:30px;height:30px}}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .full.revealed .reveal .anim{opacity:1;transform:none}
  .full.revealed .reveal .ring{opacity:0}
  .look{opacity:1;transform:none}
}