/* ============ Abra Caixas — Mobile gamificado ============ */
:root {
  --bg-0: #050913;
  --bg-1: #0A1322;
  --bg-2: #0F1B30;
  --surface: #131E36;
  --surface-2: #18253F;
  --border: #1F2E4D;
  --border-2: #2A3E66;

  --text: #F2F6FC;
  --muted: #94A3BE;
  --dim: #5F6E8A;

  --accent: #18B0EC;
  --accent-2: #0E97D0;
  --accent-soft: rgba(24,176,236,0.14);

  --cta: #18B0EC;
  --cta-2: #0E97D0;

  --success: #16C784;
  --gold: #FFB938;

  /* rarity colors — gamer-grade */
  --r-common: #8B9BB8;
  --r-rare:   #3E8FFF;
  --r-epic:   #B85CFF;
  --r-legendary: #FF8C2D;
  --r-mythic: #FF3B6C;

  --radius-card: 16px;

  --frame-w: 402px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #0a0e18;
  color: var(--text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #001220; }

.mono { font-family: "JetBrains Mono", monospace; font-feature-settings: "tnum"; }
.display { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }

/* ============ Desktop stage ============ */
.stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background:
    radial-gradient(900px 600px at 80% 0%, rgba(24,176,236,0.12), transparent 60%),
    radial-gradient(700px 500px at 5% 100%, rgba(255,122,26,0.08), transparent 70%),
    linear-gradient(180deg, #050913, #0a0e18);
  position: relative;
}

.stage-meta {
  position: absolute;
  top: 32px;
  left: 32px;
  color: var(--muted);
  font-size: 12px;
  font-family: "JetBrains Mono";
  letter-spacing: 0.04em;
}
.stage-meta strong { color: var(--text); font-weight: 600; }

/* ============ Production wrap (desktop polish) ============ */
.prod-wrap {
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(24,176,236,0.15), transparent 60%),
    radial-gradient(700px 500px at 85% 80%, rgba(184,92,255,0.12), transparent 65%),
    radial-gradient(600px 400px at 50% 50%, rgba(24,176,236,0.05), transparent 70%),
    linear-gradient(180deg, #050913, #0a0e18 40%, #050913);
}
.prod-bg-orbits {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.prod-bg-orbits::before,
.prod-bg-orbits::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(24,176,236,0.08);
}
.prod-bg-orbits::before {
  width: 800px; height: 800px;
  top: -300px; left: -300px;
  animation: orbitSpin 60s linear infinite;
}
.prod-bg-orbits::after {
  width: 1100px; height: 1100px;
  bottom: -400px; right: -400px;
  animation: orbitSpin 80s linear infinite reverse;
  border-color: rgba(184,92,255,0.06);
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

.prod-app {
  width: 100%;
  max-width: 460px;
  position: relative;
  min-height: 100vh;
  background: var(--bg-1);
  z-index: 2;
}

@media (min-width: 768px) {
  .prod-app {
    margin-top: 24px;
    margin-bottom: 40px;
    min-height: auto;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow:
      0 40px 80px rgba(0,0,0,0.5),
      0 0 0 1px rgba(255,255,255,0.04),
      0 0 60px rgba(24,176,236,0.12);
  }
  .topbar {
    border-radius: 28px 28px 0 0;
  }
  /* Constrain ticker and popup to the centered app width */
  .ticker-wrap {
    right: calc(50% - 230px - 12px);
  }
  .popup-sheet {
    max-width: 460px;
    border-radius: 24px;
    bottom: 24px;
  }
}

@media (min-width: 1100px) {
  .prod-wrap {
    /* Decorative side imagery hint */
  }
  .prod-app {
    margin-top: 48px;
  }
}

/* Hide tweak panel cursor on mobile */
@media (max-width: 520px) {
  .prod-app {
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin: 0;
  }
}

/* ============ App body (inside frame) ============ */
.app {
  background:
    radial-gradient(500px 400px at 100% 0%, rgba(24,176,236,0.18), transparent 60%),
    radial-gradient(400px 300px at 0% 30%, rgba(184,92,255,0.10), transparent 70%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 30%, var(--bg-1));
  min-height: 100%;
  color: var(--text);
  padding-bottom: 32px;
  position: relative;
}

@media (max-width: 520px) {
  .stage { padding: 0; min-height: 100vh; align-items: flex-start; }
  .stage-meta { display: none; }
  .frame-wrap { width: 100%; }
}

/* ============ Top bar — minimalist ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(14px);
  background: rgba(10,19,34,0.78);
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
}
.topbar-row1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.brand {
  display: inline-flex;
  align-items: center;
}
.brand-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(24,176,236,0.5));
  animation: brandFloat 4.2s ease-in-out infinite;
}
@keyframes brandFloat {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(-3px) rotate(3deg); }
}

.nav-login,
.nav-signup {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  padding: 10px 16px;
  border-radius: 12px;
  transition: transform 0.12s, background 0.15s, box-shadow 0.2s;
  white-space: nowrap;
}
.nav-login:active,
.nav-signup:active { transform: scale(0.97); }

.nav-login {
  color: var(--text);
  background: #1A2538;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 0 rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
}
.nav-login:active { background: #22304A; }

.nav-signup {
  color: #00141E;
  background: linear-gradient(180deg, #2DC5FF, var(--accent));
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow:
    0 8px 18px -6px rgba(24,176,236,0.6),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.12);
}

/* Signup with bonus badge */
.signup-wrap {
  position: relative;
  display: inline-block;
}
.signup-badge {
  position: absolute;
  top: -10px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #FFE072, #FFB12C);
  color: #3C1F00;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 10px;
  padding: 3px 7px 3px 5px;
  border-radius: 999px;
  box-shadow:
    0 4px 10px rgba(255,177,44,0.45),
    inset 0 1px 0 rgba(255,255,255,0.55);
  letter-spacing: -0.005em;
  transform: rotate(6deg);
  animation: badgeWiggle 3.6s ease-in-out infinite;
}
@keyframes badgeWiggle {
  0%,100% { transform: rotate(6deg) translateY(0); }
  50%     { transform: rotate(8deg) translateY(-1px); }
}
.signup-badge-icon {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(60,31,0,0.92);
  color: #FFD66E;
}

/* ============ Hero ============ */
.hero {
  padding: 18px 16px 8px;
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  border: 1px solid rgba(24,176,236,0.3);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(24,176,236,0.25);
  animation: pulse 1.6s ease-in-out infinite;
}
.hero-eyebrow .live-count {
  font-family: "JetBrains Mono", monospace;
  font-feature-settings: "tnum";
  font-weight: 700;
  color: #fff;
  background: rgba(24,176,236,0.18);
  padding: 1px 7px;
  border-radius: 6px;
  margin-right: 2px;
  animation: countPulse 0.5s ease-out;
}
@keyframes countPulse {
  0%   { transform: scale(1);    background: rgba(24,176,236,0.45); }
  100% { transform: scale(1);    background: rgba(24,176,236,0.18); }
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(24,176,236,0.25); }
  50% { box-shadow: 0 0 0 7px rgba(24,176,236,0); }
}

h1.hero-title {
  font-size: 42px;
  margin: 0 0 10px;
  line-height: 0.95;
}
.hero-title .accent {
  background: linear-gradient(120deg, var(--accent), #71E1FF 50%, #FFFFFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}

.hero-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 0 auto 18px;
  max-width: 320px;
}

/* Hero 3D stage */
.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 340px;
  margin: 0 auto 18px;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.hero-stage-bg {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--featured-tint, rgba(24,176,236,0.35)) 0%, transparent 60%);
  filter: blur(8px);
  animation: glowPulse 3.5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
.hero-ring {
  position: absolute;
  inset: 10%;
  border: 1px dashed rgba(24,176,236,0.4);
  border-radius: 50%;
  animation: ringSpin 22s linear infinite;
}
.hero-ring.r2 {
  inset: 22%;
  border-color: rgba(184,92,255,0.25);
  animation-duration: 36s;
  animation-direction: reverse;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

.hero-box-3d {
  position: absolute;
  inset: 14%;
  display: grid;
  place-items: center;
  animation: heroBob 4s ease-in-out infinite;
}
@keyframes heroBob {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}
.hero-box-3d img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,0.6)) drop-shadow(0 0 30px var(--featured-tint, rgba(24,176,236,0.3)));
}

