/* Dungeon Rush — edge-device/accessibility polish (2026-09-10).
   Game-local presentation only: gameplay, scoring and SDK behavior stay authoritative. */

@supports (height: 100dvh) {
  html,
  body,
  .game-shell {
    height: 100dvh;
  }

  .screen {
    max-height: calc(100dvh - 32px);
  }
}

button,
select,
input[type="range"] {
  min-height: 44px;
}

.icon-btn,
.touch-mini {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
}

.toggle-line {
  min-height: 44px;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
.joystick:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

#gameCanvas,
.joystick,
.touch-btn,
.touch-mini {
  touch-action: none;
}

.rotate-inner {
  width: min(92vw, 420px);
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
  overflow: auto;
  padding: 12px;
}

@media (max-width: 520px) {
  .overlay {
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .screen {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    padding: 14px;
  }

  .record-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .record-grid div {
    min-width: 0;
    padding: 10px 8px;
  }

  .record-grid span {
    font-size: 10px;
  }

  .record-grid strong {
    font-size: 18px;
  }

  .status-line {
    max-width: 58vw;
  }

  .hud-cluster {
    min-height: 44px;
  }
}

@media (orientation: landscape) and (pointer: coarse) and (max-height: 540px) {
  .overlay {
    place-items: start center;
    overflow: auto;
    padding:
      max(6px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .screen {
    width: min(900px, calc(100vw - 20px));
    max-height: calc(100dvh - 12px);
    padding: 12px;
  }

  #menuScreen {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
    grid-template-areas:
      "brand actions"
      "title actions"
      "copy actions"
      "stats actions";
    column-gap: 18px;
    row-gap: 6px;
    align-content: center;
  }

  #menuScreen .brand-row { grid-area: brand; }
  #menuScreen h1 { grid-area: title; font-size: clamp(34px, 8vh, 52px); }
  #menuScreen .subtitle { grid-area: copy; font-size: 14px; }
  #menuScreen .record-grid {
    grid-area: stats;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  #menuScreen .record-grid div { padding: 8px; }
  #menuScreen .record-grid strong { font-size: 16px; }
  #menuScreen .menu-actions {
    grid-area: actions;
    align-self: center;
    gap: 7px;
  }

  .info-screen,
  .settings-screen,
  .intro-screen,
  .pause-screen,
  .gameover-screen,
  .upgrade-screen {
    gap: 9px;
  }

  .upgrade-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .upgrade-card {
    min-height: 132px;
    padding: 10px;
  }

  .joystick {
    width: 96px;
    height: 96px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .touch-btn {
    width: 64px;
    height: 64px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .touch-btn.dash {
    right: max(88px, calc(env(safe-area-inset-right) + 88px));
  }

  .touch-btn.interact {
    right: max(48px, calc(env(safe-area-inset-right) + 48px));
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px));
    width: 54px;
    height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}