/* Token values mirror chrome_spot_lab/app/styles.css :root */
:root {
  color-scheme: light;

  --csl-ink: #FFFFFF;
  --csl-graphite: #F6F8FA;
  --csl-slate: #D6DCE6;
  --csl-chrome: #3C4654;
  --csl-steel: #13181F;
  --csl-signal-cyan: #EF0107;
  --csl-electric-blue: #063672;
  --csl-superfractor-gold: #9C824A;
  --csl-value-strong: #0F9D63;
  --csl-value-fair: #5B6675;
  --csl-value-rich: #C67A12;
  --csl-value-flag: #4C5BA8;

  --font-sans: "Hanken Grotesk", "Geist", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", monospace;
  --font-display: "Archivo", "Hanken Grotesk", system-ui, sans-serif;

  --csl-felt-dark: #EEF1F5;
  --csl-felt-mid: #F6F8FA;
  --csl-felt-light: #FFFFFF;
  --csl-stage-glow: #EEF2F7;
  --csl-pack-deep: #063672;
  --csl-card-face-top: #FFFFFF;
  --csl-card-face-bottom: #F1F4F8;
  --csl-sheen-violet: #063672;
  --csl-sheen-teal: #EF0107;

  --tigers-primary: #0C2340;
  --tigers-secondary: #FA4616;
  --pirates-primary: #FDB827;
  --pirates-secondary: #000000;
  --brewers-primary: #12284B;
  --brewers-secondary: #FFC52F;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --topbar-h: 56px;
  --sheet-collapsed-h: 88px;
  --angle: 0deg;
  --sheen-pos: -120%;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --sheen-pos {
  syntax: "<percentage>";
  initial-value: -120%;
  inherits: false;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--csl-ink);
  color: var(--csl-steel);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.proto-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: var(--csl-superfractor-gold);
  color: var(--csl-steel);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  text-align: center;
  padding-top: calc(4px + var(--safe-top));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: calc(var(--topbar-h) + 22px + var(--safe-top));
  padding-top: calc(22px + var(--safe-top));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 3px solid var(--csl-signal-cyan);
  border-bottom: 1px solid rgba(19, 24, 31, 0.10);
  box-shadow: 0 1px 3px rgba(19, 24, 31, 0.06);
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding-left: 8px;
  padding-right: 8px;
}

.icon-btn {
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(19, 24, 31, 0.10);
  border-radius: 12px;
  color: var(--csl-chrome);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.icon-btn:active { background: rgba(19, 24, 31, 0.06); }
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }
.icon-btn.small { width: 36px; height: 36px; border-radius: 10px; }
.icon-btn.small svg { width: 18px; height: 18px; }

.balance-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--csl-graphite);
  border: 1px solid var(--csl-slate);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
}
.balance-pill .label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--csl-value-fair);
  text-transform: uppercase;
  line-height: 1;
}
.balance-pill .amount {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--csl-steel);
  line-height: 1.2;
  transition: color 200ms ease;
}
.balance-pill .amount.flash-up { color: var(--csl-value-strong); }
.balance-pill .amount.flash-down { color: var(--csl-value-flag); }

/* Broke state — the pill becomes the top-up button (tap to reload $1k) */
.balance-pill.broke {
  border-color: var(--csl-signal-cyan);
  animation: broke-pulse 1.6s ease-in-out infinite;
}
.balance-pill.broke .label { color: var(--csl-signal-cyan); }
@keyframes broke-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--csl-signal-cyan) 0%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--csl-signal-cyan) 30%, transparent); }
}

.stage-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, var(--csl-stage-glow) 0%, var(--csl-ink) 70%);
  transition: background 400ms ease;
}
.stage-wrap.felt {
  background:
    radial-gradient(ellipse at 50% 35%, var(--csl-felt-light) 0%, var(--csl-felt-mid) 42%, var(--csl-felt-dark) 78%, var(--csl-felt-dark) 100%);
}
.stage-wrap.felt::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
}
.stage-wrap.felt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(19, 24, 31, 0.08) 100%);
  pointer-events: none;
}
.stage-wrap.ssp-pre-beat {
  filter: brightness(0.55);
  transition: filter 400ms ease;
}
.stage-wrap.ssp-moment {
  z-index: 1;
}

.stage-presence {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stage-presence.hide { display: none; }

.watching-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--csl-value-fair);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(19, 24, 31, 0.12);
  border-radius: 999px;
  padding: 4px 10px;
}
.watching-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--csl-value-strong);
  animation: live-pulse 1.5s ease-in-out infinite;
}

.breaker-strip {
  position: absolute;
  top: 44px;
  left: 12px;
  right: 12px;
  z-index: 7;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 350ms ease, transform 400ms cubic-bezier(0.2, 0.9, 0.3, 1);
  pointer-events: none;
}
.breaker-strip.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.breaker-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--csl-electric-blue) 0%, var(--csl-signal-cyan) 55%, color-mix(in srgb, var(--csl-signal-cyan) 70%, var(--csl-pack-deep)) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: #FFFFFF;
  box-shadow:
    0 4px 16px rgba(239, 1, 7, 0.35),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    inset 0 -3px 6px rgba(19, 24, 31, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.breaker-info { flex: 1; min-width: 0; }
.breaker-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--csl-signal-cyan);
  margin-bottom: 2px;
}
.breaker-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.breaker-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--csl-steel);
}
.breaker-handle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--csl-value-fair);
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--csl-value-flag);
  animation: live-pulse 1s ease-in-out infinite;
}

.breaker-caption {
  position: relative;
  background: #FFFFFF;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(19, 24, 31, 0.12);
  border-radius: 14px;
  padding: 10px 14px;
  max-width: 100%;
  box-shadow: 0 4px 16px rgba(19, 24, 31, 0.10);
}
.breaker-caption::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 16px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
  filter: drop-shadow(-1px 0 0 rgba(19, 24, 31, 0.10));
}
.breaker-caption-text {
  transition: opacity 200ms ease, transform 200ms ease;
}
.breaker-caption-text.caption-out {
  opacity: 0;
  transform: translateY(4px);
}
.breaker-caption-text.caption-in {
  animation: caption-in 350ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.breaker-strip.caption-muted .breaker-caption { opacity: 0.25; }
.breaker-strip.caption-emphasis .breaker-caption {
  border-color: rgba(239, 1, 7, 0.45);
  box-shadow: 0 0 32px rgba(239, 1, 7, 0.18), 0 8px 24px rgba(0, 0, 0, 0.4);
}
.breaker-strip.caption-emphasis .voice-calm .breaker-caption-text,
.breaker-strip.caption-emphasis .voice-hype .breaker-caption-text {
  font-size: 17px;
  color: var(--csl-signal-cyan);
  text-shadow: 0 0 20px rgba(239, 1, 7, 0.28);
}
@keyframes caption-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.voice-calm .breaker-caption-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--csl-value-fair);
  line-height: 1.35;
  margin: 0;
}
.voice-hype .breaker-caption-text {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--csl-signal-cyan);
  line-height: 1.3;
  margin: 0;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

.stage-badge {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--csl-value-fair);
  text-transform: uppercase;
  text-align: center;
  z-index: 5;
  line-height: 1.5;
}
.stage-badge.reveal-mode { top: calc(var(--safe-top) + 96px); }
.stage-badge .player { color: var(--csl-chrome); font-weight: 600; }
.stage-badge .break-id { display: inline-block; margin-left: 8px; color: var(--csl-slate); }

.pack-indicator {
  position: absolute;
  top: 142px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--csl-value-fair);
  text-transform: uppercase;
  z-index: 6;
  opacity: 0;
  transition: opacity 300ms ease;
}
.pack-indicator.visible { opacity: 1; }

