/* ===========================================================
   LA ROUE COQUINE — néons de casino
   =========================================================== */
body.roue-jeu {
  --theme: #ff2e88;
  --theme-2: #ff7ab8;
  --neon-rose: #ff2e88;
  --neon-bleu: #2ee6ff;
  --neon-or: #ffd23f;
  --panneau: rgba(18, 6, 34, 0.88);
  background: #0b0418;
}
.neon-fond {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 400px at 15% 10%, rgba(255, 46, 136, 0.25), transparent 60%),
    radial-gradient(600px 400px at 85% 90%, rgba(46, 230, 255, 0.18), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 40px),
    #0b0418;
}

/* Enseigne néon */
.enseigne { display: flex; flex-direction: column; align-items: center; margin: 10px 0 6px; line-height: 1; }
.enseigne span { font-family: 'Monoton', cursive; font-weight: 400; font-size: clamp(1.8rem, 9vw, 2.6rem); color: #fff; text-shadow: 0 0 6px #fff, 0 0 14px var(--neon-bleu), 0 0 30px var(--neon-bleu); animation: neon-panne 6s infinite; }
.enseigne b { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: clamp(3rem, 15vw, 4.4rem); color: #ffe6f2; text-shadow: 0 0 6px #fff, 0 0 16px var(--neon-rose), 0 0 34px var(--neon-rose), 0 0 60px var(--neon-rose); }
.enseigne.petite span { font-size: 1.8rem; }
.enseigne.petite b { font-size: 3rem; }
@keyframes neon-panne { 0%, 19%, 21%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: 0.35; } }

/* ---------- Jeu ---------- */
.jeu-roue { gap: 8px; }
.chrono-partie { font-family: 'Monoton', cursive; font-size: 1.6rem; color: var(--neon-or); text-shadow: 0 0 10px var(--neon-or); font-variant-numeric: tabular-nums; }
.chrono-partie.urgent { color: var(--neon-rose); text-shadow: 0 0 12px var(--neon-rose); animation: battement 0.6s ease infinite; }
@keyframes battement { 50% { transform: scale(1.12); } }
.joueurs-roue { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none; }
.jr { --c: var(--p0); display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 4px 10px 4px 4px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.35); transition: all 0.3s; min-width: 0; }
.jr.p1 { --c: var(--p1); }
.jr .perso { grid-row: 1 / 3; width: clamp(38px, 7.5dvh, 54px); aspect-ratio: 100 / 130; }
.jr .nom { font-size: 0.8rem; font-weight: 700; color: var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr .pts { grid-row: 1 / 3; grid-column: 3; font-family: 'Monoton', cursive; font-weight: 400; font-size: 1.6rem; color: var(--c); text-shadow: 0 0 10px var(--c); }
.jr .jokers { font-size: 0.7rem; color: var(--muted); }
.jr.actif { border-color: var(--c); box-shadow: 0 0 20px -4px var(--c), inset 0 0 20px -10px var(--c); }

.roue-zone { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.roue-svg { width: min(88vw, 44dvh, 380px); height: auto; filter: drop-shadow(0 0 18px rgba(255, 46, 136, 0.55)) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.7)); }
.roue-svg .tournante { transition: transform 4.2s cubic-bezier(.12, .75, .12, 1); transform-origin: 0 0; }
.roue-svg text { font: 800 7.6px 'Inter', sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, 0.45); stroke-width: 2.2px; letter-spacing: 0.03em; }
.roue-svg .emoji { font-size: 13px; stroke: none; }
.roue-svg .ampoule { fill: #fff3b0; animation: clignote 0.6s steps(2) infinite; }
.roue-svg .ampoule.b { animation-delay: 0.3s; }
@keyframes clignote { 50% { fill: #5a4a10; } }
.fleche { position: absolute; top: calc(50% - min(44vw, 22dvh, 190px) - 10px); left: 50%; transform: translateX(-50%); width: 30px; height: 36px; z-index: 2; background: linear-gradient(180deg, #fff, var(--neon-or)); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 0 8px var(--neon-or)); }
.fleche.tic { animation: tic 0.1s ease; }
@keyframes tic { 50% { transform: translateX(-50%) rotate(-20deg); } }
.moyeu {
  position: absolute;
  width: clamp(50px, 9dvh, 70px);
  height: clamp(50px, 9dvh, 70px);
  border-radius: 50%;
  border: 3px solid #fff;
  background: radial-gradient(circle at 35% 30%, #ff7ab8, #c4005c);
  color: #fff;
  font-family: 'Monoton', cursive;
  font-size: clamp(1rem, 2.6dvh, 1.4rem);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(255, 46, 136, 0.35), 0 0 30px var(--neon-rose);
  animation: appel 1.4s ease-in-out infinite;
}
.moyeu:disabled { animation: none; opacity: 0.85; cursor: default; }
@keyframes appel { 50% { box-shadow: 0 0 0 10px rgba(255, 46, 136, 0.15), 0 0 40px var(--neon-rose); } }
.tour-de { margin: 0; text-align: center; font-weight: 700; font-size: 1rem; color: #ffd9ea; flex: none; text-shadow: 0 0 10px rgba(255, 46, 136, 0.6); }

/* Carte tirée */
.carte-roue {
  --c: var(--neon-rose);
  position: absolute;
  left: 14px; right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px 14px;
  border-radius: 22px;
  text-align: center;
  background: rgba(18, 6, 34, 0.96);
  border: 2px solid var(--c);
  box-shadow: 0 0 30px -4px var(--c), inset 0 0 30px -14px var(--c);
  animation: surgit 0.45s cubic-bezier(.2, 1.4, .4, 1);
}
.carte-roue[hidden] { display: none !important; }
@keyframes surgit { from { transform: translateY(40px) scale(0.9); opacity: 0; } }
.cr-cat { align-self: center; font-family: 'Monoton', cursive; font-size: 1.15rem; color: var(--c); text-shadow: 0 0 10px var(--c); }
.cr-texte { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.2rem, 5.6vw, 1.55rem); line-height: 1.25; overflow-wrap: anywhere; }
.cr-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.cr-actions .btn.primary { background: linear-gradient(135deg, #ff2e88, #c4005c); box-shadow: 0 0 20px rgba(255, 46, 136, 0.5); }

/* ---------- Fin ---------- */
.fin-persos { display: flex; justify-content: center; gap: 10px; height: clamp(110px, 22dvh, 170px); }
.fin-persos .perso { height: 100%; aspect-ratio: 100 / 130; }
.f-score { margin: 0; font-family: 'Monoton', cursive; font-size: 1.6rem; color: var(--neon-or); text-shadow: 0 0 12px var(--neon-or); }
.gage-final { width: 100%; max-width: 380px; padding: 14px; border-radius: 18px; text-align: center; border: 2px solid var(--neon-rose); box-shadow: 0 0 24px -4px var(--neon-rose); background: rgba(18, 6, 34, 0.9); }
.gage-final span { font-family: 'Monoton', cursive; color: var(--neon-rose); }
.gage-final p { margin: 8px 0 0; font-family: var(--serif); font-weight: 700; font-size: 1.3rem; line-height: 1.25; }

@media (prefers-reduced-motion: reduce) {
  .enseigne span, .moyeu { animation: none; }
}