:root{
  --bg:#05050a;
  --txt:#f3f5ff;
  --muted:#b8bed6;
  --blue:#00b7ff;
  --violet:#b86bff;
  --gold:#ffcc33;
  --red:#ff3b3b;
  --shadow: 0 22px 70px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  background: radial-gradient(1200px 700px at 50% 20%, rgba(0,183,255,0.18), rgba(0,0,0,0)) , var(--bg);
  color:var(--txt);
  overflow-x:hidden;
}

.bg{
  position:fixed;
  inset:-80px;
  background:
    radial-gradient(700px 260px at 20% 20%, rgba(184,107,255,0.20), transparent 60%),
    radial-gradient(800px 320px at 88% 25%, rgba(255,204,51,0.16), transparent 65%),
    radial-gradient(900px 520px at 50% 100%, rgba(0,183,255,0.10), transparent 70%);
  filter: blur(22px);
  pointer-events:none;
  z-index:0;
}

.wrap{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  padding:28px 14px 60px;
}

.cabinet{
  width:min(1120px, 100%);
  border-radius:34px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.cabinet::before{
  content:"";
  position:absolute; inset:8px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7);
  pointer-events:none;
}
.cabinet::after{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 360px at 20% 10%, rgba(0,183,255,0.14), transparent 60%),
    radial-gradient(900px 360px at 90% 10%, rgba(255,204,51,0.12), transparent 65%);
  pointer-events:none;
}

.marquee{position:relative;padding:18px 18px 12px;}
.marquee-inner{
  display:flex;align-items:center;gap:14px;
  padding:14px 14px;border-radius:22px;
  background: linear-gradient(180deg, rgba(0,183,255,0.14), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: 0 16px 45px rgba(0,0,0,.55);
}
.brand{width:78px;height:78px;border-radius:18px;object-fit:cover;border:1px solid rgba(255,255,255,0.18);box-shadow:0 10px 22px rgba(0,0,0,.6);}
.marquee-text{flex:1;min-width:0}
.marquee-title{font-weight:1000;letter-spacing:1px;font-size:28px;text-shadow:0 14px 34px rgba(0,0,0,.8);}
.marquee-sub{color:var(--muted);margin-top:2px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.marquee-actions{display:flex;gap:10px;align-items:center}

.btn{
  cursor:pointer;padding:12px 14px;border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color:var(--txt);font-weight:900;
  box-shadow: 0 10px 22px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.btn:hover{border-color: rgba(255,255,255,0.24)}
.btn:active{transform: translateY(1px)}
.btn.small{padding:9px 10px;font-size:13px;border-radius:12px}
.btn.primary{
  background: linear-gradient(180deg, rgba(0,183,255,0.36), rgba(0,183,255,0.10));
  border-color: rgba(0,183,255,0.60);
}
.btn.big{padding:14px 20px;font-size:15px}

.body{
  display:grid;
  grid-template-columns: 230px 1fr 200px;
  gap:16px;
  align-items:start;
  padding:18px 18px 22px;
}
.side{position:relative;}
.side.right{display:flex;align-items:flex-start;justify-content:center;padding-top:22px
  align-self: stretch;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.side.right .lever{margin-top:70px}
.side.left::before,.side.right::before{
  content:"";position:absolute;inset:14px 8px;border-radius:22px;
  background: linear-gradient(180deg, rgba(184,107,255,0.22), rgba(0,183,255,0.10));
  border:1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7);
}
.side.left::after,.side.right::after{
  content:"";position:absolute;inset:28px 18px;border-radius:18px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.08) 0 2px, rgba(0,0,0,0) 2px 10px);
  opacity:0.25;
}
.center{padding:0 8px}

.screen{
  position:relative;
  overflow:hidden;

  position:relative;border-radius:26px;
  background: linear-gradient(180deg, rgba(10,10,18,0.88), rgba(8,8,14,0.72));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.75);
  padding:18px 18px 22px;
  overflow:hidden;
}

#fxCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:0;
  display:none;
  z-index:1;
  border-radius:16px;
  mix-blend-mode: normal;
  backface-visibility:hidden;
  transform: translateZ(0);
}
#fxCanvas.on{opacity:1; display:block;}
#fxCanvas.on{opacity:1; display:block;}
#fxCanvas.on{opacity:1}

.reels{
  position:relative;
  z-index:2;

  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;padding:14px;border-radius:22px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55);
}
.reel{border-radius:18px;padding:10px 10px 12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.10);min-height:148px;}
.label{font-size:12px;color:var(--muted);margin-bottom:10px}
.window{
  position:relative;height:96px;border-radius:16px;
  border:1px solid rgba(255,255,255,0.18);
  background: radial-gradient(circle at 30% 30%, rgba(0,183,255,0.14), rgba(255,255,255,0.02));
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.55);
}
.window::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,0) 28%, rgba(0,0,0,0) 72%, rgba(0,0,0,.78));pointer-events:none;}
.value,.reel-item{
  /* Readable font for reels */
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.3px;
  text-align: center;
  padding: 0 10px;
  text-shadow: 0 12px 28px rgba(0,0,0,.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.1;
}
.reel-list{position:absolute;top:0;left:0;right:0;will-change:transform;}
.reel-item{height:96px;display:flex;align-items:center;justify-content:center;}
/* Team item layout inside reels */
.team-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.team-name{
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  max-width: 98%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
}
.team-stars{
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.4px;
  line-height: 1;
}


.banner{
  z-index:3;

  position:absolute;left:50%;top:18px;
  transform:translateX(-50%) translateY(-160px);
  width:min(740px, calc(100% - 140px));
  padding:14px 16px;border-radius:18px;
  border:1px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,204,51,0.22), rgba(255,255,255,0.07));
  box-shadow:0 16px 40px rgba(0,0,0,.62);
  text-align:center;transition:transform .28s ease;
  backdrop-filter: blur(10px);pointer-events:none;
}
.banner.show{transform:translateX(-50%) translateY(0px);}
.banner-text{font-family:Impact,Haettenschweiler,'Arial Black',sans-serif;letter-spacing:2px;font-size:46px;color:var(--gold);text-shadow:0 14px 34px rgba(0,0,0,.85);}

/* Lever */
.lever{position:absolute;right:10px;top:64px;width:110px;height:360px;pointer-events:none;}
.lever-slot{position:absolute;right:26px;top:120px;width:42px;height:170px;border-radius:22px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.10);box-shadow:inset 0 0 0 1px rgba(0,0,0,.9);}
.lever-housing{position:absolute;right:18px;top:172px;width:64px;height:120px;border-radius:14px;background:linear-gradient(180deg,#2a2a2a,#0e0e0e);border:1px solid #3a3a3a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), 0 18px 40px rgba(0,0,0,.65);}
.lever-housing::after{content:"";position:absolute;inset:10px;border-radius:12px;border:1px solid #1f1f1f;background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.10), rgba(255,255,255,0.02));}
.lever-rod{position:absolute;top:22px;right:44px;width:12px;height:270px;transform:rotate(-10deg);transform-origin:50% 240px;transition:transform .18s ease;pointer-events:none;}
.lever-rod::before{content:"";position:absolute;top:10px;left:50%;width:12px;height:235px;transform:translateX(-50%);border-radius:12px;background:linear-gradient(180deg,#dedede,#6f6f6f);border:1px solid #5a5a5a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);}
.lever-knob{pointer-events:auto;position:absolute;top:0;left:50%;transform:translateX(-50%);width:50px;height:50px;border-radius:999px;border:2px solid rgba(255,255,255,0.26);background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.30), rgba(255,0,0,0.74));box-shadow:0 12px 24px rgba(0,0,0,.78);}
.lever-rod.pulled{transform:rotate(34deg);}

/* Bottom panel */
.panel{
  margin-top:14px;border-radius:26px;background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6);
  padding:14px 14px;
  display:grid;grid-template-columns:190px 1fr 220px;align-items:center;gap:12px;
}
.panel-left{display:flex;gap:12px;align-items:center}
.coin-slot{width:86px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,0.16);background:linear-gradient(180deg, rgba(255,204,51,0.12), rgba(255,255,255,0.04));box-shadow:inset 0 0 0 1px rgba(0,0,0,.65);position:relative;}
.coin-slot::after{content:"";position:absolute;left:14px;right:14px;top:19px;height:6px;border-radius:10px;background:rgba(0,0,0,0.55);}
.speaker{width:86px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.04);box-shadow:inset 0 0 0 1px rgba(0,0,0,.65);position:relative;overflow:hidden;}
.speaker::before{content:"";position:absolute;inset:-10px;background:repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.10) 0 2px, rgba(0,0,0,0) 2px 8px);opacity:0.35;}
.panel-center{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.panel-right{display:flex;justify-content:flex-end}

/* Ball character */
.ball{
  will-change: transform;
position:relative;width:150px;height:150px;pointer-events:none;filter:drop-shadow(0 18px 34px rgba(0,0,0,.65));}
.ball-svg{position:absolute;inset:0;width:100%;height:100%;}
.shadow{position:absolute;left:28px;right:28px;bottom:-10px;height:18px;border-radius:999px;background:rgba(0,0,0,0.45);filter:blur(2px);transform:scale(0.95);}
.ball-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.eye{width:12px;height:12px;border-radius:999px;background:#111;position:absolute;top:60px;}
.eye.left{left:52px}.eye.right{right:52px}
.mouth{width:44px;height:18px;border-radius:0 0 18px 18px;background:#111;position:absolute;top:86px;}
.tongue{position:absolute;width:22px;height:18px;border-radius:0 0 14px 14px;background:rgba(255,66,133,0.95);top:98px;opacity:0;}

.stick-arm,.stick-leg{position:absolute;width:12px;background:#cfd3e6;border:1px solid rgba(0,0,0,0.15);border-radius:12px;}
.stick-arm{height:62px;top:76px;}
.stick-arm.left{left:-6px;transform-origin:50% 12px;}
.stick-arm.right{right:-6px;transform-origin:50% 12px;}
.stick-leg{height:42px;bottom:-8px;width:14px;}
.stick-leg.left{left:50px}
.stick-leg.right{right:50px}

.ball.idle{animation:idleBreathe 3.1s ease-in-out infinite;}
@keyframes idleBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.03)}}
.ball.blink .eye{animation:blink 0.22s ease-in-out 1;}
@keyframes blink{0%,100%{transform:scaleY(1)}50%{transform:scaleY(0.1)}}
.ball.wink .eye.right{animation:blink 0.22s ease-in-out 1;}
.ball.tongue .tongue{opacity:1;animation:tongue 0.8s ease-in-out 1;}
@keyframes tongue{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.ball.yawn .mouth{animation:yawn 1.2s ease-in-out 1;}
@keyframes yawn{0%{transform:scaleY(1)}40%{transform:scaleY(1.8)}100%{transform:scaleY(1)}}
.ball.puff{animation:puff 1.2s ease-in-out 1;}
@keyframes puff{0%{transform:scale(1)}30%{transform:scale(1.08)}100%{transform:scale(1)}}
.bubble{position:absolute;left:74px;top:34px;width:14px;height:14px;border-radius:999px;border:1px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.10);opacity:0;}
.ball.sleep .bubble{opacity:1;animation:bubble 1.8s ease-in-out infinite;}
@keyframes bubble{0%,100%{transform:scale(0.9);opacity:0.25}50%{transform:scale(1.25);opacity:0.65}}

.ball.happy{animation:ballDance 1.0s ease-in-out infinite;}
.ball.happy .stick-arm.left{animation:armWaveL .6s ease-in-out infinite;}
.ball.happy .stick-arm.right{animation:armWaveR .6s ease-in-out infinite;}
.ball.happy .stick-leg.left{animation:legKick .45s ease-in-out infinite;}
.ball.happy .stick-leg.right{animation:legKick2 .45s ease-in-out infinite;}
.ball.happy .mouth{height:22px;border-radius:0 0 28px 28px;}
@keyframes ballDance{0%,100%{transform:translateY(0) rotate(-6deg) scale(1)}25%{transform:translateY(-8px) rotate(6deg) scale(1.02)}50%{transform:translateY(0) rotate(-4deg) scale(1)}75%{transform:translateY(-10px) rotate(8deg) scale(1.03)}}
@keyframes armWaveL{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(30deg)}}
@keyframes armWaveR{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-30deg)}}
@keyframes legKick{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-18deg)}}
@keyframes legKick2{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(18deg)}}

