@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Inter:wght@600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%;overflow:hidden}
body{height:100%;height:100dvh;overflow:hidden;position:fixed;width:100%;background:#0a0410 url('../img/bg-halloween.png') center/cover no-repeat fixed;font-family:'Inter',sans-serif;color:#e8d5ff}
#particle-canvas{position:fixed;inset:0;pointer-events:none;z-index:100}
#game-wrapper{height:100dvh;max-width:480px;margin:0 auto;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(26,5,32,.92),rgba(14,2,16,.95));overflow:hidden;position:relative}
/* ── FLEX LAYOUT ─────────────────────────────────────── */
#slot-machine{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;justify-content:center;gap:4px}
#halloween-banner{flex:0 0 auto;overflow:hidden}
#machine-header{flex:0 0 auto;max-height:none;overflow:hidden}
#bet-strip{flex:0 0 auto;max-height:none;overflow:hidden}
#machine-body{flex:0 0 auto;min-height:0;display:flex;flex-direction:row;overflow:hidden;position:relative;margin:auto 0;width:100%}
#special-prizes-strip{flex:0 0 auto;overflow:hidden}
#machine-footer{flex:0 0 auto;max-height:none;overflow:hidden}
/* ── HALLOWEEN BANNER ──────────────────────────────── */
#halloween-banner{
  text-align:center;
  padding:4px 0 2px;
  background:none;
  position:relative;
}
.banner-title{
  font-family:'Creepster',cursive;
  font-size:3.5rem;
  line-height:1;
  color:#ff5500;
  letter-spacing:3px;
  text-shadow:0 2px 4px #000;
  background:linear-gradient(180deg,#ff6600 0%,#ff4400 40%,#cc2200 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)) drop-shadow(0 0 12px rgba(255,100,0,.4));
}
/* ── PAYLINE NUMBER INDICATORS ────────────────────── */
.payline-nums{
  flex:0 0 20px;
  display:grid;
  grid-template-rows:1fr 1fr 1fr;
  align-items:stretch;
  padding:3px 1px;
  position:relative;
  z-index:2;
}
.payline-nums-left{order:-1}
.payline-nums-right{order:1}
.pln-row{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:0px;
}
.pln{
  width:18px;
  height:14px;
  border-radius:7px;
  background:var(--ln-color,#888);
  color:#000;
  font-size:7.5px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:1.5px solid rgba(0,0,0,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.2);
  transition:all .15s;
  line-height:1;
  user-select:none;
  text-shadow:0 0 1px rgba(255,255,255,.3);
}
.pln:hover{
  transform:scale(1.35);
  box-shadow:0 0 6px var(--ln-color,#888);
  z-index:3;
}
.pln.inactive{
  opacity:.25;
  filter:grayscale(.8);
}
#reel-frame{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;padding:2px;overflow:hidden}
.reel-frame-border{
  flex:1;min-height:0;
  background:linear-gradient(135deg,#8b6914,#ffd700 40%,#c9a227 60%,#8b6914);
  padding:3px;border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden;
  position:relative;
  animation:reelFramePulse 2s ease-in-out infinite alternate;
  box-shadow:0 0 20px rgba(255,200,0,.4),0 0 40px rgba(255,140,0,.2);
}
@keyframes reelFramePulse{
  from{box-shadow:0 0 15px rgba(255,200,0,.5),0 0 35px rgba(255,140,0,.2)}
  to{box-shadow:0 0 30px rgba(255,220,0,.8),0 0 60px rgba(255,160,0,.4),0 0 90px rgba(255,100,0,.15)}
}
/* Marquee light dots along the border */
.marquee-dots{
  position:absolute;inset:0;border-radius:8px;
  pointer-events:none;z-index:10;overflow:hidden;
  background:
    repeating-linear-gradient(90deg,#ffd700 0,#ffd700 5px,transparent 5px,transparent 22px) top/100% 3px,
    repeating-linear-gradient(90deg,#ffd700 0,#ffd700 5px,transparent 5px,transparent 22px) bottom/100% 3px,
    repeating-linear-gradient(0deg,#ffd700 0,#ffd700 5px,transparent 5px,transparent 22px) left/3px 100%,
    repeating-linear-gradient(0deg,#ffd700 0,#ffd700 5px,transparent 5px,transparent 22px) right/3px 100%;
  background-repeat:no-repeat;
  animation:marqueeSpin .45s linear infinite;
}
@keyframes marqueeSpin{
  from{background-position:0 0,0 100%,0 0,100% 0}
  to{background-position:27px 0,-27px 100%,0 -27px,100% 27px}
}
/* Dot glow overlay on marquee */
.marquee-dots::after{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(255,200,0,.5) 0,rgba(255,200,0,.5) 5px,transparent 5px,transparent 22px) top/100% 4px,
    repeating-linear-gradient(90deg,rgba(255,200,0,.5) 0,rgba(255,200,0,.5) 5px,transparent 5px,transparent 22px) bottom/100% 4px;
  background-repeat:no-repeat;
  animation:marqueeSpin .45s linear infinite;
  filter:blur(2px);
}
#reel-area{flex:1;display:flex;gap:0;background:#000;border-radius:5px;position:relative;overflow:hidden;min-height:0}
.reel-col{flex:1;overflow:hidden;position:relative;background:#f5e6c8;border-right:1px solid #d4b483;height:100%}
.reel-col:last-child{border-right:none}
@media(min-width:481px){body{background:radial-gradient(ellipse at center,#1a0820,#050208)}#game-wrapper{box-shadow:0 0 60px rgba(74,14,143,.5)}}
/* LOADING */
#loading-screen{position:fixed;inset:0;background:#0a0410;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;gap:16px}
.load-logo{font-family:'Creepster',cursive;font-size:3rem;color:#c85a00;text-shadow:0 0 25px #ff6600aa}
.load-sub{font-size:.8rem;color:#9b59b6;letter-spacing:3px}
.load-bar{width:260px;height:7px;background:#1a0a2e;border-radius:4px;overflow:hidden;border:1px solid #4a0e8f}
#load-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#c85a00,#c9a227);border-radius:4px;transition:width .3s}
#load-text{font-size:.8rem;color:#9b59b6;letter-spacing:1px}
.fade-out{animation:fadeOut .7s forwards}
@keyframes fadeOut{to{opacity:0;pointer-events:none}}
/* HEADER */
#machine-header{flex-shrink:0;padding:5px 8px;border:none;background:none}
.header-top{display:flex;align-items:center;gap:5px}
.btn-tiny{background:linear-gradient(135deg,#5a0a0a,#8b1515);border:1px solid #c9a227;color:#ffd700;font-size:.6rem;font-weight:700;padding:4px 7px;border-radius:5px;cursor:pointer;flex-shrink:0;touch-action:manipulation}
.displays-row{display:flex;gap:8px;flex:1}
.disp-unit{flex:1;background:linear-gradient(180deg,#8b0000,#cc2200,#8b0000);border:2px solid #c9a227;border-radius:5px;padding:6px 5px;text-align:center;box-shadow:0 0 8px rgba(180,0,0,.5),inset 0 0 8px rgba(0,0,0,.4)}
.disp-label{font-family:'Creepster',cursive;font-size:.65rem;color:#ffd700;text-transform:uppercase;letter-spacing:.5px;line-height:1.1}
.disp-value{font-size:1.3rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 8px rgba(255,255,255,.6);line-height:1.2}
.header-badges{display:none} /* removed from image */
#free-spin-badge{display:none;background:linear-gradient(135deg,#39d353,#1a8a30);color:#fff;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:10px;align-items:center;gap:3px;white-space:nowrap;animation:pulse 1s infinite alternate}
@keyframes pulse{from{box-shadow:0 0 5px #39d35366}to{box-shadow:0 0 15px #39d353aa}}
#combo-display{display:none;background:linear-gradient(135deg,#ff4500,#ff8c00);color:#fff;font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:10px;align-items:center}
.xp-row{display:flex;align-items:center;gap:5px;margin-top:3px}
.level-chip{background:linear-gradient(135deg,#c85a00,#c9a227);color:#fff;font-size:.58rem;font-weight:700;padding:2px 6px;border-radius:4px;flex-shrink:0}
.xp-bar-wrap{flex:1;height:5px;background:#1a0a2e;border-radius:3px;overflow:hidden;border:1px solid rgba(74,14,143,.4)}
#xp-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#4a0e8f,#c9a227);border-radius:3px;transition:width .5s}
#xp-text{font-size:.52rem;color:#9b59b6;flex-shrink:0}
/* BET STRIP */
#bet-strip{flex:0 0 auto;display:flex;align-items:center;gap:3px;padding:8px 5px;background:#000;border:1px solid rgba(201,162,39,.5);border-radius:10px;width:100%;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.bet-arrow{background:linear-gradient(135deg,#5a0a0a,#8b1515);border:1px solid #c9a227;color:#ffd700;width:32px;height:32px;border-radius:50%;font-size:1.1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;touch-action:manipulation;box-shadow:0 2px 4px rgba(0,0,0,.6)}
.bet-steps-row{display:flex;gap:2px;flex:1;min-width:0;justify-content:center}
.bet-step-btn{flex:1;background:rgba(74,14,143,.25);border:1px solid rgba(201,162,39,.35);color:#e8d5ff;font-size:.65rem;font-weight:700;padding:6px 0;border-radius:4px;cursor:pointer;transition:all .15s;touch-action:manipulation;min-width:0}
.bet-step-btn:hover,.bet-step-btn.selected{background:rgba(201,162,39,.4);border-color:#c9a227;color:#ffd700;transform:scale(1.05)}
.bet-max-btn{background:linear-gradient(135deg,#c85a00,#c9a227);border:1px solid #ffcc00;color:#fff;font-size:.6rem;font-weight:700;padding:6px 8px;border-radius:4px;cursor:pointer;flex-shrink:0;touch-action:manipulation;box-shadow:0 2px 4px rgba(0,0,0,.6)}
/* MACHINE BODY */
#machine-body{flex:1;display:flex;flex-direction:row;min-height:0;overflow:hidden;position:relative}
/* PAYLINE STRIPS */
.payline-strip{display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:22px;padding:2px 1px;flex-shrink:0;z-index:5}
.pline-btn{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--lc,#fff);background:var(--lc,#fff);color:#000;font-size:.5rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 0 4px var(--lc,#fff);transition:all .15s;line-height:1;touch-action:manipulation}
.pline-btn.inactive{background:rgba(0,0,0,.7);color:var(--lc,#888);box-shadow:none;border-color:rgba(255,255,255,.2);opacity:.4}
.pline-btn:hover{transform:scale(1.15)}
/* REEL FRAME */
#reel-frame{flex:1;display:flex;flex-direction:column;min-width:0;padding:3px 2px}
.reel-frame-border{flex:1;background:linear-gradient(135deg,#8b6914,#ffd700 50%,#8b6914);padding:3px;border-radius:8px;min-height:0;display:flex;flex-direction:column}
#reel-area{flex:1;display:flex;gap:0;background:#000;border-radius:5px;position:relative;overflow:hidden;aspect-ratio:5/3;margin:auto;width:100%;max-height:100%}
.reel-col{flex:1;overflow:hidden;position:relative;background:#000;border-right:1px solid rgba(255,255,255,.15);height:100%}
.reel-col:last-child{border-right:none}
.reel-inner{display:flex;flex-direction:column;will-change:transform;backface-visibility:hidden;width:100%}
.symbol-cell{
  width:100%;height:100px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.15);
  background:transparent;
  position:relative;
}
.symbol-cell::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,180,0,.04) 0%,transparent 40%,rgba(0,0,0,.3) 100%);
  pointer-events:none;z-index:0;
}
.symbol-cell img{
  width:calc(100% - 4px);height:calc(100% - 4px);
  aspect-ratio:1;
  object-fit:contain;
  pointer-events:none;
  display:block;
  transition:filter .2s,transform .2s;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.9)) drop-shadow(0 0 6px rgba(255,180,0,.15));
  position:relative;z-index:1;
}
.winning-cell{
  background:radial-gradient(ellipse at 50% 40%,rgba(255,215,0,.25),rgba(255,140,0,.1),#000)!important;
  border:2px solid #ffd700!important;
  box-shadow:inset 0 0 20px rgba(255,215,0,.3),0 0 12px rgba(255,215,0,.5)!important;
}
.winning-cell img{filter:drop-shadow(0 0 10px #ffd700) drop-shadow(0 0 5px #ff8c00)!important;transform:scale(1.05)!important}
@keyframes winPulse{from{transform:scale(1)}to{transform:scale(1.1)}}
.reel-shade-top,.reel-shade-bot{position:absolute;left:0;right:0;height:25px;pointer-events:none;z-index:2}
.reel-shade-top{top:0;background:linear-gradient(180deg,rgba(0,0,0,.7),transparent)}
.reel-shade-bot{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent)}
#payline-canvas{position:absolute;inset:0;pointer-events:none;z-index:3;width:100%;height:100%}
.reel-frame-label{text-align:center;font-family:'Creepster',cursive;font-size:.58rem;color:#c9a227;padding:2px 0 0;flex-shrink:0}
/* BOTTOM BUTTON BAR (in footer) */
#btn-panel{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:12px;padding:12px 8px;background:none;border:none;flex-shrink:0}
.panel-top-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;width:100%}
.panel-btn{flex:1;flex-basis:0;height:55px;background:linear-gradient(180deg,#8b0000,#cc2200,#8b0000);border:2px solid #c9a227;border-radius:8px;color:#ffd700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);transition:all .15s;touch-action:manipulation;padding:2px 4px}
.panel-btn:hover{filter:brightness(1.3);transform:scale(1.04);box-shadow:0 3px 12px rgba(0,0,0,.6),0 0 10px rgba(255,80,0,.4)}
.panel-btn:active{transform:scale(.96)}
.pbtn-label{font-size:.9rem;font-weight:700;letter-spacing:.5px;text-align:center;text-transform:uppercase;white-space:nowrap;line-height:1}
#lines-count-badge{display:inline-block;background:#ffd700;color:#000;font-size:.7rem;font-weight:700;border-radius:4px;padding:1px 4px;margin-left:4px;vertical-align:middle;line-height:1.4}
.panel-btn-spin{flex:none;width:100%;height:68px;background:linear-gradient(180deg,#c85a00,#ff6600,#c85a00)!important;border-color:#ffd700!important;box-shadow:0 0 14px rgba(255,100,0,.6),0 3px 10px rgba(0,0,0,.5)!important;color:#fff!important;border-radius:12px;margin-top:2px}
.panel-btn-spin .pbtn-label{font-size:1.8rem;letter-spacing:2px;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.8)}
.panel-btn-spin:disabled{opacity:.6;cursor:not-allowed}
.panel-btn-spin.spinning{animation:spinGlow .4s infinite alternate}
@keyframes spinGlow{from{box-shadow:0 0 10px rgba(255,100,0,.5)}to{box-shadow:0 0 30px rgba(255,150,0,.9),0 0 50px rgba(255,100,0,.5)}}
.panel-btn-auto.active{background:radial-gradient(circle at 50% 30%,#00cc44,#008833,#005522)!important;border-color:#00ff88!important}
/* FOOTER */
#machine-footer{flex-shrink:0;background:none;border:none;display:flex;flex-direction:column}
#footer-displays{display:flex;gap:4px;padding:4px 5px 3px;align-items:center}
.footer-disp{flex:1;background:linear-gradient(180deg,#8b0000,#cc2200,#8b0000);border:2px solid #c9a227;border-radius:5px;padding:3px 4px;text-align:center;box-shadow:0 0 8px rgba(180,0,0,.4)}
.footer-disp-main{flex:1.4}
.footer-disp-label{font-family:'Creepster',cursive;font-size:.5rem;color:#ffd700;letter-spacing:.3px}
.footer-disp-val{font-size:.85rem;font-weight:700;color:#fff;text-shadow:0 0 6px rgba(255,255,255,.4)}
#halloween-scene{height:52px;position:relative;overflow:hidden;background:linear-gradient(180deg,#1a0530,#0e0a20 50%,#1a0808)}
.hs-moon{position:absolute;top:5px;right:22px;width:24px;height:24px;background:radial-gradient(circle at 35% 35%,#fffacd,#ffd700);border-radius:50%;box-shadow:0 0 10px rgba(255,215,0,.6)}
.hs-ground{position:absolute;bottom:0;left:0;right:0;height:12px;background:linear-gradient(180deg,#1a0808,#0a0505)}
.hs-castle{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:56px;height:30px}
.castle-body{position:absolute;bottom:0;left:8px;right:8px;height:20px;background:#0a0505;border:1px solid #2a1515}
.castle-tower{position:absolute;bottom:18px;width:11px;height:14px;background:#0a0505;border:1px solid #2a1515}
.castle-tower.tl{left:0}.castle-tower.tr{right:0}
.castle-window{position:absolute;bottom:5px;width:5px;height:7px;background:#ffd700;opacity:.55;border-radius:3px 3px 0 0}
.castle-window.w1{left:13px}.castle-window.w2{left:50%;transform:translateX(-50%)}.castle-window.w3{right:13px}
.hs-pumpkins{position:absolute;bottom:11px;left:0;right:0;text-align:center}
.hp{font-size:.85rem;margin:0 2px}
.hs-bat{position:absolute;font-size:.7rem;animation:batFloat 3s ease-in-out infinite}
.b1{top:7px;left:14%;animation-delay:0s}.b2{top:11px;right:18%;animation-delay:1s}.b3{top:4px;left:44%;animation-delay:2s}
@keyframes batFloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-6px) rotate(5deg)}}
/* WIN POPUP */
.win-popup{display:none;position:fixed;inset:0;align-items:center;justify-content:center;z-index:200;pointer-events:none;flex-direction:column;gap:6px}
.win-popup.visible{display:flex}
.win-label{font-family:'Creepster',cursive;font-size:3rem;animation:winBounce .5s ease-out}
.win-amount{font-size:2rem;font-weight:700;color:#ffd700;text-shadow:0 0 20px #ffd70088}
.win-normal .win-label{color:#f1c40f}.win-big .win-label{color:#e67e22;font-size:3.5rem}.win-mega .win-label{color:#e74c3c;font-size:4rem}.win-jackpot .win-label{color:#9b59b6;font-size:4.5rem;animation:jackpotPulse .3s infinite alternate}
.win-popup.hiding{animation:popupHide .5s forwards}
@keyframes winBounce{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes jackpotPulse{from{text-shadow:0 0 20px #9b59b6}to{text-shadow:0 0 60px #ff00ff,0 0 100px #9b59b6}}
@keyframes popupHide{to{opacity:0;transform:scale(1.2)}}
/* TOASTS */
#toast-container{position:fixed;top:8px;right:8px;z-index:500;display:flex;flex-direction:column;gap:6px;max-width:220px}
.toast{background:rgba(26,10,46,.95);border:1px solid rgba(74,14,143,.5);border-radius:8px;padding:7px 11px;font-size:.72rem;color:#e8d5ff;opacity:0;transform:translateX(20px);transition:all .35s;backdrop-filter:blur(8px)}
.toast.visible{opacity:1;transform:translateX(0)}
.toast-success{border-color:rgba(57,211,83,.5);color:#82e0aa}.toast-error{border-color:rgba(231,76,60,.5);color:#f1948a}.toast-achievement{border-color:rgba(201,162,39,.5);color:#c9a227}.toast-levelup{border-color:rgba(200,90,0,.5);color:#f0b27a}.toast-mission,.toast-info{border-color:rgba(74,14,143,.5);color:#c0a0ff}
/* MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:300;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px)}
.modal-overlay.visible{display:flex;animation:modalIn .3s ease-out}
@keyframes modalIn{from{opacity:0}to{opacity:1}}
.modal-sheet{background:linear-gradient(180deg,#1a0a2e,#0e0520);border:1px solid rgba(74,14,143,.5);border-radius:16px 16px 0 0;width:100%;max-width:480px;max-height:82vh;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.modal-section-title{font-size:.72rem;color:#c85a00;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;font-weight:700;margin-top:8px}
.modal-header{display:flex;align-items:center;justify-content:space-between}
.modal-title{font-family:'Creepster',cursive;font-size:1.4rem;color:#c85a00}
.modal-close{background:rgba(74,14,143,.4);border:1px solid rgba(74,14,143,.5);color:#e8d5ff;width:32px;height:32px;border-radius:7px;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
/* PAYTABLE */
.paytable-row{display:flex;gap:10px;align-items:center;padding:8px;border-radius:8px;margin-bottom:5px;background:rgba(74,14,143,.08);border:1px solid rgba(74,14,143,.15)}
.paytable-symbol{width:64px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.paytable-symbol img{width:56px;height:56px;object-fit:contain}
.sym-badge{font-size:.52rem;padding:2px 5px;border-radius:4px;font-weight:700}
.paytable-info{flex:1}.sym-name{font-weight:700;font-size:.9rem;margin-bottom:2px}
.sym-desc{font-size:.68rem;color:#9b59b6;margin-bottom:5px}
.sym-mults{display:flex;flex-wrap:wrap;gap:4px}
.mult-chip{font-size:.67rem;padding:2px 6px;border-radius:5px;border:1px solid;background:rgba(74,14,143,.2)}
/* ACHIEVEMENTS */
#achievements-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.ach-card{background:rgba(74,14,143,.15);border:1px solid rgba(74,14,143,.3);border-radius:9px;padding:9px 5px;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;transition:all .2s}
.ach-card.unlocked{background:rgba(201,162,39,.1);border-color:rgba(201,162,39,.4)}
.ach-card.locked{opacity:.45;filter:grayscale(.6)}
.ach-icon{font-size:1.5rem}.ach-name{font-size:.58rem;text-align:center;color:#c0a0ff;line-height:1.2}.ach-lock{position:absolute;top:3px;right:3px;font-size:.65rem}
/* MISSIONS */
.mission-row{display:flex;align-items:center;gap:10px;padding:10px;background:rgba(74,14,143,.1);border:1px solid rgba(74,14,143,.25);border-radius:9px;margin-bottom:7px}
.mission-row.completed{border-color:rgba(57,211,83,.4)}.mission-row.claimed{opacity:.5}
.mission-info{flex:1}.mission-name{font-weight:700;font-size:.82rem;margin-bottom:2px}
.mission-desc{font-size:.68rem;color:#9b59b6;margin-bottom:4px}
.mission-progress-bar{height:5px;background:#1a0a2e;border-radius:3px;overflow:hidden;margin-bottom:2px}
.mission-progress-fill{height:100%;background:linear-gradient(90deg,#4a0e8f,#c9a227);border-radius:3px;transition:width .5s}
.mission-progress-text{font-size:.62rem;color:#9b59b6}
.mission-reward{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.mission-pts{font-weight:700;color:#c9a227;font-size:.82rem}
.btn-claim{background:linear-gradient(135deg,#c85a00,#c9a227);border:none;color:#fff;font-size:.68rem;font-weight:700;padding:5px 9px;border-radius:6px;cursor:pointer}
.claimed-badge{font-size:.85rem}
/* STATS */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.stat-card{background:rgba(74,14,143,.15);border:1px solid rgba(74,14,143,.3);border-radius:9px;padding:10px;text-align:center}
.stat-val{font-size:1.2rem;font-weight:700;color:#c9a227}
.stat-lbl{font-size:.62rem;color:#9b59b6;text-transform:uppercase;letter-spacing:.5px}
#prob-table{width:100%;font-size:.72rem;border-collapse:collapse}
#prob-table td{padding:4px 7px;border-bottom:1px solid rgba(74,14,143,.2)}
#prob-table tr:hover td{background:rgba(74,14,143,.1)}
.rarity-legendary{color:#9b59b6;font-weight:700}.rarity-epic{color:#e74c3c}.rarity-rare{color:#3498db}.rarity-uncommon{color:#2ecc71}.rarity-common{color:#95a5a6}
.btn-reset{background:rgba(231,76,60,.2);border:1px solid rgba(231,76,60,.4);color:#f1948a;padding:7px 14px;border-radius:7px;cursor:pointer;font-size:.78rem;width:100%;margin-top:7px}
.disclaimer-box{padding:8px;background:rgba(57,211,83,.05);border:1px solid rgba(57,211,83,.2);border-radius:7px;font-size:.68rem;color:#82e0aa;line-height:1.5}
/* BONUS */
.bonus-desc{font-size:.88rem;color:#c0a0ff;text-align:center;margin-bottom:10px}
.bonus-pumpkins{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.bonus-pumpkin{background:rgba(200,90,0,.15);border:2px solid rgba(200,90,0,.5);color:#ffd700;width:76px;height:76px;border-radius:13px;cursor:pointer;transition:all .2s;touch-action:manipulation;padding:0;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.bonus-pumpkin:hover:not(:disabled){background:rgba(200,90,0,.35);transform:scale(1.08);border-color:rgba(255,140,0,.8);box-shadow:0 0 14px rgba(200,90,0,.5)}
.bonus-pumpkin-img{width:86%;height:86%;object-fit:contain;pointer-events:none;transition:all .3s;filter:drop-shadow(0 0 7px rgba(255,140,0,.5))}
.bonus-pumpkin.revealed{cursor:default;border-color:#c9a227;background:rgba(201,162,39,.2);box-shadow:0 0 10px rgba(201,162,39,.4)}
.bonus-pumpkin.revealed .bonus-pumpkin-img{opacity:.22;filter:blur(2px)}
.bonus-pumpkin-prize{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:700;color:#c9a227;text-shadow:0 0 8px rgba(201,162,39,.8);pointer-events:none}
#bonus-result{text-align:center;font-size:1.05rem;color:#c9a227;font-weight:700;margin-top:9px;min-height:26px}
.btn-spin-bonus{background:linear-gradient(135deg,#4a0e8f,#c85a00);border:none;color:#fff;font-size:.95rem;font-weight:700;padding:9px 22px;border-radius:11px;cursor:pointer;margin:10px auto 0;display:block}
#wheel-canvas{display:block;margin:0 auto;border-radius:50%;border:3px solid #c9a227}
.dice-display{font-size:3rem;text-align:center;margin:14px 0;letter-spacing:10px}

/* ═══ SPECIAL PRIZES STRIP ═══ */
#special-prizes-strip{
  flex:0 0 auto;
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:4px;
  padding:3px 4px;
  background:linear-gradient(180deg,#1a0520 0%,#0e0210 100%);
}
.special-prize-box{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  padding:2px 8px;
  background:linear-gradient(180deg,#8b1a1a 0%,#b22222 30%,#cc2222 50%,#8b1a1a 100%);
  border:2px solid #c9a227;
  border-radius:5px;
  box-shadow:
    0 0 6px rgba(255,215,0,.2),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 3px rgba(0,0,0,.4);
  position:relative;
  overflow:hidden;
  transition:all .3s ease;
}
.special-prize-box::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:45%;
  background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 100%);
  pointer-events:none;
  border-radius:3px 3px 0 0;
}
.sp-value{
  font-family:'Inter',sans-serif;
  font-size:1rem;
  font-weight:700;
  color:#fff;
  text-shadow:0 0 5px rgba(255,215,0,.4),0 1px 2px rgba(0,0,0,.6);
  letter-spacing:.5px;
  line-height:1.1;
  position:relative;
  z-index:1;
}
.sp-icons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  position:relative;
  z-index:1;
}
.sp-icons img{
  width:16px;
  height:16px;
  object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
/* Active (won) state */
.special-prize-box.active{
  animation:specialPrizePulse 0.6s ease-in-out 5;
  box-shadow:0 0 18px #ffd700,0 0 35px #ff7a00,0 0 60px rgba(255,122,0,.3);
  transform:scale(1.06);
  border-color:#ffd700;
  z-index:5;
}
@keyframes specialPrizePulse{
  0%{filter:brightness(1)}
  50%{filter:brightness(1.8)}
  100%{filter:brightness(1)}
}
@media(max-width:360px){
  .sp-value{font-size:.85rem}
  .sp-icons img{width:13px;height:13px}
  .special-prize-box{padding:2px 4px}
  #special-prizes-strip{gap:3px;padding:2px 3px}
}