:root {
    --replay-ink: #f4f0e6;
    --replay-muted: #aaa99f;
    --replay-gold: #e5bd63;
    --replay-red: #e76e64;
    --replay-green: #70c98d;
    --replay-blue: #74b5d6;
    --replay-panel: rgba(14, 19, 18, .9);
}

.highlight-replay-shell {
    width: min(1500px, 100%);
    margin: 0 auto;
    color: var(--replay-ink);
}

.highlight-replay-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    padding: 1rem clamp(.25rem, 2vw, 2rem) 1.35rem;
}

.highlight-replay-back {
    display: inline-block;
    margin-bottom: 1rem;
    color: #c9c9bf;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.highlight-replay-back:hover { color: #fff; }

.highlight-replay-kicker {
    margin: 0 0 .2rem;
    color: var(--replay-gold);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.highlight-replay-header h1 {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.1rem, 5vw, 4.35rem);
    line-height: .95;
    letter-spacing: -.045em;
}

.highlight-replay-matchup {
    margin: .55rem 0 0;
    color: var(--replay-muted);
    font-size: clamp(.95rem, 2vw, 1.15rem);
}

.highlight-replay-result {
    min-width: 8.5rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .75rem;
    background: rgba(255,255,255,.045);
    text-align: center;
    box-shadow: inset 0 1px rgba(255,255,255,.06);
}

.highlight-replay-result span,
.highlight-replay-result strong { display: block; }
.highlight-replay-result span { color: var(--replay-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.highlight-replay-result strong { margin-top: .12rem; font-size: 1.35rem; }
.highlight-replay-result--win strong { color: var(--replay-green); }
.highlight-replay-result--loss strong { color: var(--replay-red); }
.highlight-replay-result--draw strong { color: var(--replay-gold); }

.highlight-replay-games {
    display: flex;
    gap: .45rem;
    padding: 0 clamp(.25rem, 2vw, 2rem) 1rem;
    overflow-x: auto;
}

.highlight-replay-game {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .55rem;
    padding: .5rem .75rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: #b9bbb3;
    background: rgba(255,255,255,.035);
    font-size: .78rem;
}

.highlight-replay-game:hover,
.highlight-replay-game.is-selected { color: #fff; text-decoration: none; border-color: rgba(229,189,99,.65); }
.highlight-replay-game.is-selected { background: rgba(229,189,99,.12); box-shadow: 0 0 20px rgba(229,189,99,.08); }
.highlight-replay-game--win strong { color: var(--replay-green); }
.highlight-replay-game--loss strong { color: var(--replay-red); }
.highlight-replay-game--draw strong { color: var(--replay-gold); }

.highlight-replay-warning {
    margin: 0 clamp(.25rem, 2vw, 2rem) 1rem;
    padding: .65rem .9rem;
    border: 1px solid rgba(229,189,99,.35);
    border-radius: .5rem;
    background: rgba(229,189,99,.08);
    color: #e7d5a9;
    font-size: .85rem;
}

.highlight-replay-stage {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(132px, auto) auto minmax(132px, auto) auto;
    min-height: 680px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 1.25rem;
    background:
        radial-gradient(ellipse at 50% 48%, rgba(183,135,62,.12) 0, transparent 36%),
        radial-gradient(ellipse at 20% 20%, rgba(55,105,82,.27) 0, transparent 42%),
        repeating-linear-gradient(3deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
        #16221c;
    box-shadow: 0 1.8rem 5rem rgba(0,0,0,.4), inset 0 0 6rem rgba(0,0,0,.45);
    isolation: isolate;
}

.highlight-replay-stage::before {
    position: absolute;
    z-index: -1;
    inset: 50% -10% auto;
    height: 1px;
    content: '';
    background: linear-gradient(90deg, transparent, rgba(229,189,99,.35), transparent);
    box-shadow: 0 0 40px rgba(229,189,99,.22);
}

.highlight-replay-stage.is-changing .highlight-replay-caption { animation: replay-caption-in .38s ease-out; }
.highlight-replay-stage[data-kind="damage"].is-changing { animation: replay-damage .34s ease-out; }

.highlight-replay-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem clamp(.75rem, 2.2vw, 2rem);
    background: linear-gradient(90deg, rgba(6,9,8,.8), rgba(13,18,16,.5), rgba(6,9,8,.8));
}

.highlight-replay-player--top { border-bottom: 1px solid rgba(255,255,255,.08); }
.highlight-replay-player--bottom { border-top: 1px solid rgba(255,255,255,.08); }

.highlight-replay-player__identity { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.highlight-replay-player__identity > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.highlight-replay-player__identity small { color: var(--replay-muted); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.highlight-replay-player__identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.highlight-replay-player__avatar {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(229,189,99,.42);
    border-radius: 50%;
    color: var(--replay-gold);
    background: #111713;
    font: 800 .7rem/1 sans-serif;
}

.highlight-replay-life {
    position: relative;
    display: grid;
    min-width: 3.15rem;
    height: 2.5rem;
    margin-left: .2rem;
    place-items: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 45% 55% 50% 50%;
    color: #fff;
    background: radial-gradient(circle at 40% 30%, #893d36, #421916 72%);
    font-size: 1.25rem;
    text-shadow: 0 1px 2px #000;
    transition: color .2s, transform .2s;
}

.highlight-replay-life.is-danger { color: #ffd174; transform: scale(1.06); }
.highlight-replay-life.is-dead { color: #fff; background: #391112; }

.highlight-replay-zones { display: flex; gap: .45rem; min-width: 0; }
.highlight-replay-zone {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 .45rem;
    min-width: 6.5rem;
    padding: .4rem .55rem;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: .45rem;
    background: rgba(0,0,0,.25);
    font-size: .68rem;
}
.highlight-replay-zone b { color: #aaa; font-weight: 600; }
.highlight-replay-zone span { justify-self: end; color: #fff; font-weight: 800; }
.highlight-replay-zone em { grid-column: 1 / -1; overflow: hidden; max-width: 9rem; color: #dedbd1; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.highlight-replay-field {
    display: grid;
    align-content: center;
    gap: .45rem;
    min-height: 0;
    padding: .65rem clamp(.55rem, 2vw, 1.5rem);
}

.highlight-replay-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 61px;
    padding: 0 .5rem;
}

.highlight-replay-row--lands .highlight-replay-card-group { margin-left: -1.7rem; filter: saturate(.8) brightness(.9); }
.highlight-replay-row--lands .highlight-replay-card-group:first-child { margin-left: 0; }

.highlight-replay-card-group {
    position: relative;
    z-index: 1;
    width: clamp(58px, 6.7vw, 90px);
    aspect-ratio: 488 / 680;
    margin: 0 clamp(-.7rem, -.8vw, -.15rem);
    flex: 0 1 90px;
    overflow: visible;
    transition: transform .25s ease, filter .2s;
}

.highlight-replay-card-group:hover {
    z-index: 30;
    transform: translateY(-.8rem) scale(1.4);
}

.highlight-replay-card-group.has-attachments { margin-right: .7rem; }
.highlight-replay-card-group > .highlight-replay-card { width: 100%; height: 100%; margin: 0; }
.highlight-replay-card-group > .highlight-replay-card:hover { box-shadow: 0 .55rem 1rem rgba(0,0,0,.45); transform: none; }
.highlight-replay-card-group > .highlight-replay-card.is-tapped:hover { transform: rotate(9deg); }
.highlight-replay-card-group > .highlight-replay-card.is-attacking:hover { transform: translateY(.45rem); }
.highlight-replay-field--bottom .highlight-replay-card-group > .highlight-replay-card.is-attacking:hover { transform: translateY(-.45rem); }
.highlight-replay-card-group > .highlight-replay-card--host { z-index: 5; }

.highlight-replay-card-group > .highlight-replay-card--attachment {
    position: absolute;
    inset: 0;
    z-index: calc(5 - var(--attachment-index));
    border-color: rgba(229,189,99,.8);
    filter: brightness(.72) saturate(.9);
    transform: translate(
        calc(var(--attachment-index) * 10px),
        calc(var(--attachment-index) * -10px)) rotate(2.5deg);
}

.highlight-replay-card-group > .highlight-replay-card--attachment:hover {
    transform: translate(
        calc(var(--attachment-index) * 10px),
        calc(var(--attachment-index) * -10px)) rotate(2.5deg);
}

.highlight-replay-attachment-label {
    position: absolute;
    z-index: 8;
    right: -.65rem;
    bottom: -.8rem;
    left: -.1rem;
    overflow: hidden;
    padding: .13rem .3rem;
    border: 1px solid rgba(229,189,99,.65);
    border-radius: 999px;
    color: #fff1c5;
    background: rgba(47,36,15,.94);
    box-shadow: 0 .2rem .55rem rgba(0,0,0,.55);
    font: 800 clamp(.42rem, .58vw, .56rem)/1.2 sans-serif;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.highlight-replay-card {
    position: relative;
    width: clamp(58px, 6.7vw, 90px);
    aspect-ratio: 488 / 680;
    margin: 0 clamp(-.7rem, -.8vw, -.15rem);
    flex: 0 1 90px;
    overflow: visible;
    border: 2px solid #111;
    border-radius: 6% / 4.5%;
    color: #fff;
    background: #252a27;
    box-shadow: 0 .55rem 1rem rgba(0,0,0,.45);
    transition: transform .25s ease, filter .2s, box-shadow .2s;
}

.highlight-replay-card:hover { z-index: 20; transform: translateY(-.8rem) scale(1.45); box-shadow: 0 1rem 2rem #000; }
.highlight-replay-card.is-tapped { transform: rotate(9deg); }
.highlight-replay-card.is-tapped:hover { transform: rotate(9deg) translateY(-.8rem) scale(1.4); }
.highlight-replay-card.is-attacking { border-color: var(--replay-red); box-shadow: 0 0 0 2px rgba(231,110,100,.3), 0 .8rem 1.4rem #000; transform: translateY(.45rem); }
.highlight-replay-field--bottom .highlight-replay-card.is-attacking { transform: translateY(-.45rem); }
.highlight-replay-card.is-blocking { border-color: var(--replay-blue); }
.highlight-replay-card.is-focused { z-index: 10; box-shadow: 0 0 0 3px rgba(229,189,99,.68), 0 0 2rem rgba(229,189,99,.48); }

.highlight-replay-card__art { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.highlight-replay-card__art img { width: 100%; height: 100%; object-fit: cover; }
.highlight-replay-card__fallback { position: absolute; inset: 0; display: grid; z-index: -1; place-items: center; color: #959a91; background: radial-gradient(circle, #465046, #202520); font: 700 2rem/1 Georgia, serif; }
.highlight-replay-card.image-failed img { display: none; }
.highlight-replay-card.image-failed .highlight-replay-card__fallback,
.highlight-replay-card__art:not(:has(img)) .highlight-replay-card__fallback { z-index: 0; }

.highlight-replay-card > strong {
    position: absolute;
    z-index: 3;
    right: 2px;
    bottom: 2px;
    left: 2px;
    overflow: hidden;
    padding: .12rem .2rem;
    border-radius: .18rem;
    background: rgba(0,0,0,.78);
    font: 700 clamp(.43rem, .62vw, .6rem)/1.25 sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.highlight-replay-card__stats,
.highlight-replay-card__counters,
.highlight-replay-card__state { position: absolute; z-index: 4; font-family: sans-serif; }
.highlight-replay-card__stats { right: -3px; bottom: -5px; padding: .13rem .27rem; border: 1px solid #aaa; border-radius: .25rem; color: #111; background: #e4e0d3; font-size: .63rem; }
.highlight-replay-card__counters { top: -6px; right: -6px; display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 1px solid #c4e4b8; border-radius: 50%; background: #376633; font-size: .58rem; }
.highlight-replay-card__state { top: .22rem; left: 50%; padding: .12rem .28rem; border-radius: 999px; background: #923b34; font-size: .5rem; text-transform: uppercase; transform: translateX(-50%); }
.highlight-replay-card.is-blocking .highlight-replay-card__state { background: #315b78; }

.highlight-replay-center {
    position: relative;
    display: grid;
    grid-template-columns: minmax(5rem, .8fr) minmax(12rem, 2.5fr) minmax(5rem, .8fr);
    align-items: center;
    gap: .75rem;
    min-height: 76px;
    padding: .55rem clamp(.75rem, 2vw, 1.5rem);
    background: rgba(5,8,7,.5);
}

.highlight-replay-turn { display: flex; flex-direction: column; }
.highlight-replay-turn span { color: var(--replay-gold); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.highlight-replay-turn strong { font-size: .82rem; }

.highlight-replay-caption {
    grid-column: 2;
    margin: 0;
    color: #f8f5e9;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1rem, 1.65vw, 1.35rem);
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
}

.highlight-replay-stack { grid-column: 3; grid-row: 1; justify-self: end; max-width: 16rem; text-align: right; }
.highlight-replay-stack small { display: block; color: var(--replay-gold); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.highlight-replay-stack span { display: block; overflow: hidden; margin-top: .15rem; padding: .15rem .35rem; border: 1px solid rgba(116,181,214,.4); border-radius: .25rem; color: #d6eaf5; background: rgba(37,75,97,.45); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }

.highlight-replay-console {
    margin: 1rem 0 0;
    padding: .9rem clamp(.75rem, 2vw, 1.5rem);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .85rem;
    background: var(--replay-panel);
}

.highlight-replay-controls { display: flex; align-items: center; justify-content: center; gap: .35rem; }
.highlight-replay-controls button,
.highlight-replay-speed select {
    min-width: 2.4rem;
    min-height: 2.35rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: .42rem;
    color: #ddd;
    background: rgba(255,255,255,.06);
    cursor: pointer;
}
.highlight-replay-controls button:hover { color: #fff; border-color: rgba(229,189,99,.55); background: rgba(229,189,99,.1); }
.highlight-replay-controls button:focus-visible,
.highlight-replay-speed select:focus-visible,
.highlight-replay-progress input:focus-visible { outline: 2px solid var(--replay-gold); outline-offset: 2px; }
.highlight-replay-controls .highlight-replay-play { display: flex; align-items: center; justify-content: center; gap: .42rem; min-width: 6rem; color: #18160e; border-color: var(--replay-gold); background: var(--replay-gold); font-weight: 800; }
.highlight-replay-speed { display: flex; align-items: center; gap: .4rem; margin-left: .7rem; color: var(--replay-muted); font-size: .7rem; text-transform: uppercase; }
.highlight-replay-speed select { min-height: 2rem; padding: 0 .35rem; color: #fff; }

.highlight-replay-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem; margin-top: .8rem; }
.highlight-replay-progress input { width: 100%; accent-color: var(--replay-gold); }
.highlight-replay-progress span { min-width: 4.8rem; color: var(--replay-muted); font: 700 .72rem/1 sans-serif; text-align: right; }

.highlight-replay-timeline { display: flex; align-items: center; gap: 3px; overflow-x: auto; min-height: 1.8rem; margin-top: .2rem; padding: .35rem .1rem; scrollbar-width: thin; }
.highlight-replay-timeline__event { width: 8px; min-width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #59615d; cursor: pointer; transition: transform .15s, background .15s; }
.highlight-replay-timeline__event:hover { transform: scale(1.6); }
.highlight-replay-timeline__event--cast,
.highlight-replay-timeline__event--resolve { background: var(--replay-blue); }
.highlight-replay-timeline__event--damage,
.highlight-replay-timeline__event--attack,
.highlight-replay-timeline__event--block { background: var(--replay-red); }
.highlight-replay-timeline__event--land { background: var(--replay-green); }
.highlight-replay-timeline__event--outcome { width: 12px; min-width: 12px; height: 12px; background: var(--replay-gold); }
.highlight-replay-timeline__event.is-current { outline: 2px solid #fff; outline-offset: 2px; transform: scale(1.25); }

.highlight-replay-shortcuts { margin: .25rem 0 0; color: #777d78; font-size: .65rem; text-align: center; }
.highlight-replay-about { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; margin: 1rem clamp(.25rem, 2vw, 2rem) 0; color: #8d918c; font-size: .78rem; }
.highlight-replay-about strong { color: #bbbdb6; }
.highlight-replay-about p { margin: 0; }

.daily-highlight-replay-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .65rem;
    padding: .58rem .85rem;
    border: 1px solid rgba(203,163,79,.55);
    border-radius: 999px;
    color: #f0d79c;
    background: rgba(203,163,79,.09);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .03em;
}
.daily-highlight-replay-link:hover { color: #fff2ce; background: rgba(203,163,79,.16); text-decoration: none; }

@keyframes replay-caption-in {
    from { opacity: .25; transform: translateY(.25rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes replay-damage {
    0%, 100% { filter: none; }
    35% { filter: brightness(1.35) saturate(1.2); }
}

@media (max-width: 700px) {
    .highlight-replay-header { align-items: center; gap: 1rem; }
    .highlight-replay-result { min-width: 6.5rem; }
    .highlight-replay-stage { min-height: 590px; grid-template-rows: auto minmax(115px, auto) auto minmax(115px, auto) auto; border-radius: .8rem; }
    .highlight-replay-player { padding: .55rem .65rem; }
    .highlight-replay-player__avatar { display: none; }
    .highlight-replay-zones { gap: .25rem; }
    .highlight-replay-zone { min-width: 2.6rem; display: flex; align-items: center; justify-content: space-between; }
    .highlight-replay-zone b { font-size: 0; }
    .highlight-replay-zone b::first-letter { font-size: .68rem; }
    .highlight-replay-zone em { display: none; }
    .highlight-replay-center { grid-template-columns: auto 1fr; gap: .45rem; padding: .45rem .65rem; }
    .highlight-replay-caption { grid-column: 2; font-size: .95rem; text-align: left; }
    .highlight-replay-stack { display: none; }
    .highlight-replay-card-group { width: 55px; flex-basis: 55px; margin: 0 -.35rem; }
    .highlight-replay-card-group.has-attachments { margin-right: .45rem; }
    .highlight-replay-card-group:hover { transform: none; }
    .highlight-replay-attachment-label { right: -.45rem; bottom: -.65rem; max-width: 72px; }
    .highlight-replay-card { width: 55px; flex-basis: 55px; }
    .highlight-replay-card:hover { transform: none; }
    .highlight-replay-card.is-tapped:hover { transform: rotate(9deg); }
    .highlight-replay-speed { margin-left: .15rem; }
    .highlight-replay-speed > span { display: none; }
    .highlight-replay-shortcuts { display: none; }
    .highlight-replay-about { display: block; }
    .highlight-replay-about strong { display: block; margin-bottom: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .highlight-replay-stage,
    .highlight-replay-caption,
    .highlight-replay-card { animation: none !important; transition: none !important; }
    .highlight-replay-card:hover { transform: none; }
}