/* =====================================================================
   La machine « Galet » (voir public/js/machine.js)
   Boîtier en fausse 3D (couches CSS extrudées), vitrine en vraie 3D (WebGL, par-dessus, découpée à la forme
   de la vitre), écran à LED, molette à tourner, bouche de sortie creusée, flanc « vitrine partenaire ».
   Tout est dessiné dans un cadre de 600 × 720 px mis à l'échelle (--k) : les coordonnées restent simples.
   ===================================================================== */
/* Place réservée dès le HTML (avant le chargement du module) : même taille que la machine finale, aucun saut */
/* Le dessin fait 600 × 720 ; la machine n'en occupe que la zone x 58→468, y 48→688 : c'est elle qu'on cadre (plus de marge vide) */
.gm-host { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 410 / 640; max-height: max(320px, calc(100vh - 110px)); }
.gm { user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.gm-fit { position: absolute; left: 50%; top: 0; width: 600px; height: 720px; transform: scale(var(--k, .8)) translate(-263px, -48px); transform-origin: 0 0;
  --front: linear-gradient(160deg, #eeae8c, #de8c67 55%, #c8704c); --lower: linear-gradient(170deg, #e39a77, #cf7b57); --side: #93462b; --ink: #7a3820; --rim: #f0bea3;
  --dial: #f6efe4; --dial-hi: #ffffff; --dial-lo: #d2c6b5; --dial-side: #b9ab98; --spring: cubic-bezier(.34, 1.56, .64, 1); }
.gm-fit > * { position: absolute; }
.gm-fit i, .gm-fit b { font-style: normal; }

/* Décor : halo chaud derrière la machine, ombre au sol */
.gm-room { inset: 0; background: radial-gradient(55% 46% at 50% 42%, rgba(120, 62, 38, .32), transparent 72%); pointer-events: none; }
.gm-shadow { border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); filter: blur(7px); pointer-events: none; }
.gm-glow { left: 300px; top: 640px; width: 340px; height: 80px; margin-left: -170px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--mood, #ff8a4c) 26%, transparent), transparent); opacity: .6; transition: background .5s; pointer-events: none; }

/* Boîtier */
.gm-scene { inset: 0; perspective: 1500px; perspective-origin: 50% 32%; }
.gm-cam { position: absolute; inset: 0; transform-style: preserve-3d; }
.gm-box { position: absolute; transform-style: preserve-3d; transform: rotateX(var(--rx, -8deg)) rotateY(var(--ry, -26deg)) translateY(var(--float, 0px)); }
.gm-layer { position: absolute; inset: 0; border-radius: 44px; }
.gm-front { position: absolute; inset: 0; border-radius: 44px; transform-style: preserve-3d; background: var(--front); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -8px 16px rgba(0, 0, 0, .08); cursor: pointer; }
.gm-front > * { position: absolute; }
.gm-lower { left: 12px; right: 12px; top: 256px; bottom: 12px; border-radius: 16px 16px 34px 34px; background: var(--lower); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(0, 0, 0, .06), 0 -1px 0 rgba(0, 0, 0, .08); }
.gm-screw { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9a9488 70%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.gm-screw::after { content: ""; position: absolute; left: 1px; right: 1px; top: 3.5px; height: 1px; background: rgba(0, 0, 0, .35); transform: rotate(35deg); }
.gm-brand { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 11px; font-weight: 900; letter-spacing: .2em; }
.gm-brand i { width: 11px; height: 17px; border-radius: 6px; background: linear-gradient(#ff5a1f 0 48%, #1a1a1a 48% 54%, #f4f1eb 54%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.gm-foot { bottom: -9px; width: 64px; height: 14px; border-radius: 0 0 10px 10px; background: linear-gradient(#3a302a, #1b1512); transform: translateZ(-20px); }

/* Vitre : cadre et fond (l'intérieur 3D est dessiné par-dessus, dans .gm-vit) */
.gm-win { overflow: hidden; border-radius: 22px; background: linear-gradient(#171c27, #1d2330); box-shadow: inset 0 0 0 5px var(--rim), inset 0 0 0 7px rgba(0, 0, 0, .12); cursor: grab; }
.gm-wmk, .gm-mk { position: absolute; width: 0; height: 0; }

/* Écran à LED */
.gm-screen { overflow: hidden; border-radius: 10px; background: #0b0d0a; box-shadow: inset 0 0 0 3px #26221d, inset 0 0 0 4px rgba(255, 255, 255, .08), inset 0 6px 14px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .5); }
.gm-screen::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 38%, rgba(0, 0, 0, .55) 40%) 0 0 / 3px 3px, linear-gradient(115deg, rgba(255, 255, 255, .08), transparent 40%); pointer-events: none; }
.gm-scr { position: absolute; left: 0; top: 50%; padding: 0 12px; color: var(--sc, #ffb545); font-family: "Press Start 2P", monospace; font-size: 12px; line-height: 1; white-space: nowrap; transform: translateY(-50%); text-shadow: 0 0 6px var(--sc, #ff9d2a), 0 0 14px color-mix(in srgb, var(--sc, #ff9d2a) 50%, transparent); }
.gm-scr.center { left: 50%; transform: translate(-50%, -50%); }
.gm-scr.huge { font-size: 22px; }
.gm-scr.marq { animation: gm-marq var(--dur, 8s) linear infinite; }
@keyframes gm-marq { from { transform: translate(var(--from), -50%); } to { transform: translate(var(--to), -50%); } }
.gm-scr.blink { animation: gm-blink .45s steps(1) infinite; }
@keyframes gm-blink { 50% { opacity: .15; } }
.gm-screen.pop { animation: gm-spop .3s var(--spring); }
@keyframes gm-spop { 40% { filter: brightness(1.9); } }

/* Molette (extrudée) et voyants de crans */
.gm-dial { transform-style: preserve-3d; cursor: grab; touch-action: none; }
.gm-dial:active { cursor: grabbing; }
.gm-dial > i { position: absolute; inset: 0; border-radius: 50%; background: var(--dial-side); }
.gm-dial .gm-top { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 28%, var(--dial-hi), var(--dial) 52%, var(--dial-lo)); box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .18), inset 0 3px 0 rgba(255, 255, 255, .35); transition: box-shadow .25s, filter .2s; }
.gm-dial:hover .gm-top { filter: brightness(1.06); box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .18), inset 0 3px 0 rgba(255, 255, 255, .35), 0 0 30px color-mix(in srgb, var(--dial) 55%, transparent); }
.gm-grip { position: absolute; left: 50%; top: 9%; width: 16%; height: 82%; margin-left: -8%; border-radius: 99px; background: linear-gradient(90deg, var(--dial-lo), var(--dial-hi) 50%, var(--dial-lo)); box-shadow: 0 3px 4px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .5); }
.gm-dot { position: absolute; left: 50%; top: 13%; width: 9%; height: 9%; margin-left: -4.5%; border-radius: 50%; background: #ff5a1f; box-shadow: 0 0 6px #ff8a4c; }
.gm-dled { width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: rgba(0, 0, 0, .22); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .25); transition: background .15s, box-shadow .15s; }
.gm-dled.on { background: #ffb545; box-shadow: 0 0 10px #ff9d2a, 0 0 2px #fff; }

/* Monnayeur */
.gm-coinplate { border-radius: 12px; background: linear-gradient(90deg, #aab1ba, #f4f6f8 40%, #c3c9d0 70%, #8d949d); box-shadow: 0 4px 8px rgba(0, 0, 0, .2), inset 0 1px 0 #fff; }
.gm-coinplate::before { content: ""; position: absolute; left: 50%; top: 14px; width: 8px; height: 34px; margin-left: -4px; border-radius: 4px; background: #16181b; box-shadow: inset 0 2px 3px #000; transition: background .2s, box-shadow .2s; }
.gm-coinplate::after { content: attr(data-label); position: absolute; left: 0; right: 0; bottom: 10px; color: #5d646d; font-size: .5rem; font-weight: 900; letter-spacing: .1em; text-align: center; }
.gm-coinplate.lit::before { background: #ff9d2a; box-shadow: 0 0 12px #ff9d2a; }
.gm-coin { z-index: 9; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c9, #e8b94a 55%, #9a6a10); box-shadow: 0 3px 6px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(255, 255, 255, .25); opacity: 0; pointer-events: none; }
.gm-coin::after { content: "GP"; position: absolute; inset: 0; display: grid; place-items: center; color: #7a5210; font-size: 9px; font-weight: 900; }

/* Bouche de sortie : creusée, fond et paroi gauche dans l'ombre, rebord dans la matière de la machine */
.gm-hatch { overflow: hidden; border-radius: 30px; background: #0a0706; box-shadow: 0 0 0 4px color-mix(in srgb, #fff 22%, transparent), 0 3px 0 4px rgba(0, 0, 0, .1), inset 0 0 0 1px rgba(0, 0, 0, .5); }
.gm-hatch > i { position: absolute; }
.gm-cb { left: 20%; right: 8%; top: 14%; bottom: 20%; border-radius: 18px 18px 6px 6px; background: radial-gradient(80% 100% at 50% 100%, #2c211b, #120d0b 75%); box-shadow: inset 0 6px 10px rgba(0, 0, 0, .7); }
.gm-cl { left: 0; top: 0; bottom: 0; width: 22%; background: linear-gradient(90deg, #3b2b22, #1a1310); clip-path: polygon(0 0, 100% 16%, 100% 82%, 0 100%); }
.gm-ct { left: 0; right: 0; top: 0; height: 16%; background: linear-gradient(#000, #0f0b09); clip-path: polygon(0 0, 100% 0, 92% 100%, 20% 100%); }
.gm-hl { inset: 0; border-radius: inherit; background: radial-gradient(60% 70% at 58% 72%, var(--hc, transparent), transparent 70%); opacity: 0; mix-blend-mode: screen; transition: opacity .15s; }
.gm-sill { left: 0; right: 0; bottom: 0; height: 26%; border-radius: 0 0 30px 30px; background: var(--lower); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 6px rgba(0, 0, 0, .15), 0 -4px 8px rgba(0, 0, 0, .55); }
.gm-sill::before { content: ""; position: absolute; left: 8%; right: 8%; top: 1px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .35); }

/* Flanc droit : vitrine partenaire (fixe) */
.gm-side { position: absolute; top: 0; transform-origin: 0 0; transform-style: preserve-3d; }
.gm-lcd { position: absolute; left: 15px; top: 92px; height: 340px; overflow: hidden; padding: 12px; border-radius: 10px; background: #0d0b0a; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06), 0 0 0 3px var(--rim), 0 2px 0 3px rgba(255, 255, 255, .3); color: #f3eadf; font-family: Archivo, Arial, sans-serif; }
.gm-lcd::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, .12), transparent 35%); pointer-events: none; }
.gm-lcd-h { color: #ff9a4c; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.gm-lcd-tag { display: inline-block; margin-top: 4px; padding: 2px 6px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 3px; color: #cdbfae; font-size: 7.5px; font-weight: 800; letter-spacing: .12em; }
.gm-lcd img { display: block; width: 100%; height: 150px; margin: 10px 0 8px; border-radius: 7px; object-fit: cover; }
.gm-lcd-empty { display: grid; place-items: center; height: 150px; margin: 10px 0 8px; border: 1px dashed rgba(255, 255, 255, .25); border-radius: 7px; color: #8f8272; font-size: 30px; }
.gm-lcd b { display: block; font-size: 13px; line-height: 1.15; }
.gm-lcd p { margin: 5px 0 0; color: #b9aa98; font-size: 9px; line-height: 1.4; }
.gm-lcd-cta { display: inline-block; margin-top: 10px; padding: 6px 9px; border-radius: 5px; background: #ff5a1f; color: #fff; font-size: 9px; font-weight: 900; text-decoration: none; }

/* Série de tirages */
.gm-hud { right: 14px; top: 10px; z-index: 40; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #ffb545; font-size: .72rem; font-weight: 800; letter-spacing: .06em; }
.gm-hud.pop { animation: gm-hudpop .45s var(--spring); }
@keyframes gm-hudpop { 40% { transform: scale(1.35); color: #fff; } }

/* Vitrine 3D et effets (au-dessus du boîtier) */
.gm-vit { left: 0; top: 0; width: 600px; height: 720px; pointer-events: none; }
.gm-fx { inset: 0; z-index: 50; pointer-events: none; }
.gm-fx > * { position: absolute; }
.gm-veil { inset: 0; background: radial-gradient(circle at 50% 44%, rgba(10, 10, 14, .45), rgba(5, 5, 8, .93)); opacity: 0; }
.gm-rays { left: 300px; top: 330px; width: 1000px; height: 1000px; margin: -500px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 55%, transparent) 0 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(closest-side, #000 8%, transparent 70%); mask-image: radial-gradient(closest-side, #000 8%, transparent 70%); opacity: 0; animation: gm-spin 18s linear infinite; }
@keyframes gm-spin { to { rotate: 360deg; } }
.gm-fx canvas { left: 0; top: 0; width: 600px; height: 720px; }
.gm-shock { left: 300px; top: 330px; width: 60px; height: 60px; margin: -30px; border-radius: 50%; border: 5px solid var(--c); opacity: 0; }
.gm-flashw { left: 300px; top: 330px; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: #fff; opacity: 0; }
.gm-pt { left: 0; top: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.gm-flip { position: fixed; z-index: 100; object-fit: cover; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .gm-rays, .gm-scr.marq, .gm-scr.blink { animation: none; } }