/* Everthal · por tamaño de pantalla (mediana, móvil) y con movimiento reducido: va el último, pisa a los demás. */

/* --- Pantallas medianas: el panel algo más estrecho --------------------------------------------- */
@media (min-width: 861px) and (max-width: 1180px) {
  .mesa { --ancho-panel: 340px !important; }
  .reloj-fecha { display: none; }
  .turno { grid-template-columns: minmax(0, 1fr) minmax(120px, 30%); column-gap: 22px; }
}

/* --- Móvil: el relato a pantalla completa y las pestañas abajo, como en un juego ----------------- */
@media (max-width: 860px) {
  .propio-datos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .propio-nombre { grid-column: 1 / -1; }
  .mesa { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "barra" "contenido" "pestanas"; }
  .divisor { display: none; }
  .relato { grid-area: contenido; }
  .mesa:not([data-vista="relato"]) .relato { display: none; }
  .paneles { grid-row: 2 / 4; grid-column: 1; display: flex; flex-direction: column; min-height: 0; box-shadow: none; }
  .paneles > .pestana { flex: 1; min-height: 0; }
  .pestanas { order: 9; }
  .mesa[data-vista="relato"] .paneles { display: contents; }
  .mesa[data-vista="relato"] .pestanas { grid-area: pestanas; }
  .mesa[data-vista="relato"] .ficha, .mesa[data-vista="relato"] .pestana { display: none; }
  .mesa:not([data-vista="personaje"]) .ficha { display: none; }
  .pestanas { justify-content: space-around; padding: 0 0 env(safe-area-inset-bottom); border-bottom: 0; border-top: 1.5px solid color-mix(in srgb, var(--trazo) 60%, transparent); background: var(--hoja); }
  .pestanas .solo-movil { display: flex; }
  .pestanas button { flex: 1; flex-direction: column; gap: 1px; font-size: 12px; padding: 7px 2px 6px; min-width: 0; }
  .pestanas button .icono { display: block; width: 20px; height: 20px; }
  .pestanas button[aria-selected="true"]::after { top: -3px; bottom: auto; }
  .barra { grid-template-columns: 38px minmax(0, 1fr) auto 38px; padding: 8px 6px 8px 4px; gap: 6px; }
  .barra::after { left: 12px; right: 12px; }
  .donde { text-align: left; }
  .lugar-nombre { font-size: 20px; }
  .reloj-fecha, .esfera { display: none; }
  .historial { padding: 18px 16px 24px; }
  .turno { grid-template-columns: minmax(0, 1fr); font-size: calc(var(--tam-relato) * 0.96); }
  .cambios { grid-column: 1; grid-row: auto; border-left: 0; padding: 0; margin: -18px 0 24px; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; }
  .cambios-mas { flex-basis: 100%; }
  .cambios-mas summary { padding-left: 0; }
  .cambio { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--hoja-2) 75%, transparent); max-width: 100%; }
  .cambio > .icono { margin: 0; flex: none; }
  /* La entrada en un renglón: lo que escribe y, al lado, Ideas y Hacer. */
  .entrada { padding: 4px 16px 8px; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .renglon textarea { min-height: 40px; padding: 6px 2px 6px; }
  .entrada-botones { gap: 12px; padding-bottom: 5px; }
  .entrada-botones .boton-principal { padding: 8px 16px 9px; }
  .aviso-mesa, .ideas, .tablero { width: calc(100% - 32px); }
  .franja { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px 16px; padding: 6px 16px 8px; background: var(--hoja); border: 0; text-align: left; width: 100%; }
  .franja:empty { display: none; }
  .franja-recurso { display: grid; gap: 3px; min-width: 0; }
  .franja-cabecera { display: flex; justify-content: space-between; gap: 6px; font: 500 13px var(--f-ui); color: var(--tinta-2); }
  .franja-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .franja-recurso .carril { height: 7px; }
  .franja-recurso.baja .num { color: var(--r-vida-baja); }
  .franja .ficha-estados { grid-column: 1 / -1; margin: 0; }
  /* El hub en el móvil: el menú arriba, una fila que se desliza; el gasto y la cuenta, en la misma barra. */
  .hub { grid-template-columns: minmax(0, 1fr); }
  .hub-lado { position: sticky; top: 0; z-index: 4; height: auto; padding: 10px 12px 0; gap: 6px; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--trazo); }
  .hub-lado .marca { padding: 4px 4px; font-size: 20px; }
  .hub-lado-pie { margin: 0 0 0 auto; display: flex; align-items: center; }
  .hub-lado .gasto { display: none; }
  .cuenta-nombre { display: none; }
  .hub-nav { order: 3; flex: 1 0 100%; display: flex; gap: 2px; overflow-x: auto; margin: 0 -12px; padding: 0 12px 8px; scrollbar-width: none; }
  .hub-nav::-webkit-scrollbar { display: none; }
  .hub-nav a { flex: none; white-space: nowrap; min-height: 38px; }
  .hub-cuerpo { padding: 22px 16px 56px; }
  .hub-titulo { font-size: 28px; }
  .portada { padding: 0 16px 56px; gap: 36px; }
  .portada-nav a { display: none; }
  .portada-teselas { grid-auto-rows: 150px; }
  /* La tabla, en fichas de una columna: retrato, quién y, debajo, su mundo, dónde va y cuándo. */
  .cabecera-partidas { display: none; }
  .fila-partida { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 10px 6px 12px; }
  .fila-partida .abrir { grid-column: 1; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
  .fila-partida .abrir .medallon { --t: 44px; grid-row: span 3; }
  .fila-mundo, .fila-donde, .fila-cuando { grid-column: 2; font-size: 13px; }
  .fila-cuando { display: none; }
  .biblioteca-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biblioteca-buscar { grid-column: 1 / -1; }
  .inicio-columnas, .crear, .ficha-mundo-columnas { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Relativa, no estática: su marco (::before, absoluto) se dibujaría con el tamaño de la pantalla y
     cruzaría los comienzos. */
  .crear-resumen { position: relative; top: auto; }
  .crear { padding-bottom: 8px; }
  .crear-barra { display: flex; position: fixed; inset: auto 0 0; z-index: 5; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); align-items: center; gap: 12px; background: var(--hoja); border-top: 1.5px solid color-mix(in srgb, var(--trazo) 60%, transparent); box-shadow: 0 -8px 18px -12px rgb(60 40 15 / 0.3); transition: translate 200ms ease, opacity 200ms ease; }
  .crear-barra.oculta { translate: 0 100%; opacity: 0; pointer-events: none; }
  .crear-barra-texto { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
  .crear-barra-texto strong { font: 500 17px var(--f-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crear-barra-texto .tenue { font: italic 14px var(--f-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crear-barra .boton-principal { flex: none; padding: 10px 22px 11px; }
  /* Los desplegables del formulario, a todo el ancho (sin la sangría de la flecha). */
  .afinar .desplegable-cuerpo { padding-left: 14px; }
  /* Los ejes del tono: nombre y valor en un renglón y el deslizador debajo, ancho para el dedo. */
  .eje { grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding-bottom: 6px; }
  .eje input { grid-column: 1 / -1; grid-row: 2; height: 28px; }
  .eje-valor { grid-column: 2; grid-row: 1; text-align: right; }
  .reparto-fila { grid-template-columns: minmax(0, 1fr) 36px 34px 36px 36px; min-height: 42px; }
  .boton-reparto { width: 36px; height: 36px; }
  /* Las secciones de la Biblioteca, en una fila que se desliza. */
  .biblioteca-secciones { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 3px 16px 6px; scrollbar-width: none; }
  .biblioteca-secciones::-webkit-scrollbar { display: none; }
  /* La galería, de dos en dos: una imagen por fila no deja buscar. */
  .biblioteca-piezas.galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pieza-imagen { padding: 8px; }
  .pieza-imagen figcaption strong { font-size: 15px; }
  .biblioteca-grupos { margin-top: -18px; }
  .dialogo-imagen[open] { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .imagen-grande img { max-height: 60vh; }
  .imagen-ficha { max-height: none; overflow: visible; }
  .filtro { flex: none; white-space: nowrap; }
  .continuar-arte { min-height: 180px; }
  .continuar-arte .medallon { --t: 72px; }
  .continuar-texto { padding: 18px 18px 20px; }
  .continuar-titulo { font-size: 26px; }
  .ficha-comienzo .medallon { --t: 56px; }
  .tablero { margin-top: 10px; }
  .turnos { padding: 6px 10px 4px; gap: 8px; }
  .turnos .pie { display: none; }
  .turnos li .medallon { --t: 24px; font-size: 11px; } .turnos li.actua .medallon { --t: 28px; }
  .tablero .campo { min-height: 124px; }
  .figura { width: min(48px, 100%); }
  .luchador .nombre { font-size: 11.5px; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
  .luchador.fuera .nombre { display: none; }
  .acciones-cab .tenue { display: none; }
  .luchador .vida, .luchador .marcas { display: none; }
  .col .dist { font-size: 9px; letter-spacing: 0.06em; }
  .acciones { padding: 8px 8px 10px; gap: 7px; }
  .acciones-cab strong { font-size: 15px; }
  /* Las seis acciones a la vista en una fila, con el icono encima, como las pestañas: el tablero no se
     come el relato. */
  .botonera { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; }
  .botonera button { flex-direction: column; gap: 3px; min-height: 52px; padding: 7px 1px 5px; font: 500 11.5px var(--f-ui); letter-spacing: 0; }
  .botonera .icono { width: 20px; height: 20px; }
  .botonera .flecha { position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; translate: 0 0; }
  .botonera button[aria-expanded="true"] .flecha { translate: 0 2px; }
  .botonera .nombre-accion { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .luchador .nombre .largo { display: none; }
  .luchador .nombre .corto { display: inline; }
  /* El relato es una columna de alto fijo: el tablero cede (y se desliza por dentro) antes que la
     entrada, que nunca se monta sobre las pestañas. */
  .relato > .tablero { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border: 1.5px solid var(--trazo); }
  /* Lo mismo con las ideas y los avisos de la mesa: ceden y se deslizan por dentro. */
  .relato > .ideas { flex: 0 1 auto; max-height: 60%; }
  .relato > .aviso-mesa { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; max-height: 55%; }
  /* El aviso se desliza por dentro: su marco, un borde de verdad (el dibujado se cortaría al bajar). */
  .relato > .aviso-mesa { border: 1.5px solid var(--trazo); }
  .relato > .aviso-mesa::before { display: none; }
  .relato > .aviso-mesa.muerto { border-color: var(--mal); }
  /* Al deslizarse por dentro, un borde superpuesto cruzaría lo de dentro: el del propio tablero. */
  .relato > .tablero::before { display: none; }
  .carta { padding: 7px 10px 8px; }
  .carta strong { font-size: 15.5px; }
  .carta .texto { font-size: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .cartas { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
  .carta { scroll-snap-align: start; }
  .historial { min-height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.alarma { margin: 0 0 10px; font: 600 15px var(--f-ui); }