/* Platine — hub de jeux de musique.
   Le shell (accueil, salon) est neutre et chaud. Chaque jeu repeint ensuite l'interface
   via [data-game] : Décennies = prune / tangerine / vinyle arrondi.
                     Éclair   = nuit bleue / lime électrique / angles vifs. */

/* ============================ jetons : shell ============================ */
:root{
  --bg:        oklch(0.17 0.018 62);
  --surface:   oklch(0.225 0.020 62);
  --surface-2: oklch(0.27 0.022 62);
  --line:      oklch(0.32 0.024 62);
  --ink:       oklch(0.95 0.014 80);
  --ink-2:     oklch(0.78 0.020 74);
  --mute:      oklch(0.63 0.022 70);
  --acc:       oklch(0.78 0.155 68);
  --acc-soft:  oklch(0.86 0.110 72);
  --on-acc:    oklch(0.20 0.040 62);
  --pos:       oklch(0.83 0.135 165);
  --neg:       oklch(0.70 0.185 18);
  --gold:      oklch(0.85 0.140 92);
  --glow:      0.16;

  --r:   16px;
  --r-s: 11px;
  --r-pill: 999px;
  --font-d: "Bricolage Grotesque", Georgia, serif;
  --font:   "Instrument Sans", system-ui, -apple-system, sans-serif;
  --track:  -0.02em;
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --bar-h:  52px;
}
[data-theme="light"]{
  --bg:        oklch(0.96 0.014 78);
  --surface:   oklch(0.99 0.008 78);
  --surface-2: oklch(0.94 0.014 76);
  --line:      oklch(0.88 0.018 76);
  --ink:       oklch(0.23 0.028 62);
  --ink-2:     oklch(0.44 0.028 64);
  --mute:      oklch(0.58 0.024 66);
  --acc:       oklch(0.62 0.170 52);
  --acc-soft:  oklch(0.52 0.150 50);
  --on-acc:    oklch(0.99 0.010 78);
  --pos:       oklch(0.55 0.130 160);
  --neg:       oklch(0.55 0.180 20);
  --gold:      oklch(0.60 0.120 85);
  --glow:      0.10;
}

/* ============================ jeu : Décennies ============================ */
[data-game="decennies"]{
  --bg:        oklch(0.165 0.040 305);
  --surface:   oklch(0.235 0.048 303);
  --surface-2: oklch(0.29 0.052 303);
  --line:      oklch(0.33 0.055 303);
  --ink:       oklch(0.94 0.028 88);
  --ink-2:     oklch(0.77 0.030 80);
  --mute:      oklch(0.62 0.040 300);
  --acc:       oklch(0.705 0.190 44);
  --acc-soft:  oklch(0.83 0.145 70);
  --on-acc:    oklch(0.19 0.060 40);
  --pos:       oklch(0.84 0.140 166);
  --neg:       oklch(0.70 0.190 14);
  --r: 18px; --r-s: 13px;
  --font-d: "Bricolage Grotesque", Georgia, serif;
  --track: -0.03em;
}
[data-theme="light"][data-game="decennies"]{
  --bg:        oklch(0.955 0.022 70);
  --surface:   oklch(0.995 0.010 75);
  --surface-2: oklch(0.935 0.022 68);
  --line:      oklch(0.875 0.028 66);
  --ink:       oklch(0.21 0.055 300);
  --ink-2:     oklch(0.43 0.040 300);
  --mute:      oklch(0.58 0.032 300);
  --acc:       oklch(0.615 0.185 42);
  --acc-soft:  oklch(0.52 0.150 46);
  --on-acc:    oklch(0.99 0.010 75);
  --pos:       oklch(0.55 0.130 162);
  --neg:       oklch(0.54 0.185 18);
}

/* ============================ jeu : Éclair ============================ */
[data-game="eclair"]{
  --bg:        oklch(0.155 0.035 258);
  --surface:   oklch(0.205 0.040 256);
  --surface-2: oklch(0.255 0.045 256);
  --line:      oklch(0.31 0.050 254);
  --ink:       oklch(0.97 0.012 250);
  --ink-2:     oklch(0.78 0.030 240);
  --mute:      oklch(0.61 0.040 250);
  --acc:       oklch(0.905 0.190 118);
  --acc-soft:  oklch(0.82 0.130 200);
  --on-acc:    oklch(0.19 0.060 140);
  --pos:       oklch(0.90 0.185 120);
  --neg:       oklch(0.68 0.200 6);
  --gold:      oklch(0.86 0.160 95);
  --glow: 0.26;
  --r: 7px; --r-s: 5px; --r-pill: 6px;
  --font-d: "Syne", "Bricolage Grotesque", sans-serif;
  --track: -0.01em;
}
[data-theme="light"][data-game="eclair"]{
  --bg:        oklch(0.965 0.020 240);
  --surface:   oklch(0.995 0.008 240);
  --surface-2: oklch(0.935 0.020 240);
  --line:      oklch(0.86 0.030 244);
  --ink:       oklch(0.19 0.050 256);
  --ink-2:     oklch(0.41 0.040 252);
  --mute:      oklch(0.57 0.035 250);
  --acc:       oklch(0.68 0.175 132);
  --acc-soft:  oklch(0.55 0.130 220);
  --on-acc:    oklch(0.99 0.010 240);
  --pos:       oklch(0.58 0.150 140);
  --neg:       oklch(0.53 0.190 20);
  --glow: 0.12;
}

