/* ══════════════════════════════════════════════════════════════
   MASTER REFACTOR — Retro Game Client Polish (LoL-inspired HUD)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. FLOATING CONSOLE: 1200px panel hovering over blurred scene ── */
.screen {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 14px 18px;
  /* Gold filigree frame — forged-metal Hextech feel */
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #c89b3c 0%, #785a28 100%) 1;
  /* Outer shadow = console lift off background. Inset = carved tray interior */
  box-shadow:
    /* Massive vertical drop — panel floats miles above the blurred clouds */
    0 40px 100px rgba(0,0,0,.90),
    /* Lateral edge shadows push background away */
    -6px 0 50px rgba(0,0,0,.98),
     6px 0 50px rgba(0,0,0,.98),
     0   0 90px rgba(126,200,255,.04),
    /* Interior tray carve */
    inset 0 6px 28px rgba(0,0,0,.85),
    inset 4px  0 18px rgba(0,0,0,.55),
    inset -4px 0 18px rgba(0,0,0,.55),
    inset 0 -4px 14px rgba(0,0,0,.5);
}

/* ── 2. DEPTH & DIMENSIONALITY: inset tray shadows on panels ── */
.season-header {
  box-shadow:
    0 4px 20px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 5px 18px rgba(0,0,0,.6) !important;
}
.pack-option {
  min-height: 290px;
  justify-content: flex-start;
  padding: 0 0 16px !important;
  box-shadow:
    0 4px 0 #080e18,
    0 6px 18px rgba(0,0,0,.4),
    inset 0 5px 14px rgba(0,0,0,.5) !important;
}
.pack-option:hover {
  filter: brightness(1.2) drop-shadow(0 0 15px rgba(200,155,60,.4)) !important;
  box-shadow:
    0 8px 0 #080e18,
    0 12px 28px rgba(14,60,100,.5),
    inset 0 3px 10px rgba(0,0,0,.35) !important;
}
.pack-option.selected {
  box-shadow:
    0 4px 0 var(--gold-dark),
    0 6px 20px rgba(255,209,102,.2),
    inset 0 5px 14px rgba(0,0,0,.5) !important;
}
.dex-card {
  box-shadow: inset 0 4px 12px rgba(0,0,0,.6) !important;
}
.modal {
  box-shadow:
    0 0 0 1px var(--border),
    0 20px 60px rgba(0,0,0,.8),
    inset 0 2px 0 rgba(255,255,255,.04),
    inset 0 -5px 18px rgba(0,0,0,.55) !important;
}
.battle-scoreboard  { box-shadow: inset 0 3px 10px rgba(0,0,0,.6) !important; }
.battle-played-card { box-shadow: inset 0 3px 10px rgba(0,0,0,.55) !important; }
.battle-played-card.winner {
  box-shadow: 0 0 12px rgba(255,209,102,.4), inset 0 3px 10px rgba(0,0,0,.4) !important;
}

/* ── 3. HUD NAVIGATION: full-width frosted glass frame ── */
.header {
  background: rgba(8,14,26,.68) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow:
    0 4px 28px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,209,102,.1),
    inset 0 -1px 0 rgba(255,209,102,.04) !important;
}
.nav {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ── 4. TACTILE FEEDBACK: hover scale + physical press-down ── */
/* Gold / primary buttons scale up on hover */
.btn-gold:hover {
  filter: brightness(1.12);
  transform: scale(1.03) translateY(-1px);
}
.btn-blue:hover  { filter: brightness(1.1); transform: scale(1.02) translateY(-1px); }
.btn-green:hover { filter: brightness(1.1); transform: scale(1.02) translateY(-1px); }

/* Pack cards press 2px, border collapses, inner shadow deepens */
.pack-option:active {
  transform: translateY(2px) !important;
  border-width: 1px !important;
  box-shadow:
    0 2px 0 #080e18,
    0 3px 8px rgba(0,0,0,.5),
    inset 0 6px 16px rgba(0,0,0,.7) !important;
}
.nav-btn:active     { transform: translateY(1px); background: rgba(255,209,102,.03) !important; }
.season-tab:active  { transform: translateY(1px); box-shadow: none !important; }
.filter-chip:active { transform: translateY(1px); }
.play-card:active   { transform: translateY(1px) !important; box-shadow: none !important; }
.battle-tier:active { transform: translateY(1px) !important; box-shadow: none !important; }
.dex-card:active:not(.unowned) { transform: translateY(1px) scale(1.01) !important; }

/* ── 5. VERTICALITY: portrait pack image height ── */
.pack-option-icon { padding: 20px 0 14px !important; }
.pack-option-icon img { height: 96px !important; }
.pack-option-price { font-size: 13px !important; }

/* ── 6. GRID LOGIC: auto-fit collapses empty tracks, center aligns items ── */
.pack-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  justify-content: center !important;
  gap: 14px !important;
}
.dex-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  justify-content: center !important;
}

/* ── 7. RARITY TIER SYSTEM: pack-option tiers injected by shop.js ── */

