/* Jeu de hasard — écran de TV (1920x1080 conseillé, tailles en vh) */
:root { --rose:#ff3cac; --cyan:#2bd2ff; --jaune:#ffe14d; --violet:#784ba0; --nuit:#0d0221; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--nuit); color: #fff;
  font-family: "Impact", "Arial Black", "DejaVu Sans", sans-serif; text-align: center;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }

/* ---------- Fond disco ---------- */
.fond { position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, #3b0a6b 0%, #14033a 55%, #05010f 100%); }
.faisceaux { position: absolute; left: 50%; top: 18vh; width: 150vw; height: 150vw; margin: -75vw 0 0 -75vw; will-change: transform; }
.f1 { background: repeating-conic-gradient(from 0deg, rgba(255,60,172,0) 0deg, rgba(255,60,172,.38) 5deg, rgba(255,60,172,0) 10deg, rgba(0,0,0,0) 60deg);
  animation: tourne 18s linear infinite; }
.f2 { background: repeating-conic-gradient(from 20deg, rgba(43,210,255,0) 0deg, rgba(43,210,255,.34) 4deg, rgba(43,210,255,0) 8deg, rgba(0,0,0,0) 72deg);
  animation: tourne 26s linear infinite reverse; }
@keyframes tourne { to { transform: rotate(360deg); } }
body[data-ecran="resultat"] .f1 { animation-duration: 6s; }
body[data-ecran="resultat"] .f2 { animation-duration: 9s; }
body[data-issue="perdu"] .faisceaux { opacity: .3; }

.sol { position: absolute; left: -60%; width: 220%; bottom: 8vh; height: 60vh; transform-origin: 50% 100%;
  transform: perspective(50vh) rotateX(70deg);
  background-image: linear-gradient(rgba(43,210,255,.7) 2px, transparent 2px), linear-gradient(90deg, rgba(255,60,172,.7) 2px, transparent 2px);
  background-size: 8vh 8vh; animation: avance 2s linear infinite;
  -webkit-mask-image: linear-gradient(to top, #000 25%, transparent); mask-image: linear-gradient(to top, #000 25%, transparent); }
@keyframes avance { to { background-position: 0 8vh, 0 0; } }

.etoile { position: absolute; width: var(--t); height: var(--t); background: #fff; opacity: 0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: scint var(--d) ease-in-out infinite; animation-delay: var(--w); }
@keyframes scint { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1); } }

/* ---------- Boule disco ---------- */
.boule-wrap { position: fixed; left: 50%; top: 0; transform: translateX(-50%); z-index: 5; pointer-events: none; }
.boule { display: block; height: 34vh; width: 34vh; transform-origin: 50% 0; transition: height .6s, width .6s;
  animation: balance 4s ease-in-out infinite alternate; filter: drop-shadow(0 0 2vh rgba(255,255,255,.5)); }
body:not([data-ecran="accueil"]) .boule { height: 16vh; width: 16vh; }
@keyframes balance { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

/* ---------- Écrans ---------- */
main { position: fixed; inset: 0 0 9vh 0; z-index: 10; }
.ecran { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  opacity: 0; pointer-events: none; transition: opacity .4s; }
.ecran.actif { opacity: 1; pointer-events: auto; }

.neon-h2 { font-size: 7vh; letter-spacing: .06em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 1vh #fff, 0 0 3vh var(--cyan), 0 0 6vh var(--cyan); }

/* Accueil */
#accueil { padding-top: 31vh; }
.titre .l1 { display: block; font-size: 13vh; line-height: 1; letter-spacing: .08em; color: #fff;
  text-shadow: 0 0 1vh #fff, 0 0 3vh var(--rose), 0 0 6vh var(--rose), 0 0 10vh var(--rose); animation: neon 3.4s infinite; }
.titre .l2 { display: block; font-size: 17vh; line-height: 1.05; letter-spacing: .05em; color: #fff;
  text-shadow: 0 0 1vh #fff, 0 0 3vh var(--cyan), 0 0 6vh var(--cyan), 0 0 10vh var(--cyan); animation: neon 4.1s infinite; }
@keyframes neon { 0%,19%,21%,23%,25%,54%,56%,100% { opacity: 1; } 20%,24%,55% { opacity: .55; } }
.invite { margin-top: 4.5vh; font-size: 5.2vh; letter-spacing: .08em; text-transform: uppercase; color: var(--jaune);
  text-shadow: 0 0 2vh var(--jaune); animation: clignote 1.1s ease-in-out infinite alternate; }
.invite.fini { animation: none; color: #fff; text-shadow: 0 0 2vh var(--rose); }
@keyframes clignote { from { opacity: .35; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }

/* Choix */
#choix { padding-top: 15vh; }
#grille { margin-top: 3vh; display: grid; grid-template-columns: repeat(3, 28vh); grid-auto-rows: 28vh; gap: 3vh; }
.carte { border: 0; background: none; padding: 0; border-radius: 4vh; cursor: pointer;
  animation: entree .5s cubic-bezier(.2,1.5,.4,1) backwards; animation-delay: calc(var(--i) * .09s); transition: transform .12s; }
.carte img { width: 100%; height: 100%; display: block; border-radius: 4vh;
  box-shadow: 0 0 0 .7vh rgba(255,255,255,.95), 0 0 3vh var(--rose), 0 0 7vh rgba(255,60,172,.6);
  animation: flotte 2.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.45s); }
.carte:nth-child(3n+2) img { box-shadow: 0 0 0 .7vh rgba(255,255,255,.95), 0 0 3vh var(--cyan), 0 0 7vh rgba(43,210,255,.6); }
.carte:nth-child(3n) img { box-shadow: 0 0 0 .7vh rgba(255,255,255,.95), 0 0 3vh var(--jaune), 0 0 7vh rgba(255,225,77,.55); }
.carte:active { transform: scale(.93); }
@keyframes entree { from { transform: scale(.2) rotate(-12deg); opacity: 0; } }
@keyframes flotte { from { transform: translateY(-.8vh); } to { transform: translateY(.8vh); } }

/* Tirage */
#tirage { justify-content: center; perspective: 100vh; padding-top: 8vh; }
#tirage-img { width: 36vh; height: 36vh; border-radius: 5vh; animation: flip 1s linear infinite;
  filter: drop-shadow(0 0 3vh var(--cyan)); }
@keyframes flip { to { transform: rotateY(360deg); } }
#tirage .neon-h2 { margin-top: 5vh; }
.points::after { content: "..."; display: inline-block; width: 1.6em; text-align: left; animation: points 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes points { from { width: 0; } to { width: 1.6em; } }

/* Résultat */
#resultat { justify-content: center; padding-top: 7vh; font-family: "Segoe UI", "DejaVu Sans", sans-serif; }
.verdict { font-family: "Impact", "Arial Black", "DejaVu Sans", sans-serif; font-size: 15vh; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
#resultat.gagne .verdict { color: #fff; text-shadow: 0 0 1vh #fff, 0 0 3vh var(--jaune), 0 0 7vh var(--jaune), 0 0 12vh var(--rose); animation: pulse .7s ease-in-out infinite alternate; }
#resultat.perdu .verdict { color: #fff; text-shadow: 0 0 1vh #fff, 0 0 3vh var(--cyan), 0 0 7vh var(--blue, #5b4bff); }
@keyframes pulse { from { transform: scale(.96); } to { transform: scale(1.05); } }
#res-img { width: 30vh; height: 30vh; margin: 1.5vh 0; border-radius: 5vh; display: none;
  box-shadow: 0 0 0 .8vh #fff, 0 0 4vh var(--jaune), 0 0 10vh var(--rose); animation: pop .9s cubic-bezier(.2,1.6,.4,1); }
#resultat.gagne #res-img { display: block; }
@keyframes pop { from { transform: scale(0) rotate(-200deg); } }
#res-libelle { font-family: "Impact", "Arial Black", "DejaVu Sans", sans-serif; font-size: 7vh; letter-spacing: .04em; text-shadow: 0 0 2vh var(--rose); }
#res-texte { margin-top: 1.5vh; font-size: 3.8vh; font-weight: 700; max-width: 80vw; text-shadow: 0 .3vh 1vh #000; }
.rejouer { position: absolute; bottom: 2vh; font-size: 2.6vh; opacity: .75; animation: clignote 1.4s ease-in-out infinite alternate; }
.barre { position: absolute; left: 0; bottom: 0; height: 1vh; width: 100%; background: linear-gradient(90deg, var(--rose), var(--jaune)); transform-origin: left; }
@keyframes vide { to { transform: scaleX(0); } }

/* ---------- Bandeau défilant ---------- */
#bandeau { position: fixed; left: 0; right: 0; bottom: 0; height: 9vh; z-index: 30; overflow: hidden; white-space: nowrap;
  background: linear-gradient(90deg, #ff3cac, #784ba0 50%, #2bd2ff); border-top: .5vh solid #fff;
  box-shadow: 0 -1vh 4vh rgba(255,60,172,.6); font-family: "Segoe UI", "DejaVu Sans", sans-serif; font-weight: 800; font-size: 4.4vh; line-height: 8.5vh; }
#piste { display: inline-block; will-change: transform; animation: defile linear infinite; }
.copie { display: inline-block; }
.sep { display: inline-block; margin: 0 3vh; color: var(--jaune); }
@keyframes defile { to { transform: translateX(-50%); } }

#confettis { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }