/* The Record Book. Night arena navy and purple, warm gold lights, red corner and blue corner.
   Colors sampled from art/brand: sky #0e0e2f, floor #120e38, mat #34196a / #3f2079, truss #562aa4,
   gold #f6d107, amber #f3ad00, bulb #fef1b3, red rope #e10b1f, blue rope #0648fc. */

@font-face {
  font-family: 'Press Start 2P';
  src: url('press-start-2p.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #0e0b2c;
  --night-2: #140f3a;
  --panel: #1b1550;
  --panel-2: #231a63;
  --purple: #34196a;
  --purple-2: #3f2079;
  --truss: #562aa4;
  --edge: #07051a;
  --gold: #f6d107;
  --amber: #f3ad00;
  --bulb: #fef1b3;
  --red: #e10b1f;
  --red-hi: #ff5c6a;
  --blue: #0648fc;
  --blue-hi: #7fa2ff;
  --ink: #efeaff;
  --muted: #b9b0e3;
  --dim: #8f86c2;
  --cell-off: #2c2268;
  --px: 4px;
  --pixel: 'Press Start 2P', ui-monospace, monospace;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 1rem/1.5 var(--body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; outline: none; }
img { max-width: 100%; }
a { color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--bulb); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; line-height: 1.5; text-wrap: balance; margin: 0; letter-spacing: 0; }
/* Heading margins in px on the 4 px grid, and 1.5 line height on body and headings (24 px body lines; 15, 18, 24, 36, 48 px heading lines), so boxes start on whole pixels. */
h1 { margin-bottom: 16px; }
h2 { margin-bottom: 12px; }
h3 { margin-bottom: 8px; }
/* Pixel-font sizes step at breakpoints instead of scaling with the viewport, so glyphs stay on whole pixels. */
h1 { font-size: 24px; color: var(--gold); text-shadow: 3px 3px 0 var(--edge); }
h2 { font-size: 16px; color: var(--ink); }
@media (min-width: 600px) { h2 { font-size: 24px; } }
@media (min-width: 700px) { h1 { font-size: 32px; } }
h3 { font-size: .75rem; color: var(--bulb); }
p { margin: 0 0 1em; }
abbr { text-decoration: none; }
table { border-collapse: collapse; }
blockquote { margin: 0; }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--gold); color: var(--edge); padding: 10px 14px; font: 12px var(--pixel); text-decoration: none; }
.skip:focus { top: 8px; }
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.dim { color: var(--dim); }
.gold { color: var(--gold); }
.label { font: 10px var(--pixel); color: var(--muted); letter-spacing: .02em; }
.aside { color: var(--muted); font-size: 1rem; }
.empty { color: var(--muted); font-style: italic; }
.num { font-family: var(--pixel); font-size: 12px; }

/* Chunky pixel frame: stepped corners from stacked box-shadows, no radius. */
.px-frame, .result, .preview, .slot, .tape-card, .fantasy-card, .belt, .countdown, .debut, .bm, .month, .ev-link, .f-card > div, .special {
  --fc: var(--edge);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--fc),
    0 var(--px) 0 0 var(--fc),
    calc(var(--px) * -1) 0 0 0 var(--fc),
    var(--px) 0 0 0 var(--fc),
    inset 0 var(--px) 0 0 rgba(255, 255, 255, .06),
    inset 0 calc(var(--px) * -1) 0 0 rgba(0, 0, 0, .25);
}

/* Buttons */
.btn {
  display: inline-block;
  font: 12px/1 var(--pixel);
  color: var(--edge);
  background: var(--gold);
  padding: 14px 16px 12px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  box-shadow: 0 -4px 0 0 var(--edge), 0 4px 0 0 var(--edge), -4px 0 0 0 var(--edge), 4px 0 0 0 var(--edge), inset 0 -4px 0 0 var(--amber);
  transition: transform .12s steps(2, end);
}
.btn:hover { color: var(--edge); background: var(--bulb); transform: translateY(-2px); }
.btn:active { transform: translateY(2px); box-shadow: 0 -4px 0 0 var(--edge), 0 4px 0 0 var(--edge), -4px 0 0 0 var(--edge), 4px 0 0 0 var(--edge); }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 -4px 0 0 var(--edge), 0 4px 0 0 var(--edge), -4px 0 0 0 var(--edge), 4px 0 0 0 var(--edge), inset 0 -4px 0 0 #8e0614; }
.btn-red:hover { background: var(--red-hi); color: #fff; }
.more { font: 10px var(--pixel); white-space: nowrap; }
/* Follow buttons (home hero and footer) */
.socials { margin: 20px auto; text-align: center; }
.socials-h { font: 10px/1.6 var(--pixel); color: var(--muted); margin: 0 0 14px; }
.socials ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; list-style: none; margin: 0; padding: 0; }
.social { min-width: 7.5em; text-align: center; }
.social-youtube { background: var(--red); color: #fff; box-shadow: 0 -4px 0 0 var(--edge), 0 4px 0 0 var(--edge), -4px 0 0 0 var(--edge), 4px 0 0 0 var(--edge), inset 0 -4px 0 0 #8e0614; }
.social-youtube:hover { background: var(--red-hi); color: #fff; }
/* Follow buttons stay in the arena palette: TikTok light on --ink, Instagram on --purple-2. */
.social-tiktok { background: var(--ink); color: var(--edge); box-shadow: 0 -4px 0 0 var(--edge), 0 4px 0 0 var(--edge), -4px 0 0 0 var(--edge), 4px 0 0 0 var(--edge), inset 0 -4px 0 0 var(--muted); }
.social-tiktok:hover { background: var(--bulb); color: var(--edge); }
.social-instagram { background: var(--purple-2); color: var(--bulb); box-shadow: 0 -4px 0 0 var(--edge), 0 4px 0 0 var(--edge), -4px 0 0 0 var(--edge), 4px 0 0 0 var(--edge), inset 0 -4px 0 0 var(--purple); }
.social-instagram:hover { background: var(--truss); color: var(--bulb); }
.more::after { content: ' >'; }
/* Text-only links in 10 px type: a 24 px tall hit area; the negative margin keeps the type where it was. */
.channels a, .more, .pg-all, .f-div a, .vlink { display: inline-block; padding: 7px 0; margin: -7px 0; }
.cd-name:not(.sr) { display: inline-block; padding: 2px 0; margin: -2px 0; }

/* Header */
.site-head { background: var(--edge); border-bottom: 4px solid var(--truss); position: relative; z-index: 5; }
.head-in { max-width: 1140px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--muted); }
.brand img { display: block; width: 72px; height: 48px; }
.brand-sub { font: 10px/1.6 var(--pixel); color: var(--muted); max-width: 9em; }
/* The nav is always the header's last row, wrapping onto more rows on phones instead of scrolling,
   so every link is on screen and nothing clips the focus ring (8 px of room above and below). */
.nav { flex: 1 1 100%; order: 3; }
.nav ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; font: 10px/1 var(--pixel); color: var(--ink); text-decoration: none; padding: 12px 10px 10px; white-space: nowrap; }
.nav a:hover { color: var(--gold); background: var(--night-2); }
.nav a:active { background: var(--purple); }
.nav a[aria-current='page'] { color: var(--edge); background: var(--gold); }
/* Tablets: 6 px side padding puts all seven links on one row (728 px) instead of six and an orphan. */
@media (min-width: 760px) and (max-width: 899px) { .nav a { padding-left: 6px; padding-right: 6px; } }
.channels { display: flex; gap: 12px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.channels a { font: 10px var(--pixel); }
/* Phones: drop the subtitle so the channel links share the logo row instead of taking a row of their own. */
@media (max-width: 559px) { .brand-sub { display: none; } }
@media (max-width: 399px) { .site-head .channels { gap: 8px; } }
/* 900 px and up: two rows at every width, logo and channels on the first, the full nav on the second. */
@media (min-width: 900px) {
  .brand img { width: 96px; height: 64px; }
}

/* Footer */
.site-foot { margin-top: 64px; background: var(--edge); border-top: 4px solid var(--truss); padding: 32px 16px 40px; text-align: center; }
.foot-call { font: 24px/1.25 var(--pixel); color: var(--gold); text-shadow: 3px 3px 0 #5a2a00; margin-bottom: 20px; }
.site-foot ul { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.site-foot nav a { display: inline-block; font: 10px/2.4 var(--pixel); color: var(--muted); }
.site-foot .channels { justify-content: center; margin: 0 0 16px; }
.foot-note { color: var(--dim); font-size: 1rem; margin: 0; }
@media (min-width: 560px) { .foot-call { font-size: 32px; } }

/* Sprites: always pixelated, whole multiples of 128 (64 for thumbs) */
.sprite { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
@supports (image-rendering: pixelated) { .sprite { image-rendering: pixelated; } }
.flip { transform: scaleX(-1); }
.idle { position: relative; display: inline-block; width: var(--s); height: var(--s); max-width: 100%; }
.idle .sprite { width: 100%; height: 100%; }
.idle.anim .sprite { position: absolute; inset: 0; }
.idle.anim .f0 { animation: idle-a 1s steps(1, end) infinite; }
.idle.anim .f1 { animation: idle-b 1s steps(1, end) infinite; }
@keyframes idle-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes idle-b { 0% { opacity: 0; } 50% { opacity: 1; } }
.thumb { position: relative; display: inline-block; flex: none; width: 80px; height: 80px; overflow: hidden; vertical-align: middle; }
.thumb .sprite { position: absolute; left: -24px; top: -2px; width: 128px; height: 128px; max-width: none; }
.thumb-locked { display: inline-flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #17113f 0 4px, #120d33 4px 8px); color: var(--dim); font: 32px var(--pixel); }
.locked-sprite {
  display: inline-flex; align-items: center; justify-content: center; width: var(--s); height: var(--s);
  background: repeating-linear-gradient(45deg, #17113f 0 4px, #120d33 4px 8px);
  color: var(--dim); font: calc(var(--s) / 2.4) var(--pixel);
}

/* Section heads */
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 4px solid var(--purple-2); margin: 48px 0 20px; padding-bottom: 10px; }
.sec-head h2 { margin: 0; }
.page-head { padding: 32px 0 8px; }
.lede { font-size: 1.0625rem; line-height: 26px; color: var(--muted); max-width: 62ch; }

/* Stat cells: ten discrete blocks */
.cells { display: inline-flex; gap: 2px; vertical-align: middle; }
.cells i { width: 10px; height: 14px; background: var(--cell-off); box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, .3); }
.cells i.on { background: var(--gold); box-shadow: inset 0 -3px 0 0 var(--amber), inset 0 3px 0 0 var(--bulb); }
.cells-a i.on { background: var(--red); box-shadow: inset 0 -3px 0 0 #8e0614, inset 0 3px 0 0 var(--red-hi); }
.cells-b i.on { background: var(--blue); box-shadow: inset 0 -3px 0 0 #02259a, inset 0 3px 0 0 var(--blue-hi); }
.stats { margin: 0; display: grid; gap: 10px; }
.stat { display: grid; grid-template-columns: 3.5em 1fr; align-items: center; gap: 4px 10px; }
.stat dt { font: 10px var(--pixel); color: var(--muted); }
.stat dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.stat .num { color: var(--gold); min-width: 2ch; }
.stat .effect { flex-basis: 100%; color: var(--muted); font-size: 1rem; }

/* Faceoff stage */
.faceoff { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.corner { position: relative; display: flex; justify-content: center; }
.faceoff .vs, .result-stage .vs { font: 16px var(--pixel); color: var(--gold); text-shadow: 2px 2px 0 var(--edge); align-self: center; padding: 0 2px; }
.tbd-box { width: var(--s); height: var(--s); max-width: 40vw; max-height: 40vw; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font: 10px/1.6 var(--pixel); color: var(--muted); background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 4px, transparent 4px 8px); outline: 4px dashed var(--purple-2); outline-offset: -8px; }
.corner-a .tbd-box { color: var(--red-hi); }
.corner-b .tbd-box { color: var(--blue-hi); }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--night) url('../brand/arena.png') center bottom / 628px 1114px no-repeat; image-rendering: pixelated; border-bottom: 4px solid var(--edge); }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 11, 44, .1) 0%, rgba(14, 11, 44, .55) 70%, rgba(14, 11, 44, .9) 100%); }
.hero-in { position: relative; z-index: 1; text-align: center; padding: 56px 16px 120px; max-width: 760px; margin: 0 auto; }
.hero-logo { margin: 0 auto; }
/* The logo is painted art with soft glows: area-average it (auto). 288 px from the 576 file, 384 px from the 768 file (picture source), so 1x and 2x screens get a whole factor. */
.hero-logo img { display: block; width: 288px; height: auto; margin: 0 auto; image-rendering: auto; }
@media (min-width: 560px) { .hero-logo img { width: 384px; } }
.hero-call { font: 24px/1.25 var(--pixel); color: var(--gold); text-shadow: 4px 4px 0 #5a2a00, 0 0 24px rgba(246, 209, 7, .35); margin: 8px 0 12px; }
@media (min-width: 560px) { .hero-call { font-size: 32px; } }
@media (min-width: 900px) { .hero-call { font-size: 40px; } }
.hero-sub { color: var(--ink); max-width: 34ch; margin: 0 auto 28px; }
.hero-lights { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding: 8px 8px; z-index: 1; background: linear-gradient(var(--truss), var(--truss)) 0 12px / 100% 4px no-repeat; }
.hero-lights i { width: 12px; height: 12px; background: var(--bulb); box-shadow: 0 0 0 4px var(--amber), 0 0 18px 6px rgba(243, 173, 0, .55); animation: marquee 2.4s steps(2, end) infinite; }
.hero-lights i:nth-child(2n) { animation-delay: -1.2s; }
.hero-lights i:nth-child(n+9) { display: none; }
@media (min-width: 700px) { .hero-lights i:nth-child(n+9) { display: block; } }
@keyframes marquee { 0% { opacity: 1; } 50% { opacity: .35; box-shadow: 0 0 0 4px #7a5600, 0 0 6px 2px rgba(243, 173, 0, .2); } }
.hero-ropes { position: absolute; left: 0; right: 0; bottom: 20px; height: 64px; z-index: 0; }
.hero-ropes i { position: absolute; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, var(--red) 0 50%, var(--blue) 50% 100%); box-shadow: 0 4px 0 rgba(0, 0, 0, .45); }
.hero-ropes i:nth-child(1) { top: 0; }
.hero-ropes i:nth-child(2) { top: 24px; }
.hero-ropes i:nth-child(3) { top: 48px; }
.hero-ropes::before, .hero-ropes::after { content: ''; position: absolute; top: -8px; width: 16px; height: 80px; z-index: 1; }
.hero-ropes::before { left: 6%; background: var(--red); box-shadow: inset -4px 0 0 #8e0614, inset 4px 0 0 var(--red-hi); }
.hero-ropes::after { right: 6%; background: var(--blue); box-shadow: inset -4px 0 0 #02259a, inset 4px 0 0 var(--blue-hi); }

/* Countdown */
.countdown { --fc: var(--edge); display: inline-block; background: rgba(7, 5, 26, .82); padding: 16px 16px 12px; text-align: center; }
.countdown .cd-label { margin: 0 0 6px; }
.cd-kicker { display: block; font: 10px var(--pixel); color: var(--muted); margin-bottom: 8px; }
.cd-name { font: 16px/1.5 var(--pixel); }
.cd-dates { margin: 0 0 12px; color: var(--ink); }
.tbc { font: 10px var(--pixel); color: var(--amber); white-space: nowrap; }
.cd-clock { display: flex; justify-content: center; gap: 8px; }
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 58px; background: var(--edge); padding: 10px 4px 6px; box-shadow: inset 0 -4px 0 var(--purple); }
.cd-unit b { font: 400 24px/1 var(--pixel); color: var(--gold); }
.cd-unit small { font: 10px var(--pixel); color: var(--dim); margin-top: 8px; }
.cd-live { font: 24px var(--pixel); color: var(--red-hi); margin: 4px 0 0; animation: marquee 1.2s steps(2, end) infinite; }
.countdown.compact { display: block; max-width: 420px; margin: 16px 0 8px; }
.countdown.is-live .cd-clock { display: none; }
.countdown.self { display: inline-block; max-width: none; }
.ev-tag, .ev-prize, .ev-status { text-shadow: 2px 2px 0 rgba(0, 0, 0, .6); }

/* Home */
.home-grid { display: grid; gap: 0 32px; }
/* Tablets get two even columns from 760 px (the result card needs 300 px for its two 128 px sprites); below that a single card is capped and centred. */
@media (min-width: 760px) { .home-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .home-grid { grid-template-columns: 1.3fr 1fr; } }
@media (min-width: 600px) and (max-width: 759px) { .result { max-width: 560px; margin-left: auto; margin-right: auto; } }
.mini-ranks { list-style: none; margin: 0; padding: 0; }
.mini-ranks li { display: grid; grid-template-columns: 2.5em 80px 1fr auto auto; align-items: center; gap: 10px; padding: 6px 8px; border-bottom: 2px solid var(--panel); }
.mini-ranks li:first-child { background: linear-gradient(90deg, rgba(246, 209, 7, .14), transparent); }
.mini-ranks .rk { font: 16px var(--pixel); color: var(--gold); text-align: center; }
.mini-ranks a { font-weight: 700; color: var(--ink); }
.mini-ranks .rec, .mini-ranks .stk { font: 12px var(--pixel); color: var(--muted); white-space: nowrap; }
.fantasy-note { color: var(--muted); }
.fantasy-note::before { content: 'DREAM MATCH'; font: 10px var(--pixel); color: var(--edge); background: var(--amber); margin-right: 10px; vertical-align: 2px; }
.fantasy-card { background: var(--panel); padding: 20px 16px; display: grid; gap: 16px; justify-items: center; }
@media (min-width: 860px) {
  .fantasy-card { grid-template-columns: 1.1fr 1fr; grid-template-areas: 'stage names' 'stage stats' 'stage link'; align-items: center; padding: 24px; column-gap: 32px; }
  .fantasy-stage { grid-area: stage; width: 100%; background: linear-gradient(transparent 74%, var(--purple) 74%, var(--purple-2)); }
  .fantasy-stage .idle { width: 256px; height: 256px; }
  .fantasy-names { grid-area: names; align-self: end; }
  .fantasy-stats { grid-area: stats; }
  .fantasy-card .btn { grid-area: link; justify-self: center; align-self: start; }
}
.fantasy-names { display: flex; justify-content: space-between; width: 100%; max-width: 560px; gap: 12px; }
.fn { margin: 0; font: 12px/1.5 var(--pixel); }
.fn-a { color: var(--red-hi); }
.fn-b { color: var(--blue-hi); text-align: right; }
.fantasy-stats { display: grid; gap: 8px; width: 100%; max-width: 560px; }
.fs-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.fs-row abbr { font: 10px var(--pixel); color: var(--muted); width: 3.5em; text-align: center; }
.fs-a { justify-self: end; }
.fs-a .cells { flex-direction: row-reverse; }
.fs-row .cells i { width: 9px; }
@media (max-width: 400px) { .fs-row .cells i { width: 7px; } }
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 4px; }
.strip a { display: flex; justify-content: center; background: var(--night-2); padding: 4px 0; transition: transform .12s steps(2, end), background .12s steps(2, end); }
/* Hover lifts only where hover exists, so a tap on a touch screen does not leave a card lifted. */
.strip a:focus-visible { background: var(--purple); transform: translateY(calc(var(--px) * -1)); }
@media (hover: hover) { .strip a:hover { background: var(--purple); transform: translateY(calc(var(--px) * -1)); } }

/* Result card */
.result { background: var(--panel); padding: 14px 14px 16px; position: relative; }
.result-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.fnum { font: 12px var(--pixel); color: var(--gold); }
.result-head time { color: var(--muted); }
.badge { font: 10px var(--pixel); color: var(--edge); background: var(--gold); text-decoration: none; }
/* Small pixel labels share one box: 18 px tall at 10 px type. .tile-rank is a corner flag and keeps its own. */
.badge, .plate, .tag, .status, .wl, .g-label, .fantasy-note::before { padding: 5px 6px 3px; }
.badge-harvest { background: #e8812d; }
.badge-pixelmas { background: #2fa36b; }
.result-stage { display: flex; justify-content: center; align-items: flex-end; gap: 4px; padding: 8px 0 0; background: linear-gradient(transparent 70%, var(--purple) 70%, var(--purple-2) 100%); }
.result-stage .sprite { width: 128px; height: 128px; }
@media (max-width: 380px) { .result-stage .sprite { width: 128px; height: 128px; } .result-stage .vs { font-size: 10px; } }
@media (max-width: 359px) { .faceoff .vs { font-size: 10px; } }
.plate { font: 10px var(--pixel); }
.plate-win { background: var(--gold); color: var(--edge); }
.corner .plate { position: absolute; top: 4px; left: 4px; }
.lose .sprite { filter: saturate(.75) brightness(.9); }
.result-names { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.rn { margin: 0; display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.rn-b { text-align: right; }
.rn a { color: var(--ink); }
.rn-a a { text-decoration-color: var(--red); }
.rn-b a { text-decoration-color: var(--blue); }
.rn .rec { font: 12px var(--pixel); color: var(--muted); font-weight: 400; }
.vlinks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.vlinks.inline { margin: 0; }
.vlink { font: 10px var(--pixel); }

/* Roster select screen */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.chip { font: 10px/1 var(--pixel); color: var(--ink); background: var(--night-2); border: 0; padding: 12px 12px 10px; cursor: pointer; box-shadow: inset 0 0 0 2px var(--purple-2); }
.chip .n { color: var(--dim); }
@media (hover: hover) { .chip:hover { background: var(--purple); } }
.chip[aria-pressed='true'] { background: var(--gold); color: var(--edge); box-shadow: inset 0 -4px 0 var(--amber); }
.chip[aria-pressed='true'] .n { color: #5a4300; }
.chip:active { box-shadow: inset 0 0 0 2px var(--gold); }
.select-grid { display: grid; gap: 20px; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.tile[hidden] { display: none; }
.tile-in {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%;
  padding: 8px 2px 10px; text-decoration: none; color: var(--ink); background: var(--night-2);
  box-shadow: inset 0 0 0 2px var(--panel-2); transition: transform .12s steps(2, end), background .12s steps(2, end); cursor: pointer;
}
.tile-name { font: 10px/1.6 var(--pixel); text-align: center; overflow-wrap: anywhere; }
.tile-rank { position: absolute; top: 4px; right: 4px; font: 10px var(--pixel); color: var(--edge); background: var(--gold); padding: 3px 3px 1px; }
/* .is-active is set by the script on hover, focus and the first tap, so it lifts on touch too. */
.tile-in.is-active { background: var(--purple); transform: translateY(calc(var(--px) * -1)); color: var(--ink); }
@media (hover: hover) { .tile-in:hover { background: var(--purple); transform: translateY(calc(var(--px) * -1)); color: var(--ink); } }
.tile-in.is-active { box-shadow: inset 0 0 0 4px var(--gold); }
.tile-in.is-active::after { content: ''; position: absolute; left: 50%; top: -12px; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--gold); }
.tile.locked .tile-in { color: var(--dim); background: repeating-linear-gradient(45deg, #120d33 0 6px, #0f0b2b 6px 12px); cursor: default; }
@media (hover: hover) { .tile.locked .tile-in:hover { transform: none; } }
.hold { font: 10px var(--pixel); color: var(--amber); }
.preview { --fc: var(--edge); background: var(--panel); padding: 12px; display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: center; }
.pv-stage { background: linear-gradient(transparent 72%, var(--purple) 72%, var(--purple-2)); display: flex; justify-content: center; }
.pv-stage .idle { --s: 128px !important; }
.pv-info { min-width: 0; }
.pv-div { font: 10px var(--pixel); color: var(--amber); margin: 0 0 6px; }
.pv-name { font-size: 16px; color: var(--gold); margin: 0 0 8px; }
.pv-rec { font: 10px/1.8 var(--pixel); color: var(--ink); margin: 0 0 8px; }
.pv-rec .label { color: var(--dim); }
.preview .stats { gap: 4px; }
.preview .stat { grid-template-columns: 3.2em 1fr; }
.preview .cells i { width: 8px; height: 10px; }
.pv-specials { list-style: none; padding: 0; margin: 12px 0; display: none; }
.pv-specials li { margin-bottom: 6px; }
.sp-name { font: 10px var(--pixel); color: var(--bulb); }
.sp-type { color: var(--muted); font-size: 1rem; }
.preview .btn { display: none; }
@media (max-width: 899px) {
  .preview { position: sticky; bottom: 0; z-index: 4; margin: 0 -16px; box-shadow: 0 -4px 0 0 var(--gold), 0 -12px 24px rgba(0, 0, 0, .5); }
  .pv-rec { display: none; }
  /* Keep a focused tile clear of the pinned preview: the 180 px preview plus its 4 px gold rule, rounded up to 192 on the grid. */
  html:has(.preview) { scroll-padding-bottom: 192px; }
  /* Until the first scout (site.js), the preview sits after the last tile instead of over the first row. */
  .pv-wait .preview { position: static; }
}
@media (min-width: 900px) {
  .select-grid { grid-template-columns: 1fr 340px; align-items: start; }
  .preview { position: sticky; top: 16px; grid-template-columns: 1fr; padding: 16px; grid-row: 1; grid-column: 2; }
  .tiles { grid-row: 1; grid-column: 1; }
  .pv-stage { padding-top: 8px; }
  .pv-stage .idle { --s: 256px !important; }
  .pv-name { font-size: 24px; }
  .preview .cells i { width: 12px; height: 14px; }
  .pv-specials { display: block; }
  .preview .btn { display: inline-block; }
}
@media (min-width: 1100px) { .select-grid { grid-template-columns: 1fr 380px; } }

/* Fighter page */
.f-hero { display: grid; gap: 16px; padding-top: 24px; }
.f-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 280px; background: url('../brand/arena.png') center 82% / 628px 1114px no-repeat; image-rendering: pixelated; overflow: hidden; border-bottom: 8px solid var(--edge); }
.f-stage .idle { --s: 256px !important; position: relative; z-index: 1; margin-bottom: 8px; }
.f-stage .mat { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(90deg, rgba(225, 11, 31, .35), transparent 30%, transparent 70%, rgba(6, 72, 252, .35)), repeating-linear-gradient(0deg, var(--purple) 0 8px, var(--purple-2) 8px 16px); border-top: 4px solid var(--truss); }
.f-div { font: 10px var(--pixel); margin: 0 0 10px; }
.f-div a { color: var(--amber); }
.f-id h1 { font-size: 24px; }
@media (min-width: 900px) { .f-id h1 { font-size: 32px; } }
.f-card { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 24px; }
.f-card > div { background: var(--panel); padding: 12px; }
.f-card dt { font: 10px var(--pixel); color: var(--muted); margin-bottom: 8px; }
.f-card dd { margin: 0; font: 24px var(--pixel); white-space: nowrap; }
.f-card dd.dim { font-size: 12px; color: var(--muted); }
@media (min-width: 560px) { .f-card { grid-template-columns: repeat(4, 1fr); } }
/* Beside the stage the column is too narrow for four 24 px values until the page reaches its full width. */
@media (min-width: 700px) and (max-width: 1139px) { .f-card { grid-template-columns: repeat(2, 1fr); } }
/* Tablets: stage beside the name from 700 px, as on desktop, with the 256 px sprite. */
@media (min-width: 700px) and (max-width: 899px) { .f-hero { grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; } }
@media (min-width: 900px) {
  .f-hero { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
  .f-stage { min-height: 460px; }
  .f-stage .idle { --s: 384px !important; }
}
.f-cols { display: grid; gap: 0 40px; }
@media (min-width: 900px) { .f-cols { grid-template-columns: 1fr 1fr; } }
.f-cols h2, .f-calls h2, .f-history h2, .f-poses h2 { margin-top: 48px; border-bottom: 4px solid var(--purple-2); padding-bottom: 10px; }
.f-stats .stat { grid-template-columns: 3.5em 1fr; }
.f-stats .cells i { width: 14px; height: 16px; }
@media (max-width: 400px) { .f-stats .cells i { width: 12px; } }
.specials { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.special { background: var(--panel); padding: 12px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.special .sprite { width: 128px; height: 128px; background: var(--night-2); }
@media (max-width: 420px) { .special { grid-template-columns: 1fr; } .special .sprite { margin: 0 auto; } }
.special h3 { font-size: 12px; margin-bottom: 8px; }
.sp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.tag { font: 10px var(--pixel); color: var(--bulb); background: var(--purple); }
.call p, .calls p { margin: 0; font-style: italic; color: var(--ink); }
.call p::before, .calls blockquote p::before { content: '"'; color: var(--gold); }
.call p::after, .calls blockquote p::after { content: '"'; color: var(--gold); }
.calls { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.calls li { padding: 12px 14px; background: var(--night-2); }
.calls .win-call .tag { display: inline-block; margin-bottom: 8px; background: var(--red); color: #fff; }
.table-scroll { overflow-x: auto; }
/* Horizontal scrollers: a flat truss bar on an edge track instead of the grey system scrollbar. */
.table-scroll, .bracket-scroll { scrollbar-color: var(--truss) var(--edge); }
.table-scroll::-webkit-scrollbar, .bracket-scroll::-webkit-scrollbar { height: 8px; background: var(--edge); }
.table-scroll::-webkit-scrollbar-thumb, .bracket-scroll::-webkit-scrollbar-thumb { background: var(--truss); border-radius: 0; }
.ledger { width: 100%; min-width: 560px; font-size: 1rem; }
.ranks td.num, .ranks th[scope='row'] { white-space: nowrap; }
.ledger th, .ledger td { text-align: left; padding: 10px 8px; border-bottom: 2px solid var(--panel); vertical-align: middle; }
.ledger thead th { font: 10px var(--pixel); color: var(--muted); border-bottom: 4px solid var(--purple-2); }
@media (hover: hover) { .ledger tbody tr:hover { background: var(--night-2); } }
.wl { font: 12px var(--pixel); }
.wl-w { background: var(--gold); color: var(--edge); }
.wl-l { background: var(--cell-off); color: var(--ink); }
.debut { background: var(--panel); padding: 20px; text-align: center; }
.debut-big { font: 16px var(--pixel); color: var(--amber); margin-bottom: 12px; }
.poses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.poses figure { margin: 0; background: var(--night-2); padding: 6px 6px 10px; display: flex; flex-direction: column; align-items: center; box-shadow: inset 0 -24px 0 var(--purple); }
.poses .sprite { width: 128px; height: 128px; }
.poses figcaption { font: 10px/1.5 var(--pixel); color: var(--bulb); text-align: center; margin-top: 6px; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-top: 48px; padding-top: 16px; border-top: 4px solid var(--purple-2); }
.pg { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.pg-next { justify-content: flex-end; text-align: right; }
.pg-next .thumb { order: 2; }
.pg-dir { font: 10px var(--pixel); color: var(--muted); }
.pg-name { font-weight: 700; }
.pg-all { font: 10px var(--pixel); }
@media (max-width: 559px) { .pg-name { display: none; } .pg { flex-direction: column; gap: 2px; } .pg-next .thumb { order: 0; } }

/* Rankings */
.rank-top { display: grid; gap: 0 32px; }
.rank-top > *, .home-grid > *, .f-cols > *, .ev-info > *, .select-grid > * { min-width: 0; }
@media (min-width: 900px) { .rank-top { grid-template-columns: 1.4fr 1fr; } }
.ranks .rk { font: 24px var(--pixel); color: var(--gold); text-align: center; width: 3em; }
.ranks .spr { width: 96px; }
.ranks th[scope='row'] { font-weight: 700; }
.ranks th[scope='row'] a { color: var(--ink); }
.ranks tr.top { background: linear-gradient(90deg, rgba(246, 209, 7, .16), transparent 70%); }
.belts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 700px) { .belts { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.belt { background: var(--panel); padding: 16px; display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.belt-plate { height: 56px; position: relative; background: linear-gradient(var(--edge) 0 0) center / 100% 20px no-repeat; }
.belt-plate i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; background: var(--gold); box-shadow: 0 0 0 4px var(--amber), 0 0 0 8px var(--edge), inset 0 0 0 8px var(--bulb), inset 0 0 0 14px var(--amber); }
.belt-harvest .belt-plate i { background: #e8812d; }
.belt-pixelmas .belt-plate i { background: #2fa36b; }
.belt h3 { font-size: 12px; margin-bottom: 8px; }
.vacant { font: 16px var(--pixel); color: var(--dim); letter-spacing: .1em; margin: 0 0 8px; }
.holder { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 0 0 8px; }
.belt-ev { color: var(--muted); margin: 0; }
.debut-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.debut-grid a, .debut-grid .lk { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 8px; text-decoration: none; color: var(--muted); background: var(--night-2); height: 100%; transition: transform .12s steps(2, end); }
.debut-grid a .thumb { filter: grayscale(.55) brightness(.85); transition: filter .12s steps(2, end); }
@media (hover: hover) {
  .debut-grid a:hover { transform: translateY(calc(var(--px) * -1)); color: var(--ink); }
  .debut-grid a:hover .thumb { filter: none; }
}
.debut-grid a:focus-visible .thumb { filter: none; }
.debut-grid span { font: 10px/1.6 var(--pixel); text-align: center; overflow-wrap: anywhere; }
.debut-grid small { font: 10px var(--pixel); color: var(--amber); }

/* Fight log */
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 760px) { .log { grid-template-columns: repeat(2, 1fr); } }

/* Events index */
.season { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ev-link { display: grid; gap: 6px; padding: 16px; background: var(--panel); text-decoration: none; color: var(--ink); transition: transform .12s steps(2, end); }
@media (hover: hover) { a.ev-link:hover { transform: translateY(calc(var(--px) * -1)); color: var(--ink); } }
/* Pressed: the card drops back to the row and darkens. Comes after every hover and active-tile rule so it wins. */
.strip a:active, .tile-in:active, .debut-grid a:active, a.ev-link:active { transform: none; background: var(--purple-2); }
.ev-dates { font: 10px var(--pixel); color: var(--muted); }
.ev-name { font: 16px/1.4 var(--pixel); color: var(--gold); }
.ev-tagline { color: var(--ink); }
.ev-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--muted); }
.ev-prize-s::before { content: 'PRIZE '; font: 10px var(--pixel); color: var(--dim); }
.ev-count { font: 10px var(--pixel); }
.ev-row-regular .ev-link { --fc: var(--purple-2); background: var(--night-2); }
.ev-row-harvest .ev-link { --fc: #8a4a17; box-shadow: inset 0 6px 0 #e8812d, 0 -4px 0 0 var(--edge), 0 4px 0 0 var(--edge), -4px 0 0 0 var(--edge), 4px 0 0 0 var(--edge); }
.ev-row-pixelmas .ev-link { box-shadow: inset 0 6px 0 #2fa36b, 0 -4px 0 0 var(--edge), 0 4px 0 0 var(--edge), -4px 0 0 0 var(--edge), 4px 0 0 0 var(--edge); }
.status { font: 10px var(--pixel); background: var(--cell-off); color: var(--ink); }
.status-proposed { background: var(--amber); color: var(--edge); }
.status-confirmed { background: var(--blue); color: #fff; }
.status-live { background: var(--red); color: #fff; }
.status-complete { background: var(--gold); color: var(--edge); }
.calendar { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.month { background: var(--panel); padding: 12px; }
.month h3 { font-size: 10px; margin-bottom: 10px; }
.days-head, .days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.days-head li { font: 10px var(--pixel); color: var(--dim); text-align: center; padding-bottom: 4px; }
.days li { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: .8125rem; color: var(--muted); background: var(--night-2); position: relative; }
.days li.pad { background: transparent; }
.days li.ev-harvest { background: #a0521c; color: #fff4e0; }
.days li.ev-pixelmas { background: #17673f; color: #f2fff6; }
.days li.ev-default { background: var(--purple-2); color: #fff; }
.days li.fought::after { content: ''; position: absolute; bottom: 3px; width: 6px; height: 6px; background: var(--gold); }
.days li.today { box-shadow: inset 0 0 0 2px var(--gold); color: var(--gold); }
.legend { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; }
.lg-fight { background: var(--gold); }
.lg-harvest { background: #a0521c; }
.lg-pixelmas { background: #17673f; }
.lg-default { background: var(--purple-2); }

/* Event pages: base layout, themed below */
.ev-hero { position: relative; overflow: hidden; padding: 0 0 72px; background: var(--night-2); border-bottom: 8px solid var(--edge); }
.ev-hero-in { position: relative; z-index: 1; padding-top: 32px; }
.ev-status .status { text-shadow: none; }
.event-page > .wrap > .aside { margin-top: 32px; }
.ev-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--ink); }
.ev-hero h1 { font-size: 24px; margin: 12px 0 12px; }
@media (min-width: 560px) { .ev-hero h1 { font-size: 32px; } }
@media (min-width: 900px) { .ev-hero h1 { font-size: 40px; } }
.ev-tag { font-size: 1.125rem; max-width: 40ch; }
.ev-prize { color: var(--ink); }
.ev-prize .label { display: block; margin-bottom: 6px; }
.ribbon { position: relative; z-index: 2; margin: 0; text-align: center; font: 10px/1.6 var(--pixel); background: repeating-linear-gradient(-45deg, var(--amber) 0 12px, var(--gold) 12px 24px); color: var(--edge); padding: 8px 12px 6px; border-bottom: 4px solid var(--edge); }
.ev-deco { position: absolute; inset: 0; pointer-events: none; }
.ev-info { display: grid; gap: 0 40px; margin-top: 32px; }
@media (min-width: 860px) { .ev-info { grid-template-columns: 1.2fr 1fr; } }
.ev-info h2 { border-bottom: 4px solid var(--purple-2); padding-bottom: 10px; margin-top: 24px; }
.ev-info p { max-width: 62ch; }
.rules { padding: 0; margin: 0; list-style: none; display: grid; gap: 8px; }
.rules li { padding-left: 22px; position: relative; }
.rules li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--gold); }
.card-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 760px) { .card-days { grid-template-columns: repeat(2, 1fr); } .card-days > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.slot { background: var(--panel); padding: 14px; height: 100%; display: flex; flex-direction: column; }
.slot-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; color: var(--muted); }
.slot-head .day { font: 12px var(--pixel); color: var(--gold); }
.slot-head .kind { font: 10px var(--pixel); margin-left: auto; color: var(--bulb); }
.slot-title { font-size: 16px; color: var(--ink); }
.slot-stage { background: linear-gradient(transparent 72%, var(--purple) 72%, var(--purple-2)); padding-top: 4px; }
.slot-stage .sprite, .slot-stage .idle { width: 128px; height: 128px; }
.slot-names { display: flex; justify-content: space-between; gap: 8px; margin: 10px 0 8px; font-weight: 700; }
.slot-names .sn-b { text-align: right; }
.slot-names a { color: var(--ink); }
.sn-a a { text-decoration-color: var(--red); }
.sn-b a { text-decoration-color: var(--blue); }
.sn-vs { font: 10px var(--pixel); color: var(--dim); align-self: center; }
.label-slot { font: 10px/1.6 var(--pixel); color: var(--muted); }
.slot-angle { color: var(--muted); }
.slot-pending { margin: auto 0 0; font: 10px var(--pixel); color: var(--dim); }
.slot-result { margin: auto 0 0; font-weight: 700; }
.slot-final { --fc: var(--gold); }
@media (max-width: 380px) { .slot-stage .sprite, .slot-stage .idle, .slot-stage .tbd-box { width: 128px; height: 128px; } .slot-stage .faceoff { gap: 0; } .slot-stage .vs { font-size: 10px; } }

/* Bracket */
.bracket-scroll { overflow-x: auto; padding-bottom: 8px; }
.bracket { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 0 24px; min-width: 760px; }
.b-col { display: flex; flex-direction: column; gap: 8px; }
.b-list { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 12px; }
.b-col h3 { font-size: 10px; color: var(--muted); margin: 0 0 4px; text-align: center; }
.bm { background: var(--panel); padding: 8px 10px; position: relative; }
.bm-day { font: 10px var(--pixel); color: var(--gold); margin: 0 0 6px; }
.bm-day span { color: var(--dim); }
.bm ul { list-style: none; margin: 0; padding: 0; }
.bm li { padding: 6px 4px; border-top: 2px solid var(--night-2); font-weight: 700; }
.bm li:first-child { box-shadow: inset 4px 0 0 var(--red); padding-left: 10px; }
.bm li:last-child { box-shadow: inset 4px 0 0 var(--blue); padding-left: 10px; }
.bm li.won { color: var(--gold); }
.bm li.lost { opacity: .6; text-decoration: line-through; }
.b-qf .bm::after, .b-sf .bm::after, .b-f .bm::after { content: ''; position: absolute; right: -24px; top: 50%; width: 24px; height: 4px; background: var(--purple-2); }
.b-star { align-items: center; text-align: center; }
.b-star p { font: 12px var(--pixel); color: var(--dim); }
.star { width: 64px; height: 64px; margin: 8px auto 12px; background: var(--gold);
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%);
  filter: drop-shadow(0 0 12px rgba(246, 209, 7, .5)); }

/* Advent calendar */
.advent { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .advent { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .advent { grid-template-columns: repeat(3, 1fr); } }
.door { position: relative; }
.door .slot { --fc: #7d0f1f; background: #13241e; padding-top: 18px; background-image: linear-gradient(90deg, transparent calc(50% - 6px), rgba(246, 209, 7, .07) calc(50% - 6px) calc(50% + 6px), transparent calc(50% + 6px)); }
.door:nth-child(2n) .slot { --fc: #0c4a2c; background-color: #241319; }
.door-num { position: absolute; z-index: 2; top: -10px; left: -6px; font: 16px/1 var(--pixel); color: var(--edge); background: var(--gold); padding: 8px 8px 6px; box-shadow: 4px 4px 0 var(--edge); }
.door-ex .slot { opacity: .92; }
.door-final .slot { --fc: var(--gold); }
.door .slot-head .day { visibility: hidden; width: 1.5em; }
.door-final .door-num { background: var(--red); color: #fff; }

/* Theme: harvest (Turkey Bowl) */
.theme-harvest .ev-hero { background: #2a160c; }
.theme-harvest .ev-deco {
  background:
    repeating-linear-gradient(90deg, rgba(232, 129, 45, .22) 0 16px, transparent 16px 32px, rgba(160, 82, 28, .3) 32px 40px, transparent 40px 64px),
    repeating-linear-gradient(0deg, rgba(232, 129, 45, .18) 0 16px, transparent 16px 32px, rgba(160, 82, 28, .28) 32px 40px, transparent 40px 64px);
}
.theme-harvest .ev-deco::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: conic-gradient(from 135deg at 50% 0, var(--amber) 0 90deg, transparent 0) 0 0 / 24px 24px repeat-x, #6b3a1e; }
.theme-harvest .ev-hero h1 { color: #ffc94a; text-shadow: 4px 4px 0 #5a2a00; }
.theme-harvest .ev-tag { color: #ffe9c7; }
.theme-harvest .slot { background: #2a1a12; --fc: #4a2410; }
.theme-harvest .slot-stage { background: linear-gradient(transparent 72%, #6b3a1e 72%, #8a4a17); }
.theme-harvest .slot-head .day { color: #ffc94a; }
.theme-harvest .card-days > li:last-child .slot { --fc: var(--amber); }
.theme-harvest .sec-head, .theme-harvest .ev-info h2 { border-color: #8a4a17; }
.theme-harvest .rules li::before { background: #e8812d; }

/* Theme: pixelmas */
.theme-pixelmas .ev-hero { background: #0b2a1c; }
.theme-pixelmas .ev-deco {
  background:
    conic-gradient(from 270deg at 4px 4px, rgba(255, 255, 255, .55) 25%, transparent 0) 0 0 / 56px 56px,
    conic-gradient(from 270deg at 4px 4px, rgba(255, 255, 255, .35) 25%, transparent 0) 28px 20px / 56px 56px,
    conic-gradient(from 270deg at 4px 4px, rgba(255, 255, 255, .2) 25%, transparent 0) 12px 40px / 40px 40px;
  animation: snow 12s steps(140, end) infinite;
}
.theme-pixelmas .ev-deco::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: repeating-linear-gradient(90deg, #c8102e 0 16px, #f4f4f4 16px 32px); box-shadow: 0 -4px 0 var(--gold); }
@keyframes snow { from { background-position: 0 0, 28px 20px, 12px 40px; } to { background-position: 0 560px, 28px 580px, 12px 600px; } }
.theme-pixelmas .ev-hero h1 { color: var(--gold); text-shadow: 4px 4px 0 #7d0f1f; }
.theme-pixelmas .ev-tag { color: #eafff2; }
.theme-pixelmas .sec-head, .theme-pixelmas .ev-info h2 { border-color: #17673f; }
.theme-pixelmas .rules li::before { background: #c8102e; }
.theme-pixelmas .bm { background: #13241e; }

/* Tale of the tape */
.tape-head { text-align: center; }
.wyg { font-size: 24px; text-shadow: 4px 4px 0 #5a2a00, 0 0 28px rgba(246, 209, 7, .3); margin-bottom: 12px; }
@media (min-width: 560px) { .wyg { font-size: 40px; } }
@media (min-width: 900px) { .wyg { font-size: 56px; } }
.tape-head .lede { margin: 0 auto; }
.pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; margin: 16px 0 24px; }
.pickers [data-random] { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
@media (min-width: 760px) { .pickers { grid-template-columns: 1fr auto 1fr; } .pickers [data-random] { grid-column: 2; grid-row: 1; } }
.pick label { display: block; font: 10px var(--pixel); margin-bottom: 8px; }
.pick-a label { color: var(--red-hi); }
.pick-b label { color: var(--blue-hi); text-align: right; }
.pick select { width: 100%; font: 700 1rem var(--body); color: var(--ink); background: var(--night-2); border: 0; padding: 12px 10px; border-radius: 0; box-shadow: inset 0 0 0 4px var(--red); }
.pick-b select { box-shadow: inset 0 0 0 4px var(--blue); }
.tape-card { background: var(--panel); padding: 16px 12px 20px; }
.tape-stage { background: url('../brand/arena.png') center 85% / 628px 1114px no-repeat; image-rendering: pixelated; padding-top: 16px; box-shadow: inset 0 -40px 0 rgba(52, 25, 106, .9); }
.tape-stage .idle { width: 128px; height: 128px; }
@media (min-width: 560px) { .tape-stage .idle { width: 256px; height: 256px; } }
.tape-names { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 16px 0; }
.tn { margin: 0; font-size: 12px; }
@media (min-width: 560px) { .tn { font-size: 16px; } }
.tn-a { color: var(--red-hi); }
.tn-b { color: var(--blue-hi); text-align: right; }
.tape-names .vs { font: 16px var(--pixel); color: var(--gold); }
.tape-rows { display: grid; gap: 4px; }
.tr { display: grid; grid-template-columns: 2.75em minmax(0, 1fr) 4.2em minmax(0, 1fr) 2.75em; align-items: center; gap: 4px; padding: 10px 0; border-bottom: 2px solid var(--night-2); }
.tr .v { font: 12px var(--pixel); color: var(--muted); text-align: center; }
.tr .v.hi { color: var(--edge); background: var(--gold); padding: 6px 1px 4px; }
.tr .k { font: 10px/1.4 var(--pixel); color: var(--muted); text-align: center; }
.tr .bar-a { justify-self: end; }
.tr .bar-a .cells { flex-direction: row-reverse; }
.tr .cells { gap: 1px; }
.tr .cells i { width: 6px; }
@media (max-width: 359px) { .tr .cells i { width: 4px; } }
/* Values step from 12 px on phones (three digits fit the 2.75em column beside the bars) to 16 px. */
@media (min-width: 600px) { .tr { grid-template-columns: 3.25em minmax(0, 1fr) 4.2em minmax(0, 1fr) 3.25em; gap: 10px; padding: 10px 4px; } .tr .v { font-size: 16px; } .tr .cells { gap: 2px; } .tr .cells i { width: 14px; height: 16px; } }
.tr-text { grid-template-columns: minmax(0, 1fr) 5.5em minmax(0, 1fr); }
.tr-text .ta, .tr-text .tb { overflow-wrap: anywhere; }
.tr-text .ta { text-align: left; }
.tr-text .tb { text-align: right; }
.tr-text .ta, .tr-text .tb { font-weight: 700; }
.tr-text small { display: block; font-weight: 400; color: var(--muted); font-size: 1rem; }
.tape-h2h { margin-top: 20px; }
.tape-h2h h3 { font-size: 12px; }
.tape-h2h ul { margin: 0; padding-left: 20px; }
.share { margin: 20px 0 0; text-align: center; }
.share a { font-weight: 700; }

/* About */
.about section { max-width: 760px; }
.about h2 { margin-top: 40px; border-bottom: 4px solid var(--purple-2); padding-bottom: 10px; }
.guide, .divs { margin: 0; display: grid; gap: 14px; }
.g-row dt, .divs dt { font-weight: 700; margin-bottom: 4px; }
.g-label { font: 10px var(--pixel); color: var(--edge); background: var(--gold); margin-right: 6px; }
.guide dd, .divs dd { margin: 0; color: var(--muted); }
.guide dd p { margin: 0; }
.rule { color: var(--ink); background: var(--night-2); padding: 12px 14px; outline: 2px dashed var(--purple-2); outline-offset: -6px; }
.rankings .lede.rule { max-width: 70ch; }

/* Arena backdrop at whole multiples of its 314 x 557 px file, never `cover`, so every art pixel is the same size on screen.
   Each step is the smallest whole scale that still spans the stage at the widest viewport of its range. */
@media (min-width: 629px) { .hero { background-size: 942px 1671px; } }
@media (min-width: 943px) { .hero { background-size: 1256px 2228px; } }
@media (min-width: 1257px) { .hero { background-size: 1570px 2785px; } }
@media (min-width: 1571px) { .hero { background-size: 1884px 3342px; } }
@media (min-width: 1885px) { .hero { background-size: 2198px 3899px; } }
@media (min-width: 2199px) { .hero { background-size: 2512px 4456px; } }
@media (min-width: 661px) and (max-width: 699px) { .f-stage { background-size: 942px 1671px; } }
@media (min-width: 685px) { .tape-stage { background-size: 942px 1671px; } }
@media (min-width: 999px) { .tape-stage { background-size: 1256px 2228px; } }

/* Subtle scanlines on the big stages only */
.hero::after, .f-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 4px); }
.f-stage::after { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .idle.anim .f1 { opacity: 0; }
  .idle.anim .f0 { opacity: 1; }
}

/* Windows high contrast: box-shadow frames and background fills are dropped, so draw real borders,
   keep the stat cells and win/loss chips in their own colours, and mark the selected states with an outline. */
@media (forced-colors: active) {
  .px-frame, .result, .preview, .slot, .tape-card, .fantasy-card, .belt, .countdown, .debut, .bm, .month, .ev-link, .f-card > div, .special,
  .btn, .chip, .tile-in { border: 2px solid CanvasText; }
  .btn, .pick select { border: 2px solid ButtonText; }
  .cells i, .wl, .tr .v.hi { forced-color-adjust: none; }
  .nav a[aria-current='page'], .chip[aria-pressed='true'], .tile-in.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* Under 360 px (iPhone SE size), kept last so it wins over the base card rules: the channel links live in the footer only, event faceoffs tuck the VS between
   the sprites' transparent margins instead of shrinking them, and the mini rankings close their gaps. */
@media (max-width: 359px) {
  .site-head .channels { display: none; }
  .slot, .result { padding-left: 8px; padding-right: 8px; }
  .slot-stage .vs, .result-stage .vs { margin: 0 -8px; position: relative; z-index: 1; }
  .mini-ranks li { gap: 0 6px; grid-template-columns: 1.5em 80px 1fr auto; }
  .mini-ranks .rec { grid-row: 1; grid-column: 4; align-self: end; }
  .mini-ranks .stk { grid-row: 2; grid-column: 4; align-self: start; }
  .mini-ranks .rk, .mini-ranks li > :nth-child(2), .mini-ranks li > :nth-child(3) { grid-row: 1 / span 2; }
}