:root {
  --bleu: #1728d6;
  --bleu-clair: #3548ff;
  --bleu-fonce: #0a1274;
  --bleu-nuit: #04061a;
  --panneau: #0b1042;
  --or: #d6a419;
  --or-clair: #ffd766;
  --or-fonce: #96690a;
  --blanc: #f5f6ff;
  --vert: #1f9d55;
  --vert-clair: #3fd67f;
  --rouge: #c02b2b;
  --rouge-clair: #ff8f8f;
  --gris: #2a2f52;
  --gris-clair: #454b7d;
  --ombre: 0 1.2rem 2.6rem -1rem rgba(0, 0, 4, .65);
  --police-titre: 'Anton', 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --police-corps: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html {
  scrollbar-color: var(--or) var(--bleu-nuit);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: .6rem; height: .6rem; }
::-webkit-scrollbar-track { background: var(--bleu-nuit); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--or-clair), var(--or-fonce));
  border-radius: .6rem;
  border: 2px solid var(--bleu-nuit);
}
::selection { background: var(--or); color: #1a1200; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bleu-nuit);
  background-image:
    radial-gradient(58vw 58vw at 18% -10%, rgba(255, 215, 102, .12), transparent 60%),
    radial-gradient(55vw 55vw at 90% 8%, rgba(23, 40, 214, .35), transparent 62%),
    radial-gradient(70vw 45vw at 50% 115%, rgba(10, 18, 116, .8), transparent 65%);
  color: var(--blanc);
  font-family: var(--police-corps);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--police-titre); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .5rem; }
h1 {
  color: var(--or-clair);
  font-size: clamp(1.8rem, 6vw, 3rem);
  text-shadow: 0 0 .1em rgba(255, 215, 102, .35), 0 .1em .2em rgba(0, 0, 0, .6);
}
h2 { color: var(--or-clair); font-size: clamp(1.2rem, 3.6vw, 1.7rem); }
h3 { color: #c7cbf5; font-size: 1rem; }

/* Guirlande lumineuse façon enseigne de music-hall, encadrant les grands
   titres d'écran (accueil, connexions) sans perturber les barres d'outils
   compactes où h1 est en ligne avec des boutons. */
.centre h1 { position: relative; padding: .9rem 0; }
.centre h1::before, .centre h1::after {
  content: '';
  display: block;
  height: 5px;
  width: min(240px, 70vw);
  margin: .5rem auto;
  background-image: repeating-radial-gradient(circle at 5px 2.5px, var(--or-clair) 0 2px, transparent 2.6px 22px);
  background-size: 26px 5px;
  opacity: .8;
  animation: chenillard 1.1s linear infinite;
}
@keyframes chenillard { to { background-position: 26px 0; } }

.wrap { max-width: 1100px; margin: 0 auto; padding: 1rem; position: relative; }
/* :not([hidden]) est indispensable : sans ça, cette règle (auteur) l'emporte
   sur le display:none du navigateur pour [hidden] (règle UA), et l'élément
   reste visible même une fois "hidden" mis à true en JS. */
.centre:not([hidden]) { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 1rem; text-align: center; padding: 1.5rem 1rem; }

/* Barre d'outils principale : fixée en haut, façon bandeau régie. */
.wrap > .barre:first-child {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: -1rem -1rem 1.1rem;
  padding: .8rem 1rem;
  background: linear-gradient(180deg, rgba(9, 13, 51, .96), rgba(9, 13, 51, .88));
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--or-fonce);
  box-shadow: 0 .6rem 1.4rem -.8rem rgba(0, 0, 0, .7);
}

