/* ============================================================
   MODE SPECTATEUR (spectate.js) — overlay plein écran, réutilise le LOOK du jeu.
   ============================================================ */
#sec-spectate { position:fixed; inset:0; z-index:5000; display:none; background:var(--paper); }
#sec-spectate.on { display:block; }
#sec-spectate .sp-stage { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; }
#sec-spectate .sp-load, #sec-spectate .sp-wait2 { flex:1; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:18px; letter-spacing:1px; opacity:.6; }

/* bandeau spectateur (sombre) */
#sec-spectate .sp-top { flex-shrink:0; display:flex; align-items:center; gap:9px; padding:calc(10px + env(safe-area-inset-top)) 12px 10px; background:var(--ink); color:var(--paper); }
#sec-spectate .sp-x { width:30px; height:30px; flex-shrink:0; border:2.5px solid var(--paper); background:transparent; color:var(--paper); font-family:var(--fd); font-size:15px; cursor:pointer; }
#sec-spectate .sp-who { flex:1; min-width:0; font-family:var(--fd); font-size:14px; letter-spacing:.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sec-spectate .sp-live { display:inline-flex; align-items:center; gap:5px; font-family:var(--fd); font-size:12px; background:var(--red); color:#fff; padding:3px 8px; }
#sec-spectate .sp-live i { width:7px; height:7px; border-radius:50%; background:#fff; animation:sp-blink 1s steps(2) infinite; }
@keyframes sp-blink { 50% { opacity:.2; } }

#sec-spectate .sp-ghdr { flex-shrink:0; }
#sec-spectate .sp-ghdr .timer .sp-tnum { min-width:1.4em; text-align:center; }

#sec-spectate .sp-body { flex:1; min-height:0; overflow-y:auto; padding:12px 14px calc(14px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px;
  background-color:#FFF7DA; background-image:radial-gradient(rgba(10,10,10,.08) 1.5px, transparent 1.6px); background-size:22px 22px; }
#sec-spectate .qcat-row .type-pill .bd { background:var(--cyan); }
#sec-spectate .sp-qcard { position:relative; }
#sec-spectate .sp-qcard .sh { position:absolute; top:5px; left:5px; right:-5px; bottom:-5px; background:var(--ink); }
#sec-spectate .sp-qcard .bd { position:relative; border:4px solid var(--ink); background:var(--paper); padding:16px; font-family:var(--fd); font-size:19px; line-height:1.14; }
#sec-spectate .answer-zone { display:flex; flex-direction:column; gap:9px; }
#sec-spectate .answer-zone.sp-ro .opt { pointer-events:none; }   /* lecture seule : aucune interaction possible */
/* MÉDIA de la question (image / 4 photos / rébus…) — .media-img/.fg-cell/.nt-* viennent de
   brutal.css ; seule la grille .four-grid-m vit dans play.css (non chargé par l'app) → portée ici. */
#sec-spectate .sp-media { display:flex; justify-content:center; }
#sec-spectate .sp-media > .media-img { max-height:280px; width:auto; max-width:100%; }
#sec-spectate .sp-media .four-grid-m { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }

/* footer « qui a répondu » */
#sec-spectate .sp-foot { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
#sec-spectate .sp-foot:empty { display:none; }
#sec-spectate .sp-fdot { width:9px; height:9px; border-radius:50%; background:var(--yellow); border:2px solid var(--ink); flex-shrink:0; }
#sec-spectate .sp-fdot.ok { background:var(--green); }
#sec-spectate .sp-ftxt { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11px; letter-spacing:1px; }
#sec-spectate .sp-fnote { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:10px; opacity:.5; margin-left:auto; }

/* classement en direct */
#sec-spectate .sp-lb { display:flex; flex-direction:column; gap:7px; margin-top:2px; width:100%; }
#sec-spectate .sp-lr { display:flex; align-items:center; gap:10px; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--paper); padding:7px 10px; }
#sec-spectate .sp-lr.watched { border-color:var(--magenta); border-width:4px; }
#sec-spectate .sp-rk { font-family:var(--fd); font-size:15px; width:20px; text-align:center; flex-shrink:0; }
#sec-spectate .sp-av { width:30px; height:30px; flex-shrink:0; border:2px solid var(--ink); overflow:hidden; background:var(--paper); }
#sec-spectate .sp-av img, #sec-spectate .sp-av svg, #sec-spectate .sp-av .ava-emo { width:100%; height:100%; display:block; object-fit:cover; }
#sec-spectate .sp-nm { flex:1; min-width:0; font-family:var(--fd); font-size:14px; letter-spacing:.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sec-spectate .sp-sc { font-family:var(--fd); font-size:16px; }

/* fin de partie */
#sec-spectate .sp-overwrap { align-items:center; text-align:center; }
#sec-spectate .sp-cup { font-size:44px; }
#sec-spectate .sp-overtt { font-family:var(--fd); font-size:24px; letter-spacing:1px; background:var(--yellow); border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:5px 20px; transform:rotate(-1.5deg); }
#sec-spectate .sp-back { align-self:stretch; margin-top:8px; border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:var(--green); font-family:var(--fd); font-size:17px; letter-spacing:1px; padding:14px; cursor:pointer; }