/* =====================================================
   RIP IT — Main Stylesheet
   =====================================================

   TABLE OF CONTENTS
   -----------------
   1.  Reset & Base
   1b. Splash Screen
   2.  App Shell
   3.  Header
   4.  Wallets
   5.  Ad Button
   6.  Daily Challenge Pill
   7.  RIP IT Button
   8.  Coming Soon Teaser
   9.  Bottom Nav
   10. Back Bar
   11. Challenge Screen
   12. Pack Select Screen
   13. Pack Game Header
   14. Pack Banners & Themes
   15. No Funds Notice
   16. Ticket / Pull-Tab Area
   17. Result Display
   18. Prize Table
   19. Toast Notification
   20. Jackpot Overlay
   21. Win Particle Animation
   22. Profile Screen
   23. Symbol Win Tracker
   24. Tappable XP Bar
   25. Pre-game Inline Mode Toggle

   QUICK EDIT GUIDE
   ----------------
   - Colors:      Search for #FFD700 (gold), #1D9E75 (cash/green)
   - Fonts:       "Bebas Neue" = RIP IT button font; system-ui everywhere else
   - Background:  body / .app background is #05050f (near-black dark blue)
   - Max width:   .app { max-width: 430px } — controls mobile column width

===================================================== */

/* ── 1. Reset & Base ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Black+Han+Sans&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #05050f;
}

/* Twemoji — consistent cross-platform emoji rendering */
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
  display: inline-block;
}

/* ── 1b. Splash Screen ────────────────────────────── */
#splashScreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #05050f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition: opacity 0.5s ease;
}

#splashLogo {
  width: 110px;
  height: 110px;
  object-fit: contain;
  border-radius: 24px;
}

#splashTitle {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  letter-spacing: 4px;
  color: #FFD700;
  text-shadow: 0 0 24px rgba(255, 215, 0, 0.5);
}

#splashScreen.splash-fade {
  opacity: 0;
  pointer-events: none;
}

#splashScreen.splash-gone {
  display: none;
}

/* ── 2. App Shell ─────────────────────────────────── */
/* Change max-width here to adjust the column width on wider screens */
.app {
  max-width: 430px;
  margin: 0 auto;
  background: #05050f;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.screen { display: none; }
.screen.active { display: block; }

/* ── Screen slide transitions ─────────────────────── */
.screen.nav-enter-right {
  display: block !important;
  position: absolute;
  top: 0; left: 0; right: 0;
  min-height: 100%;
  z-index: 50;
  animation: navEnterRight 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.screen.nav-enter-left {
  display: block !important;
  position: absolute;
  top: 0; left: 0; right: 0;
  min-height: 100%;
  z-index: 50;
  animation: navEnterLeft 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes navEnterRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes navEnterLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ── 3. Header ────────────────────────────────────── */
.header {
  background: #07071a;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 210, 0, 0.12);
}

.hicon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 210, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  color: rgba(255, 210, 0, 0.6);
  background: none;
}

.hicon-i {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
  color: #FFD700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.55);
  user-select: none;
  -webkit-user-select: none;
}

/* Game logo — change letter-spacing/font-size here */
.logo {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 3px;
  color: #FFD700;
  text-shadow: 0 0 12px #FFD700, 0 0 30px rgba(255, 215, 0, 0.4);
}

.logo-tm {
  font-size: 9px;
  color: rgba(255, 215, 0, 0.45);
  vertical-align: super;
  letter-spacing: 0;
}

/* ── 4. Wallets ───────────────────────────────────── */
.wallets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px 0;
}

.wallet {
  background: linear-gradient(150deg, #0e0e28 0%, #0a0a1e 100%);
  border-radius: 12px;
  border: 1px solid rgba(255, 210, 0, 0.22);
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 210, 0, 0.06);
}

.w-icon { font-size: 24px; flex-shrink: 0; filter: drop-shadow(0 0 7px rgba(255,215,0,0.6)); }

.w-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 210, 0, 0.4);
  margin-bottom: 2px;
}

.w-val {
  font-size: 18px;
  font-weight: 500;
  color: #FFD700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.w-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 1px;
}

/* ── 5. Ad Button ─────────────────────────────────── */
/* Hidden by default — shown by JS only when coins === 0 */
.ad-btn-wrap { padding: 10px 16px 0; display: none; }

.ad-btn {
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 210, 0, 0.3);
  background: rgba(255, 210, 0, 0.04);
  color: rgba(255, 210, 0, 0.55);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s;
}

.ad-btn:hover {
  background: rgba(255, 210, 0, 0.09);
  border-color: rgba(255, 210, 0, 0.5);
}

.ad-btn:disabled { opacity: 0.45; cursor: default; }

/* ── 6. Daily Challenge Pill ──────────────────────── */
.daily-pill {
  margin: 12px 16px 0;
  border-radius: 12px;
  padding: 1.5px;
  background: linear-gradient(90deg, rgba(255,40,40,0.3), rgba(255,60,60,0.9), rgba(255,40,40,0.3));
  box-shadow: 0 0 18px rgba(255,40,40,0.5), 0 0 40px rgba(255,40,40,0.2);
  animation: redpulse 2s ease-in-out infinite;
}

@keyframes redpulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255,40,40,0.5), 0 0 40px rgba(255,40,40,0.2); }
  50%       { box-shadow: 0 0 28px rgba(255,40,40,0.8), 0 0 60px rgba(255,40,40,0.35); }
}

.daily-pill-inner {
  background: #1a0505;
  border-radius: 11px;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.15s;
}

.daily-pill-inner:hover { background: #220808; }

.dpl { display: flex; align-items: center; gap: 10px; }

.dp-t1 { font-size: 13px; font-weight: 500; color: #ff6b6b; }

.dp-t2 {
  font-size: 11px;
  color: rgba(255, 100, 100, 0.5);
  margin-top: 2px;
}

.dp-arrow { font-size: 20px; color: rgba(255, 80, 80, 0.6); }

/* ── 7. RIP IT Button ─────────────────────────────── */
/* Change padding to make button taller/shorter */
.rip-section { padding: 18px 16px 0; position: relative; }

/* Pulsing outer glow ring behind the button */
.rip-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  height: 90%;
  border-radius: 28px;
  background: transparent;
  border: 2px solid rgba(255, 215, 0, 0.45);
  animation: ripGlowRing 2.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes ripGlowRing {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0.7; }
  50%  { transform: translate(-50%, -50%) scale(1.06); opacity: 0.15; }
  100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.7; }
}

.rip-btn {
  width: 100%;
  padding: 32px 0;
  border-radius: 22px;
  border: none;
  cursor: pointer;
  color: #0a0500;
  /* Rich multi-stop gradient for depth */
  background: linear-gradient(180deg,
    #FFE566 0%,
    #FFD700 30%,
    #FFC200 65%,
    #E6A800 100%
  );
  /* 3D raised look: top highlight, bottom shadow, outer glow */
  box-shadow:
    0 6px 0 #9A6C00,
    0 8px 20px rgba(0,0,0,0.55),
    0 0 35px rgba(255,215,0,0.7),
    0 0 90px rgba(255,215,0,0.25),
    inset 0 2px 0 rgba(255,255,255,0.55),
    inset 0 -3px 6px rgba(0,0,0,0.2);
  transition: transform 0.08s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.08s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.rip-btn:hover {
  background: linear-gradient(180deg,
    #FFEC7A 0%,
    #FFD700 25%,
    #FFC800 60%,
    #E6B000 100%
  );
  box-shadow:
    0 6px 0 #9A6C00,
    0 10px 28px rgba(0,0,0,0.5),
    0 0 55px rgba(255,215,0,0.9),
    0 0 110px rgba(255,215,0,0.4),
    inset 0 2px 0 rgba(255,255,255,0.55),
    inset 0 -3px 6px rgba(0,0,0,0.2);
  transform: translateY(-2px) scale(1.012);
}

/* Deep press — button sinks down, shadow collapses */
.rip-btn:active {
  transform: translateY(5px) scale(0.97);
  box-shadow:
    0 1px 0 #9A6C00,
    0 2px 8px rgba(0,0,0,0.5),
    0 0 20px rgba(255,215,0,0.5),
    inset 0 2px 0 rgba(255,255,255,0.4),
    inset 0 3px 8px rgba(0,0,0,0.25);
}

/* Main RIP IT text — uses Bebas Neue font */
.rip-btn-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 60px;
  letter-spacing: 8px;
  line-height: 1;
  color: #0a0500;
  /* Embossed text shadow for depth */
  text-shadow:
    1px 1px 0 rgba(255,255,255,0.4),
    2px 3px 0 rgba(0,0,0,0.25),
    0 0 20px rgba(255,150,0,0.3);
}

/* Diagonal tear-line texture overlay */
.rip-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 8px,
    rgba(255,255,255,0.04) 8px,
    rgba(255,255,255,0.04) 9px
  );
  pointer-events: none;
  border-radius: 22px;
}

.rip-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
  animation: shine 2.4s infinite;
}

@keyframes shine {
  0%   { left: -100%; }
  40%  { left: 150%; }
  100% { left: 150%; }
}

.rip-sub {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255, 210, 0, 0.4);
  letter-spacing: 0.5px;
}

/* ── 8. Coming Soon Teaser ────────────────────────── */
/* ── Daily Challenges home widget ─────────────────── */
.home-ch-wrap {
  margin: 18px 16px 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.home-ch-wrap:active { background: rgba(255,255,255,0.09); }
.home-ch-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.home-ch-title  { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 0.3px; }
.home-ch-link   { font-size: 12px; color: rgba(255,205,0,0.8); font-weight: 600; }
.home-ch-progress-row { display: flex; align-items: center; gap: 10px; }
.home-ch-count  { font-size: 11px; color: rgba(255,255,255,0.55); white-space: nowrap; }
.home-ch-track  { flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.home-ch-fill   { height: 100%; background: linear-gradient(90deg, #1D9E75, #27c98b); border-radius: 3px; transition: width 0.4s ease; }

.teaser-wrap { margin: 18px 16px 0; }

.teaser-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 210, 0, 0.35);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.teaser-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 210, 0, 0.1);
}

.teaser-card {
  background: #0a0a1e;
  border-radius: 16px;
  border: 1px solid rgba(138, 43, 226, 0.3);
  overflow: hidden;
}

.teaser-art {
  height: 110px;
  background: #0a0318;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 34px;
  position: relative;
  overflow: hidden;
}

.teaser-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(138,43,226,0.18) 0%, transparent 70%);
}

.teaser-lock {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.teaser-lock-icon { font-size: 24px; }

.teaser-lock-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 2px;
}

