/* ============================================================
   Mot Magique - styles.css
   Style complet (Régie + Plateau)
   ============================================================ */

:root{
  /* Fond / UI */
  --bg:#0b1b2b;
  --panel:#122a40;
  --text:#e8f1ff;
  --muted:#a9b7cc;

  /* Cellules (plateau) */
  --cellTop:#ffe873;
  --cellBottom:#f4b400;

  --dimTop:#a89240;
  --dimBottom:#9a6f00;

  --nopTop:#f9f9f9;
  --nopBottom:#b0b0b0;

  --orangeTop:#ff9933;
  --orangeBottom:#cc3300;

  --revealed:#ffffff;
  --revealedDim:#b8b8b8;

  --ink:#0b2340;

  /* Layout */
  --gap:4px;
  --cell:72px;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

/* ---------- Reset léger ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 30% 20%, #153754 0%, var(--bg) 60%);
}

/* ============================================================
   RÉGIE
   ============================================================ */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 20px;
}

.brand .logo{
  font-weight:900;
  letter-spacing:.5px;
  font-size:22px;
}
.brand .subtitle{
  color:var(--muted);
  font-size:13px;
  margin-top:2px;
}

.right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  padding: 0 20px 20px;
}

.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  min-height: 220px;
}

h2{
  margin:0 0 10px;
  font-size:16px;
}

.hint{
  margin:0 0 10px;
  color:var(--muted);
}

.label{
  color:var(--muted);
  font-size:11px;
  margin-right:6px;
}

.select{
  background: rgba(255,255,255,.08);
  color:var(--text);
  border:1px solid rgba(255,255,255,.15);
  padding:10px 12px;
  border-radius: 12px;
  outline:none;
  font-size:18px;
}

/* Lisible dans la liste déroulante */
.select option{
  background: #122a40;
  color: var(--text);
  font-size:18px;
}

.select optgroup{
  background: #122a40;
  color: var(--text);
}

.select option.group-label{
  background: #122a40;
  color: var(--text);
  font-weight: 700;
}

.select option.general-category-option{
  color:#8bd3ff;
  font-weight:800;
}

.select option.general-theme-option{
  color:var(--text);
}
.select option.group-label:disabled{
  color: var(--text);
}

.select option[data-played="1"]{
  color:#ff5f6d !important;
  font-weight:700;
}

.teams-container{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}
.team-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:64px;
}
.team-square{
  width:56px;
  height:56px;
  border-radius:14px;
  position:relative;
  box-shadow:0 3px 0 rgba(0,0,0,.25);
  cursor:pointer;
  transition: transform .08s ease, filter .1s ease;
}
.team-square:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.team-square.selected{
  outline:3px solid rgba(255,255,255,.7);
  outline-offset:-4px;
}
.team-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:11px;
  font-weight:800;
  text-align:center;
  padding:4px;
  opacity:0;
  transition: opacity .1s ease;
  pointer-events:none;
}
.team-square:hover .team-label{
  opacity:1;
}
.team-name-input{
  width:64px;
  text-align:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  color:var(--text);
  padding:6px 8px;
  font-size:11px;
}
.team-points{
  width:64px;
  text-align:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  color:var(--muted);
  padding:6px 8px;
  font-size:11px;
}

.team-points::-webkit-outer-spin-button,
.team-points::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.team-points[type="number"]{
  appearance:textfield;
  -moz-appearance:textfield;
}
.btn.small{
  padding:6px 10px;
  font-size:11px;
}

.input{
  width:100%;
  background: rgba(255,255,255,.08);
  color:var(--text);
  border:1px solid rgba(255,255,255,.15);
  padding:10px 12px;
  border-radius: 12px;
  outline:none;
}

.input.big{
  font-size:28px;
  text-transform: uppercase;
  text-align:center;
  letter-spacing: 6px;
  padding:14px 12px;
}

.row{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.row.small{
  margin-top:14px;
}

.btn{
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.10);
  color:var(--text);
  padding:10px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight:700;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
}

.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }
.btn.active{
  border-color:#f7b801;
  box-shadow:0 0 0 2px rgba(247,184,1,.4) inset;
  color:#fff;
}
.btn.bad-active{
  border-color:#ff5f6d;
  box-shadow:0 0 0 2px rgba(255,95,109,.45) inset;
  color:#fff;
}
.last-letter{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  font-size:13px;
  color:#fff;
  background: rgba(255,255,255,.06);
  height:34px;
}

.regie-timer-window{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 25;
  min-width: 180px;
  border:1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  background: rgba(8, 26, 42, .92);
  box-shadow: 0 12px 26px rgba(0,0,0,.34);
  overflow: hidden;
}

.regie-timer-window.hidden{
  display:none;
}

.regie-timer-close{
  position:absolute;
  top:6px;
  left:6px;
  width:24px;
  height:24px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color:#ffffff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.regie-timer-handle{
  padding:8px 12px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color:#cfe6ff;
  border-bottom:1px solid rgba(255,255,255,.12);
  cursor: move;
  user-select: none;
}

.regie-timer-text{
  padding:10px 12px 12px;
  text-align:center;
  font-size:40px;
  font-weight:900;
  line-height:1;
  color:#ffffff;
}

.capitales-block{
  margin-top:10px;
}

.capitales-block .row{
  gap:10px;
  align-items:center;
}

.capitales-block .input{
  width:160px;
}

.capitales-block .select{
  width: 320px;
}

