/* VibeRPGSimulator: a 16-bit JRPG menu look. Blue framed windows, a pixel font for game text, a readable body font
   for prose, and Resurrect 64 colours shared with the sprites. battle.css is appended after this file. */

@font-face {
  font-family: "Pixelify Sans";
  src: url("/assets/fonts/pixelify-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --night: #0e1027;
  --ink: #0b0c1c;
  --win-top: #2f3d8f;
  --win-mid: #22296e;
  --win-bottom: #171c4c;
  --win-edge: #e8ecff;
  --win-line: #8790c8;
  --well: #11163f;
  --text: #ffffff;
  --muted: #c7d0f0;
  --gold: #ffd34d;
  --link: #8fd3ff;
  --hp: #e83b3b;
  --mp: #4d9be6;
  --xp: #91db69;
  --focus: #ffd34d;
  --font-pixel: "Pixelify Sans", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* 7x7 window frame: dark outline, white edge, lavender inner line, stepped corners. Drawn at 2x. */
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath fill='%230b0c1c' d='M1 0h5v1H1zM0 1h1v5H0zM6 1h1v5H6zM1 6h5v1H1z'/%3E%3Cpath fill='%23e8ecff' d='M1 1h5v1H1zM1 5h5v1H1zM1 2h1v3H1zM5 2h1v3H5z'/%3E%3Cpath fill='%238790c8' d='M2 2h3v1H2zM2 4h3v1H2zM2 3h1v1H2zM4 3h1v1H4z'/%3E%3C/svg%3E");
  /* Menu cursor, a stepped white triangle. */
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' shape-rendering='crispEdges'%3E%3Cpath fill='%230b0c1c' d='M1 1h1v9H1zM2 2h1v7H2zM3 3h1v5H3zM4 4h1v3H4zM5 5h1v1H5z'/%3E%3Cpath fill='%23ffffff' d='M0 0h1v9H0zM1 1h1v7H1zM2 2h1v5H2zM3 3h1v3H3zM4 4h1v1H4z'/%3E%3C/svg%3E");
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23f04f78' d='M1 0h2v1H1zM4 0h2v1H4zM0 1h7v2H0zM1 3h5v1H1zM2 4h3v1H2zM3 5h1v1H3z'/%3E%3Cpath fill='%23fca790' d='M1 1h1v1H1z'/%3E%3C/svg%3E");
  --dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%230e1027'/%3E%3Cpath fill='%23121638' d='M0 0h1v1H0zM2 2h1v1H2z'/%3E%3C/svg%3E");
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--night) var(--dither) repeat;
  background-size: 8px 8px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* { box-sizing: border-box; }
body { margin: 0; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
img, video, svg { max-width: 100%; }
img, video { height: auto; }
.sprite { image-rendering: pixelated; }
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 2px; }
p { margin: 0 0 .9rem; }
p:last-child { margin-bottom: 0; }
figure { margin: 0; }
code { font-family: var(--font-code); font-size: .9em; }
h1, h2, h3 { font-family: var(--font-pixel); font-weight: 700; line-height: 1.15; letter-spacing: .01em; text-wrap: balance; text-shadow: 2px 2px 0 var(--ink); }
h1 { margin: 0 0 .75rem; font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { margin: 0 0 .75rem; font-size: 1.5rem; color: var(--gold); }
h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
button, input, select, textarea { font: inherit; font-size: 1rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: .4rem; font-family: var(--font-pixel); color: var(--gold); }
summary { cursor: pointer; min-height: 2.75rem; padding: .5rem 0; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 20; left: 1rem; top: -6rem; padding: .75rem 1rem; background: var(--gold); color: var(--ink); font-family: var(--font-pixel); font-weight: 700; }
.skip-link:focus { top: 1rem; }
.muted { color: var(--muted); }

/* Windows and wells */
.window, .card {
  position: relative;
  min-width: 0;
  border: 6px solid transparent;
  border-image: var(--frame) 3 / 6px stretch;
  background: linear-gradient(180deg, var(--win-top), var(--win-mid) 45%, var(--win-bottom)) padding-box;
  color: var(--text);
}
.window { padding: 1rem 1.15rem 1.15rem; }
.window + .window, .page > .window, .detail-main > .window, .related { margin-top: 1.25rem; }
.window-foot { margin-top: 1rem; font-size: .95rem; }
.note { padding: .75rem 1rem; background: var(--well); border-left: 4px solid var(--gold); color: var(--muted); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 62rem; }
.big-number { font-family: var(--font-pixel); font-size: 2.25rem; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }

/* Buttons, chips and the menu cursor */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-width: 2.75rem; min-height: 2.75rem; padding: .45rem 1rem;
  font: 700 1rem/1.2 var(--font-pixel); color: var(--text); text-decoration: none; text-shadow: 2px 2px 0 var(--ink);
  background: #3442a0; border: 2px solid var(--ink); border-radius: 0;
  box-shadow: inset 2px 2px 0 #6f7fe0, inset -2px -2px 0 #1f2766; cursor: pointer;
}
.btn:active, .btn[aria-pressed="true"] { box-shadow: inset 2px 2px 0 #1f2766, inset -2px -2px 0 #6f7fe0; }
.btn-gold { background: #f9c22b; color: var(--ink); text-shadow: none; box-shadow: inset 2px 2px 0 #fff0a8, inset -2px -2px 0 #b8860b; }
.btn-gold:active { box-shadow: inset 2px 2px 0 #b8860b, inset -2px -2px 0 #fff0a8; }
.btn-small { padding: .3rem .7rem; font-size: .9rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .35rem .8rem;
  font: 1rem/1.2 var(--font-pixel); color: var(--muted); background: var(--well); border: 2px solid #4c57a8; border-radius: 0; cursor: pointer;
}
.chip[aria-pressed="true"], .chip:has(input:checked) { color: var(--text); background: var(--win-top); border-color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.chip-sub { color: var(--muted); }
.menu { display: flex; list-style: none; margin: 0; padding: 0; }
.menu a { position: relative; display: flex; align-items: center; min-height: 2.75rem; padding: .35rem .7rem .35rem 1.35rem; font-family: var(--font-pixel); color: var(--muted); text-decoration: none; white-space: nowrap; }
.menu a::before { content: ""; position: absolute; left: .3rem; top: 50%; width: 12px; height: 20px; margin-top: -10px; background: var(--cursor) center / contain no-repeat; image-rendering: pixelated; opacity: 0; }
.menu a[aria-current="page"] { color: var(--text); }
.menu a[aria-current="page"]::before, .menu a:focus-visible::before { opacity: 1; }

/* Header, footer, breadcrumbs */
.site-header { background: var(--ink); border-bottom: 4px solid var(--win-top); }
.header-inner { max-width: 1320px; margin: 0 auto; padding: max(.5rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .25rem max(1rem, env(safe-area-inset-left)); display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; }
.brand { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; color: var(--gold); text-decoration: none; font: 700 clamp(1.15rem, 2vw, 1.4rem) var(--font-pixel); text-shadow: 2px 2px 0 #000; }
.brand img { width: 32px; height: 32px; }
.main-nav { width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #4c57a8 var(--ink); }
.main-nav .menu { width: max-content; }
.site-footer { margin-top: 3rem; border-top: 4px solid var(--win-top); background: var(--ink); color: var(--muted); font-size: .9rem; }
.footer-inner { max-width: 1320px; margin: 0 auto; padding: 1.25rem max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); display: grid; gap: .5rem; }
.footer-menu { flex-wrap: wrap; }
.breadcrumbs { margin: 0 0 1rem; font-family: var(--font-pixel); font-size: .95rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .6rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li:not(:first-child)::before { content: "/"; margin-right: .6rem; color: #6f78b8; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--muted); }
.breadcrumbs [aria-current] { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text); }

/* Page frame */
main { display: block; }
main:focus { outline: none; }
.page { max-width: 1320px; margin: 0 auto; padding: 1rem max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left)); min-width: 0; }
.page-head { margin: .5rem 0 1.5rem; }
.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-family: var(--font-pixel); color: var(--muted); }
.meta-line a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.section-head h2, .section-head p { margin: 0; }
.section-head p { font-family: var(--font-pixel); color: var(--muted); }
.related > h2, .side-block > h2 { margin-bottom: .75rem; }
.more-link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .5rem; font-family: var(--font-pixel); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }

/* Title screen */
.title-screen { position: relative; }
.title-stage { position: relative; container-type: inline-size; aspect-ratio: 320 / 168; max-height: 62vh; width: 100%; overflow: hidden; background: #1b1530 url("/assets/img/scenes/title.png") center bottom / cover no-repeat; image-rendering: pixelated; border-bottom: 4px solid var(--ink); }
.title-stage .sprite { position: absolute; height: auto; }
.title-boss { left: 5%; bottom: 3%; width: 30%; }
.title-hero { width: 20%; }
.title-hero-1 { left: 44%; bottom: 3%; }
.title-hero-2 { left: 55%; bottom: 13%; }
.title-hero-3 { left: 63%; bottom: 1%; }
.title-hero-4 { left: 72%; bottom: 12%; }
.title-hero-5 { left: 80%; bottom: 2%; }
.title-card { max-width: 46rem; margin: -2.5rem auto 0; text-align: center; z-index: 1; }
.title-card .button-row { justify-content: center; }
.title-card p { color: var(--muted); font-size: 1.1rem; }

/* Legend */
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .75rem 1rem; margin: 0; }
.legend-item { display: grid; grid-template-columns: 4.25rem 1fr; gap: .1rem .75rem; align-items: center; padding: .5rem; background: var(--well); }
.legend-item dt { display: contents; }
.legend-item dt > :first-child { grid-row: span 2; justify-self: center; }
.legend-item dt > span:last-child { font-family: var(--font-pixel); color: var(--gold); font-size: 1.1rem; }
.legend-item dd { margin: 0; color: var(--muted); font-size: .95rem; }
.legend-wide { grid-column: 1 / -1; grid-template-columns: 1fr; }
.legend-wide dt > :first-child { grid-row: auto; justify-self: start; }

/* Spellbook, filters, cards */
.home { padding-top: 1.5rem; }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.home-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-content: start; }
.search-form { margin-bottom: 1rem; }
.search-form label, .field label { display: block; margin-bottom: .35rem; font-family: var(--font-pixel); color: var(--gold); }
input[type="search"], input[type="text"], input[type="email"], select, textarea {
  display: block; width: 100%; min-height: 2.75rem; padding: .55rem .75rem; font-size: 1rem; color: var(--text);
  background: var(--ink); border: 2px solid var(--win-line); border-radius: 0;
}
input[type="search"] { min-height: 3.25rem; font-size: 1.1rem; }
input::placeholder, textarea::placeholder { color: #8f97c8; opacity: 1; }
.field { min-width: 0; margin-bottom: .9rem; }
.field-help { margin: .4rem 0 0; color: var(--muted); font-size: .9rem; }
.filters { display: grid; gap: .9rem; margin-bottom: 1.25rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .9rem 1.5rem; align-items: start; }
.chip-scroll .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; scrollbar-color: #4c57a8 var(--ink); }
.chip-scroll .chip { flex: 0 0 auto; white-space: nowrap; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: 1rem; }
.card { display: flex; flex-direction: column; gap: .6rem; padding: .8rem .9rem .9rem; background: linear-gradient(180deg, #273181, var(--win-bottom)) padding-box; }
.card-grid > .card { content-visibility: auto; contain-intrinsic-size: auto 15rem; }
.card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: start; }
.card-icon { width: 64px; height: 64px; background: var(--well); outline: 2px solid var(--ink); }
.card-hero { width: 64px; height: 64px; }
.card-title { min-width: 0; }
.card-title h2, .card-title h3 { margin: 0 0 .2rem; font-size: 1.15rem; color: var(--text); }
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: -6px; z-index: 0; }
.card :is(button, select, input, a:not(.card-link)) { position: relative; z-index: 1; }
.card:has(.card-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
.card-link:focus-visible { outline: none; }
.card-sub { margin: 0; color: var(--gold); font-family: var(--font-pixel); font-size: .95rem; }
.card-text { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.card-meta { margin: 0; color: var(--muted); font-size: .85rem; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
.level { font-family: var(--font-pixel); color: var(--xp); text-shadow: 2px 2px 0 var(--ink); }
.harness-tags { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.harness-tags li { padding: .05rem .45rem; font: .8rem/1.5 var(--font-pixel); color: var(--muted); border: 2px solid #4c57a8; background: var(--well); }
.kind-skill { --kind: #30e1b9; }
.kind-plugin { --kind: #eaaded; }
.kind-mcp_server { --kind: #8fd3ff; }
.kind-subagent { --kind: #ffa94d; }
.kind-tag { font-family: var(--font-pixel); font-size: .95rem; color: var(--kind); }
.kind-real { color: var(--muted); }
.rarity { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .3rem; font: 700 1.05rem/1 var(--font-pixel); color: var(--ink); background: var(--rarity, #9babb2); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #ffffff70, inset -2px -2px 0 #0000004d; text-shadow: none; }
.rarity-S { --rarity: #f9c22b; }
.rarity-A { --rarity: #a884f3; }
.rarity-B { --rarity: #4d9be6; }
.rarity-C { --rarity: #1ebc73; }
.rarity-unrated { --rarity: #9babb2; }
.combo-row { display: flex; flex-wrap: wrap; gap: .35rem .75rem; list-style: none; margin: 0; padding: 0; }
.combo-row li { display: flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted); }
.combo-row li:not(:last-child)::after { content: ""; width: 8px; height: 12px; background: var(--cursor) center / contain no-repeat; image-rendering: pixelated; margin-left: .2rem; }
.combo-row img { width: 32px; height: 32px; }

/* Spell, combo and class detail */
/* minmax(0, 1fr) everywhere: an auto column grows to a long install command instead of letting it scroll. */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.detail-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.detail-side .window + .window { margin-top: 0; }
.detail-main { min-width: 0; }
.detail-main > .lead { margin-bottom: 1.25rem; }
.item-window { text-align: center; }
.item-sprite { display: block; width: 128px; height: 128px; margin: .25rem auto .75rem; background: var(--well); outline: 2px solid var(--ink); }
.item-window h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.item-tags { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; }
.item-tagline { margin-top: .75rem; font-family: var(--font-pixel); color: var(--gold); font-size: 1.05rem; }
.status-list { display: grid; gap: .1rem; margin: 0; }
.status-list > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .45rem 0; border-bottom: 2px dotted #4c57a8; }
.status-list > div:last-child { border-bottom: 0; }
.status-list dt { font-family: var(--font-pixel); color: var(--gold); }
.status-list dd { margin: 0; color: var(--text); font-size: .95rem; }
.verdict h2 { display: flex; align-items: center; gap: .6rem; }
.setup { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.setup-label { margin: 0 0 .35rem; font-family: var(--font-pixel); color: var(--gold); }
.setup-fallback { margin: 0; color: var(--muted); }
.command { min-width: 0; }
.command-box { display: flex; align-items: flex-start; background: var(--ink); border: 2px solid #4c57a8; }
.command-box pre { flex: 1; min-width: 0; margin: 0; padding: .75rem .9rem; overflow-x: auto; white-space: pre; overflow-wrap: normal; font: .875rem/1.6 var(--font-code); color: #dfe6ff; -webkit-user-select: text; user-select: text; }
.command-box .btn { flex: 0 0 auto; margin: .35rem; }
/* Prose prompts wrap, so the text takes the full width with Copy underneath, and a long one scrolls inside its box. */
.command-wrap .command-box { flex-direction: column; align-items: stretch; }
.command-wrap pre { flex: none; max-height: 70vh; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.command-wrap .command-box .btn { align-self: flex-end; }
.command + h3 { margin-top: 1.25rem; }
.copy-status { margin: .35rem 0 0; font-family: var(--font-pixel); color: var(--xp); font-size: .9rem; }
.copy-status:empty { display: none; }
.combo-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.combo-layout .window + .window { margin-top: 0; }
.cast-order { display: grid; gap: .9rem; list-style: none; margin: 0; padding: 0; counter-reset: cast; }
.cast-order li { display: grid; grid-template-columns: auto auto 1fr; gap: .75rem; align-items: start; counter-increment: cast; }
.cast-order li::before { content: counter(cast); display: grid; place-items: center; width: 2rem; height: 2rem; font: 700 1rem var(--font-pixel); color: var(--ink); background: var(--gold); border: 2px solid var(--ink); }
.cast-order img { width: 64px; height: 64px; background: var(--well); outline: 2px solid var(--kind); }
.cast-order h3 { font-size: 1.05rem; margin: 0 0 .25rem; }
.cast-order a { color: var(--text); }
.cast-order p { margin: 0; color: var(--muted); font-size: .95rem; }
.setup-steps { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.class-card { flex-direction: row; align-items: flex-start; gap: 1rem; }
.class-card > img { flex: 0 0 auto; width: 128px; height: 128px; }
.class-banner { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; min-height: 16rem; padding: 1rem; background-color: var(--win-bottom); background-size: cover; background-position: center; image-rendering: pixelated; border: 6px solid transparent; border-image: var(--frame) 3 / 6px stretch; margin-bottom: 1.25rem; }
.class-banner-text { max-width: 40rem; order: 1; }
.class-banner-text h1 { font-size: clamp(1.8rem, 4vw, 2.75rem); }
.class-banner-text p:last-child { color: var(--muted); }
.class-banner-hero { order: 2; width: 192px; height: 192px; margin-left: auto; }
.class-badge { margin: 0 0 .3rem; font-family: var(--font-pixel); color: var(--gold); }

/* Loadouts: cards, equip screen, skill tree, copy panel */
.quest-line { margin: .1rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.4; }
.quest-label { font-family: var(--font-pixel); color: var(--gold); }
.mini-stats { display: grid; gap: .25rem; margin: 0; padding: .5rem .6rem; background: var(--well); }
.mini-stats div { display: grid; grid-template-columns: 4.5rem 1fr; gap: .5rem; align-items: center; }
.mini-stats dt { font-family: var(--font-pixel); color: var(--gold); font-size: .9rem; }
.mini-stats dd { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .92rem; }
.mini-stats img { width: 32px; height: 32px; }
.spell-strip { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.spell-strip img { width: 32px; height: 32px; background: var(--well); outline: 2px solid var(--ink); }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pip { width: 10px; height: 14px; background: var(--ink); border: 2px solid #4c57a8; }
.pip.on { background: var(--gold); border-color: var(--ink); box-shadow: inset -2px -2px 0 #b8860b; }
.mana-pips .pip.on { background: var(--mp); box-shadow: inset -2px -2px 0 #2c5f9e; }
.vote { min-width: 4.5rem; gap: .45rem; }
.vote-icon { width: 14px; height: 12px; background: var(--heart) center / contain no-repeat; image-rendering: pixelated; filter: grayscale(1) brightness(1.4); }
.vote[aria-pressed="true"] { border-color: var(--gold); }
.vote[aria-pressed="true"] .vote-icon { filter: none; }
.loadout-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.loadout-layout > .window + .window { margin-top: 0; }
.equip-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.equip-hero { display: grid; justify-items: center; gap: .5rem; padding: .75rem; background: var(--well); outline: 2px solid var(--ink); }
.equip-hero img { width: 192px; height: 192px; }
.equip-hero figcaption { text-align: center; font-family: var(--font-pixel); color: var(--muted); }
.equip-hero figcaption strong { display: block; color: var(--gold); font-size: 1.15rem; }
.slots { margin: 0; }
.slot { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; padding: .5rem 0; border-bottom: 2px dotted #4c57a8; }
.slot:last-child { border-bottom: 0; }
.slot dt { font-family: var(--font-pixel); color: var(--gold); }
.slot dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.slot small { display: block; flex-basis: 100%; color: var(--muted); font-size: .85rem; }
.slot-weapon img { width: 64px; height: 64px; background: var(--well); outline: 2px solid var(--ink); }
.slot-weapon > span { flex: 1; min-width: 10rem; }
.equip-notes { margin-top: 1rem; padding: .75rem 1rem; background: var(--well); border-left: 4px solid var(--gold); color: var(--muted); }
.tree-intro { color: var(--muted); }
.tree-rows { position: relative; list-style: none; margin: 0; padding: 0 0 0 1.6rem; }
.tree-rows::before { content: ""; position: absolute; left: .55rem; top: 1rem; bottom: 1.25rem; border-left: 4px solid #4c57a8; }
.tree-row { position: relative; padding: .35rem 0 .9rem; }
.tree-row::before { content: ""; position: absolute; left: -1.38rem; top: .75rem; width: 14px; height: 14px; background: var(--gold); border: 2px solid var(--ink); }
.tree-phase { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin: 0 0 .45rem; }
.phase-name { font: 700 1.15rem var(--font-pixel); color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.phase-plain { color: var(--muted); font-size: .9rem; }
.tree-nodes { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.tree-empty { margin: 0; color: var(--muted); font-size: .9rem; font-style: italic; }
.node {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .55rem; align-items: center;
  min-height: 2.75rem; max-width: 100%; padding: .3rem .7rem .3rem .3rem; text-align: left; text-decoration: none; color: var(--text);
  background: var(--well); border: 2px solid var(--kind); border-radius: 0; cursor: pointer;
}
.node img { grid-row: span 2; width: 48px; height: 48px; }
.node-name { font-family: var(--font-pixel); font-size: 1rem; line-height: 1.2; }
.node-kind { color: var(--muted); font-size: .8rem; }
button.node[aria-pressed="false"] { border-style: dashed; background: transparent; }
button.node[aria-pressed="true"] { background: var(--win-top); border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--kind); }
button.node[aria-pressed="true"] .node-kind { color: var(--gold); font-family: var(--font-pixel); }
.copy-panel p { color: var(--muted); }
.copy-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.board-tools { margin-bottom: 1rem; }
.board-tools .filter-row { margin-top: .25rem; }
.board-tools .field { flex: 1 1 16rem; margin: 0; }

/* Forge */
.forge { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.forge-main, .forge-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.forge .window + .window { margin-top: 0; }
.forge-class { display: grid; grid-template-columns: 64px 1fr; gap: .75rem; align-items: end; }
.forge-class img { width: 64px; height: 64px; }
.choice { margin-bottom: 1rem; }
.weapon-list { display: grid; gap: .5rem; }
.weapon-option { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: .75rem; align-items: center; padding: .4rem .6rem; background: var(--well); border: 2px solid #4c57a8; cursor: pointer; }
.weapon-option input { position: absolute; opacity: 0; pointer-events: none; }
.weapon-option:has(input:checked) { border-color: var(--gold); background: var(--win-top); }
.weapon-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.weapon-option img { width: 64px; height: 64px; }
.weapon-option strong { display: block; font-family: var(--font-pixel); }
.weapon-option small { display: block; color: var(--muted); }
.finder-results, .equipped-list, .problems { display: grid; gap: .5rem; list-style: none; margin: .75rem 0 0; padding: 0; }
.finder-results li, .equipped-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.equipped-list select { width: auto; min-width: 7rem; }
.equipped-name { flex: 1 1 10rem; font-family: var(--font-pixel); }
.problems li { padding-left: 1rem; position: relative; color: #ffd0c8; }
.problems li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--hp); }
.forge-notice:empty { display: none; }
.forge-side .loadout-card { margin-bottom: .9rem; }

/* Stats and charts */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.stat-tile { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1rem; text-align: center; background: var(--well); outline: 2px solid #4c57a8; }
.stat-label { font-family: var(--font-pixel); color: var(--muted); }
.stat-value { font: 700 clamp(1.8rem, 3vw, 2.6rem)/1.1 var(--font-pixel); color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.stat-note { color: var(--muted); font-size: .85rem; }
.chart-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.chart-grid > .window { margin-top: 0; }
.chart-panel { min-width: 0; padding: .9rem; background: var(--well); }
.chart-panel h3 { color: var(--gold); font-size: 1.05rem; }
.chart-panel p { font-size: .9rem; color: var(--muted); }
.chart svg { display: block; width: 100%; height: auto; }
.chart-column { fill: var(--mp); }
.chart-axis { stroke: #8790c8; stroke-width: 2; }
.chart-label { fill: var(--muted); font-size: 13px; font-family: var(--font-body); }
.chart-legend, .bar-list { list-style: none; margin: .75rem 0; padding: 0; }
.chart-legend li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; font-size: .9rem; }
.chart-legend strong { margin-left: auto; }
.legend-swatch { display: inline-block; width: .8rem; height: .8rem; flex: 0 0 auto; border: 2px solid var(--ink); }
.legend-detail { flex-basis: 100%; min-width: 0; margin-left: 1.3rem; overflow-wrap: anywhere; }
.bar-list li { margin-bottom: .8rem; }
.bar-list li > div { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; font-size: .95rem; }
.environment-note, .environment-versions { font-size: .9rem; overflow-wrap: anywhere; }
.environment-versions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .8rem; margin: 0; }
.environment-versions dt { color: var(--gold); font-family: var(--font-pixel); }
.environment-versions dd { margin: .2rem 0 0; }
.chart-data summary { font-size: .9rem; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
caption { text-align: left; color: var(--muted); padding: .25rem 0 .6rem; }
th, td { padding: .45rem .5rem; border-bottom: 2px solid #2e3878; text-align: left; }
thead th { font-family: var(--font-pixel); color: var(--gold); }
tbody th { font-weight: 400; }
td:last-child { font-variant-numeric: tabular-nums; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.gallery img, .gallery video { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; background: var(--ink); outline: 2px solid #4c57a8; }
.gallery figcaption { padding: .5rem .2rem; color: var(--muted); font-size: .9rem; }

/* Prose pages, bestiary, community */
.prose-page { max-width: 64rem; }
.prose p, .prose dd { max-width: 70ch; }
.prose dl { margin: 0; }
.prose dt { margin-top: .9rem; font-family: var(--font-pixel); color: var(--gold); }
.prose dd { margin: .15rem 0 0; color: var(--muted); }
.prose dl + p { margin-top: .9rem; }
/* Expeditions quick guide: screenshots with numbered markers and a key under each */
.guide-steps { margin: 0; padding-left: 1.4rem; }
.guide-steps > li + li { margin-top: .9rem; }
.guide-steps .command { margin-top: .6rem; }
.guide-shot { margin: 1rem 0; }
.guide-frame { position: relative; width: fit-content; max-width: 100%; }
.guide-frame img { display: block; max-width: 100%; height: auto; background: var(--ink); outline: 2px solid #4c57a8; }
/* The body font, because the pixel font's 2 and 5 read like 8 and S at this size. */
.guide-pin, .guide-key { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); font-family: var(--font-body); font-weight: 800; font-size: .95rem; line-height: 1; font-variant-numeric: tabular-nums; }
.guide-pin { position: absolute; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--text); pointer-events: none; }
.guide-keys { display: grid; gap: .5rem; list-style: none; margin: .9rem 0 0; padding: 0; }
.guide-keys li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .65rem; align-items: start; }
.guide-keys li > span:last-child { padding-top: .15rem; }
.guide-shot figcaption { margin-top: .6rem; color: var(--muted); font-size: .9rem; }
@media (max-width: 40rem) {
  .guide-pin { width: 1rem; height: 1rem; font-size: .6rem; border-width: 1px; box-shadow: 0 0 0 1px var(--text); }
}
.bestiary { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .75rem; list-style: none; margin: 0; padding: 0; }
.bestiary li { display: grid; grid-template-columns: 96px 1fr; gap: .75rem; align-items: center; padding: .5rem; background: var(--well); }
.bestiary img { justify-self: center; }
.bestiary h3 { margin-bottom: .2rem; }
.bestiary p { margin: 0; color: var(--muted); font-size: .92rem; }
.news-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.news-grid > .window { margin-top: 0; }
.news-section { min-height: 16rem; }
.news-section header { margin-bottom: .75rem; }
.news-periods { margin-bottom: .6rem; }
.news-source-status { min-height: 1.3rem; font-size: .85rem; }
.news-items { margin: 0; padding-left: 1.5rem; }
.news-items > li { padding: .9rem 0; border-bottom: 2px dotted #4c57a8; overflow-wrap: anywhere; }
.news-items > li::marker { color: var(--gold); font-family: var(--font-pixel); }
.news-items > li:last-child { border-bottom: 0; }
.news-items h3 { font-size: 1.05rem; }
.news-items p { font-size: .95rem; margin-bottom: .5rem; }
.news-meta { color: var(--muted); font-size: .85rem; }
.news-post { white-space: pre-wrap; }
.news-item-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; }
#news-board-status:not(:empty) { margin-bottom: 1.25rem; padding: .75rem 1rem; background: var(--well); border-left: 4px solid var(--gold); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 1rem; }
.two-col .command { margin-bottom: .6rem; }
.report-form { display: grid; gap: .9rem; margin-top: 1rem; }
.report-form input[type="file"] { display: block; width: 100%; min-height: 2.75rem; padding: .5rem; color: var(--text); background: var(--ink); border: 2px solid var(--win-line); }
.report-form input[type="file"]::file-selector-button { font: inherit; min-height: 2.25rem; margin-right: .7rem; padding: .3rem .7rem; color: var(--text); background: #3442a0; border: 2px solid var(--ink); cursor: pointer; }
.consent-field { display: flex; gap: .7rem; align-items: start; }
.consent-field input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--gold); }
.consent-field label { min-height: 2.75rem; cursor: pointer; }
.report-form > .btn { justify-self: start; }
.report-status:not(:empty) { padding: .9rem 1rem; background: var(--well); border-left: 4px solid var(--gold); overflow-wrap: anywhere; }
.report-status ul { margin-bottom: 0; padding-left: 1.4rem; }
.lost { display: grid; justify-items: start; gap: .5rem; min-height: 60vh; align-content: center; }
.lost img { width: 128px; height: 128px; }

@media (min-width: 640px) {
  .equip-body { grid-template-columns: auto minmax(0, 1fr); }
  .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .chart-grid, .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .title-card { margin-top: -4rem; }
  .chip-scroll .chips { flex-wrap: wrap; overflow: visible; }
}
@media (min-width: 1000px) {
  .detail-layout { grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr); }
  .detail-side { position: sticky; top: 1rem; }
  .loadout-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .combo-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .forge { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); }
}
@media (min-width: 1180px) {
  .header-inner { flex-wrap: nowrap; }
  .main-nav { width: auto; margin-left: auto; }
  .home-layout { grid-template-columns: minmax(0, 1fr) 21rem; }
  .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page { padding-top: 1.5rem; }
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #3d4cb8; }
  .btn-gold:hover { background: #ffd34d; }
  .chip:hover { color: var(--text); border-color: var(--win-line); }
  .menu a:hover { color: var(--text); }
  .menu a:hover::before { opacity: 1; }
  a:hover { color: #c3e8ff; }
  .card:hover { box-shadow: 0 0 0 2px var(--gold); }
  .node:hover { border-color: var(--gold); }
  .weapon-option:hover { border-color: var(--win-line); }
}
@media (prefers-reduced-motion: no-preference) {
  .title-stage .sprite { animation: idle-bob 1.1s steps(2, jump-none) infinite; }
  .title-hero-2, .title-hero-4 { animation-delay: -.55s; }
  .title-boss { animation-duration: 1.6s; }
  .menu a[aria-current="page"]::before { animation: cursor-nudge .8s steps(2, jump-none) infinite; }
}
@keyframes idle-bob { 50% { transform: translateY(-.32cqw); } }
@keyframes cursor-nudge { 50% { transform: translateX(-2px); } }

@media (forced-colors: active) {
  .window, .card, .class-banner { border: 2px solid CanvasText; border-image: none; }
  .btn, .chip, .node, .weapon-option, .harness-tags li { border-color: ButtonText; }
  .chip[aria-pressed="true"], .chip:has(input:checked), button.node[aria-pressed="true"], .weapon-option:has(input:checked) { outline: 3px solid Highlight; }
  .pip.on, .mana-pips .pip.on { background: Highlight; }
  .menu a::before { forced-color-adjust: none; }
}

/* Proving Grounds: fixed quests and setup-specific trial records. */
.trial-board { margin-top: 1.5rem; }
.trial-steps { padding-inline-start: 1.5rem; }
.trial-steps li + li { margin-top: .65rem; }
.trial-school { margin-block: 1.25rem; }
.trial-school-head { display: flex; align-items: center; gap: .75rem; }
.trial-quest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.trial-quest-grid > .window { margin-top: 0; }
.trial-quest { scroll-margin-top: 1rem; }
.quest-rank { margin: 0 0 .35rem; font-family: var(--font-pixel); color: var(--gold); }
.trial-quest h4 { margin: 0 0 .75rem; font-family: var(--font-pixel); font-size: 1.3rem; line-height: 1.2; text-shadow: 2px 2px 0 var(--ink); }
.trial-quest details { border-top: 2px solid #2e3878; }
.trial-quest ul { padding-inline-start: 1.25rem; }
.trial-result { margin-block: 1.25rem; }
.trial-table-scroll { max-width: 100%; overflow-x: auto; padding: .3rem; scrollbar-color: var(--win-line) var(--well); }
.trial-table { min-width: 75rem; }
.trial-table caption { color: var(--gold); font-family: var(--font-pixel); }
.trial-table th, .trial-table td { padding: .65rem; vertical-align: top; }
.trial-table thead th { background: var(--well); }
.trial-table tbody th { min-width: 11rem; }
.trial-table a, .trial-companions a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.trial-row-note { display: block; margin-top: .3rem; color: var(--muted); font: 400 .8rem/1.4 var(--font-body); text-shadow: none; }
.trial-setup { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.trial-table .trial-setup { min-width: 17rem; }
.trial-glossary { margin: 0; }
.trial-glossary > div { padding-block: .9rem; border-top: 2px solid #2e3878; }
.trial-glossary dt { font-family: var(--font-pixel); color: var(--gold); font-size: 1.15rem; }
.trial-glossary dd { margin: .3rem 0 0; max-width: 70ch; }
.trial-record-cell { padding-block: 1rem; border-top: 2px solid #2e3878; }
.trial-record-cell h3 { font: 600 1rem/1.5 var(--font-body); text-shadow: none; }
.trial-record .stat-value { font-size: clamp(1.4rem, 2vw, 2rem); }
.trial-companions { margin-top: 1rem; }
.trial-table a.trial-scrying { display: flex; }
.trial-scrying-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; margin-top: .75rem; }
.trial-scrying-grid a { display: block; border: 2px solid var(--win-line); background: var(--night); }
.trial-scrying-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }

/* Spell creator */
.creator input[type="url"] { display: block; width: 100%; min-height: 2.75rem; padding: .55rem .75rem; font-size: 1rem; color: var(--text); background: var(--ink); border: 2px solid var(--win-line); border-radius: 0; }
.creator [aria-invalid="true"] { border-color: var(--hp); }
.field-error { margin: .4rem 0 0; color: #ffd0c8; font-size: .9rem; }
.field-error::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .45rem; background: var(--hp); }
.creator-errors { border-left: 4px solid var(--hp); }
.creator-errors:focus-visible { outline-offset: 4px; }
.creator-errors a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.creator-kinds, .creator-foes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .5rem; }
.creator-kinds img, .creator-foes img { image-rendering: pixelated; }
.creator-bases { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; }
.creator-tile { position: relative; display: grid; justify-items: center; gap: .3rem; padding: .5rem .4rem; text-align: center; font: .95rem/1.2 var(--font-pixel); color: var(--muted); background: var(--well); border: 2px solid #4c57a8; cursor: pointer; }
.creator-tile img { width: 64px; height: 64px; image-rendering: pixelated; }
.creator-tile input, .creator-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.creator-tile:has(input:checked) { color: var(--text); border-color: var(--gold); background: var(--win-top); }
.creator-tile:has(input:focus-visible), .creator-swatch:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.creator-palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: .4rem; padding-top: 1.75rem; }
.creator-swatch { position: relative; display: block; min-height: 2.75rem; background: var(--ink); border: 2px solid #4c57a8; cursor: pointer; }
.swatch-strip { position: absolute; inset: 4px 4px 12px; }
.swatch-dot { position: absolute; right: 4px; bottom: 3px; width: 8px; height: 8px; }
.creator-swatch:has(input:checked) { border-color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold); }
.swatch-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.creator-swatch:hover .swatch-name, .creator-swatch:has(input:focus-visible) .swatch-name {
  z-index: 2; left: 50%; bottom: calc(100% + 4px); width: auto; height: auto; padding: .1rem .4rem; overflow: visible; clip-path: none; transform: translateX(-50%);
  font: .8rem/1.4 var(--font-pixel); color: var(--text); background: var(--ink); border: 2px solid var(--win-line);
}
.creator-look { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem 1rem; align-items: center; }
.creator-look p { margin: 0; font-family: var(--font-pixel); }
.creator-look .field-help { grid-column: 2; font-family: var(--font-body); }
.creator-icon { grid-row: span 2; width: 128px; height: 128px; image-rendering: pixelated; background: var(--well); outline: 2px solid var(--ink); }
.creator-beats { display: grid; gap: 1rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.creator-beat { padding: .8rem; background: var(--well); border: 2px solid #4c57a8; }
.creator-more { margin-top: .5rem; border-top: 2px solid #2e3878; }
.creator-battle:not(:empty) { margin-top: 1rem; }
.creator-side .spell-card { margin-bottom: .9rem; }
.creator-side .card-icon { image-rendering: pixelated; }
.creator-side .btn-gold { margin-top: .9rem; }
.creator-side .report-status:not(:empty) { margin-top: .9rem; }
@media (min-width: 1000px) {
  .creator-side { position: sticky; top: 1rem; }
}
@media (hover: hover) and (pointer: fine) {
  .creator-tile:hover, .creator-swatch:hover { border-color: var(--win-line); }
}
@media (forced-colors: active) {
  .creator-tile, .creator-swatch { border-color: ButtonText; }
  .creator-tile:has(input:checked), .creator-swatch:has(input:checked) { outline: 3px solid Highlight; }
  .swatch-strip, .swatch-dot { forced-color-adjust: none; }
}

/* Popularity and picks */
.card-pop { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; font-family: var(--font-pixel); color: var(--muted); font-size: .9rem; }
.pop-stars > [aria-hidden] { color: var(--gold); }
.pop-downloads > [aria-hidden] { color: var(--link); }
.card-head:has(> .pick-badge) { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.combo-card .card-head:has(> .pick-badge) { grid-template-columns: minmax(0, 1fr) auto auto; }
.pick-badge { display: inline-grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; background: var(--ink); border: 2px solid var(--gold); }
.pick-crown { display: block; width: 14px; height: 10px; image-rendering: pixelated; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd34d' d='M0 0h1v4H0zM3 0h1v4H3zM6 0h1v4H6zM1 1h1v3H1zM5 1h1v3H5zM2 2h1v2H2zM4 2h1v2H4z'/%3E%3Cpath fill='%23f9a31b' d='M0 4h7v1H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.pick-line { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-family: var(--font-pixel); color: var(--gold); }
.kit-shelf { margin-top: 1.5rem; }
@media (forced-colors: active) {
  .pick-badge { border-color: ButtonText; }
  .pick-crown { forced-color-adjust: none; }
}

/* A 256×144 stage. All animation uses transform/opacity; state changes never read layout. */
.battle { display: grid; gap: .75rem; min-width: 0; }
.battle-title, .battle-caption { margin: 0; }
.battle-caption { color: var(--muted); }
.battle-stage { --px: calc(100cqw / 256); --fx-light: #fff1aa; --fx-mid: #ffd34d; --fx-dark: #30244d; --fx-accent: #83d8ee; position: relative; container-type: inline-size; contain: layout paint; width: 100%; max-width: 768px; aspect-ratio: 16 / 9; margin-inline: auto; overflow: hidden; border: 2px solid var(--win-edge); background: var(--night); image-rendering: pixelated; }
.battle-world { position: absolute; inset: 0; background: center / 100% 100% no-repeat; }
.battle-world > div, .battle-world > span { position: absolute; }
.battle-tethers, .battle-effects, .battle-pops { inset: 0; pointer-events: none; }
.battle-tethers { z-index: 150; }
.battle-tether { position: absolute; left: calc(var(--x) * var(--px)); top: calc(var(--y) * var(--px)); width: calc(var(--length) * var(--px)); height: calc(2 * var(--px)); background: repeating-linear-gradient(90deg, var(--thread) 0 calc(3 * var(--px)), transparent 0 calc(5 * var(--px))); transform: rotate(var(--angle)); transform-origin: left center; overflow: hidden; opacity: .8; }
.battle-tether[data-on="false"] { opacity: 0; }
.battle-pulse { display: block; width: 20%; height: 100%; background: #fff9d0; opacity: 0; }
.battle-unit { left: calc((var(--x) - var(--w) / 2) * var(--px)); top: calc((var(--y) - var(--w)) * var(--px)); width: calc(var(--w) * var(--px)); height: calc(var(--w) * var(--px)); z-index: var(--depth); }
.battle-unit[data-on="false"] { opacity: 0; }
.battle-sprite { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.battle-flash { position: absolute; inset: 0; background: white; mask: var(--sprite) center / contain no-repeat; opacity: 0; }
.battle-meter { position: relative; display: block; height: .4rem; background: #080d25; border: 1px solid #d7ddf4; overflow: hidden; }
.battle-unit > .battle-meter { position: absolute; bottom: 0; left: 20%; width: 60%; height: calc(3 * var(--px)); border-width: var(--px); }
.battle-fill, .battle-ghost { position: absolute; inset: 0; transform-origin: left; background: var(--xp); }
.battle-ghost { background: #fff4bf; }
[data-health="low"] .battle-fill { background: var(--gold); }
[data-health="critical"] .battle-fill, [data-side="foes"] .battle-fill { background: var(--hp); }
.battle-statuses { display: flex; flex-wrap: wrap; gap: .15rem; }
.battle-unit > .battle-statuses { position: absolute; right: 5%; bottom: calc(5 * var(--px)); max-width: 90%; gap: var(--px); }
.battle-status { display: inline-block; width: 14px; height: 14px; background: var(--status-image) center / contain no-repeat; }
.battle-status[hidden] { display: none; }
.battle-unit .battle-status { width: calc(7 * var(--px)); height: calc(7 * var(--px)); }
.status-haze { --status-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23bdafda' d='M2 1h3v1h1v1h1v3H0V3h1V2h1z'/%3E%3C/svg%3E"); }
.status-ward { --status-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2391db69' d='M0 0h7v4H6v1H5v1H4v1H3V6H2V5H1V4H0z'/%3E%3Cpath fill='%23253639' d='M2 1h3v3H4v1H3V4H2z'/%3E%3C/svg%3E"); }
.status-insight { --status-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23ffd34d' d='M2 1h4v1h1v1h1v2H7v1H6v1H2V6H1V5H0V3h1V2h1z'/%3E%3Cpath fill='%23253639' d='M3 2h2v4H3z'/%3E%3C/svg%3E"); }
.status-poison { --status-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23b5e266' d='M3 0h2v2h1v2h1v3H6v1H2V7H1V4h1V2h1z'/%3E%3C/svg%3E"); }
.status-barrier { --status-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%238fd3ff' d='M0 0h2v8H0zM3 0h2v8H3zM6 0h2v8H6zM0 2h8v2H0z'/%3E%3C/svg%3E"); }
.status-flicker { --status-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff5ca' d='M4 0v3h4v2H4v3H3V5H0V3h3V0z'/%3E%3C/svg%3E"); }
.status-pinned { --status-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f8acbf' d='M2 0h4v2H5v2h2v1H4v3H3V5H0V4h2z'/%3E%3C/svg%3E"); }
.status-enraged { --status-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f96c4d' d='M4 0h1v3h1V2h1v5H6v1H2V7H1V4h1v1h1V2h1z'/%3E%3Cpath fill='%23ffd34d' d='M3 5h2v2H3z'/%3E%3C/svg%3E"); }
.battle-effects { z-index: 160; }
.battle-fx { position: absolute; left: calc(var(--x) * var(--px)); top: calc(var(--y) * var(--px)); width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); opacity: 0; color: var(--fx-light); }
.fx-circle, .fx-runes, .fx-portal, .fx-ward, .fx-arc, .fx-slash { border: calc(2 * var(--px)) solid var(--fx-mid); border-radius: 50%; box-shadow: inset 0 0 0 var(--px) var(--fx-light), 0 0 0 var(--px) var(--fx-dark); }
.fx-circle, .fx-runes { clip-path: polygon(0 25%,100% 25%,100% 75%,0 75%); }
.fx-runes { border-style: dashed; border-width: calc(4 * var(--px)); background: repeating-conic-gradient(transparent 0 25deg, var(--fx-mid) 25deg 30deg); }
.fx-portal { background: repeating-radial-gradient(ellipse, var(--fx-dark) 0 calc(3 * var(--px)), var(--fx-mid) calc(4 * var(--px)) calc(5 * var(--px))); }
.fx-ward { border-radius: 50% 50% 5% 5%; background: #91db6920; border-color: var(--xp); }
.fx-slash, .fx-arc { border-width: calc(5 * var(--px)) 0 0 calc(2 * var(--px)); clip-path: polygon(0 0,100% 0,100% 70%,0 100%); box-shadow: none; }
.fx-bolt, .fx-stab, .fx-shard { background: var(--fx-light); clip-path: polygon(0 35%,65% 0,100% 45%,35% 100%); }
.fx-stab { clip-path: polygon(0 50%,85% 35%,100% 50%,85% 65%); }
.fx-orb, .fx-spit, .fx-venom { background: var(--fx-mid); border: var(--px) solid var(--fx-light); border-radius: 50%; box-shadow: 0 0 0 calc(2 * var(--px)) var(--fx-dark); }
.fx-venom { background: #91db69; border-radius: 80% 0 80% 80%; }
.fx-spit { background: #c8dc77; }
.fx-beam, .fx-chain, .fx-breath { transform-origin: left center; background: linear-gradient(transparent, var(--fx-light), var(--fx-mid), transparent); }
.fx-chain { background: repeating-linear-gradient(130deg, transparent 0 calc(3 * var(--px)), var(--fx-light) 0 calc(5 * var(--px))); }
.fx-breath { background: repeating-linear-gradient(20deg, #ffbd66 0 calc(3 * var(--px)), #e84c36 calc(3 * var(--px)) calc(6 * var(--px))); box-shadow: 0 calc(3 * var(--px)) #f4763644, 0 calc(-3 * var(--px)) #f4763644; }
.fx-particle { background: var(--fx-accent); }
[data-shape="diamond"] .fx-particle { clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
[data-shape="star"] .fx-particle { clip-path: polygon(50% 0,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0 50%,35% 35%); }
[data-shape="ring"] .fx-particle { background: transparent; border: var(--px) solid var(--fx-accent); border-radius: 50%; }
.fx-burst, .fx-crash, .fx-grind, .fx-call { background: var(--fx-mid); clip-path: polygon(50% 0,60% 30%,85% 10%,75% 40%,100% 50%,70% 60%,90% 90%,60% 75%,50% 100%,40% 70%,10% 90%,25% 60%,0 50%,30% 40%,10% 10%,40% 30%); }
.fx-crash { background: #f66b6b; }
.fx-grind { background: #e0c999; }
.fx-crack { background: #ffcf78; clip-path: polygon(0 45%,25% 40%,40% 15%,50% 50%,80% 30%,100% 60%,55% 60%,45% 85%,35% 55%); }
.fx-dust, .fx-haze, .fx-split, .fx-afterimage { border-radius: 30%; background: #d4bf9750; box-shadow: calc(-7 * var(--px)) calc(3 * var(--px)) #d4bf9730, calc(10 * var(--px)) calc(-5 * var(--px)) #d4bf9730; }
.fx-haze { background: #b4a1d080; }
.fx-split { background: #8fe69a80; border-radius: 45% 45% 20% 20%; }
.fx-afterimage { background: #8fbddd55; }
.fx-regrow, .fx-status { background: #91db69; clip-path: polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%); }
.fx-status { background: var(--fx-accent); }
.fx-pillar, .fx-scan, .fx-barrier { transform-origin: bottom; background: linear-gradient(90deg, transparent, var(--fx-light), transparent); }
.fx-scroll, .fx-page { background: repeating-linear-gradient(#f3e4b7 0 calc(3 * var(--px)), #9a806a calc(3 * var(--px)) calc(4 * var(--px))); border: var(--px) solid #654e52; }
.fx-scroll { border-block: calc(2 * var(--px)) solid #d6b67a; }
.fx-hammer { background: linear-gradient(#cdd3de 0 40%, transparent 0), linear-gradient(90deg, transparent 40%, #b98963 40% 60%, transparent 60%); }
.fx-eye { background: radial-gradient(ellipse, #171728 0 20%, var(--fx-light) 22% 35%, var(--fx-mid) 37% 55%, transparent 57%); }
.fx-compact { background: #4d9be655; border: calc(3 * var(--px)) solid var(--mp); border-radius: 50%; }
.battle-cutin { z-index: 180; top: 14%; left: 0; width: 100%; height: 42%; display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--px)); padding: calc(3 * var(--px)); background: linear-gradient(100deg, var(--fx-dark), var(--fx-mid), var(--fx-dark)); border-block: calc(2 * var(--px)) solid var(--fx-light); opacity: 0; }
.battle-cutin img { width: calc(32 * var(--px)); height: calc(32 * var(--px)); object-fit: contain; image-rendering: pixelated; }
.battle-cutin [data-cutin-caster] { width: calc(48 * var(--px)); height: calc(48 * var(--px)); }
.battle-cutin [data-cutin-name] { max-width: 55%; font: bold max(12px, calc(9 * var(--px))) / 1.05 var(--font-pixel); color: white; text-shadow: 1px 2px #171325; overflow-wrap: anywhere; }
.battle-pops { z-index: 190; }
.battle-pop { position: absolute; left: calc(var(--x) * var(--px)); top: calc(var(--y) * var(--px)); transform: translateX(-50%); opacity: 0; font: bold max(11px, calc(8 * var(--px))) / 1.1 var(--font-pixel); color: white; text-shadow: 1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000; white-space: nowrap; }
.battle-pop[data-tone="crit"] { color: var(--gold); font-size: max(12px, calc(10 * var(--px))); }
.battle-pop[data-tone="heal"] { color: var(--xp); }
.battle-band { z-index: 200; top: 7%; width: 100%; text-align: center; padding: calc(4 * var(--px)); background: #080e29cf; border-block: var(--px) solid var(--gold); font: bold max(12px, calc(12 * var(--px))) / 1 var(--font-pixel); color: var(--gold); text-transform: uppercase; opacity: 0; }
.battle-label { z-index: 190; bottom: 3%; width: 100%; text-align: center; color: white; text-shadow: 2px 2px #000; font: max(11px, calc(7 * var(--px))) / 1 var(--font-pixel); }
.battle-darken { z-index: 155; inset: 0; background: #04051a; opacity: 0; }
.battle-chest { z-index: 140; left: 22%; top: 68%; width: calc(16 * var(--px)); height: calc(12 * var(--px)); background: linear-gradient(var(--gold),var(--gold)) center 40% / 25% 33% no-repeat, linear-gradient(transparent 33%,var(--gold) 33% 42%,transparent 42%),linear-gradient(#9a5a2a 33%,#6e3a18 33%); box-shadow: 0 0 0 var(--px) #2a1408; opacity: 0; }
.battle-chest::before { content: ""; position: absolute; left: 45%; top: -60%; width: calc(2 * var(--px)); height: calc(2 * var(--px)); background: white; box-shadow: 0 calc(-2 * var(--px)) white,0 calc(2 * var(--px)) white,calc(-2 * var(--px)) 0 white,calc(2 * var(--px)) 0 white; }
[data-fx="victory"] :is(.battle-chest,.battle-band) { opacity: 1; }
.battle-hud { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: .5rem; }
.battle-hud .window { padding: .65rem .75rem; min-width: 0; }
.battle-hud-title { margin: 0 0 .5rem; color: var(--gold); font: 1rem var(--font-pixel); }
.battle-hud ul { padding: 0; margin: 0; list-style: none; display: grid; gap: .35rem; }
.battle-hud li[hidden] { display: none; }
.battle-foe-window li { font: 1.125rem var(--font-pixel); }
.battle-party-window li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4.5rem, .7fr); gap: .15rem .45rem; align-items: center; }
.battle-member { font: 1.125rem var(--font-pixel); overflow-wrap: anywhere; }
.battle-member small { display: block; font: .7rem var(--font-body); color: var(--muted); }
.battle-party-window [data-role="ally"] .battle-member { padding-left: .5rem; }
.battle-party-window [data-role="ally"] small { padding-left: 1rem; }
.battle-context-value { display: block; text-align: right; font: .875rem var(--font-pixel); font-variant-numeric: tabular-nums; }
.battle-party-window .battle-statuses { grid-column: 1 / -1; }
.battle-hud .window + .window, .battle-log > .window + .window { margin-top: 0; }
.battle-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.battle-beat { position: relative; margin: 0; min-width: 0; }
.battle-beat::before { content: "Turn " counter(list-item) / ""; display: block; margin-bottom: .25rem; font: .8125rem var(--font-pixel); color: var(--muted); }
.battle-banner { margin: 0 0 .4rem; font: 1.125rem var(--font-pixel); color: var(--gold); }
.battle-rpg { margin: 0; font: 1.125rem/1.45 var(--font-pixel); color: white; }
.battle-plain { margin: .5rem 0 0; font: .9375rem/1.5 var(--font-body); }
.battle-plain-label { display: block; font-size: .75rem; color: var(--muted); }
.battle-outcome { margin: .5rem 0 0; font-size: .75rem; color: var(--muted); }
.battle-outcome:empty { display: none; }
.battle[data-enhanced] .battle-beat::before { content: none; }
.battle[data-enhanced]:not([data-show-all]) .battle-log > * { grid-area: 1 / 1; }
.battle[data-enhanced]:not([data-show-all]) .battle-log > [hidden] { display: block; visibility: hidden; }
.battle[data-enhanced]:not([data-show-all]) .battle-beat { padding-bottom: 1.6rem; }
.battle[data-enhanced]:not([data-show-all]) .battle-beat::after { content: "▼" / ""; position: absolute; right: 1rem; bottom: .5rem; font: .875rem var(--font-pixel); color: white; }
.battle[data-show-all] .battle-beat[aria-current] { outline: 2px solid var(--gold); outline-offset: 2px; }
.battle-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.battle-controls[hidden], .battle-summary[hidden] { display: none; }
.battle-controls [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.battle-controls [aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: var(--well); }
.battle-speeds { display: flex; gap: .2rem; }
.battle-count, .battle-wave { font: 1rem var(--font-pixel); font-variant-numeric: tabular-nums; }
.battle-count { margin-left: auto; }
.battle-wave { flex-basis: 100%; color: var(--muted); }
.battle-wave:empty { display: none; }
.battle-summary ul { margin: 0; padding-left: 1.25rem; }
@media (prefers-reduced-motion: no-preference) {
  .battle-stage[data-playing] .battle-unit[data-on="true"] .battle-sprite { animation: battle-idle 1200ms steps(2) infinite alternate; }
  .battle-stage[data-playing] .battle-unit[data-side="foes"] .battle-sprite { animation-delay: -600ms; }
  .battle[data-enhanced]:not([data-show-all]) .battle-beat[aria-current]::after { animation: battle-wait 1400ms steps(2) 4; }
}
@keyframes battle-idle { to { transform: translateY(calc(-1 * var(--px))); } }
@keyframes battle-wait { 50% { opacity: .35; } }
@media (max-width: 480px) {
  .battle-hud { grid-template-columns: minmax(0, 1fr); }
  .battle-hud .window { padding: .5rem; }
  .battle-party-window li { grid-template-columns: minmax(0, 1fr); }
  .battle-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem; }
  .battle-member { font-size: 1rem; }
  .battle-hud-title { font-size: .875rem; }
  .battle-controls { gap: .35rem; }
}
@media (prefers-reduced-motion: reduce) { .battle *, .battle *::after { animation: none !important; } }

/* Practice Grounds (/play/) and trainer cards. Built after site.css and battle.css, so it uses their tokens. */
.play { --bronze: #cd683d; --silver: #9babb2; }
.play > .window + .window, .play > .note + .window, .play-stage + .window { margin-top: 1.25rem; }
.play h3 { overflow-wrap: anywhere; }

/* Medals: a ribbon and a disc, tinted by tier. Locked ones are grey and always say "Not yet" in text. */
.medal-art {
  --tier: var(--bronze); position: relative; display: inline-block; flex: none; width: 24px; height: 32px; vertical-align: middle;
  filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink));
}
.medal-silver { --tier: var(--silver); }
.medal-gold { --tier: var(--gold); }
.medal-art::before { content: ""; position: absolute; left: 6px; top: 0; width: 12px; height: 12px; background: linear-gradient(90deg, var(--hp) 0 50%, var(--mp) 50% 100%); clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%); }
.medal-art::after {
  content: ""; position: absolute; left: 2px; top: 11px; width: 20px; height: 20px; background: var(--tier);
  box-shadow: inset -4px -4px 0 rgb(0 0 0 / .28), inset 4px 4px 0 rgb(255 255 255 / .35);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.medal-art.locked { filter: grayscale(1) brightness(.6); }
.medal-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .75rem; }
.medal-list li { display: flex; gap: .8rem; align-items: flex-start; padding: .6rem .75rem; background: var(--well); border: 2px solid #2e3878; }
.medal-list li > div { min-width: 0; }
.medal-list p { margin: .3rem 0 0; }
.medal-list li.locked { color: var(--muted); border-style: dashed; }
.medal-list .btn { margin-top: .5rem; }
.medal-day { font-size: .95rem; }
.medal-group + .medal-group { margin-top: 1.25rem; }

/* Gym badges: the class hero in a tier-colored ring. */
.gym-badge { --tier: #4c57a8; display: inline-grid; place-items: center; flex: none; width: 76px; height: 76px; border: 4px solid var(--tier); border-radius: 50%; background: var(--ink); overflow: hidden; }
.gym-badge.badge-bronze { --tier: var(--bronze); }
.gym-badge.badge-gold { --tier: var(--gold); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold); }
.gym-badge.locked { border-style: dashed; }
.gym-badge.locked img { filter: grayscale(1) brightness(.7); }
.gym-grid { list-style: none; margin: 1rem 0 0; padding: 0; }
.gym-card { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; }
.gym-card .card-head { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.gym-card > .btn { margin-top: auto; }
.gym-state { margin: 0; font-family: var(--font-pixel); }
.foe-row { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; margin: .5rem 0; padding: 0; }
.foe-row li { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 4.5rem; text-align: center; font-size: .9rem; }
.scout-report dl { margin: .25rem 0 0; }
.scout-report dt { font-family: var(--font-pixel); color: var(--gold); margin-top: .5rem; }
.scout-report dd { margin: .2rem 0 0; }
.inline-list { display: flex; flex-wrap: wrap; gap: .25rem .9rem; list-style: none; margin: 0; padding: 0; }
.inline-list a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* The battle stage. */
.play-stage h2 { overflow-wrap: anywhere; }
.play-arena { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin: .5rem 0 1rem; padding: 1rem; background: var(--dither); border: 2px solid #2e3878; }
.play-arena figure { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: 0; min-width: 0; max-width: 100%; text-align: center; font-family: var(--font-pixel); }
.play-arena figcaption small { display: block; max-width: 16rem; font-family: var(--font-body); color: var(--muted); }
.play-arena .foe-down img { filter: grayscale(1) brightness(.5); }
.play-bars { display: grid; gap: .5rem; margin-bottom: 1rem; }
/* Narrow screens: label and numbers on one line, the full-width track under them. */
.play-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .6rem; align-items: center; font-family: var(--font-pixel); }
.play-bar .play-meter { grid-column: 1 / -1; grid-row: 2; }
.play-bar-label { overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .play-bar { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) auto; }
  .play-bar .play-meter { grid-column: 2; grid-row: 1; }
}
.play-meter { display: block; height: .75rem; background: #080d25; border: 2px solid #d7ddf4; overflow: hidden; }
.play-meter > span { display: block; height: 100%; background: var(--xp); }
.meter-mana > span { background: var(--mp); }
.meter-foe > span { background: var(--hp); }
.play-hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .6rem; margin: 1rem 0; }
.play-spell { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-content: stretch; gap: .2rem .6rem; text-align: left; }
.play-spell .sprite { grid-row: span 2; }
.play-spell-name { overflow-wrap: anywhere; }
.play-spell small { grid-column: 2; font-family: var(--font-body); font-weight: 400; font-size: .85rem; color: var(--muted); text-shadow: none; }
.play-unarmed { grid-template-columns: minmax(0, 1fr); background: #2b3270; }
.play-unarmed small { grid-column: 1; }
.play-spell[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.play-result { margin-top: 1rem; }
.play-result:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.play-move, .play-end { padding: .75rem 1rem; background: var(--well); border: 2px solid #2e3878; }
.play-end { margin-top: .75rem; }
.play-move p, .play-end p { margin: .35rem 0 0; }
.play-end h3 { margin: 0; color: var(--gold); }
.play-effect strong { font-family: var(--font-pixel); margin-right: .4rem; }
.effect-super strong { color: var(--gold); }
.effect-fizzle strong { color: var(--muted); }
.play-tip { color: var(--gold); }

/* Spelldex. */
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .5rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.dex-grid a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .5rem; align-items: center; min-height: 2.75rem; padding: .4rem .5rem; color: var(--text); text-decoration: none; background: var(--well); border: 2px solid #2e3878; }
.dex-grid .sprite { grid-row: span 2; }
.dex-name { font-size: .9rem; overflow-wrap: anywhere; }
.dex-grid small { font-family: var(--font-pixel); color: var(--gold); }
.dex-none a { border-style: dashed; color: var(--muted); }
.dex-none .sprite { filter: grayscale(1) brightness(.6); }
.dex-none small { color: var(--muted); }

/* Trainer card. */
.trainer-card { margin-top: 1rem; }
.trainer-card h3 { margin: 0 0 .75rem; color: var(--gold); font-size: 1.3rem; }
.badge-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .75rem; list-style: none; margin: 0; padding: 0; }
.badge-row li { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; font-size: .85rem; min-width: 0; overflow-wrap: anywhere; }
.badge-row small { color: var(--muted); }
.card-counts { margin: 1rem 0 0; }
.card-counts dt { display: flex; align-items: center; gap: .5rem; font-family: var(--font-pixel); margin-top: .6rem; }
.card-counts dd { margin: .2rem 0 0; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .play-meter > span { transition: width .3s steps(6); }
}

/* Hall of Champions: banner, menu tabs, filter chips and ranking rows. Appended after site.css, so its tokens, .window and .chip apply. */

/* With scripting the build's default view shows at once; without it every board stacks and the controls go away. */
@media (scripting: enabled) {
  [data-hall-hidden] { display: none !important; }
  .hall-panel-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (scripting: none) {
  [data-hall-control] { display: none !important; }
  .hall-panel + .hall-panel, .ladder + .ladder { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 2px solid #2e3878; }
}

/* Banner */
.hall-page > .hall-banner { margin-top: .5rem; }
.hall-banner {
  display: grid; align-content: end; gap: .25rem; min-height: 15rem; padding: 1.5rem 1.5rem 1.25rem;
  background: linear-gradient(90deg, #0b0c1cf0, #0b0c1cc0 38%, #0b0c1c30 72%, #0b0c1c10), linear-gradient(0deg, #0b0c1cd0, #0b0c1c00 60%),
    url("/assets/img/scenes/hall.png") center 38% / cover no-repeat, var(--win-bottom);
  background-clip: padding-box; background-origin: padding-box; image-rendering: pixelated;
}
.hall-banner h1 { margin: 0; color: var(--gold); }
.hall-lead { max-width: 38rem; margin: 0 0 .5rem; color: #e3e8ff; text-shadow: 1px 1px 0 var(--ink); }
.hall-hud { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.hall-hud > div { display: flex; flex-direction: column-reverse; min-width: 7rem; padding: .3rem .75rem .4rem; background: #0b0c1cd9; border: 2px solid var(--win-line); box-shadow: inset 0 0 0 2px var(--ink); }
.hall-hud dt { font: .75rem/1.3 var(--font-pixel); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.hall-hud dd { margin: 0; font: 700 1.45rem/1.15 var(--font-body); font-variant-numeric: tabular-nums; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
@media (max-width: 40rem) {
  .hall-banner { min-height: 0; padding: 1rem; }
  .hall-hud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .hall-hud > div { min-width: 0; padding: .2rem .55rem .3rem; }
  .hall-hud dd { font-size: 1.15rem; }
  .hall-tabs .hall-tab { padding-left: 1.35rem; font-size: 1.05rem; }
  .hall-tabs .hall-tab::before { left: .3rem; }
}
/* Below 480 px the four tabs shrink to stay on one row from 360 px up. */
@media (max-width: 30rem) {
  .hall-board { padding-inline: .6rem; }
  .hall-board .hall-tabs { gap: 0; }
  .hall-tabs .hall-tab { padding: .35rem .2rem .3rem .85rem; font-size: .8rem; }
  .hall-tabs .hall-tab::before { left: .15rem; width: 9px; height: 15px; margin-top: -8px; }
}

/* Menu tabs */
.hall-board { padding-top: .6rem; }
.hall-tabs { display: flex; flex-wrap: wrap; gap: 0 .5rem; margin: 0 0 1rem; border-bottom: 2px solid #2e3878; }
.hall-tab {
  position: relative; min-height: 2.75rem; margin-bottom: -2px; padding: .35rem .8rem .3rem 1.6rem;
  font: 700 1.2rem/1.2 var(--font-pixel); color: var(--muted); text-shadow: 2px 2px 0 var(--ink);
  background: none; border: 0; border-bottom: 4px solid transparent; border-radius: 0; cursor: pointer;
}
.hall-tab::before { content: ""; position: absolute; left: .45rem; top: 50%; width: 12px; height: 20px; margin-top: -11px; background: var(--cursor) center / contain no-repeat; image-rendering: pixelated; opacity: 0; }
.hall-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--gold); }
.hall-tab[aria-selected="true"]::before, .hall-tab:focus-visible::before { opacity: 1; }
.hall-tab:focus-visible { outline-offset: -3px; }

/* Filters */
.hall-panel { container-type: inline-size; }
.hall-filters { display: grid; gap: .5rem; margin-bottom: 1rem; }
/* On wide panels the legend floats left as a label column; the chips (a flex box, so it avoids the float) wrap beside it. */
.hall-filter > legend { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
@container (min-width: 40rem) { .hall-filter > legend { float: left; width: 4.25rem; margin: 0; padding: .8rem 0 0; } }
.hall-filter .chips { gap: .4rem; }
.chip:has(> .portrait) { padding-left: .25rem; }
.chip .portrait { width: 40px; height: 40px; object-fit: none; object-position: 50% 6%; background: var(--ink); border: 2px solid #4c57a8; }
.chip[aria-pressed="true"] .portrait { border-color: var(--gold); box-shadow: 0 0 0 2px var(--ink); }
.chip .stars { color: var(--gold); font-size: .8rem; letter-spacing: -.05em; white-space: nowrap; }
.hall-hint { margin: .5rem 0 .9rem; font-size: .9rem; color: var(--muted); }

/* Ladder header and verdict */
.ladder-head h3 { margin: 0 0 .2rem; font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.ladder-hero { color: var(--muted); }
.ladder-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .4rem; margin: 0; font: .95rem/1.4 var(--font-pixel); color: var(--gold); }
.ladder-meta a { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--font-body); font-size: .9rem; }
.ladder-summary { margin: 0 0 .25rem; color: var(--muted); font-size: .95rem; }
.ladder-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; margin: .5rem 0 .8rem; }
.verdict { flex: 1 1 22rem; margin: 0; padding: .5rem .8rem; background: var(--well); border-left: 4px solid var(--gold); }
.ladder-weapon { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin: 0; padding: .35rem .8rem; background: var(--well); border-left: 4px solid var(--win-line); }
.hint-label { font: .72rem/1.3 var(--font-pixel); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ladder-foot { margin: .7rem 0 0; font-size: .85rem; color: var(--muted); }
.ranks-more summary { font-variant-numeric: tabular-nums; }
.ranks-more > .ranks { margin-top: .25rem; }
.ladder > h3 { color: var(--gold); }

/* Ranking rows (markup kept lean, see hall.tsx). Narrow: medal and setup share the first line; weapon and stats wrap below. */
.rank-head { display: none; }
.ranks { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.ranks > li {
  position: relative; display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: .4rem .75rem; align-items: center;
  padding: .45rem .7rem; background: #151b4f; border: 2px solid #2e3878; box-shadow: inset 0 2px 0 #ffffff0d;
}
.ranks > li > :not(.medal, .who) { grid-column: 1 / -1; }
.ranks.weapon > li > .wpn { grid-column: auto; }
.ranks > .first { background: linear-gradient(90deg, #3d3416, #1d2150 55%); border-color: var(--gold); box-shadow: 0 0 10px #ffd34d38, inset 0 2px 0 #ffffff14; }
.ranks > .ctl { background: #12153a; border-style: dashed; border-color: #8b93af; }
.ranks img { display: block; flex: none; image-rendering: pixelated; }

.medal {
  position: relative; display: inline-grid; place-items: center; min-width: 3.4rem; height: 2.1rem; padding: 0 .35rem;
  font: 700 1rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--text); text-shadow: none; white-space: nowrap;
  background: var(--well); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #ffffff30, inset -2px -2px 0 #00000059, 0 0 0 2px #4c57a8;
}
.medal.m1 { color: var(--ink); background: #f9c22b; box-shadow: inset 2px 2px 0 #fff0a8, inset -2px -2px 0 #b8860b; margin-top: .45rem; }
.medal.m1::before { content: ""; position: absolute; top: -12px; left: 50%; width: 14px; height: 10px; margin-left: -7px; image-rendering: pixelated; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd34d' d='M0 0h1v4H0zM3 0h1v4H3zM6 0h1v4H6zM1 1h1v3H1zM5 1h1v3H5zM2 2h1v2H2zM4 2h1v2H4z'/%3E%3Cpath fill='%23f9a31b' d='M0 4h7v1H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.medal.m2 { color: var(--ink); background: #9babb2; box-shadow: inset 2px 2px 0 #dfe8ec, inset -2px -2px 0 #66767d; }
.medal.m3 { color: var(--ink); background: #cd683d; box-shadow: inset 2px 2px 0 #f0a07a, inset -2px -2px 0 #8a3f22; }
.medal.ctl { padding: 0 .2rem; font-size: .8rem; color: #dfe3f0; background: #2b3157; border: 2px dashed #9babb2; box-shadow: none; }
/* The medal's " place" (or ": Unarmed, no place") is for screen readers only, like .sr-only. */
.medal > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Setup: look icons overlap, then a span with the linked name, tags (<i>) and a note (<small>) for facts this row alone has. */
.who { display: flex; align-items: center; gap: .6rem; min-width: 0; font-weight: 600; }
.who > img, .who > .slot { width: 32px; max-width: none; height: 32px; background: var(--well); outline: 2px solid var(--ink); }
/* With icons, a fixed 72 px slot holds up to three overlapping icons (the "+N" badge sits on the third), so every name starts at the same x. */
.who:has(> img, > .slot) { display: grid; grid-template-columns: 20px 20px 32px minmax(0, 1fr); column-gap: 0; }
.who:has(> img, > .slot) > * { grid-row: 1; }
.who > :is(img, .slot):nth-child(2) { grid-column: 2; }
.who > :is(img, .slot):nth-child(3) { grid-column: 3; }
.who:has(> img, > .slot) > span { grid-column: 4; margin-left: .6rem; }
/* hall.css ships in the site-wide stylesheet, so shared class names (.slot, .pips) stay under Hall-only parents. */
.who > .slot { display: block; flex: none; border: 2px dashed #8b93af; outline: 0; background: none; }
.who > .more { grid-column: 3; z-index: 1; place-self: end; padding: 0 .15rem; font: .75rem/1.2 var(--font-body); font-variant-numeric: tabular-nums; color: var(--text); background: var(--ink); }
.who > span { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; flex: 1; min-width: 0; }
.who a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.who i { padding: 0 .35rem; font: normal 400 .75rem/1.5 var(--font-pixel); color: var(--muted); background: var(--well); border: 2px solid #4c57a8; }
.who i.champ { color: var(--ink); background: var(--gold); border-color: var(--ink); }
.who small { flex-basis: 100%; font: 400 .8rem/1.4 var(--font-body); color: var(--muted); }

.wpn { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .55rem; min-width: 0; font-size: .92rem; line-height: 1.25; }
.wpn > b { flex: none; width: 32px; height: 32px; background: center / contain no-repeat; image-rendering: pixelated; }
.wpn > .greatsword { background-image: url("/assets/img/weapons/greatsword.png"); }
.wpn > .longsword { background-image: url("/assets/img/weapons/longsword.png"); }
.wpn > .dagger { background-image: url("/assets/img/weapons/dagger.png"); }
.wpn > .warhammer { background-image: url("/assets/img/weapons/warhammer.png"); }
.wpn > .staff { background-image: url("/assets/img/weapons/staff.png"); }
.wpn > :is(.pips, .charge) { display: inline-flex; align-items: center; gap: .35rem; font: .78rem/1.2 var(--font-pixel); color: var(--muted); }
/* Five charge pips from --n, drawn like ChargePips: gold for the level, dark sockets for the rest. */
.wpn > .pips::before {
  content: ""; flex: none; width: 43px; height: 11px;
  background: linear-gradient(90deg, var(--gold) calc(var(--n) * 9px), #2b3480 0);
  mask: repeating-linear-gradient(90deg, #000 0 7px, #0000 0 9px);
}

/* Stats: <i> labels, <b> chips (Buff), bars (.hi/.mid/.lo) and mana drops (.mana), <small> counts. */
.st { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr)); gap: .35rem .9rem; }
.st i { flex-basis: 100%; }
.st > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .45rem; min-width: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st i, .rank-head { font: normal .72rem/1.3 var(--font-pixel); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.st small { flex-basis: 100%; font: 400 .75rem/1.35 var(--font-body); color: var(--muted); white-space: normal; }
.st b { display: inline-block; padding: 0 .4rem; font-weight: 400; font-size: .88rem; line-height: 1.6; color: var(--muted); background: var(--well); border: 2px solid #4c57a8; }
.st b.up { color: var(--ink); background: var(--xp); border-color: var(--ink); }
.st b.down { color: var(--ink); background: var(--hp); border-color: var(--ink); }
.st b:is(.hi, .mid, .lo) {
  width: 3.75rem; height: .75rem; padding: 0; border: 2px solid var(--ink); box-shadow: 0 0 0 1px #4c57a8;
  background: linear-gradient(180deg, #ffffff47 0 2px, #0000 2px), linear-gradient(90deg, var(--bar) var(--v), var(--ink) var(--v));
}
.st b.hi { --bar: var(--xp); }
.st b.mid { --bar: var(--gold); }
.st b.lo { --bar: var(--hp); }
.st b.mana { display: inline-flex; align-items: center; gap: .35rem; padding: 0; font-size: 1rem; color: inherit; background: none; border: 0; }
.mana::before { content: ""; flex: none; width: 10px; height: 10px; image-rendering: pixelated; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%234d9be6' d='M2 0h1v1H2zM1 1h3v1H1zM0 2h5v2H0zM1 4h3v1H1z'/%3E%3Cpath fill='%238fd3ff' d='M1 2h1v1H1z'/%3E%3C/svg%3E") center / 100% 100%; }

/* Wide boards: aligned columns under a sighted-only header row (weapon cards stay narrow) */
@container (min-width: 56rem) {
  .quest { --cols: 3.75rem minmax(0, 1fr) 3.75rem 7.5rem 6rem 7rem; }
  .quest.armed { --cols: 3.75rem minmax(0, 1.7fr) minmax(0, 1fr) 3.75rem 7.5rem 6rem 7rem; }
  .spell { --cols: 3.75rem minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, .8fr); }
  .challenger { --cols: 3.75rem minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .rank-head, .ranks:not(.weapon) > li { grid-template-columns: var(--cols); column-gap: .9rem; }
  .rank-head { display: grid; padding: 0 .7rem .3rem; }
  .ranks:not(.weapon) > li > * { grid-column: auto; }
  .ranks:not(.weapon) .st { display: contents; }
  .ranks:not(.weapon) .st i { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ranks:not(.weapon) .medal.m1 { margin-top: 0; }
}

/* Weapons, challengers, the rules */
.weapon-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.weapon-cards > .window { margin-top: 0; container-type: inline-size; padding: .8rem .9rem .9rem; }
.weapon-card h3 { color: var(--gold); }
.ranks.weapon .wpn { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .55rem; font-size: 1rem; font-weight: 600; }
.ranks.weapon .wpn > b { grid-row: span 2; width: 64px; height: 64px; }
.ranks.weapon .wpn > .pips { justify-self: start; }
@media (min-width: 900px) { .weapon-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.unplaced { margin-top: 1.1rem; }
.unplaced h4 { margin: 0; font-family: var(--font-pixel); color: var(--gold); }
.unplaced-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.unplaced-list li { gap: 0; padding: .25rem .6rem; background: var(--well); border: 2px solid #4c57a8; }
.unplaced-list li > span { font-weight: 400; }
.hall-empty { display: grid; justify-items: center; gap: .9rem; padding: 1.5rem 1rem; text-align: center; background: var(--well); border: 2px solid #2e3878; }
.hall-empty p { max-width: 34rem; margin: 0; }
.hall-empty .button-row { justify-content: center; margin-top: 0; }
.podium { display: flex; align-items: flex-end; gap: 4px; }
.podium span { width: 3rem; height: 2.25rem; background: #2e3878; border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #4c57a8, inset -2px -2px 0 #1a2160; }
.podium span:nth-child(2) { height: 3.25rem; }
.podium span:nth-child(3) { height: 1.5rem; }
.hall-how summary { font: 700 1.2rem/1.2 var(--font-pixel); color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.hall-rules { margin: .5rem 0 1rem; padding-left: 1.25rem; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .ranks > li:nth-child(-n + 8) { animation: deal-in .24s steps(4, end) both; }
  .ranks > li:nth-child(2) { animation-delay: 30ms; }
  .ranks > li:nth-child(3) { animation-delay: 60ms; }
  .ranks > li:nth-child(4) { animation-delay: 90ms; }
  .ranks > li:nth-child(5) { animation-delay: .12s; }
  .ranks > li:nth-child(6) { animation-delay: .15s; }
  .ranks > li:nth-child(7) { animation-delay: .18s; }
  .ranks > li:nth-child(8) { animation-delay: .21s; }
  .ranks > .first::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, #0000 42%, #fff3d633 50%, #0000 58%) no-repeat;
    background-size: 250% 100%; animation: shimmer .8s steps(10, end) .3s both;
  }
  .hall-tab[aria-selected="true"]::before { animation: cursor-nudge .8s steps(2, jump-none) infinite; }
}
@keyframes deal-in { from { opacity: 0; transform: translateX(-16px); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (forced-colors: active) {
  .hall-banner { border: 2px solid CanvasText; border-image: none; }
  .medal, .st b, .who i, .ranks > li, .hall-hud > div, .unplaced-list li, .hall-empty, .verdict, .ladder-weapon { border-color: CanvasText; }
  .hall-tab[aria-selected="true"] { border-bottom-color: Highlight; }
  .st b:is(.hi, .mid, .lo), .wpn > .pips::before, .wpn > b, .hall-tab::before, .medal.m1::before, .mana::before { forced-color-adjust: none; }
}