/* ============================================================
   BonusWheel (Lucky Wheel) — 1:1 prenos Godot `Scenes/Screens/BonusWheel.tscn`.
   Sve pozicije su u `stage-inner` prostoru (1281×720) = Godot koordinate × (1281/1920).
   Overlay stoji iznad promo/results slojeva (z-index 5); sklanja se na prvi `ball`.
   Animacije su iste kao u `Scripts/BonusWheel.gd`:
     intro naslova 5.5s (pop reči) → naslov sklizne levo + točak se uveća (4.5–5.5s)
     → pauza 1s → vrtnja ((15−pos)·24° + 1440°, trajanje 1.5s × (ukupno/360))
     → blink highlight + "won" pulsiranje reči.
   ============================================================ */

.lb-wheel-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  display: none;
  pointer-events: none;
  background: #05070f;
}
.lb-wheel-overlay.is-open { display: block; }

.lb-wheel-overlay .lw-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* "dancing" pozadina — isti quad-warp kao GameScreen (`background.drawer`).
   z-index 0 (globalno `.stage-inner canvas` pravilo daje 1 → inače pokrije točak). */
.lb-wheel-overlay .lw-bgcanvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 0; }

/* ─── Glow slojevi (fade-in 5s kao Godot WheelGlow) ─── */
.lw-gloww { position: absolute; left: 646.1px; top: 359.6px; width: 1336.5px; height: 717.9px;
  margin: -359px 0 0 -668.3px; opacity: 0; transition: opacity 5s linear; }
.lb-wheel-overlay.is-glow .lw-gloww { opacity: 1; }
.lw-gloww img { width: 100%; height: 100%; opacity: .8; animation: lwPulse 2s ease-in-out infinite; }
@keyframes lwPulse { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }


/* ─── Točak: spin (rotirajući deo) + statični prsten/pokazivač ─── */
.lw-wheel { position: absolute; left: 902px; top: 352.3px; width: 0; height: 0;
  transform: scale(0); transition: transform .8s ease-out; }
.lb-wheel-overlay.is-wheel .lw-wheel { transform: scale(1); }

.lw-spin { position: absolute; left: 0; top: 0; width: 600.4px; height: 600.4px;
  margin: -300.2px 0 0 -300.2px; will-change: transform; }
.lw-spin > img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 15 polja (multiplikatori) — geometrija iz Godot scena (rect + rotacija k·24°). */
.lw-label { position: absolute; display: flex; align-items: center; justify-content: center;
  font-family: 'akzidenz', 'Arial Black', 'Poppins', sans-serif; font-size: 56.7px; line-height: 1;
  color: #FFF855; white-space: nowrap;
  /* Godot: ReelNumbersFont (Akzidenz 85) + outline_size 5 van glifa → 3.3px u stage prostoru.
     Shadow ostaje iza ispune pa ne jede slovo (kao Godot outline). */
  text-shadow:
    3.3px 0 0 #000, -3.3px 0 0 #000, 0 3.3px 0 #000, 0 -3.3px 0 #000,
    2.3px 2.3px 0 #000, -2.3px 2.3px 0 #000, 2.3px -2.3px 0 #000, -2.3px -2.3px 0 #000,
    0 0 5px rgba(0, 0, 0, .85); }

.lw-ring { position: absolute; left: 860.6px; top: 351.6px; width: 782px; height: 708.5px;
  margin: -354.3px 0 0 -391px; }
.lw-pointer { position: absolute; left: 664.3px; top: 351.9px; width: 73.5px; height: 136.7px;
  margin: -68.4px 0 0 -36.8px; }
.lw-pointer-eff { position: absolute; left: 660.9px; top: 348.5px; width: 163.5px; height: 214.2px;
  margin: -107.1px 0 0 -81.8px; animation: lwBlink 1s linear infinite; }
@keyframes lwBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Highlight dobitnog polja — vidi se tek posle vrtnje (Godot WinHighlighter + New Anim). */
.lw-highlight { position: absolute; left: 699.2px; top: 352.7px; width: 631.6px; height: 396.9px;
  margin: -198.5px 0 0 -315.8px; opacity: 0; }
.lb-wheel-overlay.is-won .lw-highlight { animation: lwBlink .5s linear infinite; }

/* ─── Naslov "LUCKY WHEEL BONUS" (reči se pojavljuju jedna po jedna) ─── */
.lw-title { position: absolute; left: 623.9px; top: 347.6px; width: 0; height: 0;
  transition: left 1s linear; }
.lb-wheel-overlay.is-settled .lw-title { left: 240.2px; }

.lw-title-in { position: absolute; left: 0; top: 0; width: 0; height: 0;
  /* Godot interp = linear između ključeva (0 → 1.5/1.3 → 0.9 → 1). */
  animation: lwTitleIn 1.2s linear both; }