.chat-ticker {
  position: absolute;
  left: 10px;
  bottom: 72px;
  width: min(240px, 58vw);
  max-height: 120px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 8;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
}
.chat-ticker.hide { display: none; }
.chat-tick {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.3;
  padding: 4px 8px;
  background: linear-gradient(90deg, rgba(19, 24, 31, 0.45), rgba(19, 24, 31, 0.12));
  border-radius: 8px;
  border-left: 2px solid rgba(239, 1, 7, 0.4);
  opacity: 0;
  transform: translateY(8px);
  animation: chat-tick-in 280ms ease forwards;
}
.chat-tick.flash { border-left-color: var(--csl-signal-cyan); }
.chat-tick.react { animation: chat-tick-react 450ms ease forwards; }
.chat-tick .user { font-weight: 600; }
.chat-tick .text { color: rgba(19, 24, 31, 0.88); }
@keyframes chat-tick-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes chat-tick-react {
  0% { opacity: 0; transform: scale(0.92); }
  40% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

.stage-card-area {
  position: absolute;
  inset: 160px 24px 60px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  perspective-origin: 50% 42%;
  pointer-events: none;
  z-index: 2;
}
.stage-card-area.reveal-mode { inset: 170px 16px 60px 16px; pointer-events: auto; overflow: visible; }

.pack-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
.foil-pack {
  width: min(70vw, 240px);
  aspect-ratio: 2 / 3;
  max-height: min(48vh, 360px);
  border-radius: 10px;
  position: relative;
  overflow: visible;
  transform: translateY(-120%) rotate(-4deg) scale(0.88);
  opacity: 0;
  filter: drop-shadow(0 28px 50px rgba(0, 0, 0, 0.7)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
  animation: pack-idle 3.2s ease-in-out infinite;
}
.foil-pack.drop-in {
  animation: pack-drop 550ms cubic-bezier(0.4, 0, 0.2, 1) forwards, pack-idle 3.2s ease-in-out 550ms infinite;
}
.foil-pack.tear .pack-lid {
  animation: pack-lid-tear 650ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.foil-pack.fan-out {
  opacity: 0;
  transition: opacity 220ms ease;
  animation: none;
}

.pack-tear-strip {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  height: 14px;
  border-top: 2px dashed rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  z-index: 4;
  box-shadow: 0 2px 4px rgba(19, 24, 31, 0.12);
}
.pack-lid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 22%;
  z-index: 5;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 98% 92%, 96% 85%, 94% 94%, 92% 86%, 90% 95%, 88% 87%, 86% 93%, 84% 86%, 82% 94%, 80% 88%, 78% 95%, 76% 87%, 74% 93%, 72% 86%, 70% 94%, 68% 88%, 66% 96%, 64% 89%, 62% 95%, 60% 88%, 58% 94%, 56% 87%, 54% 93%, 52% 86%, 50% 94%, 48% 88%, 46% 95%, 44% 87%, 42% 93%, 40% 86%, 38% 94%, 36% 88%, 34% 96%, 32% 89%, 30% 95%, 28% 88%, 26% 94%, 24% 87%, 22% 93%, 20% 86%, 18% 94%, 16% 88%, 14% 95%, 12% 87%, 10% 93%, 8% 86%, 6% 94%, 4% 88%, 2% 96%, 0 88%);
}
.pack-body {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
  /* Explicit premium foil gradient — the brand-var chain collapsed to one blue,
     leaving the pack flat. Deep violet -> royal blue -> navy reads as a real
     holographic wrapper against the light felt. */
  background:
    linear-gradient(165deg, #3B2E6E 0%, #1E3A8A 34%, #0B2A5E 66%, #07142E 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -4px 12px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
.pack-body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.12) 48%, rgba(6, 54, 114, 0.15) 52%, transparent 68%);
  background-size: 220% 220%;
  animation: pack-sheen 2.8s linear infinite;
}
.pack-year {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(28px, 8vw, 42px);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.pack-brand {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 6.5vw, 32px);
  letter-spacing: 0.22em;
  background: linear-gradient(135deg, #fff 0%, #c8d4ff 40%, #fff 60%, #e8d4ff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holo-text 4s ease infinite;
  text-shadow: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
.pack-burst {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, var(--csl-signal-cyan), var(--csl-electric-blue), var(--csl-sheen-violet), var(--csl-sheen-teal), var(--csl-signal-cyan));
  opacity: 0.55;
  mask-image: radial-gradient(circle, #000 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 72%);
  animation: burst-spin 6s linear infinite;
}
.pack-format {
  position: absolute;
  bottom: 16%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
}

@keyframes pack-idle {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(-2deg); }
}
@keyframes pack-drop {
  0% { transform: translateY(-120%) rotate(-4deg) scale(0.88); opacity: 0; }
  70% { transform: translateY(6%) rotate(-2deg) scale(1.03); opacity: 1; }
  100% { transform: translateY(0) rotate(-3deg) scale(1); opacity: 1; }
}
@keyframes pack-lid-tear {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-110%); opacity: 0.6; }
}
@keyframes pack-sheen {
  0% { background-position: 200% 200%; }
  100% { background-position: -200% -200%; }
}
@keyframes holo-text {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes burst-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.card-fan {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  z-index: 2;
}
.card-fan.rifle {
  animation: fan-rifle 450ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes fan-rifle {
  0% { opacity: 0; transform: scale(0.7) translateY(24px); }
  45% { opacity: 1; transform: scale(0.96) translateY(-8px); }
  100% { opacity: 0; transform: scale(1.05) translateY(-36px); }
}
.mini-card {
  width: 52px;
  aspect-ratio: 2.5 / 3.5;
  border-radius: 5px;
  background: linear-gradient(145deg, var(--csl-slate), var(--csl-graphite));
  box-shadow: 0 6px 16px rgba(19, 24, 31, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-left: -18px;
  animation: mini-fan 380ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.mini-card:first-child { margin-left: 0; }
@keyframes mini-fan {
  0% { transform: translateY(20px) rotate(0deg); opacity: 0; }
  100% { transform: translateY(-12px) rotate(var(--rot, -8deg)); opacity: 1; }
}
.mini-card:nth-child(1) { --rot: -14deg; }
.mini-card:nth-child(2) { --rot: -7deg; }
.mini-card:nth-child(3) { --rot: 0deg; }
.mini-card:nth-child(4) { --rot: 7deg; }
.mini-card:nth-child(5) { --rot: 14deg; }

.card {
  width: min(78vw, 320px);
  aspect-ratio: 2.5 / 3.5;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--csl-card-face-top) 0%, var(--csl-card-face-bottom) 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.06),
    0 6px 0 rgba(0, 0, 0, 0.35),
    0 16px 40px rgba(19, 24, 31, 0.45),
    0 32px 64px rgba(0, 0, 0, 0.35),
    inset 0 0 0 2.5px var(--pc-ring, rgba(140, 160, 180, 0.22)),
    0 0 26px 1px var(--pc-glow, transparent);
  display: flex;
  flex-direction: column;
  padding: 0;
  transform: scale(0.65) rotateY(88deg) rotateX(12deg);
  transform-origin: center center;
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms ease;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.card.in { opacity: 1; }
.card.in:not(.flip-in):not(.ssp-reveal),
.card.quick-flash.in,
.card.announce-hold.in {
  transform: scale(1) rotateY(0deg) rotateX(0deg);
}
.card.out {
  transform: scale(0.88) translateY(-48px) rotate(-2deg);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms ease;
}

.card[data-tier="base"].flip-in {
  animation: card-reveal-base 420ms cubic-bezier(0.34, 1.05, 0.45, 1) forwards;
}
.card[data-tier="chrome"].flip-in,
.card[data-tier="refractor"].flip-in,
.card[data-tier="numbered"].flip-in,
.card[data-tier="auto"].flip-in {
  animation: card-reveal-3d 1180ms cubic-bezier(0.34, 1.08, 0.42, 1) forwards;
}
.card.flip-in:not([data-tier="base"]) {
  animation: card-reveal-3d 1180ms cubic-bezier(0.34, 1.08, 0.42, 1) forwards;
}

.card.ssp-reveal { animation: ssp-reveal-3d 1400ms cubic-bezier(0.34, 1.05, 0.42, 1) forwards; }
.card.ssp-reveal.in { opacity: 1; }
.card.ssp-reveal.settle.in {
  transform: scale(1) rotateY(0deg) rotateX(0deg);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes card-reveal-base {
  0% { transform: scale(0.88) rotateY(22deg) rotateX(4deg); opacity: 0; }
  100% { transform: scale(1) rotateY(0deg) rotateX(0deg); opacity: 1; }
}
@keyframes card-reveal-3d {
  0% { transform: scale(0.62) rotateY(-78deg) rotateX(22deg) translateZ(-48px); opacity: 0; }
  28% { transform: scale(0.88) rotateY(-42deg) rotateX(10deg) translateZ(24px); opacity: 0.82; }
  52% { transform: scale(1.06) rotateY(12deg) rotateX(-6deg) translateZ(36px); opacity: 1; }
  72% { transform: scale(1.02) rotateY(-4deg) rotateX(2deg) translateZ(12px); opacity: 1; }
  100% { transform: scale(1) rotateY(0deg) rotateX(0deg) translateZ(0); opacity: 1; }
}
@keyframes ssp-reveal-3d {
  0% { transform: scale(0.7) rotateY(-88deg) rotateX(24deg) translateZ(-56px); opacity: 0; }
  30% { transform: scale(1.02) rotateY(-48deg) rotateX(12deg) translateZ(32px); opacity: 1; }
  50% { transform: scale(1.18) rotateY(6deg) rotateX(-4deg) translateZ(48px); opacity: 1; }
  100% { transform: scale(1.15) rotateY(0deg) rotateX(0deg) translateZ(0); opacity: 1; }
}

.card-stripe {
  height: 4px;
  flex-shrink: 0;
}
.card-stripe-bottom { height: 2px; }
.card[data-team="tigers"] .card-stripe { background: linear-gradient(90deg, var(--tigers-primary), var(--tigers-secondary)); }
.card[data-team="pirates"] .card-stripe { background: linear-gradient(90deg, var(--pirates-primary), var(--pirates-secondary)); }
.card[data-team="brewers"] .card-stripe { background: linear-gradient(90deg, var(--brewers-primary), var(--brewers-secondary)); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 4px;
}
.card-set {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(60, 70, 84, 0.75);
}
.card-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--csl-electric-blue);
}
.card-badge-empty { visibility: hidden; }

.card-photo {
  position: relative;
  margin: 0 10px;
  flex: 1;
  min-height: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(19, 24, 31, 0.10);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45);
}
.card-photo-bg {
  position: absolute;
  inset: 0;
}
.card[data-team="tigers"] .card-photo-bg {
  background: radial-gradient(ellipse at 50% 30%, var(--tigers-secondary) 0%, var(--tigers-primary) 55%, #060d18 100%);
}
.card[data-team="pirates"] .card-photo-bg {
  background: radial-gradient(ellipse at 50% 30%, var(--pirates-primary) 0%, #2a2200 45%, var(--pirates-secondary) 100%);
}
.card[data-team="brewers"] .card-photo-bg {
  background: radial-gradient(ellipse at 50% 30%, var(--brewers-secondary) 0%, var(--brewers-primary) 55%, #080f1c 100%);
}
.card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}
.card-silhouette {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 72%;
  background: linear-gradient(180deg, transparent 0%, rgba(19, 24, 31, 0.45) 100%);
  clip-path: polygon(35% 100%, 42% 55%, 48% 38%, 52% 38%, 58% 55%, 65% 100%);
  opacity: 0.45;
}
.card-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0.55;
  box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.2), 0 4px 16px rgba(0, 0, 0, 0.35);
}
.card[data-team="tigers"] .card-glyph {
  background: linear-gradient(145deg, var(--tigers-secondary), var(--tigers-primary));
}
.card[data-team="pirates"] .card-glyph {
  background: linear-gradient(145deg, var(--pirates-primary), #1a1400);
  color: #1a1400;
}
.card[data-team="brewers"] .card-glyph {
  background: linear-gradient(145deg, var(--brewers-secondary), var(--brewers-primary));
  color: var(--brewers-primary);
}

/* ── Chrome-refractor holo stack (photo layers + frame + glints) ───────── */
.card-holo,
.card-holo-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  will-change: opacity, transform;
}

.card-photo::before {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      118deg,
      rgba(239, 1, 7, 0) 0%,
      rgba(239, 1, 7, 0.22) 7%,
      rgba(6, 54, 114, 0.28) 14%,
      rgba(6, 54, 114, 0.26) 21%,
      rgba(239, 1, 7, 0.24) 28%,
      rgba(239, 1, 7, 0.2) 35%,
      rgba(6, 54, 114, 0) 42%
    ),
    conic-gradient(
      from var(--angle) at 48% 38%,
      rgba(239, 1, 7, 0.55),
      rgba(6, 54, 114, 0.45),
      rgba(6, 54, 114, 0.5),
      rgba(239, 1, 7, 0.48),
      rgba(200, 230, 255, 0.35),
      rgba(239, 1, 7, 0.55)
    );
  background-size: 220% 220%, 100% 100%;
  mix-blend-mode: color-dodge;
  filter: saturate(1.15);
}

