/* ==========================================================================
   howrare.fun — app.css
   Every component (INTEGRATION-CONTRACT §9) + button system, focus, and the
   reduced-motion base (Epic B — B4).  Director renders with exactly these
   class names; the card is the hero object.
   Owner: Atelier.  Depends on tokens.css (loaded first).
   ========================================================================== */

/* ==========================================================================
   0. GLOBAL INTERACTION BASE (B4) — focus-visible + reduced-motion
   ========================================================================== */

/* Gold focus ring, keyboard-only. Real controls only (a11y, UI/UX §8). */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.btn:focus-visible,
.opt:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 26%, transparent);
}

/* Reduced-motion: kill transforms/animation, keep every static state legible.
   Placed at the top so component rules below can assume motion is optional. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  /* Neutralise the motion-only flourishes so nothing rests mid-transform. */
  .deck, .deck.shake,
  .stage .card,
  .card__foil,
  .wordmark,
  .live-dot,
  .reveal-body,
  .reveal-body.on,
  .pull-stage,
  .stat.locked .stat__fill::after { animation: none !important; }
  .reveal-body,
  .reveal-body.on,
  .stage .card { transform: none !important; opacity: 1 !important; }
}

/* ==========================================================================
   1. APP SHELL  (.app · header · wordmark · daily-pill · screens · foot)
   ========================================================================== */

.app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 clamp(16px, 5vw, 24px) 48px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.app__header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 12px;
  /* legibility as content scrolls beneath the sticky header */
  background: linear-gradient(180deg, var(--ink) 62%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* --- Wordmark: RARE. — Bricolage 800, tracked, slow gold shimmer sweep --- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1;
  color: var(--gold);
  display: inline-flex;
  align-items: baseline;
  user-select: none;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark {
    background: linear-gradient(
      100deg,
      var(--gold) 0%, var(--gold) 30%,
      var(--gold-lite) 44%, #fffefb 50%, var(--gold-lite) 56%,
      var(--gold) 70%, var(--gold-deep) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shimmer 7s linear infinite;
  }
}
@keyframes shimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}

/* The period = a gold pull/pip. Solid gold, gentle pulse. */
.wordmark__dot {
  -webkit-text-fill-color: var(--gold);
  color: var(--gold);
  margin-left: .02em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--gold) 60%, transparent);
  animation: dotPulse 3.4s var(--ease-out) infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1;  }
  50%      { opacity: .55; }
}

/* --- Daily pill: "Rarest Friend Today · resets in Xh" (top-right, live) --- */
.daily-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink-2) 82%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: .02em;
  color: var(--muted);
  white-space: nowrap;
  max-width: 62vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.daily-pill strong,
.daily-pill b { color: var(--text); font-weight: 700; }

.live-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 60%, transparent);
  animation: livePulse 2.2s var(--ease-out) infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- Screens (toggled sections; Director flips .is-active) --- */
main { flex: 1; }

.screen { display: none; }
.screen.is-active {
  display: block;
  padding-top: 8px;
  animation: screenIn .5s var(--ease-out) both;
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- Footer --- */
.foot {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--muted-2);
  line-height: 1.9;
}
.foot a { color: var(--muted); border-bottom: 1px solid transparent; transition: color var(--dur), border-color var(--dur); }
.foot a:hover { color: var(--gold); border-bottom-color: color-mix(in srgb, var(--gold) 50%, transparent); }

/* ==========================================================================
   2. BUTTON SYSTEM (B4) — gold / outline / ghost / block
   ========================================================================== */

.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-400);
  letter-spacing: .005em;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--line-strong);
  white-space: nowrap;
  user-select: none;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur), border-color var(--dur), color var(--dur), filter var(--dur);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

/* Primary — metallic gold. THE button (Pull card / Share). */
.btn--gold {
  --btn-fg: #241703;
  color: #241703;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gold-lite) 70%, var(--gold)) 0%, var(--gold) 46%, var(--gold-deep) 100%);
  border: 1px solid color-mix(in srgb, var(--gold-lite) 60%, var(--gold-deep));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
    var(--shadow-btn),
    0 8px 30px -10px color-mix(in srgb, var(--gold) 65%, transparent);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--gold-lite) 70%, transparent);
}
.btn--gold:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent),
    var(--shadow-btn),
    0 12px 40px -8px color-mix(in srgb, var(--gold) 80%, transparent);
  filter: brightness(1.04);
}

