/* ============================================================
   DOORDASH WRAPPED — SLIDE ANIMATIONS & LAYOUT
   ============================================================ */

/* ----- A) BACKGROUND GRADIENTS ----- */
.s-bg-dd-intro       { background: linear-gradient(135deg, #FF3008, #1A0A00, #FF3008) !important; }
.s-bg-dd-numbers     { background: linear-gradient(135deg, #1A1A2E, #16213E, #1A1A2E) !important; }
.s-bg-dd-cost        { background: linear-gradient(135deg, #E8830C, #B85C00, #E8830C) !important; }
.s-bg-dd-frequency   { background: linear-gradient(135deg, #2D1B69, #0F0A30, #2D1B69) !important; }
.s-bg-dd-restaurants { background: linear-gradient(135deg, #FF3008, #C72200, #FF3008) !important; }
.s-bg-dd-cuisine     { background: linear-gradient(135deg, #FF6B35, #FF3008, #FF6B35) !important; }
.s-bg-dd-tiers       { background: linear-gradient(135deg, #0F3460, #0A1628, #0F3460) !important; }
.s-bg-dd-extremes    { background: linear-gradient(135deg, #E94560, #533483, #E94560) !important; }
.s-bg-dd-peak        { background: linear-gradient(135deg, #F59E0B, #D97706, #F59E0B) !important; }
.s-bg-dd-timeline    { background: linear-gradient(135deg, #1E3A5F, #0D1B2A, #1E3A5F) !important; }
.s-bg-dd-latenight   { background: linear-gradient(135deg, #0C0C1D, #1B0A3C, #0C0C1D) !important; }
.s-bg-dd-complaints  { background: linear-gradient(135deg, #DC2626, #7F1D1D, #DC2626) !important; }
.s-bg-dd-items       { background: linear-gradient(135deg, #06B6D4, #0E7490, #06B6D4) !important; }
.s-bg-dd-persona     { background: radial-gradient(circle at 50% 40%, #FF3008, #1A1A2E 60%, #000000) !important; }

/* ----- B) SCENE CONTAINER ----- */
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.scene > div {
  position: absolute;
}

/* ----- SLIDE 0 — INTRO : Delivery bags floating ----- */
.dd-bag {
  width: 140px;
  height: 160px;
  background: rgba(255,255,255,0.2);
  border-radius: 10px 10px 0 0;
  border: 5px solid rgba(255,255,255,0.3);
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.dd-bag::before {
  content: '';
  position: absolute;
  top: -35px;
  left: 25px;
  width: 65px;
  height: 35px;
  border: 5px solid rgba(255,255,255,0.22);
  border-bottom: none;
  border-radius: 30px 30px 0 0;
}
.dd-bag::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(255,48,8,0.35);
  border: 5px solid rgba(255,255,255,0.15);
}
.intro-bag-1 { top: 12%; left: 8%; }
.intro-bag-2 { top: 60%; right: 10%; }
.intro-bag-3 { bottom: 20%; left: 20%; }

.dd-door {
  width: 130px;
  height: 190px;
  background: rgba(255,255,255,0.08);
  border: 5px solid rgba(255,255,255,0.15);
  border-radius: 10px 10px 0 0;
}
.dd-door::before {
  content: '';
  position: absolute;
  top: 80px;
  right: 20px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}
.dd-door::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: -25px;
  width: 180px;
  height: 14px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}
.intro-door { top: 30%; right: 5%; }

.dd-receipt {
  width: 60px;
  height: 150px;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  border: 4px solid rgba(255,255,255,0.15);
}
.dd-receipt::before {
  content: '';
  position: absolute;
  top: 25px;
  left: 10px;
  width: 35px;
  height: 5px;
  background: rgba(255,255,255,0.2);
  box-shadow: 0 16px 0 rgba(255,255,255,0.2), 0 32px 0 rgba(255,255,255,0.2), 0 48px 0 rgba(255,255,255,0.15), 0 64px 0 rgba(255,255,255,0.15);
}
.dd-receipt::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 20px;
  background: rgba(255,255,255,0.12);
  clip-path: polygon(0 0, 15% 100%, 30% 0, 45% 100%, 60% 0, 75% 100%, 90% 0, 100% 100%, 100% 0);
}
.intro-receipt { bottom: 15%; right: 22%; }

/* ----- SLIDE 1 — NUMBERS : Coins raining ----- */
.dd-coin {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: rgba(255,200,50,0.3);
  border: 5px solid rgba(255,200,50,0.5);
  box-shadow: 0 0 25px rgba(255,200,50,0.2);
}
.dd-coin::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 4px solid rgba(255,200,50,0.3);
}
.dd-coin::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  width: 5px;
  height: 24px;
  background: rgba(255,200,50,0.35);
}
.numbers-coin-1 { top: -10%; left: 15%; }
.numbers-coin-2 { top: -10%; left: 50%; }
.numbers-coin-3 { top: -10%; right: 20%; }
.numbers-coin-4 { top: -10%; left: 35%; }

.dd-dollar {
  width: 50px;
  height: 90px;
  border: 5px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
}
.dd-dollar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.numbers-dollar { top: -10%; right: 8%; }

/* ----- SLIDE 2 — COST PER ORDER : Receipt strips sliding ----- */
.cost-receipt-1 { width: 75px; height: 175px; top: 8%; left: 5%; }
.cost-receipt-2 { width: 55px; height: 140px; top: 40%; right: -30px; }
.cost-receipt-3 { width: 65px; height: 165px; bottom: 18%; left: -30px; }

.dd-pizza-box {
  width: 110px;
  height: 110px;
  background: rgba(255,255,255,0.08);
  border: 5px solid rgba(255,255,255,0.15);
  border-radius: 10px;
}
.dd-pizza-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: rgba(255,255,255,0.06);
  border-bottom: 4px solid rgba(255,255,255,0.12);
  border-radius: 10px 10px 0 0;
}
.dd-pizza-box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -35%);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 4px dashed rgba(255,255,255,0.15);
}
.cost-pizza { top: 70%; right: 10%; }
.cost-coin { bottom: 8%; left: 12%; }

/* ----- SLIDE 3 — ORDER FREQUENCY : Calendar + notification badges ----- */
.dd-calendar {
  position: absolute; top: 8%; right: 8%;
  width: 280px; height: 310px;
  background: rgba(255,255,255,0.15);
  border-radius: 24px;
  border: 6px solid rgba(255,255,255,0.3);
  box-shadow: 0 16px 60px rgba(0,0,0,0.3);
}
.dd-calendar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 65px;
  background: #FF3008;
  border-radius: 18px 18px 0 0;
}
.dd-calendar::after {
  content: ''; position: absolute; top: 85px; left: 25px; right: 25px;
  height: 6px; background: rgba(255,255,255,0.12);
  box-shadow: 0 32px 0 rgba(255,255,255,0.08), 0 64px 0 rgba(255,255,255,0.08), 0 96px 0 rgba(255,255,255,0.08);
}

.dd-notif {
  position: absolute;
  width: 60px; height: 60px;
  background: #FF3008;
  border-radius: 50%;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.dd-notif::before { content: '!'; }
.dn-1 { top: 5%; right: 5%; }
.dn-2 { top: 30%; left: 8%; width: 50px; height: 50px; font-size: 24px; }
.dn-3 { bottom: 25%; right: 12%; width: 55px; height: 55px; }

/* ----- SLIDE 4 — TOP RESTAURANTS : Stars pulsing ----- */
.dd-star {
  width: 90px;
  height: 90px;
  background: rgba(255,200,50,0.4);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 15px rgba(255,200,50,0.3));
}
.dd-star::before {
  content: '';
  position: absolute;
  inset: 10px;
  background: rgba(255,200,50,0.15);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.tip-star-1 { top: 10%; left: 10%; }
.tip-star-2 { top: 8%; right: 15%; width: 55px; height: 55px; }
.tip-star-3 { bottom: 25%; left: 6%; width: 45px; height: 45px; }
.tip-star-4 { bottom: 15%; right: 8%; width: 65px; height: 65px; }
.tip-coin { top: 55%; left: 5%; }

/* ----- SLIDE 5 — CUISINE : Takeout containers & pizza swinging ----- */
.dd-takeout {
  width: 100px;
  height: 75px;
  background: rgba(255,255,255,0.1);
  border: 5px solid rgba(255,255,255,0.18);
  clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
}
.dd-takeout::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 12px;
  width: 75px;
  height: 20px;
  background: rgba(255,255,255,0.08);
  border: 4px solid rgba(255,255,255,0.12);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.dd-takeout::after {
  content: '';
  position: absolute;
  top: -30px;
  left: 35px;
  width: 30px;
  height: 15px;
  border: 4px solid rgba(255,255,255,0.15);
  border-bottom: none;
  border-radius: 15px 15px 0 0;
}
.cuisine-takeout-1 { top: 10%; left: 7%; }
.cuisine-takeout-2 { top: 55%; right: 6%; }
.cuisine-pizza { bottom: 12%; left: 15%; }
.cuisine-bag { top: 70%; right: 18%; }
.cuisine-receipt { top: 20%; right: 10%; }

/* ----- SLIDE 6 — SPENDING TIERS : Reuse tier-grid with DD-red accents ----- */
/* Tier grid styles below in section F */

/* ----- SLIDE 7 — EXTREMES : Coins + receipt ----- */
/* Reuses numbers-coin and cost-receipt scene elements */

/* ----- SLIDE 8 — PEAK MONTH : Bags cascading ----- */
/* Reuses intro-bag scene elements */

/* ----- SLIDE 9 — ORDER TIMELINE : Clocks sliding ----- */
.dd-clock {
  width: 115px;
  height: 115px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 5px solid rgba(255,255,255,0.2);
}
.dd-clock::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 35px;
  background: rgba(255,255,255,0.35);
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(-30deg);
  border-radius: 3px;
}
.dd-clock::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 25px;
  background: rgba(255,255,255,0.25);
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(60deg);
  border-radius: 3px;
}
.clock-face-1 { top: 8%; left: 8%; }
.clock-face-2 { top: 50%; right: 5%; }
.clock-face-3 { bottom: 18%; left: 12%; width: 90px; height: 90px; }

.dd-scooter {
  width: 130px;
  height: 75px;
}
.dd-scooter::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 5px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
}
.dd-scooter::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 5px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
}
.dd-scooter-body {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 80px;
  height: 30px;
  background: rgba(255,255,255,0.12);
  border-radius: 15px 30px 5px 5px;
  border: 4px solid rgba(255,255,255,0.18);
}
.dd-scooter-body::before {
  content: '';
  position: absolute;
  top: -20px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-left: 5px solid rgba(255,255,255,0.2);
  border-top: 5px solid rgba(255,255,255,0.2);
  border-radius: 4px 0 0 0;
}
.clock-scooter { bottom: 10%; right: 15%; }
.clock-receipt { top: 25%; right: 20%; }

/* ----- SLIDE 10 — LATE NIGHT : Moon + stars + phone glow ----- */
.dd-moon {
  position: absolute; top: 6%; right: 10%;
  width: 260px; height: 260px;
  background: radial-gradient(circle at 35% 35%, #FFF8DC, #FFD700);
  border-radius: 50%;
  box-shadow: 0 0 120px rgba(255,215,0,0.5), 0 0 250px rgba(255,215,0,0.25);
}
.dd-moon::before {
  content: ''; position: absolute; top: 25px; right: 12px;
  width: 140px; height: 140px;
  background: #0A1628;
  border-radius: 50%;
}

.dd-night-star {
  position: absolute;
  background: #fff;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.dns-1 { top: 8%; left: 15%; width: 45px; height: 45px; }
.dns-2 { top: 20%; left: 30%; width: 35px; height: 35px; }
.dns-3 { top: 5%; left: 50%; width: 40px; height: 40px; }
.dns-4 { top: 25%; right: 25%; width: 30px; height: 30px; }
.dns-5 { top: 12%; left: 8%; width: 35px; height: 35px; }

.dd-phone-glow {
  position: absolute; bottom: 15%; left: 10%;
  width: 160px; height: 275px;
  border: 7px solid rgba(255,255,255,0.3);
  border-radius: 35px;
  background: rgba(0,0,0,0.4);
}
.dd-phone-glow::before {
  content: ''; position: absolute; top: 35px; left: 12px; right: 12px; bottom: 50px;
  background: rgba(255,48,8,0.15);
  border-radius: 14px;
  box-shadow: 0 0 50px rgba(255,48,8,0.3);
}
.dd-phone-glow::after {
  content: ''; position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 35px; height: 10px;
  background: rgba(255,255,255,0.2);
  border-radius: 5px;
}

/* ----- SLIDE 11 — COMPLAINTS : Elements shaking / raining ----- */
.disaster-bag-1 { top: 5%; left: 12%; }
.disaster-bag-2 { bottom: 20%; right: 8%; }
.disaster-scooter { top: 60%; left: 5%; }

.dd-x-mark {
  width: 60px;
  height: 60px;
}
.dd-x-mark::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 8px;
  background: rgba(255,100,80,0.5);
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 4px;
}
.dd-x-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 8px;
  background: rgba(255,100,80,0.5);
  transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: 4px;
}
.disaster-x-1 { top: 15%; right: 15%; }
.disaster-x-2 { top: -5%; left: 40%; }

/* ----- SLIDE 12 — FAVORITE ITEMS : Takeout & pizza floating ----- */
.appetite-takeout-1 { top: 8%; right: 8%; }
.appetite-takeout-2 { bottom: 22%; left: 6%; }
.appetite-pizza { top: 50%; left: 8%; }
.appetite-bag { top: 15%; left: 18%; }
.appetite-coin { bottom: 10%; right: 12%; }

/* ----- SLIDE 13 — PERSONA : Stars & receipts orbiting ----- */
.persona-star-1 { top: 6%; left: 10%; filter: drop-shadow(0 0 15px rgba(255,200,50,0.4)); }
.persona-star-2 { top: 8%; right: 12%; width: 65px; height: 65px; filter: drop-shadow(0 0 15px rgba(255,200,50,0.4)); }
.persona-receipt-1 { bottom: 22%; left: 5%; }
.persona-bag { bottom: 30%; right: 6%; }
.persona-door { top: 40%; left: 3%; }

/* Persona confetti burst */
.dd-persona-confetti {
  position: absolute;
  border-radius: 12px;
  opacity: 0;
}
.dd-pc-1 { top: 5%; left: 5%; width: 35px; height: 80px; background: #FF3008; }
.dd-pc-2 { top: 10%; right: 10%; width: 25px; height: 60px; background: #FFD700; }
.dd-pc-3 { bottom: 15%; left: 15%; width: 30px; height: 70px; background: #3A86FF; }
.dd-pc-4 { bottom: 10%; right: 5%; width: 35px; height: 75px; background: #06C167; }
.dd-pc-5 { top: 35%; left: 3%; width: 25px; height: 55px; background: #E94560; }
.dd-pc-6 { top: 25%; right: 3%; width: 30px; height: 65px; background: #8338EC; }
.dd-pc-7 { top: 48%; right: 2%; width: 25px; height: 50px; background: #FF6B35; }
.dd-pc-8 { bottom: 25%; left: 8%; width: 20px; height: 45px; background: #FFD700; }

/* ============================================================
   C) @KEYFRAMES — Now handled by GSAP
   ============================================================ */

.persona-glow {
  position: absolute; top: 50%; left: 50%;
  width: 500px; height: 600px;
  transform: translate(-50%, -50%);
}

/* ============================================================
   D) ENTRANCE ANIMATIONS
   ============================================================ */
/* Content entrance handled by GSAP contentStagger() */
.anim-in { opacity: 0; }

/* ============================================================
   E) SLIDE CONTENT LAYOUT
   ============================================================ */
.s-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 400px;
}

.s-watermark {
  position: absolute;
  bottom: 1.2rem;
  right: 1.5rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.25);
  z-index: 2;
}

.s-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 5px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.s-big-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(3.5rem, 14vw, 7rem);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.s-caption {
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  margin-top: 0.5rem;
}

.s-roast {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
  margin-top: 1.5rem;
  max-width: 320px;
  line-height: 1.5;
  font-style: italic;
  background: rgba(0,0,0,0.2);
  padding: 0.8rem 1.2rem;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.s-next {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.9);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.6rem 1.8rem;
  border-radius: 50px;
  transition: all 0.3s;
  z-index: 10;
  font-family: 'Space Grotesk', sans-serif;
}

.s-next:hover {
  border-color: rgba(255,255,255,0.8);
  color: #fff;
  background: rgba(255,255,255,0.25);
}

.s-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.5rem, 10vw, 4rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.s-subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  max-width: 320px;
  line-height: 1.4;
}

/* ----- BIG TEXT (peak month name) ----- */
.s-big-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.5rem, 10vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* ----- SLIDE PROGRESS DOTS ----- */
.slide-progress {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s;
}

.slide-progress.visible {
  opacity: 1;
}

.slide-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all 0.3s;
}

.slide-dot.active {
  background: #fff;
  width: 22px;
  border-radius: 3px;
}

/* ============================================================
   F) DATA-DRIVEN SLIDE LAYOUTS
   ============================================================ */

/* ---- TOP LIST (restaurants / items) ---- */
.top-list { text-align: left; width: 100%; max-width: 340px; margin: 0.5rem 0; }
.top-list-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; font-size: 0.85rem; background: rgba(0,0,0,0.12); border-radius: 8px; margin-bottom: 0.25rem; backdrop-filter: blur(4px); }
.top-list-rank { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1rem; color: #fff; min-width: 20px; }
.top-list-name { color: rgba(255,255,255,0.9); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }
.top-list-count { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.8rem; color: rgba(255,255,255,0.6); min-width: 28px; text-align: right; }

/* ---- SPLIT LAYOUT (biggest vs smallest) ---- */
.s-split { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0; }
.s-split-box { display: flex; flex-direction: column; align-items: center; background: rgba(0,0,0,0.15); padding: 1.2rem 1.5rem; border-radius: 16px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); min-width: 120px; }
.s-split-num { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 700; }
.s-split-label { font-size: 0.7rem; color: rgba(255,255,255,0.7); margin-top: 0.3rem; text-transform: uppercase; letter-spacing: 1px; max-width: 120px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-split-vs { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; color: rgba(255,255,255,0.5); font-weight: 700; }

/* ---- BAR CHART (day-of-week timeline / monthly) ---- */
.month-bars { width: 100%; max-width: 340px; margin: 0.5rem 0; }
.month-bar-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.month-bar-label { font-size: 0.7rem; color: rgba(255,255,255,0.7); width: 28px; text-align: right; font-family: 'Space Grotesk', sans-serif; }
.month-bar-track { flex: 1; height: 20px; background: rgba(0,0,0,0.15); border-radius: 5px; overflow: hidden; }
.month-bar-fill { height: 100%; background: rgba(255,255,255,0.4); border-radius: 5px; }
.month-bar-count { font-size: 0.7rem; color: rgba(255,255,255,0.6); width: 24px; font-family: 'Space Grotesk', sans-serif; }

/* Peak month highlight */
.peak-bar { background: rgba(255,48,8,0.1); border-radius: 6px; padding: 2px 4px; }
.peak-fill { background: linear-gradient(90deg, #FFD700, #FFA500) !important; }

/* ---- TIER GRID (2x2 spending tiers) ---- */
.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 320px; }
.tier-box { background: rgba(255,255,255,0.1); border-radius: 14px; padding: 1.2rem 0.8rem; text-align: center; backdrop-filter: blur(10px); }
.tier-num { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 8vw, 3rem); font-weight: 700; color: #fff; }
.tier-label { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-top: 4px; }

/* ---- ADDICTION METER ---- */
.meter-bar-wrap { width: 100%; max-width: 300px; margin-top: 1rem; }
.meter-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 2px; color: rgba(255,255,255,0.6); text-transform: uppercase; margin-bottom: 6px; }
.meter-track { width: 100%; height: 16px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; }
.meter-fill { height: 100%; width: 0%; border-radius: 10px; background: linear-gradient(90deg, #FF3008, #FFD700, #FF8C00, #FF4500, #DC143C); box-shadow: 0 0 12px rgba(255,48,8,0.5); }
.meter-level { font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.9); margin-top: 6px; text-align: center; }


/* ---- MOBILE ---- */
@media (max-width: 480px) {
  .s-split { flex-direction: column; gap: 0.5rem; }
  .s-split-vs { display: none; }
  .s-split-box { min-width: 0; width: 100%; }
  .s-big-num { font-size: clamp(3rem, 12vw, 5rem); }
  .s-big-text { font-size: clamp(2rem, 9vw, 3.5rem); }
  .s-next { bottom: 2.5rem; }
  .tier-grid { gap: 8px; }
  .tier-num { font-size: clamp(1.5rem, 7vw, 2.5rem); }
  .dd-bag { width: 80px; height: 90px; }
  .dd-bag::before { top: -20px; left: 14px; width: 38px; height: 20px; }
  .dd-bag::after { width: 26px; height: 26px; }
  .dd-door { width: 80px; height: 115px; }
  .dd-door::after { width: 130px; }
  .dd-receipt { width: 38px; height: 90px; }
  .dd-coin { width: 50px; height: 50px; }
  .dd-dollar { width: 32px; height: 55px; }
  .dd-pizza-box { width: 70px; height: 70px; }
  .dd-calendar { width: 180px; height: 200px; }
  .dd-notif { width: 38px; height: 38px; font-size: 18px; }
  .dd-star { width: 55px; height: 55px; }
  .dd-takeout { width: 60px; height: 45px; }
  .dd-clock { width: 70px; height: 70px; }
  .dd-scooter { width: 80px; height: 46px; }
  .dd-moon { width: 160px; height: 160px; }
  .dd-moon::before { width: 85px; height: 85px; }
  .dd-phone-glow { width: 95px; height: 165px; }
  .dd-x-mark { width: 38px; height: 38px; }
  .dd-x-mark::before, .dd-x-mark::after { width: 32px; height: 5px; }
  .dd-night-star { transform: scale(0.6); }
  .dd-pc-1, .dd-pc-2, .dd-pc-3, .dd-pc-4,
  .dd-pc-5, .dd-pc-6, .dd-pc-7, .dd-pc-8 { transform: scale(0.65); }
  .persona-glow { width: 80vw; height: 80vw; }
  .meter-bar-wrap { max-width: 260px; }
}

/* ---- SMALL MOBILE ---- */
@media (max-width: 360px) {
  .dd-bag { width: 60px; height: 68px; }
  .dd-bag::before { top: -16px; left: 10px; width: 28px; height: 16px; }
  .dd-bag::after { width: 20px; height: 20px; }
  .dd-door { width: 60px; height: 86px; }
  .dd-door::after { width: 100px; }
  .dd-receipt { width: 28px; height: 68px; }
  .dd-coin { width: 38px; height: 38px; }
  .dd-dollar { width: 24px; height: 42px; }
  .dd-pizza-box { width: 52px; height: 52px; }
  .dd-calendar { width: 135px; height: 150px; }
  .dd-notif { width: 28px; height: 28px; font-size: 14px; }
  .dd-star { width: 42px; height: 42px; }
  .dd-takeout { width: 45px; height: 34px; }
  .dd-clock { width: 52px; height: 52px; }
  .dd-scooter { width: 60px; height: 35px; }
  .dd-moon { width: 120px; height: 120px; }
  .dd-moon::before { width: 64px; height: 64px; }
  .dd-phone-glow { width: 72px; height: 124px; }
  .dd-x-mark { width: 28px; height: 28px; }
  .dd-x-mark::before, .dd-x-mark::after { width: 24px; height: 4px; }
  .dd-night-star { transform: scale(0.45); }
  .dd-pc-1, .dd-pc-2, .dd-pc-3, .dd-pc-4,
  .dd-pc-5, .dd-pc-6, .dd-pc-7, .dd-pc-8 { transform: scale(0.5); }
  .persona-glow { width: 70vw; height: 70vw; }
}