:root {
  /* surfaces: warm near-black, three lifts, two rule weights */
  --bg: #0b0a08;
  --panel: rgba(255, 250, 240, .035);   /* translucent lift, used everywhere */
  --panel-solid: #15130f;
  --raised: #1e1a14;
  --line: rgba(255, 245, 230, .09);
  --line-hi: #3a3125;

  --ink: #f4efe6;
  --ink-muted: #b5ab99;
  --ink-dim: #8a8170;   /* 4.6:1 on panels — the old #776f60 sat at 3.95, under AA */
  --ink-faint: #5b5449;

  /* one accent: ember gold, three steps */
  --acid: #d4a843;
  --acid-hot: #e8be55;
  --acid-lo: #c79430;
  --ember: #e2733c;     /* wager/heat, never a rarity */
  --danger: #ff6b8a;    /* loss and failure; was consumed but never defined */

  --r-lg: 18px; --r-md: 12px; --r-sm: 8px;

  /* RANK AS MATERIAL, not MMO rarity: four hues of one metal metaphor.
     Rank must read from the grid without reading the type line. */
  --pewter: #8e887a;    /* Footman   · dull cast metal */
  --steel: #7fa0bd;     /* Knight    · burnished steel */
  --verdigris: #5fa894; /* Highlord  · aged bronze */
  --regal: #e8ae3f;     /* Sovereign · gold, and it glows */
  --common: var(--pewter);
  --rare: var(--steel);
  --epic: var(--verdigris);
  --legendary: var(--regal);

  /* four faces, four jobs: display, body, flavour, numbers */
  --display: 'Cinzel', Georgia, serif;
  --body: 'Outfit', system-ui, sans-serif;
  --flavor: 'EB Garamond', Georgia, serif;
  --data: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
/* reserve the scrollbar's width always, so locking the page for a dialog
   cannot shift the layout underneath it */
html { scrollbar-gutter: stable; }
html.modal-open { overflow: hidden; }
/* inline drawn glyphs: sized by context, coloured by currentColor */
svg.g { width: 14px; height: 14px; fill: currentColor; display: inline-block; vertical-align: -2px; flex: 0 0 auto; }
svg.gl { width: 17px; height: 17px; }
.glyph-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1000px 640px at 85% -12%, rgba(212, 168, 67, .05), transparent 62%),
    radial-gradient(820px 520px at -8% 108%, rgba(212, 168, 67, .035), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.mono { font-family: var(--data); }

.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .3;
  background-image:
    linear-gradient(rgba(212, 168, 67, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 168, 67, .045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
}
.glow { position: fixed; z-index: 0; pointer-events: none; filter: blur(90px); border-radius: 50%; }
.glow.a { top: -140px; left: -100px; width: 420px; height: 420px; background: #1a140c; opacity: .75; }
.glow.b { bottom: -180px; right: -140px; width: 480px; height: 480px; background: #33230f; opacity: .28; }

main { position: relative; z-index: 1; max-width: 1460px; margin: 0 auto; padding: 0 26px 90px; }
/* single-column pages (no rail) stay narrow enough to read */
.narrow-page main { max-width: 1020px; }

/* header */
header.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; }
.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand .mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  filter: drop-shadow(0 6px 18px rgba(212, 168, 67, .35));
}
.wordmark { font-family: var(--display); font-size: 21px; letter-spacing: .12em; }
/* discreet network tag tucked under the wordmark's right edge */
.net-flag {
  text-align: right; margin-top: 1px;
  font-family: var(--data); font-size: 8.5px;
  letter-spacing: .3em; text-indent: .3em; color: var(--ink-dim);
}
.wallet-chip {
  display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 8px 16px; font-family: var(--data); font-size: 12.5px; color: var(--ink-muted);
}
/* squeeze order: the hint gives way first, then the balance, then the name
   ellipsizes but keeps a readable floor; identity is the point of the chip */
.wallet-chip #walletAddr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 76px; }
.wallet-chip .dot { flex-shrink: 0; }
.wallet-chip .htr { flex-shrink: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-chip .hint { flex-shrink: 3; min-width: 0; overflow: hidden; white-space: nowrap; }
.wallet-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acid-hot); box-shadow: 0 0 10px var(--acid-hot); }
.wallet-chip .htr { color: var(--acid); font-weight: 600; }



/* ------------------------------------------------------------------
   MATERIAL. A realm of soulstone and ledgers can afford grain, a
   vignette and a little weight. Restraint stays; flatness goes.
   ------------------------------------------------------------------ */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  /* parchment grain: one tiny tile, no request */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* a vignette so the page has a middle and edges */
.grid-bg::after {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 42%, transparent 52%, rgba(4, 3, 2, .68) 100%);
}
/* panels lift instead of sitting flat on the same fill */
.shelf, .rail-block, .feed-panel, .stats-row, .machine-panel, .lore, .codex-sec {
  box-shadow: inset 0 1px 0 rgba(255, 245, 225, .035), 0 14px 34px -30px #000;
}
.machine-panel {
  border: 1px solid var(--line-hi);
  background:
    radial-gradient(90% 120% at 78% 0%, rgba(226, 115, 60, .07), transparent 58%),
    var(--panel);
}
/* the summoning showcase gets a real frame, not a rounded rectangle */
.machine img {
  border: 2px solid rgba(212, 168, 67, .3);
  box-shadow: inset 0 0 0 1px rgba(11, 10, 8, .8), 0 22px 50px -28px #000;
}
/* duel rows read as vellum strips rather than uniform tiles */
.duel {
  background: linear-gradient(180deg, rgba(255, 250, 240, .045), rgba(255, 250, 240, .012));
  box-shadow: inset 0 1px 0 rgba(255, 245, 225, .04);
}
.pw-inline { display: inline-flex; align-items: center; gap: 3px; font-family: var(--data); }
.pw-inline .g { width: 10px; height: 10px; fill: currentColor; }
/* headings carry the display face; body copy stays Outfit */
h1, h2, .wait-title, .pane-head h2, .shelf h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: .01em;
}
h1 { letter-spacing: -.01em; }
.shelf h2, .pane-head h2 { font-size: 15px; letter-spacing: .06em; color: var(--ink); }
.lore p, .sub { font-family: var(--flavor); font-size: 15.5px; line-height: 1.62; }
.mu-note, .hero-cue, .lore p em { font-family: var(--flavor); }

/* ------------------------------------------------------------------
   THE RETURNING PLAYER'S PAGE. Everything that used to sit above the
   tab bar (hero, odds, summon, trial, four stat tiles, folded feed) was
   ~440px of scroll every session. Nav and stats live in the header now;
   summoning, the trial and the feed live in a rail beside the tabs.
   ------------------------------------------------------------------ */
header.top {
  position: sticky; top: 0; z-index: 30;
  min-height: 64px; padding: 9px 26px; margin: 0 -26px 22px;
  gap: 14px; flex-wrap: nowrap;
  background: rgba(13, 11, 9, .93); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
header.top .brand { gap: 10px; }
header.top .brand .mark, header.top .brand .mark img { width: 34px; height: 34px; }
header.top .wordmark { font-size: 16px; letter-spacing: .13em; }
header.top .net-flag { font-size: 7.5px; }

/* the nav sits in the header, not below a screenful of pitch */
header.top .tabs {
  flex: 0 0 auto; margin: 0; border: none; gap: 2px; min-width: 0;
  justify-content: flex-start;
}
header.top .tab { padding: 8px 10px; font-size: 13px; }

/* Ember, renown and level as chips: the four stat tiles compressed */
.hdr-chips { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; justify-content: flex-end; overflow: hidden; }
.hdr-chips .stat {
  border: 1px solid var(--line); background: rgba(11, 10, 8, .5);
  border-radius: 999px; padding: 5px 8px; display: flex; align-items: center; gap: 5px;
  white-space: nowrap; flex: 0 0 auto;
}
.hdr-chips .k { display: flex; align-items: center; color: var(--ink-dim); }
/* nothing in the header shrinks except the chip row, which gives way by
   dropping chips (see fitHeaderChips) rather than by clipping */
header.top .hdr-tools > .mini-btn, header.top .header-session,
header.top .wallet-chip.as-btn, header.top .brand { flex: 0 0 auto; }
/* the chip's own display:flex outranks the UA [hidden] rule, so say it here */
.hdr-chips .stat[hidden] { display: none; }
.hdr-chips .k .g { width: 11px; height: 11px; fill: currentColor; }
.hdr-chips .k .lv {
  font-family: var(--display); font-size: 9px; letter-spacing: .1em; font-weight: 700;
}
.hdr-chips .v { font-family: var(--data); font-size: 11.5px; color: var(--ink); }
.hdr-chips .v small { display: none; }

/* two columns: the tab, then the rail */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 412px;
  grid-template-rows: auto 1fr; gap: 22px; align-items: start;
}
.col-main { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.col-main .shelf { margin-top: 0; }
.col-main .shelf + .shelf { margin-top: 34px; }
/* One sticky unit: summon, trial and feed hold their place together for the
   whole scroll. Sticky is bounded by its containing block, so this wrapper
   spans both rows — two separately sticky asides each slipped once their own
   row's bottom edge caught up with them. */
.rail-col {
  grid-column: 2; grid-row: 1 / span 2; min-width: 0;
  position: sticky; top: 84px;
  display: flex; flex-direction: column; gap: 16px;
  max-height: calc(100vh - 104px);
}
.rail-summon, .rail-feed { min-height: 0; }
.rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rail-block {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel); padding: 15px 16px;
}
.rail-h {
  font-family: var(--display); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 9px;
}

/* the brazier: the one panel in the game allowed to look heavy */
.brazier {
  position: relative; overflow: hidden; padding: 20px 18px 17px; text-align: center;
  border: 1.5px solid rgba(212, 168, 67, .34); border-radius: 16px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(226, 115, 60, .16), transparent 62%),
    linear-gradient(180deg, #1d1811, #131009);
  box-shadow: inset 0 1px 0 rgba(255, 228, 170, .09), 0 18px 44px -26px #000;
}
.brazier-heat {
  position: absolute; left: 50%; top: -46px; width: 220px; height: 120px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(226, 115, 60, .5), transparent 72%);
  filter: blur(16px); animation: brazier-breathe 5.5s ease-in-out infinite;
}
@keyframes brazier-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
.brazier-lip {
  position: relative; font-family: var(--display); font-weight: 700; font-size: 9.5px;
  letter-spacing: .32em; color: var(--ink-dim); margin-bottom: 13px;
}
.brazier .pull-btn { width: 100%; justify-content: center; padding: 15px 18px; font-size: 21px; }
.brazier .pull-note { text-align: left; }
.odds-mini {
  display: flex; justify-content: center; gap: 10px; margin-top: 12px;
  font-family: var(--data); font-size: 10px; color: var(--ink-dim);
}
.odds-mini span { display: inline-flex; align-items: center; gap: 4px; }
.odds-mini i { width: 7px; height: 7px; border-radius: 2px; display: block; }

.hero-cue {
  margin: 18px 0 0; font-family: var(--flavor); font-style: italic;
  font-size: 14.5px; color: var(--ink-dim);
}
#heroWrap[hidden] { display: none; }

/* `.rail` sets display:flex, and an author rule beats the browser's own
   [hidden] { display: none } — so the rail needs this to honour `hidden` */
.rail[hidden] { display: none; }