.ball.sad{animation:ballSad 1.2s ease-in-out infinite;}
.ball.sad .mouth{height:14px;border-radius:18px 18px 0 0;transform:rotate(180deg);top:90px;}
.ball.sad .stick-arm.left{transform:rotate(65deg) translateY(-8px);}
.ball.sad .stick-arm.right{transform:rotate(-10deg);opacity:.6;}
@keyframes ballSad{0%,100%{transform:translateY(0) rotate(2deg) scale(1)}50%{transform:translateY(4px) rotate(-2deg) scale(0.98)}}

.foot{padding:12px 18px 16px;color:var(--muted);font-size:12px;}
code{background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:8px;border:1px solid rgba(255,255,255,0.10);}

@media (max-width: 1040px){
  /* Tablet & kleiner: Layout stapeln, Stern-Filter sichtbar lassen */
  .body{
    grid-template-columns: 1fr;
    gap:14px;
    padding:14px 14px 18px;
  }

  /* Filter oben anzeigen */
  .side.left{
    display:block;
    padding:14px 14px 12px;
  }
  .side.left::before{inset:10px 8px}
  .side.left::after{inset:22px 16px}

  /* Hebel auf kleinen Screens ausblenden (SPIN bleibt) */
  .side.right{display:none}
  .lever{display:none}

  /* Stern-Auswahl als kompakte Reihe */
  .filters-title,.filters-sub,.filters-hint{text-align:center}
  .star-options{
    display:grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap:10px;
    margin-top:10px;
  }
  .star-row{
    width:100%;
    justify-content:center;
    padding:10px 8px;
  }
  .star-row .stars{display:flex;justify-content:center}
  .star-row .star-label{min-width:auto}

  .panel{grid-template-columns:1fr}
  .panel-right{justify-content:center}

  .reels{
    position:relative;
    z-index:2;
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 560px){
  .reels{
  position:relative;
  z-index:2;
grid-template-columns:1fr}
  .marquee-inner{flex-wrap:wrap}
  .marquee-actions{width:100%;justify-content:flex-end}

  /* Buttons besser tappbar */
  .panel-center{flex-direction:column;align-items:stretch}
  .panel-center .btn{width:100%}
}

/* Extra-klein (sehr kleine Samsung-Displays) */
@media (max-width: 420px){
  .wrap{padding:10px}
  .cabinet{border-radius:22px}

  .marquee{padding:12px}
  .marquee-title{font-size:22px;letter-spacing:0.8px}
  .marquee-sub{font-size:12px;opacity:.9}
  .brand{width:46px;height:46px}

  .screen{padding:12px 12px 14px;border-radius:22px}
  .reel .label{font-size:11px}
  .window{height:56px}
  .reel-item{font-size:14px}

  .btn.small{padding:9px 10px}
  .btn.big{padding:12px 16px;font-size:15px}

  /* Overlay auf Mobile */
  .overlay-card{width:min(96vw, 560px);max-height:88vh}
  .overlay-body{padding:14px}
  .overlay-grid{grid-template-columns:1fr !important}
}

@media (max-width: 360px){
  /* Extra-small phones: make reel content easier to read while spinning */
  .window{height:52px}
  .reel-item{font-size:12px;height:82px}
  .reel[data-key$="_team"] .reel-item .team-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.team-name{font-size:12px;max-width:98%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal;overflow-wrap:normal;}
  .reel[data-key$="_team"] .reel-item .team-stars{font-size:11px;letter-spacing:0.5px;line-height:1;}
  .reel .label{font-size:10px}
}



/* More classic slot-machine cabinet look */
.cabinet{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.18);
}
.cabinet::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:32px;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(255,204,51,0.12), transparent 70%),
    radial-gradient(900px 520px at 50% 100%, rgba(0,183,255,0.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
  pointer-events:none;
  z-index:0;
}
.marquee{
  border:1px solid rgba(255,255,255,0.22);
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(255,255,255,0.06));
  box-shadow: 0 20px 60px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.55);
}
.marquee-title{
  font-size:34px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.center .screen{
  border:1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 24px 70px rgba(0,0,0,.6);
}
.reels{
  position:relative;
  z-index:2;

  background: rgba(0,0,0,0.28);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6);
}
.reel{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.20));
}

/* Star filter panel */
.filters{
  position:relative;
  z-index:1;
  width:100%;
}
.filters-title{
  font-weight:900;
  letter-spacing:0.6px;
  font-size:14px;
}
.filters-sub{
  color: rgba(255,255,255,0.70);
  font-size:12px;
  margin-top:2px;
  margin-bottom:10px;
}
.star-options{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.star-row{
  cursor:pointer;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color:#fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55);
}
.star-row[aria-pressed="true"]{
  border-color: rgba(255,204,51,0.60);
  background: rgba(255,204,51,0.12);
}
.stars{display:inline-flex; gap:2px; font-size:16px; line-height:1}
.star{color: rgba(255,255,255,0.20); text-shadow:0 10px 22px rgba(0,0,0,.8)}
.star.on{color: rgba(255,204,51,0.95)}
.star-label{
  font-weight:900;
  opacity:0.8;
  width:20px;
  text-align:right;
}
.filters-hint{
  margin-top:10px;
  font-size:12px;
  color: rgba(255,255,255,0.68);
}

/* Keep ball always visible (never fade) */
.ball{
  will-change: transform;
opacity:1 !important; visibility:visible !important; display:block !important;}

/* Side panels */
.side{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.10));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.65), 0 18px 45px rgba(0,0,0,0.45);
  overflow:hidden;
}
.side::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(420px 200px at 40% 20%, rgba(0,183,255,0.14), transparent 60%),
    radial-gradient(520px 260px at 70% 70%, rgba(184,107,255,0.12), transparent 70%);
  pointer-events:none;
}
.side.left{padding:14px 14px 12px}
.side.right{padding:14px 10px 12px; display:flex; align-items:flex-start; justify-content:center}

.stick-arm::after{
  content:"";
  position:absolute;
  width:12px; height:12px;
  border-radius:999px;
  background:#cfd3e6;
  border:1px solid rgba(0,0,0,0.18);
  top:-6px;
  left:-1px;
}
.stick-leg::after{
  content:"";
  position:absolute;
  width:14px; height:6px;
  border-radius:8px;
  background:#cfd3e6;
  border:1px solid rgba(0,0,0,0.18);
  bottom:-4px;
  left:-2px;
}

