/* ============================================================
   Vitisign — Player TV (lobby de pareo + stub del player)
   Standalone. Pensado para Android TV WebView: layout que entra
   en 720p y se ve cómodo en 1080p, sin scroll, focus visible
   para D-pad.

   Escala: ~1.5x sobre /play/. Más grande sería contraproducente
   en 720p (overflow) y "gritón" en cualquier resolución.
   ============================================================ */

:root {
    --bg:            #000;
    --bg-soft:       #0a0a14;
    --text:          #f7f8fc;
    --text-soft:     rgba(247, 248, 252, .78);
    --text-mute:     rgba(247, 248, 252, .52);
    --accent-a:      #6366f1;
    --accent-b:      #a855f7;
    --accent-c:      #22d3ee;
    --grad:          linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #22d3ee 100%);
    --border:        rgba(255, 255, 255, .14);
    --border-strong: rgba(255, 255, 255, .30);
    --danger-bg:     rgba(239, 68, 68, .14);
    --danger-bd:     rgba(239, 68, 68, .50);
    --focus-ring:    0 0 0 6px rgba(99, 102, 241, .42);
}

*, *::before, *::after { box-sizing: border-box; }

/* Reset: el atributo HTML `hidden` debe ganarle a cualquier
   `display` que ponga una regla de clase (sin esto, `.lobby__resume`
   con `display: flex` queda visible aunque el JS le ponga `hidden`). */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

body.play-player,
body.play-empty { cursor: none; }

/* ============================================================
   Stage del player — dos capas con crossfade
   ============================================================ */
.stage {
    position: fixed;
    inset: 0;
    background: var(--bg);
    overflow: hidden;
    z-index: 0;
}
.layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 400ms ease;
    will-change: opacity;
}
.layer.is-active { opacity: 1; }
.layer img,
.layer video {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    /* Muestra el medio completo conservando su proporción original: nunca
       recorta ni deforma. Cuando la proporción del medio no coincide con la
       de la pantalla (p. ej. una imagen horizontal en pantalla vertical),
       quedan barras en lugar de cortar contenido. */
    object-fit: contain;
    display: block;
}

/* ============================================================
   Orientación vertical (portrait) — render rotado 90°
   El TV está montado en vertical pero su salida sigue siendo
   horizontal, así que rotamos TODO el body: el stage, el HUD,
   el banner de red y los modales quedan coherentes de una. Como
   cada uno es position:fixed, al transformar el body éste pasa a
   ser su bloque contenedor y se reacomodan solos dentro del marco
   girado (100vh de ancho × 100vw de alto).

   El sentido del giro (-90deg) asume el TV rotado en sentido
   horario; si en tu montaje queda al revés, es cambiar a 90deg.
   ============================================================ */
body.is-portrait {
    position: fixed;
    top: 100%;
    left: 0;
    width: 100vh;    /* ancho del lienzo vertical = alto físico del panel */
    height: 100vw;   /* alto del lienzo vertical = ancho físico del panel */
    transform: rotate(-90deg);
    transform-origin: left top;
    overflow: hidden;
}

/* La vista vacía usa .tv con unidades de viewport (100vw/100vh), que
   siguen apuntando a la pantalla física y no al marco girado. Dentro del
   body rotado la atamos al 100% del marco para que centre bien en vertical. */
body.is-portrait .tv {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

/* ============================================================
   Empty state — "Sin contenido todavía" (vista play_empty.php)
   ============================================================ */
.empty__title {
    font-size: clamp(40px, 6vh, 72px);
    font-weight: 800;
    margin: 0 0 clamp(12px, 1.8vh, 22px);
    letter-spacing: -.025em;
    line-height: 1.05;
}
.empty__sub {
    color: var(--text-soft);
    font-size: clamp(22px, 3vh, 32px);
    margin: 0 0 clamp(28px, 4.4vh, 56px);
    line-height: 1.4;
    font-weight: 400;
}
.empty-card {
    display: inline-block;
    padding: clamp(20px, 3vh, 36px) clamp(28px, 4vw, 56px);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    max-width: 1000px;
}
.empty-card__lead {
    color: var(--text-soft);
    font-size: clamp(16px, 2.4vh, 22px);
    margin: 0 0 clamp(14px, 2.2vh, 22px);
    line-height: 1.5;
}
.empty-card__url {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(26px, 4vh, 48px);
    font-weight: 700;
    margin: 0;
    letter-spacing: .02em;
    line-height: 1.2;
    word-break: break-all;
}
.empty-card__host { color: var(--text-mute); }
.empty-card__path {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Vista vacía en navegador: URL como enlace a la gestión ──── */
.empty-card__link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: 12px;
    padding: 4px 10px;
    transition: box-shadow 160ms ease, transform 160ms ease;
}
.empty-card__link:hover {
    transform: scale(1.02);
}
.empty-card__link:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}
.empty-card__ext {
    flex: none;
    margin-left: clamp(10px, 1.4vw, 18px);
    width: clamp(24px, 3.4vh, 38px);
    height: clamp(24px, 3.4vh, 38px);
    color: var(--text-soft);
}
.empty-card__link:hover .empty-card__ext,
.empty-card__link:focus .empty-card__ext {
    color: var(--text);
}

/* ── Vista vacía en TV: QR a la URL de gestión ───────────────── */
.empty-qr__lead {
    color: var(--text-soft);
    font-size: clamp(20px, 3vh, 30px);
    margin: 0 0 clamp(20px, 3vh, 32px);
    line-height: 1.4;
}
.empty-qr {
    display: inline-block;
    background: #fff;
    border-radius: 24px;
    padding: clamp(16px, 2.4vh, 28px);
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .6),
                0 0 0 1px rgba(255, 255, 255, .1);
    margin: 0 auto clamp(20px, 3vh, 30px);
    line-height: 0;
}
.empty-qr svg {
    display: block;
    width: clamp(240px, 38vh, 400px);
    height: clamp(240px, 38vh, 400px);
}
.empty-qr__url {
    font-size: clamp(22px, 3.2vh, 38px);
}

/* En la vista de QR (TV) compactamos para caber en cualquier tamaño de
   pantalla sin recortar: ocultamos el ✦, achicamos títulos/márgenes y
   dimensionamos el QR con el menor entre ancho y alto disponibles. */
.play-empty.is-tv .player__mark { display: none; }
.play-empty.is-tv .empty__title {
    font-size: clamp(30px, 5.2vh, 60px);
    margin-bottom: clamp(6px, 1.2vh, 14px);
}
.play-empty.is-tv .empty__sub {
    font-size: clamp(17px, 2.6vh, 28px);
    margin-bottom: clamp(12px, 2.2vh, 24px);
}
.play-empty.is-tv .empty-qr__lead {
    font-size: clamp(16px, 2.6vh, 26px);
    margin-bottom: clamp(12px, 1.8vh, 20px);
}
.play-empty.is-tv .empty-qr {
    padding: clamp(12px, 1.8vh, 22px);
    margin-bottom: clamp(12px, 2vh, 22px);
}
.play-empty.is-tv .empty-qr svg {
    width: min(58vw, 36vh);
    height: min(58vw, 36vh);
}
.play-empty.is-tv .empty-qr__url {
    font-size: clamp(18px, 2.8vh, 34px);
}
.play-empty.is-tv .lobby__nav {
    margin-top: clamp(12px, 2vh, 22px);
}

/* ============================================================
   Banner de "Sin conexión a internet"
   ============================================================ */
.net-banner {
    position: fixed;
    top: clamp(12px, 2.4vh, 24px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: clamp(8px, 1.4vh, 12px) clamp(18px, 2.6vw, 28px);
    background: rgba(239, 68, 68, .18);
    border: 1px solid rgba(239, 68, 68, .45);
    color: #fecaca;
    border-radius: 999px;
    font-family: inherit;
    font-size: clamp(14px, 2vh, 18px);
    font-weight: 600;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}
/* Variante en esquina superior derecha, para el player: discreta, no tapa
   el contenido centrado ni domina la pantalla en un sitio público. */
.net-banner--corner {
    left: auto;
    right: clamp(12px, 2.4vw, 28px);
    transform: none;
    z-index: 70;
    font-size: clamp(13px, 1.8vh, 16px);
    padding: clamp(6px, 1.1vh, 10px) clamp(12px, 1.8vw, 18px);
}
.net-banner__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    animation: net-pulse 1.6s ease-in-out infinite;
}
@keyframes net-pulse {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}

/* ============================================================
   Layout — safe zone 4% desde cada borde, contenido centrado.
   ============================================================ */
.tv {
    min-height: 100vh;
    width: 100vw;
    padding: 4vh 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tv__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1280px;
    text-align: center;
}

/* ── Fondo: orbes difuminados que respiran ───────────────────── */
.tv__bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.tv__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    opacity: .30;
    animation: tv-orb 22s ease-in-out infinite alternate;
}
.tv__orb--a {
    width: 55vw; height: 55vw;
    top: -15vw; left: -10vw;
    background: var(--accent-a);
}
.tv__orb--b {
    width: 50vw; height: 50vw;
    bottom: -15vw; right: -10vw;
    background: var(--accent-b);
    animation-delay: -8s;
}
.tv__orb--c {
    width: 38vw; height: 38vw;
    top: 30vh; right: 25vw;
    background: var(--accent-c);
    animation-delay: -14s;
    opacity: .20;
}
@keyframes tv-orb {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -30px) scale(1.10); }
}

/* ============================================================
   Brand
   ============================================================ */
.tv__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(20px, 3vh, 32px);
    font-size: clamp(20px, 3vh, 30px);
    font-weight: 700;
}
.tv__brand-mark {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(28px, 4.4vh, 44px);
    line-height: 1;
}
.tv__brand-word {
    color: var(--text);
    letter-spacing: -.01em;
}
.tv__brand-tag {
    color: var(--text-mute);
    font-weight: 500;
    margin-left: 4px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
    font-size: clamp(14px, 2vh, 20px);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ============================================================
   Lobby — formulario de pareo
   ============================================================ */
.lobby__title {
    font-size: clamp(44px, 6.4vh, 64px);
    font-weight: 800;
    margin: 0 0 clamp(10px, 1.6vh, 18px);
    letter-spacing: -.02em;
    line-height: 1.08;
}
.lobby__sub {
    color: var(--text-soft);
    font-size: clamp(20px, 3vh, 30px);
    margin: 0 0 clamp(22px, 3.6vh, 40px);
    line-height: 1.4;
    font-weight: 400;
}
.lobby__error {
    background: var(--danger-bg);
    border: 2px solid var(--danger-bd);
    color: #fecaca;
    padding: clamp(14px, 2.2vh, 22px) clamp(20px, 3vw, 32px);
    border-radius: 16px;
    margin: 0 auto clamp(18px, 3vh, 32px);
    font-size: clamp(18px, 2.6vh, 26px);
    line-height: 1.4;
    max-width: 720px;
    text-align: left;
}
.lobby__error code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    color: #fff;
    padding: 2px 8px;
    background: rgba(0, 0, 0, .35);
    border-radius: 6px;
    margin: 0 2px;
}

.lobby__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 2.4vh, 28px);
    margin-bottom: clamp(18px, 3vh, 32px);
}
.lobby__input {
    width: 100%;
    max-width: 760px;
    padding: clamp(16px, 2.6vh, 28px) clamp(24px, 3vw, 40px);
    background: rgba(255, 255, 255, .05);
    border: 3px solid var(--border);
    border-radius: 18px;
    color: var(--text);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(38px, 6vh, 60px);
    font-weight: 700;
    letter-spacing: .12em;
    text-align: center;
    outline: none;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.lobby__input:focus {
    border-color: var(--accent-a);
    background: rgba(99, 102, 241, .10);
    box-shadow: var(--focus-ring);
}

.lobby__btn {
    padding: clamp(14px, 2.2vh, 22px) clamp(36px, 5vw, 64px);
    background: var(--grad);
    color: var(--text);
    border: 3px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: clamp(22px, 3.2vh, 34px);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, .35),
                0 16px 36px -10px rgba(99, 102, 241, .55);
    transition: transform 160ms ease, box-shadow 220ms ease, border-color 160ms ease;
}
.lobby__btn:focus {
    outline: none;
    border-color: var(--text);
    transform: scale(1.04);
    box-shadow: 0 0 0 3px var(--text),
                0 20px 44px -10px rgba(99, 102, 241, .70);
}
.lobby__btn:disabled {
    background: rgba(255, 255, 255, .08);
    color: var(--text-mute);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.lobby__hint {
    color: var(--text-mute);
    font-size: clamp(16px, 2.4vh, 22px);
    margin: 0;
    line-height: 1.5;
}
.lobby__hint code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    color: var(--text-soft);
    padding: 0 4px;
}

/* ── Botones secundarios (Mis pantallas / ¿Cómo creo...?) ────── */
.lobby__nav {
    margin-top: clamp(18px, 2.8vh, 32px);
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.lobby__help-btn {
    margin-top: 0;
    padding: clamp(10px, 1.6vh, 16px) clamp(22px, 3vw, 36px);
    background: transparent;
    color: var(--text-soft);
    border: 2px solid var(--border-strong);
    border-radius: 999px;
    font-family: inherit;
    font-size: clamp(15px, 2.2vh, 20px);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.lobby__help-btn:focus {
    outline: none;
    border-color: var(--accent-a);
    color: var(--text);
    transform: scale(1.03);
    box-shadow: var(--focus-ring);
}

/* ============================================================
   Menú principal del lobby (Crear / Mis pantallas / Código)
   ============================================================ */
.lobby__menu-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 2vh, 22px);
    margin: clamp(10px, 2vh, 26px) 0 clamp(16px, 2.4vh, 26px);
}
.lobby__menu-btn {
    width: 100%;
    max-width: 540px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    padding: clamp(16px, 2.4vh, 26px) clamp(32px, 4.5vw, 60px);
    border-radius: 999px;
    border: 3px solid transparent;
    font-family: inherit;
    font-size: clamp(22px, 3.2vh, 34px);
    font-weight: 700;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 220ms ease, border-color 160ms ease,
                color 160ms ease, background 160ms ease;
}
.lobby__menu-btn--primary {
    background: var(--grad);
    color: var(--text);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, .35),
                0 16px 36px -10px rgba(99, 102, 241, .55);
}
.lobby__menu-btn--ghost {
    background: rgba(255, 255, 255, .05);
    color: var(--text);
    border-color: var(--border-strong);
}
.lobby__menu-btn:focus {
    outline: none;
    border-color: var(--text);
    transform: scale(1.03);
    box-shadow: 0 0 0 3px var(--text),
                0 20px 44px -10px rgba(99, 102, 241, .55);
}
.lobby__menu-btn:disabled {
    background: rgba(255, 255, 255, .08);
    color: var(--text-mute);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    border-color: transparent;
}

/* Enlace terciario (ayuda / volver) */
.lobby__help-link {
    margin-top: clamp(4px, 1vh, 10px);
    background: transparent;
    border: none;
    color: var(--text-mute);
    font-family: inherit;
    font-size: clamp(15px, 2.2vh, 20px);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
    padding: 8px 14px;
    border-radius: 10px;
    transition: color 160ms ease, box-shadow 160ms ease;
}
.lobby__help-link:focus {
    outline: none;
    color: var(--text);
    box-shadow: var(--focus-ring);
}

/* ============================================================
   Cuadro "pantalla creada" (solo navegador)
   ============================================================ */
.lobby__created-warn {
    color: var(--text-soft);
    font-size: clamp(17px, 2.4vh, 22px);
    line-height: 1.4;
    max-width: 680px;
    margin: 0 auto clamp(16px, 2.4vh, 24px);
}
.lobby__created-code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(36px, 5.6vh, 56px);
    font-weight: 700;
    letter-spacing: .14em;
    margin: 0 0 clamp(20px, 3vh, 32px);
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lobby__created-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0 auto clamp(20px, 3vh, 32px);
    max-width: 540px;
    text-align: left;
}
.lobby__created-label {
    font-size: clamp(13px, 1.8vh, 16px);
    color: var(--text-mute);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.lobby__created-input {
    padding: clamp(12px, 1.8vh, 18px) clamp(16px, 2.2vw, 24px);
    background: rgba(255, 255, 255, .05);
    border: 3px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    font-family: inherit;
    font-size: clamp(20px, 2.8vh, 28px);
    font-weight: 600;
    outline: none;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.lobby__created-input:focus {
    border-color: var(--accent-a);
    background: rgba(99, 102, 241, .10);
    box-shadow: var(--focus-ring);
}
.lobby__created-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 1.8vh, 18px);
    margin-bottom: clamp(14px, 2.2vh, 22px);
}

/* ============================================================
   Auto-resume — reconectar a pantalla guardada
   ============================================================ */
.lobby__resume {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 2.4vh, 28px);
}
.lobby__resume-text {
    font-size: clamp(28px, 4.4vh, 44px);
    font-weight: 700;
    margin: 0;
    letter-spacing: -.015em;
    line-height: 1.1;
}
.lobby__resume-code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(36px, 5.6vh, 56px);
    font-weight: 700;
    letter-spacing: .14em;
    margin: 0 0 clamp(8px, 1.4vh, 16px);
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lobby__resume-go {
    padding: clamp(14px, 2.2vh, 22px) clamp(36px, 5vw, 64px);
    background: var(--grad);
    color: var(--text);
    border: 3px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: clamp(22px, 3.2vh, 34px);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, .35),
                0 16px 36px -10px rgba(99, 102, 241, .55);
    transition: transform 160ms ease, box-shadow 220ms ease, border-color 160ms ease;
}
.lobby__resume-go:focus {
    outline: none;
    border-color: var(--text);
    transform: scale(1.04);
    box-shadow: 0 0 0 3px var(--text),
                0 20px 44px -10px rgba(99, 102, 241, .70);
}
.lobby__resume-cancel {
    padding: clamp(10px, 1.6vh, 16px) clamp(24px, 3vw, 40px);
    background: transparent;
    color: var(--text-soft);
    border: 2px solid var(--border-strong);
    border-radius: 999px;
    font-family: inherit;
    font-size: clamp(16px, 2.4vh, 22px);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.lobby__resume-cancel:focus {
    outline: none;
    border-color: var(--accent-a);
    color: var(--text);
    transform: scale(1.03);
    box-shadow: var(--focus-ring);
}

/* ============================================================
   Player TV — stub mientras se implementa el playback
   ============================================================ */
.player__mark {
    font-size: clamp(64px, 10vh, 120px);
    line-height: 1;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: clamp(20px, 3vh, 36px);
    animation: tv-breathe 4s ease-in-out infinite;
    display: inline-block;
}
@keyframes tv-breathe {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(.94); opacity: .82; }
}
.player__title {
    font-size: clamp(48px, 7.6vh, 84px);
    font-weight: 800;
    margin: 0 0 clamp(14px, 2vh, 24px);
    letter-spacing: -.02em;
    line-height: 1.08;
}
.player__code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(38px, 6vh, 60px);
    font-weight: 700;
    letter-spacing: .14em;
    margin: 0 0 clamp(20px, 3.4vh, 40px);
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.player__status {
    font-size: clamp(16px, 2.4vh, 24px);
    color: var(--text-mute);
    margin: 0;
}

/* ============================================================
   Modal de ayuda — "¿Cómo creo una pantalla?"
   ============================================================ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
}
.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: modal-fade 200ms ease;
}
.modal__card {
    position: relative;
    z-index: 1;
    max-width: 880px;
    width: 100%;
    background: linear-gradient(180deg, rgba(20, 20, 36, .96) 0%, rgba(10, 10, 20, .96) 100%);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: clamp(24px, 4vh, 44px) clamp(28px, 4vw, 56px);
    box-shadow: 0 32px 80px -20px rgba(0, 0, 0, .8),
                0 0 0 1px rgba(99, 102, 241, .15);
    text-align: center;
    animation: modal-rise 220ms ease;
}
@keyframes modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes modal-rise {
    from { opacity: 0; transform: translateY(20px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal__title {
    font-size: clamp(28px, 4.4vh, 42px);
    font-weight: 800;
    margin: 0 0 clamp(16px, 2.4vh, 28px);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.modal__steps {
    text-align: left;
    margin: 0 auto clamp(18px, 2.8vh, 28px);
    padding-left: clamp(28px, 3vw, 44px);
    color: var(--text-soft);
    font-size: clamp(18px, 2.6vh, 24px);
    line-height: 1.5;
    font-weight: 400;
}
.modal__steps li {
    margin-bottom: clamp(8px, 1.4vh, 14px);
}
.modal__steps li::marker {
    color: var(--accent-a);
    font-weight: 700;
}
.modal__steps strong {
    color: var(--text);
    font-weight: 700;
}
.modal__url {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(38px, 5.6vh, 56px);
    font-weight: 700;
    letter-spacing: .04em;
    margin: 0 0 clamp(22px, 3.4vh, 36px);
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    word-break: break-all;
}
.modal__close {
    padding: clamp(12px, 1.8vh, 18px) clamp(36px, 5vw, 56px);
    background: var(--grad);
    color: var(--text);
    border: 3px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: clamp(20px, 2.8vh, 28px);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, .35),
                0 16px 36px -10px rgba(99, 102, 241, .55);
    transition: transform 160ms ease, box-shadow 220ms ease, border-color 160ms ease;
}
.modal__close:focus {
    outline: none;
    border-color: var(--text);
    transform: scale(1.04);
    box-shadow: 0 0 0 3px var(--text),
                0 20px 44px -10px rgba(99, 102, 241, .70);
}
.modal__close:disabled {
    background: rgba(255, 255, 255, .08);
    color: var(--text-mute);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ── Variante ancha del modal (para "Mis pantallas") ─────────── */
.modal__card--wide {
    max-width: 1100px;
}

/* ── Modal de guardar pantalla — lead, código, input, acciones ─ */
.modal__lead {
    color: var(--text-soft);
    font-size: clamp(18px, 2.6vh, 22px);
    margin: 0 0 clamp(14px, 2.2vh, 22px);
    line-height: 1.4;
}
.modal__code-line {
    font-size: clamp(16px, 2.2vh, 20px);
    color: var(--text-mute);
    margin: 0 0 clamp(20px, 2.8vh, 28px);
}
.modal__code-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    color: var(--text);
    background: rgba(255, 255, 255, .07);
    padding: 4px 12px;
    border-radius: 8px;
    letter-spacing: .08em;
    margin-left: 6px;
}
.modal__field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0 auto clamp(20px, 2.8vh, 28px);
    max-width: 560px;
    text-align: left;
}
.modal__label {
    font-size: clamp(13px, 1.8vh, 16px);
    color: var(--text-mute);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.modal__input {
    padding: clamp(12px, 1.8vh, 18px) clamp(16px, 2.2vw, 24px);
    background: rgba(255, 255, 255, .05);
    border: 3px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    font-family: inherit;
    font-size: clamp(20px, 2.8vh, 28px);
    font-weight: 600;
    outline: none;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.modal__input:focus {
    border-color: var(--accent-a);
    background: rgba(99, 102, 241, .10);
    box-shadow: var(--focus-ring);
}
.modal__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.modal__secondary {
    padding: clamp(12px, 1.8vh, 18px) clamp(28px, 4vw, 48px);
    background: transparent;
    color: var(--text-soft);
    border: 3px solid var(--border-strong);
    border-radius: 999px;
    font-family: inherit;
    font-size: clamp(18px, 2.6vh, 24px);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.modal__secondary:focus {
    outline: none;
    border-color: var(--accent-a);
    color: var(--text);
    transform: scale(1.03);
    box-shadow: var(--focus-ring);
}

/* ── Modal de "Mis pantallas" — lista de cards ───────────────── */
.screens-list {
    text-align: left;
    max-height: 60vh;
    overflow-y: auto;
    margin: 0 0 clamp(18px, 2.8vh, 28px);
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-a) transparent;
}
.screens-list::-webkit-scrollbar { width: 6px; }
.screens-list::-webkit-scrollbar-thumb { background: var(--accent-a); border-radius: 6px; }
.screens-list::-webkit-scrollbar-track { background: transparent; }

.screens-list__empty {
    color: var(--text-mute);
    text-align: center;
    font-size: clamp(18px, 2.6vh, 22px);
    padding: clamp(20px, 4vh, 48px) 0;
    margin: 0;
}

.screen-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(14px, 2vh, 20px) clamp(16px, 2.2vw, 24px);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.screen-card__info {
    flex: 1 1 auto;
    min-width: 220px;
}
.screen-card__name {
    display: block;
    font-size: clamp(18px, 2.6vh, 26px);
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    word-break: break-word;
}
.screen-card__code {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(13px, 1.9vh, 18px);
    color: var(--text-mute);
    letter-spacing: .08em;
    margin-top: 4px;
}
.screen-card__actions,
.screen-card__confirm {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}
.screen-card__confirm {
    color: var(--text-soft);
    font-size: clamp(14px, 2vh, 18px);
}
.screen-card__confirm-text {
    padding-right: 4px;
}
.screen-card__play,
.screen-card__remove {
    padding: clamp(8px, 1.4vh, 12px) clamp(14px, 2.2vw, 22px);
    border-radius: 999px;
    font-family: inherit;
    font-size: clamp(14px, 2vh, 18px);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.screen-card__play {
    background: var(--grad);
    color: var(--text);
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, .35),
                0 10px 24px -10px rgba(99, 102, 241, .55);
}
.screen-card__play:focus {
    outline: none;
    border-color: var(--text);
    transform: scale(1.04);
    box-shadow: 0 0 0 2px var(--text),
                0 14px 32px -10px rgba(99, 102, 241, .70);
}
.screen-card__remove {
    background: transparent;
    color: var(--text-soft);
    border: 2px solid var(--border-strong);
}
.screen-card__remove:focus {
    outline: none;
    border-color: #ef4444;
    color: #fecaca;
    transform: scale(1.03);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .25);
}

/* ============================================================
   HUD de información — overlay sobre el player.
   Se dispara con teclas del D-pad o movimiento del mouse y se
   auto-oculta tras unos segundos. Muestra nombre/URL de gestión
   y un botón para revelar el código (segundo clic, por privacidad
   en sitios públicos) y otro para volver al lobby.
   ============================================================ */
.hud {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: flex;
    justify-content: center;
    padding: 0 4vw clamp(20px, 4vh, 48px);
    pointer-events: none;
    animation: hud-rise 220ms ease;
}
.hud__card {
    pointer-events: auto;
    display: flex;
    align-items: stretch;
    gap: clamp(20px, 3vw, 40px);
    width: 100%;
    max-width: 920px;
    background: linear-gradient(180deg, rgba(20, 20, 36, .94) 0%, rgba(10, 10, 20, .94) 100%);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: clamp(20px, 3vh, 32px) clamp(24px, 3vw, 40px);
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .80),
                0 0 0 1px rgba(99, 102, 241, .15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    text-align: left;
}
.hud__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
@keyframes hud-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hud__label {
    font-size: clamp(13px, 1.8vh, 16px);
    color: var(--text-mute);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 clamp(6px, 1vh, 10px);
}
.hud__name {
    font-size: clamp(22px, 3.2vh, 32px);
    font-weight: 800;
    margin: 0 0 clamp(14px, 2.2vh, 22px);
    letter-spacing: -.015em;
    line-height: 1.15;
    word-break: break-word;
}
.hud__url {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(18px, 2.6vh, 26px);
    font-weight: 700;
    margin: 0 0 auto;
    letter-spacing: .02em;
    line-height: 1.3;
    word-break: break-all;
}
/* Enlace de gestión (modo navegador): texto clickeable, sin recuadro,
   debajo del nombre (donde iría la URL de texto). */
.hud__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    margin: 0 0 auto;
    padding: 6px 10px;
    border-radius: 12px;
    text-decoration: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(18px, 2.6vh, 26px);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.3;
    word-break: break-all;
    transition: box-shadow 160ms ease, transform 160ms ease;
}
.hud__link:hover { transform: scale(1.02); }
.hud__link:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}
.hud__link-ext {
    flex: none;
    width: clamp(20px, 2.8vh, 26px);
    height: clamp(20px, 2.8vh, 26px);
    color: var(--text-soft);
}
.hud__link:hover .hud__link-ext,
.hud__link:focus .hud__link-ext { color: var(--text); }