/* the feed has a column to live in now, so it stays open and scrolls */
.rail-feed .feed-panel { margin: 0; }
.rail-feed .feed-panel { display: flex; flex-direction: column; min-height: 0; }
.rail-feed #feedList {
  flex: 1 1 auto; min-height: 96px; overflow-y: auto; overscroll-behavior: contain;
}

@media (max-width: 1290px) {
  header.top { flex-wrap: wrap; }
  .layout { grid-template-columns: 1fr; }
  /* summon above the tab, the realm's chatter below it */
  .col-main { grid-column: 1; grid-row: auto; order: 2; }
  .rail-col { display: contents; }
  .rail-summon { grid-column: 1; grid-row: auto; order: 1; position: static; }
  .rail-feed { grid-column: 1; grid-row: auto; order: 3; position: static; }
  .rail-feed #feedList { max-height: none; }
  .hdr-chips { order: 4; flex: 1 1 100%; }
  header.top .tabs { order: 3; flex: 1 1 100%; }
}
@media (max-width: 600px) {
  header.top { padding: 8px 14px; margin: 0 -14px 16px; gap: 10px; }
  .hdr-chips .stat { padding: 4px 9px; gap: 5px; }
  .hdr-chips .k { font-size: 7.5px; letter-spacing: .12em; }
  .hdr-chips .v { font-size: 11px; }
  .brazier .pull-btn { font-size: 19px; }
}

/* machine panel */
.machine-panel {
  margin-top: 8px; display: grid; grid-template-columns: 280px 1fr; gap: 36px; align-items: center;
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-lg); padding: 40px 36px 44px;
}
@media (max-width: 760px) { .machine-panel { grid-template-columns: 1fr; text-align: center; } .machine { margin: 0 auto; } }
.machine { width: 100%; max-width: 300px; position: relative; }
.machine img {
  display: block; width: 100%; height: 440px; object-fit: cover; object-position: center 74%;
  border-radius: var(--r-md);
  border: 1px solid rgba(212, 168, 67, .22);
}
.machine::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-md);
  pointer-events: none;
  background: radial-gradient(120% 90% at 62% 40%, transparent 45%, rgba(11, 10, 8, .55) 100%);
  box-shadow: inset 0 0 0 1px rgba(212, 168, 67, .12), inset 0 -40px 60px -30px rgba(11, 10, 8, .8);
}
.machine.shaking { animation: shake .5s ease-in-out infinite; }
@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2.4deg); }
  75% { transform: rotate(2.4deg); }
}
.cap { opacity: .95; }
.cap.c0 { fill: var(--common); } .cap.c0b { fill: #c3cad4; }
.cap.c1 { fill: var(--rare); } .cap.c1b { fill: #7fb0ff; }
.cap.c2 { fill: var(--epic); }
.cap.c3 { fill: var(--legendary); }
#capsules circle { animation: bob 3.4s ease-in-out infinite; transform-origin: center; }
#capsules circle:nth-child(2) { animation-delay: .6s; }
#capsules circle:nth-child(3) { animation-delay: 1.2s; }
#capsules circle:nth-child(4) { animation-delay: 1.8s; }
#capsules circle:nth-child(5) { animation-delay: 2.4s; }
#capsules circle:nth-child(6) { animation-delay: 3s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.pull-col h1 { font-size: 42px; line-height: 1.04; margin: 0 0 14px; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.pull-col .accent { color: var(--acid); text-shadow: 0 0 30px rgba(212, 168, 67, .32); }
.sub { color: var(--ink-muted); font-size: 14.5px; line-height: 1.7; margin: 0 0 22px; max-width: 56ch; text-wrap: pretty; }

.odds { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 24px; }
.odd {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 13px;
  font-size: 12px; display: flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, .25);
}
.odd b { font-size: 13px; }
.odd .pct { color: var(--ink-dim); }
.odd .left { font-family: var(--data); font-size: 11px; color: var(--ink-dim); }
.odd .swatch { width: 9px; height: 9px; border-radius: 3px; }

.pull-btn {
  display: inline-flex; align-items: baseline; gap: 14px; cursor: pointer;
  font-family: var(--display); font-size: 26px; letter-spacing: .14em;
  color: #241703; background: linear-gradient(135deg, #caa03f, #e6bd5e);
  border: none; border-radius: 14px; padding: 18px 40px;
  box-shadow: 0 14px 45px -12px rgba(212, 168, 67, .5);
  transition: transform .12s ease, box-shadow .12s ease, filter .2s;
}
.pull-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 20px 55px -12px rgba(226, 180, 77, .6); }
.pull-btn:active:not(:disabled) { transform: translateY(1px); }
.pull-btn:disabled { filter: grayscale(.75) brightness(.6); cursor: not-allowed; box-shadow: none; }
.pull-cost { font-family: var(--data); font-size: 14px; letter-spacing: 0; opacity: .8; }
.pull-note { margin-top: 12px; font-size: 12.5px; color: var(--ink-dim); }
.pull-note a { color: var(--acid); }

/* stats */
.stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
  margin-top: 18px; border: 1px solid var(--line); background: var(--panel);
  border-radius: var(--r-md); overflow: hidden;
}
.stats-row .stat { border: none; border-left: 1px solid var(--line); border-radius: 0; padding: 16px 18px; background: none; }
.stats-row .stat:first-child { border-left: none; }
.farm-summary .stat { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-md); padding: 16px 18px; }
.stat .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.stat .v { font-family: var(--data); font-variant-numeric: tabular-nums; font-size: 22px; margin-top: 6px; color: var(--ink); }
.stat .v small { font-size: 12px; color: var(--ink-dim); }

/* site footer: just the socials, larger */
.site-foot {
  margin-top: 56px; padding: 22px 0 8px; border-top: 1px solid var(--line);
  display: flex; justify-content: center; align-items: center; gap: 26px;
}
.site-foot a {
  color: var(--ink-dim); text-decoration: none; font-size: 24px; line-height: 1;
  display: inline-flex; align-items: center; transition: color .15s;
}
.site-foot .foot-label { color: var(--ink-dim); font-size: 13.5px; }
.site-foot a:hover { color: var(--acid); }

/* realm activity feed */
.feed-panel {
  margin-top: 14px; border: 1px solid var(--line); background: var(--panel);
  border-radius: var(--r-md); padding: 12px 18px 10px;
}
.feed-title { font-size: 11px; letter-spacing: .14em; color: var(--ink-dim); }
.feed-title.as-toggle {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 0; font: inherit; cursor: pointer;
}
.feed-title.as-toggle:hover { color: var(--ink-muted); }
.feed-chev { display: inline-block; margin-left: 6px; transition: transform .2s; }
.feed-panel.collapsed .feed-chev { transform: rotate(-90deg); }
.feed-row {
  display: flex; gap: 12px; align-items: baseline; padding: 5px 0;
  font-size: 13px; color: var(--ink-muted); border-top: 1px solid rgba(255,255,255,.03);
}
.feed-row:first-of-type { border-top: none; margin-top: 4px; }
.feed-row b { color: var(--ink); font-weight: 600; }
.feed-ago { flex-shrink: 0; font-size: 10.5px; color: var(--ink-dim); min-width: 62px; }

/* press-and-hold selects for fusion: keep the browser's long-press menus away */
.card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* card detail view */
.detail-card {
  width: min(86vw, 360px); margin: 0 auto; cursor: default;
  aspect-ratio: 3 / 4;
}
.detail-card .ac-name { font-size: 19px; }
.detail-card .ac-flavor { display: block; }
.detail-btns { justify-content: center; margin-top: 16px; }

/* the fight, round by round: a proportional bar per aspect with its own
   chance, arriving one at a time so the reveal has a beat */
.matchup { max-width: 380px; margin: 4px auto 0; text-align: left; }
/* the trailer's fight grammar, in the game: duelists lean in, rounds jolt
   the frame, a win slams home with a flash and sparks */
.fight-arena { display: flex; align-items: center; gap: 24px; }
.fight-arena .fight-rounds { flex: 1 1 auto; min-width: 0; }
/* the faces' motion rides inline styles from showFight (a cascade gremlin
   ate class-set transforms on this sheet); classes keep the layout */
.duel-face { flex: 0 0 150px; perspective: 900px; }
.duel-face .df-img {
  width: 150px; height: 150px; object-fit: cover; border-radius: 11px; display: block;
  border: 1px solid rgba(212, 168, 67, .4);
  box-shadow: 0 16px 40px -14px #000;
}
.df-nm { font-family: var(--display); font-weight: 700; font-size: 12.5px; margin-top: 8px; }
.df-pw { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--acid); margin-top: 3px; }
.df-pw .g { width: 11px; height: 11px; fill: currentColor; }
@media (max-width: 640px) { .duel-face { display: none; } }
#duelResult.nudge { animation: fightNudge .24s ease; }
@keyframes fightNudge {
  0% { transform: translate(0, 0); } 30% { transform: translate(5px, -3px); }
  60% { transform: translate(-4px, 2px); } 100% { transform: translate(0, 0); }
}
#duelResult.slam { animation: fightSlam .5s cubic-bezier(.2, .9, .3, 1); }
@keyframes fightSlam {
  0% { transform: translate(0, 0); } 15% { transform: translate(-9px, 6px); }
  32% { transform: translate(8px, -5px); } 50% { transform: translate(-5px, 3px); }
  70% { transform: translate(3px, -2px); } 100% { transform: translate(0, 0); }
}
.fight-verdict.slammed .duel-banner { animation: verdictSlam .55s cubic-bezier(.16, 1.1, .3, 1) both; }
@keyframes verdictSlam {
  from { transform: scale(1.35); filter: blur(8px); opacity: 0; }
  60% { filter: blur(0); }
  to { transform: scale(1); opacity: 1; }
}
.fight-flash {
  position: fixed; inset: 0; background: var(--acid-hot); opacity: 0;
  pointer-events: none; z-index: 95;
}
.fight-flash.go { animation: fightFlash .45s ease-out both; }
@keyframes fightFlash { from { opacity: .34; } to { opacity: 0; } }
.fight-verdict { position: relative; }
.spark {
  position: absolute; left: 50%; top: 40%; width: 5px; height: 5px; border-radius: 50%;
  background: var(--acid-hot); pointer-events: none;
  animation: sparkFly .7s ease-out both;
}
@keyframes sparkFly {
  from { transform: translate(0, 0); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

.rnd { margin-top: 14px; opacity: 0; transform: translateY(6px); }
.rnd.in { opacity: 1; transform: none; transition: opacity .42s ease, transform .42s ease; }
.rnd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.rnd-head .g { width: 13px; height: 13px; fill: var(--ink-muted); }
.rnd-nm {
  flex: 1; font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-muted);
}
.rnd-odds { font-size: 10.5px; color: var(--ink-dim); }
.rnd-bar {
  display: flex; height: 26px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); background: #0b0a08;
}
.rnd-mine, .rnd-theirs {
  display: flex; align-items: center; font-family: var(--data); font-size: 12px;
  font-weight: 700; transition: flex-basis .6s cubic-bezier(.4, 0, .2, 1);
}
.rnd-mine { background: rgba(95, 168, 148, .24); color: #8fd3c0; padding-left: 9px; }
.rnd-theirs { background: rgba(127, 160, 189, .2); color: #a9c6e0; padding-right: 9px; justify-content: flex-end; }
.mu-note {
  margin-top: 14px; font-family: var(--flavor); font-style: italic;
  font-size: 13.5px; color: var(--ink-faint); text-align: center;
}
.fight-verdict { opacity: 0; transform: translateY(8px); }
.fight-verdict.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.fight-rounds { margin-bottom: 22px; }

/* tab attention badge: in the flow after the label, never over it — the
   absolute corner spot sat on the text, and the scrolling mobile tab bar
   clips anything hung outside the button */
.tab { position: relative; }
.tab .tab-badge {
  display: inline-block; vertical-align: 1px; margin-left: 5px;
  min-width: 15px; height: 15px;
  border-radius: 8px; background: var(--acid); color: #1a1408;
  font-size: 10px; font-weight: 800; line-height: 15px; text-align: center;
  padding: 0 3px; pointer-events: none;
}

/* shelves */
.shelf { margin-top: 44px; }
.shelf h2 { font-size: 16px; letter-spacing: .06em; margin: 0 0 16px; color: var(--ink-muted); font-weight: 600; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 18px; }
.empty { color: var(--ink-dim); font-size: 14px; border: 1px dashed var(--line); border-radius: 14px; padding: 26px; text-align: center; }

.card {
  position: relative; border-radius: var(--r-md); padding: 20px 18px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -18px var(--rc, rgba(0,0,0,.6)); }
.card .row-btns, .card .claim-mini { margin-top: auto; }
.card .row-btns { padding-top: 12px; }
.card .claim-mini { margin-top: auto; }
.card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--rc, var(--common));
}
.card .emoji { font-size: 40px; line-height: 1; filter: drop-shadow(0 0 14px var(--rc)); }
.card .name { font-weight: 700; font-size: 15.5px; margin-top: 12px; }
.card .tier { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--rc); margin-top: 3px; font-weight: 700; }
.card .uid { font-family: var(--data); font-size: 10px; color: var(--ink-dim); margin: 10px 0 12px; word-break: break-all; }
.card .claim-mini {
  margin-top: auto; width: 100%; cursor: pointer;
  font-family: var(--display); letter-spacing: .1em; font-size: 13px;
  color: #241703; background: linear-gradient(135deg, #caa03f, #e6bd5e);
  border: none; border-radius: 9px; padding: 9px 0;
}
.card .claim-mini:disabled { filter: grayscale(.7) brightness(.65); cursor: wait; }