/* ============================ jeu : Sprint ============================ */
[data-game="sprint"]{
  --bg:        oklch(0.145 0.030 348);
  --surface:   oklch(0.200 0.038 346);
  --surface-2: oklch(0.250 0.045 346);
  --line:      oklch(0.310 0.050 346);
  --ink:       oklch(0.965 0.014 340);
  --ink-2:     oklch(0.780 0.030 340);
  --mute:      oklch(0.610 0.040 342);
  --acc:       oklch(0.690 0.245 356);
  --acc-soft:  oklch(0.820 0.150 350);
  --on-acc:    oklch(0.99 0.010 340);
  --pos:       oklch(0.840 0.150 165);
  --neg:       oklch(0.690 0.200 20);
  --gold:      oklch(0.860 0.150 88);
  --glow: 0.22;
  --r: 11px; --r-s: 9px; --r-pill: 999px;
  --font-d: "Archivo", "Bricolage Grotesque", sans-serif;
  --track: -0.015em;
}
[data-theme="light"][data-game="sprint"]{
  --bg:        oklch(0.965 0.018 348);
  --surface:   oklch(0.995 0.008 348);
  --surface-2: oklch(0.935 0.020 348);
  --line:      oklch(0.875 0.028 348);
  --ink:       oklch(0.200 0.048 348);
  --ink-2:     oklch(0.420 0.040 346);
  --mute:      oklch(0.575 0.035 344);
  --acc:       oklch(0.560 0.230 0);
  --acc-soft:  oklch(0.470 0.180 355);
  --on-acc:    oklch(0.99 0.010 340);
  --pos:       oklch(0.550 0.135 162);
  --neg:       oklch(0.540 0.190 22);
  --glow: 0.11;
}
[data-game="sprint"] h1,[data-game="sprint"] .banner,[data-game="sprint"] .crumb{text-transform:uppercase;letter-spacing:.01em}
[data-game="sprint"] .banner small,[data-game="sprint"] .note{text-transform:none;letter-spacing:0}

/* ============================ socle ============================ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);overflow-x:hidden;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);
  font:16px/1.45 var(--font);-webkit-font-smoothing:antialiased;
  transition:background .35s var(--ease),color .35s var(--ease);
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(115% 70% at 50% -12%, color-mix(in oklab, var(--acc) 22%, transparent), transparent 62%);
  opacity:var(--glow);transition:opacity .35s var(--ease);
}
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme="light"] .grain{opacity:.1;mix-blend-mode:multiply}
[hidden]{display:none!important}

.screen{
  position:relative;z-index:2;min-height:100dvh;
  padding:calc(var(--bar-h) + env(safe-area-inset-top) + 10px) 20px max(26px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:20px;max-width:540px;margin:0 auto;
  animation:screen-in .42s var(--ease);
}
.screen.play{gap:15px}
@keyframes screen-in{from{opacity:0;transform:translateY(10px)}}

/* ============================ barre haute ============================ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;height:calc(var(--bar-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 10px 0;display:flex;align-items:center;gap:6px;
  background:color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in oklab, var(--line) 60%, transparent);
}
.ic{
  flex:0 0 auto;width:38px;height:38px;border-radius:var(--r-s);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:600 17px/1 var(--font);
  display:grid;place-items:center;cursor:pointer;transition:transform .12s var(--ease),background .2s;
}
.ic:active{transform:scale(.9)}
#btn-back{font-size:26px;padding-bottom:4px}
.crumb{
  flex:1;min-width:0;font-family:var(--font-d);font-weight:800;font-size:17px;letter-spacing:var(--track);
  padding-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
[data-game="eclair"] .crumb{text-transform:uppercase;letter-spacing:.08em;font-size:15px}
.net{font-size:11px;color:var(--mute);display:flex;align-items:center;gap:5px;padding-right:2px;white-space:nowrap}
.net::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mute)}
.net.on::before{background:var(--pos)}
.net.off::before{background:var(--neg)}
@media (max-width:380px){.net{font-size:0;gap:0}}

.vol-pop{
  position:fixed;z-index:21;top:calc(var(--bar-h) + env(safe-area-inset-top) + 6px);right:10px;
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);box-shadow:0 16px 40px -18px oklch(0 0 0 / .7);
  animation:pop .2s var(--ease);
}
.vol-pop input[type=range]{width:150px;appearance:none;height:4px;border-radius:2px;background:var(--line);padding:0;min-height:0;border:0;cursor:pointer}
.vol-pop input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:var(--acc);border:2px solid var(--surface)}
.vol-pop input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--acc);border:2px solid var(--surface)}

/* ============================ typographie ============================ */
h1{font-family:var(--font-d);font-weight:800;font-size:clamp(42px,12.5vw,64px);line-height:.94;letter-spacing:var(--track);margin:0}
[data-game="eclair"] h1{text-transform:uppercase;letter-spacing:-.005em}
.section-title{font-family:var(--font-d);font-weight:800;font-size:19px;letter-spacing:var(--track);margin:0 0 10px}
.lede{color:var(--ink-2);font-size:17px;margin:0;max-width:34ch}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:600}
.fine{color:var(--mute);font-size:13px;margin:0;line-height:1.4}
.err{color:var(--neg);font-size:14px;min-height:20px;margin:0}