.screen{contain: paint; overflow:hidden;}
.reels{position:relative; z-index:2;}
.banner{z-index:3;}

/* ====== V7: Chrome cabinet + reel texture ====== */
.cabinet{
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
}
.cabinet::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:24px;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(255,255,255,0.08)),
    radial-gradient(900px 260px at 50% 0%, rgba(255,204,51,0.14), transparent 70%);
  mix-blend-mode: screen;
  opacity:0.7;
}
.screen{
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(0,183,255,0.20), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(10,10,18,0.94), rgba(8,8,14,0.86));
}
.reel .window{
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2MDAnIGhlaWdodD0nMjAwJz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0nZycgeDE9JzAnIHgyPScwJyB5MT0nMCcgeTI9JzEnPgo8c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyMxYTFiMjYnLz4KPHN0b3Agb2Zmc2V0PScwLjUnIHN0b3AtY29sb3I9JyMwYzBkMTQnLz4KPHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjMWExYjI2Jy8+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0nc2hpbmUnIHgxPScwJyB4Mj0nMSc+CjxzdG9wIG9mZnNldD0nMCcgc3RvcC1jb2xvcj0ncmdiYSgyNTUsMjU1LDI1NSwwKScvPgo8c3RvcCBvZmZzZXQ9JzAuNScgc3RvcC1jb2xvcj0ncmdiYSgyNTUsMjU1LDI1NSwwLjIwKScvPgo8c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9J3JnYmEoMjU1LDI1NSwyNTUsMCknLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8cmVjdCB3aWR0aD0nNjAwJyBoZWlnaHQ9JzIwMCcgZmlsbD0ndXJsKCNnKScvPgo8cmVjdCB3aWR0aD0nNjAwJyBoZWlnaHQ9JzIwMCcgZmlsbD0ndXJsKCNzaGluZSknIG9wYWNpdHk9JzAuNDUnLz4KPGcgb3BhY2l0eT0nMC4yNSc+CjxwYXRoIGQ9J00wIDQwIEg2MDAnIHN0cm9rZT0ncmdiYSgyNTUsMjU1LDI1NSwwLjI1KScvPgo8cGF0aCBkPSdNMCAxNjAgSDYwMCcgc3Ryb2tlPSdyZ2JhKDI1NSwyNTUsMjU1LDAuMjIpJy8+CjwvZz4KPC9zdmc+");
  background-size: cover;
  background-position:center;
}
.window::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.70), 0 10px 24px rgba(0,0,0,0.55);
  pointer-events:none;
}
.hud .title{ font-size:30px; letter-spacing:1.2px; }
.reel-item, .value{ font-size:24px; }
.marquee::before{ opacity:0.5; }

/* ====== V7 Jackpot FX ====== */
@keyframes cabinetShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-2px)}40%{transform:translateX(3px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.cabinet.shake{animation:cabinetShake .45s ease-in-out 2;}
.marquee.flash .marquee-text{color:var(--gold);text-shadow:0 0 18px rgba(255,204,51,0.8),0 14px 34px rgba(0,0,0,.8);}
.marquee.flash::before{opacity:0.7;}
.coin{position:absolute;width:14px;height:14px;border-radius:999px;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(255,204,51,0.95));border:1px solid rgba(255,255,255,0.22);box-shadow:0 10px 20px rgba(0,0,0,0.45);pointer-events:none;z-index:4;}

/* ====== V7 Ball polish ====== */
.ball{width:140px;height:140px;}
.stick-arm,.stick-leg{position:absolute;width:10px;background:#cfd3e6;border:1px solid rgba(0,0,0,0.15);border-radius:10px;}
.stick-arm{height:64px;top:70px;}
.stick-arm.left{left:-10px;transform-origin:50% 10px;}
.stick-arm.right{right:-10px;transform-origin:50% 10px;}
.stick-leg{height:44px;bottom:-14px;}
.stick-leg.left{left:48px;}
.stick-leg.right{right:48px;}
.shadow{position:absolute;left:50%;bottom:-18px;width:88px;height:22px;transform:translateX(-50%);background:radial-gradient(circle, rgba(0,0,0,0.45), rgba(0,0,0,0) 70%);}
.brow{position:absolute;width:22px;height:6px;background:#111;border-radius:8px;top:62px;opacity:0.85;}
.brow.left{left:52px;transform:rotate(-10deg);}
.brow.right{right:52px;transform:rotate(10deg);}
.ball.idle .stick-arm.left{animation:idleArmL 2.8s ease-in-out infinite;}
.ball.idle .stick-arm.right{animation:idleArmR 3.1s ease-in-out infinite;}
@keyframes idleArmL{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(16deg)}}
@keyframes idleArmR{0%,100%{transform:rotate(10deg)}50%{transform:rotate(-14deg)}}

.reel-item{display:flex;align-items:center;justify-content:center;text-align:center;}
.reel-item{font-size:26px;}
.value{font-size:26px;}

/* ===== V8: Glossy mascot ball ===== */
.ball{
  width:150px; height:150px;
  position:relative;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.55));
}
.ball-surface{
  position:absolute; inset:0;
  border-radius:999px;
  overflow:hidden;
}
.ball-pattern{width:100%; height:100%; display:block;}
.ball-gloss{
  position:absolute; inset:0;
  background:
    radial-gradient(120px 90px at 30% 20%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%),
    radial-gradient(140px 120px at 70% 80%, rgba(0,183,255,0.10), rgba(0,0,0,0) 65%);
  mix-blend-mode: screen;
  opacity:0.9;
}
.ball-sparkles{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 25% 38%, rgba(255,204,51,0.95) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at 34% 30%, rgba(255,255,255,0.90) 0 1px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at 70% 22%, rgba(0,183,255,0.75) 0 2px, rgba(0,0,0,0) 4px);
  opacity:0.35;
  animation: sparkle 3.5s ease-in-out infinite;
}
@keyframes sparkle{0%,100%{opacity:0.25; transform:translateY(0)}50%{opacity:0.5; transform:translateY(-1px)}}

.ball-face{position:absolute; inset:0; pointer-events:none;}
.eye{
  position:absolute; top:58px;
  width:18px; height:18px; border-radius:999px;
  background:#111420;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);
}
.eye.left{left:58px;}
.eye.right{right:58px;}
.pupil{
  position:absolute; left:5px; top:6px;
  width:6px; height:6px; border-radius:999px;
  background:#ffffff;
  opacity:0.9;
}
.cheek{
  position:absolute; top:78px;
  width:12px; height:8px; border-radius:999px;
  background: rgba(255,105,180,0.18);
  filter: blur(0.1px);
}
.cheek.left{left:44px;}
.cheek.right{right:44px;}

.mouth{
  position:absolute; left:50%; top:88px;
  width:34px; height:18px;
  transform: translateX(-50%);
  border-radius: 0 0 18px 18px;
  background: rgba(16,18,28,0.95);
  box-shadow: inset 0 -3px 0 rgba(255,255,255,0.06);
}
.tongue{
  position:absolute; left:50%; top:100px;
  width:18px; height:10px;
  transform: translateX(-50%);
  border-radius: 0 0 10px 10px;
  background: rgba(255,80,120,0.75);
  opacity:0;
}
.ball.wink .eye.right{height:5px; top:66px; border-radius:999px;}
.ball.wink .eye.right .pupil{display:none;}
.ball.wink .tongue{opacity:0.75;}
.ball.happy .mouth{height:20px; border-radius: 0 0 22px 22px;}
.ball.happy .tongue{opacity:0.85;}
.ball.sad .mouth{top:94px; height:10px; border-radius: 18px 18px 0 0;}
.ball.sad .tongue{opacity:0;}
.ball.sad .cheek{opacity:0.06;}

.ball.idle{animation: ballFloat 2.9s ease-in-out infinite;}
@keyframes ballFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.01)}}

.ball.idle .eye .pupil{animation: pupilMove 3.6s ease-in-out infinite;}
@keyframes pupilMove{0%,100%{transform:translate(0,0)}25%{transform:translate(1px,0)}50%{transform:translate(0,1px)}75%{transform:translate(-1px,0)}}

/* blink */
@keyframes blink{0%,92%,100%{transform:scaleY(1)}94%{transform:scaleY(0.12)}}
.ball.idle .eye{transform-origin:center; animation: blink 4.2s infinite;}
.ball.idle .eye.right{animation-delay:0.4s;}


.lever,.lever-rod,.lever-housing,.lever-slot{pointer-events:none;}
.lever .lever-knob{pointer-events:auto;}

