/* Layout: scoreboard header, pitch + live battle feed side by side, then the work under review, the flaw report and the roster. */
:root {
  --night: #11160f;
  --stand: #1a2117;
  --rail: #2b3627;
  --chalk: #ece6d3;
  --dust: #a3ab95;
  --meer: #e0815f;
  --meer-ink: #f3b597;
  --kam: #2bbd8f;
  --kam-ink: #8fe6c8;
  --hit: #ef5b5b;
  --block: #58c4dd;
  --gold: #f2c94c;
  --f-display: "Pixelify Sans", "Courier New", monospace;
  --f-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  background: var(--night); color: var(--chalk); font: 16px/1.55 var(--f-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 20px 48px;
}
.wrap { max-width: 1180px; margin: 0 auto; display: grid; gap: 28px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: .01em; }
h2 { font-size: 1.35rem; }
.label { font: 500 .72rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dust); }
button { font: 600 .95rem var(--f-display); color: var(--chalk); background: var(--stand); border: 2px solid var(--rail); padding: 7px 14px; cursor: pointer; border-radius: 0; box-shadow: 0 3px 0 var(--rail); }
button:hover { border-color: var(--dust); }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rail); }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button[aria-pressed="true"] { background: var(--chalk); color: var(--night); border-color: var(--chalk); }

header.top { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: end; justify-content: space-between; border-bottom: 2px dashed var(--rail); padding-bottom: 16px; }
.brand h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1; color: var(--gold); }
.brand p { margin: 6px 0 0; color: var(--dust); }
.controls { display: flex; flex-wrap: wrap; gap: 8px; }

/* the battle page runs wider so the pitch gets most of the row; the feed is a fixed rail beside it */
.wrap:has(> .battle) { max-width: 1440px; }
.battle { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .battle { grid-template-columns: minmax(0, 1fr); } }
/* side by side, the feed matches the pitch's height and scrolls inside it */
@media (min-width: 1001px) { .battle > .feed { align-self: stretch; contain: size; max-height: none; } }

