/* =========================================
   RoadDog Wheel Spin
   Version: 1.1.0 — flat vertical reel (mobile-first)
   All rules scoped to .rws-* — nothing global except body.rws-no-scroll.
   ========================================= */

/* ===== FONTS (bundled, no external dependency) ===== */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/bebas-neue.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/nunito-400.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/nunito-700.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/nunito-800.woff2') format('woff2');}

/* ===== DESIGN TOKENS ===== */
.rws-main-container{
  --rws-primary:#EB232D;
  --rws-primary-dark:#b81820;
  --rws-frame:#3b1a6e;          /* deep purple housing */
  --rws-frame-dark:#2a1150;
  --rws-frame-edge:#e9e4f2;     /* light outer trim */
  --rws-pointer:#F5A623;        /* gold pointers */
  --rws-gold:#f2c94c;
  --rws-cream:#f7f4ee;
  --rws-ink:#241a3d;
  --rws-font:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --rws-display:'Bebas Neue','Nunito',sans-serif;
}

/* ===== BASE / Elementor compatibility ===== */
.rws-main-container,
.rws-main-container *,
.rws-main-container *::before,
.rws-main-container *::after{box-sizing:border-box;}
.rws-game-modal,
.rws-game-modal *,
.rws-game-modal *::before,
.rws-game-modal *::after{box-sizing:border-box;}

.rws-main-container{
  display:block;max-width:100%;min-width:0;
  font-family:var(--rws-font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  position:relative;text-align:center;
  -webkit-tap-highlight-color:transparent;
}
body.rws-no-scroll{overflow:hidden;height:100vh;}

.rws-login-prompt{
  font-family:var(--rws-font);font-weight:700;color:#6b5a92;
  padding:20px;text-align:center;
}

/* ===== REEL FRAME ===== */
.rws-wheel-mount{
  display:flex;justify-content:center;align-items:center;
  width:100%;max-width:min(92vw,340px);margin:0 auto;
  position:relative;
}
.rws-reel-frame{
  position:relative;width:100%;
  background:linear-gradient(180deg,var(--rws-frame) 0%,var(--rws-frame-dark) 100%);
  border:6px solid var(--rws-frame-edge);
  border-radius:28px;
  padding:14px 12px;
  box-shadow:
    0 10px 30px rgba(30,10,70,.45),
    inset 0 2px 8px rgba(255,255,255,.08),
    inset 0 -6px 14px rgba(0,0,0,.35);
}
/* the visible slot window — panels are clipped by it, like the reference */
.rws-reel-window{
  position:relative;
  height:min(118vw,420px);
  overflow:hidden;
  border-radius:16px;
  contain:layout paint;  /* mobile perf: isolate repaints */
}
/* soft shading at the clipped edges for depth */
.rws-reel-window::before,
.rws-reel-window::after{
  content:"";position:absolute;left:0;right:0;height:14%;z-index:5;pointer-events:none;
}
.rws-reel-window::before{top:0;background:linear-gradient(180deg,rgba(20,8,45,.55),transparent);}
.rws-reel-window::after{bottom:0;background:linear-gradient(0deg,rgba(20,8,45,.55),transparent);}

/* ===== PANELS ===== */
.rws-panel{
  position:absolute;left:2%;width:96%;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  will-change:transform;               /* GPU-composited scrolling */
  transform:translateY(-9999px);       /* offscreen until positioned */
  box-shadow:inset 0 2px 4px rgba(255,255,255,.35), inset 0 -4px 8px rgba(0,0,0,.18);
}
/* jackpot: shimmering patterned panel like the reference's special card */
.rws-panel.rws-jackpot{
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.35) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 74%, rgba(255,255,255,.3) 0 2px, transparent 3px),
    repeating-radial-gradient(circle at 30% 120%, rgba(255,255,255,.10) 0 7px, transparent 7px 15px),
    linear-gradient(135deg,#12b7a6 0%,#2a7fd4 55%,#6d5ae0 100%);
}