.ball.tongue .tongue{opacity:0.85;}
.ball.yawn .mouth{width:44px;height:26px; top:84px; border-radius:0 0 24px 24px;}
.ball.puff{animation: puff 0.8s ease-in-out 1;}
@keyframes puff{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.ball.sleep{filter: grayscale(0.35) brightness(0.9) drop-shadow(0 14px 26px rgba(0,0,0,0.55));}
.ball.sleep .eye{transform:scaleY(0.18); top:66px;}
.ball.blink .eye{transform:scaleY(0.12);}

/* v9: reel readability */
.reel-item{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:700;
  letter-spacing:0.2px;
}

/* Team stars inside TEAM reels only (stacked for readability) */
.reel[data-key$="_team"] .reel-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.reel[data-key$="_team"] .reel-item .team-name{font-size:12px;max-width:98%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal;overflow-wrap:normal;}
.reel[data-key$="_team"] .reel-item .team-stars{font-size:11px;letter-spacing:0.5px;line-height:1;}
.reel[data-key$="_team"] .reel-item .team-stars .off{opacity:.25;}

/* Non-team reels stay centered */
.reel:not([data-key$="_team"]) .reel-item{justify-content:center;}

/* Overlay stars */
.overlay-teamline .stars-inline{margin-left:8px;font-weight:800;letter-spacing:1px;}
.overlay-teamline .stars-inline .off{opacity:.25;}

.overlay-teamstars{
  color: rgba(255, 212, 77, 0.98);
  font-weight: 900;
  letter-spacing: 1px;
}
.overlay-teamstars .off{opacity:.25;}

/* Stats panel */
.stats{margin:14px auto 0;max-width:980px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px 14px 10px;backdrop-filter: blur(6px);}
.stats-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.stats-title{font-weight:900;font-size:18px;}
.stats-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.stats-range{background:rgba(0,0,0,.25);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:8px 10px;}
.stats-note{font-size:12px;opacity:.8;margin-bottom:10px;}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px;}
.stats-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px;}
.stats-k{font-size:12px;opacity:.85;margin-bottom:4px;}
.stats-v{font-size:18px;font-weight:900;}
.stats-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.stats-list{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px;}
.stats-list-title{font-size:12px;opacity:.85;margin-bottom:6px;font-weight:800;}
.stats-mono{font-size:12px;white-space:normal;line-height:1.35;}



/* Stats: nicer rows + bars */
.row,.clickRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:10px;}
.row{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);}
.clickRow{cursor:pointer;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);}
.clickRow:hover{filter:brightness(1.08);}
.rowMain{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rowSide{font-weight:900;opacity:.95;}

.barRow{display:flex;align-items:center;gap:8px;margin:6px 0;}
.barLabel{width:34px;font-weight:900;}
.barTrack{flex:1;height:10px;background:rgba(255,255,255,.10);border-radius:8px;overflow:hidden;}
.barFill{display:block;height:100%;background:linear-gradient(90deg, rgba(120,220,255,.95), rgba(255,235,120,.95));border-radius:8px;}
.barValue{width:42px;text-align:right;font-weight:900;}
@media (max-width: 720px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stats-lists{grid-template-columns:1fr;}
}

/* v9: glossy mascot ball polish */
.ball{
  position:relative;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,0.55));
}
.ball::before{
  content:"";
  position:absolute;
  inset:10px 14px 20px 14px;
  border-radius:999px;
  background:
    radial-gradient(50px 40px at 30% 26%, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%),
    radial-gradient(120px 120px at 65% 70%, rgba(0,183,255,0.20), rgba(0,0,0,0) 68%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:0.9;
}
.ball::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background: radial-gradient(circle at 50% 60%, rgba(255,204,51,0.12), rgba(0,0,0,0) 60%);
  pointer-events:none;
}
.ball .sparkle{
  position:absolute;
  width:10px; height:10px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%);
  opacity:0;
  pointer-events:none;
}
@keyframes sparklePop{
  0%{transform:scale(0.2); opacity:0}
  20%{opacity:0.9}
  60%{opacity:0.65}
  100%{transform:scale(1.8); opacity:0}
}
.ball.idle{ animation: ballFloat 3.4s ease-in-out infinite; }
@keyframes ballFloat{
  0%,100%{transform: translateY(0) rotate(-1.5deg)}
  50%{transform: translateY(-6px) rotate(1.5deg)}
}
.ball.happy{ animation: ballHappy 0.9s ease-in-out infinite; }
@keyframes ballHappy{
  0%,100%{transform: translateY(0) scale(1)}
  50%{transform: translateY(-10px) scale(1.03)}
}
.ball.sad{ transform: translateY(2px) scale(0.98); filter: grayscale(0.10) drop-shadow(0 16px 22px rgba(0,0,0,0.55)); }

.ball .sparkle.s1{left:18px; top:22px;}
.ball .sparkle.s2{right:18px; top:38px;}
.ball .sparkle.s3{left:38px; bottom:26px;}

.reel-item{white-space:pre-line;line-height:1.05;font-size:24px;padding:0 10px;display:flex;align-items:center;justify-content:center;text-align:center;}
.value{white-space:pre-line;line-height:1.05;font-size:24px;padding:0 10px;}
.window{height:92px;}

