/* Vibe Wars live show. Everything is sized in rem, and the root size follows
   the screen, so one layout fits a 1366x768 laptop, a 1080p TV and 4K. */

@font-face { font-family: 'Russo One'; src: url('../fonts/russo-one.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Chakra Petch'; font-weight: 500; src: url('../fonts/chakra-petch-500.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; src: url('../fonts/chakra-petch-700.woff2') format('woff2'); font-display: block; }

:root {
  --bg: #07060f;
  --panel: #0d0b1a;
  --panel-2: #141127;
  --line: rgba(255, 255, 255, .09);
  --text: #f5f3ff;
  --muted: #a5a0c8;
  --cyan: #22d3ee;
  --magenta: #ec4899;
  --lime: #84cc16;
  --orange: #f97316;
  --gold: #facc15;
  --red: #ef4444;
  --blue: #60a5fa;
  --display: 'Russo One', 'Segoe UI Black', Impact, sans-serif;
  --body: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html { font-size: min(calc(100vw / 120), calc(100vh / 67.5)); }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--body); }
body { cursor: none; -webkit-font-smoothing: antialiased; }
body.cursor { cursor: default; }
img { display: block; }
button, select, input { font: inherit; color: inherit; }

/* ------------------------------------------------------------ stage */

#stage { position: fixed; inset: 0; display: grid; grid-template-columns: 75% 25%; }
#map { position: relative; overflow: hidden; background: var(--bg); }
#board { position: absolute; inset: 0; width: 100%; height: 100%; }
#hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; }
#stage.live #hud { opacity: 1; }
#panel { position: relative; display: flex; flex-direction: column; min-width: 0; background: linear-gradient(180deg, #100d22, #0a0816); border-left: 1px solid var(--line); box-shadow: inset 1px 0 0 rgba(160, 120, 255, .25); }
#stage:not(.live) #panel > * { opacity: .25; transition: opacity .6s; }
#stage.live #panel > * { opacity: 1; transition: opacity .6s; }
#screens, #overlay { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
#overlay { z-index: 40; }
#screens .screen, #overlay .screen { pointer-events: auto; }

/* ------------------------------------------------------------ panel */

.ph { padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(236, 72, 153, .14), rgba(34, 211, 238, .06)); }
.ph-live { display: inline-flex; align-items: center; gap: .45rem; font: .8rem var(--display); letter-spacing: .14em; color: #fff; background: var(--red); padding: .2rem .6rem .2rem .5rem; border-radius: .3rem; }
.live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; animation: blink 1.1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.ph-title { margin-top: .55rem; font: 1.35rem var(--display); letter-spacing: .03em; text-transform: uppercase; }
.ph-sub { color: var(--muted); font-size: .95rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.sb { position: relative; flex: 0 0 46%; margin: .6rem .7rem .2rem; }
.sb-row {
  position: absolute; left: 0; right: 0; top: 0; height: 25%; padding: .25rem 0;
  display: grid; grid-template-columns: 1.6rem 4.4rem 1fr auto; align-items: center; gap: .55rem;
  transition: transform .7s var(--ease-out);
}
.sb-row::before { content: ''; position: absolute; inset: .2rem 0; border-radius: .6rem; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(255, 255, 255, .03) 60%); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); z-index: -1; transition: box-shadow .4s; }
.sb-row.leader::before { box-shadow: 0 0 1.2rem color-mix(in srgb, var(--gold) 45%, transparent); border-color: color-mix(in srgb, var(--gold) 70%, transparent); }
.sb-row.bump .sb-score b { animation: bump .5s var(--ease-back); }
@keyframes bump { 40% { transform: scale(1.35); color: var(--gold); } }
.sb-rank { font: 1.3rem var(--display); text-align: center; color: var(--muted); }
.sb-row.leader .sb-rank { color: var(--gold); }
.sb-por { width: 4.4rem; height: 4.4rem; border-radius: .7rem; overflow: hidden; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 45%, #1a1530), #0b0918); border: .18rem solid var(--c); box-shadow: 0 0 .9rem color-mix(in srgb, var(--c) 55%, transparent); }
.sb-por img { width: 100%; height: 100%; object-fit: cover; }
.sb-main { min-width: 0; }
.sb-name { font: 1.15rem var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-meta { display: flex; gap: .3rem; margin: .15rem 0 .25rem; }
.chip { display: inline-flex; align-items: center; gap: .2rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; padding: .05rem .4rem .05rem .2rem; border-radius: .3rem; background: rgba(255, 255, 255, .08); color: #e9e5ff; white-space: nowrap; }
.chip img { width: 1rem; height: 1rem; }
.sb-hp { position: relative; height: .45rem; border-radius: .3rem; background: rgba(0, 0, 0, .5); overflow: hidden; }
.sb-hp i, .sb-hp em { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.sb-hp i { background: var(--c); z-index: 1; transition: width .35s var(--ease-out); }
.sb-hp em { background: #fff; transition: width 1.1s .35s ease; }
.sb-row.low .sb-hp i { background: var(--red); animation: blink .6s infinite; }
.sb-stats { display: flex; gap: .55rem; margin-top: .2rem; font-size: .78rem; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; }
.sb-stats .cargo { color: #6ee7b7; }
.sb-stats .item { display: inline-flex; align-items: center; gap: .15rem; color: #fde68a; }
.sb-stats .item img { width: 1rem; height: 1rem; }
.sb-stats .state { color: var(--gold); }
.sb-row.dead { filter: saturate(.25) brightness(.7); }
.sb-row.dead .state { color: #fca5a5; }
.sb-row.carrier .sb-por { animation: carrier 1s infinite; }
@keyframes carrier { 50% { box-shadow: 0 0 1.6rem var(--gold); border-color: var(--gold); } }
.sb-score { text-align: right; padding-right: .6rem; }
.sb-score b { display: block; font: 2rem var(--display); line-height: 1; }
.sb-score small { font-size: .72rem; font-weight: 700; color: var(--muted); }

.kf, .cast { margin: .2rem .7rem; min-height: 0; }
.kf h3, .cast h3 { margin: .5rem 0 .3rem; font: .75rem var(--display); letter-spacing: .18em; color: var(--muted); text-transform: uppercase; display: flex; align-items: center; gap: .5rem; }
.kf h3::after, .cast h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.kf { flex: 0 0 auto; }
.kf ol, .cast ol { list-style: none; margin: 0; padding: 0; }
.kf-row { display: flex; align-items: center; gap: .35rem; padding: .25rem .5rem; margin-bottom: .2rem; border-radius: .35rem; background: rgba(0, 0, 0, .45); font-weight: 700; font-size: .85rem; animation: slideIn .45s var(--ease-back); white-space: nowrap; overflow: hidden; }
.kf-row:nth-child(n+4) { opacity: .55; }
.kn { color: var(--c); max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; }
.kn.env { color: var(--muted); }
.kn.victim { opacity: .9; }
.kw { display: inline-flex; width: 1.35rem; height: 1.35rem; color: #fff; }
.kw svg, .kw img { width: 100%; height: 100%; }
.kf-plus { color: var(--muted); }
.kt { display: inline-flex; gap: .2rem; margin-left: auto; }
.kt em { font-style: normal; font-size: .62rem; letter-spacing: .06em; padding: .05rem .3rem; border-radius: .25rem; background: var(--gold); color: #1c1305; }
@keyframes slideIn { from { transform: translateX(105%); opacity: 0; } }

.cast { flex: 1 1 auto; overflow: hidden; position: relative; mask-image: linear-gradient(180deg, #000 70%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); }
.cl { display: grid; grid-template-columns: 2.4rem 1fr; gap: .4rem; padding: .35rem .2rem; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: .92rem; line-height: 1.3; animation: castIn .5s var(--ease-out); }
@keyframes castIn { from { transform: translateY(-.8rem); opacity: 0; } }
.ct { font: .72rem var(--display); color: var(--muted); padding-top: .15rem; }
.cl.tone-kill .cx, .cl.tone-hype .cx { font-weight: 700; }
.cl.tone-hype { background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--gold)) 16%, transparent), transparent); }
.cl.tone-warn .cx { color: #fecaca; }
.cl.tone-core .cx { color: #fef3c7; }
.cl.tone-muted { opacity: .55; }
.tn { color: var(--c); font-weight: 700; }
.buy-full { color: var(--gold); font-weight: 700; }
.buy-eco { color: #93c5fd; font-weight: 700; }
.buy-light { color: #d1fae5; font-weight: 700; }

/* ------------------------------------------------------------ map HUD */

.hud-left { position: absolute; left: 1rem; top: 1rem; width: 12.5rem; display: flex; flex-direction: column; gap: .6rem; }
.clock { padding: .7rem .9rem .8rem; border-radius: .7rem; background: rgba(8, 6, 18, .78); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.clock-label { font: .7rem var(--display); letter-spacing: .25em; color: var(--muted); }
.clock-num { font-family: var(--display); line-height: 1; }
.clock-num b { font-size: 3rem; font-weight: 400; }
.clock-num span { font-size: 1.3rem; color: var(--muted); }
.clock-bar { height: .35rem; margin-top: .4rem; border-radius: .3rem; background: rgba(255, 255, 255, .1); overflow: hidden; }
.clock-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--magenta)); transition: width .6s var(--ease-out); }
.clock-phase { margin-top: .35rem; font: .8rem var(--display); letter-spacing: .08em; color: var(--gold); min-height: 1em; }
#hud.overtime .clock { border-color: var(--red); box-shadow: 0 0 1.4rem rgba(239, 68, 68, .55); animation: otPulse 1s infinite; }
#hud.overtime .clock-phase { color: #fca5a5; }
@keyframes otPulse { 50% { box-shadow: 0 0 .4rem rgba(239, 68, 68, .3); } }
.hud-cards { display: flex; flex-direction: column; gap: .45rem; }
.card { padding: .5rem .8rem; border-radius: .6rem; background: rgba(8, 6, 18, .8); border-left: .3rem solid var(--c, var(--gold)); animation: cardIn .5s var(--ease-back); backdrop-filter: blur(6px); }
.card b { display: block; font: 1rem var(--display); letter-spacing: .04em; }
.card span { font-size: .82rem; font-weight: 700; color: var(--muted); }
.card.core.hot b { color: var(--gold); }
.card.core.armed { animation: cardIn .5s var(--ease-back), armed .8s infinite; }
@keyframes armed { 50% { box-shadow: 0 0 1.2rem var(--c); } }
.card.ev.blood_moon { --c: var(--red); }
.card.ev.resource_rush { --c: var(--gold); }
.card.soon { --c: var(--muted); opacity: .85; }
@keyframes cardIn { from { transform: translateX(-1.5rem); opacity: 0; } }
.hud-right { position: absolute; right: 1rem; top: 1rem; width: 12.5rem; }
.hud-series { padding: .7rem .8rem; border-radius: .7rem; background: rgba(8, 6, 18, .78); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.hud-series h4 { margin: 0 0 .4rem; font: .7rem var(--display); letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
.ss-row { display: grid; grid-template-columns: 1.1rem 1fr auto; gap: .35rem; align-items: center; padding: .2rem .3rem; border-radius: .3rem; font-size: .85rem; font-weight: 700; }
.ss-row .ss-pos { color: var(--muted); font-family: var(--display); }
.ss-row .ss-name { color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-row b { font-family: var(--display); font-weight: 400; }
.ss-cut { font-size: .58rem; letter-spacing: .2em; color: var(--gold); text-align: center; border-top: 1px dashed rgba(250, 204, 21, .6); margin: .15rem 0; padding-top: .05rem; }

/* Banners: big moments slam across the middle of the map. */
.banners { position: absolute; left: 0; right: 0; top: 36%; display: grid; place-items: center; }
.banner { grid-area: 1 / 1; text-align: center; animation: bannerIn .5s var(--ease-back) both; }
.banner.out { animation: bannerOut .38s ease-in both; }
.bn-bar { position: absolute; left: 50%; top: 50%; width: 120vw; height: 7.5rem; transform: translate(-50%, -50%) skewY(-3deg); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 55%, rgba(8, 6, 18, .9)) 20%, rgba(8, 6, 18, .92) 50%, color-mix(in srgb, var(--c) 55%, rgba(8, 6, 18, .9)) 80%, transparent); border-top: .2rem solid var(--c); border-bottom: .2rem solid var(--c); z-index: -1; }
.banner.mid .bn-bar { height: 5.6rem; }
.bn-title { position: relative; font: 4.6rem/1 var(--display); letter-spacing: .04em; color: #fff; text-shadow: 0 0 1.2rem var(--c), 0 .25rem 0 rgba(0, 0, 0, .6); -webkit-text-stroke: .08rem rgba(0, 0, 0, .4); }
.banner.mid .bn-title { font-size: 3.3rem; }
.bn-sub { position: relative; margin-top: .35rem; font-size: 1.25rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
@keyframes bannerIn { 0% { transform: scale(2.6); opacity: 0; filter: blur(8px); } 60% { transform: scale(.94); opacity: 1; filter: none; } 100% { transform: scale(1); } }
@keyframes bannerOut { to { transform: scale(.85) translateY(-1rem); opacity: 0; } }

/* ------------------------------------------------------------ screens */

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity .45s ease; background: radial-gradient(ellipse at 50% 30%, #1d1640, var(--bg) 70%); overflow: hidden; }
.screen.in { opacity: 1; }
.screen.out { opacity: 0; transition: opacity .4s ease; }
.screen.overlaid { background: rgba(7, 6, 15, .94); backdrop-filter: blur(8px); }
.bg-grid { position: absolute; inset: -50%; background-image: linear-gradient(rgba(160, 120, 255, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 120, 255, .13) 1px, transparent 1px); background-size: 4rem 4rem; transform: perspective(40rem) rotateX(55deg) translateY(10%); animation: gridMove 6s linear infinite; mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 65%); }
@keyframes gridMove { to { background-position: 0 4rem; } }
body.paused .screen *, body.paused .banner, body.paused .bg-grid { animation-play-state: paused !important; }

.scr-head { position: relative; text-align: center; margin-bottom: 2.2rem; animation: dropIn .7s var(--ease-back) both; }
.scr-kicker { font: 1rem var(--display); letter-spacing: .3em; color: var(--cyan); text-transform: uppercase; }
.scr-head h1 { margin: .3rem 0 0; font: 4.4rem/1 var(--display); letter-spacing: .04em; background: linear-gradient(180deg, #fff 30%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 1rem rgba(236, 72, 153, .45)); }
.scr-sub { margin-top: .6rem; font-size: 1.15rem; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
@keyframes dropIn { from { transform: translateY(-2rem); opacity: 0; } }
@keyframes riseIn { from { transform: translateY(2.5rem) scale(.96); opacity: 0; } }
.por { width: 100%; height: 100%; object-fit: cover; }

.btn { pointer-events: auto; cursor: pointer; border: 2px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); padding: .9rem 2rem; border-radius: .7rem; font: 1.1rem var(--display); letter-spacing: .1em; transition: transform .2s var(--ease-back), background .2s; }
.btn:hover { transform: scale(1.05); background: rgba(255, 255, 255, .12); }
.btn.primary { background: linear-gradient(90deg, var(--magenta), #a855f7); border-color: transparent; box-shadow: 0 0 2rem rgba(236, 72, 153, .5); }

/* logo */
.logo-text { display: flex; gap: .25em; font: 7rem/1 var(--display); letter-spacing: .02em; transform: skewX(-8deg); }
.logo-text span:first-child { color: #fff; text-shadow: 0 0 .15em var(--cyan), 0 0 .5em var(--cyan); animation: flicker 4s infinite; }
.logo-text span:last-child { color: #fff; text-shadow: 0 0 .15em var(--magenta), 0 0 .5em var(--magenta); animation: flicker 4s 1.3s infinite; }
.logo-text.xl { font-size: 9rem; }
.logo-text.sm { font-size: 2.6rem; margin-top: 1.4rem; opacity: .85; }
.logo-img { width: 46rem; max-width: 80vw; filter: drop-shadow(0 0 2rem rgba(236, 72, 153, .5)); }
.logo-img.sm { width: 16rem; margin-top: 1.4rem; }
@keyframes flicker { 0%, 18%, 22%, 62%, 66%, 100% { opacity: 1; } 20%, 64% { opacity: .55; } }

/* boot */
.boot .boot-inner, .title .title-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.boot-tag { font: 1.1rem var(--display); letter-spacing: .3em; color: var(--muted); text-transform: uppercase; }
.boot-bar { width: 30rem; height: .45rem; border-radius: .3rem; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 1rem; }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--magenta)); transition: width .3s ease; box-shadow: 0 0 1rem var(--magenta); }
.boot-status { font-weight: 700; color: var(--muted); letter-spacing: .1em; }
.boot-actions { display: flex; gap: 1rem; margin-top: .6rem; }
.boot-actions[hidden] { display: none; }
.boot-hint { margin-top: 1.5rem; font-size: .85rem; color: rgba(165, 160, 200, .6); }

/* title */
.orb { position: absolute; width: 40rem; height: 40rem; border-radius: 50%; filter: blur(5rem); opacity: .45; animation: orb 9s ease-in-out infinite alternate; }
.orb.o1 { background: var(--magenta); left: -10rem; top: -10rem; }
.orb.o2 { background: var(--cyan); right: -12rem; bottom: -14rem; animation-delay: -4s; }
@keyframes orb { to { transform: translate(8rem, 5rem) scale(1.2); } }
.title-kicker { font: 1.3rem var(--display); letter-spacing: .4em; color: var(--gold); text-transform: uppercase; animation: dropIn .8s var(--ease-back) both; }
.title .logo-text, .title .logo-img { animation: logoIn 1.1s var(--ease-back) both .2s; }
@keyframes logoIn { from { transform: skewX(-8deg) scale(2.2); opacity: 0; filter: blur(12px); } }
.title-stats { display: flex; gap: 4rem; margin-top: 1.5rem; }
.title-stats div { text-align: center; animation: riseIn .7s var(--ease-back) both; }
.title-stats div:nth-child(1) { animation-delay: .7s; } .title-stats div:nth-child(2) { animation-delay: .85s; } .title-stats div:nth-child(3) { animation-delay: 1s; }
.title-stats b { display: block; font: 3.6rem/1 var(--display); color: #fff; }
.title-stats span { font-weight: 700; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
.title-format { margin-top: 1rem; font-weight: 700; letter-spacing: .15em; color: var(--muted); animation: riseIn .7s 1.2s both; }

.title .title-inner { margin-bottom: 12rem; }
.marquee { position: absolute; left: 0; right: 0; bottom: 1.5rem; display: flex; flex-direction: column; gap: .8rem; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); animation: riseIn 1s 1.3s both; }
.mq-row { overflow: hidden; }
.mq-track { display: flex; gap: .8rem; width: max-content; animation: mqLeft 70s linear infinite; }
.mq-row.right .mq-track { animation-name: mqRight; }
@keyframes mqLeft { to { transform: translateX(-50%); } }
@keyframes mqRight { from { transform: translateX(-50%); } to { transform: none; } }
.mq-item { display: flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .3rem; border-radius: .7rem; background: rgba(20, 17, 39, .85); border: 1px solid var(--line); }
.mq-item .por { width: 4rem; height: 4rem; border-radius: .5rem; background: #1f1a3a; }
.mq-item span { font: 1rem var(--display); white-space: nowrap; }

/* bracket */
.bracket { justify-content: flex-start; padding-top: 2.5rem; }
.bracket .scr-head { margin-bottom: 1.4rem; }
.bracket .scr-head h1 { font-size: 3.2rem; }
.bk { position: relative; display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr .9fr; gap: 1.4rem; width: 94vw; height: 72vh; }
.bk-col { display: flex; flex-direction: column; min-height: 0; }
.bk-col h3 { margin: 0 0 .7rem; font: 1.05rem var(--display); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.bk-col h3 small { display: block; font: 700 .72rem var(--body); letter-spacing: .1em; color: var(--muted); }
.bk-cards { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: .5rem; }
.bk-col.r0 .bk-cards { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
.bk-card { position: relative; padding: .35rem .45rem; border-radius: .5rem; background: rgba(20, 17, 39, .85); border: 1px solid var(--line); animation: riseIn .5s var(--ease-back) both; min-height: 0; }
.bk-col.r1 .bk-card { animation-delay: .25s; } .bk-col.r2 .bk-card { animation-delay: .4s; } .bk-col.r3 .bk-card { animation-delay: .55s; }
.bk-card.done { border-color: rgba(132, 204, 22, .35); }
.bk-card.live, .bk-card.focus { border-color: var(--magenta); box-shadow: 0 0 1.4rem rgba(236, 72, 153, .5); animation: riseIn .5s var(--ease-back) both, focusPulse 1.4s infinite; }
@keyframes focusPulse { 50% { box-shadow: 0 0 .5rem rgba(236, 72, 153, .25); } }
.bk-head { display: flex; justify-content: space-between; align-items: center; font: .7rem var(--display); color: var(--muted); letter-spacing: .1em; margin-bottom: .15rem; }
.bk-live { background: var(--red); color: #fff; padding: 0 .3rem; border-radius: .2rem; font-size: .6rem; animation: blink 1s infinite; }
.bk-card ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .12rem; }
.bk-card li { display: flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.bk-col:not(.r0) .bk-card li { font-size: 1rem; gap: .45rem; }
.bk-card li span { overflow: hidden; text-overflow: ellipsis; }
.bk-card li .por.mini { width: 1.8rem; height: 1.8rem; border-radius: .3rem; flex: none; background: #1f1a3a; }
.bk-col.r0 .bk-card ol { gap: .25rem; }
.bk-col:not(.r0) .bk-card li .por.mini { width: 1.9rem; height: 1.9rem; }
.bk-card li.adv { color: var(--lime); }
.bk-card li.adv::after { content: '▶'; margin-left: auto; font-size: .6rem; }
.bk-card li.out { opacity: .38; text-decoration: line-through; }
.bk-card li.tbd { color: rgba(165, 160, 200, .4); letter-spacing: .2em; padding: .15rem 0; }
.bk-champ { flex: 0 0 45%; margin: auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; border-radius: 1rem; border: 2px dashed rgba(250, 204, 21, .4); font: 1.3rem var(--display); text-align: center; animation: riseIn .5s .7s var(--ease-back) both; }
.bk-champ .q { font-size: 5rem; color: rgba(250, 204, 21, .35); }
.bk-champ.won { border-style: solid; border-color: var(--gold); box-shadow: 0 0 2.5rem rgba(250, 204, 21, .5); }
.bk-champ .por { width: 8rem; height: 8rem; border-radius: 1rem; }

/* group intro */
.gi-row { position: relative; display: flex; align-items: center; gap: 1.2rem; }
.gi-card { width: 16rem; text-align: center; animation: cardSlam .7s var(--ease-back) both; animation-delay: calc(.35s + var(--i) * .22s); }
.gi-card .por { width: 16rem; height: 16rem; border-radius: 1.2rem; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 55%, #1a1530), #0b0918 75%); border: .3rem solid var(--c); box-shadow: 0 0 2.5rem color-mix(in srgb, var(--c) 60%, transparent); }
.gi-name { margin-top: .9rem; font: 1.6rem var(--display); color: #fff; text-shadow: 0 0 1rem var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-vs { font: 2rem var(--display); color: var(--muted); animation: riseIn .5s 1.2s both; }
@keyframes cardSlam { from { transform: translateY(-4rem) scale(1.3) rotate(-4deg); opacity: 0; } }

/* map title */
.map-title { background: #000; }
.mt-bg { position: absolute; inset: -5%; background-size: cover; background-position: center; filter: blur(6px) brightness(.55) saturate(1.3); animation: kenburns 3s ease-out both; }
@keyframes kenburns { from { transform: scale(1.25); } to { transform: scale(1.05); } }
.mt-art { position: absolute; inset: 0; background-size: auto 100%; background-position: center; background-repeat: no-repeat; animation: kenburns 3s ease-out both; }
.mt-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(7, 6, 15, .2), rgba(7, 6, 15, .65) 75%); }
.mt-inner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.mt-core { width: 11rem; height: 11rem; margin-bottom: -.5rem; filter: drop-shadow(0 0 2rem rgba(250, 204, 21, .7)); animation: coreIn 1s var(--ease-back) both, coreBob 2.4s 1s ease-in-out infinite; }
@keyframes coreIn { from { transform: scale(0) rotate(-90deg); opacity: 0; } }
@keyframes coreBob { 50% { transform: translateY(-.6rem); } }
.mt-kicker { font: 1.2rem var(--display); letter-spacing: .3em; color: var(--cyan); text-transform: uppercase; animation: dropIn .6s var(--ease-back) both; }
.mt-map { font: 3rem var(--display); margin-top: .4rem; animation: dropIn .6s .1s var(--ease-back) both; }
.mt-map span { color: var(--muted); font-size: 1.8rem; }
.mt-name { font: 7.5rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; color: #fff; text-shadow: 0 0 2rem var(--magenta), 0 .4rem 0 rgba(0, 0, 0, .5); animation: logoIn .9s .15s var(--ease-back) both; }
.mt-layout { margin-top: .6rem; font-weight: 700; letter-spacing: .25em; color: var(--muted); text-transform: uppercase; animation: riseIn .6s .5s both; }

/* lineup: placed over the map only */
.lineup { right: 25%; background: rgba(7, 6, 15, .55); backdrop-filter: blur(2px); transition: opacity .45s; }
.lu-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; width: 92%; }
.lu-card { position: relative; padding: 1rem .9rem 1.1rem; border-radius: 1rem; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #120f25), #0b0918 70%); border: .2rem solid var(--c); box-shadow: 0 0 2rem color-mix(in srgb, var(--c) 45%, transparent); text-align: center; opacity: 0; transform: translateY(3rem) scale(.9); }
.lu-card.show { animation: luIn .6s var(--ease-back) forwards; }
@keyframes luIn { 0% { opacity: 0; transform: translateY(-3rem) scale(1.25); } 100% { opacity: 1; transform: none; } }
.lu-card .por { width: 100%; aspect-ratio: 1; height: auto; border-radius: .8rem; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 50%, transparent), transparent 70%); }
.lu-name { margin-top: .5rem; font: 1.45rem var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 1rem var(--c); }
.lu-role { perspective: 30rem; height: 2.4rem; margin: .5rem 0 .4rem; }
.lu-role .flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s var(--ease-back); }
.lu-card.flipped .flip { transform: rotateX(180deg); }
.lu-role .front, .lu-role .back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .4rem; backface-visibility: hidden; border-radius: .5rem; font: 1.2rem var(--display); letter-spacing: .12em; }
.lu-role .front { background: rgba(255, 255, 255, .08); color: var(--muted); }
.lu-role .back { transform: rotateX(180deg); background: var(--c); color: #0b0918; }
.lu-role.none .back { background: rgba(255, 255, 255, .15); color: var(--muted); }
.lu-role .back img { width: 1.8rem; height: 1.8rem; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5)); }
.lu-ability { display: flex; align-items: center; justify-content: center; gap: .3rem; font-weight: 700; letter-spacing: .1em; font-size: .95rem; }
.lu-ability img { width: 1.5rem; height: 1.5rem; }
.lu-buy { display: flex; justify-content: center; gap: .5rem; align-items: center; margin-top: .5rem; }
.lu-buy .kind { font: .85rem var(--display); letter-spacing: .1em; padding: .15rem .5rem; border-radius: .3rem; background: rgba(255, 255, 255, .1); }
.lu-buy .k-full { background: var(--gold); color: #1c1305; }
.lu-buy .k-eco, .lu-buy .k-saving { background: #1e3a8a; color: #bfdbfe; }
.lu-buy .cr { font-size: .8rem; font-weight: 700; color: var(--muted); }
.lu-items { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin-top: .5rem; min-height: 3.6rem; align-content: flex-start; }
.lu-items span { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .4rem .1rem .2rem; border-radius: .3rem; background: rgba(0, 0, 0, .4); font-size: .78rem; font-weight: 700; }
.lu-items span img { width: 1.2rem; height: 1.2rem; }
.lu-items span i { font-style: normal; width: 1.2rem; text-align: center; color: var(--c); }
.lu-items .none { color: var(--muted); }
.lu-series { margin-top: .4rem; font-size: .8rem; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.lineup.out { opacity: 0; }

/* countdown */
.countdown { right: 25%; background: none; transition: none; }
.cd-num { font: 14rem/1 var(--display); color: #fff; text-shadow: 0 0 3rem var(--magenta), 0 .5rem 0 rgba(0, 0, 0, .5); opacity: 0; }
.cd-num.pop { animation: cdPop .7s var(--ease-out) both; }
.cd-num.fight { font-size: 11rem; color: var(--gold); text-shadow: 0 0 3rem var(--orange), 0 .5rem 0 rgba(0, 0, 0, .5); }
.cd-num.fight.pop { animation: cdFight .9s var(--ease-out) both; }
@keyframes cdPop { 0% { transform: scale(2.5); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.7); opacity: 0; } }
@keyframes cdFight { 0% { transform: scale(3) rotate(-6deg); opacity: 0; } 25% { transform: scale(1) rotate(-3deg); opacity: 1; } 75% { opacity: 1; transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1.6); opacity: 0; } }

/* map result */
.map-result { padding: 2rem 3rem; }
.mr-body { position: relative; display: grid; grid-template-columns: 22rem 1fr; gap: 2.4rem; width: min(92vw, 110rem); align-items: center; }
.mr-winner { position: relative; text-align: center; animation: cardSlam .8s var(--ease-back) both .2s; }
.mr-winner .por.big { position: relative; width: 20rem; height: 20rem; margin: 0 auto; border-radius: 1.4rem; border: .35rem solid var(--c); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 55%, #1a1530), #0b0918 75%); box-shadow: 0 0 3rem color-mix(in srgb, var(--c) 70%, transparent); }
.rays { position: absolute; left: 50%; top: 10rem; width: 44rem; height: 44rem; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 35%, transparent) 0 8deg, transparent 8deg 22deg); mask-image: radial-gradient(circle, #000 15%, transparent 60%); -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 60%); animation: spin 18s linear infinite; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.mr-wlabel { margin-top: 1rem; font: 1rem var(--display); letter-spacing: .35em; color: var(--gold); }
.mr-wname { font: 2.3rem var(--display); text-shadow: 0 0 1.2rem var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-wscore { font: 1.4rem var(--display); color: var(--muted); }
.mr-table { display: flex; flex-direction: column; gap: .8rem; }
.mr-row { display: grid; grid-template-columns: 4.2rem 5.5rem 1fr 7rem; gap: 1rem; align-items: center; padding: .6rem 1rem; border-radius: .9rem; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, rgba(20, 17, 39, .9)), rgba(20, 17, 39, .9) 45%); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); animation: riseIn .6s var(--ease-back) both; animation-delay: calc(.4s + var(--i) * .15s); }
.mr-row.p1 { border-color: var(--gold); box-shadow: 0 0 1.4rem rgba(250, 204, 21, .3); }
.mr-pos { font: 1.7rem var(--display); color: var(--muted); }
.mr-row.p1 .mr-pos { color: var(--gold); }
.mr-row .por { width: 5.5rem; height: 5.5rem; border-radius: .8rem; border: .2rem solid var(--c); background: #120f25; }
.mr-name { display: flex; align-items: center; gap: .6rem; font: 1.5rem var(--display); white-space: nowrap; overflow: hidden; }
.mr-bar { display: flex; height: .9rem; margin: .45rem 0; border-radius: .4rem; background: rgba(0, 0, 0, .4); overflow: hidden; }
.mr-bar .seg { width: 0; animation: grow 1s var(--ease-out) forwards; animation-delay: calc(.9s + var(--i, 0) * .1s); }
@keyframes grow { to { width: var(--w); } }
.seg.combat, .lg.combat::before { background: #f87171; }
.seg.style, .lg.style::before { background: #c084fc; }
.seg.cargo, .lg.cargo::before { background: #34d399; }
.seg.core, .lg.core::before { background: #facc15; }
.seg.defense, .lg.defense::before { background: #60a5fa; }
.mr-stats { font-size: .9rem; font-weight: 700; color: var(--muted); }
.mr-score { text-align: right; }
.mr-score b { display: block; font: 2.6rem/1 var(--display); }
.mr-score .rp { font: .95rem var(--display); color: var(--lime); }
.mr-legend { display: flex; gap: 1.2rem; justify-content: flex-end; font-size: .85rem; font-weight: 700; color: var(--muted); }
.lg::before { content: ''; display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; margin-right: .35rem; vertical-align: -.1rem; }

/* standings */
.st-table { position: relative; width: min(80vw, 80rem); height: 30rem; }
.st-row { position: absolute; left: 0; right: 0; top: 0; height: 7rem; transform: translateY(calc(var(--slot) * 7.5rem)); transition: transform .9s var(--ease-out); display: grid; grid-template-columns: 3.5rem 6rem 1fr auto auto 4rem 9rem; gap: 1.2rem; align-items: center; padding: .6rem 1.2rem; border-radius: 1rem; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 24%, rgba(20, 17, 39, .92)), rgba(20, 17, 39, .92) 50%); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.st-row.adv { box-shadow: 0 0 1.2rem rgba(132, 204, 22, .25); }
.st-pos { font: 2.2rem var(--display); color: var(--muted); }
.st-row .por { width: 5.6rem; height: 5.6rem; border-radius: .8rem; border: .2rem solid var(--c); background: #120f25; }
.st-name { font: 1.8rem var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-hist { display: flex; gap: .3rem; }
.pl { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .4rem; font: .95rem var(--display); font-style: normal; background: rgba(255, 255, 255, .08); }
.pl.p1 { background: var(--gold); color: #1c1305; }
.pl.p2 { background: #cbd5e1; color: #0f172a; }
.pl.p3 { background: #b45309; color: #fff7ed; }
.st-move { font: 1.1rem var(--display); color: var(--muted); text-align: center; }
.st-move.up { color: var(--lime); }
.st-move.down { color: var(--red); }
.st-rp { text-align: right; }
.st-rp b { font: 3rem/1 var(--display); font-weight: 400; }
.st-rp span { display: block; font: 1rem var(--display); color: var(--lime); }
.st-cut { position: absolute; left: -1rem; right: -1rem; top: calc(var(--cut) * 7.5rem - .45rem); border-top: .2rem dashed var(--gold); }
.st-cut span { position: absolute; right: 0; top: -.75rem; background: var(--bg); padding: 0 .6rem; font: .85rem var(--display); letter-spacing: .25em; color: var(--gold); }
/* Series stats beside the map history: secondary to rank points, but always
   visible, so a tie can be checked by eye. */
.st-stats { display: flex; gap: .5rem; }
.st-stat { min-width: 4.2rem; padding: .35rem .6rem; border-radius: .5rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); text-align: center; transition: background .4s, border-color .4s, box-shadow .4s; }
.st-stat.wide { min-width: 6.2rem; }
.st-stat span { display: block; font: .65rem var(--display); letter-spacing: .2em; color: var(--muted); }
.st-stat b { display: block; font: 1.35rem/1.15 var(--display); font-weight: 400; }
.st-stat.hot { border-color: var(--gold); background: rgba(250, 204, 21, .12); box-shadow: 0 0 1rem rgba(250, 204, 21, .3); animation: tieHot 1.6s ease-in-out 2.4s 2; }
.st-stat.hot span { color: var(--gold); }
.st-rp em { display: block; font: .7rem var(--display); font-style: normal; letter-spacing: .25em; color: var(--gold); opacity: 0; animation: tieIn .4s ease 2.3s forwards; }
.st-row.tied { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
/* Tiebreak callout: appears once the rows have slid into their new order. */
.st-ties { width: min(80vw, 80rem); margin-top: 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.st-tie { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.2rem; border-radius: .7rem; background: rgba(20, 17, 39, .92); border: 1px solid rgba(250, 204, 21, .35); border-left: .35rem solid var(--gold); font: 1.05rem var(--display); letter-spacing: .03em; opacity: 0; animation: tieIn .5s var(--ease-out) 2.4s forwards; }
.st-tie i { font-style: normal; font-size: .75rem; letter-spacing: .3em; color: #1c1305; background: var(--gold); padding: .25rem .55rem; border-radius: .3rem; }
.st-tie strong { color: var(--gold); font-weight: 400; }
.st-tie b { font-weight: 400; color: #fff; }
@keyframes tieIn { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }
@keyframes tieHot { 50% { box-shadow: 0 0 1.8rem rgba(250, 204, 21, .6); } }

/* series result */
.sr-row { display: flex; gap: 1.5rem; align-items: flex-end; }
.sr-card { width: 15rem; text-align: center; animation: riseIn .7s var(--ease-back) both; }
.sr-card:nth-child(2) { animation-delay: .15s; } .sr-card:nth-child(3) { animation-delay: .3s; } .sr-card:nth-child(4) { animation-delay: .45s; }
.sr-card .por { width: 15rem; height: 15rem; border-radius: 1.2rem; border: .3rem solid var(--c); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 55%, #1a1530), #0b0918 75%); }
.sr-card.win { transform-origin: bottom; }
.sr-card.win .por { width: 19rem; height: 19rem; margin: 0 auto; box-shadow: 0 0 3rem color-mix(in srgb, var(--c) 70%, transparent); animation: winGlow 1.6s infinite; }
.sr-card.win { width: 19rem; }
@keyframes winGlow { 50% { box-shadow: 0 0 1rem color-mix(in srgb, var(--c) 40%, transparent); } }
.sr-card.lose { filter: grayscale(.85) brightness(.6); }
.sr-name { margin-top: .8rem; font: 1.5rem var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-rp { font: 1.1rem var(--display); color: var(--muted); }
.sr-tag { display: inline-block; margin-top: .5rem; padding: .3rem .8rem; border-radius: .4rem; font: .95rem var(--display); letter-spacing: .12em; background: rgba(255, 255, 255, .1); }
.sr-card.win .sr-tag { background: var(--lime); color: #0b1a02; }
.sr-card.race { filter: grayscale(.3) brightness(.85); }
.sr-card.race .sr-tag { background: rgba(250, 204, 21, .18); color: var(--gold); border: 1px solid rgba(250, 204, 21, .5); }

/* house bots: they fill a seat, so they sit back visually */
.st-row.house, .ss-row.house { opacity: .55; filter: grayscale(.7); }
.bk-card li.house { opacity: .45; font-style: italic; }

/* wildcards: best runners-up across a round */
.wc-table { width: min(80vw, 72rem); display: flex; flex-direction: column; gap: .55rem; }
.wc-row { display: grid; grid-template-columns: 3rem 3.6rem 1fr auto 6rem 10rem; gap: 1.1rem; align-items: center; padding: .55rem 1.1rem; border-radius: .9rem; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 20%, rgba(20, 17, 39, .92)), rgba(20, 17, 39, .92) 55%); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); opacity: 0; animation: tieIn .5s var(--ease-out) calc(.4s + var(--i) * .12s) forwards; }
.wc-row.adv { box-shadow: 0 0 1.2rem rgba(132, 204, 22, .25); }
.wc-row.out { filter: grayscale(.8) brightness(.7); }
.wc-pos { font: 1.8rem var(--display); color: var(--muted); }
.wc-row .por { width: 3.4rem; height: 3.4rem; border-radius: .6rem; border: .15rem solid var(--c); background: #120f25; }
.wc-name { font: 1.5rem var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-meta { font: 1rem var(--display); letter-spacing: .12em; color: var(--muted); }
.wc-rp { text-align: right; } .wc-rp b { font: 2.2rem/1 var(--display); font-weight: 400; } .wc-rp span { margin-left: .3rem; font: .85rem var(--display); color: var(--lime); }
.wc-tag { justify-self: end; padding: .3rem .8rem; border-radius: .4rem; font: .9rem var(--display); letter-spacing: .12em; background: rgba(255, 255, 255, .1); }
.wc-row.adv .wc-tag { background: var(--lime); color: #0b1a02; }
.wc-cut { position: relative; margin: .2rem -1rem; border-top: .2rem dashed var(--gold); }
.wc-cut span { position: absolute; right: 0; top: -.8rem; background: var(--bg); padding: 0 .6rem; font: .85rem var(--display); letter-spacing: .25em; color: var(--gold); }

/* champion */
.champion { background: radial-gradient(ellipse at 50% 40%, #3b2a06, var(--bg) 70%); }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; }
.ch-rays { position: absolute; left: 50%; top: 45%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(250, 204, 21, .16) 0 6deg, transparent 6deg 18deg); animation: spin 30s linear infinite; mask-image: radial-gradient(circle, #000 10%, transparent 55%); -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 55%); }
.ch-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.ch-kicker { font: 1.3rem var(--display); letter-spacing: .4em; color: var(--gold); animation: dropIn .8s both; }
.ch-title { font: 8rem/1 var(--display); color: #fff; text-shadow: 0 0 2rem var(--gold), 0 .4rem 0 rgba(0, 0, 0, .5); animation: logoIn 1s .2s var(--ease-back) both; }
.ch-por { position: relative; margin-top: 1.6rem; animation: cardSlam 1s .6s var(--ease-back) both; }
.ch-por .por.big { width: 22rem; height: 22rem; border-radius: 1.6rem; border: .4rem solid var(--gold); background: radial-gradient(circle at 50% 35%, #a16207, #1c1305 75%); box-shadow: 0 0 4rem rgba(250, 204, 21, .7); }
.ch-crown { position: absolute; left: 50%; top: -5.5rem; width: 9rem; transform: translateX(-50%) rotate(-8deg); filter: drop-shadow(0 0 1.5rem rgba(250, 204, 21, .8)); animation: crownBob 2s ease-in-out infinite; }
@keyframes crownBob { 50% { transform: translateX(-50%) translateY(-.6rem) rotate(4deg); } }
.ch-name { margin-top: 1.2rem; font: 4rem var(--display); text-shadow: 0 0 1.5rem var(--gold); animation: riseIn .8s 1.2s both; }
.ch-stats { font-weight: 700; letter-spacing: .1em; color: #fde68a; animation: riseIn .8s 1.4s both; }

/* transition wipe */
.wipe { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.wipe i, .wipe b { position: absolute; top: -20%; bottom: -20%; width: 70%; transform: translateX(-120%) skewX(-18deg); }
.wipe i:nth-child(1) { background: var(--cyan); animation: wipeIn .45s cubic-bezier(.7, 0, .3, 1) forwards; }
.wipe i:nth-child(2) { background: var(--magenta); animation: wipeIn .45s .05s cubic-bezier(.7, 0, .3, 1) forwards; }
.wipe i:nth-child(3) { background: #a855f7; animation: wipeIn .45s .1s cubic-bezier(.7, 0, .3, 1) forwards; }
.wipe b { width: 160%; background: var(--bg); animation: wipeCover .45s .12s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes wipeIn { to { transform: translateX(160%) skewX(-18deg); } }
@keyframes wipeCover { to { transform: translateX(-20%) skewX(-18deg); } }
.wipe.away b { animation: wipeAway .5s cubic-bezier(.7, 0, .3, 1) forwards; transform: translateX(-20%) skewX(-18deg); }
@keyframes wipeAway { to { transform: translateX(120%) skewX(-18deg); } }

/* ------------------------------------------------------------ admin bar */

#admin { position: fixed; left: 0; right: 0; top: 0; z-index: 100; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem .8rem; background: rgba(10, 8, 22, .96); border-bottom: 1px solid rgba(236, 72, 153, .5); box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .6); transform: translateY(-110%); transition: transform .3s var(--ease-out); font-size: max(12px, .85rem); }
#admin.open { transform: none; }
body.cursor #admin { cursor: default; }
.ad-brand { font: max(12px, .85rem) var(--display); letter-spacing: .15em; color: var(--magenta); }
.ad-grp { display: flex; align-items: center; gap: .25rem; padding-right: .6rem; border-right: 1px solid var(--line); }
#admin button { cursor: pointer; min-width: 2.2rem; padding: .3rem .6rem; border-radius: .35rem; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); }
#admin button:hover { background: rgba(255, 255, 255, .14); }
#admin button.on { background: var(--magenta); border-color: var(--magenta); }
#admin select { padding: .25rem; border-radius: .35rem; background: #1a1630; border: 1px solid rgba(255, 255, 255, .15); }
#admin label { display: inline-flex; align-items: center; gap: .2rem; cursor: pointer; }
#admin input[type="range"] { width: 6rem; }
.ad-status { display: flex; gap: .8rem; color: var(--muted); margin-left: auto; }
.ad-msg { color: var(--gold); }

.fatal { position: fixed; inset: auto 2rem 2rem; z-index: 200; padding: 1rem 1.4rem; border-radius: .6rem; background: #7f1d1d; color: #fff; font-weight: 700; }

/* Music credit: a small "now playing" tag when a track starts. */
.now-playing { position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 50; display: flex; align-items: center; gap: .6rem; max-width: 30rem; padding: .5rem .9rem; border-radius: .6rem; background: rgba(10, 8, 22, .82); border: 1px solid rgba(236, 72, 153, .45); box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .5); font-size: .9rem; pointer-events: none; animation: npIn .5s var(--ease-out) both; transition: opacity .7s, transform .7s; }
.now-playing.out { opacity: 0; transform: translateX(-1rem); }
.np-note { color: var(--magenta); font-size: 1.2rem; animation: npPulse 1s ease-in-out infinite alternate; }
.np-text { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes npIn { from { opacity: 0; transform: translateX(-1.5rem); } }
@keyframes npPulse { to { transform: scale(1.2); } }