/* white pill badge with coin + value */
.rws-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#ffffff,#eef0f4);
  border-radius:999px;
  padding:8px 20px;
  box-shadow:0 3px 0 rgba(0,0,0,.14), inset 0 1px 2px rgba(255,255,255,.9);
  font-family:var(--rws-font);font-weight:800;
  font-size:clamp(22px,7vw,30px);color:var(--rws-ink);
  line-height:1;letter-spacing:-0.01em;
}
.rws-coin{
  width:1.05em;height:1.05em;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 35% 30%,#ffd766,#f5a623 60%,#c87d0e);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.25), inset 0 2px 2px rgba(255,255,255,.5);
  position:relative;
}
.rws-coin::after{
  content:"";position:absolute;inset:22%;
  background:
    linear-gradient(#fff8e6,#fff8e6) 50% 50%/62% 18% no-repeat,
    linear-gradient(#fff8e6,#fff8e6) 50% 50%/18% 62% no-repeat; /* bone-ish + */
  border-radius:2px;opacity:.9;
}

/* ===== SIDE POINTERS (dual, at the win line) ===== */
.rws-pointer{
  position:absolute;top:50%;transform:translateY(-50%);
  width:0;height:0;z-index:6;
  border-top:20px solid transparent;border-bottom:20px solid transparent;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.rws-pointer-left{left:-4px;border-left:26px solid var(--rws-pointer);}
.rws-pointer-right{right:-4px;border-right:26px solid var(--rws-pointer);}
.rws-pointer.rws-tick-anim{animation:rws-ptick .1s ease;}
@keyframes rws-ptick{0%{transform:translateY(-50%);}50%{transform:translateY(-50%) scale(.86);}100%{transform:translateY(-50%);}}

/* ===== SPIN BUTTON — big 3D puck ===== */
.rws-controls{margin-top:26px;display:flex;justify-content:center;}
.rws-spin-btn{
  font-family:var(--rws-display);letter-spacing:.1em;
  font-size:clamp(22px,6vw,28px);color:#fff;
  cursor:pointer;border:none;
  min-width:min(60vw,220px);min-height:64px;      /* comfy touch target */
  padding:14px 46px;border-radius:999px;position:relative;
  background:linear-gradient(180deg,#a44df0 0%,#7b2fd0 55%,#5c1fa8 100%);
  box-shadow:
    0 8px 0 #47187f,
    0 14px 0 #d9a418,                   /* gold base ring */
    0 18px 26px rgba(60,20,120,.5);
  transition:transform .08s ease,box-shadow .08s ease;
  touch-action:manipulation;
}
.rws-spin-btn:hover:not(:disabled){transform:translateY(-1px);}
.rws-spin-btn:active:not(:disabled){
  transform:translateY(6px);
  box-shadow:0 2px 0 #47187f,0 8px 0 #d9a418,0 10px 16px rgba(60,20,120,.4);
}
.rws-spin-btn:disabled{
  opacity:.6;cursor:not-allowed;filter:grayscale(.35);
  font-size:clamp(15px,4.2vw,18px);
}

/* ===== WIN MODAL ===== */
.rws-game-modal{
  position:fixed;inset:0;z-index:99999;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(24,10,52,.8);backdrop-filter:blur(5px);
}
.rws-game-modal.rws-open{display:flex;animation:rws-fade .25s ease;}
@keyframes rws-fade{from{opacity:0;}to{opacity:1;}}
.rws-modal-card{
  background:linear-gradient(165deg,#ffffff,#f2eefc);color:var(--rws-ink);
  border-radius:26px;padding:32px 34px;text-align:center;max-width:360px;width:100%;
  box-shadow:0 30px 80px rgba(20,5,50,.6);position:relative;border:5px solid var(--rws-gold);
  animation:rws-rise .4s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes rws-rise{from{opacity:0;transform:scale(.7) translateY(30px);}to{opacity:1;transform:none;}}
.rws-modal-burst{font-size:52px;line-height:1;margin-bottom:4px;animation:rws-burst .8s ease;}
@keyframes rws-burst{from{transform:scale(0) rotate(-180deg);}to{transform:none;}}
.rws-modal-head{font-family:var(--rws-display);font-size:32px;letter-spacing:.04em;margin:6px 0 2px;color:#7b2fd0;}
.rws-modal-amt{
  display:inline-flex;align-items:center;gap:10px;margin:12px 0 4px;
  background:linear-gradient(180deg,#ffffff,#eef0f4);
  border-radius:999px;padding:10px 26px;
  box-shadow:0 3px 0 rgba(0,0,0,.12), inset 0 1px 2px rgba(255,255,255,.9);
  font-weight:800;font-size:40px;color:var(--rws-ink);line-height:1;
}
.rws-modal-sub{font-size:13px;letter-spacing:.2em;color:#8a7fa8;font-weight:800;margin-top:2px;}
.rws-claim-btn{
  font-family:var(--rws-display);font-size:22px;letter-spacing:.06em;color:#fff;border:none;cursor:pointer;
  background:linear-gradient(180deg,#2bb673,#179458);padding:13px 42px;border-radius:999px;margin-top:16px;
  min-height:52px;box-shadow:0 5px 0 #128049,0 8px 18px rgba(23,148,88,.4);transition:transform .08s;
  touch-action:manipulation;
}
.rws-claim-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #128049;}
.rws-claim-sub{font-size:12px;color:#6b5a92;margin-top:10px;font-weight:700;}
.rws-claim-sub b{color:#7b2fd0;}

/* ===== TOAST ===== */
.rws-toast{margin-top:16px;font-weight:700;font-size:14px;color:#6b5a92;min-height:20px;}
.rws-toast.rws-error{color:var(--rws-primary);}

/* ===== CONFETTI ===== */
.rws-confetti{position:fixed;inset:0;pointer-events:none;z-index:100000;display:none;}
.rws-confetti.rws-on{display:block;}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
  .rws-modal-card,.rws-modal-burst,.rws-game-modal.rws-open{animation:none;}
}