.card.in .card-photo::before,
.card.flip-in.in .card-photo::before,
.card.ssp-reveal.in .card-photo::before {
  animation: foil-mesh-shift 4.8s linear infinite;
}

.card[data-tier="base"].in .card-photo::before,
.card[data-tier="base"].quick-flash.in .card-photo::before {
  opacity: 0;
  animation: none;
}

.card[data-tier="chrome"].in .card-photo::before,
.card[data-tier="chrome"].quick-flash.in .card-photo::before,
.card[data-tier="chrome"].foil-shimmer.in .card-photo::before {
  opacity: 0.14;
  animation-duration: 6.2s;
}

.card[data-tier="refractor"].in .card-photo::before,
.card[data-tier="numbered"].in .card-photo::before,
.card[data-tier="refractor"].quick-flash.in .card-photo::before,
.card[data-tier="numbered"].quick-flash.in .card-photo::before,
.card[data-tier="refractor"].foil-shimmer.in .card-photo::before,
.card[data-tier="numbered"].foil-shimmer.in .card-photo::before {
  opacity: 0.28;
  animation-duration: 4.2s;
}

.card[data-tier="auto"].in .card-photo::before,
.card[data-tier="auto"].quick-flash.in .card-photo::before,
.card[data-tier="auto"].foil-shimmer.in .card-photo::before {
  opacity: 0.38;
  animation-duration: 3.2s;
}

.card[data-tier="ssp"].in .card-photo::before,
.card[data-tier="ssp"].quick-flash.in .card-photo::before,
.card[data-tier="ssp"].foil-shimmer.in .card-photo::before,
.card.ssp-reveal.in .card-photo::before {
  opacity: 0.48;
  animation-duration: 2.4s;
}

.card-holo {
  z-index: 1;
  mix-blend-mode: screen;
  background: conic-gradient(
    from var(--angle) at 50% 40%,
    rgba(239, 1, 7, 0.75),
    rgba(6, 54, 114, 0.65),
    rgba(6, 54, 114, 0.7),
    rgba(239, 1, 7, 0.68),
    rgba(230, 245, 255, 0.55),
    rgba(239, 1, 7, 0.75)
  );
}

.card-holo-sweep {
  z-index: 2;
  mix-blend-mode: overlay;
  background: linear-gradient(
    118deg,
    transparent 0%,
    transparent calc(var(--sheen-pos) - 10%),
    rgba(255, 255, 255, 0.06) calc(var(--sheen-pos) - 4%),
    rgba(255, 255, 255, 0.42) calc(var(--sheen-pos) + 1%),
    rgba(239, 1, 7, 0.38) var(--sheen-pos),
    rgba(6, 54, 114, 0.32) calc(var(--sheen-pos) + 6%),
    rgba(6, 54, 114, 0.26) calc(var(--sheen-pos) + 11%),
    rgba(239, 1, 7, 0.2) calc(var(--sheen-pos) + 16%),
    transparent calc(var(--sheen-pos) + 28%),
    transparent 100%
  );
}

.card[data-tier="base"].in .card-holo,
.card[data-tier="base"].quick-flash.in .card-holo {
  opacity: 0.08;
  background: linear-gradient(
    125deg,
    transparent 42%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(239, 1, 7, 0.1) 54%,
    transparent 62%
  );
  mix-blend-mode: soft-light;
  animation: holo-spin 8s linear infinite;
}

.card[data-tier="base"].in .card-holo-sweep,
.card[data-tier="base"].quick-flash.in .card-holo-sweep {
  opacity: 0.1;
  animation: subtle-sheen-rake 420ms ease-out forwards, holo-sweep-idle 5.5s ease-in-out 420ms infinite;
}

.card[data-tier="chrome"].in .card-holo,
.card[data-tier="chrome"].quick-flash.in .card-holo,
.card[data-tier="chrome"].foil-shimmer.in .card-holo {
  opacity: 0.32;
  background:
    linear-gradient(
      112deg,
      transparent 0%,
      transparent calc(var(--sheen-pos) - 8%),
      rgba(255, 255, 255, 0.1) calc(var(--sheen-pos) - 2%),
      rgba(239, 1, 7, 0.45) var(--sheen-pos),
      rgba(6, 54, 114, 0.3) calc(var(--sheen-pos) + 7%),
      rgba(255, 255, 255, 0.32) calc(var(--sheen-pos) + 11%),
      transparent calc(var(--sheen-pos) + 24%),
      transparent 100%
    ),
    conic-gradient(
      from var(--angle) at 50% 42%,
      rgba(239, 1, 7, 0.7),
      rgba(6, 54, 114, 0.55),
      rgba(200, 220, 255, 0.45),
      rgba(239, 1, 7, 0.7)
    );
  animation: chrome-sheen-rake 520ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards,
             holo-spin 5.5s linear 520ms infinite;
}

.card[data-tier="chrome"].in .card-holo-sweep,
.card[data-tier="chrome"].quick-flash.in .card-holo-sweep,
.card[data-tier="chrome"].foil-shimmer.in .card-holo-sweep {
  opacity: 0.24;
  background: linear-gradient(
    125deg,
    transparent 36%,
    rgba(255, 255, 255, 0.32) 47%,
    rgba(239, 1, 7, 0.22) 52%,
    rgba(6, 54, 114, 0.14) 56%,
    transparent 66%
  );
  background-size: 300% 300%;
  animation: subtle-sheen-rake 520ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards,
             holo-sweep 3.2s linear 520ms infinite;
}

.card[data-tier="refractor"].in .card-holo,
.card[data-tier="numbered"].in .card-holo,
.card[data-tier="refractor"].quick-flash.in .card-holo,
.card[data-tier="numbered"].quick-flash.in .card-holo,
.card[data-tier="refractor"].foil-shimmer.in .card-holo,
.card[data-tier="numbered"].foil-shimmer.in .card-holo {
  opacity: 0.46;
  animation: rainbow-sheen-rake 680ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards,
             holo-spin 3.8s linear 680ms infinite;
}

.card[data-tier="refractor"].in .card-holo-sweep,
.card[data-tier="numbered"].in .card-holo-sweep,
.card[data-tier="refractor"].quick-flash.in .card-holo-sweep,
.card[data-tier="numbered"].quick-flash.in .card-holo-sweep,
.card[data-tier="refractor"].foil-shimmer.in .card-holo-sweep,
.card[data-tier="numbered"].foil-shimmer.in .card-holo-sweep {
  opacity: 0.34;
  animation: rainbow-sheen-rake 680ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards,
             holo-sweep 2.6s linear 680ms infinite;
}

.card[data-tier="auto"].in .card-holo,
.card[data-tier="auto"].quick-flash.in .card-holo,
.card[data-tier="auto"].foil-shimmer.in .card-holo {
  opacity: 0.56;
  animation: rainbow-sheen-rake 680ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards,
             holo-spin 2.8s linear 680ms infinite;
}

.card[data-tier="auto"].in .card-holo-sweep,
.card[data-tier="auto"].quick-flash.in .card-holo-sweep,
.card[data-tier="auto"].foil-shimmer.in .card-holo-sweep {
  opacity: 0.42;
  animation: rainbow-sheen-rake 680ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards,
             holo-sweep 2s linear 680ms infinite;
}

.card[data-tier="ssp"].in .card-holo,
.card[data-tier="ssp"].quick-flash.in .card-holo,
.card[data-tier="ssp"].foil-shimmer.in .card-holo,
.card.ssp-reveal.in .card-holo {
  opacity: 0.62;
  animation: rainbow-sheen-rake 900ms cubic-bezier(0.34, 1.05, 0.42, 1) forwards,
             holo-spin 1.9s linear 900ms infinite;
}

.card[data-tier="ssp"].in .card-holo-sweep,
.card[data-tier="ssp"].quick-flash.in .card-holo-sweep,
.card[data-tier="ssp"].foil-shimmer.in .card-holo-sweep,
.card.ssp-reveal.in .card-holo-sweep {
  opacity: 0.46;
  animation: rainbow-sheen-rake 900ms cubic-bezier(0.34, 1.05, 0.42, 1) forwards,
             holo-sweep 1.65s linear 900ms infinite;
}

.card.flip-in.in .card-holo,
.card.flip-in.foil-shimmer.in .card-holo {
  animation: chrome-sheen-rake 1180ms cubic-bezier(0.34, 1.08, 0.42, 1) forwards,
             holo-spin 4.2s linear 1180ms infinite;
}
.card.flip-in.in:not([data-tier="base"]):not([data-tier="chrome"]) .card-holo,
.card.flip-in.foil-shimmer.in:not([data-tier="base"]):not([data-tier="chrome"]) .card-holo {
  animation: rainbow-sheen-rake 1180ms cubic-bezier(0.34, 1.08, 0.42, 1) forwards,
             holo-spin 3.4s linear 1180ms infinite;
}
.card.flip-in.in .card-holo-sweep,
.card.flip-in.foil-shimmer.in .card-holo-sweep {
  animation: rainbow-sheen-rake 1180ms cubic-bezier(0.34, 1.08, 0.42, 1) forwards,
             holo-sweep 2.4s linear 1180ms infinite;
}

