/* =========================================================
   SPRINT 1 — VIEWPORT Y JUGABILIDAD RESPONSIVE

   Uso:
   Esta hoja se carga después de los estilos de cada pantalla y concentra
   únicamente reglas transversales de orientación, áreas seguras y gestos.
   Las superficies de juego no desplazan la página; los menús .scrollable sí.
========================================================= */

:root {
  --app-vw: 100vw;
  --app-vh: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --app-gap: clamp(6px, 1.4vmin, 14px);
}

html,
body {
  width: 100%;
  height: var(--app-vh);
  min-height: var(--app-vh);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body,
button,
.btn,
.btn-3d,
img,
.game-surface {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

img {
  -webkit-user-drag: none;
  user-drag: none;
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

button,
.btn,
.btn-3d,
[role="button"] {
  touch-action: manipulation;
}

#app {
  width: 100%;
  max-width: 1440px;
  height: var(--app-vh);
  padding:
    max(6px, var(--safe-top))
    max(6px, var(--safe-right))
    max(6px, var(--safe-bottom))
    max(6px, var(--safe-left));
}

.screen {
  width: 100%;
  max-width: none;
  height: 100%;
}

.screen-home,
.screen-mode,
.screen-categories,
.screen-subcategories,
.screen-drawing-activities,
.screen-world-select,
.screen-world-character-select,
.screen-settings {
  max-width: 1100px;
}

.screen-game,
.screen-game-drawing,
.screen-reaction-game,
.screen-world-game,
.screen-runner-game,
.game-surface,
canvas,
.world-stage,
.runner-road,
.reaction-board {
  overscroll-behavior: none;
}

canvas,
.world-stage,
.runner-road,
.reaction-board,
.discover-image-wrap,
.trace-canvas-wrap,
.trace-name-canvas-wrap,
.paint-canvas-wrap,
.sticker-scene {
  touch-action: none;
}

.modal-backdrop {
  padding:
    max(10px, var(--safe-top))
    max(10px, var(--safe-right))
    max(10px, var(--safe-bottom))
    max(10px, var(--safe-left));
}

.modal {
  max-width: min(680px, 100%);
  max-height: calc(var(--app-vh) - var(--safe-top) - var(--safe-bottom) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* =========================================================
   TELÉFONOS Y TABLETAS EN HORIZONTAL
========================================================= */

@media (orientation: landscape) {
  .screen-reaction-game {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
  }

  .screen-reaction-game > .reaction-panel {
    flex: 1 1 auto;
    min-height: 0;
  }

  .top-nav,
  .topbar {
    min-height: clamp(38px, 9vh, 50px);
    margin-bottom: clamp(4px, 1.2vh, 9px);
  }

  .logo-center img {
    height: clamp(38px, 10vh, 58px);
  }

  .screen-game > .panel,
  .screen-game-drawing > .panel {
    padding: clamp(5px, 1.2vh, 10px);
  }

  .screen-game:not(.screen-game-whatis):not(.screen-game-listen) > .panel {
    display: grid;
    grid-template-columns: minmax(150px, 27%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(8px, 2vw, 18px);
  }

  .screen-game .question-box {
    align-self: center;
    margin: 0;
  }

  .screen-game .fruit-grid {
    align-self: stretch;
    height: 100%;
  }

  .fruit-grid-2,
  .fruit-grid-3,
  .fruit-grid-4,
  .fruit-grid-5,
  .fruit-grid-6 {
    grid-auto-rows: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    align-content: stretch;
  }

  .fruit-grid-2 {
    grid-template-rows: minmax(0, 1fr);
  }

  .fruit-card .emoji img {
    max-width: min(17vw, 120px);
    max-height: min(23vh, 110px);
  }

  .screen-game-whatis .what-center,
  .screen-game-listen .listen-center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 1.2fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(12px, 3vw, 34px);
    padding: clamp(6px, 1.5vh, 12px);
  }

  .what-prompt,
  .listen-text {
    grid-column: 1;
    align-self: end;
    margin: 0;
  }

  .what-figure,
  .listen-figure {
    grid-column: 2;
    grid-row: 1 / -1;
    width: min(38vw, 58vh, 300px);
    height: min(38vw, 58vh, 300px);
  }

  .what-answer {
    grid-column: 1;
    align-self: start;
    margin-top: 8px;
  }

  .reaction-panel {
    display: grid;
    grid-template-columns: minmax(180px, .85fr) minmax(220px, 1.15fr);
    grid-template-rows: auto auto auto auto minmax(42px, auto);
    gap: 6px 18px;
    overflow: hidden;
  }

  .reaction-panel .home-header,
  .reaction-stats,
  .reaction-timer-wrap,
  .reaction-message {
    grid-column: 1;
    margin: 0;
  }

  .reaction-panel .home-header p {
    margin-bottom: 0;
  }

  .reaction-board {
    grid-column: 2;
    grid-row: 1 / 6;
    align-self: center;
    width: min(58vh, 38vw, 430px);
    max-width: none !important;
    margin: 0 auto !important;
    gap: clamp(6px, 1.5vh, 12px) !important;
  }

  .reaction-actions {
    grid-column: 1;
    grid-row: 5;
    margin-top: 4px;
  }

  .world-game-shell,
  .runner-shell {
    gap: 5px;
  }

  .world-controls,
  .runner-controls {
    position: absolute;
    right: max(12px, var(--safe-right));
    bottom: max(12px, var(--safe-bottom));
    z-index: 40;
  }

  .world-game-shell,
  .runner-shell {
    position: relative;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .runner-question {
    position: absolute;
    z-index: 30;
    top: 4px;
    left: 50%;
    width: min(58%, 620px);
    min-height: 42px;
    transform: translateX(-50%);
  }

  .runner-road {
    grid-row: 2;
  }

  .discover-game,
  .trace-game {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 24%);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px 12px;
  }

  .discover-instruction,
  .trace-status {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .discover-stage,
  .trace-stage {
    grid-column: 1;
    grid-row: 2;
  }

  .discover-actions,
  .trace-actions {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    margin: 0;
    align-content: center;
    grid-template-columns: 1fr;
  }

  .paint-game,
  .zone-game,
  .puzzle-game,
  .stickers-game {
    width: 100%;
    max-width: none;
  }
}

/* =========================================================
   HORIZONTAL COMPACTO: TELÉFONOS DE POCA ALTURA
========================================================= */

@media (orientation: landscape) and (max-height: 600px) {
  #app {
    padding-top: max(4px, var(--safe-top));
    padding-bottom: max(4px, var(--safe-bottom));
  }

  .screen.scrollable > .panel {
    padding: 6px 10px 10px;
  }

  .screen.scrollable .home-header h1 {
    margin: 0 0 3px;
    font-size: clamp(21px, 6vh, 30px);
  }

  .screen.scrollable .home-header p {
    margin: 0 0 7px;
    font-size: clamp(12px, 3.5vh, 16px);
  }

  .screen-home > .panel,
  .screen-mode > .panel,
  .screen-categories > .panel,
  .screen-drawing-activities > .panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main-act {
    margin-bottom: 9px;
  }

  .act-btn {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .screen-game-drawing .home-header {
    display: none;
  }

  .reaction-stats {
    gap: 5px !important;
  }

  .reaction-panel .home-header p {
    display: none;
  }

  .stat-box {
    padding: 5px !important;
  }

  .reaction-message {
    min-height: 34px !important;
    padding: 5px 8px !important;
  }

  .reaction-actions .btn-main {
    min-width: 110px;
    padding: 8px 10px;
  }
}

/* =========================================================
   PANTALLAS MUY ANGOSTAS
========================================================= */

@media (max-width: 360px) and (orientation: portrait) {
  #app {
    padding-left: max(4px, var(--safe-left));
    padding-right: max(4px, var(--safe-right));
  }

  .top-nav,
  .topbar {
    gap: 4px;
  }

  .badge {
    font-size: 11px;
    padding: 7px;
  }

  .character-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}