.mini-spectator {
    --mini-card-width: 3.75rem;
    --mini-border: #3a3f35;
    --mini-surface: #191d19;
    --mini-muted: #b7b8ac;
    box-sizing: border-box;
    inset: auto 0 0 auto;
    margin: 0 .75rem .75rem 0;
    width: min(40rem, calc(100vw - 1.5rem));
    height: min(32rem, calc(100dvh - 1.5rem));
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--mini-border);
    border-radius: .85rem;
    color: var(--replay-ink);
    background: #111510;
    box-shadow: 0 .75rem 3rem #0009;
    color-scheme: dark;
}

.mini-spectator[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.mini-spectator::backdrop { background: #080b087a; }

.mini-spectator.is-expanded {
    --mini-card-width: clamp(3.25rem, min(17dvh, 13vw), 12rem);
    inset: 0;
    margin: 0;
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
}

.mini-spectator-toolbar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    border-bottom: 1px solid var(--mini-border);
    background: var(--mini-surface);
}

.mini-spectator-toolbar h2 {
    flex: 1 1 auto;
    margin: 0;
    font: 700 .95rem/1.2 system-ui, sans-serif;
}

.mini-spectator.is-expanded .mini-spectator-toolbar h2 { font-size: 1.1rem; }

.mini-spectator-toolbar button,
.mini-spectator-launch {
    min-height: 2.125rem;
    padding: .3rem .65rem;
    border: 1px solid #57584a;
    border-radius: .4rem;
    color: var(--replay-ink);
    background: #272a23;
    font: 650 .8rem/1.2 system-ui, sans-serif;
    white-space: nowrap;
    cursor: pointer;
}

.mini-spectator-toolbar button:hover,
.mini-spectator-launch:hover {
    border-color: var(--replay-gold);
    color: #ffe5ae;
    background: #353123;
}

.mini-spectator-toolbar button:focus-visible,
.mini-spectator-launch:focus-visible,
.arena-spectator-options select:focus-visible {
    outline: 2px solid var(--replay-gold);
    outline-offset: 2px;
}

.mini-spectator-toolbar [data-spectator-close] {
    width: 2.125rem;
    padding: 0;
    font-size: 1.35rem;
}

.mini-spectator [data-spectator-content] {
    display: grid;
    min-height: 0;
    min-width: 0;
    padding: .5rem;
}

.mini-spectator [data-spectator-content]:not(:has(.highlight-replay-shell)) {
    place-content: center;
    color: var(--mini-muted);
}

.mini-spectator .highlight-replay-shell {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
}

.mini-spectator-notice {
    margin: 0;
    color: var(--mini-muted);
    font-size: .75rem;
}

.mini-spectator .highlight-replay-stage {
    flex: 1 1 0;
    grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
    min-height: 0;
    border-radius: .5rem;
    border-color: var(--mini-border);
    background: radial-gradient(ellipse at center, #2c4032, #17251d 85%);
    box-shadow: none;
}

.mini-spectator .highlight-replay-stage::before { display: none; }

.mini-spectator .highlight-replay-player {
    gap: .5rem;
    padding: .3rem .6rem;
    background: #111b14;
}

.mini-spectator .highlight-replay-player__identity { gap: .45rem; }
.mini-spectator .highlight-replay-player__identity strong { font-size: .85rem; }
.mini-spectator.is-expanded .highlight-replay-player__identity strong {
    font-size: clamp(.88rem, 2.1dvh, 1.15rem);
}
.mini-spectator .highlight-replay-player__identity small,
.mini-spectator .highlight-replay-player__avatar,
.mini-spectator .highlight-replay-zone em { display: none; }

.mini-spectator .highlight-replay-life {
    min-width: 1.9rem;
    height: 1.6rem;
    margin: 0;
    border-color: #a55b51;
    border-radius: .3rem;
    background: #60332c;
    font-size: .95rem;
}

.mini-spectator .highlight-replay-zones { flex: 0 0 auto; gap: .25rem; }
.mini-spectator .highlight-replay-zone {
    display: flex;
    gap: .3rem;
    min-width: 0;
    padding: .15rem .3rem;
    color: var(--mini-muted);
    background: #0d140f;
}

.mini-spectator .highlight-replay-field {
    display: flex;
    align-items: center;
    justify-content: safe center;
    gap: .65rem;
    min-width: 0;
    padding: .35rem .7rem;
    overflow: auto;
    scrollbar-width: thin;
}

.mini-spectator .highlight-replay-field:not(:has(.highlight-replay-card-group))::after {
    content: "No permanents";
    color: #acb9ae;
    font-size: .75rem;
}

.mini-spectator .highlight-replay-row {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: .45rem;
    min-height: 0;
    padding: 0;
}

.mini-spectator .highlight-replay-row:empty { display: none; }
.mini-spectator .highlight-replay-row:not(:empty) + .highlight-replay-row:not(:empty) {
    padding-inline-start: .65rem;
    border-inline-start: 1px solid #ffffff25;
}

.mini-spectator .highlight-replay-row .highlight-replay-card-group {
    flex: 0 0 var(--mini-card-width);
    width: var(--mini-card-width);
    margin: 0;
    transform: none;
    filter: none;
}

.mini-spectator .highlight-replay-row .highlight-replay-card-group.has-attachments { margin-inline-end: .65rem; }
.mini-spectator .highlight-replay-card__art img { object-fit: contain; }
.mini-spectator .highlight-replay-card > strong { font-size: .55rem; }
.mini-spectator.is-expanded .highlight-replay-card > strong { font-size: clamp(.55rem, 1.3dvh, .85rem); }

.mini-spectator .highlight-replay-center {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .3rem .6rem;
    min-height: 0;
    padding: .4rem .6rem;
    border-block: 1px solid #ffffff17;
    background: #121912;
}

.mini-spectator .highlight-replay-turn strong { font-size: .7rem; }
.mini-spectator .highlight-replay-caption {
    max-block-size: 3.75em;
    overflow: auto;
    font-size: clamp(.85rem, 1.8vw, 1.03rem);
    text-align: start;
    overflow-wrap: anywhere;
}
.mini-spectator.is-expanded .highlight-replay-center {
    grid-template-columns: minmax(6rem, 1fr) minmax(0, 5fr) minmax(6rem, 1fr);
}
.mini-spectator.is-expanded .highlight-replay-caption {
    font-size: clamp(.9rem, 2vw, 1.55rem);
    text-align: center;
}
.mini-spectator .highlight-replay-stack { display: block; min-width: 0; max-width: min(10rem, 23vw); }
.mini-spectator .highlight-replay-stack[hidden] { display: none; }
.mini-spectator .highlight-replay-stack [data-replay-stack-items] { max-height: 2.6rem; overflow: auto; }

.mini-spectator .highlight-replay-console {
    margin: 0;
    padding: .45rem .6rem;
    border-color: var(--mini-border);
    border-radius: .5rem;
    background: var(--mini-surface);
}

.mini-spectator .highlight-replay-controls { gap: .3rem; }
.mini-spectator .highlight-replay-controls button { min-width: 2rem; min-height: 2.125rem; }
.mini-spectator .highlight-replay-controls .highlight-replay-play { min-width: 5rem; }
.mini-spectator .highlight-replay-controls .highlight-replay-play:hover {
    color: #18160e;
    background: #f1cf83;
}
.mini-spectator .highlight-replay-progress { gap: .5rem; margin-top: .25rem; }
.mini-spectator .highlight-replay-progress span { min-width: 3.5rem; }
.mini-spectator .highlight-replay-shortcuts,
.mini-spectator:not(.is-expanded) .highlight-replay-timeline { display: none; }

.arena-spectator-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-top: .6rem;
}

.arena-spectator-options select {
    flex: 1 1 11rem;
    min-width: 0;
    min-height: 2.125rem;
    max-width: 100%;
    padding: .3rem .35rem;
    border: 1px solid #57584a;
    border-radius: .4rem;
    color: var(--replay-ink);
    background: #191d19;
    font-size: .8rem;
    text-overflow: ellipsis;
    color-scheme: dark;
}

@media (max-width: 520px) {
    .mini-spectator:not(.is-expanded) {
        margin: 0 .4rem .4rem 0;
        width: calc(100vw - .8rem);
    }
    .mini-spectator.is-expanded { --mini-card-width: clamp(3.25rem, 17vw, 5rem); }
    .mini-spectator.is-expanded .highlight-replay-center {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
    .mini-spectator.is-expanded .highlight-replay-caption { text-align: start; }
    .mini-spectator .highlight-replay-zone b { font-size: 0; }
    .mini-spectator .highlight-replay-zone b::first-letter { font-size: .68rem; }
}

@media (max-height: 525px) {
    .mini-spectator { --mini-card-width: clamp(2.4rem, 12dvh, 3.5rem); }
    .mini-spectator.is-expanded { --mini-card-width: clamp(2.55rem, 14dvh, 4.25rem); }
    .mini-spectator .highlight-replay-timeline { display: none; }
}