/* =======================================================================
   CROMO 2009 — traducción literal de docs/MAQUETA_2009.md
   Se carga DESPUÉS de app.css y de iconos-pixel.css, y gana por orden.

   Reglas de la casa, en orden de importancia:

   1. Nada flota. El HUD va a sangre en top:0 y el dock en bottom:0; el único
      aire es el marco exterior de 4 px de tinta (§1). Ni `top: max(6px, …)`,
      ni `left: 8px`, ni `right: 8px`.
   2. Solo hay dos relieves (§3): saliente y hundido. Los dos se declaran una
      vez, con variables locales `--pieza-*`. Los estados (hover, activo,
      :active) NO reescriben la `box-shadow`: solo reasignan esas variables.
   3. Radio 0 en todo, ninguna sombra con desenfoque, ningún `backdrop-filter`.
   4. Toda regla lleva prefijo `.hotel-page` o `.lobby-page`, porque
      `.pixel-chrome .X` de app.css ya pesa (0,2,0). Nada de selectores de
      elemento sueltos: el dock del lobby mezcla <button> y <a>, y el pod de
      sala es <button> en el hotel y <div> en la entrada.
   ======================================================================= */

/* ======================================================================
   1. PALETA Y MEDIDAS (§2, §4, §5, §6, §8)
   Estas variables son la ÚNICA fuente de verdad de la geometría del cromo.
   `--hud-height` y `--dock-height` no se declaran en ningún otro fichero:
   `game.js` las mide del DOM y el escenario se encuadra contra ellas.
   ====================================================================== */

:root {
    /* ---- Paleta §2, hexadecimales exactos ---- */
    --c-tinta:          #0a1c33;   /* marco, borde de toda pieza, sombra de texto */
    --c-navy:           #0a1c33;   /* alias histórico: reglas viejas, color nuevo */
    --c-borde:          #0a1c33;   /* alias histórico */
    --c-barra-alta:     #3b7cb8;
    --c-barra-baja:     #2a5f95;
    --c-filo-luz:       rgba(255,255,255,.28);
    --c-pod:            #0e2c4e;
    --c-pod-filo:       #3f7db5;
    --c-baldosa-alta:   #5a9ad6;
    --c-baldosa-baja:   #3b76b2;
    --c-baldosa-filo:   #a3cdf0;
    --c-texto:          #ffffff;
    --c-rotulo:         #9dc4e6;
    --c-verde:          #4ec95a;
    --c-oro:            #ffcc33;
    --c-rojo:           #d63b2c;
    --c-crema:          #f2ecdb;
    --c-crema-tinta:    #5c5647;

    /* ---- Derivados de §3 y §4: no son colores nuevos, son las sombras y
       los rellenos que la maqueta describe en prosa ---- */
    --c-sombra-baja:    rgba(0,0,0,.32);       /* §3.1 línea inferior */
    --c-sombra-hundido: rgba(0,0,0,.45);       /* §3.2 línea superior */
    --c-crema-filo:     rgba(92,86,71,.30);    /* filo del pod crema, §3.2 */
    --c-crema-texto:    #2a2418;               /* tinta del input, §6.2 */
    --c-nivel:          #4a9de0;               /* relleno de la barra de nivel */
    --c-velo:           rgba(255,255,255,.14); /* aclarado de :hover, §3.3 */
    --sombra-texto:     1px 1px 0 var(--c-tinta);

    /* ---- Medidas, escalón > 1050 px ---- */
    --hud-height:    100px;
    --dock-height:   144px;
    --marco:           4px;   /* borde exterior §1 */
    --filo:            3px;   /* filo entre barra y escenario §1 */
    --pod-h:          66px;   /* §4 */
    --pod-cuadro:     46px;   /* §4: retrato, galón, zoom, salir, marca */
    --pod-sala-min:  300px;   /* §4 pod 1 */
    --hud-icono:      32px;   /* §4 pide 34; peldaño nativo 32 */
    --hud-icono-sala: 48px;   /* §4 pide 40; peldaño nativo 48 */
    --marca-icono:    42px;   /* logo-42, tamaño natural */
    --globo:          22px;   /* §4 */
    --nivel-display:  flex;   /* §8: la fila de nivel se apaga por variable */
    --nav-panel-w:   190px;   /* §5 */
    --nav-tecla:      72px;   /* §5 */
    --nav-icono:      48px;   /* §5 pide 44; peldaño nativo 48 */
    --dock-tecla-w:  108px;   /* §6.1 */
    --dock-baldosa:   78px;   /* §6.1 */
    --dock-icono:     48px;   /* §6.1, exacto */
    --chat-h:         72px;   /* §6.2 y §6.3 */
    --chat-retrato:   52px;   /* §6.2 */

    /* Geometría de las ventanas del juego. Cuelgan del HUD y se apoyan en el
       dock: se miden contra las dos barras, nunca contra números sueltos.
       Con el HUD en 100 px y el dock en 144, los antiguos `top: 86px` dejaban
       media ventana debajo de la barra superior. */
    --ventana-top:    calc(var(--hud-height) + 12px);
    --ventana-bottom: calc(var(--dock-height) + 12px);
    --ventana-alto:   calc(100dvh - var(--hud-height) - var(--dock-height) - 24px);
}

