/* Base: reset, table surface, type, controls. Fonts: self-hosted woff2 copied to /fonts/ by scripts/build-web.mjs (@font-face in pages.css). */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* element resets are scoped to the landing (.lx) so APP pages keep their own rhythm */
.lx :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; }
.lx :where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
.lx :where(img, svg, picture) { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

body {
  min-height: 100vh;
  background: var(--table);
  color: var(--table-ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* felt: a tiny repeating weave so the table is a surface, not a void (not grain/noise) */
.felt {
  background-color: var(--table);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 2px, transparent 2px 6px);
}

.wrap { width: min(100% - 2 * var(--gutter), var(--content-max)); margin-inline: auto; }

.display, .lx h1, .lx h2, .lx h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
}
.lx h1 { font-size: var(--fs-hero); }
.lx h2 { font-size: var(--fs-xl); }
.lx h3 { font-size: var(--fs-lg); }

.mono, code, kbd, samp { font-family: var(--font-mono); font-size: .875em; letter-spacing: -.01em; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--table-ink-2); }
.caption { font-size: var(--fs-xs); color: var(--table-ink-3); letter-spacing: .04em; text-transform: uppercase; }

.lx a { color: var(--venom); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lx a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--venom); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border: 0; border-radius: var(--radius-box);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: var(--fs-md);
  background: var(--venom); color: var(--venom-ink);
  box-shadow: 0 3px 0 #6E9A1E;
  transition: transform var(--t-fast) var(--ease-snap), box-shadow var(--t-fast) var(--ease-snap);
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #6E9A1E; }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 #6E9A1E; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn--ember { background: var(--ember); color: var(--ember-ink); box-shadow: 0 3px 0 #B4471D; }
.btn--ghost {
  background: transparent; color: var(--table-ink);
  box-shadow: inset 0 0 0 2px var(--table-line);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--table-ink-2); }
.btn--sm { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-sm); }

.field {
  display: flex; align-items: stretch; gap: 0;
  background: var(--table-3);
  border-radius: var(--radius-box);
  box-shadow: inset 0 0 0 2px var(--table-line);
  transition: box-shadow var(--t-fast);
}
.field:focus-within { box-shadow: inset 0 0 0 2px var(--venom); }
.field input {
  flex: 1; min-width: 0; min-height: 52px;
  padding: 0 var(--s-4);
  background: transparent; border: 0; outline: none;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--table-ink);
}
.field input::placeholder { color: var(--table-ink-3); }
.field .btn { border-radius: 0 var(--radius-box) var(--radius-box) 0; box-shadow: none; }
.field-error { margin-top: var(--s-2); color: var(--ember); font-size: var(--fs-sm); min-height: 1.5em; }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 32px; padding: 0 var(--s-3) 0 var(--s-1);
  border-radius: var(--radius-chip);
  background: var(--table-3); color: var(--table-ink);
  box-shadow: inset 0 0 0 1px var(--table-line);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-decoration: none;
  transition: box-shadow var(--t-fast), transform var(--t-fast) var(--ease-snap);
}
.chip:hover { box-shadow: inset 0 0 0 1px var(--venom); transform: translateY(-1px); }
.chip img, .chip svg { width: 24px; height: 24px; border-radius: 50%; background: var(--bone); }

/* copy line: `curl …` / CA slot */
.copyline {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border-radius: var(--radius-box);
  background: #0A120D;
  box-shadow: inset 0 0 0 1px var(--table-line);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--table-ink-2);
  overflow: hidden;
}
.copyline code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: inherit; }
.copyline .prompt { color: var(--venom); user-select: none; }
.copybtn {
  flex: none; min-height: 32px; padding: 0 var(--s-3);
  border: 0; border-radius: 6px;
  background: var(--table-3); color: var(--table-ink);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
}
.copybtn:hover { background: var(--table-line); }
.copybtn[data-copied] { background: var(--venom); color: var(--venom-ink); }
.copybtn[disabled] { opacity: .4; cursor: not-allowed; }

/* tick: numbers that tick fast and stop hard */
.tick { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Gorgon's speech line */
.say {
  position: relative; display: inline-block;
  padding: var(--s-2) var(--s-3);
  background: var(--bone); color: var(--ink);
  border-radius: var(--radius-box);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm);
  box-shadow: var(--shadow-card);
}
.say::after {
  content: ""; position: absolute; left: 18px; bottom: -7px;
  border: 8px solid transparent; border-top-color: var(--bone); border-bottom: 0;
}

/* empty / error state with Gorgon */
.empty {
  display: grid; justify-items: center; gap: var(--s-3);
  padding: var(--s-7) var(--s-4); text-align: center; color: var(--table-ink-2);
}
.empty img { width: 120px; height: auto; }

/* Card component — used by every page (landing hand, /b, /vs, /dex, /arena).
   Import after tokens.css + base.css.

   Markup contract (APP pages render the same structure):

   <article class="card" data-rarity="common|uncommon|rare|epic|mythic"
            data-stage="egg|young|adult|apex" data-condition="awake|asleep|petrified"
            data-side="own|opp" [data-flipped] [data-size="sm|md|lg"]>
     <div class="card__inner">
       <div class="card__face card__front">
         <header class="card__bar">
           <span class="card__name" title="full name">Vrakhul</span>
           <span class="card__badge">Adult</span>
           <span class="card__sub">Chimerith of <b>CHIEF</b></span>
         </header>
         <div class="card__art">  <img|svg …>  <span class="card__cond">asleep since 2026-11-01</span> </div>
         <dl class="card__stats">
           <div class="stat stat--hp"><dt>HP</dt><dd>45</dd></div>  … atk def spd
         </dl>
         <p class="card__flavour">"A coin that stops trading sleeps."</p>
         <footer class="card__foot"><span class="card__rarity">Rare</span><span class="card__element">Ember 42%</span></footer>
       </div>
       <div class="card__face card__back"> … (deck back or a mechanic explainer) </div>
     </div>
   </article>
*/

.card {
  --card-w: 260px;
  --foil: var(--r-common);
  --foil-2: var(--bone-3);
  position: relative;
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  perspective: 1200px;
  container-type: inline-size; /* descendants size in cqi so fluid cards scale */
  color: var(--ink);
  font-family: var(--font-body);
  flex: none;
}
.card[data-size="sm"] { --card-w: 168px; }
.card[data-size="lg"] { --card-w: 340px; }
.card[data-size="fluid"] { --card-w: 100%; }

