/* Móvil en horizontal ("modo compacto"): pantallas bajas en apaisado, p. ej. 667×375, 844×390, 915×412.
   Se carga la última para poder ajustar todo. */

.only-compact { display: none; }

/* Táctil en general: sin retardo de doble toque y sin selección de texto al mantener pulsado */
body { touch-action: manipulation; }
.hud, .sidebar, button, .card, .tab, .chip { -webkit-user-select: none; user-select: none; }

/* Cartas del banquillo: el dedo desplaza a lo largo del banquillo y arrastra en el otro eje */
.bench .card { touch-action: pan-x; }

/* Hueco del notch y la barra de inicio del móvil */
.main { margin-right: env(safe-area-inset-right); margin-bottom: env(safe-area-inset-bottom); }

/* Botón de pantalla completa (solo aparece en táctiles que la permiten) */
.hud-btn {
  flex: none;
  width: calc(var(--hud-h) * 0.55);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #ffffff1c;
  font-size: calc(var(--hud-h) * 0.3);
  cursor: pointer;
}

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --hud-h: 44px;
    font-size: 14px;
  }
  .only-wide { display: none; }
  .only-compact { display: inline; }

  /* ---------- Menú izquierdo estrecho y submenú bajo ---------- */
  :root { --side-w: 80px; --nav-h: 40px; }
  .sidebar { gap: 4px; padding: 4px; padding-left: max(4px, env(safe-area-inset-left)); }
  .sidebar__nav { gap: 4px; }
  .sidebar__link { min-height: 0; flex: 1; padding: 2px; border-radius: 10px; font-size: 9.5px; }
  .sidebar__nav li { flex: 1; display: flex; }
  .sidebar__icon { font-size: 18px; }
  .subnav { gap: 4px; padding: 3px 6px; padding-bottom: max(3px, env(safe-area-inset-bottom)); }
  .subnav__link { gap: 5px; padding: 2px 6px; border-radius: 10px; font-size: 12px; }
  .subnav__icon { font-size: 16px; }

  /* ---------- HUD ---------- */
  .hud { gap: 6px; padding: 0 8px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .hud__left { gap: 6px; }
  .crest { width: 34px; font-size: 18px; }
  .hud__club, .badge--level { display: none; }
  .hud__sub { gap: 6px; font-size: 11px; }
  .hud__center { gap: 6px; padding: 2px 12px 2px 6px; }
  .mood { font-size: 22px; }
  .balance { font-size: 16px; }
  .hud__right { gap: 6px; }
  .rival__name { display: none; }
  .rival__vs { font-size: 0.7rem; }
  .rival__crest { width: 28px; font-size: 15px; }
  .weather { font-size: 18px; }
  .kickoff { padding: 2px 8px; }
  .kickoff small { display: none; }
  .kickoff b { font-size: 15px; }
  .kickoff b::before { content: '⏱ '; font-size: 0.8em; }
  .help-btn, .hud-btn { width: 28px; font-size: 15px; }
  /* Botones de la barra superior: cuadrados y con tamaño de dedo (36 px) */
  .hud .hud-btn, .hud .help-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; font-size: 18px; }

  /* ---------- Modales y avisos ---------- */
  .modal-overlay { padding: 6px; }
  .modal { max-height: calc(100dvh - 12px); border-radius: 16px; }
  .modal__head { padding: 8px 14px 2px; }
  .modal__head h2 { font-size: 1.1rem; }
  .modal__close { width: 30px; height: 30px; }
  .modal__body { padding: 4px 14px; }
  .modal__actions { padding: 6px 14px 10px; }
  .modal .btn { padding: 0.5em 1em; }
  .report__match { padding: 8px; margin-bottom: 8px; }
  .report__match b { font-size: 1.5rem; }
  .toasts { top: calc(var(--hud-h) + 4px); }
  .toast { padding: 6px 12px; font-size: 0.85rem; }

  /* Filas de chips: una sola línea desplazable en lugar de ocupar varias */
  .tactics__bar, .squad__head, .team-squad__chips, .team-view__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tactics__bar::-webkit-scrollbar, .squad__head::-webkit-scrollbar { display: none; }
  .chip { padding: 0.25em 0.65em; font-size: 0.78rem; }

  /* ---------- Estadio ---------- */

  /* ---------- Liga ---------- */
  .league { gap: 6px; padding: 6px 8px; grid-template-columns: 1fr minmax(190px, 34%); }
  .league__head { gap: 8px; flex-wrap: nowrap; }
  .league__nav { width: 32px; height: 32px; flex: none; }
  .league__title h2 { font-size: 1.05rem; }
  .league__title .muted { font-size: 0.75rem; }
  .league__progress { margin-top: 3px; }
  .zone { padding: 2px 7px; font-size: 0.7rem; white-space: nowrap; }
  .league__legend { display: none; }
  .league__bar { gap: 6px; flex-wrap: nowrap; }
  .group-picker .league__nav, .group-picker select { height: 28px; width: auto; min-width: 28px; }
  .group-picker select { padding: 0 6px; font-size: 0.78rem; }
  .group-picker .btn { padding: 4px 8px; font-size: 0.72rem; white-space: nowrap; }
  .playoffs { padding: 8px; gap: 8px; }
  .standings td, .standings th { padding: 3px 4px; }
  .rank { width: 22px; height: 22px; font-size: 0.8rem; }
  .standings .pts { font-size: 1rem; }
  .league__side { gap: 6px; }
  .league__side section { padding: 8px; }
  .league__side h3 { font-size: 0.85rem; }
  .fixtures li { padding: 4px 6px; font-size: 0.75rem; gap: 4px; }

  /* ---------- Partido en directo ---------- */
  .match { gap: 6px; padding: 6px 8px; }
  .match__board { padding: 4px 10px; gap: 8px; }
  .match__crest { width: 34px; font-size: 20px; }
  .match__name { font-size: 0.95rem; }
  .match__score { font-size: 30px; gap: 6px; }
  .match__pens { min-height: 0; font-size: 0.7rem; }
  .match__clock b { font-size: 1rem; }
  .match__body { gap: 6px; grid-template-columns: 1fr minmax(200px, 38%); }
  .match__feed { padding: 6px 8px; }
  .match__feed h3, .match__side h3 { display: none; }
  .ev { padding: 3px 6px; font-size: 0.75rem; gap: 6px; }
  .match__side { gap: 6px; }
  .match__side section { padding: 6px 8px; }
  .match__pitch { --pitch-max-h: 120px; }
  .pdot { width: 8.4%; min-width: 15px; }
  .match__pitch-wrap { gap: 1px; }
  .match__carrier { font-size: 0.68rem; min-height: 1.1em; }
  .mstat { margin-bottom: 3px; font-size: 0.72rem; }

  /* ---------- Economía ---------- */
  .economy { gap: 8px; padding: 6px 8px; grid-template-columns: 1fr 1fr; }
  .economy__head { gap: 8px; }
  .economy__head h2 { font-size: 1.05rem; }
  .eco-balance { font-size: 1.1rem; padding: 2px 10px; }
  .eco-card { padding: 8px 10px; }
  .eco-card h3 { font-size: 0.88rem; }
  .eco-lines li, .eco-bar, .eco-move { font-size: 0.75rem; }
  .eco-bar { grid-template-columns: minmax(90px, 40%) 1fr auto; }
  .eco-moves-box { max-height: 220px; }

  /* ---------- Plantilla ---------- */
  .squad { padding: 6px 8px; gap: 6px; }
  .squad__head { gap: 6px; }
  .squad__head h2 { font-size: 1.05rem; white-space: nowrap; }
  .squad__head .chip.muted { display: none; }
  .squad__section { margin: 8px 8px 2px; font-size: 0.85rem; }
  .squad-table td, .squad-table th { padding: 4px 4px; }
  .squad-name { position: sticky; left: 0; z-index: 1; background: #10154a; max-width: 140px; }
  .squad-name > span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .squad-table th:first-child { position: sticky; left: 0; z-index: 2; }

  /* ---------- Alineación: banquillo en columna a la izquierda, campo más grande ---------- */
  .tactics {
    grid-template-columns: 86px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 'bar bar' 'bench pitch';
    gap: 6px;
    padding: 6px 46px 6px 6px;
  }
  .tactics__bar { grid-area: bar; gap: 6px; }
  .pitch { grid-area: pitch; border-radius: 14px; }
  .slot { --card-h: calc(min(22.5cqh, 110px) * var(--k, 1)); }
  .bench {
    grid-area: bench;
    --card-h: 92px;
    flex-direction: column;
    padding: 4px;
    min-height: 0;
  }
  .bench__track {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    min-height: 0;
    padding: 2px 0;
  }
  .bench .card { touch-action: pan-y; }
  .bench__nav { display: none; } /* en táctil se desplaza con el dedo */
  .bench__empty { font-size: 0.72rem; text-align: center; }
  .drawer { top: 6px; bottom: 6px; width: min(300px, 80%); }
  .drawer__tab { width: 40px; padding: 10px 0; font-size: 17px; }
  .drawer { transform: translateX(calc(100% - 40px)); }
  .drawer.is-open { transform: none; }
  .drawer__body { padding: 10px; }
  .drawer__body h3 { font-size: 0.95rem; margin-bottom: 4px; }
  .opt { padding: 6px 8px; }
  .opt-group { gap: 4px; margin-bottom: 8px; }

  /* ---------- Entrenamiento ---------- */
  .gym { grid-template-columns: minmax(150px, 24%) 1fr; gap: 6px; padding: 6px; }
  .gym__list { border-radius: 14px; }
  .gym__list-head { padding: 6px 6px 4px; }
  .gym__list-head h2 { display: none; }
  .gym__list-head .chip { width: 100%; justify-content: center; }
  .gym__rows { padding: 2px 4px 6px; gap: 3px; }
  .gym-row { grid-template-columns: auto 1fr auto; gap: 5px; padding: 4px 6px; }
  .gym-row__face { font-size: 18px; }
  .gym-row__name { font-size: 0.78rem; }
  .gym-row__name small { font-size: 0.65rem; }
  .gym-row__focus { display: none; }
  .gym-row__pts { font-size: 0.8rem; min-width: 2.2em; }
  .gym__detail { --card-h: min(150px, 46vh); grid-template-columns: auto 1fr; gap: 10px; padding: 4px; }
  .gym__card { padding-top: 4px; }
  .gym__info h2 { font-size: 1.05rem; }
  .gym__info > p { margin-bottom: 4px; font-size: 0.8rem; }
  .gym__info h3 { margin: 8px 0 4px; font-size: 0.85rem; }
  .gym__info .tag { white-space: normal; }
  .stat-bars { margin-top: 4px; gap: 3px; }
  .stat-bar { grid-template-columns: 4.6em 1fr 2em; gap: 6px; font-size: 0.78rem; }
  .stat-bar__track { height: 8px; }
  .potential { margin-top: 6px; padding: 6px 8px; }
  .potential__head { font-size: 0.8rem; }
  .potential__head b { font-size: 1rem; }
  .potential small { font-size: 0.7rem; }
  .focus-picker { gap: 5px; }
  .focus-btn { padding: 6px 2px; border-radius: 12px; }
  .focus-btn { gap: 0; }
  .focus-btn__icon { font-size: 18px; }
  .focus-btn__name { font-size: 9px; line-height: 1.1; letter-spacing: 0; }

  /* ---------- Ojeadores ---------- */
  .scouting__catalog { gap: 8px; padding: 6px 8px; }
  .scouting__intro { display: none; }
  .scout-card { gap: 6px; }
  .scout-card__icon { width: 44px; height: 44px; font-size: 28px; }
  /* Tres columnas compactas, como en escritorio: sin la descripción y con los datos más apretados */
  .scout-cards { grid-template-columns: repeat(3, 1fr); flex: 1; gap: 8px; }
  .scout-card { padding: 8px 10px; }
  .scout-card__blurb { display: none; }
  .scout-card__top h3 { font-size: 0.9rem; }
  .scout-card__facts { gap: 2px; }
  .scout-card__facts li { padding: 2px 6px; font-size: 0.68rem; gap: 4px; }
  .scout-card__facts span { white-space: normal; line-height: 1.1; }
  .scout-card__price { font-size: 1.05rem; }
  .scout-card__price small { font-size: 0.6rem; }
  .scout-card__buy .btn { padding: 4px 8px; font-size: 0.78rem; }
  .reveal__card { --card-h: min(62vh, 240px); }
  .reveal__info { width: min(40%, 300px); padding: 10px; margin-right: 2%; }
  .reveal__info h3 { font-size: 0.95rem; }
  .reveal__info p { font-size: 0.75rem; margin-bottom: 4px; }

  /* ---------- Mercado ---------- */
  .ticker { font-size: 11px; padding: 3px 0; }
  .cf-item { --card-h: min(46vh, 190px); }
  .cf-nav { width: 38px; height: 38px; font-size: 22px; }
  .cf-nav--prev { left: 6px; }
  .cf-nav--next { right: 6px; }
  .bidbar { gap: 8px; padding: 4px 10px 8px; }
  .bidbar__name { font-size: 0.95rem; }
  .bidbar__info > .muted { display: none; }
  .stat-chips { font-size: 0.7rem; gap: 2px 7px; }
  .bidbar__current { font-size: 0.8rem; }
  .btn-bid { padding: 6px 22px; font-size: 1.2rem; border-radius: 16px; }
  .bidbar__wage { font-size: 0.75rem; }
  .bidbar__wage b { font-size: 0.95rem; }

  /* ---------- Ficha de equipo ---------- */
  .team-view { padding: 6px 8px; gap: 6px; }
  .team-view__head { gap: 8px; }
  .team-view__crest { width: 40px; font-size: 22px; }
  .team-view__title h2 { font-size: 1.05rem; margin-bottom: 2px; }
  .tab { padding: 5px 12px; font-size: 0.82rem; }
  .info-card { padding: 8px; }
  .info-card h3 { font-size: 0.85rem; }
  .info-card p { font-size: 0.75rem; }
  .team-complex__info { gap: 6px; overflow: auto; }

  /* ---------- Ayuda ---------- */
  .help { gap: 6px; padding: 6px; }
  .help__index { padding: 4px; gap: 2px; }
  .help__index h2 { display: none; }
  .help__topic { justify-content: center; padding: 6px 0; font-size: 0; }
  .help__content { padding: 10px 14px; font-size: 0.85rem; }
  .help__content h2 { font-size: 1.2rem; }
  .help-table { font-size: 0.75rem; }
  .help-table td, .help-table th { padding: 4px 6px; }
}