/* Columna del QR (modo TV): a la derecha, separada por un divisor. */
.hud__qr {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.4vh, 14px);
    padding-left: clamp(20px, 3vw, 40px);
    border-left: 1px solid var(--border);
}
.hud__qr-cap {
    font-size: clamp(13px, 1.8vh, 16px);
    color: var(--text-soft);
    font-weight: 600;
    text-align: center;
    max-width: 22ch;
    line-height: 1.35;
    margin: 0;
}
.hud__qr-box {
    background: #fff;
    border-radius: 16px;
    padding: clamp(10px, 1.4vh, 16px);
    line-height: 0;
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .6);
}
.hud__qr-box svg {
    display: block;
    width: clamp(150px, 22vh, 210px);
    height: clamp(150px, 22vh, 210px);
}
/* En pantallas angostas el card apila: el QR pasa debajo de la info. */
@media (max-width: 720px) {
    .hud__card { flex-direction: column; }
    .hud__qr {
        border-left: none;
        border-top: 1px solid var(--border);
        padding-left: 0;
        padding-top: clamp(14px, 2vh, 20px);
    }
}
.hud__url-host { color: var(--text-mute); }
.hud__url-path {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hud__url-code {
    font-family: inherit;
    color: var(--text-mute);
    letter-spacing: .14em;
}
.hud__url-code.is-revealed {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: .12em;
}
.hud__actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: clamp(16px, 2.4vh, 24px);
}
.hud__btn-primary {
    padding: clamp(10px, 1.6vh, 14px) clamp(22px, 3vw, 32px);
    border-radius: 999px;
    font-family: inherit;
    font-size: clamp(15px, 2.2vh, 20px);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    background: var(--grad);
    color: var(--text);
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, .35),
                0 10px 24px -10px rgba(99, 102, 241, .55);
}
.hud__btn-primary:focus {
    outline: none;
    border-color: var(--text);
    transform: scale(1.04);
    box-shadow: 0 0 0 2px var(--text),
                0 14px 32px -10px rgba(99, 102, 241, .70);
}

/* ── Botón de audio (toggle con ícono de bocina) ─────────────── */
.hud__btn-icon {
    width:  clamp(46px, 6.4vh, 56px);
    height: clamp(46px, 6.4vh, 56px);
    padding: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
    border: 2px solid var(--border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.hud__btn-icon:focus {
    outline: none;
    border-color: var(--accent-a);
    color: var(--text);
    transform: scale(1.06);
    box-shadow: var(--focus-ring);
}
.hud__btn-icon.is-on {
    color: var(--text);
    border-color: rgba(99, 102, 241, .55);
}
.hud__icon {
    width: 60%;
    height: 60%;
    display: block;
}
/* fill explícito (no currentColor) para que el WebView de Android TV
   lo rasterice de forma fiable. */
.hud__icon path { fill: rgba(247, 248, 252, .82); }
.hud__btn-icon.is-on .hud__icon path { fill: #fff; }
/* Dos íconos separados (volume_off / volume_up); togglemos cuál se
   muestra con display, sin opacidad animada — la capa de opacidad en
   reposo es lo que algunos GPU de TV rasterizan como un bloque blanco. */
.hud__icon-on  { display: none; }
.hud__icon-off { display: block; }
.hud__btn-icon.is-on .hud__icon-on  { display: block; }
.hud__btn-icon.is-on .hud__icon-off { display: none; }