.card[data-rarity="uncommon"] { --foil: var(--r-uncommon); --foil-2: #8DB58F; }
.card[data-rarity="rare"]     { --foil: var(--r-rare);     --foil-2: #7D93F0; }
.card[data-rarity="epic"]     { --foil: var(--r-epic);     --foil-2: #B993FF; }
.card[data-rarity="mythic"]   { --foil: var(--r-mythic);   --foil-2: #F4DC92; }

.card__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--t-flip) var(--ease-spring);
}
.card[data-flipped] .card__inner { transform: rotateY(180deg); }

.card__face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  border-radius: var(--radius-card);
  background: var(--bone);
  box-shadow: var(--shadow-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  /* foil border: the only gradient in the system */
  border: var(--card-border) solid transparent;
  background:
    linear-gradient(var(--bone), var(--bone)) padding-box,
    linear-gradient(135deg, var(--foil) 0%, var(--foil-2) 45%, var(--foil) 55%, var(--foil-2) 100%) border-box;
}
.card[data-rarity="common"] .card__face,
.card:not([data-rarity]) .card__face {
  background:
    linear-gradient(var(--bone), var(--bone)) padding-box,
    linear-gradient(var(--bone-3), var(--bone-3)) border-box;
}
.card__back { transform: rotateY(180deg); }

/* --- name bar --- */
.card__bar {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 6px;
  padding: 3.5cqi 5cqi 2cqi;
}
.card__name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 7.5cqi; line-height: 1; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card__sub {
  grid-column: 1 / -1;
  font-size: 4.5cqi; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card__sub b { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.card__badge {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 4cqi; letter-spacing: .08em;
  padding: 2px 6px; border-radius: 4px;
  background: var(--ink); color: var(--bone);
}
.card[data-stage="apex"] .card__badge { background: var(--foil); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.card[data-stage="egg"] .card__badge { background: var(--bone-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }

/* --- art window --- */
.card__art {
  position: relative;
  margin: 0 5cqi;
  flex: 1 1 auto; min-height: 0;
  border-radius: calc(var(--radius-box) - 2px);
  background: var(--table-2);
  box-shadow: inset 0 0 0 2px var(--ink);
  overflow: hidden;
  display: grid; place-items: center;
}
.card__art > img, .card__art > svg { width: 100%; height: 100%; object-fit: contain; }
.card[data-condition="asleep"] .card__art > img,
.card[data-condition="asleep"] .card__art > svg { filter: saturate(.5) brightness(.85); }
.card[data-condition="petrified"] .card__art > img,
.card[data-condition="petrified"] .card__art > svg { filter: grayscale(1) contrast(1.1); }
.card__cond {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  padding: 3px 6px; border-radius: 4px;
  background: rgba(15, 26, 20, .86); color: var(--bone);
  font-family: var(--font-mono); font-size: 3.6cqi;
  text-align: center;
}
.card[data-condition="awake"] .card__cond { display: none; }

/* --- stat boxes --- */
.card__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqi;
  margin: 3.5cqi 5cqi 0;
}
.stat {
  display: grid; justify-items: center;
  padding: 1.5cqi 0;
  border-radius: 5px;
  background: var(--bone-2);
  box-shadow: inset 0 -3px 0 var(--stat-c, var(--ink-3));
}
.stat dt {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .08em;
  font-size: 3.6cqi; color: var(--ink-2);
}
.stat dd {
  margin: 0;
  font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: 7cqi; line-height: 1.1; color: var(--ink);
}
.stat--hp  { --stat-c: var(--stat-hp); }
.stat--atk { --stat-c: var(--stat-atk); }
.stat--def { --stat-c: var(--stat-def); }
.stat--spd { --stat-c: var(--stat-spd); }

.card__flavour {
  margin: 2.5cqi 5cqi 0;
  font-size: 4.2cqi; font-style: italic; color: var(--ink-2);
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__flavour:empty { display: none; }

.card__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
  padding: 2.5cqi 5cqi 3cqi;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  font-size: 3.6cqi; color: var(--ink-2);
}
.card__rarity { display: inline-flex; align-items: center; gap: 4px; }
.card__rarity::before {
  content: ""; width: .9em; height: .9em; border-radius: 2px; transform: rotate(45deg);
  background: var(--foil); box-shadow: inset 0 0 0 1px var(--ink);
}

/* small cards: drop the flavour line and foot text density */
.card[data-size="sm"] .card__flavour { display: none; }
.card[data-size="sm"] .card__sub { font-size: 5.5cqi; }

/* --- deck back (face-down card / back of a flip-stop) --- */
.card__back {
  align-items: center; justify-content: center; gap: var(--s-3);
  padding: var(--s-4);
  color: var(--bone);
  background:
    linear-gradient(var(--table-2), var(--table-2)) padding-box,
    linear-gradient(var(--bone-3), var(--bone-3)) border-box;
}
.card__back--pattern {
  background:
    repeating-linear-gradient(45deg, rgba(184,245,66,.08) 0 6px, transparent 6px 14px) padding-box,
    linear-gradient(var(--table-2), var(--table-2)) padding-box,
    linear-gradient(var(--bone-3), var(--bone-3)) border-box;
}
.card__back .card__sigil {
  width: 44%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 3px var(--bone), inset 0 0 0 7px var(--table-2), inset 0 0 0 9px var(--venom);
  font-family: var(--font-display); font-weight: 700; font-size: 16cqi; color: var(--venom);
}

/* sides in a duel */
.card[data-side="own"] .card__face { box-shadow: var(--shadow-card), 0 0 0 3px var(--venom); }
.card[data-side="opp"] .card__face { box-shadow: var(--shadow-card), 0 0 0 3px var(--ember); }
.card[data-result="draw"] .card__face { filter: grayscale(.8); }

/* interactive lift */
a.card, .card[data-interactive] { cursor: pointer; text-decoration: none; }
a.card .card__inner, .card[data-interactive] .card__inner {
  transition: transform var(--t-flip) var(--ease-spring), translate var(--t-med) var(--ease-spring);
}
a.card:hover .card__inner, .card[data-interactive]:hover .card__inner { translate: 0 -6px; }
a.card:hover .card__face, .card[data-interactive]:hover .card__face { box-shadow: var(--shadow-card-lift); }

/* ---------- motion: deal / snap / shake ---------- */

@keyframes card-deal {
  0%   { opacity: 0; transform: translate(var(--deal-from-x, -40vw), var(--deal-from-y, -10vh)) rotate(-24deg) scale(.9); }
  70%  { opacity: 1; transform: translate(0, 0) rotate(var(--deal-rot, 0deg)) scale(1.04); }
  100% { opacity: 1; transform: translate(0, 0) rotate(var(--deal-rot, 0deg)) scale(1); }
}
.card.is-dealing {
  animation: card-deal var(--t-deal) var(--ease-snap) both;
  animation-delay: calc(var(--i, 0) * var(--deal-stagger));
}

@keyframes card-hit {
  0%, 100% { translate: 0 0; }
  20% { translate: -7px 2px; }
  40% { translate: 6px -2px; }
  60% { translate: -4px 1px; }
  80% { translate: 2px 0; }
}
.card.is-hit { animation: card-hit 260ms linear; }
.card.is-crit { animation: card-hit 340ms linear; }
.card.is-crit .card__art::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ember); mix-blend-mode: multiply; opacity: .35;
  animation: crit-flash 340ms steps(2, end) both;
}
@keyframes crit-flash { from { opacity: .5; } to { opacity: 0; } }

@keyframes card-snap { 0% { transform: scale(.96); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.card.is-snap { animation: card-snap 240ms var(--ease-spring); }

/* HP bar (duel) */
.hpbar {
  position: relative; height: 10px; border-radius: 3px;
  background: var(--table-3); box-shadow: inset 0 0 0 1px var(--table-line); overflow: hidden;
}
.hpbar > i {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--hp, 1) * 100%);
  background: var(--venom); transition: width 300ms var(--ease-snap);
}
.hpbar[data-side="opp"] > i { background: var(--ember); }

/* ---------- fan / hand layout ---------- */
.hand {
  display: flex; justify-content: center; align-items: flex-end;
  padding-block: var(--s-5);
}
.hand > .card { margin-inline: calc(var(--card-w) * -.18); rotate: var(--fan, 0deg); transform-origin: 50% 120%; }
.hand > .card:nth-child(1) { --fan: -12deg; translate: 0 18px; z-index: 1; }
.hand > .card:nth-child(2) { --fan: -6deg;  translate: 0 5px;  z-index: 2; }
.hand > .card:nth-child(3) { --fan: 0deg;   translate: 0 0;    z-index: 3; }
.hand > .card:nth-child(4) { --fan: 6deg;   translate: 0 5px;  z-index: 2; }
.hand > .card:nth-child(5) { --fan: 12deg;  translate: 0 18px; z-index: 1; }
.hand > .card:hover { z-index: 5; }

@media (max-width: 860px) {
  /* narrow: hand becomes a fan of 3 */
  .hand > .card { --card-w: min(42vw, 220px); }
  .hand > .card:nth-child(1), .hand > .card:nth-child(5) { display: none; }
  .hand > .card:nth-child(2) { --fan: -9deg; translate: 0 10px; }
  .hand > .card:nth-child(4) { --fan: 9deg;  translate: 0 10px; }
}

/* card grid (dex, teaser) */
.card-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  justify-items: center;
}
.card-grid > .card { --card-w: 100%; max-width: 240px; }

@media (prefers-reduced-motion: reduce) {
  .card.is-dealing, .card.is-hit, .card.is-crit, .card.is-snap { animation: none; }
  .card .card__inner { transition: none; }
}

/* Gorgodex design tokens — "field-guide card deck" (BRIEF §4.0).
   Two surfaces: dark bog-green table + bone card faces. No gradients except foil, no glow. */

:root {
  /* table (page) */
  --table: #0F1A14;
  --table-2: #16241C;
  --table-3: #1E3027;          /* raised felt: inputs, chips on the table */
  --table-line: #2A3F33;       /* hairline on the table */
  --table-ink: #EAE3CF;        /* text on the table = bone */
  --table-ink-2: #A9B3A4;      /* secondary text on the table */
  --table-ink-3: #74826F;      /* tertiary / captions */

  /* card face */
  --bone: #EAE3CF;
  --bone-2: #DDD4BB;           /* stat boxes, inset panels */
  --bone-3: #CBC0A2;           /* rules on the card */
  --ink: #1A1F1B;
  --ink-2: #4A514A;
  --ink-3: #6E7366;

  /* accents */
  --venom: #B8F542;            /* own side / win */
  --venom-ink: #1A2A05;        /* text on venom */
  --ember: #FF7A45;            /* opponent / loss */
  --ember-ink: #2B0F04;

  /* rarity foils */
  --r-common: #EAE3CF;
  --r-uncommon: #5E8C61;
  --r-rare: #3B5BDB;
  --r-epic: #8A4FFF;
  --r-mythic: #E0B23A;

  /* stats (on bone) — darkened for contrast on --bone */
  --stat-hp: #2F7A3A;
  --stat-atk: #B5431A;
  --stat-def: #3B5BDB;
  --stat-spd: #7A5A00;

  /* type */
  --font-display: "Chakra Petch", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --fs-hero: clamp(2rem, 1.2rem + 3.6vw, 4rem);

  /* space (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* shape */
  --radius-card: 14px;
  --radius-box: 8px;
  --radius-chip: 999px;
  --card-border: 3px;

  /* card shadow: a physical card lying on felt (hard, short — not a glow) */
  --shadow-card: 0 1px 0 rgba(0,0,0,.35), 0 6px 14px -6px rgba(0,0,0,.55);
  --shadow-card-lift: 0 2px 0 rgba(0,0,0,.35), 0 18px 28px -12px rgba(0,0,0,.6);

  /* motion: deal / flip / snap — everything ≤ 400 ms except the duel */
  --ease-snap: cubic-bezier(.2, .9, .25, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);   /* ~1.04 overshoot at card scale */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms;
  --t-med: 240ms;
  --t-flip: 380ms;
  --t-deal: 340ms;
  --deal-stagger: 60ms;

  --content-max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms; --t-med: 0ms; --t-flip: 0ms; --t-deal: 0ms; --deal-stagger: 0ms;
  }
}

/* Landing (/) — LANDING agent. Builds on tokens.css / base.css / card.css. Prefix lx-. */

body.lx { background: var(--table); color: var(--table-ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55; }
.lx a.card { display: block; color: var(--ink); text-decoration: none; }
.lx .card__art img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- nav ---------- */
.lx-nav {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: min(100% - 2 * var(--gutter), var(--content-max)); margin-inline: auto;
  padding: var(--s-4) 0;
}
.lx-brand { flex: none; display: inline-flex; align-items: center; gap: 10px; color: var(--bone) !important; text-decoration: none !important; }
.lx-brand span { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .14em; }
.lx-nav nav { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; gap: clamp(10px, 2.4vw, 28px); }
.lx-nav nav a { white-space: nowrap; }
.lx-sound { flex: none; }
.lx-nav nav a { color: var(--table-ink-2); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 0; border-bottom: 2px solid transparent; }
.lx-nav nav a:hover { color: var(--bone); border-color: var(--venom); }
.lx-sound {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: var(--table-3); color: var(--table-ink-2); box-shadow: inset 0 0 0 1px var(--table-line);
}
.lx-sound:hover { color: var(--bone); }
.lx-sound .lx-sound__on { display: none; }
.lx-sound[aria-pressed="true"] { color: var(--venom-ink); background: var(--venom); box-shadow: none; }
.lx-sound[aria-pressed="true"] .lx-sound__on { display: inline; }
.lx-sound[aria-pressed="true"] .lx-sound__off { display: none; }

/* ---------- HUD primitives ---------- */
.lx { --hud: rgba(234,227,207,.12); --hud-2: rgba(234,227,207,.26); --glow: 0 0 22px rgba(184,245,66,.22); }
.hud-k { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--table-ink-3); margin-right: 10px; }
.hud-br { position: absolute; width: 10px; height: 10px; border: 0 solid var(--venom); pointer-events: none; }
.hud-br--tl { left: -5px; top: -5px; border-left-width: 1px; border-top-width: 1px; }
.hud-br--tr { right: -5px; top: -5px; border-right-width: 1px; border-top-width: 1px; }
.hud-br--bl { left: -5px; bottom: -5px; border-left-width: 1px; border-bottom-width: 1px; }
.hud-br--br { right: -5px; bottom: -5px; border-right-width: 1px; border-bottom-width: 1px; }
/* content is visible by default; GSAP sets its start states only when it actually runs */

/* ---------- hero / poster ---------- */
.lx-hero { position: relative; overflow: hidden; padding: clamp(18px, 3vw, 40px) var(--gutter) clamp(40px, 6vw, 72px); }
.lx-hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(234,227,207,.018) 0 1px, transparent 1px 3px),
    linear-gradient(var(--hud) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, var(--hud) 1px, transparent 1px) 0 0 / 72px 72px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 0%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 0%, transparent 80%);
}
.lx-hero__top { text-align: center; max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; }

