/* =========================
   Lucky Spin — Premium/Arcade Theme
   (no HTML/JS changes required)
   ========================= */
:root{
  --ink:#0b111a;
  --panel:#0f1420;
  --cardTop:#101728;
  --cardBot:#0b1220;
  --line:#2b364a;
  --text:#e7e9ed;
  --muted:#9aa3b2;
  --glow:0 14px 34px rgba(0,0,0,.45);
  --gold:#d4af37;
  --accent:#3b82f6;
  --aqua:#06b6d4;
}

.lw-title{margin:0;font-size:22px;font-weight:800;display:flex;align-items:center;gap:10px}

/* Card / container */
.ls-card{
  max-width:1200px;
  margin:16px auto;
  padding:22px;
  color:var(--text);
  border:1px solid transparent;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) padding-box,
    radial-gradient(130% 100% at 0% 0%, rgba(212,175,55,.16), transparent 40%) border-box,
    linear-gradient(180deg, var(--cardTop), var(--cardBot)) padding-box;
  box-shadow: var(--glow), inset 0 0 0 1px rgba(255,255,255,.03);
}

/* Header + badges */
.ls-badges{ margin:8px 0 14px; display:flex; gap:10px; flex-wrap:wrap; }
.ls-badge{
  font-size:12px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#0e1722,#0b1220);
  color:#cfe0ff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.ls-note{ color:var(--muted); font-size:12px; margin-top:10px; text-align:center; }

/* Cost / balance pills */
.cost-badges{ display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.cost-badges .badge-like{
  padding:6px 12px;
  border-radius:999px;
  background:#0e1722;
  border:1px solid rgba(255,255,255,.06);
  color:#d7e0ea;
  font-size:13px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

/* Layout */
.ls-row{ display:grid; gap:26px; }
@media (min-width:1100px){ .ls-row{ grid-template-columns:620px 1fr; } }

/* Wheel area */
:root{ --wheel-size:560px; }
@media (max-width:900px){ :root{ --wheel-size: 420px; } }

.wheel-wrap{ display:flex; align-items:center; justify-content:center; }
.wheel-container{ width:var(--wheel-size); height:var(--wheel-size); position:relative; }

/* Static pointer (top, pointing DOWN) */
.wheel-pointer {
  position: absolute;
  left: 50%;
  top: 4px;                /* raise it up a bit since it's now pointing down */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 24px solid #ffe7aa;   /* triangle now points downward */
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
  z-index: 30;
}

/* remove the after-box entirely */
.wheel-pointer::after {
  content: none;
}


/* Rotor (the spinning group) */
.wheel-rotor{
  position:absolute; inset:0; border-radius:50%;
  transform-origin:center center;
  transition: transform 4.2s cubic-bezier(.12,.65,.18,.99);
  z-index:1;
}

/* The wheel disc itself (rich layered look) */
#wheel{
  position:absolute; inset:0; border-radius:50%;
  border:18px solid rgba(34,44,60,.9);
  /* base paint */
  background:
    /* gloss rings */
    radial-gradient(closest-side, rgba(255,255,255,.06), transparent 45%) center/100% 100% no-repeat,
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.22), transparent 55%) center/100% 100% no-repeat,
    /* separators */
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.08) 0 1deg, transparent 1deg 30deg),
    /* color wedges */
    conic-gradient(
      from -90deg,
      #1a2334, #1c2e48, #1a2334, #102034, #16293e, #1a2334, #1b2b46, #1a2334
    );
  box-shadow:
    inset 0 10px 24px rgba(0,0,0,.55),
    0 18px 40px rgba(0,0,0,.45);
}

/* Subtle top sheen that does NOT rotate with the wheel */
.wheel-container::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(50% 60% at 30% 10%, rgba(212,175,55,.10), transparent 60%);
  mix-blend-mode: screen;
}

/* Segment labels/icons (absolute, non-interactive) */
.wheel-segments{ position:absolute; inset:0; pointer-events:none; z-index:5; }
.wheel-seg{
  position:absolute; display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:14px;
  background: linear-gradient(180deg, rgba(10,14,18,.72), rgba(8,12,16,.38));
  border:1px solid rgba(255,255,255,.06);
  color:#eef3ff; font-size:13px; white-space:nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.55);
  transform: translate(-50%,-50%);
  backdrop-filter: blur(2px);
}
.wheel-seg img{
  width:20px; height:20px; object-fit:contain; border-radius:4px;
  background:#071017; border:1px solid rgba(255,255,255,.06);
}