.card.announce-hold.in .card-holo-sweep,
.card.announce-big.announce-hold.in .card-holo-sweep {
  opacity: 0.36;
}
.card.announce-big.announce-hold.in[data-tier="auto"] .card-holo-sweep,
.card.announce-big.announce-hold.in[data-tier="ssp"] .card-holo-sweep {
  opacity: 0.48;
}

.card.in::before,
.card.flip-in.in::before,
.card.ssp-reveal.in::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--angle) at 50% 50%,
    rgba(239, 1, 7, 0.85),
    rgba(6, 54, 114, 0.75),
    rgba(6, 54, 114, 0.8),
    rgba(239, 1, 7, 0.78),
    rgba(230, 245, 255, 0.65),
    rgba(239, 1, 7, 0.85)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: holo-spin 4.5s linear infinite;
}

.card[data-tier="chrome"].in::before,
.card[data-tier="refractor"].in::before,
.card[data-tier="numbered"].in::before,
.card[data-tier="auto"].in::before,
.card[data-tier="ssp"].in::before,
.card[data-tier="chrome"].quick-flash.in::before,
.card[data-tier="refractor"].quick-flash.in::before,
.card[data-tier="numbered"].quick-flash.in::before,
.card[data-tier="auto"].quick-flash.in::before,
.card[data-tier="ssp"].quick-flash.in::before {
  opacity: 0.55;
  box-shadow:
    inset 0 0 18px rgba(239, 1, 7, 0.12),
    0 0 14px rgba(6, 54, 114, 0.18);
}

.card[data-tier="refractor"].in::before,
.card[data-tier="numbered"].in::before,
.card[data-tier="refractor"].quick-flash.in::before,
.card[data-tier="numbered"].quick-flash.in::before {
  opacity: 0.72;
}

.card[data-tier="auto"].in::before,
.card[data-tier="ssp"].in::before,
.card[data-tier="auto"].quick-flash.in::before,
.card[data-tier="ssp"].quick-flash.in::before,
.card.ssp-reveal.in::before {
  opacity: 0.88;
  box-shadow:
    inset 0 0 28px rgba(239, 1, 7, 0.2),
    0 0 22px rgba(6, 54, 114, 0.28),
    0 0 36px rgba(6, 54, 114, 0.15);
}

.card[data-tier="auto"].in::after,
.card[data-tier="ssp"].in::after,
.card[data-tier="auto"].quick-flash.in::after,
.card[data-tier="ssp"].quick-flash.in::after,
.card[data-tier="auto"].foil-shimmer.in::after,
.card[data-tier="ssp"].foil-shimmer.in::after,
.card.ssp-reveal.in::after {
  content: "";
  position: absolute;
  inset: 8% 6%;
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 0.55%),
    radial-gradient(circle at 72% 18%, rgba(200, 240, 255, 0.9) 0%, rgba(200, 240, 255, 0) 0.45%),
    radial-gradient(circle at 84% 62%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 0.5%),
    radial-gradient(circle at 34% 78%, rgba(239, 1, 7, 0.75) 0%, rgba(239, 1, 7, 0) 0.4%),
    radial-gradient(circle at 56% 44%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 0.35%);
  background-size: 100% 100%;
  mix-blend-mode: screen;
  animation: glint-twinkle 2.4s ease-in-out infinite;
}

.card[data-tier="auto"].in::after,
.card[data-tier="auto"].quick-flash.in::after,
.card[data-tier="auto"].foil-shimmer.in::after {
  opacity: 0.55;
}

.card[data-tier="ssp"].in::after,
.card[data-tier="ssp"].quick-flash.in::after,
.card[data-tier="ssp"].foil-shimmer.in::after,
.card.ssp-reveal.in::after {
  opacity: 0.78;
  animation: glint-twinkle 1.6s ease-in-out infinite, sparkle-drift 3.2s linear infinite;
}

.card.flip-in.foil-shimmer .card-photo,
.card.in .card-photo {
  transform-style: preserve-3d;
}

.card.chrome-edge,
.card[data-tier="chrome"].in,
.card[data-tier="refractor"].in,
.card[data-tier="numbered"].in,
.card[data-tier="auto"].in,
.card[data-tier="ssp"].in {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.08),
    0 6px 0 rgba(0, 0, 0, 0.35),
    0 16px 40px rgba(19, 24, 31, 0.45),
    0 0 0 1px rgba(180, 210, 235, 0.28),
    0 0 18px rgba(239, 1, 7, 0.12);
}

.card-auto-sticker {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 4px 10px 4px 8px;
  background: linear-gradient(135deg, var(--csl-steel), var(--csl-chrome), var(--csl-signal-cyan));
  border-radius: 4px;
  transform: rotate(-6deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 12px rgba(239, 1, 7, 0.35);
}
.card-auto-sticker span {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  color: #13181F;
  letter-spacing: 0.04em;
}
.card[data-tier="auto"] {
  animation: auto-glow 2s ease-in-out infinite alternate;
}
@keyframes auto-glow {
  0% { box-shadow: 0 6px 0 rgba(0,0,0,0.35), 0 20px 50px rgba(0,0,0,0.6), 0 0 0 2px rgba(15, 157, 99,0.5), 0 0 24px rgba(15, 157, 99,0.25); }
  100% { box-shadow: 0 6px 0 rgba(0,0,0,0.35), 0 24px 60px rgba(0,0,0,0.65), 0 0 0 3px rgba(239, 1, 7,0.55), 0 0 40px rgba(15, 157, 99,0.45); }
}

.card-number-stamp {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border: 1px solid rgba(19, 24, 31, 0.15);
  border-radius: 4px;
  background: rgba(246, 248, 250, 0.92);
  color: #5B6675;
}
.card[data-print-run="150"] .card-number-stamp,
.card[data-print-run="199"] .card-number-stamp,
.card[data-print-run="299"] .card-number-stamp {
  color: #5B6675;
  border-color: rgba(200, 210, 225, 0.5);
}
.card[data-print-run="99"] .card-number-stamp,
.card[data-print-run="50"] .card-number-stamp {
  color: #063672;
  border-color: rgba(6, 54, 114, 0.55);
}
.card[data-print-run="5"] .card-number-stamp {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.65);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(255, 80, 80, 0.45);
}

.card-info {
  padding: 10px 12px 4px;
}
.card-player {
  font-family: var(--font-display);
  font-size: clamp(20px, 5.5vw, 24px);
  font-weight: 700;
  color: var(--csl-steel);
  line-height: 1.05;
  text-shadow: 0 1px 2px rgba(19, 24, 31, 0.12);
}
.card-pos-team {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--csl-value-fair);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px 8px;
}
.card-num,
.card-parallel {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(60, 70, 84, 0.85);
}
.card-parallel { text-align: right; font-size: 9px; }

.card-value-wrap {
  position: absolute;
  bottom: -38px;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 6;
}
.card[data-tier="ssp"] .card-value-wrap,
.card.ssp-reveal .card-value-wrap {
  bottom: 22%;
}
.card-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  color: var(--csl-steel);
  text-shadow: 0 1px 3px rgba(19, 24, 31, 0.15);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.card.in .card-value {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 400ms;
}
.card[data-tier="auto"] .card-value { font-size: 30px; color: var(--csl-value-strong); }
.card[data-tier="ssp"] .card-value,
.card.ssp-reveal.in .card-value {
  font-size: clamp(48px, 14vw, 64px);
  font-weight: 700;
  background: linear-gradient(135deg, color-mix(in srgb, var(--csl-steel) 90%, var(--csl-signal-cyan)), var(--csl-signal-cyan), color-mix(in srgb, var(--csl-signal-cyan) 75%, var(--csl-ink)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(239, 1, 7, 0.35));
}
.card[data-tier="ssp"] {
  animation: ssp-edge 900ms ease-in-out infinite alternate;
}
@keyframes ssp-edge {
  0% { box-shadow: 0 6px 0 rgba(0,0,0,0.4), 0 28px 70px rgba(0,0,0,0.75), 0 0 0 2px rgba(255,80,80,0.65), 0 0 50px rgba(255,60,60,0.35), inset 0 0 30px rgba(239, 1, 7,0.08); }
  100% { box-shadow: 0 6px 0 rgba(0,0,0,0.4), 0 32px 80px rgba(0,0,0,0.8), 0 0 0 3px rgba(239, 1, 7,0.85), 0 0 80px rgba(239, 1, 7,0.45), inset 0 0 40px rgba(239, 1, 7,0.15); }
}

@keyframes holo-spin {
  to { --angle: 360deg; }
}
@keyframes holo-sweep {
  0% { background-position: 200% 200%; }
  100% { background-position: -200% -200%; }
}
@keyframes holo-sweep-idle {
  0%, 100% { background-position: 180% 180%; }
  50% { background-position: -160% -160%; }
}
@keyframes foil-mesh-shift {
  0% { background-position: 0% 0%, 50% 50%; transform: translate3d(0, 0, 0); }
  50% { background-position: 100% 100%, 50% 50%; }
  100% { background-position: 200% 200%, 50% 50%; transform: translate3d(0, 0, 0); }
}
@keyframes chrome-sheen-rake {
  0% { --sheen-pos: -120%; }
  55% { --sheen-pos: 58%; }
  100% { --sheen-pos: 130%; }
}
@keyframes rainbow-sheen-rake {
  0% { --sheen-pos: -130%; }
  50% { --sheen-pos: 52%; }
  100% { --sheen-pos: 140%; }
}
@keyframes subtle-sheen-rake {
  0% { --sheen-pos: -110%; }
  100% { --sheen-pos: 125%; }
}
@keyframes glint-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  35% { opacity: 1; transform: scale(1.02); }
  70% { opacity: 0.5; transform: scale(0.98); }
}
@keyframes sparkle-drift {
  0% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%; }
  100% { background-position: 8% 6%, 92% 10%, 88% 94%, 12% 88%, 54% 46%; }
}

.stage-flash {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 80ms ease;
}
.stage-flash.flash { opacity: 0.85; }
.stage-flash.flash-gold {
  background: linear-gradient(180deg, var(--csl-steel) 0%, color-mix(in srgb, var(--csl-signal-cyan) 35%, var(--csl-steel)) 100%);
  opacity: 0.95;
}