.capitales-tone{
  min-width: 120px;
}

.capitales-tone-modal{
  min-width: 120px;
}

.music-block{
  margin-top:10px;
}

.music-block .select{
  width: 220px;
}

.media-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.media-row .select{
  flex:1;
  min-width:0;
}

.media-file-name{
  margin-top:6px;
  font-size:12px;
  color: var(--muted);
  word-break: break-word;
}

.replay-btn{
  min-width:44px;
  width:44px;
  height:44px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
}

.plateau-bg-btn{
  min-width: 160px;
  white-space: nowrap;
}

.generalq-block .media-row{
  align-items:flex-start;
  flex-wrap:wrap;
}

.generalq-block #generalCategorySelect{
  min-width: 340px;
  flex: 1 1 320px;
}

.generalq-modal-card{
  width: min(92vw, 1000px);
  max-height: 86vh;
  min-height: 260px;
  overflow: visible;
}

.generalq-top-actions{
  margin-top:0;
  align-items:center;
}

.general-level-filter{
  position: relative;
}

.general-level-filter > summary{
  list-style:none;
  user-select:none;
}

.general-level-filter > summary::-webkit-details-marker{
  display:none;
}

.general-level-filter-options{
  position:absolute;
  right:0;
  top: calc(100% + 6px);
  min-width: 210px;
  z-index: 30;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background: #102c40;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  display:grid;
  gap:8px;
}

.general-level-filter-option{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#fff;
}

.general-question-card-regie{
  margin-top:10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:10px;
  background: rgba(0,0,0,.18);
}

.general-question-card-regie.hidden{
  display:none;
}

.general-question-meta-regie{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}

.general-question-text-regie{
  font-size:20px;
  line-height:1.28;
  font-weight:800;
  color:#ffffff;
}

.general-question-choices-regie{
  margin:10px 0 0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
}

.general-question-choice-regie{
  appearance:none;
  -webkit-appearance:none;
  min-height:58px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  padding:10px 12px;
  font-size:17px;
  font-weight:800;
  color:#ffffff;
  cursor:pointer;
}

.general-question-choice-regie.choice-hidden{
  display:none;
}

.general-question-choice-regie.choice-reveal-anim{
  animation: generalChoiceReveal .24s ease-out;
}

.general-question-choice-regie.correct-answer{
  color:#7dff98;
  font-weight:900;
}

.general-question-choice-regie:hover{
  border-color: rgba(255,255,255,.4);
}

.general-question-choice-regie.attempted-correct{
  border-color: rgba(60,179,113,.9);
  background: rgba(60,179,113,.22);
  color:#d4ffd4;
}

.general-question-choice-regie.attempted-wrong{
  border-color: rgba(220,20,60,.9);
  background: rgba(220,20,60,.2);
  color:#ffe4ea;
}

.general-question-answer-regie{
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(60,179,113,.45);
  background: rgba(60,179,113,.16);
  color:#d4ffd4;
  font-weight:800;
}

.general-question-answer-regie:empty{
  display:none;
}

.general-question-anecdote-regie{
  margin-top:8px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.04);
  color:#d7e8ff;
  font-size:17px;
  font-weight:800;
  line-height:1.35;
}

.general-question-anecdote-regie:empty{
  display:none;
}

.general-question-actions{
  margin-top:10px;
}

.general-question-actions .btn{
  flex:1;
}

.misfortune-wheel-panel{
  margin: 10px 0 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:12px;
  background: rgba(0,0,0,.18);
}

.misfortune-wheel-panel.hidden{
  display:none;
}

.misfortune-wheel-panel.windowed{
  position: fixed;
  z-index: 32;
  width: min(92vw, 640px);
  margin: 0;
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.26);
}

.misfortune-wheel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor: move;
  user-select: none;
  touch-action: none;
}

.misfortune-wheel-header .btn,
.misfortune-wheel-header input{
  cursor: auto;
}

.misfortune-wheel-title{
  font-size:18px;
  font-weight:900;
  color:#ffffff;
}

.misfortune-wheel-controls{
  display:flex;
  align-items:center;
  gap:8px;
}

.misfortune-wheel-intensity{
  width: 84px;
  text-align: center;
  font-weight: 800;
}

.misfortune-wheel-stage{
  width: min(100%, 520px);
  margin: 10px auto 0;
  position: relative;
  display:grid;
  place-items:center;
}

.misfortune-wheel-stage canvas{
  width: min(100%, 520px);
  height: auto;
  display:block;
}

.misfortune-wheel-pointer{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:30px solid #ef4444;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.35));
  z-index:2;
}

.misfortune-wheel-result{
  margin-top:10px;
  text-align:center;
  font-weight:800;
  color:#d8edff;
}

.word-action-box{
  margin-top:12px;
  width: min(100%, 560px);
  aspect-ratio: 1 / 1;
  min-height: 280px;
  max-height: 560px;
  padding: 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.word-action-header{
  font-size: 26px;
  font-weight: 900;
  color:#ffffff;
  line-height: 1.1;
}

.word-action-definition{
  flex:1;
  overflow:auto;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  color:#ffe873;
  padding: 8px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}

.word-action-buttons{
  margin-top:0;
}

.word-action-buttons .btn{
  flex:1;
}

.sfx-block{
  margin-top:10px;
}

.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(10,20,30,.55);
  backdrop-filter: blur(3px);
  z-index: 20;
}

.modal.hidden{
  display:none;
}