/* §8, escalón medio: SOLO se reasignan variables. */
@media (max-width: 1050px) {
    :root {
        --hud-height:    88px;
        --dock-height:  128px;
        --pod-h:         58px;
        --pod-cuadro:    40px;
        --pod-sala-min: 220px;
        --hud-icono:     28px;
        --hud-icono-sala:40px;
        --marca-icono:   34px;
        --globo:         20px;
        --nav-panel-w:  172px;
        --nav-tecla:     64px;
        --nav-icono:     40px;
        --dock-tecla-w:  92px;
        --dock-baldosa:  68px;
        --dock-icono:    40px;
        --chat-h:        64px;
        --chat-retrato:  44px;
    }
}

/* §8, escalón estrecho. La fila de nivel se apaga aquí porque un pod de 50 px
   no puede apilar rótulo + nombre + barra sin desbordar: se apaga con la
   variable `--nivel-display`, no con una regla nueva. */
@media (max-width: 800px) {
    :root {
        --hud-height:    76px;
        --dock-height:  104px;
        --pod-h:         50px;
        --pod-cuadro:    34px;
        --pod-sala-min: 150px;
        --hud-icono:     24px;
        --hud-icono-sala:32px;
        --marca-icono:   28px;
        --globo:         18px;
        --nivel-display: none;
        --nav-panel-w:  160px;
        --nav-tecla:     56px;
        --nav-icono:     32px;
        --dock-tecla-w:  56px;   /* sin rótulo: la tecla mide lo que la baldosa */
        --dock-baldosa:  56px;
        --dock-icono:    32px;
        --chat-h:        40px;
        --chat-retrato:  32px;
    }
}

/* ======================================================================
   2. ESQUINAS RECTAS Y SIN DESENFOQUES (§1)
   Especificidad CERO, no un override: `:where()` deja el selector de elemento
   en (0,0,0), así que cualquier regla posterior que de verdad necesite una
   curva la pide y gana sin pelea. No hay lista blanca que mantener.

   Los pseudoelementos van en ramas propias y no dentro del `:where()`: la
   lista de `:where()` es tolerante y descarta en silencio lo que no admite;
   los pseudoelementos no se admiten, así que `:where(*, *::before, *::after)`
   se quedaría en `:where(*)` sin avisar. Un pseudoelemento no puede bajar de
   (0,0,1) por especificación, y ese es el suelo que se usa aquí.
   ====================================================================== */

:where(body:not(.admin-page)) :where(*) {
    border-radius: 0;
    backdrop-filter: none;
}

:where(body:not(.admin-page)) :where(*)::before,
:where(body:not(.admin-page)) :where(*)::after {
    border-radius: 0;
    backdrop-filter: none;
}

/* ======================================================================
   3. LAS DOS PRIMITIVAS DE RELIEVE (§3)
   Cada primitiva declara el juego COMPLETO de variables `--pieza-*`, así que
   anidar una dentro de otra (una tecla dentro del panel hundido) nunca hereda
   restos de la otra. Los estados reasignan variables; la `box-shadow` se
   escribe una sola vez en toda la hoja.
   ====================================================================== */

