/* Neon Snake — flagship device-fit pass (2026-09-09) */

/* The board already understands safe areas. Keep every interactive control at a
   reliable touch size, including the oscilloscope identity layer. */
.icon-btn,
.dpad-btn,
.primary-btn,
.secondary-btn,
.mode-card {
  min-height: 44px;
  touch-action: manipulation;
}

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

.dpad-btn {
  width: 54px;
  height: 44px;
}

.mobile-controls {
  width: 174px;
  height: 144px;
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(3, 48px);
  bottom: max(10px, env(safe-area-inset-bottom));
}

.screen-panel {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}

/* The identity skin intentionally uses a compact CRT control bank. Do not let
   that visual choice make controls smaller than the interaction floor. */
#menuScreen .menu-actions button {
  min-height: 44px !important;
}

#menuScreen .menu-actions .primary-btn,
#menuScreen #quickStartBtn,
#menuScreen #introStartBtn {
  min-height: 56px !important;
}

@media (max-width: 720px) {
  /* A 560px minimum on a 100dvh shell pushes the D-pad below short WebViews.
     Fit the visible viewport instead; the game already recomputes its grid. */
  .app {
    height: 100dvh;
    min-height: 0;
  }

  .hud {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
  }

  .screen {
    padding-bottom: max(158px, calc(env(safe-area-inset-bottom) + 150px));
  }

  .dpad-btn {
    width: 54px;
    height: 44px;
  }
}

@media (max-width: 390px) {
  .hud-row {
    gap: 4px;
  }
  .hud-pill {
    padding: 5px 6px;
  }
  .player-chip {
    max-width: 116px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .powerup-timers span {
    padding-inline: 6px;
  }
}

@media (max-height: 560px) {
  .screen {
    align-items: start;
    padding-top: max(8px, env(safe-area-inset-top));
  }
  .screen-panel {
    margin: auto;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  #menuScreen .menu-actions button {
    min-height: 44px !important;
  }
  .mobile-controls {
    width: 210px;
    height: 96px;
    grid-template-columns: repeat(3, 70px);
    grid-template-rows: repeat(2, 48px);
    left: auto;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: none;
  }
  .dpad-btn {
    width: 58px;
    height: 44px;
  }
  .dpad-btn.up { grid-column: 2; grid-row: 1; }
  .dpad-btn.left { grid-column: 1; grid-row: 2; }
  .dpad-btn.down { grid-column: 2; grid-row: 2; }
  .dpad-btn.right { grid-column: 3; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient,
  .snake-preview span,
  .screen,
  .icon-btn,
  .dpad-btn,
  .primary-btn,
  .secondary-btn,
  .mode-card,
  .pop {
    animation: none !important;
    transition: none !important;
  }
}