.hidden{
  display:none !important;
}

.modal-card{
  background: #0f2a3a;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 16px 18px;
  min-width: 260px;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.modal-card h3{
  margin: 0 0 6px;
  font-size: 18px;
}

.team-modal-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
  min-width: 320px;
}

.team-modal-choice{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  text-align:left;
}

.team-modal-choice:hover{
  background: rgba(255,255,255,.1);
}

.team-modal-choice-color{
  width:14px;
  height:14px;
  border-radius:999px;
  flex:0 0 auto;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}

.team-modal-choice-name{
  flex:1;
  font-weight:800;
}

.team-modal-choice-score{
  font-weight:900;
  opacity:.9;
}

#wordSelectModal{
  z-index: 19;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

#wordSelectModal .word-select-card{
  width: min(72vw, 760px);
  max-height: 58vh;
  min-height: 280px;
  display:flex;
  flex-direction:column;
  gap:12px;
  pointer-events: auto;
}

.word-select-title{
  margin:0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  color:#ffffff;
}

.word-select-definition{
  flex:1;
  overflow:auto;
  padding: 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  color:#ffe873;
}

.word-select-actions{
  margin-top:0;
}

.word-select-actions .btn{
  flex:1;
}

#capitalesNote{
  display:block;
  margin: 10px auto 0;
  width: min(68vw, 520px);
  height: min(68vw, 520px);
  padding: 16px;
  overflow: auto;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  font-size: 34px;
  line-height: 1.2;
  font-weight: 900;
  color:#ffffff;
  text-align: left;
}

#capitalesModal .modal-card{
  width: min(92vw, 720px);
}

#capitalesFileName{
  display:block;
  margin-top:6px;
  font-size: 40px;
  line-height: 1.05;
  font-weight: 900;
  color:#ffffff;
}

.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

.btn.success{
  background: rgba(60,179,113,.35);
  border-color: rgba(60,179,113,.6);
}

.btn.danger{
  background: rgba(220,20,60,.35);
  border-color: rgba(220,20,60,.6);
}

.btn.ghost{
  background: transparent;
}

.kv{
  display:grid;
  grid-template-columns: 150px 1fr;
  gap:8px 10px;
  align-items:center;
}

.k{
  color:var(--muted);
  font-size:13px;
}

.v{
  font-weight:800;
}

.note{
  color:var(--muted);
  margin-top:12px;
  line-height:1.45;
}

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

/* Responsive régie */
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
}

/* ============================================================
   PLATEAU
   ============================================================ */
.plateau .plateau-root{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 22px;
}

.grid-wrap{
  display:flex;
  justify-content:center;
  padding-top:18px;
}

.grid{
  display:grid;
  gap: var(--gap);
  align-content:start;
}

/* Cellule générique */
.cell{
  width:var(--cell);
  height:var(--cell);
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;

  font-size: 30px;
  font-weight: 900;

  color: var(--ink);
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
  border: 2px solid rgba(0,0,0,.15);

  cursor:pointer;
  transition: transform .06s ease, filter .10s ease;
}

.cell:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}
.cell:active{
  transform: translateY(0px);
}

/* Case lettre (par défaut non révélée) */
.cell.letter{
  background: linear-gradient(180deg, var(--cellTop), var(--cellBottom));
}

.cell.magic{
  outline: 4px solid rgba(0,0,0,.95);
  outline-offset: -4px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 0 14px rgba(0,0,0,.45);
}

.cell.empty{
  visibility: hidden;
  pointer-events: none;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Case numéro (à gauche / au-dessus des mots) */
.cell.number{
  /* Base commune des cases numero (hors overrides par vue) */
  background: transparent;
  border: 2px solid rgba(255,255,255,.22);
  color: white;
  /* Taille/poids par defaut des numeros */
  font-size: 22px;
  font-weight: 950;
  box-shadow:none;
}

.cell.hidden-number{
  visibility: hidden;
  pointer-events: none;
  border: 2px solid transparent !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  opacity: 0;
}

/* Révélation lettre */
.cell.revealed{
  background: var(--revealed);
}

/* Griser (dimming) le reste de la grille quand un mot est sélectionné */
.cell.dim{
  background: linear-gradient(180deg, var(--dimTop), var(--dimBottom));
  color: var(--ink);
}

/* NOP : mauvaise réponse => les lettres non révélées du mot deviennent grises */
.cell.nop{
  background: linear-gradient(180deg, var(--nopTop), var(--nopBottom));
  color: var(--ink);
}

/* Orange : animation / highlight de validation */
.cell.orange{
  background: linear-gradient(180deg, var(--orangeTop), var(--orangeBottom));
  color: white;
}

/* Bandeau définition */
.definition{
  display:flex;
  justify-content:center;
  padding-bottom: 18px;
}

.definition.hidden{
  display:none;
}

body.plateau #definitionBar{
  display:none !important;
}