/* §3.1 SALIENTE — teclas: dock, panel, HUD, galón y botón de enviar. */
.hotel-page .hud-tecla,
.hotel-page .nav-tecla,
.hotel-page .nav-panel-galon,
.hotel-page .dock-baldosa,
.hotel-page .quick-chat-enviar,
.lobby-page .hud-tecla,
.lobby-page .dock-baldosa {
    --pieza-alta:    var(--c-baldosa-alta);
    --pieza-fondo:   var(--c-baldosa-baja);
    --pieza-velo:    transparent;
    --pieza-anillo:  0 0 0 0 transparent;
    --pieza-luz:     inset 0 2px 0 0 var(--c-baldosa-filo);
    --pieza-sombra:  inset 0 -2px 0 0 var(--c-sombra-baja);
    --pieza-caida:   0 3px 0 0 var(--c-tinta);
    --pieza-hundida: 0;

    border: 2px solid var(--c-tinta);
    color: var(--c-texto);
    background-color: var(--pieza-fondo);
    background-image:
        linear-gradient(180deg, var(--pieza-velo), var(--pieza-velo)),
        linear-gradient(180deg, var(--pieza-alta) 0%, var(--pieza-fondo) 100%);
    box-shadow: var(--pieza-anillo), var(--pieza-luz), var(--pieza-sombra), var(--pieza-caida);
    text-shadow: var(--sombra-texto);
    translate: 0 var(--pieza-hundida);
}

/* §3.2 HUNDIDO — pods del HUD, retratos, barra de nivel, panel y campo de chat. */
.hotel-page .hud-pod,
.hotel-page .hud-retrato,
.hotel-page .hud-nivel-barra,
.hotel-page .nav-panel,
.lobby-page .hud-pod,
.lobby-page .hud-retrato {
    --pieza-alta:    var(--c-pod);
    --pieza-fondo:   var(--c-pod);
    --pieza-velo:    transparent;
    --pieza-anillo:  inset 0 0 0 2px var(--c-pod-filo);
    --pieza-luz:     inset 0 2px 0 0 var(--c-sombra-hundido);
    --pieza-sombra:  0 0 0 0 transparent;
    --pieza-caida:   0 0 0 0 transparent;
    --pieza-hundida: 0;

    border: 2px solid var(--c-tinta);
    color: var(--c-texto);
    background-color: var(--pieza-fondo);
    background-image: linear-gradient(180deg, var(--pieza-velo), var(--pieza-velo));
    box-shadow: var(--pieza-anillo), var(--pieza-luz), var(--pieza-sombra), var(--pieza-caida);
    text-shadow: var(--sombra-texto);
    translate: 0 var(--pieza-hundida);
}

/* §3.2 HUNDIDO CREMA — solo el campo de chat cambia de relleno y de filo. */
.hotel-page .quick-chat-campo {
    --pieza-alta:    var(--c-crema);
    --pieza-fondo:   var(--c-crema);
    --pieza-velo:    transparent;
    --pieza-anillo:  inset 0 0 0 2px var(--c-crema-filo);
    --pieza-luz:     inset 0 2px 0 0 var(--c-sombra-hundido);
    --pieza-sombra:  0 0 0 0 transparent;
    --pieza-caida:   0 0 0 0 transparent;
    --pieza-hundida: 0;

    border: 2px solid var(--c-tinta);
    color: var(--c-crema-texto);
    background-color: var(--pieza-fondo);
    background-image: linear-gradient(180deg, var(--pieza-velo), var(--pieza-velo));
    box-shadow: var(--pieza-anillo), var(--pieza-luz), var(--pieza-sombra), var(--pieza-caida);
    translate: 0 var(--pieza-hundida);
}

/* §3.3 :hover — SOLO aclara el relleno. La pieza no se mueve ni 1 px: en un
   cromo pixelado, desplazar al pasar por encima produce vibración. */
.hotel-page .hud-tecla:hover,
.hotel-page .nav-tecla:hover,
.hotel-page .nav-panel-cabecera:hover .nav-panel-galon,
.hotel-page .dock-tecla:hover .dock-baldosa,
.hotel-page .quick-chat-enviar:hover,
.hotel-page .hud-marca:hover,
.hotel-page .hud-pod-sala:hover,
.hotel-page .hud-pod-fichas:hover,
.hotel-page .hud-pod-regalos:hover,
.hotel-page .hud-pod-mod:hover,
.hotel-page .hud-pod-yo:hover,
.lobby-page .hud-tecla:hover,
.lobby-page .hud-marca:hover,
.lobby-page .dock-tecla:hover .dock-baldosa { --pieza-velo: var(--c-velo); }