footer { margin-top: 60px; font-size: 11px; color: var(--ink-dim); }
footer a { color: var(--acid); text-decoration: none; }


/* ------------------------------------------------------------------
   CARD DETAIL. The shareable object: art to just under half the sheet
   with the name set ON it, pedigree as ledger rows, and a link out so
   nobody has to take the record on faith.
   ------------------------------------------------------------------ */
.detail-sheet {
  width: min(420px, 92vw); margin: 0 auto; text-align: left; overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--rc) 46%, transparent);
  border-radius: 16px; background: var(--panel-solid);
  box-shadow: 0 30px 70px -30px #000;
}
.detail-sheet.rank-3 {
  border-width: 2px; border-color: color-mix(in srgb, var(--rc) 74%, transparent);
  box-shadow: 0 0 50px -18px var(--rc), 0 30px 70px -30px #000;
}
/* single column (phones): cap the art so the record and the action bar
   still make the screen */
.ds-art {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #14100c;
  max-height: min(44vh, 420px);
}
.ds-art .ac-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ds-art .cf-sigil { position: absolute; inset: 0; display: grid; place-items: center; }
.ds-art .cf-sigil .card-art { width: 54%; height: 54%; }
.ds-plate { position: absolute; left: 18px; right: 18px; bottom: 15px; z-index: 2; }
.ds-name {
  font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .85);
}
.ds-type {
  margin-top: 7px; font-size: 9px; letter-spacing: .19em; text-transform: uppercase;
  font-weight: 600; color: var(--rc); text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}
.ds-body { padding: 16px 18px 18px; }
.ds-flavor {
  margin-top: 15px; font-family: var(--flavor); font-style: italic; font-size: 15.5px;
  line-height: 1.5; color: #948a7b;
}
.ledger { margin-top: 18px; border-top: 1px solid var(--line); }
.lg-row {
  display: flex; align-items: baseline; gap: 14px; padding: 11px 0;
  border-bottom: 1px solid rgba(255, 245, 230, .05);
}
.lg-k {
  flex: 0 0 92px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 600;
}
.lg-v { font-family: var(--data); font-size: 12px; color: var(--ink); }
.verify {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--ink-dim); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
}
.verify:hover { color: var(--acid); border-color: var(--acid); }
.verify .g { width: 11px; height: 11px; }
/* one primary, three quiet icons. The bar is sticky to the foot of the
   sheet: on a long card the actions never scroll out of reach. */
.ds-acts {
  display: flex; gap: 9px; align-items: stretch;
  width: min(420px, 92vw); margin: 14px auto 0;
  position: sticky; bottom: 0; z-index: 3;
  padding: 10px 0 14px;
  background: linear-gradient(to top, var(--bg) 58%, rgba(11, 10, 8, .82) 88%, transparent);
}
.ds-acts .cf-primary { padding: 14px 0; font-size: 12.5px; }
.ds-icon {
  width: 50px; border-radius: 10px; border: 1px solid var(--line); background: var(--raised);
  color: var(--ink-muted); display: grid; place-items: center; cursor: pointer;
}
.ds-icon:hover { border-color: var(--line-hi); color: var(--ink); }
.ds-acts .duel-done { align-self: center; }

/* Wide enough for a landscape sheet: the art stands beside the record
   instead of above it, so a Sovereign's full pedigree fits on screen and
   the page never grows a scrollbar. The art loses its square ratio here
   and fills the column, which suits portrait card art anyway. */
@media (min-width: 900px) {
  .detail-sheet {
    width: min(900px, 94vw); display: grid; align-items: stretch;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  }
  .ds-art { aspect-ratio: auto; height: 100%; max-height: none; min-height: 340px; }
  .ds-body {
    padding: 20px 22px 22px; display: flex; flex-direction: column;
    max-height: min(78vh, 760px); overflow-y: auto; overscroll-behavior: contain;
  }
  .ds-body .ledger { margin-top: 14px; }
  .ds-body .ds-flavor { margin-top: 13px; }
  .ds-acts { width: min(900px, 94vw); }
  /* the name plate sits on the art, which is now taller than it is wide */
  .ds-name { font-size: 28px; }
}
/* Single column (phones): the record pairs up two-across so a full
   pedigree, the art and the action bar all make one screen. The token id
   keeps the full width because a hash does not abbreviate well. */
@media (max-width: 899px) {
  /* aspect-ratio + max-height fought each other: the box kept its square
     ratio for layout while the clamp squeezed the height, and the art read
     as skewed. Height is stated outright and the art crops to fill it. */
  .ds-art { aspect-ratio: auto; height: min(34vh, 92vw); max-height: none; }
  .ds-art .ac-img { object-fit: cover; object-position: center 22%; }
  .ledger { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .lg-row { padding: 8px 0; }
  .lg-row:last-child { grid-column: 1 / -1; }
  .lg-k { flex: 0 0 76px; }
  .ds-flavor { font-size: 14.5px; margin-top: 12px; }
  .ds-body { padding: 14px 16px 16px; }
  .verify { margin-top: 12px; }
}
/* short-and-wide windows: trim the record's breathing room rather than scroll */
@media (min-width: 900px) and (max-height: 720px) {
  .lg-row { padding: 8px 0; }
  .ds-body .ds-flavor { font-size: 14px; margin-top: 10px; }
  .ds-body { padding: 16px 18px 18px; }
}

/* overlay */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  align-items: safe center; justify-items: safe center;
  overflow-y: auto; background: rgba(9, 7, 3, .88); backdrop-filter: blur(8px); /* warm, not the old navy */
}
.overlay[hidden], .stage[hidden] { display: none; }
.overlay-inner { text-align: center; padding: 24px; }

.capsule-drop { animation: drop-bounce 1.6s ease-in-out infinite; margin-bottom: 30px; }
.capsule { width: 92px; height: 92px; margin: 0 auto; position: relative; }
.capsule-top, .capsule-bottom { position: absolute; left: 0; width: 92px; height: 46px; }
/* the capsule burns ember now — the pink/steel pair was the palette's last
   cold survivor (owner's call, 2026-08-01) */
.capsule-top { top: 0; border-radius: 92px 92px 0 0; background: linear-gradient(180deg, #f0894e, #cf5f2e); }
.capsule-bottom { bottom: 0; border-radius: 0 0 92px 92px; background: linear-gradient(180deg, #f2e9d8, #cdc0a5); }
@keyframes drop-bounce { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(4deg); } }
.wait-title { font-family: var(--display); font-size: 21px; letter-spacing: .05em; }
.wait-sub { color: var(--ink-muted); font-size: 13.5px; margin-top: 8px; }
.wait-timer { color: var(--ink-dim); font-size: 12px; margin-top: 16px; }

.prize-card {
  width: 270px; margin: 0 auto 24px; border-radius: 20px; padding: 34px 24px 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  border: 1.5px solid var(--rc, var(--common));
  box-shadow: 0 0 70px -12px var(--rc, var(--common));
  animation: card-in .55s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes card-in { 0% { transform: scale(.35) rotateY(90deg); opacity: 0; } 100% { transform: scale(1) rotateY(0); opacity: 1; } }
.prize-emoji { font-size: 74px; line-height: 1; filter: drop-shadow(0 0 26px var(--rc)); }
.prize-tier { margin-top: 16px; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--rc); font-weight: 800; }
.prize-name { font-size: 24px; font-weight: 800; margin-top: 6px; }
.prize-uid { font-size: 10px; color: var(--ink-dim); margin-top: 12px; word-break: break-all; }

.claim-btn {
  display: block; margin: 0 auto; cursor: pointer;
  font-family: var(--display); font-size: 16px; letter-spacing: .12em;
  color: #241703; background: linear-gradient(135deg, #caa03f, #e6bd5e);
  border: none; border-radius: 12px; padding: 14px 34px;
  box-shadow: 0 12px 40px -10px rgba(212, 168, 67, .45);
}
.ghost-btn {
  display: block; margin: 14px auto 0; cursor: pointer; background: none;
  border: none; color: var(--ink-dim); font-size: 13px; text-decoration: underline;
}
.err-emoji { font-size: 54px; margin-bottom: 18px; }

/* v2: tabs, arena, farm, connect */
.wallet-chip.as-btn { cursor: pointer; transition: border-color .15s; }
.wallet-chip.as-btn:hover { border-color: var(--acid); }
.wallet-chip .dot.off { background: var(--ink-dim); box-shadow: none; }

.tabs { display: flex; gap: 8px; margin-top: 44px; border-bottom: 1px solid var(--line); }
.tab {
  background: none; border: none; cursor: pointer; color: var(--ink-dim);
  font-family: var(--display); font-size: 14px; letter-spacing: .1em;
  padding: 12px 18px; border-bottom: 2px solid transparent;
}
.tab.active { color: var(--acid); border-bottom-color: var(--acid); }
.tabpane { margin-top: 26px; }
.mt { margin-top: 34px !important; }

/* the row's clearance belongs to the row, not to the h2's own margin: the
   FUSE button is taller than the heading text, and centered against that
   margin its bottom edge crossed onto the first card */
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pane-head h2 { margin: 0; }
.mini-btn {
  cursor: pointer; font-family: var(--display); letter-spacing: .08em; font-size: 12px;
  color: #241703; background: linear-gradient(135deg, #caa03f, #e6bd5e);
  border: none; border-radius: 8px; padding: 8px 14px;
}
.mini-btn.alt { background: none; color: var(--ink-muted); border: 1px solid var(--line); }
.mini-btn:disabled { filter: grayscale(.75) brightness(.6); cursor: not-allowed; }
.row-btns { display: flex; gap: 8px; margin-top: 12px; }
.row-btns .mini-btn { flex: 1; }

body.fuse-picking .card.cf[data-open] { cursor: copy; }
body.fuse-picking .card.cf[data-open]:hover { border-color: var(--acid); }
/* an incoming champion stands in the grid, dimmed until it arrives */
.card.cf.incoming { opacity: .55; filter: saturate(.55); }
.card.cf.incoming .cf-state { color: var(--ink-dim); }
/* the other wallet's champions step back once the first is picked */
.card.cf.fuse-off { opacity: .38; filter: saturate(.35); }
body.fuse-picking .card.cf.fuse-off[data-open] { cursor: not-allowed; }
body.fuse-picking .card.cf.fuse-off[data-open]:hover {
  border-color: color-mix(in srgb, var(--rc) 38%, transparent);
}
/* Picked for fusion. The ring has to read against a dark card face AND
   whatever the page is standing on, so it is drawn twice: an ink ring
   against the gold ground, a gold halo against the art. */
.card.selected {
  outline: 3px solid var(--acid); outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(212, 168, 67, .22);
}
.card.selected::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid rgba(11, 10, 8, .55); pointer-events: none;
}
body.theme-light .card.selected {
  outline-color: #2a1e08;
  box-shadow: 0 0 0 6px rgba(42, 30, 8, .18), 0 6px 18px rgba(63, 46, 14, .28);
}
body.theme-light .card.selected::after { border-color: rgba(244, 239, 230, .65); }
.fuse-bar { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-muted); }
/* its own display:flex outranks the UA [hidden] rule, so PICK TWO / FUSE
   kept offering a rite that needs two champions to a player holding one */
.fuse-bar[hidden] { display: none; }
.pending-gems { margin-top: 10px; font-family: var(--data); font-size: 12px; color: var(--acid); }

.farm-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 26px; }
.farm-summary .row-btns { margin-top: 12px; }