.teaser-body {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tb-left .t1 { font-size: 14px; font-weight: 500; color: #c084fc; margin-bottom: 3px; }
.tb-left .t2 { font-size: 12px; color: rgba(196, 132, 252, 0.45); }
.tb-right .cv {
  font-size: 20px;
  font-weight: 500;
  color: #c084fc;
  text-shadow: 0 0 8px rgba(192, 132, 252, 0.5);
  text-align: right;
}

.tb-right .cl { font-size: 10px; color: rgba(196, 132, 252, 0.4); letter-spacing: 0.5px; }

.notify-btn {
  margin: 0 14px 14px;
  width: calc(100% - 28px);
  padding: 10px;
  border-radius: 10px;
  background: rgba(138, 43, 226, 0.12);
  border: 1px solid rgba(138, 43, 226, 0.32);
  color: #c084fc;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.notify-btn:hover { background: rgba(138, 43, 226, 0.22); }

/* ── Freedom Pack Teaser (home screen) ─────────────── */
.freedom-teaser-label {
  color: rgba(220, 20, 60, 0.65);
}
.freedom-teaser-label::after {
  background: rgba(220, 20, 60, 0.15);
}

.freedom-teaser-card {
  background: #04061a;
  border-color: rgba(220, 20, 60, 0.35);
}

.freedom-teaser-card .teaser-body {
  padding: 8px 12px;
}
.freedom-teaser-card .tb-left .t1 { font-size: 13px; margin-bottom: 2px; }
.freedom-teaser-card .tb-left .t2 { font-size: 11px; }
.freedom-teaser-card .tb-right .cv { font-size: 16px; }
.freedom-teaser-card .tb-right .cl { font-size: 9px; }

.freedom-teaser-art {
  background: radial-gradient(ellipse at 50% 60%, #001a50 0%, #020c22 60%, #0a0005 100%);
  padding: 0;
  height: 150px;
}

.freedom-teaser-glow {
  background: radial-gradient(ellipse at center, rgba(220,20,60,0.2) 0%, rgba(0,40,104,0.15) 50%, transparent 70%);
}

/* 3×2 grid of symbol images in the teaser art area */
.freedom-sym-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 1;
}
.freedom-sym-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 0 5px #DC143C) drop-shadow(0 0 10px rgba(255,255,255,0.75)) drop-shadow(0 0 18px #002868);
}

/* Footer row: AVAILABLE NOW badge + PLAY NOW CTA */
.freedom-teaser-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 12px;
  border-top: 1px solid rgba(220,20,60,0.12);
}
.ftf-badge {
  font-size: 11px;
  font-weight: 600;
  color: #DC143C;
  letter-spacing: 0.5px;
}
.ftf-cta {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #DC143C;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

/* 3×2 grid of symbols on the pack selection card art */
.freedom-card-sym-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 6px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.freedom-card-sym-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

/* "Ends May 26" expires pill */
.ps-pill.ps-pill-expires {
  background: rgba(220, 20, 60, 0.15);
  color: #DC143C;
  border-color: rgba(220, 20, 60, 0.25);
}

/* ── 9. Bottom Nav ────────────────────────────────── */
/* Change repeat(5, 1fr) to repeat(4, 1fr) if you remove the Store tab */
.bottom-nav {
  background: #07071a;
  border-top: 1px solid rgba(255, 210, 0, 0.1);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 10px 0 16px;
  margin-top: 18px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.nav-icon {
  font-size: 20px;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 45%,
    rgba(255,215,0,0.18) 0%,
    rgba(200,140,0,0.09) 55%,
    transparent 80%);
  transition: background 0.2s, box-shadow 0.2s;
}

.nav-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 4px rgba(255,215,0,0.55))
    drop-shadow(0 0 2px rgba(255,255,255,0.35))
    drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

.nav-label {
  font-size: 10px;
  color: rgba(255, 210, 0, 0.35);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nav-item.active .nav-label {
  color: #FFD700;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

/* Active state: freedom-pack style gold + white layered glow */
.nav-item.active .nav-icon {
  background: radial-gradient(circle at 50% 40%,
    rgba(255,215,0,0.38) 0%,
    rgba(200,140,0,0.18) 55%,
    transparent 80%);
  box-shadow:
    0 0 14px rgba(255,215,0,0.35),
    0 0 6px  rgba(255,255,255,0.18),
    inset 0 0 10px rgba(255,215,0,0.14);
}

.nav-item.active .nav-icon img {
  filter:
    drop-shadow(0 0 6px #FFD700)
    drop-shadow(0 0 10px rgba(255,255,255,0.85))
    drop-shadow(0 0 20px rgba(255,180,0,0.75));
}

.nav-item.active {
  box-shadow: inset 0 2px 0 #FFD700;
}

/* ── 10. Back Bar ─────────────────────────────────── */
.back-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 210, 0, 0.1);
  cursor: pointer;
  background: #07071a;
}

.back-arrow { color: #FFD700; font-size: 20px; }

.back-title {
  font-size: 16px;
  font-weight: 500;
  color: #FFD700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* ── 11. Challenge Screen ─────────────────────────── */
.ch-reward-bar {
  margin: 14px 16px 0;
  background: #0a0a1e;
  border-radius: 12px;
  border: 1px solid rgba(255, 210, 0, 0.2);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crb-left .t1 { font-size: 13px; font-weight: 500; color: #FFD700; margin-bottom: 2px; }
.crb-left .t2 { font-size: 11px; color: rgba(255, 210, 0, 0.35); }

.crb-right {
  background: rgba(255, 210, 0, 0.1);
  border: 1px solid rgba(255, 210, 0, 0.3);
  border-radius: 10px;
  padding: 7px 14px;
  text-align: center;
}

.crb-right .r1 { font-size: 17px; font-weight: 500; color: #FFD700; }
.crb-right .r2 { font-size: 10px; color: rgba(255, 210, 0, 0.4); }

/* Claim reward button */
.claim-btn {
  background: #1D9E75;
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 0 14px rgba(29, 158, 117, 0.4);
}

.claim-btn:hover { background: #22b887; transform: scale(1.03); }
.claim-btn:active { transform: scale(0.97); }

.claim-btn:disabled {
  background: rgba(29, 158, 117, 0.3);
  box-shadow: none;
  cursor: default;
  transform: none;
}

.prog-bar-card {
  margin: 12px 16px 0;
  background: #0a0a1e;
  border: 1px solid rgba(255, 210, 0, 0.1);
  border-radius: 12px;
  padding: 12px 16px;
}

.pbc-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pbc-top span { font-size: 12px; color: rgba(255, 210, 0, 0.4); }
.pbc-top strong { font-size: 12px; color: #FFD700; }

.pbc-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}

.pbc-fill {
  height: 6px;
  background: #FFD700;
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
  transition: width 0.4s;
}

.ch-cards {
  padding: 12px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ch-card {
  background: #0a0a1e;
  border-radius: 12px;
  border: 1px solid rgba(255, 210, 0, 0.1);
  border-left: 3px solid rgba(255, 210, 0, 0.45);
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.25s, background 0.3s;
}

.ch-card.done {
  border-color: rgba(29, 158, 117, 0.25);
  border-left: 3px solid #1D9E75;
  background: rgba(29, 158, 117, 0.04);
}
.ch-card-icon { font-size: 22px; width: 32px; text-align: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ch-icon-img  { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 0 3px rgba(255,200,0,0.35)); }
.ch-card-body { flex: 1; }
.ch-card-name { font-size: 13px; color: rgba(255, 255, 255, 0.8); margin-bottom: 2px; }
.ch-desc-txt  { font-size: 11px; color: rgba(255, 255, 255, 0.38); margin-bottom: 5px; }

.ch-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}

.ch-fill {
  height: 4px;
  background: #FFD700;
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
  transition: width 0.4s;
}

.ch-prog-txt { font-size: 11px; color: rgba(255, 210, 0, 0.35); margin-top: 4px; }

.ch-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 210, 0, 0.2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
}

.ch-check.done {
  background: rgba(255, 210, 0, 0.15);
  border-color: #FFD700;
  color: #FFD700;
}

/* ── 12. Pack Select Screen ───────────────────────── */
.ps-cards {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ps-card {
  border-radius: 18px;
  border: 2px solid rgba(255, 210, 0, 0.25);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  background: #0a0a1e;
}

.ps-card:hover { border-color: rgba(255, 210, 0, 0.55); transform: translateY(-2px); box-shadow: 0 10px 36px rgba(255,215,0,0.07); }
.ps-card:active { transform: scale(0.98); }

.ps-art {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  gap: 8px;
  position: relative;
}

/* Pack artwork backgrounds — change color to re-theme a pack */
/* Character images in pack art header */
.pack-art-char {
  height: 48px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 1px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.pack-art-tung {
  height: 54px;
  filter: sepia(0.2) saturate(1.8) brightness(1.15) drop-shadow(0 0 6px rgba(255,200,0,0.5));
}

.ps-art-fruit    { background: linear-gradient(145deg, #3d1f00 0%, #1f0d00 100%); }
.ps-art-gold     { background: linear-gradient(145deg, #2e1900 0%, #1a0d00 100%); }
.ps-art-italy    { background: linear-gradient(145deg, #1c0838 0%, #0d0618 100%); }
.ps-art-freedom  { background: linear-gradient(135deg, #BF0A30 0%, #002868 100%); }

/* ── Poster-style pack cards (all three packs) ──── */
.ps-poster-card {
  padding: 0;
  overflow: hidden;
}

.ps-poster-art {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}

.ps-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.ps-poster-art .ps-badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

.ps-poster-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 12px;
  background: linear-gradient(180deg, #1a0a00 0%, #120600 100%);
  border-radius: 0 0 14px 14px;
}

.ps-poster-footer-gold {
  background: linear-gradient(180deg, #1a1000 0%, #0f0900 100%);
}

.ps-poster-footer-italy {
  background: linear-gradient(180deg, #140820 0%, #0a0412 100%);
}

.ps-poster-cost {
  font-size: 13px;
  color: rgba(255, 210, 0, 0.7);
  background: rgba(255, 210, 0, 0.08);
  border: 1px solid rgba(255, 210, 0, 0.2);
  border-radius: 999px;
  padding: 5px 14px;
}

.ps-poster-play {
  font-size: 14px;
  font-weight: 700;
  color: #FFD700;
  letter-spacing: 0.5px;
}

.ps-card-body  { padding: 14px 16px 16px; }

/* Name row with inline cost badge */
.ps-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.ps-card-name {
  font-size: 17px;
  font-weight: 500;
  color: #FFD700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.ps-cost-pill {
  background: rgba(255, 210, 0, 0.08);
  border: 1px solid rgba(255, 210, 0, 0.2);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  color: rgba(255, 210, 0, 0.6);
  flex-shrink: 0;
}

.ps-card-desc { font-size: 13px; color: rgba(255, 255, 255, 0.35); margin-bottom: 10px; line-height: 1.5; }

/* Card footer: pills left + PLAY→ right */
.ps-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ps-pills { display: flex; gap: 7px; flex-wrap: wrap; flex: 1; }

.ps-play-lbl {
  font-size: 13px;
  font-weight: 600;
  color: #FFD700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap;
}

.ps-pill {
  background: rgba(255, 210, 0, 0.07);
  border: 1px solid rgba(255, 210, 0, 0.18);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  color: rgba(255, 210, 0, 0.6);
}

.ps-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 10px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
}

/* Badge colors for each pack */
.badge-italy   { background: #3b0764; color: #d8b4fe; }
.badge-hot     { background: #8b1a1a; color: #ffb3b3; }
.badge-new     { background: #0c4a35; color: #6effd4; }
.badge-freedom { background: #7a0020; color: #ffcdd8; }

/* ── 13. Pack Game Header ─────────────────────────── */
.pack-header {
  background: #07071a;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 210, 0, 0.12);
}

.back-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 210, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  color: rgba(255, 210, 0, 0.7);
  background: none;
  transition: opacity 0.2s;
}

/* Back button is locked while a ticket is in progress */
.back-btn.locked { opacity: 0.25; cursor: not-allowed; pointer-events: none; }

.h-title {
  font-size: 18px;
  font-weight: 500;
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
  letter-spacing: 1px;
}

/* Coin / Cash mode toggle pill */
.mode-toggle {
  display: flex;
  align-items: center;
  background: #0a0a1e;
  border: 1px solid rgba(255, 210, 0, 0.25);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.mode-btn {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  background: transparent;
  color: rgba(255, 210, 0, 0.28);
  opacity: 0.75;
}

.mode-btn.active-coin { background: #FFD700; color: #0a0500; opacity: 1; }
.mode-btn.active-cash { background: #1D9E75; color: #052d1f; opacity: 1; }
/* Locked state while a ticket is mid-play */
.mode-btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

.coin-count-badge {
  font-size: 12px;
  font-weight: 500;
  color: #FFD700;
  padding: 0 8px 0 4px;
  letter-spacing: 0.3px;
}

.cash-count-badge {
  font-size: 12px;
  font-weight: 500;
  color: #1D9E75;
  padding: 0 8px 0 4px;
  letter-spacing: 0.3px;
}

/* ── 14. Pack Banners & Themes ────────────────────── */
.pack-banner {
  margin: 14px 16px 0;
  background: #0f1f0a;
  border-radius: 14px;
  border: 1px solid rgba(80, 200, 80, 0.2);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pack-banner.gold-theme    { background: #1f1200; border-color: rgba(255, 165, 0, 0.25); }
.pack-banner.fruit-theme   { background: #0a1f08; border-color: rgba(80, 200, 80, 0.25); }
.pack-banner.italy-theme   { background: #0d0618; border-color: rgba(180, 100, 255, 0.25); }
.pack-banner.freedom-theme { background: #04061a; border-color: rgba(220, 20, 60, 0.30); }
.pack-banner.freedom-theme .t1 { color: #DC143C; }
.pack-banner.freedom-theme .t2 { color: rgba(220,100,120,0.55); }

/* Pack screen full-color backgrounds */
.fruit-screen-bg { background: #030d03; }
.gold-screen-bg  { background: #0d0800; }
.italy-screen-bg { background: #07030f; }

.pb-left .t1 { font-size: 15px; font-weight: 500; color: #7ecf5a; margin-bottom: 2px; }
.pb-left .t1.gold  { color: #FFB830; }
.pb-left .t2 { font-size: 11px; color: rgba(126, 207, 90, 0.5); }
.pb-left .t2.gold  { color: rgba(255, 184, 48, 0.5); }

.pb-mode {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
}

.pb-mode.coin {
  background: rgba(255, 210, 0, 0.12);
  color: #FFD700;
  border: 1px solid rgba(255, 210, 0, 0.25);
}

.pb-mode.cash {
  background: rgba(29, 158, 117, 0.15);
  color: #1D9E75;
  border: 1px solid rgba(29, 158, 117, 0.3);
}

/* ── 15. No Funds Notice ──────────────────────────── */
.no-funds {
  margin: 14px 16px 0;
  background: #1a0a0a;
  border-radius: 12px;
  border: 1px solid rgba(220, 50, 50, 0.3);
  padding: 13px 16px;
  text-align: center;
}

.no-funds p { font-size: 13px; color: rgba(220, 100, 100, 0.9); margin-bottom: 10px; }

.no-funds-btns { display: flex; gap: 8px; }

.no-funds-btn {
  flex: 1;
  padding: 9px;
  border-radius: 10px;
  font-size: 12px;
  cursor: pointer;
  border: none;
  font-weight: 500;
}

.nfb-ad    { background: rgba(255,210,0,0.12); border: 1px solid rgba(255,210,0,0.3); color: #FFD700; }
.nfb-store { background: rgba(29,158,117,0.12); border: 1px solid rgba(29,158,117,0.3); color: #1D9E75; }
.nfb-home  { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }

/* ── 16. Ticket / Pull-Tab Area ───────────────────── */
.ticket-wrap {
  margin: 14px 16px 0;
  border-radius: 20px 20px 6px 6px;
  border: 2px solid rgba(255,210,0,0.12) !important;
  border-bottom: none !important;
  overflow: visible;
  padding: 16px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
  position: relative;
}

/* Per-pack dark backgrounds */
.ticket-wrap.fruit-bg    { background: #061208 !important; border-color: rgba(80,200,80,0.18) !important; }
.ticket-wrap.gold-bg     { background: #0f0a00 !important; border-color: rgba(200,145,0,0.2) !important; }
.ticket-wrap.italy-bg    { background: #0d0618 !important; border-color: rgba(150,60,255,0.2) !important; }
.ticket-wrap.freedom-bg  { background: #030818 !important; border-color: rgba(220,20,60,0.20) !important; }

/* Per-pack themed header bands */
.ticket-header {
  background: rgba(0,0,0,0.07);
  margin: -16px -14px 2px;
  padding: 8px 14px;
  border-radius: 17px 17px 0 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-wrap.fruit-bg .ticket-header {
  background: linear-gradient(135deg, rgba(220,100,30,0.18) 0%, rgba(255,150,0,0.10) 100%);
  border-bottom-color: rgba(220,100,30,0.12);
}

.ticket-wrap.gold-bg .ticket-header {
  background: linear-gradient(135deg, rgba(200,145,0,0.18) 0%, rgba(255,215,0,0.10) 100%);
  border-bottom-color: rgba(200,145,0,0.12);
}

.ticket-wrap.italy-bg .ticket-header {
  background: linear-gradient(135deg, rgba(150,60,255,0.18) 0%, rgba(200,100,255,0.10) 100%);
  border-bottom-color: rgba(150,60,255,0.12);
}

/* Ticket header typography — light on dark */
.ticket-header-title {
  font-size: 10px !important;
  letter-spacing: 3px !important;
  color: rgba(255,210,0,0.45) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.ticket-header-hint {
  font-size: 10px !important;
  color: rgba(255,255,255,0.28) !important;
  font-style: italic !important;
}

/* Individual pull tab — tactile dark design */
.pull-tab {
  position: relative;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  background: linear-gradient(180deg, #2e2118 0%, #181008 100%);
  border: 1.5px solid rgba(255,210,0,0.22);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.6),
    0 1px 3px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -2px 4px rgba(0,0,0,0.45);
  transition: box-shadow 0.15s;
}

.tab-revealed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  border-radius: 9px;
  overflow: hidden;
  background: #1a0e00;
}

.pull-tab.winner .tab-revealed { background: #0d1f08; }
.pull-tab.loser  .tab-revealed { background: #180e08; }

.tab-prize-label {
  width: 72px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #120a00;
  border-right: 1.5px solid rgba(255,210,0,0.15);
  height: 100%;
  gap: 3px;
}

.tab-prize-label .pl-fruit { font-size: 18px; line-height: 1; }
.tab-prize-label .pl-val   { font-size: 9px; font-weight: 600; color: rgba(255,210,0,0.6); }

.tab-symbols { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; }

.tab-symbol {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  height: 100%;
  border-right: 1px solid rgba(255,210,0,0.1);
}

.tab-symbol:last-child { border-right: none; }

/* Image-based symbols (e.g. Tung Tung Tung Sahur) inside pull tabs */
.tab-sym-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: sepia(0.3) saturate(1.6) brightness(1.1) drop-shadow(0 0 4px rgba(255,200,0,0.4));
  display: block;
}

/* Smaller variant in the prize label sidebar */
.pl-sym-img {
  width: 28px;
  height: 28px;
}

/* Image in the win result icon area */
.result-icon-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: sepia(0.3) saturate(1.6) brightness(1.1) drop-shadow(0 0 8px rgba(255,200,0,0.55));
}

/* Draggable cover that slides away on rip */
.tab-cover {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: linear-gradient(160deg, #4a3200 0%, #2e1c00 45%, #1a0e00 100%);
  border: 1.5px solid rgba(255, 210, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  will-change: transform;
  cursor: grab;
  box-shadow:
    inset 0 1px 0 rgba(255,210,0,0.28),
    inset 0 2px 8px rgba(0,0,0,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.5);
  overflow: hidden;
}

/* Diagonal grain texture on the cover */
.tab-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    rgba(255,210,0,0.03) 3px,
    rgba(255,210,0,0.03) 4px
  );
  pointer-events: none;
  border-radius: 9px;
}

/* Tear notch — small gold triangle at top-right corner */
.tab-cover::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent rgba(255,210,0,0.3) transparent transparent;
  border-radius: 0 10px 0 0;
}

/* Cash mode uses a green cover */
.tab-cover.cash-cover {
  background: linear-gradient(160deg, #003320 0%, #001f12 45%, #000d08 100%);
  border-color: rgba(29, 200, 110, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(29,200,110,0.25),
    inset 0 2px 8px rgba(0,0,0,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.5);
}
.tab-cover.cash-cover::before {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    rgba(29,200,110,0.03) 3px,
    rgba(29,200,110,0.03) 4px
  );
}
.tab-cover.cash-cover::after {
  border-color: transparent rgba(29,200,110,0.35) transparent transparent;
}

/* Italy pack uses a purple cover */
.tab-cover.italy-cover {
  background: linear-gradient(160deg, #1e0a35 0%, #0d0618 60%, #060310 100%);
  border-color: rgba(180, 100, 255, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(180,100,255,0.2),
    inset 0 2px 8px rgba(0,0,0,0.4);
}

.tab-cover.italy-cover::after {
  border-color: transparent rgba(180,100,255,0.35) transparent transparent;
}

.cover-lines       { display: flex; flex-direction: column; gap: 5px; }
.cover-line        { width: 44px; height: 2.5px; background: rgba(255,210,0,0.22); border-radius: 2px; }
.cover-center      { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cover-title       { font-size: 11px; letter-spacing: 2px; color: rgba(255,210,0,0.5); font-weight: 700; }
.cover-hint        { font-size: 9px; color: rgba(255,210,0,0.32); letter-spacing: 0.5px; }
.cover-arrow       { font-size: 26px; color: rgba(255,210,0,0.45); animation: arrowPulse 1.4s ease-in-out infinite; }

@keyframes arrowPulse {
  0%, 100% { transform: translateX(0);   opacity: 0.45; }
  50%       { transform: translateX(5px); opacity: 0.85; }
}

/* Progress bar along the bottom of the tab while sliding */
.rip-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: rgba(255,210,0,0.85);
  box-shadow: 0 0 5px rgba(255,210,0,0.5);
  border-radius: 0;
  pointer-events: none;
}

/* State after a tab is fully ripped */
.pull-tab.ripped .tab-cover { display: none; }
.pull-tab.winner {
  border-color: rgba(255,215,0,0.8);
  box-shadow: 0 0 16px rgba(255,215,0,0.3), 0 3px 8px rgba(0,0,0,0.55);
}
.pull-tab.loser {
  border-color: rgba(255,210,0,0.1);
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* Win line shown across winning tabs */
.win-line {
  position: absolute;
  top: 50%;
  left: 72px;
  right: 0;
  height: 3px;
  background: rgba(255,215,0,0.85);
  transform: translateY(-50%);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255,215,0,0.6);
  pointer-events: none;
  display: none;
}

.pull-tab.winner .win-line { display: block; }

.board-hint { text-align: center; margin-top: 6px; font-size: 11px; color: rgba(255,210,0,0.3); }

/* ── 17. Result Display ───────────────────────────── */
.result-wrap {
  margin: 14px 16px 0;
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
  display: none;
}

.result-wrap.show-win {
  background: linear-gradient(160deg, #0d2a0d 0%, #081808 100%);
  border: 1px solid rgba(80, 200, 80, 0.55);
  display: block;
  animation: resultSlideIn 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), winShimmer 2.2s ease-out 0.45s;
  box-shadow: 0 0 0 rgba(29,200,120,0);
}

@keyframes winShimmer {
  0%   { box-shadow: 0 0 0px rgba(29,200,120,0); }
  25%  { box-shadow: 0 0 40px rgba(29,200,120,0.35), 0 0 80px rgba(29,200,120,0.15); }
  60%  { box-shadow: 0 0 25px rgba(29,200,120,0.2), 0 0 50px rgba(29,200,120,0.08); }
  100% { box-shadow: 0 0 0px rgba(29,200,120,0); }
}

/* Full-screen green flash on win */
@keyframes screenWinFlash {
  0%   { opacity: 0; }
  15%  { opacity: 0.18; }
  100% { opacity: 0; }
}

.result-wrap.show-lose {
  background: #0e0e20;
  border: 1px solid rgba(120, 120, 180, 0.2);
  display: block;
  animation: resultSlideIn 0.3s ease-out;
}

/* Pre-game "choose your mode" prompt — shown before first rip */
.result-wrap.show-start {
  background: #0a0a1e;
  border: 1px solid rgba(255, 210, 0, 0.15);
  display: block;
}
.result-wrap.show-start .result-title { color: rgba(255, 210, 0, 0.75); }

@keyframes resultSlideIn {
  0%   { opacity: 0; transform: translateY(18px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.result-icon { font-size: 38px; margin-bottom: 8px; }

.result-wrap.show-win .result-icon {
  animation: iconBounce 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.18s both;
}

@keyframes iconBounce {
  0%   { transform: scale(0) rotate(-15deg); }
  50%  { transform: scale(1.45) rotate(8deg); }
  70%  { transform: scale(0.9) rotate(-4deg); }
  85%  { transform: scale(1.12) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.result-title { font-size: 22px; font-weight: 500; margin-bottom: 4px; }
.result-wrap.show-win  .result-title { color: #7ecf5a; }
.result-wrap.show-lose .result-title { color: rgba(180, 180, 220, 0.75); }

.result-sub { font-size: 13px; color: rgba(255,255,255,0.4); margin-bottom: 14px; }

.result-prize {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-radius: 16px;
  padding: 14px 28px;
  margin-bottom: 16px;
}

.result-prize.coin { background: rgba(255,210,0,0.08); border: 1px solid rgba(255,210,0,0.25); }
.result-prize.cash { background: rgba(29,158,117,0.1); border: 1px solid rgba(29,158,117,0.3); }

.prize-icon { font-size: 26px; line-height: 1; }

.prize-big {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  letter-spacing: 2px;
  line-height: 1;
  display: block;
}

.result-prize.coin .prize-big { color: #FFD700; text-shadow: 0 0 20px rgba(255,215,0,0.45); }
.result-prize.cash .prize-big { color: #1D9E75; text-shadow: 0 0 20px rgba(29,158,117,0.45); }

.prize-unit {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 2px;
}

.result-wrap.show-win .result-prize {
  animation: prizePopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.32s both;
}

@keyframes prizePopIn {
  0%   { opacity: 0; transform: scale(0.3) translateY(10px); }
  55%  { opacity: 1; transform: scale(1.12) translateY(-4px); }
  75%  { transform: scale(0.96) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* "RIP IT AGAIN" button — sleek pill style per pack theme */
.rip-again-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 180px;
  max-width: 88%;
  margin: 0 auto;
  padding: 13px 32px;
  border-radius: 50px;
  border: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 3px;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  box-shadow:
    0 3px 0 rgba(0,0,0,0.22),
    0 6px 18px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.rip-again-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 5px 0 rgba(0,0,0,0.2),
    0 10px 24px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.rip-again-btn:active {
  transform: translateY(2px) scale(0.97);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.3),
    0 2px 8px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

.btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shine 2.5s infinite;
}

.no-coins-msg { font-size: 12px; color: rgba(220,100,100,0.8); margin-top: 10px; }

/* Win flash on winner tab */
.pull-tab.winner {
  animation: tabWinFlash 0.7s cubic-bezier(0.22,1,0.36,1);
}

@keyframes tabWinFlash {
  0%   { box-shadow: 0 0 0px rgba(255,215,0,0),   transform: scale(1); }
  20%  { box-shadow: 0 0 50px rgba(255,215,0,1),  0 0 100px rgba(255,215,0,0.6); transform: scale(1.04); }
  50%  { box-shadow: 0 0 30px rgba(255,215,0,0.7), 0 0 60px rgba(255,215,0,0.3); transform: scale(0.99); }
  100% { box-shadow: 0 0 18px rgba(255,215,0,0.35), 0 0 35px rgba(255,215,0,0.15); transform: scale(1); }
}

/* ── 18. Prize Table ──────────────────────────────── */
.prize-table {
  margin: 16px 16px 24px;
  background: #0a0a1e;
  border-radius: 14px;
  border: 1px solid rgba(255, 210, 0, 0.1);
  overflow: hidden;
}

.pt-head {
  padding: 10px 14px;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255, 210, 0, 0.35);
  border-bottom: 1px solid rgba(255, 210, 0, 0.08);
  display: flex;
  justify-content: space-between;
}

.pt-row {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.pt-row:last-child { border-bottom: none; }
.pt-emoji { font-size: 18px; width: 28px; flex-shrink: 0; }

.pt-emoji-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: sepia(0.3) saturate(1.6) brightness(1.1) drop-shadow(0 0 3px rgba(255,200,0,0.4));
}

/* Red-white-blue glow for all freedom pack symbol images everywhere */
img[src*="freedom-"]:not([src*="banner"]) {
  filter: drop-shadow(0 0 5px #DC143C)
          drop-shadow(0 0 10px rgba(255,255,255,0.8))
          drop-shadow(0 0 20px #002868) !important;
}
.pt-name  { font-size: 13px; color: rgba(255,255,255,0.5); flex: 1; }
.pt-right { text-align: right; }
.pt-prize-coin { font-size: 13px; font-weight: 500; color: #FFD700; }
.pt-prize-cash { font-size: 13px; font-weight: 500; color: #1D9E75; }
.pt-odds  { font-size: 11px; color: rgba(255,255,255,0.25); margin-top: 1px; }

/* ── 19. Toast Notification ───────────────────────── */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #FFD700;
  color: #0a0500;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  z-index: 999;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 20. Jackpot Overlay ──────────────────────────── */
.jackpot-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.82);
  animation: jackpotFadeIn 0.3s ease-out;
}

@keyframes jackpotFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.jackpot-text {
  font-size: 52px;
  font-weight: 500;
  letter-spacing: 4px;
  color: #FFD700;
  text-shadow: 0 0 30px #FFD700, 0 0 60px rgba(255,215,0,0.5);
  animation: jackpotPulse 0.8s ease-in-out infinite alternate;
}

@keyframes jackpotPulse {
  0%   { transform: scale(0.95); }
  100% { transform: scale(1.05); }
}

.jackpot-sub {
  font-size: 18px;
  color: rgba(255,215,0,0.7);
  margin-top: 12px;
  letter-spacing: 2px;
}

.jackpot-dismiss {
  margin-top: 32px;
  padding: 14px 32px;
  border-radius: 14px;
  border: none;
  background: #FFD700;
  color: #0a0500;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

/* ── 21. Store Screen ─────────────────────────────── */
.store-balance {
  margin: 14px 16px 0;
  background: #0a0a1e;
  border-radius: 14px;
  border: 1px solid rgba(255, 210, 0, 0.25);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.store-bal-icon  { font-size: 28px; }
.store-bal-val   { font-size: 26px; font-weight: 500; color: #FFD700; text-shadow: 0 0 10px rgba(255,215,0,0.5); }
.store-bal-label { font-size: 10px; color: rgba(255,210,0,0.4); margin-top: 2px; letter-spacing: 0.5px; text-transform: uppercase; }

/* Two-column balance row (coins left, cash right) */
.store-bal-half {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.store-bal-sep {
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  margin: 0 4px;
}

/* Cash-tab value shown in green */
.store-bal-cash-val { color: #1D9E75 !important; text-shadow: 0 0 10px rgba(29,158,117,0.4) !important; }

.store-sub {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  margin: 10px 16px 0;
  line-height: 1.5;
}

.store-cards {
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.store-card {
  background: #0a0a1e;
  border-radius: 14px;
  border: 1px solid rgba(255, 210, 0, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: border-color 0.15s;
  padding: 0;
}

.store-card:hover { border-color: rgba(255, 210, 0, 0.3); }

/* Gradient header panel inside each store card */
.store-card-header {
  background: linear-gradient(135deg, #0e0e2a 0%, #09091a 100%);
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,210,0,0.08);
}

.store-header-emoji { font-size: 32px; flex-shrink: 0; }
.store-header-info  { flex: 1; }

.store-card-body {
  padding: 10px 16px 12px;
}

/* Full-width buy CTA */
.store-buy-btn-full {
  display: block;
  width: 100%;
  padding: 13px;
  background: #FFD700;
  color: #0a0500;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.15s;
}

.store-buy-btn-full:hover  { background: #FFE44D; }
.store-buy-btn-full:active { background: #E6BE00; transform: scale(0.98); }

/* Featured cards (POPULAR / BEST VALUE) get a stronger gold border + subtle glow */
.store-card-featured {
  border-color: rgba(255, 210, 0, 0.42);
  background: #0d0d26;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.05);
}

.store-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.store-emoji { font-size: 30px; width: 38px; text-align: center; flex-shrink: 0; }

.store-coins { font-size: 12px; color: rgba(255, 210, 0, 0.6); }

/* Reward row showing coins + cash tabs side by side */
.store-rewards {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  margin-top: 2px;
}

.store-reward-coins { color: rgba(255, 210, 0, 0.75); font-weight: 500; }
.store-reward-sep   { color: rgba(255, 255, 255, 0.25); }
.store-reward-cash  { color: #1D9E75; font-weight: 500; }

/* The price / Buy button */
.store-buy-btn {
  background: rgba(255, 210, 0, 0.09);
  border: 1.5px solid rgba(255, 210, 0, 0.38);
  border-radius: 10px;
  padding: 9px 15px;
  color: #FFD700;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 74px;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.store-buy-btn:hover   { background: rgba(255, 210, 0, 0.18); transform: scale(1.04); }
.store-buy-btn:active  { transform: scale(0.97); }
.store-buy-btn:disabled { cursor: default; transform: none; }

/* Store card — name and price in header */
.store-name {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 2px;
}

.store-price-large {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: #FFD700;
  letter-spacing: 1px;
  line-height: 1.1;
}

/* Badge shown inline inside header (no absolute positioning) */
.store-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: #FFD700;
  color: #0a0500;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.store-disclaimer {
  margin: 12px 16px 24px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.28);
  text-align: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  line-height: 1.5;
}

/* ── Store tab switcher ────────────────────────────── */
.store-tab-bar {
  display: flex;
  gap: 0;
  margin: 12px 16px 0;
  background: #0a0a1e;
  border-radius: 12px;
  border: 1px solid rgba(255, 210, 0, 0.14);
  padding: 4px;
}

.store-tab {
  flex: 1;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: none;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.store-tab.active {
  background: rgba(255, 210, 0, 0.12);
  color: #FFD700;
}

/* ── Store coming-soon banner ──────────────────────── */
.store-coming-soon-banner {
  margin: 12px 16px 0;
  background: rgba(255, 210, 0, 0.05);
  border: 1px solid rgba(255, 210, 0, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Live payments banner ──────────────────────────── */
.store-live-banner {
  margin: 12px 16px 0;
  background: rgba(29, 158, 117, 0.07);
  border: 1px solid rgba(29, 158, 117, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.store-live-banner .scb-title { color: #1D9E75; }

.scb-icon { font-size: 24px; flex-shrink: 0; }
.scb-title { font-size: 13px; font-weight: 600; color: #FFD700; margin-bottom: 2px; }
.scb-sub   { font-size: 11px; color: rgba(255,255,255,0.35); line-height: 1.4; }

/* ── Coming-soon buy button ────────────────────────── */
.store-buy-cs {
  background: rgba(255, 210, 0, 0.06) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-top: 1px solid rgba(255, 210, 0, 0.12) !important;
}

.store-buy-cs:hover { background: rgba(255, 210, 0, 0.1) !important; }

/* ── Live buy button ───────────────────────────────── */
.store-buy-live {
  background: linear-gradient(135deg, rgba(29,158,117,0.18), rgba(29,158,117,0.08)) !important;
  color: #1D9E75 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-top: 1px solid rgba(29,158,117,0.2) !important;
  transition: background 0.15s, transform 0.1s;
}

.store-buy-live:hover  { background: rgba(29,158,117,0.25) !important; }
.store-buy-live:active { transform: scale(0.98); }
.store-buy-live:disabled { opacity: 0.6; cursor: default; transform: none; }

.store-buy-live .sbc-label {
  color: #1D9E75;
}
.store-buy-live .sbc-price {
  color: #1D9E75;
}

.sbc-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.3px;
}

.sbc-price {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 210, 0, 0.6);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.8px;
}

/* ── Progression panel ─────────────────────────────── */
.prog-level-card {
  margin: 12px 16px 0;
  background: linear-gradient(135deg, #0e0e2a 0%, #0a0a1e 100%);
  border-radius: 14px;
  border: 1px solid rgba(255, 210, 0, 0.25);
  padding: 16px;
}

.plc-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.plc-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #0a0500;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(255,215,0,0.35);
}

.plc-title { font-size: 16px; font-weight: 600; color: #FFD700; }
.plc-sub   { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }

.plc-track {
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.plc-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD700, #FFB830);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.plc-tip {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  text-align: center;
}

.prog-section-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 210, 0, 0.35);
  margin: 16px 16px 8px;
}

.prog-reward-list {
  margin: 0 16px;
  background: #0a0a1e;
  border-radius: 14px;
  border: 1px solid rgba(255, 210, 0, 0.1);
  overflow: hidden;
}

.prw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  gap: 10px;
  transition: background 0.1s;
}

.prw-row:last-of-type { border-bottom: none; }

.prw-row.prw-past { opacity: 0.45; }

.prw-row.prw-current {
  background: rgba(255, 210, 0, 0.06);
  border-left: 3px solid #FFD700;
}

.prw-row.prw-milestone {
  background: rgba(255, 210, 0, 0.04);
}

.prw-row.prw-milestone.prw-current {
  background: rgba(255, 210, 0, 0.1);
}

.prw-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.prw-status {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.prw-level-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

.prw-row.prw-milestone .prw-level-label {
  color: #FFD700;
  font-weight: 600;
}

.prw-rewards {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.prw-coin { font-size: 12px; color: rgba(255,210,0,0.7); }
.prw-sep  { font-size: 11px; color: rgba(255,255,255,0.25); }
.prw-cash { font-size: 12px; color: #1D9E75; font-weight: 600; }

.prw-beyond {
  font-size: 11px;
  color: rgba(255,255,255,0.2);
  text-align: center;
  padding: 10px 14px;
  font-style: italic;
}

.prog-footer-note {
  margin: 12px 16px 24px;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  text-align: center;
  line-height: 1.6;
}

/* ── 22. XP / Level Bar ───────────────────────────── */
.xp-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 4px;
  padding: 6px 12px;
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.12);
  border-radius: 999px;
}

.xp-level-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.xp-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.xp-label {
  font-size: 10px;
  color: rgba(255, 215, 0, 0.45);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 23. Daily Login Modal ─────────────────────────── */
.dl-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;
  backdrop-filter: blur(4px);
  padding: 20px;
}

.dl-box {
  background: linear-gradient(160deg, #0f0a20 0%, #07040f 100%);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 20px;
  padding: 24px 20px 20px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 0 60px rgba(255, 215, 0, 0.08);
}

.dl-modal-jackpot .dl-box {
  border-color: rgba(29, 158, 117, 0.4);
  box-shadow: 0 0 80px rgba(29, 158, 117, 0.12);
  background: linear-gradient(160deg, #071a14 0%, #040d0a 100%);
}

.dl-header {
  margin-bottom: 18px;
}

.dl-fire {
  font-size: 36px;
  margin-bottom: 4px;
}

.dl-title {
  font-size: 22px;
  font-weight: 700;
  color: #FFD700;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.dl-streak-label {
  font-size: 13px;
  color: rgba(255, 215, 0, 0.55);
}

/* 7 day bubble track */
.dl-days {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 18px;
  flex-wrap: nowrap;
}

.dl-day {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 2px;
  text-align: center;
  transition: all 0.2s;
}

.dl-day-num {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.dl-day-icon {
  font-size: 14px;
  line-height: 1;
}

.dl-day-val {
  font-size: 7px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 3px;
}

.dl-day-past {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.2);
  opacity: 0.55;
}

.dl-day-active {
  background: rgba(255, 215, 0, 0.15);
  border-color: #FFD700;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
}

.dl-day-active .dl-day-num,
.dl-day-active .dl-day-val { color: rgba(255, 215, 0, 0.7); }

.dl-day-special.dl-day-active {
  background: rgba(29, 158, 117, 0.2);
  border-color: #1D9E75;
  box-shadow: 0 0 14px rgba(29, 158, 117, 0.3);
}

.dl-reward {
  font-size: 15px;
  font-weight: 600;
  color: #FFD700;
  margin-bottom: 14px;
  padding: 10px 16px;
  background: rgba(255, 215, 0, 0.07);
  border-radius: 10px;
  border: 1px solid rgba(255, 215, 0, 0.15);
}

.dl-reward-special {
  color: #1D9E75;
  background: rgba(29, 158, 117, 0.1);
  border-color: rgba(29, 158, 117, 0.25);
  font-size: 16px;
}

.dl-claim-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #0a0500;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
  transition: transform 0.1s, box-shadow 0.1s;
}

.dl-claim-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);
}

.dl-modal-jackpot .dl-claim-btn {
  background: linear-gradient(135deg, #1D9E75 0%, #15735a 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(29, 158, 117, 0.35);
}

/* ── 26. Win Screen Flash ─────────────────────── */
.win-flash-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  background: radial-gradient(ellipse at center, rgba(100,255,150,0.22) 0%, rgba(50,200,100,0.08) 60%, transparent 100%);
  animation: winFlashFade 0.7s ease-out forwards;
}

@keyframes winFlashFade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── 23. Win Particle Animation ───────────────── */
.coin-particle {
  position: fixed;
  pointer-events: none;
  font-size: 22px;
  z-index: 9999;
  animation: coinFly var(--dur) cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes coinFly {
  0%   { opacity: 1;   transform: translateY(0)                translateX(0)          scale(1.2) rotate(0deg); }
  15%  { opacity: 1;   transform: translateY(calc(var(--dy)*0.1)) translateX(calc(var(--dx)*0.15)) scale(1.4) rotate(calc(var(--rot)*0.1)); }
  60%  { opacity: 0.9; transform: translateY(calc(var(--dy)*0.7)) translateX(calc(var(--dx)*0.7))  scale(0.8) rotate(calc(var(--rot)*0.7)); }
  100% { opacity: 0;   transform: translateY(var(--dy))          translateX(var(--dx))          scale(0.3) rotate(var(--rot)); }
}

.italy-char-particle {
  position: fixed;
  pointer-events: none;
  height: auto;
  z-index: 10000;
  animation: italyCharFly var(--dur) ease-out forwards;
}

@keyframes italyCharFly {
  0%   { opacity: 0;   transform: translate(0, 0)                                                                  scale(0.2)  rotate(0deg); }
  8%   { opacity: 1;   transform: translate(calc(var(--dx)*0.06), calc(var(--dy)*0.06))                            scale(1.6)  rotate(calc(var(--rot)*0.06)); }
  25%  {               transform: translate(calc(var(--dx)*0.28), calc(var(--dy)*0.28))                            scale(0.7)  rotate(calc(var(--rot)*0.28)); }
  45%  {               transform: translate(calc(var(--dx)*0.48), calc(var(--dy)*0.48))                            scale(1.35) rotate(calc(var(--rot)*0.48)); }
  65%  {               transform: translate(calc(var(--dx)*0.68), calc(var(--dy)*0.68))                            scale(0.6)  rotate(calc(var(--rot)*0.68)); }
  82%  { opacity: 0.8; transform: translate(calc(var(--dx)*0.84), calc(var(--dy)*0.84))                            scale(1.1)  rotate(calc(var(--rot)*0.84)); }
  100% { opacity: 0;   transform: translate(var(--dx), var(--dy))                                                  scale(0.2)  rotate(var(--rot)); }
}

/* ── 22. Profile Screen ───────────────────────────── */
.prof-section {
  margin: 14px 16px 0;
}

.prof-section-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 210, 0, 0.35);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.prof-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 210, 0, 0.1);
}

.prof-card {
  background: #0a0a1e;
  border-radius: 14px;
  border: 1px solid rgba(255, 210, 0, 0.15);
  padding: 14px 16px;
}

/* ── Streak card ───────────────────────────────── */
.prof-streak-card {
  border-color: rgba(255, 120, 0, 0.3);
}

.prof-streak-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.prof-streak-fire {
  font-size: 32px;
  line-height: 1;
}

.prof-streak-big {
  font-size: 18px;
  font-weight: 600;
  color: #FFD700;
}

.prof-streak-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
}

/* ── Day dots ──────────────────────────────────── */
.prof-dots {
  display: flex;
  gap: 6px;
  justify-content: space-between;
}

.prof-dot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px 2px;
}

.prof-dot-done {
  background: rgba(255, 210, 0, 0.12);
  border-color: rgba(255, 210, 0, 0.3);
}

.prof-dot-current {
  background: rgba(255, 210, 0, 0.22);
  border-color: #FFD700;
  box-shadow: 0 0 8px rgba(255, 210, 0, 0.35);
}

.prof-dot-special {
  border-color: rgba(29, 158, 117, 0.5);
}

.prof-dot-special.prof-dot-done,
.prof-dot-special.prof-dot-current {
  background: rgba(29, 158, 117, 0.18);
  border-color: #1D9E75;
  box-shadow: 0 0 8px rgba(29, 158, 117, 0.3);
}

.prof-dot-icon {
  font-size: 14px;
  line-height: 1;
}

.prof-dot-num {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.5px;
}

.prof-dot-current .prof-dot-num {
  color: #FFD700;
}

.prof-dot-special.prof-dot-current .prof-dot-num {
  color: #1D9E75;
}

/* ── Level / XP ────────────────────────────────── */
.prof-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.prof-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.prof-row-icon {
  font-size: 26px;
}

.prof-row-title {
  font-size: 16px;
  font-weight: 600;
  color: #FFD700;
}

.prof-row-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
}

.prof-xp-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.prof-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD700, #ffaa00);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* ── Stat rows ─────────────────────────────────── */
.prof-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.prof-stat-row + .prof-stat-row {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.prof-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.prof-stat-val {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.prof-val-gold {
  color: #FFD700;
}

.prof-val-green {
  color: #1D9E75;
}

.prof-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

/* ── 23. Symbol Win Tracker ───────────────────────── */
.win-tracker-wrap {
  margin: 14px 16px 20px;
}

.wt-header {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 210, 0, 0.4);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

.wt-header::before,
.wt-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 210, 0, 0.1);
}

.win-tracker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.wt-cell {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 12px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: border-color 0.2s, background 0.2s;
}

.wt-cell.wt-earned {
  background: rgba(255, 215, 0, 0.06);
  border-color: rgba(255, 215, 0, 0.22);
}

.wt-cell.wt-locked {
  filter: grayscale(1);
  opacity: 0.32;
}

/* Flash animation on first-ever win */
.wt-cell.wt-new {
  animation: wt-new-flash 1.3s ease-out forwards;
}

@keyframes wt-new-flash {
  0%   { background: rgba(255, 215, 0, 0.38); border-color: rgba(255, 215, 0, 0.85); transform: scale(1.1); }
  40%  { background: rgba(255, 215, 0, 0.18); border-color: rgba(255, 215, 0, 0.5);  transform: scale(1.05); }
  100% { background: rgba(255, 215, 0, 0.06); border-color: rgba(255, 215, 0, 0.22); transform: scale(1); }
}

/* Symbol icon area */
.wt-sym {
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
}

/* Images for non-emoji symbols (gold bar, brainrot characters, etc.) */
.wt-sym-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Prize name label */
.wt-name {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.38);
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Win count (×4) or lock emoji */
.wt-count {
  font-size: 11px;
  font-weight: 600;
  color: #FFD700;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

.wt-cell.wt-locked .wt-count {
  color: rgba(255, 255, 255, 0.2);
  text-shadow: none;
}

/* NEW! badge shown on first-ever win */
.wt-new-badge {
  position: absolute;
  top: -7px;
  right: -4px;
  background: #FFD700;
  color: #0a0500;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 5px;
  border-radius: 6px;
  animation: wt-badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

@keyframes wt-badge-pop {
  0%   { transform: scale(0) rotate(-10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── 24. Tappable XP Bar & Profile Card ─────────────── */
.xp-bar-tappable {
  cursor: pointer;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.xp-bar-tappable:hover {
  opacity: 0.85;
  filter: brightness(1.08);
}

.xp-bar-tappable:active {
  opacity: 0.72;
  filter: brightness(0.92);
}

/* ── 25. Pre-game Inline Mode Toggle ─────────────────── */
/* Container sits between result-sub and the RIP IT button */
.rip-pregame-toggle {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 6px 0 4px;
  width: 100%;
}

.rpm-btn {
  flex: 1;
  max-width: 140px;
  padding: 10px 0;
  border-radius: 50px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.rpm-btn:active {
  transform: scale(0.96);
}

.rpm-btn.rpm-coin.rpm-active {
  background: rgba(255, 215, 0, 0.15);
  border-color: #FFD700;
  color: #FFD700;
}

.rpm-btn.rpm-cash.rpm-active {
  background: rgba(29, 158, 117, 0.18);
  border-color: #1D9E75;
  color: #1D9E75;
}

/* Cost label on the RIP IT button */
.rip-cost {
  font-size: 0.78em;
  opacity: 0.75;
  font-weight: 500;
  letter-spacing: 0;
}

/* ── Milestone Level-Up Modal ───────────────────────── */
.ms-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 21000;
  backdrop-filter: blur(6px);
  padding: 20px;
}

.ms-box {
  background: linear-gradient(160deg, #12082a 0%, #080416 100%);
  border: 1px solid rgba(255, 215, 0, 0.45);
  border-radius: 24px;
  padding: 32px 24px 28px;
  width: 100%;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 0 80px rgba(255, 215, 0, 0.18), 0 0 160px rgba(255, 215, 0, 0.06);
  position: relative;
  overflow: hidden;
}

.ms-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.07) 0%, transparent 65%);
  pointer-events: none;
}

.ms-trophy {
  font-size: 56px;
  margin-bottom: 10px;
  display: block;
  animation: ms-bounce 0.6s ease-out;
}

@keyframes ms-bounce {
  0%   { transform: scale(0.4) translateY(-20px); opacity: 0; }
  60%  { transform: scale(1.18) translateY(4px);  opacity: 1; }
  80%  { transform: scale(0.96) translateY(-2px); }
  100% { transform: scale(1)    translateY(0);    }
}

.ms-badge-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255, 215, 0, 0.6);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.ms-level {
  font-size: 32px;
  font-weight: 800;
  color: #FFD700;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  text-shadow: 0 0 24px rgba(255, 215, 0, 0.5);
}

.ms-rewards {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
  line-height: 1.5;
}

.ms-claim-btn {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #0a0500;
  border: none;
  border-radius: 14px;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 4px 24px rgba(255, 215, 0, 0.35);
  transition: transform 0.1s, box-shadow 0.1s;
}

.ms-claim-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.2);
}

/* Milestone reached: de-fade past milestone rows */
.prw-row.prw-ms-reached {
  opacity: 1 !important;
}

/* Milestone history chips inside the level card */
.plc-milestones {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 215, 0, 0.1);
}

.plc-ms-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 210, 0, 0.45);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.plc-ms-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.plc-ms-chip {
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  color: #FFD700;
  font-weight: 600;
}

/* ══ How-to-Play Info Modal ══════════════════════════ */
.info-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;
  backdrop-filter: blur(4px);
  padding: 20px;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.info-modal.visible { opacity: 1; }

.info-box {
  background: linear-gradient(160deg, #0f0a20 0%, #07040f 100%);
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 20px;
  padding: 22px 20px 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 0 60px rgba(255, 215, 0, 0.07);
}

.info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.info-title {
  font-size: 17px;
  font-weight: 700;
  color: #FFD700;
}
.info-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 4px;
}

.info-steps { display: flex; flex-direction: column; gap: 12px; }

.info-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.info-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #FFD700;
}
.info-step-text {
  font-size: 13px;
  color: rgba(255,255,255,0.80);
  line-height: 1.5;
  padding-top: 4px;
}
.info-step-text strong { color: #fff; }

/* ══ Settings Bottom Sheet ═══════════════════════════ */
.settings-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 20000;
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.settings-modal.visible { opacity: 1; }

.settings-box {
  background: linear-gradient(180deg, #13102a 0%, #09060f 100%);
  border: 1px solid rgba(255, 215, 0, 0.18);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 32px;
  width: 100%;
  max-width: 480px;
  transform: translateY(30px);
  transition: transform 0.28s ease;
}
.settings-modal.visible .settings-box { transform: translateY(0); }

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.settings-title {
  font-size: 17px;
  font-weight: 700;
  color: #FFD700;
}
.settings-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 4px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.settings-row-label {
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-row-icon { font-size: 22px; }
.settings-row-name { font-size: 15px; font-weight: 600; color: #fff; }
.settings-row-sub  { font-size: 12px; color: rgba(255,255,255,0.40); margin-top: 1px; }

/* Toggle pill */
.settings-toggle {
  width: 50px;
  height: 28px;
  background: #1D9E75;
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  transition: background 0.25s;
  flex-shrink: 0;
}
.settings-toggle.off { background: rgba(255,255,255,0.18); }
.settings-toggle-knob {
  position: absolute;
  top: 3px;
  left: 24px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.25s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.settings-toggle.off .settings-toggle-knob { left: 3px; }

.settings-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 16px 0 12px;
}

.settings-reset-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: rgba(220, 60, 60, 0.10);
  border: 1px solid rgba(220, 60, 60, 0.30);
  border-radius: 12px;
  color: #ff7070;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.settings-reset-btn:active { background: rgba(220, 60, 60, 0.20); }

.settings-reset-hint {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.30);
  text-align: center;
  line-height: 1.4;
}

/* ── Test-mode store banner (reuses .store-live-banner shape, yellow accent) ── */
.store-test-banner {
  margin: 12px 16px 0;
  background: rgba(255, 215, 0, 0.06);
  border: 1px dashed rgba(255, 215, 0, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Limited Time Challenges home widget ──────────── */
.home-fd-wrap {
  margin: 8px 16px 0;
  background: rgba(220, 20, 60, 0.07);
  border: 1px solid rgba(220, 20, 60, 0.22);
  border-radius: 16px;
  padding: 13px 15px 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.home-fd-wrap:active { background: rgba(220, 20, 60, 0.14); }

.home-fd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.home-fd-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2px;
}

.home-fd-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-fd-link {
  font-size: 12px;
  color: rgba(220, 20, 60, 0.8);
  font-weight: 600;
}

.home-fd-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-fd-count {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  flex-shrink: 0;
}

.home-fd-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}

.home-fd-fill {
  height: 100%;
  background: linear-gradient(90deg, #B22234, #DC143C);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* ── Freedom Event Challenges Section (pack screen, now unused but kept) ── */
.fd-event-section {
  margin: 8px 0 4px;
}

/* Card list container mirrors .ch-cards layout */
#fdChCards {
  padding: 0 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fd-event-header {
  padding: 14px 16px 10px;
}

.fd-event-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fd-event-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
}

.fd-event-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
}

/* "Claim Ready!" badge in the section header */
.fd-claim-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #DC143C, #8B0000);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.4px;
  animation: fd-badge-pulse 1.6s ease-in-out infinite;
}

/* "Claim!" badge on the home screen freedom teaser */
.fd-home-claim-badge {
  align-items: center;
  gap: 4px;
  background: #DC143C;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  animation: fd-badge-pulse 1.6s ease-in-out infinite;
}

@keyframes fd-badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.75; transform: scale(1.04); }
}

/* Freedom challenge card — extends base .ch-card */
.fd-ch-card {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 76px;
  border-left: 3px solid rgba(220, 20, 60, 0.35);
}

/* Card is completed & ready to claim — glowing highlight */
.fd-ch-card.fd-claimable {
  border-left-color: #DC143C;
  background: rgba(220, 20, 60, 0.10);
  box-shadow: 0 0 0 1px rgba(220, 20, 60, 0.30) inset;
}

/* Card fully claimed */
.fd-ch-card.fd-done {
  opacity: 0.55;
  border-left-color: rgba(29, 158, 117, 0.5);
}

/* Freedom fill bar — patriotic red */
.fd-fill {
  background: linear-gradient(90deg, #B22234, #DC143C);
}

/* Reward label below the description */
.fd-reward-lbl {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  margin: 2px 0 4px;
  letter-spacing: 0.2px;
}

/* Right column for the claim button / claimed badge */
.fd-claim-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 0 10px 0 6px;
  flex-shrink: 0;
}

/* Per-challenge "Claim!" button */
.fd-claim-btn {
  background: linear-gradient(135deg, #DC143C 0%, #8B0000 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(220, 20, 60, 0.45);
  transition: transform 0.12s, box-shadow 0.12s;
  animation: fd-badge-pulse 1.6s ease-in-out infinite;
}
.fd-claim-btn:active {
  transform: scale(0.94);
  box-shadow: 0 1px 4px rgba(220,20,60,0.25);
}

/* Small ✅ when a challenge is already claimed */
.fd-claimed-badge {
  font-size: 20px;
  line-height: 1;
}

/* ══════════════════════════════════════════════════
   AUTH MODAL
══════════════════════════════════════════════════ */
.auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.80);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25000;
  backdrop-filter: blur(5px);
  padding: 20px;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.auth-modal.visible { opacity: 1; }

.auth-box {
  background: linear-gradient(160deg, #0f0a24 0%, #07040f 100%);
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 20px;
  padding: 28px 22px 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 0 60px rgba(255, 215, 0, 0.07);
  position: relative;
  text-align: center;
}

.auth-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.auth-close:hover { color: rgba(255,255,255,0.75); }

.auth-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 3px;
  color: #FFD700;
  margin-bottom: 4px;
}
.auth-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.auth-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.40);
  margin-bottom: 20px;
}

/* Official Google sign-in button — shared between auth modal and interstitial */
.google-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 12px;
  color: #3c4043;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
  transition: background 0.18s, box-shadow 0.18s;
  margin-bottom: 14px;
}
.google-signin-btn:hover  { background: #f8f9fa; box-shadow: 0 2px 6px rgba(0,0,0,0.16); }
.google-signin-btn:active { background: #f0f0f0; }
.google-logo { width: 20px; height: 20px; flex-shrink: 0; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.12);
}
.auth-divider span {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
}

.auth-input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 10px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.18s;
}
.auth-input:focus { border-color: rgba(255,215,0,0.45); }
.auth-input::placeholder { color: rgba(255,255,255,0.28); }

.auth-error {
  font-size: 12px;
  color: #ff7070;
  min-height: 16px;
  margin-bottom: 8px;
  text-align: left;
}

.auth-btn {
  display: block;
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s;
  margin-bottom: 10px;
}
.auth-btn:active { opacity: 0.82; }
.auth-signin-btn {
  background: #FFD700;
  color: #0a0500;
}
.auth-create-btn {
  background: rgba(255,215,0,0.10);
  border: 1px solid rgba(255,215,0,0.28);
  color: #FFD700;
}

/* ══════════════════════════════════════════════════
   PROFILE — ACCOUNT SECTION
══════════════════════════════════════════════════ */
.prof-account-card {
  border-color: rgba(255, 215, 0, 0.25);
}
.prof-account-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.prof-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #FF8C00);
  color: #0a0500;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.prof-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.prof-account-info { flex: 1; min-width: 0; }
.prof-account-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-account-email {
  font-size: 12px;
  color: rgba(255,255,255,0.40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-account-status {
  font-size: 11px;
  color: rgba(29, 200, 120, 0.75);
  margin-bottom: 12px;
}
.prof-signout-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: rgba(220,60,60,0.10);
  border: 1px solid rgba(220,60,60,0.28);
  border-radius: 10px;
  color: #ff7070;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s;
}
.prof-signout-btn:active { background: rgba(220,60,60,0.20); }

.prof-signin-card {
  text-align: center;
  padding: 20px 16px;
}
.prof-signin-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.prof-signin-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.prof-signin-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  margin-bottom: 16px;
}
.prof-signin-btn {
  display: block;
  width: 100%;
  padding: 13px;
  background: #FFD700;
  border: none;
  border-radius: 12px;
  color: #0a0500;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s;
}
.prof-signin-btn:active { opacity: 0.82; }

/* ── 26. Redeem Locked State ──────────────────────── */
.redeem-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 20px 16px;
  padding: 32px 20px;
  background: #0a0a1e;
  border-radius: 18px;
  border: 1px solid rgba(255,210,0,0.12);
  gap: 10px;
}
.redeem-locked-icon {
  font-size: 40px;
  margin-bottom: 4px;
  opacity: 0.7;
}
.redeem-locked-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.redeem-locked-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.38);
  line-height: 1.5;
}
.redeem-locked-btn {
  margin-top: 8px;
  padding: 13px 24px;
  background: #FFD700;
  border: none;
  border-radius: 12px;
  color: #0a0500;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s;
}
.redeem-locked-btn:active { opacity: 0.82; }

/* ── 27. Sign-in Banner ───────────────────────────── */
.signin-banner {
  position: fixed;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 398px;
  background: #1a1a2e;
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 500;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
  transition: bottom 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.signin-banner.visible {
  bottom: 80px;
}
.signin-banner-body {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.signin-banner-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.signin-banner-text {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}
.signin-banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.signin-banner-btn {
  padding: 7px 14px;
  background: #FFD700;
  border: none;
  border-radius: 10px;
  color: #0a0500;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s;
  white-space: nowrap;
}
.signin-banner-btn:active { opacity: 0.82; }
.signin-banner-dismiss {
  padding: 6px 8px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}


/* ═══════════════════════════════════════════════════
   22. TERMS & CONDITIONS SCREEN
═══════════════════════════════════════════════════ */
.prof-legal-card {
  cursor: pointer;
  transition: background 0.15s;
}
.prof-legal-card:active { background: rgba(255,255,255,0.06); }

.terms-body {
  padding: 16px 16px 100px;
  overflow-y: auto;
}

.terms-updated {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}

.terms-section {
  margin-bottom: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 14px 16px;
}

.terms-heading {
  font-size: 13px;
  font-weight: 700;
  color: #FFD700;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.terms-text {
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
}

.terms-list {
  margin: 8px 0 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
}

.terms-list li {
  margin-bottom: 2px;
}

.terms-contact {
  margin-top: 10px;
  font-size: 13px;
  color: #FFD700;
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* ═══════════════════════════════════════════════════
   23. TERMS & CONDITIONS GATE OVERLAY
═══════════════════════════════════════════════════ */
.tc-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-family: inherit;
}

.tc-gate-inner {
  width: 100%;
  max-width: 480px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tc-gate-header {
  flex-shrink: 0;
  padding: 28px 20px 16px;
  text-align: center;
  background: linear-gradient(180deg, #0a0a12 80%, transparent 100%);
}

.tc-gate-logo {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #FFD700;
  text-shadow: 0 0 24px rgba(255,215,0,0.45);
  margin-bottom: 6px;
}

.tc-gate-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}

.tc-gate-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px 12px;
  -webkit-overflow-scrolling: touch;
}

.tc-gate-updated {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  text-align: center;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}

.tc-gate-section {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.tc-gate-heading {
  font-size: 12px;
  font-weight: 700;
  color: #FFD700;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}

.tc-gate-text {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
}

.tc-gate-list {
  margin: 6px 0 0 0;
  padding-left: 16px;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
}

.tc-gate-list li { margin-bottom: 2px; }

.tc-gate-contact {
  margin-top: 8px;
  font-size: 12px;
  color: #FFD700;
  font-weight: 600;
}

/* Sticky footer with checkbox + button */
.tc-gate-footer {
  flex-shrink: 0;
  padding: 14px 16px 28px;
  background: linear-gradient(0deg, #0a0a12 85%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tc-gate-check-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
}

.tc-gate-check-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: #FFD700;
  cursor: pointer;
  border-radius: 4px;
}

.tc-gate-btn {
  width: 100%;
  padding: 16px;
  background: #FFD700;
  color: #0a0500;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.1s;
}

.tc-gate-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.tc-gate-btn:not(:disabled):active {
  transform: scale(0.97);
  opacity: 0.88;
}


/* Settings modal — legal links row */
.settings-legal-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 0 4px;
}
.settings-legal-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.settings-legal-btn:hover { color: rgba(255,255,255,0.7); }
.settings-legal-sep {
  color: rgba(255,255,255,0.2);
  font-size: 12px;
}

/* TC gate — inline Privacy Policy link */
.tc-gate-pp-link {
  background: none;
  border: none;
  color: #FFD700;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline;
}

/* ═══════════════════════════════════════════════════
   §22 REFERRAL SYSTEM
═══════════════════════════════════════════════════ */

.referral-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px;
  gap: 10px;
}
.referral-locked-icon { font-size: 32px; opacity: 0.6; }
.referral-locked-text {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}
.referral-signin-btn {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000;
  font-weight: 700;
  font-size: 13px;
  border: none;
  border-radius: 20px;
  padding: 9px 22px;
  cursor: pointer;
  margin-top: 4px;
}

.referral-code-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 16px 14px;
}
.referral-code-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,210,0,0.5);
  text-transform: uppercase;
}
.referral-code-display {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #FFD700;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 20px rgba(255,215,0,0.4);
}
.referral-share-btn {
  background: rgba(255,215,0,0.12);
  border: 1px solid rgba(255,215,0,0.35);
  color: #FFD700;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  padding: 8px 20px;
  cursor: pointer;
  margin-top: 2px;
  transition: background 0.2s;
}
.referral-share-btn:active { background: rgba(255,215,0,0.22); }

.referral-stats-card { margin-top: 8px; }
.referral-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 0;
}
.referral-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
}
.referral-stat-num { font-size: 28px; font-weight: 800; color: #FFD700; }
.referral-stat-label {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.5px;
}
.referral-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,215,0,0.15);
}

.referral-info-card { margin-top: 8px; padding: 12px 16px; }
.referral-info-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
}
.referral-info-row strong { color: #fff; }

/* ═══════════════════════════════════════════════════
   §23 LEADERBOARD
═══════════════════════════════════════════════════ */

.lb-body { padding: 12px 16px 80px; overflow-y: auto; flex: 1; }

.lb-section-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,210,0,0.35);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lb-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,210,0,0.1);
}
.lb-subsection-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.3);
  margin: 14px 0 8px;
}

.lb-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.lb-tab {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  padding: 8px 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.lb-tab-active {
  background: rgba(255,215,0,0.15);
  border-color: rgba(255,215,0,0.5);
  color: #FFD700;
}

.lb-pack-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.lb-pack-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.lb-pack-btn-active {
  background: rgba(255,215,0,0.15);
  border-color: rgba(255,215,0,0.5);
  color: #FFD700;
}

.lb-pack-title {
  font-size: 16px;
  font-weight: 700;
  color: #FFD700;
  margin: 14px 0 10px;
  text-align: center;
}

.lb-list { display: flex; flex-direction: column; gap: 6px; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
}
.lb-row-gold   { background: rgba(255,215,0,0.12); border-color: rgba(255,215,0,0.4); }
.lb-row-silver { background: rgba(192,192,192,0.1); border-color: rgba(192,192,192,0.3); }
.lb-row-bronze { background: rgba(205,127,50,0.1);  border-color: rgba(205,127,50,0.3); }
.lb-row-me     { border-color: #FFD700 !important; box-shadow: 0 0 10px rgba(255,215,0,0.25); }
.lb-rank-cell  { width: 34px; text-align: center; flex-shrink: 0; }
.lb-crown      { font-size: 18px; }
.lb-medal      { font-size: 16px; }
.lb-ranknum    { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.4); }
.lb-name-cell  { flex: 1; font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val-cell   { font-size: 13px; font-weight: 700; color: #FFD700; white-space: nowrap; }
.lb-you        { font-size: 10px; background: #FFD700; color: #000; border-radius: 4px; padding: 1px 5px; font-weight: 800; vertical-align: middle; margin-left: 4px; }

.lb-symbol-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 16px; }
.lb-symbol-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  min-width: 60px;
  transition: background 0.18s;
}
.lb-symbol-btn:active { background: rgba(255,215,0,0.18); border-color: rgba(255,215,0,0.45); }
.lb-symbol-icon  { font-size: 24px; display: flex; align-items: center; justify-content: center; }
.lb-symbol-icon img, .lb-symbol-icon .tab-sym-img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.lb-symbol-count { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.55); }
.lb-title-img { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 4px; }
.lb-title-img img, .lb-title-img .tab-sym-img { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; }

.lb-back-btn {
  background: none;
  border: none;
  color: rgba(255,215,0,0.75);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 0 12px;
  cursor: pointer;
  display: block;
}

.lb-loading, .lb-empty { text-align: center; padding: 22px; font-size: 13px; color: rgba(255,255,255,0.35); }
.lb-loading { color: rgba(255,215,0,0.5); }

.lb-nav-icon img { width: 38px; height: 38px; }

/* ═══════════════════════════════════════════════════
   §24 SIGN-IN INTERSTITIAL
═══════════════════════════════════════════════════ */

#signInInterstitial {
  position: fixed;
  inset: 0;
  background: rgba(5, 2, 18, 0.96);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40000;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#signInInterstitial.si-visible { opacity: 1; }

.si-box {
  background: linear-gradient(160deg, #120a2e 0%, #070415 100%);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 24px;
  padding: 36px 24px 30px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 0 60px rgba(255,215,0,0.06);
}
.si-cloud { font-size: 48px; margin-bottom: 14px; }
.si-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.2;
}
.si-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.42);
  margin-bottom: 28px;
  line-height: 1.55;
}
.si-email-btn {
  width: 100%;
  padding: 13px 16px;
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.28);
  border-radius: 12px;
  color: #FFD700;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 18px;
  transition: background 0.18s;
}
.si-email-btn:active { background: rgba(255,215,0,0.2); }
.si-skip-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.28);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 16px;
  display: block;
  margin: 0 auto;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s;
}
.si-skip-btn:hover { color: rgba(255,255,255,0.5); }
.si-error { font-size: 12px; color: #ff6b6b; min-height: 16px; margin-top: 10px; }

/* ── §25 Fast Rip toggle ───────────────────────────── */
.ticket-header-right {
  display: flex;
  align-items: center;
  gap: 7px;
}
.fast-rip-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 2px 7px;
  font-size: 11px;
  cursor: pointer;
  color: rgba(255,255,255,0.22);
  line-height: 1.5;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}
.fast-rip-toggle.fr-on {
  background: rgba(255,220,0,0.10);
  border-color: rgba(255,220,0,0.45);
  color: #FFD700;
}

/* ── §26. Splash Screen ───────────────────────────── */
#splashScreen {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 9999;
  transition: opacity 0.5s ease;
}
#splashScreen.splash-fade {
  opacity: 0;
  pointer-events: none;
}
#splashScreen.splash-gone {
  display: none;
}
#splashLogo {
  width: 150px;
  height: 150px;
  border-radius: 24px;
  animation: splashGlow 1.6s ease-in-out infinite;
}
#splashTitle {
  font-size: 38px;
  font-weight: 900;
  color: #FFD700;
  letter-spacing: 5px;
  text-transform: uppercase;
  animation: splashGlow 1.6s ease-in-out infinite;
}
@keyframes splashGlow {
  0%, 100% {
    filter: drop-shadow(0 0 6px #FFD700aa);
  }
  50% {
    filter: drop-shadow(0 0 24px #FFD700ff) drop-shadow(0 0 48px #FFD70066);
  }
}

/* ── §28. Neon Nights Pack ────────────────────────── */

/* Pack selection card art — CSS-generated cyberpunk grid */
.ps-art-neon {
  height: 160px;
  background:
    linear-gradient(135deg, #0a0014 0%, #1a0030 40%, #0d001a 70%, #0a0014 100%);
  overflow: hidden;
  border-radius: 0;
}
.ps-art-neon::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(255,45,120,0.12) 28px, rgba(255,45,120,0.12) 29px),
    repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(0,212,255,0.10) 28px, rgba(0,212,255,0.10) 29px);
}
.ps-art-neon::after { content: none; }

/* Pack card badge */
.badge-neon {
  background: linear-gradient(135deg, #ff2d78, #7b2fff);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 9px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255,45,120,0.5);
}

/* Neon pill on pack card */
.ps-pill-neon {
  background: rgba(255,45,120,0.12);
  border: 1px solid rgba(255,45,120,0.35);
  color: #ff2d78;
}

/* Pack banner — neon theme */
.pack-banner.neon-theme {
  background: linear-gradient(135deg, #1a0030, #0d001a);
  border-bottom: 1px solid rgba(255,45,120,0.2);
}

/* Ticket background — neon grid */
.ticket-wrap.neon-bg {
  background: #0d001a;
  border: 1px solid rgba(255,45,120,0.2);
  border-radius: 14px;
  margin: 0 12px;
}
.ticket-wrap.neon-bg .ticket-header {
  background: rgba(255,45,120,0.08);
  border-bottom-color: rgba(255,45,120,0.15);
}
.ticket-wrap.neon-bg .ticket-header-title {
  color: #ff2d78;
  text-shadow: 0 0 8px rgba(255,45,120,0.5);
}

/* Neon tab cover */
.tab-cover.neon-cover {
  background: linear-gradient(135deg, #1a0030 0%, #0a0020 50%, #140028 100%);
  border: 1px solid rgba(255,45,120,0.3);
}
.tab-cover.neon-cover .cover-lines {
  opacity: 0.5;
}
.tab-cover.neon-cover .cover-line {
  background: rgba(0,212,255,0.25);
}
.tab-cover.neon-cover .cover-title {
  color: #ff2d78;
  text-shadow: 0 0 8px rgba(255,45,120,0.8);
}
.tab-cover.neon-cover .cover-hint {
  color: rgba(0,212,255,0.7);
}
.tab-cover.neon-cover .cover-arrow {
  color: rgba(0,212,255,0.5);
}
.tab-cover.neon-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(255,45,120,0.06) 14px, rgba(255,45,120,0.06) 15px),
    repeating-linear-gradient(90deg, transparent, transparent 14px, rgba(0,212,255,0.04) 14px, rgba(0,212,255,0.04) 15px);
  pointer-events: none;
  border-radius: inherit;
}

/* RIP IT AGAIN button — neon */
.rip-again-btn.neon-rip-btn {
  background: linear-gradient(135deg, #ff2d78, #7b2fff);
  color: #fff;
  box-shadow: 0 0 20px rgba(255,45,120,0.4);
}

/* Glow Multiplier info card */
.neon-glow-info {
  margin: 14px 12px 0;
  background: linear-gradient(135deg, rgba(123,47,255,0.15), rgba(255,45,120,0.1));
  border: 1px solid rgba(123,47,255,0.3);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
}
.ngi-title {
  font-size: 13px;
  font-weight: 700;
  color: #ff2d78;
  text-shadow: 0 0 8px rgba(255,45,120,0.5);
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.ngi-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  margin-bottom: 6px;
}
.ngi-odds {
  font-size: 11px;
  color: rgba(0,212,255,0.8);
  letter-spacing: 1px;
}

/* Glow Multiplier — full-screen strobe driven entirely by JS (checkGlowMultiplier) */

/* Inline multiplier badge on prize pill */
.glow-mult-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff2d78, #7b2fff);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.5px;
}

/* Neon win flash on the screen */
#neonScreen.neon-win-flash {
  animation: neonWinFlash 0.5s ease forwards;
}
@keyframes neonWinFlash {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(1.6) saturate(1.5) hue-rotate(10deg); }
  60%  { filter: brightness(1.3); }
  100% { filter: brightness(1); }
}

/* ── NEON NIGHTS — REVEALED TAB THEME ───────────────────────────────────── */

/* Pure black canvas so neon images glow */
.neon-revealed { background: #000 !important; }
.pull-tab.winner .neon-revealed { background: #000510 !important; }
.pull-tab.loser  .neon-revealed { background: #060005 !important; }

/* Prize label sidebar */
.neon-revealed .tab-prize-label {
  background: #000;
  border-right-color: rgba(180,0,255,0.25);
}
.neon-revealed .tab-prize-label .pl-val {
  color: rgba(0,255,200,0.9);
  text-shadow: 0 0 6px rgba(0,255,200,0.6);
}

/* Symbol dividers */
.neon-revealed .tab-symbol {
  border-right-color: rgba(180,0,255,0.12);
}

/* Base: lift brightness, kill the golden filter */
.neon-revealed .tab-sym-img {
  filter: brightness(1.05);
  width: 44px;
  height: 44px;
}

/* Per-symbol neon glow matched to each image's dominant color */
.neon-revealed [data-glow="neon-card"]  { filter: brightness(1.2) drop-shadow(0 0 8px rgba(200,0,255,1))   drop-shadow(0 0 22px rgba(200,0,255,0.55)); }
.neon-revealed [data-glow="neon-star"]  { filter: brightness(1.2) drop-shadow(0 0 8px rgba(180,80,255,1))  drop-shadow(0 0 22px rgba(160,60,255,0.55)); }
.neon-revealed [data-glow="neon-bolt"]  { filter: brightness(1.25) drop-shadow(0 0 8px rgba(255,160,0,1))  drop-shadow(0 0 22px rgba(255,110,0,0.6)); }
.neon-revealed [data-glow="neon-dice"]  { filter: brightness(1.2) drop-shadow(0 0 8px rgba(0,170,255,1))   drop-shadow(0 0 22px rgba(0,130,255,0.55)); }
.neon-revealed [data-glow="neon-chip"]  { filter: brightness(1.2) drop-shadow(0 0 8px rgba(200,0,255,0.9)) drop-shadow(0 0 14px rgba(0,230,255,0.5)) drop-shadow(0 0 24px rgba(200,0,255,0.35)); }
.neon-revealed [data-glow="neon-vault"] { filter: brightness(1.2) drop-shadow(0 0 8px rgba(0,255,80,1))    drop-shadow(0 0 22px rgba(0,210,80,0.55)); }

/* Win stripe — neon gradient */
.neon-revealed .win-line {
  background: linear-gradient(90deg, transparent, rgba(255,45,120,0.7), rgba(123,47,255,0.7), transparent);
  box-shadow: 0 0 8px rgba(255,45,120,0.5), 0 0 18px rgba(123,47,255,0.35);
}

/* ── NEON NIGHTS — PRIZE TABLE OVERRIDES ─────────────────────────────────── */

#neonScreen .prize-table {
  background: #000 !important;
  border-color: rgba(180,0,255,0.2) !important;
}
#neonScreen .pt-head {
  color: rgba(180,0,255,0.6);
  border-bottom-color: rgba(180,0,255,0.14);
}
#neonScreen .pt-row {
  border-bottom-color: rgba(255,255,255,0.04);
}

/* Amplify each prize-table image with its neon glow */
#neonScreen .pt-emoji-img[src*="neon-card"]      { filter: brightness(1.15) drop-shadow(0 0 8px rgba(200,0,255,0.9))  drop-shadow(0 0 18px rgba(200,0,255,0.45)) !important; }
#neonScreen .pt-emoji-img[src*="neon-star"]      { filter: brightness(1.15) drop-shadow(0 0 8px rgba(180,80,255,0.9)) drop-shadow(0 0 18px rgba(160,60,255,0.45)) !important; }
#neonScreen .pt-emoji-img[src*="neon-lightning"] { filter: brightness(1.2)  drop-shadow(0 0 8px rgba(255,160,0,1))    drop-shadow(0 0 18px rgba(255,110,0,0.5))  !important; }
#neonScreen .pt-emoji-img[src*="neon-dice"]      { filter: brightness(1.15) drop-shadow(0 0 8px rgba(0,170,255,0.9))  drop-shadow(0 0 18px rgba(0,130,255,0.45)) !important; }
#neonScreen .pt-emoji-img[src*="neon-chip"]      { filter: brightness(1.15) drop-shadow(0 0 8px rgba(200,0,255,0.85)) drop-shadow(0 0 12px rgba(0,220,255,0.45)) drop-shadow(0 0 20px rgba(200,0,255,0.3)) !important; }
#neonScreen .pt-emoji-img[src*="neon-vault"]     { filter: brightness(1.15) saturate(1.4) drop-shadow(0 0 8px rgba(0,255,80,0.9)) drop-shadow(0 0 18px rgba(0,210,80,0.45)) !important; }

/* ── NEON NIGHTS — HEADER TITLE ─────────────────────────────────────────── */

.neon-h-title {
  background: linear-gradient(90deg, #ff2d78, #c040ff, #7b2fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(255,45,120,0.8)) drop-shadow(0 0 14px rgba(123,47,255,0.6));
  font-weight: 900;
  letter-spacing: 2px;
}

/* ── NEON NIGHTS — PACK BANNER TITLE ─────────────────────────────────────── */

#neonBannerTitle {
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
  background: linear-gradient(90deg, #ff2d78, #c040ff, #7b2fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(255,45,120,0.9)) drop-shadow(0 0 18px rgba(123,47,255,0.6));
}
#neonBannerSub {
  color: rgba(0,212,255,0.85) !important;
  text-shadow: 0 0 8px rgba(0,212,255,0.7), 0 0 18px rgba(0,212,255,0.3) !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

/* ── NEON NIGHTS — EXCESSIVE TEXT GLOW ON ALL ELEMENTS ──────────────────── */

#neonScreen .h-title { font-weight: 900; }
#neonScreen .ticket-header-title {
  color: #ff2d78;
  text-shadow: 0 0 6px rgba(255,45,120,0.9), 0 0 14px rgba(255,45,120,0.5), 0 0 28px rgba(123,47,255,0.4);
}
#neonScreen .pt-head {
  text-shadow: 0 0 8px rgba(180,0,255,0.8), 0 0 18px rgba(180,0,255,0.4);
  letter-spacing: 2px;
}
#neonScreen .result-title {
  text-shadow: 0 0 10px currentColor, 0 0 22px currentColor, 0 0 40px rgba(255,45,120,0.4);
}
#neonScreen .result-sub {
  text-shadow: 0 0 8px rgba(0,212,255,0.8), 0 0 18px rgba(0,212,255,0.4);
  color: rgba(0,212,255,0.9);
}
#neonScreen .board-hint {
  color: rgba(0,212,255,0.7);
  text-shadow: 0 0 8px rgba(0,212,255,0.6);
}

/* ── NEON NIGHTS — PRIZE TABLE PER-ROW TEXT COLORS ──────────────────────── */

/* Neon Card — purple/magenta */
#neonScreen .prize-table > div:nth-child(2) .pt-name        { color: rgba(220,0,255,1); text-shadow: 0 0 8px rgba(220,0,255,0.9), 0 0 20px rgba(220,0,255,0.4); }
#neonScreen .prize-table > div:nth-child(2) .pt-prize-coin  { color: rgba(220,0,255,1); text-shadow: 0 0 8px rgba(220,0,255,0.9), 0 0 20px rgba(220,0,255,0.4); }
#neonScreen .prize-table > div:nth-child(2) .pt-odds        { color: rgba(220,0,255,0.6); }

/* LED Star — violet */
#neonScreen .prize-table > div:nth-child(3) .pt-name        { color: rgba(180,80,255,1); text-shadow: 0 0 8px rgba(180,80,255,0.9), 0 0 20px rgba(160,60,255,0.4); }
#neonScreen .prize-table > div:nth-child(3) .pt-prize-coin  { color: rgba(180,80,255,1); text-shadow: 0 0 8px rgba(180,80,255,0.9), 0 0 20px rgba(160,60,255,0.4); }
#neonScreen .prize-table > div:nth-child(3) .pt-odds        { color: rgba(180,80,255,0.6); }

/* Lightning — amber/orange */
#neonScreen .prize-table > div:nth-child(4) .pt-name        { color: rgba(255,160,0,1);  text-shadow: 0 0 8px rgba(255,160,0,0.95), 0 0 20px rgba(255,110,0,0.5); }
#neonScreen .prize-table > div:nth-child(4) .pt-prize-coin  { color: rgba(255,160,0,1);  text-shadow: 0 0 8px rgba(255,160,0,0.95), 0 0 20px rgba(255,110,0,0.5); }
#neonScreen .prize-table > div:nth-child(4) .pt-odds        { color: rgba(255,160,0,0.6); }

/* Neon Dice — cyan/blue */
#neonScreen .prize-table > div:nth-child(5) .pt-name        { color: rgba(0,185,255,1);  text-shadow: 0 0 8px rgba(0,185,255,0.95), 0 0 20px rgba(0,130,255,0.5); }
#neonScreen .prize-table > div:nth-child(5) .pt-prize-coin  { color: rgba(0,185,255,1);  text-shadow: 0 0 8px rgba(0,185,255,0.95), 0 0 20px rgba(0,130,255,0.5); }
#neonScreen .prize-table > div:nth-child(5) .pt-odds        { color: rgba(0,185,255,0.6); }

/* Holo Chip — rainbow purple+cyan */
#neonScreen .prize-table > div:nth-child(6) .pt-name        { color: rgba(220,0,255,1); text-shadow: 0 0 8px rgba(220,0,255,0.8), 0 0 14px rgba(0,220,255,0.5), 0 0 24px rgba(220,0,255,0.3); }
#neonScreen .prize-table > div:nth-child(6) .pt-prize-coin  { color: rgba(220,0,255,1); text-shadow: 0 0 8px rgba(220,0,255,0.8), 0 0 14px rgba(0,220,255,0.5), 0 0 24px rgba(220,0,255,0.3); }
#neonScreen .prize-table > div:nth-child(6) .pt-odds        { color: rgba(220,0,255,0.6); }

/* Neon Vault — green */
#neonScreen .prize-table > div:nth-child(7) .pt-name        { color: rgba(0,255,80,1);  text-shadow: 0 0 8px rgba(0,255,80,0.95), 0 0 20px rgba(0,210,80,0.5); }
#neonScreen .prize-table > div:nth-child(7) .pt-prize-coin  { color: rgba(0,255,80,1);  text-shadow: 0 0 8px rgba(0,255,80,0.95), 0 0 20px rgba(0,210,80,0.5); }
#neonScreen .prize-table > div:nth-child(7) .pt-odds        { color: rgba(0,255,80,0.6); }

/* ── NEON NIGHTS — WIN TRACKER (replace all yellow/gold with neon) ────────── */

#neonScreen .wt-header {
  color: rgba(180,0,255,0.75);
  text-shadow: 0 0 8px rgba(180,0,255,0.6), 0 0 18px rgba(180,0,255,0.3);
}
#neonScreen .wt-header::before,
#neonScreen .wt-header::after {
  background: rgba(180,0,255,0.22);
}
#neonScreen .wt-count {
  color: #ff2d78;
  text-shadow: 0 0 8px rgba(255,45,120,0.9), 0 0 18px rgba(255,45,120,0.5), 0 0 30px rgba(123,47,255,0.3);
}
#neonScreen .wt-name {
  color: rgba(200,180,255,0.65);
  text-shadow: 0 0 6px rgba(180,0,255,0.4);
}
#neonScreen .wt-cell.wt-earned {
  background: rgba(180,0,255,0.08);
  border-color: rgba(180,0,255,0.32);
}
#neonScreen .wt-cell.wt-new {
  animation: wt-neon-flash 1.3s ease-out forwards;
}
@keyframes wt-neon-flash {
  0%   { background: rgba(200,0,255,0.32); border-color: rgba(200,0,255,0.85); transform: scale(1.1); }
  40%  { background: rgba(200,0,255,0.15); border-color: rgba(200,0,255,0.5);  transform: scale(1.05); }
  100% { background: rgba(200,0,255,0.08); border-color: rgba(200,0,255,0.32); transform: scale(1); }
}
#neonScreen .wt-new-badge {
  background: linear-gradient(135deg, #ff2d78, #7b2fff);
  color: #fff;
  text-shadow: none;
  box-shadow: 0 0 8px rgba(255,45,120,0.6);
}
#neonScreen .wt-sym-img[data-glow] {
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(180,0,255,0.7));
}