/* §3.3 PULSADO — el relieve se invierte y la pieza baja a ocupar su sombra. */
.hotel-page .hud-tecla:active,
.hotel-page .nav-tecla:active,
.hotel-page .nav-tecla[aria-expanded="true"],
.hotel-page .dock-tecla:active .dock-baldosa,
.hotel-page .dock-tecla[aria-expanded="true"] .dock-baldosa,
.hotel-page .dock-tecla[aria-selected="true"] .dock-baldosa,
.hotel-page .quick-chat-enviar:active,
.hotel-page .hud-marca:active,
.hotel-page .hud-pod-sala:active,
.hotel-page .hud-pod-fichas:active,
.hotel-page .hud-pod-regalos:active,
.hotel-page .hud-pod-mod:active,
.hotel-page .hud-pod-yo:active,
.hotel-page .hud-pod[aria-expanded="true"],
.hotel-page .hud-tecla[aria-expanded="true"],
.lobby-page .hud-tecla:active,
.lobby-page .hud-marca:active,
.lobby-page .dock-tecla:active .dock-baldosa,
.lobby-page .dock-tecla[aria-expanded="true"] .dock-baldosa,
.lobby-page .dock-tecla[aria-selected="true"] .dock-baldosa {
    --pieza-velo:    var(--c-velo);
    --pieza-anillo:  0 0 0 0 transparent;
    --pieza-luz:     inset 0 2px 0 0 var(--c-sombra-hundido);
    --pieza-sombra:  inset 0 -2px 0 0 var(--c-baldosa-filo);
    --pieza-caida:   0 0 0 0 transparent;
    --pieza-hundida: 3px;
}

/* ======================================================================
   4. ENCUADRE (§1)
   El marco de 4 px obliga a que el cromo deje de ser `position: fixed`:
   `fixed` se posiciona contra el viewport y con `top: 0` se comería el marco.
   El contenedor pasa a ser el bloque de referencia, y como el `env()` de los
   recortes vive en su RELLENO, `--hud-height` vuelve a ser exactamente la
   altura del HUD: `.room-stage { top: var(--hud-height) }` ya no miente en iOS
   y no hay que repetir ningún `calc(… + env(…))` en ninguna regla.
   ====================================================================== */

.hotel-page,
.lobby-page {
    height: 100dvh;
    overflow: hidden;
    background: var(--c-tinta);
}

.hotel-page .hotel-app,
.lobby-page .entry-lobby {
    position: relative;
    inset: auto;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: var(--marco) solid var(--c-tinta);
    padding:
        env(safe-area-inset-top)
        env(safe-area-inset-right)
        env(safe-area-inset-bottom)
        env(safe-area-inset-left);
    background: var(--c-tinta);
}

/* ---------- Barra superior (§4) y barra inferior (§6): §3.1 barra ---------- */

.hotel-page .game-hud,
.lobby-page .game-hud {
    position: absolute;
    z-index: 60;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--hud-height);
    padding: 0 10px;
    border: 0 solid var(--c-tinta);
    border-bottom-width: var(--filo);
    background:
        linear-gradient(180deg, var(--c-barra-alta) 0%, var(--c-barra-baja) 100%);
    box-shadow:
        inset 0 2px 0 0 var(--c-filo-luz),
        inset 0 -2px 0 0 var(--c-sombra-baja);
}

.hotel-page .dock-row,
.lobby-page .dock-row {
    position: absolute;
    z-index: 55;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--dock-height);
    padding: 0 10px;
    border: 0 solid var(--c-tinta);
    border-top-width: var(--filo);
    background:
        linear-gradient(180deg, var(--c-barra-alta) 0%, var(--c-barra-baja) 100%);
    box-shadow:
        inset 0 2px 0 0 var(--c-filo-luz),
        inset 0 -2px 0 0 var(--c-sombra-baja);
}

/* El escenario ocupa exactamente el hueco entre las dos barras. */
.hotel-page .room-stage,
.lobby-page .lobby-stage {
    position: absolute;
    z-index: 1;
    top: var(--hud-height);
    right: 0;
    bottom: var(--dock-height);
    left: 0;
    overflow: hidden;
    background: var(--c-tinta);
}

/* ======================================================================
   5. HUD (§4)
   ====================================================================== */

.hotel-page .hud-pod,
.lobby-page .hud-pod {
    position: relative;
    display: flex;
    min-width: 0;
    height: var(--pod-h);
    /* Encogibles a propósito: entre 1051 y 1290 px la fila de pods mide más que
       la pantalla, y es mejor recortar un rótulo con puntos suspensivos que
       empujar el botón de cerrar sesión fuera del marco. */
    flex: 0 1 auto;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    text-align: left;
    text-decoration: none;
}

.hotel-page .hud-pod[hidden],
.lobby-page .hud-pod[hidden] { display: none; }

.hotel-page .hud-pod-cuadro,
.lobby-page .hud-pod-cuadro {
    width: var(--pod-cuadro);
    height: var(--pod-cuadro);
    justify-content: center;
    padding: 0;
}