@keyframes lwTitleIn {
  0%   { transform: scale(0); }
  42%  { transform: scale(1.5, 1.3); }
  83%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

.lw-word { position: absolute; }
.lw-word > img { width: 100%; height: 100%; display: block; }
.lw-w-lucky { --pop: 2.819; --won: 1.268; width: 419.4px; height: 146.2px; left: 7.8px; top: -86.1px; margin: -73.1px 0 0 -209.7px; }
.lw-w-wheel { --pop: 3.098; --won: 1.394; width: 417px; height: 125.4px; left: 19.7px; top: 16px; margin: -62.7px 0 0 -208.5px; }
.lw-w-bonus { --pop: 3.037; --won: 1.367; width: 399px; height: 119.8px; left: 15.3px; top: 109.6px; margin: -59.9px 0 0 -199.5px; }

/* Reči "iskoče" jedna po jedna (Godot: scale 1.42/1.29/1.32 → 4.0 na 2s / 3s / 4s). */
.lw-word.is-pop { animation: lwPop 1s cubic-bezier(.4, 0, .6, 1); z-index: 3; }
@keyframes lwPop { 0% { transform: scale(1); } 50% { transform: scale(var(--pop, 2.8)); } 100% { transform: scale(1); } }

/* Posle vrtnje reči pulsiraju (Godot LuckyWheelBonusWon: 1.42/1.29/1.32 → 1.8, 3s ciklus). */
.lb-wheel-overlay.is-won .lw-w-lucky { animation: lwWon 3s linear infinite; }
.lb-wheel-overlay.is-won .lw-w-wheel { animation: lwWon 3s linear 1s infinite; }
.lb-wheel-overlay.is-won .lw-w-bonus { animation: lwWon 3s linear 2s infinite; }
@keyframes lwWon { 0% { transform: scale(1); } 16.7% { transform: scale(var(--won, 1.27)); } 33.3%, 100% { transform: scale(1); } }

/* Iskrice oko reči (Godot Animation_Sparks). */
.lw-spark { position: absolute; }
.lw-s1 { width: 138px; height: 132.8px; left: calc(50% - 88.6px); top: calc(50% - 89.7px);
  animation: lwSparkA 1.5s linear infinite; }
.lw-s2 { width: 230.5px; height: 221.8px; left: calc(50% - 199.3px); top: calc(50% - 127.1px);
  animation: lwSparkB 1.5s linear .5s infinite; }
.lw-s3 { width: 157px; height: 151.1px; left: calc(50% + 47.7px); top: calc(50% - 45.3px);
  animation: lwSparkB 1.5s linear 1s infinite; }
@keyframes lwSparkA { 0%, 100% { transform: scale(1); } 53% { transform: scale(.43); } }
@keyframes lwSparkB { 0%, 100% { transform: scale(1); } 53% { transform: scale(.6); } }

/* Info tekst (Godot #InfoText — FTRAMD 40, limun boja). */
.lw-info { position: absolute; left: 71.4px; top: 513.7px; width: 353px;
  font-family: 'futuramd', 'Poppins', sans-serif; font-size: 26.7px; line-height: 1.25;
  color: #EBF542; text-shadow: 2px 2px 0 rgba(0, 0, 0, .85), 0 0 8px rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity .35s ease; }
.lb-wheel-overlay.is-info .lw-info { opacity: 1; }

/* ─── "x{mult}" bedž na GameScreen-u dok traje LW runda (Godot BonusWheelCoefParent) ───
   Godot: bonusWheelCircle = GoldCircle.png 858×561 @ scale (0.2175, 0.2451) → 186.7×137.5,
   label font Gelline 100 (Back crni, +4.93/−2), oba centrirana u rect-u 132×97. */
/* Sloj za bedž — drži FHD zoom kao promo/results overlay-i (bez njega se na 1920×1080 ne skalira). */
.lw-badge-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.lw-badge { position: absolute; left: 411.7px; top: 306.3px; width: 124.6px; height: 91.8px;
  margin: -45.9px 0 0 -62.3px; display: none; }
.lw-badge.is-on { display: block; }
.lw-badge > img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Godot `Drumcircle2` — druga kopija GoldCircle-a sa `shineBonusWheel` shaderom (A 0.01 / F 2 / speed 2). */
.lw-badge .lw-badge-shine { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lw-badge b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'gelline', 'bebas', serif; font-weight: normal; font-size: 66.7px; line-height: 1;
  text-transform: none; }
.lw-badge .lw-badge-back { color: #000; transform: translate(3.3px, -1.3px); }
/* Front labela ima `gradient2.tres`; sa stvarnim parametrima (position −0.45, size 0.549, angle 90)
   smoothstep k ostaje ≈0 za ceo glif → efektivna boja = first_color #FF6600 (vidi lb5-shaders.js). */
.lw-badge .lw-badge-front { color: #f60; }