/* ──────────────────────────────────────────────────────────────────────
 * lab.css — the Chess Lab (/lab). Hand-written and scoped to .lab, because
 * the Tailwind build is purged and would drop classes it has never seen.
 *
 * House rules kept here:
 *   · light public page · saffron leads, cosmic supports, emerald = right,
 *     rose = wrong, gold = earned
 *   · one page measure, 72rem, shared by every band
 *   · body type never below 15px (numbers inside a board square may be smaller)
 *   · nothing may push the page sideways: grid children get min-width:0
 *   · media queries come AFTER the base rules they change
 * ──────────────────────────────────────────────────────────────────── */
.lab{--ink:#171a25;--ink2:#3d4152;--mute:#5d6275;--line:#e8e2d6;--cream:#fbf8f1;--paper:#fff;
  --saf:#f15c0a;--saf-d:#c24806;--saf-l:#fff1e3;--cos:#4f46e5;--cos-l:#eeedff;--em:#059669;--em-l:#e3f6ee;
  --rose:#e11d48;--rose-l:#ffe8ec;--gold:#c8a227;--gold-l:#fbf3d6;--sq-l:#f4ead7;--sq-d:#d9b88c;
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--cream);
  font-size:16px;line-height:1.6}
.lab *{box-sizing:border-box}
.lab a{color:var(--cos)}
.lab-wrap{max-width:72rem;margin:0 auto;padding:0 18px}
.lab-band{padding:38px 0}
.lab-band--white{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lab-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--saf-d)}
.lab-eyebrow img{width:26px;height:26px}
.lab h1{font-size:clamp(30px,5vw,50px);line-height:1.08;letter-spacing:-.025em;font-weight:800;margin:10px 0 12px}
.lab h2{font-size:clamp(23px,3vw,31px);line-height:1.18;letter-spacing:-.02em;font-weight:800;margin:0 0 6px}
.lab h3{font-size:19px;line-height:1.3;font-weight:800;margin:0}
.lab-lede{font-size:clamp(17px,1.7vw,19px);color:var(--ink2);margin:0;max-width:40rem}
.lab-sub{font-size:16px;color:var(--mute);margin:0 0 20px;max-width:46rem}
.lab-crumb{font-size:15px;color:var(--mute);margin:0 0 10px}
.lab-crumb a{text-decoration:none;font-weight:700}

/* buttons */
.lab-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:13px;
  border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:16px;font-weight:800;cursor:pointer;
  text-decoration:none;transition:transform .12s,box-shadow .12s,border-color .12s}