/* Hero carousel — boxes pulling each other */
.hero-carousel {
  position: absolute;
  inset: 4% 6% 8% 6%;
  overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.hero-track {
  display: flex;
  height: 100%;
  width: 100%;
  will-change: transform;
}
.hero-slide {
  flex: 0 0 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 4px;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,0.6)) drop-shadow(0 0 30px var(--featured-tint, rgba(24,176,236,0.3)));
  animation: heroBob 4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes heroBob {
  0%,100% { transform: translateY(2px) rotate(-3deg); }
  50%     { transform: translateY(-6px) rotate(3deg); }
}

.hero-dots {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 4;
}
.hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: width 0.4s ease, background 0.3s ease;
}
.hero-dot.active {
  background: var(--accent);
  width: 18px;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(24,176,236,0.5);
}

/* ============ Intro sequence ============ */
.intro {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
}

/* ============ CSS Gift Box ============ */
.gift-box {
  position: relative;
  width: 60%;
  max-width: 200px;
  aspect-ratio: 1/1;
  transform-origin: 50% 95%;
  z-index: 2;
}

/* Body */
.gift-body {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 62%;
  background:
    linear-gradient(180deg, #2DC5FF 0%, #18B0EC 55%, #0A6FA8 100%);
  border-radius: 6px 6px 8px 8px;
  box-shadow:
    inset 0 -14px 18px rgba(0,0,0,0.32),
    inset -10px 0 14px rgba(0,0,0,0.15),
    inset 10px 0 14px rgba(255,255,255,0.10),
    inset 0 6px 8px rgba(0,0,0,0.45),
    0 24px 36px rgba(0,0,0,0.55),
    0 12px 30px rgba(24,176,236,0.45);
}
.gift-body-shine {
  position: absolute;
  top: 0; left: 10%;
  width: 22%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%);
  border-radius: 4px;
  filter: blur(2px);
}

/* Vertical gold ribbon (body) */
.gift-body .gift-ribbon-v {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18%;
  height: 100%;
  background:
    linear-gradient(180deg, #FFE072 0%, #FFC149 40%, #E69A14 100%);
  box-shadow:
    inset -3px 0 4px rgba(0,0,0,0.22),
    inset 3px 0 4px rgba(255,255,255,0.25);
}
/* Horizontal gold ribbon (body) */
.gift-body .gift-ribbon-h {
  display: none;
}

/* Lid */
.gift-lid {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 24%;
  transform-origin: 50% 100%;
  z-index: 4;
  pointer-events: none;
}
.gift-lid-top {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #71E1FF 0%, #2DC5FF 55%, #18B0EC 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 -5px 8px rgba(0,0,0,0.22),
    inset 0 4px 5px rgba(255,255,255,0.45),
    inset 8px 0 10px rgba(255,255,255,0.10),
    inset -8px 0 10px rgba(0,0,0,0.12),
    0 6px 10px rgba(0,0,0,0.35);
}
.gift-lid .gift-ribbon-v {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16%;
  height: 100%;
  background: linear-gradient(180deg, #FFE072 0%, #FFC149 60%, #E69A14 100%);
  box-shadow:
    inset -3px 0 4px rgba(0,0,0,0.20),
    inset 3px 0 4px rgba(255,255,255,0.30);
}
.gift-lid .gift-ribbon-h {
  display: none;
}

/* Bow */
.gift-bow {
  position: absolute;
  top: -38%;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  aspect-ratio: 2/1;
  z-index: 5;
}
.bow-l, .bow-r {
  position: absolute;
  top: 6%;
  width: 46%;
  height: 90%;
  background: linear-gradient(135deg, #FFE072, #FFB12C 60%, #C77A00);
  box-shadow:
    inset -2px 2px 4px rgba(0,0,0,0.15),
    0 2px 4px rgba(0,0,0,0.3);
}
.bow-l {
  left: -2%;
  transform: rotate(-14deg);
  border-radius: 90% 30% 90% 30% / 100% 60% 100% 60%;
}
.bow-r {
  right: -2%;
  transform: rotate(14deg);
  border-radius: 30% 90% 30% 90% / 60% 100% 60% 100%;
}
.bow-c {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  width: 22%;
  height: 70%;
  background: linear-gradient(180deg, #FFE072, #C77A00);
  border-radius: 4px;
  box-shadow: inset -1px 0 2px rgba(0,0,0,0.2);
  z-index: 2;
}
.bow-tail {
  position: absolute;
  width: 18%;
  height: 50%;
  background: linear-gradient(180deg, #FFE072, #E69A14);
  z-index: 1;
}
.bow-tail-l {
  left: 28%; top: 60%;
  transform: rotate(-25deg) skewX(-12deg);
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 70%);
}
.bow-tail-r {
  right: 28%; top: 60%;
  transform: rotate(25deg) skewX(12deg);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 30% 100%);
}

/* Inner glow when open */
.gift-glow {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translate(-50%, 0) scaleY(0);
  transform-origin: center bottom;
  width: 78%;
  height: 80%;
  background:
    radial-gradient(ellipse at center bottom, rgba(255,250,200,0.95) 0%, rgba(255,200,80,0.7) 30%, rgba(255,160,40,0.25) 60%, transparent 80%);
  opacity: 0;
  z-index: 3;
  filter: blur(3px);
  border-radius: 50%;
}
.has-open .gift-glow {
  animation: glowReveal 1.2s 0.15s ease-out forwards;
}
@keyframes glowReveal {
  0%   { opacity: 0; transform: translate(-50%, 20px) scaleY(0); }
  40%  { opacity: 1; transform: translate(-50%, -10px) scaleY(1.3); }
  100% { opacity: 0.7; transform: translate(-50%, -30px) scaleY(1.6); }
}

/* ===== Phase animations on the box ===== */
.intro-shake .gift-box {
  animation: boxNervous 0.42s ease-in-out infinite;
}
@keyframes boxNervous {
  0%,100% { transform: rotate(-5deg) translateY(0); }
  25%     { transform: rotate(6deg)  translateY(-3px); }
  50%     { transform: rotate(-4deg) translateY(-2px); }
  75%     { transform: rotate(7deg)  translateY(-4px); }
}
.intro-click .gift-box {
  animation: boxPress 0.7s ease-out forwards;
}
@keyframes boxPress {
  0%   { transform: scale(1)    rotate(0); }
  35%  { transform: scale(0.88) rotate(-3deg) translateY(3px); }
  100% { transform: scale(1.06) rotate(0)    translateY(0); }
}
.has-open .gift-box {
  animation: boxBurstBody 1.6s cubic-bezier(.34,1.6,.64,1) forwards;
}
@keyframes boxBurstBody {
  0%   { transform: scale(1.06) translateY(0); }
  18%  { transform: scale(0.82) translateY(10px); }
  45%  { transform: scale(1.12) translateY(-8px); }
  100% { transform: scale(1.04) translateY(0); }
}
.has-text .gift-box {
  opacity: 0;
  transform: scale(0.6) translateY(30px);
  transition: opacity 0.5s ease, transform 0.6s ease;
}

/* Lid fly-off */
.has-open .gift-lid {
  animation: lidFly 1.1s cubic-bezier(.4,1.5,.5,1) forwards;
}
@keyframes lidFly {
  0%   { transform: translateX(-50%) translateY(0)     rotate(0); opacity: 1; }
  100% { transform: translateX(-30%) translateY(-180px) rotate(-32deg) scale(0.85); opacity: 0; }
}

/* ===== Cursor ===== */
.intro-cursor {
  position: absolute;
  top: 50%; left: 50%;
  width: 32px; height: 36px;
  margin: -18px 0 0 -16px;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}
.intro-click .intro-cursor {
  animation: cursorFly 1.0s ease-in-out forwards;
}
@keyframes cursorFly {
  0%   { opacity: 0; transform: translate(80px,  60px) scale(1.2); }
  35%  { opacity: 1; transform: translate(18px,  16px) scale(1); }
  55%  { opacity: 1; transform: translate(0,     0)    scale(0.78); }
  72%  { opacity: 1; transform: translate(0,     0)    scale(1); }
  100% { opacity: 0; transform: translate(-20px,-30px) scale(1); }
}
.intro-cursor-ripple {
  position: absolute;
  top: 14px; left: 12px;
  width: 22px; height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
}
.intro-cursor-ripple.r2 { border-color: var(--accent); }
.intro-click .intro-cursor-ripple    { animation: ripple 0.7s ease-out 0.50s; }
.intro-click .intro-cursor-ripple.r2 { animation: ripple 0.9s ease-out 0.55s; }
@keyframes ripple {
  0%   { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ===== Light rays burst ===== */
.intro-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 200%; height: 200%;
  transform: translate(-50%, -50%) scale(0);
  background:
    conic-gradient(from 0deg,
      rgba(24,176,236,0.55) 0deg, transparent 18deg,
      rgba(255,185,56,0.50) 36deg, transparent 54deg,
      rgba(24,176,236,0.55) 72deg, transparent 90deg,
      rgba(255,185,56,0.50) 108deg, transparent 126deg,
      rgba(24,176,236,0.55) 144deg, transparent 162deg,
      rgba(255,185,56,0.50) 180deg, transparent 198deg,
      rgba(24,176,236,0.55) 216deg, transparent 234deg,
      rgba(255,185,56,0.50) 252deg, transparent 270deg,
      rgba(24,176,236,0.55) 288deg, transparent 306deg,
      rgba(255,185,56,0.50) 324deg, transparent 342deg
    );
  -webkit-mask: radial-gradient(circle, black 8%, transparent 55%);
          mask: radial-gradient(circle, black 8%, transparent 55%);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.has-open .intro-rays {
  animation: raysExpand 1.6s ease-out forwards;
}
@keyframes raysExpand {
  0%   { transform: translate(-50%,-50%) scale(0)    rotate(0); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(0.7)  rotate(140deg); opacity: 0; }
}

/* Full-screen flash */
.intro-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.85), transparent 50%);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.has-open .intro-flash {
  animation: flashPop 0.6s ease-out 0.05s forwards;
}
@keyframes flashPop {
  0%   { opacity: 0;   transform: scale(0.4); }
  35%  { opacity: 1; }
  100% { opacity: 0;   transform: scale(1.4); }
}

/* Sparks shooting outward */
.intro-sparks {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  z-index: 4;
  pointer-events: none;
}
.intro-spark {
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 5px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(255,255,255,0.9), 0 0 16px 4px var(--accent);
  opacity: 0;
}
.has-open .intro-spark {
  animation: sparkFly 1.0s cubic-bezier(.2,.7,.3,1) var(--delay) forwards;
}
@keyframes sparkFly {
  0%   { opacity: 0; transform: rotate(var(--ang)) translateY(0)                          scale(0.5); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--ang)) translateY(calc(var(--dist) * -1))     scale(0.2); }
}

/* ===== Real-product cards bursting ===== */
.intro-prizes-img {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  z-index: 5;
  pointer-events: none;
}
.intro-prize-card {
  position: absolute;
  top: 0; left: 0;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  background: linear-gradient(180deg, #ffffff 0%, #E8F1FB 100%);
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,0.7);
  box-shadow:
    0 12px 22px rgba(0,0,0,0.55),
    0 0 18px rgba(24,176,236,0.45),
    inset 0 1px 0 rgba(255,255,255,0.95);
  display: grid;
  place-items: center;
  padding: 6px;
  opacity: 0;
  transform: scale(0);
  overflow: hidden;
}
.intro-prize-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.has-open .intro-prize-card {
  animation: prizeImgBurst 1.5s cubic-bezier(.34,1.56,.64,1) var(--delay) forwards;
}
@keyframes prizeImgBurst {
  0%   { opacity: 0; transform: translate(0, 20px)                                            scale(0)                           rotate(0); }
  18%  { opacity: 1; transform: translate(calc(var(--tx) * 0.25), calc(var(--ty) * 0.25))     scale(calc(var(--sc) * 1.25))      rotate(calc(var(--rot) * 0.25)); }
  100% { opacity: 1; transform: translate(var(--tx), var(--ty))                               scale(var(--sc))                   rotate(var(--rot)); }
}
.has-text .intro-prize-card {
  opacity: 0.75;
  transform: translate(var(--tx), var(--ty)) scale(var(--sc)) rotate(var(--rot));
  transition: opacity 0.5s ease;
}

/* Message at the end */
.intro-message {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  padding: 0 16px;
}
.intro-message p {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 30px rgba(0,0,0,0.5);
}
.intro-message .hl {
  background: linear-gradient(120deg, var(--accent), #71E1FF 60%, #FFFFFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.has-text .intro-message {
  animation: msgIn 0.65s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes msgIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Carousel entrance */
.hero-carousel {
  animation: carouselIn 0.6s ease-out;
}
@keyframes carouselIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ Live ticker (top-right) ============ */
.ticker-wrap {
  position: fixed;
  right: 12px;
  top: 70px; /* sits just below the sticky .topbar */
  z-index: 40;
  pointer-events: none;
  max-width: calc(100vw - 24px);
}
.ticker {
  pointer-events: auto;
  max-width: 240px;
  min-width: 200px;
  background: linear-gradient(180deg, rgba(20,32,57,0.96), rgba(15,27,48,0.96));
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 10px 12px 10px 10px;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  box-shadow:
    0 18px 36px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04);
  animation: tickerSlide 0.5s cubic-bezier(.34,1.56,.64,1);
}
.ticker.ticker-rare {
  border-color: rgba(255,185,56,0.4);
  background: linear-gradient(180deg, rgba(48,34,16,0.96), rgba(28,22,14,0.96));
  box-shadow:
    0 18px 36px rgba(0,0,0,0.6),
    0 0 24px rgba(255,185,56,0.22),
    0 0 0 1px rgba(255,185,56,0.35);
}
@keyframes tickerSlide {
  /* Slides in from above (matches the new top-right anchor) */
  0%   { opacity: 0; transform: translateY(-20px) translateX(20px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(3px)   translateX(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0)     translateX(0)    scale(1); }
}
.ticker-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.ticker-win .ticker-icon {
  background: rgba(184,92,255,0.14);
}
.ticker.ticker-rare .ticker-icon {
  background: rgba(255,185,56,0.18);
  color: var(--gold);
}
.ticker-emoji { font-size: 16px; line-height: 1; }
.rare-dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  border: 1.5px solid var(--bg-1);
  animation: dotPulse 1.2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,185,56,0.7); }
  60%     { box-shadow: 0 0 0 6px rgba(255,185,56,0); }
}
.ticker-body { min-width: 0; }
.ticker-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticker-title strong { font-weight: 700; }
.ticker-event { color: var(--accent); }
.ticker.ticker-rare .ticker-event { color: var(--gold); }
.ticker-item { color: var(--accent); font-weight: 600; }
.ticker.ticker-rare .ticker-item { color: var(--gold); }
.ticker-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "JetBrains Mono", monospace;
}

