/* Controls stack above the shell, so the shell must take the remaining height
   rather than 100% - or else wrapped controls push P1's board off-screen. */
.replay-page {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1.2vw, 12px);
}

.replay-page > .replay-controls {
    flex: 0 0 auto;
}

.replay-page > .game-shell {
    flex: 1 1 0;
    height: auto;
}

.replay-loader {
    margin: auto;
    display: grid;
    gap: 16px;
    justify-items: center;
    border-style: dashed;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.replay-loader p {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
    text-align: center;
}

.replay-loader.drag-over {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.08);
}

.replay-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.replay-controls > button,
.replay-speed > button {
    min-height: 36px;
    margin: 0;
    padding: 0 6px;
}

/* Reserve the longer label's width so toggling playback never reflows the toolbar. */
.replay-playback-toggle {
    flex: 0 0 auto;
    width: calc(7ch + 12px);
}

.replay-tick-counter {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.replay-controls p {
    margin: 0;
}

/* Long bot names would wrap and eat board height on phones; full text stays in the tooltip. */
.replay-players {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.replay-speed {
    display: flex;
    gap: 4px;
}

.replay-speed .selected {
    outline: 2px solid var(--accent);
}

/* Shares .host-confirm-overlay/.host-confirm-dialog; only scrolls on short screens. */
.replay-actions-dialog {
    max-height: 100%;
    overflow-y: auto;
}

.replay-actions-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.replay-actions-dialog h2,
.replay-actions-dialog p {
    margin: 0;
}

.replay-actions-dialog h2 {
    font-size: 1.2rem;
}

.replay-seek, .replay-takeover {
    display: grid;
    gap: 8px;
}

.replay-seek-controls {
    display: flex;
    gap: 8px;
}

.replay-seek-controls input {
    flex: 1;
    min-width: 0;
}

.replay-takeover select {
    width: 100%;
    min-width: 0;
}

.replay-takeover > button {
    margin-top: 4px;
}

.replay-help {
    color: var(--muted);
    font-size: 0.85rem;
}