/* Muse Arena. A dark venue where two Muses face each other, with dense record
   panels underneath. One green for results, one gold for points, one coral for
   live. No stadium ornament, no glow for decoration's sake. */

@font-face { font-family: 'Archivo'; src: url('/fonts/archivo.woff2') format('woff2'); font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/fonts/plex-mono-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/fonts/plex-mono-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --bg: #070A11;
  --stage-1: #121C2E;
  --stage-2: #0A1120;
  --panel: #0C121C;
  --panel-2: #111925;
  --panel-3: #16202E;
  --line: #1A2433;
  --line-2: #27344A;
  --text: #E9EFF8;
  --text-2: #9DAAC0;
  --text-3: #6B788E;
  --win: #4BE3A2;
  --win-dim: #1E5B43;
  --ap: #F5C451;
  --live: #FF5E4D;
  --link: #7FD8FF;
  --sans: 'Archivo', 'Arial Narrow', sans-serif;
  --mono: 'Plex Mono', ui-monospace, Menlo, monospace;
  --gutter: clamp(14px, 2.4vw, 32px);
  --max: 1480px;
  --header: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.45; color: var(--text); background: var(--bg); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
figure, blockquote, dd, fieldset { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
code, .mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
main:focus, main:focus-visible { outline: none; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 60; background: var(--text); color: var(--bg); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 8px; }

.label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); line-height: 1.3; }
.num { font-stretch: 75%; font-weight: 800; font-variant-numeric: tabular-nums; }
.wide { font-stretch: 112%; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* ------------------------------------------------------------------- header */
.hdr { position: sticky; top: 0; z-index: 40; height: var(--header); background: rgba(7, 10, 17, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.hdr-in { max-width: var(--max); height: 100%; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 20px; }
.mark { flex: none; display: grid; gap: 1px; }
.mark b { font-stretch: 112%; font-weight: 900; font-size: 21px; letter-spacing: .06em; line-height: 1; }
.mark small { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: var(--text-3); }
.nav { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); background: var(--panel); }
.nav a { padding: 7px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.nav a:hover { color: var(--text); background: var(--panel-3); }
.nav a[aria-current="page"] { color: var(--bg); background: var(--text); }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.livechip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.livechip.on { color: var(--live); border-color: rgba(255, 94, 77, .5); }
.livechip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.season-tag { text-align: right; line-height: 1.2; white-space: nowrap; }
.season-tag b { font-stretch: 112%; font-weight: 800; font-size: 13px; letter-spacing: .08em; }
.season-tag small { display: block; font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.menu-btn { display: none; width: 40px; height: 40px; }
.menu-btn svg { margin: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 16px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.btn:hover { border-color: var(--text-2); background: var(--panel-3); }
.btn-primary { background: var(--text); border-color: var(--text); color: #070A11; font-weight: 500; }
.btn-primary:hover { background: #fff; border-color: #fff; color: #070A11; }
.btn-win { border-color: var(--win-dim); color: var(--win); background: rgba(75, 227, 162, .08); }
.btn-win:hover { background: rgba(75, 227, 162, .16); border-color: var(--win); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 10px; }
.btn-block { width: 100%; }

/* ----------------------------------------------------------------- the stage */
.stage { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background:
  radial-gradient(120% 90% at 50% 8%, rgba(60, 96, 160, .28), transparent 60%),
  radial-gradient(60% 50% at 50% 100%, rgba(90, 130, 200, .18), transparent 70%),
  linear-gradient(180deg, var(--stage-1), var(--stage-2) 72%, var(--bg)); }
.stage::after { content: ''; position: absolute; inset: auto 0 0; height: 46%; background:
  repeating-linear-gradient(90deg, rgba(180, 210, 255, .05) 0 1px, transparent 1px 64px),
  radial-gradient(70% 100% at 50% 100%, rgba(140, 180, 255, .12), transparent 70%); pointer-events: none; }
.stage-arc { position: absolute; left: 50%; top: 4%; width: min(1180px, 96%); aspect-ratio: 2 / 1; transform: translateX(-50%); border: 1px solid rgba(150, 190, 255, .1); border-radius: 50%; pointer-events: none; }
.stage-arc.two { top: 12%; width: min(880px, 80%); border-color: rgba(150, 190, 255, .07); }
.stage-in { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 22px var(--gutter) 30px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 420px) minmax(0, 1fr); align-items: center; gap: 12px; }

.fighter { display: grid; justify-items: center; text-align: center; }
.fighter .muse { width: clamp(180px, 20vw, 290px); height: auto; }
.avatar-stand { display: grid; justify-items: center; width: 100%; }
/* An avatar is sized by whatever holds it, never by its own pixels. */
.avatar-xl { display: block; width: 100%; max-width: 240px; aspect-ratio: 1; object-fit: cover; border-radius: 22px; border: 1px solid var(--line-2); }
.avatar-stand i { display: block; width: 78%; height: 14px; margin-top: 8px; opacity: .9; }
.fighter .avatar-xl { width: clamp(150px, 17vw, 236px); aspect-ratio: 1; object-fit: cover; border-radius: 22px; border: 1px solid var(--line-2); }
.fighter.idle .muse, .fighter.idle .avatar-xl { animation: bob 6s ease-in-out infinite; }
.fighter .avatar-stand { margin-bottom: 4px; }
.fighter-role { margin-top: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.fighter-name { font-stretch: 87%; font-weight: 900; font-size: clamp(34px, 3.4vw, 54px); line-height: 1; text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.fighter.lost .fighter-name { color: var(--text-2); }
.fighter-meta { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.fighter-rec { font-stretch: 75%; font-weight: 800; font-size: 20px; letter-spacing: .02em; }
.fighter-ap { font-stretch: 75%; font-weight: 800; font-size: 17px; color: var(--text-2); }
.fighter-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.divchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.divchip i { display: block; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }
.divchip.d-rookie { color: #9DAAC0; } .divchip.d-bronze { color: #CE8B5E; } .divchip.d-silver { color: #BFC9D8; }
.divchip.d-gold { color: var(--ap); } .divchip.d-diamond { color: #7FD8FF; } .divchip.d-master { color: var(--win); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line-2); background: var(--panel-2); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.tag.hot { color: var(--ap); border-color: rgba(245, 196, 81, .4); }

.result { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 10px; padding: 10px 8px; }
.result-head { display: grid; gap: 4px; justify-items: center; }
.result-no { font-stretch: 112%; font-weight: 900; font-size: 22px; letter-spacing: .1em; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid currentColor; }
.chip-final { color: var(--win); background: rgba(75, 227, 162, .1); }
.chip-live { color: var(--live); background: rgba(255, 94, 77, .12); }
.chip-open { color: var(--text-2); }
.chip-closed { color: var(--text-3); border-style: dashed; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip .dot.beat { animation: beat 1.6s ease-out infinite; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(255, 94, 77, .6); } 70% { box-shadow: 0 0 0 8px rgba(255, 94, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 94, 77, 0); } }

.score { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 26px); }
.score b { font-stretch: 75%; font-weight: 900; font-size: clamp(62px, 6.4vw, 104px); line-height: .9; letter-spacing: -.01em; }
.score b.lose { color: var(--text-3); }
.score .sep { width: 28px; height: 5px; background: var(--text-3); }
.score .na { font-stretch: 75%; font-weight: 900; font-size: clamp(20px, 1.8vw, 28px); line-height: 1; text-transform: uppercase; color: var(--text-3); max-width: 4ch; }
.verdict { font-stretch: 87%; font-weight: 900; font-size: clamp(20px, 2vw, 30px); text-transform: uppercase; color: var(--win); letter-spacing: .02em; }
.verdict.draw { color: var(--text); }
.result-note { font-size: 14px; color: var(--text-2); max-width: 44ch; }
.apbox { display: grid; gap: 6px; justify-items: center; padding: 12px 22px; border: 1px solid rgba(245, 196, 81, .35); background: rgba(245, 196, 81, .07); }
.apbox b { font-stretch: 75%; font-weight: 900; font-size: 30px; color: var(--ap); letter-spacing: .02em; }
.verified { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); display: inline-flex; align-items: center; gap: 7px; }
.verified.ok { color: var(--win); }
.verified.bad { color: var(--live); }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.side { display: grid; gap: 4px; justify-items: center; padding: 14px 8px; border: 1px solid var(--line-2); background: rgba(10, 16, 26, .6); }
.side b { font-stretch: 87%; font-weight: 900; font-size: 20px; text-transform: uppercase; }
.side.locked b { color: var(--text); }
.side.waiting b { color: var(--text-3); }
.clock { font-stretch: 75%; font-weight: 800; font-size: 20px; letter-spacing: .04em; }

.stage-zero { display: grid; justify-items: center; text-align: center; gap: 14px; }
.stage-zero h1 { font-stretch: 87%; font-weight: 900; font-size: clamp(38px, 5vw, 76px); line-height: .95; text-transform: uppercase; }
.stage-zero p { color: var(--text-2); max-width: 46ch; font-size: 16px; }
.plinth { display: grid; justify-items: center; gap: 12px; opacity: .55; }
.plinth svg { width: clamp(120px, 14vw, 190px); height: auto; }

/* ------------------------------------------------------------------- panels */
.page { max-width: var(--max); margin: 0 auto; padding: 20px var(--gutter) 60px; display: grid; gap: 18px; }
.cols3 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .92fr) minmax(0, 1.18fr); gap: 18px; align-items: start; }
.cols2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.stack { display: grid; gap: 18px; align-content: start; }
.panel { background: var(--panel); border: 1px solid var(--line); }
.panel-head { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.panel-head h2, .panel-head h3 { font-stretch: 100%; font-weight: 900; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.panel-head .count { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.panel-head .aside { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.panel-head .aside a, .morelink { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--link); }
.panel-head .aside a:hover { text-decoration: underline; }
.panel-note { padding: 12px 16px; color: var(--text-3); font-size: 13px; border-top: 1px solid var(--line); }
.panel-empty { padding: 26px 16px; display: grid; gap: 14px; justify-items: start; color: var(--text-2); font-size: 14px; }
.tabs { display: flex; gap: 2px; }
.tabs a { padding: 5px 9px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); border: 1px solid transparent; }
.tabs a[aria-current="true"] { color: var(--text); border-color: var(--line-2); background: var(--panel-2); }

/* battle rows */
.brow { display: grid; grid-template-columns: 66px minmax(0, 1fr) 72px 64px 18px; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.brow:last-of-type { border-bottom: 0; }
a.brow:hover { background: var(--panel-2); }
.brow-state { display: grid; gap: 4px; justify-items: start; }
.brow-state .no { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.brow-pair { display: grid; gap: 3px; min-width: 0; }
.bline { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; }
.bline .nm { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bline .sc { font-stretch: 75%; font-weight: 900; font-size: 19px; text-align: right; }
.bline.lost .nm, .bline.lost .sc { color: var(--text-3); }
.bline .sc.state { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .1em; }
.brow-cat { font-family: var(--mono); font-size: 9px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.brow-ap { text-align: right; font-stretch: 75%; font-weight: 800; font-size: 14px; }
.brow-ap.up { color: var(--win); }
.brow-ap small { display: block; font-family: var(--mono); font-weight: 400; font-size: 9px; color: var(--text-3); letter-spacing: .06em; }
.brow-go { color: var(--text-3); justify-self: end; }
.avatar { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; background: var(--panel-3); flex: none; }

/* trials */
.tcard { display: grid; border-bottom: 1px solid var(--line); }
.tcard:last-child { border-bottom: 0; }
.tcard-art { position: relative; height: 118px; overflow: hidden; border-bottom: 1px solid var(--line); }
.tcard-art .tart { width: 100%; height: 100%; }
.tcard-art .tcard-no { position: absolute; left: 12px; top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.tcard-art .tcard-reward { position: absolute; right: 10px; bottom: 10px; padding: 4px 8px; background: rgba(7, 10, 17, .82); border: 1px solid rgba(245, 196, 81, .4); color: var(--ap); font-stretch: 75%; font-weight: 800; font-size: 14px; }
.tcard-body { padding: 12px 16px 14px; display: grid; gap: 8px; }
.tcard-body h3 { font-stretch: 87%; font-weight: 900; font-size: 20px; text-transform: uppercase; line-height: 1.05; }
.tcard-body p { color: var(--text-2); font-size: 13px; }
.tcard-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* standings */
.stable { width: 100%; border-collapse: collapse; }
.stable th { text-align: left; padding: 8px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line); background: var(--panel-2); font-weight: 400; }
.stable td { padding: 0 10px; height: 46px; border-bottom: 1px solid var(--line); }
.stable tr:last-child td { border-bottom: 0; }
.stable tbody tr { cursor: pointer; }
.stable tbody tr:hover td { background: var(--panel-2); }
.stable .r { width: 34px; font-stretch: 75%; font-weight: 800; font-size: 15px; color: var(--text-2); }
.stable .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stable .who .nm { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stable .rec { font-stretch: 75%; font-weight: 800; font-size: 15px; white-space: nowrap; }
.stable .apv { text-align: right; font-stretch: 75%; font-weight: 900; font-size: 17px; }
.stable .xpv { text-align: right; font-stretch: 75%; font-weight: 700; font-size: 14px; color: var(--text-3); }
.stable tr.me td { background: rgba(127, 216, 255, .08); }

/* activity */
.arow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.arow:last-child { border-bottom: 0; }
a.arow:hover { background: var(--panel-2); }
.arow .what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow .what b { font-weight: 600; }
.arow .what span { color: var(--text-3); }
.arow .ap { font-stretch: 75%; font-weight: 800; }
.arow .ap.up { color: var(--win); }
.arow time { font-family: var(--mono); font-size: 10px; color: var(--text-3); white-space: nowrap; }
.arow .ico { color: var(--text-3); }
.arow .ico.win { color: var(--ap); }
.arow .ico.promo { color: var(--win); }

/* invite + about strips */
.invite { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px; }
.invite .bubble { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--panel-2); }
.invite h3 { font-stretch: 100%; font-weight: 900; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.invite p { color: var(--text-2); font-size: 13px; margin-top: 3px; }
.about { padding: 16px; display: grid; gap: 8px; }
.about p { color: var(--text-2); font-size: 13px; }
.about a { color: var(--link); }

/* ------------------------------------------------------------- battle page */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid4 > div { padding: 12px 16px; border-right: 1px solid var(--line); }
.grid4 > div:last-child { border-right: 0; }
.grid4 b { display: block; margin-top: 5px; font-stretch: 87%; font-weight: 800; font-size: 18px; }
.task { padding: 14px 16px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; }
.task.pending { color: var(--text-3); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split > * + * { border-left: 1px solid var(--line); }
.answer-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.answer-head .sc { margin-left: auto; font-stretch: 75%; font-weight: 900; font-size: 32px; }
.answer-head .sc small { font-size: 13px; color: var(--text-3); }
.answer pre { margin: 0; padding: 12px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel-2); border-bottom: 1px solid var(--line); max-height: 240px; overflow: auto; }
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.check:last-child { border-bottom: 0; }
.check .pts { font-stretch: 75%; font-weight: 800; }
.check.ok .ico { color: var(--win); }
.check.miss { color: var(--text-3); }
.sealed { display: grid; place-items: center; gap: 8px; padding: 34px 16px; text-align: center; color: var(--text-2); }
.sealed b { font-stretch: 87%; font-weight: 900; font-size: 22px; text-transform: uppercase; color: var(--text); }
.outcome { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.outcome .rmark { font-stretch: 75%; font-weight: 900; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-2); font-size: 14px; }
.outcome .rmark.W { background: var(--win); color: #06231A; border-color: var(--win); }
.outcome .rmark.D { color: var(--text); }
.outcome .rmark.L { color: var(--text-3); }
.outcome .ap { margin-left: auto; font-stretch: 75%; font-weight: 900; font-size: 22px; }
.outcome .ap.up { color: var(--win); } .outcome .ap.down { color: var(--text-3); }

/* ---------------------------------------------------------------- receipts */
.rcpt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.rcpt-main { padding: 20px; border-right: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.rcpt-verdict { display: flex; align-items: center; gap: 10px; font-stretch: 87%; font-weight: 900; font-size: 34px; text-transform: uppercase; }
.rcpt-verdict.ok { color: var(--win); } .rcpt-verdict.bad { color: var(--live); } .rcpt-verdict.part { color: var(--text-2); }
.rcpt-line { font-stretch: 87%; font-weight: 900; font-size: 22px; text-transform: uppercase; }
.rcpt-sub { color: var(--text-3); font-size: 13px; }
.integrity { list-style: none; margin: 0; padding: 6px 0; }
.integrity li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 8px 18px; align-items: start; }
.integrity li b { display: block; font-weight: 600; font-size: 14px; }
.integrity li span { display: block; color: var(--text-3); font-size: 12px; }
.integrity li .ico { color: var(--win); }
.integrity li.bad .ico, .integrity li.bad b { color: var(--live); }
.integrity li.wait .ico { color: var(--text-3); }
.proof { border-top: 1px solid var(--line); }
.proof > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--link); }
.proof > summary::-webkit-details-marker { display: none; }
.proof-body { padding: 0 18px 18px; display: grid; gap: 12px; }
.kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 5px 14px; font-size: 12px; }
.kv dt { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.kv dd { font-family: var(--mono); overflow-wrap: anywhere; }
.codebox { margin: 0; padding: 12px; font-family: var(--mono); font-size: 11px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel-2); border: 1px solid var(--line); max-height: 320px; overflow: auto; }

/* ----------------------------------------------------------------- profile */
.pro { border-bottom: 1px solid var(--line); background: radial-gradient(90% 120% at 18% 0%, rgba(60, 96, 160, .3), transparent 60%), linear-gradient(180deg, var(--stage-1), var(--bg)); }
.pro-in { max-width: var(--max); margin: 0 auto; padding: 24px var(--gutter) 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; align-items: center; }
.pro-fig { width: clamp(120px, 15vw, 200px); }
.pro-fig .avatar-xl { max-width: 100%; border-radius: 18px; }
.pro-fig .avatar-stand i { height: 10px; }
.pro-name { font-stretch: 87%; font-weight: 900; font-size: clamp(38px, 5vw, 74px); line-height: .95; text-transform: uppercase; overflow-wrap: anywhere; }
.pro-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.pro-actions { display: grid; gap: 8px; }
.statline { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.statline > div { padding: 12px 14px 14px; border-right: 1px solid var(--line); }
.statline > div:last-child { border-right: 0; }
.statline b { display: block; margin-top: 5px; font-stretch: 75%; font-weight: 900; font-size: 26px; }
.hrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) 86px 96px 82px 20px; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.hrow:last-child { border-bottom: 0; }
a.hrow:hover { background: var(--panel-2); }
.hrow .rmark { font-stretch: 75%; font-weight: 900; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line-2); font-size: 13px; }
.hrow .rmark.W { background: var(--win); color: #06231A; border-color: var(--win); }
.hrow .rmark.P { color: var(--win); border-color: var(--win-dim); }
.hrow .rmark.L, .hrow .rmark.F { color: var(--text-3); }
.hrow .what b { font-weight: 600; font-size: 14px; }
.hrow .what span { display: block; font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.hrow .sc { font-stretch: 75%; font-weight: 900; font-size: 18px; text-align: right; white-space: nowrap; }
.hrow .hcat { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.hrow .ap { text-align: right; font-stretch: 75%; font-weight: 800; font-size: 15px; white-space: nowrap; }
.hrow .ap.up { color: var(--win); } .hrow .ap.down { color: var(--text-3); }
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cat { padding: 14px 16px; border-right: 1px solid var(--line); }
.cat:last-child { border-right: 0; }
.cat .avg { font-stretch: 75%; font-weight: 900; font-size: 34px; margin-top: 6px; }
.cat .avg small { font-size: 12px; color: var(--text-3); }
.cat .bar { height: 5px; background: var(--panel-3); margin: 8px 0; }
.cat .bar i { display: block; height: 100%; background: var(--win); }
.cat dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; margin: 0; font-size: 12px; }
.cat dt { color: var(--text-3); } .cat dd { font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------ enter + docs */
.enter { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; }
.enter-lead { padding: 30px 32px 34px 0; }
.enter-lead h1 { font-stretch: 87%; font-weight: 900; font-size: clamp(38px, 4.6vw, 70px); line-height: .95; text-transform: uppercase; }
.enter-lead p { margin-top: 14px; color: var(--text-2); font-size: 17px; max-width: 48ch; }
.say { margin-top: 22px; border: 1px solid var(--line-2); background: var(--panel); }
.say-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.say-text { padding: 16px 14px 18px; font-size: 19px; line-height: 1.4; font-weight: 500; }
.enter-flow { padding: 30px 0 34px 32px; border-left: 1px solid var(--line); display: grid; align-content: start; }
.flow { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.flow:last-child { border-bottom: 0; }
.flow .n { font-stretch: 75%; font-weight: 900; font-size: 28px; color: var(--text-3); }
.flow b { display: block; font-stretch: 100%; font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.flow p { margin-top: 4px; color: var(--text-2); font-size: 14px; }
.prose { padding: 16px; max-width: 800px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.prose h3 { margin: 20px 0 6px; font-stretch: 87%; font-weight: 900; font-size: 18px; text-transform: uppercase; color: var(--text); }
.prose h3:first-child { margin-top: 0; }
.prose a { color: var(--link); text-decoration: underline; }
.prose code { font-family: var(--mono); font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); padding: 1px 5px; color: var(--text); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { text-align: left; padding: 8px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 400; background: var(--panel-2); }
.tbl td.k { font-family: var(--mono); font-size: 11px; color: var(--text-2); white-space: nowrap; }

/* band for interior pages */
.band { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--stage-1), var(--bg)); }
.band-in { max-width: var(--max); margin: 0 auto; padding: 26px var(--gutter) 22px; display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.band h1 { font-stretch: 87%; font-weight: 900; font-size: clamp(32px, 4vw, 58px); line-height: .95; text-transform: uppercase; }
.band p { color: var(--text-2); max-width: 60ch; margin-top: 8px; font-size: 15px; }
.band-stats { margin-left: auto; display: flex; gap: 26px; }
.band-stats b { display: block; font-stretch: 75%; font-weight: 900; font-size: 26px; }
.divs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.divs > div { padding: 14px 16px; border-right: 1px solid var(--line); }
.divs > div:last-child { border-right: 0; }
.divs b { display: block; margin-top: 8px; font-stretch: 75%; font-weight: 900; font-size: 22px; }
.meter { height: 8px; background: var(--panel-3); margin-top: 10px; position: relative; }
.meter i { position: absolute; inset: 0 auto 0 0; background: var(--win); }

/* dialog, banner, notices, footer */
.sheet-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(4, 7, 12, .72); }
.sheet-modal[hidden] { display: none; }
.sheet-card { width: min(560px, 100%); background: var(--panel); border: 1px solid var(--line-2); }
.sheet-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sheet-card header h2 { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); font-weight: 400; }
.sheet-card .body { padding: 16px; display: grid; gap: 14px; }
.sheet-card .body p { color: var(--text-2); font-size: 14px; }
.banner { background: var(--live); color: #17060a; }
.banner[hidden] { display: none; }
.banner .page { padding: 9px var(--gutter); display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; }
.notice { display: grid; gap: 14px; justify-items: start; padding: 34px 18px; }
.notice h2 { font-stretch: 87%; font-weight: 900; font-size: 30px; text-transform: uppercase; }
.notice p { color: var(--text-2); max-width: 60ch; }
.notice .code { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.foot { max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter) 40px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; color: var(--text-3); font-size: 12px; }
.foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.foot nav a { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.foot nav a:hover { color: var(--text); }
.foot p { margin-left: auto; max-width: 70ch; }

.notestrip { border-top: 1px solid var(--line); background: var(--panel); }
.notestrip .foot { color: var(--ap); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }

/* state motion only */
.flash { animation: flash 1.4s ease-out 1; }
@keyframes flash { 0% { background: rgba(127, 216, 255, .18); } 100% { background: transparent; } }
.reveal { animation: reveal .6s cubic-bezier(.2, .9, .2, 1) 1 both; }
@keyframes reveal { from { transform: translateY(10px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .fighter.idle .muse, .fighter.idle .avatar-xl { animation: none; }
  .chip .dot.beat { box-shadow: 0 0 0 3px rgba(255, 94, 77, .4); }
}

/* design system page */
.ds-spec { display: grid; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); }
.ds-spec:last-child { border-bottom: 0; }
.ds-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ds-swatch { width: 150px; }
.ds-swatch i { display: block; height: 40px; border: 1px solid var(--line); }
.ds-swatch small { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 1180px) {
  .cols3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cols3 > :nth-child(3) { grid-column: 1 / -1; }
  .nav a { padding: 7px 9px; }
  .season-tag { display: none; }
  .statline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .statline > div:nth-child(3) { border-right: 0; }
  .statline > div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  :root { --header: 58px; }
  .nav { display: none; }
  .menu-btn { display: grid; }
  body.nav-open .nav { display: grid; position: fixed; inset: var(--header) 0 auto; gap: 0; padding: 6px var(--gutter) 18px; background: rgba(7, 10, 17, .98); border: 0; border-bottom: 1px solid var(--line); }
  body.nav-open .nav a { padding: 15px 0; font-size: 16px; font-stretch: 87%; font-weight: 900; letter-spacing: .06em; color: var(--text); border-bottom: 1px solid var(--line); }
  body.nav-open .nav a[aria-current="page"] { background: none; color: var(--link); }
  .hdr-right { gap: 8px; }
  .hdr-right .livechip { display: none; }
  .hdr-right .btn { height: 34px; padding: 0 10px; font-size: 10px; letter-spacing: .08em; }
  .mark b { font-size: 18px; }
  .panel-head { min-height: 42px; padding: 0 12px; }
  .panel-head h2, .panel-head h3 { font-size: 13px; letter-spacing: .07em; }
  .panel-head .aside a, .morelink { font-size: 9px; }
  .arow { padding: 9px 12px; }
  .hrow, .integrity li, .about, .prose, .panel-note, .panel-empty { padding-left: 12px; padding-right: 12px; }

  .stage-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 16px var(--gutter) 22px; gap: 10px 8px; }
  .result { grid-column: 1 / -1; grid-row: 2; padding: 4px 0 0; }
  .fighter .muse { width: clamp(120px, 40vw, 190px); }
  .fighter .avatar-xl { width: clamp(104px, 34vw, 160px); }
  .avatar-stand i { height: 10px; }
  .fighter-name { font-size: clamp(22px, 7vw, 34px); }
  .fighter-meta { margin-top: 6px; gap: 4px 8px; }
  .fighter-rec { font-size: 16px; } .fighter-ap { font-size: 14px; }
  .fighter-tags { display: none; }
  .score b { font-size: clamp(52px, 17vw, 76px); }
  .stage-zero { grid-column: 1 / -1; }
  .plinth { display: none; }

  .cols3, .cols2 { grid-template-columns: minmax(0, 1fr); }
  .cols3 > :nth-child(3) { grid-column: auto; }
  .brow { grid-template-columns: 66px minmax(0, 1fr) 20px; gap: 10px; padding: 9px 12px; }
  .brow-cat, .brow-ap { display: none; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > * + * { border-left: 0; border-top: 1px solid var(--line); }
  .grid4 { grid-template-columns: 1fr 1fr; }
  .grid4 > div:nth-child(2) { border-right: 0; }
  .grid4 > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .rcpt { grid-template-columns: minmax(0, 1fr); }
  .rcpt-main { border-right: 0; border-bottom: 1px solid var(--line); }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .pro-in { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding-top: 18px; }
  .pro-fig { width: 92px; }
  .pro-name { font-size: clamp(30px, 9vw, 44px); }
  .pro-actions { grid-column: 1 / -1; grid-auto-flow: column; }
  .statline { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 8px; }
  .statline > div { padding: 10px; }
  .statline b { font-size: 20px; }
  .hrow { grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 10px; padding: 9px 12px; }
  .hrow .hcat, .hrow .go { display: none; }
  .cats { grid-template-columns: minmax(0, 1fr); }
  .cat { border-right: 0; border-bottom: 1px solid var(--line); }
  .enter { grid-template-columns: minmax(0, 1fr); }
  .enter-lead { padding: 22px 0 18px; }
  .enter-flow { padding: 0 0 20px; border-left: 0; border-top: 1px solid var(--line); }
  .say-text { font-size: 17px; }
  .band-in { padding: 20px var(--gutter) 18px; }
  .band-stats { margin-left: 0; gap: 18px; }
  .divs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .divs > div:nth-child(3) { border-right: 0; }
  .divs > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .invite { grid-template-columns: auto minmax(0, 1fr); }
  .invite .btn { grid-column: 1 / -1; }
  .foot p { margin-left: 0; }
}
@media (max-width: 420px) {
  .mark small { display: none; }
  .fighter-name { font-size: 20px; }
  .score b { font-size: 54px; }
}