.duels { display: flex; flex-direction: column; gap: 12px; }
.duel {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-md); padding: 14px 18px;
}
.duel.closed { opacity: .45; }
.duel-emoji { font-size: 30px; }
.duel-info { flex: 1; font-size: 14px; }
.duel-meta { font-size: 11.5px; color: var(--ink-dim); margin-top: 3px; }
/* the two side-bet buttons stay a pair: side by side even when the duel
   row is squeezed on a phone */
.bet-btns { display: inline-flex; gap: 6px; align-items: stretch; }
.bet-btns .mini-btn { flex: 0 1 auto; }
@media (max-width: 600px) {
  .bet-btns { display: flex; margin-top: 6px; }
  .bet-btns .mini-btn { flex: 1 1 0; }
}
.duel-done { font-size: 11px; letter-spacing: .12em; color: var(--ink-dim); text-transform: uppercase; }

.connect-list { display: flex; flex-direction: column; gap: 10px; margin: 22px auto 14px; max-width: 360px; }
.connect-opt {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left;
  cursor: pointer; border: 1px solid var(--line); background: var(--panel);
  border-radius: 12px; padding: 13px 16px; color: var(--ink); font-family: var(--body);
}
.connect-opt:hover { border-color: var(--acid); }
.connect-opt b { font-size: 15px; }
.connect-opt span { font-size: 12px; color: var(--ink-dim); }
.wc-pair { margin-top: 14px; }
.wc-pair canvas { background: #fff; border-radius: 12px; padding: 6px; }
.wc-pair textarea {
  width: 100%; max-width: 360px; margin-top: 8px; background: rgba(0,0,0,.4);
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink-muted);
  font-family: var(--data); font-size: 10px; padding: 8px;
}
/* the picker holds CARDS, so they keep card proportions instead of one
   stretching to the container width and overflowing a short scroll box */
.pick-cards {
  max-width: min(700px, 92vw); margin: 16px auto;
  grid-template-columns: repeat(auto-fit, minmax(150px, 196px));
  justify-content: center; gap: 14px;
  max-height: min(66vh, 620px); overflow-y: auto; overscroll-behavior: contain;
  padding: 2px;
}
/* a compact face: choosing needs the name, rank, power and aspects, so the
   flavour steps out and the whole card fits without a scrollbar */
.pick-cards .cf-flavor { display: none; }
.pick-cards .cf-body { padding: 9px 10px 10px; gap: 6px; }
.pick-cards .cf-name { font-size: 14px; }
.pick-cards .mini-btn { padding: 8px 6px; font-size: 11px; }
.pick-cards::-webkit-scrollbar { width: 8px; }
.pick-cards::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 4px; }
.pick-cards::-webkit-scrollbar-track { background: transparent; }
.pick-wager { color: var(--ink-muted); font-size: 14px; }
.pw-hint { color: var(--acid); }
.pick-wager input {
  width: 90px; background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 7px;
  color: var(--ink); font-family: var(--data); padding: 6px 9px; margin-left: 8px;
}
.name-input {
  display: block; margin: 16px auto 6px; width: 240px; text-align: center;
  background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 7px;
  /* not Cinzel: it only has capital letterforms, which hides the typed case */
  color: var(--ink); font-family: var(--body); font-size: 17px; padding: 9px 12px;
}
.prize-power { margin-top: 8px; font-family: var(--data); font-size: 15px; color: var(--ink); }
.duel-banner { font-family: var(--display); font-size: 40px; letter-spacing: .1em; margin-bottom: 14px; }
.duel-banner.win { color: var(--acid); text-shadow: 0 0 40px rgba(212,168,67,.5); }
.duel-banner.lose { color: var(--danger, #ff6b8a); }

/* background tx toasts */
.toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column-reverse; gap: 10px; max-width: 340px;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  background: #17130c; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; box-shadow: 0 14px 40px -12px rgba(0,0,0,.7);
  animation: toast-in .25s ease;
}
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast .t-body { flex: 1; min-width: 0; }
.toast b { font-size: 13px; display: block; }
.toast .t-sub { font-size: 11px; color: var(--ink-dim); display: block; word-break: break-word; }
.toast .t-time { font-size: 11px; color: var(--ink-dim); }
.toast .t-spin {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid rgba(212,168,67,.25); border-top-color: var(--acid);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.toast.ok { border-color: rgba(212,168,67,.5); }
.toast.ok .t-spin { animation: none; border-color: var(--acid); background: var(--acid); }
.toast.fail { border-color: rgba(255,107,138,.6); }
.toast.fail .t-spin { animation: none; border-color: var(--danger); background: var(--danger); }
.toast .t-x { background: none; border: none; color: var(--ink-dim); cursor: pointer; font-size: 13px; }

/* taste pass: states, texture, focus */
button { transition: transform .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
button:active:not(:disabled) { transform: scale(.98); }
/* the outline follows each control's own radius; forcing 4px reshaped
   pills (wallet chip, stat chips) while focused */
:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
html { scroll-behavior: smooth; }

.mini-btn:hover:not(:disabled) { filter: brightness(1.1); }
.mini-btn.alt:hover:not(:disabled) { border-color: var(--acid); color: var(--ink); filter: none; }
.tab:hover { color: var(--ink-muted); }
.tab.active:hover { color: var(--acid); }
.claim-mini:hover:not(:disabled) { filter: brightness(1.08); }
.connect-opt:active { transform: scale(.99); }

/* fixed grain overlay: breaks digital flatness (pointer-events: none) */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* tinted shadows on primary actions (match background hue, not black) */
.pull-btn { box-shadow: 0 14px 45px -12px rgba(212, 168, 67, .38), 0 4px 14px -6px rgba(18, 14, 5, .8); }
.toast { box-shadow: 0 14px 40px -12px rgba(18, 14, 5, .85); }

/* learn page */
.guide { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: 64ch; }
.guide li { counter-increment: step; position: relative; padding: 0 0 30px 58px; }
.guide li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--data); font-size: 13px; color: var(--acid);
  border: 1px solid rgba(212, 168, 67, .3); border-radius: var(--r-sm);
  padding: 6px 8px; background: rgba(212, 168, 67, .06);
}
.guide li:not(:last-child)::after {
  content: ''; position: absolute; left: 16px; top: 40px; bottom: 8px;
  width: 1px; background: var(--line);
}
.guide h3 { margin: 2px 0 7px; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.guide p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.guide a, .faq a { color: var(--acid); text-decoration-color: rgba(212, 168, 67, .4); }

.faq { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px 34px; }
.faq .qa h4 { margin: 0 0 7px; font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; }
.faq .qa p { margin: 0; color: var(--ink-muted); font-size: 13.5px; line-height: 1.65; text-wrap: pretty; }
@media (max-width: 700px) { .faq { grid-template-columns: 1fr; } }

/* codex chronicle */
.lore { max-width: 64ch; border-left: 2px solid rgba(212, 168, 67, .35); padding-left: 22px; margin-bottom: 8px; }
.lore p { color: var(--ink-muted); font-size: 14.5px; line-height: 1.75; margin: 0 0 14px; text-wrap: pretty; }
.lore b { color: var(--ink); font-weight: 600; }

/* the unbound showcase */
.machine.showcase {
  position: relative; height: 440px;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rc, #d4a843) 35%, transparent);
  transition: border-color 1.2s ease;
}
.show-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1);
  transition: opacity 1.1s ease, transform 7s ease-out;
}
.show-img.on { opacity: 1; transform: scale(1.07); }
.show-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 10, 8, .3) 0%, transparent 25%, transparent 60%, rgba(11, 10, 8, .92) 100%);
}
.show-cap { position: absolute; left: 16px; right: 16px; bottom: 14px; pointer-events: none; }
.show-name { font-family: var(--display); font-weight: 700; font-size: 19px; color: #f4efe6; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.show-station { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; margin-top: 4px; }

/* whispers of the realm */
.whisper {
  min-height: 22px; margin: 14px 0 4px;
  font-style: italic; font-size: 13.5px;
  color: color-mix(in srgb, var(--acid) 78%, transparent); /* flips with the theme */
}
.whisper span { opacity: 0; transition: opacity .45s ease; }
.whisper span.in { opacity: 1; }

/* the summon button breathes */
.pull-btn:not(:disabled) { animation: summonPulse 2.8s ease-in-out infinite; }
@keyframes summonPulse {
  0%, 100% { box-shadow: 0 12px 40px -10px rgba(212, 168, 67, .4); }
  50% { box-shadow: 0 12px 58px -6px rgba(212, 168, 67, .75); }
}
@media (prefers-reduced-motion: reduce) {
  .show-img { transition: opacity .3s; transform: none; }
  .show-img.on { transform: none; }
  .pull-btn:not(:disabled) { animation: none; }
}

/* guided tour */
.tour-btn { padding: 8px 12px; font-weight: 700; flex-shrink: 0; }
#tourDim { display: none; position: fixed; inset: 0; z-index: 90; }
#tourSpot {
  position: fixed; border-radius: 14px; pointer-events: none;
  border: 2px solid var(--acid);
  box-shadow: 0 0 0 9999px rgba(4, 3, 2, .62), 0 0 34px rgba(212, 168, 67, .45);
  transition: all .3s ease;
}
#tourTip {
  position: fixed; z-index: 91; width: min(400px, calc(100vw - 24px));
  background: linear-gradient(160deg, #1c160c, #120e08);
  border: 1px solid rgba(212, 168, 67, .5); border-radius: 16px;
  padding: 20px 22px 16px;
  box-shadow: 0 24px 70px -18px rgba(0, 0, 0, .9), 0 0 40px -10px rgba(212, 168, 67, .25);
  transition: left .3s ease, top .3s ease;
}
.tour-title { font-family: var(--display); font-size: 17px; letter-spacing: .06em; color: var(--acid); margin-bottom: 8px; padding-right: 24px; }
.tour-body { font-size: 13.5px; line-height: 1.65; color: var(--ink); }
.tour-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 10px; }
.tour-nav .mini-btn { margin-left: 8px; }
.tour-count { font-family: var(--data); font-size: 11px; color: var(--ink-dim); }
.tour-x {
  position: absolute; top: 10px; right: 12px; cursor: pointer;
  background: none; border: none; color: var(--ink-dim); font-size: 15px;
}
.tour-x:hover { color: var(--ink); }

