/* bl-play.css - Play (/{lang}/play/, includes/play-hub.php, assets/js/bl-play.js): the lobby, the search, the race,
   the finish and the leaderboards. Brand tokens from brainlag.css; light and dark. Right answers and wins are teal; a
   wrong answer is amber, never red. One primary action per screen; flat buttons (no lip); every target 44 px or more.
   Reduced motion (and Study display's motion off): no dash, no sparks, no confetti, no bounce; the state still shows. */
.pl{width:100%;max-width:1200px;box-sizing:border-box;margin:0 auto;padding:12px 16px 48px;
  --c1:var(--study);--c2:var(--play);--c3:var(--gold);--c4:var(--blue);--c5:var(--pink);
  --tk:44px}
.pl [hidden]{display:none!important}
.pl-screen:not(.pl-lobby){max-width:780px;margin-left:auto;margin-right:auto}
.pl-screen,.pl-q,.pl-games,.pl-levels{min-width:0}
.pl h1{font:800 clamp(30px,6vw,44px)/1.05 var(--f-display);margin:4px 0 2px;color:var(--ink)}
.pl-sub{color:var(--ink-3);margin:0 0 16px;font-size:16px}
.pl-screen{animation:pl-in var(--dur-page-in) var(--ease-out)}
@keyframes pl-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pl-center{text-align:center}
.pl-note{color:var(--ink-3);font-size:14.5px;margin:8px 0 0}
.pl-err{color:var(--warn-ink);font:700 14.5px var(--f-body);margin:6px 0 0;min-height:20px}
.pl-grow{flex:1;min-width:0}

/* ---------------------------------------------------------------- buttons: flat, one primary per screen */
.pl-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;margin:16px 0 0;padding:0 22px;border:0;border-radius:18px;
  background:var(--study-btn);color:var(--on-study-btn);font:800 19px var(--f-body);cursor:pointer;transition:transform .12s var(--ease-out),background-color .15s}
.pl-go:hover{background:var(--study-btn-hover)}
.pl-go:active{transform:scale(.97);background:var(--study-btn-press)}
.pl-go:disabled{background:var(--sunk);color:var(--ink-3);cursor:default}
.pl-link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;background:none;border:0;color:var(--study-ink);font:700 16px var(--f-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pl-icon-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 10px;border:0;border-radius:12px;background:var(--sunk);color:var(--ink-2);font:700 14px var(--f-body);cursor:pointer}
.pl-icon-btn svg{width:22px;height:22px}
.pl-sheet .pl-icon-btn svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.pl :is(button,a,input,summary):focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------------------------------------------------------------- tokens */
.tk{position:relative;display:inline-grid;place-items:center;width:var(--tk);height:var(--tk);border-radius:50%;flex:none;
  background:var(--c,var(--c2));color:#fff;font:800 calc(var(--tk) * .42)/1 var(--f-display);box-shadow:0 0 0 3px var(--surface),0 3px 8px rgba(0,0,0,.18)}
.tk::after{content:'';position:absolute;inset:3px;border-radius:50%;border:2px solid rgba(255,255,255,.55)}
.tk.img{background:var(--surface)}
.tk.img::after{display:none}
.tk img{width:100%;height:100%;border-radius:50%;display:block}
.tk.me{box-shadow:0 0 0 3px var(--study),0 3px 10px rgba(0,0,0,.2)}
.tk .ltr{display:none}
:root[data-chars="off"] .tk.img{background:var(--c,var(--c2))}
:root[data-chars="off"] .tk .ltr{display:inline}

.pl-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pl-levels button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:76px;border-radius:18px;border:3px solid transparent;
  background:var(--sunk);color:var(--ink-2);font:800 16px var(--f-body);cursor:pointer;transition:transform .12s var(--ease-out)}
.pl-levels button:active{transform:scale(.97)}
.pl-levels svg{width:26px;height:26px}
.pl-levels rect{fill:var(--rule-2)}
.pl-levels rect.on{fill:currentColor}
.pl-levels button[aria-checked="true"]{background:var(--surface);border-color:var(--study);color:var(--study-ink);box-shadow:var(--shadow)}
.pl-lv-r{font:700 12.5px var(--f-body);color:var(--ink-3)}
.pl-lv-r:empty{display:none}


/* ---------------------------------------------------------------- the search */
.pl-search{display:grid;place-items:center;gap:6px;padding:26px 8px 8px}
.pl-radar{position:relative;width:min(220px,60vw);aspect-ratio:1;display:grid;place-items:center}
.pl-radar i{position:absolute;inset:0;border-radius:50%;border:4px solid var(--study);opacity:0;animation:pl-ping 2.4s var(--ease-out) infinite}
.pl-radar i:nth-child(2){animation-delay:.8s}.pl-radar i:nth-child(3){animation-delay:1.6s}
@keyframes pl-ping{0%{opacity:.7;transform:scale(.3)}100%{opacity:0;transform:scale(1)}}
.pl-radar-tk{--tk:72px;display:inline-flex}
.pl-search h2{font:800 24px var(--f-display);margin:8px 0 0;color:var(--ink)}
.pl-search p{margin:0;color:var(--ink-3);font:700 18px var(--f-body);font-variant-numeric:tabular-nums}
.pl-offer{margin-top:14px;text-align:center}
.pl-bots{display:flex;justify-content:center;margin:6px 0 2px}
.pl-bots img{width:56px;height:56px;border-radius:50%;box-shadow:0 0 0 3px var(--paper);margin:0 -6px}