button {
  font: inherit;
  font-weight: 700;
  font-family: var(--police-corps);
  border: none;
  border-radius: .6rem;
  padding: .7rem 1.15rem;
  background: linear-gradient(180deg, var(--bleu-clair), var(--bleu) 70%);
  color: var(--blanc);
  cursor: pointer;
  box-shadow: 0 .22rem 0 var(--bleu-fonce), 0 .5rem .9rem -.3rem rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .08s ease, filter .15s ease, box-shadow .08s ease;
}
button:hover:not(:disabled) { filter: brightness(1.14); }
button:active:not(:disabled) { transform: translateY(.16rem); box-shadow: 0 .06rem 0 var(--bleu-fonce), 0 .2rem .4rem rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .18); }
button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
button:focus-visible { outline: 3px solid var(--or-clair); outline-offset: 2px; }

button.or { background: linear-gradient(180deg, var(--or-clair), var(--or) 70%); color: #241900; box-shadow: 0 .22rem 0 var(--or-fonce), 0 .5rem .9rem -.3rem rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .5); }
button.or:active:not(:disabled) { box-shadow: 0 .06rem 0 var(--or-fonce), 0 .2rem .4rem rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5); }
button.vert { background: linear-gradient(180deg, var(--vert-clair), var(--vert) 70%); box-shadow: 0 .22rem 0 #0e5a2f, 0 .5rem .9rem -.3rem rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
button.vert:active:not(:disabled) { box-shadow: 0 .06rem 0 #0e5a2f, 0 .2rem .4rem rgba(0, 0, 0, .5); }
button.rouge { background: linear-gradient(180deg, #e05a5a, var(--rouge) 70%); box-shadow: 0 .22rem 0 #6d1414, 0 .5rem .9rem -.3rem rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
button.rouge:active:not(:disabled) { box-shadow: 0 .06rem 0 #6d1414, 0 .2rem .4rem rgba(0, 0, 0, .5); }
button.gris { background: linear-gradient(180deg, var(--gris-clair), var(--gris) 70%); box-shadow: 0 .22rem 0 #171a33, 0 .5rem .9rem -.3rem rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12); }
button.gris:active:not(:disabled) { box-shadow: 0 .06rem 0 #171a33, 0 .2rem .4rem rgba(0, 0, 0, .5); }

input, select, textarea {
  font: inherit;
  padding: .65rem .8rem;
  border-radius: .5rem;
  border: 2px solid var(--gris);
  background: #080c28;
  color: var(--blanc);
  width: 100%;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #565c8c; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--or);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4), 0 0 0 3px rgba(214, 164, 25, .3);
}
label { display: block; text-align: left; font-size: .8rem; color: #9aa0d0; margin: .7rem 0 .3rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

.carte {
  background: linear-gradient(160deg, var(--panneau), #060a30 85%);
  border: 1px solid var(--gris);
  border-top: 3px solid var(--or);
  border-radius: 1rem;
  padding: 1.4rem;
  width: min(420px, 92vw);
  box-shadow: var(--ombre), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.erreur { color: var(--rouge-clair); min-height: 1.3em; font-size: .9rem; }

/* --- Plateau --- */
.plateau {
  display: grid;
  gap: .4rem;
  grid-auto-flow: column;
  grid-auto-columns: minmax(84px, 1fr);
  overflow-x: auto;
  padding-bottom: .4rem;
  scroll-snap-type: x proximity;
  animation: apparait .3s ease-out;
}
.colonne { display: grid; gap: .4rem; grid-template-rows: auto; scroll-snap-align: start; }
.cat {
  background: linear-gradient(155deg, var(--bleu-fonce), #060a3e 80%);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-weight: 400;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: .55rem .3rem;
  min-height: 3.6rem;
  border-radius: .45rem;
  border-bottom: 2px solid var(--or-fonce);
  font-size: clamp(.6rem, 1.6vw, .95rem);
  line-height: 1.15;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.case {
  position: relative;
  background: radial-gradient(120% 140% at 30% 18%, var(--bleu-clair), var(--bleu) 55%, var(--bleu-fonce) 100%);
  color: var(--or-clair);
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(1rem, 3.2vw, 2rem);
  display: flex; align-items: center; justify-content: center;
  min-height: 3.1rem;
  border-radius: .45rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .5);
  box-shadow: 0 .18rem 0 var(--bleu-fonce), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.case.libre { cursor: pointer; }
.case.libre:hover { filter: brightness(1.16); transform: translateY(-.14rem); box-shadow: 0 .32rem 0 var(--bleu-fonce), 0 .5rem .8rem -.3rem rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 215, 102, .5), inset 0 1px 0 rgba(255, 255, 255, .25); }
.case.libre:active { transform: translateY(.05rem); box-shadow: 0 .05rem 0 var(--bleu-fonce), inset 0 1px 0 rgba(255, 255, 255, .25); }
.case.used {
  background: repeating-linear-gradient(135deg, #0a0e33 0 10px, #070a26 10px 20px);
  color: transparent;
  cursor: default;
  box-shadow: inset 0 .25rem .5rem rgba(0, 0, 0, .55);
}

/* --- Question plein écran --- */
.scene {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
  min-height: 60vh; text-align: center;
  background: radial-gradient(120% 160% at 50% -10%, var(--bleu-clair), var(--bleu) 45%, var(--bleu-fonce) 100%);
  border-radius: 1.1rem;
  padding: 2rem 1.5rem;
  box-shadow: var(--ombre), inset 0 1px 0 rgba(255, 255, 255, .12);
  animation: apparait .4s ease-out;
}
.scene .valeur {
  font-family: var(--police-titre); color: #1a1200; background: var(--or-clair);
  padding: .3rem 1rem; border-radius: 2rem; font-size: 1.1rem; letter-spacing: .04em;
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .3);
}
.scene .texte { font-size: clamp(1.1rem, 3.4vw, 2rem); font-weight: 700; line-height: 1.35; max-width: 34ch; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.scene .reponse { color: var(--or-clair); font-size: clamp(1.2rem, 3.6vw, 2.2rem); font-weight: 800; text-shadow: 0 0 .3em rgba(255, 215, 102, .4); animation: apparait .35s ease-out; }

@keyframes apparait { from { opacity: 0; transform: translateY(.5rem) scale(.98); } to { opacity: 1; transform: none; } }

/* --- Buzzer --- */
.buzzer {
  width: min(70vw, 15rem); height: min(70vw, 15rem);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 26%, #ff8f8f, var(--rouge) 55%, #5a0a0a 100%);
  color: #fff;
  font-family: var(--police-titre); font-weight: 400; font-size: 2rem; letter-spacing: .04em;
  box-shadow:
    0 .7rem 0 #5a0a0a,
    0 1.2rem 1.8rem rgba(0, 0, 0, .55),
    0 0 0 .5rem rgba(255, 255, 255, .04),
    0 0 0 .55rem var(--gris),
    inset 0 .3rem .6rem rgba(255, 255, 255, .25);
  border: none;
}
.buzzer:active:not(:disabled) { transform: translateY(.45rem); box-shadow: 0 .25rem 0 #5a0a0a, 0 .5rem 1rem rgba(0, 0, 0, .5), 0 0 0 .5rem rgba(255, 255, 255, .04), 0 0 0 .55rem var(--gris); }
.buzzer:disabled { background: radial-gradient(circle at 35% 26%, #565c8c, #3a3f60 60%); box-shadow: 0 .7rem 0 #23263c, 0 0 0 .5rem rgba(255, 255, 255, .03), 0 0 0 .55rem var(--gris); opacity: 1; color: #9aa0d0; }
.buzzer.arme { animation: pulse 1.1s infinite; }
@keyframes pulse {
  0%, 100% { filter: brightness(1); box-shadow: 0 .7rem 0 #5a0a0a, 0 1.2rem 1.8rem rgba(0, 0, 0, .55), 0 0 0 .5rem rgba(255, 255, 255, .04), 0 0 0 .55rem var(--gris), inset 0 .3rem .6rem rgba(255, 255, 255, .25); }
  50% { filter: brightness(1.3); box-shadow: 0 .7rem 0 #5a0a0a, 0 1.2rem 2.2rem rgba(255, 60, 60, .45), 0 0 0 .5rem rgba(255, 255, 255, .08), 0 0 0 .55rem var(--or), inset 0 .3rem .6rem rgba(255, 255, 255, .3); }
}

/* --- Scores --- */
.scores { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-top: 1rem; }
.joueur {
  position: relative;
  background: linear-gradient(160deg, var(--bleu-fonce), #060a30 85%);
  border: 2px solid var(--gris);
  border-radius: .7rem;
  padding: .55rem .9rem;
  min-width: 6.2rem;
  text-align: center;
  box-shadow: 0 .3rem .7rem -.3rem rgba(0, 0, 0, .55);
  transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
/* Pastille de rang : ordre de buzz sur la question en cours. */
.joueur .rang {
  position: absolute;
  top: -.55rem;
  left: -.55rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--or-clair), var(--or) 70%);
  color: #241900;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 .15rem .4rem rgba(0, 0, 0, .5), 0 0 0 2px var(--bleu-nuit);
  animation: apparait .2s ease-out;
}
.joueur.picker { border-color: var(--or); box-shadow: 0 0 0 1px var(--or), 0 0 .9rem rgba(214, 164, 25, .5); }
.joueur.actif { border-color: var(--vert-clair); box-shadow: 0 0 0 1px var(--vert-clair), 0 0 .9rem rgba(63, 214, 127, .55); }
.joueur.hs { opacity: .4; filter: grayscale(.6); }
.joueur .nom { font-weight: 700; font-size: .88rem; color: #d6d9ff; }
.joueur .pts { font-family: var(--police-titre); font-weight: 400; font-size: 1.35rem; color: var(--or-clair); }
.joueur .pts.neg { color: var(--rouge-clair); }

.file { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-direction: column; gap: .3rem; max-width: 26rem; }
.file li {
  background: var(--gris);
  border-radius: .5rem;
  padding: .45rem .8rem;
  display: flex; justify-content: space-between; align-items: center;
  border-left: 4px solid transparent;
}
.file li:first-child { background: linear-gradient(90deg, rgba(63, 214, 127, .22), var(--gris) 55%); border-left-color: var(--vert-clair); font-weight: 700; }

.barre { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin-bottom: 1rem; }
.code { font-family: var(--police-titre); font-weight: 400; font-size: clamp(1.4rem, 6vw, 2.4rem); color: var(--or-clair); letter-spacing: .3em; text-shadow: 0 0 .3em rgba(255, 215, 102, .35); }
.pastille { background: var(--gris); border: 1px solid var(--gris-clair); border-radius: 2rem; padding: .3rem .9rem; font-size: .8rem; }
.muted { color: #8a90b8; font-size: .85rem; }

/* --- Popup de tirage au sort --- */
.tirage-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(2, 4, 16, .8);
  backdrop-filter: blur(4px);
  animation: apparait .25s ease-out;
}
.tirage-carte {
  background: linear-gradient(160deg, var(--panneau), #060a30 85%);
  border: 2px solid var(--or);
  border-radius: 1.2rem;
  padding: 2rem 2.6rem;
  text-align: center;
  min-width: min(22rem, 88vw);
  box-shadow: var(--ombre), 0 0 3rem rgba(214, 164, 25, .35);
}
.tirage-label { font-family: var(--police-titre); font-weight: 400; color: #c7cbf5; letter-spacing: .08em; font-size: 1rem; text-transform: uppercase; margin-bottom: .7rem; }
.tirage-nom { font-family: var(--police-titre); font-weight: 400; font-size: clamp(1.8rem, 7vw, 3rem); color: var(--or-clair); text-shadow: 0 0 .3em rgba(255, 215, 102, .4); }
.tirage-sous { margin-top: .6rem; color: #9aa0d0; font-size: .95rem; }
.tirage-overlay.gagne .tirage-carte { animation: tirageGagne .5s ease; border-color: var(--or-clair); box-shadow: var(--ombre), 0 0 4.5rem rgba(255, 215, 102, .5); }
@keyframes tirageGagne { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}