:root{
  --bg:#0c0f1a;
  --panel:#131a2a;
  --accent:#f6c04d;
  --accent2:#ff4d4d;
  --text:#e8edf9;
  --muted:#9fb0d0;
  --green:#4df6b0;
  --purple:#a98bff;
}
*{ box-sizing: border-box; }
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 600px at 50% 0%, #171b2b, #0a0d17);
  color: var(--text);
}
#app{ max-width: 1280px; margin: 0 auto; padding: 12px; }

.topbar{
  display:grid; grid-template-columns: 1fr auto auto; gap:12px; align-items:center;
  background: linear-gradient(180deg, #1a2140, #0f1430);
  border: 1px solid #2b356a; border-radius: 16px; padding: 10px 12px; box-shadow: inset 0 0 60px #0a0f2e;
}
.brand{ display:flex; align-items:center; gap:10px; }
.logo-wheel{
  width: 36px; height: 36px; border-radius: 50%; background:
    conic-gradient(var(--accent), #ffe18d, var(--accent), #ffe18d, var(--accent));
  box-shadow: 0 0 8px #000,inset 0 0 8px #000;
}
.brand .title{ font-weight:700; letter-spacing: .3px; }
.brand .title span{ color: var(--accent); }

.controls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.controls label{ display:flex; gap:6px; align-items:center; background:#0b1026; padding:6px 8px; border-radius:10px; border:1px solid #1f2650;}
.controls input, .controls select{ background:#0b1026; color:var(--text); border:1px solid #2b356a; padding:4px 6px; border-radius:8px; }

.meters{ display:flex; gap:10px; flex-wrap:wrap; justify-self:end; }
.meter{ background:#0b1026; padding:6px 10px; border:1px solid #1f2650; border-radius:10px; min-width:110px; text-align:center; }
.meter span{ display:block; font-size:12px; color:var(--muted); }
.meter strong{ font-size:18px; }
.meter.jackpot strong{ color: var(--accent2); text-shadow:0 0 10px rgba(255,77,77,.5); }

.cabinet{
  margin-top:12px;
  display:grid; grid-template-columns: 1.3fr .9fr; gap:12px;
}
@media (max-width: 980px){
  .cabinet{ grid-template-columns: 1fr; }
}

.bezel{
  background: radial-gradient(800px 300px at 50% -40%, #26305f, #0b0f20);
  border: 1px solid #2b356a; border-radius: 16px; padding: 10px; position: relative;
  box-shadow: inset 0 0 120px rgba(0,0,0,.6), 0 10px 40px rgba(0,0,0,.3);
}

.marquee{
  overflow:hidden; border:1px solid #3a4688; border-radius:10px; background:#0a0f22;
  padding:6px 8px; margin-bottom:8px; position:relative;
  box-shadow: inset 0 0 20px #121942;
}
.marquee-text{ display:inline-block; white-space:nowrap; animation: slide 16s linear infinite; color:#ffe18d; letter-spacing:1px; }
@keyframes slide { from{ transform: translateX(100%);} to{ transform: translateX(-100%);} }

.reels-wrap{ position:relative; aspect-ratio: 5 / 3; width: 100%; border-radius: 12px; overflow:hidden; border:1px solid #23306a; }
#reels, #overlays{ width:100%; height:100%; display:block; }
#overlays{ position:absolute; left:0; top:0; pointer-events:none; }
.paylines-toggle{ margin:6px 0 2px; }
.buttons{ display:flex; gap:8px; margin:6px 0; }
.buttons button{
  flex:1; padding:10px 14px; font-weight:700; border-radius:12px; border:1px solid #2b356a; background:#0c1230; color:var(--text);
  box-shadow: 0 4px 0 #10163a;
}
.buttons button.primary{ background: linear-gradient(#1f2856,#12183f); border-color:#38449b; }
.buttons button:active{ transform: translateY(2px); box-shadow: 0 2px 0 #10163a; }

.status{ background:#0b1026; border:1px solid #1f2650; border-radius:10px; padding:8px 10px; color: var(--green); min-height: 24px; }

.bonus-area{
  background: linear-gradient(180deg, #10163a, #0b0f22);
  border:1px solid #2b356a; border-radius:16px; padding:10px; display:flex; flex-direction:column; gap:10px; align-items:center;
}
#wheel, #goldWheel{ width:100%; height:auto; background:#0b1026; border-radius: 12px; border:1px solid #21306a; }
.wheel-controls button{
  padding:8px 12px; border:1px solid #2b356a; background:#0c1230; color:var(--text); border-radius:10px; font-weight:700;
}
.bonus-status{ min-height: 22px; color: var(--purple); }

.foot{ margin-top:12px; color:var(--muted); }
.rules{ padding:10px; background:#0b1026; border:1px solid #1f2650; border-radius:10px; }
.rules strong{ color:var(--accent); }


/* --- Cabinet Bezel Art & Bulb Rails --- */
.reels-wrap{ position:relative; }
.bulb-rail{
  position:absolute; pointer-events:none; z-index:3;
  background-image:
    radial-gradient(circle, #fff 0 25%, transparent 26% 100%),
    radial-gradient(circle, #ffd36e 0 35%, transparent 36% 100%),
    radial-gradient(circle, rgba(255,0,0,.35) 0 50%, transparent 51% 100%);
  background-size: 26px 26px, 26px 26px, 26px 26px;
  background-repeat: repeat;
  filter: drop-shadow(0 0 6px rgba(255, 225, 141, .8));
  opacity:.95;
}
.bulb-rail.top{ left:8px; right:8px; top:4px; height:20px; }
.bulb-rail.bottom{ left:8px; right:8px; bottom:4px; height:20px; }
.bulb-rail.left{ top:8px; bottom:8px; left:4px; width:20px; background-size: 26px 26px; }
.bulb-rail.right{ top:8px; bottom:8px; right:4px; width:20px; }

/* Animated rainbow bezel behind rails */
.bezel::before{
  content:""; position:absolute; inset:6px; border-radius:14px; z-index:0;
  background: conic-gradient(from 0deg, #ffe18d, #ff6e6e, #a98bff, #6ee3ff, #9ff06e, #ffe18d);
  filter: blur(22px) opacity(.25);
  animation: bezelGlow 6s linear infinite;
}
@keyframes bezelGlow { to{ transform: rotate(360deg);} }

/* Anticipation states */
.bezel.anticipate-wheel .bulb-rail{
  animation: flashWheel .25s steps(1) infinite;
}
@keyframes flashWheel {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255,225,141,1)); }
  50% { filter: drop-shadow(0 0 2px rgba(255,225,141,.2)); }
}
.bezel.anticipate-triple .marquee-text{
  animation: slide 10s linear infinite, triplePulse .8s ease-in-out infinite;
}
@keyframes triplePulse {
  0%, 100% { color:#ffe18d; text-shadow:0 0 8px rgba(255,225,141,.7); }
  50% { color:#ffffff; text-shadow:0 0 2px rgba(255,255,255,.4); }
}

/* FX canvas sits on top for glow painting */
#fx{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:2; }
#overlays{ z-index:1; }
#reels{ z-index:0; }

.controls label input[type='checkbox']{ transform: translateY(1px); }