/* =====================================================================================
   movil.css — la versión para móvil y tablet de Karlos TCG
   =====================================================================================

   LA REGLA DE ESTE FICHERO: **todo va dentro de una media query**. Ni una regla suelta.
   Así, en una pantalla de escritorio ninguna de estas líneas llega a aplicarse y el juego se ve
   exactamente igual que antes, por construcción y no por cuidado. Lo vigila
   tests/movil_sin_fugas.js, que falla si alguien añade aquí una regla fuera de una @media.

   Se carga el ÚLTIMO en cada página, así que a igual especificidad gana. Muchas reglas llevan
   `!important` a propósito: las páginas usan mucho `style=""` en línea y anchos puestos desde
   JavaScript (el lobby online se pone a 850px), y contra eso no hay otra forma de ganar.

   Los colores NO se tocan: se reutilizan los de siempre. Esto cambia la DISPOSICIÓN, no el look.

   Cortes:
     · 900px  - el contenedor del lobby (850px) ya no cabe: todo pasa a fluido.
     · 640px  - móvil en vertical: las columnas se apilan.
     · landscape + poco alto - móvil en horizontal: se aprovecha el ancho, se ahorra alto.
   ===================================================================================== */


/* ─────────────────────────────── EL SCROLL ─────────────────────────────── */
/* global.css le cierra el scroll al body (`height: 100vh; overflow: hidden`) porque el tablero ocupa
   la pantalla justa. Fuera de la partida, en móvil las páginas miden más que la pantalla y hay que
   poder desplazarlas: sin esto, la sala y el constructor se veían pero NO se movían con el dedo
   (las capturas de página completa no lo notaban; lo vio Toto en su Android). */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1279px) {
    body:not(:has(#game-board)) { overflow-y: auto !important; }
}
/* En un móvil apaisado la portada tampoco cabe de alto: crece con su contenido en vez de cortarse. */
@media (pointer: coarse) and (max-height: 500px) {
    body:has(#guest-ui) { height: auto !important; min-height: 100vh; padding: 16px 0; box-sizing: border-box; }
}

/* ─────────────────────────────── PORTADA ─────────────────────────────── */
@media (max-width: 640px) {
    /* El título a 4rem no cabía en 390px: se partía en dos líneas y se salía por la izquierda. */
    .logo {
        font-size: clamp(2.2rem, 11vw, 3rem) !important;
        text-align: center !important;
        line-height: 1.05 !important;
        width: 100% !important;
        margin-bottom: 18px !important;
    }
    /* Los botones del menú ya miden ~50px: son cómodos para el dedo tal cual. */
}


/* ─────────────────────────────── LOBBY (local / IA / online) Y SALA ─────────────────────────────── */
@media (max-width: 900px), (pointer: coarse) and (max-height: 500px) {
    /* El body centraba en vertical con alto fijo de pantalla: con el contenido apilado eso cortaba
       por arriba y por abajo. Pasa a crecer con el contenido y a empezar arriba. */
    /* Y pasa a COLUMNA: en fila, si el body tiene algún otro hijo con ancho, se centra el GRUPO
       entero y el lobby acaba pegado a la izquierda. En columna cada hijo se centra solo. */
    /* OJO: acotado a la página del lobby. Sin el `:has`, esta regla le cambiaba el body a TODAS
       las páginas que cargan movil.css (constructor y partida incluidos). */
    body:has(#lobby-main) {
        height: auto !important;
        min-height: 100vh;
        flex-direction: column !important;
        align-items: center !important;
        /* Centrado en vertical si cabe; si no cabe, el body crece con el contenido (su alto es
           automático), así que nada queda cortado por arriba. */
        justify-content: center !important;
        padding: 56px 0 16px !important;
        box-sizing: border-box !important;
    }
    /* El contenedor tenía 600px fijos (850 en online, puestos desde JS): pasa a ocupar la pantalla. */
    .lobby-container, #lobby-main {
        width: calc(100vw - 20px) !important;
        max-width: 850px !important;
        padding: 18px 14px !important;
        box-sizing: border-box !important;
    }
    .online-view-container { height: auto !important; }
    #online-room-view { height: auto !important; }
    /* Sin el alto fijo del contenedor, las cajas que crecían con `flex: 1` se quedan en una raya:
       se les da un alto útil. En tablet hay sitio de sobra; en móvil se ajusta más abajo. */
    #global-chat-box, #room-chat-box { min-height: 300px !important; }
    #rooms-list { min-height: 260px !important; }
    .lobby-title { font-size: 1.6rem !important; }
    .lobby-subtitle { margin-bottom: 18px !important; }
}

@media (max-width: 640px) {
    /* Las dos columnas (jugador 1 / jugador 2, chat / salas, chat / sala) se apilan. */
    .players-setup, .online-view-container { flex-direction: column !important; }
    .players-setup .player-box { width: 100% !important; }

    /* Online: primero lo que se usa (crear, unirse, salas) y el chat debajo. */
    #online-lobby-view .online-col:first-child { order: 2; }
    #online-lobby-view .online-col:last-child  { order: 1; }
    /* Con el padre a alto automático, `flex: 1` deja las cajas a cero: se les da un alto útil. */
    #global-chat-box { min-height: 170px !important; max-height: 38vh; }
    #rooms-list { min-height: 150px !important; max-height: 42vh; }

    /* La sala: mismo trato, los asientos arriba y el chat debajo. */
    #online-room-view > div:last-child { flex-direction: column !important; }
    #online-room-view .online-col:first-child { order: 2; }
    #online-room-view .online-col:last-child  { order: 1; }
    #room-chat-box { min-height: 170px !important; max-height: 38vh; }

    /* La cabecera verde (SALA, candado, copiar, gracia, abandonar) no cabe en una línea: se parte
       en dos, el código y sus botones arriba y lo demás debajo. */
    #online-room-view > div:first-child {
        height: auto !important;
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
        padding: 10px 12px !important;
    }
    #online-room-view > div:first-child > div:first-child { flex-wrap: wrap; font-size: 1rem !important; }
    #current-room-code { font-size: 1.25rem !important; }

    /* Controles grandes para el dedo: 44px es el mínimo cómodo que usan iOS y Android. */
    .start-btn { min-height: 48px; letter-spacing: 1px !important; }
    select, input[type="text"], input[type="password"] { min-height: 44px; font-size: 16px !important; }
    /* 16px en los campos NO es estético: por debajo, Safari en iPhone hace zoom al enfocar. */

    /* La fila de "Código + Unirse + 👁️" se queda en fila, pero el campo cede sitio. */
    #room-code-input { min-width: 0; }

    /* Opciones de la partida local y contra la IA. La casilla se queda en su fila y es el TEXTO
       el que se parte; y el desplegable de "Jugador inicial" pasa debajo de su etiqueta, a todo el
       ancho, que en la misma línea cortaba "Aleatorio (lanzar moneda)". */
    .options-panel .opt-row { flex-wrap: nowrap; align-items: flex-start; text-align: left; }
    .options-panel .opt-row > span { min-width: 0; }
    .options-panel .opt-row:has(select) { flex-direction: column; align-items: stretch; gap: 6px; }
    .options-panel .opt-row:has(select) > select { flex: none !important; width: 100% !important; }
}


/* ─────────────────────────────── REGLAS ─────────────────────────────── */
@media (max-width: 640px) {
    /* El manual ocupaba el 80% del ancho con márgenes: en móvil se aprovecha la pantalla entera. */
    #rules-content-box {
        width: 100% !important;
        height: 100% !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    #rules-body { padding: 16px !important; }
    #rules-body .rule-text { text-align: left !important; }
    #rules-body .widget-box { gap: 8px !important; padding: 10px !important; }
    /* Las cartas de ejemplo, más pequeñas DE VERDAD (con las variables del tamaño de carta): un
       `scale()` solo las encoge a la vista y su caja sigue midiendo 90px, así que la fila de cuatro
       de "Ejemplo de vanguardia legal" desbordaba y el manual se movía de lado. */
    /* Cuatro en fila caben siempre: la cuarta parte de lo que dejan los márgenes (~96px), sin
       pasar de 68. */
    #rules-body { --card-width: min(68px, calc((100vw - 96px) / 4)); --card-height: calc(var(--card-width) * 1.4); }
    #rules-body .tutorial-card { margin: 0 !important; }
    #rules-body .widget-box > div[style*="display:flex"] { gap: 6px !important; padding: 8px !important; flex-wrap: wrap; justify-content: center; max-width: 100%; box-sizing: border-box; }
    #rules-body .list-steps { padding: 12px 18px !important; }
}


/* ─────────────────────────────── CONSTRUCTOR DE MAZOS ─────────────────────────────── */
/* En escritorio son dos paneles lado a lado y la página medía 975px: en un móvil la lista del mazo
   quedaba ENTERA fuera de la pantalla. Aquí pasa a pestañas (Catálogo / Mi mazo), que las pone
   movil.js; el total del mazo va siempre a la vista en la propia pestaña. */
@media (max-width: 900px), (pointer: coarse) and (max-height: 500px) {
    body:has(.deck-panel) { height: auto !important; min-height: 100vh; overflow-x: hidden; }

    /* La cabecera: el logo y los botones de ir y venir arriba, y el mazo que editas debajo, a
       todo el ancho. En una fila no cabía ni la mitad. */
    /* Tres filas: [logo · Reglas · Menú], [el mazo que editas], [nombre · Guardar · Borrar].
       `display: contents` en los controles los saca de su caja para poder ordenarlos junto al logo
       sin tocar el HTML. La cabecera NO se queda fija: ocupaba un tercio de la pantalla y no se
       usa mientras se busca en el catálogo. Lo que queda fijo son las pestañas. */
    body:has(.deck-panel) header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    body:has(.deck-panel) .header-controls { display: contents !important; }
    body:has(.deck-panel) .logo-mini { font-size: 1.1rem !important; order: 0; flex: 1 1 auto; }
    body:has(.deck-panel) header .header-btn[onclick^="mostrarReglas"] { order: 1; }
    body:has(.deck-panel) header .header-btn[onclick*="landing.html"] { order: 2; }
    body:has(.deck-panel) header .deck-select { order: 3; flex: 1 1 100%; min-height: 44px; font-size: 16px; }
    body:has(.deck-panel) header #deck-name { order: 4; flex: 1 1 120px; min-width: 0; min-height: 44px; font-size: 16px; box-sizing: border-box; }
    body:has(.deck-panel) header .header-btn.save { order: 5; }
    body:has(.deck-panel) header .header-btn.delete { order: 6; }
    body:has(.deck-panel) header .header-btn { min-height: 44px; }
    body:has(.deck-panel) #save-status { order: 7; flex: 1 1 100%; margin: 0 !important; text-align: center; }
    body:has(.deck-panel) #save-status:empty { display: none; }

    /* La barra de pestañas, pegada bajo la cabecera. */
    #movil-pestanas {
        display: flex !important;
        width: 100%;
        position: sticky; top: 0; z-index: 25;
        background: #0b1120;
        border-bottom: 2px solid #3b82f6;
    }
    #movil-pestanas button {
        flex: 1; min-height: 46px; border: none; background: transparent;
        color: #94a3b8; font-weight: bold; font-size: 0.95rem; cursor: pointer;
        border-bottom: 3px solid transparent;
    }
    #movil-pestanas button.activa { color: #fbbf24; border-bottom-color: #fbbf24; background: #0f172a; }
    #movil-pestanas .movil-de { color: #64748b; font-weight: normal; }
    #movil-pestanas button.completo #movil-total { color: #4ade80; }
    /* Añadir una carta desde el catálogo no se ve en esa pestaña: la del mazo da un latido. */
    #movil-pestanas button.latido { animation: movilLatido 0.45s ease; }
    @keyframes movilLatido { 0% { background: transparent; } 35% { background: #1d4ed8; color: #fff; } 100% { background: transparent; } }

    /* Un panel cada vez, a pantalla completa. */
    body:has(.deck-panel) .main-container { display: block !important; overflow: visible !important; }
    body:has(.deck-panel) .catalog-panel { border-right: none !important; }
    body:has(.deck-panel) .deck-panel { min-width: 0 !important; padding: 14px !important; }
    body.movil-pestana-mazo .catalog-panel { display: none !important; }
    body:not(.movil-pestana-mazo) .deck-panel { display: none !important; }

    /* Filtros: la búsqueda a todo el ancho y los tipos en una fila que se desliza con el dedo. */
    body:has(.deck-panel) .filters { flex-wrap: wrap !important; padding: 10px 12px !important; gap: 8px !important; }
    body:has(.deck-panel) .filters .search-bar { flex: 1 1 100% !important; min-height: 44px; font-size: 16px; box-sizing: border-box; }
    body:has(.deck-panel) .filter-btn { flex: 1 1 auto; min-height: 38px; }

    /* La rejilla de cartas, fluida: tantas columnas como quepan de 150px (dos en un móvil, cuatro
       en una tablet en vertical), y la carta crece hasta ocupar su hueco. */
    body:has(.deck-panel) .card-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px !important;
        padding: 12px !important;
        overflow: visible !important;
    }
    body:has(.deck-panel) .card-mini { width: auto !important; height: auto !important; aspect-ratio: 140 / 196; }
    /* Sin ratón no hay "pasar por encima": el salto de la carta solo estorba al hacer scroll. */
    body:has(.deck-panel) .card-mini:hover { transform: none !important; }
    body:has(.deck-panel) .c-text { font-size: 0.68rem !important; }
    body:has(.deck-panel) .c-name { font-size: 0.85rem !important; }

    /* La lista del mazo: filas altas, que se tocan con el dedo. */
    body:has(.deck-panel) .deck-list { overflow: visible !important; }
    body:has(.deck-panel) .deck-item { min-height: 44px; box-sizing: border-box; }
}


