/* Zone du jeu Jackpot. Les ecrans communs (accueil, fin) viennent de
   jeu.css ; ici, la machine a sous : enseigne rouge a ampoules, corps
   dore, trois fenetres de rouleau, levier, bouton, pied, pluie de pieces.
   Les couleurs viennent du rendu (variables --jk-*). */
.jk-jeu { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; box-sizing: border-box; background-color: var(--fond, #2a0a5e); background-image: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%), linear-gradient(rgba(0, 0, 0, 0), var(--jk-fond-sombre, rgba(0, 0, 0, .5))); background-position: center; background-size: cover; background-repeat: no-repeat; color: var(--jeu-hud-texte, #ffffff); text-align: center; }
.jk-jeu[hidden] { display: none; }
.jk-logo { max-width: 140px; max-height: 56px; object-fit: contain; }
.jk-logo[hidden] { display: none; }
.jk-consigne { margin: 0; font-size: clamp(14px, 3.8vw, 18px); font-weight: 600; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.jk-tour { margin: 0; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; opacity: .85; }
.jk-tour[hidden] { display: none; }

/* La machine : colonne enseigne / corps / pied, levier a droite du corps.
   margin-right reserve la place du levier qui deborde a droite (jk-levier,
   right: -34px) pour que machine + levier restent centres ensemble. */
.jk-machine { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-right: 34px; }
.jk-enseigne { position: relative; width: 100%; box-sizing: border-box; padding: 18px 26px 12px; border-radius: 50% / 60%; background: radial-gradient(ellipse at 50% 40%, var(--jk-enseigne, #c8102e), var(--jk-enseigne-sombre, #6b0018)); border: 5px solid var(--jk-or, #f2c14e); box-shadow: 0 0 0 2px var(--jk-or-sombre, #916f21), 0 10px 26px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 200, 80, .25); }
.jk-fer { position: absolute; top: -26px; left: 50%; width: 52px; height: 52px; margin-left: -26px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.jk-ampoules { position: absolute; inset: -8px; pointer-events: none; }
.jk-enseigne-texte { display: block; font-weight: 900; font-size: clamp(26px, 9vw, 44px); letter-spacing: 2px; line-height: 1; background: linear-gradient(var(--jk-or-clair, #fbe7a9), var(--jk-or, #f2c14e) 55%, var(--jk-or-sombre, #916f21)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); text-transform: uppercase; }
.jk-corps { position: relative; width: 100%; box-sizing: border-box; padding: 14px 14px 12px; border-radius: 22px; background: linear-gradient(160deg, var(--jk-or-clair, #fbe7a9), var(--jk-or, #f2c14e) 40%, var(--jk-or-sombre, #916f21)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(0, 0, 0, .25), 0 14px 30px rgba(0, 0, 0, .55); }
.jk-fenetres { display: flex; gap: 8px; justify-content: center; padding: 8px; border-radius: 12px; background: #1a1a1a; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .8); }
.jk-fenetre { position: relative; overflow: hidden; border-radius: 8px; background: linear-gradient(#ffffff, #e6e6e6 50%, #ffffff); box-shadow: inset 0 0 0 2px #bdbdbd; }
.jk-fenetre::before, .jk-fenetre::after { content: ''; position: absolute; left: 0; right: 0; height: 22%; pointer-events: none; z-index: 2; }
.jk-fenetre::before { top: 0; background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); }
.jk-fenetre::after { bottom: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .35)); }
.jk-bande { display: block; will-change: transform; }
.jk-clac { animation: jk-secousse 80ms ease-out; }
@keyframes jk-secousse { 0% { transform: translateY(0); } 50% { transform: translateY(3px); } 100% { transform: translateY(0); } }
.jk-bouton { display: block; margin: 12px auto 0; padding: 12px 34px; border: 3px solid var(--jk-or-sombre, #916f21); border-radius: 999px; background-color: var(--jeu-bouton-fond, #111111); background-image: linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .3)); color: var(--jeu-bouton-texte, #ffffff); font: inherit; font-weight: 900; font-size: clamp(15px, 4.2vw, 19px); letter-spacing: 2px; cursor: pointer; box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }
.jk-bouton:disabled { cursor: default; opacity: .75; }
.jk-bouton:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.jk-pied { font-weight: 900; font-size: clamp(22px, 8vw, 38px); letter-spacing: 3px; background: linear-gradient(var(--jk-or-clair, #fbe7a9), var(--jk-or, #f2c14e) 55%, var(--jk-or-sombre, #916f21)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); text-transform: uppercase; }

/* Levier : a droite du corps, tige inclinee par le rendu (variable --jk-levier-angle). */
.jk-levier { position: absolute; right: -34px; top: 26%; width: 34px; height: 46%; touch-action: none; }
.jk-tige { position: absolute; left: 10px; bottom: 30%; width: 12px; height: 70%; border-radius: 6px; background: linear-gradient(90deg, #eeeeee, #9e9e9e 60%, #616161); transform-origin: 50% 100%; transform: rotate(var(--jk-levier-angle, 0deg)); transition: transform 250ms cubic-bezier(.2, 1.4, .5, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.jk-boule { position: absolute; left: 0; width: 34px; height: 34px; border-radius: 50%; top: 0; background: radial-gradient(circle at 35% 30%, #ff8a80, #c62828 60%, #7f0000); box-shadow: 0 4px 8px rgba(0, 0, 0, .5); cursor: grab; touch-action: none; transform-origin: 50% 50%; }
.jk-levier-actif .jk-tige { transition: none; }
.jk-socle { position: absolute; left: 4px; bottom: 22%; width: 24px; height: 12px; border-radius: 4px; background: linear-gradient(#bdbdbd, #616161); }

/* Fin : toute la machine s assombrit sous le resultat (sinon le texte de
   fin reste illisible sur l enseigne encore allumee) et les textes autour
   s effacent ; gagne : l enseigne pulse ; jackpot : clignotement rapide et
   fond qui bat (la celebration jk-jackpot tourne pendant les 3 s avant
   fin(true) ; l assombrissement ne commence qu a l apparition du texte). */
.jk-fenetre, .jk-corps, .jk-enseigne, .jk-pied, .jk-levier { transition: filter .5s ease; }
.jk-fin .jk-enseigne, .jk-fin .jk-corps, .jk-fin .jk-pied, .jk-fin .jk-levier { filter: brightness(.35) saturate(.7); }
.jk-jeu.jk-fin .jk-consigne, .jk-jeu.jk-fin .jk-logo, .jk-jeu.jk-fin .jk-tour { opacity: .25; }
.jk-gagne .jk-enseigne { animation: jk-pulse 600ms ease-in-out 3; }
.jk-jackpot .jk-enseigne { animation: jk-pulse 250ms ease-in-out 12; }
.jk-jackpot.jk-jeu-fond { animation: jk-fond 400ms ease-in-out 8 alternate; }
@keyframes jk-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }
@keyframes jk-fond { from { background-color: var(--fond, #2a0a5e); } to { background-color: var(--jk-or-sombre, #916f21); } }

/* Pluie de pieces : elements crees par le rendu, chute + rotation, retires a la fin. */
.jk-pieces { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.jk-piece { position: absolute; top: -40px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f2c14e 55%, #a97a12); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .15), 0 2px 4px rgba(0, 0, 0, .4); animation: jk-chute var(--jk-duree, 1.6s) cubic-bezier(.3, .1, .7, 1) var(--jk-delai, 0s) forwards; }
@keyframes jk-chute { 0% { transform: translateY(0) rotateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotateY(720deg) rotate(180deg); opacity: .9; } }

/* Ordinateur : la machine reste a 420 px, centree. */
@media (min-width: 700px) { .jk-machine { width: 420px; } }