/* Size the content to available CSS pixels. Never scale the whole game or
 * disable browser zoom: the same >=44px controls remain real hit targets. */
.home-screen .roster-name-row h2 { max-width:100%; }
.home-screen .roster-focus-info { gap:0; }
.home-screen .roster-quote { text-wrap:pretty; }
/* A transform on the workspace makes its full-screen combat overlay relative
 * to the card during entry, briefly extending the page below the viewport. */
.game-screen.screen-enter { animation:none; }

/* Desktop zoom can reduce height long before the phone-width breakpoint. */
@media(min-width:761px) and (max-height:800px) {
  body:has(.game-screen,.result-screen,.flash-retake-screen) .masthead { height:48px; min-height:48px; padding-block:0; }
  body:has(.game-screen,.result-screen) .site-footer { display:none; }
  .game-screen { grid-template-rows:auto auto auto auto 1fr; gap:6px 18px; margin:8px auto; }
  .game-screen>.match-ribbon,.game-screen>.music-now { display:none; }
  .game-screen>.game-status { grid-column:1; grid-row:1/3; }
  .game-screen>.module-heading { grid-column:2; grid-row:1; }
  .game-screen>.module-instruction { grid-column:2; grid-row:2; line-height:1.4; font-size:12px; }
  .game-screen>.pressure-panel { grid-column:1; grid-row:3; }
  .game-screen>.field-narrator { grid-column:1; grid-row:4; }
  .game-screen>.play-console { grid-column:2; grid-row:3/6; padding:10px; }
  .game-screen:has(.field-narrator:not([data-state="clear"]):not([data-state="evaded"]):not([data-state="bodyguard"]):not([data-state="opportunity"]))>.field-narrator { grid-column:2; grid-row:3/6; }
  .game-screen .game-hud { min-height:48px; }
  .game-screen .timer { font-size:34px; }
  .game-screen .module-heading h2 { font-size:23px; }
  .game-screen .module-id { font-size:32px; }
  .game-screen .module-heading .eyebrow { display:none; }
  .game-screen .pressure-top { padding:5px 8px; }
  .game-screen .operator-card { padding:7px 8px; grid-template-columns:34px minmax(0,1fr) auto; }
  .game-screen .operator-portrait { width:34px; height:38px; }
  .game-screen .combat-vitals b { font-size:20px; }
  .game-screen .operator-action { font-size:11px; }
  .game-screen .radio-bubble { padding:8px; min-height:54px; }
  .game-screen .combat-team { padding:5px 8px; }
  .game-screen .password-unit>.unit-top,.game-screen .screen-caption,.game-screen #note-help { display:none; }
  .game-screen .mobile-password-nav { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:6px; }
  .game-screen .mobile-password-nav button { min-height:44px; padding:5px 8px; border:1px solid #768c91; border-radius:3px; background:#20333c; color:#d7e4e6; font-size:13px; }
  .game-screen .mobile-password-nav button[aria-pressed="true"] { border-color:#ffe6a0; background:#ddbf69; color:#17272c; }
  .game-screen .password-unit[data-password-view="note"]>:is(.code-display,.keypad),
  .game-screen .password-unit[data-password-view="keys"] .password-note-wrap { display:none; }
  .game-screen .password-unit .code-display { padding:4px 10px; }
  .game-screen .password-unit .code-display>b { font-size:27px; line-height:1.2; margin:2px 0; }
  .game-screen .keypad { gap:5px; margin-top:6px; }
  .game-screen .key { min-height:44px; height:44px; }
  .game-screen .password-note { min-height:140px; padding:10px 12px; }
  .game-screen .password-note-wrap { margin:8px 0 0; }
  .game-screen .wire-unit { padding:0; }
  .game-screen .wire-unit>.instruction-tag { padding:7px 9px; margin:0; font-size:13px; line-height:1.4; }
  .game-screen .wire-status[data-kind] { min-height:44px; padding:4px 8px; margin:7px 0; }
  .game-screen .signal-housing { width:34px; height:34px; flex-basis:34px; }
  .game-screen .signal-lens { width:27px; height:27px; }
  .game-screen .signal-copy strong { font-size:21px; }
  .game-screen .wire-bank { padding:0; gap:5px; margin:5px 0 0; }
  .game-screen .wire { min-height:44px; height:44px; padding:5px 8px; }
  .game-screen .wire-legend { display:none; }
  .game-screen .inventory-heading { margin-bottom:8px; }
  .game-screen .tools-grid { gap:6px; margin-bottom:8px; }
  .game-screen .tool-card { height:90px; min-height:86px; padding:8px 5px; gap:6px; }
  .game-screen .tool-graphic { height:40px; }
  .game-screen .tool-graphic>:is(.icon,.tool-image) { width:40px; height:40px; }
  .game-screen .tools-unit>.instruction-tag { padding:8px 9px; margin-top:8px; }
  .game-screen .smoke-scene { padding:8px; }
  .game-screen .smoke-grid { gap:6px; }
  .game-screen .smoke-cell { min-height:44px; height:clamp(44px,calc((100dvh - 280px)/3),72px); }
  .game-screen .circuit-board { width:min(100%,clamp(210px,calc(100dvh - 255px),310px)); }
  .game-screen .fake-field { height:clamp(130px,calc(100dvh - 300px),210px); }
  .game-screen .hold-unit { padding:8px; }
  .game-screen .hold-unit>.eyebrow { display:none; }
  .game-screen .hold-orbit { width:180px; height:180px; margin:8px auto 14px; }
  .game-screen .hold-button { width:146px; height:146px; }
  .game-screen .hold-button b { font-size:22px; }
  .game-screen .hold-meter { margin:8px 0; }
  .game-screen .hold-meter>b { font-size:26px; }
  .game-screen .hold-unit .instruction-tag { padding:7px 9px; margin-top:10px; }
  .game-screen .duel-field { height:clamp(130px,calc(100dvh - 290px),200px); }

  .result-screen { display:flex; flex-direction:column; gap:10px; margin:12px auto; max-width:640px; }
  .result-screen>:is(.result-scene,.match-ribbon,.combat-summary,.friend-reaction,.restart-hint,.result-footnote) { display:none; }
  .result-screen>.victory-banner { order:0; padding:10px 14px; }
  .result-screen>.result-subtitle { order:1; margin:0; }
  .result-screen>.result-actions { order:2; margin:0; }
  .result-screen>.result-actions .button { min-height:46px; padding:9px 12px; }
  .result-screen>.mvp-card { order:3; margin:0; }
  .result-screen>:is(.mvp-banner,.result-ranking,.result-stats,.smoke-result-radio,.rush-debrief,.rush-result-facts,.rush-result-radio) { order:4; }
}

/* At 150–175% desktop zoom keep the two lobby cards inside the first view.
 * Ignore old short-landscape phone rules when the CSS viewport is still wide. */
@media(min-width:761px) and (max-height:680px) {
  body:has(.home-screen) .masthead { height:52px; min-height:52px; padding-block:0; }
  .home-screen { display:grid; height:auto; padding:12px 0 18px; gap:18px; }
  .home-screen .mobile-home-nav { display:none; }
  .home-screen .home-copy.map-lobby,.home-screen:is([data-home-view]) .home-visual { display:flex; height:clamp(350px,calc(100dvh - 82px),500px); flex:none; min-height:0; }
  .home-screen .home-copy.map-lobby { padding:12px; gap:9px; }
  .home-screen .home-copy .lobby-heading h1 { font-size:20px; }
  .home-screen .map-caption b { font-size:27px; }
  .home-screen .map-badge { width:66px; }
  .home-screen .map-caption { gap:8px; bottom:12px; }
  .home-screen .map-lobby .home-actions { margin-top:9px; }
  .home-screen .map-lobby .home-actions .button { min-height:46px; padding:8px; }
  .home-screen:is([data-home-view]) .online-panel { display:flex; }
  .home-screen:is([data-home-view]) .music-kit { display:grid; }
  .home-screen .roster-focus-info { padding:10px 9px; }
  .home-screen .roster-name-row h2 { font-size:19px; }
  .home-screen .roster-role { margin-top:5px; }
  .home-screen .roster-quote { margin-top:8px; }
  .home-screen .roster-selectors { padding:7px; }
  .home-screen .roster-pick { min-height:64px; }
  .home-screen .roster-t-grid .roster-pick { min-height:56px; }
  .home-screen .roster-support-grid .roster-pick { min-height:44px; }
}
@media(min-width:761px) and (max-height:560px) {
  .home-screen .roster-quote { display:none; }
  .home-screen .roster-focus-info .role-reveal { margin-top:6px; }
  .game-screen .pressure-panel .operator-tag,.game-screen .operator-role { display:none; }
  .game-screen .radio-bubble { min-height:48px; }
  .game-screen .pressure-action { padding:8px; }
  .game-screen .pressure-action strong { font-size:15px; }
  .game-screen .wire-status .signal-copy { display:flex; align-items:center; gap:8px; }
  .game-screen .wire-status .signal-copy strong { font-size:18px; }
}