/* ==========================================================================
   Play With ASL theme for the CLERC signer studio (local copy only).
   Injected by app_signer._pwa_theme() at the end of <head> of every HTML page
   when STUDIO_THEME=pwa. It re-skins only: markup, ids and logic unchanged.

   Brand source: github.com/PlayWithASL/Public-Assets (press-kit "Brand specs")
   and the live CSS of playwithasl.com (Oct 2026).
   Dark pages of the studio take the forest-green chalkboard of the
   playwithasl.com landing ("How do you want to get started?") instead of black.
   ========================================================================== */

/* ── Fonts. The Google Fonts links are removed by the injector, so these are
   the only faces: every Barlow / IBM Plex Mono rule of the studio now draws
   Montserrat, and headings get GosmickSans below. ──────────────────────── */
@font-face{font-family:GosmickSans;src:url(/static/pwa/fonts/GosmickSans.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:GosmickSans;src:url(/static/pwa/fonts/GosmickSansBold.ttf) format("truetype");font-weight:700 900;font-display:swap}
@font-face{font-family:Montserrat;src:url(/static/pwa/fonts/Montserrat-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;src:url(/static/pwa/fonts/Montserrat-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Barlow;src:url(/static/pwa/fonts/Montserrat-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/static/pwa/fonts/Montserrat-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/static/pwa/fonts/Montserrat-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* ── Brand tokens, then the studio tokens re-pointed (join, signer,
   leaderboard, edu, admin all read these names) ─────────────────────── */
:root{
  --pwa-purple:#8742E3; --pwa-purple-dark:#6b30c0; --pwa-purple-soft:#b98cf5;
  --pwa-orange:#FF8C00; --pwa-yellow:#FFA900;
  --pwa-green:#2B5841; --pwa-green-deep:#1e4030; --pwa-green-night:#16301f;
  --pwa-blue:#42BFEE;
  --pwa-coral:#E8453C; --pwa-coral-hover:#d63a32;
  --pwa-cream:#FFF9F0; --pwa-cream-alt:#FEF5E7;
  --pwa-hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16.2v32.3L28 64.7 0 48.5V16.2z M28 64.7V97' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.4'/%3E%3C/svg%3E");

  --bg:var(--pwa-green-deep) !important;
  --surface:#25503a !important; --surface2:#2B5841 !important;
  --card:#25503a !important; --card2:#2B5841 !important;
  --field:#2f6048 !important; --field-h:#376b52 !important;
  --border:rgba(255,249,240,.12) !important; --line:rgba(255,249,240,.12) !important;
  --text:var(--pwa-cream) !important; --accent:var(--pwa-cream) !important;
  --muted:rgba(255,249,240,.62) !important; --dim:rgba(255,249,240,.4) !important;
  --green:var(--pwa-blue) !important; --green-bg:rgba(66,191,238,.14) !important;
  --red:var(--pwa-coral) !important; --red-bg:rgba(232,69,60,.14) !important;
  --orange:var(--pwa-orange) !important; --gold:var(--pwa-yellow) !important;
  --font:Montserrat,system-ui,sans-serif !important;
  --sys:Montserrat,system-ui,sans-serif !important;
  --mono:Montserrat,system-ui,sans-serif !important;
  --display:GosmickSans,"Comic Sans MS",cursive !important;
}

html,body{background-color:var(--pwa-green-deep) !important}
body{background-image:var(--pwa-hex) !important;color:var(--pwa-cream)}
::selection{background:var(--pwa-purple);color:#fff}

/* Orange-to-purple stripe of playwithasl.com along the very top */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:4px;z-index:2147483000;pointer-events:none;
  background:linear-gradient(90deg,var(--pwa-orange),var(--pwa-purple))}

/* ── Logo: the "clerc" wordmark becomes the Play With ASL monkey ─────── */
.logo,.header-title,.wm{
  display:inline-block !important;width:46px !important;height:46px !important;min-width:46px;
  font-size:0 !important;line-height:0 !important;color:transparent !important;letter-spacing:0 !important;
  background:url(/static/pwa/logo-140.webp) center/contain no-repeat !important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));vertical-align:middle;
}
@media (min-resolution:2dppx){.logo,.header-title,.wm{background-image:url(/static/pwa/logo-560.webp) !important}}

/* ── Chrome: translucent black bars become green ─────────────────────── */
.nav,.header,.topbar{background:rgba(30,64,48,.86) !important;border-bottom:1px solid rgba(255,249,240,.1) !important}
.nav{height:60px}

/* ── Headings in GosmickSans ─────────────────────────────────────────── */
h1,h2,.hero h1,.modal-title,.break-title,.section-title{
  font-family:GosmickSans,"Comic Sans MS",cursive !important;letter-spacing:0 !important;font-weight:700 !important;
}
h1{color:var(--pwa-cream)}
.hero h1,main > h1{color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.18)}

/* ── Buttons: coral pills like "Get started free" ────────────────────── */
.btn:not(.ghost):not(.btn-nav):not(.btn-stop):not(.btn-break):not(.btn-countdown),
.btn-resume,.btn-save{
  background:var(--pwa-coral) !important;color:#fff !important;border-radius:9999px !important;
  font-family:Montserrat,sans-serif !important;font-weight:700 !important;letter-spacing:.04em !important;text-transform:uppercase;
  box-shadow:0 4px 0 var(--pwa-coral-hover),0 10px 15px rgba(0,0,0,.18) !important;
}
.btn:not(.ghost):not(.btn-nav):not(.btn-stop):not(.btn-break):not(.btn-countdown):hover{background:var(--pwa-coral-hover) !important;opacity:1 !important}
.btn:not(.ghost):disabled{background:rgba(255,249,240,.14) !important;color:rgba(255,249,240,.45) !important;box-shadow:none !important}
.btn.ghost,.btn-nav,.btn-break{color:var(--pwa-cream) !important;box-shadow:inset 0 0 0 2px rgba(255,249,240,.35) !important;border-radius:9999px !important;background:transparent !important}
.btn-record{background:var(--pwa-coral) !important;color:#fff !important}
.btn-stop{background:var(--pwa-cream) !important;color:var(--pwa-green-deep) !important}

/* links and focus */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--pwa-blue) !important;outline-offset:2px}
.nav-r a:hover{color:var(--pwa-yellow) !important}

/* inputs on green */
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],select,textarea{
  background-color:var(--field,#2f6048);color:var(--pwa-cream);
}
input::placeholder,textarea::placeholder{color:rgba(255,249,240,.42)}

/* ── Full-screen layers that were hard black ─────────────────────────── */
.intro,.veil{background-color:var(--pwa-green-deep) !important;background-image:var(--pwa-hex) !important}
.overlay-break{background:rgba(22,48,31,.86) !important}
.modal-backdrop,.backdrop,.qdlg{background:rgba(16,36,24,.7) !important}
.header{background:rgba(30,64,48,.9) !important}
.xp-toast b{background:var(--pwa-purple) !important}

/* ── Join: grey Apple-style controls become brand colors ─────────────── */
.seg button.on{background:var(--pwa-purple) !important;color:#fff !important;box-shadow:0 3px 0 var(--pwa-purple-dark) !important}
.ichips span.ca,.c4.p1 .ichips span.cb{background:var(--pwa-purple) !important;color:#fff !important}
.bar,.mbar,.br-t{background:rgba(255,249,240,.12) !important}
.dots i,.cd i,.trk{background:rgba(255,249,240,.22) !important}
.terms::-webkit-scrollbar-thumb{background:rgba(255,249,240,.3) !important}
.list:hover{background:#30654c !important}
.list.prio{box-shadow:0 0 0 2px var(--pwa-orange) !important}
.list .tag.prio{background:var(--pwa-orange) !important;color:#fff !important}

/* ── Studio (/signer): panels, modals, XP ────────────────────────────── */
.modal-card,.modal{background:rgba(37,80,58,.97) !important;border:1px solid rgba(255,249,240,.12) !important;color:var(--pwa-cream)}
.impact-toast{background:rgba(43,88,65,.96) !important}
.phrase-panel{background:#1b3a2a !important}
.video-wrapper{background:#132a1d !important;border-radius:20px !important;box-shadow:inset 0 0 0 3px rgba(255,249,240,.08),0 6px 20px rgba(0,0,0,.25)}
.video-placeholder{background:rgba(19,42,29,.7) !important}
.overlay-hint{background:rgba(19,42,29,.75) !important}
.xp-bar{background:rgba(255,249,240,.1) !important}
.xp-bar:hover{background:rgba(255,249,240,.16) !important}
.xp-track{background:rgba(255,249,240,.18) !important}
.xp-track i{background:linear-gradient(90deg,var(--pwa-orange),var(--pwa-yellow)) !important}

/* Several equal white pills in one card: the first stays coral, the others
   become cream (the outlined "For educators" button of the site, filled) */
/* repeated class = enough specificity to beat the coral .btn:not(...) rule */
.btn.btn-resume.btn-resume.btn-resume.btn-resume.btn-resume:not(:first-child){background:var(--pwa-cream) !important;color:var(--pwa-green-deep) !important;box-shadow:0 4px 0 rgba(0,0,0,.22) !important}
.btn-countdown{background:rgba(255,249,240,.12) !important;color:var(--pwa-cream) !important;box-shadow:none !important}
.camera-wake-btn{background:var(--pwa-coral) !important;color:#fff !important;border-radius:9999px !important}
.rules-chip{border-radius:9999px !important}
.avatar-btn{background:var(--pwa-purple) !important;color:#fff !important}

/* Studio controls keep their original case: the row is tight on phones */
.controls .btn,.btn-record,.btn-save,.btn-stop,.btn-resume,.camera-wake-btn{text-transform:none !important;letter-spacing:0 !important}
/* Phones: the control row split 3 equal thirds (104 px at 375 px) and the
   main button ("Turn on camera", 131 px of text) overflowed onto Pause, in
   the CLERC original too. The side buttons (countdown, Pause) now shrink to
   their content and the main button takes the rest; text may wrap as a last
   resort rather than spill. */
@media (max-width:600px){
  .controls{gap:8px !important}
  .controls .btn{font-size:14px !important;white-space:normal !important;line-height:1.15 !important;min-width:0 !important}
  .controls .btn-countdown,.controls .btn-break{flex:0 0 auto !important;padding:0 14px !important;min-width:60px !important}
  .controls .btn:not(.btn-countdown):not(.btn-break){flex:1 1 auto !important;padding:0 12px !important}
}

/* ── Free, game-first sign-up (html.pwa-free, set by join_free.js) ───── */
.pwa-free #heroClaim,.pwa-free #heroClaimSep{display:none !important}
.pwa-free #progress i:nth-child(3){display:none !important}
.pwa-free .hero h1:not([hidden]){font-size:clamp(44px,9vw,76px)}
/* Phones: the 16:9 camera box is only ~170 px tall, so the wake prompt, its
   button and the "Camera off" tag collided. Centre the prompt, tighten it,
   and drop the tag while the prompt already says the camera is off. */
@media (max-width:600px){
  #videoPlaceholder{gap:8px !important;padding:0 16px !important}
  #videoPlaceholder svg{width:26px !important;height:26px !important}
  #cameraPromptText{text-align:center !important;font-size:13px !important;line-height:1.3 !important}
  #wakeCameraBtn{padding:9px 18px !important;font-size:14px !important}
  #videoPlaceholder.needs-gesture ~ #stateOverlay .overlay-hint{display:none !important}
}
/* Phones: pop-ups with 2-3 actions ("Keep this pseudo / Change my pseudo /
   See the leaderboard") squeezed three pills into ~80 px columns. Stack them. */
@media (max-width:600px){
  .celeb-actions{flex-direction:column !important;align-items:stretch !important}
  .celeb-actions .btn{flex:0 0 auto !important;width:100% !important;min-height:48px;padding:12px 16px !important}
}
/* account menu (avatar) */
#menu.menu{background:rgba(37,80,58,.98) !important;border:1px solid rgba(255,249,240,.12) !important}
.menu-xp-track{background:rgba(255,249,240,.16) !important}

/* ── Co-branding lockup: the Play With ASL logo, a short orange-to-purple
   stripe (the site's top stripe), then "clerc" in white (the real CLERC
   wordmark, Barlow 800). logo-crop-*.webp is the logo trimmed to its artwork:
   the original square has transparent margins and its "ASL" word sits left of
   centre (the monkey leans right), so stripe and "clerc" are centred on the
   ASL word (37.6 % of the width, measured), not on the box. ──────────────── */
@font-face{font-family:ClercMark;src:url(/static/pwa/fonts/Barlow-800-latin.woff2) format("woff2");font-weight:800;font-display:swap}
.logo,.header-title,.wm{
  position:relative !important;width:56px !important;min-width:56px;height:74px !important;
  background:url(/static/pwa/logo-crop-96.webp) left top/56px auto no-repeat !important;
  filter:none !important;overflow:visible !important;
}
@media (min-resolution:2dppx){.logo,.header-title,.wm{background-image:url(/static/pwa/logo-crop-192.webp) !important}}
.logo::before,.header-title::before,.wm::before{
  content:"";position:absolute;left:37.6%;top:54px;width:24px;height:2px;transform:translateX(-50%);border-radius:2px;
  background:linear-gradient(90deg,var(--pwa-orange),var(--pwa-purple));
}
.logo::after,.header-title::after,.wm::after{
  content:"clerc";position:absolute;left:37.6%;top:59px;transform:translateX(-50%);white-space:nowrap;
  font:800 14px/1 ClercMark,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.04em;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.nav{height:84px !important}

/* ── Studio as a game (html.pwa-game, set by studio_game.js) ─────────── */
.pwa-game #promptId{display:none !important}
.pwa-game .phrase-counter-inline{color:var(--pwa-cream) !important}
.pwa-stage-chip{display:inline-block;background:var(--pwa-purple);color:#fff;border-radius:9999px;padding:2px 10px;margin-right:6px;
  font:800 11px/1.6 Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.pwa-xp{color:var(--pwa-yellow);font-weight:800;white-space:nowrap}
.pwa-game .phrase-panel-header{font-family:GosmickSans,"Comic Sans MS",cursive !important;font-size:20px !important;letter-spacing:0 !important}
.pwa-game .phrase-panel-stats{font-family:Montserrat,sans-serif;font-size:12px;font-weight:700;color:var(--pwa-yellow) !important}
.pwa-game .phrase-list{padding:6px 10px 14px !important}
.phrase-item.pwa-q{display:flex;gap:12px;align-items:flex-start;margin:0 0 8px;padding:12px 12px !important;border-radius:14px !important;
  background:rgba(255,249,240,.06) !important;border:1px solid rgba(255,249,240,.08);transition:transform .15s,background .15s}
.phrase-item.pwa-q:hover{background:rgba(255,249,240,.11) !important;transform:translateX(2px)}
.phrase-item.pwa-q.active{background:rgba(255,140,0,.16) !important;border-color:var(--pwa-orange);box-shadow:0 0 0 1px var(--pwa-orange)}
.phrase-item.pwa-q.done{opacity:.6}
.pwa-q-n{flex:0 0 44px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,249,240,.1);
  color:var(--pwa-cream);font:800 13px/1 Montserrat,sans-serif}
.phrase-item.pwa-q.active .pwa-q-n{background:var(--pwa-orange);color:#fff;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.pwa-q .phrase-item-text{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;line-height:1.35;color:var(--pwa-cream)}
.pwa-q-meta{display:flex;gap:8px;align-items:center;margin-top:6px;font:700 11px/1 Montserrat,sans-serif}
.pwa-tier{border-radius:9999px;padding:4px 9px;letter-spacing:.08em;text-transform:uppercase;font-size:10px;color:#fff}
.pwa-tier.very_short{background:var(--pwa-cream);color:var(--pwa-green-deep)}
.pwa-tier.short{background:var(--pwa-blue);color:var(--pwa-green-deep)}
.pwa-tier.medium{background:var(--pwa-orange)}
.pwa-tier.long{background:var(--pwa-purple)}
.pwa-q-done{color:var(--pwa-blue);letter-spacing:.08em;text-transform:uppercase}
.pwa-q-more{margin:6px 4px 0;padding:12px;border:1px dashed rgba(255,249,240,.22);border-radius:14px;text-align:center;
  color:rgba(255,249,240,.6);font:600 12px/1.3 Montserrat,sans-serif}
/* Phones: signer.html sets .phrase-panel to 280 px AFTER its own "100 %"
   phone rule, so the panel stopped at two thirds of the screen (CLERC original
   too). The Up next queue takes the full width and its natural height. */
@media (max-width:700px){
  .pwa-game .phrase-panel{width:100% !important;max-height:none !important}
  .pwa-game .phrase-list{max-height:none !important;overflow:visible !important}
}
.pwa-game #themePill{display:none !important}

/* ── Toward 1,000 videos: road, round to the chest ───────── */
.pwa-road{margin:4px 10px 10px;padding:12px 14px 12px;border-radius:14px;background:rgba(135,66,227,.18);
  border:1px solid rgba(185,140,245,.35);font:600 12px/1.3 Montserrat,sans-serif;color:var(--pwa-cream)}
.pwa-road[hidden]{display:none !important}
.pwa-road-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pwa-road-top>b{font:400 17px/1 GosmickSans,"Comic Sans MS",cursive}
.pwa-road-top span{color:rgba(255,249,240,.7)}
.pwa-road-top span b{color:var(--pwa-yellow);font-size:15px}
.pwa-road-bar{position:relative;height:10px;margin:10px 0 9px;border-radius:9999px;background:rgba(255,249,240,.12)}
.pwa-road-bar s{position:absolute;left:0;top:0;bottom:0;min-width:10px;border-radius:9999px;text-decoration:none;
  background:linear-gradient(90deg,var(--pwa-orange),var(--pwa-yellow));transition:width .5s ease}
.pwa-road-legs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px}
.pwa-road-next{color:rgba(255,249,240,.75)}
.pwa-road-next b{color:var(--pwa-yellow)}
.pwa-road-title{background:var(--pwa-purple);color:#fff;border-radius:9999px;padding:3px 9px;
  font:800 10px/1.3 Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.phrase-item.pwa-q.next-round{opacity:.55}
.pwa-chest{display:flex;gap:12px;align-items:center;margin:2px 0 10px;padding:12px;border-radius:14px;
  background:linear-gradient(90deg,rgba(255,169,0,.22),rgba(255,140,0,.1));border:1px dashed var(--pwa-yellow);
  font:600 12px/1.35 Montserrat,sans-serif;color:var(--pwa-cream)}
.pwa-chest b{display:block;font:400 16px/1.2 GosmickSans,"Comic Sans MS",cursive;color:var(--pwa-yellow)}
.pwa-chest span:not(.pwa-chest-box){color:rgba(255,249,240,.8)}
/* a small chest drawn in CSS (no emoji): lid + body + lock */
.pwa-chest-box{position:relative;flex:0 0 44px;height:34px;animation:pwaChest 2.4s ease-in-out infinite}
.pwa-chest-box::before{content:"";position:absolute;left:4px;right:4px;top:3px;height:12px;border-radius:9px 9px 2px 2px;
  background:var(--pwa-orange);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.pwa-chest-box::after{content:"";position:absolute;left:4px;right:4px;top:15px;bottom:2px;border-radius:2px 2px 5px 5px;
  background:var(--pwa-yellow);box-shadow:inset 0 2px 0 rgba(0,0,0,.18)}
.pwa-chest-box i{position:absolute;z-index:1;left:50%;top:11px;width:8px;height:9px;margin-left:-4px;border-radius:2px;background:var(--pwa-purple)}
@keyframes pwaChest{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.pwa-chest-box{animation:none}}
.pwa-game #earnPill .earn-sub{display:none !important}   /* "volunteer" under the video count: it is a game, not a job */

/* ── /join intro as a game trailer (join_free.js, 17/10/2026) ─────────
   The studio's own pieces: ink sign tiles (as the album and the chest),
   rank badges, the signer card. Tile text = the studio's sign-tile. */
.pwa-tile{min-width:0;color:#fff;text-align:left}
.pwa-art{aspect-ratio:1;background:#111113;overflow:hidden;border-radius:4px}
.pwa-tile b{display:block;margin-top:7px;font:900 15px/1.05 Barlow,sans-serif;text-transform:uppercase;letter-spacing:-.01em}
.pwa-tile span{display:block;margin-top:4px;color:rgba(255,249,240,.6);font:500 9px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.1em}
.pwa-tile.legendary span{color:#d9c8ff}.pwa-tile.epic span{color:var(--pwa-yellow)}
/* card 1: the mascot, big */
.pwa-hero{width:min(100%,calc(min(36vh,270px) - 50px))}
.pwa-hero .pwa-tile b{font-size:22px;text-align:center}.pwa-hero .pwa-tile span{display:none}
/* card 4: the chest */
.pwa-chest4{position:relative;width:min(100%,520px);height:100%;display:grid;place-items:center}
.pwa-seal{position:absolute;display:flex;gap:10px;transition:opacity .35s,transform .35s;animation:pwaShake .6s .2s ease-in-out 1}
.pwa-seal i{display:block;width:60px;height:60px;border-radius:6px;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.pwa-seal i svg{display:block;width:100%;height:100%}
@keyframes pwaShake{0%,100%{transform:none}25%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}75%{transform:rotate(-2deg)}}
.c4.p1 .pwa-seal{opacity:0;transform:scale(1.25)}
.pwa-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%}
@media (max-width:520px){.pwa-tiles{gap:7px;padding:0 8px}.pwa-tiles .pwa-tile b{font-size:11px}.pwa-tiles .pwa-tile span{font-size:7px;letter-spacing:.06em}}
.pwa-tiles .pwa-tile{opacity:0;transform:translateY(16px) scale(.85);transition:opacity .35s,transform .45s cubic-bezier(.2,1.5,.4,1)}
.c4.p2 .pwa-tiles .pwa-tile:nth-child(1),.c4.p3 .pwa-tiles .pwa-tile:nth-child(2),
.c4.p4 .pwa-tiles .pwa-tile:nth-child(3),.c4.p5 .pwa-tiles .pwa-tile:nth-child(4){opacity:1;transform:none}
.c4.p5 .pwa-tile.legendary .pwa-art{box-shadow:0 0 0 2px #fff,0 0 16px 4px rgba(217,200,255,.75);animation:pwaGlow 1.6s ease-in-out infinite}
@keyframes pwaGlow{50%{box-shadow:0 0 0 2px #fff,0 0 8px 1px rgba(217,200,255,.45)}}
/* card 6: leagues + the weekly board */
.pwa-lb{width:min(100%,380px);font:600 14px/1 Montserrat,sans-serif;color:var(--pwa-cream)}
.pwa-ladder{display:flex;justify-content:center;gap:14px;margin-bottom:12px}
.pwa-ladder .lg{display:flex;flex-direction:column;align-items:center;gap:5px;opacity:.45;transition:opacity .4s,transform .4s}
.pwa-ladder .lg .fun-badge{width:46px !important;height:46px !important;border-radius:6px;overflow:hidden}
.pwa-ladder .lg span{font:500 8px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
.pwa-ladder .lg small{font:600 9px/1 Montserrat,sans-serif;color:var(--pwa-cream);opacity:.8}
.c6.p1 .pwa-ladder .lg{opacity:.55}.c6.p1 .pwa-ladder .lg.gold{opacity:1;transform:scale(1.18)}
.pwa-lb .r{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:6px;border-radius:12px;
  background:rgba(255,249,240,.08);opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s,background .4s,box-shadow .4s}
.pwa-lb .r>b{width:18px;text-align:center;font-weight:800;color:rgba(255,249,240,.6)}
.pwa-lb .r>span:not(.fun-badge){flex:1}
.pwa-lb .r em{font-style:normal;color:var(--pwa-yellow);font-weight:800}
.pwa-lb .r i{font-style:normal;font-size:11px;font-weight:800;background:var(--pwa-blue);color:var(--pwa-green-deep);border-radius:9999px;padding:3px 7px;opacity:0;transition:opacity .3s}
.pwa-lb s{text-decoration:none}
.pwa-lb s.y,.c6.p5 .pwa-lb s.x{display:none}
.c6.p5 .pwa-lb s.y{display:inline}
.c6.p2 .pwa-lb .r:nth-of-type(2),.c6.p3 .pwa-lb .r:nth-of-type(3),.c6.p4 .pwa-lb .r:nth-of-type(4),.c6.p4 .pwa-lb .r:nth-of-type(5){opacity:1;transform:none}
.c6.p4 .pwa-lb .r:nth-of-type(4){transform:translateY(calc(100% + 6px))}       /* You start 4th... */
.c6.p4 .pwa-lb .r:nth-of-type(5){transform:translateY(calc(-100% - 6px))}
.c6.p5 .pwa-lb .r:nth-of-type(4),.c6.p5 .pwa-lb .r:nth-of-type(5){transform:none}  /* ...and pass QuickFingers */
.c6.p5 .pwa-lb .r.me{background:rgba(255,140,0,.22);box-shadow:0 0 0 2px var(--pwa-orange)}
.c6.p5 .pwa-lb .r.me>b{color:var(--pwa-orange)}
.c6.p5 .pwa-lb .r.me i{opacity:1}
/* card 8: the signer card (fun_card_min.js, 1080 x 1350) */
.pwa-free .intro[data-card="8"] .intro-vis{height:min(44vh,360px) !important;display:block !important}
.pwa-scard{display:block;height:100%;width:auto;aspect-ratio:1080/1350;margin:0 auto;border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08)}
.c8.on .pwa-scard{animation:pwaCardIn .8s .15s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pwaCardIn{from{transform:scale(.7) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pwa-tiles .pwa-tile,.pwa-lb .r,.pwa-seal{transition:none;animation:none}.c8.on .pwa-scard,.c4.p5 .pwa-tile.legendary .pwa-art{animation:none}}
@media (max-height:480px){.pwa-free .intro[data-card="8"] .intro-vis{display:none !important}}

/* sign-up pseudo (19/10/2026): the suggestion link must read as a link */
.pwa-pseudo .hint a{color:var(--pwa-blue);font-weight:700;text-decoration:underline;margin-left:4px;white-space:nowrap}

/* two pills (19/10/2026): the clock shows the time only, the count pill takes turns today / all */
.pwa-game #clockPill .clock-sub{display:none !important}
.pwa-game #earnPill{text-align:center;justify-content:center;white-space:nowrap;box-sizing:border-box;font-variant-numeric:tabular-nums;user-select:none}
.pwa-game #earnPill .pwa-count{display:inline-block;transition:opacity .22s ease}
.pwa-game #earnPill .pwa-count.out{opacity:0}

/* arrows beside the sentence, no bottom nav row (19/10/2026): more room for the video */
.pwa-prompt-row{display:flex;align-items:center;justify-content:center;gap:14px}
.pwa-prompt-row #promptText{flex:0 1 auto;min-width:0}
.pwa-prompt-row .btn-nav{flex:0 0 auto;width:40px;height:40px;padding:0;border-radius:50%;border:0;
  background:rgba(255,249,240,.12);color:var(--pwa-cream);font-size:22px;line-height:1;cursor:pointer}
.pwa-prompt-row .btn-nav:hover:not(:disabled){background:rgba(255,249,240,.24)}
.pwa-prompt-row .btn-nav:disabled{opacity:.3;cursor:default}
html.pwa-nav-top .nav-hints-row{display:none !important}
/* Phones (19/10/2026): the header row was 406 px on a 375 px screen, the avatar was cut off.
   The avatar goes up to the logo row (empty on the right), the pills tighten and may wrap. */
@media (max-width:600px){
  .pwa-game .header{position:relative}
  .pwa-game .header .menu-wrap{position:absolute;top:12px;right:16px}
  .pwa-game .header{flex-wrap:wrap !important}
  .pwa-game .header-meta{flex-wrap:wrap !important;justify-content:center;gap:6px !important;max-width:100%;flex-basis:100%}
  .pwa-game .header-meta .clock-pill,.pwa-game .header-meta #earnPill,.pwa-game .header-meta #boardPill{padding-left:10px !important;padding-right:10px !important}
}

/* the player follows the webcam's shape (19/10/2026): sized by studio_game.js, centred, no bars */
html.pwa-fit-video .video-wrapper{align-self:center;max-width:100%}
html.pwa-fit-video .video-el{object-fit:cover !important;background:transparent !important}
/* one typeface across the recording row (19/10/2026): Pause and 3s were in GosmickSans next to Montserrat */
.controls #breakBtn,.controls #countdownBtn{font-family:Montserrat,system-ui,sans-serif !important;font-weight:600 !important;font-size:15px !important}
.pwa-game #earnPill.is-locked{box-shadow:0 0 0 2px var(--pwa-coral,#E8453C) !important}
/* no "old station" name in Play With ASL (recette 19/10/2026) */
.pwa-free #legacyBanner,.pwa-free #legacyRow{display:none !important}
html.pwa-touch .overlay-confirm-hint{display:none !important}   /* "Enter to keep · R to redo": no keyboard on a phone */

/* ── ASL HUDDLE in the middle of the header (20/10/2026), the lockup of the launch film:
   Montserrat 900 capitals, ASL in orange, dark green outline, cyan offset shadow, tilted -3deg.
   Cyan, not coral (Jon 20/10/2026: orange on red was not accessible), as in the launch film v11. */
.pwa-huddle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);z-index:1;
  font:900 30px/1 Montserrat,system-ui,sans-serif;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;
  color:#FFF9F0 !important;text-decoration:none !important;-webkit-text-stroke:3px #16301f;paint-order:stroke fill;
  text-shadow:3px 3px 0 #42BFEE}
.pwa-huddle .o{color:#FF8C00}
a.pwa-huddle:hover{color:#FFF9F0 !important}
@media (max-width:600px){.pwa-huddle{font-size:24px;-webkit-text-stroke:2px #16301f;text-shadow:2px 2px 0 #42BFEE}}
/* pwa/huddle.js sets top (the logo's height) and, when a neighbour is in the way, left and font-size */

/* No blue "Uploading 42%" pill (Florian, 20/10/2026): uploads run quietly.
   A stuck upload ("retrying", "Log in again") still shows, in orange. */
.upload-indicator.active, .upload-indicator.done { display: none !important; }

/* ── The personal code (20/10/2026, Jon typed his pseudo to sign in) ────
   a card once after sign-up, help under each sign-in box, "Is it you?" on a taken pseudo */
.pwa-code{z-index:60 !important}
.pwa-code .box{width:100%;max-width:400px;text-align:center}
.pwa-code h2{font-size:30px;margin-bottom:16px}
.pwa-code .code{font-family:Montserrat,system-ui,sans-serif;font-size:40px;font-weight:800;letter-spacing:.03em;color:var(--pwa-cream);
  background:rgba(255,249,240,.08);border:2px dashed rgba(255,249,240,.4);border-radius:16px;padding:14px 18px;margin:0 auto 14px;
  user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}
.pwa-code .btn.ghost{height:44px;padding:0 22px}
.pwa-code p{color:rgba(255,249,240,.78);font-size:16px;line-height:1.45;margin:18px 0 0}
.pwa-code p.small{color:rgba(255,249,240,.6);font-size:14px;margin-top:8px}
.pwa-code #pwaCodeGo{margin-top:26px}
.pwa-login-help,.pwa-signin-help{color:rgba(255,249,240,.62);font-size:13px;line-height:1.5;margin:18px 0 0;text-align:center}
.pwa-itsme{color:var(--pwa-blue) !important;font-weight:700;text-decoration:underline;white-space:nowrap}
@media (max-width:420px){.pwa-code .code{font-size:32px}.pwa-code h2{font-size:26px}}