/* ===== V10 Sprite Ball ===== */
.ball-sprite{
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1NjAnIGhlaWdodD0nMTQwJyB2aWV3Qm94PScwIDAgNTYwIDE0MCc+CjxkZWZzPgogIDxyYWRpYWxHcmFkaWVudCBpZD0nYmcnIGN4PSczNSUlJyBjeT0nMjglJScgcj0nNzAlJSc+CiAgICA8c3RvcCBvZmZzZXQ9JzAlJScgc3RvcC1jb2xvcj0nI2ZmZmZmZicvPgogICAgPHN0b3Agb2Zmc2V0PSc1NSUlJyBzdG9wLWNvbG9yPScjZTdlYWY3Jy8+CiAgICA8c3RvcCBvZmZzZXQ9JzEwMCUlJyBzdG9wLWNvbG9yPScjY2ZkM2U2Jy8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmFkaWFsR3JhZGllbnQgaWQ9J3NwZWMnIGN4PSczMCUlJyBjeT0nMjUlJScgcj0nNDUlJSc+CiAgICA8c3RvcCBvZmZzZXQ9JzAlJScgc3RvcC1jb2xvcj0ncmdiYSgyNTUsMjU1LDI1NSwwLjY1KScvPgogICAgPHN0b3Agb2Zmc2V0PScxMDAlJScgc3RvcC1jb2xvcj0ncmdiYSgyNTUsMjU1LDI1NSwwKScvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPGZpbHRlciBpZD0nc2gnIHg9Jy0yMCUlJyB5PSctMjAlJScgd2lkdGg9JzE0MCUlJyBoZWlnaHQ9JzE0MCUlJz4KICAgIDxmZURyb3BTaGFkb3cgZHg9JzAnIGR5PSc4JyBzdGREZXZpYXRpb249JzYnIGZsb29kLWNvbG9yPSdyZ2JhKDAsMCwwLDAuNDUpJy8+CiAgPC9maWx0ZXI+CjwvZGVmcz4KCiAgICA8ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgwIDApJz4KICAgICAgPGNpcmNsZSBjeD0nNzAnIGN5PSc3MCcgcj0nNjInIGZpbGw9J3VybCgjYmcpJyBmaWx0ZXI9J3VybCgjc2gpJy8+CiAgICAgIDxjaXJjbGUgY3g9JzcwJyBjeT0nNzAnIHI9JzU4JyBmaWxsPSdyZ2JhKDAsMTgzLDI1NSwwLjEwKScvPgogICAgICA8ZWxsaXBzZSBjeD0nNTInIGN5PSc0Nicgcng9JzIyJyByeT0nMTYnIGZpbGw9J3VybCgjc3BlYyknLz4KICAgICAgPGcgZmlsbD0nIzE1MTYxZicgb3BhY2l0eT0nMC45NSc+CiAgICAgICAgPHBhdGggZD0nTTcwIDM0IEw4NiA0NCBMODIgNjIgTDU4IDYyIEw1NCA0NCBaJy8+CiAgICAgICAgPHBhdGggZD0nTTU0IDQ0IEw0MCA1MCBMMzggNjggTDUwIDgyIEw1OCA2MiBaJyBvcGFjaXR5PScwLjkwJy8+CiAgICAgICAgPHBhdGggZD0nTTg2IDQ0IEwxMDAgNTAgTDEwMiA2OCBMOTAgODIgTDgyIDYyIFonIG9wYWNpdHk9JzAuOTAnLz4KICAgICAgPC9nPgogICAgICA8cGF0aCBkPSdNNTYgNTIgTDgyIDUyJyBzdHJva2U9J3JnYmEoMTcsMTcsMTcsMC43NSknIHN0cm9rZS13aWR0aD0nNicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJy8+PHBhdGggZD0nTTg4IDUyIEwxMTQgNTInIHN0cm9rZT0ncmdiYSgxNywxNywxNywwLjc1KScgc3Ryb2tlLXdpZHRoPSc2JyBzdHJva2UtbGluZWNhcD0ncm91bmQnLz4KICAgICAgPGNpcmNsZSBjeD0nNjgnIGN5PSc2NCcgcj0nMTAnIGZpbGw9JyMxMTEnLz48Y2lyY2xlIGN4PScxMDInIGN5PSc2NCcgcj0nMTAnIGZpbGw9JyMxMTEnLz48Y2lyY2xlIGN4PSc2NCcgY3k9JzYyJyByPSczJyBmaWxsPSdyZ2JhKDI1NSwyNTUsMjU1LDAuOSknLz48Y2lyY2xlIGN4PSc5OCcgY3k9JzYyJyByPSczJyBmaWxsPSdyZ2JhKDI1NSwyNTUsMjU1LDAuOSknLz4KICAgICAgPHBhdGggZD0nTTcwIDk4IEM4MiAxMDYsIDg4IDEwNiwgMTAwIDk4JyBzdHJva2U9JyMxMTEnIHN0cm9rZS13aWR0aD0nNycgZmlsbD0nbm9uZScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJy8+CiAgICA8L2c+CiAgICAKICAgIDxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDE0MCAwKSc+CiAgICAgIDxjaXJjbGUgY3g9JzcwJyBjeT0nNzAnIHI9JzYyJyBmaWxsPSd1cmwoI2JnKScgZmlsdGVyPSd1cmwoI3NoKScvPgogICAgICA8Y2lyY2xlIGN4PSc3MCcgY3k9JzcwJyByPSc1OCcgZmlsbD0ncmdiYSgwLDE4MywyNTUsMC4xMCknLz4KICAgICAgPGVsbGlwc2UgY3g9JzUyJyBjeT0nNDYnIHJ4PScyMicgcnk9JzE2JyBmaWxsPSd1cmwoI3NwZWMpJy8+CiAgICAgIDxnIGZpbGw9JyMxNTE2MWYnIG9wYWNpdHk9JzAuOTUnPgogICAgICAgIDxwYXRoIGQ9J003MCAzNCBMODYgNDQgTDgyIDYyIEw1OCA2MiBMNTQgNDQgWicvPgogICAgICAgIDxwYXRoIGQ9J001NCA0NCBMNDAgNTAgTDM4IDY4IEw1MCA4MiBMNTggNjIgWicgb3BhY2l0eT0nMC45MCcvPgogICAgICAgIDxwYXRoIGQ9J004NiA0NCBMMTAwIDUwIEwxMDIgNjggTDkwIDgyIEw4MiA2MiBaJyBvcGFjaXR5PScwLjkwJy8+CiAgICAgIDwvZz4KICAgICAgPHBhdGggZD0nTTU2IDUyIEw4MiA1Micgc3Ryb2tlPSdyZ2JhKDE3LDE3LDE3LDAuNzUpJyBzdHJva2Utd2lkdGg9JzYnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjxwYXRoIGQ9J004OCA1MiBMMTE0IDUyJyBzdHJva2U9J3JnYmEoMTcsMTcsMTcsMC43NSknIHN0cm9rZS13aWR0aD0nNicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJy8+CiAgICAgIDxyZWN0IHg9JzU0JyB5PSc2Micgd2lkdGg9JzI4JyBoZWlnaHQ9JzYnIHJ4PSczJyBmaWxsPScjMTExJy8+PHJlY3QgeD0nODgnIHk9JzYyJyB3aWR0aD0nMjgnIGhlaWdodD0nNicgcng9JzMnIGZpbGw9JyMxMTEnLz4KICAgICAgPHBhdGggZD0nTTcwIDk4IEM4MiAxMDYsIDg4IDEwNiwgMTAwIDk4JyBzdHJva2U9JyMxMTEnIHN0cm9rZS13aWR0aD0nNycgZmlsbD0nbm9uZScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJy8+CiAgICA8L2c+CiAgICAKICAgIDxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDI4MCAwKSc+CiAgICAgIDxjaXJjbGUgY3g9JzcwJyBjeT0nNzAnIHI9JzYyJyBmaWxsPSd1cmwoI2JnKScgZmlsdGVyPSd1cmwoI3NoKScvPgogICAgICA8Y2lyY2xlIGN4PSc3MCcgY3k9JzcwJyByPSc1OCcgZmlsbD0ncmdiYSgwLDE4MywyNTUsMC4xMCknLz4KICAgICAgPGVsbGlwc2UgY3g9JzUyJyBjeT0nNDYnIHJ4PScyMicgcnk9JzE2JyBmaWxsPSd1cmwoI3NwZWMpJy8+CiAgICAgIDxnIGZpbGw9JyMxNTE2MWYnIG9wYWNpdHk9JzAuOTUnPgogICAgICAgIDxwYXRoIGQ9J003MCAzNCBMODYgNDQgTDgyIDYyIEw1OCA2MiBMNTQgNDQgWicvPgogICAgICAgIDxwYXRoIGQ9J001NCA0NCBMNDAgNTAgTDM4IDY4IEw1MCA4MiBMNTggNjIgWicgb3BhY2l0eT0nMC45MCcvPgogICAgICAgIDxwYXRoIGQ9J004NiA0NCBMMTAwIDUwIEwxMDIgNjggTDkwIDgyIEw4MiA2MiBaJyBvcGFjaXR5PScwLjkwJy8+CiAgICAgIDwvZz4KICAgICAgCiAgICAgIDxjaXJjbGUgY3g9JzY4JyBjeT0nNjQnIHI9JzEwJyBmaWxsPScjMTExJy8+PGNpcmNsZSBjeD0nMTAyJyBjeT0nNjQnIHI9JzEwJyBmaWxsPScjMTExJy8+PGNpcmNsZSBjeD0nNjQnIGN5PSc2Micgcj0nMycgZmlsbD0ncmdiYSgyNTUsMjU1LDI1NSwwLjkpJy8+PGNpcmNsZSBjeD0nOTgnIGN5PSc2Micgcj0nMycgZmlsbD0ncmdiYSgyNTUsMjU1LDI1NSwwLjkpJy8+CiAgICAgIDxwYXRoIGQ9J002MiA4OCBDNzggMTA4LCA5MiAxMDgsIDEwOCA4OCcgc3Ryb2tlPScjMTExJyBzdHJva2Utd2lkdGg9JzgnIGZpbGw9J25vbmUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPgogICAgPC9nPgogICAgCiAgICA8ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg0MjAgMCknPgogICAgICA8Y2lyY2xlIGN4PSc3MCcgY3k9JzcwJyByPSc2MicgZmlsbD0ndXJsKCNiZyknIGZpbHRlcj0ndXJsKCNzaCknLz4KICAgICAgPGNpcmNsZSBjeD0nNzAnIGN5PSc3MCcgcj0nNTgnIGZpbGw9J3JnYmEoMCwxODMsMjU1LDAuMTApJy8+CiAgICAgIDxlbGxpcHNlIGN4PSc1MicgY3k9JzQ2JyByeD0nMjInIHJ5PScxNicgZmlsbD0ndXJsKCNzcGVjKScvPgogICAgICA8ZyBmaWxsPScjMTUxNjFmJyBvcGFjaXR5PScwLjk1Jz4KICAgICAgICA8cGF0aCBkPSdNNzAgMzQgTDg2IDQ0IEw4MiA2MiBMNTggNjIgTDU0IDQ0IFonLz4KICAgICAgICA8cGF0aCBkPSdNNTQgNDQgTDQwIDUwIEwzOCA2OCBMNTAgODIgTDU4IDYyIFonIG9wYWNpdHk9JzAuOTAnLz4KICAgICAgICA8cGF0aCBkPSdNODYgNDQgTDEwMCA1MCBMMTAyIDY4IEw5MCA4MiBMODIgNjIgWicgb3BhY2l0eT0nMC45MCcvPgogICAgICA8L2c+CiAgICAgIDxwYXRoIGQ9J001NiA1NCBMODIgNTAnIHN0cm9rZT0nIzExMScgc3Ryb2tlLXdpZHRoPSc3JyBzdHJva2UtbGluZWNhcD0ncm91bmQnLz48cGF0aCBkPSdNMTE0IDU0IEw4OCA1MCcgc3Ryb2tlPScjMTExJyBzdHJva2Utd2lkdGg9JzcnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPgogICAgICA8Y2lyY2xlIGN4PSc2OCcgY3k9JzY0JyByPScxMCcgZmlsbD0nIzExMScvPjxjaXJjbGUgY3g9JzEwMicgY3k9JzY0JyByPScxMCcgZmlsbD0nIzExMScvPjxjaXJjbGUgY3g9JzY0JyBjeT0nNjInIHI9JzMnIGZpbGw9J3JnYmEoMjU1LDI1NSwyNTUsMC45KScvPjxjaXJjbGUgY3g9Jzk4JyBjeT0nNjInIHI9JzMnIGZpbGw9J3JnYmEoMjU1LDI1NSwyNTUsMC45KScvPgogICAgICA8cGF0aCBkPSdNNjIgMTA0IEM3OCA5MCwgOTIgOTAsIDEwOCAxMDQnIHN0cm9rZT0nIzExMScgc3Ryb2tlLXdpZHRoPSc4JyBmaWxsPSdub25lJyBzdHJva2UtbGluZWNhcD0ncm91bmQnLz4KICAgIDwvZz4KICAgIAo8L3N2Zz4=");
  background-size:400% 100%;
  background-position:0% 0%;
  border-radius:999px;
}
.ball.idle .ball-sprite{ animation: ballIdleFrames 3.2s infinite; }
@keyframes ballIdleFrames{
  0%,55%{background-position:0% 0%}
  60%{background-position:33.333% 0%}
  65%{background-position:0% 0%}
  100%{background-position:0% 0%}
}
.ball.happy .ball-sprite{ background-position:66.666% 0%; }
.ball.sad .ball-sprite{ background-position:100% 0%; }

/* V12: force 2-line reel items */
.reel-item, .value{
  white-space: pre-line !important;
  line-height: 1.05 !important;
}
.window{ height: 92px !important; }
.reel-item{ height: 92px !important; font-size: 22px !important; padding: 0 8px !important; }