/* Center button (SPIN) */
.wheel-nub{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:170px; height:170px; border-radius:50%;
  color:#111; font-weight:900; letter-spacing:.8px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 30% 30%, #ffe7aa 0%, #f4c44e 40%, #d99b2a 60%, #a66f15 100%);
  box-shadow:
    inset 0 8px 26px rgba(255,255,255,.25),
    0 20px 34px rgba(0,0,0,.55),
    0 0 0 4px rgba(212,175,55,.18);
  cursor:pointer;
  z-index:20;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.wheel-nub::before{
  /* decorative ring */
  content:""; position:absolute; inset:10px; border-radius:50%;
  border:2px solid rgba(255,255,255,.28);
  box-shadow: inset 0 0 18px rgba(255,255,255,.25);
}
.wheel-nub::after{
  /* shimmer sweep */
  content:""; position:absolute; inset:0; border-radius:50%;
  background: linear-gradient(110deg, rgba(255,255,255,.45), rgba(255,255,255,0) 35%);
  background-size: 200% 100%;
  mix-blend-mode: screen; opacity:.18;
  animation: nub-shine 3s linear infinite;
}
@keyframes nub-shine{
  0%{ background-position:-180% 0; }
  100%{ background-position:180% 0; }
}
.wheel-nub:active{ transform:translate(-50%,-50%) scale(.985); }

/* Preview chips (right column) */
.preview-chip{
  background:#121a27;
  border:1px solid rgba(255,255,255,.08);
  color:#e7e9ed;
  border-radius:12px;
  padding:10px;
  display:flex; align-items:center; gap:10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 8px 22px rgba(0,0,0,.25);
}
.preview-chip img{
  width:22px; height:22px; object-fit:contain; border-radius:4px;
  background:#0b1220; border:1px solid #1f2937;
}

/* Responsive tweaks */
@media(max-width:900px){
  .wheel-nub{ width:130px; height:130px; }
  .wheel-seg{ font-size:12px; padding:6px 10px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .wheel-rotor{ transition: none !important; }
  .wheel-nub::after{ animation:none; }
}

/* Winning glow */
@keyframes wheel-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,220,120,.65); }
  100% { box-shadow: 0 0 0 12px rgba(255,220,120,0); }
}
.wheel-seg.win{
  background: linear-gradient(180deg, rgba(28,22,0,.92), rgba(18,14,0,.58));
  border-color: #ffd46b !important;
  color:#fff4cc;
  transform: translate(-50%,-50%) scale(1.08);
  box-shadow:
    0 0 26px rgba(255,220,120,.95),
    0 0 0 2px rgba(255,220,120,.75);
  animation: wheel-pulse 1.1s ease-out 2;
}
.wheel-label.win{
  color:#ffe8a6 !important;
  text-shadow: 0 0 10px rgba(255,220,120,.9), 0 0 2px rgba(0,0,0,.85);
}

/* ===== Modern Wheel Preview Cards ===== */
.preview-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  margin-top:8px;
}

.preview-card{
  --brand:#7dd3fc;                   /* default accent (will be overridden per type) */
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)) padding-box,
    radial-gradient(120% 100% at 0% 0%, color-mix(in oklab, var(--brand) 24%, transparent), transparent 50%) border-box,
    linear-gradient(180deg, #111827, #0b1220) padding-box;
  border:1px solid color-mix(in oklab, var(--brand) 24%, rgba(255,255,255,.08));
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.02);
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
  overflow:hidden;
}

.preview-card::after{
  /* subtle sheen sweep on hover */
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(110deg, rgba(255,255,255,.12), rgba(255,255,255,0) 35%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  opacity:.35;
}

.preview-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(0,0,0,.45),
    0 0 0 1px color-mix(in oklab, var(--brand) 30%, transparent);
}

.preview-card:hover::after{
  transform: translateX(0);
}