.definition-inner{
  width:min(1100px, 95vw);
  padding: 14px 18px;
  border-radius: 16px;

  background: linear-gradient(180deg, #ffffff, #d0d4e0);
  color: #0b2340;

  font-weight: 900;
  font-size: 22px;
  text-align:center;

  border: 2px solid rgba(255,255,255,.8);
  box-shadow: var(--shadow);
}


/* ============================================================
   EDITEUR
   ============================================================ */
.editor .topbar{
  padding:16px 20px 6px;
}

.editor-layout{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:16px;
  padding: 0 20px 20px;
}

.editor-panel{
  min-height: auto;
}

.editor .grid-wrap{
  padding-top: 8px;
}

.editor .cell.editor-cell{
  background: linear-gradient(180deg, #f7f9fc, #dfe7f2);
  color: #0b2340;
  border: 2px solid rgba(11,35,64,.18);
  font-size: 26px;
}

.editor .cell.editor-empty{
  background: linear-gradient(180deg, #f7f9fc, #edf2f7);
  color: transparent;
}

.editor .cell.has-letter{
  color: #0b2340;
}

.editor .cell.number{
  /* EDITEUR: police des numeros dans les cases */
  font-size: 30px;
  font-weight: 1000;
  letter-spacing: .01em;
}

.editor .cell.magic{
  background: linear-gradient(180deg, #e2c6ff, #b894ff);
  outline: 4px solid rgba(138,43,226,.92);
  outline-offset: -4px;
  box-shadow: inset 0 0 0 2px rgba(128,64,255,.78);
}

.editor .cell.selected{
  outline: 3px solid rgba(255,153,51,.9);
  outline-offset: -3px;
}

.editor .cell.in-word{
  background: linear-gradient(180deg, #fff3c6, #ffd787);
}

.editor .cell.in-selection{
  outline: 3px solid rgba(80,140,255,.8);
  outline-offset: -3px;
}

.editor .field{
  flex:1;
}

.editor .selection-block{
  margin: 14px 0;
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  border:0;
}

.multiplier-badge{
  position:fixed;
  top:16px;
  left:16px;
  padding:8px 12px;
  background:linear-gradient(135deg,#ff9f1c,#ff5f6d);
  color:#fff;
  font-weight:800;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  z-index:2500;
  pointer-events:none;
}

@media (max-width: 980px){
  .editor-layout{ grid-template-columns: 1fr; }
}
.regie-grid{
  display:grid;
  gap: var(--gap);
  align-content:start;
  width:100%;
  max-width:100%;
  overflow:auto;
  padding:8px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 12px;
}

.regie-grid .cell{
  width:48px;
  height:48px;
  font-size:20px;
}

.regie-grid .cell.number{
  /* REGIE: police des numeros dans la grille integree */
  font-size: 24px;
  font-weight: 1000;
  letter-spacing: .01em;
}

.regie-grid .cell.magic{
  outline: 4px solid rgba(138,43,226,.92);
  outline-offset: -4px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 0 14px rgba(138,43,226,.45);
}

.regie-grid .cell.selected-word{
  outline:2px solid #ff9933;
  outline-offset:-2px;
}

/* ---- Plateau: style ultra colore ---- */
body.plateau{
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  background: #0bd0e4;
}

#bg{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(320px 320px at 88% 86%, rgba(168,120,255,.75) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(260px 260px at 12% 18%, rgba(255,214,102,.7) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(240px 240px at 8% 72%, rgba(102,212,255,.7) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(300px 300px at 18% 40%, rgba(255,153,204,.65) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(260px 260px at 82% 12%, rgba(255,214,102,.7) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(280px 280px at 92% 30%, rgba(255,153,204,.7) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(300px 300px at 78% 62%, rgba(102,212,255,.7) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(220px 220px at 62% 88%, rgba(255,214,102,.65) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(260px 260px at 48% 14%, rgba(168,120,255,.65) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(280px 280px at 40% 78%, rgba(255,153,204,.65) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(220px 220px at 2% 10%, rgba(102,212,255,.65) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(260px 260px at 6% 30%, rgba(255,214,102,.65) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(240px 240px at 4% 55%, rgba(255,153,204,.65) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(260px 260px at 6% 82%, rgba(168,120,255,.65) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(240px 240px at 12% 94%, rgba(102,212,255,.65) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(220px 220px at 98% 8%, rgba(255,214,102,.65) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(260px 260px at 96% 22%, rgba(255,153,204,.65) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(240px 240px at 98% 44%, rgba(102,212,255,.65) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(260px 260px at 96% 70%, rgba(168,120,255,.65) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(240px 240px at 98% 90%, rgba(255,214,102,.65) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(200px 200px at 20% 4%, rgba(255,153,204,.6) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(220px 220px at 40% 3%, rgba(102,212,255,.6) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(200px 200px at 60% 4%, rgba(255,214,102,.6) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(220px 220px at 80% 3%, rgba(168,120,255,.6) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(200px 200px at 10% 98%, rgba(255,214,102,.6) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(220px 220px at 30% 97%, rgba(102,212,255,.6) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(200px 200px at 50% 98%, rgba(255,153,204,.6) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(220px 220px at 70% 97%, rgba(168,120,255,.6) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(200px 200px at 90% 98%, rgba(102,212,255,.6) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(180px 180px at 3% 40%, rgba(255,214,102,.55) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(180px 180px at 3% 65%, rgba(168,120,255,.55) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(180px 180px at 97% 36%, rgba(255,153,204,.55) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(180px 180px at 97% 58%, rgba(102,212,255,.55) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(180px 180px at 8% 6%, rgba(255,214,102,.55) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(180px 180px at 92% 6%, rgba(255,153,204,.55) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(180px 180px at 6% 96%, rgba(102,212,255,.55) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(180px 180px at 94% 96%, rgba(168,120,255,.55) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(200px 200px at 14% 12%, rgba(102,212,255,.55) 0 45%, rgba(255,255,255,0) 58%),
    radial-gradient(200px 200px at 86% 14%, rgba(255,214,102,.55) 0 45%, rgba(255,255,255,0) 58%),
    linear-gradient(160deg, #0bd0e4 0%, #3bd1ff 35%, #7dd6ff 70%, #8cdefe 100%);
}

#bg::before,
#bg::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}

#bg::before{
  background-image:
    radial-gradient(circle at 10% 110%, rgba(255,255,255,.55) 0 8px, transparent 10px),
    radial-gradient(circle at 20% 120%, rgba(255,255,255,.35) 0 5px, transparent 7px),
    radial-gradient(circle at 35% 105%, rgba(255,214,102,.45) 0 7px, transparent 9px),
    radial-gradient(circle at 50% 115%, rgba(255,153,204,.4) 0 10px, transparent 12px),
    radial-gradient(circle at 65% 108%, rgba(102,212,255,.45) 0 6px, transparent 8px),
    radial-gradient(circle at 80% 118%, rgba(255,255,255,.4) 0 9px, transparent 11px),
    radial-gradient(circle at 92% 112%, rgba(255,214,102,.35) 0 6px, transparent 8px);
  animation: bubblesUp 18s linear infinite;
  opacity:.85;
}

#bg::after{
  background-image:
    radial-gradient(circle at 12% 120%, rgba(255,255,255,.6) 0 10px, transparent 12px),
    radial-gradient(circle at 28% 115%, rgba(255,153,204,.55) 0 12px, transparent 14px),
    radial-gradient(circle at 42% 130%, rgba(255,214,102,.5) 0 8px, transparent 10px),
    radial-gradient(circle at 58% 125%, rgba(102,212,255,.55) 0 14px, transparent 16px),
    radial-gradient(circle at 74% 118%, rgba(255,255,255,.45) 0 9px, transparent 11px),
    radial-gradient(circle at 88% 128%, rgba(255,153,204,.45) 0 7px, transparent 9px);
  animation: bubblesUp 22s linear infinite, bubblesPop 6s ease-in-out infinite;
  opacity:.75;
}

#lettersLayer{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:auto;
}

#musicVisualizerOverlay.music-visualizer-overlay{
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  backdrop-filter: blur(8px) saturate(1.25);
  background: rgba(8, 20, 35, 0.22);
}

#musicVisualizerOverlay.music-visualizer-overlay.active{
  opacity: 1;
}

#musicVisualizerOverlay .music-visualizer-canvas{
  width: 100%;
  height: 100%;
  display: block;
  opacity: .95; /* Ajuster l'intensite du visualizer ici */
}