.lx-live {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 0;
  padding: 7px 0; border-top: 1px solid var(--hud); border-bottom: 1px solid var(--hud);
}
.lx-live__item { display: inline-flex; align-items: baseline; padding: 0 18px; }
.lx-live__item + .lx-live__item { border-left: 1px solid var(--hud); }
.lx-live__item .hud-k { margin-right: 8px; }
.lx-live__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--table-ink-2); margin-right: 10px; }
.lx-live b, .lx-live a { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--bone); text-decoration: none; font-variant-numeric: tabular-nums; }
.lx-live a { color: var(--venom); text-shadow: var(--glow); }
.lx-live.is-quiet b { color: var(--table-ink-3); }

.lx-title { margin-top: clamp(18px, 2.4vw, 28px) !important; font-size: clamp(2rem, .7rem + 3.5vw, 3.75rem) !important; line-height: 1 !important; letter-spacing: -.005em !important; }
.lx-title__l { display: block; }
.lx-title em { font-style: normal; color: var(--venom); text-shadow: 0 0 28px rgba(184,245,66,.18); }
.lx-title .lx-w { display: inline-block; }
.lx-title .lx-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.lx-sub { margin-top: 14px !important; color: var(--table-ink-2); font-size: clamp(.95rem, .9rem + .25vw, 1.08rem); }