.preview-icon{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; flex:0 0 auto;
  background: color-mix(in oklab, var(--brand) 12%, #0b1220);
  border:1px solid color-mix(in oklab, var(--brand) 35%, rgba(255,255,255,.06));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 8px 16px rgba(0,0,0,.4),
    0 0 16px color-mix(in oklab, var(--brand) 18%, transparent);
}
.preview-icon img{ width:22px; height:22px; object-fit:contain; }

.preview-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.preview-title{
  color:#e7e9ed;
  font-weight:700;
  letter-spacing:.2px;
  font-size:14px;
  line-height:1.25;
  white-space:normal;          /* was nowrap */
  overflow:visible;            /* was hidden */
  text-overflow:clip;          /* was ellipsis */
  overflow-wrap:anywhere;      /* break long words if needed */
}
.preview-sub{
  color:#9aa3b2; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.preview-meta{
  align-self:flex-start; margin-left:auto; padding:6px 10px; border-radius:999px; font-size:12px;
  color:color-mix(in oklab, var(--brand) 80%, #fff);
  background: color-mix(in oklab, var(--brand) 16%, rgba(255,255,255,.06));
  border:1px solid color-mix(in oklab, var(--brand) 28%, rgba(255,255,255,.08));
}

/* Per-type accents */
.preview-card.is-cash { --brand:#ffd54a; }      /* gold */
.preview-card.is-zen  { --brand:#60a5fa; }      /* blue */
.preview-card.is-item { --brand:#a78bfa; }      /* violet fallback for items */

/* recent timestamp pill (left of value) */
/* pills */
.preview-time, .preview-date, .preview-meta{
  padding:6px 10px; border-radius:999px; font-size:12px; white-space:nowrap;
  border:1px solid rgba(255,255,255,.08);
}
.preview-time{ color:#b9c2d0; background:rgba(255,255,255,.04); margin-left:auto; margin-right:8px; }
.preview-date{ color:#94a3b8; background:rgba(255,255,255,.04); margin-right:8px; }

/* header with toggle */
.recent-header{ display:flex; align-items:center; gap:10px; margin:6px 0 10px; }
.recent-toggle{
  font-size:12px; padding:6px 10px; border-radius:999px; cursor:pointer;
  color:#0f172a; background:#93c5fd; border:0; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.recent-toggle:hover{ filter:brightness(1.05); }

/* collapse to top 5 */
#recentList.is-collapsed > .preview-card:nth-child(n+6){ display:none; }

/* (optional) scrollable version — apply .scroll-y to the container instead of toggle */
.scroll-y{ max-height:420px; overflow:auto; padding-right:25px; }

/* shimmer keyframes */
        @keyframes shimmer {
          0%   { background-position: -200% 0; }
          100% { background-position: 200% 0; }
        }

        .bp-badge-premium {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 6px 14px;
          border-radius: 999px;
          font-weight: 700;
          color: #ffe8a6;
          background: linear-gradient(
            110deg,
            #3a2a00 20%,
            #8b5e00 40%,
            #d4af37 60%,
            #8b5e00 80%,
            #3a2a00 100%
          );
          background-size: 250% auto;   /* allows shimmer sweep */
          border: 1px solid #d4af37;
          box-shadow: 0 0 12px rgba(212,175,55,.25),
                      inset 0 0 6px rgba(212,175,55,.3);
          text-shadow: 0 0 4px rgba(0,0,0,.5);

          /* shimmer animation */
          animation: shimmer 3s linear infinite;
        }

        .bp-badge-premium i {
          color: #ffd966;
          text-shadow: 0 0 6px rgba(255,215,0,.6);
        }
        
        /* -------- Modern, on-brand scrollbar for the rewards list -------- */
/* Works in Chromium/Edge/Safari */
.scroll-y{
  --sb-track: linear-gradient(180deg,#0e1623,#0b1220);
  --sb-thumb: linear-gradient(180deg,#FFD86B 0%, #D4AF37 100%);
--sb-thumb-hover: linear-gradient(180deg,#FFE7A6 0%, #E2C24F 100%);
  --sb-outline: rgba(255,255,255,.10); /* subtle border to match cards */
  scrollbar-width: thin;               /* Firefox fallback (see below) */
  scrollbar-color: #6b7280 transparent;
}

/* WebKit (Chrome/Edge/Safari) */
.scroll-y::-webkit-scrollbar{
  width: 10px;              /* slim bar */
}
.scroll-y::-webkit-scrollbar-track{
  background: var(--sb-track);
  border: 1px solid var(--sb-outline);
  border-radius: 999px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.35);
  margin: 6px;              /* leaves rounded caps top/bottom */
}
.scroll-y::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border: 2px solid transparent;       /* creates inset look */
  background-clip: padding-box;
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 4px 10px rgba(0,0,0,.35);
}
.scroll-y::-webkit-scrollbar-thumb:hover{
  background: var(--sb-thumb-hover);
}


/* Optional: dark overlay scrollbar for macOS overlay style */
@supports (scrollbar-gutter: stable){
  .scroll-y{ scrollbar-gutter: stable both-edges; }
}

/* Firefox refinement (uses scrollbar-color above) */
@-moz-document url-prefix(){
  .scroll-y{
    scrollbar-width: thin;
  }
}

/* Force gold accent scrollbar for the rewards list */
.scroll-y.gold-scroll{
  /* ensures the element actually scrolls */
  max-height: 420px;
  overflow: auto;
  scrollbar-width: thin;                          /* Firefox */
  scrollbar-color: #d4af37 rgba(255,255,255,0.06);/* Firefox colors */
}

/* WebKit browsers (Chrome/Edge/Safari) */
.scroll-y.gold-scroll::-webkit-scrollbar{
  width: 10px;
}

.scroll-y.gold-scroll::-webkit-scrollbar-track{
  background: linear-gradient(180deg,#0f1625,#0b1220);
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 999px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.35);
  margin: 6px;
}

.scroll-y.gold-scroll::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,#FFE38A 0%, #D4AF37 100%); /* GOLD */
  border: 2px solid transparent;   /* inset look */
  background-clip: padding-box;
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 4px 10px rgba(0,0,0,.35);
}

.scroll-y.gold-scroll::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg,#FFF0B8 0%, #E4C765 100%);
}

/* Optional: make the page scrollbar match, if the BODY scrolls instead */
body.gold-scrollbars::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,#FFE38A 0%, #D4AF37 100%);
}
body.gold-scrollbars{
  scrollbar-color: #d4af37 rgba(255,255,255,0.06);
}