/* Outline — gold hairline, gold text; fills faintly on hover. */
.btn--outline {
  --btn-fg: var(--gold);
  color: var(--gold);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line-strong));
}
.btn--outline:hover {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-color: var(--gold);
}

/* Ghost — quiet; text-only until hover. */
.btn--ghost {
  --btn-fg: var(--muted);
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  min-height: 44px;
  padding: 10px 16px;
}
.btn--ghost:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

/* Full-width modifier. */
.btn--block { display: flex; width: 100%; }

/* ==========================================================================
   3. LANDING  (.hero · kicker · title · sub · stage · namebar · micro)
   ========================================================================== */

.hero {
  padding: 18px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* orchestrated page-load stagger (not scattered fidgets) */
.screen.is-active .hero > * { animation: rise .55s var(--ease-out) both; }
.screen.is-active .hero > *:nth-child(1) { animation-delay: .04s; }
.screen.is-active .hero > *:nth-child(2) { animation-delay: .10s; }
.screen.is-active .hero > *:nth-child(3) { animation-delay: .16s; }
.screen.is-active .hero > *:nth-child(4) { animation-delay: .22s; }
.screen.is-active .hero > *:nth-child(5) { animation-delay: .28s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-800);
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: var(--text);
}
/* gold emphasis inside the H1 ("rare card") — works with <em>, <b>, or .name-hl */
.hero__title em,
.hero__title b,
.hero__title .name-hl {
  font-style: normal;
  font-weight: inherit;
  color: var(--gold);
}

.hero__sub {
  font-size: var(--fs-500);
  color: var(--muted);
  max-width: 34ch;
  text-wrap: pretty;
}

/* Stage — the tilted, idling example card that sells the payoff. */
.stage {
  perspective: 1300px;
  display: flex;
  justify-content: center;
  padding: 14px 0 6px;
}
.stage .card {
  transform: rotateX(6deg) rotateY(-9deg);
  transform-style: preserve-3d;
  animation: idleTilt 8s ease-in-out infinite;
  will-change: transform;
}
@keyframes idleTilt {
  0%, 100% { transform: rotateX(6deg)  rotateY(-9deg) translateY(0); }
  50%      { transform: rotateX(2deg)  rotateY(9deg)  translateY(-8px); }
}

/* Name bar — friend's name + Pull card. */
.namebar {
  display: flex;
  gap: 10px;
  width: 100%;
}
.namebar__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-500);
  transition: border-color var(--dur), background-color var(--dur), box-shadow var(--dur);
}
.namebar__input::placeholder { color: var(--muted-2); }
.namebar__input:hover { border-color: color-mix(in srgb, var(--gold) 34%, var(--line-strong)); }
.namebar__input:focus {
  outline: none;
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 6%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent);
}
.namebar .btn { flex: none; }

.micro {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--muted-2);
  letter-spacing: .01em;
}

/* ==========================================================================
   4. QUIZ  (head · qcount · progress · qtext · name-hl · opts · opt · back)
   ========================================================================== */

.quiz__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 0 22px;
}
.qcount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
}
.qcount b,
.qcount strong { color: var(--gold); font-weight: 700; }

.progress {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: var(--p, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 65%, var(--gold-lite));
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 55%, transparent);
  transition: width var(--dur-slow) var(--ease-out);
}

.qtext {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-700);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--text);
  margin-bottom: 22px;
}

/* Gold name/word highlight — reused in hero H1 + quiz question. */
.name-hl { color: var(--gold); font-weight: inherit; }

.opts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px 12px 12px;
  text-align: left;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-500);
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur), background-color var(--dur), box-shadow var(--dur);
}
.opt:hover {
  transform: translateX(4px);
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line-strong));
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent) inset;
}
.opt:active { transform: translateX(4px) scale(.99); }

.opt__glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--ink-2);
  border: 1px solid var(--line);
  font-size: 1.4rem;
  line-height: 1;
  transition: border-color var(--dur), background-color var(--dur), transform var(--dur);
}
.opt:hover .opt__glyph {
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, var(--ink-2));
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding: 8px 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: .04em;
  color: var(--muted);
  background: none;
  border: 0;
  transition: color var(--dur), transform var(--dur-fast);
}
.back-link:hover { color: var(--gold); transform: translateX(-3px); }