/* ============ Conversion popup (bottom sheet) ============ */
.popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5,9,19,0.78);
  backdrop-filter: blur(8px);
  z-index: 999;
  animation: backdropIn 0.32s ease-out;
}
@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.popup-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 460px;
  background:
    radial-gradient(circle at 50% 0%, rgba(24,176,236,0.20), transparent 60%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--bg-1) 100%);
  border-top: 1px solid var(--border-2);
  border-radius: 24px 24px 0 0;
  padding: 18px 24px 32px;
  text-align: center;
  z-index: 1000;
  box-shadow:
    0 -22px 60px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.08);
  animation: popupIn 0.55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popupIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(100%); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.popup-handle {
  width: 42px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  margin: 0 auto 16px;
}
.popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  display: grid;
  place-items: center;
  z-index: 2;
}
.popup-close:active { transform: scale(0.92); }
.popup-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  position: relative;
  display: grid;
  place-items: center;
  animation: popupIconBob 3s ease-in-out infinite;
}
.popup-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(24,176,236,0.65));
}
.popup-icon-shine {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(24,176,236,0.25), transparent 65%);
  z-index: -1;
  animation: popupShine 2.5s ease-in-out infinite;
}
@keyframes popupShine {
  0%,100% { opacity: 0.6; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.1); }
}
@keyframes popupIconBob {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-6px) rotate(4deg); }
}
.popup-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  border: 1px solid rgba(24,176,236,0.3);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.popup-eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(24,176,236,0.25);
  animation: pulse 1.6s ease-in-out infinite;
}
.popup-sheet h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  line-height: 1.02;
}
.popup-sheet h3 .hl {
  background: linear-gradient(120deg, var(--accent), #71E1FF 60%, #FFFFFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.popup-sheet p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.5;
}
.popup-cta {
  width: 100%;
  background: linear-gradient(180deg, #2DC5FF, var(--accent));
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  font-weight: 800;
  font-size: 15px;
  padding: 15px 18px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow:
    0 14px 28px -8px rgba(24,176,236,0.65),
    inset 0 1px 0 rgba(255,255,255,0.4);
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.popup-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.32) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: btnShine 3s ease-in-out infinite;
}
.popup-cta:active { transform: scale(0.985); }
.popup-foot {
  font-size: 11px;
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sparkle {
  position: absolute;
  width: 4px; height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255,255,255,0.8), 0 0 14px 3px rgba(24,176,236,0.6);
  animation: sparkle 2s ease-in-out infinite;
}
@keyframes sparkle {
  0%,100% { transform: scale(0.4); opacity: 0.2; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* Hero meta strip */
.hero-meta {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.hero-meta::-webkit-scrollbar { display: none; }

.meta-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.meta-chip .ico { color: var(--accent); display: grid; place-items: center; }
.meta-chip .label { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; display: block; }
.meta-chip .value { font-size: 13px; font-weight: 700; line-height: 1.1; }

/* ============ Primary CTA inline ============ */
.hero-cta {
  margin: 0 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn-cta {
  position: relative;
  background: linear-gradient(180deg, #2DC5FF, var(--cta));
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  font-weight: 800;
  font-size: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow:
    0 14px 28px -10px rgba(24,176,236,0.7),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.08);
  overflow: hidden;
  letter-spacing: -0.005em;
}
.btn-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: btnShine 3s ease-in-out infinite;
}
@keyframes btnShine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

.btn-cta:active { transform: scale(0.985); }
.btn-cta .price {
  background: rgba(0,0,0,0.25);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 14px;
  margin-left: 4px;
}

.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  padding: 13px 18px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-secondary:active { transform: scale(0.985); }

/* ============ Drop rate strip ============ */
.droprates {
  margin: 0 16px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.droprates-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.droprates-head .audit {
  color: var(--success);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: none;
  font-size: 11px;
  letter-spacing: 0;
}
.droprate-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
}
.droprate-row + .droprate-row { border-top: 1px dashed rgba(31,46,77,0.6); }
.droprate-row .dot {
  width: 8px; height: 8px;
  border-radius: 2px;
}
.droprate-row .pct {
  font-family: "JetBrains Mono";
  font-weight: 600;
  font-size: 12px;
}

/* ============ Section ============ */
.section {
  padding: 24px 16px 8px;
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.section-title {
  font-family: "Bricolage Grotesque";
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1;
}
.section-kicker {
  font-family: "JetBrains Mono";
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 4px;
}
.section-link {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ============ Live drops feed ============ */
.live-strip {
  margin: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  overflow: hidden;
  position: relative;
}
.live-strip .live-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cta);
  margin-bottom: 8px;
}
.live-strip .live-head .pulse {
  width: 8px; height: 8px;
  background: var(--cta);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,122,26,0.5);
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(255,122,26,0.6); }
  100% { box-shadow: 0 0 0 10px rgba(255,122,26,0); }
}

.drop-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  animation: dropIn 0.4s ease-out;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.drop-row + .drop-row { border-top: 1px solid rgba(31,46,77,0.5); }
.drop-row .av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #6347F2);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.drop-row .info {
  min-width: 0;
}
.drop-row .who {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drop-row .got {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drop-row .got .prize { color: var(--accent); font-weight: 600; }
.drop-row .got .prize.rare    { color: var(--r-rare); }
.drop-row .got .prize.epic    { color: var(--r-epic); }
.drop-row .got .prize.legendary { color: var(--r-legendary); }
.drop-row .got .prize.mythic  { color: var(--r-mythic); }
.drop-row .when {
  font-family: "JetBrains Mono";
  font-size: 11px;
  color: var(--dim);
}

/* ============ Featured box (limited) ============ */
.featured {
  margin: 0 16px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,122,26,0.18), transparent 60%),
    linear-gradient(160deg, #2A1A0A, #0F1B30);
  border: 1px solid rgba(255,122,26,0.3);
  border-radius: 18px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.featured-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: linear-gradient(135deg, #FFD66E, #FFA31A);
  color: #2A1500;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.featured-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
}
.featured-img {
  aspect-ratio: 1/1;
  background:
    radial-gradient(circle, rgba(255,122,26,0.3), transparent 65%);
  display: grid;
  place-items: center;
  border-radius: 12px;
}
.featured-img img {
  width: 100%;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,0.6));
  animation: heroBob 4s ease-in-out infinite;
}
.featured h3 {
  font-family: "Bricolage Grotesque";
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.featured-sub {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 10px;
}
.countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono";
  font-size: 13px;
  color: var(--cta);
  margin-bottom: 12px;
  font-weight: 600;
}
.featured-cta {
  background: var(--cta);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.featured-progress {
  margin-top: 10px;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.featured-progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--cta), #FFB938);
  width: 73%;
}
.featured-progress-label {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--muted);
  font-family: "JetBrains Mono";
}

/* ============ Box grid (2 col) ============ */
.box-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 16px;
}
.box-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 12px 14px;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.box-card:active { transform: scale(0.985); }
.box-card[data-rarity="rare"]      { border-top: 2px solid var(--r-rare); }
.box-card[data-rarity="epic"]      { border-top: 2px solid var(--r-epic); }
.box-card[data-rarity="legendary"] { border-top: 2px solid var(--r-legendary); }
.box-card[data-rarity="mythic"]    { border-top: 2px solid var(--r-mythic); }
.box-card[data-rarity="common"]    { border-top: 2px solid var(--r-common); }

.box-card-glow {
  position: absolute;
  inset: 25% 0% auto 0%;
  height: 60%;
  background: radial-gradient(ellipse at center, var(--card-tint, rgba(24,176,236,0.18)), transparent 70%);
  filter: blur(16px);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}
.box-img {
  position: relative;
  z-index: 1;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
}
.box-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.5));
  transition: transform 0.3s;
}
.box-card:active .box-img img { transform: scale(0.96) rotate(-3deg); }

.rarity-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 2;
}
.rarity-tag[data-r="common"]    { color: var(--r-common); border: 1px solid var(--r-common); }
.rarity-tag[data-r="rare"]      { color: var(--r-rare); border: 1px solid var(--r-rare); }
.rarity-tag[data-r="epic"]      { color: var(--r-epic); border: 1px solid var(--r-epic); }
.rarity-tag[data-r="legendary"] { color: var(--r-legendary); border: 1px solid var(--r-legendary); box-shadow: 0 0 12px rgba(255,140,45,0.4); }
.rarity-tag[data-r="mythic"]    { color: var(--r-mythic); border: 1px solid var(--r-mythic); box-shadow: 0 0 12px rgba(255,59,108,0.4); }