.lab-btn:hover{border-color:var(--saf);transform:translateY(-1px)}
.lab-btn:disabled{opacity:.55;cursor:default;transform:none}
.lab-btn--go,.lab a.lab-btn--go{background:linear-gradient(135deg,#f97316,var(--saf));border-color:var(--saf);color:#fff;box-shadow:0 10px 22px -12px rgba(241,92,10,.9)}
.lab-btn--go:hover{filter:brightness(1.05)}
.lab-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* hero */
.lab-hero{display:grid;gap:26px;align-items:center}
.lab-hero-art{display:grid;grid-template-columns:repeat(4,1fr);border-radius:20px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 26px 50px -30px rgba(23,26,37,.45);max-width:440px;width:100%;margin:0 auto}
.lab-hero-art div{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px;text-align:center;
  font-size:13px;font-weight:800;line-height:1.15;color:#5a4324;background:var(--sq-l);min-width:0}
.lab-hero-art div:nth-child(8n+2),.lab-hero-art div:nth-child(8n+4),.lab-hero-art div:nth-child(8n+5),.lab-hero-art div:nth-child(8n+7){background:var(--sq-d)}
.lab-hero-art img{width:54%;height:auto}
.lab-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;padding:0;list-style:none;font-size:16px;font-weight:700;color:var(--ink2)}
.lab-facts b{color:var(--saf-d);font-size:20px;margin-right:5px}
.lab-total{margin:14px 0 0;font-size:16px;font-weight:700;color:var(--ink2)}
.lab-star{color:#d9d3c5}.lab-star.on{color:var(--gold)}

/* tiles */
.lab-grid{display:grid;gap:14px;grid-template-columns:1fr}
.lab-tile{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px;
  text-decoration:none;color:var(--ink);min-width:0;transition:transform .14s,box-shadow .14s,border-color .14s}
.lab-tile:hover{transform:translateY(-2px);border-color:var(--saf);box-shadow:0 16px 30px -22px rgba(23,26,37,.5)}
.lab-tile-sq{flex:0 0 62px;width:62px;height:62px;border-radius:14px;background:var(--sq-d);display:flex;align-items:center;justify-content:center}
.lab-tile-sq img{width:46px;height:46px}
.lab-tile-b{min-width:0}
.lab-tile-b strong{display:block;font-size:18px;font-weight:800;line-height:1.25;color:var(--ink)}
.lab-tile-b em{display:block;font-style:normal;font-size:15px;font-weight:800;margin-top:1px}
.lab-tile-b span{display:block;font-size:15.5px;color:var(--ink2);margin-top:5px;line-height:1.45}
.lab-tile-b small{display:block;font-size:15px;color:var(--mute);margin-top:7px}
.lab-tile-prog{display:inline-block;margin-top:7px;font-size:15px;font-weight:800;color:#7a6410;background:var(--gold-l);border-radius:999px;padding:2px 10px}
.lab-room{margin-top:34px}
.lab-room-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-bottom:14px;padding-left:14px;border-left:5px solid var(--tone)}
.lab-room-h p{margin:0;font-size:16px;color:var(--mute)}
.tone-saffron{--tone:var(--saf);--tone-l:var(--saf-l);--tone-d:var(--saf-d)}
.tone-cosmic{--tone:var(--cos);--tone-l:var(--cos-l);--tone-d:#3730a3}
.tone-emerald{--tone:var(--em);--tone-l:var(--em-l);--tone-d:#047857}
.tone-gold{--tone:var(--gold);--tone-l:var(--gold-l);--tone-d:#7a6410}
.tone-rose{--tone:var(--rose);--tone-l:var(--rose-l);--tone-d:#be123c}
.lab-room .lab-tile-sq{background:var(--tone-l);border:1px solid color-mix(in srgb,var(--tone) 30%,transparent)}
.lab-room .lab-tile-b em{color:var(--tone-d)}
.lab-start .lab-tile{border-width:2px;border-color:var(--saf);background:linear-gradient(180deg,#fff,var(--saf-l))}
.lab-start .lab-tile-b em{color:var(--saf-d)}

/* story cards */
.lab-tales{display:grid;gap:14px;grid-template-columns:1fr}
.lab-tale{display:block;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;text-decoration:none;color:var(--ink);min-width:0;
  transition:transform .14s,border-color .14s}
.lab-tale:hover{transform:translateY(-2px);border-color:var(--cos)}
.lab-tale i{display:block;font-style:normal;font-size:15px;font-weight:800;color:var(--cos)}
.lab-tale strong{display:block;font-size:19px;font-weight:800;line-height:1.25;margin:4px 0 6px}
.lab-tale span{display:block;font-size:15.5px;color:var(--ink2);line-height:1.5}
.lab-tale small{display:block;font-size:15px;color:var(--mute);margin-top:9px}

/* schools strip + panels */
.lab-panel{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:24px 20px}
.lab-school{display:grid;gap:20px;align-items:center;background:linear-gradient(135deg,#312e81,#1f2230 55%,#7f2f12);color:#fff;border-radius:24px;padding:28px 22px}
.lab-school h2{color:#fff}
.lab-school p{margin:8px 0 0;font-size:17px;color:#e9e6ff;max-width:38rem}
.lab-school ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.lab-school li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 14px;font-size:16px;font-weight:700}
.lab-steps{display:grid;gap:14px;grid-template-columns:1fr;counter-reset:step;margin:18px 0 0;padding:0;list-style:none}
.lab-steps li{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;counter-increment:step;min-width:0}
.lab-steps li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;
  background:var(--saf);color:#fff;font-weight:800;font-size:18px;margin-bottom:10px}
.lab-steps strong{display:block;font-size:18px}
.lab-steps span{display:block;font-size:16px;color:var(--ink2);margin-top:4px}
.lab-table{width:100%;border-collapse:collapse;margin-top:16px;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.lab-table th,.lab-table td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--line);font-size:16px}
.lab-table th{width:34%;font-weight:800}
.lab-table tr:last-child th,.lab-table tr:last-child td{border-bottom:0}

/* story page */
.lab-story{max-width:44rem;margin:0 auto}
.lab-story .lab-where{font-size:16px;font-weight:700;color:var(--mute);margin:0 0 18px}
.lab-story p{font-size:18.5px;line-height:1.75;margin:0 0 18px;color:var(--ink)}
.lab-story .lab-lead{font-size:20px;font-weight:700;color:var(--ink2)}
.lab-think{background:var(--cos-l);border:1px solid #d6d3ff;border-radius:18px;padding:18px 20px;margin:26px 0}
.lab-think b{display:block;font-size:15px;color:#3730a3;margin-bottom:4px}
.lab-think span{font-size:18px;font-weight:700}
.lab-then{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--saf-l);border:2px solid var(--saf);border-radius:20px;padding:18px 20px}
.lab-then div{flex:1 1 220px;min-width:0}
.lab-then b{display:block;font-size:15px;color:var(--saf-d)}
.lab-then strong{font-size:20px}

/* ── the game page ──────────────────────────────────────────────────── */
.lab-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.lab-head .lab-tile-sq{background:var(--tone-l);border:1px solid color-mix(in srgb,var(--tone) 30%,transparent)}
.lab-head h1{margin:0;font-size:clamp(27px,4vw,40px)}
.lab-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.lab-chips li{font-size:15px;font-weight:800;border-radius:999px;padding:4px 13px;background:var(--tone-l);color:var(--tone-d)}
.lab-chips li.plain{background:#efece4;color:var(--ink2)}
.lab-play{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);margin-top:22px;align-items:start}
.lab-stagecard{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:18px 14px;min-width:0}
#lab-stage{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
#lab-stage>*{width:100%;max-width:100%}
#lab-stage{scroll-margin-top:96px}
.lab-status{min-height:26px;margin:14px 0 0;text-align:center;font-size:17px;font-weight:700;color:var(--ink2)}
.lab-status.is-good{color:var(--em)}.lab-status.is-bad{color:var(--rose)}
.lab-ask{font-size:19px;font-weight:700;text-align:center;line-height:1.4;max-width:34rem}
.lab-ask b{color:var(--saf-d);font-size:1.15em}
.lab-count{font-size:16px;font-weight:700;color:var(--mute);text-align:center}
.lab-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;width:100%}
.lab-bar:empty{display:none}
.lab-win{margin-top:16px;background:var(--gold-l);border:2px solid var(--gold);border-radius:20px;padding:20px;text-align:center}
.lab-win.is-retry{background:var(--cos-l);border-color:var(--cos)}
.lab-win-stars{font-size:40px;line-height:1;letter-spacing:4px}
.lab-win-h{font-size:21px;font-weight:800;margin:8px 0 2px}
.lab-win-t{font-size:17px;color:var(--ink2);margin:0}
.lab-win-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.lab-side{display:grid;gap:14px;min-width:0}
.lab-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:18px;min-width:0}
.lab-card h2{font-size:19px;margin:0 0 8px}
.lab-card p{margin:0;font-size:16.5px;color:var(--ink2)}
.lab-card ol{margin:0;padding-left:22px;font-size:16.5px;color:var(--ink2)}
.lab-card ol li{margin:4px 0}
.lab-card .lab-more{display:inline-block;margin-top:10px;font-weight:800;font-size:16px;text-decoration:none}
.lab-levels{display:grid;gap:8px}
.lab-lv{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--paper);border-radius:14px;
  padding:10px 12px;font:inherit;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer}
.lab-lv b{flex:0 0 30px;height:30px;border-radius:10px;background:#efece4;display:flex;align-items:center;justify-content:center;font-size:15px}
.lab-lv span{flex:1;min-width:0}
.lab-lv .lab-lv-stars{flex:0 0 auto;font-size:16px;letter-spacing:1px}
.lab-lv.is-on{border-color:var(--saf);background:var(--saf-l)}
.lab-lv.is-on b{background:var(--saf);color:#fff}
.lab-lv.is-done b{background:var(--em);color:#fff}
.lab-note{margin-top:22px;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:6px 20px}
.lab-note summary{cursor:pointer;font-size:19px;font-weight:800;padding:14px 0;list-style-position:inside}
.lab-note-in{padding:0 0 18px;display:grid;gap:14px}
.lab-note-in h3{font-size:16px;color:var(--saf-d);margin-bottom:3px}
.lab-note-in p,.lab-note-in li{font-size:16.5px;color:var(--ink2);margin:0}
.lab-note-in ul{margin:0;padding-left:22px}
.lab-nextrow{display:grid;gap:14px;margin-top:22px;grid-template-columns:1fr}

/* ── the board ──────────────────────────────────────────────────────── */
.lb-board{display:grid;grid-template-columns:repeat(var(--lb-w),minmax(0,1fr));width:100%;max-width:min(520px,calc(var(--lb-w) * 92px),max(280px,calc(72vh * var(--lb-w) / var(--lb-h))));
  border:3px solid #7c5a34;border-radius:10px;overflow:hidden;position:relative;margin:0 auto;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.lb-board.lb-small{max-width:min(400px,calc(var(--lb-w) * 80px),max(260px,calc(56vh * var(--lb-w) / var(--lb-h))))}
.lb-c{position:relative;aspect-ratio:1;border:0;padding:0;margin:0;font:inherit;cursor:pointer;min-width:0;display:block;color:#5a4324;
  -webkit-tap-highlight-color:transparent;transition:background-color .15s}
.lb-l{background:var(--sq-l)}.lb-d{background:var(--sq-d)}
.lb-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.lb-p{width:86%;height:86%;object-fit:contain;display:block;pointer-events:none}
.lb-rk,.lb-fl{position:absolute;font-size:11px;font-weight:800;opacity:.75;pointer-events:none;line-height:1}
.lb-rk{top:3px;left:4px}.lb-fl{bottom:3px;right:4px}
.lb-t{font-weight:800;font-size:clamp(13px,3.4vw,20px);line-height:1}
.lb-step{color:#3730a3;font-size:clamp(12px,3vw,17px)}
.lb-c.is-seen{background-image:linear-gradient(rgba(79,70,229,.24),rgba(79,70,229,.24))}
.lb-c.is-open{box-shadow:inset 0 0 0 4px rgba(241,92,10,.85)}
.lb-c.is-open:hover{background-image:linear-gradient(rgba(241,92,10,.2),rgba(241,92,10,.2))}
.lb-c.is-here{background:#ffc978}
.lb-c.is-good{background:#7ddbb1}
.lb-c.is-bad{background:#ff9aae}
.lb-c.is-hint{box-shadow:inset 0 0 0 5px var(--gold);animation:lb-pulse 1s ease-in-out infinite}
.lb-c.is-given{filter:saturate(.75) brightness(.97)}
.lb-c.is-wall{background:#6b5a48}
.lb-c.is-heat{background:color-mix(in srgb,#f15c0a calc(var(--hm) * 88%),#fff8ee)}
.lb-c.is-heat .hm-n{color:#2a1505}
.lb-c.is-heat.is-here{box-shadow:inset 0 0 0 4px var(--cos)}
@keyframes lb-pulse{50%{box-shadow:inset 0 0 0 5px rgba(200,162,39,.25)}}
@media (prefers-reduced-motion:reduce){.lb-c.is-hint{animation:none}}
/* which way the rook-machine is facing */
.lb-c[class*="mm-d"]::after{content:"";position:absolute;width:0;height:0;border:7px solid transparent}
.lb-c.mm-d0::after{top:2px;left:50%;margin-left:-7px;border-bottom-color:var(--saf-d);border-top-width:0}
.lb-c.mm-d2::after{bottom:2px;left:50%;margin-left:-7px;border-top-color:var(--saf-d);border-bottom-width:0}
.lb-c.mm-d1::after{right:2px;top:50%;margin-top:-7px;border-left-color:var(--saf-d);border-right-width:0}
.lb-c.mm-d3::after{left:2px;top:50%;margin-top:-7px;border-right-color:var(--saf-d);border-left-width:0}
.mm-star{color:var(--gold);font-size:clamp(22px,6vw,34px)}
/* mirror lines */
.mi-v::after,.mi-h::after,.mi-turn::after{content:"";position:absolute;background:var(--cos);pointer-events:none;z-index:2}
.mi-v::after{left:50%;top:0;bottom:0;width:4px;margin-left:-2px}
.mi-h::after{top:50%;left:0;right:0;height:4px;margin-top:-2px}
.mi-turn::after{left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%}

/* ── question rounds ────────────────────────────────────────────────── */
.lq-head{font-size:15px;font-weight:800;color:var(--mute);letter-spacing:.02em}
.lq-vis{width:100%;display:flex;flex-direction:column;align-items:center}
.lq-vis:empty{display:none}
.lq-prompt{margin:0;font-size:20px;font-weight:700;text-align:center;line-height:1.4;max-width:36rem}
.lq-prompt b{color:var(--saf-d)}
.lq-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:520px;margin:0 auto}
.lq-opt{min-height:58px;font-size:18px;white-space:normal;text-align:center;line-height:1.3;flex-direction:column;gap:2px}
.lq-opt img{width:40px;height:40px}
.lq-opt span{font-size:16px}
.lq-opt.ok{background:var(--em-l);border-color:var(--em);color:#065f46;opacity:1}
.lq-opt.no{background:var(--rose-l);border-color:var(--rose);color:#9f1239;opacity:1}
.lq-why{margin:0;min-height:26px;font-size:17px;font-weight:700;text-align:center;max-width:36rem}
.lq-why.ok{color:var(--em)}.lq-why.no{color:var(--rose)}
.lq-opts.one{grid-template-columns:1fr}

/* ── game-specific pieces ───────────────────────────────────────────── */
/* sudoku */
.sd-grid{display:grid;width:100%;border:3px solid #7c5a34;border-radius:10px;overflow:hidden;background:#7c5a34;gap:1px}
.sd-4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:340px}
.sd-6{grid-template-columns:repeat(6,minmax(0,1fr));max-width:440px}
.sd-c{aspect-ratio:1;border:0;padding:0;background:var(--sq-l);cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:0}
.sd-c img{width:80%;height:80%;pointer-events:none}
.sd-c.is-fixed{background:var(--sq-d);cursor:default}
.sd-c.is-hint{background:var(--gold-l)}
.sd-c.is-sel{box-shadow:inset 0 0 0 4px var(--saf)}
.sd-c.is-bad{background:#ff9aae}
.sd-c.is-won{background:#bfeeda}
.sd-bl{border-left:3px solid #7c5a34}.sd-bt{border-top:3px solid #7c5a34}
.sd-pal{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sd-pick{min-height:54px;min-width:54px;padding:4px 8px}
.sd-pick img{width:40px;height:40px}
.sd-erase{font-size:15px}
/* scales */
.ps-scale{width:100%;max-width:460px;padding-top:8px}
.ps-beam{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:8px solid #7c5a34;border-radius:4px;transition:transform .5s;transform-origin:50% 100%;gap:14px}
.ps-side{flex:1;min-width:0;display:flex;justify-content:center}
.ps-pan{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:2px;min-height:70px;padding:6px 4px 4px;border-radius:14px 14px 0 0;width:100%}
.ps-l .ps-pan{background:var(--saf-l)}.ps-r .ps-pan{background:var(--cos-l)}
.ps-pan img{width:clamp(34px,10vw,52px);height:auto}
.ps-star,.ps-q{display:inline-flex;align-items:center;justify-content:center;width:clamp(34px,10vw,50px);height:clamp(34px,10vw,50px);font-size:clamp(26px,7vw,36px);font-weight:800}
.ps-star{color:var(--gold)}.ps-q{color:var(--cos);border:3px dashed var(--cos);border-radius:12px}
.ps-post{width:10px;height:46px;background:#7c5a34;margin:0 auto}
.ps-foot{width:120px;height:10px;background:#7c5a34;border-radius:6px;margin:0 auto}
/* rice */
.gr-top{display:grid;gap:14px;width:100%;grid-template-columns:minmax(0,1fr);justify-items:center}
.gr-board{width:100%;display:flex;justify-content:center}
.gr-n{font-size:clamp(9px,2.3vw,14px);color:#5a3b0a}
.gr-n sup{font-size:.75em}
.gr-next{color:var(--saf-d)}
.gr-read{width:100%;max-width:520px;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-width:0}
.gr-k{font-size:15px;font-weight:800;color:var(--saf-d)}
.gr-l{font-size:15px;color:var(--mute);margin-top:8px}
.gr-v{font-size:clamp(17px,4.4vw,24px);font-weight:800;overflow-wrap:anywhere;line-height:1.2}
.gr-v--sum{color:var(--cos)}
.gr-c{font-size:16px;font-weight:700;color:var(--ink2);margin-top:10px;min-height:24px}
.gr-quiz{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
/* market */
.pm-coins{font-size:18px;font-weight:700;text-align:center}
.pm-coins.is-over b:first-of-type{color:var(--rose)}
.pm-basket{min-height:72px;width:100%;max-width:520px;border:2px dashed var(--line);border-radius:16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;padding:8px}
.pm-item{border:0;background:var(--saf-l);border-radius:12px;padding:4px;cursor:pointer}
.pm-item img{width:46px;height:46px;display:block}
.pm-hint{font-size:16px;color:var(--mute);text-align:center;padding:6px}
.pm-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:520px}
.pm-buy{flex-direction:column;gap:0;padding:8px 2px;min-width:0;font-size:15px}
.pm-buy img{width:clamp(30px,9vw,44px);height:auto}
.pm-buy span{font-size:15px;overflow-wrap:anywhere;line-height:1.2}
.pm-buy b{color:var(--saf-d);font-size:18px}
.pm-trade{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.pm-trade>div:not(.pm-arrow){background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:10px 14px;text-align:center}
.pm-lbl{display:block;font-size:15px;font-weight:800;color:var(--mute)}
.pm-row img{width:clamp(36px,10vw,52px);height:auto}
.pm-arrow{font-size:30px;color:var(--mute)}
/* move machine */
.mm-prog{min-height:60px;width:100%;max-width:560px;border:2px dashed var(--line);border-radius:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:10px}
.mm-chip{display:inline-flex;border-radius:12px;overflow:hidden;border:1.5px solid var(--cos);background:var(--cos-l)}
.mm-chip.is-on{background:#ffc978;border-color:var(--saf)}
.mm-chip.is-bad{background:var(--rose-l);border-color:var(--rose)}
.mm-c,.mm-x{border:0;background:transparent;font:inherit;font-size:16px;font-weight:800;color:var(--ink);padding:8px 10px;cursor:pointer}
.mm-c em{font-style:normal;color:var(--mute);font-size:15px}
.mm-c b{color:var(--saf-d)}
.mm-x{border-left:1.5px solid rgba(0,0,0,.12);color:var(--mute)}
.mm-pal{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mm-ico{font-size:22px;line-height:1}
/* squad stats */
.ss-chart{display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,2.5vw,16px);height:190px;width:100%;max-width:480px;padding-top:26px}
.ss-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.ss-col i{display:block;width:100%;max-width:56px;background:linear-gradient(180deg,#f97316,var(--saf));border-radius:8px 8px 0 0;min-height:6px}
.ss-col b{font-size:18px}
.ss-col span{font-size:15px;font-weight:700;color:var(--ink2);margin-top:5px;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ss-cap{font-size:15px;color:var(--mute);margin-top:8px;text-align:center}
.ss-two{display:grid;gap:10px;width:100%;max-width:480px}
.ss-two div{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.ss-two b{display:block;font-size:17px}
.ss-two span{font-size:20px;font-weight:800;color:var(--cos)}
/* clock */
.cw-clock{display:flex;gap:8px;background:#2a2d3c;border-radius:18px;padding:12px}
.cw-face{background:#12141d;color:#8b90a6;border-radius:12px;padding:12px 16px;font-size:clamp(28px,8vw,42px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.cw-face.is-on{color:#ffd9a8;box-shadow:inset 0 0 0 3px var(--saf)}
/* fair share */
.fs-table{width:100%;max-width:380px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fs-row{display:flex;justify-content:space-between;padding:10px 16px;font-size:17px;border-bottom:1px solid var(--line);background:var(--paper)}
.fs-row:last-child{border-bottom:0}
.fs-row.is-tied{background:var(--saf-l);font-weight:800}
.fs-frac{font-size:1.15em;font-weight:800;color:var(--saf-d)}
/* say it in eight */
.si-line{min-height:62px;width:100%;max-width:600px;border:2px dashed var(--line);border-radius:16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;padding:10px}
.si-tray{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:600px}
.si-tile{border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:9px 13px;font:inherit;font-size:16.5px;font-weight:700;color:var(--ink);cursor:pointer}
.si-tile.si-verb{border-color:var(--saf);background:var(--saf-l)}
.si-tile.si-sq{border-color:var(--gold);background:var(--gold-l)}
.si-tile.si-and{border-color:var(--mute)}
.si-tile.is-in{border-color:var(--cos);background:var(--cos-l)}
/* build a rule */
.br-top{display:grid;gap:18px;width:100%;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:start}
.br-design,.br-show{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.br-tip{margin:0;font-size:16px;color:var(--ink2);text-align:center;max-width:26rem}
.br-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%;max-width:260px}
.br-c{aspect-ratio:1;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);cursor:pointer;font-size:22px;color:var(--gold);padding:0}
.br-c.is-on{background:var(--saf);border-color:var(--saf-d)}
.br-c.is-me{background:var(--ink);cursor:default}
.br-slides{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.br-tog.is-on{background:var(--saf);border-color:var(--saf-d);color:#fff}
.br-star{color:var(--gold);font-size:clamp(20px,5vw,30px)}
.br-report{width:100%;max-width:600px;display:grid;gap:8px}
.br-line{margin:0;font-size:17px;font-weight:700;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:11px 14px}
.br-line.is-yes{background:var(--em-l);border-color:var(--em);color:#065f46}
.br-line.is-no{background:#efece4}
.br-wait{color:var(--mute)}
/* trail + blindfold */
.ct-card{width:100%;max-width:600px;background:var(--gold-l);border:1px solid #ead99a;border-radius:18px;padding:16px 18px}
.ct-step{font-size:15px;font-weight:800;color:#7a6410}
.ct-h{font-size:20px;margin:2px 0 6px}
.ct-p{margin:0;font-size:17px;line-height:1.6;color:var(--ink)}
.ct-task{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.bc-moves{margin:0;padding:0 0 0 26px;font-size:20px;font-weight:800;line-height:1.7;color:var(--cos)}

/* ── wider screens (must stay BELOW the base rules) ─────────────────── */
@media (min-width:640px){
  .pm-shelf{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lab-grid,.lab-tales,.lab-nextrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lab-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lab-stagecard{padding:24px}
  .lab-panel{padding:30px}
  .lq-opts.four{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1000px){
  .lab-band{padding:54px 0}
  .lab-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .lab-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lab-tales{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lab-tales--all{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lab-play{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  .lab-school{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding:38px}
  .gr-top{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center}
  .br-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── printing a teacher note: the note, and nothing else ────────────── */
@media print{
  body *{visibility:hidden}
  .lab-note,.lab-note *{visibility:visible}
  .lab-note{position:absolute;left:0;top:0;width:100%;border:0;margin:0}
  .lab-note .lab-btn{display:none}
}

/* stage children are full width; these keep their own measure and sit centred */
.sd-grid,.sd-pal,.ps-scale,.pm-basket,.pm-shelf,.mm-prog,.si-line,.si-tray,.ct-card,.br-report,.ss-chart,.ss-two,.fs-table,.gr-read{margin-left:auto;margin-right:auto}
.lab-ask,.lq-prompt,.lq-why{margin-left:auto;margin-right:auto}
.cw-clock,.pm-trade{justify-content:center}
.lq-vis>.cw-clock{align-self:center}
.bc-moves{width:auto!important;align-self:center}
#lab-stage>.lab-btn{width:auto;align-self:center}
/* an element marked hidden stays hidden even when a rule above gives it a display */
.lab [hidden]{display:none!important}
.lab-card ol{list-style:decimal}
.lab-note-in ul{list-style:disc}