/* ═══════════════════════════════════════════════════════
   GARIX.IO — replay.css
   Ícono de Replays (menú principal, junto a .settings-btn),
   ReplaysPanel.jsx (librería de clips) y ReplayViewer.jsx
   (overlay de reproducción).
   ═══════════════════════════════════════════════════════ */

/* ── Ícono del menú principal ── No vive en el HUD in-game: es la misma
   familia de controles utilitarios que Settings/Shop/Skins. Reposicionado
   debajo de .topbar (layout.css, rediseño de navegación Fase 1, pedido
   explícito del usuario): antes vivía junto a .settings-btn (fixed
   top-right, retirado de index.html — Settings se mudó a esa barra
   nueva), ahora sin ese vecino se queda solo, así que en vez de flotar a
   la misma altura y chocar con la barra, baja a top:72px (56px de alto de
   .topbar + 16px de aire) manteniéndose en la esquina superior derecha. */
.replays-btn {
    position: fixed;
    top: 72px;
    right: 24px;
    z-index: 10;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    padding: 4px;
}

.replays-btn svg {
    width: 24px;
    height: 24px;
}

.replays-btn:hover {
    color: var(--text);
}

@media (max-width: 640px) {
    .replays-btn {
        top: 66px;
        right: 14px;
    }
}

/* ── ReplaysPanel (librería) — reusa .shop-modal/.shop-modal__content/
   .shop-header/.shop-title/.shop-subtitle/.shop-close-btn (modals.css) tal
   cual, mismo modal que Shop/Skins; acá solo lo específico del contenido.
   Pedido explícito del usuario: la lista ya no va DEBAJO de los settings,
   sino AL LADO — modal más ancho, layout de 2 columnas. ── */
.replays-modal__content {
    max-width: 780px;
    /* Pedido explícito del usuario ("no me gustan esos scrolls, que se
       ajuste bien todo"): más alto que el 85vh que hereda de
       .shop-modal__content (Shop/Skins se quedan en 85vh — este panel es
       el único con una columna de settings que no cabía) — junto con la
       columna más angosta+compacta de abajo, alcanza para no necesitar
       scroll en pantallas normales. */
    max-height: 92vh;
}

.replays-body {
    display: flex;
    /* Bug real reportado ("no se alcanza a ver el import"): con
       align-items:flex-start, .replays-settings-col crecía a su alto de
       contenido natural sin ningún límite — apenas ese contenido (más
       los checkboxes/labels que se fueron agrandando en rondas
       anteriores) superaba el alto disponible del modal
       (.shop-modal__content: max-height:85vh; overflow:hidden), el botón
       "Import replay file" quedaba directamente recortado, invisible.
       `stretch` (el default, pero lo dejamos explícito) le da a la
       columna una altura ACOTADA real — la que le sobra al lado de
       .replays-list — de la que recién ahí tiene sentido pedirle scroll
       propio (ver overflow-y abajo). min-height:0 es el gotcha de
       flexbox de siempre: sin esto, un hijo flex nunca se achica por
       debajo de su contenido, así que "acotada" no alcanzaría por sí
       sola. */
    align-items: stretch;
    gap: 22px;
    padding: 2px 22px 16px;
    flex: 1;
    min-height: 0;
}

/* Pedido explícito del usuario: "un poco más de espacio" (210 -> 250px),
   después "no me gustan esos scrolls, que se ajuste bien todo" — 250px ya
   no alcanzaba para "Show recording dot in HUD" con el checkbox/label
   más grandes de las últimas rondas, y sin overflow-x explícito, el
   overflow-y:auto de acá hacía que el navegador calculara overflow-x:auto
   TAMBIÉN (regla real de CSS: un eje en "auto"/"hidden" fuerza al otro
   eje, si estaba en "visible", a pasar a "auto") — de ahí la barra
   horizontal fea del reporte, no algo que se pidió. Más ancho (270px) +
   overflow-x:hidden explícito lo cierran los dos a la vez. */
.replays-settings-col {
    flex: 0 0 270px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 18px;
    border-right: 1px solid var(--border-light);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Filas más compactas SOLO acá (selector más específico que .setting-item
   a secas, así el resto de Settings no cambia) — junto con el modal más
   alto de arriba, esto es lo que evita necesitar scroll en pantallas
   normales sin tener que volver a achicar la fuente/el checkbox. */
.replays-settings-col .setting-item {
    padding: 7px 4px;
}

.replays-settings-col::-webkit-scrollbar {
    width: 6px;
}
.replays-settings-col::-webkit-scrollbar-track {
    background: transparent;
}
.replays-settings-col::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}
.replays-settings-col::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.replays-hotkey-hint {
    /* Pedido explícito del usuario: "un poquito más grande aún". */
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.4;
}

.replays-hotkey-hint kbd {
    background: var(--bg-row);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-family: inherit;
    color: var(--text-secondary);
}

.replays-list-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.replays-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}

.replays-list-header label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

/* Agrupa Delete selected (condicional) + Import (siempre visible) — pedido
   explícito del usuario en la auditoría visual/UX de este panel: Import
   antes vivía en la columna de settings de la izquierda, empujado al fondo
   por .replays-footer, desconectado del lugar donde en realidad actúa (la
   lista). Import queda SIEMPRE a la derecha, Delete selected aparece a su
   izquierda solo cuando hay selección — así Import no salta de posición al
   seleccionar/deseleccionar filas. */
.replays-list-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Checkbox "Select all" + el de cada fila — mismo cuadrado azul con
   tilde que .setting-item input[type=checkbox] (settings.css), pedido
   explícito del usuario ("le falta el css al select all... y a las
   filas"): antes eran checkboxes nativos sin estilo, únicos elementos sin
   la identidad visual del resto del panel. */
.replays-list-header input[type="checkbox"],
.replays-row__checkbox {
    appearance: none;
    -webkit-appearance: none;
    /* Pedido explícito del usuario: "un poquito más grande aún". */
    width: 18px;
    height: 18px;
    background: var(--bg-row);
    border: 1.5px solid var(--border-light);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
    outline: none;
    margin: 0;
}

.replays-list-header input[type="checkbox"]:hover,
.replays-row__checkbox:hover {
    border-color: var(--text-muted);
}

.replays-list-header input[type="checkbox"]::before,
.replays-row__checkbox::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001824' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    opacity: 0;
    transform: scale(0.6);
    transition: var(--transition);
}

.replays-list-header input[type="checkbox"]:checked,
.replays-row__checkbox:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.replays-list-header input[type="checkbox"]:checked::before,
.replays-row__checkbox:checked::before {
    opacity: 1;
    transform: scale(1);
}

.replays-list-header input[type="checkbox"]:disabled {
    opacity: 0.4;
    cursor: default;
}

.replays-bulk-delete-btn {
    background: rgba(255, 60, 60, 0.15);
    color: #ff8080;
    border: none;
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.replays-bulk-delete-btn:hover {
    background: rgba(255, 60, 60, 0.28);
}

/* Import — reubicado acá desde la columna de settings (ver
   .replays-list-header__actions más arriba). Mismo tratamiento neutro que
   .replays-pager-btn: es una acción útil pero secundaria frente a Play
   (ver .replays-icon-btn--play más abajo), no compite por atención con
   nada de esta fila. */
.replays-import-btn {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: var(--bg-row);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: var(--transition);
}

.replays-import-btn:hover:not(:disabled) {
    border-color: var(--text-muted);
    color: var(--text);
}

.replays-import-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Scroll propio de la lista — mismo tratamiento que #chat-messages
   (chat.css): scrollbar fina, translúcida, sin flechas de sistema. */
.replays-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 48vh;
    overflow-y: auto;
    padding-right: 6px;
}