/* V12: 24-frame glossy ball sprite (pinned) */
#ball{position:absolute;left:24px;bottom:18px;z-index:50;pointer-events:none;}
.ball.sprite{width:140px;height:140px;border-radius:999px;position:absolute;}
.ball.sprite .spriteLayer{
  position:absolute;inset:0;
  background-image:url("../assets/img/ball_sprite_24.png");
  background-repeat:no-repeat;
  background-size:calc(24 * 100%) 100%;
  animation: ballIdle 1.25s steps(24) infinite;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.55));
}
.ball.sprite .sparkleLayer{
  position:absolute;inset:-12px;border-radius:999px;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.30), rgba(255,255,255,0) 55%);
  opacity:0.7;mix-blend-mode:screen;
  animation: sparklePulse 2.4s ease-in-out infinite;
}
@keyframes ballIdle{from{background-position:0% 0%}to{background-position:100% 0%}}
@keyframes sparklePulse{0%,100%{transform:scale(1);opacity:0.55}50%{transform:scale(1.04);opacity:0.9}}
.ball.happy .spriteLayer{animation-duration:.75s;}
.ball.sad .spriteLayer{animation-duration:1.7s;filter:drop-shadow(0 14px 18px rgba(0,0,0,0.55)) saturate(0.85) brightness(0.95);}

.cabinet{position:relative;}


/* ===== V13 fixes ===== */
.reel-item{ white-space: pre-line !important; }
.window{ height: 96px !important; }
.reel-item{ height: 96px !important; font-size: 22px !important; line-height: 1.05 !important; }

#ball{
  position:absolute !important;
  left: 26px !important;
  bottom: 16px !important;
  z-index: 99 !important;
  width: 140px; height: 140px;
  pointer-events: none;
}
.ball.sprite .spriteLayer{
  position:absolute; inset:0;
  background-image: url("../assets/img/ball_sprite_24.png");
  background-repeat:no-repeat;
  background-size: calc(24 * 100%) 100%;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.55));
  animation: ballIdle 1.15s steps(24) infinite;
}
@keyframes ballIdle{
  from { background-position: 0% 0%; }
  to   { background-position: 100% 0%; }
}
.ball.sprite .sparkleLayer{
  position:absolute; inset:-12px; border-radius:999px;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.25), rgba(255,255,255,0) 55%);
  opacity:0.65; mix-blend-mode: screen;
  animation: sparklePulse 2.5s ease-in-out infinite;
}
@keyframes sparklePulse{ 0%,100%{transform:scale(1);opacity:.55} 50%{transform:scale(1.04);opacity:.9} }
.ball .sparkle{
  position:absolute; width:10px;height:10px;border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%);
  opacity:0; transform: scale(0.6);
}
.ball .sparkle1{left:22px;top:18px}
.ball .sparkle2{right:26px;top:30px}
.ball .sparkle3{left:34px;bottom:28px}
.ball.pop .sparkle{animation: popSpark .55s ease-out forwards;}
@keyframes popSpark{0%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}

/* keep lever clickable/visible */
#leverBtn{ pointer-events:auto; }
.side.right{ z-index: 20; }

/* V14: hard-force two-line reel text */
.reel-item, .reel .reel-item, .window .reel-item, .value{
  white-space: pre-line !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reel .window{ height: 96px !important; }
.reel-item{ height:96px !important; font-size:22px !important; line-height:1.05 !important; padding: 0 10px !important; }

/* Keep lever clickable */
.side.right{ z-index: 50; }
#leverBtn{ position:relative; z-index: 60; pointer-events:auto; }

/* Reels layout: 2 oben zentriert, 3 unten */
.reels-top,
.reels-mid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:16px;}
.reels-bot{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.reels-top{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:16px;}
.reels-mid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:16px;}
.reels-bot{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.reels-top .reel{ width: min(320px, 48%); }
.reels-bottom .reel{ width: min(260px, 31%); }

.reel .window{
  height: 106px !important;
  border-radius:16px !important;
  overflow:hidden !important;
}
.reel-list{
  will-change: transform;
}
.reel-item{
  height:106px !important;
  padding:10px 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space: pre-line !important;
  line-height: 1.08 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
}

.cabinet{position:relative;}

/* Ball Character pinned inside cabinet */
#ball{
  position:absolute !important;
  right: 26px !important;
  bottom: 18px !important;
  left: auto !important;
  z-index: 40 !important;
}

/* Ball character visuals + 24-step animations */
.ballChar{width:170px;height:170px;position:absolute;pointer-events:none;filter: drop-shadow(0 16px 26px rgba(0,0,0,.55));}
.ballChar .ballSvgWrap{position:absolute;inset:0;border-radius:50%;overflow:hidden;}
.ballChar .ballSvg{width:100%;height:100%;display:block;transform: rotate(0deg);}
.ballChar .face{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);display:flex;gap:18px;align-items:center;justify-content:center;}
.ballChar .eye{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow: inset 0 -3px 0 rgba(0,0,0,.15);position:relative;}
.ballChar .pupil{position:absolute;left:7px;top:7px;width:8px;height:8px;border-radius:50%;background:#0b111b;}
.ballChar .mouth{position:absolute;left:50%;top:36px;transform:translateX(-50%);width:38px;height:18px;border-radius:0 0 20px 20px;border:3px solid rgba(0,0,0,.55);border-top:none;}
.ballChar .tongue{position:absolute;left:50%;top:49px;transform:translateX(-50%);width:18px;height:10px;border-radius:0 0 12px 12px;background:#ff4f8a;opacity:0;}

.ballChar .limb{position:absolute;background:linear-gradient(180deg, rgba(240,240,240,.95), rgba(180,190,210,.85));box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);}
.ballChar .arm{width:14px;height:44px;border-radius:10px;top:92px;}
.ballChar .arm.left{left:-6px;transform:rotate(20deg);}
.ballChar .arm.right{right:-6px;transform:rotate(-20deg);}
.ballChar .leg{width:16px;height:48px;border-radius:10px;top:132px;}
.ballChar .leg.left{left:54px;transform:rotate(10deg);}
.ballChar .leg.right{right:54px;transform:rotate(-10deg);}
.ballChar .ballShadow{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:120px;height:30px;border-radius:50%;background:rgba(0,0,0,.35);filter: blur(10px);}

@keyframes ballBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ballRotateSteps{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes ballBlink{0%,92%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}96%{transform:scaleY(1)}}
@keyframes ballWave{0%,100%{transform:rotate(20deg)}50%{transform:rotate(55deg)}}

.ballChar.idle{animation: ballBob 1.9s ease-in-out infinite;}
.ballChar.idle .ballSvg{animation: ballRotateSteps 2.4s steps(24) infinite;}
.ballChar.idle .eye{animation: ballBlink 4.4s linear infinite;}
.ballChar.idle .arm.right{animation: ballWave 2.2s ease-in-out infinite;transform-origin: 50% 10%;}

.ballChar.happy .mouth{border-color: rgba(0,0,0,.6);width:44px;height:22px;border-radius:0 0 26px 26px;}
.ballChar.happy .tongue{opacity:1;}
.ballChar.happy{animation: ballBob .9s ease-in-out infinite;}

.ballChar.sad .mouth{top:30px;border-top:3px solid rgba(0,0,0,.55);border-bottom:none;border-radius:20px 20px 0 0;height:14px;}
.ballChar.sad .arm.right{animation:none;transform:rotate(-40deg);top:98px;}
.ballChar.sad .arm.left{transform:rotate(40deg);top:98px;}

.lever{z-index:40;position:relative;}
.lever-knob{cursor:pointer;}


/* --- Ball sprite (24 frames) --- */
.ballChar{
  position:absolute;
  right:10px;
  bottom:10px;
  width:140px;
  height:140px;
  z-index:50;
  pointer-events:none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
.ballChar .ballSprite{
  width:100%;
  height:100%;
  background-image:url("../assets/ball_sprite.png");
  background-size:2400% 100%; /* 24 frames */
  background-position:0% 0%;
  animation: ballSpriteIdle 1.8s steps(24) infinite;
}
@keyframes ballSpriteIdle{
  from{ background-position:0% 0%; }
  to{ background-position:100% 0%; }
}
.ballChar.happy .ballSprite{ animation-duration: 1.1s; }
.ballChar.sad .ballSprite{ animation-duration: 2.6s; filter: grayscale(.2) brightness(.95); }


/* ---- Overlay result modal ---- */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;}
.overlay.hidden{display:none;}
.overlay-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter: blur(6px);}
.overlay-card{position:relative;width:min(920px,92vw);border-radius:24px;padding:18px 18px 14px;
  background: radial-gradient(circle at 20% 15%, rgba(0,183,255,.22), rgba(255,255,255,.03) 55%, rgba(0,0,0,.55));
  border:1px solid rgba(255,255,255,.18); box-shadow: 0 28px 70px rgba(0,0,0,.65), inset 0 0 0 2px rgba(0,0,0,.55);
  overflow:hidden;
}
.overlay-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.overlay-title{font-size:22px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;}
.overlay-grid{display:grid;grid-template-columns: repeat(5, minmax(0,1fr)); gap:10px;}
@media (max-width: 760px){ .overlay-grid{grid-template-columns: repeat(2, minmax(0,1fr));} }
.overlay-item{border-radius:16px;padding:12px 12px 10px;
  background: rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.16);
}
.overlay-item .k{opacity:.75;font-size:12px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px;}
.overlay-item .v{font-family:Impact,Haettenschweiler,'Arial Black',sans-serif;font-size:22px;line-height:1.05;white-space:pre-line;}
.overlay-item.strike{opacity:.55}
.overlay-item.strike .k,.overlay-item.strike .v{text-decoration:line-through;}
.overlay-hint{opacity:.65;margin-top:10px;font-size:12px;text-align:center;}
#overlayFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:.9;}

