/* Contest Archive viewer — night-paddock palette (see /design.md) */
:root {
  --paper:   oklch(15% 0.025 265);
  --paper-2: oklch(19% 0.028 265);
  --paper-3: oklch(23% 0.030 265);
  --rule:    oklch(34% 0.022 265);
  --muted:   oklch(74% 0.015 265);
  --ink:     oklch(94% 0.008 265);
  --accent:  oklch(88% 0.170 100);
  --accent-ink: oklch(18% 0.030 265);
  --scrim:   oklch(15% 0.025 265 / 0.82);
  --display: "Tomorrow", sans-serif;
  --body: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", monospace;
  --r: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink);
  font: 350 15px/1.5 var(--body); overflow-x: clip; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- bars ---------- */
.bar { display: flex; align-items: center; gap: 1rem; padding: .6rem 1.25rem;
  border-bottom: 1px solid var(--rule); position: sticky; z-index: 40; background: var(--scrim);
  backdrop-filter: blur(14px); }
.bar--top { top: 0; }
.bar--filters { top: 53px; z-index: 39; flex-wrap: wrap; gap: .5rem; padding-block: .5rem; }

.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; white-space: nowrap;
  text-decoration: none; color: inherit; }
.brand__uh { height: 20px; width: auto; display: block; opacity: .9; }
.brand__sb { height: 24px; width: auto; display: block; opacity: .9; }
.brand__ch { height: 28px; width: 28px; border-radius: 6px; display: block; opacity: .9;
  object-fit: cover; }
.brand__x { color: var(--muted); font: 400 .8rem var(--mono); }
.brand:hover .brand__uh, .brand:hover .brand__sb, .brand:hover .brand__ch { opacity: 1; }

.seasons { display: flex; gap: .25rem; }
.seasons button { font: 600 .85rem var(--display); letter-spacing: .04em; padding: .35rem .8rem;
  border-radius: 999px; color: var(--muted); text-transform: uppercase; }
.seasons button:hover { color: var(--ink); }
.seasons button.is-active { background: var(--accent); color: var(--accent-ink); }

/* THE PREMIERE — the loudest thing in the chrome, dead center of the header */
.bar--top { position: sticky; }
.premiere-btn { position: absolute; left: 50%; translate: -50% 0; z-index: 5;
  font: 600 1.02rem var(--display); letter-spacing: .05em; text-decoration: none;
  color: var(--accent-ink); background: var(--accent);
  padding: .55rem 1.6rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent);
  animation: premierePulse 2.2s ease-out infinite; }
.premiere-btn:hover { filter: brightness(1.1); animation-play-state: paused; }
@keyframes premierePulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (max-width: 1200px) { .premiere-btn { font-size: .85rem; padding: .4rem 1rem; } }

.views { display: flex; gap: .25rem; border: 1px solid var(--rule); border-radius: 999px; padding: .15rem; }
.views__btn { padding: .25rem .8rem; border-radius: 999px; color: var(--muted); font-weight: 500; font-size: .85rem; }
.views__btn.is-active { background: var(--paper-3); color: var(--ink); }

/* ---------- filter chips ---------- */
.chips { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.chips--right { margin-left: auto; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem;
  border: 1px solid var(--rule); border-radius: 999px; font-size: .82rem; color: var(--muted);
  transition: all .15s ease; }
.chip:hover { border-color: var(--muted); color: var(--ink); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 500; }
.chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; object-position: top; margin-left: -.35rem; }
.sep { width: 1px; height: 1.2rem; background: var(--rule); }

.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.seg button { padding: .25rem .65rem; font-size: .8rem; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button.is-active { background: var(--paper-3); color: var(--ink); }

.chip--play.is-on { background: var(--accent); color: var(--accent-ink); }

/* ---------- feed ---------- */
.feed { padding: 2px; }
.feed--grid, .feed--pins { columns: 5 240px; }
.feed--grid { column-gap: 2px; }
.feed--pins { column-gap: 14px; padding: 14px; }
@media (max-width: 1100px) { .feed--grid, .feed--pins { columns: 3 220px; } }
@media (max-width: 640px)  { .feed--grid, .feed--pins { columns: 2 160px; } }

/* justified rows: true aspect ratios, equal-height rows, no cropping */
.feed--rows { display: block; }
.jrow { display: flex; gap: 2px; margin-bottom: 2px; }
.jrow .card { margin: 0; aspect-ratio: var(--a); flex: 0 0 auto; }
.jrow.is-justified .card { width: auto; }
.jrow .card .card__media > * { width: 100%; height: 100%; aspect-ratio: var(--a); object-fit: cover; }

.card { position: relative; break-inside: avoid; margin: 0 0 2px; overflow: hidden;
  background: var(--paper-2); cursor: pointer; }
.feed--pins .card { border-radius: var(--r); margin-bottom: 14px; }
.card__media { position: relative; width: 100%; display: block; }
.card video, .card img.poster { width: 100%; display: block; object-fit: cover; background: var(--paper-2); }
/* mosaic tiles keep the video's TRUE aspect (set as --a per card) — no crop */
.feed--grid .card .card__media > * { aspect-ratio: var(--a, 9 / 16); }
.feed--pins .card video, .feed--pins .card img.poster { aspect-ratio: var(--a, 9 / 16); }

/* the lazy poster img sizes the tile; the video overlays it and fades in
 * once its data is local (loadeddata → .is-ready) */
.card__media { position: relative; }
.card__media video.card__vid { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .18s; }
.card__media video.card__vid.is-ready { opacity: 1; }

.card__handle { position: absolute; left: .5rem; top: .5rem; z-index: 3;
  font: 400 .68rem var(--mono); background: var(--scrim); color: var(--ink);
  padding: .15rem .45rem; border-radius: 999px; opacity: 0; transition: opacity .2s; }
.card__prize { position: absolute; right: .5rem; top: .45rem; z-index: 3; font-size: 1rem;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / .8)); letter-spacing: .1em; }
.card__veil { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.6rem .6rem .5rem;
  background: linear-gradient(transparent, rgb(0 0 0 / .75)); opacity: 0; transition: opacity .2s;
  font-size: .74rem; color: var(--ink); }
.card__veil b { display: block; font: 600 .78rem var(--display); letter-spacing: .03em; }
.card__veil span { color: var(--muted); font-family: var(--mono); font-size: .64rem; }
.card:hover .card__handle, .card:hover .card__veil,
.card__handle.is-tip-anchor { opacity: 1; }
.feed--pins .card__caption { padding: .55rem .7rem .7rem; font-size: .78rem; }
.feed--pins .card__caption b { font: 600 .8rem var(--display); }
.feed--pins .card__caption .m { color: var(--muted); font: 400 .68rem var(--mono); display: block; margin-top: .15rem; }

.card .embed-slot { min-height: 300px; display: grid; place-items: center; color: var(--muted);
  font: 400 .7rem var(--mono); }
.card .yt-lite { position: relative; display: block; width: 100%; }
.card .yt-lite .playbtn, .modal .yt-lite .playbtn { position: absolute; inset: 0; margin: auto;
  width: 64px; height: 44px; background: rgb(0 0 0 / .7); border-radius: 12px; display: grid;
  place-items: center; transition: background .15s; }
.yt-lite:hover .playbtn { background: #f00; }
.yt-lite .playbtn::after { content: ""; border-style: solid; border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff; }
.card iframe, .modal iframe { width: 100%; aspect-ratio: 9 / 16; border: 0; display: block; }

/* ---------- leaderboard ---------- */
.board { max-width: 1080px; margin: 0 auto; padding: 2rem 1.25rem 6rem; }
.board h2 { font: 600 1.6rem var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 1.2rem; }
.board table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.board th { text-align: left; font: 400 .68rem var(--mono); color: var(--muted); text-transform: uppercase;
  letter-spacing: .08em; padding: .5rem .6rem; border-bottom: 1px solid var(--rule); }
.board td { padding: .55rem .6rem; border-bottom: 1px solid color-mix(in oklab, var(--rule) 45%, transparent); }
.board tr.is-winner td { background: color-mix(in oklab, var(--accent) 6%, transparent); }
.board .rank { font: 600 .9rem var(--display); color: var(--muted); width: 2.2rem; }
.board tr:nth-child(-n+3) .rank { color: var(--accent); }
.board .who a { color: var(--ink); text-decoration: none; font-weight: 500; }
.board .who a:hover { color: var(--accent); }
.board .who .nm { color: var(--muted); font-size: .74rem; display: block; }
.board .medals { font-size: 1.05rem; letter-spacing: .12em; }
.board .num { font-family: var(--mono); font-size: .78rem; text-align: right; }
.board .seasons-cell { font: 400 .68rem var(--mono); color: var(--muted); }
.board .prize { color: var(--accent); font-weight: 500; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.modal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .72); backdrop-filter: blur(6px); }
.modal__card { position: relative; display: grid; grid-template-columns: minmax(300px, 420px) minmax(320px, 460px);
  max-width: 920px; width: calc(100vw - 3rem); max-height: calc(100vh - 3rem);
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
@media (max-width: 780px) { .modal__card { grid-template-columns: 1fr; overflow-y: auto; } }
.modal__player { background: #000; display: grid; place-items: center; }
.modal__player video { width: 100%; max-height: calc(100vh - 3rem); display: block; }
.modal__player .x-slot { width: 100%; overflow-y: auto; max-height: calc(100vh - 3rem); padding: .5rem; }
.modal__info { padding: 1.4rem 1.5rem; overflow-y: auto; }
.modal__close { position: absolute; top: .6rem; right: .8rem; z-index: 5; font-size: 1.1rem;
  color: var(--muted); background: var(--scrim); border-radius: 50%; width: 2rem; height: 2rem; }
.modal__close:hover { color: var(--ink); }

.mi__season { font: 400 .68rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.mi__title { font: 600 1.25rem var(--display); margin: .3rem 0 .8rem; letter-spacing: .01em; }
.mi__awards { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1rem; }
.mi__award { display: flex; align-items: center; gap: .5rem; background: color-mix(in oklab, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); border-radius: 8px;
  padding: .35rem .6rem; font-size: .84rem; }
.mi__award .pz { margin-left: auto; color: var(--accent); font-family: var(--mono); font-size: .78rem; }
.mi__author { display: flex; gap: .7rem; align-items: center; padding: .7rem 0; border-block: 1px solid var(--rule); margin-bottom: .9rem; }
.mi__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--paper-3); display: grid;
  place-items: center; font: 600 1rem var(--display); color: var(--accent); flex: none; }
.mi__author b { font-weight: 500; }
.mi__author .bio { font-size: .74rem; color: var(--muted); display: block; max-width: 32ch;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi__author .fl { margin-left: auto; font: 400 .7rem var(--mono); color: var(--muted); white-space: nowrap; }
.mi__row { display: flex; gap: .6rem; font-size: .8rem; color: var(--muted); margin: .3rem 0; flex-wrap: wrap; }
.mi__row b { color: var(--ink); font-weight: 500; }
.mi__row a { color: var(--accent); text-decoration: none; }
.mi__row a:hover { text-decoration: underline; }
.mi__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .8rem; }
.mi__tags .t { font: 400 .68rem var(--mono); border: 1px solid var(--rule); border-radius: 999px; padding: .1rem .5rem; color: var(--muted); }
.mi__tags .t--char { border-color: color-mix(in oklab, var(--accent) 45%, transparent); color: var(--accent); }
.mi__sum { font-size: .8rem; color: var(--muted); margin-top: .8rem; line-height: 1.55; }
.mi__srcseg { margin-top: 1rem; }

/* ---------- theater — netflix/prime template ---------- */
/* full-bleed black stage · controls NEVER overlap the video · arrows pinned to
 * the stage edges (fixed screen position across videos) and idle-fade via the
 * .is-active class set on mousemove */
/* full-screen no-scroll SPA: the theater IS the viewport (minus header).
 * The detail card is content-sized; the stage flexes to absorb the rest, so
 * nothing ever pushes past the fold. Footer/status don't exist in theater. */
.theater { height: calc(100vh - 54px); overflow: hidden; display: flex; align-items: stretch; }
.theater__main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.theater__stage { position: relative; background: #000; width: 100%;
  flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; }
body:has(#viewTheater:not([hidden])) .foot { display: none; }
.theater__player { position: relative; height: 100%; max-width: 100%; }
.theater__player video, .theater__player iframe { position: absolute; inset: 0; width: 100%;
  height: 100%; object-fit: contain; border: 0; }
.theater__player .x-slot { position: absolute; inset: 0; overflow-y: auto; padding: .5rem;
  background: var(--paper-2); width: min(90vw, 460px); }

.th__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 6;
  left: clamp(1rem, 3vw, 2.5rem);
  font: 600 2rem var(--display); color: var(--ink); width: 3rem; height: 3rem;
  border-radius: 50%; background: rgb(0 0 0 / .55); border: 1px solid rgb(255 255 255 / .18);
  opacity: 0; pointer-events: none; transition: opacity .35s, border-color .15s, color .15s; }
.th__nav--next { left: auto; right: clamp(1rem, 3vw, 2.5rem); }
.th__nav:hover { color: var(--accent); border-color: var(--accent); }
.th__nav:focus { outline: none; }
.th__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theater__stage.is-active .th__nav,
.theater__stage.is-paused .th__nav { opacity: 1; pointer-events: auto; }

/* back-to-feed pill: only when the playlist is a feed context; shares the
 * chrome idle-fade but starts visible for a beat so it's discoverable */
.th__back { position: absolute; top: 1rem; left: clamp(1rem, 3vw, 2.5rem); z-index: 6;
  font: 500 .78rem var(--mono); color: var(--ink); text-decoration: none;
  background: rgb(0 0 0 / .55); border: 1px solid rgb(255 255 255 / .18);
  padding: .4rem .9rem; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .35s, border-color .15s, color .15s;
  animation: backIn 3s ease-out; }
@keyframes backIn { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.theater__stage.is-active .th__back, .theater__stage.is-paused .th__back {
  opacity: 1; pointer-events: auto; animation: none; }
.th__back:hover { color: var(--accent); border-color: var(--accent); }

/* control bar: its own band under the stage, separated by rules */
.theater__bar { position: relative; display: flex; align-items: center; justify-content: center;
  gap: 1.4rem; padding: .65rem 1.25rem; border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); background: var(--paper); flex-wrap: wrap;
  overflow: hidden; }
.th__counter { font: 400 .72rem var(--mono); color: var(--muted); display: inline-flex;
  align-items: center; gap: .45rem; }
.th__counter a { color: var(--ink); text-decoration: none; }
.th__counter a:hover { color: var(--accent); }

/* one full-width card under the stage, split in two halves:
 * left — the episode, its creator, its sources · right — what's in it.
 * Content-sized (the stage flexes above it); internal scroll only as a
 * safety on very short screens. */
.theater__detail { max-width: 1280px; width: 100%; margin: 0 auto;
  padding: .7rem 1.25rem .9rem; box-sizing: border-box; flex: 0 1 auto;
  display: flex; min-height: 0; max-height: 44vh; overflow-y: auto; }

/* bar extras: fave star · copy ids */
.th__baractions { display: inline-flex; gap: .2rem; align-items: center; }
.th__fave, .th__copyfaves { font-size: 1rem; color: var(--muted);
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  transition: color .15s, background .15s; }
.th__fave:hover, .th__copyfaves:hover { color: var(--accent);
  background: rgb(255 255 255 / .06); }
.th__fave.is-on { color: var(--accent); }
.th__cc { font: 600 .66rem var(--mono); color: var(--muted); letter-spacing: .04em;
  height: 2rem; padding: 0 .45rem; border: 1px solid var(--rule); border-radius: 999px;
  display: grid; place-items: center; transition: color .15s, border-color .15s, background .15s; }
.th__cc:hover:not(:disabled) { color: var(--accent); background: rgb(255 255 255 / .06); }
.th__cc.is-on { color: var(--accent); border-color: var(--accent); }
.th__cc:disabled { opacity: .35; }

/* subtitle cues on the theater video */
video::cue { background: oklch(15% 0.025 265 / 0.78); color: var(--ink);
  font: 500 clamp(14px, 2.4vh, 22px)/1.35 var(--body); }

/* viewing progress: a thin line running along the top of the theater bar */
.th__progress { position: absolute; left: 0; top: -1px; height: 3px; width: 0;
  background: var(--accent); transition: width .25s linear; pointer-events: none; }

/* sidebar handle: attached to the stage's right edge (== the sidebar's left
 * edge when open), sitting BELOW the next-arrow's lane; tall vertical label
 * so it explains itself */
.th__sidetab { position: absolute; right: 0; top: calc(50% + 3.4rem); z-index: 6;
  writing-mode: vertical-rl; font: 500 .66rem var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); padding: 1.1rem .4rem;
  background: rgb(0 0 0 / .55); border: 1px solid rgb(255 255 255 / .18); border-right: 0;
  border-radius: 10px 0 0 10px; transition: color .15s, border-color .15s; }
.th__sidetab:hover { color: var(--accent); border-color: var(--accent); }
.th__sidetab.is-on { color: var(--accent); }
.theater--immersive .th__sidetab { display: none; }

/* netflix lower-third: transient, bottom-left of the stage, autofades */
.th__lower { position: absolute; left: clamp(1rem, 3vw, 2.5rem); bottom: clamp(2.6rem, 7vh, 4rem);
  z-index: 5; max-width: min(420px, 44%); display: flex; flex-direction: column; gap: .35rem;
  padding: .9rem 1.1rem; background: linear-gradient(90deg, rgb(0 0 0 / .78), rgb(0 0 0 / .35));
  border-left: 3px solid var(--accent); border-radius: 4px;
  animation: xrayIn .3s ease-out; transition: opacity .6s; }
.th__lower.is-fading { opacity: 0; }
.thl__name { font: 600 1.25rem var(--display); letter-spacing: .02em; }
.thl__sub { display: flex; align-items: center; gap: .4rem; }
.thl__medal { text-decoration: none; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .8)); }
.th__lower .epill--season { align-self: flex-start; }

/* 3s intermission (ad-break shape): watched · spinner+countdown · up next,
 * over the blurred last frame of the ended video */
.th__break { position: absolute; inset: 0; z-index: 7; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem;
  padding: 0 clamp(2rem, 6vw, 5rem); overflow: hidden; }
.th__break::before { content: ""; position: absolute; inset: -40px;
  background-image: var(--bg); background-size: cover; background-position: center;
  filter: blur(30px) brightness(.32); }
.thb__col { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .55rem; text-align: center; animation: xrayIn .3s ease-out; }
.thb__label { font: 400 .64rem var(--mono); text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); }
.thb__thumb img { height: 22vh; max-height: 220px; border-radius: 8px; display: block;
  box-shadow: 0 12px 40px rgb(0 0 0 / .6); }
.thb__name { font: 600 .95rem var(--display); max-width: 260px; }
.thb__medals { font-size: .95rem; letter-spacing: .1em; }
.thb__spinner { position: relative; width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--accent) 0turn, transparent 0turn); }
.thb__spinner::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgb(255 255 255 / .16); border-top-color: var(--accent);
  animation: thbspin 1s linear infinite; }
@keyframes thbspin { to { rotate: 1turn; } }
.thb__count { font: 600 1.6rem var(--display); }
.thb__skip { font: 400 .72rem var(--mono); color: var(--muted); padding: .3rem .8rem;
  border: 1px solid var(--rule); border-radius: 999px; }
.thb__skip:hover { color: var(--accent); border-color: var(--accent); }
.thb__stars { display: flex; gap: .15rem; font-size: 1.5rem; }
.thb__star { color: rgb(255 255 255 / .25); transition: color .1s; padding: 0 .1rem; }
.thb__star.is-on { color: var(--accent); }
.thb__stars:hover .thb__star { color: var(--accent); }
.thb__star:hover ~ .thb__star { color: rgb(255 255 255 / .25); }
.thb__rlabel { font: 400 .6rem var(--mono); color: var(--muted); }
.thb__col .epill { max-width: 100%; }

/* right playlist sidebar */
.theater__side { width: 304px; flex: none; border-left: 1px solid var(--rule);
  background: var(--paper); max-height: calc(100vh - 54px); overflow-y: auto;
  position: sticky; top: 54px; }
.side__head { font: 400 .64rem var(--mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); padding: .8rem 1rem .5rem; position: sticky; top: 0;
  background: var(--paper); z-index: 2; }
.side__row { display: flex; gap: .6rem; align-items: center; width: 100%; text-align: left;
  padding: .45rem 1rem; border-left: 2px solid transparent; }
.side__row:hover { background: rgb(255 255 255 / .04); }
.side__row.is-now { border-left-color: var(--accent); background: rgb(255 255 255 / .05); }
.side__row img { width: 44px; height: 60px; object-fit: cover; border-radius: 5px; flex: none;
  background: var(--paper-2); }
