/* The test match as a broadcast, ported from the event show
   (dist/show/css/show.css): the arena scene fills the stage, the turn clock
   and Core / event cards sit on it, and a side panel carries the LIVE header,
   the Moment bar, the team cards and the kill feed. On a phone the same
   pieces stack: Moment bar, compact standings, arena, cards, caption.
   Big moments land in the Moment bar, never over the map. */

/* ============================================================ layout */

.test-body {
  position: relative; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "moment" "sb" "stage" "cards" "caption";
  align-content: center; gap: 6px;
}
.stage { grid-area: stage; position: relative; justify-self: center; width: min(100%, calc(100dvh - 330px)); aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #07060f; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.test[data-phase="loading"] .stage canvas, .test[data-phase="error"] .stage canvas { opacity: 0; }
.test[data-phase="intro"] .stage canvas { opacity: .35; }
.stage canvas { transition: opacity .5s var(--out); }
.hud-left, .caption { transition: opacity .4s var(--out); }
.test[data-phase="intro"] .hud-left, .test[data-phase="intro"] .caption, .test[data-phase="loading"] .hud-left { opacity: 0; }

/* The edge of the stage flashes in a big moment's colour. */
.stage::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.stage.flash::after { animation: edge 1.1s var(--out); }
@keyframes edge { 0% { box-shadow: inset 0 0 0 3px var(--flash), inset 0 0 46px color-mix(in srgb, var(--flash) 70%, transparent); } 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } }

.ph, .kf { display: none; }
.hud-left { grid-area: cards; display: flex; flex-direction: column; gap: 6px; min-height: 26px; }
.hud-left .clock { display: none; }
.hud-cards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.caption { grid-area: caption; }
.moment { grid-area: moment; }
.sb { grid-area: sb; }

/* Overlays (title, lineup, countdown, winner) sit on the stage. */
.fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: grid; place-items: center; }
.fx:empty { display: none; }
.test-loading, .test-error { position: absolute; inset: 0; z-index: 4; display: none; place-content: center; justify-items: center; gap: 14px; text-align: center; color: var(--muted); }
.test[data-phase="loading"] .test-loading { display: grid; }
.test[data-phase="error"] .test-error { display: grid; }

/* ============================================================ clock + cards */