/* ─────────────────────────────── LA PARTIDA ─────────────────────────────── */
/* El tablero de escritorio necesita ~1100px: pilas de 210px a cada lado y filas de 600. En vertical
   se reparte de arriba abajo: mano rival en miniatura, retaguardia y vanguardia rivales, una franja
   con el turno y los botones, tu vanguardia y retaguardia, y tu mano abajo, deslizable. Las pilas
   se quedan donde siempre -a la izquierda- pero en una columna estrecha de fichas.

   Las cartas se encogen con las MISMAS variables que usa el escritorio (--card-width/height), no
   con `zoom`: las flechas calculan su anclaje mezclando getBoundingClientRect (que ve el zoom) con
   offsetHeight (que según el navegador no), y con zoom quedarían desplazadas.
   Todo va acotado con `body:has(#game-board)`: estas variables no pueden tocar otras páginas.

   Además de los móviles, lo usan las TABLETS en horizontal (táctiles hasta 1279px): ahí el tablero
   de escritorio no cabe de alto (en 1024x768 medía 929px y cortaba tu mano) y, sin ratón, su detalle
   no se podía abrir. Este reparto sí cabe en 768px. */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1279px) {
    body:has(#game-board) {
        /* 70px es el máximo que deja caber cuatro cartas por fila en 390px junto a la columna
           de pilas; el alto sale de la proporción de siempre (90x126). */
        --card-width: 70px;
        --card-height: 98px;
        --stack-offset: 0px;
        --fila-max: 100%;
        --movil-pila: 46px;       /* ancho de la columna de pilas */
        --movil-mano-w: 78px;     /* la mano, más grande que el tablero: hay que leerla para jugar */
        --movil-mano-h: 109px;
        height: 100dvh;           /* dvh: la barra del navegador del móvil no se come el tablero */
    }

    /* Los botones de arriba (DEBUG, REGLAS, volumen) más pequeños, y el área rival se aparta. */
    body:has(#game-board) #debug-btn-main,
    body:has(#game-board) #rules-btn-main { padding: 4px 8px !important; font-size: 0.65rem !important; }
    body:has(#game-board) #volume-control { transform: scale(0.8); transform-origin: top right; }
    body:has(#game-board) #p2-area { padding-top: 30px !important; }

    /* ── Las cartas del tablero: el mismo diseño, más pequeño ── */
    body:has(#game-board) .card { font-size: 0.48rem; padding: 2px; }
    body:has(#game-board) .card-header { height: 14px; }
    body:has(#game-board) .card-image { font-size: 1rem; margin: 1px 0; }
    /* El texto de habilidad no se lee a este tamaño: fuera del tablero. Se lee entero en el
       detalle, manteniendo pulsada la carta. */
    body:has(#game-board) .zone-row .card-body { display: none; }
    body:has(#game-board) .stat-label { font-size: 0.34rem; }
    body:has(#game-board) .stat-val { font-size: 0.62rem; height: 0.85rem; }
    body:has(#game-board) .furor-container { width: 16px; height: 16px; font-size: 0.6rem; top: -5px; right: -7px; border-width: 1px; }
    body:has(#game-board) .status-dot { width: 16px; height: 16px; font-size: 0.55rem; top: -5px; left: -8px; border-width: 1px; }
    body:has(#game-board) .counter-badge { height: 16px; min-width: 16px; right: -10px; bottom: -5px; }
    body:has(#game-board) .counter-badge span { font-size: 0.6rem; }
    body:has(#game-board) .stealth-badge { width: 16px; height: 16px; font-size: 0.6rem; left: -8px; bottom: -5px; }

    /* Las etiquetas azules de habilidad (BI-CHOQUE, APARICIÓN...), a la escala de la carta. Su
       caja invisible mide el 300% de la carta a propósito (truco de centrado del escritorio) y no
       se toca; lo que se encoge es la etiqueta. Y sin el "crece al pasar el ratón": en táctil el
       :hover se queda pegado después del toque y la dejaba estirada. */
    body:has(#game-board) .zone-row .action-btn-container { bottom: 18px; gap: 3px; }
    body:has(#game-board) .zone-row .action-btn-card { font-size: 0.48rem; padding: 3px 6px; max-width: 64px; border-radius: 8px; }
    body:has(#game-board) .zone-row .action-btn-card:hover { max-width: 64px; transform: none; }
    /* El juego ya recorta lo que sobresale (el body va sin scroll); esto lo asegura también dentro
       del tablero, que en móvil no tiene por qué desplazarse de lado nunca. */
    body:has(#game-board) #game-board { overflow-x: hidden; }

    /* La ficha del evento en juego: su nombre en letra pequeña y la cuenta atrás, que es lo que
       importa de un vistazo. */
    body:has(#game-board) .active-event-card > div:first-child { font-size: 0.38rem !important; line-height: 1; padding: 0 1px; overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; }
    body:has(#game-board) .active-event-card > div:last-child { font-size: 0.8rem !important; line-height: 1; }

    /* ── Filas ── */
    body:has(#game-board) .rows-container {
        gap: 5px;
        padding-left: calc(var(--movil-pila) + 8px) !important;   /* sitio para la columna de pilas */
        padding-right: 4px !important;
    }
    /* El hueco entre cartas lo pone la FILA, no la carta. El JS le da a cada carta un margen
       leyendo el desplazamiento de sus insignias directamente de global.css (16px por el Furor, 32
       si tiene contadores), pero aquí las insignias son más pequeñas y él no las ve: sus reglas
       viven dentro de una media query y el JS solo mira las de primer nivel. Con 9px de hueco
       caben cuatro cartas de 70 y las insignias (que asoman 7-10px) no pisan a la vecina. */
    body:has(#game-board) .zone-row { width: 100% !important; box-sizing: border-box; gap: 9px; padding: 3px; min-height: calc(var(--card-height) + 6px); }
    body:has(#game-board) .zone-row > .card { margin: 0 !important; }
    body:has(#game-board) .zone-label { font-size: 0.9rem; }

    /* ── Las pilas: una columna estrecha de fichas a la izquierda ── */
    body:has(#game-board) .stacks-container {
        left: 4px !important; gap: 4px !important;
        width: var(--movil-pila);
    }
    body:has(#game-board) .stack-row { flex-direction: column; gap: 4px; }
    body:has(#game-board) .stack-card {
        width: var(--movil-pila) !important; height: 34px !important;
        font-size: 0.45rem !important; border-width: 1px !important; box-shadow: none !important;
        overflow: hidden;
    }
    body:has(#game-board) .stack-card .count-badge { width: 15px; height: 15px; font-size: 0.55rem; bottom: 1px; right: 1px; }
    body:has(#game-board) #p2-area .stacks-container { bottom: 4px !important; }
    body:has(#game-board) #p1-area .stacks-container { top: 4px !important; }

    /* ── Las manos ──
       La que se ve es una tira que se desliza con el dedo, con las cartas enteras y sin solapar (el
       solape lo calcula el JS dando por hecho cartas de 90px; aquí no se solapa y listo). La que va
       en dorsos, en miniatura. Lo decide lo que hay DENTRO y no la posición: en local la mano
       visible es la de quien juega y cambia con el turno, y en online J2 juega con la de arriba. */
    body:has(#game-board) .hand-zone {
        height: calc(var(--movil-mano-h) + 12px) !important;
        justify-content: flex-start !important; align-items: center !important;
        overflow-x: auto !important; overflow-y: hidden !important;
        padding: 6px 8px !important; gap: 6px !important;
        margin: 0 !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    body:has(#game-board) .hand-zone .card {
        width: var(--movil-mano-w) !important; height: var(--movil-mano-h) !important;
        margin-right: 0 !important;
        font-size: 0.5rem; scroll-snap-align: start;
    }
    body:has(#game-board) .hand-zone .card-body { height: 22px; font-size: 0.4rem; }
    body:has(#game-board) .hand-zone .card-back { width: 20px !important; height: 28px !important; }
    body:has(#game-board) .hand-zone:not(:has(.card:not(.card-back))) {
        height: 30px !important; padding: 0 8px !important; gap: 2px !important;
        justify-content: center !important;
    }
    body:has(#game-board) .hand-zone:hover .card { transform: none; }

    /* ── Turno y botones: una franja entre los dos campos ── */
    body:has(#game-board) #ui-layer {
        position: static !important; top: auto !important; right: auto !important;
        flex-direction: row !important; align-items: center; justify-content: center;
        gap: 6px !important; padding: 4px 6px; flex-wrap: wrap;
        background: rgba(0, 0, 0, 0.35);
    }
    body:has(#game-board) #ui-layer > div:first-child { min-width: 0 !important; padding: 2px 8px !important; display: flex; align-items: baseline; gap: 6px; }
    body:has(#game-board) #ui-layer > div:first-child > div:first-child { display: none; }   /* "TURNO ACTUAL" */
    body:has(#game-board) #active-player-disp { font-size: 0.85rem !important; }
    body:has(#game-board) #ui-layer .game-btn { padding: 8px 14px; min-height: 36px; }

    /* ── El detalle: en reposo no se enseña (tapaba el tablero). Se abre manteniendo pulsada
       una carta, como hoja desde abajo (ver movil.js). ── */
    body:has(#game-board):not(.movil-detalle) #card-preview { display: none !important; }
    body.movil-detalle #card-preview {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
        width: auto !important; transform: none !important;
        max-height: 72dvh; overflow-y: auto !important;
        border-radius: 14px 14px 0 0 !important;
        pointer-events: auto !important;
        z-index: 9500 !important;
        max-width: 640px; margin: 0 auto !important;   /* en una tablet apaisada no ocupa todo el ancho */
    }

    /* El velo que hay detrás del detalle abierto: tocarlo cierra, y ese toque no hace nada más. */
    #movil-velo { display: block !important; position: fixed; inset: 0; background: rgba(2, 6, 23, 0.55); z-index: 9450; }
    body:not(.movil-detalle) #movil-velo { display: none !important; }

    /* La fase actual, en la franja del turno (la cuenta el panel de reposo, que aquí se oculta).
       Viene de un atributo del contenedor, no de un elemento: ver movil.js. */
    body:has(#game-board) #ui-layer[data-movil-fase]:not([data-movil-fase=""])::before {
        content: attr(data-movil-fase);
        order: -1;
        color: #fbbf24; font-weight: 900; font-size: 0.72rem; letter-spacing: 1px;
        text-transform: uppercase; padding: 4px 8px;
        background: rgba(0, 0, 0, 0.8); border: 1px solid #475569; border-radius: 5px;
    }

    /* Junto a REGLAS, que está colocada a mano (absolute). En online sin ser admin el juego oculta
       DEBUG y corre REGLAS a su hueco con un `left: 10px` en línea: entonces se corre también. */
    #movil-btn-historial { display: inline-block !important; position: absolute; top: 10px; left: 138px; z-index: 7000; padding: 4px 8px !important; font-size: 0.65rem !important; background: #475569; }
    #rules-btn-main[style*="left: 10px"] + #movil-btn-historial { left: 78px; }
    #movil-btn-historial.activo { background: #16a34a; }

    /* ── El historial: plegado en un botón (ver movil.js), y a pantalla media al abrirlo ── */
    /* Con `:not()` y no con dos reglas enfrentadas: la que oculta lleva un id dentro del `:has` y
       pesaba más que la que abre, así que el botón no abría nada. */
    body:has(#game-board):not(.movil-historial) #log-container { display: none !important; }
    body.movil-historial #log-container {
        display: flex !important;
        position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
        width: auto !important; height: 45dvh !important;
        border-radius: 14px 14px 0 0 !important; z-index: 9400 !important;
    }

    /* ── Los modales de la partida ──
       Las opciones de una elección (Zoe, Xanadu, Wolfgang...) iban en fila y con tres se salían por
       los dos lados: en columna, anchas y fáciles de tocar. El "ELIGE UN TIPO", en rejilla de 2x2. */
    body:has(#game-board) #choice-title { font-size: 1.4rem !important; padding: 0 12px; }
    body:has(#game-board) #choice-buttons {
        flex-direction: column; align-items: stretch;
        width: min(90vw, 380px); margin-top: 0;
    }
    body:has(#game-board) #type-select-modal .type-btn-container {
        display: grid; grid-template-columns: 1fr 1fr; width: min(90vw, 380px);
    }
    body:has(#game-board) .type-btn { padding: 14px 10px; min-height: 48px; }
    body:has(#game-board) .type-btn:hover { transform: none; }
    /* El buscador de la mano: el campo, el contador y los dos botones no caben en una línea.
       El campo arriba a todo lo ancho (a 16px: con menos, el iPhone hace zoom al tocarlo). */
    body:has(#game-board) .search-modal-content { width: 96% !important; height: 94% !important; padding: 12px !important; }
    body:has(#game-board) .search-modal-content > h2 { font-size: 1.15rem; margin-bottom: 10px; }
    body:has(#game-board) .search-modal-content > h2 + div { flex-wrap: wrap; gap: 8px; margin-bottom: 10px !important; }
    body:has(#game-board) #modal-search-input { flex: 1 1 100%; width: auto !important; font-size: 16px; box-sizing: border-box; }
    body:has(#game-board) #selection-info { flex: 1; }
    body:has(#game-board) #search-grid { gap: 10px !important; padding: 10px !important; }
    /* El panel DEBUG (solo admins): a lo ancho de la pantalla, en una columna y con su propio scroll. */
    body:has(#game-board) #debug-modal { left: 0 !important; right: 0; top: 40px !important; bottom: 0; overflow-y: auto; align-items: flex-start; }
    body:has(#game-board) #debug-modal .debug-panel { flex: 1; width: auto !important; max-width: none !important; min-width: 0; margin: 0 6px 12px; }
    body:has(#game-board) #debug-modal .dbg-grid-2 { grid-template-columns: 1fr; }
}

/* ── Tablet en vertical: hay sitio de sobra. Las cartas vuelven a su diseño de escritorio (letra,
   texto de habilidad) y crecen un poco; el resto del reparto es el del móvil. ── */
@media (min-width: 700px) and (max-width: 900px) and (min-height: 900px) {
    body:has(#game-board) {
        --card-width: 100px;
        --card-height: 140px;
        --movil-pila: 64px;
        --movil-mano-w: 100px;
        --movil-mano-h: 140px;
    }
    body:has(#game-board) .card { font-size: 0.6rem; padding: 3px; }
    body:has(#game-board) .card-header { height: 18px; }
    body:has(#game-board) .card-image { font-size: 1.5rem; margin: 2px 0; }
    body:has(#game-board) .zone-row .card-body { display: block; }
    body:has(#game-board) .stat-label { font-size: 0.4rem; }
    body:has(#game-board) .stat-val { font-size: 0.65rem; height: 1rem; }
    body:has(#game-board) .zone-row { gap: 14px; }
    body:has(#game-board) .zone-row .action-btn-container { bottom: 24px; }
    body:has(#game-board) .zone-row .action-btn-card { font-size: 0.55rem; max-width: 90px; }
    body:has(#game-board) .zone-row .action-btn-card:hover { max-width: 90px; }
    body:has(#game-board) .stack-card { height: 48px !important; font-size: 0.55rem !important; }
    body:has(#game-board) .hand-zone .card-body { height: 32px; font-size: 0.5rem; }
    body:has(#game-board) .hand-zone .card-back { width: 28px !important; height: 39px !important; }
    body:has(#game-board) .hand-zone:not(:has(.card:not(.card-back))) { height: 42px !important; }
}

/* ── Móvil en horizontal: la partida no cabe. Son cuatro filas de cartas más la mano en ~390px de
   alto, y a un tamaño que se pueda leer no entran ni con el tablero entero reordenado. Se pide
   girar el móvil, como hacen la mayoría de juegos de cartas. Solo en pantallas táctiles (`pointer:
   coarse`): una ventana de escritorio muy apaisada no es un móvil y sigue como siempre. Y solo en la
   partida: portada, salas y constructor se desplazan con el dedo y se usan bien en horizontal. ── */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
    body:has(#game-board)::after {
        content: "\21BB\A Gira el móvil\A La partida se juega en vertical";
        white-space: pre; text-align: center;
        position: fixed; inset: 0; z-index: 99999;
        display: flex; align-items: center; justify-content: center;
        background: var(--bg-color, #0f172a); color: #e2e8f0;
        font-size: 1.1rem; font-weight: bold; line-height: 1.8;
    }
}