.gold-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(239, 1, 7, 0.25) 0%, rgba(19, 24, 31, 0.08) 50%, transparent 75%);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  transition: opacity 400ms ease;
}
.gold-overlay.active { opacity: 1; }

.light-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vmax;
  height: 60vmax;
  margin: -30vmax 0 0 -30vmax;
  transform: scale(0.1);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 247, 250, 0.95) 0%, rgba(239, 1, 7, 0.6) 30%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 11;
  will-change: transform, opacity;
}
.light-burst.active {
  animation: light-burst 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* GPU-only bloom: scale + opacity (no width/height = no layout/paint storm). */
@keyframes light-burst {
  0% { transform: scale(0.1); opacity: 0.95; }
  100% { transform: scale(3.4); opacity: 0; }
}

.stage-shake {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
}
/* Screen-shake is isolated to the card layer (.stage-card-area) — NOT the
   stage-wrap, whose gradient + felt-noise ::before/::after would repaint every
   frame. Amplitude is graded by --shake-amp (0..1) off the card's rarity. */
.stage-card-area.shake {
  animation: screen-shake 180ms ease-in-out;
}
@keyframes screen-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(calc(-5px * var(--shake-amp, 1)), calc(1px * var(--shake-amp, 1)), 0); }
  40% { transform: translate3d(calc(5px * var(--shake-amp, 1)), calc(-1px * var(--shake-amp, 1)), 0); }
  60% { transform: translate3d(calc(-3px * var(--shake-amp, 1)), 0, 0); }
  80% { transform: translate3d(calc(3px * var(--shake-amp, 1)), 0, 0); }
}

.stage-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(19, 24, 31, 0.15) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  transition: opacity 400ms ease;
}
.stage-vignette.active { opacity: 1; }
.stage-vignette.ssp-vignette {
  background: radial-gradient(ellipse at center, rgba(239, 1, 7, 0.08) 0%, rgba(19, 24, 31, 0.20) 65%);
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 11;
}
.particle.gold { width: 8px; height: 8px; }
.particle.beam {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  transform-origin: center bottom;
}

.watermark {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(60, 70, 84, 0.35);
  pointer-events: none;
  z-index: 4;
}
.watermark::before { content: "▢ "; color: rgba(239, 1, 7, 0.45); }

.voice-hype .stage-badge .player { font-weight: 700; letter-spacing: 0.02em; }
.voice-hype .card-player { letter-spacing: -0.01em; }

.buy-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: var(--csl-ink);
  transition: transform 400ms cubic-bezier(0.2, 0.9, 0.3, 1), opacity 350ms ease;
}
.buy-screen.exit {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.buy-header {
  padding: 16px 16px 8px;
  text-align: center;
}
.buy-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--csl-steel);
  margin: 0 0 4px;
}
.buy-header p {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--csl-value-fair);
  margin: 0;
  letter-spacing: 0.06em;
}

.buy-cards {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 12px 100px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}

.buy-count {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--csl-steel);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(19, 24, 31, 0.08);
  border-radius: 8px;
}

.buy-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 4px 4px;
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.35;
  color: var(--csl-value-fair);
}

/* Out-of-paper-money banner — shown when the balance can't cover the cheapest spot */
.broke-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--csl-signal-cyan);
  border-radius: 12px;
}
.broke-banner[hidden] { display: none; }
.broke-banner p {
  flex: 1;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--csl-graphite);
}
.broke-banner .broke-reload {
  flex-shrink: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--csl-signal-cyan);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

/* E4 — objective / stakes / structure / tension intro above the buy scroll */
.play-intro {
  position: relative;
  flex: 0 0 auto;
  margin: 0 12px 6px;
  padding: 14px 14px 12px;
  background: var(--csl-graphite);
  border: 1px solid var(--csl-slate);
  border-radius: 14px;
  overflow: hidden;
  transition: max-height 320ms cubic-bezier(0.2, 0.9, 0.3, 1), opacity 240ms ease,
    margin 320ms ease, padding 320ms ease, border-width 320ms ease;
  max-height: 360px;
}
.play-intro.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  pointer-events: none;
}
.play-intro-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--csl-value-fair);
  cursor: pointer;
}
.play-intro-dismiss:active { background: rgba(19, 24, 31, 0.06); }
.play-intro-dismiss svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.play-intro-lede {
  margin: 0 28px 12px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--csl-steel);
}
.play-steps {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.play-steps li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.play-step-n {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--csl-signal-cyan);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.play-step-t {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.35;
  color: var(--csl-chrome);
}
.play-payoff {
  border-top: 1px solid var(--csl-slate);
  padding-top: 10px;
}
.play-payoff-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--csl-value-fair);
  margin-bottom: 4px;
}
.play-payoff-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--csl-steel);
}
.play-payoff-text .band-strong,
.play-payoff-text .band-fair,
.play-payoff-text .band-pricey,
.play-payoff-text .band-review {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 339px) {
  .buy-cards {
    grid-template-columns: 1fr;
  }
}

.team-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(19, 24, 31, 0.10);
  box-shadow: 0 1px 2px rgba(19, 24, 31, 0.05), 0 4px 12px rgba(19, 24, 31, 0.06);
  border-radius: 10px;
  padding: 8px 8px 8px 12px;
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  /* Do NOT add overflow:hidden here — on the 2-col grid it collapses the item's
     automatic min-size to 0, shrinking the row below the card's content and
     clipping the price/band/chase. */
}
.team-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.team-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
}
.team-card[data-team="tigers"]::before,
.team-card[data-team="tigers"]::after {
  background: linear-gradient(180deg, var(--tigers-secondary), var(--tigers-primary));
}
.team-card[data-team="pirates"]::before,
.team-card[data-team="pirates"]::after {
  background: linear-gradient(180deg, var(--pirates-primary), var(--pirates-secondary));
}
.team-card[data-team="brewers"]::before,
.team-card[data-team="brewers"]::after {
  background: linear-gradient(180deg, var(--brewers-secondary), var(--brewers-primary));
}
.team-card.selected {
  border-color: var(--csl-signal-cyan);
  box-shadow: 0 0 0 1px var(--csl-signal-cyan), 0 8px 24px rgba(19, 24, 31, 0.12);
}
.team-card-check {
  position: absolute;
  top: 6px; right: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--csl-signal-cyan);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
}
.team-card.selected .team-card-check { display: flex; }

.team-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
  padding-right: 14px;
}
.team-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--csl-steel);
  line-height: 1.15;
}
.ltw-badge {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
}
.ltw-awful { background: rgba(76, 91, 168, 0.18); color: var(--csl-value-flag); }
.ltw-bad { background: rgba(242, 169, 59, 0.2); color: var(--csl-value-rich); }
.ltw-ok { background: rgba(91, 102, 117, 0.2); color: var(--csl-value-fair); }
.ltw-good { background: rgba(239, 1, 7, 0.15); color: var(--csl-signal-cyan); }
.ltw-great { background: rgba(15, 157, 99, 0.2); color: var(--csl-value-strong); }

.team-pricing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-bottom: 4px;
}
.spot-price-lg {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--csl-steel);
  line-height: 1;
}
.fair-proxy-sm {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--csl-value-fair);
}
.delta-line {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  margin-bottom: 3px;
}
.delta-pos { color: var(--csl-value-strong); }
.delta-neg { color: var(--csl-value-rich); }

.value-bar {
  margin-bottom: 4px;
}
.value-bar-track {
  position: relative;
  height: 5px;
  background: rgba(19, 24, 31, 0.06);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(19, 24, 31, 0.10);
}
.value-bar-fair,
.value-bar-spot {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
  transition: width 300ms ease;
}
.value-bar-fair {
  background: linear-gradient(90deg, rgba(15, 157, 99, 0.5), rgba(15, 157, 99, 0.85));
  z-index: 1;
}
.value-bar-spot {
  background: linear-gradient(90deg, rgba(91, 102, 117, 0.35), rgba(19, 24, 31, 0.20));
  z-index: 2;
  mix-blend-mode: normal;
}
.value-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--csl-value-fair);
  letter-spacing: 0.03em;
}

.band-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.band-pill.strong {
  background: rgba(15, 157, 99, 0.22);
  color: var(--csl-value-strong);
  border: 1px solid rgba(15, 157, 99, 0.55);
  box-shadow: 0 0 20px rgba(15, 157, 99, 0.25);
}
.band-pill.fair {
  background: rgba(91, 102, 117, 0.18);
  color: var(--csl-value-fair);
  border: 1px solid rgba(91, 102, 117, 0.4);
}
.band-pill.pricey {
  background: rgba(198, 122, 18, 0.16);
  color: var(--csl-value-rich);
  border: 1px solid rgba(198, 122, 18, 0.45);
}

.chase-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 0;
}
.chase-chip {
  font-family: var(--font-mono);
  font-size: 7px;
  line-height: 1.2;
  background: var(--csl-graphite);
  border: 1px solid rgba(19, 24, 31, 0.10);
  border-radius: 4px;
  padding: 2px 4px;
  color: var(--csl-chrome);
}
.chase-chip .tag { display: block; color: var(--csl-value-fair); font-size: 6px; margin-top: 0; }

.education-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--csl-chrome);
  margin: 0;
  padding-left: 4px;
  border-left: 2px solid rgba(91, 102, 117, 0.35);
}
.edu-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(239, 1, 7, 0.9), rgba(6, 54, 114, 0.85));
  box-shadow: 0 0 8px rgba(239, 1, 7, 0.35);
  position: relative;
}
.edu-icon::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 5px;
  background: var(--csl-ink);
  border-radius: 1px;
}
.edu-icon::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--csl-ink);
  border-radius: 50%;
}
.edu-text { flex: 1; }

