/* card grid */
.gamegrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.gamegrid[hidden]{display:none}
.gamecard{
  position:relative;overflow:hidden;text-align:left;cursor:pointer;
  background:var(--panel);border:var(--card-border);border-radius:var(--card-radius);
  padding:20px;box-shadow:var(--shadow);color:var(--text);min-height:160px;
  display:flex;flex-direction:column;gap:5px;
  opacity:0;transform:translateY(12px);
  animation:cardIn .45s cubic-bezier(.2,.7,.2,1) forwards;
  transition:transform .16s ease, box-shadow .16s ease, background .15s;
}
.gamecard:hover{transform:translateY(-4px);box-shadow:var(--shadow-hi);background:var(--panel-2)}
.gamecard:active{transform:translateY(-1px)}
.gamecard .ico{font-size:1.875rem;line-height:1;margin-bottom:4px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.gamecard:hover .ico{transform:scale(1.15) rotate(-6deg)}
.gamecard h2{margin:0;font-family:var(--font-display);font-size:1.1875rem;
  font-weight:var(--display-w);letter-spacing:var(--display-ls);text-transform:var(--display-tt)}
.gamecard p{margin:0;color:var(--muted);font-size:0.8125rem}
.gamecard .go{margin-top:auto;font-size:0.75rem;font-weight:700;color:var(--accent);
  opacity:0;transform:translateX(-6px);transition:opacity .18s,transform .18s}
.gamecard:hover .go{opacity:1;transform:none}
@keyframes cardIn{to{opacity:1;transform:none}}

.gamestage{animation:stageIn .3s cubic-bezier(.2,.7,.2,1)}
.gamestage[hidden]{display:none}
@keyframes stageIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.gamegrid.leaving,.gamesections.leaving,.gamestage.leaving{opacity:0;transform:scale(.985);
  transition:opacity .12s ease,transform .12s ease;pointer-events:none}
.back{margin-bottom:14px}
/* per-category horizontal scroller: ~3½ cards visible (a peek hints you can scroll).
   Scroll with the wheel while hovering, or click-and-drag. No visible scrollbar. */
.gamesections[hidden]{display:none}
/* The row is padded so card shadows have room (never clipped into a dark
   rectangle); the wrapper's negative margins make it full-bleed so tiles clip
   cleanly at the page edge. On hover a tile lifts (no growing shadow). */
.gamesecrow{position:relative;margin:0 -16px -4px}
.gamerow{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:28px 16px 32px;
  cursor:grab;scrollbar-width:none;-ms-overflow-style:none}
.gamerow::-webkit-scrollbar{display:none}
.gamerow.dragging{cursor:grabbing}
.gamerow .gamecard{flex:0 0 calc((100% - 42px) / 3.5);min-width:200px;
  transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .16s ease}
.gamerow .gamecard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
@media (max-width:640px){ .gamerow .gamecard{flex-basis:80%;min-width:0} }
.stage{
  background:var(--panel);border:var(--card-border);border-radius:var(--card-radius);
  padding:18px;box-shadow:var(--shadow);
}
html[data-motion="reduced"] .gamecard{animation:none;opacity:1;transform:none}
html[data-motion="reduced"] .gamestage{animation:none}
.stage h2{margin:0 0 4px;font-family:var(--font-display);font-size:1.25rem;
  font-weight:var(--display-w);letter-spacing:var(--display-ls);text-transform:var(--display-tt)}
.stage .how{color:var(--muted);font-size:0.8125rem;margin:0 0 14px}
.score{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:700;
  margin-left:auto;font-size:0.875rem}
.row{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
canvas{
  display:block;max-width:100%;height:auto;image-rendering:pixelated;
  border:1px solid var(--line);border-radius:calc(var(--card-radius) * .6);background:var(--panel-2);
}
/* 2048 */
.cell2048{background:var(--panel-2);border:1px solid var(--line);
  border-radius:calc(var(--card-radius) * .5)}
.tile2048{box-shadow:var(--shadow)}
/* card stat line */
.gamecard .stat{font-size:0.6875rem;color:var(--muted);font-family:var(--font-num);
  font-variant-numeric:tabular-nums}
.gwyou{font-size:0.75rem;color:var(--muted);margin-bottom:10px}
.gwyou b{color:var(--text)}
/* daily past-puzzle chips */
.dgdays{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.dgday{display:flex;align-items:center;gap:5px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;font-size:0.75rem;cursor:pointer;color:var(--text);white-space:nowrap}
.dgday:hover{border-color:var(--accent)}
.dgday.cur{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.dgday .dgi{font-weight:700}
.dgday.won .dgi{color:#2f9e44}
.dgday.lost .dgi{color:#e5484d}
/* daily: toolbar, archive, and the "how others did" summary bars */
.dgtoolbar{display:flex;gap:14px;flex-wrap:wrap;margin:2px 0 12px}
.dgtool{background:none;border:0;padding:0;color:var(--muted);font-size:0.78125rem;font-weight:700;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:inherit}
.dgtool:hover{color:var(--accent)}
.dgarch{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
#dgsummary{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;margin-bottom:14px}
#dgsummary[hidden]{display:none}
.dgsumhd{font-size:0.8125rem;color:var(--muted);margin-bottom:10px}
.dgsumhd .big{font-family:var(--font-num);font-weight:700;font-size:1.1875rem;color:var(--text)}
.dgbars{display:flex;flex-direction:column;gap:6px}
.dgbar{display:flex;align-items:center;gap:8px;font-size:0.8125rem}
.dgbar .dgbl{width:20px;text-align:center;font-weight:700;color:var(--muted);font-family:var(--font-num)}
.dgbar .dgbt{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:999px;overflow:hidden;height:18px}
.dgbar .dgbt>i{display:block;height:100%;background:var(--accent);min-width:3px;border-radius:999px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.dgbar.miss .dgbt>i{background:#e5484d}
.dgbar .dgbn{width:28px;text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums}
html[data-motion="reduced"] .dgbar .dgbt>i{transition:none}
/* tetris leaderboard */
.tlb{margin-top:16px;max-width:420px}
.tlb h3{margin:0 0 8px;font-family:var(--font-display);font-size:0.9375rem;
  font-weight:var(--display-w);letter-spacing:var(--display-ls);text-transform:var(--display-tt)}
.tlbrow{display:flex;gap:10px;align-items:baseline;padding:5px 11px;border-radius:var(--radius);font-size:0.84375rem}
.tlbrow:nth-child(odd){background:var(--panel-2)}
.tlbrow.me{background:color-mix(in srgb,var(--accent) 18%,var(--panel));font-weight:700}
.tlbrow .rk{width:26px;color:var(--muted);font-family:var(--font-num);font-variant-numeric:tabular-nums}
.tlbrow.me .rk{color:var(--accent)}
.tlbrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlbrow .tm{font-family:var(--font-num);font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
.tlbrow.tlbhd{font-size:0.6875rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;background:none;font-weight:700}
.tlbrow.tlbhd .rk,.tlbrow.tlbhd .nm,.tlbrow.tlbhd .tm{color:var(--muted)}
/* tetris layout (tetr.io-ish): hold left, board centre, next right */
.tmodes{display:flex;gap:8px;margin-bottom:14px}
.tmode{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;
  padding:6px 15px;font-size:0.8125rem;cursor:pointer;color:var(--text)}
.tmode:hover{border-color:var(--accent)}
.tmode.cur{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* three columns that stay side-by-side (Hold | board | Next); the board scales
   down on narrow screens rather than the Next column wrapping underneath */
.tgame{display:flex;gap:14px;align-items:flex-start;justify-content:center;flex-wrap:nowrap;max-width:100%}
.tside{display:flex;flex-direction:column;gap:12px;flex:0 0 auto}
.tside.tleft{align-items:flex-end}
#tcan,#tnext,#thold{display:block;max-width:100%;height:auto}
.tpanel{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:8px}
.tlabel{font-size:0.65625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.tstats{display:flex;flex-direction:column;gap:7px;min-width:118px}
.tstat{display:flex;justify-content:space-between;gap:10px;font-size:0.8125rem;color:var(--muted)}
.tstat b{color:var(--text);font-family:var(--font-num);font-variant-numeric:tabular-nums}
.tboardwrap{position:relative;flex:0 1 auto;min-width:0}
@media (max-width:560px){
  .tgame{gap:8px}
  .tpanel{padding:5px}
  #thold{width:52px} #tnext{width:56px}
  .tstats{min-width:0;font-size:0.75rem}
  .tstat{gap:6px;font-size:0.75rem}
}
.tover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:16px;border-radius:calc(var(--card-radius)*.6);cursor:pointer;
  background:color-mix(in srgb,var(--panel) 80%,transparent);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.tover[hidden]{display:none}
/* tetris feedback: line-clear flash (the landing bump is animated from games.js) */
.tflash{position:absolute;inset:0;border-radius:calc(var(--card-radius)*.6);pointer-events:none;opacity:0}
.tflash.on{animation:tflash .22s ease}
.tflash.big{animation:tflashbig .5s ease}
.tflash.redon{animation:tflashred .35s ease}
@keyframes tflash{0%{opacity:.5;background:#fff}100%{opacity:0;background:#fff}}
@keyframes tflashbig{0%{opacity:.85;background:linear-gradient(120deg,#f472b6,#38bdf8,#4ade80,#facc15)}100%{opacity:0}}
@keyframes tflashred{0%{opacity:.6;background:#e5484d}100%{opacity:0;background:#e5484d}}
html[data-motion="reduced"] .tflash{animation:none}
.tovt{font-family:var(--font-display);font-size:1.1875rem;font-weight:var(--display-w);margin-bottom:6px}
.tovs{font-size:0.8125rem;color:var(--muted)}
.tovbtns{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.tbtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px auto 0;max-width:520px}
.tkeyhint{font-size:0.6875rem;line-height:1.55;color:var(--muted);text-align:center;margin-top:8px}
.tcfg{background:var(--panel);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--shadow);
  padding:16px;margin-top:14px;max-width:520px}
.tcfg[hidden]{display:none}
.tcfghd{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.tkeys{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:6px 14px;margin-bottom:14px}
.tkeyrow{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:0.8125rem}
.tkeybtn{padding:4px 10px;font-size:0.75rem;min-width:58px}
.tsliders{display:flex;flex-direction:column;gap:12px}
.tslider{display:flex;flex-direction:column;gap:4px;font-size:0.8125rem}
.tslider input[type=range]{width:100%;accent-color:var(--accent)}
/* shared game leaderboard panel */
.glb{margin-top:18px;max-width:420px}
.glbhd{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.glbhd h3{margin:0;font-family:var(--font-display);font-size:0.9375rem;font-weight:var(--display-w);
  letter-spacing:var(--display-ls);text-transform:var(--display-tt)}
.glbtabs{display:flex;gap:6px}
.glbtab{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:4px 12px;
  font-size:0.75rem;cursor:pointer;color:var(--text)}
.glbtab:hover{border-color:var(--accent)}
.glbtab.cur{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.glbtab.glbwipe{border-color:#e5484d;color:#e5484d}
.glbtab.glbwipe:hover{background:color-mix(in srgb,#e5484d 14%,var(--panel));border-color:#e5484d}
/* minesweeper */
.minesbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.minesinfo{display:flex;gap:14px;font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-weight:700;font-size:0.9375rem;color:var(--text)}
.minesinfo span{display:inline-flex;align-items:center;gap:4px}
.minesfoot{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
#mines{display:grid;gap:3px;width:min(360px,100%)}
#mines button{
  aspect-ratio:1;padding:0;font-family:var(--font-num);font-weight:800;font-size:0.9375rem;line-height:1;
  background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:4px;cursor:pointer;
  box-shadow:inset 1.5px 1.5px 0 color-mix(in srgb,#fff 16%,transparent),
             inset -2px -2px 0 color-mix(in srgb,#000 16%,transparent);
  transition:background .08s,transform .04s;
}
#mines button:hover:not(.open){background:color-mix(in srgb,var(--accent) 16%,var(--panel-2))}
#mines button:active:not(.open){transform:scale(.94)}
#mines button.open{background:color-mix(in srgb,var(--text) 8%,var(--panel));box-shadow:none;cursor:default;
  border-color:color-mix(in srgb,var(--line) 55%,transparent)}
#mines button.flag{background:color-mix(in srgb,#f0a500 26%,var(--panel-2))}
#mines button.boom{background:#e5484d;color:#fff;box-shadow:none;border-color:#e5484d}
#mines button.wrong{background:color-mix(in srgb,#e5484d 32%,var(--panel));box-shadow:none}
#mines button.n1{color:#3b82f6}#mines button.n2{color:#16a34a}#mines button.n3{color:#ef4444}
#mines button.n4{color:#8b5cf6}#mines button.n5{color:#d97706}#mines button.n6{color:#0891b2}
#mines button.n7{color:#db2777}#mines button.n8{color:#94a3b8}
/* difficulty pills (shared) + multiple-choice option buttons */
.diffbar{display:flex;gap:6px;flex-wrap:wrap}
.diffpill{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:0.78125rem;cursor:pointer;color:var(--text)}
.diffpill:hover{border-color:var(--accent)}
.diffpill[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* multiple-choice options (Classroom, Odd One Out) */
.mcq{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.mcq.one{grid-template-columns:1fr}
.mcopt{text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 15px;color:var(--text);cursor:pointer;font-size:0.9375rem;transition:border-color .1s,background .1s;
  display:flex;flex-direction:column;gap:2px}
.mcopt:hover:not(:disabled){border-color:var(--accent)}
.mcopt em{font-style:normal;font-size:0.75rem;opacity:.65}
.mcopt.right{border-color:#2f9e44;background:color-mix(in srgb,#2f9e44 16%,var(--panel))}
.mcopt.wrong{border-color:#e5484d;background:color-mix(in srgb,#e5484d 14%,var(--panel))}
.mcopt:disabled{cursor:default}
.crclue{font-size:0.8125rem;opacity:.75;margin-top:4px}
.crtimer{height:6px;border-radius:999px;background:var(--panel-2);overflow:hidden;margin-bottom:14px}
.crtimer>i{display:block;height:100%;background:var(--accent);transition:width .1s linear}
.crlives{letter-spacing:2px;font-size:0.9375rem}
/* memory (match pairs) */
#memgrid{display:grid;gap:8px;width:min(420px,100%);margin:0 auto}
.memcard{aspect-ratio:1;border:1px solid var(--line);border-radius:calc(var(--card-radius)*.5);
  background:var(--panel-2);cursor:pointer;font-size:1.625rem;display:flex;align-items:center;justify-content:center;
  transition:transform .12s,background .12s;user-select:none;
  box-shadow:inset 1.5px 1.5px 0 color-mix(in srgb,#fff 14%,transparent),
             inset -2px -2px 0 color-mix(in srgb,#000 14%,transparent)}
.memcard:hover:not(.up):not(.done){transform:translateY(-2px)}
.memcard.up{background:var(--panel);box-shadow:none}
.memcard.done{background:color-mix(in srgb,#2f9e44 18%,var(--panel));border-color:#2f9e44;
  box-shadow:none;cursor:default}
.memcard .face{opacity:0;transform:scale(.4);transition:opacity .1s,transform .12s}
.memcard.up .face,.memcard.done .face{opacity:1;transform:none}
html[data-motion="reduced"] .memcard,html[data-motion="reduced"] .memcard .face{transition:none}
/* typing */
#typetext{
  font-size:1.0625rem;line-height:1.7;margin-bottom:12px;
  font-family:var(--font-num);word-spacing:.1em;
}
#typetext b{color:var(--muted);font-weight:400}
#typetext u{text-decoration:none;background:color-mix(in srgb,var(--accent) 26%,transparent);border-radius:3px}
#typetext i{color:#e5484d;font-style:normal;text-decoration:underline wavy}
#typein{
  width:100%;padding:11px 13px;border:var(--card-border);border-radius:var(--radius);
  background:var(--panel-2);color:var(--text);outline:none;
}
/* reaction */
#react{
  height:190px;border-radius:var(--card-radius);display:flex;align-items:center;
  justify-content:center;cursor:pointer;font-weight:700;font-size:1.0625rem;
  border:var(--card-border);background:var(--panel-2);color:var(--text);text-align:center;padding:16px;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
#react.wait{background:#c2571f;color:#fff}
#react.go{background:#2f9e44;color:#fff}
/* guess who */
.gwtop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.gwdiffs{display:flex;gap:6px;flex-wrap:wrap}
.gwdiff{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:0.78125rem;cursor:pointer;color:var(--text)}
.gwdiff[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.gwtop .gwyou{margin:0 0 0 auto}
.gwhints{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.gwhint{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 13px;font-size:0.875rem}
.gwhint.fresh{animation:hintIn .4s cubic-bezier(.2,.7,.2,1)}
.gwhint.win{border-color:#2f9e44;background:color-mix(in srgb,#2f9e44 14%,var(--panel))}
.gwhint.lose{border-color:#e5484d;background:color-mix(in srgb,#e5484d 12%,var(--panel))}
@keyframes hintIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.gwrow{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
#gwin{flex:1;min-width:160px;padding:11px 13px;border:var(--card-border);border-radius:var(--radius);
  background:var(--panel-2);color:var(--text);outline:none}
#gwin:focus{border-color:var(--accent)}
.gwlog{display:flex;flex-direction:column;gap:5px}
.gwguessrow{padding:6px 11px;border-radius:var(--radius);font-size:0.84375rem;font-weight:600;
  animation:hintIn .25s ease}
.gwguessrow.miss{background:color-mix(in srgb,#e5484d 12%,var(--panel));color:var(--text)}
.gwguessrow.win{background:color-mix(in srgb,#2f9e44 16%,var(--panel));color:var(--text)}
html[data-motion="reduced"] .gwhint.fresh,html[data-motion="reduced"] .gwguessrow{animation:none}
/* classroom */
#crin{flex:1;min-width:160px;padding:11px 13px;border:var(--card-border);border-radius:var(--radius);
  background:var(--panel-2);color:var(--text);outline:none}
#crin:focus{border-color:var(--accent)}
.crq{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:14px;text-align:center}
.crprog{font-size:0.75rem;color:var(--muted,var(--text));opacity:.7;margin-bottom:6px}
.crsub{font-size:1.375rem;font-weight:700}
.crmeta{font-size:0.8125rem;opacity:.75;margin-top:4px}
/* six degrees */
.chhead{margin-bottom:10px}
.chtarget{font-size:1rem}
.chyr{font-size:0.75rem;opacity:.7}
.chmeta{font-size:0.78125rem;opacity:.75;margin-top:3px}
.chtrail{font-size:0.8125rem;opacity:.85;margin-bottom:12px;word-break:break-word}
.chopts{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.chopt{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 14px;color:var(--text);cursor:pointer;font-size:0.875rem}
.chopt:hover{border-color:var(--accent)}
.chopt em{font-style:normal;font-size:0.75rem;opacity:.65;white-space:nowrap}
/* six degrees: pre-start greyed-out board + tile flip-in on Start */
.chdim{opacity:.45;filter:grayscale(.6);pointer-events:none}
.chopt.chface .cnm,.chopt.chface em{visibility:hidden}
.chopt.chflip{animation:chflip .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes chflip{from{transform:rotateX(90deg);opacity:0}to{transform:none;opacity:1}}
.chstartwrap{display:flex;justify-content:center;margin:6px 0 4px}
.chblank{opacity:.55;letter-spacing:2px}
html[data-motion="reduced"] .chopt.chflip{animation:none}
/* volume popover on the sound button */
.volwrap{position:relative;display:inline-flex}
.volpop{position:absolute;top:calc(100% + 6px);right:0;z-index:30;background:var(--panel);
  border:var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow-hi);padding:9px 12px}
.volpop[hidden]{display:none}
.volpop input[type=range]{width:120px;accent-color:var(--accent);vertical-align:middle}
/* leaderboard summary strip beneath the game grid */
.lbsum{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.lbsumhd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.lbsumhd h2{margin:0;font-family:var(--font-display);font-size:1.0625rem;font-weight:var(--display-w);
  letter-spacing:var(--display-ls);text-transform:var(--display-tt)}
.lbsumhd a{color:var(--accent);font-weight:700;text-decoration:none;font-size:0.8125rem;cursor:pointer}
.lbsumhd a:hover{text-decoration:underline}
.lbsumgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.lbsumcard{background:var(--panel);border:var(--card-border);border-radius:var(--card-radius);
  box-shadow:var(--shadow);padding:12px 14px;cursor:pointer;transition:transform .14s,box-shadow .14s}
.lbsumcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-hi)}
.lbsumcard .g{font-size:0.71875rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.lbsumcard .lead{display:flex;align-items:baseline;gap:8px;font-size:0.875rem}
.lbsumcard .lead .who{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbsumcard .lead .val{margin-left:auto;font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700}
.lbsumcard .empty{font-size:0.8125rem;color:var(--muted)}
html[data-motion="reduced"] .lbsumcard{transition:none}
/* admin panel */
.adminrow{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:var(--radius);font-size:0.875rem}
.adminrow:nth-child(even){background:var(--panel-2)}
.adminrow .rk{width:24px;color:var(--muted);font-family:var(--font-num)}
.adminrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adminrow input.sc{width:82px;padding:5px 8px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);color:var(--text);font-family:var(--font-num);text-align:right}
.adminrow .del{color:#e5484d;cursor:pointer;border:1px solid var(--line);border-radius:var(--radius);
  padding:4px 9px;background:var(--panel);font-size:0.75rem}
.adminrow .del:hover{border-color:#e5484d}
.adminnote{font-size:0.78125rem;color:var(--muted);margin:10px 0}
.userrow .ue{flex:1.4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--muted);font-size:0.78125rem;font-family:var(--font-num)}
.userrow .ul{width:92px;text-align:right;color:var(--muted);font-size:0.78125rem}
.userrow .uc{width:132px;text-align:right;color:var(--muted);font-size:0.78125rem}
/* how far through the first-run tutorials someone got */
.userrow .ob{width:104px;display:flex;align-items:center;gap:7px;justify-content:flex-end;flex:none}
.userrow .ob b{font-size:0.71875rem;font-weight:400;color:var(--muted);font-family:var(--font-num)}
.obbar{width:46px;height:5px;border-radius:3px;background:var(--line);overflow:hidden;flex:none}
.obbar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.obbar.done i{background:#2f9e44}
@media (max-width:640px){ .userrow .ue,.userrow .uc{display:none} }
/* category headers in the game grid (span the full width of the grid) */
.cathd{grid-column:1/-1;font-family:var(--font-display);font-size:0.8125rem;font-weight:var(--display-w);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:8px 2px -2px;opacity:0;
  animation:cardIn .4s ease forwards}
.cathd:first-child{margin-top:0}
html[data-motion="reduced"] .cathd{animation:none;opacity:1}
/* flashcards */
.fcdecks{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.fcdeck{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 13px}
.fcdeck .nm{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcdeck .ct{font-size:0.75rem;color:var(--muted);font-family:var(--font-num);white-space:nowrap}
.fcrow{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.fcrow input,.fcrow textarea{flex:1;min-width:150px;padding:9px 11px;border:var(--card-border);
  border-radius:var(--radius);background:var(--panel-2);color:var(--text);outline:none;font:inherit;resize:vertical}
.fcrow input:focus,.fcrow textarea:focus{border-color:var(--accent)}
.fcface{min-height:190px;border:1px solid var(--line);border-radius:var(--card-radius);background:var(--panel-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:24px;cursor:pointer;user-select:none;margin:6px 0}
.fcface .lbl{font-size:0.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.fcface .txt{font-size:1.25rem;font-weight:600;white-space:pre-wrap;word-break:break-word}
.fcface.flip{animation:fcflip .28s ease}
@keyframes fcflip{0%{transform:rotateX(88deg);opacity:0}100%{transform:none;opacity:1}}
html[data-motion="reduced"] .fcface.flip{animation:none}
.fcbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.fcprog{text-align:center;font-size:0.8125rem;color:var(--muted);margin-top:8px}
.fccardrow{display:flex;gap:8px;align-items:flex-start;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:9px 11px;margin-bottom:6px}
.fccardrow .qa{flex:1;min-width:0;font-size:0.84375rem}
.fccardrow .qa b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fccardrow .qa em{color:var(--muted);font-style:normal;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fccardrow .del{color:#e5484d;cursor:pointer;border:1px solid var(--line);border-radius:var(--radius);
  padding:4px 9px;background:var(--panel);font-size:0.75rem;flex:none}
/* revision quiz games */
.rvq{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px}
.rvprog{font-size:0.75rem;color:var(--muted);margin-bottom:8px}
.rvprompt{font-size:1.0625rem;font-weight:600;line-height:1.5}
.rvcode{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;
  font-family:var(--font-num);font-size:0.875rem;white-space:pre;overflow-x:auto;margin:10px 0 0;line-height:1.5;font-weight:400}
.rvclue{font-size:0.8125rem;color:var(--muted);margin-top:8px;font-weight:400}
.rvfb{margin:2px 0 0;font-size:0.875rem;font-weight:700;min-height:20px}
.rvfb.good{color:#2f9e44}.rvfb.bad{color:#e5484d}
.rvnote{font-weight:400;color:var(--muted);font-size:0.8125rem;margin-top:6px}
#rvin{flex:1;min-width:160px;padding:11px 13px;border:var(--card-border);border-radius:var(--radius);
  background:var(--panel-2);color:var(--text);outline:none}
#rvin:focus{border-color:var(--accent)}
.rvcodeopts{grid-template-columns:1fr}
.rvcodeopts .mcopt{font-family:var(--font-num);white-space:pre-wrap;font-size:0.8125rem;text-align:left}
.rvprompt code{font-family:var(--font-num);background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:.92em}
.rvdiagram{display:block;margin:12px auto 0;max-width:100%}

/* ── progress + streak strip ── */
.rvstatus{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.rvbolt{display:inline-flex;align-items:center;gap:5px;flex:none;color:var(--muted);
  font-family:var(--font-num);font-size:0.8125rem;font-weight:700;line-height:1}
.rvbolt svg{width:19px;height:19px;overflow:visible}
.rvbolt .bg{fill:var(--line)}
.rvbolt .fill{fill:#f0a500;clip-path:inset(var(--drain,100%) 0 0 0);transition:clip-path .38s cubic-bezier(.2,.8,.2,1)}
.rvbolt.full .fill{fill:#ffb703;filter:drop-shadow(0 0 5px rgba(240,165,0,.75));animation:boltpulse 1.3s ease-in-out infinite}
.rvbolt.full b{color:#f0a500}
@keyframes boltpulse{0%,100%{opacity:1}50%{opacity:.62}}
.rvbolt.zap{animation:boltzap .55s ease}
.rvbolt.zap .fill{fill:#e5484d}
@keyframes boltzap{0%{transform:translateX(0)}15%{transform:translateX(-3px) rotate(-7deg)}
  35%{transform:translateX(3px) rotate(6deg)}55%{transform:translateX(-2px) rotate(-4deg)}
  75%{transform:translateX(1px)}100%{transform:translateX(0)}}
.rvbar{flex:1;min-width:0;height:7px;border-radius:999px;background:var(--line);
  display:flex;overflow:hidden}
.rvbar i{display:block;height:100%;width:0;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.rvbar i.g{background:#2f9e44}
.rvbar i.y{background:#f0a500}
.rvbar i.r{background:#e5484d}
.rvlegend{flex:none;display:flex;align-items:center;gap:3px;font-size:0.75rem;color:var(--muted);
  font-family:var(--font-num)}
.rvlegend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:8px}
.rvlegend i:first-child{margin-left:0}
.rvlegend i.g{background:#2f9e44}
.rvlegend i.y{background:#f0a500}
.rvlegend i.r{background:#e5484d}
.rvlegend i.n{background:var(--line)}
.rvgoaln{cursor:pointer;border-bottom:1px dashed var(--muted);font-weight:700}
.rvgoaln:hover{color:var(--accent);border-bottom-color:var(--accent)}
.rvgoalin{width:66px;font:inherit;font-size:0.75rem;padding:1px 5px;border:1px solid var(--accent);
  border-radius:6px;background:var(--panel);color:var(--text)}
.rvnudge{font-size:0.78125rem;color:var(--muted);align-self:center;margin-left:2px}
@media (max-width:560px){ .rvlegend{display:none} }

.rvtyped textarea{
  width:100%;box-sizing:border-box;min-height:260px;resize:vertical;margin-bottom:6px;
  font-family:var(--font-num);font-size:0.84375rem;line-height:1.55;tab-size:4;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel-2);color:var(--text);white-space:pre;overflow-wrap:normal;overflow-x:auto;
}
.rvtyped textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.rvsyn{min-height:18px;margin-bottom:8px;font-size:0.78125rem;font-family:var(--font-num);color:var(--muted)}
.rvsyn.good{color:#2f9e44}
.rvsyn.bad{color:#e5484d}
@media (min-width:900px){ .rvtyped textarea{min-height:320px} }
.rvwhy{font-weight:400;font-size:0.8125rem;margin-top:5px;font-family:var(--font-num);color:var(--muted)}
.rvans{
  font-family:var(--font-num);font-size:0.8125rem;line-height:1.55;white-space:pre;overflow-x:auto;
  margin:8px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel-2);color:var(--text);font-weight:400;
}

/* ── practice / test switch ── */
.rvmode{display:inline-flex;gap:3px;padding:3px;margin:0 0 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel-2)}
.rvmode button{border:0;background:none;color:var(--muted);font:inherit;font-size:0.8125rem;font-weight:700;
  padding:6px 16px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.rvmode button:hover{color:var(--text)}
.rvmode button[aria-pressed="true"]{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.rvdot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
.rvlink{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}

/* ── progress through a test: one segment per question ── */
.rvtest{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.rvtbar{flex:1;min-width:0;display:flex;gap:2px;height:7px}
.rvtbar i{flex:1;min-width:0;border-radius:2px;background:var(--line);transition:background .25s}
/* answered and skipped look different, but right and wrong look the same until the report */
.rvtbar i.a{background:color-mix(in srgb,var(--text) 55%,transparent)}
.rvtbar i.s{background:color-mix(in srgb,var(--muted) 30%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--muted) 60%,transparent)}
.mcopt.picked{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.rvtbar i.cur{background:var(--accent)}
.rvend{flex:none;background:none;border:0;padding:2px 4px;font:inherit;font-size:0.78125rem;
  color:var(--muted);cursor:pointer}
.rvend:hover{color:#e5484d}

/* ── test report ── */
.rvrep{display:flex;flex-direction:column;gap:20px}
.rvhero{display:flex;align-items:center;gap:18px;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel-2)}
.rvring{flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--ring,#2f9e44) calc(var(--p,0) * 1%), var(--line) 0)}
.rvring b{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);
  font-family:var(--font-num);font-size:1.1875rem;font-variant-numeric:tabular-nums}
.rvherot{min-width:0}
.rvhero h3{margin:0 0 4px;font-family:var(--font-display);font-size:1.0625rem}
.rvhero p{margin:2px 0 0;font-size:0.8125rem;color:var(--muted)}
.rvsec h4{margin:0 0 9px;font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.rvsmall{margin:8px 0 0;font-size:0.8125rem;color:var(--muted);line-height:1.55}
.rvsmall b{color:var(--text)}
.rvmods{display:flex;flex-direction:column;gap:8px}
.rvmodrow{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr) 3.2rem;align-items:center;gap:12px;font-size:0.8125rem}
.rvmodrow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvmodrow .bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.rvmodrow .bar i{display:block;height:100%;border-radius:999px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.rvmodrow .n{text-align:right;font-family:var(--font-num);font-size:0.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.rvlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rvlist li{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel-2);font-size:0.84375rem}
.rvlist .nm{flex:1;min-width:0;display:flex;flex-direction:column}
.rvlist .sub{font-size:0.71875rem;color:var(--muted)}
.rvtag{flex:none;font-size:0.6875rem;font-weight:700;padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.rvtag.gap{background:color-mix(in srgb,#e5484d 15%,transparent);color:#e5484d}
.rvtag.shaky{background:color-mix(in srgb,#f0a500 18%,transparent);color:#c98a00}
.rvtag.miss{border:1px solid var(--line);color:var(--muted)}
.rvtag.good{background:color-mix(in srgb,#2f9e44 15%,transparent);color:#2f9e44}
.btn.rvpract{flex:none;padding:5px 11px;font-size:0.75rem}
.rvmist{margin:0;padding-left:18px;font-size:0.84375rem;line-height:1.55}
.rvmist li{margin-bottom:5px}
.rvtabs{margin-bottom:10px}
.rvrev{display:flex;flex-direction:column;gap:10px}
.rvcard{padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2)}
.rvcard .hd{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:0.71875rem;color:var(--muted)}
.rvcard .hd .res{margin-left:auto;font-weight:700}
.rvcard .res.r{color:#e5484d}
.rvcard .res.g{color:#2f9e44}
.rvcard .qq{font-size:0.9375rem;font-weight:600;line-height:1.5}
.rvcard .qq code{font-family:var(--font-num);background:var(--panel);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px;font-size:.92em}
.rvcard .ch{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rvcard .ch span{padding:4px 10px;border:1px solid var(--line);border-radius:7px;background:var(--panel);font-size:0.78125rem}
.rvcard .ch.code span{font-family:var(--font-num);white-space:pre-wrap}
.rvcard .ch span.ans{border-color:#2f9e44;color:#2f9e44;font-weight:700}
.rvcard .ch span.pick{border-color:#e5484d;color:#e5484d;text-decoration:line-through}
.rvcard .ya{margin-top:9px;font-size:0.8125rem;color:var(--muted)}
.rvcard .ya b.ok{color:#2f9e44}
.rvcard .ya b.no{color:#e5484d}
@media (max-width:560px){
  .rvhero{flex-direction:column;align-items:flex-start}
  .rvmodrow{grid-template-columns:minmax(0,1fr) 3rem}
  .rvmodrow .bar{grid-column:1 / -1;grid-row:2}
  .rvlist li{flex-wrap:wrap}
}
html[data-motion="reduced"] .rvtbar i,html[data-motion="reduced"] .rvmodrow .bar i{transition:none}

/* ── picture options (Lewis diagrams) ── */
.rvlewis{display:block;margin:12px auto 4px;max-width:100%;height:auto}
.rvpicopts .mcopt{display:flex;align-items:center;justify-content:center;min-height:118px;padding:10px;text-align:center}
.rvpicopts .mcopt .rvlewis{margin:0;max-height:150px;width:auto}
.rvcard .ch.pics span{display:flex;align-items:center;justify-content:center;padding:6px;min-width:120px;flex:1 1 40%}
.rvcard .ch.pics span .rvlewis{margin:0;max-height:120px;width:auto}
.rvcard .ch.pics span.pick{text-decoration:none}

/* ── test score history ── */
.rvintrohist{margin-top:18px}
.rvhistplot{position:relative;overflow:hidden}
.rvhist svg{display:block;max-width:none}
.rvhist .g{stroke:var(--line);stroke-width:1}
.rvhist .ax{fill:var(--muted);font-size:0.6875rem;font-family:var(--font-num)}
.rvhist .v{fill:var(--text);font-size:0.75rem;font-weight:700;font-family:var(--font-num)}
.rvhist .l{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rvhist .w{fill:var(--accent);opacity:.1}
.rvhist .d{fill:var(--accent);stroke:var(--panel);stroke-width:2}
.rvhist .d.on{r:5.5}
.rvhist .x{stroke:var(--muted);stroke-width:1;opacity:.6}
.rvhist .h{fill:transparent;cursor:default;outline:none}
.rvtip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:5px 9px;box-shadow:0 4px 14px rgba(0,0,0,.14);white-space:nowrap;display:flex;flex-direction:column;line-height:1.3}
.rvtip b{font-size:0.875rem;font-family:var(--font-num);color:var(--text)}
.rvtip span{font-size:0.71875rem;color:var(--muted)}
.rvhisttab{margin-top:6px;font-size:0.75rem;color:var(--muted)}
.rvhisttab summary{cursor:pointer;width:max-content}
.rvhisttab table{border-collapse:collapse;margin-top:6px;font-family:var(--font-num)}
.rvhisttab th,.rvhisttab td{padding:3px 14px 3px 0;text-align:left;border-bottom:1px solid var(--line)}
.rvhisttab th{font-weight:700;color:var(--text)}

/* ── mechanics diagrams: only what the question needs ── */
.rvmech{max-width:100%;height:auto}
.rvmech .mb{stroke:var(--text);stroke-width:3;stroke-linecap:round}
.rvmech .mp{fill:var(--panel);stroke:var(--text);stroke-width:1.8}
.rvmech .mbox{fill:var(--panel-2);stroke:var(--text);stroke-width:1.4}
.rvmech .mg{fill:none;stroke:var(--text);stroke-width:1.8;stroke-dasharray:5 3}
.rvmech .mr{stroke:var(--text);stroke-width:1.5}
.rvmech .mf{stroke:var(--text);stroke-width:2}
.rvmech .mfh{fill:var(--text)}
.rvmech .me{stroke:var(--accent);stroke-width:2}
.rvmech .meh{fill:var(--accent)}
.rvmech .md{stroke:var(--muted);stroke-width:1}
.rvmech text{font-family:var(--font-ui);fill:var(--text)}
.rvmech .mtd{fill:var(--muted);font-size:.92em}
.rvmech .mte{fill:var(--accent);font-weight:700}
/* moderator: rename someone */
.userrow .was{color:var(--muted);font-size:0.75rem}
.userrow .btn.rename{flex:none;padding:4px 10px;font-size:0.75rem}

/* ═══ phones and touch screens ═══
   Everything below is either only rendered on touch screens (the pads) or sits
   inside a narrow-screen / touch-only query, so desktop layouts don't change. */

/* on-screen controls for Tetris and Snake */
.tpad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px auto 0;max-width:420px}
.tpad button{height:54px;padding:0;font:inherit;font-size:1.25rem;line-height:1;color:var(--text);cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tpad button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tpad .lbl{font-size:0.875rem;font-weight:700}
.tpad .wide{grid-column:span 2}
.dpad{grid-template-columns:repeat(3,64px);justify-content:center}
.dpad [data-act=u]{grid-column:2}
.dpad [data-act=l]{grid-column:1}

@media (hover:none) and (pointer:coarse){
  /* swiping these boards plays the game instead of scrolling the page */
  #cv,#g2048wrap{touch-action:none}
  #tcan,#mines button,.memcard,#react{touch-action:manipulation}
  #mines button,.memcard{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  /* "Play →" only appears on hover, which a finger never does */
  .gamecard .go{opacity:1;transform:none}
}

@media (max-width:640px){
  /* the name gets its own line rather than being squeezed to nothing */
  .userrow{flex-wrap:wrap;row-gap:6px}
  .userrow .nm{flex:1 1 calc(100% - 40px)}
  .userrow .ob{margin-left:32px;width:auto}
  .userrow .ul{margin-left:auto;width:auto}
}

@media (max-width:560px){
  /* two subjects a row, so they fit on one screen */
  body[data-page="revision"] .gamegrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body[data-page="revision"] .gamecard{min-height:0;padding:14px}
  body[data-page="revision"] .gamecard h2{font-size:1.0625rem}
  body[data-page="revision"] .gamecard p{font-size:0.75rem}

  /* Tetris: Hold | board | Next across the top, stats in a row underneath, so
     the board gets the width instead of the stats column */
  .tgame{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"hold board next" "stats stats stats";gap:8px;align-items:start;scroll-margin-top:10px}
  .tside.tleft{display:contents}
  .tleft>.tpanel{grid-area:hold}
  .tboardwrap{grid-area:board}
  .tside.tright{grid-area:next}
  .tstats{grid-area:stats;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 18px}
  #tcan{width:100%}
  #thold{width:46px} #tnext{width:48px}
  .tmodes{flex-wrap:wrap}
}

@media (max-width:520px){
  /* sentence-length answers read better one to a row */
  .mcq.rvlong{grid-template-columns:1fr}
}

@media (max-width:480px){
  .stage{padding:14px 12px}
  #mines{gap:2px}
  #mines button{font-size:0.8125rem;border-radius:3px}
}

/* moderator: site-wide switches */
.adminrow.setrow{align-items:flex-start;gap:12px;padding:11px}
.setrow .nm{display:flex;flex-direction:column;gap:3px;white-space:normal;overflow:visible}
.setrow em{font-style:normal;color:var(--muted);font-size:0.78125rem;line-height:1.45}
.setrow .btn{flex:none;min-width:62px;justify-content:center}

/* ── revision: reset one subtopic's progress ── */
.rvfoot{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.rvresetlink{font-size:0.78125rem;color:var(--muted)}
.rvresetlink:hover{color:#e5484d}
/* header and buttons stay put; only the middle scrolls, even on a short screen */
.rvresetdlg[open]{display:flex;flex-direction:column;max-height:calc(100vh - 32px);overflow:hidden}
.rvresetdlg .dlg-b{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}
.rvrintro{margin:0 0 12px}
.rvrmod{margin:16px 0 6px;font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.rvrmod:first-of-type{margin-top:4px}
.rvrrow{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel-2);margin-bottom:6px}
.rvrname{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rvrname b{font-size:0.875rem}
.rvrname span{font-size:0.75rem;color:var(--muted)}
.rvrrow .btn{flex:none;padding:5px 12px;font-size:0.78125rem}
.rvrrow .btn:disabled{opacity:.45;cursor:default}
.rvrlist{margin:0 0 12px;padding-left:20px;font-size:0.875rem;line-height:1.55}
.rvrlist li{margin-bottom:6px}
.rvrdone{margin:0 0 12px;padding:9px 12px;border-radius:var(--radius);font-size:0.84375rem;
  background:color-mix(in srgb,#2f9e44 14%,var(--panel));border:1px solid color-mix(in srgb,#2f9e44 45%,transparent)}
.btn.rvdanger{background:#e5484d;border-color:#e5484d;color:#fff}
.btn.rvdanger:hover{background:#d13d42;border-color:#d13d42}

/* revision: Year 11 / Year 12 switch above the subjects */
.rvyear{margin-bottom:16px}
.rvyear .diffpill{padding:7px 18px;font-size:0.875rem;font-weight:700}

/* ══ mock HSC ══════════════════════════════════════════════════════════════
   One long scrolling paper with a sticky bar, then the same paper again with
   marking criteria. Deliberately plain: it should read like a question paper,
   not like the rest of the games. */
.mkpick{display:grid;gap:12px;margin-bottom:22px}
.mkcard{display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px 16px;border:1px solid var(--card-border);
  border-radius:var(--card-radius);background:var(--panel);cursor:pointer;transition:border-color .15s,transform .15s}
.mkcard:hover{border-color:var(--accent);transform:translateY(-1px)}
.mkcn{font-weight:700;font-size:1.0625rem}
.mkcm{font-size:0.8125rem;color:var(--muted)}
.mkcd{font-size:0.78125rem;color:var(--muted)}
.mkresume{border:1px solid var(--accent);border-radius:var(--card-radius);padding:12px 14px;margin-bottom:18px;font-size:0.875rem}
.mkrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.mkh{margin:26px 0 6px;font-size:1.0625rem;display:flex;align-items:baseline;gap:10px}
.mkmk{font-size:0.75rem;color:var(--muted);font-weight:600}
.mktab{width:100%;border-collapse:collapse;font-size:0.875rem;margin:8px 0 4px}
.mktab th,.mktab td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.mktab th{font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mkintro h3{margin:0 0 4px}
.mkspec{margin:0 0 10px;font-size:0.9375rem}
.mklist{margin:0 0 14px;padding-left:20px;font-size:0.875rem;line-height:1.6}
.mkmode{display:flex;gap:8px;margin-bottom:6px}
.mkm{padding:7px 16px;border:1px solid var(--card-border);border-radius:999px;background:var(--panel);cursor:pointer;font-size:0.875rem;font-weight:600}
.mkm.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.mkbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 2px;margin-bottom:10px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.mkclock{font-family:var(--font-num,inherit);font-variant-numeric:tabular-nums;font-weight:700;font-size:1.125rem;min-width:84px}
.mkclock.mkwarn{color:#e5484d}
.mkclock.mkfree{font-size:0.875rem;font-weight:600;color:var(--muted)}
.mkbarn{flex:1;font-size:0.8125rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkbtn{padding:5px 12px;font-size:0.8125rem}
.mknote{font-size:0.875rem;color:var(--muted);margin:0 0 12px}
.mkreading{opacity:.92}
.mkgroup{margin:18px 0 0;padding-top:8px;border-top:1px solid var(--line)}
.mkgroup h4{margin:0 0 6px;font-size:0.9375rem}
.mkq{padding:10px 0 12px}
.mkqh{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.mkqh b{min-width:22px}
.mkqt{font-size:0.9375rem;line-height:1.6}
.mkopts{display:grid;gap:6px;margin-top:8px}
.mkopt{display:flex;gap:9px;align-items:flex-start;font-size:0.9375rem;cursor:pointer;padding:4px 2px}
.mkopt input{margin-top:4px}
.mkta{width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--card-border);border-radius:var(--radius,8px);
  background:var(--panel-2);color:inherit;font:inherit;font-size:0.9375rem;resize:vertical}
.mkq.mkright{border-left:3px solid #2e9e5b;padding-left:10px}
.mkq.mkwrong{border-left:3px solid #e5484d;padding-left:10px}
.mkq.mkskip{border-left:3px solid var(--line);padding-left:10px}
.mkans{font-size:0.875rem;margin-top:6px}
.mkyours,.mkmodel,.mkcrit{margin-top:10px}
.mkylab{font-size:0.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:3px}
.mkpre{margin:0;padding:8px 10px;background:var(--panel-2);border-radius:var(--radius,8px);font-size:0.875rem;
  white-space:pre-wrap;word-break:break-word}
.mkmodel{font-size:0.875rem;line-height:1.6}
.mkc{display:flex;gap:9px;align-items:flex-start;font-size:0.875rem;padding:4px 2px;cursor:pointer}
.mkc input{margin-top:3px}
.mkrepbig{text-align:center;padding:18px 0 6px}
.mkbig{font-size:3rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.mkbig span{font-size:1.25rem;color:var(--muted);font-weight:600}
.mkadvice{font-size:0.9375rem;margin:12px 0 0}
@media (max-width:560px){
  .mkbar{gap:8px}
  .mkclock{font-size:1rem;min-width:70px}
  .mkbarn{display:none}
  .mkbig{font-size:2.5rem}
}

/* ── English: quoted extracts ── */
.rvquote{margin:10px 0 12px;padding:10px 14px;border-left:3px solid var(--accent);background:var(--panel-2);
  border-radius:0 var(--radius,8px) var(--radius,8px) 0;font-size:0.9375rem;line-height:1.7}
.rvcite{display:block;margin-top:7px;font-size:0.78125rem;color:var(--muted);font-style:normal}

/* ══ study panel: HSC countdown, today's plan, focus mode (study.js) ═════════ */
.studypanel{display:grid;grid-template-columns:minmax(150px,.8fr) 2fr 1.1fr;gap:14px;margin:0 0 18px;
  padding:14px 16px;border:1px solid var(--card-border);border-radius:var(--card-radius);background:var(--panel)}
.studypanel h3{margin:0 0 8px;font-size:0.9375rem}
.sp-cd{display:flex;flex-direction:column;justify-content:center;gap:3px;padding-right:12px;border-right:1px solid var(--line)}
.cdbig{font-size:2.6rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.cdlbl{font-weight:700;font-size:0.9375rem}
.cdsub{font-size:0.78125rem;color:var(--muted);line-height:1.45}
.cdnext{font-size:0.8125rem;margin-top:4px}
.planlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.planitem{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px;text-align:left;
  padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius,8px);background:var(--panel-2);cursor:pointer;
  font:inherit;color:inherit}
.planitem:hover{border-color:var(--accent)}
.plansubj{font-size:0.75rem;font-weight:700;color:var(--muted);white-space:nowrap}
.plantopic{font-size:0.875rem;font-weight:600}
.planwhy{font-size:0.71875rem;white-space:nowrap;color:var(--muted)}
.planwhy.pw-weak{color:#e5484d}
.planwhy.pw-due{color:var(--accent)}
.planempty,.plandone{font-size:0.8125rem;color:var(--muted);margin:6px 0 0}
.sp-focus{display:flex;flex-direction:column;gap:8px;padding-left:12px;border-left:1px solid var(--line)}
.focusstart{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.focusstart span{font-weight:700;font-size:0.875rem;width:100%}
.focusstart .btn{padding:5px 10px;font-size:0.8125rem}
.focusstate{font-size:0.875rem}
.sp-hint{font-size:0.75rem;color:var(--muted);margin:0;line-height:1.45}
/* the hold-to-end button fills from the left while it is held */
.focushold{position:relative;overflow:hidden;--hold:0}
.focushold::before{content:"";position:absolute;inset:0;background:var(--accent);opacity:.22;
  transform:scaleX(var(--hold));transform-origin:left;pointer-events:none}
.focuslock{max-width:460px;margin:40px auto;text-align:center;padding:28px 22px;border:1px solid var(--card-border);
  border-radius:var(--card-radius);background:var(--panel)}
.focuslock h2{margin:6px 0 8px}
.focuslock p{color:var(--muted);margin:0 0 16px}
.focusico{font-size:2.4rem}
.focusrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media (max-width:760px){
  .studypanel{grid-template-columns:1fr}
  .sp-cd{border-right:0;padding-right:0;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .sp-focus{border-left:0;padding-left:0;padding-top:10px;border-top:1px solid var(--line)}
}

/* screen-reader announcer (games.js say()): read aloud, never seen */
.srsay{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0}