/* =====================================================================
   RESPONSIVE MÓVIL — theme odin (2026-10-18)
   Se carga DESPUÉS de codex.css. Solo media queries: el escritorio no cambia.
   ===================================================================== */

/* ---------- 1. Grids: nunca más anchos que la pantalla ----------
   "1fr" = minmax(auto, 1fr) → la columna crece al ancho mínimo del
   contenido (textos nowrap, tablas) y se sale de la pantalla. */
@media (max-width: 1080px) {
    .cx-grand-hub__grid { grid-template-columns: minmax(0, 1fr) !important; }
    .cx-hub-col,
    .cx-hub-server-content,
    .cx-hub-news-content,
    .cx-sinfo-box,
    .cx-grand-news-card { min-width: 0; }
}

/* ---------- 2. Información del servidor + Noticias (hub) ---------- */
@media (max-width: 640px) {
    .cx-hub-title { font-size: clamp(19px, 5.6vw, 22px) !important; letter-spacing: .05em !important; }

    .cx-sinfo-dual-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .cx-sinfo-box { padding: 18px 14px 14px; }
    .cx-sinfo-row { gap: 10px; }
    .cx-sinfo-row__lbl { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
    .cx-sinfo-row__val { flex: 0 1 auto; max-width: 58%; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; font-size: 12px; }

    /* Franja Gremio/Fortalezas/Protección: tenía height fijo de 64px y se
       montaba encima del título "Noticias". */
    .cx-sinfo-strip { height: auto !important; min-height: 0 !important; padding: 14px 16px; }
    .cx-sinfo-strip__item { width: 100%; min-width: 0; }
    .cx-sinfo-strip__val { white-space: normal; }

    /* Noticias: una tarjeta por fila (antes 2 columnas cortadas). */
    .cx-grand-news-duo { grid-template-columns: minmax(0, 1fr) !important; }
    .cx-news-bottom-strip { height: auto !important; min-height: 0 !important; flex-wrap: wrap; padding: 14px 16px; gap: 12px; }
    .cx-news-bottom-strip__hint { flex: 1 1 100%; min-width: 0; }
    .cx-news-bottom-strip .cx-news__subtle-btn { width: 100%; justify-content: center; text-align: center; }
}

/* ---------- 3. Radar de Uniques ----------
   El contenedor centra a sus hijos (align-items:center) y la barra de
   herramientas medía lo que su contenido (863px). */
@media (max-width: 992px) {
    .cx-utracker-toolbar { width: 100%; max-width: 100%; box-sizing: border-box; align-self: stretch; }
    .cx-utracker-nav { min-width: 0; max-width: 100%; }
    .cx-utracker-nav-btn { flex: none; }
    .cx-utracker-tools { min-width: 0; }
    .cx-utracker__grid { width: 100%; }
}
@media (max-width: 600px) {
    .cx-utracker-toolbar { padding: 10px; }
    .cx-utracker-tools { flex-wrap: nowrap; gap: 8px; }
    .cx-utracker-toggle-alive { flex: none; padding: 7px 10px; }
    .cx-utracker-search-box { min-width: 0; }
    .cx-utracker__grid { max-width: 100% !important; }
    /* Estado VIVO/MUERTO: dentro de la barra de variante, no encima del borde */
    .cx-utracker-card__corner-status { top: 3px; right: 6px; }
}

/* ---------- 4. Salón de la Fama: gremio dominante ---------- */
@media (max-width: 560px) {
    body.odin-body .cx-guild-champion {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 14px 14px 16px !important;
    }
    .cx-guild-champion__head { gap: 10px; }
    .cx-guild-champion__badge { white-space: nowrap; font-size: 9.5px !important; letter-spacing: .1em !important; }
    .cx-guild-champion__rank-tag { white-space: nowrap; font-size: 12px !important; }
    .cx-guild-champion__content {
        flex-direction: column !important;
        gap: 18px !important;
    }
    .cx-guild-champion__portrait-wrap,
    .cx-guild-champion__portrait,
    .cx-guild-champion__portrait--vacant { width: 104px !important; height: 104px !important; }
    .cx-guild-champion__info {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }
    .cx-guild-champion__name { max-width: 100% !important; font-size: 26px !important; }
    .cx-guild-champion__meta { flex-wrap: wrap !important; justify-content: center !important; gap: 6px 14px !important; }
    .cx-guild-champion__stats { width: 100% !important; gap: 8px !important; }
    .cx-gstat { padding: 7px 6px !important; align-items: center !important; min-width: 0 !important; }
    .cx-gstat__label { font-size: 9px !important; letter-spacing: .08em !important; white-space: nowrap; }
    .cx-gstat__val { max-width: 100%; }
}

/* ---------- 5. Guerra de Fortalezas: reloj ---------- */
@media (max-width: 600px) {
    .cx-fort__timer-hud { display: flex; width: 100%; max-width: 100%; box-sizing: border-box; padding: 12px 10px; }
    .cx-fort__timer-tag { text-align: center; letter-spacing: .14em; }
    .cx-fort__clock { width: 100%; justify-content: center; gap: 4px; }
    .cx-fort__clock > div,
    .cx-fort__clock-unit { flex: 1 1 0; width: auto !important; min-width: 0; max-width: 74px; padding: 8px 0 !important; }
    .cx-fort__clock b,
    .cx-fort__clock-unit b { font-size: clamp(20px, 6.4vw, 26px) !important; }
    .cx-fort__clock-unit span { font-size: 9px; letter-spacing: .1em; }
    .cx-fort__clock-sep { font-size: 16px; }
}

/* ---------- 6. Títulos de sección: que no toquen los bordes ---------- */
@media (max-width: 480px) {
    .odin-body main .atlas-section__head h2,
    .odin-body main .atlas-section__title { font-size: clamp(22px, 7vw, 28px) !important; letter-spacing: .06em !important; overflow-wrap: break-word; }
}

/* ---------- 7. Página de Clasificación (jugadores / gremios) ----------
   La fila tenía 5 elementos en 4 columnas: los IP caían a una 2.ª fila de
   38px y se cortaban por la izquierda. Ahora: gremio debajo del nombre. */
@media (max-width: 900px) {
    .odin-rank__row {
        grid-template-columns: 2.4rem 46px minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto;
        column-gap: 10px !important;
        row-gap: 4px !important;
    }
    .odin-rank__row > b { grid-column: 1; grid-row: 1 / span 2; }
    .odin-rank__row > .cx-medal__frame,
    .odin-rank__row > img,
    .odin-rank__row > .odin-rank__mark { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .odin-rank__row > .odin-rank__who { grid-column: 3; grid-row: 1; min-width: 0; align-self: end; }
    .odin-rank__row > em,
    .odin-rank__row > .odin-rank__guild { grid-column: 3; grid-row: 2; min-width: 0; align-self: start; }
    .odin-rank__row > .odin-rank__pts { grid-column: 4; grid-row: 1 / span 2; align-self: center; justify-self: end; white-space: nowrap; }
    .odin-rank__who strong,
    .odin-rank__who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .odin-rank__guild-pill,
    .odin-rank__guild-empty { max-width: 100%; padding-top: 2px !important; padding-bottom: 2px !important; }
    .odin-rank__guild-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .odin-rank__guild-pill > img { width: 22px !important; height: 22px !important; min-width: 22px !important; border: 0 !important; margin-right: 0 !important; }
}

/* ---------- 8. Razas (China / Europa): mismo tamaño de personaje ----------
   Antes la altura era un % de cada sección y una regla vieja de codex.css
   (width 66% / max-height 52%) encogía solo al europeo. Ahora los dos tienen
   la misma altura fija y la sección reserva ese espacio debajo del texto,
   así el personaje nunca tapa los textos ni los botones. */
@media (max-width: 900px) {
    .cx-sides--face .cx-side.cx-side--china,
    .cx-sides--face .cx-side.cx-side--europe {
        --cx-art-h: min(80vw, 360px);
        min-height: 0 !important;
        padding-bottom: calc(var(--cx-art-h) + 4px) !important;
    }
    .cx-sides--face .cx-side.cx-side--china .cx-side__art,
    .cx-sides--face .cx-side.cx-side--europe .cx-side__art {
        height: var(--cx-art-h) !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        left: auto !important;
        right: -3% !important;
        bottom: 0 !important;
        transform: none !important;
        object-fit: contain;
    }
}

/* ---------- 9. "Lo que te espera" (Economía/Batallas/Únicos/Premium) ----------
   El arte sobresale de la tarjeta a propósito, pero en 2 columnas se salía
   por los lados (Roc) y se montaba sobre la fila de arriba (Premium). */
@media (max-width: 1100px) {
    .cx-systems__grid { row-gap: 72px !important; }
    .cx-systems__grid .cx-sys .cx-sys__art img { height: 118% !important; max-width: 100% !important; }
}

/* ---------- 10. Menú móvil ----------
   El desenfoque (backdrop-filter) de la barra superior convierte a la barra
   en el "contenedor" de los elementos fixed: el menú quedaba encerrado en
   los 70px de la barra y solo se veía "INICIO". Con el menú abierto se quita
   el desenfoque (la barra ya es casi opaca, no cambia el aspecto). */
.odin-body.menu-open .odin-bar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}