/* Responsive layer: loaded last so it refines the existing breakpoints without rewriting them. */

/* Kids tap with fingers, not a mouse: give touch screens bigger targets. */
@media (pointer: coarse) {
  .walk-controls {
    grid-template-columns: repeat(3, 48px);
    gap: 6px;
  }

  .walk-controls button {
    width: 48px;
    height: 48px;
    font-size: 24px;
    border-radius: 14px;
  }

  .map-view-controls button,
  .icon-button {
    min-width: 42px;
    min-height: 42px;
  }

  .nearby-quest {
    min-height: 52px;
    font-size: 16px;
  }
}

/* Tablets and phones: the map follows the screen height instead of a fixed pixel height. */
@media (max-width: 800px) {
  .world-scene {
    height: clamp(340px, 62svh, 560px);
  }

  .world-switch {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  main {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .world-intro h1 {
    font-size: clamp(28px, 9vw, 36px);
  }

  .world-scene {
    height: clamp(320px, 58svh, 480px);
  }

  /* Five mission cards do not fit side by side on a phone: let them scroll horizontally. */
  .mission-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 8px;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
    scrollbar-width: none;
  }

  .mission-strip::-webkit-scrollbar {
    display: none;
  }

  .mission-strip > * {
    flex: 0 0 128px;
    scroll-snap-align: start;
  }

  /* The character picker was a very long scroll: three compact columns instead of two big ones. */
  .avatar-choices {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .avatar-choice {
    padding: 22px 4px 8px;
  }

  .avatar-choice img {
    height: 82px;
  }

  .avatar-choice strong {
    font-size: 11px;
    text-align: center;
  }

  .avatar-choice small {
    display: none;
  }

  dialog {
    max-height: calc(100dvh - 16px);
  }

  .game-dialog button {
    min-height: 56px;
  }
}

/* Phone held sideways: very little height, so compact everything above the map. */
@media (orientation: landscape) and (max-height: 520px) {
  .topbar {
    height: 58px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .brand-symbol {
    width: 34px;
    height: 34px;
    font-size: 26px;
  }

  .brand strong {
    font-size: 19px;
  }

  main {
    padding-top: 12px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .world-intro {
    margin-bottom: 10px;
  }

  .world-intro h1 {
    font-size: 26px;
  }

  .world-intro p,
  .world-intro .eyebrow {
    display: none;
  }

  .adventure-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 14px;
  }

  .world-scene {
    height: calc(100svh - 24px);
    min-height: 280px;
  }

  .quest-panel {
    max-height: calc(100svh - 24px);
    overflow-y: auto;
  }

  .quest-art {
    display: none;
  }

  dialog {
    max-height: calc(100dvh - 12px);
  }
}

/* Expanded map should not hide under the notch or the home indicator. */
.expanded-map.world-stage-wrap {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}