/* Neon Hockey Flick — flagship device-fit/accessibility pass (2026-09-10).
   Presentation and input ergonomics only; rink physics and score semantics stay untouched. */

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

.screen {
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
}

/* The rink identity deliberately uses compact hardware-like controls. Keep
   that look while restoring a reliable touch target on phones/tablets. */
.hud-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

.btn,
.auth-link,
.fb-btn,
.nn-nudge-signup,
.nn-nudge-later {
  min-height: 44px;
  touch-action: manipulation;
}

.panel {
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.screen.active { overflow: hidden; }

button:focus-visible,
a:focus-visible {
  outline: 3px solid #e5bc4a;
  outline-offset: 3px;
}

/* Preserve the scoreboard instead of shrinking the controls below a useful
   hit area on narrow phones. */
@media (max-width: 430px) {
  .hud-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .hud-row { gap: 3px; }
  .hud-group.right { gap: 3px; }
  .scoreboard { padding: 2px 4px; gap: 4px; }
  .sb-score { font-size: 18px; }
  .sb-label { font-size: 6px; letter-spacing: .1em; }
  .sb-sep { font-size: 13px; }
  .power-wrap { margin-top: 3px; }
}

@media (max-width: 360px) {
  .hud { padding-right: max(4px, env(safe-area-inset-right)); padding-left: max(4px, env(safe-area-inset-left)); }
  .scoreboard { padding-left: 2px; padding-right: 2px; }
  .rally-chip { font-size: 8px; }
}

/* Modal content must remain reachable on short landscape phones and split
   screen tablets; the fixed game-world canvas remains unchanged. */
@media (max-height: 700px) {
  .screen { align-items: flex-start; }
  .panel { margin: auto; }
  #screen-how .panel,
  #screen-pause .panel,
  #screen-gameover .panel {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

@media (orientation: landscape) and (pointer: coarse) and (max-height: 600px) {
  #frame {
    height: 100dvh;
    max-height: 100dvh;
  }
  .screen {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .panel { max-height: calc(100dvh - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .hud,
  .hud-btn,
  .btn,
  .goal-banner,
  .flash,
  .sb-score,
  .power-bar > span {
    transition: none !important;
    animation: none !important;
  }
}