.clock { padding: 10px 14px 12px; border-radius: 12px; background: rgba(8, 6, 18, .8); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.clock-label { display: block; font-family: var(--display); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); }
.clock-num { display: block; font-family: var(--display); line-height: 1; }
.clock-num b { font-size: 44px; font-weight: 400; font-variant-numeric: tabular-nums; }
.clock-num span { font-size: 19px; color: var(--muted); }
.clock-bar { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.clock-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22d3ee, #ec4899); transform-origin: left; transform: scaleX(0); transition: transform .5s var(--out); }
.clock-phase { display: block; margin-top: 5px; min-height: 1em; font-family: var(--display); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.hud-left.overtime .clock { border-color: #ef4444; box-shadow: 0 0 22px rgba(239, 68, 68, .55); animation: ot-pulse 1s infinite; }
.hud-left.overtime .clock-phase { color: #fca5a5; }
@keyframes ot-pulse { 50% { box-shadow: 0 0 8px rgba(239, 68, 68, .3); } }

.card {
  padding: 6px 12px; border-radius: 10px; background: rgba(8, 6, 18, .82); border-left: 4px solid var(--c, var(--gold));
  backdrop-filter: blur(6px); animation: card-pop .45s var(--spring);
}
.card b { display: block; font-family: var(--display); font-weight: 400; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.card span { font-size: 12px; font-weight: 700; color: var(--muted); }
.card.core.hot b { color: var(--gold); }
.card.core.armed { --c: #ef4444; animation: card-pop .45s var(--spring), armed .8s infinite; }
.card.core.armed b { color: #fca5a5; }
.card.ev.blood_moon { --c: #ef4444; }
.card.ev.resource_rush { --c: var(--gold); }
.card.soon { --c: var(--muted); opacity: .85; }
@keyframes card-pop { from { opacity: 0; transform: translateX(-12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes armed { 50% { box-shadow: 0 0 18px rgba(239, 68, 68, .6); } }

/* ============================================================ Moment bar */

.moment {
  position: relative; height: 54px; border-radius: 12px; overflow: hidden;
  background: rgba(15, 13, 28, .92); border: 1px solid var(--line);
}
.moment-idle { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 14px; transition: opacity .2s, transform .2s; }
.moment-idle .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: live 1.8s var(--out) infinite; }
.moment-text { font-family: var(--display); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.moment.overtime { border-color: #ef4444; }
.moment.overtime .moment-text { color: #fca5a5; }
.moment.hit .moment-idle { opacity: 0; transform: translateY(-8px); }
.moment-hit {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 0 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--c) 70%, #0b0918), color-mix(in srgb, var(--c) 28%, #0b0918) 60%, #0b0918);
  border-left: 5px solid var(--c);
  animation: hit-in .38s var(--spring) both;
}
.moment-hit::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-100%); animation: hit-shine .7s .1s var(--out); }
.moment-hit b { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 0 14px var(--c), 0 2px 0 rgba(0, 0, 0, .5); white-space: nowrap; }
.moment-hit span { max-width: 100%; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.moment-hit.big b { font-size: 25px; }
.moment-hit.out { animation: hit-out .3s ease-in both; }
@keyframes hit-in { from { opacity: 0; transform: translateX(-40px) skewX(-12deg); } to { opacity: 1; transform: none; } }
@keyframes hit-out { to { opacity: 0; transform: translateX(30px); } }
@keyframes hit-shine { to { transform: translateX(100%); } }

/* ============================================================ standings */

.sb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.sb-row {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "rank por score" "hp hp hp";
  align-items: center; gap: 4px 5px; padding: 5px 7px 6px; border-radius: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 20%, transparent), rgba(255, 255, 255, .03) 70%), var(--panel);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  transition: translate .45s var(--out), filter .3s, box-shadow .3s;
}
.sb-rank { grid-area: rank; font-family: var(--display); font-size: 12px; color: var(--muted); }
.sb-por { grid-area: por; width: 26px; height: 26px; border-radius: 7px; overflow: hidden; border: 2px solid var(--c); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 45%, #1a1530), #0b0918); justify-self: start; }
.sb-por img { width: 100%; height: 100%; object-fit: cover; }
.sb-main { display: contents; }
.sb-name, .sb-meta, .sb-stats { display: none; }
.sb-hp { grid-area: hp; position: relative; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.sb-hp i, .sb-hp em { position: absolute; inset: 0; transform-origin: left; border-radius: inherit; }
.sb-hp i { background: var(--c); transition: transform .35s var(--out); }
.sb-hp em { background: #fff; transition: transform 1.1s .35s ease; }
.sb-score { grid-area: score; font-family: var(--display); font-weight: 400; font-size: 16px; font-variant-numeric: tabular-nums; }
.sb-row.leader { box-shadow: 0 0 16px -4px color-mix(in srgb, var(--gold) 70%, transparent); border-color: color-mix(in srgb, var(--gold) 70%, transparent); }
.sb-row.leader .sb-rank { color: var(--gold); }
.sb-row.low .sb-hp i { background: #ef4444; animation: blink .6s infinite; }
.sb-row.dead { filter: saturate(.25) brightness(.7); }
.sb-row.carrier .sb-por { animation: carrier 1s infinite; }
.sb-row.bump .sb-score { animation: bump .5s var(--spring); }
.sb-row.won { box-shadow: 0 0 22px -2px var(--gold); border-color: var(--gold); }
.sb-row.you .sb-por { box-shadow: 0 0 0 2px #fff; }
@keyframes blink { 50% { opacity: .45; } }
@keyframes carrier { 50% { box-shadow: 0 0 14px var(--gold); } }

/* ============================================================ overlays */

.fx-title, .fx-winner { display: grid; justify-items: center; gap: 4px; text-align: center; animation: title-in .5s var(--spring) both; }
.fx-title.out { animation: title-out .28s ease-in both; }
.fx-kicker { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.fx-arena { font-family: var(--display); font-size: clamp(38px, 11vw, 84px); line-height: 1; text-transform: uppercase; color: #fff; text-shadow: 0 0 26px rgba(34, 211, 238, .75), 0 4px 0 rgba(0, 0, 0, .55); transform: skewX(-6deg); }
.fx-winner .fx-arena { text-shadow: 0 0 30px rgba(250, 204, 21, .85), 0 4px 0 rgba(0, 0, 0, .55); }
.fx-winner .fx-kicker { color: var(--gold); }
.fx-winner.you .fx-arena { text-shadow: 0 0 30px rgba(34, 211, 238, .95), 0 4px 0 rgba(0, 0, 0, .55); }
.fx-winner { padding: 18px 28px; border-radius: 18px; background: rgba(7, 6, 15, .72); backdrop-filter: blur(4px); }
@keyframes title-in { from { opacity: 0; transform: scale(1.4); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes title-out { to { opacity: 0; transform: scale(.92) translateY(-10px); } }

/* Lineup cards, as the show's (portrait, role band reveal, ability, buy,
   items). On a phone each card is a row so all four fit on the stage; on a
   desktop they stand side by side like the show's. */
.fx-lineup { display: grid; width: min(100% - 16px, 420px); gap: 6px; }
.fx-lineup.out { animation: title-out .3s ease-in both; }
.lu {
  position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "por name ability" "por role buy" "por items items";
  align-items: center; gap: 3px 9px; padding: 6px 9px 6px 6px; border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, #120f25), #0b0918 80%);
  border: 2px solid var(--c); box-shadow: 0 0 18px -4px color-mix(in srgb, var(--c) 55%, transparent);
  opacity: 0; transform: translateX(-26px) scale(.94);
}
.lu.in { animation: lu-in .55s var(--spring) forwards; }
@keyframes lu-in { to { opacity: 1; transform: none; } }
.lu-you { position: absolute; top: -8px; right: 10px; z-index: 1; padding: 0 8px; border-radius: 5px; background: var(--c); color: #04121a; font-family: var(--display); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.lu-por { grid-area: por; width: 58px; height: 58px; border-radius: 9px; overflow: hidden; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 50%, transparent), transparent 70%); }
.lu-por img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.lu-name { grid-area: name; font-family: var(--display); font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 10px var(--c); }
.lu-flip { grid-area: role; width: min(100%, 130px); height: 20px; perspective: 300px; }
.lu-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s var(--spring); }
.lu.flipped .lu-inner { transform: rotateX(180deg); }
.lu-front, .lu-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; backface-visibility: hidden; border-radius: 5px; font-family: var(--display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.lu-front { background: rgba(255, 255, 255, .08); color: var(--muted); }
.lu-back { transform: rotateX(180deg); background: var(--c); color: #0b0918; }
.lu-back.none { background: rgba(255, 255, 255, .14); color: var(--muted); }
.lu-back img { width: 15px; height: 15px; }
.lu-ability { grid-area: ability; justify-self: end; display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lu-ability img { width: 16px; height: 16px; }
.lu-buy { grid-area: buy; justify-self: end; display: flex; align-items: center; gap: 5px; }
.lu-buy .kind { font-family: var(--display); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; 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: 10px; font-weight: 700; color: var(--muted); }
.lu-items { grid-area: items; display: flex; flex-wrap: wrap; gap: 4px; min-height: 18px; }
.lu-items span { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px 0 2px; border-radius: 5px; background: rgba(0, 0, 0, .4); font-size: 10px; font-weight: 700; }
.lu-items img { width: 15px; height: 15px; }
.lu-items .none { color: var(--muted); padding-left: 6px; }

/* Countdown */
.fx-count { font-family: var(--display); font-size: clamp(90px, 30vw, 190px); line-height: 1; color: #fff; text-transform: uppercase; text-shadow: 0 0 34px #ec4899, 0 6px 0 rgba(0, 0, 0, .5); opacity: 0; }
.fx-count.pop { animation: count .56s var(--out) both; }
.fx-count.go { font-size: clamp(60px, 18vw, 140px); text-shadow: 0 0 34px #22d3ee, 0 6px 0 rgba(0, 0, 0, .5); animation-duration: .9s; }
@keyframes count { 0% { opacity: 0; transform: scale(1.8); } 30% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.9); } }

/* ============================================================ kill feed */

.kf h3 { margin: 4px 0 6px; font-family: var(--display); font-weight: 400; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.kf h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.kf ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kf-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; background: rgba(0, 0, 0, .45); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; animation: kf-in .45s var(--spring); }
.kf-row:nth-child(n+4) { opacity: .55; }
.kn { color: var(--c); overflow: hidden; text-overflow: ellipsis; }
.kn.env { color: var(--muted); }
.kw { display: inline-flex; width: 18px; height: 18px; color: var(--muted); flex: none; }
.kw svg, .kw img { width: 100%; height: 100%; }
.kf-plus { color: var(--muted); }
.kt { margin-left: auto; display: flex; gap: 3px; }
.kt em { font-style: normal; font-family: var(--display); font-size: 9px; letter-spacing: .06em; padding: 1px 5px; border-radius: 3px; background: var(--gold); color: #1c1305; }
@keyframes kf-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* ============================================================ desktop: the show's layout */

@media (min-width: 960px) {
  .flow.test { max-width: none; padding: 14px 24px 0; }
  .test-body {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "stage ph" "stage moment" "stage sb" "stage kf";
    column-gap: 20px; row-gap: 10px; align-content: stretch; height: 100%;
  }
  .stage { width: 100%; height: 100%; aspect-ratio: auto; justify-self: stretch; }
  .fx { grid-area: stage; }
  .hud-left { grid-area: stage; align-self: start; justify-self: start; z-index: 3; width: 200px; margin: 14px; }
  .hud-left .clock { display: block; }
  .hud-cards { flex-direction: column; justify-content: flex-start; gap: 8px; }
  .caption { grid-area: stage; align-self: end; justify-self: center; z-index: 3; margin-bottom: 14px; padding: 6px 14px; border-radius: 12px; background: rgba(8, 6, 18, .82); backdrop-filter: blur(6px); }
  .ph { grid-area: ph; display: grid; gap: 2px; padding: 4px 2px 2px; }
  .ph-live { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 5px; background: #ef4444; color: #fff; font-family: var(--display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
  .ph-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
  .ph-title { font-family: var(--display); font-size: 22px; letter-spacing: .03em; text-transform: uppercase; }
  .ph-sub { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .moment { height: 68px; }
  .moment-hit { flex-direction: column; gap: 2px; align-items: flex-start; padding: 0 18px; }
  .moment-hit b { font-size: 28px; }
  .moment-hit.big b { font-size: 32px; }
  .sb { grid-template-columns: 1fr; align-content: start; gap: 6px; overflow: hidden; }
  .sb-row { grid-template-columns: 22px 52px minmax(0, 1fr) auto; grid-template-areas: "rank por main score"; padding: 8px 10px; gap: 10px; }
  .sb-rank { font-size: 18px; text-align: center; }
  .sb-por { width: 52px; height: 52px; border-radius: 10px; box-shadow: 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); }
  .sb-main { display: grid; grid-area: main; min-width: 0; gap: 3px; }
  .sb-name { display: block; font-family: var(--display); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-name em { font-style: normal; margin-left: 4px; padding: 0 5px; border-radius: 4px; background: var(--c); color: #04121a; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
  .sb-meta { display: flex; gap: 4px; }
  .sb-meta .chip { padding: 1px 7px 1px 3px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; background: rgba(0, 0, 0, .35); }
  .sb-meta .chip img { width: 15px; height: 15px; }
  .sb-hp { grid-area: auto; height: 6px; border-radius: 3px; }
  .sb-stats { display: flex; gap: 8px; font-size: 11px; 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: 2px; color: #fde68a; }
  .sb-stats .item img { width: 14px; height: 14px; }
  .sb-stats .state { color: var(--gold); text-transform: uppercase; }
  .sb-row.dead .state { color: #fca5a5; }
  .sb-score { font-size: 28px; align-self: center; }
  .kf { grid-area: kf; display: block; padding-bottom: 6px; }
  .fx-lineup { width: auto; grid-template-columns: repeat(4, minmax(0, 210px)); gap: 16px; }
  .lu {
    grid-template-columns: 1fr; grid-template-areas: "por" "name" "role" "ability" "buy" "items"; justify-items: center; align-content: start;
    gap: 7px; padding: 14px 12px 16px; border-radius: 14px; text-align: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #120f25), #0b0918 70%);
    transform: translateY(26px) scale(.88);
  }
  .lu-you { top: -10px; right: auto; font-size: 11px; padding: 1px 9px; }
  .lu-por { width: 100%; height: auto; aspect-ratio: 1.25; border-radius: 10px; }
  .lu-name { font-size: 18px; }
  .lu-flip { width: 100%; height: 26px; }
  .lu-back, .lu-front { font-size: 14px; }
  .lu-back img { width: 18px; height: 18px; }
  .lu-ability, .lu-buy { justify-self: center; }
  .lu-ability { font-size: 12px; }
  .lu-buy .kind, .lu-buy .cr, .lu-items span { font-size: 11px; }
  .lu-items { justify-content: center; min-height: 22px; }
  .test .flow-actions { padding: 8px 0 12px; }
}

/* Laptop screens that are wide but short: tighter team cards so all four
   and the kill feed fit beside the arena. */
@media (min-width: 960px) and (max-height: 820px) {
  .ph-title { font-size: 18px; }
  .ph-sub { font-size: 12px; }
  .moment { height: 56px; }
  .moment-hit b { font-size: 23px; }
  .moment-hit.big b { font-size: 26px; }
  .sb { gap: 5px; }
  .sb-row { grid-template-columns: 18px 40px minmax(0, 1fr) auto; padding: 5px 9px; gap: 8px; }
  .sb-por { width: 40px; height: 40px; border-radius: 8px; }
  .sb-meta { display: none; }
  .sb-name { font-size: 15px; }
  .sb-score { font-size: 24px; }
  .kf-row:nth-child(n+4) { display: none; }
  .fx-lineup { grid-template-columns: repeat(4, minmax(0, 180px)); gap: 12px; }
  .lu { gap: 5px; padding: 10px 10px 12px; }
  .lu-por { aspect-ratio: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .lu { opacity: 1; transform: none; }
  .lu.in, .fx-title, .fx-winner, .moment-hit, .card, .kf-row { animation: none; }
  .fx-count.pop { opacity: 1; animation: none; }
}