/* Móviles muy estrechos en horizontal (≈ 640 px o menos) */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 700px) {
  .league { grid-template-columns: 1fr minmax(170px, 32%); }
  .gym { grid-template-columns: 132px 1fr; }
  .gym__detail { --card-h: min(130px, 42vh); }
}

/* Mayúsculas de la guía de estilo: en el menú estrecho del móvil, sin espaciado extra */
@media (max-height: 500px) and (orientation: landscape) {
  .sidebar__label { letter-spacing: 0; font-size: 11px; }
  .sidebar__link { padding: 3px 2px; gap: 1px; }
  .sidebar__link .sidebar__icon { font-size: 20px; }
  .subnav__icon { font-size: 17px; }
  .subnav__label { letter-spacing: 0.01em; font-size: 14px; }
  .subnav__icon { font-size: 19px; }
}

/* Letra más grande en los menús (móvil en horizontal) */
@media (max-height: 500px) and (orientation: landscape) {
  .sidebar__label { font-size: 13px; }
  .subnav__label { font-size: 16px; }
  .subnav--many .subnav__label { font-size: 13px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .subnav__icon { font-size: 18px; }
  .subnav__link { gap: 5px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --nav-h: 52px; }
  .subnav__link { flex-direction: column; gap: 0; padding: 1px 4px; }
}

/* Icono que sobresale del botón (móvil en horizontal) */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --nav-h: 58px; }
  .sidebar { --gap: 4px; padding-top: 4px; --side-btn: min(calc(var(--side-w) - 8px), calc((100dvh - var(--hud-h) - 12px - 4 * var(--gap)) / 5)); }
  .sidebar__link { padding: 3px 1px 3px; }
  .sidebar .sidebar__label { font-size: 11px; letter-spacing: 0; line-height: 1.15; padding: 0 0 2px; }
  .sidebar__link .sidebar__icon { font-size: calc(var(--side-btn) * 0.42); }
  .sidebar__link::after, .subnav__link::after { left: 5px; top: 4px; width: 6px; height: 4px; }
  .subnav { padding-top: 3px; }
  .subnav .subnav__icon { font-size: 22px; margin-top: 0; }
  .subnav__link { padding: 3px 4px 2px; }
  .subnav__label { font-size: 12px; }
}

/* Móviles muy justos (≈ 670 px de ancho en horizontal): un dato menos por expediente para que quepa el botón */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 720px) {
  .scout-card__facts li:nth-child(2) { display: none; }
  .scout-card__top h3 { font-size: 0.8rem; }
}