/* ============================================================
   Saturne — direction artistique « rétro-futuriste BD »
   Aplats de couleurs contrastés, contours noirs nets, ombres dures décalées (pas de flou, pas de verre).
   Chargé en dernier sur la télé et les téléphones : il habille tous les écrans existants.
   ============================================================ */
@font-face { font-family: 'Orbitron'; src: url('/fonts-orbitron/orbitron-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('/fonts-orbitron/orbitron-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Anton'; src: url('/fonts-anton/anton-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --ink: #000;
  --panel: #151b2c;
  --panel-2: #1e2742;
  --panel-3: #0e1320;
  --line: #2b3a5c;
  --hl: #f5b83d;
  --accent: #f5b83d;
  --accent-soft: rgba(245, 184, 61, 0.22);
  --hard: 4px 4px 0 var(--ink);
}

/* ---------- panneaux ---------- */
.glass, .glass.tint-violet, .glass.tint-blue, .card.glass {
  background: var(--panel) !important;
  border: 3px solid var(--ink) !important;
  box-shadow: inset 0 0 0 2px var(--line), var(--hard) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.glass::before { display: none !important; }
.glass.tint-violet { background: #22183f !important; box-shadow: inset 0 0 0 2px #4b3a8a, var(--hard) !important; }
.glass.tint-blue { background: #132a40 !important; box-shadow: inset 0 0 0 2px #24557a, var(--hard) !important; }
.pill { background: var(--panel-3) !important; border: 2px solid var(--ink) !important; color: #fff !important; box-shadow: 3px 3px 0 var(--ink); }

/* titres : police rétro-futuriste */
.screen-title, .logo-word, .lg-title, .gl-h, .admnav, .lb2 .lb2-pts, .cs-rank, .hint-big { font-family: 'Orbitron', 'Inter', sans-serif !important; letter-spacing: 0.02em; }
.screen-title { font-weight: 900 !important; text-transform: uppercase; text-shadow: 4px 4px 0 var(--ink); }

/* avatars : contour noir autour de l'anneau de couleur */
.avatar { box-shadow: 0 0 0 max(2.5px, calc(var(--size) * 0.04)) var(--av-ring, #555), 0 0 0 calc(max(2.5px, calc(var(--size) * 0.04)) + 2px) var(--ink) !important; }

/* ============ téléphones ============ */
body.phone { background: #0b0f1c; }
body.phone .backdrop { background: #0b0f1c radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px) 0 0 / 14px 14px !important; }
body.phone .backdrop * { display: none; }
.btn {
  background: var(--panel-2) !important; color: #fff !important; border: 3px solid var(--ink) !important; border-radius: 14px !important;
  box-shadow: var(--hard) !important; font-weight: 800 !important; text-shadow: none; transition: transform 0.06s, box-shadow 0.06s !important;
}
.btn:active:not(:disabled) { transform: translate(3px, 3px) !important; box-shadow: 1px 1px 0 var(--ink) !important; }
.btn.primary { background: var(--me, var(--hl)) !important; text-shadow: 2px 2px 0 var(--ink); }
.btn.danger { background: #d92b3a !important; text-shadow: 2px 2px 0 var(--ink); }
.btn.sent { background: #16a34a !important; }
.btn:disabled { opacity: 0.4 !important; box-shadow: 2px 2px 0 var(--ink) !important; }
.icon-btn { background: var(--panel-2) !important; border: 3px solid var(--ink) !important; box-shadow: 3px 3px 0 var(--ink) !important; }
.icon-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink) !important; }
.input { background: var(--panel-3) !important; border: 3px solid var(--ink) !important; border-radius: 12px !important; box-shadow: inset 0 0 0 2px var(--line) !important; color: #fff !important; }
.input:focus { box-shadow: inset 0 0 0 2px var(--me, var(--hl)), 0 0 0 3px var(--me, var(--hl)) !important; }
.topbar { background: var(--panel) !important; border: 3px solid var(--ink) !important; box-shadow: var(--hard) !important; }
.row { background: var(--panel) !important; border: 3px solid var(--ink) !important; box-shadow: var(--hard) !important; }
.sheet-panel { background: var(--panel) !important; border: 3px solid var(--ink) !important; border-bottom: 0 !important; box-shadow: 0 -4px 0 var(--line) !important; }
.toast { background: #fff !important; color: #000 !important; border: 3px solid var(--ink) !important; box-shadow: var(--hard) !important; font-weight: 800; }
.toast.ok { background: #8fe000 !important; } .toast.bad { background: #ff2e3b !important; color: #fff !important; }
.chat-fab { background: var(--hl) !important; border: 3px solid var(--ink) !important; box-shadow: var(--hard) !important; }
#react-dock { background: linear-gradient(to top, #0b0f1c 70%, transparent) !important; }
#react-dock .react-bar button { background: var(--panel-2) !important; border: 3px solid var(--ink) !important; box-shadow: 3px 3px 0 var(--ink) !important; }
.g-cand, .g-star { background: var(--panel) !important; border: 3px solid var(--ink) !important; box-shadow: var(--hard) !important; }
.g-cand.on, .g-star.on, .g-opt.on, .row.on { background: var(--me, var(--hl)) !important; }
.gt-bar { background: var(--panel-3) !important; border: 2px solid var(--ink); height: 10px !important; }
#game-timer { height: 10px !important; }
.gt-bar i { background: var(--me, var(--hl)) !important; }
.colors button { border: 3px solid var(--ink) !important; }
.seg { border: 3px solid var(--ink) !important; box-shadow: var(--hard) !important; }
.switch span { border: 2px solid var(--ink) !important; }
.d-canvas { border: 3px solid var(--ink) !important; box-shadow: var(--hard) !important; }
.rd-nudge { border: 3px solid var(--ink); box-shadow: var(--hard); text-shadow: 2px 2px 0 var(--ink); }
.uno-turn { border: 3px solid var(--ink); text-shadow: 2px 2px 0 var(--ink); }

/* ============ télé ============ */
body.tv .q-card, body.tv .rv-row, body.tv .ans, body.tv .fr, body.tv .lb2-row, body.tv .ls-card, body.tv .gd-row {
  border: 4px solid var(--ink) !important; box-shadow: inset 0 0 0 2px var(--line), 6px 6px 0 var(--ink) !important; background: var(--panel) !important;
}
body.tv .lb2-row.top1 { background: #2a2210 !important; box-shadow: inset 0 0 0 3px var(--hl), 6px 6px 0 var(--ink) !important; }
body.tv .q-text { text-shadow: 3px 3px 0 var(--ink); }
body.tv .timer { background: var(--panel); border: 4px solid var(--ink); border-radius: 50%; box-shadow: 5px 5px 0 var(--ink); }
body.tv .rv-bar, body.tv .lb2-bar { border: 2px solid var(--ink); }
body.tv .drink-row { border-width: 3px !important; box-shadow: 0 0 0 3px var(--ink), 8px 8px 0 var(--ink) !important; }
body.tv .fl-label { font-family: 'Inter', sans-serif; }


/* téléphones : plus de bandeau en haut (nom, avatar) ; le bouton ⚙️ flotte au-dessus du chat */
body.phone .topbar { display: none !important; }
.gear-fab { bottom: calc(env(safe-area-inset-bottom) + 84px) !important; background: var(--panel-2) !important; font-size: 24px; }
body.has-react .gear-fab { bottom: calc(env(safe-area-inset-bottom) + 152px) !important; }

/* téléphone tenu en paysage : on demande de le tourner.
   Détecté par l'écran lui-même (play.js → body.landscape), pas par la zone visible :
   le clavier qui s'ouvre rend la zone visible plus large que haute, sans que le téléphone soit tourné. */
#rotate { display: none; }
@media (max-height: 520px) {
  body.phone.landscape #rotate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #0b0f1c; text-align: center; }
  body.phone.landscape #rotate div { display: flex; flex-direction: column; align-items: center; gap: 12px; font: 900 22px 'Orbitron', 'Inter', sans-serif; color: #fff; letter-spacing: 0.04em; }
  body.phone.landscape #rotate b { font-size: 64px; color: var(--hl); animation: rot-hint 1.6s ease-in-out infinite; }
}
@keyframes rot-hint { 50% { transform: rotate(-90deg); } }