/* La marca no aparece en la maqueta; §4 autoriza reducirla a un pod cuadrado
   al principio de la fila para conservar el <a href="/"> visible. */
.hotel-page .hud-marca .ui-icon-art,
.lobby-page .hud-marca .ui-icon-art {
    width: var(--marca-icono);
    height: var(--marca-icono);
}

/* ---------- Pod 1: SALA ---------- */

/* §4 lo pide «flexible, mín. 300 px»: los 300 son la base de reparto, no un
   suelo rígido. Como base puede crecer con el hueco libre y encogerse cuando la
   fila se estrecha, y el nombre de la sala se corta con puntos suspensivos. */
.hotel-page .hud-pod-sala,
.lobby-page .hud-pod-sala {
    min-width: 0;
    flex: 1 1 var(--pod-sala-min);
}

.hotel-page .hud-pod-sala .ui-icon-art,
.lobby-page .hud-pod-sala .ui-icon-art {
    width: var(--hud-icono-sala);
    height: var(--hud-icono-sala);
}

.hotel-page .hud-pod-columna,
.lobby-page .hud-pod-columna {
    display: grid;
    min-width: 0;
    gap: 2px;
    text-align: left;
}

/* 14 y no 12: a 12 px la abertura de la C mide un píxel de pantalla y el
   suavizado la cierra, así que cualquier rótulo con C se vuelve ilegible.
   Medido en la maqueta, sus rótulos rondan los 14-16 px de todas formas. */
.hotel-page .hud-pod-columna small,
.lobby-page .hud-pod-columna small {
    color: var(--c-rotulo);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
}