/* aspects (valor / bulwark / guile) */
.ac-aspects {
  font-family: var(--data); font-size: 11px; color: #cfc6b4;
  letter-spacing: .02em; display: flex; gap: 12px; align-items: center;
}
.ac-aspects span { display: inline-flex; align-items: center; gap: 4px; }
.ac-aspects .g { width: 11px; height: 11px; fill: var(--ink-dim); }
.card:not(.art-card) .ac-aspects { margin-top: 6px; color: var(--ink-muted); text-shadow: none; }
.prize-card .ac-aspects { font-size: 13px; }
.reveal-face.plain .ac-aspects { margin-top: 10px; }

/* the Rite of Tempering */
.temper-opts { display: flex; gap: 10px; justify-content: center; margin: 18px 0 14px; }
.favor-note { margin-top: 10px; }
.favor-note b { color: var(--acid); }
.favor-note .mini-btn { margin-left: 10px; }

/* ---------------- reveal theater ---------------- */
.prize-card { perspective: 1200px; }
.prize-card:not(.art-reveal) { min-height: 400px; }
.flip-inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.3, 1.35, .4, 1);
}
.prize-card { position: relative; }
.reveal-back, .reveal-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: inherit; overflow: hidden;
}
.reveal-face { transform: rotateY(180deg); }
.reveal-face.plain {
  display: flex; flex-direction: column; justify-content: center;
  text-align: center; padding: 34px 24px 26px;
}
#stageReveal.revealed .flip-inner { transform: rotateY(180deg); }
.reveal-back {
  display: grid; place-items: center;
  background: none; border: 0;
  overflow: visible;   /* nothing to clip now, and the crest falls in from above */
}
.reveal-back img {
  /* height must follow the CSS width: the img's width/height attributes
     otherwise pin the height at 300px and stretch the shield */
  width: 46%; height: auto; opacity: .92;
  animation: crestFall .7s cubic-bezier(.3, 1.2, .45, 1) both,
             backPulse 1.1s ease-in-out .7s infinite alternate;
}
@keyframes crestFall {
  from { transform: translateY(-46%) scale(1.32); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: .92; }
}
@keyframes backPulse {
  from { transform: scale(.97); filter: drop-shadow(0 0 10px var(--rc, #d4a843)); }
  to { transform: scale(1.05); filter: drop-shadow(0 0 32px var(--rc, #d4a843)); }
}
#stageReveal.tier-2 .reveal-back img { animation-duration: .7s; }
#stageReveal.tier-3 .reveal-back img { animation-duration: .45s; width: 48%; }
#stageReveal.sequencing .claim-btn, #stageReveal.sequencing .ghost-btn { opacity: 0; pointer-events: none; }
#stageReveal .claim-btn, #stageReveal .ghost-btn { transition: opacity .4s ease .25s; }
.skip-hint {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 14px; opacity: 0; transition: opacity .5s;
}
#stageReveal.sequencing .skip-hint { opacity: .65; }
#stageReveal.revealed .skip-hint { display: none; }

/* crash landing */
.card.crash-landing { animation: cardCrash both cubic-bezier(.4, 0, .7, 1); z-index: 4; }
@keyframes cardCrash {
  0% { transform: translateY(-75vh) scale(1.14); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translateY(0) scale(1); }
  68% { transform: scale(1.07, .9); }
  84% { transform: scale(.97, 1.04); }
  100% { transform: none; }
}
body.page-quake main { animation: pquake .5s ease-in-out; }
@keyframes pquake {
  0%, 100% { transform: none; }
  20% { transform: translate(calc(var(--quake-amp, 4px) * -1), calc(var(--quake-amp, 4px) * .6)); }
  40% { transform: translate(var(--quake-amp, 4px), calc(var(--quake-amp, 4px) * -.7)); }
  60% { transform: translate(calc(var(--quake-amp, 4px) * -.7), calc(var(--quake-amp, 4px) * -.4)); }
  80% { transform: translate(calc(var(--quake-amp, 4px) * .5), calc(var(--quake-amp, 4px) * .5)); }
}
.dustbox { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.dust-puff {
  position: fixed; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 120, 90, .5), rgba(90, 78, 60, 0) 70%);
  filter: blur(2px); opacity: 0;
  animation: puffOut ease-out forwards;
}
@keyframes puffOut {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  15% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -26px) scale(2.6); }
}
.grit {
  position: fixed; width: 4px; height: 4px; border-radius: 2px;
  background: #8c7a5a; opacity: 0;
  animation: gritFly ease-out forwards;
}
@keyframes gritFly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx, 0), 46px) rotate(var(--rot, 180deg)); }
}
.impact-ring {
  position: fixed; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 60;
  border: 3px solid rgba(212, 168, 67, .7);
  animation: ringOut .65s ease-out forwards;
}
@keyframes ringOut {
  to { width: 340px; height: 340px; border-width: 1px; opacity: 0; }
}
body.land-flash::before {
  content: ''; position: fixed; inset: 0; z-index: 59; pointer-events: none;
  background: radial-gradient(circle at 50% 60%, rgba(255, 219, 120, .4), transparent 65%);
  animation: goldfade .8s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .card.crash-landing { animation: none; }
  body.page-quake main { animation: none; }
  .dust-puff, .grit, .impact-ring { display: none; }
}

/* embers */
.embers { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.ember-p {
  position: absolute; bottom: 8%; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #ffd77a, #d4a843 70%);
  box-shadow: 0 0 8px rgba(255, 200, 100, .8); opacity: 0;
  animation: emberUp linear forwards;
}
.ember-p.big { width: 8px; height: 8px; }
@keyframes emberUp {
  0% { opacity: 0; transform: none; }
  12% { opacity: 1; }
  100% { transform: translate(var(--dx, 0), -240px) scale(.35); opacity: 0; }
}

/* epic quake + legendary flash */
.overlay.quake .overlay-inner { animation: quake .5s ease-in-out; }
@keyframes quake {
  0%, 100% { transform: none; }
  20% { transform: translate(-7px, 4px); }
  40% { transform: translate(6px, -5px); }
  60% { transform: translate(-5px, -3px); }
  80% { transform: translate(4px, 5px); }
}
.overlay.goldflash::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 219, 120, .55), transparent 68%);
  animation: goldfade .95s ease-out forwards;
}
@keyframes goldfade { from { opacity: 1; } to { opacity: 0; } }

/* ribbons */
.ribbon {
  position: fixed; top: 78px; left: 50%; z-index: 70;
  transform: translate(-50%, -26px); opacity: 0;
  font-family: var(--display); font-size: 13.5px; letter-spacing: .08em;
  color: #e8d9ac; padding: 12px 26px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(32, 26, 15, .97), rgba(46, 37, 19, .97));
  border: 1px solid rgba(212, 168, 67, .5);
  box-shadow: 0 12px 44px -10px rgba(212, 168, 67, .4);
  transition: transform .45s cubic-bezier(.2, 1.25, .4, 1), opacity .45s;
  max-width: min(92vw, 52ch); text-align: center; line-height: 1.5;
  text-wrap: pretty;
}
/* the ribbon is a night island: its accent stays night-gold even in light
   mode, where var(--acid) turns brown and vanished on the dark plate */
.ribbon b { color: #d4a843; font-weight: 700; }
.ribbon.show { transform: translate(-50%, 0); opacity: 1; }
.ribbon.level { font-size: 16px; border-width: 2px; padding: 15px 34px; }

/* a champion the current squad cannot sign for reads as unavailable */
.card.pick-off { opacity: .42; filter: saturate(.5); }
.card.pick-off .mini-btn { cursor: not-allowed; }
.bet-mine { color: var(--acid); font-weight: 700; }

/* button micro-feel */
.pull-btn, .mini-btn, .claim-btn, .claim-mini, .ghost-btn { transition: transform .08s ease, filter .15s ease; }
.pull-btn:active:not(:disabled), .mini-btn:active:not(:disabled),
.claim-btn:active, .claim-mini:active:not(:disabled) { transform: scale(.965); }
.pull-btn:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 14px 44px -10px rgba(212, 168, 67, .55); }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
  .reveal-back img { animation: none; }
  .ember-p { display: none; }
  .overlay.quake .overlay-inner, .overlay.goldflash::after { animation: none; }
  .machine.shaking { animation: none; }
  .prize-card { animation: none; }
  .ribbon { transition: opacity .2s; }
}

/* the bosses (see the block further down for the row itself) */
.writ-done { color: var(--acid); font-weight: 700; }
.writ-locked { color: var(--ink-dim); }