/* work integrity across the top, then one card per fighter in lineup order */
.hud { display: grid; grid-template-columns: repeat(var(--fighters, 2), minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.hud .c-boss { grid-column: 1 / -1; }
.c-fighter .who span { color: var(--ink); } .c-fighter .bar i { background: var(--c); }
.c-fighter { border-top: 3px solid var(--c); }
.bar-card { background: var(--stand); border: 2px solid var(--rail); padding: 8px 10px; min-width: 0; }
.bar-card .who { display: flex; justify-content: space-between; gap: 8px; font-family: var(--f-display); font-size: 1.05rem; white-space: nowrap; }
.bar-card .who small { font: 500 .7rem var(--f-mono); color: var(--dust); align-self: center; letter-spacing: .06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 10px; background: #0b0f0a; border: 1px solid var(--rail); margin-top: 6px; }
.bar i { display: block; height: 100%; width: 100%; transition: width .5s steps(10); }
.num { font: 500 .78rem var(--f-mono); color: var(--dust); margin-top: 4px; font-variant-numeric: tabular-nums; display: flex; justify-content: space-between; gap: 6px; }
.c-meer .who span { color: var(--meer-ink); } .c-meer .bar i { background: var(--meer); }
.c-kam .who span { color: var(--kam-ink); } .c-kam .bar i { background: var(--kam); }
.c-boss { text-align: center; min-width: 150px; }
.c-boss .who { justify-content: center; color: var(--gold); }
.c-boss .bar i { background: var(--gold); }
@media (max-width: 560px) { .hud { grid-template-columns: 1fr 1fr; } }

.pitch { position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; border: 3px solid var(--rail); background: #3f7f31; image-rendering: pixelated; }
.pitch canvas { display: block; width: 100% !important; height: 100% !important; image-rendering: pixelated; }

.feed { background: var(--stand); border: 2px solid var(--rail); display: flex; flex-direction: column; max-height: 640px; min-width: 0; }
.feed-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 2px solid var(--rail); }
.feed ol { list-style: none; margin: 0; padding: 12px 14px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.feed .empty { color: var(--dust); }
.feed .round-divider { font: 600 .95rem var(--f-display, inherit); color: var(--gold, #f2c94c); border-top: 2px dashed var(--rail); padding-top: 8px; }
.feed .round-divider span { color: var(--dust); font: .8rem var(--f-mono, monospace); }
.move { border-left: 4px solid var(--c, var(--rail)); padding-left: 12px; display: grid; gap: 6px; }
.move h3 { font-size: 1rem; }
.move h3 span { color: var(--ink, var(--chalk)); }
.quote { font: .82rem/1.45 var(--f-mono); background: #0e130d; border: 1px dashed var(--rail); padding: 6px 8px; color: var(--chalk); overflow-wrap: anywhere; }
.move p { margin: 0; font-size: .92rem; }
.move .def { color: var(--dust); }
.verdict { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font: 500 .78rem var(--f-mono); }
.pill { padding: 1px 8px; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.pill.valid { color: var(--hit); } .pill.blocked { color: var(--block); } .pill.invalid { color: var(--dust); }
.judges { display: inline-flex; gap: 3px; }
.judges b { width: 10px; height: 10px; display: inline-block; border: 1px solid var(--dust); }
.judges b.y { background: var(--chalk); border-color: var(--chalk); }
.why { font-size: .85rem; color: var(--dust); }

.review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 860px) { .review { grid-template-columns: minmax(0, 1fr); } }
.paper { background: #e9edf2; color: #1d2733; padding: 18px 20px; border: 3px solid #b8c4d2; background-image: linear-gradient(#d7e0ea 1px, transparent 1px), linear-gradient(90deg, #d7e0ea 1px, transparent 1px); background-size: 18px 18px; }
.paper h2 { color: #1d4f8f; }
.paper .label { color: #51637a; }
.paper ol { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: ln; }
.paper li { counter-increment: ln; display: grid; grid-template-columns: 2.2em 1fr; gap: 6px; font: .9rem/1.5 var(--f-mono); padding: 4px 6px; background: rgba(233,237,242,.85); border: 1px solid transparent; transition: background .3s; }
.paper li::before { content: "L" counter(ln); color: #6c7d93; }
.paper li.active { background: #fff3c4; border-color: #e0b73a; }
.paper li.dim { opacity: .45; }
.paper li .marks { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; }
.mark { font: 500 .68rem var(--f-mono); padding: 0 6px; text-transform: uppercase; letter-spacing: .06em; border: 1px solid; }
.mark.valid { color: #b42323; border-color: #b42323; background: #fde4e4; }
.mark.blocked { color: #116b80; border-color: #116b80; background: #dff4f9; }
.mark.invalid { color: #5b6573; border-color: #8a94a3; background: #eef0f3; }

.report { background: var(--stand); border: 2px solid var(--rail); padding: 18px 20px; display: grid; gap: 12px; align-content: start; }
.report .score { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 .85rem var(--f-mono); color: var(--dust); font-variant-numeric: tabular-nums; }
.report .score strong { color: var(--chalk); font-weight: 500; }
.report ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.flaw { border: 2px solid var(--rail); padding: 10px 12px; display: grid; gap: 4px; }
.flaw .sev { font: 500 .72rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.flaw.high .sev { color: var(--hit); } .flaw.medium .sev { color: var(--gold); } .flaw.low .sev { color: var(--block); }
.flaw p { margin: 0; font-size: .92rem; }
.flaw .fix { color: var(--kam-ink); }
.report .pending { color: var(--dust); margin: 0; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 .85rem var(--f-mono); color: var(--dust); }
.pager[hidden] { display: none; }
.pager button { font-size: .8rem; padding: 4px 10px; }
.pager button:disabled { opacity: .4; cursor: default; transform: none; box-shadow: 0 3px 0 var(--rail); }

.roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.mon { background: var(--stand); border: 2px solid var(--rail); padding: 16px; display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 16px; }
@media (max-width: 420px) { .mon { grid-template-columns: minmax(0, 1fr); } }
.stage { width: 144px; height: 144px; background: #3f7f31; border: 2px solid var(--rail); position: relative; }
/* a sprite sheet of 6x4 frames shown at --f per frame, playing --n frames of the row at --y */
.sprite { --f: 144px; width: var(--f); height: var(--f); image-rendering: pixelated; background-size: calc(var(--f) * 6) calc(var(--f) * 4); background-repeat: no-repeat; animation: play calc(var(--n) * var(--t, 170ms)) steps(var(--n)) infinite; background-position: 0 var(--y); }
@keyframes play { from { background-position: 0 var(--y); } to { background-position: calc(var(--n) * -1 * var(--f)) var(--y); } }
.sprite.taunt { --n: 6; --y: calc(-1 * var(--f)); animation-iteration-count: 1; }
.mon h3 { font-size: 1.4rem; }
.mon.meer h3 { color: var(--meer-ink); } .mon.kam h3 { color: var(--kam-ink); }
.mon p { margin: 4px 0 8px; font-size: .92rem; color: var(--dust); }
.anim-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.anim-btns button { font-size: .8rem; padding: 4px 9px; }
.disks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.disk { display: flex; gap: 8px; align-items: center; font: 500 .78rem var(--f-mono); border: 1px solid var(--rail); padding: 4px 6px; min-width: 0; }
.disk::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 3px solid currentColor; box-shadow: inset 0 0 0 2px var(--stand), inset 0 0 0 4px currentColor; }
.mon.meer .disk { color: var(--meer-ink); } .mon.kam .disk { color: var(--kam-ink); }
.disk span { color: var(--chalk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
footer { color: var(--dust); font-size: .85rem; border-top: 2px dashed var(--rail); padding-top: 14px; }
@media (prefers-reduced-motion: reduce) { .sprite { animation-duration: 3s; } .bar i { transition: none; } }

/* submit page */
.intro { max-width: 62ch; color: var(--dust); margin: 0; }
.submit { background: var(--stand); border: 2px solid var(--rail); padding: 18px 20px; display: grid; gap: 14px; }
.submit label { display: grid; gap: 6px; }
.submit input:not(.vh), .submit textarea { width: 100%; font: .92rem/1.5 var(--f-mono); color: var(--chalk); background: #0e130d; border: 2px solid var(--rail); padding: 10px 12px; border-radius: 0; }
.submit textarea { min-height: 260px; resize: vertical; }
.submit input:focus-visible, .submit textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.submit .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.submit .hint { color: var(--dust); font-size: .85rem; }
.btn-go { background: var(--gold); color: var(--night); border-color: var(--gold); box-shadow: 0 3px 0 #9c7d1f; }
.errors { border: 2px solid var(--hit); color: var(--hit); padding: 8px 12px; margin: 0; list-style: none; }
.history { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.history a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 10px 12px; border: 2px solid var(--rail); color: var(--chalk); text-decoration: none; background: var(--stand); }
.history a:hover, .history a:focus-visible { border-color: var(--dust); }
.history .meta { font: 500 .78rem var(--f-mono); color: var(--dust); font-variant-numeric: tabular-nums; }
.status { font: 500 .72rem var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.status.done { color: var(--kam-ink); } .status.failed { color: var(--hit); } .status.running, .status.queued { color: var(--gold); }
a.back { color: var(--dust); font: 500 .85rem var(--f-mono); }
.paper ol { max-height: 520px; overflow-y: auto; }
.btn-go:disabled { background: var(--rail); border-color: var(--rail); color: var(--dust); box-shadow: none; cursor: not-allowed; transform: none; }

/* select page */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.select { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.select legend { padding: 0; }
.select-title { font: 600 clamp(1.4rem, 3.5vw, 2rem)/1 var(--f-display); color: var(--gold); letter-spacing: .02em; text-transform: uppercase; }
/* fighter select, 1v1: a VS stage on the page, and a character select screen in a dialog */
.p1 { --pc: var(--hit); } .p2 { --pc: var(--block); }
.player-tag { position: absolute; top: 8px; left: 8px; z-index: 1; font: 600 1rem var(--f-display); padding: 1px 8px; background: var(--pc); color: var(--night); }
.p2 > .player-tag { left: auto; right: 8px; }
.versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.fighter-slot { --c: var(--rail); position: relative; display: grid; justify-items: center; gap: 2px; padding: 14px 12px 12px; min-width: 0; color: var(--chalk); border: 3px solid var(--c); background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c) 45%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, var(--night)), var(--night)); transition: transform .15s, box-shadow .15s; }
.fighter-slot:hover { border-color: var(--c); transform: translateY(-2px); box-shadow: 0 3px 0 var(--rail), 0 0 26px -6px var(--c); }
.fighter-slot:active { transform: translateY(1px); }
.slot-art { display: grid; place-items: center; min-height: 216px; }
.slot-art .sprite { --f: 216px; }
.fighter-slot.p2 .sprite, .ss-preview.p2 .sprite { transform: scaleX(-1); } /* P2 faces left, like in the arena */
.slot-name { font: 600 clamp(1.6rem, 4vw, 2.6rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.slot-meta { font: 500 .75rem var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dust); min-height: 1.2em; }
/* strength: filled pips on the stage, clickable segments on the select screen */
.slot-str { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; }
.str-label { font: 600 .7rem var(--f-mono); letter-spacing: .1em; color: var(--dust); text-transform: uppercase; margin-right: 4px; }
.slot-str i { width: 14px; height: 8px; border: 1px solid var(--gold); background: transparent; }
.slot-str i.on { background: var(--gold); }
.num .slot-str { margin-top: 0; } .num .slot-str i { width: 9px; height: 6px; }
.strength { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; }
.str-bar { display: inline-flex; gap: 3px; }
.str-seg { width: 22px; height: 14px; padding: 0; border: 2px solid var(--gold); background: transparent; box-shadow: none; cursor: pointer; }
.str-seg:hover { border-color: var(--chalk); }
.str-seg.on { background: var(--gold); }
.str-seg:nth-child(3).on { background: var(--hit); border-color: var(--hit); }
.str-seg:active { transform: none; box-shadow: none; }
.str-name { font: 600 .8rem var(--f-display); text-transform: uppercase; min-width: 5ch; text-align: left; color: var(--gold); }
.slot-change { margin-top: 6px; font: 500 .72rem var(--f-mono); color: var(--gold); text-transform: uppercase; letter-spacing: .1em; }
.vs-mark { font: 600 clamp(2.4rem, 7vw, 4.5rem)/1 var(--f-display); color: var(--gold); font-style: italic; text-shadow: 3px 3px 0 var(--hit), -3px -3px 0 var(--block); }
@media (max-width: 640px) { .slot-art { min-height: 144px; } .slot-art .sprite { --f: 144px; } .versus { gap: 6px; } }
.mystery { font: 600 4rem/1 var(--f-display); color: var(--rail); }

.select-screen { width: min(1180px, 100vw - 24px); max-height: calc(100dvh - 24px); padding: 0; color: var(--chalk); background: var(--night); border: 3px solid var(--gold); box-shadow: 0 0 0 4px var(--night), 0 18px 60px rgba(0, 0, 0, .6); }
.select-screen::backdrop { background: rgba(5, 8, 5, .82); }
.ss-head { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 2px solid var(--rail); background: repeating-linear-gradient(-45deg, #141a12 0 10px, #11160f 10px 20px); }
.ss-head h2 { font-size: 1.6rem; color: var(--gold); text-transform: uppercase; letter-spacing: .03em; }
.ss-turn { margin-left: auto; font: 600 1rem var(--f-display); text-transform: uppercase; color: var(--gold); }
.ss-turn[data-player="p1"] { color: var(--hit); } .ss-turn[data-player="p2"] { color: var(--block); }
.ss-close { padding: 4px 10px; }
.ss-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; padding: 16px; }
@media (max-width: 860px) { .ss-body { grid-template-columns: 1fr 1fr; } .ss-grid { grid-column: 1 / -1; order: 3; } }
.ss-preview { --c: var(--rail); --ink: var(--dust); position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 30px 12px 14px; text-align: center; cursor: pointer; border: 3px solid var(--rail); background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--c) 45%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, var(--night)), var(--night)); transition: border-color .15s, box-shadow .15s; }
.ss-preview.active { border-color: var(--pc); box-shadow: 0 0 0 2px var(--pc), 0 0 28px -6px var(--pc); }
.pv-art { display: grid; place-items: center; min-height: 192px; }
.pv-art .sprite { --f: 192px; }
.pv-name { font-size: clamp(1.4rem, 3vw, 2.1rem); text-transform: uppercase; letter-spacing: .03em; }
.pv-meta { margin: 0; font: 500 .75rem var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.pv-blurb { margin: 4px 0 0; font-size: .88rem; line-height: 1.4; color: var(--dust); max-width: 34ch; }
.pv-model { margin: 0; font: 500 .68rem var(--f-mono); color: var(--dust); overflow-wrap: anywhere; }
@media (max-width: 560px) { .pv-art { min-height: 120px; } .pv-art .sprite { --f: 120px; } .pv-blurb { display: none; } }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; align-content: start; }
.tile { --c: var(--rail); position: relative; display: grid; padding: 0; min-width: 0; color: var(--chalk); background: #0e130d; border: 3px solid var(--rail); box-shadow: none; transition: border-color .12s; }
.tile:hover { border-color: var(--c); }
.tile:active { transform: none; box-shadow: none; }
.tile-art { aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 50%, transparent), transparent 66%), #10160f; }
.tile .sprite { --f: 96px; animation-play-state: paused; }
.tile.cursor .sprite, .tile:hover .sprite { animation-play-state: running; }
.tile-name { font: 600 .8rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .03em; background: var(--chalk); color: var(--night); padding: 3px 4px 2px; }
.tile-tag { position: absolute; top: 3px; left: 3px; font: 600 .75rem var(--f-display); padding: 0 5px; background: var(--pc); color: var(--night); }
.tile-tag:empty { display: none; }
.tile.p1, .tile.p2 { border-color: var(--pc); }
.tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ss-grid[data-player="p1"] .tile.cursor { outline: 3px solid var(--hit); outline-offset: 2px; }
.ss-grid[data-player="p2"] .tile.cursor { outline: 3px solid var(--block); outline-offset: 2px; }
.tile[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.tile.nope { animation: nope .3s; }
@keyframes nope { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
.tile.locked { cursor: default; border-style: dashed; }
.tile.locked .tile-art { background: repeating-linear-gradient(45deg, #121811 0 8px, #0e130d 8px 16px); }
.tile.locked .tile-name { background: var(--rail); color: var(--dust); }
.tile.locked .mystery { font-size: 2.6rem; }
.ss-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 2px solid var(--rail); }
.ss-foot .hint { color: var(--dust); font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .tile.nope { animation: none; } }

/* arena picker: a little painted preview of each scene */
.arenas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.arena-card { position: relative; display: grid; gap: 2px; background: #0e130d; border: 3px solid var(--rail); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
.arena-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.arena-card:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.arena-card:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 22px -4px var(--gold); }
.arena-art { aspect-ratio: 16 / 7; border-bottom: 3px solid var(--rail); image-rendering: pixelated; }
.arena-meadow { background:
  radial-gradient(ellipse 30% 18% at 50% 72%, #9a9a8c 0 60%, #6e6e62 61% 100%, transparent 101%),
  linear-gradient(180deg, #7ec8f0 0 22%, #a8dcf4 22% 30%, #3f8a3a 30% 38%, #5aa846 38% 100%); }
.arena-lava { background:
  radial-gradient(ellipse 30% 18% at 50% 72%, #2a2230 0 60%, #ff7a1a 61% 70%, #1a1420 71% 100%, transparent 101%),
  radial-gradient(ellipse 22% 10% at 8% 92%, #ffb020 0 40%, #e04a10 41% 100%, transparent 101%),
  radial-gradient(ellipse 22% 10% at 94% 88%, #ffb020 0 40%, #e04a10 41% 100%, transparent 101%),
  linear-gradient(180deg, #2a0a14 0 14%, #5a1418 14% 24%, #8a2a14 24% 30%, #2a2028 30% 38%, #3a3036 38% 100%); }
.arena-name { font: 600 1.15rem/1.1 var(--f-display); background: var(--chalk); color: var(--night); text-align: center; padding: 6px 6px 4px; text-transform: uppercase; letter-spacing: .04em; }
.arena-blurb { font-size: .8rem; line-height: 1.35; color: var(--dust); padding: 6px 10px 10px; text-align: center; }

.fail { border: 2px solid var(--hit); padding: 10px 12px; color: var(--chalk); }
.fail strong { color: var(--hit); }

/* past battles pager: links styled like the flaw report's buttons */
.history-pager { margin-top: 10px; }
.history-pager a, .history-pager .btn-off { font: 600 .8rem var(--f-display); padding: 4px 10px; border: 2px solid var(--rail); color: var(--chalk); text-decoration: none; background: var(--stand); }
.history-pager a:hover, .history-pager a:focus-visible { border-color: var(--dust); }
.history-pager .btn-off { opacity: .4; }