.hotel-page .hud-pod-sala .hud-pod-columna strong,
.lobby-page .hud-pod-sala .hud-pod-columna strong {
    overflow: hidden;
    color: var(--c-texto);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Teclas cuadradas del HUD ---------- */

.hotel-page .hud-tecla,
.lobby-page .hud-tecla {
    display: grid;
    width: var(--pod-cuadro);
    height: var(--pod-cuadro);
    flex: 0 0 auto;
    gap: 0;
    padding: 0;
    place-items: center;
    align-content: center;
}

.hotel-page .hud-tecla-galon .ui-icon { width: 20px; height: 20px; color: var(--c-texto); }
.hotel-page .hud-tecla-zoom .ui-icon { width: 18px; height: 18px; color: var(--c-texto); }
.hotel-page .hud-tecla-zoom #zoom-label {
    color: var(--c-texto);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.hotel-page .hud-tecla-salir .ui-icon,
.lobby-page .hud-tecla-salir .ui-icon { width: 20px; height: 20px; color: var(--c-texto); }

.hotel-page .hud-logout,
.lobby-page .hud-logout {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
}

/* ---------- Pod 2: ONLINE ---------- */

.hotel-page .hud-pod-online .ui-icon-art,
.hotel-page .hud-pod-aforo .ui-icon-art,
.hotel-page .hud-pod-fichas .ui-icon-art,
.hotel-page .hud-pod-regalos .ui-icon-art,
.hotel-page .hud-pod-mod .ui-icon-art,
.lobby-page .hud-pod-online .ui-icon-art {
    width: var(--hud-icono);
    height: var(--hud-icono);
}

.hotel-page .hud-pod-online span,
.lobby-page .hud-pod-online span {
    overflow: hidden;
    color: var(--c-texto);
    /* 17 y no 16: a 16 px la C se cierra y «CONECTANDO» se lee «OONEOTANDO».
       Ver el comentario del @font-face en app.css. */
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.hotel-page .hud-pod-online[data-state="online"] span { color: var(--c-verde); }
.hotel-page .hud-pod-online[data-state="connecting"] span,
.lobby-page .hud-pod-online[data-state="connecting"] span { color: var(--c-oro); }
.hotel-page .hud-pod-online[data-state="offline"] span { color: var(--c-rojo); }

/* ---------- Pods 3 y 4: aforo y fichas ---------- */

.hotel-page .hud-pod-aforo strong {
    color: var(--c-texto);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.hotel-page .hud-pod-fichas strong {
    color: var(--c-oro);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

/* ---------- Pods 5 y 6: regalos y moderación ---------- */

.hotel-page .hud-pod-regalos span,
.hotel-page .hud-pod-mod span {
    overflow: hidden;
    color: var(--c-texto);
    font-size: 17px;   /* 16 px cierra la C, ver el @font-face de app.css */
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* El globo se pinta siempre en el markup y el CSS lo esconde cuando el regalo
   ya se recogió: `game.js` solo escribe `disabled`. Cero JavaScript nuevo. */
.hotel-page .hud-pod-regalos:disabled .globo-aviso { display: none; }

/* ---------- Pod 7: usuario ---------- */

.hotel-page .hud-pod-yo,
.lobby-page .hud-pod-yo {
    gap: 10px;
    margin-left: auto;
}

.hotel-page .hud-retrato,
.lobby-page .hud-retrato {
    display: flex;
    width: var(--pod-cuadro);
    height: var(--pod-cuadro);
    overflow: hidden;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
}

.hotel-page .hud-pod-yo .hud-pod-columna strong,
.lobby-page .hud-pod-yo .hud-pod-columna strong {
    overflow: hidden;
    color: var(--c-texto);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hotel-page .hud-nivel {
    display: var(--nivel-display);
    align-items: center;
    gap: 6px;
}

.hotel-page .hud-nivel-cifra {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 2px solid var(--c-oro);
    color: var(--c-oro);
    background: var(--c-pod);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* 10 segmentos de 7 px con 9 huecos de 2 px = 88 px, más 4 px de borde y 4 px
   de relleno = 96 px exactos. Nunca un `width` en porcentaje: la CSP prohíbe
   `style=` en las plantillas, así que el progreso es `.is-on` sobre los <i>. */
.hotel-page .hud-nivel-barra {
    display: flex;
    box-sizing: border-box;
    width: 96px;
    height: 12px;
    align-items: center;
    gap: 2px;
    padding: 0 2px;
}
.hotel-page .hud-nivel-barra i {
    width: 7px;
    height: 8px;
    flex: 0 0 auto;
    background: rgba(0,0,0,.35);
}
.hotel-page .hud-nivel-barra i.is-on { background: var(--c-nivel); }

/* ---------- Globo de aviso (§4): regalos, chat y navegador ---------- */

.hotel-page .globo-aviso,
.lobby-page .globo-aviso {
    position: absolute;
    z-index: 2;
    top: -8px;
    right: -8px;
    display: grid;
    width: var(--globo);
    height: var(--globo);
    place-items: center;
    border: 2px solid var(--c-texto);
    color: var(--c-texto);
    background: var(--c-rojo);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-shadow: none;
}

.hotel-page .globo-aviso[hidden],
.lobby-page .globo-aviso[hidden] { display: none; }

/* ======================================================================
   6. PANEL FLOTANTE «NAVEGACIÓN» (§5)
   Es un <details>/<summary>: plegado nativo, accesible por teclado, cero JS y
   compatible con la CSP. El estado se lee con `[open]`, no con `aria-expanded`.
   ====================================================================== */

.hotel-page .nav-panel {
    position: absolute;
    z-index: 12;
    top: 16px;
    left: 16px;
    width: var(--nav-panel-w);
}

.hotel-page .nav-panel-cabecera {
    display: flex;
    height: 34px;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 0 10px;
    border-bottom: 2px solid var(--c-tinta);
    /* §5 pide fondo #0e2c4e, que es exactamente el relleno del panel: dejarla
       transparente da el mismo color y no tapa el filo claro del hundido. */
    background: transparent;
    cursor: pointer;
    list-style: none;
}
.hotel-page .nav-panel-cabecera::-webkit-details-marker { display: none; }

.hotel-page .nav-panel-cabecera span:first-child {
    color: var(--c-rotulo);
    font-size: 14px;   /* 13 px cierra la C: «NAVEGACIÓN» se lee «NAVEGAOIÓN» */
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: var(--sombra-texto);
}

/* El cuadrado del galón es decorativo: quien recibe el clic y el foco es el
   <summary> entero. Un <button> aquí sería contenido interactivo anidado. */
.hotel-page .nav-panel-galon {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    place-items: center;
}
.hotel-page .nav-panel-galon .ui-icon { width: 14px; height: 14px; color: var(--c-texto); }
.hotel-page .nav-panel[open] .nav-panel-galon .ui-icon { transform: scaleY(-1); }

.hotel-page .nav-panel-cuerpo {
    display: grid;
    gap: 8px;
    padding: 8px;
    justify-items: center;
}

.hotel-page .nav-tecla {
    position: relative;
    display: grid;
    width: var(--nav-tecla);
    height: var(--nav-tecla);
    place-items: center;
    text-decoration: none;
}
.hotel-page .nav-tecla .ui-icon-art { width: var(--nav-icono); height: var(--nav-icono); }
.hotel-page .nav-tecla-camara .ui-icon { width: 30px; height: 30px; color: var(--c-texto); }

/* Los mandos de cámara viven DENTRO del cuerpo para plegarse con el resto. */
.hotel-page .camera-tools {
    position: static;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, var(--nav-tecla));
    justify-content: center;
}

/* ======================================================================
   7. DOCK (§6.1)
   `.game-dock` no puede renombrarse: `game.js` la resuelve por clase para los
   recortes seguros. Queda transparente y sin borde; la banda saliente y su
   relleno los pinta `.dock-row`, que el JavaScript no observa.
   ====================================================================== */

.hotel-page .game-dock,
.lobby-page .game-dock {
    position: static;
    display: flex;
    min-width: 0;
    height: 100%;
    flex: 0 1 auto;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    scrollbar-width: none;
    transform: none;
}
.hotel-page .game-dock::-webkit-scrollbar,
.lobby-page .game-dock::-webkit-scrollbar { display: none; }

.hotel-page .dock-tecla,
.lobby-page .dock-tecla {
    display: grid;
    width: var(--dock-tecla-w);
    flex: 0 0 auto;
    gap: 6px;
    padding: 0;
    align-content: center;
    justify-items: center;
    border: 0;
    color: var(--c-texto);
    background: none;
    text-decoration: none;
}

.hotel-page .dock-baldosa,
.lobby-page .dock-baldosa {
    position: relative;
    display: grid;
    width: var(--dock-baldosa);
    height: var(--dock-baldosa);
    place-items: center;
}
.hotel-page .dock-baldosa .ui-icon-art,
.lobby-page .dock-baldosa .ui-icon-art {
    width: var(--dock-icono);
    height: var(--dock-icono);
}

.hotel-page .dock-rotulo,
.lobby-page .dock-rotulo {
    color: var(--c-texto);
    font-size: 14px;   /* a 12 px «CHAT» se lee «OHAT»; ver §7 bis de la maqueta */
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: var(--sombra-texto);
}

/* ======================================================================
   8. CHAT (§6.2 y §6.3)
   ====================================================================== */

.hotel-page .quick-chat {
    position: static;
    display: flex;
    width: auto;
    height: auto;
    min-width: 0;
    flex: 1 1 220px;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    transform: none;
}

.hotel-page .quick-chat-campo {
    display: flex;
    min-width: 0;
    height: var(--chat-h);
    flex: 1;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 4px;
}

.hotel-page .quick-chat-retrato {
    display: flex;
    width: var(--chat-retrato);
    height: var(--chat-retrato);
    overflow: hidden;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: center;
}

.hotel-page #quick-chat-input {
    min-width: 0;
    height: 100%;
    flex: 1;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--c-crema-texto);
    background: transparent;
    box-shadow: none;
    font-size: 18px;
    font-weight: 700;
}
.hotel-page #quick-chat-input::placeholder { color: var(--c-crema-tinta); }

.hotel-page .quick-chat-enviar {
    display: grid;
    width: var(--chat-h);
    height: var(--chat-h);
    flex: 0 0 auto;
    padding: 0;
    place-items: center;
}

/* La maqueta lleva un triángulo macizo, no el avión de papel del sprite SVG.
   Se dibuja con bordes: nítido a cualquier zoom y sin pesar nada. */
.hotel-page .quick-chat-flecha {
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 26px solid var(--c-texto);
    filter: drop-shadow(2px 2px 0 rgba(10,28,51,.55));
}

/* ======================================================================
   9. RETRATOS DE AVATAR
   `game.js` escribe `style.width`/`style.height` EN LÍNEA sobre todo
   `.avatar-stack img` (tamaño natural ÷ DPR), y el estilo en línea gana a
   cualquier regla de hoja. Los dos únicos `!important` del cromo fijan el
   sprite a su tamaño natural real (33 × 92 de `legacy/avatars/base.png`) para
   que el recorte del marco sea el mismo con cualquier DPR: los retratos
   RECORTAN, no escalan.
   ====================================================================== */

.hotel-page .hud-retrato .avatar-stack img,
.hotel-page .quick-chat-retrato .avatar-stack img,
.lobby-page .hud-retrato .avatar-stack img {
    width: 33px !important;
    height: 92px !important;
}

/* ======================================================================
   10. SUPERPOSICIONES DEL ESCENARIO
   Todas viven ya dentro de una caja recortada, así que ninguna necesita
   sumar `var(--hud-height)` ni `env(safe-area-inset-*)` a su `top`.
   ====================================================================== */

.hotel-page .room-status-badge { display: none; }

.hotel-page .toast-stack {
    position: absolute;
    z-index: 100;
    top: 10px;
    right: 10px;
    bottom: auto;
    left: auto;
    display: grid;
    width: min(330px, calc(100% - 20px));
    gap: 8px;
    pointer-events: none;
}

.hotel-page .toast {
    border: 2px solid var(--c-tinta);
    color: var(--c-texto);
    background:
        linear-gradient(180deg, var(--c-barra-alta) 0%, var(--c-barra-baja) 100%);
    box-shadow:
        inset 0 2px 0 0 var(--c-filo-luz),
        inset 0 -2px 0 0 var(--c-sombra-baja),
        0 3px 0 0 var(--c-tinta);
    font-size: 14px;
    text-shadow: var(--sombra-texto);
}
.hotel-page .toast svg { color: var(--c-texto); }
.hotel-page .toast.is-error { background: var(--c-rojo); }
.hotel-page .toast.is-success { background: var(--c-verde); }

.hotel-page .canvas-tip {
    top: 16px;
    border: 2px solid var(--c-tinta);
    color: var(--c-crema-texto);
    background: var(--c-crema);
    box-shadow:
        inset 0 0 0 2px var(--c-crema-filo),
        0 3px 0 0 var(--c-tinta);
    font-size: 14px;
}
.hotel-page .canvas-tip > svg { color: var(--c-crema-tinta); }
.hotel-page .canvas-tip button { color: var(--c-crema-tinta); background: transparent; }

.hotel-page .placement-toolbar {
    top: 12px;
    border: 2px solid var(--c-tinta);
    color: var(--c-crema-texto);
    background: var(--c-crema);
    box-shadow: 0 3px 0 0 var(--c-tinta);
}

.hotel-page .room-loading {
    color: var(--c-texto);
    background: var(--c-tinta);
}
.hotel-page .room-loading small { color: var(--c-rotulo); }

/* La barra de moderación cuelga del HUD, a sangre y con sombra dura. */
.hotel-page .mod-bar {
    position: absolute;
    z-index: 58;
    top: var(--hud-height);
    right: 0;
    left: 0;
    box-shadow: 0 4px 0 0 var(--c-tinta);
}

.hotel-page .window-layer {
    position: absolute;
    inset: 0;
}

.hotel-page .offline-banner {
    position: absolute;
    right: 50%;
    bottom: calc(var(--dock-height) + 12px);
    border: 2px solid var(--c-tinta);
    box-shadow: 0 3px 0 0 var(--c-tinta);
    transform: translateX(50%);
}

/* ======================================================================
   11. LA ENTRADA (lobby)
   El mismo cromo que dentro del hotel: la entrada no debe parecer otra web.
   Aquí no hay chat, así que `.dock-row` solo contiene el dock y este queda
   alineado a la izquierda sin una sola regla extra.
   ====================================================================== */

.lobby-page .lobby-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lobby-page .lobby-room-picker {
    position: absolute;
    z-index: 12;
    top: 16px;
    right: 16px;
    bottom: auto;
    left: auto;
    width: 330px;
    max-height: calc(100% - 32px);
}

/* ======================================================================
   12. ESCALÓN ESTRECHO (§8)
   Las tres únicas reglas de maquetación de todo el tramo: la propia §8 las
   declara al pedir `column-reverse` (el campo de chat arriba y el dock
   desplazable debajo). Todo lo demás son variables.
   Aritmética: chat 40 + hueco 4 + baldosa 56 = 100, más el filo de 3 = 103,
   por debajo de los 104 de `--dock-height`.
   ====================================================================== */

@media (max-width: 800px) {
    .hotel-page .dock-row { flex-direction: column-reverse; gap: 4px; padding: 0 8px; }

    /* En columna, `flex` mide el ALTO: sin esto el chat reclamaría los 220 px
       de su base y el dock el 100 % de la barra, y uno echaría al otro. */
    .hotel-page .quick-chat,
    .hotel-page .game-dock { height: auto; flex: 0 0 auto; }

    .hotel-page .quick-chat,
    .hotel-page .game-dock,
    .lobby-page .game-dock { width: 100%; }

    .hotel-page .dock-rotulo,
    .lobby-page .dock-rotulo { display: none; }

    .lobby-page .lobby-room-picker {
        top: auto;
        right: 8px;
        bottom: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100% - 16px);
    }
}