/* Layout: a paused player on the left (the "screen"), the guess sheet on the right; stacks on phones.
   Single dark theme on purpose: a projection room. */
:root{
  color-scheme: dark;
  --bg:#0f0b0c; --surface:#191314; --surface-2:#221a1b; --line:#33282a;
  --fg:#f3ece6; --muted:#a8999a; --faint:#6e6062;
  --accent:#e1222f; --accent-ink:#fff; --ok:#6cc58f; --mid:#e7b24c; --bad:#e1222f;
  --screen:#000;
  --f-display:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-body:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --r:6px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--fg)}
body{font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 40px}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Header */
header.bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:16px;border-bottom:1px solid var(--line);margin-bottom:24px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img{height:40px;width:auto}
.brand .sep{width:1px;height:30px;background:var(--line)}
.brand .gk{font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:.06em;text-transform:uppercase}

.pen{font-family:var(--f-mono);font-size:12px;padding:1px 6px;border-radius:3px;margin-left:6px}
.pen.plus{color:var(--bad);background:rgba(225,34,47,.12)}
.pen.minus{color:var(--ok);background:rgba(108,197,143,.12)}
.chip.ok{border-color:var(--ok);color:var(--ok)}
.chip.ko{border-color:var(--bad);color:var(--bad);text-decoration:line-through}
.chip.miss{border-style:dashed;border-color:var(--ok);color:var(--ok);opacity:.7}
.chip[aria-pressed=true].ok{background:var(--ok);color:#0b1a12;text-decoration:none}
.chip[aria-pressed=true].ko{background:var(--bad);color:#fff}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 18px;margin-top:22px;font-size:13.5px;color:var(--muted)}
.rules div b{font-family:var(--f-mono);font-weight:500;margin-right:6px}
.rules .p{color:var(--bad)} .rules .m{color:var(--ok)}
.brand .gk small{display:block;font-family:var(--f-mono);font-weight:400;font-size:10.5px;letter-spacing:.12em;color:var(--muted);margin-top:-2px}
.hud{margin-left:auto;display:flex;gap:20px;align-items:baseline;font-family:var(--f-mono);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.hud b{font-family:var(--f-display);font-size:26px;color:var(--fg);letter-spacing:.02em;font-weight:800;margin-left:6px}

/* Screen (paused player) */
.stage{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:900px){.stage{grid-template-columns:1fr}}
.player{background:var(--screen);border-radius:var(--r);overflow:hidden;position:relative;box-shadow:0 30px 80px -30px rgba(225,34,47,.25)}
.frame{position:relative;aspect-ratio:16/9;max-width:100%;background:#000;overflow:hidden}
.zoom > img,.zoom > svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.frame .zoom{position:absolute;inset:0;transition:transform .6s ease}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.grain{animation:none}.frame .zoom{transition:none}}
.osd{position:absolute;top:12px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:12px;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
.osd .pz{display:flex;align-items:center;gap:8px;letter-spacing:.1em}
.osd .pz i{display:inline-block;width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff}
.osd .pz.play i{width:0;height:0;border-left:12px solid #fff;border-right:0;border-top:7px solid transparent;border-bottom:7px solid transparent}
.chrome{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#0a0808;border-top:1px solid #1d1617;font-family:var(--f-mono);font-size:11.5px;color:#9b8d8e}
.track{flex:1;height:4px;background:#2b2223;border-radius:2px;position:relative}
.track span{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:2px}
.track span::after{content:"";position:absolute;right:-5px;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff}
.reveal-title{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.85));transform:translateY(100%);transition:transform .5s ease}
.reveal-title.on{transform:none}
.reveal-title h2{margin:0;font-family:var(--f-display);font-weight:900;font-size:clamp(26px,4vw,44px);line-height:1;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.reveal-title p{margin:6px 0 0;font-family:var(--f-mono);font-size:12px;color:#d6cbc7}
.credit{font-family:var(--f-mono);font-size:11px;color:var(--faint);margin-top:10px}
.hint-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hint{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px dashed var(--line);border-radius:var(--r);background:transparent;cursor:pointer;font-size:13px;color:var(--fg)}
.hint:hover:not(:disabled){border-color:var(--muted)}
.hint em{font-style:normal;font-family:var(--f-mono);font-size:11.5px;color:var(--accent)}
.hint:disabled{cursor:default;opacity:.95;border-style:solid;background:var(--surface)}
.hint-out{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.hint-out div{font-size:13.5px;color:var(--muted)}
.hint-out b{color:var(--fg);font-weight:600}

/* Guess sheet */
.sheet{display:flex;flex-direction:column;gap:20px;min-width:0}
.field{display:flex;flex-direction:column;gap:8px}
.lab{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.lab span:nth-child(2){color:var(--faint);letter-spacing:.04em;text-transform:none}
.year-val{font-family:var(--f-display);font-weight:900;font-size:56px;line-height:.9;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.year-val.unset{color:var(--faint)}
input[type=range]{width:100%;accent-color:var(--accent);height:28px}
.decades{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.map{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative}
.map svg{display:block;width:100%;height:auto}
.map path.c{fill:#3a2e30;stroke:var(--surface);stroke-width:.5;cursor:pointer;transition:fill .15s}
.map path.c:hover{fill:#5a4749}
.map path.c.sel{fill:var(--accent)}
.map path.c.truth{fill:var(--ok)}
.map path.c.sel.truth{fill:var(--ok)}
.map .sphere{fill:#130e0f}
.map .line{stroke:var(--mid);stroke-width:1.5;stroke-dasharray:4 3;fill:none}
.map-name{font-size:13.5px;color:var(--muted);min-height:20px}
.map-name b{color:var(--fg)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:13.5px}
.chip:hover{border-color:var(--muted)}
.chip[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{padding:10px;background:transparent;border:0;cursor:pointer;font-weight:500}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
.text{width:100%;padding:11px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.text::placeholder{color:var(--faint)}
.go{appearance:none;border:0;background:var(--accent);color:var(--accent-ink);padding:15px 18px;border-radius:var(--r);cursor:pointer;font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:.08em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.go:hover{filter:brightness(1.08)}
.go small{font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.06em;opacity:.85;text-transform:none}

/* Reveal */
.score-rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.srow{display:grid;grid-template-columns:96px minmax(0,1fr) 64px;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.srow .k{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.srow .v{font-size:13.5px;min-width:0}
.srow .v s{color:var(--faint)}
.srow .v .you{color:var(--muted)}
.srow .p{text-align:right;font-family:var(--f-display);font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
.meter{height:3px;background:var(--line);border-radius:2px;margin-top:6px;overflow:hidden}
.meter i{display:block;height:100%}
.total{display:flex;justify-content:space-between;align-items:baseline;padding-top:4px}
.total .n{font-family:var(--f-display);font-weight:900;font-size:48px;line-height:1}
.total .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fiche{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.fiche h3,.tells h3{margin:0 0 10px;font-family:var(--f-mono);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.fiche dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;font-size:13.5px}
.fiche dt{color:var(--muted)}
.fiche dd{margin:0}
.fiche .src{margin-top:12px;font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.fiche .src a{color:var(--muted)}
.tag{display:inline-block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;padding:2px 7px;border-radius:3px;background:var(--surface-2);color:var(--mid);border:1px solid var(--line);margin-left:6px;vertical-align:2px}
.tells ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.tells li{display:grid;grid-template-columns:22px minmax(0,1fr);font-size:14px;line-height:1.45}
.tells li::before{content:"◉";color:var(--accent);font-size:11px;padding-top:3px}
.tells li b{font-weight:600}

/* Home */
.home{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:24px 8px}
@media (max-width:900px){.home{grid-template-columns:1fr;gap:24px}}
.home h1{margin:0;font-family:var(--f-display);font-weight:900;font-size:clamp(72px,12vw,150px);line-height:.82;letter-spacing:-.01em;text-transform:uppercase}
.home h1 .bang{color:var(--accent)}
.home .lede{font-size:17px;max-width:46ch;color:#d9cfca;margin:18px 0 0}
.modes{display:flex;flex-direction:column;gap:10px}
.mode{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;text-align:left;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);cursor:pointer}
.mode:hover:not(:disabled){border-color:var(--accent)}
.mode:disabled{cursor:not-allowed;opacity:.6}
.mode .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-family:var(--f-display);font-weight:900;font-size:20px}
.mode.main .ic{background:var(--accent)}
.mode strong{display:block;font-family:var(--f-display);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.03em;line-height:1.1}
.mode span.d{display:block;font-size:13px;color:var(--muted)}
.mode .soon{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--faint);text-transform:uppercase}
.axes{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.axes span{font-family:var(--f-mono);font-size:11.5px;padding:5px 9px;border:1px solid var(--line);border-radius:3px;color:var(--muted)}
.axes span b{color:var(--fg);font-weight:500}
.foot{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint);max-width:90ch}

/* End */
.end{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:36px;align-items:start}
@media (max-width:900px){.end{grid-template-columns:1fr}}
.end .big{font-family:var(--f-display);font-weight:900;font-size:clamp(80px,13vw,160px);line-height:.85;font-variant-numeric:tabular-nums}
.end .rank{font-family:var(--f-display);font-weight:800;font-size:30px;text-transform:uppercase;color:var(--accent);margin-top:8px}
.recap{display:flex;flex-direction:column;gap:10px}
.rc{display:grid;grid-template-columns:120px minmax(0,1fr) 60px;gap:14px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.rc .th{aspect-ratio:16/9;background:#000;border-radius:3px;overflow:hidden;position:relative}
.rc .th > *{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.rc .t{font-weight:600;font-size:14px}
.rc .s{font-size:12px;color:var(--muted);font-family:var(--f-mono)}
.rc .p{text-align:right;font-family:var(--f-display);font-weight:800;font-size:22px}
.ghost{background:transparent;border:1px solid var(--line);padding:12px 16px;border-radius:var(--r);cursor:pointer}
.ghost:hover{border-color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Logo néon ---------- */
.neon{display:inline-block;line-height:0}
.neon-svg{display:block;width:100%;height:auto;overflow:visible}
.neon .n-dead{fill:#1c2735}
.neon .n-wide{fill:#1567ff}
.neon .n-mid{fill:#3ea6ff}
.neon .n-core{fill:#e2f4ff}
.neon .n-dead-dice{stroke:#1c2735}
.neon .n-dice-glow{stroke:#ff8a1e}
.neon .n-dice-core{stroke:#ffd8a8}
.neon .seg{opacity:0}
.neon .n-dice{opacity:0}
.neon.intro .seg{animation:neon-on .9s linear var(--d) forwards}
.neon.intro .n-dice{animation:dice-on 1s linear var(--dice-delay) forwards}
.neon.lit .seg,.neon.lit .n-dice{opacity:1}
.neon.lit .n-wide,.neon.lit .n-dice-glow{animation:breathe 3.4s ease-in-out infinite}
.neon.lit .seg.flick{animation:flick .8s linear}
@keyframes neon-on{0%{opacity:0}8%{opacity:.9}12%{opacity:.05}20%{opacity:1}26%{opacity:.15}34%{opacity:.85}38%{opacity:.3}50%,100%{opacity:1}}
@keyframes dice-on{0%{opacity:0}10%{opacity:1}16%{opacity:.2}24%{opacity:1}30%{opacity:.4}45%,100%{opacity:1}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes flick{0%{opacity:1}10%{opacity:.1}18%{opacity:.9}30%{opacity:.05}45%{opacity:1}55%{opacity:.4}70%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.neon .seg,.neon .n-dice{opacity:1!important;animation:none!important}.neon .n-wide,.neon .n-dice-glow{animation:none!important}}
.brand .neon{width:170px}
.brand .gk small{margin-top:4px}
.home .neon-hero{width:min(520px,100%);margin:0 0 10px -10px}

/* ---------- Échelle des années ---------- */
.decades{position:relative;height:16px}
.decades span{position:absolute;top:0;white-space:nowrap}

/* ---------- Affiche à la révélation ---------- */
.frame{perspective:1100px}
.frame .zoom img{transition:filter .6s ease}
.frame.has-poster .zoom img{filter:brightness(.62) saturate(.85)}
.frame.has-poster .reveal-title{padding-right:36%}
.poster{position:absolute;right:5%;top:50%;height:86%;aspect-ratio:2/3;z-index:2;transform-style:preserve-3d;
  transform:translateY(-50%) rotate(-3deg);animation:poster-in 1.1s cubic-bezier(.2,.8,.25,1) .25s both}
.poster img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px;
  box-shadow:0 22px 50px -10px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1)}
.poster::after{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  background-size:250% 100%;background-position:120% 0;animation:poster-gloss 1s ease 1.2s both}
@keyframes poster-in{
  0%{opacity:0;transform:translateY(-50%) translateX(70%) rotateY(-80deg) rotate(8deg) scale(.75)}
  55%{opacity:1;transform:translateY(-50%) translateX(-5%) rotateY(10deg) rotate(-6deg) scale(1.04)}
  80%{transform:translateY(-50%) translateX(1%) rotateY(-3deg) rotate(-2.5deg) scale(.995)}
  100%{opacity:1;transform:translateY(-50%) rotate(-3deg)}}
@keyframes poster-gloss{to{background-position:-60% 0}}
@media (max-width:600px){.poster{height:78%;right:3%}.frame.has-poster .reveal-title{padding-right:40%}.reveal-title h2{font-size:24px}}
@media (prefers-reduced-motion:reduce){.poster,.poster::after{animation:none}.poster{opacity:1}}

/* ---------- Pays : boutons rapides ---------- */
.pays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pays-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 9px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;color:var(--fg);font-size:13px;font-weight:500;
  transition:border-color .15s,background .15s}
.pays-btn:hover{border-color:var(--muted)}
.pays-btn .sil{width:64px;height:48px;display:block}
.pays-btn .sil path{fill:#4a3b3e;transition:fill .15s}
.pays-btn .flag{position:absolute;top:7px;left:7px;width:22px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.pays-btn[aria-pressed=true]{border-color:var(--fg);background:var(--surface-2)}
.pays-btn[aria-pressed=true] .sil path{fill:var(--accent)}
.pays-btn.autre{justify-content:center;color:var(--muted)}
.pays-btn.autre .autre-ic{height:48px;display:grid;place-items:center;font-size:26px;line-height:1}
.pays-btn.autre .autre-ic .flag{position:static;width:44px}
.pays-btn.autre[aria-pressed=true]{color:var(--fg)}
.pays-btn.vrai{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok) inset}
.pays-btn.vrai .sil path{fill:var(--ok)}
.pays-btn.faux{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad) inset}
.pays-btn.faux .sil path{fill:var(--bad)}
#map-box{margin-top:8px}
.srow .v .flag{width:16px;height:auto;vertical-align:-2px;margin-right:4px;border-radius:2px}
.total .n small,.end .big small{font-size:.4em;color:var(--muted);font-weight:600;margin-left:4px}
@media (max-width:420px){.pays{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Modes de jeu ---------- */
.titre-section{font-family:var(--f-display);font-weight:900;font-size:clamp(40px,7vw,72px);text-transform:uppercase;line-height:.9;margin:0 0 10px}
.reglages{max-width:560px;display:flex;flex-direction:column;gap:12px;padding-block:12px}
.noms{display:flex;flex-direction:column;gap:8px}
.nom-ligne{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px;align-items:center}
.nom-ligne .num{font-family:var(--f-display);font-weight:900;font-size:22px;color:var(--accent);text-align:center}
.ghost.suppr{padding:10px 12px}
.passe{min-height:55vh;display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:640px;margin:0 auto;text-align:left}
.passe h2{margin:0;font-family:var(--f-display);font-weight:900;font-size:clamp(44px,9vw,96px);line-height:.9;text-transform:uppercase}
.passe h2 span{color:var(--accent)}
.passe h2.petit{font-size:clamp(26px,5vw,40px);text-transform:none;line-height:1.1}
.podium{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:rang}
.podium li{counter-increment:rang;display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.podium li::before{content:counter(rang);font-family:var(--f-display);font-weight:900;font-size:22px;color:var(--muted)}
.podium li:first-child{border-color:var(--accent)}
.podium li:first-child::before{color:var(--accent)}
.podium li span{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium li em{font-style:normal;font-family:var(--f-mono);font-size:13px}
.podium li b{font-family:var(--f-display);font-weight:800;font-size:24px;font-variant-numeric:tabular-nums}
.podium li.moi{background:var(--surface-2);border-color:var(--fg)}
.podium.grand li b{font-size:30px}
.big.gagnant{font-size:clamp(56px,10vw,120px);text-transform:uppercase;overflow-wrap:anywhere}
.recap-nom{margin:14px 0 4px;font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- Multijoueur ---------- */
.salle{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:start;padding-block:12px}
@media (max-width:900px){.salle{grid-template-columns:1fr}}
.qr-bloc{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:24px;align-items:center}
@media (max-width:600px){.qr-bloc{grid-template-columns:1fr}}
.qr{background:#fff;border-radius:8px;padding:10px;max-width:260px}
.qr svg{display:block;width:100%;height:auto}
.code-salle{font-family:var(--f-display);font-weight:900;font-size:clamp(56px,7vw,96px);letter-spacing:.08em;line-height:1;color:var(--accent)}
.url{font-family:var(--f-mono);font-weight:500;font-size:13px;overflow-wrap:anywhere;color:var(--fg)}
.liste-joueurs{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.liste-joueurs li{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-weight:600}
.liste-joueurs li span{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-weight:400}
.liste-joueurs li.fait{border-color:var(--ok)}
.liste-joueurs li.fait span{color:var(--ok)}
.liste-joueurs li.absent{opacity:.5}
.liste-joueurs li.vide{color:var(--muted);font-weight:400;border-style:dashed}
.envoye{padding:16px;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);text-align:center}
.verrouille .chip,.verrouille .pays-btn,.verrouille .seg button,.verrouille input[type=range]{cursor:default}
.go:disabled{opacity:.45;cursor:not-allowed;filter:none}