/* 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:clamp(34px,10.5vw,42px);height:clamp(34px,10.5vw,42px);flex:0 0 auto}
.logo svg{display:block;width:100%;height:100%}
.brand{font-family:var(--display);font-weight:800;font-size:clamp(24px,7.6vw,30px);letter-spacing:-0.02em;line-height:1;white-space:nowrap}
.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:28px 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}

/* the November screen (register 102): the title on the left, as large as fits (fitTitle in
   app.js: up to 54 px, never more than two lines, down to 26 px so the picture and the board
   fit on the first screen); the small picture on the right, one tile column wide, with the
   clock under it; the topic line under the title, beside the picture */
.head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:12px;row-gap:8px;align-items:start;max-width:var(--board);margin:12px auto}
h1{font-family:var(--display);font-weight:800;font-size:28px;line-height:1.15;letter-spacing:-0.01em;margin:0 0 12px;text-wrap:balance}
.head h1{grid-column:1;grid-row:1;font-size:54px;line-height:1;letter-spacing:-.015em;margin:0;overflow-wrap:normal}
.side{grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:4px}
/* one tile column wide: the board's tile, plus the picture's own border */
.thumb{width:calc(var(--tile) + 4px);height:calc(var(--tile) + 4px);border-radius:10px;overflow:hidden;border:2px solid var(--ink);box-shadow:0 2px 6px rgba(20,27,43,.18);padding:0;background:var(--slab);cursor:zoom-in;display:block}
.thumb[aria-pressed="true"]{cursor:zoom-out}
.thumb svg{display:block;width:100%;height:100%;pointer-events:none}
.clockbtn{font-size:20px;font-weight:700;background:none;border:0;border-radius:999px;padding:0 4px;min-height:32px;min-width:44px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-variant-numeric:tabular-nums}
.clockbtn b{font-weight:700}
.clockbtn .pz{display:inline-flex;gap:2.5px;opacity:.55}.clockbtn .pz i{width:3px;height:12px;background:var(--ink);border-radius:1px}
.clockbtn:disabled{cursor:default}.clockbtn:disabled .pz{display:none}
/* Fun made obvious (register 102): a teal "FUN" where the clock would be, a teal frame round the board */
.funlabel{display:inline-flex;align-items:center;min-height:26px;padding:3px 10px;border-radius:999px;background:var(--teal);color:#fff;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
@media (prefers-color-scheme: dark){.funlabel{color:#141B2B}}
/* the topic line: the topic's colour dot and name, underlined as a link, no board number */
.topic{grid-column:1;grid-row:2;align-self:end;justify-self:start;border:0;background:none;padding:2px 0;min-height:32px;font-weight:700;font-size:clamp(17px,5.4vw,20px);line-height:1.25;text-align:left;cursor:pointer;color:var(--ink)}
.topic .dot,#topicH .dot{display:inline-block;width:15px;height:15px;border-radius:50%;margin-right:7px;vertical-align:-1px;background:#64748B}
.topic .tname{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:var(--line)}
/* 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 */
.dot[data-ring~="light"]{box-shadow:0 0 0 1.5px rgba(31,42,68,.45)}
@media (prefers-color-scheme: dark){
  .dot[data-ring~="light"]{box-shadow:none}
  .dot[data-ring~="dark"]{box-shadow:0 0 0 1.5px rgba(238,240,243,.7)}
}

/* below the board, until solved: the promise line, then the level choice (register 102) */
.playarea{max-width:var(--board);margin:12px auto 0;text-align:center}
.promise{font-size:15px;line-height:1.4;color:var(--ink-muted);margin:0;text-wrap:balance}
.promise b{color:var(--ink);font-weight:700}
.lockline{font-size:15px;font-weight:700;margin:14px auto 8px;max-width:340px;text-align:center;white-space:pre-line}
.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)}
/* the level pill: "Steady | Fun"; Fun's half teal when chosen; after the first move the other half dims (register 51) */
.seg.pill{border-radius:999px}
.seg.pill button{min-height:46px;padding:0 24px;font-size:16px;border-radius:999px}
.seg.pill button+button{border-left:0}
.seg.pill #lvFun[aria-pressed="true"]{background:var(--teal);color:#fff}
@media (prefers-color-scheme: dark){.seg.pill #lvFun[aria-pressed="true"]{color:#141B2B}}
.levels.fixed .seg button{cursor:default}
.levels.fixed .seg button[aria-pressed="false"]{opacity:.45}

/* the board */
.stage{position:relative;width:var(--board);height:var(--board);margin:0 auto;border-radius:16px;transition:box-shadow .2s}
.isfun .stage{box-shadow:0 0 0 4px var(--teal)}
.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)}}