/* — PREMIUM tier (blue/lavender border, soft pulsing ambient) — */
@keyframes packPremiumGlow {
  0%,100% { box-shadow: 0 4px 0 #080e18, 0  8px 16px rgba(168,200,255,.12), inset 0 5px 14px rgba(0,0,0,.5); }
     50%   { box-shadow: 0 4px 0 #080e18, 0 16px 28px rgba(168,200,255,.35), inset 0 5px 14px rgba(0,0,0,.5); }
}
.pack-option.pack-tier-premium {
  border-color: var(--lavender) !important;
  animation: packPremiumGlow 3s ease-in-out infinite !important;
}

/* — EPIC tier (purple border, violet corona) — */
@keyframes packEpicGlow {
  0%,100% { box-shadow: 0 4px 0 #080e18, 0  8px 18px rgba(124,58,237,.18), inset 0 5px 14px rgba(0,0,0,.5); }
     50%   { box-shadow: 0 4px 0 #080e18, 0 18px 36px rgba(124,58,237,.52), inset 0 5px 14px rgba(0,0,0,.5); }
}
.pack-option.pack-tier-epic {
  border-color: #8b5cf6 !important;
  background: linear-gradient(160deg,#0d0414 0%,#1a0828 50%,#0d0414 100%) !important;
  animation: packEpicGlow 2.5s ease-in-out infinite !important;
}

/* — LEGENDARY tier (gold border + animated shimmer streak + pulsing corona) — */
@keyframes packLegendaryGlow {
  0%,100% {
    border-color: var(--gold-dark);
    box-shadow: 0 4px 0 #080e18, 0 12px 24px rgba(255,209,102,.22), inset 0 5px 14px rgba(0,0,0,.5);
  }
  50% {
    border-color: var(--gold);
    box-shadow: 0 4px 0 #080e18, 0 20px 48px rgba(255,209,102,.6), 0 0 80px rgba(255,209,102,.1), inset 0 5px 14px rgba(0,0,0,.5);
  }
}
@keyframes packLegendaryShimmer {
  0%   { left: -60px; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
.pack-option.pack-tier-legendary {
  border-color: var(--gold) !important;
  background: linear-gradient(160deg,#1a0c00 0%,#2e1600 50%,#1a0c00 100%) !important;
  animation: packLegendaryGlow 2s ease-in-out infinite !important;
}
/* Override the shine streak: make it gold-tinted and on a loop */
.pack-option.pack-tier-legendary::before {
  width: 50px !important;
  background: linear-gradient(105deg,transparent 20%,rgba(255,209,102,.22) 50%,transparent 80%) !important;
  animation: packLegendaryShimmer 2.4s ease-in-out infinite !important;
}

/* ── 8. TYPOGRAPHY: black-offset drop shadow on all key labels ── */
.sl                              { text-shadow: 2px 2px 0px #000 !important; }
.collection-title                { text-shadow: 2px 2px 0px #000 !important; }
.pack-option-name                { text-shadow: 2px 2px 0px #000 !important; }
.pack-option-price               { text-shadow: 0 0 10px rgba(255,209,102,.3), 2px 2px 0px #000 !important; }
.dex-name                        { text-shadow: 2px 2px 0px #000 !important; }
.lb-name                         { text-shadow: 2px 2px 0px #000 !important; }
.battle-end-title                { text-shadow: 3px 3px 0px #000 !important; }
.battle-tier-name                { text-shadow: 2px 2px 0px #000 !important; }
.play-hub-title                  { text-shadow: 0 0 16px rgba(196,168,255,.4), 2px 2px 0px #000 !important; }
.play-card-name                  { text-shadow: 2px 2px 0px #000 !important; }
.opening-title                   { text-shadow: 0 0 16px rgba(255,209,102,.5), 2px 2px 0px #000 !important; }
.season-title                    { text-shadow: 0 0 16px rgba(255,209,102,.4), 2px 2px 0px #000 !important; }
.daily-title                     { text-shadow: 2px 2px 0px #000 !important; }
.market-tab.active,
.grade-tab.active,
.social-tab.active               { text-shadow: 1px 1px 0px #000; }
.auth-sub                        { text-shadow: 1px 1px 0px #000; }

/* ── 9. HEXTECH NAV: active tab highlights from above, not below ── */
/* Kill the bottom-bar highlight the original rule sets */
.nav-btn.active {
  border-bottom-color: transparent !important;
  border-bottom: none !important;
  /* Top-light: a thin gold bar + inset glow radiating downward */
  border-top: 3px solid #c8aa6e !important;
  box-shadow: inset 0 10px 20px -10px rgba(200,170,110,.30) !important;
  /* Lit text: white with gold ambient glow */
  color: #fff !important;
  text-shadow: 0 0 10px var(--gold) !important;
}

/* ══════════════════════════════════════════════════════════════
   GAME CLIENT FINAL PASS — Page-Specific & Global Polish
   ══════════════════════════════════════════════════════════════ */

/* ── A. UNIVERSAL TACTILITY ── */
/* Smooth cubic-bezier on every interactive surface */
.btn, .nav-btn, .pack-option, .dex-card, .play-card,
.battle-tier, .season-tab, .filter-chip, .listing-card,
.sell-card-item, .ug-card, .gs-pkg-card, .gs-cosmetic-item,
.profile-avatar-option, .profile-title-option, .tbtn, .lb-row {
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Press-down scale for everything clickable */
.btn:active         { transform: scale(0.97) translateY(2px) !important; box-shadow: none !important; }
.play-card:active   { transform: scale(0.97) translateY(2px) !important; box-shadow: none !important; }
.battle-tier:active { transform: scale(0.97) translateY(2px) !important; box-shadow: none !important; }
.dex-card:active:not(.unowned)  { transform: scale(0.97) translateY(1px) !important; }
.season-tab:active  { transform: scale(0.97) translateY(1px) !important; box-shadow: none !important; }
.filter-chip:active { transform: scale(0.97) translateY(1px) !important; }

/* ── B. THE SHOP — Recessed Pack Slots & Epic/Legendary Shimmer ── */
/* Deeper recess on base pack */
.pack-option {
  background: linear-gradient(160deg,#0e1828 0%,#121e30 60%,#0e1828 100%) !important;
  box-shadow:
    0 4px 0 #04080e,
    0 6px 18px rgba(0,0,0,.5),
    inset 0 8px 20px rgba(0,0,0,.6),
    inset 0 -2px 6px rgba(0,0,0,.4) !important;
}

/* Shimmer streak — epic packs: slow-moving cool sweep */
@keyframes epicShimmer {
  0%   { left: -80px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 140%; opacity: 0; }
}
.pack-option.pack-tier-epic::before {
  width: 60px !important;
  background: linear-gradient(105deg,transparent 15%,rgba(139,92,246,.28) 50%,transparent 85%) !important;
  animation: epicShimmer 3.5s ease-in-out infinite !important;
}

/* ── C. THE CODEX — Specimen Slots (beveled dark pockets) ── */
.dex-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  justify-content: center !important;
  gap: 10px !important;
}
.dex-card {
  background: linear-gradient(180deg,#08101a 0%,#0c1520 100%) !important;
  border: 1px solid var(--border) !important;
  border-bottom: 2px solid rgba(0,0,0,.8) !important;
  box-shadow:
    inset 0 8px 24px rgba(0,0,0,.7),
    inset 0 -1px 0 rgba(255,255,255,.04),
    inset 2px 0 6px rgba(0,0,0,.4),
    inset -2px 0 6px rgba(0,0,0,.4) !important;
  padding: 14px 8px 10px !important;
}
.dex-card:hover:not(.unowned) {
  border-color: var(--border2) !important;
  box-shadow:
    inset 0 4px 14px rgba(0,0,0,.5),
    0 0 16px rgba(126,200,255,.12),
    0 6px 20px rgba(20,60,120,.5) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* ── D. THE PLAY MENU — Activity Tiles ── */
.play-card {
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  background: linear-gradient(160deg,rgba(14,20,36,.85) 0%,rgba(10,14,26,.92) 100%) !important;
  border: 2px solid var(--border) !important;
  padding: 24px 10px 18px !important;
  box-shadow: inset 0 6px 18px rgba(0,0,0,.55) !important;
}
.play-card:hover:not(.play-card-locked) {
  border-color: var(--lavender) !important;
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.4),
    0 0 20px rgba(168,200,255,.15),
    0 8px 24px rgba(20,60,120,.5) !important;
  transform: translateY(-3px) !important;
}
/* Larger activity icons */
.play-card-icon { font-size: 38px !important; }

/* ── E. SOCIAL — Player Plates & Leaderboard ── */
/* Base plate: subtle bevel */
.lb-row {
  background: linear-gradient(90deg,var(--panel) 0%,var(--panel2) 100%) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--border2) !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.4) !important;
  margin-bottom: 4px !important;
}
.lb-row:hover {
  filter: brightness(1.25) !important;
  border-left-color: var(--sky) !important;
}
/* User's own row: gold plate */
.lb-row.me {
  background: linear-gradient(90deg,rgba(255,209,102,.07) 0%,rgba(255,209,102,.03) 100%) !important;
  border-left: 3px solid var(--gold) !important;
  box-shadow:
    inset 0 0 24px rgba(255,209,102,.06),
    inset 0 2px 8px rgba(0,0,0,.4) !important;
}
.lb-row.me:hover { filter: brightness(1.15) !important; }

/* ── F. REWARDS TRAY ── */

.daily-section {
  background: linear-gradient(135deg,rgba(6,10,18,.95) 0%,rgba(8,12,20,.98) 100%) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--mint) !important;
  box-shadow:
    inset 0 8px 28px rgba(0,0,0,.7),
    inset 0 -2px 8px rgba(0,0,0,.5) !important;
  padding: 14px 16px !important;
}

/* ── G. GLOBAL GOLD GLOW — energy on every golden label ── */
.coin-val,
.listing-price,
.pack-option-price,
.battle-tier-reward,
.battle-played-value,
.battle-hand-value {
  text-shadow: 0 0 12px rgba(255,209,102,.55), 2px 2px 0px #000 !important;
}
/* All remaining pixel-font labels get the black offset */
.dex-type, .dex-rarity-label, .dex-number,
.card-name, .card-type-badge,
.battle-score-name, .battle-status, .battle-vs,
.battle-hand-name, .battle-played-name,
.listing-name, .listing-meta, .listing-seller,
.lb-score, .lb-rank,
.profile-preview-name, .profile-title-name,
.season-sub, .pack-odds-pct, .pack-odds-label,
.wz-spot-bubble, .wz-stamina-label, .wz-recent-title,
.mem-stat-val, .mem-hstat,
.battle-sub, .play-hub-sub, .play-card-desc {
  text-shadow: 2px 2px 0px #000 !important;
}

/* ═══════════════════════════════════════════════════════════
   PACK OPENING — HIGH-IMPACT REVEAL OVERHAUL
   ═══════════════════════════════════════════════════════════ */

/* — 1. Opening header: stacked & centred — */
.opening-header {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding-bottom: 4px !important;
}
.opening-title {
  font-size: 13px !important;
  letter-spacing: 1px;
  /* colour + glow are set inline by JS per-pack */
}

/* — 2. Card back: Hextech metallic premium sheen — */
.grid-card .card-back {
  border-color: #2a4878 !important;
  box-shadow: 2px 2px 0 #04080f, 0 4px 14px rgba(0,0,0,.75),
              inset 0 1px 0 rgba(80,140,255,.18), inset 0 -1px 0 rgba(0,0,60,.5) !important;
}
.grid-card .card-back::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(130deg, transparent 28%, rgba(80,160,255,.11) 50%, transparent 72%) !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  animation: hextechSheen 2.8s ease-in-out infinite !important;
}
@keyframes hextechSheen {
  0%,100% { opacity: 0.45; }
  50%     { opacity: 1; }
}

/* — 3. Rarity tease glow classes — */
.grid-card .card-back.rare-glow {
  border-color: #3060d8 !important;
  animation: rareGlowPulse 2.2s ease-in-out infinite !important;
}
@keyframes rareGlowPulse {
  0%,100% { box-shadow: 2px 2px 0 #04080f, 0 0 10px 2px rgba(48,96,216,.45), inset 0 0 8px rgba(48,96,216,.15); }
  50%     { box-shadow: 2px 2px 0 #04080f, 0 0 22px 6px rgba(48,96,216,.78), inset 0 0 14px rgba(48,96,216,.32); }
}

.grid-card .card-back.epic-glow {
  border-color: #9333ea !important;
  animation: epicGlowPulse 2s ease-in-out infinite !important;
}
@keyframes epicGlowPulse {
  0%,100% { box-shadow: 2px 2px 0 #04080f, 0 0 14px 3px rgba(147,51,234,.5), inset 0 0 10px rgba(147,51,234,.2); }
  50%     { box-shadow: 2px 2px 0 #04080f, 0 0 30px 9px rgba(147,51,234,.85), inset 0 0 18px rgba(147,51,234,.42); }
}

.grid-card .card-back.legendary-glow {
  animation: legendaryGlowPulse 1.7s ease-in-out infinite !important;
}
@keyframes legendaryGlowPulse {
  0%,100% {
    box-shadow: 2px 2px 0 #04080f, 0 0 16px 4px rgba(255,209,102,.55), inset 0 0 12px rgba(255,209,102,.2);
    border-color: var(--gold-dark) !important;
  }
  50% {
    box-shadow: 2px 2px 0 #04080f, 0 0 38px 11px rgba(255,209,102,.92), 0 0 64px 18px rgba(255,170,40,.28), inset 0 0 22px rgba(255,209,102,.45);
    border-color: var(--gold) !important;
  }
}

/* — 4. 3D tilt: preserve perspective context on grid cards — */
.grid-card { transform-style: preserve-3d !important; }

/* — 5. "Flip All" button — gold outline Hextech style — */
#reveal-all-btn {
  background: transparent !important;
  border: 2px solid var(--gold) !important;
  box-shadow: 0 0 10px rgba(255,209,102,.2), inset 0 0 8px rgba(255,209,102,.06) !important;
  color: var(--gold) !important;
  opacity: 1 !important;
}
#reveal-all-btn:hover {
  background: rgba(255,209,102,.1) !important;
  box-shadow: 0 0 18px rgba(255,209,102,.48), inset 0 0 12px rgba(255,209,102,.12) !important;
  filter: brightness(1.12) !important;
}

/* ═══════════════════════════════════════════════════════════
   AAA PACK-OPENING — PHASE 1 & 2 UPGRADES
   ═══════════════════════════════════════════════════════════ */

/* ── Unrevealed card hover: 1.1x scale + golden glow ── */
.grid-card:hover:not(.revealed) {
  transform: scale(1.1) !important;
  box-shadow: 0 0 15px goldenrod !important;
  z-index: 5 !important;
}
/* Flip All button: same treatment on hover */
#reveal-all-btn:hover {
  transform: scale(1.1) !important;
}

/* ── Rare+ card back: pulsing amber radial-gradient "breathing" ──
   Overrides the blue sheen ::before on rare/epic/legendary backs only */
.grid-card .card-back.rare-glow::before {
  background: radial-gradient(ellipse at 50% 55%, rgba(48,96,216,.5) 0%, transparent 68%) !important;
  animation: backBreath 2.6s ease-in-out infinite !important;
}
.grid-card .card-back.epic-glow::before {
  background: radial-gradient(ellipse at 50% 55%, rgba(147,51,234,.55) 0%, transparent 68%) !important;
  animation: backBreath 2.2s ease-in-out infinite !important;
}
.grid-card .card-back.legendary-glow::before {
  background: radial-gradient(ellipse at 50% 55%, rgba(180,110,10,.65) 0%, transparent 68%) !important;
  animation: backBreath 1.9s ease-in-out infinite !important;
}
@keyframes backBreath {
  0%, 100% { opacity: 0.22; transform: scale(0.85); }
  50%       { opacity: 1;    transform: scale(1.18); }
}

/* ── Auto-sold energy cards: fade to 0.6 opacity after flip ── */
.grid-card.energy-sold {
  opacity: 0.6 !important;
  transition: opacity .4s ease !important;
}

/* ── Rarity border glows on revealed cards ── */
.grid-card.revealed.hype-uncommon {
  box-shadow: 0 0 0 2px #4ade80, 0 0 14px 3px rgba(74,222,128,.55) !important;
  border-radius: 5px;
}
.grid-card.revealed.hype-rare {
  box-shadow: 0 0 0 2px #60a5fa, 0 0 18px 4px rgba(96,165,250,.65) !important;
  border-radius: 5px;
}
.grid-card.revealed.hype-epic {
  box-shadow: 0 0 0 3px #c084fc, 0 0 24px 6px rgba(192,132,252,.75) !important;
  border-radius: 5px;
}
.grid-card.revealed.hype-legendary {
  box-shadow: 0 0 0 3px var(--gold), 0 0 30px 8px rgba(255,209,102,.85) !important;
  border-radius: 5px;
}

/* ── Big Pull: card pops forward during the 1s freeze ── */
.grid-card.hype-pop {
  z-index: 30 !important;
  transform: scale(1.18) translateY(-10px) !important;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1) !important;
}

/* ── Card Focus state: 2x scale on clicked card, dim the rest ── */
.card-grid.has-focus .grid-card:not(.focused-card) {
  opacity: 0.3 !important;
  pointer-events: none !important;
  transition: opacity .22s ease !important;
}
.grid-card.focused-card {
  transform: scale(2.0) !important;
  z-index: 50 !important;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1) !important;
  pointer-events: auto !important;
}

/* ── Coin float: animated currency collected from energy cards ── */
.coin-float {
  position: fixed;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255,209,102,.9), 2px 2px 0 #000;
  pointer-events: none;
  z-index: 9000;
  transform: translateX(-50%);
  white-space: nowrap;
  animation: coinFloat 1.3s ease-out forwards;
}
@keyframes coinFloat {
  0%   { opacity: 1;    transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0;    transform: translateX(-50%) translateY(-130px); }
}

/* ── Post-reveal persistent glow on Legendary / Epic spots ── */
.grid-card.post-hype-legendary {
  animation: postLegendaryPulse 2s ease-in-out infinite !important;
  border-radius: 5px;
}
.grid-card.post-hype-epic {
  animation: postEpicPulse 2.5s ease-in-out infinite !important;
  border-radius: 5px;
}
@keyframes postLegendaryPulse {
  0%,100% { box-shadow: 0 0 0 3px var(--gold), 0 0 18px 4px rgba(255,209,102,.5); }
  50%     { box-shadow: 0 0 0 3px var(--gold), 0 0 38px 12px rgba(255,209,102,.9); }
}
@keyframes postEpicPulse {
  0%,100% { box-shadow: 0 0 0 3px #c084fc, 0 0 14px 3px rgba(192,132,252,.45); }
  50%     { box-shadow: 0 0 0 3px #c084fc, 0 0 30px 9px rgba(192,132,252,.8); }
}

/* ── Quick-sell chips in collection ── */
.qs-chip {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 5px 9px;
  border: 1px solid rgba(255,100,100,.35);
  background: rgba(255,60,60,.07);
  color: #f87171;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .12s;
  white-space: nowrap;
}
.qs-chip:hover {
  background: rgba(255,60,60,.18);
  border-color: rgba(255,100,100,.7);
  color: #fca5a5;
  transform: translateY(-1px);
}
.qs-chip:active { transform: translateY(1px); }
.qs-chip-all {
  border-color: rgba(255,160,60,.4);
  background: rgba(255,120,30,.08);
  color: var(--gold);
}
.qs-chip-all:hover {
  background: rgba(255,140,40,.2);
  border-color: rgba(255,180,80,.8);
  color: #fcd34d;
}

/* ══════════════════════════════════════════════════
   GRAND PACK OPENING ENHANCEMENTS
   ══════════════════════════════════════════════════ */

/* ── Pack rip intro ── */
#pack-intro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  perspective: 900px;
  perspective-origin: 50% 45%;
}

/* The sealed foil wrapper */
.pack-wrapper {
  position: relative;
  width: 240px;
  height: 360px;
  opacity: 0;
  transform: scale(0.3);
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
#pack-intro.pack-intro-active .pack-wrapper {
  opacity: 1;
  transform: scale(1);
}

/* Shared base for left/right halves */
.pack-half {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 2px solid var(--pack-border, rgba(180,210,255,.4));
  box-shadow: 0 0 24px var(--pack-glow, rgba(100,160,255,.2)),
              0 8px 32px rgba(0,0,0,.6);
  transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .35s ease .05s;
  overflow: hidden;
  border: none;
  box-shadow: none;
}

/* The pack image lives inside each half — clip-path on the half shows only its portion */
.pack-half-img {
  position: absolute;
  inset: 0;
}
.pack-half-img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  image-rendering: pixelated;
}

/* Foil sheen overlay on each half */
.pack-half::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255,255,255,.06) 45%,
    rgba(255,255,255,.14) 50%,
    rgba(255,255,255,.06) 55%,
    transparent 65%
  );
  background-size: 200% 100%;
  animation: packShimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes packShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Jagged tear — left half */
.pack-half-left {
  clip-path: polygon(
    0% 0%, 50% 0%,
    53% 6%, 47% 13%, 52% 19%, 48% 26%,
    53% 32%, 47% 39%, 52% 45%, 48% 52%,
    53% 58%, 47% 65%, 52% 71%, 48% 78%,
    53% 84%, 47% 91%, 50% 100%, 0% 100%
  );
}

/* Jagged tear — right half (mirrored) */
.pack-half-right {
  clip-path: polygon(
    50% 0%, 100% 0%, 100% 100%, 50% 100%,
    47% 91%, 53% 84%, 48% 78%, 52% 71%,
    47% 65%, 53% 58%, 48% 52%, 52% 45%,
    47% 39%, 53% 32%, 48% 26%, 52% 19%,
    47% 13%, 53% 6%
  );
}

/* Perforated tear line */
.pack-tear-line {
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.3) 0px,
    rgba(255,255,255,.3) 4px,
    transparent 4px,
    transparent 9px
  );
  z-index: 6;
  opacity: .5;
  transition: opacity .2s ease, box-shadow .2s ease, background .2s ease;
}

/* Tear line charges up during shake */
#pack-intro.pack-intro-shake .pack-tear-line {
  opacity: 1;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,230,100,.9) 0px,
    rgba(255,230,100,.9) 4px,
    transparent 4px,
    transparent 9px
  );
  box-shadow: 0 0 10px 3px rgba(255,210,80,.5);
}

/* Shake phase */
#pack-intro.pack-intro-shake .pack-wrapper {
  animation: packShake .55s ease-in-out;
}
@keyframes packShake {
  0%,100% { transform: scale(1) rotate(0deg); }
  15%     { transform: scale(1.03) rotate(-4deg); }
  30%     { transform: scale(1.04) rotate(4.5deg); }
  45%     { transform: scale(1.05) rotate(-5deg); }
  60%     { transform: scale(1.05) rotate(5deg); }
  75%     { transform: scale(1.03) rotate(-2.5deg); }
  90%     { transform: scale(1.01) rotate(1deg); }
}

/* RIP — halves peel away with 3D perspective rotation */
#pack-intro.pack-intro-rip .pack-half-left {
  transform: translateX(-220px) rotateY(-65deg) translateZ(20px);
  opacity: 0;
}
#pack-intro.pack-intro-rip .pack-half-right {
  transform: translateX(220px) rotateY(65deg) translateZ(20px);
  opacity: 0;
}
#pack-intro.pack-intro-rip .pack-tear-line {
  opacity: 0;
}

/* Energy burst — expands and fades like a shockwave */
.pack-rip-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255,255,220,1)   0%,
    rgba(255,230,120,.85) 18%,
    rgba(255,200,60,.45)  38%,
    rgba(255,160,20,.1)   60%,
    transparent           72%
  );
  filter: blur(8px);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}
#pack-intro.pack-intro-rip .pack-rip-burst {
  animation: ripBurst .75s cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes ripBurst {
  0%   { width: 10px;  height: 10px;  opacity: 0; }
  15%  { width: 120px; height: 160px; opacity: 1; }
  45%  { width: 200px; height: 270px; opacity: .9; }
  100% { width: 240px; height: 320px; opacity: 0; }
}

/* Foil shreds that fly out of the tear */
.pack-rip-spark {
  position: absolute;
  border-radius: 1px;
  background: var(--spark-color, #ffd166);
  z-index: 7;
  pointer-events: none;
  opacity: 0;
}
#pack-intro.pack-intro-rip .pack-rip-spark {
  animation: shredFly var(--dur, .65s) cubic-bezier(.2,.8,.4,1) forwards;
}
@keyframes shredFly {
  0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sx),var(--sy)) rotate(var(--rot)) scale(.2); }
}

/* ── Card particle burst on rare+ flips ── */
.card-particle {
  position: fixed;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9001;
  transform: translate(-50%, -50%);
  animation: cardParticleFly .7s ease-out forwards;
}
@keyframes cardParticleFly {
  0%   { opacity: 1; transform: translate(-50%,-50%) translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(0.15); }
}

/* ── "NEW!" badge on first-time pulls ── */
.new-card-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 5px;
  padding: 3px 5px;
  border-radius: 4px;
  z-index: 20;
  box-shadow: 0 0 10px rgba(245,158,11,.85), 0 2px 4px rgba(0,0,0,.6);
  animation: newBadgePulse 1s ease-in-out infinite;
  white-space: nowrap;
  letter-spacing: .5px;
}
@keyframes newBadgePulse {
  0%,100% { transform: scale(1);    box-shadow: 0 0 8px rgba(245,158,11,.8), 0 2px 4px rgba(0,0,0,.6); }
  50%     { transform: scale(1.12); box-shadow: 0 0 18px rgba(245,158,11,1), 0 2px 4px rgba(0,0,0,.6); }
}

/* ── Pack summary screen ── */
#pack-summary {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  opacity: 0;
  transform: scale(0.92) translateY(14px);
  transition: opacity .32s ease, transform .38s cubic-bezier(.34,1.56,.64,1);
  overflow-y: auto;
  z-index: 15;
}
#pack-summary.pack-summary-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.pack-summary-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(255,209,102,.7), 2px 2px 0 #000;
  margin-bottom: 18px;
  text-align: center;
}
.summary-new-banner {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  padding: 8px 16px;
  border-radius: 6px;
  margin-bottom: 10px;
  text-align: center;
  box-shadow: 0 0 18px rgba(245,158,11,.55);
}
.summary-energy-banner {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--mint);
  margin-bottom: 10px;
  text-align: center;
}
.summary-rarity-grid {
  width: 100%;
  max-width: 220px;
  margin-bottom: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
}
.summary-rarity-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--text);
}
.summary-rarity-row:last-child { border-bottom: none; }