.buy-cta-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: linear-gradient(180deg, transparent, var(--csl-ink) 30%);
  z-index: 2;
}
.lock-btn {
  width: 100%;
  background: var(--csl-signal-cyan);
  color: #FFFFFF;
  border: 0;
  border-radius: 14px;
  padding: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 200ms ease;
  box-shadow: 0 0 28px rgba(239, 1, 7, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.lock-btn:active { transform: scale(0.98); }
.lock-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.stage-empty {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.stage-empty.visible { opacity: 1; pointer-events: auto; }
.stage-empty h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--csl-steel);
  margin: 0 0 8px;
}
.stage-empty p {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--csl-value-fair);
  margin: 0 0 24px;
  max-width: 320px;
}
.run-btn {
  background: var(--csl-signal-cyan);
  color: #FFFFFF;
  border: 0;
  border-radius: 14px;
  padding: 22px 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 100ms ease, background 120ms ease;
  box-shadow: 0 0 0 0 rgba(239, 1, 7, 0.7);
  animation: run-pulse 1800ms ease-in-out infinite;
}
.run-btn:active { transform: scale(0.97); }
.run-btn[disabled] { background: var(--csl-slate); color: var(--csl-value-fair); cursor: not-allowed; animation: none; }
@keyframes run-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 1, 7, 0.55); }
  70% { box-shadow: 0 0 0 24px rgba(239, 1, 7, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 1, 7, 0); }
}

.state-badge {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--safe-bottom) + 18px);
  z-index: 6;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--csl-slate);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--csl-value-fair);
  pointer-events: none;
  transition: color 200ms ease, border-color 200ms ease;
}
.state-badge.ready { color: var(--csl-signal-cyan); border-color: var(--csl-signal-cyan); }
.state-badge.running { color: var(--csl-value-strong); border-color: var(--csl-value-strong); }
.state-badge.buy { color: var(--csl-chrome); border-color: var(--csl-slate); }

.sheet {
  position: relative;
  z-index: 30;
  background: var(--csl-graphite);
  border-top: 1px solid var(--csl-slate);
  transition: height 280ms cubic-bezier(0.2, 0.9, 0.3, 1);
  height: calc(var(--sheet-collapsed-h) + var(--safe-bottom));
  overflow: hidden;
  padding-bottom: var(--safe-bottom);
}
.sheet.expanded { height: 62%; }
.sheet.scorecard {
  height: 100%;
  background: linear-gradient(180deg, var(--csl-graphite), var(--csl-ink));
  transition: height 500ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.sheet.hidden-buy { visibility: hidden; height: 0; padding: 0; border: 0; }

.sheet-handle {
  width: 36px; height: 4px;
  background: var(--csl-slate);
  border-radius: 2px;
  margin: 8px auto 6px;
  cursor: pointer;
}
.sheet-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 16px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--csl-value-fair);
}
.sheet-header .total { font-size: 14px; color: var(--csl-steel); font-weight: 600; }
.sheet-header .total.up { color: var(--csl-value-strong); }
.sheet-header .total.down { color: var(--csl-value-flag); }

.spot-scroll {
  display: flex;
  gap: 8px;
  padding: 4px 12px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.spot-scroll::-webkit-scrollbar { display: none; }

.spot-tile {
  flex: 0 0 auto;
  min-width: 110px;
  background: #FFFFFF;
  border: 1px solid rgba(19, 24, 31, 0.10);
  box-shadow: 0 1px 3px rgba(19, 24, 31, 0.06);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.spot-tile.active { border-color: var(--csl-signal-cyan); box-shadow: 0 0 0 1px var(--csl-signal-cyan); }
.spot-tile .team { font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 600; color: var(--csl-steel); white-space: nowrap; }
.spot-tile .meta { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--csl-value-fair); }
.spot-tile .band { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; }
.band-strong { color: var(--csl-value-strong); }
.band-fair { color: var(--csl-value-fair); }
.band-pricey { color: var(--csl-value-rich); }
.band-review { color: var(--csl-value-flag); }
.band-flag { color: var(--csl-value-flag); }

.spot-detail {
  display: none;
  padding: 0 16px 24px;
  overflow-y: auto;
  height: calc(100% - 80px);
  -webkit-overflow-scrolling: touch;
}
.sheet.expanded .spot-detail { display: block; }
.sheet.expanded .spot-scroll { display: none; }

.spot-detail-card {
  background: #FFFFFF;
  border: 1px solid rgba(19, 24, 31, 0.10);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}
.spot-detail-card.active { border-color: var(--csl-signal-cyan); }
.spot-detail-card header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.spot-detail-card .team-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; color: var(--csl-steel); }
.spot-detail-card .spot-price { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--csl-value-fair); }
.pull-list { display: flex; flex-direction: column; gap: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.pull-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dotted rgba(19, 24, 31, 0.10); }
.pull-row:last-child { border-bottom: 0; }
.pull-row .name { color: var(--csl-chrome); }
.pull-row .val { color: var(--csl-steel); }
.pull-row[data-tier="auto"] .name,
.pull-row[data-tier="ssp"] .name { color: var(--csl-value-strong); font-weight: 600; }
.pull-row[data-tier="ssp"] .name { color: var(--csl-signal-cyan); }
.spot-totals { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--csl-slate); font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.spot-totals .pnl.up { color: var(--csl-value-strong); font-weight: 700; }
.spot-totals .pnl.down { color: var(--csl-value-flag); font-weight: 700; }
.pull-row .meta-em { opacity: 0.6; font-style: normal; }
.pull-empty { color: var(--csl-value-fair); font-size: 11px; padding: 6px 0; }
.band-inline { margin-left: 6px; }

.scorecard-content {
  padding: 32px 20px 40px;
  overflow-y: auto;
  height: calc(100% - 16px);
  -webkit-overflow-scrolling: touch;
}
.scorecard-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--csl-value-fair);
  text-align: center;
  margin-bottom: 8px;
}
.scorecard-pnl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  text-align: center;
  line-height: 1;
  margin-bottom: 4px;
}
.scorecard-pnl.up { color: var(--csl-value-strong); }
.scorecard-pnl.down { color: var(--csl-value-flag); }
.scorecard-subline {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--csl-value-fair);
  margin-bottom: 28px;
}
.scorecard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.scorecard-stat {
  background: var(--csl-graphite);
  border: 1px solid var(--csl-slate);
  border-radius: 12px;
  padding: 14px;
}
.scorecard-stat .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--csl-value-fair);
}
.scorecard-stat .val {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--csl-steel);
  margin-top: 2px;
}
.scorecard-stat .val.val-sm { font-size: 14px; }

.handoff-card {
  background: linear-gradient(135deg, rgba(239, 1, 7, 0.1), rgba(6, 54, 114, 0.08));
  border: 1px solid rgba(239, 1, 7, 0.45);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(239, 1, 7, 0.12);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.handoff-card:active {
  box-shadow: 0 0 32px rgba(239, 1, 7, 0.25);
  border-color: var(--csl-signal-cyan);
}
.handoff-card .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--csl-signal-cyan);
  margin-bottom: 8px;
}
.handoff-card .title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--csl-steel);
  margin-bottom: 4px;
}
.handoff-card .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--csl-value-fair);
  margin-bottom: 12px;
}
.handoff-card .meta .live { color: var(--csl-value-flag); }
.handoff-card .cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--csl-signal-cyan);
  background: rgba(239, 1, 7, 0.12);
  border: 1px solid rgba(239, 1, 7, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
}

.breaking-now {
  background: linear-gradient(135deg, rgba(239, 1, 7, 0.12), rgba(6, 54, 114, 0.08));
  border: 1px solid var(--csl-signal-cyan);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  cursor: pointer;
}
.breaking-now .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--csl-signal-cyan);
  font-weight: 600;
}
.breaking-now .row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.breaking-now .title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; color: var(--csl-steel); }
.breaking-now .meta { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--csl-value-fair); }

.next-gap {
  background: var(--csl-graphite);
  border: 1px solid var(--csl-slate);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 12px;
}
.next-gap .text { font-family: 'Geist', sans-serif; font-size: 14px; color: var(--csl-chrome); }
.next-gap .cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--csl-signal-cyan);
  font-weight: 600;
}

/* E4.5 — guest account-creation nudge at the scorecard (post-payoff) */
.account-nudge {
  position: relative;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--csl-graphite);
  border: 1px solid var(--csl-slate);
  border-radius: 14px;
  transition: opacity 200ms ease, transform 200ms ease;
}
.account-nudge.dismissed { display: none; }
.account-nudge-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--csl-value-fair);
  cursor: pointer;
}
.account-nudge-dismiss:active { background: rgba(19, 24, 31, 0.06); }
.account-nudge-dismiss svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.account-nudge-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--csl-value-fair);
  margin-bottom: 6px;
}
.account-nudge-text {
  margin: 0 24px 14px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--csl-steel);
}
.account-nudge-cta {
  width: 100%;
  background: var(--csl-signal-cyan);
  color: #FFFFFF;
  border: 0;
  border-radius: 12px;
  padding: 13px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 100ms ease;
}
.account-nudge-cta:active { transform: scale(0.98); }

/* Vault CTA on the scorecard — the collection / rainbow-chase entry point. */
.vault-link {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  margin: 14px 0 0; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, #13181F 0%, #1E2733 100%);
  border: 1px solid rgba(255,255,255,0.08);
}
.vault-link-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vault-link-eyebrow {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--csl-signal-cyan, #EF0107);
}
.vault-link-main {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #F5F7FA;
}
.vault-link-cta {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: #F5F7FA; background: rgba(255,255,255,0.10); padding: 8px 12px; border-radius: 10px; flex-shrink: 0;
}

