/* Loader overlay */
body.loading #game{filter:blur(8px)}
#loaderOverlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);z-index:999}
.loader-card{background:linear-gradient(#3b0f0f,#5a1610);border-radius:16px;padding:18px 22px;box-shadow:0 16px 40px rgba(0,0,0,.5), inset 0 0 0 3px #7a2b16;color:#ffd39a;min-width:280px;text-align:center}
.loader-title{font-family:'Luckiest Guy',cursive;letter-spacing:2px;font-size:34px;margin-bottom:12px;text-shadow:0 2px 0 #ffd3c2,0 5px 14px rgba(0,0,0,.35)}
.loader-bar{height:12px;border-radius:8px;background:#2a0a0a;overflow:hidden;box-shadow:inset 0 0 0 2px #7a2b16}
.loader-bar .fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff7a2a,#ff3a00);animation:loadFill 2s cubic-bezier(.3,.8,.2,1) forwards}
@keyframes loadFill{to{width:100%}}
.loader-pct{margin-top:8px;font-weight:900;color:#ffd39a;letter-spacing:.08em}
*{box-sizing:border-box}
:root{
  --bg1:#0a5b2a;--bg2:#71b96f;--gold:#ffcc33;--gold2:#eaa300;--panel:#ffe9bf;--ink:#1b1b1b;--shadow:rgba(0,0,0,.35);
  --cell:96px; /* base size, scales responsively */
}
html,body{height:100%;margin:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b0505}
#game{position:relative;min-height:100%;color:white;overflow:hidden;z-index:1;transition:filter .3s}
#ytbg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#000}
#ytbg #ytbgPlayer{position:absolute;inset:0}
#ytbg iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;display:block}
/* If viewport is wider than 16:9, make iframe width match viewport width */
@media (min-aspect-ratio: 16/9){
  #ytbg iframe{width:100vw;height:56.25vw}
}
/* If viewport is taller than 16:9, make iframe height match viewport height */
@media (max-aspect-ratio: 16/9){
  #ytbg iframe{width:177.78vh;height:100vh}
}
/* Themed static backgrounds */
.bg{position:absolute;inset:0;background:url('img/istockphoto-1875420038-640x640.jpg') center/cover no-repeat fixed}
/* animated lava overlay */
.lava{pointer-events:none;position:absolute;inset:-20% -20% -10% -20%;background:
  radial-gradient(60px 40px at 20% 30%, rgba(255,140,0,.25), transparent 60%),
  radial-gradient(80px 50px at 70% 60%, rgba(255,90,0,.18), transparent 60%),
  radial-gradient(50px 40px at 40% 80%, rgba(255,200,0,.18), transparent 60%);
mix-blend-mode:screen;animation:lavaMove 16s linear infinite}
@keyframes lavaMove{0%{transform:translateY(0)}100%{transform:translateY(10%)} }

/* Top banner */
.top-banner{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;z-index:2}
.top-banner .title{padding:12px 22px;border-radius:18px;background:linear-gradient(#ff9966,#ff5a2a);color:#2a0a0a;font-family:'Luckiest Guy', cursive;text-transform:uppercase;letter-spacing:2px;text-shadow:0 2px 0 #ffd3c2,0 5px 14px rgba(0,0,0,.35);font-size:clamp(40px,5.8vw,72px);line-height:1}
.top-banner .title .x{color:#ffe36b;margin-right:6px}
.bet-display{background:#3b0f0f;color:#ffd39a;border-radius:10px;padding:8px 12px;font-weight:700;box-shadow:0 4px 0 #7a2b16}

/* Total winnings box */
.total-box{position:absolute;left:50%;top:80px;transform:translateX(-50%);display:flex;gap:12px;align-items:center;background:linear-gradient(#3b0f0f,#5a1610);padding:8px 14px;border-radius:12px;color:#ffd39a;font-weight:900;box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 0 0 3px #7a2b16;z-index:2}
.total-box .lbl{opacity:.8}
.total-box .val{font-size:20px}

/* Rails */
.left-rail,.right-rail{position:absolute;top:90px;bottom:110px;width:220px;display:flex;flex-direction:column;align-items:center;gap:14px;z-index:2}
.left-rail{left:20px}
.right-rail{right:20px; justify-content:center; gap:18px}
.right-rail .right-info{display:flex;flex-direction:column;gap:8px;align-items:center;margin-bottom:4px}
.total-box.small{width:auto;min-width:160px;background:linear-gradient(#3b0f0f,#5a1610);padding:6px 10px;border-radius:12px;color:#ffd39a;font-weight:900;box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 0 0 3px #7a2b16}
.total-box.small{position:static;left:auto;top:auto;transform:none}
.mini-box{width:auto;min-width:120px;background:#3b0f0f;color:#ffd39a;border-radius:10px;padding:6px 10px;box-shadow:0 4px 0 #7a2b16;font-weight:800;display:flex;gap:8px;align-items:center;justify-content:space-between}
.mini-box .lbl{opacity:.85}

.leprechaun{position:relative;width:200px;min-height:60px}
.lep-art{display:none}
.bonus-btn{position:relative;margin-top:8px;background:linear-gradient(#ff4545,#d91313);border:none;color:#fff;font-weight:800;border-radius:12px;padding:10px 18px;cursor:pointer;box-shadow:0 6px 0 #8b0b0b,0 10px 20px var(--shadow);width:100%}
.bonus-btn.alt{background:linear-gradient(#ff8b2c,#ff5a00);box-shadow:0 6px 0 #a63d00}
.note{position:relative;display:inline-block;margin-top:8px;background:#fff4c7;color:#8b5a00;font-size:12px;border-radius:8px;padding:4px 8px;box-shadow:0 4px 10px var(--shadow)}

/* Bonus parchment panel */
.bonus-panel{width:220px;margin-top:10px;background:linear-gradient(#fff2c5,#ffe4a1);border-radius:14px;box-shadow:0 10px 25px var(--shadow), inset 0 0 0 4px #e1b06c;position:relative;padding:12px;min-height:300px;display:flex;flex-direction:column;gap:8px}
.bonus-panel:after{content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid #e1b06c;filter:drop-shadow(0 6px 4px rgba(0,0,0,.25))}
.bp-title{text-align:center;margin-bottom:2px;font-weight:900;color:#8b5a00}
.bp-list{display:flex;flex-direction:column;gap:6px;max-height:150px;overflow:auto;padding-right:4px}
.bp-item{display:flex;align-items:center;justify-content:space-between;background:#fff5cf;border-radius:10px;padding:6px 8px;box-shadow:inset 0 0 0 2px #e1b06c;overflow:hidden}
.bp-item .cnt{font-weight:900;color:#7b2d00}
.bp-item .icon{display:flex;align-items:center;gap:6px;min-width:0}
.bp-item .icon img{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 1px 0 #fff)}
.bp-item .amt{font-weight:800;color:#7b2d00;white-space:nowrap;margin-left:auto}
.bp-summary{margin-top:4px;display:flex;gap:8px;align-items:center;justify-content:center;font-weight:900;color:#7b2d00}
.bp-stats{margin-top:2px;background:#fff9dd;border-radius:10px;padding:8px;box-shadow:inset 0 0 0 2px #e1b06c;display:grid;grid-template-columns:1fr auto;gap:6px}
.bp-stats .stat{display:contents}
.bp-stats .k{font-weight:800;color:#7b2d00;opacity:.85}
.bp-stats .v{text-align:right;font-weight:900;color:#7b2d00;white-space:nowrap}
.bp-stats .stat .k{opacity:.8}

/* Machine */
.machine{position:absolute;left:50%;top:130px;transform:translateX(-50%);width:min(980px,85vw);height:min(520px,62vh);background:linear-gradient(rgba(42,10,10,.65) 0, rgba(59,15,15,.65) 100%);border-radius:18px;box-shadow:0 16px 40px rgba(0,0,0,.6), inset 0 0 0 6px #7a2b16, inset 0 0 0 14px rgba(59,15,15,.8);overflow:hidden}
.machine #ytMachine{position:absolute;inset:0;z-index:0;pointer-events:none}
.machine #ytMachine iframe{position:absolute;left:50%;top:50%;width:120%;height:120%;transform:translate(-50%,-50%)}
.reels{position:absolute;inset:26px 26px 26px 26px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr);gap:12px;z-index:1}
.cell{background:linear-gradient(#4a1a14,#32100d);border-radius:12px;box-shadow:inset 0 0 0 3px #7a2b16,0 6px 12px rgba(0,0,0,.25);position:relative;overflow:hidden}
.cell::before{content:"";display:block;padding-top:100%}
.sym{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:42px;filter:drop-shadow(0 2px 0 #ffd7c0) drop-shadow(0 6px 6px rgba(0,0,0,.35));transition:transform .25s}
.sym img{width:48%;height:auto;display:block}
.sym img.sym-BAG{width:40%}
.cell.win .sym{animation:pop .9s ease both}
/* winning glow */
.cell.win{box-shadow:inset 0 0 0 3px #ffb347, 0 0 0 4px #ff6a00, 0 8px 16px rgba(0,0,0,.28)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)} }
/* vanish animation after highlight */
@keyframes vanish{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.7)}}
.cell.vanish .sym{animation:vanish .05s ease-in-out forwards}

/* Reel movement while spinning */
.reels.oscillate .cell{will-change:transform; animation:reelUpDown var(--spin-speed, .5s) linear infinite alternate}
@keyframes reelUpDown{0%{transform:translateY(-25%)}100%{transform:translateY(25%)}}
/* Decelerating per-reel animations */
@keyframes reelUpEase{0%{transform:translateY(120%)}100%{transform:translateY(0)}}
@keyframes reelDownEase{0%{transform:translateY(-120%)}100%{transform:translateY(0)}}
.blurspin{filter:blur(3px) saturate(1.1)}
@keyframes settleBounce{0%{transform:translateY(-10%) scale(1.02)}100%{transform:translateY(0) scale(1)}}
.settle .cell{animation:settleBounce .25s ease-out}

.wild-label{position:absolute;left:-70px;top:12px;background:linear-gradient(#ff9f43,#ff6a00);color:#2a0a0a;font-weight:900;border-radius:10px;padding:6px 10px;transform:rotate(-8deg);box-shadow:0 6px 0 #7a2b16}

/* Right controls */
.round{border-radius:50%;border:none;color:#fff;font-weight:900;cursor:pointer;box-shadow:0 10px 25px var(--shadow);display:flex;align-items:center;justify-content:center;text-align:center;position:relative}
.round:active{transform:translateY(2px)}
/* Auto ring (top) */
.round.ghost{width:64px;height:64px;background:transparent;color:#ffffff;box-shadow:none;border:4px solid #ffffff;position:relative}
.round.ghost::before,.round.ghost::after{content:"";position:absolute;border:4px solid #ffffff;border-left-color:transparent;border-top-color:transparent;border-radius:50%;width:52px;height:52px}
.round.ghost::before{transform:rotate(20deg)}
.round.ghost::after{transform:rotate(200deg)}
.round.ghost{font-weight:800;font-size:22px}

/* Turbo (center big orange) */
.round.turbo{width:120px;height:120px;background:linear-gradient(#ff7a2a,#ff3a00);color:#fff;font-weight:900;letter-spacing:.02em;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.round.turbo::before,.round.turbo::after{content:"";position:absolute;border:8px solid #ffffff;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;width:96px;height:96px}
.round.turbo::before{transform:rotate(30deg)}
.round.turbo::after{transform:rotate(210deg)}
.round.turbo{font-size:14px;padding:0 10px;text-align:center}

/* Spin (bottom small) */
.round.spin{width:64px;height:64px;background:transparent;border:4px solid #ffffff;color:#ffffff}
.round.spin::before{content:"≫";font-size:26px;font-weight:900;color:#1ee073;}

/* Bottom bar */
.bottom-bar{position:absolute;left:0;right:0;bottom:0;height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:linear-gradient(transparent, rgba(0,0,0,.4) 30%, rgba(0,0,0,.8));backdrop-filter:blur(1px)}
.meter{display:flex;align-items:center;gap:12px}
.meter .label{opacity:.85;font-weight:700;letter-spacing:.08em}
.meter .value{font-weight:800;font-size:26px}
.meter.bet{gap:8px}
.step{width:44px;height:44px;border-radius:8px;border:none;background:#ffffff22;color:#fff;font-size:26px;font-weight:900;cursor:pointer}
.controls{display:flex;gap:10px}
.icon{width:44px;height:44px;border-radius:8px;border:none;background:#ffffff22;color:#fff;font-size:22px;cursor:pointer}
.rules-hint{margin-left:6px;align-self:center;font-weight:900;letter-spacing:.08em;color:#ffd39a;text-shadow:0 0 10px rgba(255,100,0,.8),0 0 18px rgba(255,0,0,.6);animation:blink 1.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;filter:drop-shadow(0 0 8px #ff7a2a)}50%{opacity:.4;filter:drop-shadow(0 0 2px #ff3a00)}}

/* Modal basic styles */
.modal{position:fixed;inset:0;display:none}
.modal.open{display:block}
.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,90vw);max-height:80vh;overflow:auto;background:#fffdf3;color:#452b00;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.45);padding:18px 22px}
.modal-close{position:absolute;right:8px;top:4px;border:none;background:transparent;font-size:28px;cursor:pointer}
.modal .modal-body h3{margin:.5em 0 .25em}
.modal .modal-body ul{margin:.25em 0 .75em 1.25em}

@media (max-width: 900px){
  .left-rail,.right-rail{width:160px}
  .round{width:74px;height:74px}
  .machine{top:120px;height:55vh}
  .sym{font-size:36px}
}