/* ============================ accueil ============================ */
.hub-hero{padding:14px 0 4px;display:flex;flex-direction:column;gap:14px}
.platter{
  position:relative;width:92px;height:92px;border-radius:50%;
  background:
    repeating-radial-gradient(circle, oklch(0.11 0.02 62) 0 1.5px, oklch(0.19 0.02 62) 1.5px 3.6px);
  box-shadow:0 0 0 7px var(--surface), 0 22px 44px -20px oklch(0 0 0 / .8);
  animation:spin 9s linear infinite;
}
[data-theme="light"] .platter{background:repeating-radial-gradient(circle, oklch(0.28 0.02 62) 0 1.5px, oklch(0.38 0.02 62) 1.5px 3.6px)}
.platter i{position:absolute;inset:37%;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px oklch(0.11 0.02 62);z-index:2}
/* reflet balayant : c'est lui qui donne la rotation, sans bras de lecture */
.platter::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 38%, oklch(1 0 0 / .10) 46%, transparent 54% 88%, oklch(1 0 0 / .06) 94%, transparent)}
[data-theme="light"] .platter::after{background:conic-gradient(from 0deg, transparent 0 38%, oklch(1 0 0 / .28) 46%, transparent 54% 88%, oklch(1 0 0 / .18) 94%, transparent)}
@keyframes spin{to{transform:rotate(360deg)}}
.hub-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}

/* ============================ formulaires ============================ */
.stack{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:13px;color:var(--ink-2);font-weight:500}
.field.row{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);padding:11px 14px;border-radius:var(--r-s);border:1px solid var(--line)}
.field.row>span{font-size:14px}
input,select{
  font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-s);padding:13px 14px;min-height:50px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in oklab, var(--acc) 30%, transparent)}
input::placeholder{color:var(--mute)}
select{appearance:none;padding-right:30px;min-height:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
#in-code{font-family:var(--font-d);font-weight:800;font-size:24px;letter-spacing:.34em;text-transform:uppercase;text-align:center;flex:1;min-width:0;padding-left:.34em}
.join-row{display:flex;gap:10px}
.or{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

.btn{
  font:600 16px/1 var(--font);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-s);padding:14px 20px;min-height:50px;
  cursor:pointer;transition:transform .12s var(--ease),background .18s,opacity .18s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
}
.btn:active{transform:scale(.975)}
.btn.lg{min-height:56px;font-size:17px}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:700}
.btn.pos{background:var(--pos);border-color:var(--pos);color:var(--on-acc)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.small{padding:8px 12px;min-height:36px;font-size:14px}
.btn:disabled{opacity:.38;pointer-events:none}
.btn .cost{font-size:12px;font-weight:700;background:color-mix(in oklab, var(--on-acc) 18%, transparent);padding:3px 8px;border-radius:var(--r-pill)}
.btn:not(.primary) .cost{background:color-mix(in oklab, var(--ink) 12%, transparent)}
[data-game="eclair"] .btn{text-transform:uppercase;letter-spacing:.04em;font-size:15px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row.center{justify-content:center}

/* ============================ salon ============================ */
.code-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px}
.code{font-family:var(--font-d);font-weight:800;font-size:42px;letter-spacing:.16em;line-height:1.05;color:var(--acc);padding-left:.16em}
.players{display:flex;flex-wrap:wrap;gap:7px}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 13px 6px 6px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;animation:pop .35s var(--ease)}
.chip .dot{width:25px;height:25px;border-radius:50%;background:var(--acc);display:grid;place-items:center;font-family:var(--font-d);font-weight:800;font-size:12px;color:var(--on-acc)}
.chip.host .dot{background:var(--gold)}
.chip.off{opacity:.4}
@keyframes pop{from{transform:scale(.72);opacity:0}}

.games{display:flex;flex-direction:column;gap:10px}
.gcard{
  position:relative;overflow:hidden;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;gap:2px 15px;
  padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  transition:transform .14s var(--ease),border-color .2s,background .2s;
}
.gcard:active{transform:scale(.985)}
.gcard[aria-pressed="true"]{border-color:var(--acc);background:color-mix(in oklab, var(--acc) 12%, var(--surface))}
.gcard .gart{grid-row:1/4;align-self:center;width:54px;height:54px;display:grid;place-items:center}
.gcard .gname{font-family:var(--font-d);font-weight:800;font-size:24px;letter-spacing:-.03em}
.gcard .gdesc{color:var(--ink-2);font-size:13.5px;line-height:1.35}
.gcard .gmeta{color:var(--mute);font-size:11.5px;margin-top:5px;letter-spacing:.04em}
.g-decennies .gname{color:oklch(0.78 0.17 48)}
.g-eclair .gname{font-family:"Syne",sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:oklch(0.88 0.19 120)}
[data-theme="light"] .g-decennies .gname{color:oklch(0.58 0.18 42)}
[data-theme="light"] .g-eclair .gname{color:oklch(0.62 0.17 132)}
.disc{width:50px;height:50px;border-radius:50%;background:repeating-radial-gradient(circle, oklch(0.12 0.02 300) 0 1.4px, oklch(0.22 0.03 300) 1.4px 3.2px);box-shadow:inset 0 0 0 1px oklch(0 0 0/.4)}
.disc::after{content:"";display:block;margin:38% auto;width:24%;height:24%;border-radius:50%;background:oklch(0.78 0.17 48)}
.gcard[aria-pressed="true"] .disc{animation:spin 3.5s linear infinite}
.bolt{width:0;height:0;display:block;
  border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:26px solid oklch(0.88 0.19 120);
  clip-path:polygon(58% 0, 0 58%, 40% 58%, 30% 100%, 100% 40%, 55% 40%);
  width:34px;height:46px;border:0;background:oklch(0.88 0.19 120)}