.scorecard-actions { display: flex; gap: 10px; margin-top: 24px; }
.scorecard-actions button {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
}
.scorecard-actions .play-again { background: var(--csl-signal-cyan); color: #FFFFFF; }
.scorecard-actions .reload { background: transparent; color: var(--csl-chrome); border: 1px solid var(--csl-slate); }
.scorecard-actions .reload:disabled { opacity: 0.55; cursor: default; }
.scorecard-actions .share { background: var(--csl-ink); color: var(--csl-steel); border: 1px solid var(--csl-slate); }
.scorecard-actions .share:disabled { opacity: 0.55; cursor: default; }

/* Best-pull hero card on the scorecard — the share-worthy still, rendered
   standalone (the reveal-stage .card sizing/transform is neutralized here). */
.scorecard-hero {
  display: flex;
  justify-content: center;
  margin: 4px 0 14px;
}
.card.scorecard-hero-card {
  position: relative !important;
  width: min(156px, 44vw) !important;
  transform: none !important;
  opacity: 1 !important;
  cursor: default;
  will-change: auto;
}

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(19, 24, 31, 0.35);
  backdrop-filter: blur(2px);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(85vw, 360px);
  background: var(--csl-graphite);
  z-index: 70;
  transform: translateX(-100%);
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1);
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}
.drawer.open { transform: translateX(0); }
.drawer-header { padding: 20px 20px 12px; border-bottom: 1px solid var(--csl-slate); }
.drawer-header .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--csl-value-fair);
}
.drawer-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin: 4px 0 0;
  color: var(--csl-steel);
}
.drawer-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; }
.drawer-item {
  background: #FFFFFF;
  border: 1px solid rgba(19, 24, 31, 0.10);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
}
.drawer-item.current { border-color: var(--csl-signal-cyan); box-shadow: inset 0 0 0 1px var(--csl-signal-cyan); }
.drawer-item .room {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--csl-value-fair);
}
.drawer-item .title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; color: var(--csl-steel); margin: 2px 0 6px; }
.drawer-item .row { display: flex; gap: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--csl-value-fair); }
.drawer-item .row .spots-left { color: var(--csl-value-strong); }
.drawer-item.live::before {
  content: "● LIVE";
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--csl-value-flag);
  margin-bottom: 4px;
}
.drawer-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--csl-slate);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--csl-value-fair);
  text-align: center;
}

/* ── Format character: time estimate + pace + the savor-vs-volume trade ── */
.drawer-lede {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--csl-chrome);
  margin: 8px 0 0;
}
.drawer-lede strong { color: var(--csl-steel); font-weight: 600; }

.fmt-line { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.fmt-time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--csl-signal-cyan);
  background: rgba(63, 182, 201, 0.12);
  border-radius: 6px;
  padding: 2px 8px;
}
.fmt-pace {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--csl-value-fair);
}
.skunk-meter { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.fmt-line .skunk-meter { margin-left: auto; }
.skunk-meter .sk-pip { font-size: 13px; }
.skunk-meter .sk-pip:not(.on) { opacity: 0.22; filter: grayscale(1); }
.skunk-word {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--csl-value-fair);
}
.drawer-item .fmt-blurb {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--csl-chrome);
  margin: 0 0 8px;
}

.buy-format-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px auto 0;
  max-width: 340px;
}
.buy-format-chip .fmt-chip-blurb {
  flex-basis: 100%;
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--csl-chrome);
}
.fmt-switch {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--csl-signal-cyan);
  background: none;
  border: 1px solid rgba(63, 182, 201, 0.4);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}
.fmt-switch:hover { background: rgba(63, 182, 201, 0.1); }

.chat-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 80;
  background: var(--csl-graphite);
  border-top: 1px solid var(--csl-slate);
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1);
  max-height: 55vh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--safe-bottom);
}
.chat-sheet.open { transform: translateY(0); }
.chat-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--csl-slate);
}
.chat-sheet-header h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--csl-steel);
  margin: 0;
}
.chat-feed {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, rgba(19, 24, 31, 0.04) 0%, #FFFFFF 100%);
}
.chat-msg {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  animation: chat-in 300ms ease forwards;
  padding: 4px 0;
}
.chat-msg.flash { animation: chat-flash 400ms ease forwards; }
.chat-msg.react { animation: chat-react 450ms ease forwards; }
.chat-msg .user { font-weight: 600; }
.chat-msg .text { color: var(--csl-chrome); }
@keyframes chat-react {
  0% { opacity: 0; transform: scale(0.94); }
  35% { opacity: 1; transform: scale(1.06); background: rgba(239, 1, 7, 0.08); border-radius: 8px; padding: 4px 6px; margin: -4px -6px; }
  100% { opacity: 1; transform: scale(1); background: transparent; }
}
@keyframes chat-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes chat-flash {
  0% { background: rgba(239, 1, 7, 0.15); opacity: 0; transform: translateY(8px); }
  30% { background: rgba(239, 1, 7, 0.15); }
  100% { background: transparent; opacity: 1; transform: translateY(0); }
}

.others-tray {
  position: fixed;
  top: calc(22px + var(--safe-top) + var(--topbar-h) + 36px);
  right: 12px;
  z-index: 55;
}
.others-tray.hide { display: none; }
.others-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--csl-slate);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--csl-value-fair);
}
.others-avatars {
  display: flex;
}
.others-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--csl-slate), var(--csl-graphite));
  border: 1px solid var(--csl-chrome);
  margin-left: -6px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--csl-chrome);
}
.others-avatar:first-child { margin-left: 0; }
.others-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 200px;
  background: var(--csl-graphite);
  border: 1px solid var(--csl-slate);
  border-radius: 12px;
  padding: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.others-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.others-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(19, 24, 31, 0.10);
  font-family: var(--font-mono);
  font-size: 11px;
}
.others-row:last-child { border-bottom: 0; }
.others-row .handle { color: var(--csl-chrome); }
.others-row .team { color: var(--csl-value-fair); font-size: 10px; }
.others-row .pnl { font-weight: 600; }
.others-row .pnl.up { color: var(--csl-value-strong); }
.others-row .pnl.down { color: var(--csl-value-flag); }

.toast {
  position: fixed;
  bottom: calc(var(--safe-bottom) + 80px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--csl-graphite);
  border: 1px solid var(--csl-slate);
  border-radius: 12px;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--csl-steel);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms cubic-bezier(0.2, 0.9, 0.3, 1);
  white-space: nowrap;
  max-width: 90vw;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.disclaimer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(107, 118, 134, 0.55);
  text-align: center;
  padding: 2px 16px calc(2px + var(--safe-bottom));
  pointer-events: none;
  line-height: 1.3;
}

@keyframes particle-burst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(360deg) scale(0); opacity: 0; }
}
@keyframes particle-beam {
  0% { transform: translate(0, 0) scaleY(0.3); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scaleY(1) rotate(var(--rot, 0deg)); opacity: 0; }
}

.hide { display: none !important; }

@media (min-width: 768px) {
  .buy-cards { max-width: 480px; margin: 0 auto; }
  .stage-card-area { inset: 170px 40px 60px 40px; }
}

/* ── Reveal v2: box counter, stream playback, legibility ─────────────── */
.box-counter {
  position: absolute;
  top: calc(var(--safe-top) + 50px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 42;
  width: min(280px, 88vw);
  text-align: center;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.box-counter-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--csl-chrome);
  margin-bottom: 6px;
}
.box-counter-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(19, 24, 31, 0.12);
  overflow: hidden;
}
.box-counter-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--csl-electric-blue), var(--csl-signal-cyan));
  transition: width 280ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.box-counter.box-advance .box-counter-fill {
  box-shadow: 0 0 12px rgba(239, 1, 7, 0.55);
}
.box-counter.box-advance .box-counter-label {
  color: var(--csl-signal-cyan);
}

.owner-flash {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.92);
  z-index: 55;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.owner-flash.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.owner-city {
  font-family: var(--font-display);
  font-size: clamp(22px, 6vw, 32px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--csl-steel);
  text-shadow: 0 1px 4px rgba(19, 24, 31, 0.15);
}
.owner-handle {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--csl-value-fair);
  margin-top: 4px;
}
.owner-handle.muted-owner {
  color: var(--csl-value-fair);
  opacity: 0.85;
}
.owner-yours {
  display: none;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--csl-value-strong);
}
.owner-yours.visible {
  display: block;
}
/* "1 OF 1" is a print-run FACT (true Superfractor / printing plate only) —
   steel/white, never gold, never a value claim. */
.owner-rarity {
  display: none;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--csl-steel);
  text-shadow: 0 0 18px rgba(234, 242, 248, 0.4);
}
.owner-rarity.visible {
  display: block;
}

.shuffle-blur {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
  filter: blur(0.4px);
}
.shuffle-card {
  position: absolute;
  width: min(200px, 58vw);
  aspect-ratio: 5 / 7;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--csl-card-face-top), var(--csl-card-face-bottom));
  border: 1px solid rgba(19, 24, 31, 0.12);
  box-shadow: 0 12px 32px rgba(19, 24, 31, 0.45);
  padding: 12px;
  transform: rotate(calc(var(--shuffle-i, 0) * 4deg - 6deg)) translateY(calc(var(--shuffle-i, 0) * -6px));
  animation: shuffle-riffle 40ms ease-out;
}
@keyframes shuffle-riffle {
  0% { opacity: 0.35; transform: translateX(12px) scale(0.96); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.shuffle-player {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--csl-steel);
  line-height: 1.1;
}
.shuffle-parallel {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--csl-value-fair);
  margin-top: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shuffle-blur.shuffle-out {
  opacity: 0;
  transition: opacity 80ms ease;
}

.team-card.disabled {
  opacity: 0.42;
  pointer-events: none;
}
.team-card.disabled::after {
  content: "Over budget";
  position: absolute;
  inset: auto 10px 10px auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--csl-value-flag);
}

.card-text-layer {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  isolation: isolate;
}
.card .card-photo-bg {
  background: radial-gradient(ellipse at 50% 30%, var(--csl-slate) 0%, var(--csl-graphite) 55%, var(--csl-ink) 100%);
}
.card .card-holo,
.card .card-holo-sweep {
  z-index: 1;
}
.card-info,
.card-value-wrap,
.card-header {
  position: relative;
  z-index: 5;
}
.card-parallel-face {
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--csl-chrome);
  margin-top: 6px;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(19, 24, 31, 0.12);
}
.card-player {
  position: relative;
  z-index: 6;
  text-shadow: 0 1px 2px rgba(19, 24, 31, 0.15);
}
.card-value {
  position: relative;
  z-index: 6;
  text-shadow: 0 1px 2px rgba(19, 24, 31, 0.18);
}

