/* stage: balancing smaller flight decks */
@media(max-width:650px){
  :root{--gutter:15px}
  header{
    padding:calc(var(--camlin-create-toolbar-inset,0px) + 12px) var(--gutter) 12px;
    gap:12px;
  }
  h1{font-size:23px}
  .brand .eyebrow{font-size:7.5px;letter-spacing:.08em}
  .headeractions{gap:6px}
  .headeractions button{padding:9px 10px;min-height:42px;font-size:11px}
  #pauseCombat{min-width:66px}
  #combatHud{padding:11px var(--gutter)}
  .instrument{gap:5px}
  .instrument+.instrument{padding-left:12px}
  .hullInstrument{padding-right:12px}
  .instrument>span{font-size:8px;letter-spacing:.08em}
  .instrument strong{font-size:22px}
  .instrument strong small{font-size:12px;margin-left:0}
  #telemetry{font-size:17px;letter-spacing:.03em}
  #bestScore{margin:0;font-size:8px}
  .scoreInstrument>span{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
  }
  main{grid-template-rows:auto 34px minmax(0,1fr)}
  .scanner{padding:5px var(--gutter);gap:11px}
  .radarLabel{font-size:8px;letter-spacing:.09em;gap:6px}
  .statusline{top:11px;font-size:9px;letter-spacing:0;gap:8px}
  #mission,#streak{padding:4px 6px}
  #battleCallout{top:49px;font-size:10px;padding:9px 12px}
  footer{padding:9px var(--gutter);gap:14px}
  #hint{font-size:10px;line-height:1.65}
  #pulse{min-height:44px;padding:7px 9px 7px 11px;gap:11px;font-size:9px}
  #pulse small{font-size:7px}
  #pulse b{width:27px;height:27px;font-size:15px}
  #briefing{padding:16px}
  .briefingPanel{padding:23px 21px 21px;border-radius:15px}
  .briefingPanel .eyebrow{font-size:8px;letter-spacing:.095em}
  .briefingPanel h2{font-size:34px;margin:9px 0}
  #briefingSteps{margin:19px 0 17px;gap:8px}
  #briefingSteps p{font-size:11.5px;padding:10px 12px;gap:12px}
  #overlaySummary{font-size:12px}
  #overlayHelp{font-size:10px;margin-top:13px}
  #launchCombat{min-height:46px;font-size:12px}
}
@media(max-width:450px){
  :root{--gutter:12px}
  header{gap:8px}
  h1{font-size:20px}
  .brand .eyebrow{font-size:7px;letter-spacing:.055em}
  .headeractions{gap:4px}
  .headeractions button{padding:8px 7px;font-size:10px}
  #pauseCombat{min-width:52px}
  #combatHud{grid-template-columns:1fr .8fr 1.05fr}
  .instrument+.instrument{padding-left:9px}
  .hullInstrument{padding-right:9px}
  .instrument>span{font-size:8px;letter-spacing:.025em}
  .instrument strong{font-size:20px}
  #telemetry{font-size:16px;letter-spacing:0}
  #score{letter-spacing:0}
  #bestScore{font-size:7px}
  .scoreInstrument>span{gap:5px}
  #briefing{padding:12px}
  .briefingPanel{padding:22px 17px 20px}
  .briefingPanel h2{font-size:31px}
  #briefingSteps p{padding:10px;gap:11px}
  #launchCombat{width:100%;min-width:0}
  #overlayHelp{font-size:10px;text-wrap:balance}
  #pulse{gap:9px;padding-left:10px}
  footer{gap:12px}
}
@media(max-width:380px){
  :root{--gutter:10px}
  h1{font-size:18px}
  .brand .eyebrow{font-size:6.5px;letter-spacing:0}
  .headeractions button{min-height:40px;padding:8px 6px;font-size:9.5px}
  #pauseCombat{min-width:47px}
  #combatHud{padding:10px var(--gutter)}
  .instrument strong{font-size:19px}
  .instrument>span{font-size:7.5px}
  #telemetry{font-size:15px}
  #bestScore{display:none}
  .statusline{font-size:8px;gap:6px}
  #mission,#streak{padding:4px 5px}
  #battleCallout{font-size:9px;top:62px}
  .briefingPanel{padding:20px 14px 18px}
  .briefingPanel h2{font-size:29px}
  .briefingPanel .eyebrow{font-size:7.5px}
  #briefingSteps p{font-size:11px}
  #hint{font-size:9.5px}
  #pulse{font-size:8px;gap:7px;padding:7px 8px}
  #pulse small{font-size:6.5px}
}