[data-theme="light"] .bolt{background:oklch(0.62 0.17 132)}
.g-sprint .gname{font-family:"Archivo",sans-serif;text-transform:uppercase;letter-spacing:.005em;color:oklch(0.76 0.22 356)}
[data-theme="light"] .g-sprint .gname{color:oklch(0.56 0.23 0)}
.g-sprint{background:oklch(0.200 0.042 346);border-color:oklch(0.30 0.048 346)}
.g-sprint[aria-pressed="true"]{border-color:oklch(0.69 0.245 356);background:oklch(0.245 0.060 348)}
[data-theme="light"] .g-sprint{background:oklch(0.965 0.020 350);border-color:oklch(0.875 0.030 350)}
[data-theme="light"] .g-sprint[aria-pressed="true"]{border-color:oklch(0.56 0.23 0);background:oklch(0.945 0.040 352)}
.chrono{width:46px;height:46px;border-radius:50%;display:block;border:4px solid oklch(0.76 0.22 356);position:relative;box-shadow:inset 0 0 0 3px oklch(0 0 0/.25)}
.chrono::after{content:"";position:absolute;left:50%;top:18%;width:3px;height:34%;border-radius:2px;background:oklch(0.76 0.22 356);transform-origin:bottom center;transform:translateX(-50%) rotate(48deg)}
[data-theme="light"] .chrono{border-color:oklch(0.56 0.23 0)}
[data-theme="light"] .chrono::after{background:oklch(0.56 0.23 0)}
.gcard[aria-pressed="true"] .chrono::after{animation:sweep 2s linear infinite}
@keyframes sweep{to{transform:translateX(-50%) rotate(408deg)}}

/* --- scène Sprint : le chrono remplace la pochette --- */
.chrono-stage{position:relative;width:124px;height:124px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line)}
.chrono-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
.chrono-stage.revealed img{opacity:1}
.chrono-stage .num{position:relative;z-index:2;font-family:var(--font-d);font-weight:800;font-size:46px;line-height:1;color:var(--acc);font-variant-numeric:tabular-nums;transition:opacity .3s}
.chrono-stage.revealed .num{opacity:0}
.chrono-stage.hot .num{animation:tick 1s steps(2) infinite;color:var(--neg)}
@keyframes tick{50%{opacity:.45}}

/* --- classement de manche --- */
.podium{display:flex;flex-direction:column;gap:6px}
.podium div{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 14px;font-size:14px}
.podium .pos{font-family:var(--font-d);font-weight:800;font-size:17px;color:var(--mute);min-width:22px}
.podium .who{flex:1;font-weight:600}
.podium.first .pos{color:var(--gold)}
.podium div:first-child{border-color:var(--gold)}
.podium div:first-child .pos{color:var(--gold)}
.podium .gain{font-family:var(--font-d);font-weight:800;color:var(--acc-soft)}
.podium .miss{color:var(--neg);font-size:13px}


.gsoon{border:1px dashed var(--line);border-radius:var(--r-s);padding:12px 16px;color:var(--mute);font-size:13px;text-align:center}

.opts{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;animation:screen-in .3s var(--ease)}
.chips{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:7px}
.chips legend{padding:0;margin-bottom:8px}
.chips label{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 15px;font-size:14px;cursor:pointer;user-select:none;transition:background .15s,border-color .15s}
.chips label:has(:checked){background:color-mix(in oklab, var(--acc) 18%, var(--surface));border-color:var(--acc);color:var(--acc-soft)}
.chips input{display:none}

/* ============================ jeu : commun ============================ */
.scoreboard{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:2px 20px}
.scoreboard::-webkit-scrollbar{display:none}
.sb{flex:0 0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:8px 12px;display:flex;flex-direction:column;gap:2px;min-width:86px;transition:border-color .2s,background .2s}
.sb.active{border-color:var(--acc);background:color-mix(in oklab, var(--acc) 14%, var(--surface))}
.sb.me .name::after{content:" (toi)";color:var(--mute);font-weight:400}
.sb .name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:112px}
.sb .stats{display:flex;gap:9px;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.sb .stats b{color:var(--ink);font-family:var(--font-d);font-size:15px}
.sb .stats .tok{color:var(--gold)}

.banner{font-family:var(--font-d);font-weight:800;font-size:23px;letter-spacing:var(--track);line-height:1.12;min-height:26px}
.banner small{display:block;font:500 14px/1.4 var(--font);color:var(--ink-2);margin-top:5px;letter-spacing:0}
.banner .timer{color:var(--acc);font-variant-numeric:tabular-nums}
[data-game="eclair"] .banner{text-transform:uppercase;font-size:20px;letter-spacing:.01em}

.stage{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;align-items:center;gap:13px;position:relative;overflow:hidden}
.track-info{text-align:center;min-height:20px;font-weight:600}
.track-info small{display:block;color:var(--ink-2);font-weight:400;font-size:13px}
.track-info .big{font-family:var(--font-d);font-size:38px;font-weight:800;line-height:1.05;color:var(--acc-soft);letter-spacing:var(--track)}
.track-info .big.ok{color:var(--pos)} .track-info .big.ko{color:var(--neg)}
.progress{width:100%;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--acc);transition:width .25s linear}