.card.quick-flash {
  animation: quick-flash-in 120ms ease-out forwards;
}
.card.quick-flash.in {
  animation: none;
  opacity: 1;
}
@keyframes quick-flash-in {
  0% { transform: scale(0.94); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}
.card.announce-hold.in {
  animation: card-reveal-3d 520ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.card.announce-big.announce-hold.in {
  animation: ssp-reveal-3d 680ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.scorecard-spots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 16px;
  max-height: 140px;
  overflow-y: auto;
}
.scorecard-spot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(19, 24, 31, 0.10);
}
.scorecard-spot:last-child { border-bottom: 0; }
.scorecard-spot .spot-name { color: var(--csl-chrome); }
.scorecard-spot .spot-pnl { font-weight: 600; }
.scorecard-spot .spot-pnl.up { color: var(--csl-value-strong); }
.scorecard-spot .spot-pnl.down { color: var(--csl-value-flag); }

/* ── Legibility fix (captain): value in normal flow below player/parallel, never
   overlapping the card face. Card reads top→bottom: set · photo · player ·
   parallel · value. (Craig feedback: "can't tell what card you hit".) */
.card-value-wrap {
  position: static !important;
  bottom: auto !important;
  text-align: center;
  margin-top: 6px;
  padding: 0 10px 12px;
}
.card[data-tier="ssp"] .card-value-wrap,
.card.ssp-reveal .card-value-wrap { bottom: auto !important; }
.card-info { padding-bottom: 2px; }
.card-player { font-size: clamp(19px, 5vw, 23px); }
.card[data-tier="ssp"] .card-value,
.card.ssp-reveal.in .card-value { font-size: clamp(30px, 8vw, 42px) !important; }

/* Governance §7.2: a celebratory, multi-second frozen hero frame for a card the
   player did NOT win must read as a CARD-RARITY event — the parallel name + a
   "1 OF 1" tag — never a headlined modelled dollar figure ("value as prize").
   Suppress the $ on the room-wide hero frame; the owner's own card still shows
   its paper value as before. */
.card.rarity-only .card-value-wrap { visibility: hidden; }

/* ── Parallel-color card frame: the border reflects the REAL parallel color
   (Gold parallel -> gold frame, Red -> red, etc.). This depicts the physical
   card's color — NOT a value-band signal. Band pills / P&L stay gold-free per §7.4. */
.card[data-parallel-color="red"]    { --pc-ring: #E5484D; --pc-glow: rgba(229, 72, 77, 0.55); }
.card[data-parallel-color="orange"] { --pc-ring: #F76B15; --pc-glow: rgba(247, 107, 21, 0.55); }
.card[data-parallel-color="gold"]   { --pc-ring: #9C824A; --pc-glow: rgba(156, 130, 74, 0.55); }
.card[data-parallel-color="yellow"] { --pc-ring: #F5D90A; --pc-glow: rgba(245, 217, 10, 0.50); }
.card[data-parallel-color="green"]  { --pc-ring: #30A46C; --pc-glow: rgba(48, 164, 108, 0.52); }
.card[data-parallel-color="aqua"]   { --pc-ring: #EF0107; --pc-glow: rgba(239, 1, 7, 0.55); }
.card[data-parallel-color="blue"]   { --pc-ring: #3B82F6; --pc-glow: rgba(59, 130, 246, 0.55); }
.card[data-parallel-color="purple"] { --pc-ring: #8E4EC6; --pc-glow: rgba(142, 78, 198, 0.55); }
.card[data-parallel-color="pink"]   { --pc-ring: #E93D82; --pc-glow: rgba(233, 61, 130, 0.52); }
.card[data-parallel-color="black"]  { --pc-ring: #11151b; --pc-glow: rgba(150, 170, 190, 0.45); }
/* Superfractor 1/1 — prismatic silver frame + bright halo (the apex card) */
.card[data-parallel-color="super"]  { --pc-ring: #EAF2F8; --pc-glow: rgba(239, 1, 7, 0.65); }

/* ── §7.4 governance override: gold never signals value ──────────────────
   Reveal/value FX recolored to signal-cyan. Full gold-audit + --csl-* token
   migration is the delegated CSS paydown fast-follow (cursor). */
.card[data-tier="ssp"] .card-value,
.card.ssp-reveal.in .card-value {
  background: linear-gradient(135deg, #13181F, var(--csl-signal-cyan, #EF0107), #C70009) !important;
  -webkit-background-clip: text; background-clip: text;
}
.stage-flash.flash-gold { background: linear-gradient(180deg, #fff 0%, #fde8e8 100%) !important; }
.gold-overlay { background: radial-gradient(circle at 50% 45%, rgba(239, 1, 7,0.5), transparent 70%) !important; }
.particle.gold { background: var(--csl-signal-cyan, #EF0107) !important; }
.pull-row[data-tier="ssp"] .name { color: var(--csl-signal-cyan, #EF0107) !important; }

/* ════════════════════════════════════════════════════════════════════════
   Tilt / pointer-reactive holographic foil
   ────────────────────────────────────────────────────────────────────────
   PlayFX.foil (play-fx.js) writes these custom props on the active card so the
   chrome/refractor sheen tracks a real light source — pointer on desktop,
   device tilt on mobile. Strength is graded by data-tier: base is a whisper,
   the 1-of-1 Superfractor is full rainbow holo. Depicts the physical card's
   chrome, never a value-band signal (§7.4 — band pills / P&L stay gold-free).
   Presentation only; no game state is read here.
   ════════════════════════════════════════════════════════════════════════ */
@property --foil-power {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
@property --foil-x {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: false;
}
@property --foil-y {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: false;
}

.card {
  --foil-power: 0;
  --foil-x: 50%;
  --foil-y: 50%;
  --foil-tilt-x: 0deg;
  --foil-tilt-y: 0deg;
}

/* A small parallax lean toward the light while the card is held on stage. The
   reveal keyframes own the transform during entry, so this only applies once
   the card has settled (.announce-hold / .ssp-reveal.settle). */
.card.foil-reactive.announce-hold.in,
.card.foil-reactive.ssp-reveal.settle.in {
  transform:
    scale(1)
    rotateX(var(--foil-tilt-x))
    rotateY(var(--foil-tilt-y));
  transition: transform 140ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* The reactive sheen layer. It sits above the photo's auto-foil and brightens /
   sharpens as --foil-power rises with rarity. A moving radial "hot spot" tracks
   the pointer (--foil-x / --foil-y); a directional band rakes with --angle. */
.card-foil-react {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  mix-blend-mode: color-dodge;
  background:
    radial-gradient(
      circle at var(--foil-x) var(--foil-y),
      rgba(255, 255, 255, calc(0.55 * var(--foil-power))) 0%,
      rgba(200, 235, 255, calc(0.30 * var(--foil-power))) 14%,
      rgba(239, 1, 7, calc(0.16 * var(--foil-power))) 30%,
      transparent 60%
    ),
    conic-gradient(
      from var(--angle) at var(--foil-x) var(--foil-y),
      rgba(239, 1, 7, calc(0.42 * var(--foil-power))),
      rgba(6, 54, 114, calc(0.40 * var(--foil-power))),
      rgba(0, 200, 180, calc(0.34 * var(--foil-power))),
      rgba(160, 90, 220, calc(0.36 * var(--foil-power))),
      rgba(239, 1, 7, calc(0.42 * var(--foil-power)))
    );
  transition: opacity 220ms ease;
  will-change: background, opacity;
}
.card.foil-reactive .card-foil-react { opacity: 1; }

/* A crisp glare streak that slides with horizontal pointer position
   (--sheen-pos, written by the engine). Scales up only on mid+ rarity. */
.card-foil-react::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: calc(0.5 * var(--foil-power));
  background: linear-gradient(
    115deg,
    transparent calc(var(--sheen-pos) + 28%),
    rgba(255, 255, 255, 0.32) calc(var(--sheen-pos) + 46%),
    rgba(239, 1, 7, 0.18) calc(var(--sheen-pos) + 50%),
    rgba(6, 54, 114, 0.14) calc(var(--sheen-pos) + 54%),
    transparent calc(var(--sheen-pos) + 72%)
  );
}

/* When the reactive engine is driving a card we want the POINTER to own --angle
   and --sheen-pos, so freeze the idle keyframe spin on the layers that consume
   them. The reactive layer above supplies the live motion instead. */
.card.foil-reactive .card-holo,
.card.foil-reactive .card-holo-sweep,
.card.foil-reactive .card-photo::before,
.card.foil-reactive.in::before {
  animation-play-state: paused;
}

/* Apex-only flourish: the Superfractor's reactive halo runs hotter and adds a
   faint outer bloom so the 1-of-1 reads as an event even at rest. */
.card[data-tier="ssp"].foil-reactive .card-foil-react,
.card.ssp-reveal.foil-reactive .card-foil-react {
  mix-blend-mode: screen;
  filter: saturate(1.2);
}

/* ── Reduced-motion: the whole game honors the user's OS preference ──────────
   Kill the perpetual foil/sheen/glint loops and the reveal choreography, but
   keep cards fully legible (opacity + final transform intact). The JS engine
   also bails on attach() when reduce is set, so no listeners are added. */
@media (prefers-reduced-motion: reduce) {
  .card,
  .card.in,
  .card.flip-in,
  .card.ssp-reveal,
  .card[data-tier="auto"],
  .card[data-tier="ssp"],
  .foil-pack,
  .foil-pack.drop-in,
  .card-holo,
  .card-holo-sweep,
  .card-foil-react,
  .card-foil-react::after,
  .card.in::before,
  .card-photo::before,
  .pack-body::after,
  .pack-burst,
  .pack-brand,
  .light-burst.active,
  .stage-card-area.shake {
    animation: none !important;
  }
  .card,
  .card.in,
  .card.announce-hold.in,
  .card.ssp-reveal.settle.in,
  .card.foil-reactive.announce-hold.in,
  .card.foil-reactive.ssp-reveal.settle.in {
    transform: scale(1) rotateX(0deg) rotateY(0deg) !important;
    opacity: 1;
  }
  .card-foil-react { opacity: 0 !important; }
  .breaker-caption-text.caption-in { animation: none !important; }
}