/* summon */
.lx-summon { position: relative; z-index: 3; width: min(100%, 640px); margin: clamp(22px, 2.6vw, 34px) auto 0; }
.lx-form__label { display: flex; justify-content: center; align-items: baseline; margin-bottom: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--table-ink-2); }
.lx-form__label .hud-k { color: var(--venom); }
.lx-field { position: relative; display: flex; align-items: stretch; background: rgba(8,14,10,.72); box-shadow: inset 0 0 0 1px var(--hud-2); transition: box-shadow var(--t-med); }
.lx-field:focus-within { box-shadow: inset 0 0 0 1px var(--venom), var(--glow); }
.lx-field input { flex: 1; min-width: 0; min-height: 58px; padding: 0 16px 0 12px; background: transparent; border: 0; outline: none; color: var(--bone); font-family: var(--font-mono); font-size: clamp(13px, 1.2vw, 15px); }
.lx-field input::placeholder { color: var(--table-ink-3); }
.lx-field__pre { display: grid; place-items: center; padding-left: 18px; color: var(--venom); font-size: 11px; letter-spacing: .1em; }
.lx-summon__btn {
  flex: none; white-space: nowrap;
  position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 6px; padding: 0 clamp(16px, 2.4vw, 26px);
  border: 0; background: var(--venom); color: var(--venom-ink);
  font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 15px;
  box-shadow: var(--glow); will-change: transform;
}
.lx-summon__btn:hover { background: #C9FF63; }
.lx-form.is-shake { animation: card-hit 300ms linear; }
.lx-form .field-error { text-align: center; font-size: 13px; }
.lx-form .field-error:empty { min-height: 0; margin: 0; }
.lx-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.lx-chips .chip { background: transparent; box-shadow: inset 0 0 0 1px var(--hud-2); border-radius: 4px; min-height: 30px; font-size: 11.5px; }
.lx-chips .chip:hover { box-shadow: inset 0 0 0 1px var(--venom); }
.lx-chips .chip img { width: 22px; height: 22px; border-radius: 3px; background: var(--table-2); }
.lx-chips .hud-k { margin-right: 4px; }

/* quiet meta line: curl + CA slot */
.lx-meta { position: relative; z-index: 3; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 14px; width: min(100%, 860px); margin: 16px auto 0; }
.lx-meta__item { display: flex; align-items: center; min-width: 0; max-width: 100%; height: 32px; padding: 0 4px 0 12px; box-shadow: inset 0 0 0 1px var(--hud); font-size: 12px; color: var(--table-ink-2); }
.lx-meta__item .hud-k { margin-right: 10px; }
.lx-curl { flex: 0 1 330px; }
.lx-curl code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--table-ink-2); }
.lx-caslot { flex: 0 1 auto; }
.lx-caslot__tick { color: var(--ember) !important; }
.lx-caslot__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.lx-caslot.is-live .lx-caslot__tick { color: var(--venom) !important; }
.lx-caslot.is-live .lx-caslot__text { font-family: var(--font-mono); color: var(--bone); }
.lx-meta__btn { flex: none; height: 24px; margin-left: 6px; padding: 0 9px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--hud-2); color: var(--table-ink-2); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; }
.lx-meta__btn:hover { color: var(--bone); box-shadow: inset 0 0 0 1px var(--bone); }
.lx-meta__btn[data-copied] { color: var(--venom-ink); background: var(--venom); box-shadow: none; }
.lx-meta__btn--go { color: var(--venom) !important; box-shadow: inset 0 0 0 1px var(--venom); }

/* the table: Gorgon + a dealt hand */
.lx-stage { position: relative; z-index: 1; width: min(100%, 1180px); margin: clamp(10px, 1.6vw, 18px) auto 34px; height: clamp(250px, 18vw + 40px, 300px); }
.lx-table {
  position: absolute; left: 3%; right: 3%; bottom: -6%; height: 54%; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--hud-2), inset 0 0 0 18px var(--table), inset 0 0 0 19px var(--hud);
  background:
    linear-gradient(var(--hud) 1px, transparent 1px) 0 0 / 40px 22px,
    linear-gradient(90deg, var(--hud) 1px, transparent 1px) 0 0 / 40px 22px,
    var(--table-2);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, rgba(0,0,0,.6) 100%);
          mask-image: radial-gradient(ellipse at center, #000 55%, rgba(0,0,0,.6) 100%);
}
.lx-gorgon { position: absolute; right: max(0px, calc(50% - 660px)); bottom: -6px; margin: 0; z-index: 1; height: clamp(300px, 30vw + 40px, 480px); aspect-ratio: 331 / 600; will-change: transform; }
.lx-gorgon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0,0,0,.45)); }
.lx-say {
  position: absolute; right: 76%; top: 37%; width: max-content; max-width: 210px; z-index: 3;
  padding: 8px 12px 8px 14px; background: rgba(8,14,10,.82); box-shadow: inset 0 0 0 1px var(--hud-2), inset 2px 0 0 var(--venom);
  color: var(--bone); font-size: 13.5px; line-height: 1.35;
}
.lx-hand { position: absolute; z-index: 2; left: 0; right: 0; bottom: 4%; padding: 0; margin-right: clamp(0px, 16vw, 240px); perspective: 1200px; }
.lx-hand > .card { --card-w: clamp(118px, 9vw + 40px, 172px); }
.lx-hand .card__flavour { font-style: normal; font-family: var(--font-mono); font-size: 3.6cqi; }
.lx-hand__caption { position: absolute; z-index: 2; left: 0; right: 0; bottom: -32px; margin-right: clamp(0px, 16vw, 240px); text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--table-ink-3); }

/* ---------- flip-stops ---------- */
.lx-deck { position: relative; width: min(100% - 2 * var(--gutter), 1120px); margin: 0 auto; padding: clamp(56px, 8vw, 120px) 0 var(--s-6); display: grid; gap: clamp(72px, 10vw, 140px); }
.lx-stop { position: relative; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); min-height: min(78vh, 640px); }
.lx-stop--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.lx-stop--flip .lx-stop__card { order: 2; }
.lx-stop--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
.lx-stop--wide.lx-stop--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lx-stop > * { min-width: 0; }
.lx-stop__card { display: grid; justify-items: center; perspective: 1400px; }
.lx-stop__text { max-width: 500px; }
.lx-stop__num { display: flex; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--hud); font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--table-ink-2); }
.lx-stop__num .hud-k { color: var(--venom); font-size: 11px; }
.lx-stop__text h2 { margin-top: 18px !important; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.35rem) !important; line-height: 1.04 !important; text-wrap: balance; }
.lx-stop__text > p:not(.lx-stop__num) { margin-top: 16px !important; color: var(--table-ink-2); font-size: 17px; }
.lx-stop__more a { font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; font-size: 12px; text-decoration: none; }
.lx-stop__more a::after { content: "  →"; }
.lx-stop__sweep { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hud); transform-origin: left; }