/* cosmetics: frames, tints, epithets — identity, never power */
.card.cframe-1 { box-shadow: 0 0 0 2px rgba(212, 168, 67, .55), 0 0 18px rgba(212, 168, 67, .25); }
.card.cframe-2 { box-shadow: 0 0 0 2px rgba(200, 208, 220, .6), 0 0 14px rgba(200, 208, 220, .2); }
.card.cframe-3 { box-shadow: 0 0 0 3px rgba(230, 190, 80, .8), 0 0 22px rgba(230, 190, 80, .35); }
.card.cframe-4 { box-shadow: 0 0 0 2px rgba(120, 90, 200, .7), 0 0 20px rgba(120, 90, 200, .35); }
.ctint-1 .ac-img { filter: hue-rotate(20deg) saturate(1.1); }
.ctint-2 .ac-img { filter: hue-rotate(-25deg) saturate(1.15); }
.ctint-3 .ac-img { filter: hue-rotate(160deg) saturate(.9); }
.ctint-4 .ac-img { filter: sepia(.45) saturate(1.2); }
.ctint-5 .ac-img { filter: grayscale(.8) contrast(1.1); }
.ctint-6 .ac-img { filter: hue-rotate(90deg) saturate(1.2) brightness(1.05); }
.ac-epithet, .card .ac-epithet {
  font-style: italic; font-size: 11.5px; color: var(--acid);
  letter-spacing: .04em; margin-bottom: 2px;
}
.dress-wrap {
  display: flex; gap: 24px; max-width: 680px; margin: 0 auto;
  align-items: flex-start; text-align: left;
}
.dress-preview {
  width: 190px; height: 250px; flex: none; position: relative;
  overflow: hidden; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--rc, #d4a843) 35%, transparent);
}
.dress-preview .ac-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dress-svg { display: grid; place-items: center; height: 100%; font-size: 64px; }
.dress-cap { position: absolute; left: 12px; right: 12px; bottom: 10px; }
.dress-cap .ac-name {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  color: #f4efe6; text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}
.dress-controls { flex: 1; min-width: 0; }
.dress-controls .wait-sub { margin-bottom: 6px; }
.dress-row { margin: 12px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dress-row b { width: 68px; font-size: 12px; letter-spacing: .1em; color: var(--ink-muted); flex: none; }
.dress-btn.active { border-color: var(--acid); color: var(--acid-hot); background: rgba(212, 168, 67, .08); }
.stance-btn.active { border-color: var(--acid); color: var(--acid-hot); background: rgba(212, 168, 67, .08); }
/* v5 keyword ability on the card face */
.ac-ability {
  font-family: var(--display); font-size: 10.5px; letter-spacing: .12em;
  color: var(--acid-hot); margin: 1px 0;
}
.tint-btn { padding: 4px; line-height: 0; }
.tint-thumb { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; display: block; position: static; }
@media (max-width: 640px) {
  .dress-wrap { flex-direction: column; align-items: center; text-align: center; }
  .dress-row { justify-content: center; }
  .dress-row b { width: 100%; }
}

/* progression: daily trial, muster roll, season */
.trial-note { color: var(--acid); font-size: 13px; }
.nowrap { white-space: nowrap; }
.farm-summary .stat .v small {
  display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-dim);
  font-family: var(--body); letter-spacing: 0;
}
/* aspects read the same everywhere: glyph, number, a little air */
.aspect-line { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.aspect-line .g { width: 12px; height: 12px; fill: var(--ink-dim); margin-left: 6px; }
.aspect-line .g:first-child { margin-left: 0; }
/* rules read as rules, not as a paragraph in a quote block */
.rulelist { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.rulelist li { font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.rulelist li::marker { color: var(--ink-faint); }
/* fusion: a button and a keyboard path, not a hidden long-press */
.fuse-tip { font-size: 11.5px; color: var(--ink-dim); }
#fuseModeBtn.active { border-color: var(--acid); color: var(--acid-hot); }
/* settled fights fold away so anything live dominates the Arena */
.past-fights { margin-top: 4px; }
.past-fights > summary {
  cursor: pointer; list-style: none; padding: 9px 12px; border-radius: 10px;
  border: 1px dashed var(--line); color: var(--ink-dim);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.past-fights > summary::-webkit-details-marker { display: none; }
.past-fights > summary:hover { border-color: var(--line-hi); color: var(--ink-muted); }
.past-fights[open] > summary { margin-bottom: 8px; }
.past-fights > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.past-fights > summary .feed-chev { transition: transform .18s ease; }
.past-fights[open] > summary .feed-chev { transform: rotate(180deg); }

/* Bosses: a boss, then its three tiers with the spread each one fights.
   The row stacks (name above tiers) because side-by-side the tier block has
   no natural width and squeezed the name to one word per line. */
#writList { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 10px; }
.writ-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  overflow: hidden;
}
.writ-row .duel-info { width: 100%; min-width: 0; flex: 0 0 auto; }
.writ-row .duel-info b { font-family: var(--display); font-size: 14.5px; }
.writ-tiers { display: grid; grid-template-columns: 1fr; gap: 3px; width: 100%; }
.writ-tier {
  display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center;
  gap: 10px; padding: 3px 0;
}
.writ-tier + .writ-tier { border-top: 1px solid rgba(255, 245, 230, .05); }
.writ-tier.done { opacity: .5; }
.writ-tier .mini-btn { width: 100%; padding: 5px 4px; font-size: 10.5px; }
.writ-spread {
  font-family: var(--data); font-size: 11.5px; color: var(--ink-muted);
  white-space: nowrap; overflow: hidden;
}
.writ-spread .g { width: 11px; height: 11px; fill: var(--ink-faint); margin-left: 9px; }
.writ-spread .g:first-child { margin-left: 0; }
/* a felled or locked tier holds the same height as one with a button, so
   every boss card is the same size whatever state its tiers are in */
.writ-done, .writ-locked {
  font-size: 10px; letter-spacing: .1em; display: inline-flex; align-items: center;
  gap: 4px; justify-content: center; min-height: 25px;
}
.writ-done .g, .writ-locked .g { width: 10px; height: 10px; }
/* the odds legend names each rank instead of relying on colour memory */
.odds-mini span { display: inline-flex; align-items: center; gap: 5px; }
.odds-mini b { font-weight: 600; color: var(--ink-muted); font-size: 10.5px; }
.trial-row { display: flex; align-items: center; gap: 8px; }
.trial-row .trial-text { flex: 1; min-width: 0; color: var(--acid); }
.trial-row.done .trial-text { color: var(--ink-muted); }
.trial-check { display: flex; }
.trial-check .g { width: 13px; height: 13px; fill: var(--acid-hot); }
/* settled: a gold chip, not a tick buried in a sentence */
.trial-done {
  flex: 0 0 auto; font-family: var(--display); font-size: 9px; font-weight: 700;
  letter-spacing: .18em; color: #171104; background: linear-gradient(180deg, var(--acid-hot), var(--acid-lo));
  border-radius: 999px; padding: 3px 9px;
}
.trial-sub {
  margin-top: 6px; font-family: var(--flavor); font-style: italic;
  font-size: 13px; color: var(--ink-dim);
}
.trial-streak { color: var(--ink-muted); font-style: normal; font-family: var(--body); font-size: 11.5px; }
.trial-block .rail-h { display: flex; align-items: center; justify-content: space-between; }
/* tracker rows cap their reach so the counts don't ride the pane edge */
#musterRoll { max-width: 780px; }
.m-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.m-label { width: 110px; font-size: 13px; color: var(--ink-muted); }
.m-bar {
  flex: 1; height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
}
.m-fill { display: block; height: 100%; background: color-mix(in srgb, var(--acid) 60%, transparent); }
.m-fill.full { background: var(--acid-hot); }
.m-count { font-size: 12px; color: var(--ink-muted); min-width: 52px; text-align: right; }
.m-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.m-chip {
  border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px;
  font-size: 12.5px; color: var(--ink-muted);
}
.m-chip b { color: var(--ink); margin-left: 4px; }
.m-chip.done { border-color: rgba(212, 168, 67, .5); color: var(--acid); background: rgba(212, 168, 67, .06); }
.m-chip.done b { color: var(--acid-hot); }
.s-table { margin-top: 10px; }
.s-row {
  display: flex; gap: 14px; padding: 8px 12px; font-size: 13.5px;
  border-bottom: 1px solid var(--line); align-items: center;
}
.s-row .s-rank { width: 24px; color: var(--ink-dim); }
.s-row .s-pts { margin-left: auto; color: var(--acid); }
.s-row.me { background: rgba(212, 168, 67, .07); border-left: 2px solid var(--acid); }

/* codex collapsible sections */
.codex-link {
  display: block; margin-bottom: 14px; padding: 16px 18px;
  border: 1px solid rgba(212, 168, 67, .35); border-radius: var(--r-md);
  background: rgba(212, 168, 67, .05); text-decoration: none;
  font-size: 16px; letter-spacing: .06em; color: var(--acid); font-weight: 600;
}
.codex-link span {
  display: block; margin-top: 2px; font-size: 13px; font-weight: 400;
  letter-spacing: .02em; color: var(--ink-muted);
}
.codex-link:hover { border-color: var(--acid); background: rgba(212, 168, 67, .1); }
.codex-sec {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .015); margin-bottom: 14px;
}
.codex-sec summary {
  cursor: pointer; list-style: none; padding: 16px 18px; user-select: none;
  font-size: 16px; letter-spacing: .06em; color: var(--ink-muted); font-weight: 600;
}
.codex-sec summary::-webkit-details-marker { display: none; }
.codex-sec summary::before {
  content: '›'; display: inline-block; margin-right: 12px;
  color: var(--acid); transition: transform .18s ease;
}
.codex-sec[open] summary::before { transform: rotate(90deg); }
.codex-sec summary:hover { color: var(--ink); }
.codex-sec .sec-body { padding: 2px 18px 18px; }

/* deeds of renown */
.deeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.deed {
  display: flex; gap: 12px; align-items: baseline;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px;
  background: rgba(255, 255, 255, .015); opacity: .55;
}
.deed.done { opacity: 1; border-color: rgba(212, 168, 67, .35); background: rgba(212, 168, 67, .05); }
.deed b { font-family: var(--display); font-size: 13.5px; letter-spacing: .04em; }
.deed-mark { color: var(--ink-dim); font-size: 15px; }
.deed.done .deed-mark { color: var(--acid); text-shadow: 0 0 12px rgba(212, 168, 67, .6); }
.deed-desc { font-size: 12px; color: var(--ink-muted); margin-top: 3px; line-height: 1.5; }

.wallet-chip .hint { font-size: 10px; color: var(--ink-dim); letter-spacing: .04em; }

/* champion sigils */
.card-art { width: 46px; height: 46px; color: #e7dcc4; filter: drop-shadow(0 0 12px var(--rc, rgba(0,0,0,.4))); }
.duel-art { width: 30px; height: 30px; }
.prize-art { width: 96px; height: 96px; }

/* ------------------------------------------------------------------
   THE CARD. Framed art, a plate, an aspect rail, a pedigree strip.
   Rank is a MATERIAL (pewter, steel, verdigris, gold), carried by the
   frame's colour and weight, so a Sovereign reads as expensive from
   across the room and a Footman does not.
   ------------------------------------------------------------------ */
.card.cf {
  padding: 0; overflow: hidden; background: var(--panel-solid);
  border: 1px solid color-mix(in srgb, var(--rc) 38%, transparent);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 245, 225, .045), 0 10px 26px -18px #000;
}
.card.cf::before { display: none; }               /* the old top hairline */
.card.cf:hover { transform: translateY(-3px); }
/* frame weight steps with rank; the Sovereign alone is lit */
.card.rank-1 { border-width: 1.5px; }
.card.rank-2 { border-width: 1.5px; border-color: color-mix(in srgb, var(--rc) 52%, transparent); }
.card.rank-3 {
  border-width: 2px; border-color: color-mix(in srgb, var(--rc) 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 245, 225, .07), 0 0 34px -14px var(--rc), 0 12px 30px -18px #000;
}
.card.rank-3:hover { box-shadow: inset 0 1px 0 rgba(255,245,225,.09), 0 0 46px -12px var(--rc), 0 18px 40px -20px #000; }

.cf-art {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 18%, #241c14, #100d0a 70%);
  border-bottom: 1px solid color-mix(in srgb, var(--rc) 30%, transparent);
}
.cf-art .ac-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cf-sigil { position: absolute; inset: 0; display: grid; place-items: center; }
.cf-sigil .card-art { width: 58%; height: 58%; }
/* vignette: depth, and it keeps the medallion legible over any art */
.cf-vign {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(115% 88% at 50% 34%, transparent 44%, rgba(11,10,8,.62) 100%),
    linear-gradient(180deg, rgba(11,10,8,.5) 0%, transparent 26%, transparent 74%, rgba(11,10,8,.55) 100%);
}
.cf-rank {
  position: absolute; top: 8px; left: 9px; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: 8.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--rc);
  padding: 3px 7px; border-radius: 4px;
  background: rgba(11, 10, 8, .74); border: 1px solid color-mix(in srgb, var(--rc) 46%, transparent);
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
/* power: one number, monospaced, always the same corner */
.cf-med {
  position: absolute; top: 7px; right: 8px; z-index: 2;
  display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 6px;
  border-radius: 20px; background: rgba(11, 10, 8, .82);
  border: 1px solid color-mix(in srgb, var(--rc) 62%, transparent);
}
.cf-med .g { width: 10px; height: 10px; fill: var(--rc); }
.cf-med b { font-family: var(--data); font-weight: 700; font-size: 13px; color: var(--ink); }

.cf-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.cf-name {
  font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.16;
  letter-spacing: .005em;
}
.cf-type {
  font-size: 8.5px; letter-spacing: .19em; text-transform: uppercase;
  font-weight: 600; color: var(--rc);
}

.cf-rail {
  display: flex; border: 1px solid var(--line); border-radius: 7px;
  background: rgba(11, 10, 8, .5); overflow: hidden;
}
.cf-cell {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 0;
}
.cf-cell + .cf-cell { border-left: 1px solid var(--line); }
.cf-cell .g { width: 11px; height: 11px; fill: var(--ink-dim); }
.cf-cell b { font-family: var(--data); font-weight: 700; font-size: 13px; color: var(--ink); }

.cf-flavor {
  font-family: var(--flavor); font-style: italic; font-size: 13px; line-height: 1.42;
  /* tokenized: the old literal #9d9384 read at ~2:1 on light-theme card faces */
  color: var(--ink-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* every card reserves its action row, so a delving champion and one with
   Ember to claim still line up in the grid */
.card.cf .cf-acts { margin-top: auto; min-height: 40px; }
.card.cf .cf-state { min-height: 40px; display: flex; align-items: center; justify-content: center; }
.cf-ped {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px solid var(--line);
  font-family: var(--data); font-size: 10px; color: var(--ink-dim);
}
.cf-ped span { display: inline-flex; align-items: center; gap: 4px; }
.cf-ped .g { width: 9px; height: 9px; fill: var(--ink-faint); }
.cf-state {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-muted);
}
.cf-state .g { width: 12px; height: 12px; fill: var(--acid); flex: 0 0 auto; }

/* one primary, the rest behind the overflow */
.cf-acts { display: flex; gap: 7px; align-items: stretch; margin-top: auto; padding-top: 9px; }
.cf-primary {
  flex: 1; cursor: pointer; border: none; border-radius: 9px; padding: 10px 0;
  font-family: var(--display); font-weight: 700; font-size: 11.5px; letter-spacing: .15em;
  color: #171104; background: linear-gradient(180deg, var(--acid-hot), var(--acid-lo));
  box-shadow: 0 0 20px -8px rgba(212, 168, 67, .5);
}
.cf-primary:hover { filter: brightness(1.06); }
.cf-primary:disabled { filter: grayscale(.6) brightness(.62); cursor: default; box-shadow: none; }
.cf-ovf { position: relative; flex: 0 0 auto; }
.cf-ovf > summary {
  list-style: none; width: 38px; height: 100%; min-height: 38px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; background: var(--raised);
  display: grid; place-items: center;
}
.cf-ovf > summary::-webkit-details-marker { display: none; }
.cf-ovf > summary .g { width: 15px; height: 15px; fill: var(--ink-muted); }
.cf-ovf > summary:hover { border-color: var(--line-hi); }
.cf-ovf > summary:hover .g { fill: var(--ink); }
.cf-ovf[open] > summary { border-color: var(--acid); background: #241c10; }
.cf-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 6; min-width: 132px;
  display: flex; flex-direction: column; gap: 6px; padding: 8px;
  border: 1px solid var(--line-hi); border-radius: 10px; background: #17140f;
  box-shadow: 0 18px 40px -12px #000;
}
.cf-menu .mini-btn { width: 100%; }

.row-thumb { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; display: block; }

.prize-card.art-reveal {
  position: relative; width: 300px; aspect-ratio: 7 / 9.5; padding: 0; overflow: hidden;
  text-align: left; background: #14100c;
}
.art-reveal .ac-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-reveal .ac-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,10,8,.25) 0%, transparent 22%, transparent 52%, rgba(11,10,8,.88) 76%, rgba(11,10,8,.96) 100%);
}
.art-reveal .ac-top { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.art-reveal .ac-bottom { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.art-reveal .ac-name { font-size: 19px; }
.art-reveal .ac-power { font-size: 15px; }
.art-reveal .ac-station { font-size: 11px; }
.art-reveal .ac-flavor { font-size: 12.5px; -webkit-line-clamp: 3; }

/* promptless session */
.session-box {
  max-width: 360px; margin: 18px auto 4px; text-align: left;
  border: 1px solid rgba(212, 168, 67, .3); border-radius: var(--r-md);
  background: rgba(212, 168, 67, .05); padding: 14px 16px;
}
.session-box b { font-size: 14px; }
.session-box p { margin: 6px 0 12px; font-size: 12px; color: var(--ink-muted); line-height: 1.55; }
.session-box .mini-btn { margin-right: 8px; }

.wallet-area { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 1; justify-content: flex-end; }
/* the mode is already shown by the session button: the hint only cost space */
.wallet-chip .hint { display: none; }
/* the chip is never cut: long banner names ellipsize inside their own cap,
   and everything AROUND the chip gives way first (short labels, hidden icons) */
.wallet-chip.as-btn { flex-shrink: 0; }
.wallet-chip #walletAddr { max-width: 150px; }
.header-session .hs-s { display: none; }
/* (the old 1240px blanket that forced the short label is gone: the header
   measures itself now, and body.hdr-compact trims the label only when the
   chips genuinely do not fit) */
.header-session { white-space: nowrap; flex-shrink: 0; position: relative; }
.header-session.active { background: none; color: var(--acid); border: 1px solid rgba(212, 168, 67, .4); }

/* first-connect nudge: point new players at quick play, then fade out */
.header-session.beckon { animation: qpBeckon 2.2s ease-in-out infinite; }
@keyframes qpBeckon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0), 0 6px 16px -6px rgba(212, 168, 67, .45); }
  50% { box-shadow: 0 0 0 3px rgba(212, 168, 67, .18), 0 0 22px -2px rgba(212, 168, 67, .7); }
}
.header-session.beckon::after {
  content: 'RECOMMENDED';
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-size: 8.5px; letter-spacing: .16em; font-weight: 700;
  color: #0b0a08; background: linear-gradient(180deg, #e2b44d, #c89a35);
  padding: 3px 8px; border-radius: 5px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 12px -3px rgba(0, 0, 0, .5);
}
@media (prefers-reduced-motion: reduce) {
  .header-session.beckon { animation: none; box-shadow: 0 0 18px -4px rgba(212, 168, 67, .7); }
}
/* tighter widths: drop the advisory hint first (balance keeps its tooltip) */
@media (max-width: 820px) { .wallet-chip .hint { display: none; } }
/* below this the header genuinely can't fit one row — stack cleanly: icons
   with the brand row, then session button and chip SHARING one full row */
.wa-break { display: none; }
/* the tool icons live inside the wallet cluster on desktop; on narrow
   screens they lift out and sit beside the logo instead */
.hdr-tools { display: contents; }
@media (max-width: 860px) {
  header.top { flex-wrap: wrap; position: relative; }
  .wallet-area { flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  /* flex-basis 0: with wrap enabled, line-breaking uses the chip's NATURAL
     width (pre-shrink), so basis auto shoved it onto its own line whenever
     name + balance ran long. Basis 0 keeps it beside the session button and
     lets the name ellipsize instead. */
  .wallet-chip.as-btn { flex: 1 1 0; min-width: 0; }
  .hdr-tools { display: flex; gap: 8px; position: absolute; right: 0; top: 4px; }
  /* session button and chip together on their own full row */
  .wa-break { display: block; flex-basis: 100%; height: 0; }
  /* the wrapped row has a full width again: say SESSION ACTIVE, not SESSION
     (short labels only serve the tight single-row band above this width) */
  .header-session .hs-l { display: inline; }
  .header-session .hs-s { display: none; }
}
@media (max-width: 600px) {
  /* ...but on a phone the long label plus the address floor overran the
     row by a hair and stacked the pair again: short label, smaller floor.
     This block must FOLLOW the 860px one — same specificity, cascade wins. */
  .header-session .hs-l { display: none; }
  .header-session .hs-s { display: inline; }
  .wallet-chip #walletAddr { min-width: 48px; }
}

/* beckon: draw the eye to the wallet chip until a wallet is sworn */
.wallet-chip.beckon {
  border-color: rgba(212, 168, 67, .55);
  color: var(--ink);
  animation: beckonGlow 2.4s ease-in-out infinite;
}
@keyframes beckonGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0), 0 0 14px -6px rgba(212, 168, 67, .35); }
  50% { box-shadow: 0 0 0 3px rgba(212, 168, 67, .12), 0 0 22px -4px rgba(212, 168, 67, .6); }
}
@media (prefers-reduced-motion: reduce) {
  .wallet-chip.beckon { animation: none; box-shadow: 0 0 18px -6px rgba(212, 168, 67, .5); }
}