/* ---------------------------------------------------------------- the race: the track */
.pl-track{position:relative;margin:0 -6px 6px}
.pl-track svg{display:block;width:100%;height:auto}
.tr-grass{fill:var(--study-tint)}
.tr-lane{fill:none;stroke:var(--sunk);stroke-linecap:round}
:root[data-theme="dark"] .tr-lane{stroke:#1a2c44}
.tr-line{fill:none;stroke:var(--surface);stroke-width:3;stroke-dasharray:14 12;opacity:.9}
.tr-me{stroke:color-mix(in srgb,var(--study) 22%,var(--sunk))}
:root[data-theme="dark"] .tr-me{stroke:color-mix(in srgb,var(--study) 30%,#1a2c44)}
.tr-start{stroke:var(--ink-3);stroke-width:5;stroke-dasharray:6 6}
.tr-fin-a{fill:var(--ink)}.tr-fin-b{fill:var(--surface)}
.tr-pole{stroke:var(--ink-2);stroke-width:5;stroke-linecap:round}
.tr-flag{animation:tr-wave 1.6s var(--ease-io) infinite alternate;transform-box:fill-box;transform-origin:left center}
@keyframes tr-wave{to{transform:skewY(-6deg) scaleX(.94)}}
.pl-runner{position:absolute;left:0;top:0;transform:translate(-50%,-50%);z-index:2}
.pl-runner.me{z-index:3}
.pl-runner .tk{--tk:var(--tkr,40px)}
.pl-speed{position:absolute;right:calc(100% - 4px);top:50%;width:34px;height:20px;margin-top:-10px;opacity:0;pointer-events:none}
.pl-speed i{position:absolute;right:0;height:4px;border-radius:2px;background:var(--c,var(--study))}
.pl-speed i:nth-child(1){top:0;width:60%}.pl-speed i:nth-child(2){top:8px;width:100%}.pl-speed i:nth-child(3){top:16px;width:45%}
.pl-runner.dash .pl-speed{animation:pl-speed .6s var(--ease-out)}
@keyframes pl-speed{0%{opacity:0;transform:translateX(10px)}30%{opacity:.85}100%{opacity:0;transform:translateX(-14px)}}
.pl-runner.dash .tk{animation:pl-dash .6s var(--ease-out)}
@keyframes pl-dash{30%{transform:scale(1.14) rotate(-6deg)}100%{transform:none}}
.pl-spark{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:3px;pointer-events:none;background:var(--gold);animation:pl-spark .6s var(--ease-out) forwards}
.pl-spark:nth-child(2n){background:var(--study);border-radius:50%}
@keyframes pl-spark{0%{transform:translate(0,0) scale(.4);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(90deg);opacity:0}}
.pl-legend{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center}
.pl-legend li{display:flex;align-items:center;gap:6px;font:700 14px var(--f-body);color:var(--ink-2);min-height:28px;max-width:100%}
.pl-legend li .tk{--tk:24px;box-shadow:none}
.pl-legend li .tk::after{display:none}
.pl-legend li.me{color:var(--study-ink)}
.pl-legend .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the countdown */
.pl-count{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:260px}
.pl-count-f{height:220px;width:auto;animation:pl-flag .9s var(--ease-io) infinite alternate;transform-origin:50% 90%}
@keyframes pl-flag{to{transform:rotate(-4deg)}}
.pl-count b{font:900 clamp(96px,22vw,150px)/1 var(--f-display);color:var(--study);min-width:1.2em;text-align:center}
.pl-count b.go{color:var(--play);font-size:clamp(76px,17vw,120px)}
.pl-count b.pop{animation:pl-pop .9s var(--ease-out) both}
@keyframes pl-pop{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.15);opacity:1}45%{transform:scale(.96)}60%{transform:scale(1)}100%{transform:scale(1);opacity:1}}
@media (max-width:420px){.pl-count-f{height:170px}}

/* the question card */
.pl-q{background:var(--surface);border-radius:26px;box-shadow:var(--shadow);padding:14px 16px 16px}
.pl-q-top{display:flex;justify-content:space-between;align-items:center;margin:0 0 4px}
.pl-ring{position:relative;width:58px;height:58px;display:grid;place-items:center;font:800 19px var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.pl-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pl-ring .seg{fill:none;stroke:var(--sunk);stroke-width:7}
.pl-ring .seg.ok{stroke:var(--study)}
.pl-ring-t{font-size:15px;color:var(--ink-2)}
.pl-ring-t .bg{fill:none;stroke:var(--sunk);stroke-width:6}
.pl-ring-t .fg{fill:none;stroke:var(--blue);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.pl-q-text{font:700 21px/1.45 var(--f-body);color:var(--ink);margin:2px 0 14px}
.pl-q-text p{margin:0 0 6px}
.pl-q-text .n{font:900 1.22em var(--f-display);color:var(--ink)}
.pl-q-stem{font-size:17px;color:var(--ink-2)}
.pl-ans{display:flex;gap:8px;align-items:stretch}
.pl-ans label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pl-in-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:center;border-radius:18px;background:var(--sunk);border:3px solid transparent;transition:background-color .2s,border-color .2s}
.pl-input{flex:1;min-width:0;width:0;min-height:58px;padding:0 16px;border:0;background:none;color:var(--ink);font:900 30px var(--f-display);font-variant-numeric:tabular-nums}
.pl-input:focus{outline:none}
.pl-in-wrap:focus-within{border-color:var(--study)}
.pl-unit{padding-right:14px;font:800 20px var(--f-body);color:var(--ink-2)}
.pl-tick{position:absolute;right:10px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:var(--study);display:grid;place-items:center;opacity:0;transform:scale(.3)}
.pl-tick svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.pl-go-sm{width:auto;min-width:96px;margin:0;border-radius:18px}
.pl-q.ok .pl-in-wrap{background:var(--study-tint);border-color:var(--study)}
.pl-q.ok .pl-tick{animation:pl-tick .5s var(--ease-spring) forwards}
@keyframes pl-tick{to{opacity:1;transform:scale(1)}}
.pl-q.no .pl-in-wrap{background:var(--gold-tint);border-color:var(--gold);animation:pl-nudge .4s var(--ease-out)}
@keyframes pl-nudge{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.pl-mark{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}   /* said by screen readers; the input's tick and amber show it */
.pl-mark.ok{color:var(--study-ink)}
.pl-mark.no{color:var(--warn-ink)}
.pl-keys{display:none;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
@media (pointer:coarse){.pl-keys{display:grid}}
.pl-key{min-height:54px;border-radius:16px;border:0;background:var(--sunk);color:var(--ink);font:800 24px var(--f-display);cursor:pointer;touch-action:manipulation;transition:transform .08s,background-color .12s}
.pl-key:active{transform:scale(.94);background:var(--study-tint)}
.pl-key.wide{grid-column:span 4}
.pl-key.fn{background:var(--btn-2-hover);color:var(--ink-2)}
:root[data-theme="dark"] .pl-key.fn{background:var(--btn-2)}
.pl-wait{text-align:center;color:var(--ink-3);font:700 17px var(--f-body);padding:24px 0}
.pl-net{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;padding:10px 16px;border-radius:12px;background:var(--navy);color:var(--on-navy);font:700 15px var(--f-body);box-shadow:var(--shadow)}

/* ---------------------------------------------------------------- the finish */
.pl-end{position:relative;text-align:center;padding-top:6px}
.pl-end h2{font:900 clamp(56px,14vw,88px)/1 var(--f-display);margin:12px 0 0;color:var(--study-ink)}
.pl-end h2 sup{font-size:.42em;vertical-align:super;margin-left:2px}
.pl-end .pl-of{color:var(--ink-3);margin:4px 0 6px;font:700 18px var(--f-body)}
@keyframes pl-jump{0%{transform:translateY(0)}40%{transform:translateY(-22px) scale(1.05,.95)}70%{transform:translateY(0) scale(1.06,.92)}100%{transform:none}}
.pl-confetti{position:absolute;inset:-20px -16px auto;height:380px;pointer-events:none;overflow:hidden}
.pl-confetti i{position:absolute;top:-30px;width:18px;height:18px;border-radius:5px;animation:pl-fall 2.4s var(--ease-in) forwards}
.pl-confetti i.c{border-radius:50%}
.pl-confetti i.s{width:12px;height:26px;border-radius:6px}
@keyframes pl-fall{0%{transform:translateY(0) rotate(0);opacity:1}85%{opacity:1}100%{transform:translateY(420px) rotate(260deg);opacity:0}}
.pl-stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.pl-stat{min-width:100px;padding:10px 14px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.pl-stat b{display:block;font:900 24px var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.pl-stat span{font:600 13px var(--f-body);color:var(--ink-3)}
.pl-stat.up b{color:var(--study-ink)}
.pl-stat.down b{color:var(--warn-ink)}
.pl-others{margin:14px auto 0;max-width:440px;text-align:left}
.pl-others summary{min-height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font:700 15px var(--f-body);cursor:pointer}
.pl-others ul{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:6px}
.pl-others li{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:6px 6px 6px 12px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow);flex-wrap:wrap}
.pl-others .act{display:flex;gap:4px;flex-wrap:wrap}
.pl-others .act button{min-height:44px;padding:0 12px;border-radius:12px;border:0;background:var(--sunk);color:var(--ink);font:700 14px var(--f-body);cursor:pointer}
.pl-others .done{font:700 14px var(--f-body);color:var(--ink-3);padding:0 8px}

/* ---------------------------------------------------------------- leaderboards */
.pl-tabs{display:flex;gap:6px;margin:0 0 6px;padding:4px;background:var(--sunk);border-radius:16px}
.pl-tabs button{flex:1;min-height:44px;border:0;border-radius:12px;background:none;color:var(--ink-2);font:700 15px var(--f-body);cursor:pointer}
.pl-tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.pl-bpod{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:14px auto 10px;max-width:460px}
.pl-bpod:empty{display:none}
.pl-bpod .vl{font:800 15px var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums}
.pl-rows{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pl-rows li{display:grid;grid-template-columns:30px 32px 1fr auto;align-items:center;gap:8px;min-height:48px;padding:0 14px 0 8px;border-radius:14px;background:var(--surface);font-variant-numeric:tabular-nums}
.pl-rows .tk{--tk:30px;box-shadow:none}
.pl-rows .tk::after{display:none}
.pl-rows .rk{font:800 15px var(--f-body);color:var(--ink-3);text-align:center}
.pl-rows .nm{font:700 16px var(--f-body);color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pl-rows .vl{font:800 16px var(--f-body);color:var(--ink-2)}
.pl-rows li.me{background:var(--study-tint);box-shadow:inset 0 0 0 2px var(--study)}
.pl-rows li.me .nm,.pl-rows li.me .vl{color:var(--study-ink)}
.pl-rows li.pl-gap{display:flex;height:14px;min-height:0;background:none;justify-content:center;align-items:center;gap:4px}
.pl-gap i{width:5px;height:5px;border-radius:50%;background:var(--rule-2)}
/* the empty state sits on the card itself: no box, no border, just the drawing and one line */
.pl-rows li.pl-empty{display:block;min-height:0;padding:22px 12px 10px;text-align:center;color:var(--ink-3);background:none;box-shadow:none;border:0;font:600 16px/1.4 var(--f-body)}
.pl-empty svg{display:block;margin:0 auto 12px;width:96px;height:72px;color:var(--ink-3)}
.pl-empty svg rect{fill:var(--sunk)}
.pl-empty svg .b1{fill:var(--gold-tint)}
.pl-empty svg .st{fill:var(--gold);stroke:var(--gold-ink)}

/* ---------------------------------------------------------------- the sheet (name and listing) */
.pl-sheet{border:0;padding:0;margin:auto auto 0;width:min(100%,520px);max-width:100%;border-radius:26px 26px 0 0;background:var(--surface);color:var(--ink);box-shadow:0 -10px 40px rgba(0,0,0,.25)}
@media (min-width:600px){.pl-sheet{margin:auto;border-radius:26px}}
.pl-sheet::backdrop{background:rgba(11,22,38,.45)}
.pl-sheet-in{padding:14px 18px 22px}
.pl-sheet-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.pl-sheet h2{font:800 20px var(--f-display);margin:0}
.pl-sheet .row{display:flex;align-items:center;gap:12px;min-height:56px}
.pl-sheet .row + .row{margin-top:4px}
.pl-sheet .row .pl-me-tk{--tk:36px}
.pl-sheet input[type=text]{min-height:44px;padding:0 12px;border-radius:12px;border:0;background:var(--sunk);color:var(--ink);font:600 16px var(--f-body);flex:1;min-width:0}
.pl-switch{position:relative;width:52px;height:32px;flex:none}
.pl-switch input{position:absolute;inset:-6px;opacity:0;margin:0;cursor:pointer;width:64px;height:44px;z-index:1}
.pl-switch span{position:absolute;inset:0;border-radius:16px;background:var(--btn-off-edge);transition:background .15s}
.pl-switch span::after{content:'';position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .15s var(--ease-out)}
.pl-switch input:checked+span{background:var(--study)}
.pl-switch input:checked+span::after{transform:translateX(20px)}
.pl-switch input:focus-visible+span{outline:3px solid var(--blue);outline-offset:3px}

@media (max-width:420px){
  .pl-q-text{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .pl *,.pl *::before,.pl *::after{animation:none!important;transition:none!important}
  .pl-q.ok .pl-tick{opacity:1;transform:none}
  .pl-radar i{opacity:.3}.pl-radar i:nth-child(1){transform:scale(.45)}.pl-radar i:nth-child(2){transform:scale(.7)}.pl-radar i:nth-child(3){transform:scale(.95)}
  .pl-confetti,.pl-spark,.pl-speed{display:none}
}
:root[data-motion="off"] .pl-q.ok .pl-tick{opacity:1;transform:none}
:root[data-motion="off"] .pl-confetti,:root[data-motion="off"] .pl-spark{display:none}
/* dark: keys, podium steps and level toggles one step lighter than the card, so they read as things to press */
:root[data-theme="dark"] .pl-key{background:#1f3452}
:root[data-theme="dark"] .pl-key.fn{background:#2a4368}
:root[data-theme="dark"] .pl-levels button{background:#1a2c44}
:root[data-theme="dark"] .pl-levels button[aria-checked="true"]{background:var(--surface)}

/* fixes after review (12 Oct): provisional ratings get a "new" tag, never a "?"; numbers never letter-spaced */
.pl-new{display:inline-block;padding:1px 6px;border-radius:var(--chip);background:var(--blue-tint);color:var(--blue-ink);font:800 11px/1.5 var(--f-body);vertical-align:middle;letter-spacing:0}
.pl :is(.vl,.pl-lv-r,.pl-ring,.pl-rt,.pl-line1,.pl-input,.pl-q-text .n,[data-wait]){letter-spacing:0;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.pl-ring-n{display:flex;align-items:baseline;line-height:1}
.pl-ring-n small{font:700 11px var(--f-body);color:var(--ink-3);margin-left:1px}
.pl-line0{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 0}
.pl-line0 .tk{--tk:34px}
.pl-line1{margin:10px 0 0;font:700 20px var(--f-body);color:var(--ink-2)}
.pl-line1 b{font:900 22px var(--f-display);color:var(--ink)}
.pl-line2{margin:2px 0 0;font:800 18px var(--f-body);color:var(--study-ink)}
.pl-rt{font:800 15px var(--f-body);color:var(--ink-2)}
.pl-rt.up{color:var(--study-ink)}
.pl-rt.down{color:var(--warn-ink)}
/* the podium: gold, silver-grey and a soft blue for 1st, 2nd and 3rd, in both themes, each with a readable number */
.pl-q{padding-bottom:16px}

/* ================================================================ the lobby (second pass, owner 12 Oct: one hero card,
   rich tiles, the Play world behind it, the leaderboard on a stage) */
.pl-body{overflow-x:clip}
.pl{padding-bottom:28px}
.pl-lobby{position:relative;isolation:isolate}
@media (min-width:1000px){.pl-lobby{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:start}}
.pl-lob-main{min-width:0}
/* the world: a stadium band, lane stripes and a chequer sweeping behind the top of the page */
.pl-bgw{position:absolute;z-index:-1;top:-12px;left:calc(50% - 50vw);width:100vw;height:760px;pointer-events:none}
.bw-glow{fill:var(--paper)}
.bw-stand{fill:var(--study-tint);opacity:.75}
.bw-lane{fill:none;stroke:var(--sunk);stroke-width:46;stroke-linecap:round;opacity:.8}
.bw-chq .k1{fill:var(--rule-2);opacity:.6}.bw-chq .k2{fill:none}
.bw-halo{display:none}
:root[data-theme="dark"] .bw-glow{fill:#081322}
:root[data-theme="dark"] .bw-stand{fill:#0f2a3c;opacity:1}
:root[data-theme="dark"] .bw-lane{stroke:#13253b;opacity:1}
:root[data-theme="dark"] .bw-halo{display:inline;fill:#ffd36e;opacity:.07}   /* the night race: a soft floodlit glow over the stands, no lamps */
@media (max-width:700px){.bw-chq{display:none}}

/* the title row with your race name */
.pl-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:8px 0 14px}
.pl-title .pl-sub{margin:0}
.pl-me{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 8px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow);max-width:100%}
@media (max-width:520px){.pl-me{flex:1;border-radius:18px}}
.pl-me-tk{--tk:38px;display:inline-flex}
.pl-me-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.pl-me-t small{color:var(--ink-3);font:600 12.5px var(--f-body)}
.pl-me-t b{font:800 16px var(--f-display);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-me .pl-icon-btn{border-radius:50%;width:44px;padding:0;justify-content:center}

/* tile and hero art: full-bleed, one colour world each, one friend each */
.pl-art{position:relative;overflow:hidden}
.pl-art svg{display:block;width:100%;height:100%}
.pl-art text{font-family:var(--f-display);font-weight:900;text-anchor:middle;dominant-baseline:central}
.pl-art-f{position:absolute;right:4%;bottom:-4%;height:92%;width:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}
.pl-art em{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:var(--chip);background:var(--navy);color:#fff;font:800 12.5px var(--f-body);font-style:normal}
/* maths: teal world */
.m-bg{fill:#9fe3e6}.m-stand{fill:#7fd3d8}
.m-lights{display:none}
.m-track{fill:none;stroke:#0a7f8a;stroke-width:96;stroke-linecap:round}
.m-lane{fill:none;stroke:#fff;stroke-width:5;stroke-dasharray:18 16;opacity:.75}
.m-chq .k1{fill:#15365a}.m-chq .k2{fill:#fff}
:root[data-theme="dark"] .m-bg{fill:#0a2235}
:root[data-theme="dark"] .m-stand{fill:#0f3347}
:root[data-theme="dark"] .m-lights{display:inline}
:root[data-theme="dark"] .m-lights circle{fill:#ffe9a8;filter:drop-shadow(0 0 14px #ffc23d)}
:root[data-theme="dark"] .m-track{stroke:#0d5f69}
.pl-art-maths .pl-art-f{left:2%;right:auto;height:96%;bottom:-6%}
/* typing: violet world */
.t-bg{fill:#8f74e8}.t-blob{fill:#a48cf0}
.t-base{fill:#5536ad}
.t-key{fill:#eee8fb}.t-keyb{fill:#3d2786}
.pl-art-type text{font-size:16px;fill:#3d2786}
:root[data-theme="dark"] .t-bg{fill:#2a2160}:root[data-theme="dark"] .t-blob{fill:#3a2d82}
/* word search: gold world */
.w-bg{fill:#ffc23d}.w-blob{fill:#ffd36e}
.w-cell{fill:#fff8e6;stroke:#fff8e6;stroke-width:4;stroke-linejoin:round}
.pl-art-word text{font-size:18px;fill:#15365a}
.w-swoosh{fill:none;stroke:#0d9aa7;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;opacity:.94}
.pl-art-word text.w-hit{fill:#fff}
:root[data-theme="dark"] .w-bg{fill:#4c1f44}:root[data-theme="dark"] .w-blob{fill:#6e2762}   /* plum (owner, 14 Oct, the dark Play page: "Not poop colour"); the cells 11.9:1 on it */
:root[data-theme="dark"] .w-cell{fill:#fff2cc;stroke:#fff2cc}
/* chess: blue world */
.c-bg{fill:#3a9be8}.c-blob{fill:#5aaff0}
.c-rim{fill:#1f6fb5}
.c-lt{fill:#f4f9ff}.c-dk{fill:#9fd0f6}
.c-rook path{fill:#15365a}
:root[data-theme="dark"] .c-bg{fill:#12304f}:root[data-theme="dark"] .c-blob{fill:#183f66}

/* the hero card: the art, the level picker and the one primary, together */
.pl-heroc{border-radius:28px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.pl-heroc-b{padding:14px 16px 18px}
.pl-heroc-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.pl-heroc-h h2{font:800 26px var(--f-display);margin:0;color:var(--ink)}
.pl-heroc-h > span{color:var(--ink-3);font:700 14.5px var(--f-body)}
/* bl-nobreak.js wraps a hyphenated word in <span class="nw"> (never broken at its hyphen); in a flex button that span
   became an item of its own and the label split into two columns ("Connectez-vous | pour affronter..."). As contents,
   its text joins the rest of the label and keeps its nowrap (13 Oct 2026, the race card in 8 locales). */
.pl :is(.pl-go, .pl-cbtn, .pl-link, .pl-tabs button, .pl-stile .nm, .pl-heroc-h h2) > .nw{display:contents}
/* a chessboard reads a to h left to right in every language: in Arabic the page's right-to-left mirrored the board, and
   a tap, worked out from the pointer as if left to right, landed on the wrong file (13 Oct 2026) */
.pl .chb{direction:ltr}
/* a count reads 0/10 left to right in every language: in Arabic its parts swapped to 10/0 */
.pl .pl-ring{direction:ltr}
/* the question is the pool's own text (English); it takes its direction from itself, so in Arabic its full stop stays at its end */
.pl [data-qtext]{unicode-bidi:plaintext}
.pl-heroc .pl-go{margin-top:14px}

/* the games to come: a compact row, not an equal-weight grid */
.pl-soon{margin:22px 0 0}
.pl-soon h2{font:800 18px var(--f-display);margin:0 0 10px;color:var(--ink-2)}
.pl-soon-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 10px;scrollbar-width:none}
.pl-soon-row::-webkit-scrollbar{display:none}
.pl-stile{flex:0 0 200px;scroll-snap-align:start;border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.pl-stile .pl-art{aspect-ratio:16/9}
.pl-stile > span{display:block;padding:9px 12px 11px;font:800 15px var(--f-body);color:var(--ink)}
@media (min-width:700px){.pl-soon-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin:0;padding:0}.pl-stile{flex:none}}

/* the leaderboard (owner, 13 Oct): one card. The title, the segmented control 12 px in from the card's edges (track
   radius 16 = 28 - 12), a small "Resets in" pill, then the podium: a rounded panel with the game's marks faint behind,
   the top three standing ON their steps as their racers in race kit, first cheering in front of
   one confetti burst. The steps are our thick-outlined rounded blocks; gold, silver and bronze are only the medal on
   each. Below, one list surface: 50 px rows, alternate tint, no lines, the rank in the display face, times right in one
   tabular column. Your row keeps the teal: your own avatar, a bar to the next place, "Personal best" as our badge. */
.pl-stage{position:relative;margin-top:26px;padding:18px 12px 16px;border-radius:28px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;
  --ol:#15365a;--pod:color-mix(in srgb,var(--blue) 16%,var(--surface));--pod-top:color-mix(in srgb,var(--blue) 8%,var(--surface));
  --gold-m:#ffc23d;--silv-m:#cfdbe8;--brnz-m:#e09a62}
@media (min-width:1000px){.pl-stage{margin-top:8px;position:sticky;top:84px}}
/* no times on any board yet (play-hub.php): no card at all, and on desktop the lobby is one column, not one beside an
   empty side (coordinator, 14 Oct) */
.pl-stage[hidden]{display:none}
@media (min-width:1000px){
  .pl-lobby.pl-solo{display:block}
  .pl-lobby.pl-solo .pl-lob-main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:28px;align-items:start}
  .pl-lobby.pl-solo .pl-title{grid-column:1 / -1}
  .pl-lobby.pl-solo .pl-soon{margin:0}
  .pl-lobby.pl-solo .pl-soon-row:has(> .pl-stile:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
:root[data-theme="dark"] .pl-stage{background:#0f1f33;--ol:#06101d;--pod:#1d3a5f;--pod-top:#16304f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pl-stage{background:#0f1f33;--ol:#06101d;--pod:#1d3a5f;--pod-top:#16304f}}
.pl-stage h2{font:800 22px var(--f-display);margin:0 6px 12px;color:var(--ink)}
.pl-stage .pl-tabs{margin:0}
.pl-stage .pl-tabs button[aria-selected="true"]{box-shadow:0 1px 3px rgba(11,22,38,.12)}
/* "Resets in 2 d 4 h": a small rounded label */
.lb-reset{display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin:12px auto 0;padding:6px 12px 6px 9px;border-radius:10px;
  background:var(--sunk);color:var(--ink-2);font:700 13px/1.2 var(--f-body);font-variant-numeric:tabular-nums}
.lb-reset[hidden]{display:none}
.lb-reset svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* the podium panel; no podium, no panel */
.pl-spot:has(> .pl-bpod:empty){display:none}
.pl-spot{position:relative;margin:12px 0 0;padding:12px 10px 12px;border-radius:20px;background:var(--pod-top);overflow:hidden;isolation:isolate}
.lb-pat{position:absolute;inset:0;width:100%;height:100%;z-index:-1;fill:var(--ink);opacity:.07;font:800 26px var(--f-display);text-anchor:middle;pointer-events:none}
.pl-spot .pl-bpod{display:grid;grid-template-columns:1fr 1.14fr 1fr;align-items:end;gap:0 8px;max-width:440px;margin:0 auto}
.pl-bpod .lb-step{display:flex;flex-direction:column;align-items:stretch;min-width:0;grid-row:1}
/* the floor the steps stand on: a rounded, outlined base bar, the full width of the podium */
.pl-spot .pl-bpod::after{content:'';grid-column:1/-1;grid-row:2;height:12px;margin:-3px -6px 0;border:3px solid var(--ol);border-radius:10px;background:var(--pod);box-shadow:0 6px 10px -4px rgba(11,22,38,.25)}
.lb-step.p2{grid-column:1}.lb-step.p1{grid-column:2}.lb-step.p3{grid-column:3}
/* the animal stands on the step: its feet overlap the step's top edge */
.lb-fig{position:relative;z-index:1;width:104%;margin:0 -2% -9%}
.lb-step.p1 .lb-fig{width:116%;margin:0 -8% -10%}
.lb-fig .lb-pose{display:block;width:100%;height:auto}
.lb-fig .lb-rig svg{display:block;width:78%;height:auto;margin:0 auto}
/* a time or a sum reads left to right in every language */
.pl :is(.vl,.pf-v,.pf-cell dd,.pl-q-text .n){unicode-bidi:isolate}
.lb-fig .tk{margin:0 auto 10px;--tk:52px}
.lb-burst{position:absolute;z-index:-1;left:50%;top:-6%;width:190%;transform:translateX(-50%);overflow:visible}
.lb-burst.pop{animation:lb-pop .7s var(--ease-out) both}
@keyframes lb-pop{0%{transform:translateX(-50%) scale(.4);opacity:0}60%{transform:translateX(-50%) scale(1.08);opacity:1}100%{transform:translateX(-50%) scale(1)}}
:root[data-chars="off"] .lb-fig .lb-pose{visibility:hidden}
/* the step: our rounded, thick-outlined block; the medal is the only gold, silver or bronze */
.lb-blk{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 6px 10px;
  border:3px solid var(--ol);border-bottom:0;border-radius:16px 16px 0 0;background:var(--pod);box-shadow:inset 0 5px 0 rgba(255,255,255,.35)}
:root[data-theme="dark"] .lb-blk{box-shadow:inset 0 5px 0 rgba(255,255,255,.06)}
.lb-step.p1 .lb-blk{min-height:112px}.lb-step.p2 .lb-blk{min-height:92px}.lb-step.p3 .lb-blk{min-height:80px}
.lb-medal{display:grid;place-items:center;width:30px;height:30px;margin-bottom:4px;border-radius:50%;border:3px solid var(--ol);background:var(--m);
  font:900 15px/1 var(--f-display);color:#15365a;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.lb-step.p1 .lb-medal{--m:var(--gold-m);width:36px;height:36px;font-size:18px}
.lb-step.p2 .lb-medal{--m:var(--silv-m)}.lb-step.p3 .lb-medal{--m:var(--brnz-m)}
.lb-blk .nm{max-width:100%;font:700 13px/1.25 var(--f-body);color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pl .lb-blk .vl{font:800 15px/1.25 var(--f-display);color:var(--ink-2);font-variant-numeric:tabular-nums}
.lb-step.p1 .lb-blk .vl{font-size:17px;color:var(--ink)}
.lb-step.me .lb-blk{background:var(--study-tint)}
.lb-step.me .lb-blk .nm{color:var(--study-ink)}
.lb-you-tag{padding:2px 8px;border-radius:6px;background:var(--study);color:#fff;font:800 12px/1.5 var(--f-body)}
:root[data-theme="dark"] .lb-you-tag{color:#06262a}
/* your stakes under the podium when you stand on it */
.lb-you{display:flex;flex-direction:column;align-items:center;gap:8px;margin:12px 4px 0}
.lb-you[hidden]{display:none}
/* the nudge: the distance to the next place on its own line, then a full-width bar from the place below you to the
   place above, the racer you are chasing at its end */
.lb-nudge{display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:0;width:100%}
.lb-gap{min-width:0;font:700 13px/1.25 var(--f-body);color:var(--study-ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lb-bar{position:relative;display:block;height:10px;margin-right:13px;border-radius:4px;background:color-mix(in srgb,var(--study) 22%,transparent)}
.lb-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:var(--study)}
.lb-tgt{position:absolute;right:-13px;top:50%;width:24px;height:24px;transform:translateY(-50%);border-radius:50%;box-shadow:0 0 0 2px var(--surface)}
.lb-tgt img{display:block;width:100%;height:100%;border-radius:50%}
.lb-you .lb-nudge{max-width:300px;text-align:center}
.lb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.lb-you .lb-meta{justify-content:center;text-align:center}
/* our badge: a die-cut sticker, white, thick navy outline and a navy edge under it, a slight tilt, an illustrated icon */
.lb-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 5px;border:2.5px solid #15365a;border-radius:11px;background:#fff;
  box-shadow:0 2.5px 0 #15365a;transform:rotate(-2.5deg);color:#15365a;white-space:nowrap}
.lb-badge + .lb-badge{transform:rotate(2deg)}
.lb-badge svg{width:20px;height:20px;flex:none;margin:-3px 0}
.lb-badge b{font:800 12.5px/1.3 var(--f-display);letter-spacing:.1px}
.lb-mv{font:600 12px/1.3 var(--f-body);color:var(--ink-3)}
.lb-mv.up{color:var(--study-ink)}
/* the list: one surface, 50 px rows, alternate tint, no separators */
.pl-stage .pl-rows{gap:0;margin-top:14px;border-radius:18px;background:color-mix(in srgb,var(--sunk) 50%,var(--surface));overflow:hidden}
.pl-stage .pl-rows:has(> .pl-empty:only-child){background:none}
.pl-stage .pl-rows li:not(.pl-empty):not(.pl-gap){grid-template-columns:30px 34px minmax(0,1fr) auto;gap:10px;min-height:50px;padding:6px 14px 6px 8px;border-radius:0;background:none;box-shadow:none}
.pl-stage .pl-rows li:not(.pl-empty):not(.pl-gap):nth-child(even){background:color-mix(in srgb,var(--ink) 4%,transparent)}
.pl-stage .pl-rows .rk{font:800 17px/1 var(--f-display);color:var(--ink-3);text-align:center;font-variant-numeric:tabular-nums}
.pl-stage .pl-rows .tk{--tk:34px;box-shadow:none}
.pl-stage .pl-rows .nm{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;font:700 15px/1.25 var(--f-body)}
.pl-stage .pl-rows .nm .n{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pl-stage .pl-rows .nm em{font-style:normal;font-weight:600;color:var(--ink-3)}
.pl .pl-stage .pl-rows .vl{text-align:right;font:800 16px/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.pl-stage .pl-rows li.me:not(.pl-gap){margin:4px;border-radius:14px;background:var(--study-tint)!important;box-shadow:inset 0 0 0 2px var(--study)}
.pl-stage .pl-rows li.me .rk,.pl-stage .pl-rows li.me .nm .n,.pl-stage .pl-rows li.me .vl{color:var(--study-ink)}
.pl-stage .pl-rows li.me .nm em{color:var(--study-ink);opacity:.8}
.pl-stage .pl-rows li.me .tk.me{box-shadow:0 0 0 2px var(--study)}
.pl-stage .pl-rows .lb-sub{display:flex;flex-direction:column;align-items:stretch;gap:12px;white-space:normal}
.pl-stage .pl-rows li.me:not(.pl-gap):has(.lb-sub){grid-template-rows:auto auto;row-gap:12px;padding:14px 14px 14px 8px}
.pl-stage .pl-rows li.me:has(.lb-sub) > .rk,.pl-stage .pl-rows li.me:has(.lb-sub) > .tk{grid-row:1 / span 2;align-self:center}
.pl-stage .pl-rows li.me:has(.lb-sub) > .nm{display:contents}
.pl-stage .pl-rows li.me:has(.lb-sub) .nm .n{grid-column:3;grid-row:1;align-self:center}
.pl-stage .pl-rows li.me:has(.lb-sub) > .vl{grid-column:4;grid-row:1;align-self:center}
.pl-stage .pl-rows li.me:has(.lb-sub) .lb-sub{grid-column:3 / 5;grid-row:2}
.pl-stage .pl-rows li.pl-gap{display:flex;height:22px;min-height:0;justify-content:center;align-items:center;gap:5px;background:none}
.pl-stage .pl-center{margin-top:12px;padding:4px 0 2px}
.pl-stage [data-more]{min-height:44px;padding:0 18px}
:root[data-theme="dark"] .pl-rows li.pl-empty{background:none}
:root[data-theme="dark"] .pl-empty svg rect{fill:#1a2c44}
:root[data-theme="dark"] .pl-empty svg .b1{fill:color-mix(in srgb,var(--gold) 45%,#1a2c44)}
/* no empty band before the footer (the shared footer keeps 72 px above it elsewhere) */
.pl-body .blf{margin-top:24px}
.pl-stile .pl-art-f{height:72%;right:-3%;bottom:-6%}

/* numbers: a rating or a count in this font's tabular figures puts a gap after a 1 ("1 338"), so they use proportional
   figures; times and the countdown clock keep tabular figures so they don't jitter while they change */
.pl :is(.pl-lv-r,.pl-rt,.pl-line1,.pl-rows .vl,.pl-bpod .vl,.pl-ring-n){font-variant-numeric:proportional-nums;font-feature-settings:normal;letter-spacing:0}
.pl-stats{flex-direction:column;align-items:center;gap:0}

/* ================================================================ Phase B: the game picker, the typing race, the
   hexagon word search */
.pl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
.pl-art-hero{aspect-ratio:16/7}
.pl-art-hero.pl-art-type .pl-art-f,.pl-art-hero.pl-art-word .pl-art-f{height:86%;right:5%}
button.pl-stile{display:block;padding:0;border:3px solid transparent;text-align:left;cursor:pointer;font:inherit;color:inherit}
button.pl-stile:hover:not(.soon){border-color:var(--study)}
.pl-stile.soon{cursor:default}
.pl-stile .pl-art{display:block}
.pl-stile .nm{display:block;padding:9px 12px 11px;font:800 15px var(--f-body);color:var(--ink)}
.pl-art-tile{aspect-ratio:16/9}
.pl-stile .pl-art em[hidden]{display:none}

/* the typing race */
.pl-type,.pl-words{background:var(--surface);border-radius:26px;box-shadow:var(--shadow);padding:14px 16px 16px}
.pl-wpm{display:flex;flex-direction:column;align-items:center;line-height:1}
.pl-wpm b{font:900 30px var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.pl-wpm small{font:700 12px var(--f-body);color:var(--ink-3)}
.pl-passage{margin:6px 0 12px;max-height:9.6em;overflow:auto;font:600 21px/1.6 var(--f-body);color:var(--ink-3);scroll-behavior:smooth}
.pl-passage .tw.d{color:var(--study-ink)}
.pl-passage .tw.cur{color:var(--ink);background:var(--sunk);border-radius:6px;box-shadow:0 0 0 3px var(--sunk)}
.pl-passage .tw.cur .ok{color:var(--study-ink)}
.pl-passage .tw.cur .no{color:var(--ink);background:var(--gold-tint);box-shadow:inset 0 -3px 0 var(--gold);border-radius:3px}
.pl-passage .tw.cur .todo{color:var(--ink)}
.pl-tin{width:100%;box-sizing:border-box;min-height:58px;padding:0 16px;border-radius:18px;border:3px solid transparent;background:var(--sunk);color:var(--ink);font:800 24px var(--f-body)}
.pl-tin:focus{outline:none;border-color:var(--study)}
.pl-tin.no{border-color:var(--gold);background:var(--gold-tint)}
@media (max-width:420px){.pl-passage{font-size:18px;max-height:7.4em}}

/* the hexagon word search */
.pl-words .pl-q-top{gap:10px;align-items:center}
.pl-wlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;flex:1}
.pl-wlist li{padding:5px 10px;border-radius:10px;background:var(--sunk);font:800 14px var(--f-display);letter-spacing:.04em;color:var(--ink)}
.pl-wlist li.got{background:var(--study);color:#fff;text-decoration:line-through;text-decoration-thickness:2px}
.pl-hexbox{max-width:440px;margin:6px auto 0;touch-action:none;user-select:none;-webkit-user-select:none}
.pl-hex{display:block;width:100%;height:auto;overflow:visible}
.pl-hex .hx polygon{fill:var(--sunk);stroke:var(--sunk);stroke-width:4;stroke-linejoin:round}
:root[data-theme="dark"] .pl-hex .hx polygon{fill:#1f3452;stroke:#1f3452}
.pl-hex .hx-l text{font:800 26px var(--f-display);fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.pl-hex .hx-l,.pl-hex .hl-g{pointer-events:none}
.pl-hex .hx{cursor:pointer;outline:none}
.pl-hex .hx:focus-visible polygon{stroke:var(--blue);stroke-width:5}
.pl-hex .hl{stroke:var(--study);stroke-width:40;stroke-linecap:round;opacity:.88}
.pl-hex .hl.pop{animation:pl-hl .45s var(--ease-spring)}
@keyframes pl-hl{from{stroke-width:10;opacity:.3}to{stroke-width:40;opacity:.88}}
.pl-hex .sel{stroke:var(--blue);stroke-width:40;stroke-linecap:round;opacity:.45}
.pl-hex .sel.miss{stroke:var(--gold);opacity:.75;animation:pl-nudge-l .4s var(--ease-out)}
@keyframes pl-nudge-l{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.pl-hex .hx-l text.on{fill:#fff}

/* the art, second pass (owner, 12 Oct: one correct sum on one baseline, no decal motion lines, nothing cut mid-shape;
   every piece sits inside the 16:7 hero crop, y 20 to 160 of 180) */
.m-board rect{fill:#15365a}
.m-board text{font:900 22px var(--f-display);fill:#fff;text-anchor:middle;dominant-baseline:central;letter-spacing:.02em}
.m-ring{fill:#fff}
.t-on .t-key{fill:#ffc23d}
.pl-art-f{bottom:4%;height:82%}
.pl-art-maths .pl-art-f{left:3%;right:auto;bottom:4%;height:86%}
.pl-stile .pl-art-f{height:74%;right:3%;bottom:5%}
.pl-art-hero.pl-art-type .pl-art-f,.pl-art-hero.pl-art-word .pl-art-f{height:80%;right:5%;bottom:5%}
:root[data-theme="dark"] .m-board rect{fill:#0f2a3c;stroke:#2cc6d1;stroke-width:2}
.pl-speed{display:none}   /* no motion lines in the race either: the token's dash shows the move */
.pl-passage{position:relative}
.pl-art .pl-art-frog{height:60%;right:4%;bottom:8%}
.pl-art-hero .pl-art-frog{height:64%}

/* race kit (12 Oct): friends' tokens ring in their kit colour; the full figures are the kit poses */
.tk.img{box-shadow:0 0 0 3px var(--kit,var(--surface)),0 3px 8px rgba(0,0,0,.18)}
.tk.img.me{box-shadow:0 0 0 3px var(--kit,var(--study)),0 0 0 6px var(--study),0 3px 10px rgba(0,0,0,.2)}
.pl-art-maths .pl-art-f{left:2%;height:94%;bottom:2%}
.pl-art .pl-art-frog{height:62%}
/* tiles: the art runs to the tile edge (no inset border); the hover ring is an outline */
button.pl-stile{border:0;outline:3px solid transparent;outline-offset:-3px}
button.pl-stile:hover:not(.soon){outline-color:var(--study)}

/* the points word search: the score, the found tray, the +N pops, the results; the grid uses the card's full width so
   each cell is at least 44 px tall at 390 (radius 4, 9 cells across) */
.pl-words{padding-left:8px;padding-right:8px}
.pl-words .pl-q-top{padding:0 8px}
.pl-hexbox{max-width:520px}
.pl-hex .hx polygon.hit{fill:transparent;stroke:none}
.pl-wscore{display:flex;flex-direction:column;align-items:center;line-height:1;min-width:58px}
.pl-wscore b{font:900 32px var(--f-display);color:var(--ink);font-variant-numeric:proportional-nums}
.pl-wscore small{font:700 12px var(--f-body);color:var(--ink-3)}
.pl-how{flex:1;text-align:center;color:var(--ink-3);font:700 14px var(--f-body)}
.pl-how summary{min-height:44px;display:inline-flex;align-items:center;cursor:pointer}
.pl-how p{margin:0 0 4px;color:var(--ink-2)}
.pl-tray{list-style:none;margin:10px 8px 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-height:34px}
.pl-tray li{padding:6px 10px;border-radius:10px;background:var(--study-tint);color:var(--study-ink);font:800 14px var(--f-display);letter-spacing:.03em}
.pl-tray li b{font-family:var(--f-body)}
.pl-tray li.big{background:var(--gold-tint);color:var(--gold-ink)}
.pl-tray li.theme{background:var(--play-tint);color:var(--play-ink)}
.pl-hex .hl.theme{stroke:var(--play)}
.pl-hex .pop text{text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:var(--surface);stroke-width:6px;stroke-linejoin:round}
.pl-hex .pop .pts{font:900 30px var(--f-display);fill:var(--study-ink)}
.pl-hex .pop.big .pts{font-size:40px;fill:var(--gold-ink)}
.pl-hex .pop .lbl{font:800 16px var(--f-body);fill:var(--ink)}
.pl-hex .pop{animation:pl-rise 1.3s var(--ease-out) forwards}
@keyframes pl-rise{0%{opacity:0;transform:translateY(10px) scale(.6)}20%{opacity:1;transform:translateY(0) scale(1.05)}70%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
@media (prefers-reduced-motion:reduce){.pl-hex .pop{animation:none!important}}
.pl-scores{list-style:none;margin:12px auto 0;padding:0;max-width:440px;display:grid;gap:4px;text-align:left}
.pl-scores li{display:grid;grid-template-columns:22px 30px 1fr auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:6px 12px 6px 8px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
.pl-scores li .tk{--tk:30px;grid-row:span 2}
.pl-scores li>span:first-child{grid-row:span 2;font:800 15px var(--f-body);color:var(--ink-3);text-align:center}
.pl-scores li .nm{font:700 15px var(--f-body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-scores li b{font:900 20px var(--f-display);color:var(--ink);grid-row:span 2}
.pl-scores li small{font:700 12.5px var(--f-body);color:var(--ink-3);letter-spacing:.03em}
.pl-scores li.me{box-shadow:inset 0 0 0 2px var(--study)}
.pl-missed{margin:12px 0 0;color:var(--ink-2);font:700 15px var(--f-body)}
.pl-missed span{display:inline-block;margin:3px 2px;padding:4px 9px;border-radius:9px;background:var(--play-tint);color:var(--play-ink);font:800 13.5px var(--f-display);letter-spacing:.03em}

/* the finish: Tally cheers beside your place (top 3 only), never over the podium */
/* a rating in the body font sets a 1 with a wide gap ("1 338"): ratings use the display font, whose figures sit tight */
.pl :is(.pl-rt,.pl-lv-r,.pl-rows .vl,.pl-bpod .vl){font-family:var(--f-display)}

/* review fixes (12 Oct, Phase B) */
/* the passage window shows whole lines only (a multiple of the line height), and a soft fade says there is more */
.pl-passage{max-height:calc(1.6em * 5);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 1.2em),rgba(0,0,0,.25));mask-image:linear-gradient(to bottom,#000 calc(100% - 1.2em),rgba(0,0,0,.25))}
@media (max-width:420px){.pl-passage{max-height:calc(1.6em * 4)}}
/* the racer legend: the same gap after every token, "You" included (its ring is wider) */
.pl-legend li{gap:8px}
.pl-legend li .tk.me{margin-right:5px;margin-left:3px}
/* how to play: a small disclosure button under the score row, a 44 px target */
.pl-how{display:block;text-align:left;margin:4px 8px 0;flex:none}
.pl-how summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:12px;background:var(--sunk);color:var(--ink-2);font:700 14px var(--f-body);cursor:pointer}
.pl-how summary::-webkit-details-marker{display:none}
.pl-how summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.pl-how p{margin:8px 4px 0;color:var(--ink-2);font:600 15px var(--f-body)}

/* ================================================================ Phase C: live chess */
.pl-chess{max-width:520px;margin:0 auto}
.pl-cbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.pl-cbar-who{display:flex;align-items:center;gap:8px;min-width:0;font:800 16px var(--f-body);color:var(--ink)}
.pl-cbar-who .tk{--tk:36px}
.pl-cbar-who .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-cbar.me .pl-cbar-who .nm{color:var(--study-ink)}
.pl-clock{min-width:92px;text-align:center;padding:8px 12px;border-radius:12px;background:var(--sunk);color:var(--ink-2);font:900 24px var(--f-display);font-variant-numeric:tabular-nums}
.pl-clock.run{background:var(--navy);color:#fff}
.pl-clock.run.low{background:var(--gold);color:#15365a}
.pl-cboard{margin:8px 0}
.pl-coffer{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0;padding:10px 12px;border-radius:14px;background:var(--blue-tint);color:var(--ink);font:700 15px var(--f-body)}
.pl-coffer span{flex:1;min-width:160px}
.pl-cacts{display:flex;justify-content:center;gap:10px;margin:12px 0 0}
.pl-cbtn{min-height:44px;padding:0 16px;border:0;border-radius:12px;background:var(--sunk);color:var(--ink);font:700 15px var(--f-body);cursor:pointer}
.pl-cbtn:disabled{color:var(--ink-3);cursor:default}
.pl-coffer .pl-cbtn{background:var(--surface)}
.pl-art-hero.pl-art-chess .pl-art-f{height:84%;right:6%;bottom:4%}

/* chess review fixes (12 Oct): board contrast in Play, the result side by side, spacing under the headline */
.pl-cboard{--chb-l:#e4edf5;--chb-d:#93b4c3}
:root[data-theme="dark"] .pl-cboard{--chb-l:#b4c6d3;--chb-d:#7f9db0}
.pl-end h2{line-height:1.15}
.pl-end .pl-of{margin-top:12px}
.pl-end h2.txt{font-size:clamp(36px,9vw,60px);white-space:nowrap}

/* daily chess: your games in the chess card, and starting one */
.pl-daily{margin:22px 0 0;padding:0}
.pl-daily h3{font:800 18px var(--f-display);margin:0 0 8px;color:var(--ink)}
.pl-daily h3 small{font:600 13px var(--f-body);color:var(--ink-3);margin-left:6px}
.pl-dlist{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.pl-dlist button{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:52px;padding:6px 12px 6px 8px;border:0;border-radius:14px;background:var(--sunk);color:var(--ink);font:700 15px var(--f-body);text-align:left;cursor:pointer}
.pl-dlist .tk{--tk:34px;box-shadow:none}
.pl-dlist .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-dlist .st{font:700 13.5px var(--f-body);color:var(--ink-3);white-space:nowrap}
.pl-dlist .st .go{color:var(--study-ink)}
.pl-dlist .st.mine{color:var(--ink-2)}
.pl-dnew{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pl-days{display:flex;gap:4px;padding:4px;background:var(--sunk);border-radius:14px}
.pl-days button{min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--ink-2);font:700 14px var(--f-body);cursor:pointer}
.pl-days button[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.pl-dres{margin:0 0 8px;text-align:center;font:800 20px var(--f-display);color:var(--ink-2)}
.pl-dres.win{color:var(--study-ink)}
.pl-clock:empty{visibility:hidden}

/* the chess card, second pass (owner, 12 Oct): one Live | Daily switch; the same tiles in both (a title, the format, your
   rating at the same place on every tile); one primary button per mode; daily games as cards with a mini board */
.pl-cmode{margin:0 0 12px}
.pl-levels button{gap:3px;min-height:92px;padding:8px 4px}
.pl-levels .t{font:800 16px var(--f-body)}
.pl-levels .f{font:700 13px var(--f-body);color:var(--ink-3)}
.pl-levels button[aria-checked="true"] .f{color:var(--study-ink)}
.pl-levels .pl-lv-r{min-height:18px;display:inline-flex;align-items:center;gap:3px}
.pl-ico{width:26px;height:26px}
.pl-watch .face{fill:none;stroke:currentColor;stroke-width:2}
.pl-watch .on{fill:currentColor;opacity:.85}
.pl-watch .stem{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.pl-dtiles .pl-ico{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.pl-daily{margin:0;padding:0;border:0}
.pl-dhelp{margin:0 0 10px}
.pl-dlist{margin:0 0 12px;gap:8px}
.pl-dcard{width:100%;display:flex;align-items:center;gap:12px;min-height:76px;padding:8px 12px 8px 8px;border:0;border-radius:16px;background:var(--sunk);color:var(--ink);text-align:left;cursor:pointer;box-shadow:inset 0 0 0 2px transparent}
.pl-dcard.mine{background:var(--study-tint);box-shadow:inset 0 0 0 2px var(--study)}   /* your turn: a full ring, never a left bar (brand/qa/left-bar-lint.cjs) */
.pl-dmini{flex:none;width:64px;height:64px;display:block;border-radius:8px;overflow:hidden}
.pl-dmini .chb{margin:0;max-width:64px}
.pl-dmini .chb-frame{border-radius:6px}
.pl-dmini .chb-sq{font-size:0}
.pl-dmini .chb-cf,.pl-dmini .chb-cr,.pl-dmini .chb-readout{display:none}
.pl-dtxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.pl-dcard .nm{font:800 16px var(--f-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-dcard .st{font:700 14px var(--f-body);color:var(--ink-3)}
.pl-dcard.mine .st{color:var(--study-ink)}
.pl-daily .pl-go{margin-top:14px}

/* ================================================================ Phase C: the puzzle race */
/* puzzles: teal world, the owl in the race kit; a knight's fork in bold gold arrows */
.p-bg{fill:#1c8f8a}.p-blob{fill:#27a39d}
.p-rim{fill:#106662}
.p-lt{fill:#f2fbfa}.p-dk{fill:#a6dcd8}
.p-arrow{fill:none;stroke:#ffc23d;stroke-width:9;stroke-linecap:round}
.p-arrowhead{fill:#ffc23d}
.p-pc path,.p-pc rect{fill:#fff;stroke:#15365a;stroke-width:6;stroke-linejoin:round}
.p-pc-b path,.p-pc-b rect{fill:#15365a;stroke:#15365a}
:root[data-theme="dark"] .p-bg{fill:#0c3b39}:root[data-theme="dark"] .p-blob{fill:#114d4a}
.pl-art-hero.pl-art-puz .pl-art-f{height:84%;right:6%;bottom:4%}
.pl-puz{max-width:520px;margin:0 auto;background:var(--surface);border-radius:26px;box-shadow:var(--shadow);padding:12px 12px 10px}
.pl-puz .pl-q-top{gap:10px}
.pl-ptask{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.2}
.pl-ptask b{font:800 18px var(--f-display);color:var(--ink)}
.pl-ptask small{font:700 14px var(--f-body);color:var(--ink-2);margin-top:2px}
.pl-pboard{margin:6px 0 0}
.pl-puz.ok{box-shadow:inset 0 0 0 3px var(--study),var(--shadow)}
.pl-puz.no{box-shadow:inset 0 0 0 3px var(--gold),var(--shadow)}
/* More games (owner, 12 Oct): the art inset in its card with the title's own 12 px, its corners nested inside the
   card's (a 20 px card, a 12 px inset: an 8 px art); never one card alone on a row. Three cards (four games): 3 across,
   or a row to swipe on a phone. Four cards (with the puzzle race): 2 by 2, or 4 across on wide screens */
.pl-stile > .pl-art{padding:0;margin:12px 12px 0;border-radius:8px;overflow:hidden}
.pl-stile .nm{padding:9px 12px 12px}
.pl-soon-row:has(> .pl-stile:nth-child(5)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0;padding:0;scroll-snap-type:none}
.pl-soon-row:has(> .pl-stile:nth-child(5)) .pl-stile{flex:none}
@media (min-width:1000px){.pl-soon-row:has(> .pl-stile:nth-child(5)){grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Play's other sections (includes/play-hub.php, 13 Oct 2026): our games, practice by subject, with friends. Shown in
   every language and part of the lobby screen; with the races switched off the page opens on them. Tokens only, so
   light and dark follow the site. Flat cards, one primary per card, every target 44 px or more. */
.pl-screen.pl-more{max-width:none;margin:0}
.pl-more .pl-title{margin-top:8px}
.pl-lobby+.pl-more{margin-top:28px}
.px-back{margin:0 0 14px}
.px-back a{font-weight:700;color:var(--study-ink,var(--ink))}
.px-sec{margin:0 0 30px}
.px-sec>h2{font:800 clamp(21px,3.4vw,26px)/1.2 var(--f-display);margin:0 0 12px;color:var(--ink)}
.px-gh{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 8px}
.px-tag{margin:0;font-weight:700;color:var(--ink-2,var(--ink))}
.px-desc{margin:0;color:var(--ink-3);font-size:15px;line-height:1.5}

/* ---------------------------------------------------------------- the games hub (owner, 13 Oct 2026) */
/* Play as a games hub: Understudy as a hero across the width, then the games grid. Each subject is a section row whose
   tiles sit on the page's columns (1 on a phone, 2 from 640 px, 4 from 1100 px); a row is as wide as its tiles, so short
   rows share a line (dense flow) and nothing leaves half the page empty. A tile: its art (one cast character doing the
   activity, light and dark, assets/img/play/), its name, one line and Play; the whole tile is the link. Tokens only. */
.px-h{font:800 clamp(21px,3.4vw,26px)/1.2 var(--f-display);margin:0 0 12px;color:var(--ink)}
.px-sec{margin:0 0 34px}
/* the hero */
.px-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);background:var(--navy);color:var(--on-navy);border-radius:var(--r3);
  box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
@media (min-width:860px){.px-hero{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);min-height:340px}}
.px-hero-img{display:block;background:#1d1b26;aspect-ratio:750/422;min-height:100%}
.px-hero-img img{display:block;width:100%;height:100%;object-fit:cover}
.px-hero-b{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 20px 22px;min-width:0}
@media (min-width:860px){.px-hero-b{justify-content:center;padding:28px 32px}}
.px-chip{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:var(--chip);background:var(--gold);color:#15365a;font:700 13px/1 var(--f-body);letter-spacing:.01em}
/* the status, plain muted words over the name (coordinator, 14 Oct: no pill) */
.px-hero .px-status{margin:0;font:600 14px/1.3 var(--f-body);color:var(--on-navy-2)}
.px-hero h3{margin:2px 0 0;color:var(--on-navy);font:800 clamp(28px,4.4vw,40px)/1.05 var(--f-display);letter-spacing:-.01em}
.px-hero h3 a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}   /* a 44 px target (14 Oct) */
.px-hero .px-tag{margin:0;font:700 17px/1.35 var(--f-body);color:var(--on-navy)}
.px-hero .px-desc{margin:0;font-size:15px;line-height:1.5;color:var(--on-navy-2)}
.px-hero .px-go{align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border-radius:12px;
  background:var(--study-btn);color:var(--on-study-btn);font:800 17px var(--f-body);text-decoration:none;box-shadow:0 3px 0 var(--study-btn-lip);
  transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover)}
.px-hero .px-go svg{width:18px;height:18px;fill:currentColor}
.px-hero .px-go:hover{background:var(--study-btn-hover)}
.px-hero .px-go:active{transform:translateY(2px);box-shadow:0 1px 0 var(--study-btn-lip);background:var(--study-btn-press)}
.px-hero .px-go:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
:root[data-theme="dark"] .px-hero{background:#12233a;box-shadow:inset 0 0 0 1px var(--rule)}
/* the grid */
.px-board{--px-cols:1;--px-gap:18px;display:grid;grid-template-columns:repeat(var(--px-cols),minmax(0,1fr));grid-auto-flow:row dense;gap:30px var(--px-gap);margin:0 0 12px}
@media (min-width:640px){.px-board{--px-cols:2}.px-n2{grid-column:span 2}}
@media (min-width:1100px){.px-board{--px-cols:4;--px-gap:20px}}
.px-row{min-width:0;display:flex;flex-direction:column}
.px-row .px-gh{margin:0 0 12px;font:800 clamp(19px,2.6vw,22px)/1.2 var(--f-display);color:var(--ink);letter-spacing:0;text-transform:none}
.px-tiles{list-style:none;margin:0;padding:0;display:grid;gap:var(--px-gap);grid-template-columns:minmax(0,1fr);flex:1}
@media (min-width:640px){.px-n2 .px-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.px-wide .px-tiles{grid-template-columns:minmax(0,1fr)}}
.px-tiles>li{min-width:0;display:flex}
/* a tile */
.px-tile{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;background:var(--surface);border-radius:var(--r2);box-shadow:var(--shadow);overflow:hidden;
  transition:transform var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover)}
.px-tile:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(21,54,90,.08),0 12px 28px rgba(21,54,90,.12)}
.px-tile:focus-within{outline:3px solid var(--blue);outline-offset:3px}
.px-art{display:block;aspect-ratio:16/9;background:var(--sunk);overflow:hidden}
.px-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-panel) var(--ease-out)}
.px-tile:hover .px-art img{transform:scale(1.03)}
.px-ad{display:none!important}
:root[data-theme="dark"] .px-al{display:none!important}
:root[data-theme="dark"] .px-ad{display:block!important}
.px-tb{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:1;padding:14px 16px 16px;min-width:0}
.px-tile h3{margin:0;font:800 19px/1.2 var(--f-display);color:var(--ink)}
.px-tl{color:inherit;text-decoration:none}
.px-tl::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit}
.px-tl:focus-visible{outline:none}
.px-line{font-size:14.5px;line-height:1.45;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.px-play{margin-top:auto;display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:12px;background:var(--btn-2);color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--btn-2-edge),0 2px 0 var(--btn-2-lip);font:800 15px var(--f-body);transition:background-color var(--dur-hover)}
.px-tb .px-line+.px-play{margin-top:10px}
.px-tile:hover .px-play{background:var(--study-btn);color:var(--on-study-btn);box-shadow:0 2px 0 var(--study-btn-lip)}
/* the wide tile (with friends): the art beside the words from 640 px, each on one of the grid's columns */
@media (min-width:640px){
  .px-wide .px-tile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--px-gap)}
  .px-wide .px-art{aspect-ratio:auto;min-height:100%}
  .px-wide .px-art img{object-position:62% 50%}
  .px-wide .px-tb{justify-content:center;padding:18px 18px 18px 0}
  .px-wide .px-tile h3{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.px-tile,.px-art img{transition:none}.px-tile:hover{transform:none}.px-tile:hover .px-art img{transform:none}}

/* Batch E (coordinator, 14 Oct 2026). The page head when the races are off: the study hubs' rhythm (includes/study.php
   .sh: the h1 at line-height 1.1, an 18 px lede 10 px under it, 32 px to the content). "Our games" stays for screen
   readers only there (the h1 already says Play); with the lobby above it, it is the divider and shows. */
.pl-more>.pl-title{margin:24px 0 32px}   /* + .pl's 12 px top padding = the hubs' 36 px */
.pl-more>.pl-title h1{margin:0;line-height:1.1}
.pl-more>.pl-title .pl-sub{margin:10px 0 0;font-size:18px;color:var(--ink-2,var(--ink))}
@media (max-width:560px){.pl-more>.pl-title{margin-top:10px}}
.px-touch{display:none}
/* Phones: a compact tile, the art a square thumbnail on the left and the words beside it (each tile was a screen tall).
   The whole tile stays the link, so the target is the tile. The hero keeps its art across the width, a little tighter. */
@media (max-width:639px){
  .px-board{gap:26px var(--px-gap)}
  .px-tiles{gap:12px}
  .px-tile{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:stretch}
  .px-art{aspect-ratio:auto;width:116px;min-height:116px;height:100%}
  .px-art img{object-position:58% 50%}
  .px-tb{justify-content:center;padding:12px 14px;gap:2px}
  .px-tile h3{font-size:18px}
  .px-line{font-size:14px;line-height:1.4}
  .px-tb .px-line+.px-play{margin-top:8px}
  .px-hero-b{gap:6px;padding:16px 18px 18px}
  .px-hero h3{font-size:28px}
  .px-hero .px-tag{font-size:16px}
  .px-hero .px-go{margin-top:4px;min-height:48px}
}
/* Touch screens: the poster is the game's title screen, whose middle line says to press Enter. Show only the marquee
   above that line (the poster's top 228 of 422 px, no new art); the band sits on the poster's own dark. The card adds
   one line instead: the game plays by touch (its own thumb controls, assets/understudy js/core/touch.js), held sideways. */
@media (hover:none) and (pointer:coarse){
  .px-hero-img{aspect-ratio:auto;min-height:0;display:flex;align-items:center;background:linear-gradient(#181621,#211d2c)}
  .px-hero-img img{height:auto;aspect-ratio:750/228;object-position:50% 0;clip-path:inset(2px 0 0)}   /* the poster's dark first row */
  .px-touch{display:block;margin:0;font:600 14px/1.35 var(--f-body);color:var(--on-navy-2)}
}

/* ---------------------------------------------------------------- real players first (owner, 13 Oct 2026) */
/* Find a race is the only way in. Guests get "Sign in to race real players" in its place (the same button shape);
   the live line counts who is racing now (numbers only, never who); the search shows who is looking and a bar to the
   longest wait (about 12 s, then labelled bots fill the empty seats); a friends' room shows its link and who is in. */
a.pl-go-a{text-decoration:none;color:var(--on-study-btn,#fff);box-sizing:border-box;text-align:center}
.pl-live{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 0;font:700 14px var(--f-body);color:var(--ink-2)}
.pl-live i{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 50%,transparent);animation:pl-pulse 1.8s var(--ease-out) infinite}
@keyframes pl-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
[data-invite]{margin-top:6px}
.pl-qwait{color:var(--ink-3);font-size:14px}
.pl-room{max-width:460px;margin:8px auto 0;display:flex;flex-direction:column;gap:12px;text-align:center}
.pl-room-link{display:flex;gap:8px}
.pl-room .pl-go:disabled{opacity:1}
@media (prefers-reduced-motion:reduce){.pl-live i{animation:none}}
:root[data-motion="off"] .pl-live i{animation:none}

/* the stage (owner, 13 Oct): one race track for the wait, a friends' room, the count in and the race itself, never a
   cut to another track. A calm sky and a low stand at about a fifth of the height (day: a soft sky, two clouds,
   bunting, rounded heads in muted brand tones; night: a navy sky, stars, two floodlight towers), then a clay running
   track with a fine rubber grain, a darker kerb, a narrow green infield edge with a rounded white line, crisp white
   lane lines and the lane numbers painted at the start. One line weight across the stage (3 px). Each racer stands in
   its own lane, centred, feet on the lane's middle with a contact shadow, at about 80% of the lane's height, its
   name tag inside the lane to its right; --f (0 to 1) carries it from the start line to the finish. */
.pl-wstage{min-height:calc(100svh - 120px);display:flex;flex-direction:column;gap:14px;padding:8px 0 28px;box-sizing:border-box;transition:opacity .2s var(--ease-in)}
.pl-wstage.pl-out>:not(.pl-wtrack){opacity:0}
.pl-whead{text-align:center}
.pl-whead h2{margin:4px 0 8px;font:800 clamp(28px,5vw,40px)/1.1 var(--f-display);color:var(--ink)}
.pl-wcount{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0;min-height:44px}
.pl-wc{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:14px;background:var(--study-tint);color:var(--study-ink);font:800 clamp(18px,3.4vw,23px) var(--f-display)}
.pl-wc-r{background:var(--gold-tint);color:var(--gold-ink)}
.pl-wc-r::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--ok);animation:pl-pulse 1.8s var(--ease-out) infinite}
.pl-wtrack{--th:clamp(350px,46vw,430px);--sky:20%;--skyf:.2;--sl:clamp(64px,13%,128px);--fw:clamp(20px,3.6%,34px);--lh:calc((var(--th) * .8 - 14px) / 4);--bh:calc(var(--lh) * 1.16);--rw:calc(var(--bh) * .72);
  --s1:#d9eefc;--s2:#fff8ec;--stand:#c9d6e6;--clay:#cf6a43;--kerb:#a9512f;--grass:#5bb563;--line:#fff;
  position:relative;height:var(--th);border-radius:var(--r3);overflow:hidden;background:linear-gradient(var(--s1),var(--s2) var(--sky));box-shadow:var(--shadow);isolation:isolate}
.pl-wsky{position:absolute;left:0;right:0;top:0;height:var(--sky);width:100%;display:block}
.sk-cloud ellipse{fill:#fff;opacity:.9}
.sk-night{display:none}
.pl-wlanes{position:absolute;left:0;right:0;top:var(--sky);bottom:0;display:flex;flex-direction:column;padding:7px 0;
  background-color:var(--clay);
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px),radial-gradient(rgba(0,0,0,.06) 1px,transparent 1.4px);
  background-size:7px 7px,11px 11px;background-position:0 0,3px 5px;
  box-shadow:inset 0 3px 0 var(--grass),inset 0 6px 0 var(--line),inset 0 9px 0 var(--kerb),inset 0 -3px 0 var(--grass),inset 0 -6px 0 var(--line),inset 0 -9px 0 var(--kerb)}
.pl-wlanes::before{content:'';position:absolute;left:var(--sl);top:9px;bottom:9px;width:3px;background:var(--line)}
.pl-wlane{position:relative;flex:1;min-height:0}
.pl-wlane+.pl-wlane{border-top:3px solid var(--line)}
.pl-wnum{position:absolute;left:clamp(6px,1.4%,14px);top:5px;font:900 clamp(13px,1.8vw,17px)/1 var(--f-display);color:rgba(255,255,255,.7)}
.pl-wfin{position:absolute;right:0;top:calc(var(--sky) + 9px);bottom:9px;width:var(--fw);background:repeating-conic-gradient(#15365a 0 25%,#fff 0 50%) 0 0/14px 14px}
.pl-wopen{position:absolute;left:calc(var(--sl) + 14px);top:50%;transform:translateY(-50%);width:calc(var(--lh) * .5);height:calc(var(--lh) * .5);border-radius:50%;border:3px dashed rgba(255,255,255,.7)}
/* a runner: centred in its lane, feet on the lane's middle line, a contact shadow under them, the tag beside it */
.pl-wrun{position:absolute;z-index:2;top:0;bottom:0;left:calc(var(--sl) - var(--rw) * .55 + (100% - var(--sl) - var(--fw) - var(--rw) * .45) * var(--f));display:flex;align-items:center;gap:4px;
  transition:left .6s var(--ease-out)}
.pl-wbody{position:relative;display:block;height:var(--bh);width:var(--rw);flex:none}
.pl-wbody::after{content:'';position:absolute;left:18%;right:18%;bottom:1px;height:8%;border-radius:50%;background:rgba(60,20,8,.32);z-index:-1}
.pl-wbody svg{display:block;width:100%;height:100%;overflow:visible}
.pl-wrun.me:not(.arrive) .pl-wbody svg{transform-origin:50% 98%;animation:pl-warm 1.8s var(--ease-io) infinite}
.in-race .pl-wrun.me .pl-wbody svg,.pl-cd .pl-wrun.me .pl-wbody svg,.pl-wrun.rig .pl-wbody svg{animation:none}   /* the rig has its own idle loop */
.pl-wtag{max-width:calc(var(--lh) * 2.2);overflow:hidden;text-overflow:ellipsis;padding:2px 8px;border-radius:7px;background:#fff;color:#15365a;font:800 clamp(11px,1.6vw,13px)/1.3 var(--f-body);box-shadow:0 0 0 3px rgba(21,54,90,.12);white-space:nowrap}
.pl-wrun.arrive{animation:pl-arrive .95s linear both}
@keyframes pl-warm{0%,100%{transform:translateY(0) scale(1,1)}22%{transform:translateY(0) scale(1.03,.96)}50%{transform:translateY(-4px) scale(.99,1.02)}78%{transform:translateY(0) scale(1.015,.985)}}
@keyframes pl-arrive{0%{transform:translateX(-240%)}80%{transform:translateX(7%)}90%{transform:translateX(-2%)}100%{transform:translateX(0)}}
/* the count in: the numerals big and centred over the stage in the display face with a coloured outline, Go in green,
   Tally at the start line waving the flag */
.pl-wcd{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:var(--sky) calc(var(--fw) + 5%) 0 0;pointer-events:none}
.pl-wcd b{position:relative;z-index:4;font:900 clamp(72px,17vw,170px)/1 var(--f-display);color:#fff;-webkit-text-stroke:clamp(6px,1.2vw,10px) #6a4bc4;paint-order:stroke fill;text-shadow:0 8px 0 rgba(21,54,90,.35)}
.pl-wcd b.go{color:#2fbf5f;-webkit-text-stroke-color:#15365a;font-size:clamp(60px,14vw,140px)}
.pl-wcd b.pop{animation:pl-pop .9s var(--ease-out) both}
.pl-wcd-f{position:absolute;z-index:1;left:calc(var(--sl) - var(--th) * .12);top:0;height:calc(var(--th) * var(--skyf, .2) * 1.15);width:auto;transform-origin:50% 90%;animation:pl-flag .9s var(--ease-io) infinite alternate;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.pl-cd .pl-wopen{opacity:.4}
.pl-screen.pl-in>:not(.pl-wtrack){animation:pl-xin .4s var(--ease-out) both}
@keyframes pl-xin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pl-wtrack.in-race{margin:0 0 14px}
.pl-wtrack{direction:ltr}   /* a track runs left to right in every language (the finish is on the right; the runners face it) */
:root[dir="rtl"] .pl-wtrack .pl-wtag{direction:rtl}   /* the name pill stays right of its racer, its own text right to left */
.pl-rhead{padding-top:16px;margin-bottom:14px}
.pl-rhead h2,.pl-rhead .pl-rh{margin:4px 0 8px;font:800 clamp(28px,5vw,40px)/1.1 var(--f-display);color:var(--ink)}
.pl-rhead .pl-wcount{display:none}   /* the count in hides the wait's counts too: the same height */
.pl-wstage .pl-qwait{text-align:center;margin:0;color:var(--ink-3);font:700 16px var(--f-body);font-variant-numeric:tabular-nums}
.pl-room-link{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.pl-room-url{flex:1 1 200px;min-width:0;display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;border:2px solid var(--btn-2-edge);background:var(--surface);color:var(--ink);font:700 16px var(--f-body);white-space:nowrap;overflow:hidden}
.pl-room-link .pl-cbtn{min-height:48px;padding:0 18px;font-size:16px}
.pl-runner.crouch .tk{animation:pl-crouch .62s var(--ease-io)}
@keyframes pl-crouch{0%{transform:none}35%{transform:translateY(5px) scale(1.18,.74)}70%{transform:translateY(-4px) scale(.95,1.08)}100%{transform:none}}
.pl-runner .tk{transform-origin:50% 100%}
/* the night race: a navy sky with a few stars and two floodlight towers, the stand a dark silhouette, the clay and the
   grass deeper under the lights, the lines still crisp */
:root[data-theme="dark"] .pl-wtrack{--s1:#0b1626;--s2:#16294a;--stand:#0f1d33;--clay:#a9512f;--kerb:#863d22;--grass:#2f7a3a}
:root[data-theme="dark"] .sk-day{display:none}
:root[data-theme="dark"] .sk-night{display:inline}
:root[data-theme="dark"] .sk-star{fill:#fff6d6;opacity:.8}
:root[data-theme="dark"] .sk-pole{fill:#2c3e57}
:root[data-theme="dark"] .sk-lamp{fill:#fff1c2;filter:drop-shadow(0 0 6px #ffe7a0)}
:root[data-theme="dark"] .pl-wlanes{background-image:radial-gradient(ellipse 60% 50% at 20% 0%,rgba(255,240,200,.14),transparent 70%),radial-gradient(ellipse 60% 50% at 80% 0%,rgba(255,240,200,.14),transparent 70%),radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px),radial-gradient(rgba(0,0,0,.08) 1px,transparent 1.4px);
  background-size:100% 100%,100% 100%,7px 7px,11px 11px;background-position:0 0,0 0,0 0,3px 5px}
:root[data-theme="dark"] .pl-wcd b{-webkit-text-stroke-color:#8f74e8}
@media (prefers-reduced-motion:reduce){.pl-wbody,.pl-wrun.arrive,.pl-runner.crouch .tk,.pl-wc-r::before,.pl-wcd-f,.pl-wcd b.pop,.pl-screen.pl-in>*{animation:none!important}.pl-wrun{transition:none}}
:root[data-motion="off"] :is(.pl-wbody,.pl-wrun.arrive,.pl-runner.crouch .tk,.pl-wc-r::before,.pl-wcd-f,.pl-wcd b.pop,.pl-screen.pl-in>*){animation:none!important}
:root[data-motion="off"] .pl-wrun{transition:none}

/* the racer picker (owner, 13 Oct): race as one of the cast, kept on the account; a random one until you pick */
.pl-pick{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin:14px 0 0}
.pl-pick-l{font:800 15px var(--f-body);color:var(--ink-2)}
.pl-pick-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pl-pick-row button{width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--sunk);cursor:pointer;box-shadow:inset 0 0 0 3px transparent;transition:transform var(--dur-press) var(--ease-out),box-shadow var(--dur-hover)}
.pl-pick-row button img{display:block;width:100%;height:100%;border-radius:50%}
.pl-pick-row button[aria-checked="true"]{box-shadow:inset 0 0 0 3px var(--study),0 0 0 3px var(--study-tint)}
.pl-pick-row button:active{transform:scale(.94)}

/* the top band (owner, 13 Oct): bunting hanging from its string in swags between posts, a small stand of crowd
   silhouettes in two tiers; day and night. Motion: the pennants sway out of phase, the crowd bobs during the race and
   cheers at a finish (.pl-cheer); none with reduced motion or Study display's motion off */
.sk-string{fill:none;stroke:#15365a;stroke-width:1.6;stroke-linecap:round}
.sk-pen{stroke:#15365a;stroke-width:1.3;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 0;animation:sk-sway 2.6s ease-in-out infinite alternate}
@keyframes sk-sway{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.pf0{fill:#0d9aa7}.pf1{fill:#ffc23d}.pf2{fill:#e0559a}.pf3{fill:#6a4bc4}.pf4{fill:#3a9be8}
.sk-postp{fill:#7a8fa8}.sk-postk{fill:#15365a}
.sk-tier-b{fill:#cfdbea}.sk-tier-f{fill:#bfcde0}
.sk-fan{opacity:.85;transform-box:fill-box;transform-origin:50% 100%}
.sk-fan .sk-body,.sk-fan .sk-hd{fill:var(--fan)}
.sk-fan .sk-arm{fill:none;stroke:var(--fan);stroke-width:2.8;stroke-linecap:round}
.sk-tiny{stroke:#15365a;stroke-width:.8;stroke-linejoin:round}
.sk-fan.h0{--fan:#8fb8de}.sk-fan.h1{--fan:#e7a9c8}.sk-fan.h2{--fan:#f2cf7e}.sk-fan.h3{--fan:#b5a6e6}
.in-race .sk-fan{animation:sk-bob 1.7s ease-in-out infinite alternate}
@keyframes sk-bob{from{transform:translateY(0)}to{transform:translateY(-1.6px)}}
.pl-cheer .sk-fan{animation:sk-cheer .42s ease-out 4 alternate}
@keyframes sk-cheer{from{transform:translateY(0)}to{transform:translateY(-6px)}}
:root[data-theme="dark"] .sk-string{stroke:#9fb3c8}
:root[data-theme="dark"] .sk-pen{stroke:#0b1626;opacity:.9}
:root[data-theme="dark"] .sk-tier-b{fill:#14243a}:root[data-theme="dark"] .sk-tier-f{fill:#1a2d47}
:root[data-theme="dark"] .sk-fan{opacity:.75}
:root[data-theme="dark"] .sk-fan.h0{--fan:#3b5d84}:root[data-theme="dark"] .sk-fan.h1{--fan:#6b4566}:root[data-theme="dark"] .sk-fan.h2{--fan:#0a7f8a}:root[data-theme="dark"] .sk-fan.h3{--fan:#4d4580}
:root[data-theme="dark"] .sk-postp{fill:#3b5272}:root[data-theme="dark"] .sk-postk{fill:#9fb3c8}
@media (prefers-reduced-motion:reduce){.sk-pen,.sk-fan{animation:none!important}}
:root[data-motion="off"] :is(.sk-pen,.sk-fan){animation:none!important}

/* ---------------------------------------------------------------- the finish (owner, 13 Oct: Brainlag TV, not a template)
   The podium is the hero: real steps (first 100, second 72, third 52), each block a lighter top face over a shaded
   front with the place engraved in it, a navy line like the art; names and times on a label under each step. The racers
   stand on it full-body (BLRunner, bl-play.js finAnim): first jumping, second clapping, third waving. "You" rides above
   your racer's head on every screen. One bold headline (the place; You won, Rook won or Draw in chess) with a quiet line
   and chips under it; off the podium your racer stands beside it with a medal. A stat strip; chess shows the final
   position between both players. Ribbons and confetti for the top 3 (and a chess win), gone once they have fallen. */
.pl .vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pl-end{position:relative}
.pl-screen.pl-end{max-width:900px}
.pf{position:relative;margin:4px auto 0;max-width:880px}
.pf-pod{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:clamp(8px,2vw,18px);padding:clamp(44px,7vw,92px) 0 4px;isolation:isolate;
  --ln:#15365a;--fh:clamp(118px,25vw,252px);--h1:clamp(86px,15vw,160px)}
.pf-col{display:flex;flex-direction:column;align-items:center;min-width:0}
.pf-col.empty{visibility:hidden}
.pf-fig{position:relative;display:block;height:var(--fh);width:calc(var(--fh) * .75);margin:0 0 -5%;z-index:2;pointer-events:none}
.pf-rig,.pf-rig svg,.pf-fig > img{display:block;width:100%;height:100%}
.pf-fig > img{object-fit:contain;object-position:50% 100%}
.pf-youtag{position:absolute;left:50%;top:0;transform:translate(-50%,-100%);z-index:3;padding:3px 10px 4px;border-radius:var(--chip);background:var(--study);color:#fff;
  font:800 clamp(12px,1.6vw,14px)/1.2 var(--f-body);white-space:nowrap;box-shadow:0 3px 8px rgba(13,154,167,.35)}
.pf-youtag::after{content:'';position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;background:inherit;transform:rotate(45deg);border-radius:2px;z-index:-1}
.pf-blk{width:100%;display:flex;flex-direction:column;filter:drop-shadow(0 8px 12px rgba(21,54,90,.16))}
.pf-top{height:clamp(12px,2vw,20px);border:2.5px solid var(--ln);border-bottom:0;border-radius:16px 16px 0 0;background:var(--pt)}
.pf-front{display:grid;place-items:center;height:var(--h);border:2.5px solid var(--ln);border-top-width:2px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,var(--pf) 0%,var(--pb) 100%)}
.pf-col.p1{--pt:#ffe08a;--pf:#ffc23d;--pb:#f0a51c;--h:var(--h1)}
.pf-col.p2{--pt:#f4f7fb;--pf:#d9e1ea;--pb:#bfcad8;--h:calc(var(--h1) * .72)}
.pf-col.p3{--pt:#ffd3b3;--pf:#f4a674;--pb:#de8752;--h:calc(var(--h1) * .52)}
/* the place engraved: a darker cut with a light lower lip */
.pf-n{font:800 calc(var(--h1) * .4)/1 var(--f-display);color:rgba(21,54,90,.3);text-shadow:0 2px 0 rgba(255,255,255,.6),0 -1px 0 rgba(21,54,90,.25)}
.pf-col.p3 .pf-n{font-size:calc(var(--h1) * .32)}
.pf-lab{display:flex;flex-direction:column;align-items:center;max-width:100%;margin:8px 0 0;line-height:1.25}
.pf-nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 clamp(13px,1.8vw,16px) var(--f-body);color:var(--ink)}
.pf-v{font:700 clamp(12px,1.6vw,14px) var(--f-body);color:var(--ink-3);font-variant-numeric:tabular-nums}
.pf-col.me .pf-front,.pf-col.me .pf-top{border-color:var(--study)}
.pf-col.me .pf-blk{filter:drop-shadow(0 8px 16px rgba(13,154,167,.4))}
/* ribbons from behind first place: drawn out, then they fade */
.pf-rib{position:absolute;left:50%;top:0;width:min(560px,96%);transform:translateX(-50%);z-index:-1;overflow:visible;opacity:0}
.pf-rib path{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:160}
.pf-pod.go .pf-rib{animation:pf-ribf 2.8s var(--ease-out) .15s both}
.pf-pod.go .pf-rib path{animation:pf-draw .9s var(--ease-out) both}
@keyframes pf-draw{to{stroke-dashoffset:0}}
@keyframes pf-ribf{0%{opacity:1}70%{opacity:1}100%{opacity:0}}
/* the headline: one line of result, the quiet line and the chips under it; off the podium your racer beside it */
.pf-res{display:flex;align-items:center;justify-content:center;gap:4px 18px;margin:clamp(14px,3vw,26px) 0 0}
.pf-hl{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.pf-res.off .pf-hl{align-items:flex-start;text-align:start}
.pf-h{margin:0;font:800 clamp(40px,7vw,64px)/1 var(--f-display);color:var(--ink)}
.pf-h sup{font-size:.48em;vertical-align:.85em}
.pf-sub{display:flex;align-items:center;justify-content:inherit;flex-wrap:wrap;gap:6px 10px;margin:8px 0 0;font:700 16px var(--f-body);color:var(--ink-3)}
.pf-res:not(.off) .pf-sub{justify-content:center}
.pf-foot{position:relative;flex:none}
.pf-foot .pf-mefig{--fh:clamp(120px,20vw,190px);margin:0}
.pf-foot .pf-medal{position:absolute;right:-8px;bottom:6px;width:46px;height:46px;margin:0;z-index:3}
.pf-foot .pf-medal b{font-size:21px}
.pf-medal{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:2.5px solid #15365a;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 45%),var(--md);box-shadow:inset 0 0 0 4px rgba(255,255,255,.35),0 4px 10px rgba(21,54,90,.2)}
.pf-medal b{font:800 26px/1 var(--f-display);color:#15365a}
.pf-medal .rb{position:absolute;top:-15px;left:50%;width:26px;height:18px;transform:translateX(-50%);z-index:-1}
.pf-medal .rb::before,.pf-medal .rb::after{content:'';position:absolute;top:0;width:11px;height:20px;border:2.5px solid #15365a;border-bottom:0;border-radius:3px 3px 0 0}
.pf-medal .rb::before{left:0;background:#3ccfb4;transform:skewX(14deg)}
.pf-medal .rb::after{right:0;background:#ff7aa8;transform:skewX(-14deg)}
.pf-medal.m1{--md:#ffc23d}.pf-medal.m2{--md:#d9e1ea}.pf-medal.m3{--md:#f4a674}.pf-medal.m4{--md:#7fd8d5}
.pf-chip{direction:ltr;unicode-bidi:isolate;display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:0 12px;border-radius:var(--chip);background:var(--study-tint);color:var(--study-ink);font:800 15px var(--f-body);font-variant-numeric:tabular-nums}
.pf-chip.down{background:var(--warn-tint,#fff1e0);color:var(--warn-ink)}
/* the stat strip: the course UI's tiles, values first */
.pf-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,40%),1fr));gap:10px;width:100%;max-width:760px;box-sizing:border-box;margin:22px auto 0;padding:0;text-align:start}
.pf-cell{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 14px 13px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink-3) 22%,transparent),var(--shadow);overflow:hidden}
.pf-cell dt{font:700 14px var(--f-body);color:var(--ink-2)}
.pf-cell dd{margin:0;display:flex;align-items:baseline;gap:2px;direction:ltr;justify-content:flex-end}
:root:not([dir="rtl"]) .pf-cell dd{justify-content:flex-start}
.pf-cell dd b{font:800 clamp(28px,4vw,34px)/1.05 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.pf-cell dd small{font:700 16px var(--f-body);color:var(--ink-3)}
.pf-dots{display:flex;gap:4px;margin-top:4px;direction:ltr}
:root[dir="rtl"] .pf-dots{justify-content:flex-end}
.pf-dots i{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--ink-3) 32%,transparent)}
.pf-dots i.on{background:var(--study)}
.pf-cell.new{box-shadow:inset 0 0 0 2px var(--gold),var(--shadow)}
.pf-newb{align-self:flex-start;margin-top:2px;padding:2px 9px;border-radius:var(--chip);font:800 12.5px var(--f-body);color:#15365a;
  background:linear-gradient(110deg,#ffc23d 0%,#ffc23d 40%,#fff3c4 50%,#ffc23d 60%,#ffc23d 100%);background-size:250% 100%;animation:pf-shine 2.4s var(--ease-out) .6s 2 both}
@keyframes pf-shine{from{background-position:100% 0}to{background-position:-50% 0}}
.pf-acts{display:grid;gap:10px;max-width:760px;margin:6px auto 0}
.pf-acts .pl-go{margin-top:16px}
.pl-go2{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border:2px solid var(--study);border-radius:18px;
  background:var(--surface);color:var(--study-ink);font:800 17px var(--f-body);cursor:pointer}
.pl-go2[aria-pressed="true"]{background:var(--study-tint)}
/* chess: the last position between both players, each about 70% of the board's height */
.cf{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,300px) minmax(0,1fr);align-items:end;gap:clamp(8px,2vw,22px);margin:clamp(14px,3vw,30px) 0 0}
.cf-side{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.cf-side .pf-fig{--fh:clamp(120px,20vw,210px);margin:0}
.cf-side .nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 15px var(--f-body);color:var(--ink-2)}
.cf-mid{min-width:0;align-self:center}
.cf-board{border-radius:12px;overflow:hidden;box-shadow:0 0 0 2.5px #15365a,var(--shadow)}
.cf-step{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;font:700 14px var(--f-body);color:var(--ink-2);text-align:center}
.cf-step .pl-icon-btn svg{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cf-step span{min-width:0;flex:1}
.cf-fig > img{transform:scale(1.22);transform-origin:50% 100%}   /* Rook's drawings have more air round them than the rig */
:root[dir="rtl"] .cf-step .pl-icon-btn svg{transform:scaleX(-1)}
/* dark: the blocks keep their metals, the lines go navy-black, the outline button keeps a 3:1 edge */
:root[data-theme="dark"] .pf-pod{--ln:var(--paper)}
:root[data-theme="dark"] .pf-blk{filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
:root[data-theme="dark"] .pf-medal{border-color:var(--paper)}
:root[data-theme="dark"] .pf-cell{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink-3) 34%,transparent)}
:root[data-theme="dark"] .pf-cell.new{box-shadow:inset 0 0 0 2px var(--gold)}
:root[data-theme="dark"] .pl-go2{background:transparent;border-color:var(--study-ink);color:var(--study-ink)}   /* the dark theme's teal ink: well over 3:1 on navy */
:root[data-theme="dark"] .cf-board{box-shadow:0 0 0 2.5px var(--paper),0 6px 14px rgba(0,0,0,.4)}
@media (max-width:520px){
  .cf{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"b b" "m t";row-gap:6px}
  .cf-mid{grid-area:b;max-width:280px;width:100%;justify-self:center}
  .cf-side.me{grid-area:m}.cf-side.them{grid-area:t}
  .cf-side .pf-fig{--fh:150px}
  .pf-res.off{gap:4px 10px}
}
@media (prefers-reduced-motion:reduce){.pf-rib{display:none}.pf-newb{animation:none}}
:root[data-motion="off"] .pf-rib{display:none}
:root[data-motion="off"] .pf-newb{animation:none}

/* ---------------------------------------------------------------- the maths race's topics (Maths Practice merged in) */
.pl-topics{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.pl-topics button,.pl-btopic button{min-height:40px;padding:0 14px;border:0;border-radius:var(--chip);background:var(--sunk);color:var(--ink-2);font:700 14.5px var(--f-body);cursor:pointer;transition:background-color .15s,transform .1s var(--ease-out)}
.pl-topics button[aria-checked="true"],.pl-btopic button[aria-checked="true"]{background:var(--study);color:#fff}
.pl-topics button:active,.pl-btopic button:active{transform:scale(.96)}
.pl-btopic{display:flex;gap:6px;margin:4px 0 10px}
.pl-keys{direction:ltr}   /* a keypad reads 7 8 9 left to right in every language, as on a phone */
.pl-keys .pl-key.wide3{grid-column:span 4}
.pl-keys.has-frac .pl-key.wide3{grid-column:span 3}
.pl-keys .pl-key.frac{display:none}
.pl-keys.has-frac .pl-key.frac{display:block}
.pl-streak{margin:0 auto;padding:4px 12px;border-radius:var(--chip);background:var(--gold-tint);color:var(--gold-ink);font:800 15px var(--f-body);font-variant-numeric:tabular-nums}
.pl-streak.pop{animation:pl-spop .35s var(--ease-out)}
@keyframes pl-spop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.pf-miss{width:100%;max-width:760px;box-sizing:border-box;margin:16px auto 0;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--sunk),var(--shadow);text-align:start}
.pf-miss summary{min-height:48px;display:flex;align-items:center;gap:8px;padding:0 14px;font:800 16px var(--f-body);color:var(--ink);cursor:pointer}
.pf-miss summary span{padding:1px 8px;border-radius:var(--chip);background:var(--warn-tint,#fff1e0);color:var(--warn-ink);font-size:13px}
.pf-miss ol{margin:0;padding:0 14px 12px;list-style:none;display:grid;gap:10px}
.pf-miss li{padding:10px 0 0;border-top:1.5px solid var(--sunk)}
.pf-miss .q{font:600 15.5px/1.45 var(--f-body);color:var(--ink)}
.pf-miss .q p{margin:0}
.pf-miss .a{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 0;font:600 14px var(--f-body);color:var(--ink-3)}
.pf-miss .a b{font-weight:800;color:var(--warn-ink);font-variant-numeric:tabular-nums;unicode-bidi:isolate;direction:ltr}
.pf-miss .a .ok b{color:var(--study-ink)}
.pf-miss .ex{margin:6px 0 0;padding:8px 10px;border-radius:10px;background:var(--sunk);font:600 14px/1.45 var(--f-body);color:var(--ink-2)}
.pf-signin{margin:12px 0 0;text-align:center;font:700 15px var(--f-body)}
.pf-signin a{color:var(--study-ink)}
@media (prefers-reduced-motion:reduce){.pl-streak.pop{animation:none}}

/* ---------------------------------------------------------------- the practice round (signed out; bl-play.js "the
   practice round"): Noodle's time under the button, a two-lane stage (you and Noodle's pace), the words to find, and
   the end sheet in the Learn kit's voice (.blk-sheet: a mark, one line, one detail). Motion 200 ms, transform and
   opacity only, none with reduced motion or Study display's motion off */
.pl-pnoodle{margin:10px 0 0;text-align:center;color:var(--ink-2);font:700 15.5px var(--f-body);font-variant-numeric:tabular-nums}
.pl-ptarget{margin:0 0 4px;color:var(--ink-2);font:700 16px var(--f-body);font-variant-numeric:tabular-nums}
.pl-wtrack.pl-p2{--th:clamp(250px,30vw,300px);--lh:calc((var(--th) * .8 - 14px) / 2.6)}
.pl-wrun.pace{transition:left .25s linear}
.pl-tray .pl-pw{background:var(--sunk);color:var(--ink-2)}
.pl-tray .pl-pw.on{background:var(--study-tint);color:var(--study-ink);text-decoration:line-through;text-decoration-thickness:2px}
.pl-psheet{display:flex;align-items:center;gap:14px;max-width:560px;margin:18px auto 0;padding:16px 20px;border-radius:18px;text-align:start;
  animation:pl-psin .2s cubic-bezier(.22,1,.36,1) both}
.pl-psheet.is-ok{background:var(--study-tint);color:var(--study-ink)}
.pl-psheet.is-no{background:var(--gold-tint);color:var(--gold-ink)}
.pl-psheet-mark{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--surface)}
.pl-psheet-mark svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pl-psheet-h{min-width:0;font:800 21px/1.2 var(--f-display)}
.pl-ptimes{max-width:560px;margin-top:12px;grid-template-columns:repeat(2,minmax(0,1fr));animation:pl-psin .2s cubic-bezier(.22,1,.36,1) .04s both}
.pl-ptimes .pf-cell.me{box-shadow:inset 0 0 0 2.5px var(--study),var(--shadow)}
.pl-reward:empty{display:none}
@keyframes pl-psin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pl-psheet,.pl-ptimes{animation:none}.pl-wrun.pace{transition:none}}
:root[data-motion="off"] :is(.pl-psheet,.pl-ptimes){animation:none}
:root[data-motion="off"] .pl-wrun.pace{transition:none}
/* Short touch screens (under 900 px tall): a compact score and time strip that stays under the site header, and a
   keypad that fits with the question and the field (bl-play.js fitQ scrolls them on screen when a question is up) */
@media (pointer:coarse) and (max-height:899px){
  .pl-q{padding-top:0}
  .pl-q-top{position:sticky;top:56px;z-index:2;margin:0 -16px 4px;padding:6px 16px;background:var(--surface);border-radius:26px 26px 0 0}
  .pl-q-top .pl-ring{width:44px;height:44px;font-size:16px}
  .pl-q-text{margin-bottom:10px}
  .pl-keys{gap:6px;margin-top:8px}
  .pl-key{min-height:48px}
}