#ui{
  position:relative;
  z-index:auto;
}

body.plateau .floating-letters{
  position:fixed;
  inset:0;
  pointer-events:auto;
  z-index:1;
  overflow:hidden;
}

body.plateau .floating-letter{
  position:absolute;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
  animation: floatLetter ease-in-out infinite;
  cursor: grab;
  transition: left .25s ease, top .25s ease;
}

body.plateau .floating-letter.dragging{
  cursor: grabbing;
  animation: none;
}

body.plateau .draggable-letter{
  position:fixed;
  top:120px;
  left:40px;
  width:220px;
  cursor:grab;
  z-index:1;
  user-select:none;
  pointer-events:auto;
  animation: floatLetter 9s ease-in-out infinite;
  transition: left .25s ease, top .25s ease;
}

body.plateau .draggable-letter.dragging{
  cursor:grabbing;
  animation:none;
}

body.plateau .draggable-letter img{
  width:100%;
  height:auto;
  display:block;
  pointer-events:none;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.25));
}

@keyframes floatLetter{
  0%{ transform: translateY(0) rotate(-6deg); }
  50%{ transform: translateY(-18px) rotate(6deg); }
  100%{ transform: translateY(0) rotate(-6deg); }
}

@keyframes bubblesUp{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(-120vh); }
}

@keyframes bubblesPop{
  0%, 70%{ filter: blur(0); }
  78%{ opacity:.2; transform: translateY(-30vh) scale(1.15); }
  80%{ opacity:0; }
  100%{ opacity:.7; }
}

@keyframes bgFloat{
  0%{ transform: translate(0,0); }
  20%{ transform: translate(40px, -30px); }
  40%{ transform: translate(-35px, 25px); }
  60%{ transform: translate(30px, 20px); }
  80%{ transform: translate(-25px, -20px); }
  100%{ transform: translate(0,0); }
}

body.plateau .topbar .logo,
body.plateau .logo{
  font-size: 40px;
  font-weight: 900;
  letter-spacing: .5px;
  color: #ffe15a;
  text-shadow: 0 4px 0 rgba(0,0,0,.15), 0 8px 18px rgba(0,0,0,.25);
}

body.plateau .title-banner{
  display:flex;
  justify-content:center;
  margin: 8px 0 12px;
  position: relative;
  z-index: 2;
}

body.plateau .title-logo{
  max-width: 360px;
  width: 60vw;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  cursor: grab;
  user-select: none;
  z-index: 8;
  pointer-events: auto;
}

body.plateau .plateau-timer{
  position: fixed;
  top: 26px;
  right: 26px;
  padding: 10px 18px;
  font-size: 26px;
  font-weight: 900;
  color: #0b1f44;
  background: linear-gradient(135deg, #7fd7ff, #49c3ff);
  border: 3px solid rgba(255,255,255,.7);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  z-index: 5;
}

body.plateau .plateau-timer.hidden{
  display: none;
}

body.plateau #grid{
  background: rgba(255,255,255,.35);
  border: 4px solid #3cc9ff;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25), inset 0 0 0 4px rgba(255,255,255,.4);
  padding: 10px;
}