/* the tools under the rank card (register 102): text links, then the board number, small and grey */
.tools{display:flex;gap:22px;justify-content:center;margin:4px 0 0}
.tool{border:0;background:none;padding:0 4px;min-height:44px;font-weight:700;font-size:15px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;cursor:pointer}
.bno{margin:0;text-align:center;font-size:14px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
/* a short screen (an iPhone SE with larger text is 548 px tall): a little less room above the
   board, so the header, the picture and all four rows stay on the first screen (register 102) */
@media (max-height:600px){.wrap{padding-block-start:max(8px,env(safe-area-inset-top))}header{padding-bottom:8px}.head{margin:8px auto}.side{margin-top:2px}.clockbtn{min-height:28px}}
/* short messages, such as "That tile can't move, Muddler." */
.hint{text-align:center;font-size:15px;color:var(--ink-muted);margin:8px auto 0;max-width:var(--board)}
.hint:empty{display:none}

/* the rank card (register 102): the rank given room; it opens the stats screen */
.careerwrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin:22px 0 6px}
.careerlabel{margin:0;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.career{display:flex;align-items:center;gap:10px;width:100%;max-width:300px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:9px 12px;cursor:pointer;color:var(--ink)}
.medal{flex:none;width:40px;height:40px;border-radius:50%;background:var(--mustard);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:18px;color:#1F2A44;box-shadow:inset 0 0 0 3px rgba(31,42,68,.18)}
.cbody{flex:1;min-width:0;display:flex;flex-direction:column}
.crank{font-family:var(--display);font-weight:800;font-size:18px;line-height:1.15}
.cmeta{font-size:14px;color:var(--ink-muted);line-height:1.35;margin-top:1px;font-variant-numeric:tabular-nums}
.cnext{font-size:13px;margin-top:3px}
.cstreak{white-space:nowrap}
.career .bar{height:8px;margin:7px 0 0;background:color-mix(in srgb,var(--line) 70%,transparent)}
.career .bar i{min-width:0;transition:width .8s ease}
.chev{flex:none;font-size:22px;color:var(--ink-muted)}

.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-family:var(--display);font-weight:700;font-size:22px;line-height:1.3;text-wrap:balance;opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s}
.look.on{opacity:1;transform:none}
.look b{display:block;font-family:var(--body);font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:4px}
.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}

.hpfine{margin:6px 0 0;font-size:14px;color:var(--ink-muted)}

/* the topic panel (register 102): a sheet from the bottom of the screen */
.sheetscrim{position:fixed;inset:0;z-index:20;background:rgba(11,16,32,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:460px;max-height:88vh;max-height:88svh;overflow:auto;background:var(--surface);border-radius:18px 18px 0 0;padding:14px 18px max(26px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;box-shadow:0 -8px 24px rgba(11,16,32,.2)}
.sheet h2{margin:0;font-family:var(--display);font-weight:800;font-size:24px;line-height:1.15}
.sheet p,.sheet h3.label{margin:0}
.sheetclose{align-self:flex-end;margin:-6px -4px -10px 0;font-size:15px}
.topiclessons{display:flex;flex-direction:column;gap:8px}
.tlesson{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.tlesson .tsay{font-family:var(--voice);font-style:italic;font-size:18px;line-height:1.3}
.tlesson .tmeta{font-size:14px;color:var(--ink-muted)}
.topicempty{color:var(--ink-muted);font-size:15px}
#topicLib{align-self:flex-start}

/* 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}
#playNow{display:inline-flex;align-items:center;justify-content:center;min-width:160px;font-size:17px;text-decoration:none}
.soonnote{font-size:15px;color:var(--ink-muted);max-width:34ch;margin:16px auto 0}

/* 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}.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 (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)}