/* stage: preserving the playfield space */
@media(max-height:720px) and (min-width:651px){
  header{
    padding-top:calc(var(--camlin-create-toolbar-inset,0px) + 11px);
    padding-bottom:11px;
  }
  h1{font-size:25px}
  #combatHud{padding-top:10px;padding-bottom:10px}
  main{grid-template-rows:auto 35px minmax(0,1fr)}
  footer{padding-top:8px;padding-bottom:8px}
  #briefing{padding:18px}
  .briefingPanel{padding:20px 25px}
  .briefingPanel h2{font-size:35px;margin:8px 0}
  #briefingSteps{margin:16px 0;gap:7px}
  #briefingSteps p{padding:9px 12px;font-size:11.5px}
  #overlayHelp{margin-top:11px}
}
@media(max-height:560px) and (min-width:600px){
  header{
    padding-top:calc(var(--camlin-create-toolbar-inset,0px) + 7px);
    padding-bottom:7px;
    gap:14px;
  }
  h1{font-size:21px;margin-top:2px}
  .brand .eyebrow{font-size:7px;letter-spacing:.08em}
  .headeractions button{min-height:36px;padding:7px 12px;font-size:11px}
  #combatHud{padding:7px var(--gutter)}
  .instrument{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px}
  .instrument+.instrument{padding-left:15px}
  .instrument>span{font-size:8px}
  .instrument strong{font-size:19px}
  .instrument strong small{font-size:11px}
  .hullInstrument{justify-content:center;padding-right:15px}
  #telemetry{font-size:15px;line-height:1.3}
  .scoreInstrument{justify-content:flex-end;gap:9px}
  #bestScore{display:none}
  main{grid-template-rows:auto 28px minmax(0,1fr)}
  .scanner{padding-top:4px;padding-bottom:4px}
  footer{padding:5px var(--gutter)}
  #hint{font-size:10px}
  #pulse{min-height:36px;padding:4px 9px 4px 12px;font-size:9px}
  #pulse small{display:none}
  #pulse b{width:25px;height:25px;font-size:14px}
  .statusline{top:9px;font-size:9px}
  #battleCallout{top:46px;font-size:10px;padding:7px 12px}
  #briefing{padding:10px 18px}
  .briefingPanel{width:min(100%,820px);padding:15px 20px;border-radius:13px}
  .briefingPanel .eyebrow{font-size:8px}
  .briefingPanel h2{font-size:28px;margin:5px 0}
  #overlaySummary{font-size:11px}
  #briefingSteps{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:12px 0;
  }
  #briefingSteps p{
    align-items:flex-start;
    gap:10px;
    padding:10px;
    font-size:10px;
    line-height:1.55;
  }
  #briefingSteps .legend{margin-top:2px}
  #briefingSteps .laserLegend{margin-top:8px}
  #launchCombat{min-height:38px;margin:0;padding:7px 12px 7px 16px;font-size:11px}
  #launchCombat span{width:22px;height:22px;font-size:14px}
  #overlayHelp{margin:8px 0 0;font-size:9px}
}
@media(pointer:coarse){
  .headeractions button,#pulse{min-height:44px}
  #launchCombat{min-height:46px}
}
@media(prefers-reduced-motion:reduce){
  #launchCombat,#pulse{transition:none}
  #launchCombat:not(:disabled):hover,#pulse:not(:disabled):hover{transform:none}
}