body.plateau .grid-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  flex:1;
  min-height: 0;
  overflow: hidden;
}

body.plateau .plateau-root{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height: 100vh;
  width: 100%;
  position:relative;
  z-index:2;
}

body.plateau .cell{
  border-radius: 10px;
  border: 2px solid #5fd0ff;
  background: linear-gradient(145deg, #f8fbff, #e9f7ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 4px rgba(0,0,0,.08);
  color: #0b1f44;
  font-weight: 800;
}

body.plateau .cell.letter:not(.revealed){
  background: linear-gradient(145deg, #ffffff, #eaf6ff);
}

body.plateau .cell.revealed{
  background: linear-gradient(145deg, #ffffff, #dff2ff);
  color: #0c2a62;
}

body.plateau .cell.number{
  background: linear-gradient(145deg, #8be6ff, #2cc6ef);
  color: #07385c;
  border-color: #35b8e4;
  /* PLATEAU: police des numeros visibles en jeu */
  font-size: 45px;
  font-weight: 1000;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

body.plateau .cell.magic{
  outline: 4px solid rgba(0,0,0,.95);
  outline-offset: -4px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 0 14px rgba(0,0,0,.45);
}

body.plateau .cell.dim{
  opacity: .28;
  filter: brightness(.45) saturate(.45) blur(1.1px);
  transform: scale(.97);
  transition: filter .15s ease, opacity .15s ease, transform .15s ease;
}

body.plateau .cell.selected-word{
  filter: brightness(1.28) saturate(1.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 2px rgba(255,255,255,.85),
    0 0 22px rgba(255,255,255,.55),
    0 8px 20px rgba(0,20,40,.3);
  transform: translateY(-1px) scale(1.05);
  z-index: 1;
  transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}

body.plateau .cell.nop{
  background: linear-gradient(145deg, #ffd1d6, #ff9aa7);
  border-color: #ff7486;
}

body.plateau .cell.orange{
  background: linear-gradient(145deg, #ffd36b, #ffb347);
  border-color: #ff9a2f;
  color: #6b2a00;
}

body.plateau .scores-overlay{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:24px;
  padding:120px 40px 40px;
  background: rgba(8,40,66,.35);
  backdrop-filter: blur(6px);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index: 3;
}

body.plateau .scores-overlay.active{
  opacity:1;
  pointer-events:auto;
}

body.regie #regieScoresModal{
  z-index: 24;
  background: rgba(8,40,66,.18);
  backdrop-filter: blur(4px);
}

body.regie .regie-scores-panel{
  position:relative;
  inset:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:24px;
  width: min(1100px, 92vw);
  max-height: 86vh;
  overflow:auto;
  padding:40px;
  background: rgba(8,40,66,.35);
  backdrop-filter: blur(6px);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,.3);
}

body.regie .regie-scores-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
}

body.regie .regie-scores-actions{
  display:flex;
  gap:10px;
}

body.regie .regie-scores-actions .btn.active{
  background: linear-gradient(135deg,#ffd85a,#ff9f43);
  color:#3f2300;
  border-color: transparent;
}

body.plateau .flag-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transition: opacity .2s ease;
  z-index:6;
}

body.plateau .flag-overlay.active{
  opacity:1;
}

body.plateau .flag-overlay.flag-mode,
body.plateau .flag-overlay.people-mode{
  backdrop-filter: blur(10px);
  background: rgba(6, 18, 34, 0.6); /* ~60% */
}

body.plateau .flag-image{
  max-width: 70vw;
  max-height: 70vh;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
  opacity: 1;
  transition: opacity .16s ease;
}

body.plateau .general-question-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index:6;
  background: rgba(6, 18, 34, 0.58);
  backdrop-filter: blur(10px);
}

body.plateau .general-question-overlay.active{
  opacity:1;
}

body.plateau .general-question-stage{
  width:min(1360px, 94vw);
  display:grid;
  gap:18px;
}

body.plateau .general-question-window{
  border-radius:22px;
  border:2px solid rgba(255,255,255,.25);
  background: linear-gradient(180deg, rgba(12,34,58,.95), rgba(7,24,43,.95));
  box-shadow: 0 24px 52px rgba(0,0,0,.38);
  padding:26px 28px;
}

body.plateau .general-question-window.hidden{
  display:none;
}

body.plateau .general-question-window.question-reveal-anim{
  animation: generalChoiceReveal .26s ease-out;
}

body.plateau .general-question-text{
  margin-top:0;
  font-size:48px;
  line-height:1.15;
  font-weight:900;
  color:#fffef0;
}

body.plateau .general-choices-stage{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
}

body.plateau .general-choices-stage.hidden{
  display:none;
}

body.plateau .general-question-choice-window{
  border-radius:18px;
  border: 2px solid rgba(255,255,255,.24);
  background: rgba(6, 24, 43, .72);
  box-shadow: 0 16px 30px rgba(0,0,0,.28);
  padding: 12px;
}

body.plateau .general-question-choice-window.hidden{
  display:none;
}

body.plateau .general-question-choice-window.choice-reveal-anim{
  animation: generalChoiceReveal .26s ease-out;
}

body.plateau .general-question-choice{
  min-height: 120px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(8, 30, 52, .55);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:32px;
  line-height:1.2;
  font-weight:900;
  color:#ffffff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

body.plateau .general-question-choice-window.answer-correct{
  border-color: rgba(60,179,113,.85);
  box-shadow: 0 16px 30px rgba(0,0,0,.28), 0 0 0 2px rgba(60,179,113,.45) inset;
}

body.plateau .general-question-choice.answer-correct{
  background: rgba(60,179,113,.28);
  color:#d4ffd4;
}

body.plateau .general-question-choice-window.answer-wrong{
  border-color: rgba(220,20,60,.85);
  box-shadow: 0 16px 30px rgba(0,0,0,.28), 0 0 0 2px rgba(220,20,60,.45) inset;
}

body.plateau .general-question-choice.answer-wrong{
  background: rgba(220,20,60,.26);
  color:#ffe4ea;
}

body.plateau .misfortune-wheel-overlay{
  position: fixed;
  inset: 0;
  z-index: 1510;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  background: radial-gradient(circle at top, rgba(24,48,72,.9), rgba(8,20,35,.96));
}

body.plateau .misfortune-wheel-overlay.active{
  display:flex;
}

body.plateau .plateau-wheel-stage{
  width: min(86vw, 760px);
}

body.plateau .plateau-wheel-stage canvas{
  width: min(86vw, 760px);
  max-width: 760px;
  max-height: 760px;
}

body.plateau .plateau-wheel-result{
  font-size: 40px;
  font-weight: 900;
  color:#ffffff;
  text-shadow: 0 10px 28px rgba(0,0,0,.4);
}

@media (max-width: 980px){
  body.plateau .general-choices-stage{
    grid-template-columns: 1fr;
  }
}

@keyframes generalChoiceReveal{
  from{
    opacity:0;
    transform: translateY(10px) scale(.98);
  }
  to{
    opacity:1;
    transform: translateY(0) scale(1);
  }
}

body.plateau .scores-title{
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 1px;
  color:#fff;
  padding: 14px 28px;
  border-radius: 22px;
  background: linear-gradient(135deg,#ff3ea5,#ff6f7a);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

body.regie .regie-scores-title{
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 1px;
  color:#fff;
  padding: 14px 28px;
  border-radius: 22px;
  background: linear-gradient(135deg,#ff3ea5,#ff6f7a);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

body.plateau .scores-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:18px;
  width: min(1100px, 92vw);
}

body.regie .regie-scores-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:18px;
  width: 100%;
}

body.plateau .score-card{
  border-radius:18px;
  padding:18px 16px;
  color:#fff;
  text-align:center;
  box-shadow: 0 10px 22px rgba(0,0,0,.2), inset 0 0 0 2px rgba(255,255,255,.25);
}

body.regie .regie-score-card{
  border-radius:18px;
  padding:18px 16px;
  color:#fff;
  text-align:center;
  box-shadow: 0 10px 22px rgba(0,0,0,.2), inset 0 0 0 2px rgba(255,255,255,.25);
}

body.plateau .score-name{
  font-size:18px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom:8px;
}

body.regie .regie-score-name{
  font-size:18px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom:8px;
}

body.plateau .score-points{
  font-size:36px;
  font-weight: 900;
}

body.regie .regie-score-points{
  font-size:36px;
  font-weight: 900;
}

body.plateau .podium-overlay{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:34px;
  padding:40px;
  background: radial-gradient(circle at top, rgba(27,58,90,.92), rgba(10,27,47,.98) 60%);
  opacity:0;
  pointer-events:none;
  transition: opacity .3s ease;
  z-index: 4;
}

body.plateau .podium-overlay.active{
  opacity:1;
  pointer-events:auto;
}

body.plateau .podium-confetti{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

body.plateau .podium-title-stage{
  text-align:center;
  color:#fff;
}

body.plateau .podium-kicker{
  margin:0 0 10px;
  font-size:24px;
  opacity:.9;
}

body.plateau .podium-title{
  margin:0;
  font-size:72px;
  line-height:1;
  color:#ffe96a;
}

body.plateau .podium-stage{
  width:min(980px, 90vw);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:24px;
  min-height: 420px;
}

body.plateau .podium-block{
  --podium-accent: #ffffff;
  width:180px;
  border-radius:22px 22px 10px 10px;
  padding:22px 18px;
  text-align:center;
  box-shadow:
    0 18px 30px rgba(0,0,0,.24),
    inset 0 0 0 2px rgba(255,255,255,.18);
  transform: translateY(0) scale(1);
  opacity:1;
}

body.plateau .podium-block.reveal{
  animation: plateauPodiumPop .7s ease forwards;
  transform: translateY(50px) scale(.9);
  opacity:0;
}

body.plateau .podium-block.first{
  min-height: 320px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, #ffe48d, #ffab2e);
  color:#5a2d00;
  box-shadow:
    0 18px 30px rgba(0,0,0,.24),
    inset 0 0 0 2px rgba(255,255,255,.22),
    0 0 0 4px var(--podium-accent, #ffd95e);
  animation-delay: .08s;
}

body.plateau .podium-block.second{
  min-height: 250px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, #d9ecff, #84c6ff);
  color:#0d3562;
}

body.plateau .podium-block.third{
  min-height: 210px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, #ffd0b2, #ff8b61);
  color:#5a1f00;
  animation-delay: .16s;
}

body.plateau .podium-block.empty{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
}

body.plateau .podium-rank{
  font-size:56px;
  font-weight:1000;
  line-height:1;
  margin-bottom:18px;
}

body.plateau .podium-name{
  font-size:28px;
  font-weight:900;
  text-transform: uppercase;
  line-height:1.05;
  margin-bottom:12px;
}

body.plateau .podium-points{
  font-size:26px;
  font-weight:800;
  opacity:.88;
}

body.plateau .films-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at center, rgba(255,140,0,.08), transparent 50%),
    #000;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition: opacity .28s ease;
  z-index: 5;
}

body.plateau .films-overlay.active{
  opacity:1;
  pointer-events:auto;
}

body.plateau .films-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.15;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.2) 0 1px, transparent 1px);
  background-size:140px 140px;
  animation: filmsGrain .4s steps(2) infinite;
}

body.plateau .films-top-bar,
body.plateau .films-bottom-bar{
  position:absolute;
  width:100%;
  height:18vh;
  background:#000;
}

body.plateau .films-top-bar{
  top:0;
}

body.plateau .films-bottom-bar{
  bottom:0;
}

body.plateau .films-band{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  height:42vh;
  min-height:240px;
  background:linear-gradient(90deg, #5c1e00, #a14f00 30%, #e07b00 60%, #d95f00);
  box-shadow:
    0 0 80px rgba(255,120,0,.3),
    inset 0 10px 40px rgba(255,255,255,.06),
    inset 0 -20px 40px rgba(0,0,0,.3);
}

body.plateau .films-reel{
  position:absolute;
  border-radius:50%;
  border:10px solid rgba(0,0,0,.35);
  background:
    radial-gradient(circle, rgba(0,0,0,.3) 0 15%, transparent 15%),
    radial-gradient(circle at 80% 50%, rgba(0,0,0,.3) 0 6%, transparent 6%),
    radial-gradient(circle at 20% 50%, rgba(0,0,0,.3) 0 6%, transparent 6%),
    radial-gradient(circle at 50% 80%, rgba(0,0,0,.3) 0 6%, transparent 6%),
    radial-gradient(circle at 50% 20%, rgba(0,0,0,.3) 0 6%, transparent 6%);
  opacity:.32;
  filter:blur(2px);
}

body.plateau .films-reel.left{
  width:260px;
  height:260px;
  left:60px;
  top:50%;
  transform:translateY(-50%);
  animation: filmsSpin 12s linear infinite;
}

body.plateau .films-reel.right{
  width:340px;
  height:340px;
  right:60px;
  top:50%;
  transform:translateY(-50%);
  animation: filmsSpinReverse 16s linear infinite;
}

body.plateau .films-strip{
  position:absolute;
  bottom:20px;
  width:100%;
  height:30px;
  background:
    linear-gradient(180deg,#ffe6a8,#ffc66a),
    repeating-linear-gradient(90deg, transparent 0 50px, rgba(0,0,0,.3) 50px 60px);
  opacity:.4;
}

body.plateau .films-title{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size:clamp(70px, 12vw, 180px);
  color:#000;
  letter-spacing:.05em;
  text-shadow:
    6px 6px 0 rgba(255,255,255,.8),
    0 0 25px rgba(255,255,255,.2);
  animation:
    filmsIntro .9s ease-out forwards,
    filmsBreathe 3.5s ease-in-out 1s infinite;
}

body.plateau .films-emoji{
  font-size:1em;
  padding:0;
  border-radius:0;
  letter-spacing:0;
  color:inherit;
  background: transparent;
  text-shadow:
    6px 6px 0 rgba(255,255,255,.8),
    0 0 25px rgba(255,255,255,.2);
  transform: translateY(-8%);
}

body.plateau .films-flash{
  position:absolute;
  inset:0;
  background:radial-gradient(circle, rgba(255,255,255,.6), transparent 40%);
  opacity:0;
  animation: filmsFlash .6s ease-out;
}

body.plateau .films-vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(circle, transparent 60%, rgba(0,0,0,.4));
}

@keyframes plateauPodiumPop{
  0%{
    transform: translateY(56px) scale(.88);
    opacity:0;
  }
  60%{
    transform: translateY(-8px) scale(1.02);
    opacity:1;
  }
  100%{
    transform: translateY(0) scale(1);
    opacity:1;
  }
}

@keyframes filmsIntro{
  0%{
    transform:scale(.6);
    opacity:0;
    filter:blur(6px);
  }
  60%{
    transform:scale(1.05);
    opacity:1;
    filter:blur(0);
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}

@keyframes filmsBreathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.03); }
}

@keyframes filmsFlash{
  0%{ opacity:1; }
  100%{ opacity:0; }
}

@keyframes filmsSpin{
  from{ transform:translateY(-50%) rotate(0); }
  to{ transform:translateY(-50%) rotate(360deg); }
}

@keyframes filmsSpinReverse{
  from{ transform:translateY(-50%) rotate(360deg); }
  to{ transform:translateY(-50%) rotate(0); }
}

@keyframes filmsGrain{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(2px,-2px); }
  100%{ transform:translate(0,0); }
}



#bg .bg-bubbles{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.bg-bubble{
  position:absolute;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.2) 45%, rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  opacity: .85;
  filter: blur(1px);
  animation: bubbleFloat var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes bubbleFloat{
  0%{ transform: translate(0,0); opacity: .75; }
  50%{ transform: translate(var(--dx), var(--dy)); opacity: 1; }
  100%{ transform: translate(0,0); opacity: .8; }
}