/* ============================================================
   play.css — styles du joueur (extraits de play.html)
   Chargé APRÈS brutal.css : surcharge les composants partagés.
   ============================================================ */

  body { min-height:100vh; display:flex; flex-direction:column; overscroll-behavior:none; }
  .topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:4px solid var(--ink); background:var(--paper); position:sticky; top:0; z-index:30; }
  .mute-btn.quit { background:var(--red); color:var(--paper); }
  body.playing .topbar { display:none; } /* pendant la question, le q-bar fait office de header fixe */
  .topbar .name { font-family:var(--fd); font-size:20px; letter-spacing:1.5px; }
  .topbar .name b { color:var(--magenta); }
  .you-pill { border:3px solid var(--ink); background:var(--green); padding:3px 10px; font-family:var(--fd); font-size:12px; letter-spacing:1px; box-shadow:3px 3px 0 var(--ink); max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .you-pill.hidden { display:none; }
  .tb-right { display:flex; align-items:center; gap:8px; }
  .mute-btn { width:34px; height:34px; font-size:16px; }

  section.screen { display:none; flex:1; }
  section.screen.active { display:flex; flex-direction:column; flex:1; }

  /* ---- JOIN / REJOINDRE (reproduit rejoindre.html) ---- */
  #screen-join.active { display:block; }
  /* écran REJOINDRE : pas de header HOMIES (il a déjà son propre header) -> l'écran tient dans 100dvh, le footer reste fixe */
  body:has(#screen-join.active) .topbar { display: none; }
  .join-screen { height:100dvh; display:flex; flex-direction:column; background:var(--paper); }
  .join-top { padding:12px 18px; display:flex; align-items:center; gap:10px; border-bottom:3px solid var(--ink); flex-shrink:0; }
  .join-back { width:34px; height:34px; border:3px solid var(--ink); background:var(--paper); font-family:var(--fd); font-size:28px; line-height:1; padding-bottom:3px; display:flex; align-items:center; justify-content:center; box-shadow:3px 3px 0 var(--ink); color:var(--ink); text-decoration:none; }
  .join-title { font-family:var(--fd); font-size:22px; letter-spacing:3px; }
  .join-scroll { flex:1; min-height:0; overflow-y:auto; padding:18px; display:flex; flex-direction:column; align-items:center; gap:16px; max-width:480px; margin:0 auto; width:100%; }
  .hero-sticker { position:relative; transform:rotate(-3deg); display:inline-flex; }
  .hero-sticker::before { content:''; position:absolute; top:5px; left:5px; right:-5px; bottom:-5px; background:var(--ink); }
  .hs-body { position:relative; padding:8px 16px; border:3px solid var(--ink); background:var(--magenta); color:var(--paper); display:flex; align-items:center; gap:6px; }
  .hs-body .ic { width:22px; height:22px; } .hs-body .ic .noto { width:100%; height:100%; }
  .hs-body .lbl { font-family:var(--fd); font-size:16px; letter-spacing:2px; }
  .hero-title { font-family:var(--fd); font-size:34px; line-height:1; text-align:center; }
  .hero-sub { font-weight:700; font-size:11px; color: color-mix(in srgb, var(--ink) 60%, transparent); text-align:center; max-width:280px; line-height:1.4; }
  .code-helper { font-weight:700; font-size:11px; letter-spacing:.8px; color: color-mix(in srgb, var(--ink) 50%, transparent); text-align:center; }
  .code-helper.ok { color:#2E7D32; } .code-helper.warn { color:var(--red); }
  .paste-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:2.5px solid var(--ink); background:#FFE066; font-family:var(--fd); font-size:12px; letter-spacing:1px; box-shadow:3px 3px 0 var(--ink); cursor:pointer; }
  .paste-pill .ic { width:14px; height:14px; } .paste-pill .ic .noto { width:100%; height:100%; }
  .or-sep { display:flex; align-items:center; gap:10px; width:100%; }
  .or-sep .line { flex:1; height:3px; background:var(--ink); }
  .or-sep .or { font-family:var(--fd); font-size:14px; letter-spacing:2px; padding:4px 10px; border:3px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); }
  .scan-card { position:relative; width:100%; cursor:pointer; background:none; border:none; padding:0; }
  .scan-card::before { content:''; position:absolute; top:7px; left:7px; right:-7px; bottom:-7px; background:var(--ink); }
  .sc-body { position:relative; border:4px solid var(--ink); background:var(--cyan); padding:18px 16px; display:flex; align-items:center; gap:14px; }
  .sc-body .qr-emoji { width:62px; height:62px; border:3px solid var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .sc-body .qr-emoji .noto { width:48px; height:48px; }
  .scan-meta { flex:1; }
  .scan-ttl { font-family:var(--fd); font-size:20px; line-height:1; letter-spacing:1px; color:var(--paper); display:block; }
  .scan-sub { font-weight:700; font-size:11px; line-height:1.3; color:rgba(255,254,247,.9); margin-top:4px; display:block; }
  .scan-arrow { font-family:var(--fd); font-size:22px; color:var(--paper); }
  .jstep { width:100%; display:flex; flex-direction:column; align-items:center; gap:16px; }
  .jstep.off { display:none; }
  .step-back { background:none; border:none; font-family:var(--fd); font-size:12px; letter-spacing:1px; text-decoration:underline; cursor:pointer; color:var(--ink); padding:0; }
  .profile-block { width:100%; border:3px dashed var(--ink); padding:14px; display:flex; flex-direction:column; gap:12px; }
  .pb-title { font-family:var(--fd); font-size:12px; letter-spacing:2px; color: color-mix(in srgb, var(--ink) 70%, transparent); }
  .join-err { min-height:18px; font-weight:700; font-size:13px; color:var(--paper); }
  .join-err.show { background:var(--ink); display:inline-block; padding:3px 8px; align-self:flex-start; }
  .join-foot { padding:12px 18px 16px; border-top:3px solid var(--ink); flex-shrink:0; background:var(--paper); }
  .join-cta { position:relative; width:100%; cursor:pointer; background:var(--magenta); color:var(--paper); border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:14px; font-family:var(--fd); font-size:18px; letter-spacing:2px; }
  .join-cta:disabled { opacity:.5; }
  .scan-ov { display:none; position:fixed; inset:0; z-index:200; background: color-mix(in srgb, var(--ink) 95%, transparent); flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px; }
  .scan-ov.show { display:flex; }
  .scan-ov-ttl { font-family:var(--fd); font-size:18px; letter-spacing:2px; color:var(--paper); text-align:center; }
  .scan-reader { width:100%; max-width:320px; border:4px solid var(--paper); overflow:hidden; }
  .scan-close { background:var(--red); color:var(--paper); border:3px solid var(--paper); padding:10px 20px; font-family:var(--fd); font-size:15px; letter-spacing:1.5px; cursor:pointer; }

  /* ---- PARTIES RÉCEMMENT REJOINTES (reconnexion rapide) ---- */
  .recent-rooms { width:100%; display:none; flex-direction:column; gap:8px; }
  .recent-rooms.show { display:flex; }
  .recent-head { display:flex; align-items:center; justify-content:space-between; }
  .recent-title { font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:2px; color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent); }
  .recent-clear { background:none; border:none; font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:1px; color:var(--red); text-decoration:underline; cursor:pointer; padding:0; }
  .recent-list { display:flex; flex-direction:column; gap:8px; }
  .recent-row { width:100%; cursor:pointer; display:flex; align-items:center; gap:10px; text-align:left;
    border:2.5px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); padding:8px 10px; }
  .recent-row:active { transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }
  .recent-row .code { font-family:var(--fb); font-weight:700; font-size:14px; letter-spacing:2px; flex-shrink:0; }
  .recent-row .host { flex:1; min-width:0; font-family:var(--fd); font-size:12px; letter-spacing:.5px; color: color-mix(in srgb, var(--ink) 65%, transparent);
    text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .recent-row .when { font-family:var(--fb); font-weight:700; font-size:9px; color: color-mix(in srgb, var(--ink) 50%, transparent); white-space:nowrap; flex-shrink:0; }

  /* ---- AVATAR PICKER ---- */
  .ava-pick { display:flex; gap:16px; align-items:stretch; }
  .ava-preview { width:88px; height:88px; font-size:88px; flex-shrink:0; box-shadow:5px 5px 0 var(--ink); }
  .ava-preview .ava-emo { border-width:4px; }
  .ava-pick-right { flex:1; display:flex; flex-direction:column; justify-content:center; gap:9px; min-width:0; }
  .color-row { display:flex; gap:7px; flex-wrap:wrap; }
  .color-sw { width:28px; height:28px; border:3px solid var(--ink); cursor:pointer; box-shadow:2px 2px 0 var(--ink); transition:transform .1s; }
  .color-sw.sel { transform:scale(1.18); box-shadow:0 0 0 2px var(--ink), 3px 3px 0 var(--ink); }
  .ava-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:6px; max-height:148px; overflow-y:auto; border:3px solid var(--ink); padding:8px; background:var(--paper); box-shadow:4px 4px 0 var(--ink); }
  @media (max-width:420px){ .ava-grid { grid-template-columns:repeat(6,1fr); } }
  .ava-opt { aspect-ratio:1; border:2px solid var(--ink); cursor:pointer; overflow:hidden; background:var(--paper); -webkit-tap-highlight-color:transparent; }
  .ava-opt .ava-emo { width:100%; height:100%; border:none; }
  .ava-opt.sel { outline:4px solid var(--magenta); outline-offset:-4px; }
  .you-pill .ava-emo { width:22px; height:22px; border-width:2px; }
  .you-pill { display:flex; align-items:center; gap:6px; }
  .code-cells { display:flex; gap:7px; width:100%; }
  .code-cell { flex:1 1 0; width:0; min-width:0; height:60px; border:4px solid var(--ink); background:var(--paper); font-family:var(--fb);
    font-weight:700; font-size:30px; text-align:center; text-transform:uppercase; outline:none; box-shadow:3px 3px 0 var(--ink); }
  .code-cell.filled { background:var(--yellow); }
  .code-cell:focus { background:#fff; box-shadow:4px 4px 0 var(--magenta); }
  #screen-transition.active { height:100dvh; }   /* topbar masquée pendant la transition */
  /* écran WAIT : verrouillé à l'écran -> header HOMIES toujours fixe, pas de scroll parasite */
  #screen-wait.active { flex:1; min-height:0; }
  #screen-wait .full { min-height:0; overflow-y:auto; }
  #waitTitle:empty { display:none; }   /* pas de titre -> on masque le sticker (plus de "cadre noir") */
  /* écran "TU ES DANS LA PLACE" : avatar + pseudo du joueur */
  .wait-you { display:flex; flex-direction:column; align-items:center; gap:10px; }
  .wait-you .ava-emo { width:92px; height:92px; font-size:92px; border-width:4px; box-shadow:6px 6px 0 var(--ink); }
  .wait-you .wy-name { font-family:var(--fd); font-size:24px; letter-spacing:1px; background:var(--yellow); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:4px 16px; text-transform:uppercase; }
  /* roster du salon : qui est là avec toi */
  .wait-room-h { font-family:var(--fd); font-size:13px; letter-spacing:1.5px; color:var(--ink); opacity:.55; margin-top:2px; }
  .wait-players { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; max-width:520px; width:100%; padding:0 6px; }
  .wp { display:flex; flex-direction:column; align-items:center; gap:5px; width:72px; }
  .wp-av { width:54px; height:54px; flex:0 0 auto; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--paper); overflow:hidden; }
  .wp-av > *, .wp-av img { width:100%; height:100%; display:block; object-fit:cover; }
  .wp-nm { font-family:var(--fb); font-weight:700; font-size:11px; line-height:1.1; text-align:center; max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wp.host .wp-av { box-shadow:3px 3px 0 var(--ink), 0 0 0 3px var(--cyan); }
  .wp-empty { font-family:var(--fb); font-weight:700; font-size:12px; opacity:.6; padding:6px 10px; text-align:center; }
  .join-err { min-height:18px; font-weight:700; font-size:13px; color:var(--paper); }
  .join-err.show { background:var(--ink); display:inline-block; padding:3px 8px; align-self:flex-start; }

  /* ---- centre generique ---- */
  .full { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px; padding:26px; }
  .full .emoji { font-size:72px; }
  .full .ttl { font-family:var(--fd); font-size:clamp(30px,9vw,46px); text-transform:uppercase; line-height:1; }
  .full .sub { font-weight:700; font-size:14px; letter-spacing:.5px; max-width:300px; }

  /* ---- QUESTION (layout games.html, styles dans brutal.css) ---- */
  .q-screen { flex:1; display:flex; flex-direction:column; min-height:0; }
  #screen-question.active { display:flex; flex-direction:column; height:100dvh; }
  #ansTiles, #answerZone { overflow-y:auto; }

  /* footer "qui a répondu" (mêmes styles que côté hôte / host.css) */
  .gh-foot { flex-shrink:0; padding:11px 14px; display:flex; align-items:center; gap:9px; border-top:3px solid var(--ink); background:var(--paper); }
  .gh-foot:empty { display:none; }
  .gh-foot .gf-avas { display:flex; }
  .gh-foot .gf-av { width:28px; height:28px; border:2px solid var(--ink); overflow:hidden; background:var(--paper); margin-left:-9px; }
  .gh-foot .gf-av:first-child { margin-left:0; }
  .gh-foot .gf-av img, .gh-foot .gf-av svg, .gh-foot .gf-av .av-emoji { width:100%; height:100%; display:block; }
  .gh-foot .gf-txt { font-family:var(--fb); font-weight:700; font-size:11px; letter-spacing:1px; color: color-mix(in srgb, var(--ink) 60%, transparent); }
  .gh-foot .gf-dot { width:9px; height:9px; border-radius:50%; background:var(--green); border:2px solid var(--ink); margin-left:auto; flex-shrink:0; }

  /* média joueur (image / 4 images) + indice */
  /* même largeur que la q-card / l'answer-zone (14px) + contenu étiré pleine largeur */
  .mob-media { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:12px 14px 0; }
  .mob-media:empty { display:none; }
  /* média seul (image / rébus) : cadre pleine largeur, comme la card du titre */
  .mob-media > .media-emoji, .mob-media > .media-img { box-sizing:border-box; width:100%; padding:14px; border:4px solid var(--ink); background:var(--paper); box-shadow:5px 5px 0 var(--ink); }
  .mob-media > .media-img { max-height:30vh; object-fit:contain; }
  .mob-media > .media-emoji { font-size:84px; }
  /* 4 images : grille pleine largeur, tuiles carrées qui remplissent */
  .mob-media .four-grid-m { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
  .mob-media .four-grid-m .fg-cell .media-emoji { font-size:52px; }
  .mob-media .hint-m { font-weight:700; font-size:12px; background:var(--cyan); border:3px solid var(--ink); padding:4px 10px; box-shadow:3px 3px 0 var(--ink); text-align:center; }

  /* (zone de réponse anagramme/texte + vertical stack .opt : maintenant dans brutal.css, partagé hôte/joueur) */

  /* feedback plein ecran colore */
  .fb-good { background:var(--green); }
  .fb-bad  { background:var(--red); }
  .fb-good .ttl, .fb-bad .ttl { color:var(--ink); }
  .fb-bad  .emoji { color:var(--paper); }
  .points-chip { font-family:var(--fd); font-size:40px; border:4px solid var(--ink); background:var(--paper); padding:6px 18px; box-shadow:6px 6px 0 var(--ink); }
  .rank-chip { font-weight:700; font-size:15px; border:3px solid var(--ink); background:var(--paper); padding:6px 14px; box-shadow:4px 4px 0 var(--ink); letter-spacing:1px; }
  .streak-chip { font-family:var(--fd); font-size:14px; background:var(--ink); color:var(--yellow); padding:4px 12px; letter-spacing:1px; }

  /* ===== CLASSEMENT TEMPORAIRE (leaderboard-temp.html, vue invité) ===== */
  #screen-leaderboard.active { display:flex; flex-direction:column; }
  .lb-screen { display:flex; flex-direction:column; height:100dvh; background:var(--paper); }
  .lb-top { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:3px solid var(--ink); flex-shrink:0; }
  .lb-top-right { display:flex; align-items:center; gap:8px; }
  .lb-brand { font-family:var(--fd); font-size:22px; letter-spacing:2px; }
  .lb-manche { font-family:var(--fd); font-size:12px; letter-spacing:1px; border:3px solid var(--ink); background:var(--yellow); padding:4px 11px; box-shadow:3px 3px 0 var(--ink); }
  .lb-hero { padding:18px 20px 0; display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
  .lb-emoji { width:54px; height:54px; } .lb-emoji .noto { width:100%; height:100%; }
  .lb-title { margin-top:4px; transform:rotate(-2deg); }
  .lb-title .body { padding:6px 18px; font-family:var(--fd); font-size:24px; letter-spacing:2.5px; background:var(--yellow); }
  .lb-sub { margin-top:8px; font-weight:700; font-size:10px; letter-spacing:1.5px; color: color-mix(in srgb, var(--ink) 65%, transparent); }
  .lb-list { padding:14px 18px 0; flex:1; overflow-y:auto; }
  .lb-row { position:relative; margin-bottom:9px; }
  .lb-row .sh { position:absolute; top:4px; left:4px; right:-4px; bottom:-4px; background:var(--ink); }
  .lb-row .bd { position:relative; background:var(--paper); border:3px solid var(--ink); padding:9px 11px; display:flex; align-items:center; gap:11px; }
  .lb-row.row-1st .bd { background:var(--yellow); }
  .lb-row.row-me .bd { border-color:var(--magenta); border-width:4px; }
  .lb-rank { font-family:var(--fd); font-size:13px; letter-spacing:1px; padding:4px 6px; border:2px solid var(--ink); background:var(--paper); min-width:36px; text-align:center; flex-shrink:0; }
  .lb-row.row-1st .lb-rank, .lb-row.row-me .lb-rank { background:var(--magenta); color:var(--paper); }
  .lb-av { width:38px; height:38px; flex-shrink:0; } .lb-av .ava-emo { width:38px; height:38px; font-size:38px; } .lb-av img { width:100%; height:100%; }
  .lb-name-col { flex:1; min-width:0; }
  .lb-nm { font-family:var(--fd); font-size:16px; letter-spacing:1px; line-height:1.1; }
  .lb-delta { font-weight:700; font-size:10px; letter-spacing:1px; margin-top:2px; }
  .lb-delta .gained { color:var(--magenta); } .lb-delta .eq { color: color-mix(in srgb, var(--ink) 45%, transparent); } .lb-delta .lost { color:var(--red); }
  .lb-total { font-family:var(--fd); font-size:22px; line-height:1; text-align:right; min-width:48px; }
  .lb-total .pts { font-family:var(--fb); font-weight:700; font-size:8px; letter-spacing:1px; color: color-mix(in srgb, var(--ink) 50%, transparent); margin-top:2px; }
  .lb-bottom { padding:14px 18px 18px; border-top:3px solid var(--ink); flex-shrink:0; background:var(--paper); }
  .plb-wait { font-family:var(--fd); font-size:14px; letter-spacing:1.5px; text-align:center; display:flex; align-items:center; justify-content:center; gap:8px; border:3px solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--ink); padding:12px; }
  .plb-dots { display:inline-flex; gap:4px; }
  .plb-dots span { width:7px; height:7px; background:var(--green); border:2px solid var(--ink); border-radius:50%; animation:plbpulse 1s ease-in-out infinite; }
  .plb-dots span:nth-child(2){ animation-delay:.2s; } .plb-dots span:nth-child(3){ animation-delay:.4s; }
  @keyframes plbpulse { 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

  /* ===== RESULTS / PODIUM (reproduit results.html) ===== */
  #screen-over.active { display:flex; flex-direction:column; }
  .res-screen { flex:1; display:flex; flex-direction:column; min-height:100dvh; background:var(--paper); }
  .res-hero { padding:16px 18px 14px; background:var(--yellow); border-bottom:4px solid var(--ink); text-align:center; flex-shrink:0; }
  .res-label { font-weight:700; font-size:11px; letter-spacing:3px; opacity:.7; }
  .res-gg { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:4px; }
  .res-gge { width:38px; height:38px; } .res-gge .noto { width:100%; height:100%; }
  .res-ggt { font-family:var(--fd); font-size:44px; line-height:1; letter-spacing:-.5px; }
  .res-winner { font-weight:700; font-size:13px; letter-spacing:1.5px; margin-top:4px; }
  .res-scroll { flex:1; overflow-y:auto; padding:0 16px 16px; }
  .podium { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:8px; align-items:end; padding:18px 0 0; }
  .pod { position:relative; }
  .pod .sh { position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--ink); }
  .pod .bd { position:relative; border:4px solid var(--ink); padding:12px 6px; display:flex; flex-direction:column; align-items:center; gap:5px; }
  .pod.gold .bd { background:var(--yellow); padding-top:24px; min-height:200px; }
  .pod.silver .bd { background:#E8E8E8; min-height:170px; }
  .pod.bronze .bd { background:#FF9F45; min-height:160px; }
  .pod .crown { position:absolute; top:-16px; left:50%; transform:translateX(-50%); width:34px; height:34px; z-index:2; }
  .pod .crown .noto { width:100%; height:100%; }
  .pod .ava { width:56px; height:56px; border:3px solid var(--ink); background:var(--paper); overflow:hidden; }
  .pod.gold .ava { width:64px; height:64px; }
  .pod .ava .ava-emo { width:100%; height:100%; font-size:64px; }
  .pod .ava img { width:100%; height:100%; }
  .pod .rk-num { font-family:var(--fd); font-size:30px; line-height:1; }
  .pod .pname { font-family:var(--fd); font-size:12px; text-align:center; line-height:1.05; }
  .pod .psc { font-family:var(--fd); font-size:16px; padding:2px 6px; border:2.5px solid var(--ink); background:var(--paper); box-shadow:2px 2px 0 var(--ink); }
  .rewards-card { position:relative; margin-top:20px; }
  .rewards-card .rc-bd { position:relative; border:4px solid var(--ink); background:var(--magenta); color:var(--paper); padding:16px; text-align:center; box-shadow:6px 6px 0 var(--ink); }
  .rc-ttl { font-weight:700; font-size:11px; letter-spacing:2px; opacity:.85; }
  .rc-emoji { width:60px; height:60px; margin:6px auto 4px; } .rc-emoji .noto { width:100%; height:100%; }
  .rc-pos { font-family:var(--fd); font-size:30px; line-height:1; }
  .rc-msg { font-weight:700; font-size:12px; opacity:.9; margin-top:4px; }
  .res-list-title { font-family:var(--fd); font-size:14px; letter-spacing:2px; margin:20px 0 8px; color: color-mix(in srgb, var(--ink) 70%, transparent); }
  .player-result { position:relative; margin-bottom:8px; }
  .player-result .sh { position:absolute; top:4px; left:4px; right:-4px; bottom:-4px; background:var(--ink); }
  .player-result .bd { position:relative; border:3px solid var(--ink); background:var(--paper); padding:8px 10px; display:flex; align-items:center; gap:10px; }
  .player-result.me .bd { background:#FFE099; border-color:var(--magenta); border-width:4px; }
  .player-result .rk { font-family:var(--fd); font-size:18px; width:30px; text-align:center; flex-shrink:0; }
  .player-result .ava { width:36px; height:36px; border:2.5px solid var(--ink); background:var(--paper); overflow:hidden; flex-shrink:0; }
  .player-result .ava .ava-emo { width:36px; height:36px; font-size:36px; }
  .player-result .ava img { width:100%; height:100%; }
  .player-result .nm { flex:1; min-width:0; font-family:var(--fd); font-size:15px; letter-spacing:.5px; }
  .player-result .sc { font-family:var(--fd); font-size:16px; }
  .res-foot { padding:12px 16px 16px; border-top:3px solid var(--ink); display:flex; gap:10px; flex-shrink:0; background:var(--paper); }
  .res-foot .btn { flex:1; }



  /* ============================================================
     LOBBY INVITÉ : fond = univers du mode + carte infos + état d'attente
     ============================================================ */
  #screen-wait .full { justify-content:flex-start; gap:12px; padding:18px 16px 24px; }
  body:has(#screen-wait.active) .emoji-bg { display:none; }   /* le motif du mode remplace la déco */
  #screen-wait.on-dark .ttl, #screen-wait.on-dark .wait-room-h { color:var(--paper); }

  /* motifs de fond par format (repris des affiches de partage) */
  #screen-wait.f-classique .full { background:repeating-linear-gradient(0deg,rgba(10,10,10,.06) 0 1.5px,transparent 1.5px 28px),repeating-linear-gradient(90deg,rgba(10,10,10,.06) 0 1.5px,transparent 1.5px 28px),#5BD8E5; }
  #screen-wait.f-battle .full { background:repeating-conic-gradient(from 0deg at 50% 34%,rgba(255,255,255,.10) 0deg 6deg,transparent 6deg 16deg),radial-gradient(circle at 50% 34%,#FFE96B 0%,#FFC400 46%,#C98A00 100%); }
  #screen-wait.f-bombe .full { background:repeating-linear-gradient(45deg,rgba(255,214,0,.07) 0 20px,rgba(10,10,10,.09) 20px 40px),radial-gradient(circle at 50% 34%,#FF7A18 0%,#8a2b00 55%,#160a06 100%); }
  #screen-wait.f-qod .full { background:repeating-linear-gradient(60deg,rgba(255,255,255,.07) 0 2px,transparent 2px 28px),repeating-linear-gradient(-60deg,rgba(255,255,255,.07) 0 2px,transparent 2px 28px),radial-gradient(circle at 50% 34%,#B24BFF 0%,#5a1e8f 60%,#1c0a33 100%); }
  #screen-wait.f-marathon .full { background:repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 4px,transparent 4px 54px),#37C866; }
  #screen-wait.f-wager .full { background:repeating-linear-gradient(-45deg,rgba(255,214,0,.12) 0 14px,transparent 14px 36px),radial-gradient(circle at 50% 34%,#9BF7B4 0%,#34B85F 60%,#16803e 100%); }
  #screen-wait.f-buzzer .full { background:repeating-conic-gradient(from 0deg at 50% 34%,rgba(255,255,255,.11) 0deg 5deg,transparent 5deg 13deg),#FF3B3B; }
  #screen-wait.f-teams .full { background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 3px,transparent 3px 24px),linear-gradient(105deg,var(--red) 0 50%,var(--blue) 50% 100%); }
  #screen-wait.f-soiree .full { background:radial-gradient(circle,rgba(255,46,147,.35) 3px,transparent 4px) 0 0/52px 52px,radial-gradient(circle,rgba(91,216,229,.35) 3px,transparent 4px) 26px 26px/52px 52px,radial-gradient(circle,rgba(255,214,0,.35) 2.5px,transparent 4px) 13px 38px/52px 52px,radial-gradient(circle at 50% 30%,#2a2450 0%,#171232 100%); }

  /* carte infos de partie */
  .wait-ginfo { width:100%; max-width:420px; background:var(--paper); color:var(--ink); border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:11px 13px; display:flex; align-items:center; gap:11px; text-align:left; }
  .wait-ginfo:empty { display:none; }
  .wait-ginfo .wg-fmt { flex:0 0 auto; font-family:var(--fd); font-size:13px; letter-spacing:.5px; background:var(--fc,var(--cyan)); color:var(--ink); border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); padding:4px 9px; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
  .wait-ginfo .wg-fmt img { width:16px; height:16px; display:block; }
  .wait-ginfo.fdk .wg-fmt { color:var(--paper); }
  .wait-ginfo .wg-meta { min-width:0; }
  .wait-ginfo .wg-ttl { font-family:var(--fd); font-size:16px; letter-spacing:.3px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wait-ginfo .wg-qn { font-family:var(--fb); font-weight:700; font-size:11px; opacity:.65; margin-top:3px; }

  /* état d'attente (pulse + points animés) */
  .wait-state { display:inline-flex; align-items:center; gap:7px; font-family:var(--fd); font-size:14px; letter-spacing:.5px; background:var(--ink); color:var(--paper); border:3px solid var(--ink); box-shadow:4px 4px 0 rgba(0,0,0,.35); padding:8px 15px; animation:ws-breathe 1.8s ease-in-out infinite; }
  .wait-state .ws-dots::after { content:'…'; display:inline-block; width:20px; text-align:left; animation:ws-dots 1.4s steps(1) infinite; }
  @keyframes ws-breathe { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
  @keyframes ws-dots { 0% { content:''; } 25% { content:'.'; } 50% { content:'..'; } 75% { content:'...'; } }
  @media (prefers-reduced-motion: reduce) { .wait-state { animation:none; } .wait-state .ws-dots::after { animation:none; } }

  /* ============================================================
     SALLE FERMÉE (écran dédié)
     ============================================================ */
  #screen-closed .closed-wrap { gap:16px; background:#242424; background-image:repeating-linear-gradient(45deg,rgba(255,82,82,.10) 0 24px,transparent 24px 48px); color:var(--paper); }
  .closed-door { width:120px; height:120px; border:5px solid var(--ink); box-shadow:7px 7px 0 var(--ink); background:var(--red); display:grid; place-items:center; font-size:66px; }
  .closed-big { font-family:var(--fd); font-size:clamp(34px,10vw,44px); letter-spacing:1px; line-height:1; }
  .closed-sub { font-family:var(--fb); font-weight:700; font-size:13px; opacity:.85; max-width:26ch; line-height:1.5; }
  .closed-score { font-family:var(--fd); font-size:16px; background:var(--paper); color:var(--ink); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:7px 16px; }
  .closed-cta { display:flex; flex-direction:column; gap:11px; width:100%; max-width:300px; margin-top:6px; }
  .closed-cta .btn { width:100%; text-align:center; text-decoration:none; }

/* DÉFI DU JOUR (?daily=1) : masque les écrans de jeu avant que le JS prenne la main
   -> plus de flash de l'écran "REJOINDRE LA ROOM". Classe retirée par 05_join-flow.js. */
html.daily-boot .screen { display: none !important; }

/* AUTO-JOIN JPO (?auto=1) : le joueur a déjà choisi pseudo+avatar dans la JPO.
   On masque TOUT l'écran de base (code / QR / récemment rejointes) et on couvre
   par un loader plein écran. Aucune de ces règles ne s'applique au flux normal. */
html.auto-boot .screen { display: none !important; }
.aj-ov { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: #013afb; color: #fff;
  background-image: radial-gradient(rgba(255,255,255,.10) 1.5px, transparent 1.5px); background-size: 22px 22px; }
.aj-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.aj-emo { font-size: 62px; line-height: 1; }
.aj-emo.spin { animation: ajSpin 1.1s linear infinite; }
@keyframes ajSpin { to { transform: rotate(360deg); } }
.aj-ttl { font-family: var(--fd); font-size: 26px; letter-spacing: .02em; line-height: 1.05; }
.aj-sub { font-family: var(--fb); font-weight: 700; font-size: 13px; line-height: 1.5; opacity: .9; max-width: 30ch; }
.aj-bars { display: flex; gap: 7px; margin-top: 4px; }
.aj-bars span { width: 12px; height: 12px; background: #fff; animation: ajBlink 1s ease-in-out infinite; }
.aj-bars span:nth-child(2) { animation-delay: .18s; } .aj-bars span:nth-child(3) { animation-delay: .36s; }
@keyframes ajBlink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.aj-actions { display: flex; flex-direction: column; gap: 11px; width: 100%; margin-top: 6px; }
.aj-btn { width: 100%; font-family: var(--fd); font-size: 18px; letter-spacing: .03em; padding: 15px; cursor: pointer;
  border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--yellow); color: var(--ink); }
.aj-btn.ghost { background: #fff; }
.aj-btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }