/* =====================================================================
   Splash hero (design language v2 for the race site), sketch A: the
   overlay's language (tokens.css, ribbons, slanted pills, jade + gold)
   grown into a poster. The leader's current boss is the backdrop with
   nothing drawn on it, the question is the title, the board is a column
   of overlay ribbons with a raid-frame bar per guild, and a jade ticker
   (from sketch C) carries the latest kills. Guild colour = --guild/--acc.
   Gold = the leader, the first kill and the winner; jade = the race brand, raiding and the CE
   marker; --live-red = on air (LIVE block, Nu live).
   ===================================================================== */

.sp {
  position: relative; overflow: hidden; border-bottom: 1px solid var(--ink-700);
  background:
    radial-gradient(60% 70% at 74% 42%, rgba(63, 217, 164, .22), transparent 70%),
    radial-gradient(50% 60% at 96% 8%, rgba(150, 90, 255, .32), transparent 70%),
    linear-gradient(160deg, #1b1030 0%, #0d1a1c 55%, var(--ink-900) 100%);
}
.sp::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 260px; pointer-events: none;
  background: linear-gradient(transparent, var(--ink-900) 92%);
}

/* A new hero boss (app.js motion, View Transition): only the art moves, the page stays put.
   The old render fades and blurs out, the new one rises in. */
.sp__art { view-transition-name: hero-art; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(hero-art) { animation: 280ms cubic-bezier(.4, 0, 1, 1) both hero-out; }
::view-transition-new(hero-art) { animation: 720ms cubic-bezier(.16, 1, .3, 1) both hero-in; }
@keyframes hero-out { to { opacity: 0; filter: blur(6px); } }
@keyframes hero-in { from { opacity: 0; transform: translateY(24px); } }

/* ---- top --------------------------------------------------------------- */
.sp__top {
  /* 4, one above .views (3): the Streamers panel hangs from here over the nav on phones. */
  position: relative; z-index: 4; max-width: 1320px; margin: 0 auto; padding: 26px 24px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* The broadcast bug from sketch C: flush blocks, no gaps. LIVE in broadcast red (only while a
   guild is really raiding), the name on ink, the race day in jade. */
.bug { display: flex; align-items: stretch; height: 40px; min-width: 0; }
.bug > span { display: flex; align-items: center; font-weight: 800; white-space: nowrap; }
.bug__live { gap: 8px; padding: 0 18px; background: var(--live-red); color: var(--paper); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.bug__live .live-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .27); box-shadow: 0 0 0 2px var(--paper); animation: live-pulse 1.6s var(--ease) infinite; }
.bug__title { padding: 0 22px; background: var(--ink-900); color: var(--paper); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.bug__day { padding: 0 18px; background: var(--jade); color: var(--ink-900); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.sp__end { display: flex; align-items: center; gap: 14px; }
.sp__upd { font-size: 13px; color: var(--ink-200); white-space: nowrap; }

/* ---- views ------------------------------------------------------------------
   Race | Guilds | Hall of fame under the bug: the bug's caps on the hero ground, the open view
   in paper with a 3px jade foot (the Hall of fame tab's jade edge, turned down). Only the open
   view's parts show (body[data-view], app.js showView()). */
.views {
  position: relative; z-index: 3; max-width: 1320px; margin: 0 auto; padding: 18px 24px 0;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.views a {
  flex: 0 0 auto; display: flex; align-items: center; height: 40px; padding: 0 16px;
  font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-200); text-decoration: none; background: rgba(10, 11, 13, .55);
  box-shadow: inset 0 -3px 0 transparent;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.views a:hover { color: var(--paper); background: var(--ink-900); }
.views a[aria-current="page"] { color: var(--paper); background: var(--ink-900); box-shadow: inset 0 -3px 0 var(--jade); }
.views a:focus-visible { outline-offset: -2px; }
body[data-view="guilds"] .v-race, body[data-view="guilds"] .v-hof,
body[data-view="hof"] .v-race, body[data-view="hof"] .v-guilds,
body[data-view="race"] .v-guilds, body[data-view="race"] .v-hof { display: none !important; }
/* Off the race view the header is only the bars: a short band of the hero ground. With no boss
   art to trim, it clips only sideways, so the Streamers panel can hang below the band over
   the page instead of being cut off at its edge. */
body:not([data-view="race"]) .sp { padding-bottom: 24px; overflow-x: clip; overflow-y: visible; }
body:not([data-view="race"]) .sp::after { height: 60px; }

/* ---- stage ----------------------------------------------------------------- */
.sp__stage { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 44px 24px 48px; }
/* The boss: self-hosted cut-outs with real alpha, so the jade/void glow reads behind the
   bodies. Only the feet fade out (a long serpent would otherwise end in a hard cut). */
/* The art owns everything right of the board column (820px + a 40px gutter), at the stage's
   full height, so it is the poster without anything on it. Below 1180px that column gets too
   narrow and the boss becomes a band above the title instead (see the media queries). */
.sp__art {
  position: absolute; z-index: -1; top: -20px; bottom: 0; left: calc(24px + 820px + 40px); right: 0;
  display: flex; justify-content: center; align-items: center;
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
  mask-image: linear-gradient(#000 78%, transparent);
}
/* The PNGs are trimmed to the body, so height drives the size and contain keeps wide bosses in. */
.sp__art img { height: 100%; width: auto; max-width: 100%; max-height: calc(var(--nat-h, 9999px) * 2); object-fit: contain; }
.sp__art--pair { gap: 6%; }
/* A render cut off at the top (app.js tidyBossArt) fades in instead of ending in a hard edge. */
.sp__art img.is-cut-top, .hof-stage__art img.is-cut-top { -webkit-mask-image: linear-gradient(transparent, #000 16%); mask-image: linear-gradient(transparent, #000 16%); }
.sp__art--pair img { max-width: 47%; }
/* A lone wide boss (wings, a long body sideways) would shrink in the board-side column, so it
   takes the open field right of the title instead, above the board, up to the page edge. */
@media (min-width: 1181px) {
  .sp__art--wide { left: calc(50% + 40px); right: -60px; bottom: auto; height: 62%; -webkit-mask-image: none; mask-image: none; }
}
.sp__title {
  max-width: 12ch; font-size: clamp(40px, 5.4vw, 74px); font-weight: 800; line-height: .92;
  letter-spacing: -.03em; text-transform: uppercase; color: var(--paper); text-wrap: balance;
}
.sp__title em { font-style: normal; color: var(--jade); }
.sp__lead { margin-top: 18px; max-width: 44ch; font-size: 18px; line-height: 1.5; color: var(--paper-dim); }
.sp__tier { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sp__tier .pill { background: rgba(10, 11, 13, .72); }

/* ---- the board ------------------------------------------------------------------ */
.sp__board { margin-top: 40px; max-width: 820px; }
.board { list-style: none; display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 340px 96px minmax(0, 1fr); align-items: center; gap: 20px; }
.row .rib__bar { --rib-h: 46px; }
.row .rib__acc { font-size: 20px; font-weight: 800; }
.row .rib__val { font-size: 18px; color: var(--paper); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.row a.rib__val:hover { color: var(--jade); }
/* The ribbon's name, with the world rank under it (mono, ink-300) when Raider.IO has one. */
.rib__txt { display: grid; min-width: 0; padding-left: 13px; line-height: 1.15; }
.rib__txt .rib__val { padding-left: 0; }
/* One line high: a part that doesn't fit wraps to a hidden second line, so a number is never cut. */
.rib__wr { display: flex; flex-wrap: wrap; height: 1.25em; overflow: hidden; font-size: 12px; line-height: 1.25; color: var(--ink-300); font-variant-numeric: tabular-nums; }
.rib__wr > span { white-space: nowrap; }
.rib__wr > span + span::before { content: "·"; margin: 0 .4em; color: var(--ink-400); }
.row--lead .rib__bar { background: var(--gold); }
.row__live { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-300); white-space: nowrap; }
.row__live.is-live { color: var(--jade); }
.row__live .live-dot { width: 7px; height: 7px; flex-basis: 7px; background: var(--jade); }
.row__kills { font-size: 32px; font-weight: 700; color: var(--paper); }
.row__kills small { font-size: 16px; color: var(--ink-300); }
.row--lead .row__kills { color: var(--gold); }
.row__fight { display: grid; gap: 8px; min-width: 0; }
/* The label wraps instead of cutting a number off; the badge drops under it when it has to. */
.row__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.row__top .row__live { margin-left: 0; flex: 0 0 auto; }
.row__label { font-size: 15px; line-height: 1.35; color: var(--paper-dim); }
/* The race track: a slanted segment per boss, filled in the guild colour from the race position
   (--p, registered in app.js so it animates) minus the segment's index (--i). The last segment's
   empty track is tinted jade: the finish, the CE boss. */
.row__hp { display: flex; gap: 3px; height: 14px; }
.row__hp i {
  flex: 1 1 0; min-width: 0;
  background: linear-gradient(90deg, var(--guild, var(--jade)) calc((var(--p, 0) - var(--i, 0)) * 100%), var(--seg-track, rgba(255, 255, 255, .09)) 0);
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.row__hp i:last-child { --seg-track: rgba(63, 217, 164, .2); }

/* ---- season switch ---------------------------------------------------------------------
   The same flush blocks as NL | EN (.lang-switch), next to it: Season 2 | Season 1, short ids
   (S2 | S1) on phones. Shown only when race.json lists an archived season. */
.season-switch__short { display: none; }
@media (max-width: 600px) {
  .season-switch__long { display: none; }
  .season-switch__short { display: inline; }
}
@media (max-width: 480px) { .sp__end { flex-wrap: wrap; row-gap: 8px; } .sp__upd { flex: 1 1 100%; } }

/* ---- streamers (live.js) ----------------------------------------------------------------
   A button in the bug's flush blocks: a broadcast-red "● n live" block in front while someone is
   live (fresh check only), then STREAMERS on ink. It opens a flat panel under the bar: per guild
   in race order its channels, each a link to Twitch with its status. */
.streamers { position: relative; flex: 0 0 auto; }
.streamers__btn { display: flex; align-items: stretch; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.streamers__btn > span { display: flex; align-items: center; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.streamers__label { padding: 0 14px; background: var(--ink-900); color: var(--paper); transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.streamers__btn:hover .streamers__label { color: var(--jade); }
.streamers__btn[aria-expanded="true"] .streamers__label { background: var(--jade); color: var(--ink-900); }
.streamers__live { gap: 8px; padding: 0 14px; background: var(--live-red); color: var(--paper); }
.streamers__live .live-dot, .streamers__tag .live-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .27); box-shadow: 0 0 0 2px var(--paper); }
.streamers__btn:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; }

.streamers__panel {
  position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 560px); overflow-y: auto; padding: 16px 18px 14px;
  background: var(--ink-850); border: 1px solid var(--ink-700);
}
.streamers__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.streamers__h { font-size: 16px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); }
.streamers__h:focus { outline: none; }
.streamers__close { display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px -6px 0; padding: 0; border: 0; background: none; color: var(--ink-300); cursor: pointer; }
.streamers__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.streamers__close:hover { color: var(--paper); }
.streamers__head { margin-bottom: 8px; }
.streamers__grp { padding: 10px 0; border-top: 1px solid var(--ink-700); }
.streamers__guild { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-dim); }
.streamers__guild i { width: 12px; height: 12px; flex: 0 0 12px; background: var(--guild); clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.streamers__grp ul { list-style: none; display: grid; gap: 2px; }
.streamers__row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: 4px 12px; padding: 4px 0; }
.streamers__ch { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; font-weight: 600; color: var(--paper); text-decoration: none; }
.streamers__ch svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--ink-300); }
.streamers__ch:hover { color: var(--jade); }
.streamers__ch:hover svg { color: var(--jade); }
.streamers__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.streamers__st { justify-self: end; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 8px; min-width: 0; font-size: 12px; color: var(--ink-300); text-align: right; }
.streamers__tag { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; background: var(--live-red); color: var(--paper); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.streamers__meta { grid-column: 1 / -1; margin-top: -2px; font-size: 12px; color: var(--paper-dim); }
.streamers__foot { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--ink-700); font-size: 12px; color: var(--ink-300); }
.streamers__stale { color: var(--rose); }
@media (max-width: 900px) {
  .streamers__btn { height: 34px; }
  .streamers__btn > span { font-size: 12px; }
  .streamers__label, .streamers__live { padding: 0 12px; }
}
/* Phones: the panel spans the bar, under it. */
@media (max-width: 600px) {
  .streamers { position: static; }
  .streamers__panel { left: 16px; right: 16px; width: auto; top: calc(100% + 8px); }
}

/* ---- on air (live.js) ----------------------------------------------------------------
   Only while a listed channel is live: the stream joins the hero. On a wide screen it sits at
   the foot of the boss column, where the art already fades out, level with the board; below
   1281px it follows the tier pills. Broadcast red = on air (raiding itself stays jade). The
   player is a click-to-load facade with the card notch; channels are ribbons. */
.onair { display: grid; gap: 10px; margin-top: 28px; max-width: 520px; }
/* Over the boss it gets the pills' ink backing (ink-900 at 86%), so text never sits on the art. */
@media (min-width: 1281px) {
  .onair {
    position: absolute; z-index: 3; margin: 0; bottom: 56px; right: 24px; padding: 12px 12px 14px;
    width: min(464px, calc(100% - 24px - 820px - 40px - 24px)); background: rgba(10, 11, 13, .86);
  }
}
.onair__head { display: flex; align-items: stretch; height: 28px; }
.onair__tag, .onair__h {
  display: flex; align-items: center; gap: 7px; padding: 0 11px;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.onair__tag { background: var(--live-red); color: var(--paper); }
.onair__tag .live-dot { width: 7px; height: 7px; flex-basis: 7px; background: rgba(255, 255, 255, .27); box-shadow: 0 0 0 2px var(--paper); }
.onair__h { background: var(--ink-900); color: var(--paper); }
.onair__count { margin-left: auto; align-self: center; font-family: var(--f-mono); font-size: 12px; color: var(--ink-300); }

.onair__player {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-850);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.onair__play {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0;
  background: transparent; color: var(--paper); font: inherit; cursor: pointer;
}
.onair__play::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(transparent 40%, rgba(10, 11, 13, .88));
}
.onair__play:focus-visible { outline: 2px solid var(--jade); outline-offset: -5px; }
.onair__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.78); }
.onair__btn {
  position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 48px;
  background: var(--live-red); clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  transition: transform var(--t-fast) var(--ease);
}
.onair__btn svg { width: 24px; height: 24px; margin-left: -4px; }
.onair__play:hover .onair__btn { transform: scale(1.06); }
.onair__hint { position: absolute; z-index: 1; left: 14px; right: 30px; bottom: 11px; display: grid; gap: 1px; text-align: left; }
.onair__hint b { font-size: 15px; font-weight: 700; color: var(--paper); }
.onair__hint span { font-size: 12px; color: var(--paper-dim); }
.onair__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.onair__meta { display: grid; gap: 3px; min-width: 0; }
.onair__title { font-size: 14px; color: var(--paper-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onair__sub { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.onair__since { font-family: var(--f-mono); font-size: 12px; color: var(--ink-300); min-width: 0; }
.onair__out { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--jade); }
.onair__out svg { width: 14px; height: 14px; }

.onair__list { display: grid; gap: 6px; }
.onair__rib {
  --rib-h: 38px; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: var(--paper); text-align: left; cursor: pointer;
}
.onair__rib .rib__acc svg { width: 16px; height: 16px; }
.onair__rib .rib__val { font-size: 15px; }
.onair__guild { margin-left: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acc, var(--ink-300)); }
.onair__viewers { margin-left: auto; padding-left: 12px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-300); }
.onair__rib:hover .rib__bar { background: var(--ink-500); }
.onair__rib[aria-pressed="true"] .rib__bar { background: var(--live-red); }
.onair__rib:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; }
@media (max-width: 900px) { .onair { margin-top: 24px; } }

/* ---- ticker (from sketch C) ------------------------------------------------------------ */
.ticker {
  position: relative; z-index: 3; max-width: 1320px; margin: 0 auto 0; display: flex; align-items: stretch; height: 52px;
  background: var(--ink-900); border: 1px solid var(--ink-700); border-top: 2px solid var(--jade);
}
/* The ticker closes the hero from edge to edge, like the bug's flush blocks. */
.sp > .ticker { max-width: none; margin: 0; border-left: 0; border-right: 0; border-bottom: 0; }
.ticker__label {
  flex: 0 0 auto; display: flex; align-items: center; padding: 0 20px;
  background: var(--jade); color: var(--ink-900); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.ticker { overflow: hidden; }
.ticker__label { position: relative; z-index: 2; }
.ticker::after {
  content: ""; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 64px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ink-900));
}
/* A broadcast ticker: the list is rendered twice and the band slides by one list width. */
.ticker__list {
  list-style: none; display: flex; align-items: center; flex: none; width: max-content;
  animation: ticker-run 48s linear infinite;
}
.ticker:hover .ticker__list, .ticker:focus-within .ticker__list { animation-play-state: paused; }
@keyframes ticker-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__list { animation: none; flex: 1 1 auto; width: auto; overflow-x: auto; }
  .ticker__list .tk[aria-hidden="true"] { display: none; }
  /* The new-kill light is colour only, so it stays (style.css cuts every other animation). */
  .tk--new, .tk--new b { animation-duration: 3.2s !important; }
}
.tk { flex: 0 0 auto; padding: 0 26px; font-size: 15px; color: var(--paper-dim); white-space: nowrap; }
.tk b { color: var(--paper); font-weight: 700; }
.tk--empty { color: var(--ink-300); }
/* A kill that arrived while the page was open (app.js motion): the item lights up once and fades
   back; the guild in jade, or gold for the race's first kill. Colour only, so it stays under
   reduced motion too. */
.tk--new { animation: tk-new 3.2s ease-out 1; }
.tk--new b { animation: tk-new-b 3.2s ease-out 1; }
.tk--first b { animation-name: tk-first-b; }
@keyframes tk-new { from { background: var(--ink-750); color: var(--paper); } }
@keyframes tk-new-b { from { color: var(--jade); } }
@keyframes tk-first-b { from { color: var(--gold); } }

/* ---- responsive ------------------------------------------------------------------------------- */
/* Narrower than the board plus a real art column: the boss gets its own band above the title,
   at full strength (also the phone layout). */
@media (max-width: 1180px) {
  .sp__art { position: relative; z-index: 0; inset: auto; width: 100%; height: 360px; margin: -24px 0 8px; }
}
@media (max-width: 900px) { .sp__art { height: 300px; } }
@media (max-width: 900px) {
  .sp__top { padding: 16px 16px 0; flex-wrap: wrap; }
  .sp__upd { font-size: 12px; }
  .bug, .lang-switch { height: 34px; }
  .lang-switch button { padding: 0 12px; font-size: 12px; }
  .bug__live { padding: 0 12px; font-size: 12px; }
  .bug__title { padding: 0 14px; font-size: 12px; }
  .bug__day { padding: 0 12px; font-size: 12px; }
  .views { padding: 12px 16px 0; }
  .views a { height: 34px; padding: 0 12px; font-size: 12px; }
  .sp__stage { padding: 28px 16px 32px; }
  .sp__lead { font-size: 17px; }
  .sp__board { margin-top: 32px; }
  .row { grid-template-columns: minmax(0, 1fr) 52px; gap: 6px 10px; }
  .row .rib__in { padding-right: calc(var(--rib-cut, 11px) + 4px); }
  .row .rib__bar { --rib-h: 40px; }
  .row__kills { font-size: 24px; text-align: right; }
  .row__fight { grid-column: 1 / -1; margin-bottom: 8px; }
}
@media (max-width: 480px) {
  .sp__end { width: 100%; justify-content: space-between; align-items: flex-start; }
  .sp__upd { white-space: normal; min-width: 0; }
  .ticker__label { padding: 0 14px; font-size: 12px; }
}