/* ═══════════════════════════════════════════════════════
   GARIX.IO — pages.css
   Páginas del menú principal (ui/react/MenuPage.jsx): Shop, Hats y
   Scrims dejaron de ser modales — son páginas completas debajo de
   .topbar que reemplazan al menú de PLAY (pedido explícito del usuario).
   Acá vive lo COMPARTIDO: el shell, la barra lateral de navegación, la
   columna de contenido y los encabezados de sección. Lo específico de
   cada página sigue en su propio archivo (Shop → modals.css, Hats →
   hats.css, Scrims → scrims.css), scopeado a #shopPage/#hatsPage/
   #scrimsPage.

   Escala tipográfica (una sola, para todas las páginas):
     24/700  título de página        (.menu-page__title)
     17/700  título de sección       (.page-section-head__title)
     13/400  cuerpo / descripciones  (subtítulos, hints)
     11/700  labels en mayúsculas    (eyebrow, headings de nav, sub-secciones)
   ═══════════════════════════════════════════════════════ */

/* Cualquier vista que no sea PLAY esconde el menú de 3 columnas y sus
   flotantes (redes sociales, ícono de replays). hooks/useMenuView.js es
   quien escribe #overlays[data-view]. [data-view] a secas primero: antes
   de la primera navegación el atributo no existe, y eso es PLAY. */
#overlays[data-view]:not([data-view='play']) .main-container,
#overlays[data-view]:not([data-view='play']) .social-bottom,
#overlays[data-view]:not([data-view='play']) .version-legal-row,
#overlays[data-view]:not([data-view='play']) .replays-btn {
    display: none;
}

/* Fondo más oscuro fuera de PLAY (pedido explícito del usuario: "que se
   opaque más el fondo, especialmente en el medio, pero no demasiado") —
   las páginas (shop, settings, replays...) tienen contenido denso justo en
   el centro, sobre el juego en vivo. Capa extra encima del degradé de
   #overlays, más fuerte en el centro que en los bordes (los bordes ya
   vienen oscuros por la viñeta de #overlays). z-index:-1 → debajo de todo
   el contenido pero encima del fondo propio de #overlays (position:fixed
   ya crea su propio stacking context). Escala con el setting "menu
   overlay opacity" (--ov-a1 = 0.5 × ese %), así que con 0% sigue sin
   oscurecer nada. Se anima solo la opacidad: barato, sin blur ni repaint
   del juego. */
#overlays::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, calc(var(--ov-a1, 0.5) * 0.7)) 0%,
        rgba(0, 0, 0, calc(var(--ov-a1, 0.5) * 0.5)) 45%,
        rgba(0, 0, 0, calc(var(--ov-a1, 0.5) * 0.2)) 100%
    );
    opacity: 0;
    transition: opacity var(--dur-modal, 0.2s) ease;
}

#overlays[data-view]:not([data-view='play']):not(.playing)::before {
    opacity: 1;
}

/* position:absolute dentro de #overlays (fixed, inset:0), empezando
   debajo de .topbar (56px, ver layout.css). Es el `container` del scale
   to fit (ui/scaleToFit.js): su padding es el aire mínimo alrededor de la
   página ya escalada. align-items:flex-start = misma "distancia fija"
   debajo de la barra que el menú de PLAY; justify-content:center = página
   centrada en la ventana. Fondo: el MISMO de PLAY (pedido explícito del
   usuario) — el juego en vivo detrás, con la misma viñeta que
   layout.css#.main-container encima del degradé de #overlays, en vez del
   fondo casi opaco que tenía antes. */
.menu-page {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 18px;
    overflow: hidden;
    background: radial-gradient(
        ellipse at 50% 45%,
        rgba(6, 7, 9, 0) 30%,
        rgba(6, 7, 9, 0.55) 70%,
        rgba(6, 7, 9, 0.9) 100%
    );
    font-family: var(--font);
    color: var(--text);
}

/* `wrapper` del scale to fit — scaleToFit.js le fija ancho/alto en px. */
.menu-page__fit {
    flex-shrink: 0;
    overflow: hidden;
}

/* `target` del scale to fit: tamaño de DISEÑO fijo (no % del wrapper,
   que ya viene achicado — se encogería dos veces). Alto fijo también, a
   propósito: si midiera según el contenido, la escala cambiaría cada vez
   que cambia lo que se muestra (otra sección, un listado que carga) y la
   página "saltaría" de tamaño. Con alto fijo la escala es estable, y lo
   que no entre scrollea por dentro (.page-content). */
.menu-page__inner {
    width: 1040px;
    height: 640px;
    display: flex;
    flex-direction: column;
    transform-origin: 0 0;
}

/* ── Encabezado de página ── */
.menu-page__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.menu-page__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}

.menu-page__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
}

.menu-page__subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.menu-page__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.menu-page__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 18px;
}