/* progress rail 01–05 */
.lx-rail { position: fixed; z-index: 20; left: clamp(12px, 2vw, 28px); top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; opacity: 0; pointer-events: none; transition: opacity var(--t-med); }
.lx-rail.is-on { opacity: 1; }
.lx-rail li { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--table-ink-3); }
.lx-rail li::before { content: ""; width: 14px; height: 1px; background: var(--hud-2); transition: width var(--t-med) var(--ease-snap), background var(--t-med); }
.lx-rail li i { font-style: normal; }
.lx-rail li span { opacity: 0; transform: translateX(-4px); transition: opacity var(--t-med), transform var(--t-med); }
.lx-rail li.is-active { color: var(--venom); }
.lx-rail li.is-active::before { width: 28px; background: var(--venom); box-shadow: var(--glow); }
.lx-rail li.is-active span { opacity: 1; transform: none; color: var(--bone); }
@media (max-width: 1180px) { .lx-rail { display: none; } }
@media (prefers-reduced-motion: reduce), (max-width: 960px) { .lx-stop { min-height: 0; } }

.card.lx-bigcard[data-size] { --card-w: min(340px, 82vw); }
.lx-backlabel { font-family: var(--font-display); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bone); font-size: 5cqi; }

/* anatomy card */
.lx-anatomy__art, .lx-statcard__art { margin: 0 5cqi; height: 34%; border-radius: 6px; background: var(--table-2); box-shadow: inset 0 0 0 2px var(--ink); display: grid; place-items: center; overflow: hidden; }
.lx-anatomy__art img, .lx-statcard__art img { height: 100%; width: 100%; object-fit: contain; }
.lx-bytes { margin: 3cqi 5cqi 0; border-collapse: collapse; font-size: 3.7cqi; width: calc(100% - 10cqi); }
.lx-bytes th { text-align: left; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); font-weight: 700; padding: 1.3cqi 0; }
.lx-bytes td { padding: 1.3cqi 0 1.3cqi 2cqi; border-top: 1px solid var(--bone-3); color: var(--ink); text-align: right; }
.lx-bytes th { border-top: 1px solid var(--bone-3); }
.lx-bytes tr:first-child th, .lx-bytes tr:first-child td { border-top: 0; }
.lx-bytes td.mono { color: var(--ink-3); font-size: 3.2cqi; text-align: left; }
.lx-swatch { display: inline-block; width: 1em; height: 1em; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); vertical-align: -2px; }

/* stat card */
.lx-sbars { display: grid; gap: 2.4cqi; margin: 4cqi 5cqi 0; }
.lx-sbar { display: grid; grid-template-columns: 10cqi 1fr 9cqi; grid-template-rows: auto auto; align-items: center; column-gap: 2.4cqi; }
.lx-sbar__k { font-family: var(--font-display); font-weight: 700; font-size: 4cqi; color: var(--ink-2); letter-spacing: .06em; }
.lx-sbar__track { height: 2.6cqi; border-radius: 2px; background: var(--bone-2); box-shadow: inset 0 0 0 1px var(--bone-3); overflow: hidden; }
.lx-sbar__track i { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--c); transform-origin: left; }
.lx-sbar b { font-size: 5cqi; text-align: right; color: var(--ink); }
.lx-sbar small { grid-column: 2 / 4; font-size: 3.2cqi; color: var(--ink-3); line-height: 1.1; }
.lx-sbar--hp { --c: var(--stat-hp); } .lx-sbar--atk { --c: var(--stat-atk); } .lx-sbar--def { --c: var(--stat-def); } .lx-sbar--spd { --c: var(--stat-spd); }

.lx-formulas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: var(--s-5) !important; }
.lx-formulas div { padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--hud); }
.lx-formulas dt { font-family: var(--font-display); font-weight: 700; color: var(--bone); letter-spacing: .08em; }
.lx-formulas dd { margin: 0; color: var(--table-ink-2); font-size: 15px; }

/* stages */
.lx-stages { width: 100%; max-width: 460px; }
.lx-stages__who { text-align: center; margin-bottom: var(--s-3) !important; }
.lx-stages__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; list-style: none; padding: 0; margin: 0; }
.lx-stagecard {
  position: relative; display: grid; justify-items: center; text-align: center; gap: 2px;
  padding: 8px 6px 10px; border-radius: 10px; background: var(--bone); color: var(--ink);
  box-shadow: var(--shadow-card), inset 0 0 0 2px var(--bone-3);
}
.lx-stagecard.is-now { box-shadow: var(--shadow-card), inset 0 0 0 2px var(--ink), 0 0 0 3px var(--venom); }
.lx-stagecard__art { width: 100%; aspect-ratio: 1; border-radius: 6px; background: var(--table-2); display: grid; place-items: center; overflow: hidden; }
.lx-stagecard__art img, .lx-stagecard__art svg { width: 100%; height: 100%; object-fit: contain; }
.lx-stagecard b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 14px; margin-top: 4px; }
.lx-stagecard small { font-size: 11px; color: var(--ink-3); line-height: 1.2; }
.lx-now { position: absolute; top: -9px; right: -6px; padding: 1px 7px; border-radius: 99px; background: var(--venom); color: var(--venom-ink); font-family: var(--font-display); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.lx-conds-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; list-style: none; padding: 0; margin: 14px 0 0; }
.lx-conds-row li { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 6px; box-shadow: inset 0 0 0 1px var(--hud); font-family: var(--font-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: var(--table-ink-2); }
.lx-conds-row img { width: 72px; height: 72px; object-fit: contain; }
.lx-zz { position: absolute; top: 8px; right: 22%; font-family: var(--font-display); color: var(--bone); font-size: 16px; animation: lx-zz 2.4s ease-in-out infinite; }
@keyframes lx-zz { 50% { transform: translateY(-4px); opacity: .6; } }
.lx-conds { list-style: none; padding: 0; margin-top: var(--s-4) !important; display: grid; gap: 6px; color: var(--table-ink-2); }
.lx-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; }
.lx-dot--awake { background: var(--venom); } .lx-dot--asleep { background: #7C8F86; } .lx-dot--stone { background: #B9B3A3; }

/* mini duel */
.lx-duel {
  width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px 10px;
  padding: clamp(16px, 3vw, 24px);
  background: rgba(8,14,10,.5); box-shadow: inset 0 0 0 1px var(--hud-2);
}
.lx-duel__side { display: grid; justify-items: center; gap: 8px; transition: opacity var(--t-med), filter var(--t-med); }
.lx-fighter { display: grid; justify-items: center; text-align: center; color: var(--bone) !important; text-decoration: none !important; }
.lx-fighter__art { width: clamp(110px, 16vw, 170px); aspect-ratio: 1; border-radius: 12px; background: var(--bone); box-shadow: var(--shadow-card), inset 0 0 0 3px var(--ink); display: grid; place-items: center; overflow: hidden; }
.lx-duel__side[data-side="a"] .lx-fighter__art { box-shadow: var(--shadow-card), inset 0 0 0 3px var(--ink), 0 0 0 3px var(--venom); }
.lx-duel__side[data-side="b"] .lx-fighter__art { box-shadow: var(--shadow-card), inset 0 0 0 3px var(--ink), 0 0 0 3px var(--ember); }
.lx-fighter__art img { width: 100%; height: 100%; object-fit: contain; }
.lx-fighter b { margin-top: 8px; font-family: var(--font-display); font-size: 20px; letter-spacing: .04em; }
.lx-fighter small { color: var(--table-ink-2); font-size: 13px; }
.lx-duel__side .hpbar { width: 100%; max-width: 170px; }
.lx-duel__side .hpbar i { width: auto; right: calc((1 - var(--hp, 1)) * 100%); transition: right 280ms var(--ease-snap); }
.lx-hpnum { font-size: 12px; color: var(--table-ink-2); }
.lx-duel__mid { display: grid; justify-items: center; align-content: center; height: clamp(110px, 16vw, 170px); gap: 6px; }
.lx-duel__vs { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 36px); color: var(--bone); }
.lx-duel__round { font-size: 11px; color: var(--venom); text-transform: uppercase; letter-spacing: .1em; min-height: 1.4em; }
.lx-duel__log { grid-column: 1 / -1; text-align: center; min-height: 2.6em; padding: 10px; border-radius: 8px; background: #0A120D; color: var(--bone); font-size: 13px; display: grid; place-items: center; }
.lx-duel__actions { grid-column: 1 / -1; display: flex; justify-content: center; gap: 10px; }
.lx-duel__side.is-act { transform: translateY(-6px); transition: transform 120ms var(--ease-snap); }
.lx-duel__side.is-hit .lx-fighter__art { animation: card-hit 260ms linear; }
.lx-duel__side.is-crit .lx-fighter__art { animation: card-hit 340ms linear; background: #FFD9C9; }
.lx-duel__side.is-lose { opacity: .55; filter: grayscale(.7); }
.lx-duel__side.is-win .lx-fighter b { color: var(--venom); }
.lx-duel.is-done .lx-duel__log { color: var(--venom); }

/* arena board */
.lx-board { width: 100%; max-width: 420px; padding: 18px; border-radius: var(--radius-card); background: var(--bone); color: var(--ink); box-shadow: var(--shadow-card), inset 0 0 0 3px var(--r-mythic); }
.lx-board__head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-2); }
.lx-board__live { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--ink); }
.lx-board__live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); margin-right: 8px; vertical-align: 1px; }
.lx .lx-board__champ a { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 10px; border-radius: 10px; background: var(--ink); color: var(--bone); text-decoration: none; }
.lx-board__champ img { width: 84px; height: 84px; border-radius: 8px; background: var(--table-2); }
.lx-board__champ span { display: grid; }
.lx-board__champ .caption { color: var(--r-mythic); }
.lx-board__champ b { font-family: var(--font-display); font-size: 26px; letter-spacing: .03em; line-height: 1.1; }
.lx-board__champ small:last-child { color: var(--table-ink-2); font-size: 13px; }
.lx-board__list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; }
.lx-board__list li { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; padding: 7px 4px; border-top: 1px solid var(--bone-3); font-size: 15px; }
.lx-board__list li:first-child { border-top: 0; }
.lx .lx-board__list a { color: var(--ink); font-weight: 700; text-decoration: none; }
.lx-board__list a:hover { text-decoration: underline; }
.lx-board__list .mono { color: var(--ink-3); font-size: 12px; }
.lx-board__list li.is-champ { background: rgba(224,178,58,.18); border-radius: 6px; }
.lx-seed { color: var(--ink-3); font-size: 12px; }
.lx-board__note { margin-top: 10px !important; color: var(--ink-3); }