/* no wallet yet? store links in the connect modal */
.get-wallet {
  margin-top: 18px; font-size: 12.5px; color: var(--ink-dim);
  line-height: 1.7; max-width: 360px; margin-left: auto; margin-right: auto;
}
.get-wallet a { color: var(--acid); text-decoration: none; border-bottom: 1px solid rgba(212, 168, 67, .35); }
.get-wallet a:hover { border-bottom-color: var(--acid); }
.gw-lead { color: var(--ink-muted); }
.gw-note { font-size: 11px; }

/* walletconnect: mobile layout */
@media (pointer: coarse) and (max-width: 700px) {
  #wcQr { display: none; }  /* the wallet is on this device; a QR helps nobody */
  /* MetaMask Snaps only exist in the desktop extension */
  .connect-opt[data-wallet="snap"] { display: none; }
}

/* walletconnect pairing code: copy button */
#wcCopyBtn { margin-top: 10px; }

/* session funding: scannable address for a phone wallet's send screen */
#fundQr { display: block; margin: 12px auto 10px; border-radius: 8px; }
.wc-copied {
  font-size: 12px; color: var(--acid); letter-spacing: .06em; margin-top: 6px;
  opacity: 0; transition: opacity .3s ease;
}
.wc-copied.show { opacity: 1; }

/* the reveal key, sized to be read off one screen and typed into another */
.reveal-key {
  margin: 16px auto 10px; max-width: 320px; padding: 12px 14px;
  background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 7px;
  font-family: var(--data); font-size: 16px; letter-spacing: .08em;
  color: var(--acid); word-break: break-all; user-select: all;
}