/* ==========================================================================
   5. REVEAL  (pull-stage · deck · pull-label · reveal-body · verdict)
   ========================================================================== */

.pull-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 40px 0;
  min-height: 46vh;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(.98);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.pull-stage.on { opacity: 1; visibility: visible; transform: none; }

/* Deck / pack graphic — a stack of cards (the pull). */
.deck {
  position: relative;
  width: 128px;
  height: 178px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: color-mix(in srgb, var(--gold) 82%, transparent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 55%, transparent);
  background:
    radial-gradient(90% 70% at 30% 20%, color-mix(in srgb, var(--foil-cyan) 22%, transparent), transparent 55%),
    radial-gradient(90% 80% at 80% 90%, color-mix(in srgb, var(--foil-violet) 22%, transparent), transparent 55%),
    linear-gradient(150deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
  transform-style: preserve-3d;
}
/* the two cards behind, fanned */
.deck::before,
.deck::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  z-index: -1;
}
.deck::before { transform: translate(6px, 8px) rotate(4deg);  opacity: .7; }
.deck::after  { transform: translate(-6px, 5px) rotate(-4deg); opacity: .5; }

.deck.shake { animation: deckShake 1.6s var(--ease) infinite; }
@keyframes deckShake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-4px, 0) rotate(-2.5deg); }
  30% { transform: translate(4px, -2px) rotate(2.5deg); }
  45% { transform: translate(-3px, 1px) rotate(-1.8deg); }
  60% { transform: translate(3px, -1px) rotate(1.8deg); }
  75% { transform: translate(-2px, 0) rotate(-1deg); }
}

.pull-label {
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  min-height: 1.4em;
}
.pull-label::after { content: ""; }

/* Reveal body — card + verdict burst in after the pull. */
.reveal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  opacity: 0;
  transform: perspective(1000px) rotateY(-16deg) scale(.9);
  transform-origin: center;
}
.reveal-body.on {
  opacity: 1;
  transform: perspective(1000px) rotateY(0) scale(1);
  animation: burstIn .85s var(--ease-out) both;
}
@keyframes burstIn {
  0%   { opacity: 0; transform: perspective(1000px) rotateY(-16deg) scale(.9);  filter: brightness(1.6); }
  55%  { opacity: 1; filter: brightness(1.12); }
  100% { opacity: 1; transform: perspective(1000px) rotateY(0) scale(1); filter: brightness(1); }
}

/* Verdict line: "#N rarest friend today · <medal>" then "<Name> is <Archetype>" */
.verdict {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-500);
  color: var(--muted);
  text-wrap: balance;
  max-width: 32ch;
}
.verdict__rank {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 45%, transparent);
}

/* ==========================================================================
   6. THE CARD — the flagship object
   Tier drives colour/glow/foil. Director sets data-tier="…" and an inline
   --tier colour; we ALSO define per-tier --tier/--foil/--glow here so the
   card is correct even without the inline var. Content sits above the foil
   (z-index) so it stays crisp; the pointer shine glosses over the top.
   ========================================================================== */

.card {
  /* per-tier vars, overridable inline by Director */
  --tier: var(--t-common);
  --foil: 0;
  --glow: transparent;
  --shine-op: .12;

  position: relative;
  isolation: isolate;                 /* contain foil blend-modes to the card */
  width: min(300px, 84vw);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--tier) 15%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid color-mix(in srgb, var(--tier) 42%, var(--line-strong));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    var(--shadow-lg),
    0 0 46px -10px var(--glow);
  color: var(--text);
  transition: box-shadow var(--dur) var(--ease);
}

/* Holographic foil — cyan -> violet -> gold prism, blended, tier-scaled.
   Sits ABOVE the background but BELOW content (z-index 1). */
.card__foil {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--foil);
  mix-blend-mode: color-dodge;
  background:
    repeating-linear-gradient(
      112deg,
      rgba(125, 249, 255, 0)   0%,
      rgba(125, 249, 255, .5) 10%,
      rgba(176, 107, 255, .5) 20%,
      rgba(245, 196, 81, .5)  30%,
      rgba(125, 249, 255, 0)  42%);
  background-size: 260% 260%;
  animation: foilDrift 9s linear infinite;
}
/* fine holographic etch lines over the prism */
.card__foil::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(74deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 6px);
  mix-blend-mode: overlay;
  opacity: .55;
}
@keyframes foilDrift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 260% 50%; }
}