/* --- vinyle (Décennies) --- */
.vinyl{position:relative;width:112px;height:112px;border-radius:50%;flex:0 0 auto;
  background:repeating-radial-gradient(circle, oklch(0.10 0.02 300) 0 1.5px, oklch(0.19 0.03 300) 1.5px 3.5px);
  box-shadow:0 0 0 8px var(--surface-2), 0 20px 40px -18px oklch(0 0 0/.85)}
.vinyl i{position:absolute;inset:38%;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px oklch(0.10 0.02 300)}
.vinyl img,.bolt-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease);z-index:1}
.vinyl img{border-radius:50%}
.vinyl.revealed img,.bolt-stage.revealed img{opacity:1}
.vinyl.spin{animation:spin 1.9s linear infinite}

/* --- éclair (Éclair) --- */
.bolt-stage{position:relative;width:118px;height:118px;display:grid;place-items:center;border-radius:var(--r-s);overflow:hidden;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.bolt-stage .bolt{width:46px;height:62px;z-index:2;transition:opacity .3s}
.bolt-stage.revealed .bolt{opacity:0}
.bolt-stage.pulse .bolt{animation:zap .5s steps(2) infinite}
@keyframes zap{50%{opacity:.25;transform:scale(1.08)}}

.segbar{display:flex;gap:4px;width:100%;height:11px;margin-bottom:15px}
.segbar i{flex:var(--w);border-radius:var(--r-s);background:var(--line);position:relative;overflow:hidden;transition:background .2s}
.segbar i.open{background:color-mix(in oklab, var(--acc) 32%, var(--line))}
.segbar i b{position:absolute;inset:0;width:0;background:var(--acc);display:block}
.segbar i.open::after{content:attr(data-s);position:absolute;top:14px;left:0;font-size:10px;color:var(--mute);font-weight:600;font-variant-numeric:tabular-nums}

/* --- frise --- */
.timeline-wrap{display:flex;flex-direction:column;gap:6px}
.timeline-owner{font-size:13px;color:var(--ink-2);font-weight:500}
.timeline{display:flex;align-items:stretch;gap:6px;overflow-x:auto;padding:6px 20px 12px;margin:0 -20px;scrollbar-width:none;scroll-snap-type:x proximity}
.timeline::-webkit-scrollbar{display:none}
.tcard{flex:0 0 114px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:8px;display:flex;flex-direction:column;gap:5px;scroll-snap-align:center}
.tcard img{width:100%;aspect-ratio:1;border-radius:calc(var(--r-s) - 4px);object-fit:cover;background:var(--surface-2)}
.tcard b{font-family:var(--font-d);font-size:22px;font-weight:800;line-height:1;color:var(--acc-soft);font-variant-numeric:tabular-nums}
.tcard small{color:var(--mute);font-size:11px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tcard.new{animation:pop .45s var(--ease);border-color:var(--pos)}
.tcard.new b{color:var(--pos)}
.tcard.lost{border-color:var(--neg);opacity:.5;border-style:dashed}
.slot{flex:0 0 42px;border-radius:var(--r-s);border:2px dashed var(--line);display:grid;place-items:center;color:var(--mute);font-size:24px;font-weight:300;position:relative;transition:border-color .15s,background .15s,transform .1s;cursor:pointer;min-height:96px}
.slot:active{transform:scale(.94)}
.slot.pick{border-style:solid;border-color:var(--acc);background:color-mix(in oklab, var(--acc) 20%, transparent);color:var(--acc-soft)}
.slot.pick::before{content:attr(data-who);position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;background:var(--acc);color:var(--on-acc);padding:2px 6px;border-radius:var(--r-pill);white-space:nowrap}
.slot.bet{border-color:var(--gold);color:var(--gold)}
.slot.bet::after{content:attr(data-bet);position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;background:var(--gold);color:var(--on-acc);padding:2px 6px;border-radius:var(--r-pill);white-space:nowrap}
.slot.arm{border-color:var(--gold);background:color-mix(in oklab, var(--gold) 14%, transparent);animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{background:color-mix(in oklab, var(--gold) 26%, transparent)}}
.slot.disabled{pointer-events:none;opacity:.45}
.slot.right{border-color:var(--pos);background:color-mix(in oklab, var(--pos) 16%, transparent);border-style:solid}
.slot.wrong{border-color:var(--neg);background:color-mix(in oklab, var(--neg) 14%, transparent);border-style:solid}

/* --- actions --- */
.actions{display:flex;flex-direction:column;gap:10px}
.actions .row{justify-content:center}
.guess{display:flex;gap:8px}
.guess input{flex:1;min-width:0;min-height:46px}
.note{font-size:13px;color:var(--mute);text-align:center;line-height:1.4}
.note b{color:var(--ink-2)}
.tokline{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;color:var(--ink-2)}
.pip{width:13px;height:13px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1px color-mix(in oklab, var(--gold) 50%, transparent)}
.pip.off{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}

.guess-box{position:relative}
.guess-box input{width:100%}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;z-index:5;max-height:220px;overflow-y:auto;box-shadow:0 16px 36px -14px oklch(0 0 0/.65)}
.suggest div{padding:11px 14px;font-size:15px;cursor:pointer;border-top:1px solid var(--line)}
.suggest div:first-child{border-top:0}
.suggest div:hover,.suggest div.hl{background:color-mix(in oklab, var(--acc) 16%, transparent)}
.suggest small{color:var(--mute)}
.others{display:flex;flex-wrap:wrap;gap:6px}
.others span{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px;font-size:13px;color:var(--ink-2)}
.others span.done{border-color:var(--pos);color:var(--pos)}
.others span.out{border-color:var(--neg);color:var(--neg)}
.pts{font-family:var(--font-d);font-weight:800;color:var(--gold)}
.round-res{display:flex;flex-direction:column;gap:6px}
.round-res div{display:flex;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 14px;font-size:14px}

/* ============================ fin ============================ */
.endhero{text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;padding:20px 0 4px}
.endhero .lede{max-width:26ch}
.ranking{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:r}
.ranking li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:13px 16px;display:flex;align-items:center;gap:13px;counter-increment:r;animation:pop .4s var(--ease) both}
.ranking li::before{content:counter(r);font-family:var(--font-d);font-weight:800;font-size:19px;color:var(--mute);width:22px}
.ranking li:first-child{border-color:var(--gold)}
.ranking li:first-child::before{color:var(--gold)}
.ranking li span{flex:1;font-weight:600}
.ranking li b{font-family:var(--font-d);font-size:18px;color:var(--acc-soft)}
.ranking li:nth-child(2){animation-delay:.07s}.ranking li:nth-child(3){animation-delay:.14s}
.ranking li:nth-child(4){animation-delay:.21s}.ranking li:nth-child(5){animation-delay:.28s}