.replays-list::-webkit-scrollbar {
    width: 6px;
}
.replays-list::-webkit-scrollbar-track {
    background: transparent;
}
.replays-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}
.replays-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Estados de la lista (cargando/error/vacío) — pedido explícito del
   usuario en la auditoría visual/UX: antes era un solo `<div>` de texto
   plano ("No saved replays yet.") sin ícono ni distinción entre "todavía
   cargando", "no hay nada" y "algo falló" (ver listStatus,
   ReplaysPanel.jsx). Columna centrada con el mismo ClipIcon que la
   miniatura de cada fila — reconocible como "esto es sobre replays", no
   un mensaje de sistema genérico. */
.replays-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 28px 0;
}

.replays-empty svg {
    opacity: 0.35;
    margin-bottom: 2px;
}

.replays-empty__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.replays-empty__hint {
    font-size: 11.5px;
    color: var(--text-muted);
}

/* Retry (estado de error) reusa .replays-pager-btn — mismo botón neutro
   que ya existe en este panel, sin inventar un tercer estilo de botón. */
.replays-empty .replays-pager-btn {
    margin-top: 4px;
}

/* Pedido explícito del usuario: "que sea por páginas, para que no sea una
   lista muy grande" — reemplaza el scroll interno como forma principal
   de ver clips viejos (.replays-list igual conserva su max-height/scroll
   como red de seguridad, ver arriba). Mismo lenguaje visual que
   .replays-confirm-cancel (botones neutros, borde sutil). */
.replays-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 10px;
}

.replays-pager-btn {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: var(--bg-row);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.replays-pager-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
}

.replays-pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.replays-pager-info {
    font-size: 12px;
    color: var(--text-secondary);
}

.replays-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-row);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.replays-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.replays-row__thumb {
    flex: none;
    width: 64px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
}

/* ClipIcon (ReplaysPanel.jsx) en vez del emoji 🎬 que había antes — mismo
   criterio ya aplicado en Shop (BoostGem reemplazando 🎁/🗺️). */
.replays-row__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    opacity: 0.4;
}

.replays-row__main {
    flex: 1;
    min-width: 0;
}

.replays-row__name {
    /* Pedido explícito del usuario: "un poquito más grande aún". */
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.replays-row__name:hover .replays-row__rename-icon {
    opacity: 1;
}

.replays-row__rename-icon {
    opacity: 0;
    font-size: 11px;
    color: var(--text-muted);
    transition: var(--transition);
}

.replays-row__name-input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    padding: 2px 6px;
}

/* Bug real reportado ("no alcanzo a ver cuanto pesa"): antes era un solo
   nodo de texto con overflow:hidden + ellipsis — en la columna angosta del
   panel, el string completo ("fecha · duración · tamaño") no entraba y el
   navegador corta desde el final, que es justo donde vive el tamaño. Ahora
   es un flex row: la fecha (.replays-row__meta-date) es la única parte que
   se achica y trunca con ellipsis; duración+tamaño (.replays-row__meta-fixed)
   nunca se cortan. */
.replays-row__meta {
    /* Pedido explícito del usuario: "un poquito más grande aún". */
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    min-width: 0;
}

.replays-row__meta-date {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.replays-row__meta-fixed {
    flex: none;
    white-space: nowrap;
}

.replays-row__actions {
    display: flex;
    gap: 4px;
    flex: none;
}

.replays-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.replays-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.replays-icon-btn--danger:hover {
    background: rgba(255, 60, 60, 0.15);
    color: #ff5050;
}

/* Play — pedido explícito del usuario ("¿hay elementos que parecen tener
   demasiada importancia o demasiada poca?"): antes era un ghost-button
   idéntico a Export/Delete, aunque sea la acción principal de la fila (de
   todo el panel, en rigor). Relleno sólido de acento, mismo lenguaje que
   .restore-btn--primary (settings.css) — una acción primaria se nota por
   color, no solo por estar a la izquierda de las otras dos. */
.replays-icon-btn--play {
    background: var(--accent);
    color: #001824;
}

.replays-icon-btn--play:hover:not(:disabled) {
    background: #33c3ff;
    color: #001824;
}

.replays-icon-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

@media (max-width: 640px) {
    .replays-body {
        flex-direction: column;
    }
    .replays-settings-col {
        flex: none;
        width: 100%;
        padding-right: 0;
        padding-bottom: 14px;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
}

/* ── Confirmación antes de borrar ── mismo lenguaje visual que el confirm
   de SkinsModal.jsx (DeleteSkinConfirm): overlay + tarjeta centrada,
   Cancel/Delete. z-index por encima de .shop-modal (2000). ── */
.replays-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade-in var(--dur-modal) var(--ease-out);
}

/* Radio 8px→16px (auditoría visual/UX, pedido explícito del usuario:
   consistencia con Settings/Shop) — el resto de los popups de
   confirmación/alerta centrados ya está en esa familia (.import-notification,
   settings.css, 16px; .stripe-success-popup, modals.css, 18px); este era
   el único que había quedado en el radio chato viejo. */
.replays-confirm-box {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 22px 24px;
    max-width: 300px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: pop-in var(--dur-modal) var(--ease-out);
}

.replays-confirm-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.replays-confirm-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 18px;
    line-height: 1.5;
}

.replays-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.replays-confirm-actions button {
    flex: 1;
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
}

.replays-confirm-cancel {
    background: var(--bg-row);
    border-color: var(--border-light) !important;
    color: var(--text);
}

.replays-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
}

.replays-confirm-delete {
    background: #ff3b3b;
    color: #fff;
}

.replays-confirm-delete:hover {
    background: #ff5c5c;
}

/* ── ReplayViewer (overlay de reproducción) ── */
.replay-viewer {
    position: fixed;
    inset: 0;
    z-index: 1500; /* debajo de los modales (2000+), encima del HUD (90) y del canvas */
    pointer-events: none; /* el mundo/HUD de abajo sigue recibiendo el mouse salvo en los controles */
}

.replay-viewer > * {
    pointer-events: auto;
}

/* Punto rojo (ReplayIndicator.jsx, compartido entre "viendo un replay" y
   "grabando en vivo") — sin texto (competía con el HUD de stats,
   top-left), a la izquierda de la leaderboard (#leaderboard-container:
   top:10px; right:10px; width:165px, ver leaderboard.css). */
.replay-badge {
    position: fixed;
    top: 16px;
    right: 185px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff3b3b;
    box-shadow: 0 0 6px rgba(255, 59, 59, 0.8);
    z-index: 91; /* mismo nivel que el resto del HUD (stats/leaderboard/minimapa: 90) */
    pointer-events: none;
}

.replay-desync-banner {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(120, 80, 0, 0.85);
    color: #ffe9b0;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    z-index: 1;
}

/* Pedido explícito del usuario: vive DENTRO de .replay-controlbar (ver
   ReplayViewer.jsx) — antes era fixed top-right y quedaba encima de la
   leaderboard, y nunca se ocultaba con el resto de los controles. Ya no
   necesita su propio position/top/right: es un hijo de flex más. Mismo
   lenguaje que .restore-btn--danger (settings.css): borde + fondo
   transparente, no un chip translúcido genérico — "salir" es una acción
   real, no un dato del HUD.*/
.replay-exit-btn {
    background: transparent;
    color: #ff6b6b;
    border: 1px solid rgba(255, 60, 60, 0.35);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: var(--transition);
}

.replay-exit-btn:hover {
    background: rgba(255, 60, 60, 0.12);
    border-color: rgba(255, 60, 60, 0.55);
}

/* Barra de controles — mismo chip translúcido sin elevación que
   minimapa/leaderboard/stats (rgba(0,0,0,0.7), sin sombra ni borde). */
.replay-controlbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 14px;
    border-radius: var(--radius);
    opacity: 1;
    transition: opacity var(--dur-modal) var(--ease-out), transform var(--dur-modal) var(--ease-out);
}

.replay-controlbar--hidden {
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
}

/* Play/pause: acción primaria de la barra — mismo tratamiento que
   .restore-btn--primary (settings.css), azul sólido en vez de un chip
   translúcido genérico, para que se note que es EL control, no un dato
   más del HUD. */
.replay-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #001824;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.replay-icon-btn:hover {
    background: #33c3ff;
    border-color: #33c3ff;
}

.replay-scrubber {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 260px;
}

.replay-scrubber__input {
    flex: 1;
    accent-color: var(--accent);
}

.replay-time {
    font-size: 11px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
}

/* Mismo lenguaje que .sp-select (settings.css): fondo bg-card + borde
   border-light + radio-sm, no un overlay translúcido sin borde — pedido
   explícito del usuario ("que sea consistente con el HUD principal,
   el panel de settings ya lo es"). */
.replay-speed-select {
    background: var(--bg-card);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: var(--transition);
}

.replay-speed-select:hover {
    border-color: var(--text-muted);
}

.replay-speed-select:focus {
    outline: none;
    border-color: var(--accent-border);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

/* Selector de "a quién seguir" — pedido explícito del usuario ("ponle css
   al selector"): a diferencia del de velocidad (siempre "1×", corto),
   puede llevar nombres de jugador largos, así que necesita su propio
   ancho/truncado + una flecha propia en vez del chrome nativo del
   navegador (que en dark theme suele quedar negro sobre negro). */
.replay-follow-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--bg-card)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E")
        no-repeat right 8px center;
    background-size: 11px;
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 5px 22px 5px 10px;
    max-width: 150px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--transition);
}

.replay-follow-select:hover {
    border-color: var(--text-muted);
}

.replay-follow-select:focus {
    outline: none;
    border-color: var(--accent-border);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.replay-follow-select option {
    background: var(--bg-card);
    color: var(--text);
}

@media (max-width: 640px) {
    .replay-controlbar {
        flex-wrap: wrap;
        justify-content: center;
        width: calc(100% - 24px);
        bottom: 10px;
    }
    .replay-scrubber {
        min-width: 0;
        width: 100%;
        order: 3;
    }
    .replay-follow-select {
        max-width: 110px;
    }
}

/* ══════════════════════════════════════════
   PÁGINA de Replays (ReplaysPanel.jsx, vista 'replays' del menú) — mismo
   shell que Shop/Cosmetics/Settings (pages.css). La columna de grabación es
   la tarjeta lateral (.page-nav), la lista ocupa el resto con su propio
   scroll.
   ══════════════════════════════════════════ */
.replays-page__layout {
    flex: 1;
    min-height: 0;
    display: flex;
}

.replays-page .replays-body {
    flex: 1;
    min-height: 0;
    gap: 32px;
    padding: 0;
}

.replays-page .replays-settings-col {
    flex: 0 0 330px;
    align-self: flex-start;
    max-height: 100%;
    padding: 14px 12px 12px;
    border-right: 1px solid var(--border);
}

.replays-page .replays-settings-col .setting-item {
    padding: 7px 4px;
}

.replays-page .replays-settings-col .setting-item label {
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.replays-page .replays-list-col {
    gap: 12px;
}

.replays-page .replays-list-header {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(var(--bg-card-rgb), 0.9);
    font-size: 12px;
}

.replays-page .replays-list {
    flex: 1;
    min-height: 0;
    max-height: none;
    gap: 6px;
}

.replays-page .replays-empty {
    padding: 48px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(var(--bg-card-rgb), 0.9);
}

/* Botón ▷ de la barra superior con la página abierta. */
.topbar__icon-btn--active {
    color: var(--accent);
    background: var(--accent-dim);
}