/* ── Inline summary (preview panel after all cards flipped) ── */
.inline-summary {
  font-family: 'Press Start 2P', monospace;
  text-align: center;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
  animation: summaryFadeIn .35s ease forwards;
}
@keyframes summaryFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.isumm-pips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 7px;
}
.isumm-pip {
  font-size: 7px;
  background: rgba(255,255,255,.06);
  padding: 3px 6px;
  border-radius: 4px;
}
.isumm-extras {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.isumm-extra { font-size: 7px; }
.isumm-sep { font-size: 9px; color: var(--border); margin: 0 2px; }

/* ── Larger monster icon area: 20%+ bigger inside each card ── */
.card-img-area {
  width: 88% !important;
  aspect-ratio: 1 !important;
}
.card-img-area img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
}
/* Grid-card specific: allow the bigger img area to breathe */
.grid-card .card .card-img-area {
  width: 86% !important;
}

/* ══════════════════════════════════════════════════════════════
   UI AUDIT FIXES — Mobile, Polish, Accessibility
   ══════════════════════════════════════════════════════════════ */

/* ── Mobile: Codex 2-column grid on small screens ── */
@media (max-width: 440px) {
  .dex-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Shop: 1-column pack grid on very small screens */
  .pack-grid {
    grid-template-columns: 1fr !important;
  }
  /* Nav: shrink text to prevent clipping */
  .nav-btn {
    font-size: 6px !important;
    padding: 6px 1px 5px !important;
  }
}