.box-name {
  position: relative;
  z-index: 1;
  font-family: "Bricolage Grotesque";
  font-weight: 700;
  font-size: 14px;
  margin: 4px 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.box-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.box-price {
  font-family: "Bricolage Grotesque";
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.box-price .cur { font-size: 11px; color: var(--muted); margin-right: 2px; font-weight: 600; }
.box-openers {
  font-size: 10px;
  color: var(--muted);
  font-family: "JetBrains Mono";
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ============ Missions ============ */
.missions {
  margin: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mission {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 12px;
  position: relative;
}
.mission.completed {
  border-color: rgba(22,199,132,0.4);
  background: linear-gradient(180deg, rgba(22,199,132,0.06), var(--surface));
}
.mission-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.mission.completed .mission-icon {
  background: rgba(22,199,132,0.15);
  color: var(--success);
}
.mission-title {
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 4px;
  line-height: 1.2;
}
.mission-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
}
.mission-progress-bar > div {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
}
.mission.completed .mission-progress-bar > div { background: var(--success); }
.mission-meta {
  font-size: 10px;
  color: var(--muted);
  font-family: "JetBrains Mono";
  margin-top: 3px;
}
.mission-reward {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.mission-xp {
  background: rgba(24,176,236,0.12);
  border: 1px solid rgba(24,176,236,0.3);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.mission.completed .mission-xp {
  background: rgba(22,199,132,0.12);
  border-color: rgba(22,199,132,0.4);
  color: var(--success);
}

/* ============ Leaderboard ============ */
.leaderboard {
  margin: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px 0;
}
.lb-row {
  display: grid;
  grid-template-columns: 30px 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}
.lb-row + .lb-row { border-top: 1px solid rgba(31,46,77,0.5); }
.lb-rank {
  font-family: "Bricolage Grotesque";
  font-weight: 800;
  font-size: 16px;
  color: var(--dim);
  text-align: center;
}
.lb-row[data-rank="1"] .lb-rank { color: var(--gold); }
.lb-row[data-rank="2"] .lb-rank { color: #B8C7D9; }
.lb-row[data-rank="3"] .lb-rank { color: #C9763E; }
.lb-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #6347F2);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  border: 2px solid var(--bg-1);
}
.lb-row[data-rank="1"] .lb-av { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,185,56,0.4); }
.lb-info { min-width: 0; }
.lb-name {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-prize {
  font-size: 11px;
  color: var(--muted);
}
.lb-amount {
  font-family: "JetBrains Mono";
  font-weight: 700;
  font-size: 13px;
  color: var(--success);
}

/* ============ How it works ============ */
.how {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 16px;
}
.how-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: center;
}
.how-step .num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-family: "Bricolage Grotesque";
  font-weight: 800;
  font-size: 17px;
  border: 1px solid rgba(24,176,236,0.3);
}
.how-step h4 {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 2px;
}
.how-step p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
  line-height: 1.45;
}

/* ============ Trust strip ============ */
.trust-strip {
  margin: 0 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.trust-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trust-item .ico {
  color: var(--accent);
  margin-bottom: 4px;
}
.trust-item .tt {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
}
.trust-item .tx {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

/* ============ FAQ ============ */
.faq {
  margin: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.faq-item.open { border-color: var(--accent); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  gap: 12px;
}
.faq-q .ico {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item.open .faq-q .ico { transform: rotate(45deg); }
.faq-a {
  padding: 0 16px 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

/* ============ Sticky bottom CTA ============ */
.dock {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent, rgba(5,9,19,0.95) 30%, rgba(5,9,19,1));
  padding: 16px 16px 28px;
  z-index: 40;
  display: flex;
  gap: 10px;
  align-items: center;
  pointer-events: none;
  margin-top: 24px;
}
.dock > * { pointer-events: auto; }
.dock-info {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted);
}
.dock-info .v {
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  font-family: "Bricolage Grotesque";
  letter-spacing: -0.01em;
}
.dock-cta {
  flex: 1;
  background: linear-gradient(180deg, var(--cta), var(--cta-2));
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 18px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 14px 28px -10px rgba(255,122,26,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  position: relative;
  overflow: hidden;
}
.dock-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: btnShine 3s ease-in-out infinite;
}

/* ============ Confetti hint ============ */
.confetti {
  position: absolute;
  width: 5px; height: 8px;
  pointer-events: none;
  animation: confettiFall 6s linear infinite;
}
@keyframes confettiFall {
  0% { transform: translateY(-10px) rotate(0); opacity: 1; }
  100% { transform: translateY(140px) rotate(360deg); opacity: 0; }
}

/* ============ Bottom nav (visual game-tab) ============ */
.bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: none; /* hidden — dock is the CTA */
}