.arena-match-page {
    --arena-ink: #07090a;
    --arena-panel: #0d1113;
    --arena-line: rgba(255, 189, 116, .2);
    --arena-cream: #f4e7d2;
    --arena-muted: #988d80;
    --arena-orange: #ff5a32;
    --arena-gold: #ffb875;
    --arena-cyan: #61cfe3;
    display: grid;
    gap: 26px;
    padding-block: 28px 80px;
    color: var(--arena-cream);
}

.arena-match-page :where(h1, h2, h3, p, dl) { margin: 0; }

.arena-match-hero {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--arena-line);
    background: var(--arena-ink) var(--arena-map) center / cover no-repeat;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .42);
    isolation: isolate;
}

.arena-match-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(6, 7, 8, .98) 0%, rgba(6, 7, 8, .84) 40%, rgba(6, 7, 8, .26) 70%, rgba(6, 7, 8, .78) 100%),
        linear-gradient(0deg, rgba(6, 7, 8, .96), transparent 58%);
}

.arena-match-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .18;
    background-image: repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.1) 80px), repeating-linear-gradient(0deg, transparent 0 79px, rgba(255,255,255,.06) 80px);
    mask-image: linear-gradient(90deg, #000, transparent 60%);
}

.arena-match-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(610px, 48%);
    min-height: 520px;
    padding: clamp(34px, 5vw, 72px);
    box-sizing: border-box;
}

.arena-match-back,
.arena-match-kicker,
.arena-section-head p,
.arena-player small,
.arena-duel small,
.arena-match-facts small {
    font-family: var(--mono);
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.arena-match-back { color: var(--arena-gold); font-size: 11px; text-decoration: none; }
.arena-match-back:hover { color: #fff; }
.arena-match-kicker { margin-top: auto; color: var(--arena-orange); font-size: 11px; }

.arena-match-copy h1 {
    max-width: 100%;
    margin-top: 10px;
    font-family: var(--display);
    font-size: clamp(62px, 7vw, 112px);
    font-weight: 700;
    line-height: .86;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.arena-match-subtitle { margin-top: 18px; color: #b6aa9d; font-family: var(--sans); font-size: 14px; }

.arena-match-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    width: 100%;
    margin-top: 30px;
    background: rgba(255,255,255,.08);
}

.arena-match-facts span { flex: 1 1 110px; padding: 14px 16px; background: rgba(6,7,8,.82); }
.arena-match-facts small { display: block; color: #756d64; font-size: 8px; }
.arena-match-facts b { display: block; margin-top: 7px; font-family: var(--mono); font-size: 16px; }

.arena-duel {
    position: absolute;
    right: clamp(30px, 5vw, 72px);
    bottom: clamp(38px, 5vw, 72px);
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 74px minmax(180px, 1fr);
    align-items: end;
    width: min(700px, 48%);
}

.arena-duel article { display: grid; gap: 8px; min-width: 0; }
.arena-duel article:last-child { text-align: right; }
.arena-duel small { color: var(--arena-cyan); font-size: 9px; }
.arena-duel .is-winner small { color: var(--arena-orange); }
.arena-duel strong { overflow: hidden; font-family: var(--sans); font-size: clamp(19px, 2vw, 31px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.arena-duel article span { color: var(--arena-cyan); font-family: var(--display); font-size: clamp(82px, 9vw, 150px); font-weight: 700; line-height: .7; letter-spacing: -.07em; }
.arena-duel .is-winner span { color: var(--arena-orange); }
.arena-duel > i { display: grid; justify-items: center; align-self: center; color: #756b60; font-family: var(--mono); font-style: normal; }
.arena-duel > i span { font-size: 9px; letter-spacing: .2em; }
.arena-duel > i b { color: var(--arena-cream); font-family: var(--display); font-size: 48px; font-weight: 400; }

.arena-scoreboard,
.arena-history {
    border: 1px solid var(--arena-line);
    background: linear-gradient(140deg, rgba(255,90,50,.035), transparent 42%), var(--arena-panel);
    padding: clamp(24px, 4vw, 52px);
}

.arena-section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.08); }
.arena-section-head p { color: var(--arena-orange); font-size: 10px; }
.arena-section-head h2 { margin-top: 9px; font-family: var(--display); font-size: clamp(34px, 4vw, 62px); line-height: .95; letter-spacing: -.035em; }
.arena-section-head > span { max-width: 280px; color: var(--arena-muted); font-family: var(--sans); font-size: 12px; text-align: right; }

.arena-player-grid { display: grid; gap: 1px; margin-top: 24px; background: rgba(255,255,255,.09); }
.arena-player { display: grid; grid-template-columns: 54px minmax(180px, 1fr) auto; align-items: center; gap: 18px; padding: 16px 22px; background: #090c0d; }
.arena-player.is-winner { background: linear-gradient(90deg, rgba(255,90,50,.12), #090c0d 52%); }
.arena-player-rank { color: #4d4842; font-family: var(--display); font-size: 28px; }
.arena-player small { color: var(--arena-muted); font-size: 8px; }
.arena-player h3 { margin-top: 5px; font-family: var(--sans); font-size: 20px; }
.arena-player i { display: block; width: min(380px, 100%); height: 3px; margin-top: 13px; background: #272421; }
.arena-player i b { display: block; height: 100%; background: var(--arena-cyan); }
.arena-player.is-winner i b { background: var(--arena-orange); }
.arena-player dl { display: grid; grid-template-columns: repeat(3, minmax(70px, 1fr)); text-align: right; }
.arena-player dl div { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.08); }
.arena-player dt { color: var(--arena-muted); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.arena-player dd { margin: 5px 0 0; font-family: var(--display); font-size: 25px; line-height: 1; }

.arena-momentum { margin-top: 26px; padding: 24px 28px 18px; border: 1px solid rgba(255,255,255,.08); background: #080a0b; }
.arena-momentum > div,
.arena-momentum footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--mono); }
.arena-momentum > div b:first-child { color: var(--arena-orange); }
.arena-momentum > div b:last-child { color: var(--arena-cyan); }
.arena-momentum > div span { color: #67615a; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.arena-momentum svg { display: block; width: 100%; height: 160px; margin: 14px 0 10px; overflow: visible; }
.arena-momentum line { stroke: rgba(255,255,255,.13); stroke-width: .5; stroke-dasharray: 2 2; }
.arena-momentum polyline { fill: none; stroke: var(--arena-orange); stroke-width: 1.8; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(255,90,50,.55)); }
.arena-momentum footer { color: #665f57; font-size: 10px; }
.arena-momentum footer strong { color: var(--arena-cream); font-size: 13px; }

.arena-timeline { margin-top: 22px; border: 1px solid rgba(255,255,255,.08); background: #090b0c; }
.arena-timeline > header,
.arena-timeline > footer { display: grid; grid-template-columns: 1fr auto 72px; align-items: center; gap: 22px; min-height: 52px; padding: 0 26px 0 74px; color: #665f57; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.arena-timeline > header { border-bottom: 1px solid rgba(255,255,255,.08); }
.arena-timeline > footer { border-top: 1px solid rgba(255,255,255,.08); }
.arena-timeline > :is(header,footer) b { color: var(--arena-cream); font-size: 13px; }
.arena-timeline > :is(header,footer) time { text-align: right; }
.arena-timeline article { position: relative; display: grid; grid-template-columns: 32px 82px minmax(0, 1fr) 66px; align-items: center; min-height: 60px; padding: 0 20px 0 14px; border-bottom: 1px solid rgba(255,255,255,.055); font-family: var(--sans); }
.arena-timeline article:last-of-type { border-bottom: 0; }
.arena-timeline article:hover { background: linear-gradient(90deg, rgba(255,90,50,.07), transparent 70%); }
.arena-timeline-rail { position: relative; align-self: stretch; }
.arena-timeline-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 13px; width: 1px; background: rgba(255,255,255,.12); }
.arena-timeline-rail::after { content: ""; position: absolute; top: 50%; left: 8px; width: 11px; height: 11px; border: 2px solid #171b1d; border-radius: 50%; background: var(--arena-orange); box-shadow: 0 0 0 1px rgba(255,90,50,.35), 0 0 16px rgba(255,90,50,.35); transform: translateY(-50%); }
.arena-timeline-rail i { position: absolute; top: 50%; left: 22px; width: clamp(2px, var(--event-progress), 18px); height: 1px; background: rgba(255,90,50,.5); }
.arena-timeline > article > time { display: grid; gap: 5px; padding-left: 12px; font-family: var(--mono); }
.arena-timeline > article > time b { color: var(--arena-gold); font-size: 13px; }
.arena-timeline > article > time small { color: #56514b; font-size: 8px; }
.arena-timeline-action { display: grid; grid-template-columns: 28px minmax(90px,1fr) 18px minmax(96px,132px) 18px minmax(90px,1fr); align-items: center; gap: 9px; min-width: 0; }
.arena-frag-number { color: #48433e; font-family: var(--mono); font-size: 10px; }
.match-combatant { display: grid; min-width: 0; gap: 3px; }
.match-combatant small { color: #5f5952; font: 700 7px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.match-combatant strong, .match-combatant b { overflow: hidden; font-size: 13px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.match-combatant--killer { text-align: right; }
.match-combatant--killer strong { color: var(--arena-cream); }
.match-combatant--victim b { color: #aaa096; font-weight: 500; }
.match-kill-arrow { color: var(--arena-orange); font: 700 16px/1 var(--mono); font-style: normal; text-align: center; }
.arena-timeline output { color: var(--arena-cream); font-family: var(--display); font-size: 22px; font-weight: 700; text-align: right; }
.arena-weapon { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 7px; min-width: 0; color: var(--arena-orange); font-family: var(--mono); }
.arena-weapon svg { grid-row: 1 / 3; width: 54px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.arena-weapon em { overflow: hidden; color: var(--arena-gold); font-size: 9px; font-style: normal; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.arena-weapon small { overflow: hidden; color: #625c55; font-size: 7px; font-weight: 700; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.arena-history.is-empty > p { padding-top: 28px; color: var(--arena-muted); font-family: var(--sans); }

@media (max-width: 1050px) {
    .arena-match-copy { width: 55%; }
    .arena-duel { width: 44%; grid-template-columns: minmax(110px,1fr) 44px minmax(110px,1fr); }
    .arena-timeline-action { grid-template-columns: 24px minmax(70px,1fr) 14px 66px 14px minmax(70px,1fr); gap: 6px; }
    .arena-weapon { display: block; }
    .arena-weapon svg { width: 50px; }
    .arena-weapon :is(em,small) { display: none; }
}

@media (max-width: 760px) {
    .arena-match-hero { min-height: auto; }
    .arena-match-copy { width: 100%; min-height: 360px; padding: 28px 24px 170px; }
    .arena-match-copy h1 { font-size: clamp(54px, 18vw, 82px); }
    .arena-duel { right: 24px; bottom: 34px; left: 24px; width: auto; grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr); }
    .arena-duel article span { font-size: 70px; }
    .arena-section-head { align-items: start; flex-direction: column; }
    .arena-section-head > span { text-align: left; }
    .arena-player { grid-template-columns: 42px 1fr; gap: 14px; padding: 18px; }
    .arena-player dl { grid-column: 1 / -1; }
    .arena-player dl div { padding: 10px 16px 0; }
}

@media (max-width: 520px) {
    .arena-match-page { padding-top: 12px; }
    .arena-scoreboard, .arena-history { padding: 22px 16px; }
    .arena-duel strong { font-size: 15px; }
    .arena-duel article span { font-size: 58px; }
    .arena-match-facts span { flex-basis: 42%; }
    .arena-timeline > header, .arena-timeline > footer { padding-inline: 18px; }
    .arena-timeline article { grid-template-columns: 20px 46px minmax(0,1fr) 42px; min-height: 58px; padding-inline: 5px; }
    .arena-timeline-rail::before { left: 9px; }
    .arena-timeline-rail::after { left: 4px; }
    .arena-timeline-rail i { display: none; }
    .arena-timeline > article > time { padding-left: 5px; }
    .arena-timeline > article > time small { display: none; }
    .arena-timeline-action { grid-template-columns: minmax(42px,1fr) 10px 42px 10px minmax(42px,1fr); gap: 3px; }
    .arena-frag-number { display: none; }
    .match-combatant small { display: none; }
    .match-combatant strong, .match-combatant b { font-size: 10px; }
    .match-kill-arrow { font-size: 12px; }
    .arena-timeline output { font-size: 17px; }
    .arena-weapon svg { width: 42px; height: 20px; }
}