/* Skyline Sniper Balloons — flagship responsive/device pass (2026-09-09) */
.hud {
  padding-top: max(10px, env(safe-area-inset-top));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-left: max(12px, env(safe-area-inset-left));
}
.screen {
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
.hud-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}
.btn,.auth-link,.nn-nudge-signup,.nn-nudge-later { min-height: 44px; touch-action: manipulation; }
.nn-nudge-signup { display:flex; align-items:center; justify-content:center; }
.panel {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.screen.active { overflow:hidden; }
button:focus-visible,a:focus-visible { outline:3px solid #b79655; outline-offset:3px; }

/* Instrument readout: uses the game's muted spotter-post materials rather than
   a generic neon HUD and gives wind strength a text/shape channel in addition
   to colour. */
.spotter-readout {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  min-height:22px;
  margin-top:4px;
  pointer-events:none;
}
.spotter-readout.hidden { display:none!important; }
.spotter-chip {
  border:1px solid rgba(231,220,197,.32);
  border-radius:2px;
  padding:3px 7px;
  background:rgba(35,32,36,.82);
  color:#e7dcc5;
  font:800 9px/1.2 'Share Tech Mono',monospace;
  letter-spacing:.09em;
  box-shadow:0 3px 0 rgba(0,0,0,.22);
}
.spotter-chip.wind.strong { border-color:#a9473e; color:#ffc2b9; }
.spotter-chip.ammo-low { border-color:#a9473e; color:#ffd1c9; }

.touch-aim-assist {
  position:absolute;
  left:50%;
  bottom:max(36px, calc(env(safe-area-inset-bottom) + 20px));
  z-index:8;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 28px);
  padding:8px 11px;
  border:1px solid rgba(231,220,197,.34);
  background:rgba(31,29,33,.84);
  color:#efe4d0;
  box-shadow:0 5px 0 rgba(0,0,0,.22);
  font:800 10px/1.35 'Share Tech Mono',monospace;
  letter-spacing:.06em;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.touch-aim-assist.show { opacity:1; }

@media (max-width:560px) {
  #screen-start .auth-row {
    display:flex;
    width:100%;
    margin-top:7px;
    gap:4px;
  }
  #screen-start .auth-status { color:#d8c8af; font-size:10px; }
  #screen-start .auth-link { color:#f0ab9d; font-size:11px; padding:5px 10px; }
  #screen-start .controls-hint { display:none; }
}
@media (max-width:380px) {
  .hud { padding-right:max(7px,env(safe-area-inset-right)); padding-left:max(7px,env(safe-area-inset-left)); }
  .hud-row,.hud-group { gap:4px; }
  .hud-value { font-size:18px!important; }
  .hud-label { font-size:7px!important; letter-spacing:1px!important; }
  .combo-chip { font-size:12px!important; padding:4px 6px!important; }
  .spotter-chip { font-size:8px; padding:3px 5px; }
}
@media (max-height:700px) {
  .screen { align-items:flex-start; }
  .panel { margin:auto; }
  #screen-how .panel,#screen-gameover .panel { padding-top:16px; padding-bottom:16px; }
}
@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,.touch-aim-assist { transition:none!important; }
}