/* ---------- dex + api ---------- */
.lx-dex, .lx-api { width: min(100% - 2 * var(--gutter), 1120px); margin: 0 auto; padding: clamp(56px, 8vw, 96px) 0 0; }
.lx-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: var(--s-5); padding-bottom: var(--s-3); border-bottom: 1px solid var(--hud); }
.lx-sec-head h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem) !important; }
.lx-sec-head p { color: var(--table-ink-2); }
.lx-dexgrid { display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lx-dexgrid > .card { --card-w: 100%; }
.lx-center { text-align: center; margin-top: var(--s-6) !important; }
.lx-api__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.lx-api__item { min-width: 0; }
.lx-api__item h3 { font-size: 15px !important; letter-spacing: .12em; color: var(--table-ink-2); margin-bottom: var(--s-2) !important; }

/* ---------- footer ---------- */
.lx-foot { width: min(100% - 2 * var(--gutter), 1120px); margin: clamp(64px, 9vw, 112px) auto 0; padding: var(--s-6) 0 var(--s-7); border-top: 1px solid var(--table-line); display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; }
.lx-foot__brand { display: flex; align-items: center; gap: 14px; }
.lx-foot__brand img { width: 56px; height: 56px; border-radius: 50%; background: var(--table-2); box-shadow: inset 0 0 0 2px var(--table-line); object-fit: cover; object-position: top; }
.lx-foot__brand b { font-family: var(--font-display); letter-spacing: .14em; }
.lx-foot__brand span { color: var(--table-ink-2); font-size: 14px; }
.lx-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.lx-foot nav a { color: var(--table-ink-2); text-decoration: none; font-size: 15px; }
.lx-foot nav a:hover { color: var(--venom); }
.lx-foot__fine { grid-column: 1 / -1; color: var(--table-ink-3); font-size: 13px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .lx-stop, .lx-stop--flip, .lx-stop--wide, .lx-stop--wide.lx-stop--flip { grid-template-columns: 1fr; gap: var(--s-6); }
  .lx-stop--flip .lx-stop__card { order: 0; }
  .lx-stop__text { max-width: 640px; margin: 0 auto; }
  .lx-dexgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lx-api__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .lx-hand { margin-right: 30%; }
  .lx-hand__caption { margin-right: 0; }
  .lx-hand > .card { --card-w: clamp(104px, 21vw, 170px); }
  .lx-gorgon { right: -4%; }
  .lx-say { right: 66%; top: 30%; max-width: 180px; font-size: 12.5px; }
}
@media (max-width: 560px) {
  .lx-hero { padding-inline: 16px; }
  .lx-title { font-size: 1.78rem !important; }
  .lx-sub { font-size: 15px; line-height: 1.4; }
  .lx-live__item { padding: 0 10px; }
  .lx-live__label { font-size: 9.5px; letter-spacing: .1em; margin-right: 6px; }
  .lx-live .hud-k { display: none; }
  .lx-live b, .lx-live a { font-size: 12px; }
  .lx-stop { min-height: 0; }
  .lx-summon { margin-top: 18px; }
  .lx-form__label { margin-bottom: 8px; }
  .lx-meta { gap: 8px; }
  .lx-meta__item { width: 100%; }
  .lx-caslot { height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; }
  .lx-caslot__text { white-space: normal; font-size: 11.5px; line-height: 1.35; }
  .lx-stage { height: 290px; margin-top: 8px; }
  .lx-gorgon { height: 300px; right: -10%; bottom: -4px; }
  .lx-hand { margin-right: 18%; bottom: 6%; }
  .lx-hand > .card { --card-w: 112px; }
  .lx-hand > .card:nth-child(2) { translate: 0 8px; }
  .lx-hand .card__flavour { display: none; }
  .lx-say { right: 58%; top: 4%; max-width: 160px; font-size: 11.5px; padding: 6px 9px 6px 11px; }
  .lx-hand__caption { bottom: -28px; font-size: 9.5px; letter-spacing: .05em; }
  .lx-field__pre { display: none; }
  .lx-field input { min-height: 54px; font-size: 13.5px; padding-left: 14px; }
  .lx-summon__btn { padding: 0 14px; font-size: 13px; }
  .lx-deck { gap: 80px; }
  .lx-dexgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-foot { grid-template-columns: 1fr; }
  .lx-stagecard small { display: none; }
  .lx-formulas { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  .lx-nav nav a[href="/arena"] { display: none; }
  .lx-brand span { font-size: 17px; letter-spacing: .1em; }
  .lx-brand img { width: 24px; height: 24px; }
  .lx-summon__btn { padding: 0 12px; gap: 6px; }
  .lx-summon__btn svg { display: none; }
  .lx-field input { padding-left: 12px; padding-right: 8px; }
  .lx-stop__text h2 { overflow-wrap: anywhere; }
}
@media (max-width: 760px) { .lx-nav nav a[href="/docs"] { display: none; } }
@media (max-width: 560px) { .lx-nav nav a[href="/token"] { display: none; } }

/* Page-scoped styles (APP/SERVER). Class prefix gx-. Palette from BRIEF 4.0. */
@font-face{font-family:"Chakra Petch";font-weight:700;font-display:swap;src:url(/fonts/chakra-petch-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Martian Mono";font-weight:400;font-display:swap;src:url(/fonts/martian-mono-latin-400-normal.woff2) format("woff2")}
:root{--gx-table:#0F1A14;--gx-table2:#16241C;--gx-bone:#EAE3CF;--gx-ink:#1A1F1B;--gx-venom:#B8F542;--gx-ember:#FF7A45;--gx-moss:#5E8C61;--gx-cobalt:#3B5BDB;--gx-violet:#8A4FFF;--gx-gold:#E0B23A;--gx-mut:#9fb0a2}
body.gx{margin:0;background:var(--gx-table);color:var(--gx-bone);font:17px/1.55 "Atkinson Hyperlegible",system-ui,sans-serif}
.gx a{color:var(--gx-venom)}.gx a:focus-visible,.gx button:focus-visible,.gx input:focus-visible,.gx select:focus-visible,.gx summary:focus-visible,.gx [tabindex]:focus-visible{outline:3px solid var(--gx-venom);outline-offset:2px}
.gx-skip{position:absolute;left:-999px;top:0;background:var(--gx-venom);color:var(--gx-ink);padding:8px 12px;z-index:9}.gx-skip:focus{left:8px}
.gx h1,.gx h2,.gx h3,.gx-namebar h2{font-family:"Chakra Petch",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.gx h1{font-size:clamp(28px,5vw,46px);margin:.4em 0 .3em}.gx h2{font-size:24px}.gx h3{font-size:18px;margin:0 0 .6em}.gx h3 small,.gx h1 small{font:400 14px "Atkinson Hyperlegible",sans-serif;text-transform:none;color:var(--gx-mut)}
.mono,.gx code,.gx pre{font-family:"Martian Mono",ui-monospace,monospace;font-size:.82em}
.gx-wrap{max-width:1120px;margin:0 auto;padding:16px 16px 56px}
.gx-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--gx-table2);border-bottom:3px solid #000}
.gx-brand{font:700 22px "Chakra Petch",sans-serif;color:var(--gx-bone)!important;text-decoration:none;letter-spacing:.06em}.gx-nav nav{display:flex;gap:16px;flex-wrap:wrap}.gx-nav nav a{color:var(--gx-bone);text-decoration:none;padding:6px 0;border-bottom:3px solid transparent;min-height:24px}.gx-nav nav a[aria-current]{border-color:var(--gx-venom)}
.gx-foot{border-top:3px solid #000;padding:20px 16px;text-align:center;color:var(--gx-mut);font-size:14px}.gx-foot nav{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.gx-btn{display:inline-block;font:700 16px "Chakra Petch",sans-serif;text-transform:uppercase;letter-spacing:.04em;background:var(--gx-venom);color:var(--gx-ink)!important;border:3px solid var(--gx-ink);border-radius:8px;padding:10px 18px;cursor:pointer;text-decoration:none;min-height:44px;box-shadow:3px 3px 0 #000}
.gx-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}.gx-btn[disabled]{opacity:.45;cursor:not-allowed}.gx-ghost{background:transparent;color:var(--gx-bone)!important;border-color:var(--gx-bone)}.gx-sm{padding:4px 10px;min-height:32px;font-size:13px}
.gx-form label{display:block;font-weight:700;margin-bottom:6px}.gx-row{display:flex;gap:8px;flex-wrap:wrap}.gx-form input,.gx-filters input,.gx-filters select,.gx-form select{font:16px "Martian Mono",monospace;padding:10px 12px;border-radius:8px;border:3px solid var(--gx-ink);background:var(--gx-bone);color:var(--gx-ink);min-height:44px;flex:1;min-width:0}
.gx-filters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 20px}.gx-filters select{flex:0 1 150px;font-family:"Atkinson Hyperlegible",sans-serif}.gx-filters input[name=q]{flex:1 1 240px;min-width:200px;width:auto}
.gx-panel{background:var(--gx-table2);border:2px solid #000;border-radius:12px;padding:16px;margin:16px 0}
.gx-banner{background:#3a2a12;border:2px solid var(--gx-gold);padding:10px 14px;border-radius:8px}.gx-ok{background:#1d3324;border-color:var(--gx-moss)}.gx-err{color:var(--gx-ember)}
.gx-note{color:var(--gx-mut);font-size:15px}.gx-code{background:#000;color:var(--gx-venom);padding:12px;border-radius:8px;overflow-x:auto;cursor:copy;margin:8px 0;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;box-sizing:border-box}
.gx-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.gx-chip{border:2px solid var(--gx-bone);border-radius:999px;padding:2px 12px;color:var(--gx-bone)!important;text-decoration:none;font-weight:700}
.gx-scroll{overflow-x:auto}.gx-table{border-collapse:collapse;width:100%;font-size:15px}.gx-table th,.gx-table td{border-bottom:1px solid #2e4033;padding:6px 10px;text-align:left;vertical-align:top}.gx-table th{font-family:"Chakra Petch";text-transform:uppercase;font-size:13px;color:var(--gx-mut)}
.gx-dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid #000;vertical-align:-1px}
/* card */
.gx-card{background:var(--gx-bone);color:var(--gx-ink);border:8px solid var(--gx-bone);outline:3px solid #000;border-radius:16px;padding:12px;position:relative;max-width:560px;margin:0 auto}
.gx-r-uncommon{border-color:var(--gx-moss)}.gx-r-rare{border-color:var(--gx-cobalt)}.gx-r-epic{border-color:var(--gx-violet)}.gx-r-mythic{border-color:var(--gx-gold)}
.gx-namebar{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.gx-namebar h2{margin:0;font-size:19px;overflow-wrap:anywhere}.gx-namebar a{color:var(--gx-ink)!important;text-decoration:none}
.gx-badge{font:700 12px "Chakra Petch",sans-serif;text-transform:uppercase;background:var(--gx-ink);color:var(--gx-bone);border-radius:6px;padding:3px 8px;white-space:nowrap}.gx-stage-apex{background:var(--gx-gold);color:var(--gx-ink)}
.gx-art{background:var(--gx-table2);border:3px solid var(--gx-ink);border-radius:10px;margin:10px 0;line-height:0}.gx-art svg{width:100%;height:auto;display:block}
.gx-subline{margin:0;font-size:15px}.gx-subline .gx-logo{vertical-align:middle;border-radius:50%;margin-right:4px}.gx-nick{margin:6px 0 0}
.gx-cond{display:inline-block;font-size:13px;font-weight:700;border-radius:6px;padding:1px 8px;background:#cfc8b0}.gx-stone{background:#8b8f8c}
.gx-c-asleep .gx-art{filter:none}.gx-c-petrified{filter:contrast(1.05)}
.gx-stats{margin:0}.gx-stat{display:grid;grid-template-columns:48px 1fr;gap:8px;align-items:center;margin:8px 0}.gx-stat dt{font:700 17px "Chakra Petch",sans-serif}.gx-stat dd{margin:0;display:grid;grid-template-columns:34px 1fr;gap:2px 10px;align-items:center}.gx-stat b{font:700 22px "Chakra Petch",sans-serif}.gx-stat small{grid-column:1/-1;color:var(--gx-mut)}
.gx-bar{height:14px;background:#0a110d;border-radius:4px;overflow:hidden}.gx-bar i{display:block;height:100%}.gx-s-hp i{background:var(--gx-venom)}.gx-s-atk i{background:var(--gx-ember)}.gx-s-def i{background:var(--gx-moss)}.gx-s-spd i{background:#6f8bff}
.gx-traits{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}.gx-trait{background:#0a110d;border:2px solid var(--gx-moss);border-radius:8px;padding:6px 10px;max-width:100%}.gx-trait b{font-family:"Chakra Petch";text-transform:uppercase;font-size:13px;display:block}.gx-trait span{font-size:14px;color:var(--gx-mut)}
.gx-beast-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:start}
.gx-coinchip{display:flex;gap:12px;align-items:center;margin:0}.gx-glyph{font-size:30px;width:40px;text-align:center}.gx-ca{word-break:break-all;cursor:copy}
.gx-hist{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:10px}.gx-hist div{display:flex;gap:8px;align-items:center}.gx-hist span{font:700 13px "Chakra Petch",sans-serif}.gx-spark{background:#0a110d;border-radius:4px}
details>summary{cursor:pointer;font-weight:700;padding:6px 0}
.gx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.gx-mini{display:flex;flex-direction:column;gap:2px;background:var(--gx-bone);color:var(--gx-ink)!important;text-decoration:none;border:5px solid var(--gx-bone);outline:2px solid #000;border-radius:12px;padding:6px;font-size:14px}.gx-mini .gx-art{margin:0 0 4px}.gx-mini img{width:100%;height:auto;border-radius:8px;background:var(--gx-table2)}.gx-mini b{font:700 16px "Chakra Petch",sans-serif}.gx-minis{font:12px "Martian Mono",monospace}
.gx-empty{text-align:center;padding:48px 16px}.gx-gorgon-line{font:700 22px "Chakra Petch",sans-serif;color:var(--gx-venom)}
/* hero fallback */
.gx-hero{padding:24px 0}.gx-summon{max-width:640px}.gx-caslot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0;overflow-wrap:anywhere}.gx-label{font:700 14px "Chakra Petch",sans-serif;background:var(--gx-venom);color:var(--gx-ink);padding:2px 8px;border-radius:6px}.gx-nums{font:700 20px "Chakra Petch",sans-serif}
.gx-gorgon{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.gx-gorgon img{max-width:min(360px,100%);height:auto}
/* vs */
.gx-vs-grid{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:12px;align-items:center}.gx-vsmark{font:700 40px "Chakra Petch",sans-serif;text-align:center;display:flex;flex-direction:column;align-items:center}.gx-round{font-size:15px;color:var(--gx-venom);min-height:22px}
.gx-fighter{position:relative;transition:transform .2s}.gx-hp{height:26px;background:#0a110d;border:3px solid #000;border-radius:8px;margin-top:10px;position:relative;overflow:hidden}.gx-hp i{display:block;height:100%;width:100%;background:var(--gx-venom)}.gx-fighter[data-side=b] .gx-hp i{background:var(--gx-ember)}.gx-hp span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 14px "Martian Mono",monospace;color:#fff;mix-blend-mode:difference}
.gx-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:20px 0}.gx-verdict{text-align:center;font:700 30px "Chakra Petch",sans-serif;text-transform:uppercase;margin:6px 0}.js .gx-verdict{visibility:hidden}.js .gx-verdict.done{visibility:visible}
.js .gx-log{max-height:0;overflow:hidden}details[open] .gx-log{max-height:none}
.gx-deal{animation:gx-deal .4s cubic-bezier(.3,1.6,.5,1) both}.gx-attack{transform:scale(1.04) translateX(14px)}.gx-fighter[data-side=b].gx-attack{transform:scale(1.04) translateX(-14px)}.gx-first .gx-card{outline-color:var(--gx-venom)}
.gx-hit{animation:gx-shake .3s}.gx-crit{animation:gx-shake .4s}.gx-crit .gx-card{outline:5px solid var(--gx-gold)}.gx-win .gx-card{outline:5px solid var(--gx-venom);transform:scale(1.03)}.gx-lose .gx-card{filter:saturate(.4) brightness(.8)}.gx-draw .gx-card{filter:grayscale(.8)}
.gx-dmg{position:absolute;top:30%;left:50%;font:700 40px "Chakra Petch",sans-serif;color:var(--gx-ember);text-shadow:2px 2px 0 #000;animation:gx-float .9s ease-out forwards;pointer-events:none}.gx-dmg-crit{color:var(--gx-gold);font-size:56px}
@keyframes gx-deal{from{transform:translateY(-30px) rotateY(90deg);opacity:0}to{transform:none;opacity:1}}@keyframes gx-shake{20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}@keyframes gx-float{to{transform:translateY(-70px);opacity:0}}
.gx-log{padding-left:22px}
/* arena */
.gx-bracket{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px}.gx-bracket section{min-width:210px;flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:8px}
.gx-match{display:flex;flex-direction:column;background:var(--gx-table2);border:2px solid #000;border-radius:8px;padding:6px 10px;text-decoration:none;color:var(--gx-bone)!important}.gx-match:hover{border-color:var(--gx-venom)}.gx-match .gx-v{font-size:12px;color:var(--gx-mut)}.gx-w{color:var(--gx-venom);font-weight:700}.gx-l{color:var(--gx-mut)}.gx-match em{font:12px "Martian Mono",monospace;font-style:normal;margin-right:4px}
.gx-champ{margin:12px 0 24px}.gx-toc{display:flex;gap:6px 14px;flex-wrap:wrap;margin:8px 0 20px}.gx-docs h2{margin-top:1.6em}.gx-docs li{margin:4px 0}.gx-docs code{background:#0a110d;padding:1px 6px;border-radius:4px}
@media (max-width:760px){.gx-beast-grid{grid-template-columns:minmax(0,1fr)}.gx-vs-grid{grid-template-columns:minmax(0,1fr)}.gx-vsmark{font-size:28px;flex-direction:row;gap:10px}.gx-card{max-width:420px}}
@media (prefers-reduced-motion:reduce){.gx *{animation:none!important;transition:none!important}}

.gx-nf{text-align:center}.gx-nf img{max-width:60%;height:auto;margin-top:24px}.gx-side,.gx-side .gx-panel{min-width:0}

.gx-wrap a.mono,.gx-wrap p a[href*="blockscout"]{overflow-wrap:anywhere;word-break:break-all}
.js .gx-verdict:not(.done){height:0;margin:0;overflow:hidden}
@media (min-width:761px){.gx-beast-grid>div:first-child{position:sticky;top:16px}}