/* Root & resets */
#xmas-slot-overlay { position: fixed; inset:0; z-index: 999999; display:flex; align-items:center; justify-content:center; pointer-events:none; }
#xmas-slot-overlay.xmas-hidden { display:none; }
.xmas-backdrop { display:none !important; }
.xmas-modal { background: var(--xmas-card-bg, linear-gradient(180deg, rgba(20,22,35,.9), rgba(10,10,16,.9)));  position:relative; width:min(380px, 90vw); border-radius:18px; padding:10px 12px 14px;  box-shadow: 0 10px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset; overflow:visible; pointer-events:auto; }
.xmas-close { position:absolute; top:10px; right:12px; border:0; background:transparent; color:#fff; font-size:28px; line-height:1; cursor:pointer; opacity:.8; }
.xmas-close:hover { opacity:1; transform: scale(1.05); }

/* Gift */
.xmas-gift-stage, .xmas-slot-stage, .xmas-result { text-align:center; }
.xmas-caption { margin-top:12px; color:#e8eefc; opacity:.9; font-size:14px; }
.xmas-open-btn, .xmas-spin-btn, .claim-btn {
  margin-top:14px; padding:10px 18px; border-radius:999px; border:0; cursor:pointer; font-weight:700; letter-spacing:.3px;
  background: linear-gradient(135deg,#FFD86F,#FC6262);
  color:#1a1010; box-shadow: 0 6px 20px rgba(252,98,98,.5), 0 0 0 1px rgba(255,255,255,.15) inset;
  text-decoration:none; display:inline-block;
}
.xmas-open-btn:hover, .xmas-spin-btn:hover, .claim-btn:hover { transform: translateY(-1px); }
.xmas-open-btn:active, .xmas-spin-btn:active { transform: translateY(0); }

.xmas-gift { width:96px; height:96px; margin:8px auto 2px; position:relative; }
.xmas-gift .box { position:absolute; bottom:0; left:0; right:0; height:64%; background: linear-gradient(180deg, #a80,#f6cc37 40%, #a80 100%);
  border-radius: 10px; border: 2px solid rgba(255,255,255,.35); box-shadow: inset 0 0 24px rgba(255,255,255,.25), 0 12px 32px rgba(0,0,0,.45);
}
.xmas-gift .box::after { content: attr(data-brand);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:18px; letter-spacing:1px; color:#3b2500;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 0 12px rgba(255,200,0,.3);
}
.xmas-gift .lid { position:absolute; left: -6px; right:-6px; top: 12px; height:28px; background: linear-gradient(90deg, #ff3d6e, #ffa14f);
  border-radius: 10px; border: 2px solid rgba(255,255,255,.4); box-shadow: 0 8px 20px rgba(255,80,120,.35);}
.xmas-gift .sparkle { position:absolute; width:8px; height:8px; background:#fff; border-radius:50%; opacity:.8; box-shadow:0 0 20px 6px #fff;
  animation: sparkle 1.6s infinite ease-in-out; }
.xmas-gift .s1 { top:4px; left:8px; }
.xmas-gift .s2 { top:0; right:10px; animation-delay:.4s; }
.xmas-gift .s3 { top:32px; left: -4px; animation-delay:.8s; }
@keyframes sparkle { 0%,100%{ transform: scale(.6); opacity:.6;} 50%{ transform: scale(1.2); opacity:1;} }

/* Slot machine */
.xmas-slot-stage .slot-top { font-weight:800; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:10px; color:#ffe8a6;
  text-shadow: 0 0 12px rgba(255,232,166,.5), 0 0 2px #000;
}
.slot-machine { position:relative; margin: 6px auto; width: 360px; max-width: 84vw; padding: 12px 14px 18px;
  border-radius: 18px; background: radial-gradient(120% 140% at 50% 0%, #2a203b, #0a0a12); box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.08);
}
.reels { display:flex; gap:14px; justify-content:center; }
.reel { width:70px; height:90px; border-radius: 12px; background: linear-gradient(180deg,#fefefe,#e7eef6);
  display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:900; color:#221111;
  box-shadow: inset 0 -8px 0 #c9d3e2, inset 0 8px 0 #fff, 0 10px 24px rgba(0,0,0,.35);
}
.lever { position:absolute; right:-30px; top:20px; width:90px; height:160px; pointer-events:none; }
.lever .shaft { position:absolute; right:36px; top:40px; width:12px; height:90px; background: linear-gradient(180deg,#b8bfc8,#7a8391); border-radius:6px; }
.lever .knob { position:absolute; right:24px; top:0; width:40px; height:40px; background: radial-gradient(circle at 30% 30%, #fff, #ff5c7a); border-radius:50%;
  box-shadow: 0 10px 25px rgba(255,92,122,.5);
  transition: transform .2s ease;
}
.lever.down .knob { transform: translateY(90px); }
.payout-info { display:none !important; }

/* Result */
.xmas-result .result-title { font-size:24px; color:#fff; margin-bottom:6px; font-weight:800; }
.xmas-result .result-prize { font-size:30px; font-weight:900; color:#ffd86f; text-shadow:0 0 14px rgba(255,216,111,.55); margin-bottom:10px; }

/* Force hidden state even if theme overrides */
#xmas-slot-overlay .xmas-hidden { display:none !important; }
.xmas-hidden { display:none !important; }

/* Fireworks canvas */
.xmas-fireworks { position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:5; pointer-events:none; }

/* Responsive */
@media (max-width: 640px){
  .xmas-modal { background: var(--xmas-card-bg, linear-gradient(180deg, rgba(20,22,35,.9), rgba(10,10,16,.9)));  width: min(94vw, 520px); padding: 12px 12px 16px; }
  .slot-machine { width: 94vw; padding: 12px 14px 18px; }
  .reels { gap:10px; }
  .reel { width:64px; height:80px; font-size:40px; }
  .lever { right:-18px; top:14px; height:120px; }
  .lever .knob { width:32px; height:32px; }
  .lever.down .knob { transform: translateY(70px); }
  .xmas-open-btn, .xmas-spin-btn, .claim-btn { padding: 9px 16px; font-size: 14px; }
  .xmas-result .result-prize { font-size: 28px; }
}
@media (max-width: 360px){
  .reel { width:56px; height:72px; font-size:30px; }
  .slot-machine { padding: 10px 12px 16px; }
  .xmas-gift { transform: scale(.9); }
}

/* Draggable cursor */
.xmas-modal { background: var(--xmas-card-bg, linear-gradient(180deg, rgba(20,22,35,.9), rgba(10,10,16,.9)));  cursor: move; }
.xmas-modal .xmas-slot-stage, .xmas-modal .xmas-gift-stage, .xmas-modal .xmas-result { cursor: default; }

/* Remove any theme pseudo-element arrows or badges inside slot container */
.slot-machine::before, .slot-machine::after,
.reels::before, .reels::after {
  content: none !important;
  display: none !important;
}

/* Casino celebration layers */
.xmas-coins { position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:6; pointer-events:none; }

/* Neon marquee border around result stage */
.xmas-result { position: relative; }
.xmas-result .result-title { position: relative; z-index: 2; }
.xmas-result.marquee::after {
  content:''; position:absolute; inset:-10px; border-radius:16px;
  background:
    radial-gradient(circle at 10% 50%, rgba(255,255,255,.8) 0 2px, transparent 3px) repeat-x,
    radial-gradient(circle at 10% 50%, rgba(255,190,120,.8) 0 2px, transparent 3px) repeat-x;
  background-size: 18px 6px, 18px 6px; background-position: 0 0, 0 8px;
  filter: drop-shadow(0 0 6px rgba(255,196,128,.8));
  animation: marqueeMove 1.2s linear infinite;
  pointer-events:none; z-index:1;
}
@keyframes marqueeMove { from { background-position: 0 0, 0 8px; } to { background-position: 18px 0, 18px 8px; } }

/* Prize bounce pop */
.xmas-result .result-prize { animation: prizePop .7s cubic-bezier(.2,.9,.2,1) 1; }
@keyframes prizePop { 0%{ transform: scale(.8); opacity:.1; } 60%{ transform: scale(1.08); opacity:1;} 100%{ transform: scale(1);} }

/* Remove any marquee border styles explicitly */
.xmas-modal.marquee-border::before,
.xmas-modal.marquee-border::after { display:none !important; content:none !important; }


/* v1.0.1: make close button ALWAYS clickable */
.xmas-close{
  position:absolute; top:10px; right:12px;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index: 1000; pointer-events:auto;
  background: transparent;
}
/* Larger invisible tap area for mobile */
.xmas-close::after{ content:''; position:absolute; inset:-8px; }

/* Any visual effect layers must never block interactions */
.xmas-fireworks, .xmas-confetti, .xmas-coins{ pointer-events:none !important; z-index: 10; }
.xmas-slot-stage canvas, .xmas-result canvas{ pointer-events:none !important; }

/* Ensure modal sits above card inner shadows of themes */
#xmas-slot-overlay .xmas-modal{ position:relative; z-index: 5; }

/* v1.0.2 extra-compact on small devices */
@media (max-width: 420px){
  #xmas-slot-overlay .xmas-modal{ width: 94vw; padding: 10px 10px 12px; border-radius:14px; }
  .slot-machine{ width: 300px; max-width: 92vw; padding: 8px 10px 12px; }
  .reel{ width:58px; height:74px; }
  .reel span{ font-size:34px !important; }
  .xmas-open-btn, .xmas-spin-btn, .claim-btn{ padding: 9px 16px; font-size:13px; }
  .result-prize{ font-size:28px !important; }
}


/* v1.0.3 ultra-compact mobile */
@media (max-width: 480px){
  #xmas-slot-overlay .xmas-modal{ width: 90vw; padding: 8px 10px 10px; border-radius:14px; }
  .slot-machine{ width: 280px; max-width: 90vw; padding: 8px 8px 10px; }
  .reel{ width:54px; height:68px; }
  .reel span{ font-size:32px !important; }
  .xmas-open-btn, .xmas-spin-btn, .claim-btn{ padding: 8px 14px; font-size:12.5px; }
  .slot-top{ font-size:14px; }
  .result-prize{ font-size:26px !important; }
}

/* very small phones */
@media (max-width: 360px){
  #xmas-slot-overlay .xmas-modal{ width: 88vw; padding: 8px; border-radius:12px; }
  .slot-machine{ width: 260px; max-width: 88vw; padding: 6px 6px 8px; }
  .reel{ width:50px; height:62px; }
  .reel span{ font-size:30px !important; }
  .xmas-open-btn, .xmas-spin-btn, .claim-btn{ padding: 7px 12px; font-size:12px; }
  .result-prize{ font-size:24px !important; }
}