/* ============================================================================
   OpenPok :: Global light theme — Orange & White
   ============================================================================ */

:root {
  /* Brand */
  --accent: #FF6B00;          /* Vibrant Orange — primary brand/accent */
  --accent-hover: #E05D00;    /* Dark Orange — hover/pressed state */
  --accent-soft: #FFF4EC;     /* Soft orange tint — container backgrounds */
  --accent-gradient: linear-gradient(135deg, #FF6B00 0%, #E05D00 100%);

  /* Surfaces */
  --bg-main: #FAF9F8;         /* Off-white / warm light page background */
  --bg-surface: #FFFFFF;      /* Cards, header, modals, drawer */
  --border-subtle: #EAE8E5;   /* Soft light borders */

  /* Text */
  --text-primary: #1A1A1E;    /* Dark charcoal — high readability on white */
  --text-secondary: #45454C;  /* Slightly softer than primary, still clear */
  --text-muted: #666670;      /* Subtle gray — least prominent text */

  --success: #16A34A;
  --danger: #DC2626;

  --coin-gold: #C98A00;
  --rarity-common: #6B7280;
  --rarity-uncommon: #16A34A;
  --rarity-rare: #2563EB;
  --rarity-ultra: #9333EA;
  --rarity-secret: #C98A00;
  --rarity-illustration: #DB2777;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 8px 20px rgba(255, 107, 0, 0.3);

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: radial-gradient(circle at top, #ffffff 0%, var(--bg-main) 60%);
  color: var(--text-primary);
  font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

.hidden {
  display: none !important;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------------------- */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-main {
  padding-bottom: 96px;
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-surface);
  box-shadow: var(--shadow-header);
  border-bottom: 1px solid var(--border-subtle);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.logo {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Hamburger toggle (mobile only — see drawer media query below)
   --------------------------------------------------------------------------- */

.hamburger-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.hamburger-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-primary);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(2) { opacity: 0; }
.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   Nav — on desktop this holds both the page links and the header actions
   (coin balance, daily bonus, profile, auth buttons) in one flex row; on
   mobile (see media query) it becomes a single off-canvas drawer so every
   item lives in exactly one place in the DOM (no separate mobile markup to
   drift out of sync).
   --------------------------------------------------------------------------- */

.main-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
}

.nav-link {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.nav-divider {
  width: 1px;
  height: 22px;
  background: var(--border-subtle);
  margin-left: auto;
}

/* Guest state has no divider (hidden), so the auth button needs its own
   auto-margin to stay pinned to the right edge of the bar. */
.guest-only.btn {
  margin-left: auto;
}

.coin-balance {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  color: var(--coin-gold);
  white-space: nowrap;
}

.nav-profile-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-bonus-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  background: var(--accent);
  border: none;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 8px 14px;
  border-radius: 999px;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

.daily-bonus-btn:disabled {
  background: var(--border-subtle);
  color: var(--text-muted);
  cursor: default;
}

.daily-bonus-btn:not(:disabled):hover {
  transform: translateY(-1px);
  background: var(--accent-hover);
}

.daily-bonus-btn .countdown {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.85;
}

.btn {
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.btn-primary {
  background: var(--accent);
  border: none;
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   Hero + search
   --------------------------------------------------------------------------- */

.hero {
  padding: 64px 24px 40px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.hero p {
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 28px;
}

/* The search bar is the hero's last element, so it carries no bottom margin —
   the spacing down to the packs grid comes from the hero's own bottom padding
   plus the grid's top padding, keeping the block vertically balanced. */
.search-bar {
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}

.search-bar input {
  width: 100%;
  padding: 14px 18px 14px 44px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-bar input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
}

.search-bar .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Packs grid
   --------------------------------------------------------------------------- */

.packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
  padding: 32px 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.pack-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pack-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  border-color: var(--accent);
}

.pack-card__art {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #FFF4EC 0%, #FFFFFF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pack-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pack-card__set {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pack-card__name {
  font-weight: 700;
  font-size: 1.05rem;
}

.pack-card__price {
  color: var(--coin-gold);
  font-weight: 700;
}

.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Modal (auth + pack opening share the same overlay pattern)
   --------------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 30, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.modal-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 420px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-modal);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1;
}

.modal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.modal-tabs button {
  flex: 1;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  font-weight: 600;
}

.modal-tabs button.active {
  background: var(--accent);
  color: #ffffff;
}

.form-field {
  margin-bottom: 14px;
}

.form-field label {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.form-field input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 16px;
  outline: none;
}

.form-field input:focus {
  border-color: var(--accent);
}

.form-error {
  color: var(--danger);
  font-size: 0.82rem;
  min-height: 18px;
}

.form-success {
  color: var(--success);
  font-size: 0.82rem;
  min-height: 18px;
}

/* ---------------------------------------------------------------------------
   Rarity badges (shared across collection / pack opening)
   --------------------------------------------------------------------------- */

.rarity-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.045);
}

.rarity-badge[data-rarity="Common"] { color: var(--rarity-common); }
.rarity-badge[data-rarity="Uncommon"] { color: var(--rarity-uncommon); }
.rarity-badge[data-rarity="Rare"],
.rarity-badge[data-rarity="Holo Rare"],
.rarity-badge[data-rarity="Double Rare"] { color: var(--rarity-rare); }
.rarity-badge[data-rarity="Ultra Rare"] { color: var(--rarity-ultra); }
.rarity-badge[data-rarity="Secret Rare"],
.rarity-badge[data-rarity="Hyper Rare"] { color: var(--rarity-secret); }
.rarity-badge[data-rarity="Special Illustration Rare"] { color: var(--rarity-illustration); }

/* ---------------------------------------------------------------------------
   Collection page
   --------------------------------------------------------------------------- */

.net-worth-banner {
  margin: 32px auto 0;
  max-width: 1280px;
  padding: 0 24px;
}

.net-worth-card {
  background: var(--accent-gradient);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  color: #ffffff;
}

.net-worth-card .label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.net-worth-card .value {
  font-size: 2.4rem;
  font-weight: 800;
}

.collection-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.collection-toolbar select,
.collection-toolbar input {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 16px;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  padding: 8px 24px 32px;
  max-width: 1280px;
  margin: 0 auto;
}

.collection-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-card);
  /* (2) Smooth, GPU-friendly hover — only transform & box-shadow animate. */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}

.collection-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  border-color: var(--accent);
}

.collection-card__art {
  position: relative;
  aspect-ratio: 2.5 / 3.5;
  border-radius: 10px;
  background: linear-gradient(160deg, #FFF4EC 0%, #FFFFFF 100%);
  overflow: hidden;
}

/* (2) Holographic sheen that sweeps across the artwork on hover. Clipped by
   the art's overflow:hidden; animates transform only, so it stays at 60fps. */
.collection-card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.collection-card:hover .collection-card__art::after {
  transform: translateX(120%);
}

.collection-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection-card__name {
  font-weight: 700;
  font-size: 0.9rem;
}

.collection-card__price {
  color: var(--coin-gold);
  font-weight: 700;
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
   Leaderboard page
   --------------------------------------------------------------------------- */

.leaderboard-podium {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  max-width: 900px;
  margin: 32px auto;
  padding: 0 24px;
  align-items: end;
}

.podium-spot {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px 14px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.podium-spot.rank-1 { order: 2; padding-top: 32px; border-color: #ffc94a; box-shadow: 0 0 24px rgba(255, 201, 74, 0.3); }
.podium-spot.rank-2 { order: 1; border-color: #c7c9d9; }
.podium-spot.rank-3 { order: 3; border-color: #cd8a5f; }

.podium-badge {
  font-size: 2rem;
  margin-bottom: 6px;
}

.podium-username {
  font-weight: 800;
  margin: 4px 0;
}

.podium-title {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

.podium-value {
  color: var(--coin-gold);
  font-weight: 700;
  margin-top: 8px;
}

.leaderboard-table {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 48px 1fr auto 140px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}

.leaderboard-row .cards {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: right;
  white-space: nowrap;
}

.podium-cards {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 4px;
}

.leaderboard-row.is-current-user {
  border: 1px solid var(--accent);
}

.leaderboard-row .rank {
  color: var(--text-muted);
  font-weight: 700;
}

.leaderboard-row .value {
  text-align: right;
  color: var(--coin-gold);
  font-weight: 700;
}

.leaderboard-sticky-me {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--accent);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  padding: 12px 24px;
  display: flex;
  justify-content: center;
  gap: 24px;
  align-items: center;
  z-index: 90;
}

/* ---------------------------------------------------------------------------
   Store page
   --------------------------------------------------------------------------- */

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 1060px;
  margin: 32px auto;
  padding: 0 24px;
}

.coin-package {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.coin-package .amount {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--coin-gold);
}

.coin-package .price {
  color: var(--text-muted);
  margin: 6px 0 18px;
}

.coin-package.premium {
  border-color: var(--coin-gold);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--coin-gold);
}

.redeem-box {
  max-width: 480px;
  margin: 48px auto;
  padding: 0 24px;
  text-align: center;
}

.redeem-box form {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.redeem-box input {
  flex: 1;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 16px;
}

.redeem-status {
  margin-top: 12px;
  font-size: 0.9rem;
  min-height: 20px;
}

.redeem-status.success { color: var(--success); }
.redeem-status.error { color: var(--danger); }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.site-footer {
  text-align: center;
  color: var(--text-muted);
  padding: 32px 24px;
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------------------
   Mobile hamburger drawer (nav-scrim lives outside .site-header__inner so it
   can overlay the entire page, not just the header bar)
   --------------------------------------------------------------------------- */

.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 30, 0.4);
  z-index: 1000;
}

.nav-scrim.open {
  display: block;
}

body.nav-open {
  overflow: hidden;
}

/* The mobile drawer (#main-nav) lives INSIDE .site-header, which is its own
   stacking context (z-index: 100). That traps the drawer at the header's
   root-level layer (100), while the body-level .nav-scrim sits at 1000 — so the
   scrim paints OVER the drawer and swallows every tap (its click handler then
   just closes the menu). Lifting the header above the scrim while the drawer is
   open puts the drawer back on top so its links/buttons are tappable again. */
body.nav-open .site-header {
  z-index: 1001;
}

@media (max-width: 768px) {
  .hamburger-btn { display: flex; }

  #main-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background-color: #FFFFFF;
    border-left: 1px solid var(--border-subtle);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
    padding: 80px 24px 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    z-index: 1001;
  }

  #main-nav.open,
  body.nav-open #main-nav {
    transform: translateX(0);
  }

  #main-nav a,
  #main-nav button {
    color: var(--text-primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #main-nav a:hover,
  #main-nav a.active,
  #main-nav button:hover {
    color: var(--accent);
  }

  .nav-link {
    padding: 12px 4px;
    border-bottom: 1px solid var(--border-subtle);
  }

  .nav-link.active {
    border-bottom-color: var(--accent);
  }

  .nav-divider {
    width: 100%;
    height: 1px;
    margin: 6px 0;
  }

  .guest-only.btn,
  .nav-divider {
    margin-left: 0;
  }

  .main-nav .btn,
  .main-nav .daily-bonus-btn,
  .main-nav .coin-balance,
  .main-nav .nav-profile-btn {
    width: 100%;
    justify-content: center;
    max-width: none;
  }

  .leaderboard-podium { grid-template-columns: 1fr; }
  .podium-spot.rank-1, .podium-spot.rank-2, .podium-spot.rank-3 { order: 0; }
  .leaderboard-row { grid-template-columns: 32px 1fr auto 84px; gap: 8px; }
}

/* ---------------------------------------------------------------------------
   Insufficient-coins modal (shown when a pack costs more than the balance)
   --------------------------------------------------------------------------- */

.insufficient-coins-modal {
  text-align: center;
}

.insufficient-coins-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 8px;
}

.insufficient-coins-modal p {
  color: var(--text-muted);
  margin: 0 0 20px;
}

.insufficient-coins-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.insufficient-coins-actions .btn {
  width: 100%;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   Toasts (daily bonus feedback, etc.) — sits above every modal/overlay.
   --------------------------------------------------------------------------- */

.toast-layer {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: max-content;
  max-width: 92vw;
}

.toast {
  pointer-events: auto;
  min-width: 240px;
  max-width: 92vw;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-modal);
  font-weight: 600;
  font-size: 0.92rem;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

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

.toast--success {
  background: var(--accent-gradient);
  color: #ffffff;
  border-color: transparent;
}

.toast--error {
  background: #FFF4EC;
  color: var(--danger);
  border-color: #F3C9C9;
}

/* ---------------------------------------------------------------------------
   Pack reveal — one-by-one swipe carousel + final summary grid
   (rendered inside .pack-opening-overlay by js/pack-opening.js)
   --------------------------------------------------------------------------- */

.pack-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 560px;
}

.carousel-counter {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
}

.carousel-stage {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.carousel-viewport {
  flex: 1;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: pan-y; /* let vertical scroll through; we handle horizontal */
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}

/* Bigger card for the single-card view; disable the grid entrance animation. */
.carousel-slide .tcg-card {
  width: 240px;
  height: 336px;
  opacity: 1;
  transform: none;
  animation: none;
}

.carousel-nav {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 1.7rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.carousel-nav:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.08);
}

.carousel-nav:disabled {
  opacity: 0.25;
  cursor: default;
}

.carousel-hint {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  text-align: center;
}

.carousel-summary {
  margin-top: 4px;
  min-width: 240px;
  justify-content: center;
}

/* Final summary grid ------------------------------------------------------- */

.pack-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 1000px;
}

.summary-title {
  color: #ffffff;
  margin: 0;
  text-align: center;
}

.summary-total {
  color: var(--coin-gold);
  font-weight: 700;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  width: 100%;
}

.summary-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 8px;
  text-align: center;
  color: #ffffff;
}

.summary-card__art {
  aspect-ratio: 2.5 / 3.5;
  border-radius: 8px;
  overflow: hidden;
  /* Card-back gradient so a removed/broken thumbnail is a clean placeholder. */
  background: linear-gradient(160deg, #2a2a4e 0%, #14141f 100%);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.summary-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card art that failed to load: show a subtle card-back gradient placeholder. */
.summary-card__art.img-missing,
.tcg-card__face--front.img-missing {
  background: linear-gradient(160deg, #262646 0%, #14141f 100%);
}

.summary-card__name {
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-card__price {
  color: var(--coin-gold);
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 4px;
}

.summary-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   Spinners — the "Opening…" button state and the in-overlay reveal loader
   --------------------------------------------------------------------------- */

@keyframes opk-spin {
  to { transform: rotate(360deg); }
}

.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: opk-spin 0.7s linear infinite;
}

.btn.is-loading {
  opacity: 0.85;
  cursor: default;
}

.reveal-spinner {
  width: 46px;
  height: 46px;
  margin: 48px auto;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: opk-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .btn-spinner,
  .reveal-spinner {
    animation-duration: 1.4s;
  }
}

@media (max-width: 640px) {
  .carousel-slide .tcg-card { width: 200px; height: 280px; }
  .summary-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}