/* Botón primario de página (acciones del encabezado, formularios). */
.page-btn {
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--accent);
    color: #04121c;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.page-btn:hover:not(:disabled) {
    filter: brightness(1.08);
}

.page-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.page-btn--ghost {
    background: transparent;
    border-color: var(--border-light);
    color: var(--text-secondary);
}

.page-btn--ghost:hover:not(:disabled) {
    filter: none;
    background: var(--bg-row-hover);
    color: var(--text);
}

/* ── Layout de dos columnas: navegación lateral + contenido ── */
.page-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    /* Fila explícita minmax(0,1fr): con la fila implícita (auto) el grid
       crece al alto del contenido y .page-content nunca scrollea. */
    grid-template-rows: minmax(0, 1fr);
    gap: 32px;
}

.page-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: start;
    /* Tarjeta propia (pedido explícito del usuario): con el juego en vivo
       de fondo (mismo fondo que PLAY) las categorías casi no se leían. Mismo
       lenguaje que el resto de las tarjetas del menú: translúcida + blur. */
    padding: 14px 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(var(--bg-card-rgb), 0.9);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}

.page-nav__heading {
    padding: 0 12px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Fila de menú lateral: activo = fondo tenue + barra de acento a la
   izquierda, el patrón de navegación secundaria de cualquier tienda web. */
.page-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.page-nav__item:hover {
    background: var(--bg-row-hover);
    color: var(--text);
}

.page-nav__item--active,
.page-nav__item--active:hover {
    background: var(--accent-dim);
    color: var(--text);
}

.page-nav__item--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
}

.page-nav__icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.page-nav__item--active .page-nav__icon {
    color: var(--accent);
}

.page-nav__icon svg,
.page-nav__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Contador a la derecha de un ítem (ej. "Owned 4" en Hats). */
.page-nav__count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.page-nav__item--active .page-nav__count {
    color: var(--accent);
}

/* Única zona que scrollea: el contenido. El encabezado de página y la
   navegación lateral quedan quietos. */
.page-content {
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px 16px 0;
}

.page-content::-webkit-scrollbar {
    width: 8px;
}

.page-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

.page-section-head {
    margin-bottom: 16px;
}

.page-section-head__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.page-section-head__desc {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Estado vacío / cargando / error dentro de una página. */
.page-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    /* Fondo propio: sobre el juego en vivo un recuadro vacío/punteado se
       perdía (mismo motivo que .page-nav). */
    background: rgba(var(--bg-card-rgb), 0.9);
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.page-empty__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.page-empty .page-btn {
    margin-top: 8px;
}

/* Títulos sin tarjeta detrás (encabezado de la página y de cada sección):
   sombra suave para que se lean sobre el juego en vivo del fondo. */
.menu-page__header,
.page-section-head {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6);
}

/* Entrada de página (pedido explícito del usuario: al abrir Shop/Cosmetics/
   ... por primera vez "se ve como si se movieran las cosas"). Un fade +
   subida corta camufla el acomodo inicial (datos que llegan async, imágenes
   que cargan). La animación se reinicia sola cada vez que la página pasa de
   display:none a visible. Se anima solo el contenido: el fondo (la viñeta)
   no parpadea al cambiar de pestaña. */
.menu-page__fit {
    animation: page-enter 0.22s var(--ease-out);
}

.main-container .scale-fit {
    animation: page-enter 0.22s var(--ease-out);
}

@keyframes page-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Resaltado deslizante del ítem activo (PageNavHighlight.jsx — pedido
   explícito del usuario: animación suave y rápida al cambiar). En los navs
   con .page-nav--sliding, el fondo y la barrita de acento del ítem activo
   los dibuja ESTE elemento (que se desliza), no el ítem. */
.page-nav--sliding {
    position: relative;
}

.page-nav--sliding .page-nav__item {
    z-index: 1;
}

.page-nav--sliding .page-nav__item--active,
.page-nav--sliding .page-nav__item--active:hover {
    background: transparent;
}

.page-nav--sliding .page-nav__item--active::before {
    content: none;
}

.page-nav__highlight {
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
    border-radius: 8px;
    background: var(--accent-dim);
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.15s ease;
}

.page-nav__highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
}

.page-nav__highlight--instant {
    transition: none;
}

/* Hover inmediato en filas de listas (pedido explícito del usuario: "el hover
   va lento, parece trabado" al pasar el mouse por modos/settings). Antes
   `transition: all` animaba TODO (fondo, sombras con glow...) en cada fila
   que el mouse cruzaba; ahora el fondo cambia al instante y solo el color
   del texto/borde tiene una transición cortita. */
.server-row,
.setting-item,
.slider-row,
.page-nav__item,
.nick-row,
.xplb-row,
.region-tab,
.team-picker__option,
.hat-card {
    transition: color 0.08s ease, border-color 0.08s ease;
}