/* ── Lock icon overlay on unowned Codex cards ── */
.dex-card.unowned {
  position: relative;
}
.dex-card.unowned::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: url('../art/ui/icons/lock.png') center/contain no-repeat;
  image-rendering: pixelated;
  opacity: 0.35;
  pointer-events: none;
  z-index: 2;
}

/* ── CSS hover class for owned-cards-grid items (replaces inline onmouseover) ── */
.card-hover-scale {
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover-scale:hover {
  transform: scale(1.05);
}

/* ── Improved empty state base style ── */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text2);
}
.empty-state .empty-icon {
  font-size: 44px;
  margin-bottom: 14px;
}
.empty-state .empty-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.8;
}
.empty-state .empty-sub {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--text2);
  line-height: 2;
  margin-bottom: 16px;
}

/* ── Minimum font-size: bump 5px labels to 7px for readability ── */
.grid-card .card .card-name { font-size: 6px !important; }
.grid-card .card .card-type-badge { font-size: 5px !important; }
.grid-card .card .foil-badge { font-size: 5px !important; }
.pack-odds-pct { font-size: 9px !important; }
.pack-odds-label { font-size: 7px !important; }

/* ── Select-a-pack prompt: styled hint, not a disabled button ── */
.select-pack-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--text2);
  border: 2px dashed var(--border2);
  padding: 14px 28px;
  min-width: 200px;
  margin: 0 auto;
  letter-spacing: 1px;
  animation: hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { border-color: var(--border2); color: var(--text2); }
  50% { border-color: var(--lavender); color: var(--lavender); }
}

/* ── GRADE 10 GLOW ── */
.grade-10{animation:grade10pulse 2.2s ease-in-out infinite;position:relative;}
.grade-10::after{content:'';position:absolute;top:4px;right:4px;width:10px;height:10px;background:url('../art/ui/icons/foil.png') center/contain no-repeat;image-rendering:pixelated;filter:drop-shadow(0 0 8px var(--gold));animation:grade10star 2.2s ease-in-out infinite;pointer-events:none;}
@keyframes grade10pulse{
  0%,100%{box-shadow:0 0 10px 2px rgba(255,209,102,.45),0 0 20px 4px rgba(255,209,102,.2);}
  50%{box-shadow:0 0 18px 5px rgba(255,209,102,.7),0 0 36px 10px rgba(255,209,102,.3);}
}
@keyframes grade10star{
  0%,100%{opacity:.7;transform:scale(1);}
  50%{opacity:1;transform:scale(1.25);}
}

/* ── CARD OF THE DAY ── */
.cotd-wrap{background:linear-gradient(135deg,rgba(255,209,102,.1),rgba(255,209,102,.04));border:2px solid rgba(255,209,102,.35);padding:10px 12px;margin-bottom:10px;}
.cotd-label{font-size:7px;color:var(--gold);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;font-weight:900;}
.cotd-body{display:flex;align-items:center;gap:10px;}
.cotd-icon{font-size:32px;line-height:1;}
/* CoTD listing highlight */
.listing-cotd{border:2px solid rgba(255,209,102,.5)!important;background:linear-gradient(135deg,rgba(255,209,102,.07),rgba(255,209,102,.02))!important;}
.listing-cotd-badge{font-size:7px;color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;padding:3px 6px;background:rgba(255,209,102,.12);border-radius:3px;display:inline-block;}

/* ── DAILY QUESTS ── */
#quest-panel{padding:2px 0;}

/* ── SHOP SUB-TABS ── */
.shop-sub-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:2px solid var(--border);padding-bottom:8px;}
.shop-sub-tab{flex:1;font-family:'Press Start 2P',monospace;font-size:10px;padding:10px 12px;background:transparent;border:2px solid var(--border);border-bottom:3px solid var(--border);color:var(--text2);cursor:pointer;transition:all .12s;text-align:center;position:relative;}
.shop-sub-tab.active{border-color:var(--gold);border-bottom-color:var(--gold-dark);color:var(--gold);background:rgba(255,209,102,.06);box-shadow:0 3px 0 var(--gold-dark);}
.shop-sub-tab:hover:not(.active){border-color:var(--sky);color:var(--sky);}
.sealed-badge{display:inline-block;font-family:'Press Start 2P',monospace;font-size:7px;background:var(--gold);color:#000;padding:2px 5px;border-radius:8px;margin-left:6px;vertical-align:middle;min-width:16px;text-align:center;font-weight:900;}

/* ── BUY QUANTITY ROW ── */
.buy-qty-row{display:flex;gap:8px;justify-content:center;}
.buy-qty-btn{white-space:nowrap;}

/* ── SEALED PACK INVENTORY ── */
.sealed-pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.sealed-pack-card{background:linear-gradient(160deg,#162438 0%,#1c2e4a 100%);border:2px solid var(--border2);padding:16px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;overflow:hidden;box-shadow:0 4px 0 #080e18,0 6px 18px rgba(0,0,0,.4);}
.sealed-pack-card.pack-tier-legendary{border-color:var(--gold) !important;box-shadow:0 4px 0 #6b4f00,0 0 30px rgba(245,158,11,.18);}
.sealed-pack-card.pack-tier-epic{border-color:#7c3aed !important;box-shadow:0 4px 0 #3b1a6e,0 0 24px rgba(192,132,252,.12);}
.sealed-pack-card.pack-tier-premium{border-color:#2563eb !important;box-shadow:0 4px 0 #0f2a6b,0 0 20px rgba(96,165,250,.1);}
.sealed-pack-icon{font-size:48px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));}
.sealed-pack-icon img{height:96px;width:auto;image-rendering:pixelated;}
.sealed-pack-name{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--text);line-height:1.6;}
.sealed-pack-season{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--text2);}
.sealed-pack-count{font-family:'Press Start 2P',monospace;font-size:14px;color:var(--gold);font-weight:900;text-shadow:0 0 10px rgba(255,209,102,.3);}
.sealed-pack-actions{display:flex;gap:6px;width:100%;margin-top:4px;}
.sealed-pack-actions .btn{flex:1;}

/* ── PACK MARKET LISTING ── */
.listing-pack{border-color:rgba(255,209,102,.25) !important;background:linear-gradient(135deg,rgba(255,209,102,.04),transparent) !important;}

/* ══════════════════════════════════════
   POWER PACK SYSTEM
   ══════════════════════════════════════ */

/* ── Tier Selection Grid ── */
.pp-tier-grid{display:grid;grid-template-columns:1fr;gap:14px;max-width:400px;margin:0 auto;}
.pp-tier-card{background:linear-gradient(160deg,#162438 0%,#1c2e4a 100%);border:2px solid var(--border2);padding:18px 14px;text-align:center;position:relative;overflow:hidden;box-shadow:0 4px 0 #080e18,0 6px 18px rgba(0,0,0,.4);transition:transform .15s,box-shadow .15s;}
.pp-tier-card:hover{transform:translateY(-2px);box-shadow:0 6px 0 #080e18,0 8px 24px rgba(0,0,0,.5),0 0 20px var(--pp-glow);}
.pp-odds-grid{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0;}
.pp-odds-cell{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:36px;}

/* ── Scroll Overlay ── */
.pp-overlay{position:fixed;inset:0;z-index:1500;background:#020410;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow-y:auto;padding:20px 12px;}
.pp-scroll-title{font-family:'Press Start 2P',monospace;font-size:16px;text-align:center;margin-bottom:4px;}
.pp-scroll-sub{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--text2);text-align:center;transition:color .3s,opacity .4s;}

/* ── Scroll Container ── */
.pp-scroll-container{position:relative;width:100%;max-width:500px;height:80px;overflow:hidden;border:2px solid var(--gold2);background:rgba(0,0,0,.5);box-shadow:0 0 30px rgba(255,209,102,.1) inset;}
.pp-scroll-container::before,.pp-scroll-container::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:10;pointer-events:none;}
.pp-scroll-container::before{left:0;background:linear-gradient(90deg,rgba(2,4,10,.95),transparent);}
.pp-scroll-container::after{right:0;background:linear-gradient(-90deg,rgba(2,4,10,.95),transparent);}

/* Center pointer arrow */
.pp-scroll-pointer{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--gold);z-index:20;filter:drop-shadow(0 2px 4px rgba(255,209,102,.5));}
.pp-scroll-pointer-bottom{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid var(--gold);z-index:20;filter:drop-shadow(0 -2px 4px rgba(255,209,102,.5));}
/* Vertical center line */
.pp-scroll-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold);z-index:15;opacity:.5;transform:translateX(-1px);}

/* ── Scroll Strip ── */
.pp-scroll-strip{display:flex;gap:8px;padding:8px;will-change:transform;}
.pp-scroll-item{width:160px;min-width:160px;height:62px;display:flex;align-items:center;justify-content:center;border:2px solid;border-radius:4px;flex-shrink:0;transition:background .2s;}
.pp-winner-flash{animation:ppWinFlash .6s ease 3;}
@keyframes ppWinFlash{0%,100%{filter:brightness(1);}50%{filter:brightness(1.8);}}

/* ── Card Reveal ── */
.pp-result-panel{display:none;flex-direction:column;align-items:center;gap:14px;animation:ppFadeIn .5s ease;}
@keyframes ppFadeIn{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:scale(1);}}

.pp-reveal-card-wrap{perspective:1000px;}
.pp-reveal-card{width:150px;position:relative;}
.pp-reveal-animate{animation:ppCardReveal .8s cubic-bezier(.34,1.56,.64,1);}
@keyframes ppCardReveal{
  0%{transform:rotateY(180deg) scale(.5);opacity:0;}
  40%{transform:rotateY(90deg) scale(.8);opacity:.5;}
  100%{transform:rotateY(0deg) scale(1);opacity:1;}
}
/* ── Mystery Slab (face-down) ── */
.pp-reveal-wrap{width:180px;perspective:1200px;}
.pp-mystery-slab{width:180px;height:260px;border-radius:6px;
  background:linear-gradient(160deg,rgba(200,220,255,.18) 0%,rgba(180,210,255,.08) 40%,rgba(160,200,255,.13) 100%);
  border:2px solid rgba(180,210,255,.45);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 32px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.5) rotateY(180deg);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1);}
.pp-mystery-slab.pp-mystery-active{opacity:1;transform:scale(1) rotateY(0deg);}
.pp-mystery-slab.pp-mystery-shake{animation:ppShake .5s ease-in-out 2;}
@keyframes ppShake{0%,100%{transform:scale(1) translateX(0) rotate(0);}15%{transform:scale(1.02) translateX(-6px) rotate(-2deg);}30%{transform:scale(1.02) translateX(6px) rotate(2deg);}45%{transform:scale(1.03) translateX(-8px) rotate(-2.5deg);}60%{transform:scale(1.03) translateX(8px) rotate(2.5deg);}75%{transform:scale(1.02) translateX(-4px) rotate(-1deg);}90%{transform:scale(1.01) translateX(2px) rotate(.5deg);}}

/* ── Revealed Slab (reuses .psa-slab from codex) ── */
.pp-slab-reveal{width:180px;animation:ppSlabIn .6s cubic-bezier(.34,1.56,.64,1);}
.pp-slab-reveal img{border-radius:3px;position:relative;z-index:1;}
@keyframes ppSlabIn{0%{opacity:0;transform:scale(1.4) rotateY(90deg);}40%{opacity:1;transform:scale(1.1) rotateY(-10deg);}100%{transform:scale(1) rotateY(0deg);}}

/* ── Fade-up for value/buttons ── */
.pp-fade-up{animation:ppFadeUp .4s ease both;}
@keyframes ppFadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* ── Grade Badge ── */
.pp-grade-reveal{opacity:0;transform:scale(2) translateY(-10px);transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1);text-align:center;}
.pp-grade-reveal.pp-grade-visible{opacity:1;transform:scale(1) translateY(0);}
.pp-grade-label{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--text2);margin-bottom:4px;}
.pp-grade-number{font-family:'Press Start 2P',monospace;font-size:32px;font-weight:900;}

/* ── TOWER BATTLE EFFECTS ── */
@keyframes twrShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-4px)}30%{transform:translateX(4px)}45%{transform:translateX(-3px)}60%{transform:translateX(3px)}75%{transform:translateX(-1px)}}
@keyframes twrDmgFlash{0%{filter:brightness(2.5) saturate(0)}35%{filter:brightness(1.8) saturate(.5)}100%{filter:brightness(1) saturate(1)}}
@keyframes twrSuperFlash{0%{filter:brightness(3) hue-rotate(40deg);box-shadow:0 0 20px rgba(94,255,200,.6)}100%{filter:brightness(1) hue-rotate(0);box-shadow:none}}
@keyframes twrKO{0%{opacity:1;transform:scale(1) rotate(0)}30%{transform:scale(1.1) rotate(-3deg)}100%{opacity:.3;transform:scale(.85) rotate(5deg)}}
@keyframes twrHitPop{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}}
@keyframes twrSlash{0%{opacity:0;transform:translate(-50%,-50%) rotate(-45deg) scaleX(0)}30%{opacity:1;transform:translate(-50%,-50%) rotate(-45deg) scaleX(1.2)}100%{opacity:0;transform:translate(-50%,-50%) rotate(-45deg) scaleX(1.5)}}
@keyframes twrSparkle{0%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(1)}100%{opacity:0;transform:translate(var(--ex),var(--ey)) scale(0)}}
@keyframes twrWaveClear{0%{opacity:0;transform:scale(.5);filter:brightness(2)}40%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1);filter:brightness(1)}}
@keyframes twrBounceIn{0%{transform:scale(0) translateY(20px);opacity:0}60%{transform:scale(1.1) translateY(-4px)}100%{transform:scale(1) translateY(0);opacity:1}}
.twr-shake{animation:twrShake .3s ease}
.twr-dmg-flash{animation:twrDmgFlash .35s ease}
.twr-super-flash{animation:twrSuperFlash .5s ease}
.twr-ko{animation:twrKO .5s ease forwards}
.twr-bounce-in{animation:twrBounceIn .4s cubic-bezier(.34,1.56,.64,1) both}
.twr-wave-clear{animation:twrWaveClear .6s cubic-bezier(.34,1.56,.64,1) both}
.twr-hit-pop{position:absolute;pointer-events:none;font-size:22px;z-index:10;animation:twrHitPop .45s ease-out forwards}
.twr-slash{position:absolute;pointer-events:none;width:40px;height:4px;background:linear-gradient(90deg,transparent,#fff,transparent);border-radius:2px;z-index:10;animation:twrSlash .3s ease-out forwards}
.twr-sparkle{position:absolute;pointer-events:none;width:6px;height:6px;border-radius:50%;z-index:10;animation:twrSparkle .5s ease-out forwards}
.twr-dmg-num{position:absolute;pointer-events:none;font-family:'Press Start 2P',monospace;font-size:11px;font-weight:900;z-index:12;animation:cPop .7s ease-out forwards;text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* ── Value Info ── */
.pp-value-info{text-align:center;font-family:'Press Start 2P',monospace;}

/* ── Keep / Sell Choice ── */
.pp-choice-row{display:flex;gap:12px;width:100%;max-width:320px;margin-top:4px;}
.pp-choice-btn{flex:1;padding:14px 8px!important;text-align:center;line-height:1.8;font-size:10px!important;transition:transform .12s,box-shadow .12s;}
.pp-choice-btn:hover{transform:translateY(-2px);}

/* ── Legal Footer ── */
.legal-footer{text-align:center;padding:14px 12px 8px;margin-top:24px;border-top:1px solid rgba(38,62,90,.4);}
.legal-footer a{font-family:'Press Start 2P',monospace;font-size:6px;color:var(--text2);text-decoration:none;opacity:.55;transition:opacity .15s,color .15s;}
.legal-footer a:hover{opacity:1;color:var(--sky);}
.legal-footer span{font-size:6px;color:var(--text2);opacity:.3;margin:0 8px;}