/* Reel alignment + disabled league */
.reel.disabled{opacity:.55;filter:saturate(.7);}
.reel.disabled .label{text-decoration:line-through;}
.reel.disabled .window{box-shadow: inset 0 0 0 2px rgba(0,0,0,.55), inset 0 0 18px rgba(255,50,50,.10);}
.reel-item{height:92px;display:flex;align-items:center;justify-content:center;}
.window{height:96px;}


/* v19 overlay layout */
.overlay-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:stretch;
}
.overlay-teamblock{
  flex: 1 1 260px;
  padding:12px 14px;
  border-radius:14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
}
.overlay-teamtitle{
  font-weight:800;
  letter-spacing:0.04em;
  opacity:0.9;
  margin-bottom:6px;
}
.overlay-teamline{
  font-size:18px;
  font-weight:700;
}
.overlay-vs{
  flex: 0 0 auto;
  align-self:center;
  font-weight:900;
  font-size:18px;
  opacity:0.9;
  padding:0 6px;
}
.reel-disabled .window{
  opacity:0.55;
}
.reel-disabled .label{
  text-decoration: line-through;
  opacity:0.8;
}


/* --- FiFru Bandit v20 overrides: stabilize reel layout + centering --- */
:root{
  --reel-item-h: 36px;
  --reel-window-h: calc(var(--reel-item-h) * 3);
}

/* ensure 3 rows are actually visible and spaced */
.reels{ display:flex; flex-direction:column; gap:14px; width:100%; }
.reels-top{ display:flex; justify-content:center; gap:18px; }
.reels-mid, .reels-bot{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; }

/* consistent reel dimensions */
.reel{ min-width:0; }
.reel .window{ height: var(--reel-window-h) !important; overflow:hidden; position:relative; }
.reel .list{ will-change: transform; }
.reel .item{
  height: var(--reel-item-h) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 10px;
  text-align:center;
  white-space: normal;
  line-height: 1.05;
  word-break: break-word;
}

/* central highlight line */
.reel .center-line{
  position:absolute;
  left:10px; right:10px;
  top: calc(var(--reel-item-h));
  height: var(--reel-item-h);
  border-radius: 10px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.15));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* overlay stronger */
.overlay-backdrop{ background: rgba(0,0,0,0.65) !important; }
.overlay-card{ background: rgba(20,30,40,0.92) !important; }

/* avoid accidental CSS parse breaks from earlier truncated rule */
.reels-bottom{ height:auto !important; }

/* =============================
   Result overlay + Lever pull
   ============================= */
.overlay.hidden{display:none;}
.overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
}
.overlay-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.70);
  backdrop-filter: blur(2px);
}
.overlay-card{
  position:relative;
  z-index:2;
  width:min(920px, calc(100vw - 32px));
  background:rgba(10,20,28,.92);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  border-radius:18px;
  padding:18px 18px 14px;
}
.overlay-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.overlay-title{font-weight:800; letter-spacing:.06em;}
.overlay-close{
  width:34px;height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}
.overlay-grid{display:grid; gap:10px;}
.overlay-row{display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; justify-content:center;}
.overlay-chip{
  flex:1 1 150px;
  min-width:150px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.overlay-chip small{display:block; opacity:.7; font-size:11px; letter-spacing:.08em;}
.overlay-chip div{font-weight:700; font-size:18px; line-height:1.15; margin-top:4px;}
.overlay-vs{
  font-weight:900;
  letter-spacing:.18em;
  opacity:.9;
  align-self:center;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.overlay-note{opacity:.75; text-align:center; margin-top:8px; font-size:12px;}

/* --- v22: Ergebnis-Overlay spacing (avoid overlap) --- */
#overlayGrid{display:flex;flex-direction:column;gap:18px;}
#overlayGrid .overlay-row{display:flex;flex-wrap:wrap;gap:18px;align-items:stretch;justify-content:center;}
#overlayGrid .overlay-chip{flex:1 1 200px;min-width:180px;}
#overlayGrid .overlay-teamblock{flex:1 1 320px;min-width:260px;}
#overlayGrid .overlay-vs{flex:0 0 auto;margin:auto 0;}

/* --- v22: One-armed-bandit lever animation (leverRod) --- */
#leverRod.pull-anim{
  animation: leverPull 0.52s ease-in-out 0s 1;
}
@keyframes leverPull{
  0%   { transform: rotate(-10deg); }
  35%  { transform: rotate(34deg); }
  60%  { transform: rotate(18deg); }
  100% { transform: rotate(-10deg); }
}


/* ===== v28 Special Modes FX ===== */
.reel.stop-punch{animation: reelPunch 220ms ease-out 1;}
@keyframes reelPunch{0%{transform:translateY(0) scale(1);}60%{transform:translateY(-2px) scale(1.03);}100%{transform:translateY(0) scale(1);}}

body.mode-holy .cabinet{box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 50px rgba(255,215,120,0.20);}
body.mode-holy .marquee{filter:saturate(1.2) brightness(1.05);}
body.mode-holy .screen:before{content:"";position:absolute;inset:-20px;border-radius:34px;background:radial-gradient(circle at 30% 20%, rgba(255,215,120,.18), transparent 55%),radial-gradient(circle at 70% 80%, rgba(180,220,255,.12), transparent 60%);pointer-events:none;}

body.mode-ohno .cabinet{box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 50px rgba(255,60,60,0.16);}
body.mode-ohno .marquee{filter:grayscale(0.2) saturate(0.9) brightness(0.95);}

.reel.holy-target{border-color:rgba(255,215,120,0.55) !important;box-shadow:0 0 0 1px rgba(255,215,120,0.35), 0 0 18px rgba(255,215,120,0.25) !important;}
.reel.holy-target .window{position:relative;}
.reel.holy-target .window:after{content:"";position:absolute;inset:-14px;border-radius:24px;background:conic-gradient(from 0deg, rgba(255,215,120,0.0), rgba(255,215,120,0.22), rgba(255,215,120,0.0));filter:blur(10px);animation: holySpin 1.1s linear infinite;pointer-events:none;}
@keyframes holySpin{to{transform:rotate(360deg);}}

.reel.ohno-target{border-color:rgba(255,70,70,0.55) !important;box-shadow:0 0 0 1px rgba(255,70,70,0.35), 0 0 18px rgba(255,70,70,0.25) !important;}
.reel.ohno-target .window:after{content:"";position:absolute;inset:-10px;border-radius:24px;background:radial-gradient(circle at 50% 50%, rgba(255,70,70,0.20), transparent 60%);filter:blur(10px);pointer-events:none;}

/* ------------------------------
   Stats panel
-------------------------------- */
.stats{margin:14px auto 6px;max-width:980px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:14px 14px 16px;box-shadow:0 14px 40px rgba(0,0,0,.35);backdrop-filter:blur(6px);} 
.stats-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.stats-title{font-weight:900;letter-spacing:.5px;font-size:18px;}
.stats-actions{display:flex;align-items:center;gap:8px;}
.stats-range{border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;}
.stats-note{opacity:.8;font-size:12px;margin:4px 0 10px;}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:10px;}
.stats-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px 12px;}
.stats-k{opacity:.8;font-size:12px;margin-bottom:2px;}
.stats-v{font-weight:900;font-size:18px;}
.stats-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.stats-list{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px 12px;min-height:64px;}
.stats-list-title{font-weight:800;font-size:13px;opacity:.9;margin-bottom:6px;}
.stats-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px;white-space:pre-wrap;line-height:1.25;}

.overlay-stars{margin-left:8px;display:inline-block;font-weight:900;letter-spacing:1px;;color: rgba(255, 212, 77, 0.98)}
.overlay-stars .off{opacity:.25;}

@media (max-width: 720px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stats-lists{grid-template-columns:1fr;}
}


/* Bulbs marquee (sequential during spin) */
.bulbs{margin:10px auto 0;height:14px;width:min(980px, calc(100% - 18px));display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 8px;}
.bulb{width:10px;height:10px;border-radius:50%;opacity:.45;transform:scale(1);filter:drop-shadow(0 0 4px currentColor);transition:opacity .12s linear, transform .12s linear, filter .12s linear;}
.bulb.on{opacity:1;transform:scale(1.45);filter:brightness(4.2) saturate(1.35) drop-shadow(0 0 56px currentColor) drop-shadow(0 0 26px currentColor);box-shadow:0 0 52px currentColor, 0 0 22px rgba(255,255,255,.35);}
.bulb:nth-child(4n+1){color:rgba(255,204,51,0.95);background:currentColor;}
.bulb:nth-child(4n+2){color:rgba(0,183,255,0.95);background:currentColor;}
.bulb:nth-child(4n+3){color:rgba(184,107,255,0.95);background:currentColor;}
.bulb:nth-child(4n+4){color:rgba(255,59,59,0.95);background:currentColor;}
.bulbs.spinning .bulb{opacity:.45;}
.bulbs.spinning .bulb.on{opacity:1;transform:scale(1.45);filter:brightness(4.2) saturate(1.35) drop-shadow(0 0 56px currentColor) drop-shadow(0 0 26px currentColor);box-shadow:0 0 52px currentColor, 0 0 22px rgba(255,255,255,.35);}

