/* 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}

/* title: the board screen starts with it, straight under the header (register 94) */
.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}
#game>h1{margin-top:14px}
/* 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 title, the promise line, the level choice and all four rows fit on the first screen,
   with the topic line under the board at 375 x 667 (registers 92 and 94). Taller phones keep
   the roomier spacing. */
@media (max-height:740px){
  /* and the board gives up a little on the shortest screens, never below 280 px; with the
     topic line moved under the board (register 94) the space it freed at the top goes to the
     board, so it is full width again at 375 x 667 */
  :root{--board:min(calc(100vw - 32px),420px,max(280px,calc(100vh - 308px)));--board:min(calc(100vw - 32px),420px,max(280px,calc(100svh - 308px)))}
  .wrap{padding-block-start:max(8px,env(safe-area-inset-top))}
  header{padding-bottom:8px}
  #game>h1{margin-top: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}
/* the topic line (register 94): one centred line directly under the board, and under the
   picture after a solve. Plain text, no balloon: a small dot in the competency's colour, the
   competency in dark bold ink, a middle dot, the board number muted. The words are never in
   the pastel colour; it is too pale to read as text. */
.topic{display:flex;align-items:center;justify-content:center;gap:7px;max-width:var(--board);margin:10px auto 0;font-size:14px;line-height:20px;white-space:nowrap}
.topic .dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:#64748B}
/* a thin ring where the topic's colour is faint on the background (register 95): the mustard
   on the light page, the Leadership navy on the dark one */
.topic .dot[data-ring~="light"]{box-shadow:0 0 0 1.5px rgba(31,42,68,.45)}
@media (prefers-color-scheme: dark){
  .topic .dot[data-ring~="light"]{box-shadow:none}
  .topic .dot[data-ring~="dark"]{box-shadow:0 0 0 1.5px rgba(238,240,243,.7)}
}
.topic b{font-weight:700;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis}
.topic .sep,.topic .boardno{flex:0 0 auto;color:var(--ink-muted)}
@media (max-height:740px){.topic{margin-top:6px}}
.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}
}

/* the daily reminder, app only (section 15; register 99): a panel under the saying */
.remind{border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:14px 0 0}
.remind p{margin:0 0 8px}.remind .remindh{font-family:var(--display);font-weight:800;font-size:20px;margin:0 0 4px}
.remindtime{display:flex;align-items:center;gap:10px;margin:4px 0 10px;font-weight:700}
.remind input[type=time],.setrow input[type=time]{min-height:44px;border:2px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:6px 10px;font-size:17px}
.remind .actions{display:flex;gap:10px;flex-wrap:wrap}
/* the privacy and support pages (register 99) */
.page{padding-top:max(24px,env(safe-area-inset-top))}
.page h1{margin:0 0 16px}
.page h2.label{margin:24px 0 8px}
.page .pagefoot{margin-top:32px;font-size:15px}
.page a{color:var(--ink)}