/* GILDED CODEX (chosen direction). A bestiary written by hand: aged vellum leaves in antique-gold frames,
   laid on soft leather. Titles are rubricated (muted red ink, lapis initials), tabs are vellum index tabs,
   buttons are tooled leather and dull red wax. Tuned for long idle sessions: dim warm vellum, low panel-to-page
   contrast, quiet grain, matte gold, softened ink. The hunt map stays the brightest thing on screen.
   Every colour lives in the tokens below. Art: public/themes/codex/*.svg (scripts/theme-art.ts). */

:root[data-theme="codex"] {
  /* Region inks: Midgard default; Hellas and Yomi below. */
  --rg-ink: #2c4766; --rg-rubric: #77291f; --rg-gild: #a08455;
  /* Leather (page, bars) */
  --leather: #3a2b1f; --leather-hi: #46352a; --leather-lo: #2f2219; --cream: #dccbaa; --cream-2: #b3a083;
  /* Vellum (panels): dim, warm, low contrast against the leather */
  --vellum-hi: #d6c5a1; --vellum: #cab68e; --vellum-lo: #c3ae86;
  --inlay: rgba(244, 233, 205, .26); --inlay-hi: rgba(244, 233, 205, .42);
  /* Rules and gilt: matte antique gold */
  --rule: #8c7350; --rule-soft: rgba(140, 115, 80, .45); --gilt: #b39a66; --gilt-hi: #c9b282; --gilt-lo: #7e6440;
  --edge: #3a2a1c;
  /* Ink: softened brown-black. Every text colour keeps AA (4.5:1) on the vellum mid-tone and lighter inlays. */
  --ink-v: #33261a; --muted-v: #45372a; --faint-v: #4d3e30;
  --ink: var(--ink-v); --muted: var(--muted-v); --faint: var(--faint-v);
  /* Ink on leather (full pages): cream inks and a pale lapis for links, all above 4.5:1 on the leather. */
  --ink-l: #e2d2b0; --muted-l: #c4b292; --faint-l: #ac9a7e; --accent-l: #a9bfda;
  --bg: var(--leather); --panel: var(--vellum); --panel-2: var(--vellum-hi); --panel-3: var(--vellum-lo); --line: var(--rule); --line-2: var(--rule);
  --accent: var(--rg-ink); --gold: #c9a95e; --warn: #5e3f0e; --good: #285020; --bad: var(--rg-rubric);
  --pixel: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif; --sans: 'Crimson Pro', Georgia, serif;
  --display: 'Cormorant Garamond', Georgia, serif;
  --btn-face: linear-gradient(180deg, #5c4030 0, #4a3324 60%, #3f2b1e 100%);
  --wax: linear-gradient(180deg, #96483a 0, var(--rg-rubric) 55%, #6a2a20 100%);
  scrollbar-color: var(--rule) var(--leather-lo);
}
:root[data-theme="codex"][data-region="hellas"] { --rg-ink: #2c4c6c; --rg-rubric: #6e3219; --rg-gild: #a8884e; }
:root[data-theme="codex"][data-region="yomi"] { --rg-ink: #1f4c49; --rg-rubric: #7a2a26; --rg-gild: #a08455; }

[data-theme="codex"] body {
  color: var(--cream); font-size: 15px; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1;
  background: radial-gradient(ellipse at 50% 30%, rgba(90, 66, 46, .4), transparent 70%), url(codex/leather.svg) 0 0 / 260px, var(--leather);
}
[data-theme="codex"] h1, [data-theme="codex"] h2, [data-theme="codex"] h3 { font-family: var(--display); font-weight: 700; letter-spacing: .01em; }

/* ---------- Leather spine with vellum index tabs ---------- */
[data-theme="codex"] .appbar {
  height: 58px; gap: 16px; border-bottom: 0;
  background: url(codex/leather.svg) 0 0 / 260px, linear-gradient(180deg, var(--leather-hi), var(--leather-lo));
  box-shadow: inset 0 -2px 0 var(--edge), inset 0 -3px 0 var(--rule-soft), 0 3px 10px rgba(0, 0, 0, .35);
}
[data-theme="codex"] .appbar .brand { font: italic 700 25px/1 var(--display); color: var(--gilt-hi); text-shadow: 0 1px 0 var(--edge); }
[data-theme="codex"] .nav { align-self: stretch; align-items: flex-end; gap: 2px; padding-bottom: 3px; }
[data-theme="codex"] .nav > a, [data-theme="codex"] .navmore > button {
  height: 33px; padding: 0 13px; border-radius: 6px 6px 0 0; font: 700 15.5px/1 var(--pixel); letter-spacing: .03em; color: var(--ink);
  background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, #a8946f, #978260);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 1px rgba(230, 215, 180, .25);
}
[data-theme="codex"] .nav > a:hover, [data-theme="codex"] .navmore > button:hover { color: var(--ink); background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, #b8a47e, #a8946f); }
[data-theme="codex"] .nav > a.on, [data-theme="codex"] .navmore > button.on {
  height: 39px; color: var(--rg-rubric);
  background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, var(--vellum-hi), var(--vellum));
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 3px 0 0 var(--gilt);
}
[data-theme="codex"] .trainer { border: 0; border-radius: 3px; background: rgba(20, 12, 6, .35); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 1px var(--rule-soft); color: var(--cream); }
[data-theme="codex"] .trainer b { font-weight: 700; }
[data-theme="codex"] .cur { color: var(--cream); font-weight: 700; font-size: 15px; }
[data-theme="codex"] .players { color: var(--cream-2); }
[data-theme="codex"] .mini-xp, [data-theme="codex"] .thin, [data-theme="codex"] .bar {
  border: 0; border-radius: 2px; background: #3a2c20; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 1px var(--rule-soft);
}
[data-theme="codex"] .mini-xp i, [data-theme="codex"] .bar.xp > i, [data-theme="codex"] .thin.xp i, [data-theme="codex"] .bar.thin.xp > i { background: linear-gradient(180deg, #6f8fb4, #4a6a92 55%, #3a5578); }
[data-theme="codex"] .bar.hp > i, [data-theme="codex"] .thin.hp i, [data-theme="codex"] .bar.thin.hp > i { background: linear-gradient(180deg, #6f9450, #4a7032 55%, #37552a); }
/* bar labels sit on any fill (green, blue, parchment): a 1 px ink outline keeps them readable on all of them */
[data-theme="codex"] .bar > span { font-family: var(--sans); font-weight: 700; color: #fbf3e2; text-shadow: 0 1px 0 #24180c, 0 -1px 0 #24180c, 1px 0 0 #24180c, -1px 0 0 #24180c, 0 1px 2px rgba(30, 20, 10, .8); }
[data-theme="codex"] .iconbtn, [data-theme="codex"] .avatar { border: 0; border-radius: 3px; color: var(--edge); background: linear-gradient(180deg, var(--gilt-hi), var(--gilt) 55%, var(--gilt-lo)); box-shadow: 0 0 0 1px var(--edge); }
[data-theme="codex"] .avatar { border-radius: 50%; font: 700 17px var(--display); color: #f0e2cc; background: var(--wax); box-shadow: 0 0 0 1px var(--edge), 0 0 0 3px var(--gilt), 0 0 0 4px var(--edge); }

/* ---------- Buttons: tooled leather with a thin gilt fillet; the call to action is dull red wax ---------- */
[data-theme="codex"] .btn, [data-theme="codex"] .huntcard .seg button.btn {
  border: 0; border-radius: 3px; padding: 6px 13px; color: #eadbbd; font: 700 13.5px var(--sans); letter-spacing: .01em;
  background: var(--btn-face); box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 2px rgba(179, 154, 102, .55), 0 2px 0 var(--edge);
  transition: transform .04s;
}
/* Item icons inside buttons (e.g. the creature page's Rune Tablet card) sit on the text line. */
[data-theme="codex"] .btn .ico16 { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; image-rendering: pixelated; }
[data-theme="codex"] .btn:hover:not(:disabled) { border: 0; filter: brightness(1.1); }
[data-theme="codex"] .btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 2px rgba(179, 154, 102, .45), inset 0 2px 4px rgba(0, 0, 0, .45); }
[data-theme="codex"] .btn.primary { font: 700 13.5px/1.1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #f2e4cc; background: var(--wax); }
[data-theme="codex"] .btn.primary:disabled { opacity: 1; color: #6e5c46; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule); }
[data-theme="codex"] .btn:disabled { opacity: .55; }
[data-theme="codex"] .btn.small { padding: 4px 10px; font-size: 13px; }
[data-theme="codex"] .btn.tiny { padding: 2px 8px; font-size: 12px; box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 2px rgba(179, 154, 102, .45), 0 1px 0 var(--edge); }
[data-theme="codex"] kbd { border: 0; border-radius: 2px; background: rgba(244, 233, 205, .12); box-shadow: inset 0 0 0 1px rgba(179, 154, 102, .55); color: inherit; font-family: var(--sans); }

[data-theme="codex"] input, [data-theme="codex"] select {
  border: 0; border-radius: 2px; color: var(--ink); background-color: var(--inlay-hi); font-family: var(--sans); font-weight: 500;
  box-shadow: inset 0 1px 2px rgba(60, 40, 20, .3), 0 0 0 1px var(--rule);
}
[data-theme="codex"] select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0h10L5 7z' fill='%2377291f'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
[data-theme="codex"] .auto .line select, [data-theme="codex"] .arow select { padding: 0 24px 0 8px; }
[data-theme="codex"] input::placeholder { color: var(--faint); }
[data-theme="codex"] input[type=checkbox] { accent-color: var(--rg-rubric); }
[data-theme="codex"] input.toggle { width: 36px; height: 18px; border-radius: 9px; background: #a8946f; box-shadow: inset 0 1px 2px rgba(60, 40, 20, .45), 0 0 0 1px var(--rule); }
[data-theme="codex"] input.toggle::after { top: 1px; left: 1px; width: 16px; height: 16px; background: radial-gradient(circle at 38% 32%, var(--gilt-hi), var(--gilt) 60%, var(--gilt-lo)); box-shadow: 0 0 0 1px var(--edge); }
[data-theme="codex"] input.toggle:checked { background: var(--rg-ink); box-shadow: inset 0 1px 2px rgba(0, 0, 20, .4), 0 0 0 1px var(--edge); }
[data-theme="codex"] input.toggle:checked::after { left: 19px; }

/* ---------- Vellum leaves in antique-gold frames ---------- */
[data-theme="codex"] .panel, [data-theme="codex"] .dialog, [data-theme="codex"] .menu, [data-theme="codex"] .ov, [data-theme="codex"] .session {
  color: var(--ink); border: 7px solid transparent; border-radius: 0;
  border-image: url(codex/frame.svg) 20 / 22px stretch;
  background: url(codex/vellum.svg) 0 0 / 300px, radial-gradient(ellipse at 50% 35%, var(--vellum-hi) 0, var(--vellum) 60%, var(--vellum-lo) 100%);
  box-shadow: inset 0 0 16px rgba(90, 60, 25, .18), 0 4px 12px rgba(0, 0, 0, .35);
  backdrop-filter: none;
}
[data-theme="codex"] .game { gap: 10px; padding: 10px; }
[data-theme="codex"] .lcol, [data-theme="codex"] .rcol { gap: 8px; }
[data-theme="codex"] .phead { padding: 6px 12px 10px; margin-bottom: 3px; background: url(codex/flourish.svg) center bottom / 140px 9px no-repeat; }
[data-theme="codex"] .panel h4, [data-theme="codex"] .questsum .qs-head b { font: 700 18px/1 var(--pixel); letter-spacing: .04em; text-transform: none; color: var(--rg-rubric); }
[data-theme="codex"] .panel h4::first-letter, [data-theme="codex"] .questsum .qs-head b::first-letter { color: var(--rg-ink); font-size: 1.22em; }
[data-theme="codex"] .phead .count { color: var(--muted); font: 600 14px var(--sans); }
[data-theme="codex"] .link { color: var(--rg-ink); font: italic 600 14px var(--sans); }
[data-theme="codex"] .panel .hint, [data-theme="codex"] .rail-foot, [data-theme="codex"] .auto .hint, [data-theme="codex"] .auto .foot { color: var(--muted); font-style: italic; }
[data-theme="codex"] .muted, [data-theme="codex"] .huntcard .muted { color: var(--muted); }

/* Team: each creature in a ruled miniature box, the lead framed in gilt with a rubric bookmark.
   Compact enough that all five fit at 1440x900. Sprite rules stay with the art thread. */
[data-theme="codex"] .slot {
  margin: 0 8px 5px; padding: 6px 9px; border: 0; border-radius: 1px; background: var(--inlay);
  box-shadow: inset 0 0 0 1px var(--rule-soft);
}
[data-theme="codex"] .slot:hover { background: var(--inlay-hi); }
[data-theme="codex"] .slot.lead { background: radial-gradient(ellipse at 20% 30%, rgba(236, 220, 180, .45), transparent 60%), var(--inlay); box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px var(--gilt), inset 0 0 0 3px rgba(126, 100, 64, .6); }
[data-theme="codex"] .slot.lead::before { content: ''; position: absolute; top: -2px; right: 34px; width: 9px; height: 18px; background: var(--rg-rubric); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
[data-theme="codex"] .slot .r1 .nm { font: 700 16px/1.1 var(--display); color: var(--ink); }
[data-theme="codex"] .slot .r2 { margin: 1px 0 2px; }
[data-theme="codex"] .slot .r2, [data-theme="codex"] .slot .eta, [data-theme="codex"] .lv { color: var(--muted); }
[data-theme="codex"] .slot .eta { font-size: 12.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="codex"] .slot .bar.big { height: 15px; margin-top: 3px; }
[data-theme="codex"] .slot .bar.big > span { line-height: 15px; }
[data-theme="codex"] .slot .movebar { margin-top: 5px; }
[data-theme="codex"] .slot.empty { background: none; box-shadow: none; border: 1px dashed var(--rule); color: var(--muted); font-style: italic; }
/* The rule sentence moves to the wiki; the panel keeps its five creatures in view. */
[data-theme="codex"] .panel.team .rail-foot { display: none; }

[data-theme="codex"] .pill, [data-theme="codex"] .chip { border: 0; border-radius: 2px; background: rgba(80, 55, 30, .08); color: var(--ink); font: 700 11.5px var(--sans); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .pill.lead { color: #f2e4cc; background: var(--rg-rubric); box-shadow: none; }
[data-theme="codex"] .pill.good { color: var(--good); background: rgba(60, 106, 42, .1); box-shadow: inset 0 0 0 1px rgba(60, 106, 42, .45); }
[data-theme="codex"] .pill.bad, [data-theme="codex"] .chip.bad { color: var(--rg-rubric); background: rgba(138, 58, 46, .08); box-shadow: inset 0 0 0 1px rgba(138, 58, 46, .45); }
[data-theme="codex"] .el { border-radius: 2px; height: 18px; font: 700 11.5px var(--sans); letter-spacing: .02em; filter: saturate(.72) brightness(.94); box-shadow: inset 0 0 0 1px rgba(51, 38, 26, .55); }
[data-theme="codex"] .gr { border-radius: 50%; filter: saturate(.75); box-shadow: inset 0 0 0 1px rgba(51, 38, 26, .55); font-family: var(--sans); font-weight: 800; }
[data-theme="codex"] .gr.c { color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--rule); }
[data-theme="codex"] .crest.b2 { color: #3f7a3a; } [data-theme="codex"] .crest.b3 { color: #3a5f96; } [data-theme="codex"] .crest.b4 { color: #6a4a96; } [data-theme="codex"] .crest.b5 { color: #9a5a24; }
[data-theme="codex"] .aura-tag { filter: saturate(.8); box-shadow: inset 0 0 0 1px var(--gilt-lo); }
[data-theme="codex"] .movebar .mv { background: radial-gradient(circle at 40% 32%, #4a3a2c, #2a1f16 75%); box-shadow: 0 0 0 1px var(--edge), 0 0 0 2px var(--gilt-lo); }
[data-theme="codex"] .movebar .mv.sig { background: radial-gradient(circle at 40% 32%, #5a2a20, #2a1410 75%); }

/* ---------- The map: a plain thin frame so it stays the brightest, most open thing on screen ---------- */
[data-theme="codex"] .stage { border: 7px solid transparent; border-radius: 0; border-image: url(codex/frame.svg) 20 / 22px stretch; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
[data-theme="codex"] .huntcard { padding: 6px 12px 9px; }
[data-theme="codex"] .huntcard .crumb { font: 700 13px var(--pixel); letter-spacing: .1em; color: var(--rg-rubric); }
[data-theme="codex"] .huntcard .what b { font: 700 23px/1 var(--display); color: var(--ink); }
[data-theme="codex"] .huntcard .facts { color: var(--muted); font-size: 13.5px; }
[data-theme="codex"] .risk-safe, [data-theme="codex"] .huntcard .good { color: var(--good); font-weight: 700; }
[data-theme="codex"] .huntcard .warn, [data-theme="codex"] .risk-ok { color: var(--warn); }
[data-theme="codex"] .risk-risky { color: var(--bad); }
[data-theme="codex"] .huntcard .seg { padding-top: 8px; background: linear-gradient(90deg, transparent, var(--rule-soft) 15%, var(--rule-soft) 85%, transparent) top / 100% 1px no-repeat; }
[data-theme="codex"] .huntcard .seg button:not(.btn) { border: 0; border-radius: 3px; color: var(--muted); font: 700 13.5px var(--sans); background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft), 0 2px 0 var(--rule-soft); }
[data-theme="codex"] .huntcard .seg button:not(.btn):hover { color: var(--ink); background: var(--inlay-hi); }
[data-theme="codex"] .huntcard .seg button.on { color: var(--ink); transform: translateY(2px); background: var(--inlay-hi); box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px var(--gilt); }
[data-theme="codex"] .huntcard .seg .btn { height: 30px; }
[data-theme="codex"] .zoom .btn { width: 30px; height: 30px; }

[data-theme="codex"] .combatlog { padding: 6px 8px 8px; font-size: 13.5px; }
[data-theme="codex"] .combatlog .lg-tabs { padding: 0 0 6px; margin-bottom: 2px; background: linear-gradient(90deg, transparent, var(--rule-soft) 10%, var(--rule-soft) 90%, transparent) bottom / 100% 1px no-repeat; }
[data-theme="codex"] .lg-tabs button, [data-theme="codex"] .rtabs button, [data-theme="codex"] .tabs2 button { font: 700 14.5px var(--pixel); letter-spacing: .02em; color: var(--muted); border-radius: 3px 3px 0 0; padding: 4px 8px; }
[data-theme="codex"] .lg-tabs button.on, [data-theme="codex"] .rtabs button.on, [data-theme="codex"] .tabs2 button.on { color: var(--rg-rubric); background: var(--inlay-hi); box-shadow: inset 0 0 0 1px var(--rule-soft), inset 0 2px 0 var(--gilt); }
[data-theme="codex"] .lg-tabs .count { color: var(--faint); }
[data-theme="codex"] .combatlog > div { border-radius: 0; color: var(--ink); }
[data-theme="codex"] .combatlog .fight { background: rgba(80, 55, 30, .07); border-left: 3px solid var(--rule-soft); }
[data-theme="codex"] .combatlog .fight.sig { border-left-color: var(--gilt); background: linear-gradient(90deg, rgba(179, 154, 102, .28), rgba(179, 154, 102, .04)); }
[data-theme="codex"] .combatlog .fight .fmv { color: var(--rg-rubric); font-weight: 800; }
[data-theme="codex"] .combatlog .fight .strong, [data-theme="codex"] .combatlog .coin { color: var(--warn); font-weight: 800; }
[data-theme="codex"] .combatlog .bad { color: var(--rg-rubric); background: rgba(138, 58, 46, .08); }
[data-theme="codex"] .combatlog .xp { color: var(--rg-ink); font-weight: 800; }
[data-theme="codex"] .combatlog .catch { background: rgba(58, 90, 128, .1); }
[data-theme="codex"] .combatlog .lvl, [data-theme="codex"] .combatlog .gold { background: rgba(179, 154, 102, .25); color: #5a4018; }
[data-theme="codex"] .combatlog .muted, [data-theme="codex"] .combatlog .dim, [data-theme="codex"] .combatlog .miss { color: var(--muted); }
[data-theme="codex"] .combatlog .cn { text-decoration-color: rgba(51, 38, 26, .35); }
[data-theme="codex"] .session { padding: 6px 12px; font-size: 13.5px; }
[data-theme="codex"] .session .h b { font: 700 15px var(--pixel); letter-spacing: .04em; color: var(--rg-rubric); }
[data-theme="codex"] .session td:first-child, [data-theme="codex"] .session td em { color: var(--muted); }
[data-theme="codex"] .session tr.sep td { border-top: 1px solid var(--rule-soft); }
[data-theme="codex"] .session td b { font-weight: 800; }

/* ---------- Automation ---------- */
[data-theme="codex"] .auto .grp { border-top: 0; background: linear-gradient(90deg, transparent, var(--rule-soft) 12%, var(--rule-soft) 88%, transparent) top / 100% 1px no-repeat; }
[data-theme="codex"] .auto .phead + .grp { background: none; }
[data-theme="codex"] .auto h5 { font: 700 16px var(--pixel); letter-spacing: .03em; color: var(--rg-rubric); margin-bottom: 4px; }
[data-theme="codex"] .auto .line { font-size: 14px; }
[data-theme="codex"] .usesort { color: var(--muted); font-style: italic; }
[data-theme="codex"] .uselist li { border: 0; border-radius: 1px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .uselist li .n { font-weight: 800; }
[data-theme="codex"] .uselist li.on.empty .n { color: var(--rg-rubric); }
[data-theme="codex"] .uselist .mv { color: var(--rg-rubric); }
[data-theme="codex"] .feed { color: var(--ink); }
[data-theme="codex"] .feed .t { color: var(--faint); }

[data-theme="codex"] .panel.boostsum { padding: 0 0 6px; }
[data-theme="codex"] .boostsum .hint { padding: 0 12px; }
[data-theme="codex"] .questsum .qs-head { padding-bottom: 9px; margin-bottom: 2px; background: url(codex/flourish.svg) center bottom / 140px 9px no-repeat; }
[data-theme="codex"] .questsum .qs-head .muted, [data-theme="codex"] .questsum .qs-row, [data-theme="codex"] .questsum .qs-week { color: var(--muted); font-size: 13.5px; }
[data-theme="codex"] .questsum .qs-week { border-top: 1px solid var(--rule-soft); }

/* ---------- Pages on the leather ---------- */
[data-theme="codex"] .strip { height: 46px; border-bottom: 0; color: var(--cream); font-size: 14px; background: linear-gradient(180deg, var(--leather-lo), #20170f); box-shadow: inset 0 -1px 0 var(--rule-soft), 0 2px 6px rgba(0, 0, 0, .3); }
[data-theme="codex"] .strip .muted { color: var(--cream-2); }
[data-theme="codex"] .strip .back { color: var(--cream); }
[data-theme="codex"] .strip .gain { color: #a9bfda; }
[data-theme="codex"] .strip .divider { background: var(--rule-soft); }
[data-theme="codex"] .pagetitle { padding-bottom: 12px; margin-bottom: 10px; background: url(codex/flourish.svg) left bottom / 220px 10px no-repeat; }
[data-theme="codex"] .pagetitle h1 { font: italic 700 34px/1 var(--display); color: var(--gilt-hi); text-shadow: 0 1px 0 var(--edge); }
[data-theme="codex"] .pane > div > .hint, [data-theme="codex"] .pagetitle .meta, [data-theme="codex"] .crumbs { color: var(--cream-2); font-size: 14px; font-style: italic; }
[data-theme="codex"] .pane h3.sec, [data-theme="codex"] .pane h4.sec { font: italic 700 24px var(--display); color: var(--gilt-hi); }
[data-theme="codex"] .pane h3.sec .muted { font: italic 500 15px var(--sans); color: var(--cream-2); }
[data-theme="codex"] .panel h4.sec { font: 700 20px var(--pixel); color: var(--rg-rubric); text-transform: none; letter-spacing: .03em; }
[data-theme="codex"] .panel h4.sec .muted { font: italic 500 14px var(--sans); color: var(--muted); }

[data-theme="codex"] .bosscards { gap: 14px; }
[data-theme="codex"] .bosscard { padding: 14px 16px; }
[data-theme="codex"] .bosscard > img, [data-theme="codex"] .lhead > img { border-radius: 0; background: radial-gradient(ellipse at 50% 70%, rgba(236, 220, 180, .7), var(--inlay) 70%); box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px var(--gilt), inset 0 0 0 3px rgba(126, 100, 64, .6); }
[data-theme="codex"] .bosscard .nm { font: 700 24px/1 var(--display); color: var(--ink); }
[data-theme="codex"] .bosscard p { font-size: 14px; }
[data-theme="codex"] .bosscard .ink, [data-theme="codex"] .panel .ink { color: var(--ink); font-weight: 800; }
[data-theme="codex"] .bad-text { color: var(--rg-rubric); }

[data-theme="codex"] .lrung { border: 0; border-radius: 0; padding: 5px 10px; color: var(--ink); background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, var(--vellum), var(--vellum-lo)); box-shadow: inset 0 0 0 1px var(--edge), 0 2px 0 rgba(0, 0, 0, .3); }
[data-theme="codex"] .lrung b { font: 700 16px/1.1 var(--sans); }
[data-theme="codex"] .lrung .grow .muted, [data-theme="codex"] .lrung .lv { color: var(--muted); }
[data-theme="codex"] .lrung:hover { border: 0; filter: brightness(1.05); }
[data-theme="codex"] .lrung.on { background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, var(--vellum-hi), var(--vellum)); box-shadow: inset 0 0 0 1px var(--edge), inset 4px 0 0 var(--rg-rubric), 0 2px 0 rgba(0, 0, 0, .3); transform: translateX(6px); }
[data-theme="codex"] .lrung.locked { opacity: .85; }
[data-theme="codex"] .lrung-detail h3 { font-size: 28px; color: var(--ink); }
[data-theme="codex"] .lrung-detail .muted { color: var(--muted); }
[data-theme="codex"] .lrw { border: 0; border-radius: 1px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .lrw.rare { box-shadow: inset 0 0 0 1px rgba(60, 106, 42, .6), inset 0 0 0 2px rgba(60, 106, 42, .2); }
[data-theme="codex"] .lrw .tier { font: 700 13px var(--pixel); letter-spacing: .06em; color: var(--rg-rubric); text-transform: none; }
[data-theme="codex"] .lrw .pct { border: 0; border-radius: 2px; background: var(--inlay-hi); box-shadow: inset 0 0 0 1px var(--rule-soft); color: var(--ink); font-weight: 800; }
[data-theme="codex"] .lrw .muted { color: var(--muted); }
[data-theme="codex"] .lrw b, [data-theme="codex"] .lrw .rare-name { color: var(--ink); }
[data-theme="codex"] .lrw.rare b { color: var(--good); }
[data-theme="codex"] .lauto { border: 0; border-radius: 1px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .lprev th { color: var(--muted); border-bottom: 1px solid var(--rule); }
[data-theme="codex"] .lprev td { border-bottom: 1px solid var(--rule-soft); }
[data-theme="codex"] .warn { background: rgba(179, 154, 102, .2); border-color: rgba(122, 84, 24, .45); color: #5a4018; }
[data-theme="codex"] .toast { color: var(--ink); border: 0; border-radius: 1px; background: url(codex/vellum.svg) 0 0 / 300px, var(--vellum); box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px var(--gilt), 0 6px 14px rgba(0, 0, 0, .4); }

/* ---------- Two surfaces, two inks ----------
   The base styles were written for one dark surface. Codex has two: leather (full pages) and vellum (panels,
   cards, fields). Full pages switch the ink tokens to the cream set; every vellum surface switches them back,
   so any rule that says var(--ink), var(--muted) or var(--accent) reads on whatever it sits on. The colour
   itself is set with :where() so it never beats a component's own colour, only plain inheritance. */
[data-theme="codex"] .page { --ink: var(--ink-l); --muted: var(--muted-l); --faint: var(--faint-l); --accent: var(--accent-l); --good: #a8d090; --bad: #f0a89e; --rf: #8fe6dc; --gold: #e0bd6a; }
[data-theme="codex"] :is(.panel, .dialog, .menu, .ov, .session, .auth, .toast, .apanel, .card, .item, .tcard, .scard, .scard2, .sslot,
  .pcard, .mini, .ofcard, .hcard, .tiles > div, .sp-forms figure, .sp-facts > div, .sp-node, .sp-bl > div, .tp-stats > div, .cp-grade,
  .lkey, .recrow, .sv-head, .sv-card, .ar-list li, .ar-recent > li, .hl-keeper, .hl-mine, .fr-thread li.them, .fb-side, .tr-list > li,
  .plan-rule, .plan-vs, .uselist li, .mate, .slot, .tslot, .bosscard, .lstep, .lrung, .lstep-detail, .dexm, .mnode .lbl, .gseg, .fsearch, .inc,
  .seg button.on, .vseg button.on, .rtabs button.on, .tabs2 button.on, .lg-tabs button.on, .cap-sorts button.on, input, select, textarea) {
  --ink: var(--ink-v); --muted: var(--muted-v); --faint: var(--faint-v); --accent: var(--rg-ink); --good: #285020; --bad: var(--rg-rubric); --rf: #1f5a56; --gold: #7a5a14;
}
:where([data-theme="codex"]) :where(.page) { color: var(--ink); }
:where([data-theme="codex"]) :where(.apanel, .card, .item, .tcard, .scard, .scard2, .sslot, .pcard, .mini, .ofcard, .hcard, .tiles > div,
  .sp-forms figure, .sp-facts > div, .sp-node, .sp-bl > div, .tp-stats > div, .cp-grade, .lkey, .recrow, .sv-head, .sv-card, .ar-list li,
  .ar-recent > li, .hl-keeper, .hl-mine, .fr-thread li.them, .fb-side, .tr-list > li, .plan-rule, .plan-vs, .uselist li, .mate, .dexm, .mnode .lbl, .inc) { color: var(--ink); }

/* Cards on the leather are small vellum leaves: nearly square corners, an edge line, a faint gilt fillet.
   Inside a panel the same cards are ruled inlays. Borders keep their state colours (aura, selected, here). */
[data-theme="codex"] .page :is(.item, .card, .scard, .scard2, .ofcard, .hcard, .recrow, .sv-card, .sv-head, .tcard, .pcard, .plan-rule, .plan-vs, .hl-keeper, .hl-mine, .ar-list li, .ar-recent > li) {
  --line: var(--edge); border-radius: 2px;
  background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, var(--vellum-hi), var(--vellum));
  box-shadow: inset 0 0 0 1px rgba(214, 197, 161, .7), 0 2px 0 rgba(0, 0, 0, .25);
}
[data-theme="codex"] .page :is(.panel, .apanel, .dialog, .bosscard, .lstep-detail) :is(.item, .card, .scard, .scard2, .ofcard, .hcard, .recrow, .sv-card, .tcard, .pcard, .plan-rule, .plan-vs, .hl-keeper, .hl-mine, .ar-list li, .ar-recent > li) {
  --line: var(--rule-soft); background: var(--inlay); box-shadow: none;
}
[data-theme="codex"] .page .card:hover, [data-theme="codex"] .page .pcard:hover:not(:disabled) { border-color: var(--gilt-lo); filter: brightness(1.04); }
[data-theme="codex"] .page .card.aura { border-color: var(--gilt-lo); background: radial-gradient(circle at 50% 38%, rgba(255, 214, 120, .55), transparent 62%), url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, var(--vellum-hi), var(--vellum)); box-shadow: inset 0 0 0 1px var(--gilt), inset 0 0 0 2px rgba(255, 236, 190, .5), 0 2px 0 rgba(0, 0, 0, .25); }
[data-theme="codex"] .page .card.sel { border-color: var(--rg-ink); background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, #e2d4b2, var(--vellum-hi)); box-shadow: inset 0 0 0 1px var(--rg-ink), 0 2px 0 rgba(0, 0, 0, .25); }
[data-theme="codex"] .page .card.inteam::after { color: var(--rg-ink); }
[data-theme="codex"] .page :is(.tcard.lead, .hcard.here, .recrow.me, .plan-rule.on) { border-color: var(--rg-ink); box-shadow: inset 0 0 0 1px var(--rg-ink), 0 2px 0 rgba(0, 0, 0, .25); }
[data-theme="codex"] .page .plan-rule.on { background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, #e2d4b2, var(--vellum-hi)); }
[data-theme="codex"] .page :is(.ofcard.on, .scard2.on) { border-color: var(--gilt-lo); box-shadow: inset 0 0 0 1px var(--gilt), 0 2px 0 rgba(0, 0, 0, .25); }
[data-theme="codex"] .page .tcard.empty { background: none; box-shadow: none; border-color: var(--rule); color: var(--muted-l); }
[data-theme="codex"] .page .tcard.empty:hover { color: var(--ink-l); border-color: var(--gilt); }

/* Fields on the leather are solid vellum; the search box is one field, not a field in a field. */
[data-theme="codex"] .page :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.toggle), select, textarea) { background-color: var(--vellum-hi); }
[data-theme="codex"] .page .panel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.toggle), select, textarea) { background-color: var(--inlay-hi); }
[data-theme="codex"] .fsearch { border: 0; border-radius: 2px; color: var(--muted); background: var(--vellum-hi); box-shadow: inset 0 1px 2px rgba(60, 40, 20, .3), 0 0 0 1px var(--rule); }
[data-theme="codex"] .fsearch input, [data-theme="codex"] .page .fsearch input { background: none; box-shadow: none; padding: 0; }
[data-theme="codex"] .page select { padding-right: 26px; }

/* Index tabs and switches on the leather: cream ink, the open one underlined in gilt. */
[data-theme="codex"] .subtabs { border-bottom: 1px solid var(--rule-soft); }
[data-theme="codex"] .subtabs a { font: 700 15px var(--pixel); letter-spacing: .03em; color: var(--muted-l); }
[data-theme="codex"] .subtabs a:hover { color: var(--ink-l); }
[data-theme="codex"] .subtabs a.on { color: var(--gilt-hi); box-shadow: inset 0 -2px 0 var(--gilt); }
[data-theme="codex"] .subtabs .muted { color: var(--faint-l); font: 600 13px var(--sans); }
[data-theme="codex"] .page .seg, [data-theme="codex"] .page .vseg { border: 0; border-radius: 3px; background: rgba(20, 12, 6, .3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .page .seg button:not(.btn), [data-theme="codex"] .page .vseg button { color: var(--muted); font-family: var(--sans); font-weight: 700; }
[data-theme="codex"] .page .seg button:not(.btn):hover, [data-theme="codex"] .page .vseg button:hover { color: var(--ink); }
[data-theme="codex"] .page .seg button.on:not(.btn), [data-theme="codex"] .page .vseg button.on { color: var(--ink); background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, var(--vellum-hi), var(--vellum)); box-shadow: inset 0 0 0 1px var(--edge); }
[data-theme="codex"] .page .panel .seg { background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .btn.tog { color: #eadbbd; }
[data-theme="codex"] .btn.tog.on { color: #f2e4cc; background: linear-gradient(180deg, #3c5a7c, var(--rg-ink)); box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 2px rgba(179, 154, 102, .55), 0 2px 0 var(--edge); }
[data-theme="codex"] .calc .seg .btn.on { color: #f2e4cc; background: var(--wax); }
[data-theme="codex"] .calc .seg { background: none; box-shadow: none; }
[data-theme="codex"] input[type=range] { accent-color: var(--rg-rubric); background: none; box-shadow: none; }
[data-theme="codex"] .gseg { border: 0; border-radius: 2px; background: var(--vellum-hi); box-shadow: inset 0 0 0 1px var(--rule); }
[data-theme="codex"] .gseg button.on { outline-color: var(--rg-rubric); }

/* Tables and rules on the leather. */
[data-theme="codex"] :is(.ctable td, .tbl2 td) { border-color: rgba(140, 115, 80, .28); }
[data-theme="codex"] .ctable th { background: var(--leather-lo); }
[data-theme="codex"] .ctable tr.sel td { background: rgba(169, 191, 218, .14); }
[data-theme="codex"] :is(.ctable .fav, .ctable .rare-name) { color: var(--gilt-hi); }
[data-theme="codex"] .page .tbl2 tr.on td { background: rgba(201, 178, 130, .12); }

/* Leftover dark-theme colours that show through on the vellum. Good, bad and refine text follow the surface. */
[data-theme="codex"] :is(.shrine .state.good, .scard .state.good, .cp-check .ok, .good-text, .ar-m .good, .ar-recent .good) { color: var(--good); }
[data-theme="codex"] :is(.cp-check .no, .bad-text, .ar-m .bad, .ar-recent .bad, .session tr.neg b, .sv-card.neg .sc-v, .combatlog .fight .crit, .risk-risky) { color: var(--bad); }
[data-theme="codex"] :is(.cp-stats .rf, .hc .foot .rf) { color: var(--rf); }
[data-theme="codex"] .gr.c { color: var(--ink); }
[data-theme="codex"] .page .link { color: var(--accent); }
[data-theme="codex"] .parts b.bl { color: #5a3a8a; }
[data-theme="codex"] .cp-refine .seg .btn.on small { color: #1f5a56; }
[data-theme="codex"] .inc { border-color: var(--rule-soft); border-radius: 2px; background: var(--inlay); }
[data-theme="codex"] .inc-n { background: var(--inlay-hi); color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .page .tcard.empty { --ink: var(--ink-l); --muted: var(--muted-l); --faint: var(--faint-l); }
/* The creature hover card and the sign-in card are vellum leaves in the gilt frame, like the panels. */
[data-theme="codex"] :is(.hc, .auth) {
  --ink: var(--ink-v); --muted: var(--muted-v); --faint: var(--faint-v); --accent: var(--rg-ink); --good: #285020; --bad: var(--rg-rubric); --gold: #7a5a14;
  color: var(--ink); border: 5px solid transparent; border-radius: 0; border-image: url(codex/frame.svg) 20 / 18px stretch;
  background: url(codex/vellum.svg) 0 0 / 300px, radial-gradient(ellipse at 50% 35%, var(--vellum-hi) 0, var(--vellum) 60%, var(--vellum-lo) 100%);
  box-shadow: inset 0 0 16px rgba(90, 60, 25, .18), 0 10px 28px rgba(0, 0, 0, .5);
}
[data-theme="codex"] .hc { padding: 10px; }
[data-theme="codex"] .hc .top b { font: 700 18px/1.1 var(--display); }
[data-theme="codex"] .hc hr { border-top-color: var(--rule-soft); }
[data-theme="codex"] .hc .ivs div { border-radius: 1px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .hc .rare-name { color: #5a3a8a; }
[data-theme="codex"] .landing h1 { font: italic 700 76px/.95 var(--display); color: var(--gilt-hi); text-shadow: 0 2px 0 var(--edge), 0 0 28px rgba(230, 140, 60, .25); }
[data-theme="codex"] .landing .tag { font: italic 600 23px/1.3 var(--display); color: var(--ink-l); }
[data-theme="codex"] .auth .modes { border-bottom-color: var(--rule-soft); }
[data-theme="codex"] .auth .modes button { font: 700 19px/1 var(--display); color: var(--faint); }
[data-theme="codex"] .auth .modes button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--rg-rubric); }
@media (max-width: 899px) { [data-theme="codex"] .landing h1 { font-size: 58px; } [data-theme="codex"] .landing .tag { font-size: 20px; } }

/* Name colours were picked for a dark page; on the vellum each one is drawn in its darker shade. */
[data-theme="codex"] :is(.panel, .card, .item, .scard2, .dialog, .ov, .feed) [style*="color:#7fc8e8"] { color: #1f6a8e !important; }
[data-theme="codex"] :is(.panel, .card, .item, .scard2, .dialog, .ov, .feed) [style*="color:#f08a2c"] { color: #a04a10 !important; }
[data-theme="codex"] :is(.panel, .card, .item, .scard2, .dialog, .ov, .feed) [style*="color:#f0c45a"] { color: #8a6418 !important; }
[data-theme="codex"] .gradescale .gs { border-radius: 1px; color: #1e150e; opacity: .5; box-shadow: inset 0 0 0 1px rgba(30, 21, 14, .5); }
[data-theme="codex"] .gradescale .gs.on { opacity: 1; box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 2px rgba(255, 240, 210, .35); }
[data-theme="codex"] .gradescale .gs.c { background: #9c8e78; color: #1e150e; } [data-theme="codex"] .gradescale .gs.b { background: #7ea866; }
[data-theme="codex"] .gradescale .gs.a { background: #7c9cc2; } [data-theme="codex"] .gradescale .gs.s { background: #a68cc4; }
[data-theme="codex"] .gradescale .gs.sp { background: linear-gradient(135deg, #e0b070, #c88648); }
[data-theme="codex"] .gradescale b { background: var(--gilt-hi); box-shadow: 0 0 0 1px var(--edge); }
[data-theme="codex"] .bn-in.short { color: var(--rg-rubric); font-weight: 700; }
[data-theme="codex"] .ar-tier { color: color-mix(in srgb, var(--tc) 55%, #2a1e14); }
[data-theme="codex"] .q-row { border: 0; border-radius: 2px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .q-row.done { box-shadow: inset 0 0 0 1px rgba(60, 106, 42, .55); }
[data-theme="codex"] :is(.q-bar, .dexm-bar) > i { background: linear-gradient(180deg, #6f8fb4, #4a6a92 55%, #3a5578); }
[data-theme="codex"] .dexm { border: 0; border-radius: 0; padding: 10px 14px; background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, var(--vellum-hi), var(--vellum)); box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 2px rgba(179, 154, 102, .4), 0 3px 8px rgba(0, 0, 0, .3); }
[data-theme="codex"] .dexm-steps li { border: 0; border-radius: 2px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .dexm-steps .dm-ready { background: rgba(179, 154, 102, .3); box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px var(--gilt); }
[data-theme="codex"] .dexm-steps .dm-ready .dm-s { color: var(--warn); }
[data-theme="codex"] .dexm-steps .dm-done .dm-s { color: var(--good); }
[data-theme="codex"] .mnode .lbl { border-radius: 1px; background: url(codex/vellum.svg) 0 0 / 300px, var(--vellum-hi); box-shadow: inset 0 0 0 1px var(--edge), 0 2px 4px rgba(0, 0, 0, .4); }
[data-theme="codex"] .mnode .lbl span, [data-theme="codex"] .mnode.locked .lbl span { color: var(--muted); }
[data-theme="codex"] .mnode.on .lbl { outline: 2px solid var(--gilt); }

/* ---------- World map: the painted region (client/regionmap.ts) in the gilt frame ---------- */
[data-theme="codex"] .mapbox { border: 7px solid transparent; border-radius: 0; border-image: url(codex/frame.svg) 20 / 22px stretch; background: #10305a; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
[data-theme="codex"] .mart { image-rendering: pixelated; }
[data-theme="codex"] .mnode .ring { border-width: 3px; background: radial-gradient(circle at 40% 35%, #5a4636, #2a1f16 75%); box-shadow: 0 0 0 1px var(--edge), 0 3px 0 rgba(0, 0, 0, .45); }
[data-theme="codex"] .mnode.locked .ring { border-color: #7a6a58; background: radial-gradient(circle at 40% 35%, #4a4038, #221a14 75%); }
[data-theme="codex"] .mnode.risk-safe .ring { border-color: #6aa84e; }
[data-theme="codex"] .mnode:hover .ring, [data-theme="codex"] .mnode.on .ring { box-shadow: 0 0 0 1px var(--edge), 0 0 0 4px var(--gilt), 0 3px 0 rgba(0, 0, 0, .45); }
[data-theme="codex"] .mnode.here .ring::after { border-color: var(--gilt-hi); }
[data-theme="codex"] .mnode .pin { background: var(--rg-rubric); box-shadow: 0 0 0 1px var(--edge), 0 2px 3px rgba(0, 0, 0, .5); }
[data-theme="codex"] .mnode .lock { background: var(--edge); color: var(--gilt-hi); box-shadow: 0 0 0 1px var(--gilt-lo); }
[data-theme="codex"] .winset { --ink: var(--ink-v); --muted: var(--muted-v); --faint: var(--faint-v); color: var(--ink); border: 0; border-radius: 1px;
  background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, var(--vellum-hi), var(--vellum)); box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 2px rgba(179, 154, 102, .45), 0 4px 10px rgba(0, 0, 0, .4); }
[data-theme="codex"] .winset .cap { font: 700 14px var(--pixel); letter-spacing: .06em; color: var(--rg-rubric); text-transform: none; background: none; box-shadow: none; border: 0; padding: 0 2px 0 4px; }
@media (min-width: 761px) { [data-theme="codex"] .winset .wmini { background: none; box-shadow: none; } }
[data-theme="codex"] .wmini { border-radius: 1px; background: #10305a; box-shadow: inset 0 0 0 1px var(--edge), inset 0 2px 6px rgba(0, 0, 0, .45); }
[data-theme="codex"] .wreg { border-radius: 2px; border: 0; font: 700 13px var(--sans); color: var(--ink-v); box-shadow: 0 0 0 1px var(--edge), 0 2px 0 rgba(0, 0, 0, .45); background: url(codex/vellum.svg) 0 0 / 300px, var(--vellum-hi); }
[data-theme="codex"] .wreg + .wreg, [data-theme="codex"] .wreg + .wreg + .wreg { background: url(codex/vellum.svg) 0 0 / 300px, var(--vellum-hi); }
[data-theme="codex"] .wreg.on { color: var(--rg-rubric); box-shadow: 0 0 0 1px var(--edge), 0 0 0 3px var(--gilt), 0 2px 0 rgba(0, 0, 0, .45); }
[data-theme="codex"] .wreg.shut { opacity: 1; color: var(--muted-v); background: url(codex/vellum.svg) 0 0 / 300px, var(--vellum-lo); filter: grayscale(.4) brightness(.85); }
[data-theme="codex"] .wline { color: var(--ink); }
[data-theme="codex"] .wline .dot { background: var(--rule); }
[data-theme="codex"] .wline .dot.on { background: var(--rg-rubric); }
[data-theme="codex"] .legend .lg.safe { background: #6aa84e; } [data-theme="codex"] .legend .lg.locked { background: #7a6a58; }

/* ---------- Phone: the vellum stays, the frames and type tighten ---------- */
@media (max-width: 760px) {
  [data-theme="codex"] .appbar { height: auto; }
  [data-theme="codex"] .nav { padding-bottom: 0; }
  [data-theme="codex"] .nav > a, [data-theme="codex"] .navmore > button { height: 32px; padding: 0 10px; font-size: 14.5px; }
  [data-theme="codex"] .nav > a.on { height: 34px; }
  [data-theme="codex"] .ptabs { background: linear-gradient(180deg, var(--leather-hi), var(--leather-lo)); border-bottom: 1px solid var(--rule-soft); }
  [data-theme="codex"] .ptabs button { color: var(--cream-2); font: 700 15px var(--pixel); }
  [data-theme="codex"] .ptabs button.on { color: var(--cream); box-shadow: inset 0 -2px 0 var(--gilt); }
  [data-theme="codex"] .panel, [data-theme="codex"] .ov, [data-theme="codex"] .session, [data-theme="codex"] .stage { border-width: 5px; border-image-width: 18px; }
  [data-theme="codex"] .huntcard .what b { font-size: 20px; }
  [data-theme="codex"] .lvring { background: conic-gradient(var(--gilt) calc(var(--p) * 1%), var(--leather-lo) 0); box-shadow: 0 0 0 1px var(--edge); }
  [data-theme="codex"] .lvring span { background: var(--leather-hi); color: var(--cream); font-family: var(--sans); }
  [data-theme="codex"] .bnav { background: url(codex/leather.svg) 0 0 / 260px, linear-gradient(180deg, var(--leather-hi), var(--leather-lo)); border-top: 0; box-shadow: inset 0 1px 0 var(--rule-soft), 0 -2px 8px rgba(0, 0, 0, .3); }
  [data-theme="codex"] .bnav a, [data-theme="codex"] .bnav button { color: var(--cream-2); font: 600 12px var(--sans); }
  [data-theme="codex"] .bnav .on { color: var(--gilt-hi); box-shadow: inset 0 2px 0 var(--gilt); }
  [data-theme="codex"] .bnav .dot { background: var(--rg-rubric); box-shadow: 0 0 0 1px var(--cream); }
}
[data-theme="codex"] .strip .live { color: #a8c48e; }
[data-theme="codex"] .huntcard .seg .map, [data-theme="codex"] .pagetitle .btn, [data-theme="codex"] .crumbs .btn { color: #eadbbd; }

/* ---------- UX pass markup: player card, hunt-card tools, Automation in-use chips and Advanced sections ---------- */
[data-theme="codex"] .panel.playercard { padding: 0; background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, var(--vellum-hi), var(--vellum)); }
[data-theme="codex"] .pc { color: var(--ink); padding: 5px 10px 5px 6px; }
[data-theme="codex"] .pc:hover { background: var(--inlay); }
[data-theme="codex"] .pc-face { border: 0; border-radius: 2px; background-color: #3a2c20; box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px var(--gilt), inset 0 0 8px rgba(0, 0, 0, .4); }
[data-theme="codex"] .pc-name { font: 700 17px/1.1 var(--display); }
[data-theme="codex"] .pc-lv { color: var(--muted); font-size: 12.5px; }
[data-theme="codex"] .pc-l b { color: var(--ink); }
[data-theme="codex"] .gtag { color: var(--rg-rubric); }
[data-theme="codex"] .pc-xp { height: 7px; border: 0; border-radius: 2px; background: #3a2c20; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .pc-xp i { background: linear-gradient(180deg, #6f8fb4, #4a6a92 55%, #3a5578); }

[data-theme="codex"] .huntcard .crumb { font-size: 12px; letter-spacing: .07em; white-space: nowrap; }
[data-theme="codex"] .hc-tool {
  border: 0; border-radius: 3px; color: #eadbbd; font: 700 13px/1 var(--sans);
  background: var(--btn-face); box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 2px rgba(179, 154, 102, .55), 0 2px 0 var(--edge);
}
[data-theme="codex"] .hc-tool:hover { filter: brightness(1.1); }
[data-theme="codex"] .hc-tool:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--edge), inset 0 2px 4px rgba(0, 0, 0, .45); }

[data-theme="codex"] .ause { border: 0; border-radius: 2px; color: var(--ink); font: 600 13px var(--sans); background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft), 0 1px 0 var(--rule-soft); }
[data-theme="codex"] .ause:hover { background: var(--inlay-hi); }
[data-theme="codex"] .ause.none b, [data-theme="codex"] .ause.none .nm { color: var(--rg-rubric); }
[data-theme="codex"] .advs { border-top: 0; background: linear-gradient(90deg, transparent, var(--rule-soft) 12%, var(--rule-soft) 88%, transparent) top / 100% 1px no-repeat; }
[data-theme="codex"] .adv + .adv { border-top: 1px solid var(--rule-soft); }
[data-theme="codex"] .adv-h { color: var(--ink); font: 600 14px var(--sans); }
[data-theme="codex"] .adv-h:hover { background: var(--inlay); }
[data-theme="codex"] .adv-h .now { color: var(--muted); font-style: italic; font-size: 13px; }
[data-theme="codex"] .adv-h .chev { border-color: var(--rg-rubric); }

/* ---------- Boss screen (UX pass): estimate well, team mates, drops, ladder steps, entry row ---------- */
[data-theme="codex"] .sech .muted { color: var(--cream-2); font-style: italic; font-size: 14px; }
[data-theme="codex"] .sech h3 { font: italic 700 24px var(--display); color: var(--gilt-hi); letter-spacing: 0; }
[data-theme="codex"] .sech .link, [data-theme="codex"] .crumbs a:not(.btn) { color: var(--gilt-hi); }
[data-theme="codex"] .lstep-detail, [data-theme="codex"] .bosscard { background: url(codex/vellum.svg) 0 0 / 300px, radial-gradient(ellipse at 50% 35%, var(--vellum-hi) 0, var(--vellum) 60%, var(--vellum-lo) 100%); box-shadow: inset 0 0 16px rgba(90, 60, 25, .18), 0 4px 12px rgba(0, 0, 0, .35); }
[data-theme="codex"] .lhead h3 { color: var(--ink); font: 700 24px/1.1 var(--display); }
[data-theme="codex"] .lhead h3 .lvl { color: var(--muted); font: 600 15px var(--sans); }
[data-theme="codex"] .lhead > img { border-radius: 0; background: radial-gradient(ellipse at 50% 70%, rgba(236, 220, 180, .7), var(--inlay) 70%); border: 0; box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px var(--gilt), inset 0 0 0 3px rgba(126, 100, 64, .6); }
[data-theme="codex"] .est { border: 0; border-radius: 2px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft), inset 0 1px 3px rgba(60, 40, 20, .2); }
[data-theme="codex"] .est-pow, [data-theme="codex"] .est-weak { color: var(--ink); }
[data-theme="codex"] .est-pow .muted, [data-theme="codex"] .est-weak .muted { color: var(--muted); }
[data-theme="codex"] .verdict { border: 0; border-radius: 2px; font: 700 12.5px var(--sans); letter-spacing: .12em; box-shadow: inset 0 0 0 1px rgba(51, 38, 26, .5); }
[data-theme="codex"] .verdict.outmatched { color: #f2e4cc; background: var(--wax); }
[data-theme="codex"] .verdict.even { color: #f2e4cc; background: linear-gradient(180deg, #8a6a30, #6e5224); }
[data-theme="codex"] .verdict.favoured { color: #f2e4cc; background: linear-gradient(180deg, #4a7236, #36582a); }
[data-theme="codex"] .mate { border: 0; border-radius: 2px; background: var(--inlay-hi); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .mate .mlv { color: var(--muted); }
[data-theme="codex"] .mate .mlv.hi, [data-theme="codex"] .mate .mk .up { color: var(--good); }
[data-theme="codex"] .mate .mlv.mid { color: var(--warn); }
[data-theme="codex"] .mate .mlv.lo, [data-theme="codex"] .mate .mk .dn { color: var(--rg-rubric); }
[data-theme="codex"] .drop { border: 0; border-radius: 2px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .drop b { color: var(--muted); font-weight: 600; font-size: 12px; }
[data-theme="codex"] .drop .pct { color: var(--ink); font: 800 16px/1.2 var(--sans); }
[data-theme="codex"] .drop.rare { background: rgba(106, 74, 150, .1); box-shadow: inset 0 0 0 1px rgba(106, 74, 150, .45); }
[data-theme="codex"] .drop.rare .pct { color: #4a2f78; }
[data-theme="codex"] .lstep { border: 0; border-radius: 0; color: var(--ink); background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, var(--vellum), var(--vellum-lo)); box-shadow: inset 0 0 0 1px var(--edge), 0 2px 0 rgba(0, 0, 0, .3); }
[data-theme="codex"] .lstep .nm { font: 700 15px var(--sans); }
[data-theme="codex"] .lstep .lv { color: var(--muted); }
[data-theme="codex"] .lstep .ok { color: var(--good); }
[data-theme="codex"] .lstep:hover { border: 0; filter: brightness(1.05); }
[data-theme="codex"] .lstep.on { background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, var(--vellum-hi), var(--vellum)); box-shadow: inset 0 0 0 1px var(--edge), inset 4px 0 0 var(--rg-rubric), 0 2px 0 rgba(0, 0, 0, .3); }
[data-theme="codex"] .lstep.on .lv { color: var(--ink); }
[data-theme="codex"] .lstep.locked { opacity: .8; }
[data-theme="codex"] .lstep-detail h4.sec { color: var(--rg-rubric); }
[data-theme="codex"] .lentry { border-top: 1px solid var(--rule-soft); }
[data-theme="codex"] .lentry .muted, [data-theme="codex"] .lrepeat { color: var(--muted); }
[data-theme="codex"] .lentry.running { border: 0; border-radius: 2px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rg-ink); }
[data-theme="codex"] .lkey { border: 0; border-radius: 2px; background: var(--inlay-hi); box-shadow: inset 0 0 0 1px var(--rule-soft); color: var(--ink); }
[data-theme="codex"] .lrepeat input[type=checkbox] { accent-color: var(--rg-rubric); }

/* ---------- Creature page ---------- */
[data-theme="codex"] .crumbs .ink { color: var(--cream); }
[data-theme="codex"] .crumbs .muted { color: var(--cream-2); }
[data-theme="codex"] .cp-pic { border-radius: 0; border-bottom: 1px solid var(--rule-soft); background: radial-gradient(ellipse at 50% 62%, rgba(240, 226, 192, .85), rgba(202, 182, 142, .2) 70%) !important; }
[data-theme="codex"] .cp-stars, [data-theme="codex"] .cp-starrow { color: var(--warn); }
[data-theme="codex"] .cp-starrow span { color: var(--rule-soft); }
[data-theme="codex"] .cp-name { font: 700 26px/1.1 var(--display); color: var(--ink); }
[data-theme="codex"] .cp-grade { border: 0; border-radius: 2px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .cp-facts dt, [data-theme="codex"] .cp .muted, [data-theme="codex"] .cp-sub .muted { color: var(--muted); }
[data-theme="codex"] .cp-why { color: var(--warn); }
[data-theme="codex"] .cp-check .ok { color: var(--good); }
[data-theme="codex"] .cp-check .no { color: var(--rg-rubric); }
[data-theme="codex"] .cp-card.sell { border-color: transparent; }
[data-theme="codex"] .gold-text { color: var(--warn); }
[data-theme="codex"] .linkbtn { color: var(--rg-ink); }
[data-theme="codex"] .sbar { border-radius: 1px; background: #3a2c20; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4); }
[data-theme="codex"] .sbar > i { border-radius: 1px; background: linear-gradient(180deg, #c48a52, #9a6436); }
[data-theme="codex"] .sbar.tal > i, [data-theme="codex"] .parts .sbar > i { background: linear-gradient(180deg, #6f8fb4, #4a6a92); }
[data-theme="codex"] .rp { border-radius: 2px; font-family: var(--sans); font-weight: 700; }
[data-theme="codex"] .rp.t-n, [data-theme="codex"] .rp.t-c { background: var(--inlay); color: var(--ink); border-color: var(--rule-soft); }
[data-theme="codex"] .rp.t-b { background: rgba(60, 106, 42, .12); color: var(--good); border-color: rgba(60, 106, 42, .5); }
[data-theme="codex"] .rp.t-a { background: rgba(44, 71, 102, .12); color: var(--rg-ink); border-color: rgba(44, 71, 102, .5); }
[data-theme="codex"] .rp.t-s { background: rgba(90, 56, 140, .12); color: #4a2f78; border-color: rgba(90, 56, 140, .5); }
[data-theme="codex"] .rp.t-rf { background: rgba(31, 90, 86, .12); color: #1f4c49; border-color: rgba(31, 90, 86, .5); }
[data-theme="codex"] .rp.t-medal { background: rgba(122, 84, 24, .12); color: var(--warn); border-color: rgba(122, 84, 24, .5); }
[data-theme="codex"] .rp.t-sp, [data-theme="codex"] .rp.t-gold { filter: saturate(.75); box-shadow: none; }
[data-theme="codex"] .rp::after { background: var(--vellum-hi); border-color: var(--rule); color: var(--ink); border-radius: 2px; }
[data-theme="codex"] .cp-refine .seg .btn small { color: #9fd6cf; }

/* === Tournaments ===
   Every tournament surface is a .panel or sits inside one, so the vellum inks apply; text uses the ink tokens. */
[data-theme="codex"] .tn-card { border-top: 0; box-shadow: inset 0 3px 0 var(--tc); }
[data-theme="codex"] .tn-card h3 { color: var(--bad); font: 700 21px/1.1 var(--display); }
[data-theme="codex"] .tn-card h3::first-letter { color: var(--accent); }
[data-theme="codex"] .tn-blurb, [data-theme="codex"] .tn-status.muted { color: var(--muted); font-style: italic; }
[data-theme="codex"] .tn-emblem { filter: saturate(1.15) brightness(.6); }
[data-theme="codex"] .tn-card.tn-soon { padding-top: 16px; }
[data-theme="codex"] .tn-card.tn-soon .tn-emblem { top: auto; bottom: 14px; right: 16px; width: 56px; height: 49px; }
[data-theme="codex"] .tn-card.tn-soon .tn-blurb { padding-right: 70px; }
/* Rig-drawn emblems (icon-tour-*) are already painted for the vellum: no filter, crisp pixels at their 48x42 size. */
[data-theme="codex"] img.tn-emblem { filter: none; }
[data-theme="codex"] .tn-card.tn-soon img.tn-emblem { width: 48px; height: 42px; }
[data-theme="codex"] .tn-ribbon {
  top: 18px; left: auto; right: -40px; width: 160px; padding: 5px 0; text-align: center; transform: rotate(35deg); transform-origin: 50% 50%;
  border-radius: 0; color: var(--cream); background: var(--wax); font: 700 12px/1 var(--pixel); letter-spacing: .1em; text-transform: none;
  box-shadow: 0 0 0 1px var(--gilt-lo), inset 0 1px 0 rgba(255, 230, 190, .25), 0 2px 3px rgba(40, 20, 10, .35);
}
[data-theme="codex"] .tn-soon-note { color: var(--ink); border-left: 0; box-shadow: inset 4px 0 0 var(--bad); }
[data-theme="codex"] .tn-soon-note b { color: var(--bad); font-family: var(--pixel); font-size: 1.1em; }
[data-theme="codex"] .tn-m, [data-theme="codex"] .tn-sheet li, [data-theme="codex"] .tn-tlist li, [data-theme="codex"] .tn-my {
  border-radius: 2px; border-color: var(--rule-soft); background: var(--inlay);
}
[data-theme="codex"] .tn-m { color: var(--ink); }
[data-theme="codex"] .tn-m span.w b, [data-theme="codex"] .tn-m span small, [data-theme="codex"] .tn-live { color: var(--bad); }
[data-theme="codex"] .tn-col h5 { color: var(--muted); font-family: var(--pixel); text-transform: none; letter-spacing: .04em; font-size: 14px; }
[data-theme="codex"] .tn-event, [data-theme="codex"] .tn-edit { border-top: 0; border-left: 0; }
[data-theme="codex"] .trainer-title { color: var(--bad); font: italic 600 14px var(--sans); }

/* === Name tags === */
/* The species beside a nickname: the surface's muted ink (leather or vellum, see "Two surfaces, two inks"). */
[data-theme="codex"] .nick-sp { color: var(--muted); font-style: italic; }

/* === Quests (quest rewards) === */
/* Quest rows, reward chips, the weekly chest track (wax seals on a gilt bar) and the Claim button. Base layout: style.css. */
[data-theme="codex"] .q-row { border: 0; border-radius: 1px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .q-row.done { box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px rgba(179, 154, 102, .45); }
[data-theme="codex"] .q-main b { font: 600 15px/1.25 var(--sans); color: var(--ink); }
[data-theme="codex"] .q-bar > i, [data-theme="codex"] .questsum .qs-row .bar > i { background: var(--accent); }
[data-theme="codex"] .q-row.done .q-bar > i, [data-theme="codex"] .questsum .qs-row.done .bar > i { background: var(--good); }
[data-theme="codex"] .q-chest { border-top: 0; padding-top: 14px; background: url(codex/flourish.svg) center top / 140px 9px no-repeat; }
[data-theme="codex"] .q-chest-h b { font: 700 17px/1 var(--pixel); color: var(--rg-rubric); letter-spacing: .03em; }
[data-theme="codex"] .chest .ch-bar { border-radius: 2px; background: var(--leather-lo); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .chest .ch-bar > i { background: linear-gradient(180deg, var(--gilt-hi), var(--gilt) 55%, var(--gilt-lo)); }
[data-theme="codex"] .chest .seal { color: var(--ink); background: var(--vellum-lo); box-shadow: 0 0 0 1px var(--edge), 0 0 0 3px var(--rule-soft); }
[data-theme="codex"] .chest .cn.ready .seal { width: 30px; height: 30px; margin-top: -2px; color: var(--edge); font-size: 12px; background: radial-gradient(circle at 38% 32%, var(--vellum-hi), var(--gilt-hi) 45%, var(--gilt) 75%, var(--gilt-lo)); box-shadow: 0 0 0 1px var(--edge), 0 0 0 3px var(--gilt), 0 0 12px 2px rgba(240, 210, 140, .85); }
[data-theme="codex"] .chest .cn.ready .cn-rw { opacity: 1; }
[data-theme="codex"] .chest .cn.claimed .seal { color: var(--cream); background: var(--wax); box-shadow: 0 0 0 1px var(--edge); }
[data-theme="codex"] .questsum .qs-chestbar .tick { background: var(--vellum-lo); box-shadow: 0 0 0 1px var(--edge); }
[data-theme="codex"] .questsum .qs-chestbar .tick.ready { background: var(--gilt-hi); box-shadow: 0 0 0 1px var(--edge), 0 0 6px rgba(201, 178, 130, .9); }
[data-theme="codex"] .questsum .qs-chestbar .tick.claimed { background: var(--rg-rubric); }
[data-theme="codex"] .questsum .qs-chestbar .bar > i { background: linear-gradient(180deg, var(--gilt-hi), var(--gilt) 55%, var(--gilt-lo)); }
[data-theme="codex"] .questsum .qs-chest { border-top: 1px solid var(--rule-soft); font-size: 13.5px; }
[data-theme="codex"] .btn.q-claimbtn { padding: 7px 14px; background: var(--wax); color: var(--cream); }
[data-theme="codex"] .q-claim .btn.q-claimbtn { font-size: 14px; }
[data-theme="codex"] .q-claim .q-claimbtn .rw img { width: 18px; height: 18px; }
[data-theme="codex"] .q-claimbtn b { letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; }

/* === UI round 2 === */
/* Roll pills: inked tabs, one colour per tier (common, good, fine, superb, peerless), so a capture reads at a glance. */
[data-theme="codex"] .rp { border: 0; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(51, 38, 26, .35), 0 1px 0 rgba(51, 38, 26, .18); }
[data-theme="codex"] .rp small { opacity: .85; font-weight: 600; }
[data-theme="codex"] .rp.t-n { background: #d9c9a6; color: #33261a; }
[data-theme="codex"] .rp.t-c { background: #b5a281; color: #2e231a; }
[data-theme="codex"] .rp.t-b { background: #5d8a45; color: #f4ecd6; }
[data-theme="codex"] .rp.t-a { background: #3f6694; color: #f1ecdf; }
[data-theme="codex"] .rp.t-s { background: #6b4a9a; color: #f3ecf7; }
[data-theme="codex"] .rp.t-sp { background: linear-gradient(180deg, #c8793a, #a85a24); color: #fff4e2; filter: none; }
[data-theme="codex"] .rp.t-gold { background: linear-gradient(180deg, #e2c272, #c09a45); color: #33240f; filter: none; }
[data-theme="codex"] .rp.t-b small, [data-theme="codex"] .rp.t-a small, [data-theme="codex"] .rp.t-s small, [data-theme="codex"] .rp.t-sp small { opacity: .8; }
[data-theme="codex"] .rp.m { font: 700 10.5px/16px var(--sans); }
[data-theme="codex"] .rp::after { font: 500 13px/1.4 var(--sans); box-shadow: 0 6px 18px rgba(30, 20, 10, .35); }

/* Team rail: the lead's card leads; the bench folds to one tidy line of rolls each. */
[data-theme="codex"] .slot.lead { padding: 8px 10px 9px; }
[data-theme="codex"] .slot.lead::before { right: 12px; }
[data-theme="codex"] .slot.lead .r1 .nm { font-size: 18px; }
[data-theme="codex"] .slot.lead .peek-btn { margin-right: 18px; }
[data-theme="codex"] .slot.lead .onfield { color: var(--rg-rubric); font: italic 600 12.5px var(--sans); }
[data-theme="codex"] .slot.bench { margin-bottom: 4px; padding: 4px 8px 5px; }
[data-theme="codex"] .slot.bench .r1 .nm { font-size: 15.5px; }
[data-theme="codex"] .slot.bench .ko { color: var(--rg-rubric); font: italic 600 12px var(--sans); }
[data-theme="codex"] .peek-btn { color: var(--rg-ink); }
[data-theme="codex"] .peek-btn:hover { color: var(--rg-rubric); background: var(--inlay-hi); }
[data-theme="codex"] .sl { height: 3px; border-radius: 1px; background: #3a2c20; box-shadow: 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .sl.hp > i { background: #6f9a4c; }
[data-theme="codex"] .sl.xp > i { background: #4a6a92; }

/* Player card doors. */
[data-theme="codex"] .pc { padding: 0; }
[data-theme="codex"] .pc:hover { background: none; }
[data-theme="codex"] .pc-link { padding: 5px 4px 5px 6px; }
[data-theme="codex"] .pc-link:hover { background: var(--inlay); }
[data-theme="codex"] .pc-door { color: var(--rg-ink); border-radius: 2px; }
[data-theme="codex"] .pc-door:hover { color: var(--rg-rubric); background: var(--inlay-hi); }
[data-theme="codex"] .pc-door .dot { background: var(--rg-rubric); color: #f4e8d2; box-shadow: 0 0 0 1px var(--vellum-hi); }

/* Scene tools: small tooled-leather squares in the map's corner. */
[data-theme="codex"] .fieldtools .ft { border: 0; border-radius: 3px; color: #eadbbd; background: var(--btn-face); box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 2px rgba(179, 154, 102, .55), 0 2px 0 var(--edge); }
[data-theme="codex"] .fieldtools .ft:hover { filter: brightness(1.12); }
[data-theme="codex"] .fieldtools .ft:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--edge), inset 0 2px 4px rgba(0, 0, 0, .45); }

/* The creature popup: a vellum leaf in a gilt frame over a dimmed map. */
[data-theme="codex"] .peek-scrim { background: rgba(26, 18, 10, .55); }
[data-theme="codex"] .peek {
  border: 7px solid transparent; border-radius: 0; border-image: url(codex/frame.svg) 20 / 22px stretch;
  background: url(codex/vellum.svg) 0 0 / 300px, radial-gradient(ellipse at 50% 35%, var(--vellum-hi) 0, var(--vellum) 60%, var(--vellum-lo) 100%);
  box-shadow: inset 0 0 16px rgba(90, 60, 25, .18), 0 18px 50px rgba(0, 0, 0, .55);
}
[data-theme="codex"] .pk-pic { border-radius: 2px; background: radial-gradient(circle at 50% 60%, #5a4632, #2f2219 72%); box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px var(--gilt), inset 0 0 12px rgba(0, 0, 0, .5); }
[data-theme="codex"] .pk-name { font: 700 26px/1.05 var(--display); color: var(--ink); }
[data-theme="codex"] .pk-lv b { font: 700 18px var(--display); }
[data-theme="codex"] .pk-h { font: 700 14px var(--pixel); letter-spacing: .06em; text-transform: none; color: var(--rg-rubric); padding-bottom: 3px; border-bottom: 1px solid var(--rule-soft); }
[data-theme="codex"] .pk-st { font-size: 14px; }
[data-theme="codex"] .pk-sb { height: 6px; border-radius: 1px; background: #3a2c20; box-shadow: 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .pk-sb i { background: linear-gradient(180deg, #c48a4e, #9a6233); }
[data-theme="codex"] .pk-facts { font-size: 14px; }
[data-theme="codex"] .pk-acts { border-top: 0; background: linear-gradient(90deg, transparent, var(--rule-soft) 10%, var(--rule-soft) 90%, transparent) top / 100% 1px no-repeat; }
[data-theme="codex"] .pk-acts a.btn { text-decoration: none; color: #eadbbd; }
[data-theme="codex"] .pk-x { color: var(--muted); }
[data-theme="codex"] .pk-x:hover { color: var(--rg-rubric); background: var(--inlay-hi); }

/* Player screen: the portrait sits in a tooled frame; tiles are ruled inlays on the vellum. */
[data-theme="codex"] .ph-portrait, [data-theme="codex"] .player-hub .of-pic { border-radius: 2px; background: radial-gradient(circle at 50% 62%, #5a4632, #2f2219 72%); box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px var(--gilt), inset 0 0 14px rgba(0, 0, 0, .5); }
[data-theme="codex"] .ph-preview { color: #f0dca8; text-shadow: 0 1px 2px #000; }
[data-theme="codex"] .ph-name { font: 700 28px/1.05 var(--display); color: var(--ink); }
[data-theme="codex"] .ph-lv b { font: 700 22px var(--display); }
[data-theme="codex"] .ph-lv span:first-child, [data-theme="codex"] .ph-sub, [data-theme="codex"] .ph-tile span { font: 700 12.5px var(--pixel); letter-spacing: .05em; text-transform: none; color: var(--muted); }
[data-theme="codex"] .ph-boosts, [data-theme="codex"] .ph-rec, [data-theme="codex"] .ph-set, [data-theme="codex"] .ph-flist.big li { border-color: var(--rule-soft); }
[data-theme="codex"] .ph-tile { border-radius: 2px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .ph-tile b { font: 700 22px/1.1 var(--display); color: var(--ink); }
[data-theme="codex"] .ph-rec, [data-theme="codex"] .ph-flist li, [data-theme="codex"] .ph-set p, [data-theme="codex"] .ph-guild p { font-size: 14px; }
[data-theme="codex"] .ph-gname svg { color: var(--rg-rubric); }
[data-theme="codex"] .ph-dirs img { border-radius: 2px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .ph-seg button { border: 0; border-radius: 2px; color: var(--ink); background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); font: 700 13.5px var(--sans); }
[data-theme="codex"] .ph-seg button.on { color: #f2e4cc; background: var(--rg-ink); box-shadow: inset 0 0 0 1px var(--edge); }
[data-theme="codex"] .ph-wait { color: var(--rg-rubric); }
[data-theme="codex"] .panel.boostsum { padding: 4px 8px 5px; }
[data-theme="codex"] .bchip { border: 0; border-radius: 2px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); font: 600 13px/22px var(--sans); color: var(--ink); }
[data-theme="codex"] .bchip b { color: var(--rg-ink); }
[data-theme="codex"] .bchip.ready b { color: var(--rg-rubric); }
[data-theme="codex"] a.bchip:hover { background: var(--inlay-hi); }
[data-theme="codex"] .slot.bench .r1 .nm { line-height: 18px; }
[data-theme="codex"] .slot.bench { padding: 3px 8px 4px; margin-bottom: 4px; }
[data-theme="codex"] .slot.lead .movebar { margin-top: 6px; }
[data-theme="codex"] .pc-link { padding: 3px 4px 3px 6px; }
@media (max-width: 760px) {
  [data-theme="codex"] .slot.bench { margin: 0 0 4px; background: url(codex/vellum.svg) 0 0 / 300px, linear-gradient(180deg, var(--vellum-hi), var(--vellum)); box-shadow: inset 0 0 0 1px var(--gilt-lo), 0 2px 0 rgba(0, 0, 0, .25); }
  [data-theme="codex"] .fieldtools .ft { width: 30px; height: 30px; }
}

/* Session catches: each a ruled inlay, so the roll pills read at a glance. */
[data-theme="codex"] .cap { border: 0; border-radius: 2px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .cap:hover { background: var(--inlay-hi); }
[data-theme="codex"] .cap-top b { font: 700 15px var(--display); color: var(--ink); }
[data-theme="codex"] .cap-top time { color: var(--muted); }
[data-theme="codex"] .cap .rpills { margin-top: 3px; }
[data-theme="codex"] .cap-best { color: var(--warn); }

/* === Season pass === */
/* The Pass page (client/pass.ts): a vellum status panel with a wax emblem, the season track as a row of ruled
   inlays with wax seals, and the titles and badges it gave. The player card's frame and the Pass chip too. */
[data-theme="codex"] .ps-page { display: grid; gap: 12px; max-width: 1180px; }
[data-theme="codex"] .ps-status { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 14px 18px; }
[data-theme="codex"] .ps-emblem { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; font: 700 26px/1 var(--display); color: #f0e2cc; background: var(--wax); box-shadow: 0 0 0 1px var(--edge), 0 0 0 4px var(--gilt), 0 0 0 5px var(--edge), 0 3px 8px rgba(0, 0, 0, .35); }
[data-theme="codex"] .ps-status:not(.on) .ps-emblem { filter: saturate(.35) brightness(.9); }
[data-theme="codex"] .ps-state { display: flex; align-items: baseline; gap: 10px; }
[data-theme="codex"] .ps-state b { font: 700 24px/1 var(--display); color: var(--rg-rubric); letter-spacing: .02em; }
[data-theme="codex"] .ps-left { font: 700 17px/1 var(--display); color: var(--ink); }
[data-theme="codex"] .ps-perks { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
[data-theme="codex"] .ps-perks li { padding: 2px 8px; border-radius: 2px; font: 600 13px/20px var(--sans); color: var(--ink); background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .ps-perks b { color: var(--rg-ink); }
[data-theme="codex"] .ps-status:not(.on) .ps-perks li { color: var(--muted); }
[data-theme="codex"] .ps-track { padding: 12px 16px 14px; }
[data-theme="codex"] .ps-track .cp-h { display: flex; align-items: baseline; gap: 10px; }
[data-theme="codex"] .ps-track h4 { font: 700 18px/1 var(--pixel); color: var(--rg-rubric); letter-spacing: .03em; margin: 0; }
[data-theme="codex"] .ps-bar { display: block; position: relative; height: 8px; margin: 10px 0 12px; overflow: hidden; }
[data-theme="codex"] .ps-bar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, var(--gilt-hi), var(--gilt) 55%, var(--gilt-lo)); }
[data-theme="codex"] .ps-steps { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
[data-theme="codex"] .ps-step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 104px; padding: 8px 4px 7px; border-radius: 2px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .ps-step .seal { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: normal 700 11px/1 var(--sans); color: var(--ink); background: var(--vellum-lo); box-shadow: 0 0 0 1px var(--edge), 0 0 0 3px var(--rule-soft); }
[data-theme="codex"] .ps-step.ready { background: var(--inlay-hi); box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px var(--gilt); }
[data-theme="codex"] .ps-step.ready .seal { color: var(--edge); background: radial-gradient(circle at 38% 32%, var(--vellum-hi), var(--gilt-hi) 45%, var(--gilt) 75%, var(--gilt-lo)); box-shadow: 0 0 0 1px var(--edge), 0 0 0 3px var(--gilt), 0 0 10px 2px rgba(240, 210, 140, .8); }
[data-theme="codex"] .ps-step.held { box-shadow: inset 0 0 0 1px var(--gilt-lo); }
[data-theme="codex"] .ps-step.held .seal { color: var(--edge); background: var(--gilt-hi); }
[data-theme="codex"] .ps-step.claimed .seal { color: var(--cream); background: var(--wax); box-shadow: 0 0 0 1px var(--edge); }
[data-theme="codex"] .ps-step.claimed .ps-rws { opacity: .55; }
[data-theme="codex"] .ps-step.locked .ps-rws { opacity: .8; }
[data-theme="codex"] .ps-rws { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
[data-theme="codex"] .ps-rw { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
[data-theme="codex"] .ps-rw img { width: 28px; height: 28px; image-rendering: pixelated; }
[data-theme="codex"] .ps-rw img.ps-fit { width: 40px; height: 40px; margin: -6px 0 -4px; }
[data-theme="codex"] .ps-rw em { max-width: 92px; font: normal 700 12px/1.15 var(--sans); color: var(--ink); text-align: center; overflow-wrap: anywhere; }
[data-theme="codex"] .ps-glyph { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 16px/1 var(--display); color: var(--rg-rubric); background: var(--vellum-hi); box-shadow: 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px rgba(255, 244, 220, .5); }
[data-theme="codex"] .ps-keep { display: grid; gap: 8px; padding: 10px 16px; }
[data-theme="codex"] .ps-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
[data-theme="codex"] .ps-row > .muted { min-width: 90px; }
[data-theme="codex"] .cbadge { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 3px; border-radius: 50%; font: 700 10px/1 var(--display); vertical-align: -2px; color: #f0e2cc; background: var(--wax); box-shadow: 0 0 0 1px var(--gilt); }
/* The player card while the pass runs: a double gilt rule with garnet corner studs. */
[data-theme="codex"] .pc.pc-pass { position: relative; box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 3px var(--gilt), inset 0 0 0 4px var(--edge); }
[data-theme="codex"] .pc.pc-pass::before, [data-theme="codex"] .pc.pc-pass::after { content: ''; position: absolute; top: 1px; width: 7px; height: 7px; background: var(--rg-rubric); box-shadow: 0 0 0 1px var(--edge); transform: rotate(45deg); pointer-events: none; }
[data-theme="codex"] .pc.pc-pass::before { left: 1px; }
[data-theme="codex"] .pc.pc-pass::after { right: 1px; }
[data-theme="codex"] .pc.pc-pass .pc-face { box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px var(--gilt-hi), inset 0 0 8px rgba(0, 0, 0, .4), 0 0 0 1px var(--rg-rubric); }
[data-theme="codex"] .bchip.pass { background: var(--wax); box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 2px rgba(201, 178, 130, .6); color: #f0e2cc; }
[data-theme="codex"] .bchip.pass b, [data-theme="codex"] .bchip.pass em { color: #f4e8d2; }
[data-theme="codex"] a.bchip.pass:hover { background: var(--wax); filter: brightness(1.1); }
[data-theme="codex"] .q-redraw { width: 22px; height: 22px; margin: 0 8px 0 auto; font: 700 13px/1 var(--sans); }
@media (max-width: 760px) {
  [data-theme="codex"] .ps-status { grid-template-columns: auto 1fr; }
  [data-theme="codex"] .ps-buy { grid-column: 1 / -1; }
  [data-theme="codex"] .ps-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* === Leaderboards === */
/* Ranks page (client/community.ts): board tabs, your own rank on a vellum leaf, the top 100 as a ruled table with
   gilt, pewter and copper medallions for the top three. Then the species page's record and the World chat cards
   for big catches and show-offs (client/ui.ts showCard). Base table rules: style.css .board. */
[data-theme="codex"] :is(.lb-you, .lb-table, .sp-record, .show-card) { --ink: var(--ink-v); --muted: var(--muted-v); --faint: var(--faint-v); --accent: var(--rg-ink); --good: #285020; --bad: var(--rg-rubric); --gold: #7a5a14; color: var(--ink); }
.lb { max-width: 760px; display: grid; gap: 10px; }
.lb .boardseg { margin: 0; flex-wrap: wrap; }
.lb-you { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 14px; }
.lb-you.off { opacity: .85; }
.lb-you .lb-rank { min-width: 44px; height: 44px; font-size: 18px; }
.lb-val { font: 700 18px/1 var(--display); color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.lb-total { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.lb-table { padding: 4px 6px 6px; overflow: hidden; }
.lb-table .board { font-size: 14.5px; }
.lb-table .board th { color: var(--muted); font: 700 12px/1 var(--pixel); letter-spacing: .06em; padding: 8px 10px 6px; }
.lb-table .board td { padding: 5px 10px; border-top: 1px solid var(--rule-soft); vertical-align: middle; }
.lb-table .board th.num:first-child, .lb-table .board td.num:first-child { width: 52px; text-align: center; }
.lb-table .board tbody tr:hover td { background: var(--inlay); }
.lb-table .board tr.me td { background: var(--inlay-hi); box-shadow: inset 0 1px 0 var(--gilt-lo), inset 0 -1px 0 var(--gilt-lo); }
.lb-table .board tr.me td:first-child { box-shadow: inset 3px 0 0 var(--rg-ink), inset 0 1px 0 var(--gilt-lo), inset 0 -1px 0 var(--gilt-lo); }
.lb-rank { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; font: 700 14px/1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-rank:is(.r1, .r2, .r3) { border-radius: 50%; color: var(--edge); box-shadow: 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 rgba(0, 0, 0, .3); }
.lb-rank.r1 { background: radial-gradient(circle at 38% 30%, #f3e2b0, var(--gilt-hi) 40%, var(--gilt) 70%, var(--gilt-lo)); }
.lb-rank.r2 { background: radial-gradient(circle at 38% 30%, #f1ede4, #c9c4b8 45%, #9d978a 80%, #77715f); }
.lb-rank.r3 { background: radial-gradient(circle at 38% 30%, #f0cfae, #c58f62 45%, #9c6640 80%, #6f4527); }
.lb-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.lb-who b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-who .tface { margin: 0; flex: none; }
.lb-who .gtag { color: var(--muted); font-size: 12.5px; }
.lb-who .pill { font-size: 11px; }
.lb-who .plink { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; }
.lb-who .plink:hover b { text-decoration: underline; text-decoration-color: var(--gilt-lo); }
.lb-sub, .lb-of { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.lb-sub { margin-left: 4px; }
.lb-v { white-space: nowrap; font-weight: 700; }
.lb-v b { font-weight: 700; }
.lb-v .gr, .lb-val .gr { margin-right: 6px; vertical-align: 1px; }
.lb-mon { display: inline-block; width: 36px; height: 36px; margin: -6px 4px -6px 0; vertical-align: middle; }
.lb-mon img, .lb-you .lb-mon img { width: 36px; height: 36px; image-rendering: pixelated; }
.lb-at { margin: 0; text-align: right; font-size: 12px; color: var(--faint); }

/* The species page's record: a vellum leaf with the holder and the rolls. */
.sp-record { display: grid; gap: 6px; max-width: 760px; margin: 12px 0 4px; padding: 10px 14px; }
.spr-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sp-record h4 { margin: 0; }
.spr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.spr-row > img { width: 44px; height: 44px; image-rendering: pixelated; }
.spr-who { display: grid; line-height: 1.25; }
.spr-who .plink { color: var(--ink); text-decoration: none; }
.sp-record .link { font-size: 13.5px; }
.sp-record > p { margin: 0; }
.ph-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }

/* World chat: a creature card. Ruled inlay on the chat vellum; big catches get a gilt edge, Auras a warm glow. */
.feed .b-show { color: var(--ink); font-weight: 400; }
.feed .b-show { position: relative; }
.feed .b-show > .t { position: absolute; top: 6px; right: 8px; margin: 0; z-index: 1; }
.show-card .sc-who { padding-right: 52px; }
.show-card { display: flex; align-items: center; gap: 8px; padding: 5px 8px 6px 5px; border-radius: 2px; background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
.show-card.big { background: linear-gradient(90deg, rgba(244, 233, 205, .5), var(--inlay) 60%); box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 3px 0 0 var(--gilt); }
.show-card.aura { background: radial-gradient(circle at 26px 50%, rgba(255, 214, 120, .65), transparent 52px), linear-gradient(90deg, rgba(244, 233, 205, .5), var(--inlay) 60%); box-shadow: inset 0 0 0 1px var(--gilt), inset 3px 0 0 var(--gilt-hi); }
.show-card .sc-pic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; cursor: help; }
.show-card .sc-pic img { width: 44px; height: 44px; image-rendering: pixelated; }
.show-card .sc-main { min-width: 0; display: grid; gap: 2px; }
.show-card .sc-who { display: flex; align-items: center; flex-wrap: wrap; gap: 0 5px; font-size: 12.5px; color: var(--muted); }
.show-card .sc-who .tface { margin: 0; width: 18px; height: 18px; background-size: 58px 58px; background-position: -20px -11px; }
.show-card .sc-who .plink { color: var(--ink); text-decoration: none; }
.show-card .sc-who .gtag { color: var(--muted); }
.show-card .sc-rec { margin-left: 2px; padding: 0 6px; border-radius: 2px; font: 700 11px/18px var(--sans); letter-spacing: .03em; text-transform: uppercase; color: #f2e4cc; background: var(--wax); text-decoration: none; }
.show-card .sc-name { display: flex; align-items: baseline; gap: 6px; cursor: help; min-width: 0; }
.show-card .sc-name b { font: 700 15px/1.15 var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show-card.aura .sc-name b { color: #7a5a14; }
.show-card .sc-name .muted { font-size: 12px; white-space: nowrap; }
.show-card .rpills.m { flex-wrap: wrap; }

@media (max-width: 760px) {
  .lb .boardseg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lb .boardseg button { flex: none; min-height: 40px; }
  .lb-you { grid-template-columns: auto minmax(0, 1fr) auto; padding: 8px 10px; gap: 10px; }
  .lb-you .lb-total { display: none; }
  .lb-table { padding: 2px; }
  .lb-table .board { font-size: 14px; }
  .lb-table .board td { padding: 6px 6px; }
  .lb-table .board th.num:first-child, .lb-table .board td.num:first-child { width: 40px; }
  .lb-who .tface { display: none; }
  .lb-mon { width: 30px; height: 30px; }
  .lb-mon img { width: 30px; height: 30px; }
  .show-card .sc-who .plink, .show-card .sc-rec { min-height: 28px; display: inline-flex; align-items: center; }
}

/* === QA fixes === */
/* QA 2026-10-14. Additive rules only; the rules above are untouched. */
/* Hunt left rail: with the First steps card and a full team it was taller than a laptop screen, so the whole page
   scrolled and the quests card was cut off. The rail scrolls on its own instead, and the quests card keeps its height.
   position: relative keeps its absolutely placed screen-reader labels inside the scrolling rail. */
@media (min-width: 1201px) {
  [data-theme="codex"] .game > .lcol { position: relative; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; scrollbar-color: var(--gilt-lo) transparent; }
  [data-theme="codex"] .lcol > .panel.questsum { flex: none; overflow: visible; }
}
/* Grade scale (calculator, creature page): unpicked grades were half-transparent, so their labels were unreadable.
   They are dimmed with a shade over the colour instead, and their text stays light. */
[data-theme="codex"] .gradescale .gs:not(.on) { opacity: 1; color: var(--ink-l); box-shadow: inset 0 0 0 60px rgba(36, 26, 18, .62), inset 0 0 0 1px rgba(30, 21, 14, .5); }
/* Guild tag on the dark page background (page title, leaderboards): rubric red read at about 1.3:1. */
[data-theme="codex"] .pagetitle .gtag, [data-theme="codex"] .boardwrap .gtag { color: var(--gilt-hi); }
@media (max-width: 760px) {
  /* Phone sub-tabs are inline-flex, which dropped the space before the count ("All4", "Coin eggsLv 150"). */
  [data-theme="codex"] .subtabs a { gap: 5px; }
  /* Grade calculator: the inputs column kept its min-content width and pushed the page sideways. */
  [data-theme="codex"] .calc { grid-template-columns: minmax(0, 1fr); }
  [data-theme="codex"] .calc label.row select, [data-theme="codex"] .calc label.row input { min-width: 0; }
  /* Creature page: the "3 of 13 · newest first" note pushed the next and Close buttons onto a second line. */
  [data-theme="codex"] .crumbs .spacer + .muted { display: none; }
}

/* === Art QA (art thread) ===
   Contrast and fit fixes from the 2026-10-14 QA pass that land on rules owned elsewhere; kept here so
   those blocks stay as their owners wrote them. */
/* Bloodline II and other "b" tier pills: a deeper green so the cream text reads (about 5:1). */
[data-theme="codex"] .rp.t-b { background: #3f6b2c; color: #f8f0dc; }
/* "Coming soon" on tournament cards: a wax pennant hanging inside the card's top edge instead of a
   corner sash the card clips. */
[data-theme="codex"] .tn-ribbon {
  top: 0; right: 30px; left: auto; width: auto; padding: 6px 10px 11px; transform: none;
  color: #fbf0da; background: linear-gradient(180deg, #a2463a, #7c2c22 70%, #66231b); font: 700 12px/1 var(--pixel); letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(40, 10, 5, .7);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 5px), 0 100%);
  box-shadow: none;
}
[data-theme="codex"] .tn-card.tn-soon h3 { padding-right: 120px; }
/* The Legendkin mark (art/rig3d/icons/brand-mark.ts) beside the title on the landing page: 64 px, 48 px on phones. */
[data-theme="codex"] .landing h1 { display: flex; align-items: center; justify-content: center; gap: 14px; }
[data-theme="codex"] .landing h1::before { content: ''; flex: none; width: 64px; height: 64px; margin-top: 4px; background: url(../art/brand-mark@64.png) 0 0 / 64px 64px; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(230, 140, 60, .3)); }
@media (max-width: 899px) { [data-theme="codex"] .landing h1::before { width: 48px; height: 48px; background-image: url(../art/brand-mark@48.png); background-size: 48px 48px; } }
/* The season pass player card: a painted 9-slice frame (art/rig3d/build-frames.ts, public/frames/pass.png) in place
   of the inset gilt rule and garnet studs. The panel clips at its padding edge, so the frame sits inside the card at
   the top and sides and hangs 4 px below it; the card and the boost chips under it step down to clear it. */
[data-theme="codex"] .pc.pc-pass { box-shadow: none; padding-top: 2px; }
[data-theme="codex"] .pc.pc-pass::before {
  top: 0; right: 0; bottom: -4px; left: 0; width: auto; height: auto; transform: none; background: none; box-shadow: none;
  border: 12px solid transparent; border-image: url(../frames/pass.png) 12 round; image-rendering: pixelated;
}
[data-theme="codex"] .pc.pc-pass::after { display: none; }
[data-theme="codex"] .pc.pc-pass + .bchips { margin-top: 5px; }
/* Season pass and Ranks art (art/rig3d/icons): the pass emblem, the Frost Rune chat badge, the top-three medallions,
   the Record seal and the guild crest. Each replaces a CSS stand-in drawn by the Season pass and Leaderboards blocks,
   so the wax and gradient fills come off where the picture goes on. 32 px art shows at 16 px (crisp on 2x screens). */
[data-theme="codex"] img.ps-emblem.art { width: 48px; height: 48px; margin: 5px; background: none; border-radius: 0; box-shadow: none; image-rendering: pixelated; }
[data-theme="codex"] img.cbadge.art { width: 16px; height: 16px; background: none; border-radius: 0; box-shadow: none; }
.cbadge-w { display: inline; }
img.rec-seal { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; }
img.lb-crest { width: 16px; height: 16px; flex: none; }
[data-theme="codex"] .lb-rank:is(.r1, .r2, .r3) { width: 32px; height: 32px; margin: -1px 0; padding: 0 0 1px; border-radius: 0; box-shadow: none; color: #33261a; font-size: 15px; font-variant-numeric: lining-nums tabular-nums; background: url(../art/icon-medal-gold.png) center / contain no-repeat; image-rendering: pixelated; }
[data-theme="codex"] .lb-rank.r2 { background-image: url(../art/icon-medal-silver.png); }
[data-theme="codex"] .lb-rank.r3 { background-image: url(../art/icon-medal-bronze.png); }
[data-theme="codex"] .lb-you .lb-rank:is(.r1, .r2, .r3) { width: 48px; height: 48px; margin: -2px 0; font-size: 22px; }

/* === Aura Charm ===
   The running charm as an icon chip in the boosts line, and the small mark on a creature caught under one
   (hover card and creature page). Bought charms read gold, free ones accent. */
[data-theme="codex"] .bchip.ac-chip { align-items: center; gap: 4px; }
[data-theme="codex"] .bchip.ac-chip svg { width: 13px; height: 13px; flex: none; }
[data-theme="codex"] .bchip.ac-paid svg { color: var(--gold); }
[data-theme="codex"] .bchip.ac-free svg { color: var(--accent); }
[data-theme="codex"] .bchip.ac-chip em { color: var(--ink); }
[data-theme="codex"] .ac-mark { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--faint); }
[data-theme="codex"] .ac-mark svg { width: 12px; height: 12px; }
[data-theme="codex"] .ac-mark.ac-paid { color: var(--gold); }
[data-theme="codex"] .ac-mark.ac-free { color: var(--muted); }
[data-theme="codex"] .rw svg, [data-theme="codex"] .ps-rw svg { width: 16px; height: 16px; color: var(--gold); }

/* === App bar fix ===
   Codex tabs are wider than the base theme's links, so the base tiers (all 16 links from 1680 px) ran the
   nav under the trainer pill. Codex tiers, checked with a 16-character name, 10-digit wallets and the
   online count: every link only from 2720 px; 1201-2719 px the community links fold into More and the
   tabs tighten below 1680 px; 761-1200 px the tabs get their own row under the bar (one row, More at the
   end) instead of wrapping over the page. */
[data-theme="codex"] .appbar .nav { flex: none; }
/* The nav keeps its width; when the bar runs short the trainer's name gives way (ellipsis), never the tabs. */
[data-theme="codex"] .appbar .trainer { flex: 0 1 auto; min-width: 0; }
[data-theme="codex"] .appbar .trainer b { flex: 0 1 auto; min-width: 3em; }
[data-theme="codex"] .appbar .trainer .lvl, [data-theme="codex"] .appbar .trainer .mini-xp { flex: none; }
@media (min-width: 761px) and (max-width: 2719px) {
  [data-theme="codex"] .nav > a.nx { display: none; }
  [data-theme="codex"] .nav .navmore { display: inline-flex; }
}
@media (min-width: 761px) and (max-width: 1679px) {
  [data-theme="codex"] .appbar { gap: 10px; }
  [data-theme="codex"] .nav > a, [data-theme="codex"] .navmore > button { padding: 0 10px; font-size: 15px; letter-spacing: .02em; }
}
@media (min-width: 1201px) and (max-width: 1439px) {
  [data-theme="codex"] .appbar .brand { font-size: 22px; }
  [data-theme="codex"] .appbar .cur .long { display: none; }
  [data-theme="codex"] .appbar .cur .short { display: inline; }
  [data-theme="codex"] .appbar .mini-xp { width: 64px; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  [data-theme="codex"] .appbar { height: auto; min-height: 58px; padding: 8px 14px 0; row-gap: 6px; }
  [data-theme="codex"] .appbar .nav { flex-wrap: nowrap; padding-bottom: 0; min-height: 39px; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  [data-theme="codex"] .appbar .cur .long { display: none; }
  [data-theme="codex"] .appbar .cur .short { display: inline; }
  [data-theme="codex"] .appbar .mini-xp { width: 64px; }
  [data-theme="codex"] .appbar .trainer b { max-width: 96px; }
}

/* === QA lows === */
/* Market listing: one tight leaf. Sprite, the name line flush left, then price and buttons in one row at the right;
   the coin icon is the 16 px coin, not the 44 px sprite size. */
[data-theme="codex"] .page .mrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 6px 10px; }
[data-theme="codex"] .mrow > img { width: 40px; height: 40px; image-rendering: pixelated; }
[data-theme="codex"] .mrow .nmrow { justify-content: flex-start; gap: 6px; font: 600 15px/1.25 var(--sans); color: var(--ink); }
[data-theme="codex"] .mrow .sub { margin-top: 1px; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
[data-theme="codex"] .mrow .mprice { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
[data-theme="codex"] .mrow .mprice > .coinv { margin-right: 6px; font-size: 15px; color: var(--ink); }
[data-theme="codex"] .mrow .mprice .coinv img { width: 16px; height: 16px; }
[data-theme="codex"] .mrow .mprice .each { margin-right: 6px; color: var(--muted); }
@media (max-width: 760px) {
  [data-theme="codex"] .page .mrow { grid-template-columns: 40px minmax(0, 1fr); }
  [data-theme="codex"] .mrow .mprice { grid-column: 1 / -1; flex-wrap: wrap; }
  [data-theme="codex"] .mrow .mprice > .coinv { margin-right: auto; }
}

/* Grade calculator: inputs and result are vellum panels like the creature page's cards. */
[data-theme="codex"] .calc { align-items: start; }
[data-theme="codex"] .calc > .panel { padding: 14px 16px; min-width: 0; }
[data-theme="codex"] .calc > .panel > h5:first-child, [data-theme="codex"] .calc > .panel > :first-child { margin-top: 0; }
[data-theme="codex"] .calc h5 { font: 700 16px/1 var(--pixel); letter-spacing: .04em; text-transform: none; color: var(--accent); }
[data-theme="codex"] .calc h5 .sub { font: 600 12.5px var(--sans); color: var(--muted); }
[data-theme="codex"] .calc .sub, [data-theme="codex"] .calc label.row > span:first-child, [data-theme="codex"] .calc-rf label { color: var(--muted); }
[data-theme="codex"] .calc .bar, [data-theme="codex"] .calc-parts .bar { background: none; box-shadow: inset 0 0 0 1px var(--faint); }
[data-theme="codex"] .calc .bar i { background: var(--accent); }
[data-theme="codex"] .calc-head img { background: none; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--faint); }
[data-theme="codex"] .calc-st th, [data-theme="codex"] .calc-st td { border-bottom: 1px solid var(--faint); }
[data-theme="codex"] .page .calc .seg { background: none; box-shadow: none; }

/* === Auto-favorite ===
   The Auras and Bloodline switches share one line in the Automation panel; the release-below count reads as ink. */
[data-theme="codex"] .auto .autofav { display: flex; flex-wrap: wrap; gap: 0 16px; }
[data-theme="codex"] .auto .autofav .line { flex: 1 1 auto; }
[data-theme="codex"] .dialog .rb-count { color: var(--ink); font-weight: 600; }

/* === Weekly catch === */
[data-theme="codex"] .wc { --ink: var(--ink-v); --muted: var(--muted-v); --faint: var(--faint-v); --accent: var(--rg-ink); color: var(--ink); padding: 10px 14px; display: grid; gap: 8px; }
.wc-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wc-h b { font: 700 22px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.wc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.wc-step { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border: 1px solid var(--rule-soft); border-radius: 2px; background: var(--inlay); font-size: 12px; color: var(--muted); text-align: center; min-width: 0; }
.wc-step b { font: 700 16px/1 var(--display); color: var(--ink); }
.wc-step span { overflow-wrap: anywhere; }
.wc-step.got { background: var(--inlay-hi); border-color: var(--gilt-lo); box-shadow: inset 0 0 0 1px var(--gilt); }
.wc-step.got span { color: var(--rg-ink); font-weight: 700; }
.wc-note { margin: 0; font-size: 12.5px; }
@media (max-width: 520px) {
  .wc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* === Price table === */
/* Market price table (client/pages.ts priceSection): one vellum leaf, a stat strip, a dense ruled table.
   The listing form's "Lowest listing · Avg sold 7d" line sits under the price field. */
[data-theme="codex"] .page .pt-panel { max-width: 760px; padding: 12px 14px; }
[data-theme="codex"] .pt-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
[data-theme="codex"] .pt-pick .seg { border-color: var(--rule-soft); border-radius: 3px; background: var(--inlay); }
[data-theme="codex"] .pt-pick .seg button { height: 28px; color: var(--muted); font: 700 13.5px var(--sans); }
[data-theme="codex"] .pt-pick .seg button.on { color: var(--ink); background: var(--inlay-hi); box-shadow: inset 0 0 0 1px var(--gilt-lo); }
[data-theme="codex"] .pt-pick select { height: 28px; min-width: 170px; max-width: 100%; padding: 0 8px; font: 600 14px var(--sans); }
[data-theme="codex"] .pt-stats { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 18px; margin: 10px 0 4px; padding: 8px 0; border-block: 1px solid var(--rule-soft); font-variant-numeric: tabular-nums; }
[data-theme="codex"] .pt-stats > span { display: flex; flex-direction: column; }
[data-theme="codex"] .pt-stats i { font: italic 500 12px/1.2 var(--sans); color: var(--muted); }
[data-theme="codex"] .pt-stats b { font: 700 15px/1.25 var(--sans); color: var(--ink); }
[data-theme="codex"] .pt-stats b .muted { font-weight: 500; font-size: 12.5px; color: var(--muted); }
[data-theme="codex"] .pt-spark { margin-left: auto; overflow: visible; }
[data-theme="codex"] .pt-spark polyline { fill: none; stroke: var(--rg-ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
[data-theme="codex"] .page .tbl2.pt { margin: 4px 0 6px; font: 500 13.5px var(--sans); font-variant-numeric: tabular-nums; }
[data-theme="codex"] .tbl2.pt th { padding: 4px 6px; border-bottom: 1px solid var(--rule); }
[data-theme="codex"] .tbl2.pt th button { border: 0; padding: 0; background: none; cursor: pointer; font: 700 12px var(--sans); letter-spacing: .03em; color: var(--muted); }
[data-theme="codex"] .tbl2.pt th button:hover, [data-theme="codex"] .tbl2.pt th button.on { color: var(--accent); }
[data-theme="codex"] .tbl2.pt td { padding: 3px 6px; border-top: 1px solid rgba(140, 115, 80, .28); color: var(--ink); }
[data-theme="codex"] .tbl2.pt td:first-child { color: var(--muted); }
[data-theme="codex"] .tbl2.pt td:last-child { font-weight: 700; }
[data-theme="codex"] .tbl2.pt td .muted { font-weight: 500; }
[data-theme="codex"] .tbl2.pt tbody tr:hover td { background: var(--inlay); }
[data-theme="codex"] .px-line { margin: 2px 0 6px; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--muted); }
[data-theme="codex"] .px-line b { color: var(--ink); }
@media (max-width: 760px) {
  [data-theme="codex"] .page .pt-panel { padding: 10px; }
  [data-theme="codex"] .pt-pick select { flex: 1 1 100%; }
  [data-theme="codex"] .pt-stats { gap: 4px 14px; }
  [data-theme="codex"] .pt-spark { margin-left: 0; }
  [data-theme="codex"] .page .tbl2.pt { display: table; font-size: 13px; }
  [data-theme="codex"] .tbl2.pt :is(th, td) { padding-inline: 4px; }
}

/* === Coin gifts === */
[data-theme="codex"] .ph-flist li.cg-row { display: block; min-height: 0; padding: 6px 0 8px; border-bottom: 1px solid var(--rule-soft); }
[data-theme="codex"] .cg-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 6px 8px; border: 1px solid var(--rule-soft); border-radius: 3px; background: var(--inlay); }
[data-theme="codex"] .cg-form label { font: 700 13px var(--sans); color: var(--muted); }
[data-theme="codex"] .cg-form input { width: 9.5em; height: 28px; padding: 0 8px; font: 600 14px var(--sans); font-variant-numeric: tabular-nums; }
[data-theme="codex"] .cg-calc { flex: 1 1 100%; font: 500 13px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
[data-theme="codex"] .ph-flist .btn.on { box-shadow: inset 0 0 0 1px var(--gilt-lo); }
@media (max-width: 760px) {
  [data-theme="codex"] .cg-form input { flex: 1 1 8em; width: auto; }
}

/* === Provenance ===
   Catcher name and honour marks (client/provenance.ts) on the hover card, the creature page and market rows. */
[data-theme="codex"] .pv { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; vertical-align: -2px; font-size: 12.5px; color: var(--muted); }
[data-theme="codex"] .pv-by, [data-theme="codex"] .pv-h { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
[data-theme="codex"] .pv svg { width: 12px; height: 12px; flex: none; }
[data-theme="codex"] .pv-by { font-style: italic; color: var(--ink); max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
[data-theme="codex"] .pv-by svg { color: var(--faint); }
[data-theme="codex"] .pv-h b { font: 700 12px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-theme="codex"] .pv-trophy svg { color: var(--gold); }
[data-theme="codex"] .pv-ladder svg { color: var(--accent); }

/* === Podium === */
[data-theme="codex"] .pd { --ink: var(--ink-v); --muted: var(--muted-v); --faint: var(--faint-v); --accent: var(--rg-ink); color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 7px 12px; font-size: 13px; }
.pd-h { font: 700 12px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pd-list { display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.pd-place, .pd-crown { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.pd-place b, .pd-crown b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14ch; }
.pd-medal { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; font: 700 11px/1 var(--display); color: #33261a; background: url(../art/icon-medal-gold.png) center / contain no-repeat; image-rendering: pixelated; }
.pd-medal.r2 { background-image: url(../art/icon-medal-silver.png); }
.pd-medal.r3 { background-image: url(../art/icon-medal-bronze.png); }
.pd-crown { margin-left: auto; padding-left: 10px; border-left: 1px solid var(--rule-soft); }
.pd-glyph { color: var(--gilt); font-size: 16px; line-height: 1; }
.pd-crown img { width: 24px; height: 24px; image-rendering: pixelated; }
@media (max-width: 520px) {
  .pd-crown { margin-left: 0; padding-left: 0; border-left: 0; }
}
/* === Events ===
   A running server event is a gilt-edged chip first in the hunt card's boost line; Help lists the schedule. */
[data-theme="codex"] .bchip.ev-chip { background: var(--inlay-hi); box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px var(--gilt); }
[data-theme="codex"] .bchip.ev-chip b { color: var(--rg-rubric); }
[data-theme="codex"] .bchip.ev-chip em { color: var(--ink); }
[data-theme="codex"] .bchip.ev-chip.idle { box-shadow: inset 0 0 0 1px var(--rule-soft); }
[data-theme="codex"] .bchip.ev-chip.idle b { color: var(--muted); }
[data-theme="codex"] .ev-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
[data-theme="codex"] .ev-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 4px 8px; border-left: 2px solid var(--faint); font-size: 13px; }
[data-theme="codex"] .ev-list li b { color: var(--ink); }
[data-theme="codex"] .ev-list li span { color: var(--muted); font-variant-numeric: tabular-nums; }
[data-theme="codex"] .ev-list li.on { border-left-color: var(--gold); }
[data-theme="codex"] .ev-list li.on span { color: var(--gold); }

/* === Altar === */
[data-theme="codex"] .al-odds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 4px; padding: 6px 8px; border: 1px solid var(--rule-soft); border-radius: 3px; background: var(--inlay); font-variant-numeric: tabular-nums; }
[data-theme="codex"] .al-chance { font: 700 18px/1.1 var(--sans); color: var(--ink); margin-right: 4px; }
[data-theme="codex"] .al-item { display: inline-flex; align-items: center; gap: 4px; font: 500 13.5px var(--sans); color: var(--muted); }
[data-theme="codex"] .al-item img { width: 20px; height: 20px; }
[data-theme="codex"] .al-item b { color: var(--ink); font-weight: 700; }

/* === QA night 2 === */
/* Phone friend rows: with Send coins the four buttons no longer fit beside the name; they wrap to a line of their own. */
@media (max-width: 760px) {
  [data-theme="codex"] .ph-flist.big li:not(.cg-row) { flex-wrap: wrap; row-gap: 6px; }
  [data-theme="codex"] .ph-flist.big li:not(.cg-row) .spacer { flex: 1 0 100%; height: 0; }
}
/* Coin gift sent: the server's confirmation, inline under the friend's row. */
[data-theme="codex"] .ph-flist li.cg-done { font: 500 13px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--good); }
/* Admin events: labels on the multiplier, start and hours fields; a marker on overlapping events of one kind. */
[data-theme="codex"] .adm-lab { display: inline-flex; align-items: center; gap: 4px; font: 500 13px/1 var(--sans); color: var(--muted); }
[data-theme="codex"] .ev-overlap { margin-left: 6px; padding: 1px 5px; border-radius: 3px; font: 600 11px/1.3 var(--sans); color: var(--gold); box-shadow: inset 0 0 0 1px currentColor; }
[data-theme="codex"] .cg-form .btn.primary.armed { box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 2px var(--gilt-hi), 0 0 0 1px var(--gold); }
[data-theme="codex"] .dialog p.sub:has(+ .rb-count) { text-wrap: pretty; }
/* Destructive buttons: armed (Confirm, Release, Reset) is dull garnet, a darker cousin of the wax primary with a rubric ring
   instead of gilt; the outline variant (Remove, Release…, Log out) is a vellum inlay with a garnet edge and rubric text. */
[data-theme="codex"] .btn.danger {
  color: var(--ink-l);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rg-rubric) 85%, var(--ink-l)) 0, var(--rg-rubric) 45%, color-mix(in srgb, var(--rg-rubric) 65%, var(--edge)) 100%);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 2px color-mix(in srgb, var(--rg-rubric) 55%, var(--ink-l)), 0 2px 0 var(--edge);
}
[data-theme="codex"] .btn.danger:hover:not(:disabled) { filter: brightness(1.15); }
[data-theme="codex"] .btn.danger:active:not(:disabled) { box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 2px color-mix(in srgb, var(--rg-rubric) 55%, var(--ink-l)), inset 0 2px 4px rgba(0, 0, 0, .45); }
[data-theme="codex"] .btn.danger-outline {
  color: var(--rg-rubric); background: var(--inlay);
  box-shadow: inset 0 0 0 1px var(--rg-rubric), inset 0 0 0 2px color-mix(in srgb, var(--rg-rubric) 22%, transparent), 0 1px 0 var(--rule-soft);
}
[data-theme="codex"] .btn.danger-outline:hover:not(:disabled) { filter: none; color: var(--ink-l); background: color-mix(in srgb, var(--rg-rubric) 85%, transparent); }
[data-theme="codex"] .btn.danger-outline:active:not(:disabled) { box-shadow: inset 0 0 0 1px var(--rg-rubric), inset 0 2px 3px rgba(0, 0, 0, .3); }
[data-theme="codex"] :is(.btn.danger, .btn.danger-outline):disabled { opacity: 1; filter: none; color: var(--faint-v); background: var(--inlay); box-shadow: inset 0 0 0 1px var(--rule-soft); }
@media (max-width: 760px) {
  /* Phone sub-tabs (Trainer hub, Shop, Friends) wrap onto a second line instead of running off the edge. */
  [data-theme="codex"] .subtabs { flex-wrap: wrap; overflow-x: visible; gap: 0; }
  [data-theme="codex"] .subtabs a { padding: 6px 7px; font-size: 14px; letter-spacing: .01em; }
  /* Admin command log: the JSON details wrap inside their cell so the table fits the screen. */
  [data-theme="codex"] .tbl td > code { white-space: normal; overflow-wrap: anywhere; }
  [data-theme="codex"] .tbl:has(td > code) td:first-child { min-width: 64px; }
}

/* === Awakening === */
/* Awakened forms borrow their base sprite until their own art exists (client/assets.ts): a gilt rune halo marks them.
   Stand-in item icons for shards and stones carry the same mark. */
img[src$="#awakened"] { filter: drop-shadow(0 0 1px var(--gilt-hi)) drop-shadow(0 0 3px var(--gold)) saturate(1.25) brightness(1.05); }
.walker.awk { filter: drop-shadow(0 0 1px var(--gilt-hi)) drop-shadow(0 0 3px var(--gold)) saturate(1.25); }
[data-theme="codex"] .awk-card { box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 2px var(--gilt), 0 0 0 1px var(--gilt-lo); }
[data-theme="codex"] .awk-pill { color: var(--ink-v); background: linear-gradient(180deg, var(--gilt-hi), var(--gilt)); box-shadow: inset 0 0 0 1px var(--gilt-lo); }
[data-theme="codex"] .awk-stats td .el { margin-left: 2px; }
[data-theme="codex"] .movebar .mv.awk { box-shadow: 0 0 0 1px var(--gilt-hi), 0 0 6px var(--gold); border-radius: 50%; }

/* === Diamond packs === */
/* Real-money diamond packs (client/store.ts, Shop > Diamond packs) and the admin order list. */
[data-theme="codex"] .dpack .dpack-price { color: var(--ink); font-variant-numeric: tabular-nums; }
[data-theme="codex"] .dpack .dpack-off { color: var(--good); }
[data-theme="codex"] .dpack-test { color: var(--accent); font-weight: 700; margin: 0 0 8px; }
[data-theme="codex"] .dpack-policy { color: var(--muted); margin-top: 12px; }
[data-theme="codex"] .dstore-mode { color: var(--muted); font-weight: 700; }
[data-theme="codex"] .dstore-mode.dstore-test { color: var(--accent); }
[data-theme="codex"] .dstore-mode.dstore-live { color: var(--gold); }
[data-theme="codex"] .dstore-mode.dstore-off { color: var(--faint); }
[data-theme="codex"] .dorder-paid { color: var(--good); }
[data-theme="codex"] .dorder-refunded { color: var(--bad); }
[data-theme="codex"] :is(.dorder-expired, .dorder-failed) { color: var(--faint); }

/* === Player icon === */
/* client/playericon.ts playerIcon(): the trainer standing front on, with their companion creature walking in place
   beside them (its own walk loop, drawn at 40 or 48 px). Art thread. Everything draws 1:1, or 2x for xl, so the
   pixels stay crisp; sizes: sm chat lines, md board rows, lg podium and popup, xl the player hub and profile.
   md: the trainer's front idle frame from their field sheet (1152 x 256, frame 4), cropped to the figure.
   lg / xl: the 64 px menu still, cropped to the figure. The companion overlaps the trainer's side a little and
   stands a pixel or two in front, so the pair reads as walking together. */
.picon { position: relative; display: inline-flex; align-items: flex-end; flex: none; vertical-align: middle; }
.picon-tr { display: block; flex: none; background-repeat: no-repeat; image-rendering: pixelated; }
.picon-pal { position: relative; display: grid; place-items: end center; flex: none; }
.picon-pal :is(.walker, img) { display: block; image-rendering: pixelated; }
.picon-pal.aura :is(.walker, img) { filter: drop-shadow(0 0 1px var(--gold)) drop-shadow(0 0 2px color-mix(in srgb, var(--gold) 60%, transparent)); }
.picon-sm { height: 22px; }
.picon-sm .picon-tr { width: 22px; height: 22px; background-size: 64px 64px; background-position: -21px -11px; border-radius: 2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); background-color: color-mix(in srgb, var(--ink) 8%, transparent); }
.picon-sm .picon-pal { margin-left: -3px; }
.picon-sm .picon-pal :is(.walker, img) { width: 20px; height: 20px; }
.picon-md { height: 50px; }
.picon-md .picon-tr { width: 28px; height: 50px; background-size: 1152px 256px; background-position: -274px -10px; }
.picon-md .picon-pal { margin: 0 0 -1px -12px; }
.picon-md .picon-pal :is(.walker, img) { width: 40px; height: 40px; }
.picon-lg { height: 61px; }
.picon-lg .picon-tr { width: 34px; height: 61px; background-size: 64px 64px; background-position: -15px -3px; }
.picon-lg .picon-pal { margin: 0 0 1px -12px; }
.picon-lg .picon-pal :is(.walker, img) { width: 48px; height: 48px; }
.picon-xl { height: 122px; }
.picon-xl .picon-tr { width: 68px; height: 122px; background-size: 128px 128px; background-position: -30px -6px; }
.picon-xl .picon-pal { margin: 0 0 2px -24px; }
.picon-xl .picon-pal :is(.walker, img) { width: 96px; height: 96px; }
.ph-portrait .picon { margin: auto; }
.pf-hero .tp-sprite .picon { margin: auto; }
.feed .picon-sm { margin-right: 4px; vertical-align: -6px; }
.show-card .sc-who .picon-sm { margin-right: 0; }
/* Board rows: the figure overhangs the cell padding a little so rows stay compact, and keeps the companion's room
   either way so the names line up. */
.lb-table td > .lb-who { display: flex; }
.lb-who .picon-md { width: 56px; margin: -4px 0; }
.lb-you .lb-who .picon-md { margin: -6px 0; }
.lb-rank { font-variant-numeric: lining-nums tabular-nums; }

/* === Player showcase popup === */
/* client/profilecard.ts: a trainer's profile over the page (the hunt keeps running), and the hover preview on names. */
.ppop-layer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--ink) 45%, transparent); }
.ppop { position: relative; display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(860px, calc(100vh - 32px)); padding: 0; overflow: hidden; border-radius: 2px; box-shadow: 0 0 0 1px var(--gold), 0 12px 40px color-mix(in srgb, var(--ink) 55%, transparent); }
.ppop-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); }
.ppop-bar h3 { margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 18px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.ppop-x { min-width: 30px; }
.ppop-bar .btn { white-space: nowrap; }
.ppop-body { overflow-y: auto; padding: 12px 14px 16px; display: grid; gap: 14px; overscroll-behavior: contain; }
.ppop-wait { margin: 0; color: var(--muted); }
.ppx-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 12px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
.ppx-id { display: grid; gap: 4px; min-width: 0; }
.ppx-name { display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 19px/1.15 var(--display); color: var(--ink); }
.ppx-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppx-name .gtag { color: var(--gold); font-size: 14px; }
.ppx-badge { font-size: 15px; color: var(--gold); }
.ppx-title { justify-self: start; padding: 1px 8px; border-radius: 2px; font: 700 12px/18px var(--sans); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.ppx-lv { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ppx-lv b { color: var(--accent); font-variant-numeric: tabular-nums; }
.ppx-xp { flex: 1; height: 7px; border-radius: 1px; background: color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; }
.ppx-xp i { display: block; height: 100%; background: var(--accent); }
.ppx-pct { font-variant-numeric: tabular-nums; }
.ppx-comp { font-size: 13px; color: var(--muted); }
.ppx-comp b { color: var(--ink); cursor: help; }
.ppx-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ppx-sec { display: grid; gap: 8px; }
.ppx-h { display: flex; align-items: baseline; gap: 8px; }
.ppx-h h4 { margin: 0; flex: 1; font: 700 13px/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.ppx-note { font-size: 12px; color: var(--faint); }
.ppx-none { margin: 0; color: var(--muted); font-size: 13.5px; }
.ppx-arena { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.ppx-ar b { color: var(--ink); }
.ppx-mons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ppx-mon { display: grid; justify-items: center; gap: 4px; padding: 8px 6px 7px; border-radius: 2px; text-align: center; background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); cursor: help; min-width: 0; }
.ppx-mon.aura { box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 18px color-mix(in srgb, var(--gold) 22%, transparent); }
.ppx-mon:hover, .ppx-mon:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
.ppx-mon-pic { display: grid; place-items: center; width: 64px; height: 64px; }
.ppx-mon-pic :is(.walker, img) { width: 64px; height: 64px; image-rendering: pixelated; }
.ppx-mon-name { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; }
.ppx-mon-name b { font: 700 14px/1.15 var(--display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppx-mon-els { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; }
.ppx-mon-els .el { font-size: 10.5px; padding: 0 5px; }
.ppx-mon-lv { font-size: 12px; color: var(--accent); font-weight: 700; margin-left: 2px; }
.ppx-mon .rpills { justify-content: center; flex-wrap: wrap; gap: 3px; }
.ppx-mon .rpills .rp { font-size: 10.5px; }
.ppx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ppx-tile { display: grid; justify-items: center; gap: 3px; padding: 9px 6px; border-radius: 2px; text-align: center; background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--muted) 40%, transparent); }
.ppx-tile b { font: 700 20px/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ppx-tile b small { font-size: 13px; color: var(--muted); }
.ppx-tile span { font: 700 11.5px/1.2 var(--pixel); letter-spacing: .05em; color: var(--muted); }
.ppx-tile.t-acc { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 -2px 0 var(--accent); }
.ppx-tile.t-gold { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent), inset 0 -2px 0 var(--gold); }
.ppx-tile.t-good { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 45%, transparent), inset 0 -2px 0 var(--good); }
.ppx-tile.t-bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent), inset 0 -2px 0 var(--bad); }
.ppx-prog { margin: 0; display: grid; border-radius: 2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.ppx-prog > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.ppx-prog > div:first-child { border-top: 0; }
.ppx-prog dt { color: var(--muted); }
.ppx-prog dd { margin: 0; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ppx-prog dd.ppx-coins { color: var(--gold); }
.ppop-tip { position: fixed; z-index: 70; width: 250px; padding: 8px 10px; display: grid; gap: 6px; pointer-events: none; border-radius: 2px; box-shadow: 0 0 0 1px var(--gold), 0 6px 18px color-mix(in srgb, var(--ink) 40%, transparent); }
.ppop-tip[hidden] { display: none; }
.ppt-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ppt-head .ppx-name { font-size: 15px; }
.ppt-sub { font-size: 12px; color: var(--muted); }
.ppt-mons { display: flex; flex-wrap: wrap; gap: 4px; }
.ppt-mon { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ppt-mon.aura { box-shadow: inset 0 0 0 1px var(--gold); }
.ppt-mon :is(.walker, img) { width: 30px; height: 30px; image-rendering: pixelated; }
.ppt-mon .gr { position: absolute; right: -3px; bottom: -3px; transform: scale(.8); }
.ppt-stats { display: flex; gap: 10px; font-size: 12px; color: var(--muted); }
.ppt-stats b { color: var(--ink); }

/* Ranks: the top three as podium cards; every row is the player icon, name and level. */
.lb-who .picon { margin-right: 2px; }
.lb-nm { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.lb-lv { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.lb-pod { display: grid; justify-items: center; gap: 3px; padding: 10px 6px 9px; border-radius: 2px; text-align: center; cursor: pointer; min-width: 0; background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent); }
.lb-pod.r1 { padding-top: 18px; box-shadow: inset 0 0 0 1px var(--gold), inset 0 3px 0 var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.lb-pod.r2 { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 70%, transparent), inset 0 3px 0 var(--muted); }
.lb-pod.r3 { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), inset 0 3px 0 var(--accent); }
.lb-pod.me .lb-pod-name b { text-decoration: underline; text-decoration-color: var(--gold); }
.lb-pod:hover, .lb-pod:focus-visible { filter: brightness(1.05); outline: 1px solid var(--accent); outline-offset: -1px; }
.lb-pod-rank { font: 700 11.5px/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lb-pod.r1 .lb-pod-rank { color: var(--gold); }
.lb-pod-name { display: flex; align-items: baseline; justify-content: center; gap: 4px; max-width: 100%; font: 700 15px/1.15 var(--display); color: var(--ink); }
.lb-pod-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pod-name .gtag { color: var(--muted); font-size: 12px; }
.lb-pod-lv { font-size: 12px; color: var(--muted); }
.lb-pod-val { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.lb-pod-val .lb-mon { margin: -4px 0; }

/* Podium art (art thread): each place is a small vellum leaf, the winner's in the pass card's gilt-and-garnet frame,
   and each trainer stands inside a laurel wreath in their medal's metal (art/rig3d/icons/podium-laurel-*.ts,
   104 x 84; the icon sits centred with its feet 16 px above the wreath's bottom, over the bow). The place name
   carries its medal. */
[data-theme="codex"] .lb-pod {
  --ink: var(--ink-v); --muted: var(--muted-v); --faint: var(--faint-v); --accent: var(--rg-ink); --gold: #7a5a14; color: var(--ink);
  border: 7px solid transparent; border-radius: 0; border-image: url(codex/frame.svg) 20 / 22px stretch; padding: 8px 6px 9px;
  background: url(codex/vellum.svg) 0 0 / 300px, radial-gradient(ellipse at 50% 35%, var(--vellum-hi) 0, var(--vellum) 60%, var(--vellum-lo) 100%);
  box-shadow: inset 0 0 16px rgba(90, 60, 25, .18), 0 4px 12px rgba(0, 0, 0, .35);
}
[data-theme="codex"] .lb-pod.r1 { padding-top: 18px; border: 12px solid transparent; border-image: url(../frames/pass.png) 12 round; background: url(codex/vellum.svg) 0 0 / 300px, radial-gradient(ellipse at 50% 30%, #fbf0cf 0, var(--vellum-hi) 45%, var(--vellum) 100%); }
[data-theme="codex"] .lb-pod:hover, [data-theme="codex"] .lb-pod:focus-visible { filter: brightness(1.04); outline: 1px solid var(--rg-ink); outline-offset: 2px; }
.lb-pod .picon-lg { box-sizing: border-box; width: 104px; height: 84px; padding: 7px 0 16px; justify-content: center; background: url(../art/podium-laurel-gold.png) center / 104px 84px no-repeat; image-rendering: pixelated; }
.lb-pod.r2 .picon-lg { background-image: url(../art/podium-laurel-silver.png); }
.lb-pod.r3 .picon-lg { background-image: url(../art/podium-laurel-bronze.png); }
.lb-pod-rank { display: inline-flex; align-items: center; gap: 5px; }
.lb-pod-rank::before { content: ""; width: 16px; height: 16px; flex: none; background: url(../art/icon-medal-gold.png) center / contain no-repeat; }
.lb-pod.r2 .lb-pod-rank::before { background-image: url(../art/icon-medal-silver.png); }
.lb-pod.r3 .lb-pod-rank::before { background-image: url(../art/icon-medal-bronze.png); }
[data-theme="codex"] .lb-pod.r1 .lb-pod-rank { color: var(--gold); }

/* Player hub: the Showcase tab (companion, six showcase slots, your creatures). */
.ph-show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; align-items: start; }
.ph-show .ph-picks { grid-column: 1 / -1; }
.ph-comp-row { display: flex; align-items: center; gap: 12px; }
.ph-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ph-slot { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 112px; padding: 6px; border-radius: 2px; text-align: center; min-width: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ph-slot.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ph-slot b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13.5px/1.15 var(--display); color: var(--ink); }
.ph-slot-n { font: 700 18px/1 var(--display); color: var(--faint); }
.ph-slot-sub { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.ph-slot-pic, .ph-pick-pic { display: grid; place-items: center; cursor: pointer; }
.ph-slot-pic :is(.walker, img) { width: 48px; height: 48px; image-rendering: pixelated; }
.ph-picks .ph-h { flex-wrap: wrap; }
.ph-picks .fsearch { margin-left: auto; }
.ph-picklist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 10px; max-height: 420px; overflow-y: auto; }
.ph-pick { display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 2px; border-radius: 2px; min-width: 0; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 10%, transparent); }
.ph-pick.on { background: color-mix(in srgb, var(--gold) 9%, transparent); }
.ph-pick.comp { box-shadow: inset 3px 0 0 var(--accent); }
.ph-pick-pic :is(.walker, img) { width: 34px; height: 34px; image-rendering: pixelated; }
.ph-pick-nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; }
.ph-pick-nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.ph-pick-lv { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ph-pick .btn.on { color: var(--ink); background: color-mix(in srgb, var(--gold) 45%, transparent); box-shadow: inset 0 0 0 1px var(--gold); }
/* Art polish (art thread): the profile popup is a player card, so it wears the gilt-and-garnet pixel frame of the
   season pass card (public/frames/pass.png, 12 px slices) instead of the plain panel frame. The trainer and the
   creatures on show stand in small dark portrait windows, so the sprites pop off the vellum the way they do on the
   Trainer page; an Aura creature's window has a faint gold-violet glow. */
[data-theme="codex"] .ppop.panel { border: 12px solid transparent; border-image: url(../frames/pass.png) 12 round; image-rendering: pixelated; }
[data-theme="codex"] .ppop.panel > * { image-rendering: auto; }
.ppx-head > .picon, .ppt-head > .picon { padding: 7px 9px 3px; border-radius: 2px; background: radial-gradient(ellipse 70% 60% at 50% 72%, #4a3a2a, #2a2018 70%, #1e1610); box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px #2a1d12, inset 0 0 10px rgba(0, 0, 0, .45); }
.ppt-head > .picon { padding: 4px 6px 2px; }
.ppx-mon-pic { width: 76px; height: 68px; border-radius: 2px; background: radial-gradient(ellipse 70% 55% at 50% 74%, #4a3a2a, #2a2018 72%, #1e1610); box-shadow: inset 0 0 0 1px var(--gilt-lo), inset 0 0 0 2px #2a1d12, inset 0 0 10px rgba(0, 0, 0, .45); }
.ppx-mon.aura .ppx-mon-pic { background: radial-gradient(ellipse 70% 55% at 50% 70%, #6a4c8a, #3a2850 60%, #1e1626); box-shadow: inset 0 0 0 1px var(--gilt), inset 0 0 0 2px #2a1d12, inset 0 0 12px rgba(255, 220, 140, .25); }
.ppt-mon { background: radial-gradient(ellipse 70% 55% at 50% 72%, #4a3a2a, #241a12 75%); box-shadow: inset 0 0 0 1px var(--gilt-lo); }
.ppt-mon.aura { background: radial-gradient(ellipse 70% 55% at 50% 70%, #6a4c8a, #2e2040 75%); box-shadow: inset 0 0 0 1px var(--gilt); }
.hub-svg { display: inline-grid; place-items: center; width: 16px; height: 16px; vertical-align: -3px; }
.hub-svg svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .ppop-layer { padding: 8px; place-items: stretch center; }
  .ppop { max-height: calc(100vh - 16px); }
  .ppx-head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .ppx-name, .ppx-lv, .ppx-acts { justify-content: center; }
  .ppx-title { justify-self: center; }
  .ppx-mons, .ppx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-podium { gap: 5px; }
  .ph-show { grid-template-columns: minmax(0, 1fr); }
  .ph-picklist { grid-template-columns: minmax(0, 1fr); max-height: none; }
}

/* === Purchase complete === */
/* client/store.ts drawPurchase(): back from Stripe Checkout, a gilt-framed leaf over the game (the hunt keeps running).
   Gold double rule with a garnet inner hairline; the diamond sits in a seal with a slow gold glint and five sparkles.
   Phases: confirming (spinning star on the count), paid (count-up), late, failed, refunded, missing. */
.pdone-layer { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--ink) 40%, transparent); animation: pdone-fade .25s ease-out; }
.pdone { position: relative; display: grid; justify-items: center; gap: 6px; width: min(360px, 100%); padding: 22px 22px 18px; text-align: center; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent), 0 0 0 5px color-mix(in srgb, var(--gold) 70%, transparent), inset 0 0 0 5px transparent, inset 0 0 0 6px color-mix(in srgb, var(--bad) 55%, transparent), 0 14px 44px color-mix(in srgb, var(--ink) 55%, transparent);
  animation: pdone-rise .32s cubic-bezier(.2, .8, .3, 1); }
.pdone-x { position: absolute; top: 8px; right: 8px; min-width: 28px; min-height: 28px; height: 28px; padding: 0; }
.pdone-eye { margin: 0; font: 700 13px/1.2 var(--pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--bad); }
.pdone-seal { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin: 4px 0 2px; border-radius: 50%; overflow: visible;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--gold) 34%, transparent), color-mix(in srgb, var(--gold) 8%, transparent) 62%, transparent 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 75%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--gold) 45%, transparent); }
.pdone-seal img { position: relative; z-index: 1; width: 56px; height: 56px; image-rendering: pixelated; filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--ink) 40%, transparent)); }
.pdone-seal::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--gold) 55%, transparent) 50%, transparent 62%) -140% 0 / 250% 100% no-repeat; mix-blend-mode: screen; }
.pdone-paid .pdone-seal::after { animation: pdone-glint 3.2s ease-in-out .5s infinite; }
.pdone-seal i { position: absolute; z-index: 3; width: 9px; height: 9px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, var(--gold) 0 18%, transparent 20%), linear-gradient(var(--gold), var(--gold)) center / 1.5px 100% no-repeat, linear-gradient(var(--gold), var(--gold)) center / 100% 1.5px no-repeat;
  animation: pdone-twinkle 2.6s ease-in-out infinite; }
.pdone-seal i:nth-child(1) { top: 2px; left: 12px; animation-delay: .3s; }
.pdone-seal i:nth-child(2) { top: 14px; right: -2px; width: 7px; height: 7px; animation-delay: 1.1s; }
.pdone-seal i:nth-child(3) { bottom: 6px; right: 6px; animation-delay: 1.8s; }
.pdone-seal i:nth-child(4) { bottom: 10px; left: -3px; width: 7px; height: 7px; animation-delay: .7s; }
.pdone-seal i:nth-child(5) { top: -6px; right: 30px; width: 6px; height: 6px; animation-delay: 2.2s; }
.pdone-name { margin: 0; font: 700 22px/1.15 var(--display); color: var(--ink); }
.pdone-n { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font: 700 34px/1.1 var(--display); font-variant-numeric: lining-nums tabular-nums; color: var(--gold); text-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 55%, transparent); }
.pdone-confirming .pdone-n, .pdone-late .pdone-n { color: var(--muted); text-shadow: none; }
.pdone-spin { display: inline-block; font-size: 22px; color: var(--gold); animation: pdone-spin 1.6s linear infinite; }
.pdone-bal { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 2px 10px; border-radius: 2px; font: 700 14px/20px var(--sans); font-variant-numeric: lining-nums tabular-nums; color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.pdone-bal img { width: 16px; height: 16px; image-rendering: pixelated; }
.pdone-line { margin: 2px 0 0; max-width: 28ch; font-style: italic; color: var(--muted); }
.pdone-failed .pdone-eye, .pdone-refunded .pdone-eye, .pdone-missing .pdone-eye { color: var(--faint); }
.pdone-failed .pdone-seal img, .pdone-refunded .pdone-seal img, .pdone-missing .pdone-seal img { filter: grayscale(.85) opacity(.6); }
.pdone-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
@keyframes pdone-fade { from { opacity: 0; } }
@keyframes pdone-rise { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes pdone-glint { 0% { background-position: -140% 0; } 45%, 100% { background-position: 240% 0; } }
@keyframes pdone-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 40% { opacity: .95; transform: scale(1) rotate(45deg); } 70% { opacity: 0; transform: scale(.6) rotate(90deg); } }
@keyframes pdone-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pdone-layer, .pdone, .pdone-paid .pdone-seal::after, .pdone-spin { animation: none; }
  .pdone-seal i { animation: none; opacity: .7; }
}

/* === Eggs and app bar fit (eggs thread) ===
   App bar: every open link shows while the bar has room (fitNav in client/ui.ts measures it); only what doesn't
   fit folds into More, and More hides when nothing is folded or locked. Tab icons sit in a 24 px box, painted art
   or the line SVG alike. Player card doors show their 32 px art at 32 px. Eggs: a tile per egg, a framed
   preview of what it hatches, and incubator chambers. */
.nav > a.ovf, .nav .navmore.gone { display: none; }
[data-theme="codex"] .appbar .nav > a { display: inline-flex; }
[data-theme="codex"] .appbar .nav > a.ovf { display: none; }
[data-theme="codex"] .appbar .nav .navmore { display: inline-flex; }
[data-theme="codex"] .appbar .nav .navmore.gone { display: none; }
[data-theme="codex"] .appbar.nav-measure .nav > a.ovf, [data-theme="codex"] .appbar.nav-measure .nav .navmore.gone { display: inline-flex; }
[data-theme="codex"] .appbar.nav-measure .nav, [data-theme="codex"] .appbar.nav-measure .trainer { flex: none; }
[data-theme="codex"] .appbar .nav > a { gap: 6px; padding-left: 9px; }
[data-theme="codex"] .appbar .nav > a > :is(svg, img.ui-ic) { display: block; width: 24px; height: 24px; flex: none; image-rendering: pixelated; }
[data-theme="codex"] .appbar .nav > a > svg { padding: 2px; color: var(--muted); }
[data-theme="codex"] .appbar .nav > a.on > svg { color: var(--bad); }
[data-theme="codex"] .navmore .menu a > :is(svg, img.ui-ic) { width: 24px; height: 24px; flex: none; image-rendering: pixelated; }

[data-theme="codex"] .pc-doors { grid-template-columns: repeat(3, 34px); gap: 1px; padding-right: 5px; }
[data-theme="codex"] .pc-door { width: 34px; height: 34px; }
[data-theme="codex"] .pc-door > :is(img.ui-ic, svg) { width: 32px; height: 32px; image-rendering: pixelated; }
[data-theme="codex"] .pc-door > svg { padding: 5px; }

.shopsub .egg-lock, .subtabs .egg-lock, .egg-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.egg-lock svg { width: 14px; height: 14px; }
.egg-lock.sm { font-size: 11.5px; }
.egg-lock.sm svg { width: 12px; height: 12px; }
.egg-ic.big { width: 68px; height: 88px; background-size: 68px 88px; }

[data-theme="codex"] .egg-hall { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }
[data-theme="codex"] .egg-list { display: grid; gap: 8px; }
[data-theme="codex"] .egg-tile {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 9px 12px; border: 0; border-radius: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: color-mix(in srgb, var(--gold) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
[data-theme="codex"] .egg-tile:hover { background: color-mix(in srgb, var(--gold) 13%, transparent); }
[data-theme="codex"] .egg-tile.on { background: color-mix(in srgb, var(--gold) 16%, transparent); box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent); }
[data-theme="codex"] .egg-tile.on::before, [data-theme="codex"] .egg-tile.on::after, [data-theme="codex"] .egg-peek::before, [data-theme="codex"] .egg-peek::after {
  content: ''; position: absolute; top: -3px; width: 7px; height: 7px; background: var(--bad); transform: rotate(45deg); box-shadow: 0 0 0 1px var(--gold);
}
[data-theme="codex"] .egg-tile.on::before, [data-theme="codex"] .egg-peek::before { left: -3px; }
[data-theme="codex"] .egg-tile.on::after, [data-theme="codex"] .egg-peek::after { right: -3px; }
[data-theme="codex"] .egg-tn { display: grid; gap: 3px; min-width: 0; }
[data-theme="codex"] .egg-tn b { font: 700 17px/1.1 var(--display); }
[data-theme="codex"] .egg-tp { display: flex; align-items: center; gap: 4px; }
[data-theme="codex"] .egg-plus { margin-left: -3px; color: var(--muted); font-weight: 700; }
[data-theme="codex"] .egg-padlock { color: var(--faint); }
[data-theme="codex"] .egg-padlock svg { width: 18px; height: 18px; }
[data-theme="codex"] .is-locked .egg-tile .egg-ic, [data-theme="codex"] .is-locked .egg-stage .egg-ic { filter: saturate(.45) brightness(.82); }
[data-theme="codex"] .is-locked .egg-tile .egg-tn { opacity: .78; }

[data-theme="codex"] .egg-peek { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px 20px; padding: 16px 18px; border-radius: 0; box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }
[data-theme="codex"] .egg-peek::before, [data-theme="codex"] .egg-peek::after { top: 2px; }
[data-theme="codex"] .egg-peek::before { left: 2px; }
[data-theme="codex"] .egg-peek::after { right: 2px; }
[data-theme="codex"] .egg-stage { display: grid; place-items: center; min-height: 132px; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 30%, transparent), transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
[data-theme="codex"] .egg-stage .egg-ic { animation: egg-rock 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes egg-rock { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-4deg); } 84% { transform: rotate(3deg); } 92% { transform: rotate(-1deg); } }
@media (prefers-reduced-motion: reduce) { [data-theme="codex"] .egg-stage .egg-ic { animation: none; } }
[data-theme="codex"] .egg-facts h4 { margin: 0; font: 700 22px/1.1 var(--display); color: var(--ink); text-transform: none; letter-spacing: 0; }
[data-theme="codex"] .egg-pills { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 10px; }
[data-theme="codex"] .egg-odds { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
[data-theme="codex"] .egg-odds li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 64px; gap: 10px; align-items: center; }
[data-theme="codex"] .egg-odds b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
[data-theme="codex"] .eo-bar { height: 9px; background: color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }
[data-theme="codex"] .eo-bar i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 70%, var(--bad)), var(--gold)); }
[data-theme="codex"] .egg-hatch { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
[data-theme="codex"] .egg-hatch h5 { margin: 0; font: 700 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
[data-theme="codex"] .egg-hatch .row { flex-wrap: wrap; gap: 8px; }
[data-theme="codex"] .eh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 10px; }
[data-theme="codex"] .eh { display: grid; justify-items: center; gap: 2px; padding: 6px 4px 7px; background: color-mix(in srgb, var(--gold) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent); text-align: center; }
[data-theme="codex"] .eh :is(img, .walker) { width: 64px; height: 64px; image-rendering: pixelated; }
[data-theme="codex"] .eh b { font-size: 13px; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="codex"] .eh-p { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
[data-theme="codex"] .egg-peek .buyrow { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0; }
[data-theme="codex"] .egg-peek .buyrow .egg-lock { font-size: 15px; }
[data-theme="codex"] .egg-peek .buyrow .egg-lock svg { width: 18px; height: 18px; }

[data-theme="codex"] .incubators { padding: 12px 14px 14px; }
[data-theme="codex"] .inc-row { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 290px)); gap: 10px; }
[data-theme="codex"] .inc-ch { display: grid; justify-items: center; align-content: start; gap: 5px; padding: 10px 10px 9px; min-height: 172px; background: color-mix(in srgb, var(--gold) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), inset 0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent); text-align: center; }
[data-theme="codex"] .inc-ch.ready { box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 3px color-mix(in srgb, var(--gold) 40%, transparent); }
[data-theme="codex"] .inc-ch.empty, [data-theme="codex"] .inc-ch.locked { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent); }
[data-theme="codex"] .inc-nest { display: grid; place-items: center; width: 100%; height: 96px; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 22%, transparent), transparent); color: var(--faint); }
[data-theme="codex"] .inc-nest svg { width: 22px; height: 22px; }
[data-theme="codex"] .egg-ghost { width: 34px; height: 44px; border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--faint) 70%, transparent); }
[data-theme="codex"] .inc-cap { display: grid; gap: 1px; font-size: 12.5px; }
[data-theme="codex"] .inc-cap b { font: 700 15px/1.1 var(--display); color: var(--ink); }
[data-theme="codex"] .inc-ch .incbar { width: 100%; height: 8px; margin: 2px 0 0; border-radius: 0; background: color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }
[data-theme="codex"] .inc-ch .incbar > i { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 70%, var(--bad)), var(--gold)); }
[data-theme="codex"] .inc-at { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
[data-theme="codex"] .inc-may { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 100%; }
[data-theme="codex"] .eh.sm { padding: 0; background: none; box-shadow: none; }
[data-theme="codex"] .eh.sm :is(img, .walker) { width: 32px; height: 32px; }
@media (max-width: 900px) {
  [data-theme="codex"] .egg-hall { grid-template-columns: minmax(0, 1fr); }
  [data-theme="codex"] .egg-peek { grid-template-columns: 96px minmax(0, 1fr); padding: 12px; }
  [data-theme="codex"] .egg-stage { min-height: 104px; }
  [data-theme="codex"] .eh-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}
@media (max-width: 760px) {
  [data-theme="codex"] .inc-row { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
  [data-theme="codex"] .inc-ch { min-height: 0; padding: 6px 6px 7px; gap: 3px; }
  [data-theme="codex"] .inc-nest { height: 56px; }
  [data-theme="codex"] .inc-nest .egg-ic.big { width: 34px; height: 44px; background-size: 34px 44px; }
  [data-theme="codex"] .inc-cap b { font-size: 13px; }
  [data-theme="codex"] .inc-may { display: none; }
  [data-theme="codex"] .egg-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  [data-theme="codex"] .egg-tile { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px; padding: 8px 4px; text-align: center; }
  [data-theme="codex"] .egg-tile .egg-tp, [data-theme="codex"] .egg-padlock { display: none; }
  [data-theme="codex"] .egg-tn { justify-items: center; }
  [data-theme="codex"] .egg-tn b { font-size: 14px; }
  [data-theme="codex"] .egg-tn .coinv { font-size: 12px; }
  [data-theme="codex"] .egg-peek { grid-template-columns: 76px minmax(0, 1fr); gap: 10px 12px; }
  [data-theme="codex"] .egg-stage { min-height: 96px; }
  [data-theme="codex"] .egg-facts .row { flex-wrap: wrap; }
  [data-theme="codex"] .egg-odds li { grid-template-columns: 40px minmax(0, 1fr) 56px; gap: 6px; }
}

/* ---- Diamond incubators: six chambers in one row on wide screens; the diamond buy button ---- */
@media (min-width: 1100px) {
  [data-theme="codex"] .inc-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
[data-theme="codex"] .inc-ch .inc-dia { display: inline-flex; align-items: center; gap: 5px; }
[data-theme="codex"] .inc-ch .inc-dia img { width: 14px; height: 14px; }

/* === Egg cradle (art thread) ===
   Each incubator chamber holds its egg in a straw-lined cradle (art/rig3d/parts/eggs.ts): the back layer behind the
   egg, the front rim over its lower part. Both are drawn at the egg's own zoom, so they sit 6 px out from the
   68 x 88 egg's box and 44 px down it (half that with the 34 x 44 egg on phones). An empty chamber shows the empty
   nest. */
[data-theme="codex"] .inc-ch:not(.locked) .inc-nest { position: relative; isolation: isolate; }
[data-theme="codex"] .inc-ch:not(.locked) .inc-nest::before, [data-theme="codex"] .inc-ch:not(.locked) .inc-nest::after {
  content: ''; position: absolute; left: calc(50% - 40px); top: 50%; width: 80px; height: 48px;
  background: url(../art/prop-incubator-cradle-back.png) 0 0 / 80px 48px no-repeat; image-rendering: pixelated; pointer-events: none;
}
[data-theme="codex"] .inc-ch:not(.locked) .inc-nest::after { z-index: 2; background-image: url(../art/prop-incubator-cradle-front.png); }
[data-theme="codex"] .inc-nest .egg-ic { position: relative; z-index: 1; }
[data-theme="codex"] .inc-ch.empty .egg-ghost { display: none; }
@media (max-width: 760px) {
  [data-theme="codex"] .inc-ch:not(.locked) .inc-nest::before, [data-theme="codex"] .inc-ch:not(.locked) .inc-nest::after {
    left: calc(50% - 20px); top: 50%; width: 40px; height: 24px; background-size: 40px 24px;
    background-image: url(../art/prop-incubator-cradle-back@40.png);
  }
  [data-theme="codex"] .inc-ch:not(.locked) .inc-nest::after { background-image: url(../art/prop-incubator-cradle-front@40.png); }
  /* The 34 x 44 egg here is the drawn 34 px egg, not the 68 px one halved. */
  [data-theme="codex"] .inc-nest .egg-ic.big.bl2 { background-image: url(../art/icon-egg-bl2.png); }
  [data-theme="codex"] .inc-nest .egg-ic.big.bl3 { background-image: url(../art/icon-egg-bl3.png); }
  [data-theme="codex"] .inc-nest .egg-ic.big.bl4 { background-image: url(../art/icon-egg-bl4.png); }
}

/* === Paid boosts === */
/* Shop: one card per boost with a button per length; the Late Joiner card's progress to its target. Chips on the hunt card. */
[data-theme="codex"] .pb-tiers { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
[data-theme="codex"] .pb-tiers .btn { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
[data-theme="codex"] .pb-prog { flex: 1 1 100%; height: 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--faint); overflow: hidden; }
[data-theme="codex"] .pb-prog > i { display: block; height: 100%; min-width: 2px; background: var(--gold); }
[data-theme="codex"] .bchip.paidb { box-shadow: inset 0 0 0 1px var(--gold); }

/* === Market rules === */
/* client/pages.ts marketPane: "n/20 listings · 15% fee" beside Refresh; per-unit price column. */
[data-theme="codex"] .m-cap { margin-left: auto; margin-right: 8px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-theme="codex"] .mrow .mprice { flex-wrap: wrap; }
[data-theme="codex"] .mrow .mprice .each { color: var(--faint); }

/* Player hub: the Card tab's look panel and slot order, and the Settings tab's account section (client/account-settings.ts). */
.ph-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ph-slot-acts { display: flex; gap: 3px; }
.ph-slot-acts .btn[disabled] { opacity: .35; }
.ph-seg.wrap { flex-wrap: wrap; justify-content: flex-end; }
.ph-seg.wrap button { width: auto; display: inline-flex; align-items: center; gap: 4px; }
.ph-look .ph-set { padding: 7px 0; }
.ac-only { font: 700 11.5px var(--pixel); color: var(--faint); letter-spacing: .04em; }
.ac-private .ph-tile b { font-size: 19px; }
.ac-mail { font-variant-numeric: tabular-nums; color: var(--ink); }
.ac-ok, .ac-no { margin: 0 10px 0 8px; font: 700 11.5px var(--pixel); color: var(--good); }
.ac-no { color: var(--faint); }
.ac-acct .ph-ctl .btn.tiny { margin: 0 8px; }
.ac-btns { display: inline-flex; gap: 6px; }
.ac-acct .ph-ctl { align-items: center; }
.ac-danger { margin-top: 10px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--bad) 55%, transparent); }
.ac-danger h5 { margin: 4px 0 0; font: 700 12.5px var(--pixel); letter-spacing: .05em; color: var(--bad); text-transform: uppercase; }
.ac-danger .ph-set p { max-width: 34ch; }
.ac-lead { margin: 4px 0 10px; color: var(--ink); line-height: 1.45; }
.ac-field { display: grid; gap: 4px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.ac-field input { width: 100%; box-sizing: border-box; }
.ac-err { margin: 0; color: var(--bad); font-size: 13px; }
.ac-hold { z-index: 120; }
@media (max-width: 760px) { .ph-show { grid-template-columns: 1fr; } .ph-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- Icons 24px (design) ---------- */
/* Art renders every ui-* icon natively at 24/32/48/64 px; 16px slots looked muddy, so the small ones show the 24px render. */
.fieldtools .ft > img.ui-ic, .fieldtools .ft > svg { width: 24px; height: 24px; image-rendering: pixelated; }
.slot .peek-btn, .slot.bench .peek-btn { width: 28px; height: 28px; }
.slot .peek-btn > img.ui-ic, .slot.lead .lead-top .peek-btn > img.ui-ic, .slot.bench .peek-btn > img.ui-ic { width: 24px; height: 24px; image-rendering: pixelated; }
.subtabs img.hub-ti, .subtabs .hub-svg, .subtabs .hub-svg svg { width: 24px; height: 24px; image-rendering: pixelated; }
.subtabs img.hub-ti, .subtabs .hub-svg { flex: none; margin: 0; }
/* Centre the taller icon on the label and trim the padding so the tab keeps its height. */
.subtabs a:has(> .hub-ti) { display: inline-flex; align-items: center; gap: 6px; padding-top: 5px; padding-bottom: 5px; }

/* === Partner streams === */
/* client/streams.ts: the Live chip on the boosts line, the live list under it, and the stream dock. */
[data-theme="codex"] .bchip.lv-chip { cursor: pointer; align-items: center; gap: 4px; font: inherit; }
[data-theme="codex"] .bchip.lv-chip.on { box-shadow: inset 0 0 0 1px var(--good); }
[data-theme="codex"] .bchip.lv-chip.on em { color: var(--good); }
.lv-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); flex: none; }
.lv-dot.off { background: var(--faint); }
.lv-pop { position: fixed; z-index: 60; padding: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; color: var(--ink); }
.lv-pop .lv-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px 4px; }
.lv-pop .lv-hd span { color: var(--muted); font-size: 12px; }
.lv-row { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 4px; border: 0; border-radius: 2px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lv-row:hover, .lv-row.on { background: rgba(0, 0, 0, .07); }
.lv-row.on { box-shadow: inset 0 0 0 1px var(--good); }
.lv-th { flex: none; width: 96px; height: 54px; border-radius: 2px; background: rgba(0, 0, 0, .18); overflow: hidden; }
.lv-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.25; }
.lv-nm { display: flex; justify-content: space-between; gap: 6px; }
.lv-nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-v { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-tt { color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lv-gm { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-dock { position: fixed; z-index: 55; display: flex; flex-direction: column; padding: 0; min-width: 328px; min-height: 226px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); resize: both; overflow: hidden; color: var(--ink); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.lv-dhd { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; cursor: move; user-select: none; touch-action: none; font-size: 13px; border-bottom: 1px solid var(--line); }
.lv-dhd b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lv-dhd .lv-on { color: var(--good); font-weight: 600; white-space: nowrap; }
.lv-dhd .lv-ext { margin-left: auto; color: var(--muted); text-decoration: none; padding: 0 4px; }
.lv-dhd .lv-x { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; padding: 0 4px; cursor: pointer; }
.lv-dhd .lv-ext:hover, .lv-dhd .lv-x:hover { color: var(--ink); }
.lv-body { flex: 1; min-height: 0; background: #000; }
.lv-embed, .lv-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.lv-adm-on { color: var(--good); }