/* ============================ feuilles & toast ============================ */
.modal{position:fixed;inset:0;background:oklch(0.12 0.02 60/.6);z-index:30;display:flex;align-items:flex-end;justify-content:center;animation:screen-in .2s var(--ease)}
.sheet{background:var(--surface);color:var(--ink);border-radius:var(--r) var(--r) 0 0;padding:18px 20px max(26px,env(safe-area-inset-bottom));width:100%;max-width:540px;max-height:86dvh;overflow-y:auto;animation:sheet-in .32s var(--ease);font-size:15px;line-height:1.5;border:1px solid var(--line);border-bottom:0}
@keyframes sheet-in{from{transform:translateY(44px);opacity:0}}
.sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.sheet h3{font-family:var(--font-d);font-size:21px;margin:16px 0 6px;color:var(--acc-soft);letter-spacing:var(--track)}
.sheet h3:first-of-type{margin-top:8px}
.sheet p{margin:6px 0}
.sheet ul{margin:6px 0;padding-left:19px}
.sheet li{margin:5px 0}
.toast{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translate(-50%,18px);background:var(--ink);color:var(--bg);padding:11px 17px;border-radius:var(--r-pill);font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:opacity .24s var(--ease),transform .24s var(--ease);z-index:40;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* --- chaque carte de jeu porte un aperçu de la palette de son jeu --- */
.g-decennies{background:oklch(0.215 0.045 303);border-color:oklch(0.30 0.050 303)}
.g-eclair{background:oklch(0.195 0.040 256);border-color:oklch(0.29 0.045 254)}
.g-decennies[aria-pressed="true"]{border-color:oklch(0.70 0.19 44);background:oklch(0.26 0.060 300)}
.g-eclair[aria-pressed="true"]{border-color:oklch(0.88 0.19 120);background:oklch(0.24 0.055 254)}
[data-theme="light"] .g-decennies{background:oklch(0.965 0.022 68);border-color:oklch(0.88 0.030 64)}
[data-theme="light"] .g-eclair{background:oklch(0.965 0.020 232);border-color:oklch(0.87 0.030 238)}
[data-theme="light"] .g-decennies[aria-pressed="true"]{border-color:oklch(0.62 0.185 42);background:oklch(0.94 0.045 62)}
[data-theme="light"] .g-eclair[aria-pressed="true"]{border-color:oklch(0.68 0.175 132);background:oklch(0.94 0.045 150)}

/* le bandeau Éclair crie sur son titre, pas sur sa phrase d'explication */
[data-game="eclair"] .banner small,[data-game="eclair"] .note,[data-game="eclair"] .gdesc{text-transform:none}
[data-game="eclair"] .btn.ghost{letter-spacing:.02em}

/* ============================ jeu : Sablier ============================ */
[data-game="sablier"]{
  --bg:        oklch(0.185 0.020 40);
  --surface:   oklch(0.245 0.024 42);
  --surface-2: oklch(0.300 0.028 44);
  --line:      oklch(0.360 0.030 44);
  --ink:       oklch(0.960 0.020 80);
  --ink-2:     oklch(0.800 0.030 75);
  --mute:      oklch(0.640 0.030 65);
  --acc:       oklch(0.840 0.130 82);
  --acc-soft:  oklch(0.890 0.095 85);
  --on-acc:    oklch(0.22 0.040 50);
  --pos:       oklch(0.820 0.140 160);
  --neg:       oklch(0.700 0.180 22);
  --gold:      oklch(0.860 0.140 90);
  --glow: 0.14;
  --r: 14px; --r-s: 10px; --r-pill: 999px;
  --font-d: "Fraunces", "Bricolage Grotesque", Georgia, serif;
  --track: -0.015em;
}
[data-theme="light"][data-game="sablier"]{
  --bg:        oklch(0.955 0.020 80);
  --surface:   oklch(0.990 0.012 85);
  --surface-2: oklch(0.925 0.024 80);
  --line:      oklch(0.860 0.030 78);
  --ink:       oklch(0.230 0.030 45);
  --ink-2:     oklch(0.440 0.030 48);
  --mute:      oklch(0.580 0.030 55);
  --acc:       oklch(0.640 0.140 70);
  --acc-soft:  oklch(0.520 0.120 65);
  --on-acc:    oklch(0.99 0.010 80);
  --pos:       oklch(0.540 0.130 160);
  --neg:       oklch(0.540 0.180 24);
  --gold:      oklch(0.620 0.120 85);
  --glow: 0.10;
}
[data-game="sablier"] h1,[data-game="sablier"] .banner,[data-game="sablier"] .turn-who{font-family:var(--font-d);font-weight:700;font-variation-settings:"opsz" 72,"SOFT" 40}
.g-sablier .gname{font-family:"Fraunces",Georgia,serif;font-weight:700;color:oklch(0.86 0.13 82)}
[data-theme="light"] .g-sablier .gname{color:oklch(0.60 0.14 68)}
.g-sablier{background:oklch(0.245 0.026 42);border-color:oklch(0.35 0.03 44)}
.g-sablier[aria-pressed="true"]{border-color:oklch(0.84 0.13 82);background:oklch(0.29 0.035 46)}
[data-theme="light"] .g-sablier{background:oklch(0.965 0.022 80);border-color:oklch(0.87 0.03 78)}
[data-theme="light"] .g-sablier[aria-pressed="true"]{border-color:oklch(0.64 0.14 70);background:oklch(0.94 0.045 82)}
.hourglass{width:34px;height:48px;display:block;position:relative}
.hourglass::before,.hourglass::after{content:"";position:absolute;left:0;width:34px;height:22px;background:oklch(0.86 0.13 82)}
.hourglass::before{top:0;clip-path:polygon(0 0,100% 0,52% 100%,48% 100%)}
.hourglass::after{bottom:0;clip-path:polygon(48% 0,52% 0,100% 100%,0 100%)}
[data-theme="light"] .hourglass::before,[data-theme="light"] .hourglass::after{background:oklch(0.62 0.14 70)}
.gcard[aria-pressed="true"] .hourglass{animation:flip 3s ease-in-out infinite}
@keyframes flip{0%,70%{transform:rotate(0)}85%,100%{transform:rotate(180deg)}}

/* --- options salon --- */
.opt-rounds{display:flex;gap:7px;flex-wrap:wrap}
.opt-rounds label{flex:1;min-width:110px}
.field.row .num{width:84px;text-align:center;min-height:40px;padding:8px}

/* --- équipes --- */
.sab-teams{display:flex;gap:6px;overflow-x:auto;margin:0 -20px;padding:2px 20px;scrollbar-width:none}
.sab-teams::-webkit-scrollbar{display:none}
.tm{flex:1 0 140px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px;border-top:3px solid var(--tc)}
.tm-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.tm-score{font-family:var(--font-d);font-weight:700;font-size:20px;color:var(--tc)}
.tm-members{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.mem{font-size:12px;padding:2px 8px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2)}
.mem.speaking{background:var(--tc);color:#fff;font-weight:600}
.mem.off{opacity:.45;text-decoration:line-through}
.mem.empty{color:var(--mute);background:transparent}
.mem.me{outline:2px solid var(--acc)}
.teams-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.team{font:inherit;color:var(--ink);text-align:left;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--tc);border-radius:var(--r-s);padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:8px;min-height:96px;transition:transform .12s var(--ease)}
.team:active{transform:scale(.97)}
.team-name{font-family:var(--font-d);font-weight:700;font-size:20px;color:var(--tc)}
.team-list{display:flex;flex-wrap:wrap;gap:4px}
.note.warn{color:var(--neg)}
.fine.center{text-align:center}

/* --- cartes --- */
.hand{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pcard,.bigcard{font:inherit;color:var(--on-acc);text-align:left;background:oklch(0.97 0.02 85);border:1px solid oklch(0.82 0.04 80);border-radius:var(--r-s);padding:12px;display:flex;flex-direction:column;gap:4px;position:relative;cursor:pointer;transition:transform .12s var(--ease),opacity .15s;box-shadow:0 8px 20px -14px oklch(0 0 0/.6)}
.pcard:active{transform:scale(.97)}
.pcard.out{opacity:.4;text-decoration:line-through;background:oklch(0.85 0.01 80)}
.pcard:disabled{cursor:default}
.pc-cat{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:oklch(0.50 0.08 60);font-weight:600}
.pc-name{font-family:var(--font-d);font-weight:700;font-size:17px;line-height:1.15;color:oklch(0.20 0.03 50)}
.dots{font-size:10px;letter-spacing:2px;color:oklch(0.60 0.10 60)}
.bigcard{padding:22px 20px;gap:8px;cursor:default;animation:pop .35s var(--ease)}
.bigcard .pc-name{font-size:34px;line-height:1.05}
.ready{text-align:center;padding:30px 0;font-family:var(--font-d);font-size:28px;font-weight:700}
.ready small{display:block;font:400 14px var(--font);color:var(--mute);margin-top:6px}

/* --- tour --- */
.roundtag{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 14px;font-weight:600;font-size:15px}
.roundtag small{display:block;font-weight:400;color:var(--ink-2);font-size:13px;margin-top:3px;line-height:1.4}
.roundtag.next{border-style:dashed}
.recap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 14px;font-size:14px}
.recap .who{color:var(--tc);font-weight:700}
.recap small{display:block;color:var(--mute);margin-top:4px;line-height:1.4}
.gong{background:color-mix(in oklab, var(--gold) 16%, var(--surface));border:1px solid var(--gold);border-radius:var(--r-s);padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.gong p{margin:0}
.turnbox{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--tc);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.turn-who{font-size:32px;font-weight:700;line-height:1;color:var(--tc)}
.livehead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.livehead .turn-who{font-size:26px}
.clock{font-family:var(--font-d);font-weight:700;font-size:44px;line-height:1;font-variant-numeric:tabular-nums;color:var(--acc);min-width:64px;text-align:right}
.clock.pre{color:var(--mute)}
.clock.hot{color:var(--neg);animation:tick 1s steps(2) infinite}
.guessed{display:flex;flex-wrap:wrap;gap:6px}
.guessed span{background:color-mix(in oklab, var(--pos) 18%, var(--surface));border:1px solid var(--pos);border-radius:var(--r-pill);padding:6px 12px;font-size:14px;animation:pop .3s var(--ease)}

/* --- scores --- */
.scores table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.scores th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600;text-align:right;padding:4px 8px}
.scores th:first-child{text-align:left}
.scores td{padding:8px;text-align:right;border-top:1px solid var(--line)}
.scores td:first-child{text-align:left;font-weight:600}
.scores .sw{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--tc);margin-right:8px;vertical-align:-1px}
.scores b{font-family:var(--font-d);font-size:17px}
.amend{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 14px;font-size:14px}
.amend summary{cursor:pointer;color:var(--ink-2)}
.amend-list{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.amend-list label{display:flex;align-items:center;gap:10px}
.amend-list input[type=checkbox]{appearance:auto;width:18px;height:18px;min-height:0;padding:0}
.amend-list small{color:var(--mute);margin-left:auto}

/* --- dessin --- */
.sab-draw{display:flex;flex-direction:column;gap:8px}
#sab-canvas{width:100%;aspect-ratio:4/3;background:#fff;border-radius:var(--r-s);border:1px solid var(--line);touch-action:none;display:block}
.swatches{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.swatches .sw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px oklch(0 0 0/.25)}
.swatches .sw.on{border-color:var(--acc);transform:scale(1.15)}
.swatches input[type=color]{width:30px;height:30px;padding:0;border:0;background:none;min-height:0;cursor:pointer}
.tools .btn.on{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.gallery-wrap h3{font-family:var(--font-d);font-weight:700;font-size:20px;margin:6px 0}
.gallery-wrap h4{font-size:13px;color:var(--mute);margin:12px 0 6px;font-weight:600}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.gallery figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.gallery canvas{width:100%;display:block;background:#fff}
.gallery figcaption{padding:6px 8px;font-size:13px;font-weight:600}
.gallery figcaption small{display:block;color:var(--mute);font-weight:400}
.gallery.missed figure{border-color:var(--neg)}

/* --- réactions --- */
.sab-react{position:fixed;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));z-index:15;display:flex;justify-content:center;gap:4px;padding:6px 10px;pointer-events:none}
.react-btn{pointer-events:auto;font:inherit;font-size:22px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:color-mix(in oklab, var(--surface) 90%, transparent);cursor:pointer;backdrop-filter:blur(8px)}
.react-layer{position:fixed;inset:0;pointer-events:none;z-index:14;overflow:hidden}
.react-float{position:absolute;bottom:12vh;font-size:40px;line-height:1;will-change:transform,opacity}
.react-float .who{position:absolute;right:-6px;bottom:-4px;font-size:11px;font-weight:700;background:var(--ink);color:var(--bg);padding:2px 6px;border-radius:var(--r-pill)}
.screen.play.sab{padding-bottom:70px}

.chips label.chip-jv:has(:checked){background:color-mix(in oklab, oklch(0.85 0.2 142) 22%, var(--surface));border-color:oklch(0.85 0.2 142);color:oklch(0.9 0.14 130)}
[data-theme="light"] .chips label.chip-jv:has(:checked){border-color:oklch(0.51 0.155 148);color:oklch(0.44 0.13 145);background:oklch(0.94 0.045 150)}