/* --- Karneval Modus --- */
body.mode-carnival .cabinet{
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12),
              0 0 70px rgba(255,120,220,0.22),
              0 0 70px rgba(120,220,255,0.18);
}
body.mode-carnival .marquee{filter:saturate(1.35) brightness(1.08) contrast(1.05);}

body.mode-carnival .screen:before{
  content:"";
  position:absolute;
  inset:-22px;
  border-radius:34px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,120,220,.18), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(120,220,255,.16), transparent 55%),
    radial-gradient(circle at 45% 85%, rgba(255,215,120,.14), transparent 55%);
  pointer-events:none;
  animation:carnivalHue 2.2s linear infinite;
}
body.mode-carnival .screen:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  pointer-events:none;
  background:
    conic-gradient(from 0deg,
      rgba(255,80,160,.18),
      rgba(120,220,255,.16),
      rgba(120,255,160,.14),
      rgba(255,215,120,.16),
      rgba(200,120,255,.16),
      rgba(255,80,160,.18)),
    repeating-linear-gradient(120deg,
      rgba(255,80,160,.0) 0px,
      rgba(255,80,160,.0) 12px,
      rgba(255,80,160,.10) 12px,
      rgba(255,80,160,.10) 16px),
    repeating-linear-gradient(60deg,
      rgba(80,200,255,.0) 0px,
      rgba(80,200,255,.0) 14px,
      rgba(80,200,255,.09) 14px,
      rgba(80,200,255,.09) 18px),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), transparent 55%);
  mix-blend-mode:screen;
  opacity:.75;
  animation:carnivalConfetti 900ms linear infinite;
}
@keyframes carnivalHue{
  0%{filter:hue-rotate(0deg) saturate(1.2);}
  100%{filter:hue-rotate(360deg) saturate(1.2);}
}
@keyframes carnivalConfetti{
  0%{transform:translateY(-6px);}
  100%{transform:translateY(6px);}
}




/* --- Mode Badge (2s) --- */

/* --- Mode Badge (fullscreen) --- */
#modeBadge{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  font-weight:1000;
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-size:clamp(34px, 8vw, 96px);
  line-height:1.05;
  opacity:0;
  pointer-events:none;
  transform:scale(1.02);
  backdrop-filter: blur(10px);
  transition:opacity .22s ease, transform .22s ease;
}
#modeBadge.show{
  opacity:1;
  transform:scale(1);
}
#modeBadge.badge-holy{
  background:
    radial-gradient(circle at 30% 25%, rgba(255,235,180,.45), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(150,210,255,.28), transparent 60%),
    rgba(10,12,16,.55);
  color:rgba(255,245,210,0.98);
  text-shadow:0 0 22px rgba(255,215,120,.35), 0 0 55px rgba(150,210,255,.18);
}
#modeBadge.badge-ohno{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,80,80,.22), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(255,0,0,.16), transparent 60%),
    rgba(8,8,10,.70);
  color:rgba(255,210,210,0.98);
  text-shadow:0 0 26px rgba(255,70,70,.35);
}
#modeBadge.badge-carnival{
  background:
    conic-gradient(from 180deg, rgba(255,70,200,.26), rgba(70,220,255,.22), rgba(255,230,90,.22), rgba(150,255,110,.22), rgba(255,70,200,.26)),
    rgba(10,10,12,.55);
  color:rgba(255,255,255,0.98);
  text-shadow:0 0 26px rgba(255,255,255,.20), 0 0 70px rgba(255,70,200,.16);
}
#modeBadge.badge-derby{
  background:
    radial-gradient(circle at 35% 35%, rgba(180,120,255,.28), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(80,180,255,.22), transparent 60%),
    rgba(8,10,14,.65);
  color:rgba(240,240,255,0.98);
  text-shadow:0 0 26px rgba(160,120,255,.35), 0 0 60px rgba(80,180,255,.18);
}

/* League Match badge */
#modeBadge.badge-league{
  background: radial-gradient(circle at 30% 30%, rgba(120,255,190,.65), rgba(20,120,255,.25));
  border: 2px solid rgba(170,255,230,.55);
  box-shadow: 0 0 32px rgba(80,220,255,.35), 0 0 90px rgba(120,255,190,.18);
  color: #eafff7;
  text-shadow: 0 0 14px rgba(120,255,210,.45);
}

@media (max-width:360px){
  #modeBadge{font-size:12px;padding:9px 12px;top:10px;}
}

#confettiCanvas{position:fixed;inset:0;pointer-events:none;z-index:55;}


/* --- Fullscreen FX overlays for modes --- */
body.mode-holy::before,
body.mode-ohno::before,
body.mode-carnival::before,
body.mode-derby::before{
  content:"";
  position:fixed;
  inset:-20px;
  pointer-events:none;
  z-index:2000; /* below badge/overlay */
  opacity:0;
  transition:opacity .25s ease;
}

body.mode-holy::before{
  opacity:1;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,215,120,.18), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(150,210,255,.14), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(255,235,180,.08), transparent 70%);
  mix-blend-mode: screen;
  filter: saturate(1.15) brightness(1.05);
}

body.mode-ohno::before{
  opacity:1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,40,40,.20), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(255,0,0,.12), transparent 65%),
    radial-gradient(circle at 80% 20%, rgba(120,0,0,.10), transparent 70%),
    linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  mix-blend-mode: multiply;
  filter: saturate(1.2) contrast(1.05);
}

body.mode-carnival::before{
  opacity:1;
  background:
    conic-gradient(from 0deg, rgba(255,70,200,.14), rgba(70,220,255,.12), rgba(255,230,90,.12), rgba(150,255,110,.12), rgba(255,70,200,.14)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, rgba(0,0,0,0) 10px 20px);
  mix-blend-mode: screen;
  filter: saturate(1.35) brightness(1.06);
  animation: carnivalHue 2.4s linear infinite;
}

@keyframes carnivalHue{
  0%{filter:saturate(1.35) brightness(1.06) hue-rotate(0deg);}
  100%{filter:saturate(1.35) brightness(1.06) hue-rotate(360deg);}
}

body.mode-derby::before{
  opacity:1;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,60,120,.22), transparent 55%),
    radial-gradient(circle at 82% 70%, rgba(60,170,255,.20), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 70%),
    linear-gradient(120deg, rgba(255,90,90,.12), rgba(90,180,255,.12));
  mix-blend-mode: screen;
  filter: saturate(1.35) contrast(1.08) brightness(1.04);
  animation: derbyPulse 0.95s ease-in-out infinite alternate;
}

@keyframes derbyPulse{
  from{ transform: scale(1); opacity: 0.92; }
  to  { transform: scale(1.02); opacity: 1; }
}

body.mode-league::before{
  content:"";
  position:fixed;
  inset:-20px;
  pointer-events:none;
  z-index:2000;
  opacity:1;
  background:
    radial-gradient(circle at 20% 25%, rgba(120,255,190,.22), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(40,180,255,.18), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 70%),
    linear-gradient(135deg, rgba(60,255,160,.12), rgba(30,140,255,.12)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 10px, rgba(255,255,255,0) 10px 20px);
  mix-blend-mode: screen;
  filter: saturate(1.35) brightness(1.08) contrast(1.07);
  animation: leaguePulse 1.1s ease-in-out infinite alternate;
}

@keyframes leaguePulse{
  from { transform: scale(1); }
  to   { transform: scale(1.015); }
}
/* Extra small phones: keep reel text readable (avoid letter-by-letter wrapping) */
@media (max-width: 420px){
  .value,.reel-item{font-size:14px;letter-spacing:0.2px;word-break:normal;overflow-wrap:normal;white-space:nowrap;}
  .team-name{font-size:12px;max-width:100%;}
  .team-stars{font-size:10px;}
  .team-stars{font-size:10px;}
}
@media (max-width: 360px){
  .value,.reel-item{font-size:12px;letter-spacing:0.15px;}
  .team-name{font-size:12px;}
  .team-stars{font-size:9px;}
}

@media (min-width: 900px){
  .reel-item{font-size:22px;}
  .team-name{font-size:18px;}
  .team-stars{font-size:14px;}
}


/* Reel stop "bump" to help readability + tension */
.reel.reel-bump, .reel-bump{
  animation: reelBump 520ms ease-out;
}
@keyframes reelBump{
  0%   { transform: scale(1); filter: brightness(1); }
  35%  { transform: scale(1.08); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); }
}


/* ===== EVENT REEL HIGHLIGHT PATCH ===== */
.reel.holy{
  background: linear-gradient(180deg,#ffd86b,#b88900) !important;
  box-shadow: inset 0 0 18px rgba(255,215,0,0.6);
}
.reel.ohno{
  background: linear-gradient(180deg,#ff6b6b,#7a0000) !important;
  box-shadow: inset 0 0 18px rgba(255,0,0,0.55);
}
/* ===== END PATCH ===== */