/* Pointer-driven shine — the glossy reflection. ABOVE everything (z-index 5),
   soft so text stays readable. Director's attachTilt updates --mx/--my (%). */
.card__shine {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: var(--shine-op);
  background: radial-gradient(
    130px 130px at var(--mx, 50%) var(--my, 20%),
    rgba(255, 255, 255, .9),
    rgba(255, 255, 255, 0) 60%);
  transition: opacity var(--dur);
}

/* keep all real content above the foil */
.card__top, .rarity, .card__name, .card__arch,
.stats, .sig, .flavor, .card__foot { position: relative; z-index: 2; }

/* --- Top row: tier tag + serial --- */
.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tier-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--tier);
  background: color-mix(in srgb, var(--tier) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier) 55%, transparent);
}
.serial {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--muted-2);
  letter-spacing: .02em;
}

/* --- Rarity block (hero of the card) --- */
.rarity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 4px;
}
.rarity__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-900);
  line-height: .92;
  color: var(--tier);
  text-shadow:
    0 0 28px color-mix(in srgb, var(--tier) 55%, transparent),
    0 0 4px color-mix(in srgb, var(--tier) 40%, transparent);
  letter-spacing: -.02em;
}
.rarity__cap {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Name + archetype --- */
.card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 2.2vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--text);
  text-wrap: balance;
}
.card__arch {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-400);
  text-align: center;
  color: var(--tier);
  margin-top: -4px;
}

/* --- Stats: 4 bars + locked Aura --- */
.stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.stat {
  display: grid;
  grid-template-columns: 58px 1fr 26px;
  align-items: center;
  gap: 10px;
}
.stat__lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.stat__track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ink-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.stat__fill {
  height: 100%;
  width: var(--fill, 0%);           /* Director animates from 0 -> value% */
  border-radius: inherit;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--tier) 62%, #000 0%),
    var(--tier) 70%,
    color-mix(in srgb, var(--tier) 55%, #fff));
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--tier) 70%, transparent);
  transition: width .9s var(--ease-out);
}
.stat__val {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-weight: 700;
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Locked Aura — the standing upsell: striped gold, dimmed, 🔒 */
.stat.locked .stat__lbl { color: color-mix(in srgb, var(--gold) 80%, var(--muted)); }
.stat.locked .stat__track { border-color: color-mix(in srgb, var(--gold) 30%, var(--line)); }
.stat.locked .stat__fill {
  width: 100%;
  position: relative;
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--gold) 55%, transparent) 0 7px,
    color-mix(in srgb, var(--gold-deep) 45%, transparent) 7px 14px);
  opacity: .5;
  box-shadow: none;
  overflow: hidden;
}
/* teasing shimmer sweep across the locked stripes */
.stat.locked .stat__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: lockSweep 3.2s var(--ease) infinite;
}
@keyframes lockSweep {
  0%, 60% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
.stat.locked .stat__val { color: color-mix(in srgb, var(--gold) 70%, var(--muted)); }

/* --- Signature move box --- */
.sig {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ink-2) 70%, transparent);
  border: 1px solid var(--line);
  border-left: 2px solid color-mix(in srgb, var(--gold) 60%, transparent);
}
.sig__k {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
}
.sig__v {
  font-family: var(--font-body);
  font-size: var(--fs-300);
  line-height: 1.35;
  color: var(--text);
}

/* --- Flavor line --- */
.flavor {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-200);
  text-align: center;
  color: var(--muted);
  text-wrap: balance;
  padding: 0 4px;
}

/* --- Foot: watermark + DNA --- */
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.wm {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) 82%, var(--muted));
}
.dna {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: .04em;
  color: var(--muted-2);
}

/* --------------------------------------------------------------------------
   6b. Per-tier escalation — colour / glow / foil intensity
   Foil opacities mirror RARE.data.TIERS (0 · .14 · .22 · .40 · .70).
   -------------------------------------------------------------------------- */
.card[data-tier="common"]    { --tier: var(--t-common);    --foil: 0;   --glow: transparent;                --shine-op: .08; }
.card[data-tier="rare"]      { --tier: var(--t-rare);      --foil: .14; --glow: rgba( 89,166,255,.30);      --shine-op: .12; }
.card[data-tier="epic"]      { --tier: var(--t-epic);      --foil: .22; --glow: rgba(176,107,255,.36);      --shine-op: .15; }
.card[data-tier="legendary"] { --tier: var(--t-legendary); --foil: .40; --glow: rgba(245,196,81, .46);      --shine-op: .18; }
.card[data-tier="mythic"]    { --tier: var(--t-mythic);    --foil: .70; --glow: rgba(125,249,255,.52);      --shine-op: .22; }

/* Common: thin grey frame, no glow, no foil — plentiful/everyday. */
.card[data-tier="common"] { border-color: var(--line-strong); }
.card[data-tier="common"] .card__foil { display: none; }

/* Legendary + Mythic: the tag itself becomes animated foil (dark ink text). */
.card[data-tier="legendary"] .tier-tag,
.card[data-tier="mythic"] .tier-tag {
  color: #1b1206;
  border-color: transparent;
  background: linear-gradient(100deg, var(--foil-cyan), var(--foil-violet), var(--foil-gold), var(--foil-cyan));
  background-size: 220% 100%;
  box-shadow: 0 0 16px -4px color-mix(in srgb, var(--tier) 70%, transparent);
  animation: foilTag 4.5s linear infinite;
}
@keyframes foilTag { 0% { background-position: 0 0; } 100% { background-position: 220% 0; } }

/* Mythic: richer, more saturated full-rainbow foil. */
.card[data-tier="mythic"] .card__foil {
  background:
    linear-gradient(112deg,
      rgba(125,249,255,.6), rgba(176,107,255,.6), rgba(245,196,81,.6),
      rgba(125,249,255,.6), rgba(176,107,255,.6));
  background-size: 300% 300%;
  animation-duration: 7s;
}
.card[data-tier="mythic"] .rarity__num {
  text-shadow:
    0 0 30px color-mix(in srgb, var(--t-mythic) 70%, transparent),
    0 0 60px color-mix(in srgb, var(--foil-violet) 40%, transparent);
}

/* ==========================================================================
   7. CTA cluster  (.cta · .cta__row · .challenge)
   ========================================================================== */

.cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
}
.cta__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cta__row > .btn { flex: 1 1 auto; }

.challenge {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-200);
  color: var(--muted);
  margin-top: 2px;
}

/* ==========================================================================
   8. LEADERBOARD  (.board · head · reset · row(.you) · pos · who · rr · tdot
                    · crown · you-tag)
   ========================================================================== */

.board {
  margin-top: 32px;
  padding: 16px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink-2) 78%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.board__head > :first-child,
.board__head .board__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-500);
  color: var(--text);
}
.board__reset {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: .02em;
  color: var(--muted);
}

.row {
  --tier: var(--muted);
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color var(--dur), border-color var(--dur);
}
.row + .row { margin-top: 2px; }
.row:nth-child(odd) { background: color-mix(in srgb, var(--surface) 40%, transparent); }

/* the user's own pull — gold highlight */
.row.you {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 14%, transparent);
}

.row__pos {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-300);
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.row.you .row__pos { color: var(--gold); }

.row__who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.row__nm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-300);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row__ar {
  font-family: var(--font-body);
  font-size: var(--fs-100);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row__rr {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-300);
  color: var(--tier);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* tier dot — colour from the row's --tier (Director sets it inline) */
.tdot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tier);
  box-shadow: 0 0 8px -1px color-mix(in srgb, var(--tier) 80%, transparent);
}
.crown {
  font-size: .95em;
  line-height: 1;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 55%, transparent));
}
.you-tag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #241703;
  background: var(--gold);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ==========================================================================
   9. TOAST  (.toast · .toast.show)
   ========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 100;
  transform: translate(-50%, 140%);
  max-width: min(360px, calc(100vw - 32px));
  padding: 13px 18px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink-2) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line-strong));
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-300);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ==========================================================================
   10. RESPONSIVE — tiny phones (< 360px): card & column scale cleanly
   ========================================================================== */
@media (max-width: 360px) {
  .card { width: min(300px, 90vw); padding: 14px 13px 12px; }
  .namebar { flex-wrap: wrap; }
  .namebar .btn { width: 100%; }
  .stat { grid-template-columns: 52px 1fr 24px; gap: 8px; }
}