/* Ajuste final para telefonos: todo el contenido cabe en el ancho disponible.
   El desplazamiento vertical se mantiene; ningun juego depende de mover la pagina
   hacia los lados. Esta hoja debe cargarse despues del resto de los estilos. */

:root {
  --phone-fit-gutter: clamp(8px, 3.2vw, 15px);
}

@media (max-width: 600px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    touch-action: pan-y;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body {
    overflow-y: auto;
  }

  #app,
  .screen.active {
    touch-action: pan-y;
  }

  #app,
  main,
  .screen,
  .setup-grid,
  .career-layout,
  .report-grid,
  .report-main,
  .report-side,
  .legacy-card,
  .event-card,
  .player-form,
  .final-season-log,
  .archive-card,
  .shop-grid {
    min-width: 0;
    max-width: 100%;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }

  .screen {
    width: 100%;
    padding-right: max(var(--phone-fit-gutter), var(--safe-right, 0px));
    padding-left: max(var(--phone-fit-gutter), var(--safe-left, 0px));
  }

  .report-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .report-club {
    width: 100%;
    min-width: 0;
  }

  .career-actions,
  .champion-tabs,
  .champion-showcase [role='tablist'] {
    flex-wrap: wrap;
  }

  .champion-tabs,
  .champion-showcase [role='tablist'],
  .final-season-log .season-log-scroll {
    overflow-x: hidden;
    overflow-x: clip;
  }

  .final-season-log .season-log-scroll,
  .final-season-log .season-log-row {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* El cuadro de playoffs pasa a una ruta vertical en vez de una cinta lateral. */
  .playoff-bracket {
    padding-inline: clamp(13px, 4vw, 20px);
    overflow-x: hidden;
    overflow-x: clip;
  }

  .bracket-title {
    align-items: flex-start;
    gap: 8px;
  }

  .bracket-title > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .bracket-track {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 4px;
  }

  .bracket-track > em {
    height: 13px;
    overflow: hidden;
    font-size: 0;
    text-align: center;
  }

  .bracket-track > em::after {
    content: '↓';
    color: #59616d;
    font-size: 12px;
    line-height: 13px;
  }

  .bracket-node {
    width: 100%;
    min-width: 0;
  }

  .bracket-node > div {
    min-width: 0;
  }

  .bracket-node span {
    max-width: none;
  }

  /* Modal: usa practicamente todo el ancho, con scroll solo vertical. */
  .playoff-modal {
    align-items: center;
    padding-top: max(7px, var(--safe-top, 0px));
    padding-right: max(7px, var(--safe-right, 0px));
    padding-bottom: max(7px, var(--safe-bottom, 0px));
    padding-left: max(7px, var(--safe-left, 0px));
    overflow: hidden;
    touch-action: pan-y;
  }

  .playoff-shell {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: calc(100vh - 14px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
    max-height: calc(100dvh - 14px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
    padding: clamp(9px, 3vw, 14px);
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    border-radius: 13px;
  }

  .playoff-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  .playoff-header > div:first-child {
    min-width: 0;
  }

  .playoff-header .eyebrow {
    margin-bottom: 6px;
    font-size: clamp(8px, 2.6vw, 10px);
    letter-spacing: clamp(1px, .55vw, 1.8px);
  }

  .playoff-header h2 {
    max-width: 100%;
    font-size: clamp(22px, 8.2vw, 34px);
    line-height: .98;
    overflow-wrap: anywhere;
  }

  .series-score {
    max-width: min(46vw, 150px);
    padding: 8px clamp(7px, 2.4vw, 11px);
    font-size: clamp(7px, 2.25vw, 9px);
    line-height: 1.2;
    letter-spacing: .65px;
    text-align: center;
    white-space: normal;
  }

  .matchup {
    grid-template-columns: minmax(0, 1fr) clamp(22px, 8vw, 34px) minmax(0, 1fr);
    gap: 0;
    min-width: 0;
    margin: clamp(10px, 3.5vw, 15px) 0;
    padding: clamp(7px, 2.4vw, 11px);
  }

  .match-team {
    min-width: 0;
    gap: clamp(5px, 2vw, 9px);
    font-size: clamp(8px, 2.65vw, 11px);
    line-height: 1.15;
  }

  .match-team b {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .match-team img {
    flex: 0 0 auto;
    width: clamp(36px, 12vw, 48px);
    height: clamp(36px, 12vw, 48px);
  }

  /* Escenario comun. Los canvas conservan su relacion de aspecto y escalan
     hasta el ancho real del telefono. */
  .mini-stage {
    width: 100%;
    min-width: 0;
    min-height: clamp(305px, 97vw, 410px);
    padding: clamp(7px, 2.3vw, 11px);
    overflow: hidden;
    touch-action: pan-y;
  }

  .mini-stage > * {
    min-width: 0;
    max-width: 100%;
  }

  .mini-stage > canvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: none;
    margin: auto;
    touch-action: pan-y;
  }

  .mini-stage > canvas.pong-canvas {
    touch-action: none;
  }

  .mini-stage > canvas[width='720'],
  .mini-stage > canvas[width='700'] {
    width: 100%;
  }

  .mini-stage > canvas[width='300'] {
    width: min(100%, 300px);
  }

  .mini-help {
    max-width: 100%;
    margin-top: 9px;
    padding-inline: 3px;
    font-size: clamp(10px, 3vw, 12px);
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .mini-result {
    width: 100%;
    max-width: 420px;
    padding: clamp(12px, 4vw, 22px);
  }

  .mini-result .result-icon {
    font-size: clamp(50px, 18vw, 72px);
  }

  .mini-result h3 {
    margin-inline: 0;
    font-size: clamp(28px, 10vw, 40px);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .mini-result p {
    font-size: clamp(12px, 3.7vw, 15px);
    line-height: 1.45;
  }

  /* Situaciones de partido y respuestas. */
  .quiz,
  .situation-game {
    width: 100%;
    max-width: 580px;
    padding-inline: 1px;
  }

  .quiz h3 {
    max-width: 100%;
    font-size: clamp(16px, 5.1vw, 22px);
    line-height: 1.34;
    overflow-wrap: anywhere;
  }

  .quiz button,
  .start-mini {
    min-height: 48px;
    padding: clamp(12px, 3.8vw, 16px);
    font-size: clamp(11.5px, 3.55vw, 14px);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .situation-score {
    gap: 12px;
    padding: 10px clamp(10px, 3.3vw, 14px);
  }

  .situation-score b {
    font-size: clamp(18px, 6.3vw, 23px);
  }

  .situation-score span {
    min-width: 0;
    font-size: clamp(9px, 2.9vw, 11px);
    text-align: right;
  }

  .situation-feedback {
    font-size: clamp(10px, 3.1vw, 12px) !important;
    line-height: 1.45;
  }

  /* Gato 5 x 5: las cinco columnas siempre caben y aprovechan el ancho. */
  .grid5 {
    display: grid;
    width: min(100%, 320px);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(4px, 1.5vw, 7px);
  }

  .grid5 button {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    padding: 0;
    font-size: clamp(20px, 7.5vw, 27px);
  }

  /* Memorice: cuatro columnas fluidas. En 320 px siguen siendo tarjetas
     comodas y el tablero grande crece hacia abajo, no hacia un costado. */
  .memory-wrap {
    width: 100%;
    max-width: 350px;
  }

  .memory-grid,
  .memory-grid.memory-large {
    width: min(100%, 340px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(5px, 1.9vw, 8px);
  }

  .memory-grid .memory-card,
  .memory-large .memory-card {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    padding: 0;
    font-size: clamp(23px, 8vw, 32px);
  }

  .memory-countdown {
    font-size: clamp(13px, 4vw, 16px);
  }

  .memory-errors {
    font-size: clamp(9px, 2.9vw, 11px);
  }

  /* Pong y cualquier juego futuro basado en canvas conservan controles grandes. */
  .pressure-game,
  .closeout-game,
  .stop-zone-game,
  .follow-game,
  .cup-ball-game {
    width: 100%;
    max-width: 720px;
  }

  .pressure-hoop {
    width: clamp(82px, 27vw, 100px);
    height: clamp(82px, 27vw, 100px);
    margin-block: clamp(18px, 6vw, 26px);
    font-size: clamp(38px, 13vw, 48px);
  }

  .timing-bar {
    width: 100%;
    margin-block: 20px 26px;
  }

  .attackers {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 104px));
    justify-content: center;
    gap: clamp(7px, 2.7vw, 13px);
    margin-block: clamp(28px, 10vw, 44px) 24px;
  }

  .attackers button {
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    font-size: clamp(24px, 8vw, 31px);
  }

  /* Juego de detener el balon. */
  .stop-zone-head,
  .follow-head {
    gap: 10px;
  }

  .stop-zone-head > *,
  .follow-head > * {
    min-width: 0;
  }

  .stop-zone-head b,
  .follow-head b {
    font-size: clamp(14px, 4.6vw, 18px);
    overflow-wrap: anywhere;
  }

  .stop-zone-head strong,
  .follow-head strong {
    flex: 0 0 auto;
    font-size: clamp(12px, 3.8vw, 15px);
  }

  .stop-zone-court {
    width: 100%;
    height: clamp(54px, 18vw, 64px);
    margin-block: clamp(31px, 10vw, 42px) 25px;
  }

  .stop-zone-ball {
    width: clamp(34px, 11vw, 40px);
    height: clamp(34px, 11vw, 40px);
  }

  .stop-zone-button {
    max-width: min(100%, 340px);
  }

  /* Seguir el balon: de tres a cinco figuras dentro del mismo ancho. */
  .follow-arena {
    width: 100%;
    min-height: clamp(172px, 56vw, 205px);
    grid-template-columns: repeat(var(--count), minmax(0, 1fr));
    justify-content: stretch;
    gap: clamp(3px, 1.4vw, 7px);
    padding: 18px clamp(5px, 2vw, 10px) 24px;
    overflow: hidden;
  }

  .follow-piece {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: clamp(130px, 42vw, 150px);
  }

  .follow-head-shape {
    width: clamp(24px, 8vw, 29px);
    height: clamp(24px, 8vw, 29px);
  }

  .follow-body-shape {
    top: clamp(26px, 8.5vw, 31px);
    width: clamp(47px, 16vw, 62px);
    height: clamp(87px, 29vw, 101px);
  }

  .follow-body-shape b {
    font-size: clamp(17px, 5.7vw, 22px);
  }

  .follow-ball-shape {
    width: clamp(24px, 8vw, 29px);
    height: clamp(24px, 8vw, 29px);
    font-size: clamp(24px, 8vw, 29px);
  }

  /* Eleccion del balon de copa. */
  .cup-ball-game {
    padding: 7px 0 4px;
  }

  .cup-ball-game > h3 {
    font-size: clamp(22px, 7.7vw, 34px);
    overflow-wrap: anywhere;
  }

  .cup-ball-game > p:not(.eyebrow) {
    margin-block: 10px clamp(17px, 5vw, 23px);
    font-size: clamp(10.5px, 3.35vw, 13px);
  }

  .cup-ball-options {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(5px, 2vw, 10px);
  }

  .cup-ball-choice {
    min-width: 0;
    min-height: clamp(128px, 40vw, 168px);
    padding: 7px 3px;
    gap: clamp(9px, 3vw, 14px);
  }

  .cup-ball-shape {
    width: clamp(57px, 18vw, 76px);
    height: clamp(57px, 18vw, 76px);
    font-size: clamp(53px, 17vw, 71px);
  }

  .cup-ball-choice > small {
    max-width: 100%;
    font-size: clamp(7px, 2.3vw, 9px);
    line-height: 1.2;
    letter-spacing: clamp(.55px, .25vw, 1px);
    overflow-wrap: anywhere;
  }

  .cup-ball-feedback {
    padding-inline: 3px;
    font-size: clamp(9px, 2.8vw, 11px);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  .mini-stage > canvas.pong-canvas {
    width: min(100%, 720px);
    height: auto;
    max-height: none;
    aspect-ratio: 720 / 400;
    touch-action: none;
  }
}

@media (max-width: 360px) {
  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .playoff-header {
    gap: 6px;
  }

  .playoff-shell {
    padding: 9px;
  }

  .mini-stage {
    padding-inline: 6px;
  }

  .cup-ball-choice.winner::after {
    top: 5px;
    right: 5px;
    padding: 3px 4px;
    font-size: 6px;
  }
}