.side__body { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.side__body b { font: 500 .76rem var(--display); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.side__body i { font: 400 .64rem var(--mono); font-style: normal; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__row.is-new .side__body b::after { content: ""; display: inline-block; width: 6px;
  height: 6px; border-radius: 50%; background: var(--accent); margin-left: .4rem;
  vertical-align: .12em; }
.theater--immersive .theater__side { display: none; }

/* the O.V.A. premiere card leads the feed — accent-framed, always labeled */
.card--premiere { outline: 2px solid var(--accent); outline-offset: -2px; }
.card--premiere .card__handle { opacity: 1; background: var(--accent); color: var(--accent-ink);
  font-weight: 600; }
.card--premiere .card__handle:hover { filter: brightness(1.1); }

/* feed card fave star */
.card__fave { position: absolute; right: .45rem; bottom: .4rem; z-index: 3; font-size: 1.05rem;
  color: #fff; opacity: 0; transition: opacity .15s, color .15s;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / .9)); }
.card:hover .card__fave { opacity: .85; }
.card__fave.is-on { opacity: 1; color: var(--accent); }
.card__fave:hover { color: var(--accent); }

/* ---------- CREATE — kits, briefs, getting started ---------- */
.create { max-width: 1180px; margin: 0 auto; padding: 2.2rem 1.25rem 4rem; }
.create__load { text-align: center; color: var(--muted); font: 400 .8rem var(--mono); padding: 4rem 0; }
.create__hero h1 { font: 600 2rem var(--display); letter-spacing: .02em; margin: 0 0 .6rem; }
.create__hero > p { color: var(--muted); max-width: 640px; line-height: 1.55; margin: 0 0 1.6rem; }
.create__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.cstep { position: relative; background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 12px; padding: 1rem 1rem .9rem; }
.cstep__n { position: absolute; top: .7rem; right: .9rem; font: 600 1.4rem var(--display);
  color: rgb(255 255 255 / .12); }
.cstep__g { font-size: 1.3rem; display: block; margin-bottom: .4rem; }
.cstep b { font: 600 .9rem var(--display); display: block; margin-bottom: .25rem; }
.cstep p { font-size: .74rem; color: var(--muted); line-height: 1.5; margin: 0; }
.cstep a { color: var(--ink); text-decoration: underline dotted; }
.cstep a:hover { color: var(--accent); }
.create__sec { margin-top: 2.6rem; }
.create__sec h2 { font: 600 1.15rem var(--display); letter-spacing: .03em; margin: 0 0 .3rem; }
.create__desc { color: var(--muted); font-size: .8rem; margin: 0 0 1rem; max-width: 620px; }
.briefrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.brief { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px;
  padding: 1rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.brief b { font: 600 .82rem var(--display); }
.brief p { font-size: .74rem; color: var(--muted); line-height: 1.5; margin: 0; }
.brief i { font: 400 .62rem var(--mono); font-style: normal; color: var(--muted); }
.brief__see { font: 400 .68rem var(--mono); color: var(--ink); text-decoration: none;
  margin-top: auto; }
.brief__see:hover { color: var(--accent); }
.kitgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.kit { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column; }
.kit img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  background: var(--paper-3); }
.kit__body { padding: .75rem .85rem .85rem; display: flex; flex-direction: column; gap: .3rem;
  flex: 1; }
.kit__body b { font: 600 .84rem var(--display); }
.kit__body p { font-size: .7rem; color: var(--muted); line-height: 1.45; margin: 0; }
.kit__body i { font: 400 .62rem var(--mono); font-style: normal; color: var(--muted); }
.kit__acts { display: flex; gap: .5rem; align-items: center; margin-top: auto; padding-top: .4rem; }
.kit__dl { font: 500 .7rem var(--mono); color: var(--accent-ink); background: var(--accent);
  padding: .3rem .7rem; border-radius: 999px; text-decoration: none; }
.kit__dl:hover { filter: brightness(1.1); }
.kit__bundle { display: inline-block; margin-top: 1rem; font: 500 .74rem var(--mono);
  color: var(--ink); border: 1px solid var(--rule); padding: .5rem 1rem; border-radius: 999px;
  text-decoration: none; }
.kit__bundle:hover { border-color: var(--accent); color: var(--accent); }
.create__legal { margin-top: 3rem; font: 400 .64rem var(--mono); color: var(--muted); }

/* ---------- feed ↔ theater view transitions ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
/* the morph pair: theater player ↔ its feed card */
::view-transition-group(vmorph) { animation-duration: .34s; animation-timing-function: cubic-bezier(.3, .8, .3, 1); }
::view-transition-old(vmorph), ::view-transition-new(vmorph) { animation: none; height: 100%; object-fit: cover; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* toast */
.toast { position: fixed; left: 50%; bottom: 2.4rem; translate: -50% 12px; z-index: 400;
  background: var(--paper-3); border: 1px solid var(--rule); border-radius: 999px;
  padding: .5rem 1.1rem; font: 400 .74rem var(--mono); color: var(--ink);
  opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s; }
.toast.is-live { opacity: 1; translate: -50% 0; }
.theater__info { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px;
  padding: 1rem 1.5rem 1.1rem; width: 100%; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2.2rem; align-content: start;
  height: fit-content; }
/* tighter vertical rhythm in the theater card — everything fits one screen */
.theater__info .mi__title { margin: .2rem 0 .5rem; }
.theater__info .mi__awards { margin-bottom: .55rem; gap: .25rem; }
.theater__info .mi__award { padding: .25rem .6rem; }
.theater__info .mi__author { padding: .45rem 0; margin-bottom: .5rem; }
.theater__info .mi__srcseg { margin-top: .55rem; }
.theater__info .mi__tags { margin-top: 0; }
.theater__info .mi__sum { margin-top: .6rem; }
/* the story reads like a synopsis, not a footnote */
.mi__sum--story { font-size: .98rem; line-height: 1.6; color: color-mix(in oklab, var(--ink) 88%, var(--muted));
  margin: 0 0 .8rem; }
.theater__info .mi__sum--story { margin-top: 0; }
.theater__info .mi__tags { margin-bottom: .6rem; }

/* O.V.A. credits (premiere card) */
.mi__credits { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .7rem; }
.mi__credit { display: flex; align-items: baseline; gap: .6rem; font-size: .82rem; }
.mi__credit i { font: 400 .64rem var(--mono); font-style: normal; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; min-width: 11.5ch; }
.mi__credit a, .mi__credit b { color: var(--ink); text-decoration: none; font-weight: 500; }
.mi__credit a:hover { color: var(--accent); }
.mi__credit .mi__credit-x { font: 400 .7rem var(--mono); color: var(--muted); }
.mi__credit .mi__credit-x:hover { color: var(--accent); }

/* slim copyright line inside the no-scroll theater (the global footer
 * doesn't render there) */
.theater__foot { flex: none; text-align: center; font: 400 .62rem var(--mono);
  color: var(--muted); padding: .3rem 1rem .55rem; }
.theater__foot a { color: var(--muted); text-decoration: underline dotted; }
.theater__foot a:hover { color: var(--accent); }
.theater--immersive .theater__foot { display: none; }
.mi__col { min-width: 0; }
.mi__col--meta { border-left: 1px solid var(--rule); padding-left: 2.2rem;
  display: flex; flex-direction: column; }
.mi__collabel { font: 400 .64rem var(--mono); color: var(--muted); text-transform: uppercase;
  letter-spacing: .12em; margin-bottom: .7rem; }
@media (max-width: 900px) {
  .theater__info { grid-template-columns: 1fr; }
  .mi__col--meta { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule);
    padding-top: 1.2rem; margin-top: 1.2rem; }
}

/* X-ray: fighters detected in this video (video-level tags — see README;
 * per-timestamp pause references need a timestamped VLM pass) */
.xray__label { font: 400 .64rem var(--mono); color: var(--muted); text-transform: uppercase;
  letter-spacing: .12em; margin-bottom: .6rem; }
.xray__strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .6rem; }
.xcard { display: flex; gap: .6rem; align-items: center; text-decoration: none; color: inherit;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 10px;
  padding: .5rem .7rem .5rem .5rem; transition: border-color .15s; }
.xcard:hover { border-color: var(--c-fighter); }
.xcard img { width: 46px; height: 60px; object-fit: cover; object-position: top; border-radius: 6px; }
.xcard__body { display: flex; flex-direction: column; min-width: 0; }
.xcard__body b { font: 600 .82rem var(--display); letter-spacing: .02em; }
.xcard__body i { font: 400 .62rem var(--mono); font-style: normal; color: var(--c-fighter); }
.xcard__body em { font-size: .64rem; color: var(--muted); font-style: italic; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* immersive mode: pure video, chrome only on mousemove */
.theater--immersive .theater__detail, .theater--immersive .theater__bar { display: none; }
/* immersive: detail+bar are display:none, so the flexing stage IS the screen */
.th__exit { display: none; position: absolute; top: 1rem; right: clamp(1rem, 3vw, 2.5rem);
  z-index: 6; font: 400 .72rem var(--mono); color: var(--ink); background: rgb(0 0 0 / .55);
  border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; padding: .35rem .9rem;
  opacity: 0; transition: opacity .35s; }
.theater--immersive .th__exit { display: block; }
.theater--immersive .theater__stage.is-active .th__exit { opacity: 1; }
.th__exit:hover { border-color: var(--accent); color: var(--accent); }

/* "tap for sound" chip — the autoplay policy forces a muted start; make the
 * player's real state visible instead of contradicting the 🔊 icon */
.th__unmute { position: absolute; left: 50%; translate: -50% 0; bottom: clamp(1rem, 4vh, 2rem);
  z-index: 6; font: 500 .78rem var(--mono); color: var(--accent-ink); background: var(--accent);
  padding: .45rem 1rem; border-radius: 999px; box-shadow: 0 6px 24px rgb(0 0 0 / .5);
  animation: xrayIn .3s ease-out; }
.th__unmute:hover { filter: brightness(1.08); }

/* pause X-ray panel — slides over the stage's left letterbox (prime style);
 * z-index 5 keeps the nav arrows (6) reachable above it */
.th__xray { position: absolute; left: 0; top: 0; bottom: 0; z-index: 5;
  width: min(460px, 46%);
  /* content starts to the RIGHT of the prev arrow's lane so they never overlap */
  padding: clamp(1.2rem, 4vh, 2.5rem) clamp(1.2rem, 3vw, 2.5rem);
  padding-left: calc(clamp(1rem, 3vw, 2.5rem) + 4rem);
  display: flex; flex-direction: column; gap: .7rem; justify-content: flex-start;
  background: linear-gradient(90deg, rgb(0 0 0 / .88) 55%, transparent);
  overflow: hidden auto; animation: xrayIn .25s ease-out; }
@keyframes xrayIn { from { opacity: 0; translate: -14px 0; } }
.thx__label { font: 400 .62rem var(--mono); text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); }
.thx__name { font: 600 1.15rem var(--display); letter-spacing: .02em; }
.thx__meta, .thx__tags { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.thx__cards { display: flex; flex-direction: column; gap: .45rem; margin-top: .3rem; }
.xcard--sm { background: rgb(255 255 255 / .04); }
.xcard--sm img { width: 38px; height: 48px; }
.xcard--sm .xcard__body b { font-size: .76rem; }
.xcard--sm .xcard__body em { display: none; }

/* footer */
.foot__legal { font: 400 .68rem var(--mono); color: var(--muted); }
.foot__legal a { color: var(--muted); text-decoration: underline dotted; }
.foot__legal a:hover { color: var(--accent); }
.foot { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.5rem 2.6rem;
  border-top: 1px solid var(--rule); margin-top: 2rem; }
.foot__brand img { height: 22px; width: auto; display: block; opacity: .8; transition: opacity .15s; }
.foot__brand:hover img { opacity: 1; }
.foot__x { color: var(--muted); font: 400 .8rem var(--mono); }
.foot__note { margin-left: auto; font: 400 .68rem var(--mono); color: var(--muted); text-align: right; }
.foot__note a { color: var(--muted); text-decoration: underline dotted; }
.foot__note a:hover { color: var(--accent); }

/* feed context strip (named award/tag feeds) */
.feedctx { display: flex; align-items: center; gap: .8rem; padding: .7rem 1.25rem;
  border-bottom: 1px solid var(--rule); background: color-mix(in oklab, var(--c-award) 7%, var(--paper)); }
.feedctx__name { font: 600 1rem var(--display); letter-spacing: .02em; }
.feedctx__sub { font: 400 .7rem var(--mono); color: var(--muted); }
.feedctx__count { font: 400 .7rem var(--mono); color: var(--accent); }
.feedctx__clear { margin-left: auto; font: 400 .72rem var(--mono); color: var(--muted);
  text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .7rem; }
.feedctx__clear:hover { color: var(--ink); border-color: var(--muted); }

/* info-card link discipline: nothing gets UA blue/underline; pills carry the color */
.theater__info a { text-decoration: none; }
.mi__season { display: flex; align-items: center; gap: .5rem; }
.mi__season > span { font: 400 .68rem var(--mono); color: var(--muted); text-transform: uppercase;
  letter-spacing: .1em; }
a.mi__award { color: inherit; text-decoration: none; transition: border-color .15s; }
a.mi__award:hover { border-color: var(--accent); }
.mi__row--src { align-items: center; }
.epill--srcyt  { --pc: oklch(66% 0.19 25); }    /* youtube red */
.epill--srcx   { --pc: oklch(86% 0.005 265); }  /* x near-white */
.epill--srcfile { --pc: var(--c-fighter); }     /* first-party accent */
.epill--dead { --pc: oklch(55% 0.02 265); font-style: italic; }
.th__medal { text-decoration: none; margin-left: .15rem; }

/* sortable leaderboard headers */
.board th.sortable { cursor: pointer; user-select: none; }
.board th.sortable:hover { color: var(--ink); }

/* ---------- entity system (heavyweapon3 dashboard conventions) ---------- */
:root {
  --c-fighter: oklch(88% 0.170 100);   /* accent yellow */
  --c-creator: oklch(78% 0.130 240);   /* blue */
  --c-award:   oklch(80% 0.140 70);    /* gold-orange */
  --c-style:   oklch(80% 0.130 150);   /* green */
  --c-tag:     oklch(74% 0.015 265);   /* muted */
  --c-season:  oklch(78% 0.130 300);   /* violet */
  --c-video:   oklch(78% 0.130 350);   /* pink */
}
.epill { display: inline-flex; align-items: center; gap: .3ch; padding: .05rem .5rem;
  border-radius: 999px; font: 400 .68rem var(--mono); text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--pc, var(--rule)) 55%, transparent);
  color: var(--pc, var(--muted)); background: color-mix(in oklab, var(--pc, var(--rule)) 10%, transparent);
  transition: background .15s; white-space: nowrap; }
.epill:hover { background: color-mix(in oklab, var(--pc, var(--rule)) 24%, transparent); }
.epill--fighter { --pc: var(--c-fighter); }
.epill--creator { --pc: var(--c-creator); }
.epill--award   { --pc: var(--c-award); }
.epill--style   { --pc: var(--c-style); }
.epill--tag     { --pc: var(--c-tag); }
.epill--season  { --pc: var(--c-season); }
.epill--video   { --pc: var(--c-video); }
.epill--plain { border: 0; background: none; padding: 0; font: 600 1rem var(--display); }
.chip--fighter.is-on { background: var(--c-fighter); border-color: var(--c-fighter); color: var(--accent-ink); }
.chip--style.is-on { background: var(--c-style); border-color: var(--c-style); color: var(--accent-ink); }
.chip--nsfw.is-on { background: oklch(60% 0.19 25); border-color: oklch(60% 0.19 25); color: #fff; }
.chip--search { font-family: var(--mono); font-size: .72rem; }
.gctl { display: flex; gap: .3rem; margin-left: .4rem; }
.ictl { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--rule); color: var(--muted); font-size: .85rem; transition: all .15s; }
.ictl:hover { border-color: var(--muted); color: var(--ink); }
.ictl.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ictl--k { font: 400 .62rem var(--mono); }
.dot-new { position: absolute; left: .55rem; bottom: .55rem; z-index: 3; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.veil-awards { color: var(--accent); font: 600 .72rem var(--display); display: block; }
.th__name { font: 600 .8rem var(--display); color: var(--ink); letter-spacing: .02em; }
.mi__namenote { font: 400 .64rem var(--mono); color: var(--muted); margin: -.4rem 0 .6rem;
  cursor: default; width: fit-content; }

/* tooltip */
.etip { position: fixed; z-index: 300; max-width: 320px; display: flex; gap: .6rem;
  background: var(--paper-3); border: 1px solid var(--rule); border-radius: 10px;
  padding: .6rem .7rem; box-shadow: 0 10px 34px rgb(0 0 0 / .5); pointer-events: auto;
  animation: tipIn .12s var(--ease, ease-out); }
@keyframes tipIn { from { opacity: 0; translate: 0 3px; } }
.etip__img { width: 58px; height: 58px; object-fit: cover; object-position: top; border-radius: 8px; flex: none; }
.etip__imglink { flex: none; display: block; }
.etip a.etip__name { color: inherit; text-decoration: none; }
.etip a.etip__name:hover b { color: var(--accent); }
.etip__plain { font: 400 .64rem var(--mono); color: var(--muted); align-self: center; }
.etip__head { display: flex; align-items: baseline; gap: .5rem; }
.etip__head b { font: 600 .85rem var(--display); letter-spacing: .02em; }
.etip__type { font: 400 .6rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.etip__type--fighter { color: var(--c-fighter); } .etip__type--creator { color: var(--c-creator); }
.etip__type--award { color: var(--c-award); }     .etip__type--style { color: var(--c-style); }
.etip__type--tag { color: var(--c-tag); }         .etip__type--season { color: var(--c-season); }
.etip__type--video { color: var(--c-video); }
.etip__sub { font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.etip__stats { font: 400 .64rem var(--mono); color: var(--muted); margin-top: .3rem; }
.etip__stats--pills { display: flex; flex-wrap: wrap; gap: .3rem; }
.feedctx__pills { display: inline-flex; flex-wrap: wrap; gap: .3rem; }

/* ⌘K palette */
.pal { position: fixed; inset: 0; z-index: 400; }
.pal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .6); backdrop-filter: blur(4px); }
.pal__box { position: relative; width: min(620px, calc(100vw - 2rem)); margin: 10vh auto 0;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px rgb(0 0 0 / .6); }
.pal__input { width: 100%; box-sizing: border-box; padding: .9rem 1.1rem; background: none; border: 0;
  border-bottom: 1px solid var(--rule); color: var(--ink); font: 400 1rem var(--body); outline: none; }
.pal__list { max-height: 46vh; overflow-y: auto; padding: .4rem; }
.pal__group { font: 400 .62rem var(--mono); color: var(--muted); text-transform: uppercase;
  letter-spacing: .1em; padding: .5rem .6rem .2rem; }
.pal__item { display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem;
  border-radius: 8px; cursor: pointer; }
.pal__item.is-sel { background: var(--paper-3); }
.pal__item img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; object-position: top; }
.pal__glyph { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px;
  background: var(--paper-3); font-size: .85rem; }
.pal__sub { font-size: .7rem; color: var(--muted); overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; }
.pal__hint { font: 400 .62rem var(--mono); color: var(--muted); padding: .5rem .9rem;
  border-top: 1px solid var(--rule); }

/* banners (creator / fighter views) */
.banner { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.3rem var(--pad, 1.25rem);
  border-bottom: 1px solid var(--rule); background: var(--paper-2); position: relative; }
.bhome { position: absolute; top: .6rem; right: 1rem; font: 400 .7rem var(--mono);
  color: var(--muted); text-decoration: none; }
.bhome:hover { color: var(--accent); }
.bavatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; }
.bavatar--sq { border-radius: 12px; }
.bavatar--txt { display: grid; place-items: center; background: var(--paper-3);
  font: 600 1.6rem var(--display); color: var(--accent); }
.bmain h2 { margin: 0 0 .2rem; font: 600 1.3rem var(--display); letter-spacing: .02em; }
.bmain .ext { font: 400 .7rem var(--mono); color: var(--accent); text-decoration: none; margin-left: .4rem; }
.bmain .gone { font: 400 .7rem var(--mono); color: var(--muted); }
.bsub { font-size: .8rem; color: var(--muted); max-width: 70ch; }
.blore { margin-top: .4rem; font-size: .74rem; }
.bstats { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; font: 400 .72rem var(--mono);
  color: var(--muted); }
.bstats .prize { color: var(--accent); }
.bstats .medals { font-size: .95rem; letter-spacing: .1em; }
.bstats a { color: var(--ink); text-decoration: none; }

/* wiki */
.wiki { max-width: 1080px; margin: 0 auto; padding: 2rem 1.25rem 6rem; }
.wiki h2 { font: 600 1.6rem var(--display); text-transform: uppercase; margin: 0 0 .4rem; }
.wiki h3 { font: 600 1rem var(--display); text-transform: uppercase; letter-spacing: .05em;
  margin: 2rem 0 .8rem; color: var(--muted); }
.wiki__src { font-size: .8rem; color: var(--muted); }
.wiki__src a { color: var(--accent); }
.wiki__fighters { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.fcard { display: flex; gap: .9rem; background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 12px; padding: .9rem; }
.fcard > a { flex: none; }
.fcard img { width: 92px; height: 122px; object-fit: cover; object-position: top; border-radius: 8px; }
.fcard h4 { margin: 0 0 .2rem; display: flex; align-items: baseline; gap: .4rem; }
.fcard .ext { font: 400 .7rem var(--mono); color: var(--muted); text-decoration: none; }
.fcard__tag { font-size: .74rem; color: var(--accent); margin-bottom: .3rem; }
.fcard__attrs { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font: 400 .64rem var(--mono); color: var(--muted); }
.fcard__attrs i { font-style: normal; opacity: .6; }
.fcard__traits { font: 400 .64rem var(--mono); color: var(--muted); margin-top: .25rem; }
.fcard__lore { font-size: .72rem; color: var(--muted); line-height: 1.5; margin: .4rem 0; }
.fcard__vids { font: 400 .68rem var(--mono); color: var(--accent); text-decoration: none; }
.wiki__cloud { display: flex; flex-wrap: wrap; gap: .35rem; }

/* nsfw */
.poster.is-nsfw { filter: blur(26px) saturate(.7); scale: 1.15; }
.nsfw-badge { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content;
  z-index: 3; font: 600 .8rem var(--display); letter-spacing: .1em; color: #fff;
  background: oklch(45% 0.17 25 / .9); border-radius: 999px; padding: .3rem .8rem; }
.nsfw-badge--modal { inset: auto .8rem .8rem auto; }
.nsfw-flag { color: oklch(70% 0.19 25); }

/* modal player: fixed aspect + side nav */
.modal__player { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.modal__player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: unset; }
.modal__nav { position: relative; z-index: 5; font: 600 2.2rem var(--display); color: var(--muted);
  width: 3rem; height: 3rem; border-radius: 50%; background: var(--scrim); border: 1px solid var(--rule);
  margin: 0 .8rem; transition: color .15s, border-color .15s; }
.modal__nav:hover { color: var(--accent); border-color: var(--accent); }
.modal { grid-template-columns: auto minmax(0, auto) auto; place-content: center;
  align-items: center; gap: 0; }
.card__handle { text-decoration: none; }
.card__prize span { pointer-events: auto; }
.mi__author { text-decoration: none; color: inherit; }
.mi__author:hover b { color: var(--accent); }
img.mi__avatar { object-fit: cover; object-position: top; }
.mi__transcript { font-style: italic; }
.veil-pills { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.board .who a { text-decoration: none; }
.board .who .ext { font-size: .66rem; color: var(--muted); text-decoration: none; margin-left: .3rem; }
.board .seasons-cell a { color: inherit; text-decoration: none; }
.board .seasons-cell a:hover { color: var(--accent); }
.board .medals a, .bstats .medals a { text-decoration: none; cursor: pointer; }
.seasons a .seasons__n, .seasons__soon .seasons__n { font: 400 .66rem var(--mono); opacity: .6;
  margin-left: .35rem; vertical-align: .06em; }
.seasons__soon { font: 600 .85rem var(--display); letter-spacing: .04em; padding: .35rem .8rem;
  border-radius: 999px; color: color-mix(in oklab, var(--muted) 55%, transparent);
  text-transform: uppercase; cursor: not-allowed; }
.seasons a { font: 600 .85rem var(--display); letter-spacing: .04em; padding: .35rem .8rem;
  border-radius: 999px; color: var(--muted); text-transform: uppercase; text-decoration: none; }
.seasons a:hover { color: var(--ink); }
.seasons a.is-active { background: var(--accent); color: var(--accent-ink); }

/* ---------- misc ---------- */
.status { position: fixed; bottom: .8rem; left: 50%; translate: -50% 0; z-index: 50;
  font: 400 .68rem var(--mono); color: var(--muted); background: var(--scrim);
  padding: .25rem .8rem; border-radius: 999px; border: 1px solid var(--rule); }
#sentinel { height: 1px; }
[hidden] { display: none !important; }