/* ---------------- phones ---------------- */
button, .card, .tab { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.temper-opts { flex-wrap: wrap; }
.duel-info { flex: 1; min-width: 0; }
.pick-cards { max-width: 100%; }

@media (max-width: 600px) {
  main { padding-left: 14px; padding-right: 14px; }
  .brand { gap: 10px; }
  .brand .mark, .brand .mark img { width: 34px; height: 34px; }
  .wordmark { font-size: 18px; }
  .tour-btn { padding: 7px 10px; font-size: 11px; }
  .header-session { font-size: 11px; padding: 7px 10px; }
  /* the chip slims down so it and the session button share one row */
  .wallet-chip { font-size: 11px; padding: 6px 11px; gap: 7px; }
  .wallet-chip #walletAddr { min-width: 60px; }

  .machine-panel { padding: 22px 16px 26px; gap: 22px; margin-top: 24px; }
  .pull-col h1 { font-size: 30px; }
  .machine.showcase { height: 380px; max-width: 270px; }

  .tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 2px; margin-top: 30px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; padding: 12px 11px; font-size: 13px; letter-spacing: .06em; }

  .stats-row { grid-template-columns: 1fr 1fr; }
  .stats-row .stat { border-left: 1px solid var(--line); border-top: 1px solid var(--line); padding: 12px 14px; }
  .stats-row .stat:nth-child(odd) { border-left: none; }
  .stats-row .stat:nth-child(-n+2) { border-top: none; }
  .stat .v { font-size: 16px; }

  .duel { flex-wrap: wrap; padding: 12px 14px; gap: 12px; }
  /* the action used to hang off the right edge on a line of its own, out of
     line with the full-width bet buttons above it: give it that width too.
     (the old rule was a descendant selector, so it caught the BACK buttons.) */
  .duel > .mini-btn, .duel > .duel-done { flex: 1 1 100%; margin-left: 0; }
  .duel > .duel-done { text-align: center; }

  .toasts { left: 12px; right: 12px; max-width: none; }

  .overlay-inner { padding: 18px 12px; width: 100%; }
  .prize-card { width: min(300px, 86vw); }
  .prize-card:not(.art-reveal) { min-height: 360px; }

  .shelf { padding: 18px 0 0; }
  .lore { padding-left: 14px; }
  .sec-body { padding: 2px 12px 14px; }

  /* champions ride side by side; swipe between them (next one peeks in) */
  .cards {
    display: flex; gap: 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: -14px; margin-right: -14px;
    /* overflow-x:auto clips vertically too: the frame ring and selection
       outline need headroom or the card's top edge is shaved off */
    padding: 10px 14px 12px;
  }
  .cards::-webkit-scrollbar { display: none; }
  /* the picker dialog keeps its vertical grid: the swipe-row treatment
     above gave it a sideways scrollbar inside the overlay */
  .cards.pick-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 196px));
    justify-content: center;
    overflow-x: hidden; scroll-snap-type: none;
    margin: 16px auto; padding: 2px;
  }
  .cards.pick-cards > * { flex: none; }
  .cards > * { flex: 0 0 min(240px, 72vw); scroll-snap-align: center; }
}

/* six tabs since Progress joined: compress the header nav on phones so the
   whole row fits a 375px screen without scrolling */
@media (max-width: 640px) {
  /* space-between hands any leftover row width to the gaps: wider phones
     get air between the names, 375 is unchanged, and one line survives
     every width by construction */
  header.top .tabs { gap: 0; justify-content: space-between; }
  /* The six names at 12px measure ~323px plus 24px padding against a
     100vw-28px row, so the biggest type that never scrolls is a function
     of the screen: 3.7vw-1.9px lands on 12px at 375 (iPhone SE keeps
     today's fit exactly) and ~12.6-14px on wider phones, spending the
     free space the user sees there. Dim ink was unreadable on the light
     gold, so the row also gets full-strength ink. */
  header.top .tab { padding: 8px 2px; font-size: clamp(12px, 3.7vw - 1.9px, 15px); letter-spacing: 0; color: var(--ink-muted); font-weight: 600; }
  header.top .tab.active { color: var(--acid); border-bottom-width: 3px; }
}

/* once today's trial is done it stops being a call to action: on the
   one-column layout it steps down to just below the world feed. The aside
   dissolves (display: contents) so the brazier and the trial block order
   themselves as grid items; desktop keeps them stacked in the rail. */
@media (max-width: 1290px) {
  .rail-summon { display: contents; }
  .rail-summon .brazier { order: 1; }
  .rail-summon .trial-block { order: 1; }
  body.trial-cleared .rail-summon .trial-block { order: 4; }
}

/* LIGHT MODE: not white — the realm by day, gold parchment under dark ink.
   Token-level override; dark stays the default for new players. */
body.theme-light {
  --bg: #e4c165;
  --panel: rgba(255, 252, 240, .38);
  --panel-solid: #eeddb4;
  --raised: #e9d5a6;
  --line: rgba(63, 46, 14, .22);
  --line-hi: #96762f;
  --ink: #251a07;
  --ink-muted: #46370f;
  --ink-dim: #59481a;
  --ink-faint: #6f5c28;
  --acid: #7c5312;
  --acid-hot: #5f3e0b;
  --acid-lo: #966b1c;
  background: linear-gradient(180deg, #f2dc9e, #e6c268 46%, #d4a843);
  background-attachment: fixed;
}
body.theme-light .grid-bg::after { opacity: .35; }
body.theme-light .glow { opacity: .35; }
body.theme-light::after { opacity: .04; }
/* chips and buttons that hard-code the night palette */
body.theme-light .hdr-chips .stat { background: rgba(255, 250, 235, .45); }
body.theme-light .mini-btn.alt { color: var(--ink); }
/* The page is centered, so the sticky header ends at main's edge and the
   gutter showed the page gradient beside it. Side shadows were the wrong
   tool: a shadow is the border box SHIFTED, so at -100vw a header narrower
   than the viewport lands its right edge off-screen and the gutter stayed
   bare. A band behind the header instead — absolute, inset horizontally by
   a viewport each way, so it matches the header's height exactly however
   the header wraps. */
body.theme-light header.top { background: transparent; box-shadow: none; }
body.theme-light header.top::before {
  content: ''; position: absolute; inset: 0 -100vw; z-index: -1;
  background: #f0dc9e;
  border-bottom: 1px solid var(--line);
}
body.theme-light .brand .mark { filter: drop-shadow(0 4px 12px rgba(95, 62, 11, .35)); }
/* text that sits on the always-dark art keeps night ink */
body.theme-light .cf-med b { color: #f4efe6; }
body.theme-light .ds-name { color: #f4efe6; }
body.theme-light .ds-type { color: rgba(244, 239, 230, .78); }
body.theme-light .cf-menu {
  background: #f0e2ba; border-color: var(--line-hi);
  box-shadow: 0 18px 40px -12px rgba(63, 46, 14, .5);
}
body.theme-light .cf-ovf[open] > summary { background: #e6d3a2; }
/* gold chips with baked-in dark text keep the night golds */
body.theme-light .trial-done, body.theme-light .cf-primary {
  background: linear-gradient(180deg, #e8be55, #c79430);
}
/* on parchment the done-tint disappears: earned deeds get a solid card
   and a bronze spine, unearned ones ghost harder */
body.theme-light .deed { background: rgba(255, 252, 240, .28); opacity: .48; }
body.theme-light .deed.done {
  opacity: 1; border-color: rgba(124, 83, 18, .5);
  background: rgba(255, 252, 240, .62);
  box-shadow: inset 3px 0 0 var(--acid);
}
body.theme-light .toast {
  background: #f3e6c0;
  box-shadow: 0 14px 40px -12px rgba(63, 46, 14, .45);
}
/* always-dark islands (the brazier, every overlay dialog) get the night
   tokens back wholesale, so their contents need no per-element fixes */
body.theme-light .brazier, body.theme-light .overlay, body.theme-light #tourTip {
  --bg: #0b0a08;
  --ink: #f4efe6; --ink-muted: #b5ab99; --ink-dim: #a89d89; --ink-faint: #8a8172;
  --acid: #d4a843; --acid-hot: #e8be55; --acid-lo: #c79430;
  --panel: rgba(255, 250, 240, .035); --panel-solid: #15130f; --raised: #1e1a14;
  --line: rgba(255, 245, 230, .09); --line-hi: #3a3125;
  color: var(--ink);
}

.err-emoji .g { width: 34px; height: 34px; fill: var(--ember); }

/* while the wallet restores, phones hear it at the top of the page — the
   tab's own empty line sits below the brazier, out of the first screen */
.connecting-note {
  display: none; text-align: center; font-size: 13px; color: var(--ink-muted);
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel); margin-bottom: 14px;
}
@media (max-width: 1290px) { .connecting-note:not([hidden]) { display: block; } }

/* a session key the current realm never bound: loud, on every width */
.stale-note:not([hidden]) { display: block; border-color: var(--acid); color: var(--ink); }

/* spectator's card detail: just the share glyph, no sticky band */
.ds-acts.ds-acts-min { position: static; background: none; justify-content: center; }

/* the wallet lives on the same device here, so there is nothing to scan:
   the QR and its instruction give way to the copy-paste line */
.wc-hint-copy { display: none; }
@media (pointer: coarse) {
  #wcQr, .wc-hint-scan { display: none; }
  .wc-hint-copy { display: block; }
}

/* Brand, six tabs, chips, four tools, quick play and the wallet chip all
   want the same row, and the chip row was what gave — renown and level fell
   off it. Everything AROUND the chips gives way first now: fitHeaderChips
   adds .hdr-compact when they do not fit, which tightens the chips, narrows
   the tool buttons and swaps QUICK PLAY for PLAY (~100px, more than the
   three chips need). Only if that is still short does a chip drop. Measured
   rather than guessed at a breakpoint, so a long banner name or a fifth
   tool cannot silently cost a chip again. */
body.hdr-compact .hdr-chips { gap: 3px; }
body.hdr-compact .hdr-chips .stat { padding: 4px 6px; gap: 4px; }
body.hdr-compact .hdr-chips .v { font-size: 12px; }
body.hdr-compact header.top .hdr-tools > .mini-btn { padding: 8px 9px; }
body.hdr-compact .header-session .hs-l { display: none; }
body.hdr-compact .header-session .hs-s { display: inline; }

/* Touch targets: the header tools and tabs are ~34px tall, under the 44px
   guideline. Fingers get the room; mice keep the compact header. */
@media (pointer: coarse) {
  header.top .hdr-tools > .mini-btn { min-height: 44px; min-width: 44px; }
  header.top .tab { padding-top: 13px; padding-bottom: 13px; }
  .site-foot a { display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; }
  /* the policy applied per-complaint before; these were still finger-hostile */
  .toast .t-x, .tour-x { min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; }
  .cf-ovf summary { min-width: 44px; min-height: 44px; }
  .writ-tiers .mini-btn { padding-top: 10px; padding-bottom: 10px; }
  .feed-panel > summary { min-height: 44px; display: flex; align-items: center; }
}

/* The layout is the frame, not a canvas to drag around. A phone could pinch
   and pan off the side of the page, which reads as a broken app; nothing here
   is meant to be scrolled sideways. Vertical scrolling and the browser's own
   accessibility zoom both still work. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
@media (pointer: coarse) {
  body { touch-action: pan-y; }
}
/* nothing wider than the screen, whatever it holds */
.cards, .shelf, .rail, .rail-block, .feed-panel, .lore { max-width: 100%; }
.cards { grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); }