/* Machine à concours (version 2 du jeu de l'accueil) : caisse, rouleaux, ligne gagnante,
   afficheur « GAIN », levier. Même or, mêmes ampoules et même scène que la roue (css/roue.css).
   Voir docs/MACHINE.md et js/machine.js. Chargé après roue.css. */

/* « MACHINE À CONCOURS » a 18 lettres (15 pour la roue) : enseigne un peu plus petite sur mobile. */
.scene-roue[data-version="machine"] .enseigne-roue h2 { font-size: clamp(1rem, 4.6vw, 2.9rem); }

/* Proportions du viewBox commun au site et à l'application : 1120 × 1250. */
.machine {
  position: relative; width: 100%; aspect-ratio: 1120 / 1250;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.machine * { pointer-events: none; }
.machine::before {
  content: ""; position: absolute; inset: 4% -2% 0; z-index: 0; border-radius: 40%;
  background: radial-gradient(closest-side, rgba(251, 191, 36, 0.26), rgba(251, 191, 36, 0.08) 72%, transparent);
}
.machine .roue-ombre { left: 8%; right: 18%; bottom: -3%; height: 7%; }
.machine-caisse, .machine-voile, .machine-dessus, .machine-eclat {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible;
}
.machine-caisse { z-index: 1; }

/* Rouleaux : la bande glisse (transform), la fenêtre la découpe ; coins extérieurs arrondis. */
.machine-rouleau { position: absolute; z-index: 2; overflow: hidden; background: #050d22; }
.machine-rouleau.r0 { border-radius: 10% 0 0 10% / 5% 0 0 5%; }
.machine-rouleau.r2 { border-radius: 0 10% 10% 0 / 0 5% 5% 0; }
.machine-bande { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.machine-bande > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Arrivée : le reste s'assombrit, la ligne et les trois cases s'illuminent. Hors arrivée, ces
   calques ne sont pas affichés du tout (rien à composer pendant la rotation). */
.machine-voile, .machine-eclat { visibility: hidden; }
.machine.arrivee .machine-voile, .machine.arrivee .machine-eclat { visibility: visible; }
.machine-voile { z-index: 3; fill: #050d22; opacity: 0.45; }
.animations .machine.arrivee .machine-voile { animation: machine-fondu 450ms ease both; }
@keyframes machine-fondu { from { opacity: 0; } }
.machine-dessus { z-index: 4; }
.machine-ligne { stroke: #fde68a; stroke-width: 3px; stroke-opacity: 0.55; }
.machine.arrivee .machine-ligne { stroke: #fff6d6; stroke-width: 5px; stroke-opacity: 1; }
.machine-eclat { z-index: 5; }
.machine-eclat rect { fill: none; }
.machine-eclat .eclat-large rect { stroke: rgba(251, 191, 36, 0.6); stroke-width: 22px; }
.machine-eclat .eclat-fin rect { stroke: #fff6d6; stroke-width: 7px; }
.machine-eclat .eclat-rubis { fill: rgba(255, 60, 100, 0.38); }
.animations .machine.arrivee .machine-eclat { animation: roue-eclat 0.8s ease-in-out infinite alternate; }

/* Afficheur DEL « GAIN » : chiffres dorés qui comptent jusqu'à la valeur. */
.machine-afficheur { position: absolute; z-index: 5; display: block; overflow: visible; }
.machine-gain { font-family: var(--police-titre); font-weight: 900; letter-spacing: 0.14em; fill: #b45309; }
.machine-valeur { font-family: var(--police-titre); font-weight: 900; fill: #fcd34d; font-variant-numeric: tabular-nums; }
.machine.arrivee .machine-gain { fill: #fbbf24; }

/* Reflet qui balaie le médaillon au W toutes les 4 secondes. */
.machine-reflet-medaillon { position: absolute; z-index: 2; border-radius: 50%; overflow: hidden; }
.machine-reflet-medaillon::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 38%; transform: translateX(0) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); opacity: 0;
}
.animations .machine-reflet-medaillon::after { animation: machine-reflet 4s ease-in-out infinite; will-change: transform, opacity; }
@keyframes machine-reflet {
  0% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  4% { opacity: 1; }
  24% { transform: translateX(520%) skewX(-18deg); opacity: 1; }
  28%, 100% { transform: translateX(520%) skewX(-18deg); opacity: 0; }
}

/* Levier rubis : pivot (985, 640) ; on le tire (clic ou geste vers le bas). */
.machine-levier { position: absolute; z-index: 6; display: block; overflow: visible; transform-origin: 50% 50%; transform: rotate(-55deg); will-change: transform; touch-action: none; }
.machine .levier-prise, .machine .levier-prise * { pointer-events: auto; cursor: grab; }
.machine.saisie .levier-prise { cursor: grabbing; }
.machine.en-rotation .levier-prise, .machine.en-rotation .levier-prise * { cursor: progress; }

/* Gros lot : les pièces jaillissent du plateau. */
.machine .roue-pieces { z-index: 7; left: 9.6%; top: 20.9%; width: 70%; transform-origin: 50% 100%; }
.animations .machine.gros-lot .roue-pieces { animation: roue-pieces 1.9s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }