/* =========================================================
   World Cup '26 Collectibles — Global Styles
   ========================================================= */

:root {
  --bg-0: #06101f;
  --bg-1: #091528;
  --bg-2: #10203a;
  --surface: rgba(9, 19, 37, 0.88);
  --surface-2: rgba(14, 27, 52, 0.94);
  --ink: #f4f1e6;
  --ink-dim: #b9b0a0;
  --ink-faint: #726f70;
  --brand: #c8a35a;
  --brand-2: #eed08d;
  --brand-3: #284f84;
  --accent: #7f92bf;
  --gold: #d7b15e;
  --gold-deep: #8d6325;
  --line: rgba(238, 211, 151, 0.10);
  --line-strong: rgba(238, 211, 151, 0.20);

  /* Rarity glow */
  --r-common:    #9aa3b2;
  --r-rare:      #7c3aed;
  --r-epic:      #16a34a;
  --r-legendary: #ffcf4a;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --shadow-1: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-2: 0 8px 28px rgba(0,0,0,0.35);
  --shadow-3: 0 20px 60px rgba(0,0,0,0.5);

  --font-display: 'Barlow Condensed', 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Premium / Navy theme */
[data-theme="premium"] {
  --bg-0: #06091b;
  --bg-1: #0b1236;
  --bg-2: #141c4e;
  --surface: #0f1742;
  --surface-2: #1a2460;
  --brand: #7c3aed;
  --brand-2: #fbbf24;
  --brand-3: #3b82f6;
  --accent: #a78bfa;
}

/* Neon arcade theme */
[data-theme="neon"] {
  --bg-0: #05050f;
  --bg-1: #0a0a1f;
  --bg-2: #12122e;
  --surface: #0d0d26;
  --surface-2: #1a1a3a;
  --brand: #ff2d95;
  --brand-2: #00f0ff;
  --brand-3: #b026ff;
  --accent: #00f0ff;
  --gold: #ffee00;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(1000px 500px at 50% -8%, rgba(215,177,94,0.12), transparent 65%),
    radial-gradient(750px 520px at 0% 26%, rgba(85,111,164,0.10), transparent 65%),
    radial-gradient(780px 480px at 100% 72%, rgba(215,177,94,0.08), transparent 68%),
    linear-gradient(180deg, #040a15 0%, var(--bg-0) 22%, var(--bg-1) 100%);
  background-attachment: fixed;
}

[data-theme="neon"] body {
  background:
    radial-gradient(800px 500px at 20% 10%, rgba(255,45,149,0.12), transparent 60%),
    radial-gradient(800px 500px at 80% 80%, rgba(0,240,255,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  background-attachment: fixed;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* Global reusable classes */
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.mono { font-family: var(--font-mono); }

.coin {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700;
}
.coin::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff4c0 0%, #FFCF4A 35%, #B7791F 100%);
  box-shadow: inset 0 -2px 2px rgba(0,0,0,0.3), 0 0 6px rgba(255,207,74,0.6);
  flex-shrink: 0;
}

/* =========================================================
   Sticker card — the star of the show
   ========================================================= */

.sticker-card {
  position: relative;
  aspect-ratio: 2.5 / 3.5;
  border-radius: 14px;
  overflow: hidden;
  user-select: none;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.sticker-card.interactive { cursor: pointer; }

/* Cursor-driven 3D tilt — driven by --rotate-x / --rotate-y written from JS */
.sticker-card.interactive.tilt {
  transform: perspective(900px)
             rotateX(var(--rotate-x, 0deg))
             rotateY(var(--rotate-y, 0deg));
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}

.sticker-card__inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 10px;
  background: var(--card-bg, linear-gradient(160deg, #1a2244, #0f1530));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sticker-card__header {
  display: flex; justify-content: space-between; align-items: flex-start;
  color: white;
  z-index: 3;
}

.sticker-card__num {
  font-family: var(--font-display);
  font-size: clamp(18px, 4vw, 28px);
  line-height: 1;
  padding: 2px 8px;
  background: rgba(0,0,0,0.35);
  border-radius: 6px;
  backdrop-filter: blur(6px);
}

.sticker-card__flag {
  font-size: clamp(18px, 4vw, 24px);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.sticker-card__portrait {
  flex: 1;
  display: flex; align-items: flex-end; justify-content: center;
  position: relative;
  margin: 4px 0;
}

.sticker-card__silhouette {
  width: 85%; height: 90%;
  position: relative;
}

.sticker-card__nameplate {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  border-radius: 6px;
  padding: 4px 8px;
  text-align: center;
  z-index: 3;
  border: 1px solid rgba(255,255,255,0.15);
}

.sticker-card__name {
  font-family: var(--font-display);
  font-size: clamp(11px, 2.5vw, 15px);
  line-height: 1.1;
  color: white;
  letter-spacing: 0.03em;
}

.sticker-card__pos {
  font-size: clamp(8px, 1.6vw, 10px);
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.1em;
  margin-top: 2px;
}

/* Rarity ring */
.sticker-card__frame {
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: 14px;
  z-index: 4;
}

.sticker-card[data-rarity="common"] .sticker-card__frame {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.sticker-card[data-rarity="rare"] .sticker-card__frame {
  box-shadow: inset 0 0 0 2px var(--r-rare), 0 0 20px rgba(124,196,255,0.35);
}
.sticker-card[data-rarity="epic"] .sticker-card__frame {
  box-shadow: inset 0 0 0 2px var(--r-epic), 0 0 26px rgba(201,123,255,0.45);
}
.sticker-card[data-rarity="legendary"] .sticker-card__frame {
  box-shadow: inset 0 0 0 2.5px var(--r-legendary), 0 0 36px rgba(255,207,74,0.6);
}

/* ---- Cursor-tracked foil layers (modeled on pokemon-cards-css) ---- */

.sticker-card__shine,
.sticker-card__glare {
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 2;
  transition: opacity 0.25s ease;
  /* default — overridden per rarity below */
  opacity: calc(var(--card-active, 0) * 0.85 + 0.05);
  mix-blend-mode: color-dodge;
}
.sticker-card__glare { z-index: 3; }

/* COMMON — simple moving glare sheen */
.sticker-card[data-rarity="common"] .sticker-card__shine {
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.18) 48%,
    rgba(255,255,255,0.40) 50%,
    rgba(255,255,255,0.18) 52%,
    transparent 70%);
  background-size: 250% 250%;
  background-position: var(--background-x, 50%) var(--background-y, 50%);
  mix-blend-mode: overlay;
  opacity: calc(var(--card-active, 0) * 0.9 + 0.05);
}
.sticker-card[data-rarity="common"] .sticker-card__glare { display: none; }

/* RARE — radiant holofoil: large color-dodge linear gradient + hard-light radial at cursor */
.sticker-card[data-rarity="rare"] .sticker-card__shine {
  background:
    linear-gradient(115deg,
      hsl(280, 80%, 60%) 0%,
      hsl(200, 90%, 60%) 25%,
      hsl(160, 85%, 55%) 50%,
      hsl(50,  95%, 60%) 75%,
      hsl(330, 85%, 60%) 100%);
  background-size: 200% 200%;
  background-position: var(--background-x, 50%) var(--background-y, 50%);
  mix-blend-mode: color-dodge;
  opacity: calc(var(--card-active, 0) * 0.55 + 0.15);
}
.sticker-card[data-rarity="rare"] .sticker-card__glare {
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
    rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.30) 25%, transparent 65%);
  mix-blend-mode: hard-light;
  opacity: calc(var(--card-active, 0) * 0.9);
}

/* EPIC — diagonal holographic: two opposing gradients + SVG noise, color-dodge */
.sticker-card[data-rarity="epic"] .sticker-card__shine {
  background:
    repeating-linear-gradient(115deg,
      hsl(320,90%,60%), hsl(20,90%,60%), hsl(60,90%,60%),
      hsl(160,90%,60%), hsl(220,90%,60%), hsl(280,90%,60%), hsl(320,90%,60%)),
    repeating-linear-gradient(245deg,
      hsl(280,90%,60%), hsl(220,90%,60%), hsl(160,90%,60%),
      hsl(60,90%,60%), hsl(20,90%,60%), hsl(320,90%,60%), hsl(280,90%,60%)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  background-size: 300% 300%, 300% 300%, 120px 120px;
  background-position:
    var(--background-x, 50%) var(--background-y, 50%),
    calc(100% - var(--background-x, 50%)) calc(100% - var(--background-y, 50%)),
    0 0;
  background-blend-mode: color-dodge, color-dodge, overlay;
  mix-blend-mode: color-dodge;
  opacity: calc(var(--card-active, 0) * 0.55 + 0.30);
}
.sticker-card[data-rarity="epic"] .sticker-card__glare {
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
    rgba(255,255,255,0.55) 0%, transparent 60%);
  mix-blend-mode: overlay;
  opacity: calc(var(--card-active, 0) * 0.85);
}

/* LEGENDARY — radiant criss-cross holofoil that travels across the card */
.sticker-card[data-rarity="legendary"] .sticker-card__shine {
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
      hsla(45,100%,75%,0.9) 0%, transparent 75%),
    repeating-linear-gradient(45deg,
      transparent 0 6px, hsla(45,100%,60%,0.35) 6px 8px,
      transparent 8px 14px, hsla(45,100%,80%,0.20) 14px 16px),
    repeating-linear-gradient(-45deg,
      transparent 0 6px, hsla(45,100%,60%,0.35) 6px 8px,
      transparent 8px 14px, hsla(45,100%,80%,0.20) 14px 16px);
  background-size: 100% 100%, 200% 200%, 200% 200%;
  background-position:
    0 0,
    var(--background-x, 50%) var(--background-y, 50%),
    calc(100% - var(--background-x, 50%)) calc(100% - var(--background-y, 50%));
  mix-blend-mode: color-dodge;
  opacity: calc(var(--card-active, 0) * 0.45 + 0.55);
}
.sticker-card[data-rarity="legendary"] .sticker-card__glare {
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
    rgba(255,235,180,0.85) 0%, transparent 60%);
  mix-blend-mode: hard-light;
  opacity: calc(var(--card-active, 0) * 0.85 + 0.1);
}

/* Rarity badge */
.sticker-card__rarity {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 9px;
  letter-spacing: 0.15em;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 5;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}
.sticker-card[data-rarity="common"]    .sticker-card__rarity { color: var(--r-common); }
.sticker-card[data-rarity="rare"]      .sticker-card__rarity { color: var(--r-rare); }
.sticker-card[data-rarity="epic"]      .sticker-card__rarity { color: var(--r-epic); }
.sticker-card[data-rarity="legendary"] .sticker-card__rarity { color: var(--r-legendary); }

/* NEW ribbon */
.sticker-card__new {
  position: absolute; top: -6px; right: -6px;
  background: linear-gradient(135deg, #ff4d6d, #c9184a);
  color: white; font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.15em;
  padding: 3px 10px;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(201,24,74,0.5);
  z-index: 6;
  animation: pulse-new 1.6s ease-in-out infinite;
}

@keyframes pulse-new {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Empty slot (silhouette) */
.sticker-slot-empty {
  aspect-ratio: 2.5 / 3.5;
  border: 2px dashed rgba(255,255,255,0.12);
  border-radius: 14px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 6px, transparent 6px, transparent 12px),
    rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  color: rgba(255,255,255,0.25);
}
.sticker-slot-empty__num {
  position: absolute; top: 6px; left: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  color: rgba(255,255,255,0.35);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary {
  background: linear-gradient(180deg, rgba(218,183,103,0.94) 0%, rgba(138,100,39,0.96) 100%);
  color: #1c1408;
  border-color: rgba(255,229,166,0.35);
  box-shadow: 0 12px 30px rgba(138,100,39,0.28), inset 0 1px 0 rgba(255,244,214,0.45);
}
.btn-primary:hover { box-shadow: 0 16px 34px rgba(138,100,39,0.34), inset 0 1px 0 rgba(255,244,214,0.55); transform: translateY(-1px); }

.btn-gold {
  background: linear-gradient(180deg, #e3c57b 0%, #a7772f 100%);
  color: #1d1407;
  border-color: rgba(255,230,176,0.45);
  box-shadow: 0 14px 34px rgba(141,99,37,0.30), inset 0 1px 0 rgba(255,244,214,0.45);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(141,99,37,0.38), inset 0 1px 0 rgba(255,244,214,0.55);
}

.btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--line-strong); }

.btn-sm { padding: 8px 14px; font-size: 12px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }

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

/* =========================================================
   Layout shells
   ========================================================= */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(22px);
  background:
    linear-gradient(180deg, rgba(5, 11, 23, 0.92), rgba(6, 13, 26, 0.84)),
    radial-gradient(500px 140px at 50% 0%, rgba(215,177,94,0.10), transparent 75%);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  max-width: 1400px; margin: 0 auto;
  padding: 12px 22px;
  display: flex; align-items: center; gap: 16px;
}

.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.logo__mark {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 4px 12px rgba(0,0,0,0.4);
  position: relative;
}

.logo__mark::before {
  content: '⚽';
  font-size: 26px;
  line-height: 1;
}

.topbar__nav {
  display: flex; gap: 8px;
  align-items: center;
  margin-left: 8px;
  flex: 1;
}

.topbar__nav button {
  padding: 12px 22px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  color: var(--ink-dim);
  transition: all 0.15s ease;
}

.topbar__nav button:hover { background: rgba(255,255,255,0.05); color: var(--ink); }
.topbar__nav button[data-active="true"] {
  background:
    linear-gradient(180deg, rgba(70,56,31,0.96) 0%, rgba(28,24,19,0.96) 100%),
    linear-gradient(90deg, rgba(231,205,136,0.28), rgba(168,123,49,0.18));
  color: #f0ca74;
  border-color: rgba(245,216,142,0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,235,189,0.28),
    0 10px 22px rgba(98,74,31,0.18),
    0 0 0 1px rgba(245,216,142,0.08);
}

.topbar__menu {
  position: relative;
}

.topbar__menu::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}

.topbar__submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 210px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(8,14,28,0.96);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 120;
}

.topbar__submenu[hidden] {
  display: none;
}

.topbar__submenu button {
  width: 100%;
  justify-content: flex-start;
  padding: 10px 14px;
  border-radius: 14px;
}

.topbar__mobile-toggle {
  display: none;
  margin-left: auto;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: rgba(255,255,255,0.04);
}

.topbar__status {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}

.topbar__status-copy {
  color: var(--ink-dim);
  font-size: 12px;
  text-align: right;
}

.topbar__wallet {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(129,95,39,0.24), rgba(61,44,18,0.22));
  border: 1px solid rgba(255,207,74,0.24);
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255,228,168,0.14);
}

.main {
  flex: 1;
  max-width: 1400px; width: 100%;
  margin: 0 auto;
  padding: 20px;
}

/* Mobile nav — bottom tab bar */
@media (max-width: 720px) {
  .topbar__mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .topbar__nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 14px;
    right: 14px;
    z-index: 100;
    background: rgba(7,13,25,0.98);
    backdrop-filter: blur(18px);
    border: 1px solid var(--line-strong);
    border-radius: 22px;
    padding: 12px;
    margin: 0;
    gap: 6px;
    justify-content: stretch;
    flex-direction: column;
    display: none;
  }
  .topbar__nav[data-open="true"] {
    display: flex;
  }
  .topbar__menu {
    display: flex;
    flex-direction: column;
  }
  .topbar__nav button {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    font-size: 14px;
  }
  .topbar__submenu {
    position: static;
    transform: none;
    min-width: 0;
    margin-top: 6px;
    background: rgba(255,255,255,0.03);
    box-shadow: none;
  }
  .main { padding: 16px 14px 40px; }
  .topbar__inner { padding: 10px 14px; }
  .topbar__status-copy { display: none; }
  .topbar__status {
    margin-left: auto;
    gap: 8px;
  }
  .topbar__wallet {
    padding: 8px 12px;
  }
}

/* Sections */
.section {
  margin-bottom: 40px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}
.section-head__copy {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.section-head__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-head__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(99,74,33,0.20), rgba(30,22,14,0.14));
  border: 1px solid rgba(215,177,94,0.18);
  font-size: 18px;
  box-shadow: inset 0 1px 0 rgba(255,240,203,0.12);
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 40px);
  margin: 0;
  letter-spacing: 0.03em;
}
.section-head p {
  margin: 0;
  position: relative;
  top: 4px;
  color: var(--ink-dim);
  font-size: 13px;
  max-width: 560px;
}

.section-head__action {
  margin-left: auto;
}

@media (max-width: 840px) {
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .section-head__copy {
    align-items: flex-start;
  }
  .section-head p {
    top: 0;
  }
}

/* Card surface */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
}

/* Keyframes */
@keyframes shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

@keyframes float-up {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes pop-in {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fade-in { animation: fade-in 0.35s ease; }

/* Modal backdrop */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fade-in 0.25s ease;
}

/* Toasts */
.toasts {
  position: fixed; top: 70px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 500;
  pointer-events: none;
}
.toast {
  background: rgba(0,0,0,0.85);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  animation: float-up 0.3s ease;
  pointer-events: auto;
  box-shadow: var(--shadow-2);
}

/* Utility */
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 12px; align-items: center; }
.row-wrap { display: flex; gap: 12px; flex-wrap: wrap; }

.skeleton {
  display: grid;
  place-items: center;
  padding: 40px;
  color: var(--ink-dim);
  font-size: 14px;
}

/* Rarity chip */
.rarity-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
}
.rarity-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.rarity-chip[data-rarity="common"]::before    { background: var(--r-common); }
.rarity-chip[data-rarity="rare"]::before      { background: var(--r-rare); box-shadow: 0 0 6px var(--r-rare); }
.rarity-chip[data-rarity="epic"]::before      { background: var(--r-epic); box-shadow: 0 0 6px var(--r-epic); }
.rarity-chip[data-rarity="legendary"]::before { background: var(--r-legendary); box-shadow: 0 0 8px var(--r-legendary); }

.rarity-chip[data-rarity="common"]    { color: var(--r-common); }
.rarity-chip[data-rarity="rare"]      { color: var(--r-rare); }
.rarity-chip[data-rarity="epic"]      { color: var(--r-epic); }
.rarity-chip[data-rarity="legendary"] { color: var(--r-legendary); }