:root{
  --paper:#0B4A32;
  --paper-alt:#0F5A3F;
  --card-bg:rgba(9,54,39,.55);
  --ink:#F3FFF8;
  --ink-soft:rgba(243,255,248,.74);
  --primary:#00E39B;
  --primary-dark:#049966;
  --coral:#FF4F81;
  --yellow:#FFC93C;
  --mint:#00E39B;
  --sky:#3FD1FF;
  --white:#FFFFFF;
  --ink-black:rgba(255,255,255,.22);
  --border-soft:rgba(255,255,255,.22);
  --shadow: 0 20px 45px rgba(0,0,0,.4);
  --shadow-sm: 0 8px 20px rgba(0,0,0,.3);
  --radius: 26px;
  --radius-sm: 16px;
  --font-display:'Baloo 2', ui-rounded, 'Nunito', sans-serif;
  --font-body:'Nunito', system-ui, -apple-system, sans-serif;
  --font-mono:'Space Mono', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background-color:#0B4A32;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.06) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(0,227,155,.35) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(63,209,255,.25) 0%, transparent 45%),
    linear-gradient(135deg, #062A20 0%, #0A4A34 45%, #0E8F5B 100%);
  background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment:fixed;
  min-height:100vh;
  min-height:100dvh; /* 100vh se recalcule mal pendant un pinch-to-zoom ou quand la barre
    d'adresse du navigateur mobile apparaît/disparaît ; 100dvh (dynamic viewport height) suit
    la taille réelle visible. Ignoré par les vieux navigateurs, qui gardent 100vh au-dessus. */
  -webkit-font-smoothing:antialiased;
}
/* ---------- THÈMES DES JOURS SPÉCIAUX (couleurs / fond uniquement) ---------- */
body.theme-noel{
  --paper:#7A0C1E; --paper-alt:#8C1226; --primary:#2E9B4F; --primary-dark:#1E7D32;
  --coral:#E53935; --yellow:#FFD54F; --mint:#2E9B4F; --sky:#64B5F6;
  background-color:#5C0A17;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.08) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(46,155,79,.35) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(255,213,79,.22) 0%, transparent 45%),
    linear-gradient(135deg, #3D040F 0%, #6E0E1E 45%, #A11627 100%);
}
body.theme-halloween{
  --paper:#2B1140; --paper-alt:#361654; --primary:#FF8F1F; --primary-dark:#D9700F;
  --coral:#8E24AA; --yellow:#FFB300; --mint:#7CB342; --sky:#B39DDB;
  background-color:#170A26;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.06) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(255,143,31,.30) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(142,36,170,.30) 0%, transparent 45%),
    linear-gradient(135deg, #0D0617 0%, #23103A 45%, #401A5C 100%);
}
body.theme-nouvelan{
  --paper:#0B1E3A; --paper-alt:#0F2A4D; --primary:#FFD700; --primary-dark:#D4AF00;
  --coral:#FF4F81; --yellow:#FFEA70; --mint:#00E39B; --sky:#3FD1FF;
  background-color:#050D1F;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.08) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(255,215,0,.30) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(63,209,255,.25) 0%, transparent 45%),
    linear-gradient(135deg, #020714 0%, #0B1E3A 45%, #16305C 100%);
}
body.theme-epiphanie{
  --paper:#2E1A47; --paper-alt:#3A2159; --primary:#FFD700; --primary-dark:#D4AF00;
  --coral:#B366FF; --yellow:#FFE070; --mint:#9B6EFF; --sky:#C9A6FF;
  background-color:#1C0F2E;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.07) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(255,215,0,.28) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(155,110,255,.30) 0%, transparent 45%),
    linear-gradient(135deg, #120A1F 0%, #2A1740 45%, #452A66 100%);
}
body.theme-chandeleur{
  --paper:#5C3A0F; --paper-alt:#6E4713; --primary:#FFC93C; --primary-dark:#D9A521;
  --coral:#FF7A3C; --yellow:#FFE070; --mint:#F2B84B; --sky:#FFDA9E;
  background-color:#3D2609;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.07) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(255,201,60,.32) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(255,122,60,.24) 0%, transparent 45%),
    linear-gradient(135deg, #26170A 0%, #4A2E0C 45%, #7A5013 100%);
}
body.theme-saintpatrick{
  --paper:#0A3D1E; --paper-alt:#0E4E27; --primary:#2ECC71; --primary-dark:#1E9E56;
  --coral:#FFD700; --yellow:#FFE066; --mint:#66FF99; --sky:#7CFFB2;
  background-color:#052414;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.07) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(46,204,113,.32) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(255,215,0,.20) 0%, transparent 45%),
    linear-gradient(135deg, #031B0E 0%, #0B3A20 45%, #12602F 100%);
}
body.theme-terredefete{
  --paper:#0C3B2E; --paper-alt:#0F4A39; --primary:#4CAF50; --primary-dark:#357A38;
  --coral:#C77B3C; --yellow:#A9D66B; --mint:#4CAF50; --sky:#4FC3F7;
  background-color:#062419;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.07) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(76,175,80,.30) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(79,195,247,.24) 0%, transparent 45%),
    linear-gradient(135deg, #04180F 0%, #0B3226 45%, #144F3C 100%);
}
body.theme-muguet{
  --paper:#153D1E; --paper-alt:#1C4C27; --primary:#6FCF6F; --primary-dark:#4CAF50;
  --coral:#FF8FB1; --yellow:#FFFFFF; --mint:#8BE28B; --sky:#B6F2B6;
  background-color:#0C2814;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.08) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(111,207,111,.32) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(255,255,255,.16) 0%, transparent 45%),
    linear-gradient(135deg, #081A0E 0%, #163420 45%, #235532 100%);
}
body.theme-saintvalentin{
  --paper:#6B0F2A; --paper-alt:#7D1433; --primary:#FF4F81; --primary-dark:#D93368;
  --coral:#FF2E63; --yellow:#FFD1DC; --mint:#FF8FB1; --sky:#FFB6C9;
  background-color:#4A0A1D;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.08) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(255,79,129,.32) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(255,209,220,.22) 0%, transparent 45%),
    linear-gradient(135deg, #360712 0%, #5C0F26 45%, #8A1A3D 100%);
}
body.theme-fetemusique{
  --paper:#1A0B33; --paper-alt:#241247; --primary:#FF2ED1; --primary-dark:#C71FA8;
  --coral:#FF6B35; --yellow:#FFE93C; --mint:#3CFFDC; --sky:#3FA9FF;
  background-color:#0F0620;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.08) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(255,46,209,.32) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(60,255,220,.26) 0%, transparent 45%),
    linear-gradient(135deg, #0A0417 0%, #1E0E3A 45%, #371A5C 100%);
}
body.theme-fetenationale{
  --paper:#0B1A4A; --paper-alt:#0F2260; --primary:#3F6FE0; --primary-dark:#2650B0;
  --coral:#E53935; --yellow:#FFFFFF; --mint:#3F6FE0; --sky:#6FA8FF;
  background-color:#060F30;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.09) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(229,57,53,.28) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(63,111,224,.30) 0%, transparent 45%),
    linear-gradient(135deg, #04081F 0%, #0C1B4A 45%, #163570 100%);
}
body.theme-toussaint{
  --paper:#3A1B4A; --paper-alt:#48225A; --primary:#D9822B; --primary-dark:#B5661C;
  --coral:#8E3B8E; --yellow:#F2A65A; --mint:#C97B3F; --sky:#B08FCE;
  background-color:#240F30;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.06) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(217,130,43,.28) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(142,59,142,.30) 0%, transparent 45%),
    linear-gradient(135deg, #170A20 0%, #2E1440 45%, #4A2260 100%);
}
body.theme-rentree{
  --paper:#0B3D5C; --paper-alt:#0F4D73; --primary:#FF6B35; --primary-dark:#D9531F;
  --coral:#FF4F81; --yellow:#FFD23F; --mint:#3CCFCF; --sky:#3FA9FF;
  background-color:#052236;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.08) 2px, transparent 2px),
    radial-gradient(circle at 14% 18%, rgba(255,107,53,.30) 0%, transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(255,210,63,.22) 0%, transparent 45%),
    linear-gradient(135deg, #031524 0%, #0B3050 45%, #135078 100%);
}

.holiday-decor-piece{
  position:fixed; top:-40px; z-index:3; pointer-events:none; user-select:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
  animation:holidayFall linear forwards;
  will-change:transform, opacity;
}
@keyframes holidayFall{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
  8%{ opacity:1; }
  50%{ transform:translateY(55vh) translateX(18px) rotate(180deg); }
  92%{ opacity:1; }
  100%{ transform:translateY(112vh) translateX(-10px) rotate(360deg); opacity:0; }
}
.holiday-banner{
  position:fixed; top:10px; left:50%; transform:translateX(-50%);
  z-index:60; pointer-events:none; user-select:none;
  padding:6px 18px; border-radius:999px;
  font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.02em;
  color:var(--ink); background:var(--paper-alt);
  border:2px solid var(--primary);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  animation:holidayBannerIn .5s ease-out;
}
@keyframes holidayBannerIn{
  0%{ opacity:0; transform:translateX(-50%) translateY(-16px); }
  100%{ opacity:1; transform:translateX(-50%) translateY(0); }
}
@media (max-width:640px){
  .holiday-banner{ top:6px; font-size:12px; padding:5px 14px; }
}

h1,h2,h3{font-family:var(--font-display); margin:0 0 6px; color:var(--ink); font-weight:700;}
p{margin:0 0 8px; line-height:1.45; color:var(--ink-soft);}
button{font-family:var(--font-body); cursor:pointer;}
input,textarea{font-family:var(--font-body); font-size:16px;}
::selection{background:var(--primary); color:#04241A;}

#app{max-width:1080px; margin:0 auto; padding:74px 16px 60px;}
.screen{display:none;}
.screen.active{display:block; animation:fadein .35s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ---------- shared bits ---------- */
.handwritten-underline{display:inline-block; position:relative;}
.underline-svg{display:block; width:100%; height:10px; margin-top:-4px;}
.underline-svg path{stroke:var(--coral); stroke-width:5; fill:none; stroke-linecap:round;}

.card{background:var(--card-bg); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); border:1.5px solid var(--border-soft);}
/* Fix #16 (au jugé, à confirmer) : le canvas de dessin a déjà touch-action:none, mais rien
   n'empêchait un double-tap accidentel sur un bouton/contrôle de déclencher le zoom natif du
   navigateur ailleurs sur l'écran de jeu, ce qui peut ensuite laisser l'affichage décalé tant
   que l'utilisateur ne dézoome pas manuellement. touch-action:manipulation retire le délai de
   détection de double-tap (donc le double-tap-zoom) sur ces éléments sans désactiver le pinch-
   zoom volontaire ailleurs sur la page (qui reste accessible, contrairement à user-scalable=no). */
.btn{touch-action:manipulation; border:none; border-radius:999px; padding:14px 22px; font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.2px; transition:transform .15s ease, box-shadow .15s ease, opacity .15s; box-shadow:var(--shadow-sm);}
/* Fix #21 (au jugé, à confirmer) : quasiment chaque petit composant interactif avait sa propre
   micro-animation "wiggle" (rotation + échelle combinées) au survol — avatar-shuffle-btn, emoji-
   btn, reaction-btn. Sur un écran avec plusieurs de ces éléments côte à côte (grille d'emojis,
   réactions), les rotations simultanées créent une impression de surcharge. On garde un simple
   effet d'échelle (feedback minimal mais présent) et on retire les rotations, sans toucher aux
   animations fonctionnelles (mode-card, card/card-inner du fix #25, sidebar de révélation) qui
   servent à signaler un état plutôt qu'à décorer. Portée volontairement limitée : sans capture
   ni retour du testeur sur QUELLES animations le gênaient précisément, un ménage plus large
   risquerait de couper des indices utiles (ex: sélection en vote duel) au lieu du superflu.
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.38);}
.btn:active{transform:scale(.96);}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#04241A;}
.btn-secondary{background:#FFFFFF; color:var(--primary-dark); border:1px solid rgba(0,0,0,.08);}
.btn-secondary:hover{border-color:var(--primary);}
/* Fix #15 (au jugé, à confirmer) : un <button> est inline-block par défaut, ce qui laisse un
   petit espace résiduel sous lui (quirk de baseline d'élément inline) avant le .hint suivant.
   .reveal-controls, lui, est un conteneur flex (donc pas de cet espace fantôme) : deux zones
   avec un bouton juste au-dessus d'un .hint, mais deux comportements de fond différents. On
   force display:block ici pour égaliser l'espacement partout où .btn-big est utilisé. */
.btn-big{display:block; width:100%; padding:16px 22px; font-size:18px;}
.btn-small{background:rgba(255,255,255,.12); color:var(--ink); border:1.5px solid var(--border-soft); border-radius:999px; padding:8px 14px; font-weight:700; font-size:13px; transition:transform .12s ease;}
.btn-small:hover{transform:translateY(-1px);}
.btn-icon{touch-action:manipulation; background:rgba(255,255,255,.10); border:1.5px solid var(--border-soft); color:var(--ink); border-radius:50%; width:42px; height:42px; min-width:42px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; box-shadow:var(--shadow-sm); transition:transform .15s ease;}
.btn-icon-discord:hover{background:#5865F2; border-color:#5865F2; color:#fff;}
.btn-icon:disabled{opacity:.35; cursor:not-allowed; transform:none;}
.btn-icon:hover{transform:scale(1.08);}
label{display:block; font-weight:700; font-size:13px; color:var(--ink-soft); margin:14px 0 6px;}
input[type="text"], input:not([type]), input[type="range"]{width:100%;}
input[type="text"],input:not([type="range"]):not([type="checkbox"]){padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--border-soft); background:rgba(255,255,255,.10); color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s;}
input::placeholder, textarea::placeholder{color:var(--ink-soft); opacity:.7;}
input:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,227,155,.25);}
.error-msg{color:var(--coral); font-weight:800; min-height:20px; text-align:center;}
.hint{font-size:13px; color:var(--ink-soft); text-align:center; margin:0 0 10px;}
.toast{position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px); visibility:hidden; opacity:0; background:var(--primary); color:#04241A; padding:12px 20px; border-radius:999px; font-weight:800; box-shadow:var(--shadow); transition:transform .3s ease, opacity .3s ease, visibility 0s .3s; z-index:999; max-width:90vw; text-align:center;}
.toast.show{transform:translate(-50%,0); visibility:visible; opacity:1; transition:transform .3s ease, opacity .3s ease;}
.site-header{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:rgba(6,42,30,.6); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1.5px solid var(--border-soft);}
.site-header-logo{font-family:var(--font-display); font-weight:800; font-size:20px; line-height:1; letter-spacing:.3px; color:var(--primary-dark); -webkit-text-stroke:1px #0B2A1E; text-shadow:1px 1px 0 #0B2A1E; display:inline-block;}
.site-header-logo span{color:var(--coral); -webkit-text-stroke:1px #0B2A1E; text-shadow:1px 1px 0 #0B2A1E;}
.site-header-actions{display:flex; align-items:center; gap:10px;}
.sound-control{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.10); border:1.5px solid var(--border-soft); border-radius:999px; padding:5px 14px 5px 5px; box-shadow:var(--shadow-sm);}
.sound-control .sound-toggle{position:static; box-shadow:none; flex-shrink:0;}
.header-profile{position:relative;}
.header-profile-btn{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.10); border:1.5px solid var(--border-soft); color:var(--ink); font-size:16px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); flex-shrink:0; overflow:hidden; padding:0;}
.header-profile-avatar-img{width:100%; height:100%; object-fit:cover; display:block;}
/* Fond quasi opaque, et non var(--card-bg) (opaque à 55% seulement) : c'est un menu FLOTTANT
   au-dessus de contenu arbitraire, et le texte de la page traversait le panneau, le rendant
   illisible. Les cartes posées sur le fond de page peuvent rester translucides, pas celui-ci. */
.header-profile-panel{display:none; position:absolute; top:calc(100% + 10px); right:0; width:268px; max-width:calc(100vw - 24px); background:#08301F; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:12px; box-shadow:0 24px 60px rgba(0,0,0,.6); z-index:101; text-align:left;}
.header-profile-panel.show{display:block; animation:panelPop .28s cubic-bezier(.34,1.56,.64,1) forwards;}
.volume-slider{-webkit-appearance:none; appearance:none; width:84px; height:5px; border-radius:999px; background:rgba(255,255,255,.28); outline:none; cursor:pointer; accent-color:var(--primary);}
.volume-slider::-webkit-slider-runnable-track{background:rgba(255,255,255,.28); height:5px; border-radius:999px;}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:15px; height:15px; border-radius:50%; background:var(--primary); border:2px solid var(--white); cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,.35); margin-top:-5px;}
.volume-slider::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:var(--primary); border:2px solid var(--white); cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,.35);}
.volume-slider::-moz-range-track{background:rgba(255,255,255,.28); height:5px; border-radius:999px;}
/* Écran de jeu (demande testeur) : pendant le dessin, le bandeau plein-largeur (logo +
   profil) disparaît pour libérer de l'espace vertical au canvas — seule la pastille de son
   reste, flottante en haut à droite, sans le fond foncé qui traversait tout l'écran. */
body.in-game-header .site-header{background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:none; box-shadow:none; justify-content:flex-end; pointer-events:none;}
body.in-game-header .site-header-logo, body.in-game-header .header-profile{display:none;}
body.in-game-header .site-header-actions{pointer-events:auto;}
body.in-game-header #app{padding-top:16px;}
.conn-banner{position:fixed; top:0; left:0; right:0; z-index:200; background:var(--coral); color:#fff; text-align:center; font-family:var(--font-display); font-weight:700; font-size:14px; padding:9px 14px; transform:translateY(-110%); transition:transform .3s ease; box-shadow:0 4px 14px rgba(0,0,0,.3);}
.conn-banner.show{transform:translateY(0);}

/* ---------- CONFIRM MODAL ---------- */
.confirm-overlay{position:fixed; inset:0; background:rgba(4,20,14,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility 0s .2s;}
.confirm-overlay.show{opacity:1; visibility:visible; transition:opacity .2s ease;}
.confirm-card{background:var(--paper-alt); border:1.5px solid var(--border-soft); border-radius:var(--radius); padding:28px 26px 24px; max-width:360px; width:100%; text-align:center; box-shadow:var(--shadow); transform:scale(.85) translateY(10px) rotate(-1deg); transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.confirm-overlay.show .confirm-card{transform:scale(1) translateY(0) rotate(0deg);}
.confirm-emoji{font-size:40px; margin-bottom:8px;}
@keyframes confirmBob{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-6px) rotate(4deg);}}
.confirm-msg{color:var(--ink); font-weight:700; font-size:16px; line-height:1.4; margin:0 0 20px;}
.confirm-btns{display:flex; gap:10px; justify-content:center;}
.confirm-btns .btn{flex:1;}
.btn-danger{background:linear-gradient(135deg,var(--coral),#e63e6d); color:#fff;}

.avatar-select-card{max-width:420px;}
.avatar-select-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; margin:6px 0 4px; max-height:52vh; overflow-y:auto; padding:4px;}
.avatar-select-item{background:var(--paper); border:2px solid transparent; border-radius:16px; padding:4px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .12s ease, border-color .12s ease, background .12s ease;}
.avatar-select-item img{width:100%; aspect-ratio:1/1; border-radius:12px; object-fit:cover; display:block;}
.avatar-select-item:hover{transform:scale(1.06); background:var(--paper-alt);}
.avatar-select-item.active{border-color:var(--primary); background:var(--paper-alt); box-shadow:0 0 0 2px var(--primary);}
@media(max-width:600px){.avatar-select-grid{grid-template-columns:repeat(4, 1fr);}}

.beta-tester-btn{display:block; margin:28px auto 4px; background:transparent; border:none; color:var(--ink-soft); font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.3px; padding:8px 14px; cursor:pointer; opacity:.6; transition:opacity .2s ease, color .2s ease;}
.discord-invite-btn{display:flex; width:fit-content; align-items:center; justify-content:center; gap:8px; margin:14px auto 4px; background:#5865F2; color:#fff; border-radius:999px; padding:9px 20px; font-size:14px; opacity:1; box-shadow:var(--shadow-sm); text-decoration:none; transition:transform .15s ease, filter .15s ease;}
.discord-invite-btn:hover{transform:translateY(-1px); filter:brightness(1.08);}
.discord-invite-btn i{font-size:16px;}
.beta-tester-btn:hover{opacity:1; color:var(--ink);}
.beta-card{max-width:360px;}
.settings-card{max-width:380px; text-align:left;}
.settings-card .confirm-emoji, .settings-card .confirm-msg{text-align:center;}
.settings-section-title{font-weight:800; margin:0 0 4px; color:var(--ink);}
.settings-hint{margin:0 0 14px;}
.settings-row{display:flex; align-items:center; gap:12px; padding:8px 0;}
.settings-row + .settings-row{border-top:1px solid var(--border-soft);}
.settings-row-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.settings-row-label{font-weight:700; font-size:14px;}
.settings-slider{width:100%;}
.settings-mute-btn{width:38px; height:38px; min-width:38px; font-size:15px; flex-shrink:0;}
.settings-mute-btn.is-muted{background:rgba(255,79,129,.22); border-color:var(--coral); color:var(--coral);}
.spectate-card{max-width:900px; text-align:left;}
.spectate-header{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.spectate-header h3{margin:0;}
.spectate-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px; max-height:65vh; overflow-y:auto; padding-right:4px;}
.spectate-tile{background:var(--card-bg); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:10px; text-align:center;}
.spectate-tile img{width:100%; aspect-ratio:4/3; object-fit:contain; background:#FCFAFF; border-radius:10px; display:block;}
.spectate-tile .stn{font-weight:800; font-size:13px; margin-top:6px; color:var(--ink);}
.spectate-tile .sts{font-size:11px; color:var(--ink-soft);}
.spectate-empty{text-align:center; padding:30px 10px; color:var(--ink-soft);}
.spectate-lobby-players{display:flex; flex-wrap:wrap; gap:8px;}
.spectate-lobby-player{display:flex; align-items:center; gap:6px; background:var(--card-bg); border:1.5px solid var(--border-soft); border-radius:999px; padding:5px 12px 5px 5px; font-size:13px; font-weight:700;}
.spectate-lobby-player img{width:26px; height:26px; border-radius:50%;}
.spectate-lobby-canvas{width:100%; height:180px; background:#FCFAFF; border-radius:var(--radius-sm); display:block; border:1.5px solid var(--border-soft);}
.beta-list{list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:8px; text-align:left;}
.beta-list li{background:rgba(255,255,255,.08); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:10px 16px; font-family:var(--font-display); font-weight:700; color:var(--ink); display:flex; align-items:center; gap:10px;}
.beta-list li::before{content:"🧪"; font-size:15px;}

.share-card{position:relative; max-width:340px;}
.share-close{position:absolute; top:10px; right:10px; width:34px; height:34px; min-width:34px; font-size:14px;}
.share-qr-wrap{background:#FFFFFF; border-radius:var(--radius-sm); padding:14px; display:inline-flex; align-items:center; justify-content:center; margin:6px auto 16px; box-shadow:var(--shadow-sm);}
.share-qr-wrap img{display:block;}
.share-code-row{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px;}
.share-code-row span{font-size:12px; color:var(--ink-soft); font-weight:700;}
.share-code-row strong{font-family:var(--font-mono); font-size:24px; letter-spacing:4px; color:var(--primary);}

/* ---------- HOME ---------- */
.brand{text-align:center; margin:26px 0 30px; position:relative;}
.logo-plaque{display:inline-block; background:#FFFFFF; border-radius:22px; padding:12px 30px; box-shadow:var(--shadow); transform:rotate(-2deg); position:relative; z-index:1;}
@keyframes logoBreathe{0%,100%{transform:rotate(-2deg) translateY(0);}50%{transform:rotate(-1deg) translateY(-3px);}}
.logo{font-size:46px; margin:0; color:var(--primary-dark); -webkit-text-stroke:2px #0B2A1E; text-shadow:2px 2px 0 #0B2A1E; display:inline-block;}
.logo span{color:var(--coral); -webkit-text-stroke:2px #0B2A1E; text-shadow:2px 2px 0 #0B2A1E;}
#logo-underline path{stroke-dasharray:260; stroke-dashoffset:260; animation:draw 1.1s .2s ease forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.tagline{color:var(--ink-soft); font-size:16px; margin-top:14px; font-weight:700; min-height:24px; position:relative; z-index:1; transition:opacity .25s ease, transform .25s ease;}
.tagline.swap{opacity:0; transform:translateY(-4px);}
.info-toggle{background:rgba(255,255,255,.14); border:1.5px solid var(--border-soft); color:var(--ink); font-weight:800; border-radius:999px; padding:6px 16px; font-size:14px; margin:12px auto 0; display:block; position:relative; z-index:1; transition:transform .15s ease;}
.info-toggle:hover{transform:translateY(-2px) rotate(-1deg);}
.info-panel{max-width:520px; margin:10px auto 0; background:var(--card-bg); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:14px 18px; font-size:14px; display:none; box-shadow:var(--shadow); position:absolute; top:100%; left:50%; transform:translateX(-50%) scale(.9) translateY(-8px); width:calc(100% - 32px); z-index:20; transform-origin:top center; opacity:0;}
.info-panel.show{display:block; animation:panelPop .38s cubic-bezier(.34,1.56,.64,1) forwards;}
@keyframes panelPop{to{opacity:1; transform:translateX(-50%) scale(1) translateY(0);}}
.info-panel ol{margin:0; padding-left:18px; color:var(--ink);}
.info-panel li{margin-bottom:4px;}

.account-bar{max-width:820px; margin:0 auto 18px; display:flex; justify-content:center;}
/* ---------- Panneau de profil (menu de l'en-tête) ---------- */
.account-head{display:flex; align-items:center; gap:10px; padding:2px 4px 12px;}
.account-head-avatar{flex-shrink:0; width:40px; height:40px; border-radius:50%; overflow:hidden; border:2px solid var(--border-soft); display:block; background:rgba(255,255,255,.08);}
.account-head-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.account-head-text{display:flex; flex-direction:column; gap:1px; min-width:0;}
.account-head-text b{font-family:var(--font-display); font-size:14.5px; font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.account-head-text i{font-style:normal; font-size:11px; color:var(--ink-soft); font-weight:600; line-height:1.3;}

/* Rangées pleine largeur façon menu, plutôt qu'un empilement de pastilles identiques où
   navigation et connexion se ressemblaient et se noyaient les unes dans les autres. */
.account-nav{display:flex; flex-direction:column; gap:3px;}
.account-row{display:flex; align-items:center; gap:11px; width:100%; padding:10px 11px; background:none; border:none; border-radius:12px; color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:13.5px; text-align:left; transition:background .14s ease;}
.account-row:hover{background:rgba(255,255,255,.09);}
.account-row-icon{font-size:16px; line-height:1; flex-shrink:0;}
.account-row-label{flex:1; min-width:0;}
.account-row-chevron{font-size:10px; color:var(--ink-soft); flex-shrink:0;}
.account-row.is-admin{color:var(--coral);}
.account-row.is-logout{color:var(--ink-soft);}
.account-row.is-logout:hover{background:rgba(255,79,79,.14); color:#FFD3D3;}

.account-sep{display:flex; align-items:center; gap:9px; margin:11px 0 9px;}
.account-sep::before, .account-sep::after{content:""; flex:1; height:1.5px; background:var(--border-soft);}
.account-sep:empty::after{display:none;}
.account-sep span{font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;}
.account-login-why{font-size:11px; color:var(--ink-soft); line-height:1.45; margin:0 4px 10px; text-align:left;}
.account-login-btns{display:flex; gap:7px;}
.account-login-btn{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 8px; background:rgba(255,255,255,.09); border:1.5px solid var(--border-soft); border-radius:999px; color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:12.5px; transition:border-color .15s ease, background .15s ease, transform .14s ease;}
.account-login-btn:hover{transform:translateY(-2px);}
.account-login-btn.is-google:hover{border-color:#4285F4; background:rgba(66,133,244,.18);}
.account-login-btn.is-discord:hover{border-color:#5865F2; background:rgba(88,101,242,.18);}

.library-list{display:flex; flex-direction:column; gap:12px; max-width:720px; margin:0 auto;}
#admin-content{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:16px;}
.admin-toggle-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.admin-room-header{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.admin-room-card{padding:16px 18px; margin-bottom:12px;}
.admin-room-card:last-child{margin-bottom:0;}
.public-lobby-group{margin-bottom:22px;}
.public-lobby-group h3{margin:0 0 10px;}
.public-lobby-empty{text-align:center; color:var(--ink-soft); padding:40px 20px;}
.public-lobby-card{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; margin-bottom:10px; flex-wrap:wrap;}
.public-lobby-card .plc-info{display:flex; flex-direction:column; gap:2px;}
.public-lobby-card .plc-mode{font-weight:800; font-size:15px;}
.public-lobby-card .plc-meta{font-size:12.5px; color:var(--ink-soft);}
.admin-room-top{display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--font-mono); font-size:15px; letter-spacing:1px;}
.admin-del-room{margin-top:8px;}
.btn-small.admin-btn{background:linear-gradient(135deg,var(--coral),#e63e6d); color:#fff; border:none;}
/* ---------- Bibliothèque : barre de filtre, badge de mode, miniatures ---------- */
.library-toolbar{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
.library-toolbar .mode-search{flex:1; min-width:180px;}
.library-count{font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--primary); white-space:nowrap;}
.library-count span{font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.library-mode-badge{margin-left:auto; flex-shrink:0; background:rgba(0,227,155,.14); border:1.5px solid var(--border-soft); color:var(--ink); border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:700; white-space:nowrap;}
/* Aperçu des pages dessinées : sans lui, la liste des carnets n'était qu'un mur de texte où
   rien ne permettait de reconnaître un carnet d'un autre. */
.library-thumbs{display:flex; gap:8px; margin:0 0 12px; overflow-x:auto; padding-bottom:3px; scrollbar-width:none;}
.library-thumbs::-webkit-scrollbar{display:none;}
.library-thumb{flex:0 0 auto; width:72px; height:54px; object-fit:cover; border-radius:10px; border:1.5px solid var(--border-soft); background:#FFFDF6;}
.library-thumb-more{display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); color:var(--ink-soft); font-weight:800; font-size:13px;}

.library-row-head{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.library-row-head .av{font-size:0;}
.library-row-head .av img{width:44px; height:44px; border-radius:50%; object-fit:cover;}
.library-row-head .nm{font-weight:800; font-size:15px;}
.library-row-actions{display:flex; gap:8px; flex-wrap:wrap;}

/* ---------- STATS ---------- */
.stats-hero{max-width:720px; margin:0 auto 18px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.stats-hero-pic{width:58px; height:58px; border-radius:50%; object-fit:cover; border:2.5px solid var(--border-soft); box-shadow:var(--shadow-sm); background:rgba(255,255,255,.1);}
.stats-hero-name{font-weight:800; font-size:19px;}
.stats-rank-badge{display:inline-flex; align-items:center; gap:6px; background:var(--card-bg); backdrop-filter:blur(18px); border:1.5px solid var(--border-soft); border-radius:999px; padding:6px 14px; font-weight:800; font-size:13px; margin-top:4px; box-shadow:var(--shadow-sm);}
.stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:720px; margin:0 auto 20px;}
@media(max-width:640px){.stats-grid{grid-template-columns:1fr 1fr;}}
.stat-card{text-align:center; padding:22px 12px; position:relative; overflow:hidden;}
.stat-card-icon{font-size:30px; margin-bottom:6px; display:inline-block;}
.stat-card:nth-child(2) .stat-card-icon{animation-delay:.2s;}
.stat-card:nth-child(3) .stat-card-icon{animation-delay:.4s;}
.stat-card:nth-child(4) .stat-card-icon{animation-delay:.6s;}
@keyframes statBob{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-5px) rotate(3deg);}}
.stat-card-num{font-family:var(--font-display); font-size:34px; font-weight:800; color:var(--primary); line-height:1;}
.stat-card-label{font-size:13px; color:var(--ink-soft); font-weight:700; margin-top:6px;}
.stats-progress-card{max-width:720px; margin:0 auto 18px; text-align:left;}
/* ---------- Collection de modes + stats dérivées ---------- */
.modedex-card, .stats-extra-card{margin-top:14px;}
.modedex-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.modedex-score{font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--primary); line-height:1;}
.modedex-score span{font-size:13px; color:var(--ink-soft);}
.modedex-hint{text-align:left; margin:8px 0 12px;}
.modedex-chips{display:flex; flex-wrap:wrap; gap:6px; max-height:190px; overflow-y:auto;}
.modedex-chip{background:rgba(255,255,255,.05); border:1.5px dashed var(--border-soft); color:var(--ink-soft); border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:700; opacity:.55;}
.modedex-chip.found{background:rgba(0,227,155,.16); border-style:solid; border-color:var(--primary); color:var(--ink); opacity:1;}
/* ---------- Succès ---------- */
.ach-card{margin-top:14px;}
.ach-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px;}
@media(max-width:560px){.ach-grid{grid-template-columns:1fr;}}
.ach-item{display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.05); border:1.5px dashed var(--border-soft); border-radius:var(--radius-sm); padding:10px 12px; opacity:.55; transition:transform .15s ease;}
.ach-item.got{background:rgba(0,227,155,.13); border-style:solid; border-color:var(--primary); opacity:1;}
.ach-item.got:hover{transform:translateY(-2px);}
.ach-icon{font-size:24px; line-height:1; flex-shrink:0;}
.ach-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.ach-text b{font-family:var(--font-display); font-size:13.5px; font-weight:800; color:var(--ink);}
.ach-text i{font-style:normal; font-size:11.5px; color:var(--ink-soft); line-height:1.3;}

.stats-extra-list{list-style:none; padding:0; margin:10px 0 0;}
.stats-extra-list li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1.5px solid var(--border-soft); font-size:13.5px;}
.stats-extra-list li:last-child{border-bottom:none;}
.stats-extra-list span{color:var(--ink-soft); font-weight:600;}
.stats-extra-list b{font-family:var(--font-display); font-weight:800; color:var(--ink); text-align:right;}

.stats-progress-bar-track{background:rgba(255,255,255,.12); border-radius:999px; height:14px; overflow:hidden; margin-top:10px; border:1.5px solid var(--border-soft);}
.stats-progress-bar-fill{height:100%; background:linear-gradient(135deg,var(--primary),var(--sky)); border-radius:999px; width:0%; transition:width 1s cubic-bezier(.22,1,.36,1);}
.stats-progress-hint{font-size:12.5px; margin-top:6px;}
.stats-empty{max-width:520px; margin:10px auto 0; text-align:center;}
.stats-empty .stat-card-icon{font-size:44px;}

/* Bandeau de mise en avant sous le logo : donne d'un coup d'œil l'ampleur du jeu. */
.home-badges{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:16px auto 0; position:relative; z-index:1;}
.home-badge{display:inline-flex; align-items:center; background:rgba(255,255,255,.08); border:1.5px solid var(--border-soft); border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:700; color:var(--ink-soft); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.home-badge b{color:var(--primary); font-family:var(--font-display); font-size:14px; font-weight:800;}

.home-cards{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:820px; margin:0 auto;}
.profile-card{max-width:600px; margin:0 auto 22px; padding:14px 20px; background:transparent; box-shadow:none; border:1px solid rgba(255,255,255,.12);}
.profile-card .card-inner{padding:0;}
.profile-card h2{font-size:15px; opacity:.75; margin-bottom:10px;}
/* Colonne avatar dimensionnée sur son contenu (`auto`) plutôt qu'à moitié de la carte : le champ
   pseudo récupère toute la largeur restante, et les deux restent côte à côte bien plus longtemps
   au lieu de s'empiler dès 760px en laissant un grand vide. */
.profile-card-row{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;}
@media(max-width:560px){.profile-card-row{grid-template-columns:1fr; justify-items:center; text-align:center;}}
@media(max-width:760px){.home-cards{grid-template-columns:1fr;}}
.home-cards .card{transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; position:relative;}
.home-cards .card:nth-child(1){transform:rotate(-.6deg);}
.home-cards .card:nth-child(2){transform:rotate(.6deg);}
.home-cards .card:hover{transform:rotate(0deg) translateY(-4px) scale(1.015); box-shadow:0 26px 55px rgba(0,0,0,.45);}
/* La carte est légèrement inclinée pour l'effet "carnet posé de travers", mais ça inclinait
   aussi tout le texte et les champs à l'intérieur. On contre-tourne le contenu d'un angle
   égal et opposé pour qu'il reste bien horizontal (ticket #25). */
.home-cards .card:nth-child(1) .card-inner{transform:rotate(.6deg);}
.home-cards .card:nth-child(2) .card-inner{transform:rotate(-.6deg);}
.home-cards .card:hover .card-inner{transform:rotate(0deg);}
.card-inner{transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.card-title-icon{margin-left:6px; display:inline-block;}
/* Avatar au-dessus de son explication plutôt qu'à côté : en ligne, le texte d'aide élargissait
   la colonne "Avatar" de la carte profil et écrasait le champ Pseudo à côté. */
.avatar-picker{display:flex; flex-direction:column; align-items:center; gap:12px; max-width:190px;}
.avatar-big-wrap{position:relative; width:96px; height:96px; flex-shrink:0;}
.avatar-big{width:96px; height:96px; border-radius:50%; background:rgba(255,255,255,.10); border:2.5px solid var(--border-soft); display:flex; align-items:center; justify-content:center; font-size:50px; box-shadow:var(--shadow); user-select:none; overflow:hidden;}
.avatar-big img{width:100%; height:100%; object-fit:cover; border-radius:50%; pointer-events:none; user-select:none;}
.av img{width:26px; height:26px; object-fit:cover; border-radius:50%; vertical-align:middle;}
.chat-avatar{width:18px; height:18px; object-fit:cover; border-radius:50%; vertical-align:middle; margin-right:2px;}
.recap-row .av img{width:30px; height:30px;}

/* ---------- POISSON D'AVRIL ---------- */
body.april-fools .player-row .av img,
body.april-fools .recap-row .av img{ animation: aprilWiggle 2.4s ease-in-out infinite; }
body.april-fools .logo-plaque{ animation: logoBreathe 3.6s ease-in-out infinite, aprilWiggle 5s ease-in-out infinite; }
@keyframes aprilWiggle{0%,100%{transform:rotate(-6deg);} 50%{transform:rotate(6deg);}}

/* ---------- ANNIVERSAIRE ALGATOR37 (9 décembre) ---------- */
#algator-bg-video{position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; display:none; pointer-events:none;}
#algator-bg-overlay{position:fixed; inset:0; background:rgba(4,20,14,.55); z-index:-1; display:none; pointer-events:none;}
body.algator-day #algator-bg-video, body.algator-day #algator-bg-overlay{display:block;}
body.algator-day{background:#04140E;}
.reveal-owner-avatar{width:34px; height:34px; object-fit:cover; border-radius:50%; vertical-align:middle; margin-right:6px;}
.avatar-big.spin{animation:avatarPulse .12s ease;}
@keyframes avatarPulse{0%{transform:scale(1);}50%{transform:scale(1.1);}100%{transform:scale(1);}}
/* Fix #42 (au jugé, à confirmer) : jugé "trop IA" — le badge rond plat + icône fine + ombre
   douce en glassmorphism est le pattern générique qu'on retrouve dans quasi tout outil d'UI
   généré, sans rapport avec l'identité "jeu fait main" du reste de l'appli (police Baloo 2,
   traits dessinés à la main, easter eggs). On garde l'icône Font Awesome (cohérence #22) mais
   on lui donne une allure d'autocollant posé de travers : ombre dure décalée (au lieu du flou
   glassy), légère inclinaison au repos, rebond élastique au survol plutôt qu'un simple scale.
   Portée volontairement limitée à ce composant : sans capture ni précision du testeur sur
   d'autres endroits concernés, un ravalement plus large risquerait de dénaturer des éléments
   qui n'ont jamais été signalés comme posant problème. */
.avatar-shuffle-btn{position:absolute; right:-6px; bottom:-6px; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); border:3px solid var(--paper-alt); color:#04241A; font-size:16px; display:flex; align-items:center; justify-content:center; box-shadow:2px 3px 0 rgba(0,0,0,.3); transform:rotate(-10deg); transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;}
.avatar-shuffle-btn:hover{transform:rotate(6deg) scale(1.12); box-shadow:3px 4px 0 rgba(0,0,0,.32);}
.avatar-shuffle-btn:active{transform:rotate(-4deg) scale(.88); box-shadow:1px 2px 0 rgba(0,0,0,.3);}
.avatar-shuffle-btn.avatar-btn-left{left:-6px; right:auto; transform:rotate(10deg); background:linear-gradient(135deg,var(--sky),#2ba8d6);}
.avatar-shuffle-btn.avatar-btn-left:hover{transform:rotate(-6deg) scale(1.12);}
.avatar-shuffle-btn.avatar-btn-left:active{transform:rotate(4deg) scale(.88);}
.avatar-hint{font-size:12.5px; color:var(--ink-soft); font-weight:700; text-align:center; line-height:1.4;}

/* ---------- EVENTS GRIFFOPHONE (panel admin dédié, distinct du panel multi-jeux) ----------
   4 events activables/désactivables en direct par l'admin depuis un nouveau panel, stockés
   sous griffo_events/<id> (temps réel, pas calendaire comme AprilFools/AlgatorDay/KaisDay).
   Chacun mélange un effet visuel (classe body ci-dessous), un modificateur de manche
   (voir GriffoEvents.applyMods) et une récompense (avatar exclusif, voir grantRewards). */
#griffo-event-chip{position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:60; display:flex; gap:6px; flex-wrap:wrap; justify-content:center; pointer-events:none;}
#griffo-event-chip span{background:rgba(0,0,0,.55); backdrop-filter:blur(6px); border:1.5px solid var(--border-soft); border-radius:999px; padding:5px 12px; font-family:var(--font-display); font-size:12.5px; font-weight:700; color:var(--ink); box-shadow:var(--shadow-sm);}
body.griffo-ev-vortex #canvas-wrap{ animation: griffoVortexSpin 6s linear infinite; box-shadow:0 0 40px 6px rgba(108,76,224,.5); }
@keyframes griffoVortexSpin{0%{filter:hue-rotate(0deg);}100%{filter:hue-rotate(360deg);}}
body.griffo-ev-chrono .timer-outer{ animation: griffoChronoPulse 1s ease-in-out infinite; }
@keyframes griffoChronoPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,79,79,.65);}50%{box-shadow:0 0 0 8px rgba(255,79,79,0);}}
body.griffo-ev-masque{ --primary:#FFD700; --primary-dark:#C9A400; }
body.griffo-ev-vip .logo-plaque{ animation: griffoVipShine 2.4s ease-in-out infinite; }
@keyframes griffoVipShine{0%,100%{filter:drop-shadow(0 0 0 rgba(255,215,0,0));}50%{filter:drop-shadow(0 0 10px rgba(255,215,0,.85));}}

/* ---------- LOBBY ---------- */
.lobby-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
.room-code-box{display:flex; align-items:center; gap:10px; background:var(--card-bg); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-radius:999px; padding:8px 8px 8px 18px; box-shadow:var(--shadow-sm); border:1.5px solid var(--border-soft);}
.room-code-box span{font-size:12px; color:var(--ink-soft); font-weight:700;}
.room-code-box strong{font-family:var(--font-mono); font-size:22px; letter-spacing:3px; color:var(--primary);}
.waitingroom-card{max-width:460px; margin:60px auto; text-align:center;}
.waitingroom-card .room-code-box{justify-content:center;}
.lobby-grid{display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:16px; align-items:start;}
/* Une piste `1fr` vaut minmax(auto,1fr) : son minimum est le min-content de son contenu. Sans ce
   min-width:0, une rangée non sécable (les puces de filtrage des modes, un pseudo très long…)
   élargit la colonne au-delà du conteneur et fait défiler toute la page horizontalement. */
.lobby-grid > *{min-width:0;}
@media(max-width:980px){.lobby-grid{grid-template-columns:1fr;}}
.panel{background:var(--card-bg); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); border:1.5px solid var(--border-soft);}
.panel h3{font-size:18px;}
.player-list{display:flex; flex-direction:column; gap:8px; margin:10px 0 14px; max-height:320px; overflow-y:auto;}
.player-row{display:flex; align-items:center; gap:10px; background:var(--paper-alt); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:8px 12px;}
.player-row.player-disconnected{opacity:.5;}
.reco-badge{margin-left:auto; font-size:13px; animation:spin 1.4s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.player-row .av{font-size:22px;}
.player-row .nm{flex:1; font-weight:700; font-size:14px;}
.player-row .crown{font-size:14px;}
.player-actions{display:flex; gap:5px; margin-left:auto;}
.btn-icon-sm{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--border-soft); background:rgba(255,255,255,.12); color:var(--ink); font-size:12px; display:flex; align-items:center; justify-content:center; transition:transform .12s, background .12s; flex-shrink:0;}
.btn-icon-sm:hover{transform:scale(1.15);}
.btn-icon-sm.kick:hover{background:var(--coral);}

/* ---------- Navigateur de modes (recherche + filtres + sections) ----------
   Le jeu dépasse les 40 modes : la grille plate d'origine est remplacée par des sections
   par catégorie, précédées d'une barre de recherche et de puces de filtrage. */
.mode-toolbar{display:flex; flex-direction:column; gap:9px; margin:10px 0 12px;}
.mode-search-row{display:flex; align-items:stretch; gap:8px; min-width:0;}
.mode-search-row .mode-search{flex:1; min-width:0;}
.mode-random-btn{flex-shrink:0; width:46px; background:rgba(255,255,255,.07); border:1.5px solid var(--border-soft); border-radius:999px; font-size:19px; line-height:1; transition:transform .18s cubic-bezier(.34,1.56,.64,1), border-color .15s ease, background .15s ease;}
.mode-random-btn:hover{border-color:var(--primary); background:rgba(0,227,155,.14); transform:rotate(18deg) scale(1.1);}
.mode-random-btn:active{transform:rotate(-12deg) scale(.9);}
.mode-search{display:flex; align-items:center; gap:9px; background:rgba(0,0,0,.22); border:1.5px solid var(--border-soft); border-radius:999px; padding:0 15px; transition:border-color .16s ease, box-shadow .16s ease;}
.mode-search:focus-within{border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,227,155,.16);}
.mode-search i{color:var(--ink-soft); font-size:13px; flex-shrink:0;}
.mode-search input{flex:1; min-width:0; background:none; border:none; outline:none; color:var(--ink); font-size:14px; font-weight:600; padding:11px 0;}
.mode-search input::placeholder{color:var(--ink-soft); font-weight:500;}

.mode-chips{display:flex; gap:6px; overflow-x:auto; padding-bottom:3px; scrollbar-width:none; min-width:0;}
.mode-chips::-webkit-scrollbar{display:none;}
.mode-chip{flex-shrink:0; background:rgba(255,255,255,.07); border:1.5px solid var(--border-soft); color:var(--ink-soft); border-radius:999px; padding:7px 13px; font-family:var(--font-display); font-weight:700; font-size:12px; white-space:nowrap; transition:background .15s ease, color .15s ease, border-color .15s ease;}
.mode-chip:hover{border-color:var(--primary); color:var(--ink);}
.mode-chip.active{background:var(--primary); border-color:var(--primary); color:#04241A;}

.mode-list{max-height:430px; overflow-y:auto; margin:0 0 16px; padding-right:5px; display:flex; flex-direction:column; gap:16px;}
.mode-section-head{display:flex; align-items:center; gap:9px; margin-bottom:8px; position:sticky; top:0; z-index:2; background:linear-gradient(to bottom, var(--paper) 62%, transparent); padding:3px 0 6px;}
.mode-section-title{font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft);}
.mode-section-count{font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--primary); background:rgba(0,227,155,.14); border-radius:999px; padding:2px 8px;}
.mode-section-head::after{content:""; flex:1; height:1.5px; background:var(--border-soft); border-radius:2px;}
.mode-section-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.mode-empty{text-align:center; color:var(--ink-soft); font-size:13.5px; padding:26px 10px; margin:0;}
@media(max-width:500px){.mode-section-grid{grid-template-columns:1fr;} .mode-list{max-height:350px;}}
.mode-card{text-align:left; background:var(--paper-alt); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:10px 12px; transition:border-color .15s, transform .12s, box-shadow .15s; color:var(--ink); box-shadow:var(--shadow-sm);}
.mode-card:hover{transform:translateY(-2px);}
.mode-card.selected{border-color:var(--primary); background:rgba(0,227,155,.22); box-shadow:0 0 0 2px var(--primary);}
.mode-card:disabled{cursor:default;}
.mode-card .mname{font-weight:800; font-size:14px; display:block; margin-bottom:2px;}
.mode-card .mdesc{font-size:11.5px; color:var(--ink-soft); line-height:1.3; margin:0; max-height:0; opacity:0; overflow:hidden; transition:max-height .18s ease, opacity .15s ease, margin-top .18s ease;}
.mode-card:hover .mdesc, .mode-card:focus-visible .mdesc{max-height:120px; opacity:1; margin-top:6px;}
/* ---------- Réglages du lobby ----------
   Les curseurs et cases à cocher n'avaient aucun style : le navigateur affichait donc ses
   contrôles natifs (curseurs rouges sous Windows), en total décalage avec le reste du jeu.
   Tout est repris ici — piste, pastille, interrupteurs, listes déroulantes. */
.setting-row{margin:0 0 10px; background:rgba(0,0,0,.16); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:13px 15px;}
.setting-row > label{display:block; margin-bottom:10px; font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--ink);}
.setting-row > label span{color:var(--primary); font-weight:800;}
.setting-row .hint{margin-top:6px !important; font-size:11.5px; line-height:1.4;}

/* --- Curseurs des réglages (temps, joueurs, tours) ---
   Volontairement limité à .setting-row : un `input[type=range]` global l'emporterait sur
   .volume-slider et .tool-slider (un sélecteur d'attribut compte comme une classe, donc
   input[type=range] est PLUS spécifique que .volume-slider) et écraserait la largeur des
   curseurs compacts de l'en-tête et de la barre d'outils du canvas. */
.setting-row input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:8px; margin:0; padding:0;
  background:rgba(255,255,255,.14);
  border-radius:999px; border:none; outline:none; cursor:pointer;
}
.setting-row input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(0,227,155,.3);}
.setting-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  border:2.5px solid var(--paper);
  box-shadow:0 2px 8px rgba(0,0,0,.45);
  cursor:pointer; transition:transform .14s ease;
}
.setting-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18);}
.setting-row input[type=range]::-webkit-slider-thumb:active{transform:scale(.94);}
.setting-row input[type=range]::-moz-range-track{height:8px; background:rgba(255,255,255,.14); border-radius:999px; border:none;}
.setting-row input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--primary); border:2.5px solid var(--paper);
  box-shadow:0 2px 8px rgba(0,0,0,.45); cursor:pointer;
}
.setting-row input[type=range]:disabled{opacity:.4; cursor:default;}

/* --- Cases à cocher transformées en interrupteurs --- */
.tiebreak-toggle-row input[type=checkbox]{
  -webkit-appearance:none; appearance:none;
  position:relative; flex-shrink:0;
  width:46px; height:26px; margin:0;
  background:rgba(255,255,255,.14);
  border:1.5px solid var(--border-soft); border-radius:999px;
  cursor:pointer; transition:background .2s ease, border-color .2s ease;
}
.tiebreak-toggle-row input[type=checkbox]::after{
  content:""; position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:50%;
  background:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.4);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.tiebreak-toggle-row input[type=checkbox]:checked{background:var(--primary); border-color:var(--primary);}
.tiebreak-toggle-row input[type=checkbox]:checked::after{transform:translateX(20px); background:#04241A;}
.tiebreak-toggle-row input[type=checkbox]:focus-visible{box-shadow:0 0 0 3px rgba(0,227,155,.3);}

/* --- Listes déroulantes --- */
select{
  width:100%; padding:11px 14px; cursor:pointer;
  background:rgba(0,0,0,.26); color:var(--ink);
  border:1.5px solid var(--border-soft); border-radius:999px;
  font-family:var(--font-body); font-size:14px; font-weight:600;
  outline:none; transition:border-color .16s ease;
}
select:focus{border-color:var(--primary);}
select option{background:var(--paper-alt); color:var(--ink);}

.fun-panel h3{margin-top:18px;}
.fun-panel h3:first-child{margin-top:0;}
#icebreaker-text{background:var(--paper-alt); border:1.5px solid var(--border-soft); padding:10px 12px; border-radius:var(--radius-sm); font-weight:700; font-size:14px; color:var(--ink); margin-bottom:8px;}
#warmup-canvas{width:100%; aspect-ratio:16/9; background:#FFFDF6; border:2px dashed var(--primary-dark); border-radius:var(--radius-sm); touch-action:none; display:block;}
.mini-palette{display:flex; gap:6px; margin:8px 0;}
.swatch{width:24px; height:24px; border-radius:50%; border:2px solid var(--card-bg); box-shadow:0 0 0 2px var(--ink-black);}
.swatch.active{box-shadow:0 0 0 3px var(--primary); transform:scale(1.12);}
.chat-messages{height:130px; overflow-y:auto; background:var(--paper); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:8px; font-size:13px; display:flex; flex-direction:column; gap:5px;}
.chat-msg b{color:var(--primary);}
.chat-input-row{display:flex; gap:6px; margin-top:8px;}
.chat-input-row input{flex:1;}

/* ---------- GAME ---------- */
.game-header{position:sticky; top:0; background:var(--paper); padding:10px 0; z-index:5; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.round-badge{font-family:var(--font-mono); background:var(--primary); color:#04241A; padding:6px 12px; border-radius:999px; font-size:13px; border:1.5px solid var(--border-soft); font-weight:700;}
.mode-badge{background:var(--yellow); color:#241705; font-weight:800; font-size:12px; padding:6px 12px; border-radius:999px; border:1.5px solid var(--border-soft);}
.timer-outer{position:relative; flex:1; min-width:140px;}
.timer-bar-wrap{height:14px; background:var(--paper-alt); border:1.5px solid var(--border-soft); border-radius:999px; overflow:hidden;}
.timer-bar{height:100%; width:100%; background:var(--mint); transition:width 1s linear, background-color .4s;}
.timer-bar.warn{background:var(--yellow);}
.timer-bar.danger{background:var(--coral);}
.timer-seconds{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--font-mono); font-size:11px; font-weight:800; color:var(--ink); text-shadow:0 1px 3px rgba(0,0,0,.55); pointer-events:none; letter-spacing:.4px; transition:color .2s ease;}
.timer-outer.danger .timer-seconds{animation:timerPulse .5s ease-in-out infinite; color:#fff;}
@keyframes timerPulse{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.3);}}
.timer-outer.danger .timer-bar-wrap{animation:timerShake .4s ease-in-out infinite;}
@keyframes timerShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-2px);}75%{transform:translateX(2px);}}

.game-body{margin-top:16px;}
.prompt-note{background:var(--yellow); color:#241705; font-weight:800; padding:14px 18px; border-radius:10px; box-shadow:var(--shadow-sm); border:1.5px solid var(--border-soft); transform:rotate(-1deg); margin-bottom:18px; font-size:16px; text-align:center;}
/* Fix #46 : variante du prompt-note pour signaler une entrée manquante (voir renderGameBody) — même forme, couleur distincte pour ne pas la confondre avec une consigne normale. */
.prompt-missing-note{background:var(--coral); color:#fff; transform:rotate(1deg);}
.prev-drawing{max-width:100%; border-radius:var(--radius-sm); box-shadow:var(--shadow); display:block; margin:0 auto 16px; border:6px solid var(--ink-black);}
.prev-drawing-ref{max-width:100%; max-height:140px; width:auto; border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); display:block; margin:0 auto 10px; border:4px solid var(--ink-black); object-fit:contain;}
.cadavre-crop-wrap{width:100%; height:230px; overflow:hidden; position:relative; border-radius:var(--radius-sm); box-shadow:var(--shadow); margin:0 auto 16px; border:6px dashed var(--coral); background:#04241A;}
.cadavre-crop-wrap img{position:absolute; max-width:none; display:block;}
.cadavre-crop-wrap::after{content:"🔍"; position:absolute; bottom:8px; right:10px; font-size:18px; opacity:.75; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));}
.cadavre-crop-wrap-drawing{height:140px; margin:0 auto 10px;}
.souvenir-flou-wrap{height:230px; border-color:var(--sky); border-style:solid;}
.souvenir-flou-wrap::after{content:"🪞";}
.souvenir-flou-wrap canvas{display:block; width:100%; height:100%;}
textarea#write-input{width:100%; min-height:110px; border-radius:var(--radius-sm); border:1.5px solid var(--border-soft); padding:14px; resize:vertical; outline:none; background:rgba(255,255,255,.10); color:var(--ink); box-shadow:var(--shadow-sm);}
textarea#write-input:focus{border-color:var(--primary);}
.char-count{text-align:right; font-size:12px; color:var(--ink-soft); margin:4px 0 10px;}
.text-mode-hint{text-align:left !important; background:rgba(0,227,155,.1); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:9px 13px; font-weight:700; color:var(--ink) !important; margin:0 0 10px !important;}
/* Message de contrainte : replié à zéro tant qu'il n'y a rien à dire, pour ne pas faire sauter
   la mise en page à chaque frappe. */
.text-mode-error{text-align:left !important; margin:0 !important; max-height:0; opacity:0; overflow:hidden; color:#FFD3D3 !important; font-weight:800; transition:max-height .18s ease, opacity .15s ease, margin .18s ease;}
.text-mode-error.show{max-height:60px; opacity:1; margin:0 0 10px !important;}
.examples-row{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0;}
.chip{background:var(--paper-alt); border:1.5px solid var(--border-soft); border-radius:999px; padding:6px 12px; font-size:12px; color:var(--ink);}
.theme-suggestion-box{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:var(--paper-alt); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:10px 14px; margin:10px 0 16px;}
.theme-suggestion-text{margin:0; font-weight:800; font-size:15px; color:var(--ink);}

.canvas-wrap{position:relative; width:100%; aspect-ratio:4/3; max-height:60vh; margin:0 auto; overflow:hidden; border-radius:var(--radius-sm);}
.canvas-wrap.quake-shake{animation:quakeShake .32s cubic-bezier(.36,.07,.19,.97);}
/* #40 — Zoom en jeu : le canvas est désormais enveloppé dans ce layer, qui reçoit le scale/pan
   CSS pendant que .canvas-wrap (overflow:hidden) clippe proprement le débordement. fog/blind
   restent des enfants directs de .canvas-wrap, donc jamais zoomés/déplacés avec le dessin. */
.canvas-zoom-layer{width:100%; height:100%; transform-origin:center center; will-change:transform;}
.canvas-wrap.pan-mode #draw-canvas{cursor:grab;}
.canvas-wrap.pan-mode.panning #draw-canvas{cursor:grabbing;}
@keyframes quakeShake{
  0%{transform:translate(0,0) rotate(0);}
  15%{transform:translate(-7px,4px) rotate(-1.2deg);}
  30%{transform:translate(6px,-5px) rotate(1deg);}
  45%{transform:translate(-5px,-3px) rotate(-.8deg);}
  60%{transform:translate(7px,3px) rotate(1.1deg);}
  75%{transform:translate(-4px,2px) rotate(-.6deg);}
  90%{transform:translate(3px,-2px) rotate(.4deg);}
  100%{transform:translate(0,0) rotate(0);}
}
#draw-canvas{width:100%; height:100%; background:#FFFDF6; border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); box-shadow:var(--shadow); touch-action:none; display:block; cursor:crosshair;}
/* Mode Disco : la teinte de la toile défile en continu pendant qu'on dessine. Purement visuel —
   les pixels du canvas ne bougent pas, donc la révélation montre les vraies couleurs. */
.disco-canvas{animation:discoHue 2.6s linear infinite;}
@keyframes discoHue{from{filter:hue-rotate(0deg) saturate(1.5);} to{filter:hue-rotate(360deg) saturate(1.5);}}
.fog-overlay{position:absolute; inset:0; border-radius:var(--radius-sm); pointer-events:none; background:radial-gradient(circle 95px at var(--fx,50%) var(--fy,50%), transparent 0%, rgba(10,8,20,.96) 68%); display:none;}
.blind-overlay{position:absolute; inset:0; border-radius:var(--radius-sm); pointer-events:none; background:var(--paper-alt); display:none; align-items:center; justify-content:center; text-align:center; padding:24px; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink-soft);}
.blind-overlay.show{display:flex;}
.toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px;}
.palette{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.size-group{display:flex; gap:6px;}
.size-btn{width:36px; height:36px; border-radius:50%; border:1.5px solid var(--border-soft); background:var(--card-bg); display:flex; align-items:center; justify-content:center;}
.size-btn.active{border-color:var(--primary); background:var(--paper-alt); box-shadow:0 0 0 2px var(--primary);}
.size-dot{border-radius:50%; background:var(--ink);}
.spacer{flex:1;}
.tool-slider-wrap{display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.08); border:1.5px solid var(--border-soft); border-radius:999px; padding:5px 12px 5px 10px;}
.tool-slider-wrap .tsw-icon{font-size:14px; line-height:1;}
.tool-slider{-webkit-appearance:none; appearance:none; width:72px; height:5px; border-radius:999px; background:rgba(255,255,255,.28); outline:none; cursor:pointer; accent-color:var(--primary);}
.tool-slider::-webkit-slider-runnable-track{background:rgba(255,255,255,.28); height:5px; border-radius:999px;}
.tool-slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:15px; height:15px; border-radius:50%; background:var(--primary); border:2px solid var(--white); cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,.35); margin-top:-5px;}
.tool-slider::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:var(--primary); border:2px solid var(--white); cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,.35);}
.tool-slider::-moz-range-track{background:rgba(255,255,255,.28); height:5px; border-radius:999px;}
.tool-slider-label{font-size:12px; font-weight:800; color:var(--ink-soft); min-width:32px; text-align:right; font-variant-numeric:tabular-nums;}
.size-preview-dot{border-radius:50%; background:var(--ink); flex-shrink:0; transition:width .1s ease, height .1s ease;}
.custom-color-swatch{width:24px; height:24px; border-radius:50%; border:2px solid var(--card-bg); box-shadow:0 0 0 2px var(--ink-black); padding:0; cursor:pointer; overflow:hidden; background:conic-gradient(red,#ff0,lime,cyan,blue,magenta,red);}
.custom-color-swatch input[type="color"]{-webkit-appearance:none; appearance:none; border:none; width:150%; height:150%; margin:-25%; padding:0; cursor:pointer; background:none;}
.custom-color-swatch input[type="color"]::-webkit-color-swatch-wrapper{padding:0;}
.custom-color-swatch input[type="color"]::-webkit-color-swatch{border:none;}
.mixer-panel{display:none; flex-direction:column; gap:10px; background:var(--card-bg); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:12px; margin-top:2px; width:100%; box-shadow:var(--shadow-sm);}
.mixer-panel.show{display:flex;}
.mixer-row{display:flex; align-items:center; gap:10px;}
.mixer-color-input{width:38px; height:38px; border-radius:10px; border:1.5px solid var(--border-soft); padding:0; cursor:pointer; flex-shrink:0; background:none;}
.mixer-color-input::-webkit-color-swatch-wrapper{padding:2px;}
.mixer-color-input::-webkit-color-swatch{border-radius:8px; border:none;}
.mixer-preview{width:38px; height:38px; border-radius:10px; border:1.5px solid var(--border-soft); flex-shrink:0; box-shadow:var(--shadow-sm);}
.mixer-blend-slider{flex:1;}
.mixer-hint{font-size:12px; color:var(--ink-soft); text-align:center; margin:0;}
.emoji-grid{display:grid; grid-template-columns:repeat(8,1fr); gap:6px; margin:10px 0;}
@media(max-width:520px){.emoji-grid{grid-template-columns:repeat(6,1fr);}}
.emoji-btn{background:var(--paper-alt); border:1.5px solid var(--border-soft); border-radius:10px; font-size:22px; padding:8px 0; transition:transform .1s;}
.emoji-btn:hover{transform:scale(1.1);}
.emoji-preview{font-size:30px; min-height:44px; background:var(--paper-alt); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:8px 14px; text-align:center; letter-spacing:4px; margin-bottom:10px;}

.selfie-wrap{position:relative; width:100%; aspect-ratio:4/3; max-height:60vh; margin:0 auto; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow); background:#04241A; border:1.5px solid var(--border-soft);}
#selfie-video,#selfie-preview{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
#selfie-video{transform:scaleX(-1);}
.selfie-toolbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:14px;}

.waiting-overlay{position:fixed; inset:0; background:#1B1030; backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:50;}
.waiting-overlay.hidden{display:none;}
.waiting-box{text-align:center; max-width:340px; padding:24px; background:var(--card-bg); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1.5px solid var(--border-soft); border-radius:var(--radius); box-shadow:var(--shadow);}
.spinner{font-size:44px; animation:bob 1.1s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-8deg);} 50%{transform:translateY(-14px) rotate(8deg);}}
.waiting-fact{font-size:13px; color:var(--ink-soft); margin-top:10px; min-height:40px;}
.waiting-count{font-family:var(--font-mono); font-weight:700; color:var(--primary); margin-top:8px;}

/* ---------- DUEL ---------- */
.tiebreak-toggle-row{display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--ink); margin:0; cursor:pointer; user-select:none;}
.tiebreak-toggle-row input{width:auto;}
.duel-center{margin:0 auto; max-width:420px;}
.duel-vote-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px;}
@media(max-width:560px){.duel-vote-grid{grid-template-columns:1fr;}}
.duel-vote-card{background:var(--card-bg); border:2px solid var(--border-soft); border-radius:var(--radius-sm); padding:10px; display:flex; flex-direction:column; align-items:center; gap:8px; transition:transform .15s ease, border-color .15s ease; box-shadow:var(--shadow-sm);}
.duel-vote-card:hover{transform:translateY(-3px) scale(1.02); border-color:var(--primary);}
.duel-vote-card img{width:100%; border-radius:12px; background:#FCFAFF; display:block;}
.duel-vote-label{font-family:var(--font-display); font-weight:800; color:var(--ink);}
.duel-score-row{display:flex; flex-direction:column; gap:10px; max-width:420px; margin:14px auto;}
.duel-player-score{display:flex; align-items:center; gap:10px; background:var(--paper-alt); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:10px 14px; box-shadow:var(--shadow-sm);}
.duel-player-score.winner{border-color:var(--yellow); box-shadow:0 0 0 2px var(--yellow);}
.duel-player-score .nm{flex:1; font-weight:800; text-align:left;}
.duel-pts{font-family:var(--font-mono); font-weight:700; color:var(--primary);}
.duel-crown{font-size:18px;}
.duel-wheel-wrap{position:relative; width:260px; height:260px; margin:14px auto;}
.duel-wheel{position:absolute; inset:0; border-radius:50%; border:4px solid #FFFFFF; box-shadow:var(--shadow); transform:rotate(0deg);}
.duel-wheel-label{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10.5px; font-weight:800; color:#0B2A1E; text-shadow:0 1px 2px rgba(255,255,255,.5); width:56px; text-align:center;}
.duel-wheel-avatar{width:24px; height:24px; object-fit:cover; border-radius:50%; border:2px solid #fff;}
.duel-wheel-pointer{position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:26px; z-index:2; filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));}
.duel-blob{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:38px; z-index:3;}
.duel-blob-push{animation:duelBlobPush .35s ease infinite;}
@keyframes duelBlobPush{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);}50%{transform:translate(-50%,-50%) scale(1.15) rotate(15deg);}}
.duel-blob-cheer{animation:duelBlobCheer .6s ease infinite;}
@keyframes duelBlobCheer{0%,100%{transform:translate(-50%,-50%) translateY(0) rotate(-6deg);}50%{transform:translate(-50%,-50%) translateY(-10px) rotate(6deg);}}

/* ---------- REVEAL ---------- */
.reveal-wrap{max-width:980px; margin:10px auto;}
.reveal-shell{display:flex; align-items:flex-start; gap:16px;}
.reveal-sidebar{width:230px; flex:0 0 230px; padding:16px; position:sticky; top:14px; max-height:calc(100vh - 28px); overflow-y:auto;}
.reveal-sidebar-title{font-family:var(--font-display); font-size:15px; margin:0 0 10px;}
.reveal-sidebar .player-list{max-height:none; margin:0;}
.reveal-sidebar .player-row{cursor:pointer; transition:transform .12s ease, border-color .15s ease, background .15s ease;}
.reveal-sidebar .player-row:hover{border-color:var(--primary); transform:translateX(2px);}
.reveal-sidebar .player-row.active{background:rgba(0,227,155,.18); border-color:var(--primary); box-shadow:0 0 0 1px var(--primary);}
.reveal-main{flex:1; min-width:0; padding:22px; text-align:left;}
.reveal-main-header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-bottom:14px; margin-bottom:16px; border-bottom:1.5px solid var(--border-soft);}
#reveal-owner-title{font-size:20px; margin:0; display:flex; align-items:center;}
.reveal-feed{display:flex; flex-direction:column; gap:20px; max-height:64vh; overflow-y:auto; padding-right:6px;}
.reveal-feed-controls{display:flex; justify-content:center; margin-top:16px;}
.reveal-feed-item{display:flex; flex-direction:column; align-items:flex-start; gap:7px; animation:revealItemIn .25s ease;}
@keyframes revealItemIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.reveal-feed-author{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; color:var(--ink-soft);}
.reveal-feed-avatar{width:24px; height:24px; border-radius:50%; object-fit:cover; border:2px solid var(--border-soft); display:block;}
.reveal-text-bubble{font-family:var(--font-display); font-size:18px; color:var(--ink); background:var(--paper-alt); border:1.5px solid var(--border-soft); padding:14px 18px; border-radius:4px 16px 16px 16px; position:relative; max-width:100%;}
/* Fix #46 : case "entrée manquante" dans le fil de révélation — même gabarit que reveal-text-bubble, style pointillé/italique pour signaler que ce n'est pas une vraie contribution. */
.reveal-missing-bubble{font-style:italic; opacity:.75; border-style:dashed;}
.reveal-feed .reveal-image{max-width:min(100%,360px); max-height:320px; border-radius:4px 16px 16px 16px;}
.reveal-image{border-radius:14px; box-shadow:var(--shadow); border:8px solid var(--ink-black); display:block;}
/* margin-left:246px décale ce bloc pour l'aligner sous .reveal-main (sidebar 230px + gap 16px),
   mais sans borner sa largeur, justify-content:center le centrait dans TOUTE la largeur de
   .reveal-wrap (donc trop à droite) plutôt que dans la largeur réelle de .reveal-main. On
   contraint donc sa largeur à "100% - le même décalage" pour que le centrage soit correct (fix #14). */
.reveal-controls{display:flex; justify-content:center; gap:10px; margin-top:6px; margin-left:246px; width:calc(100% - 246px);}
.voice-toggle-row{display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--ink-soft); margin:16px 0 10px; cursor:pointer; margin-left:246px;}
.voice-toggle-row input{width:auto; accent-color:var(--primary);}
.reveal-download-row{display:flex; justify-content:flex-end; gap:8px;}
.dl-btn{display:inline-flex; align-items:center; gap:6px;}
.dl-btn.loading{opacity:.55; pointer-events:none;}
.recap-list{display:flex; flex-direction:column; gap:10px; margin:18px auto 18px 246px; max-width:520px;}
.recap-row{display:flex; align-items:center; gap:10px; background:var(--paper-alt); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:10px 14px;}
.remix-row{text-align:center; margin:18px 0;}
.recap-row .av{font-size:22px;}
.reveal-chat-box{margin:18px auto 0 246px; max-width:520px; background:var(--paper); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:12px;}
.reveal-chat-title{font-size:13px; font-weight:700; margin:0 0 8px; color:var(--ink-soft);}
.reveal-chat-messages{height:120px; overflow-y:auto; background:var(--paper-alt); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:8px; font-size:13px; display:flex; flex-direction:column; gap:5px; margin-bottom:8px;}
.reveal-chat-msg{word-wrap:break-word;}
.reveal-chat-msg b{color:var(--primary);}
.reveal-chat-input-row{display:flex; gap:6px;}
.reveal-chat-input-row input{flex:1; font-size:13px;}
.recap-row .nm{flex:1; font-weight:700; font-size:14px; text-align:left;}
.recap-actions{display:flex; gap:6px;}
.selfie-winner-banner{max-width:520px; margin:6px auto 20px; background:linear-gradient(135deg,var(--yellow),#FFA93C); color:#241705; border-radius:var(--radius-sm); padding:16px 20px; box-shadow:var(--shadow); transform:rotate(-1deg);}
.selfie-winner-title{font-family:var(--font-display); font-weight:800; font-size:15px; margin-bottom:8px;}
.selfie-winner-row{display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-display); font-weight:800; font-size:18px;}
.selfie-winner-row img{width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid #fff;}
.selfie-winner-banner .hint{color:#241705; opacity:.85; margin-top:8px;}
.selfie-exclusive-avatar{width:26px; height:26px; border-radius:50%; object-fit:cover; vertical-align:middle; border:2px solid #fff; margin-left:4px;}

.podium{margin-top:16px; text-align:center;}
.podium-list{display:flex; flex-direction:column; gap:8px; margin-top:10px; text-align:left;}
.podium-row{display:flex; align-items:center; gap:10px; background:var(--paper-alt); border:1.5px solid var(--border-soft); border-radius:var(--radius-sm); padding:8px 14px;}
.podium-row .pm{font-size:20px;}
.podium-row .pav{font-size:22px;}
.podium-row .pnm{flex:1; font-weight:700; font-size:14px; color:var(--ink);}
.podium-row .pct{font-size:12px; color:var(--ink-soft); font-weight:700; white-space:nowrap;}

.confetti-piece{position:fixed; top:-20px; width:9px; height:14px; border-radius:2px; z-index:80; animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(108vh) rotate(360deg); opacity:.9;}}

.reaction-float{position:fixed; bottom:90px; font-size:28px; z-index:90; animation:floatup 1.6s ease-out forwards; pointer-events:none;}
.avatar-reaction-float img{width:40px; height:40px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow-sm); border:2.5px solid var(--white); display:block;}
@keyframes floatup{0%{opacity:1; transform:translateY(0) scale(.6);} 15%{transform:translateY(-10px) scale(1.1);} 100%{opacity:0; transform:translateY(-160px) scale(1);}}
.reaction-row{display:flex; gap:8px; justify-content:center; margin-top:14px;}
.reaction-btn{background:var(--card-bg); border:1.5px solid var(--border-soft); color:var(--ink); border-radius:999px; font-size:20px; padding:6px 12px; box-shadow:var(--shadow-sm); transition:transform .12s;}
.reaction-btn:hover{transform:scale(1.08);}

/* ---------- RESPONSIVE : mobile & desktop ---------- */
@media(max-width:600px){
  /* background-attachment:fixed est instable sur mobile (repaints, décrochage du fond,
     glitchs visuels) surtout pendant un pinch-to-zoom — cause probable du ticket #16.
     "scroll" est parfaitement fluide sur mobile et le fond reste couvrant grâce au
     background-size déjà défini plus haut. */
  body{background-attachment:scroll;}
  .logo{font-size:32px;}
  .tagline{font-size:14px;}
  .card{padding:16px;}
  .lobby-header{flex-direction:row;}
  .room-code-box strong{font-size:18px; letter-spacing:2px;}
  .panel{padding:14px;}
  .btn-big{padding:15px 18px; font-size:16px;}
  .toolbar{gap:8px;}
  .btn-icon{width:44px; height:44px; min-width:44px; font-size:19px;}
  .size-btn{width:40px; height:40px;}
  .canvas-wrap{max-height:48vh; aspect-ratio:1/1;}
  .game-header{gap:8px; padding:8px 0;}
  .round-badge, .mode-badge{font-size:11.5px; padding:5px 10px;}
  .timer-outer{min-width:100%; order:3;}
  .emoji-btn{font-size:19px; padding:9px 0;}
  .reveal-shell{flex-direction:column;}
  .reveal-controls, .voice-toggle-row, .recap-list, .reveal-chat-box{margin-left:0;}
  .reveal-controls{width:100%;}
  .reveal-sidebar{width:100%; flex-basis:auto; position:static; max-height:none; padding:12px;}
  .reveal-sidebar .player-list{flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:4px;}
  .reveal-sidebar .player-row{flex:0 0 auto; min-width:150px;}
  .reveal-main{padding:16px;}
  .reveal-feed{max-height:56vh;}
  .reveal-image{max-height:42vh;}
  .reveal-text-bubble{font-size:17px; padding:12px 15px;}
  .volume-slider{width:56px;}
  .site-header{padding:8px 10px;}
  .site-header-logo{font-size:16px;}
  .sound-control{padding:4px 10px 4px 4px; gap:6px;}
  #app{padding-top:64px;}
}
@media(pointer:coarse){
  .swatch, .size-btn{width:38px; height:38px;}
  .btn-icon{width:46px; height:46px; min-width:46px;}
  .emoji-btn{padding:10px 0;}
}
@media(min-width:981px){
  .canvas-wrap{max-height:66vh;}
}