/* The interface layer over style.css: the start menu, the battle display's type and spacing, the touch controls
   and the phone layouts. It loads second, so a rule here wins over the same selector there. */

.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
html[data-input="touch"] .mouse-only,html:not([data-input="touch"]) .touch-only{display:none!important}
html,body{overscroll-behavior:none}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.tiny-label{font-size:10px}

/* ---------- Start menu ---------- */
/* The battle instruments stay off the menu: only the masthead, the city and the menu itself. */
body[data-playing="false"] :is(.mission-panel,.combat-hud,.comms,.world-marker,#pause){display:none}
body[data-playing="false"] .screen-grain{background:linear-gradient(90deg,rgba(7,16,21,0) 34%,rgba(7,16,21,.62) 60%,rgba(7,16,21,.9) 100%),linear-gradient(180deg,rgba(7,16,21,.7) 0%,rgba(7,16,21,0) 24%,rgba(7,16,21,0) 72%,rgba(7,16,21,.55) 100%)}
.masthead{height:84px}
.edition,.operation{font-size:11px}
.icon-button{width:40px;height:40px}
.icon-button svg{width:19px;height:19px}
.bottom-caption{font-size:9px;letter-spacing:1.2px;right:auto;gap:22px;max-width:50vw}

#menu{position:absolute;top:84px;right:0;bottom:0;left:auto;width:min(500px,100%);padding:20px 56px 28px 28px;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ff704566 transparent;pointer-events:auto}
#menu>:first-child{margin-top:auto}
#menu>:last-child{margin-bottom:auto}
#menu>*{flex-shrink:0;animation:menu-in .5s cubic-bezier(.2,.7,.2,1) both}
#menu>:nth-child(2){animation-delay:.05s}#menu>:nth-child(3){animation-delay:.1s}#menu>:nth-child(4){animation-delay:.15s}#menu>:nth-child(n+5){animation-delay:.2s}
@keyframes menu-in{from{opacity:0;transform:translateY(10px)}}
#menu .intro-eyebrow{font-size:10px;letter-spacing:2px}
#menu h1{font-size:clamp(40px,4.4vw,62px);line-height:1;letter-spacing:-.045em;margin:18px 0 14px;text-shadow:0 2px 24px #071216aa}
#menu .intro-copy{font-size:14px;line-height:1.6;max-width:400px;margin:0 0 20px;color:#d3dbd4}

/* The three forms: one icon set, one weight, shared with the battle display. */
.form-cards{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.form-cards li{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 10px 10px 12px;border:1px solid var(--line);background:rgba(11,24,30,.6);backdrop-filter:blur(6px)}
.form-cards svg{grid-row:1/3;width:34px;height:34px;fill:var(--orange-light)}
.form-cards b{align-self:end;font:700 10px var(--mono);letter-spacing:1.1px}
.form-cards span{align-self:start;font-size:11px;line-height:1.3;color:var(--muted)}

.mission-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.mission-list .tiny-label{margin-bottom:2px}
.mission-button{display:grid;grid-template-columns:26px 1fr 20px;grid-template-rows:auto auto;column-gap:14px;align-items:center;width:100%;min-height:58px;padding:9px 16px;text-align:left;border:1px solid #d8e5d53d;background:rgba(13,27,34,.74);backdrop-filter:blur(6px);color:var(--ink);transition:background .15s,border-color .15s,transform .15s}
.mission-button svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mission-icon{grid-row:1/3;width:26px;height:26px;color:var(--orange-light)}
.mission-go{grid-row:1/3;grid-column:3;width:20px;height:20px;opacity:.55;transition:transform .15s,opacity .15s}
.mission-button>span{align-self:end;font:700 12px var(--mono);letter-spacing:1.6px}
.mission-button>small{align-self:start;grid-column:2;font-size:12px;line-height:1.35;color:#aebbb4}
.mission-button:hover:not(:disabled){border-color:var(--orange);background:rgba(60,36,28,.8);transform:translateX(-3px)}
.mission-button:hover:not(:disabled) .mission-go{opacity:1;transform:translateX(3px)}
.mission-button:active:not(:disabled){transform:none}
.mission-button.primary{background:var(--orange);border-color:var(--orange);color:#171f1e;min-height:64px;box-shadow:0 8px 30px #0000003d}
.mission-button.primary .mission-icon{color:#171f1e}
.mission-button.primary>small{color:#3a2a22}
.mission-button.primary:hover:not(:disabled){background:#ff9068;border-color:#ff9068}

#menu .difficulty{margin:0 0 18px;gap:6px}
#menu .difficulty button{font-size:11px;padding:8px 16px;min-height:34px}
.difficulty-scope{margin-left:8px;font:9px var(--mono);letter-spacing:1.2px;color:var(--muted)}
#menu .intro-controls{display:flex;flex-wrap:wrap;gap:10px 22px;max-width:none;margin:0 0 18px}
#menu .intro-controls>div>span:last-child{font-size:9px;letter-spacing:1.2px}
#menu .intro-controls kbd{height:24px;min-width:23px;font-size:10px}
#menu .intro-controls .wide-key{min-width:58px}
.touch-hint{margin:0 0 16px;font-size:12px;line-height:1.5;color:#c7d0c8}
.touch-hint b{display:block;margin-bottom:2px;font:10px var(--mono);letter-spacing:1.4px;color:var(--orange-light)}
.menu-footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-top:12px;border-top:1px solid var(--line)}
.menu-footer .deployment-note{margin:0 auto 0 0;max-width:none;font-size:9px;letter-spacing:1.2px}
.menu-footer .agentborn-link{margin:0;font-size:10px}
#asset-status,#menu .crash-note{margin:10px 0 0!important;font:9px var(--mono)!important;letter-spacing:1.2px!important;color:var(--muted)!important}
#asset-status:empty{display:none}
#menu .crash-note{color:#ffb39a!important}
/* A season briefing replaces the pitch with the target's numbers. */
.season-briefing :is(.form-cards,.difficulty,.intro-controls,.touch-hint){display:none!important}
.season-brief dt{font-size:9px}
.season-brief p{font-size:12px}

@media(min-width:1500px){.masthead{height:92px}#menu{top:92px;width:540px;padding-right:72px}}
@media(max-width:1100px){#menu{padding-right:28px;width:min(460px,100%)}}
@media(max-height:820px){#menu h1{font-size:clamp(36px,3.6vw,50px);margin:12px 0 10px}#menu .intro-copy{margin-bottom:14px}.form-cards{margin-bottom:14px}.form-cards li{padding:7px 10px}.mission-button{min-height:50px;padding:6px 14px}.mission-button.primary{min-height:54px}#menu .difficulty,#menu .intro-controls{margin-bottom:12px}}
@media(max-height:700px){#menu .intro-copy{display:none}}
/* Phones upright: the menu fills the width and scrolls under the masthead. */
@media(max-width:700px){
  .masthead{height:60px;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
  .bottom-caption{display:none}
  body[data-playing="false"] .screen-grain{background:linear-gradient(180deg,rgba(7,16,21,.8) 0%,rgba(7,16,21,.5) 26%,rgba(7,16,21,.78) 58%,rgba(7,16,21,.95) 100%)}
  #menu{top:60px;width:100%;padding:16px max(18px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
  #menu h1{font-size:42px;margin:14px 0 12px}
  #menu .intro-copy{display:block;font-size:14px}
  .form-cards li{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:3px;padding:10px 4px}
  .form-cards svg{grid-row:auto}
}
/* Phones on their side, and short windows: pitch on the left, missions on the right. */
@media(max-height:520px) and (min-width:560px){
  .masthead{height:48px}
  .wordmark{font-size:21px}
  .icon-button{width:36px;height:36px}
  .bottom-caption{display:none}
  body[data-playing="false"] .screen-grain{background:linear-gradient(90deg,rgba(7,16,21,.72) 0%,rgba(7,16,21,.35) 45%,rgba(7,16,21,.88) 100%)}
  #menu{top:48px;width:100%;display:grid;grid-template-columns:1fr minmax(270px,340px);column-gap:28px;align-content:center;padding:10px max(20px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
  #menu>*{grid-column:1;margin-top:0!important;margin-bottom:0!important}
  #menu h1{font-size:clamp(28px,5vw,40px);margin:8px 0!important}
  #menu h1 br:first-of-type{display:none}
  #menu .intro-copy{display:block;font-size:12px;line-height:1.5;margin-bottom:8px!important}
  .form-cards,#menu .intro-controls{display:none}
  .touch-hint{font-size:11px;margin-bottom:8px!important}
  #menu .mission-list{grid-column:2;grid-row:1/span 5;gap:6px;align-self:center}
  #menu .difficulty{grid-column:2;grid-row:6/span 3;align-self:start;margin-top:8px!important}
  .mission-button,.mission-button.primary{min-height:46px;padding:5px 12px}
  .mission-button>small{font-size:11px}
  .menu-footer{padding-top:8px}
  #menu.season-briefing .season-brief{grid-column:1;grid-row:1/span 6;margin:0}
}

/* ---------- Battle display ---------- */
.screen-grain{transition:background .4s}
body[data-playing="true"] .screen-grain{background:radial-gradient(ellipse at 50% 50%,rgba(7,16,21,0) 55%,rgba(7,16,21,.42) 100%),linear-gradient(180deg,rgba(7,16,21,.5) 0%,rgba(7,16,21,0) 16%,rgba(7,16,21,0) 80%,rgba(7,16,21,.38) 100%)}
/* Deploying: the city comes up out of the dark. */
body.deploying::after{content:"";position:fixed;inset:0;z-index:11;pointer-events:none;background:#0a151b;animation:deploy .8s ease-out forwards}
@keyframes deploy{0%{opacity:1}35%{opacity:.85}100%{opacity:0}}
body[data-playing="true"] .transform-panel{width:354px}
body[data-playing="true"] .mode-buttons{gap:6px}
body[data-playing="true"] .mode-button{flex-direction:row;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 10px 0 22px}
body[data-playing="true"] .mode-silhouette{display:block;width:26px;height:26px;margin:0;opacity:1}
body[data-playing="true"] .mode-key{position:absolute;top:5px;left:7px;margin:0;font-size:10px;opacity:.75}
body[data-playing="true"] .mode-label{font-size:10px;letter-spacing:1px}
body[data-playing="true"] .flight-hint{margin-top:9px;font:10px/1.5 var(--mono);letter-spacing:.8px;color:#d3ddd6;text-shadow:0 1px 4px #000}
body[data-playing="true"] .radar-heading .tiny-label{font-size:9px}
.radar-key{font-size:9px}
.reticle-wrap #lock-label{font-size:10px}
.gauge-read,.gauge-read small,.gauge-ammo,.gauge-grapple{font-size:9px}
.boss-heading{font-size:11px}.boss-heading>span{font-size:10px}.boss-phase{font-size:9px}
#site-marker{font-size:10px}
body[data-playing="true"] .notice{font-size:11px}
.dialog .intro-eyebrow{font-size:10px}
.dialog p.dialog-footnote{font-size:9px;line-height:1.7}
.secondary-button{font-size:11px}
.primary-button{font-size:12px}
.look-settings{font-size:10px}
.full-controls>div{font-size:12px}.full-controls kbd{font-size:10px}
.full-controls>.fallback-heading{font-size:10px}
.enemy-reference dt{font-size:10px}.enemy-reference dd{font-size:12px}
.overlay{overflow:auto;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.dialog{max-height:calc(100dvh - 24px);overflow:auto;scrollbar-width:thin}
@media(max-height:520px){
  .dialog{padding:18px 22px;max-width:560px}
  .dialog h2{font-size:24px;margin:8px 0}
  .dialog p{margin-bottom:12px;font-size:12px}
  .look-settings{margin-bottom:12px;padding-top:10px}
  .look-settings input[type=range]{margin:6px 0 10px}
  .dialog .primary-button,.dialog .secondary-button{height:42px}
}

/* ---------- Touch controls (src/touch-controls.js) ---------- */
.touch-layer{display:none;position:fixed;inset:0;z-index:1;touch-action:none;font-family:var(--mono)}
html[data-input="touch"] body[data-playing="true"] .touch-layer{display:block}
.touch-stick{position:absolute;left:calc(max(22px,env(safe-area-inset-left)) + 8px);bottom:calc(max(18px,env(safe-area-inset-bottom)) + 6px);width:116px;height:116px;border-radius:50%;border:1.5px solid #e8efe455;background:radial-gradient(circle,#0b182033 0%,#0b182080 100%);pointer-events:none;transition:opacity .15s;opacity:.7}
.touch-stick i{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:#eef3eab3;box-shadow:0 2px 10px #0008}
.touch-stick.held{opacity:1;border-color:#ff9c6c}
.touch-stick.held i{background:var(--orange-light)}
.touch-button{position:absolute;display:grid;place-items:center;width:var(--size,56px);height:var(--size,56px);padding:0;border-radius:50%;border:1.5px solid #e8efe466;background:#0b1820a6;color:#eef3ea;font:700 10px var(--mono);letter-spacing:.8px;line-height:1.15;text-align:center;touch-action:none;backdrop-filter:blur(3px)}
.touch-button.down,.touch-button.on{background:#ff7045d9;border-color:#ffc0a0;color:#141c1b}
.touch-button.hide{display:none}
.touch-button small{display:block;font-size:9px;font-weight:400;letter-spacing:.4px;opacity:.85}
.touch-right .touch-button{right:calc(var(--r) + max(0px,env(safe-area-inset-right) - 8px));bottom:calc(var(--b) + max(0px,env(safe-area-inset-bottom) - 8px))}
.touch-left .touch-button{left:calc(var(--l) + max(0px,env(safe-area-inset-left) - 8px));bottom:calc(var(--b) + max(0px,env(safe-area-inset-bottom) - 8px))}
.touch-button[data-touch="fire"]{--size:84px;--r:22px;--b:26px;font-size:13px;border-color:#ff9c6c;background:#3a1d14b3}
.touch-button[data-touch="missile"]{--size:60px;--r:120px;--b:18px}
.touch-button[data-touch="up"]{--size:58px;--r:26px;--b:122px}
.touch-button[data-touch="down"]{--size:54px;--r:108px;--b:92px}
.touch-button[data-touch="grapple"]{--size:54px;--r:176px;--b:86px;border-color:#98d8da99;color:#c9f1f2}
.touch-button[data-touch="lock"]{--size:48px;--r:96px;--b:160px}
.touch-button[data-touch="salvo"]{--size:46px;--r:192px;--b:20px}
.touch-button[data-touch="fire-left"]{--size:56px;--l:104px;--b:156px;border-color:#ff9c6c;background:#3a1d14b3}
.touch-button[data-touch="boost"]{--size:56px;--l:30px;--b:156px}
html[data-input="touch"] body[data-playing="true"] :is(.wordmark,.operation,.edition,#help,.flight-hint,.mode-key,.radar-heading,.radar-key,.transform-heading,.mode-status){display:none}
html[data-input="touch"] body[data-playing="true"] .masthead{height:52px;padding:0 max(10px,env(safe-area-inset-right)) 0 0;background:none;border:0}
html[data-input="touch"] body[data-playing="true"] .top-actions{margin-left:auto;gap:8px}
html[data-input="touch"] body[data-playing="true"] .icon-button{width:42px;height:42px;background:#0b1820a6}
html[data-input="touch"] body[data-playing="true"] .ops{top:6px;width:min(440px,calc(100vw - 250px));min-width:0}
html[data-input="touch"] body[data-playing="true"] .ops-count{flex:0 0 78px;padding:4px 8px}
html[data-input="touch"] body[data-playing="true"] .ops-count strong{font-size:19px}
html[data-input="touch"] body[data-playing="true"] .ops-clock{padding:4px 8px 5px;gap:2px}
html[data-input="touch"] body[data-playing="true"] #ops-timer{font-size:20px}
html[data-input="touch"] body[data-playing="true"] #ops-label,html[data-input="touch"] body[data-playing="true"] #boss-signal,html[data-input="touch"] body[data-playing="true"] .ops-count>span,html[data-input="touch"] body[data-playing="true"] .ops-count em{font-size:9px;letter-spacing:.8px}
html[data-input="touch"] body[data-playing="true"] .radar-panel{top:6px;left:max(10px,env(safe-area-inset-left));right:auto;width:92px}
html[data-input="touch"] body[data-playing="true"] .radar-frame{height:92px}
html[data-input="touch"] body[data-playing="true"] .combat-hud{bottom:max(8px,env(safe-area-inset-bottom))}
html[data-input="touch"] body[data-playing="true"] .transform-panel{left:50%;right:auto;transform:translateX(-50%);width:198px;max-width:none}
html[data-input="touch"] body[data-playing="true"] .mode-buttons{gap:4px}
html[data-input="touch"] body[data-playing="true"] .mode-button{flex-direction:column;gap:2px;height:48px;padding:0}
html[data-input="touch"] body[data-playing="true"] .mode-silhouette{width:22px;height:22px}
html[data-input="touch"] body[data-playing="true"] .mode-label{font-size:9px;letter-spacing:.3px}
html[data-input="touch"] body[data-playing="true"] .gauges{transform:translate(-50%,-50%) scale(.82)}
html[data-input="touch"] body[data-playing="true"] .notice{top:74px;font-size:10px;padding:6px 12px}
html[data-input="touch"] body[data-playing="true"] .boss-hud{top:70px;width:min(340px,calc(100vw - 260px));min-width:200px}
html[data-input="touch"] body[data-playing="true"]:has(#boss-hud:not(.hidden)) .notice{top:128px}
html[data-input="touch"] .scope{background:radial-gradient(circle at 50% 50%,transparent 0 40vmin,rgba(255,196,120,.3) 40.2vmin 40.5vmin,rgba(3,7,9,.9) 40.8vmin)}
/* Battles fly in landscape. Upright, the game pauses behind this note. */
.rotate-note{display:none;position:fixed;inset:0;z-index:30;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px;background:#0a151bf2;text-align:center}
.rotate-note svg{width:64px;height:64px;fill:none;stroke:var(--orange-light);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;animation:rotate-hint 2.4s ease-in-out infinite}
.rotate-note strong{font:700 13px var(--mono);letter-spacing:2px}
.rotate-note span{font-size:14px;color:var(--muted)}
@keyframes rotate-hint{0%,25%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media(orientation:portrait){html[data-input="touch"] body[data-playing="true"]:not(:has(#results:not(.hidden))) .rotate-note{display:flex}}
@media(prefers-reduced-motion:reduce){#menu>*,.rotate-note svg{animation:none}body.deploying::after{display:none}}
.difficulty-scope{white-space:nowrap}
@media(max-height:520px){.operation{display:none}.top-actions{margin-left:auto}}
/* The readouts hang from the lower ends of the hull and boost arcs, so the band through the reticle, where a locked
   target and its label sit, stays clear. Ammunition and the grapple line drop below them. */
.gauge-read{top:calc(50% + 54px);transform:none}
.gauge-read.left{right:calc(50% + 62px)}
.gauge-read.right{left:calc(50% + 62px)}
.gauge-ammo{top:calc(50% + 106px)}
.gauge-grapple{top:calc(50% + 124px)}
#target-marker .lock-name{font-size:10px;background:#0b1820d9}
html[data-input="touch"] body[data-playing="true"] #boss-signal{white-space:normal;text-align:center;line-height:1.3}
/* ---------- Full screen on iPhone ---------- */
/* Safari on iPhone has no Fullscreen API, so the menu points the player at the Home Screen (touch-controls.js). */
.home-screen-hint{display:grid;grid-template-columns:22px 1fr 30px;align-items:center;column-gap:10px;margin:0 0 14px;padding:8px 4px 8px 12px;border:1px solid #ff704566;background:rgba(58,29,20,.74);backdrop-filter:blur(6px)}
.home-screen-hint svg{width:22px;height:22px;fill:none;stroke:var(--orange-light);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.home-screen-hint p{margin:0;font-size:12px;line-height:1.4;color:#e4ebe2}
.home-screen-hint b{display:block;margin-bottom:1px;font:700 10px var(--mono);letter-spacing:1.4px;color:var(--orange-light)}
.home-screen-hint em{font-style:normal;font-weight:600;color:#fff}
.home-screen-hint button{width:30px;height:30px;padding:0;border:0;background:none;color:var(--muted);font-size:13px}
@media(max-height:520px) and (min-width:560px){.home-screen-hint{margin-bottom:8px!important;padding:5px 2px 5px 10px}.home-screen-hint p{font-size:11px}}
/* Launched from the Home Screen the page runs under the status bar (black-translucent), so upright the masthead
   steps down below it. On its side the iPhone hides the status bar and the insets are left and right. */
@media(max-width:700px){
  .masthead{height:calc(60px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  #menu{top:calc(60px + env(safe-area-inset-top))}
}

/* ---------- Phone on its side: compact battle display ---------- */
/* A short landscape screen keeps the top panel to one slim strip, about a tenth of the height, with the radar and
   the sound and pause buttons scaled to match. The same query is phoneLandscape in main.js, which also shortens the
   objective line. */
@media(orientation:landscape) and (max-height:500px){
  html[data-input="touch"] body[data-playing="true"] .masthead{height:calc(42px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  html[data-input="touch"] body[data-playing="true"] .top-actions{gap:6px}
  html[data-input="touch"] body[data-playing="true"] .icon-button{width:34px;height:34px}
  html[data-input="touch"] body[data-playing="true"] .icon-button svg{width:16px;height:16px}
  html[data-input="touch"] body[data-playing="true"] .ops{top:calc(4px + env(safe-area-inset-top));width:min(420px,calc(100vw - 2 * (max(10px,env(safe-area-inset-left),env(safe-area-inset-right)) + 90px)));border-top-width:1.5px}
  html[data-input="touch"] body[data-playing="true"] .ops-count{flex:0 0 60px;padding:2px 6px;gap:0}
  html[data-input="touch"] body[data-playing="true"] .ops-count strong,html[data-input="touch"] body[data-playing="true"] .ops-count.casualties strong{font-size:15px;letter-spacing:0;line-height:1.1}
  html[data-input="touch"] body[data-playing="true"] .ops-count>span,html[data-input="touch"] body[data-playing="true"] .ops-count em{font-size:7px;letter-spacing:.4px;line-height:1.15}
  html[data-input="touch"] body[data-playing="true"] .ops-count em b{font-size:7px}
  html[data-input="touch"] body[data-playing="true"] .ops-clock{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:8px;row-gap:2px;padding:3px 8px 4px}
  html[data-input="touch"] body[data-playing="true"] #ops-label{grid-column:1;justify-self:start;font-size:8px;letter-spacing:.8px}
  html[data-input="touch"] body[data-playing="true"] #ops-timer{grid-column:2;font-size:15px}
  html[data-input="touch"] body[data-playing="true"] .ops-bar{grid-column:1/-1;height:2px}
  html[data-input="touch"] body[data-playing="true"] #boss-signal{grid-column:1/-1;min-width:0;font-size:8px;letter-spacing:.4px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
  html[data-input="touch"] body[data-playing="true"] .radar-panel{top:calc(4px + env(safe-area-inset-top));width:64px}
  html[data-input="touch"] body[data-playing="true"] .radar-frame{height:64px}
  html[data-input="touch"] body[data-playing="true"] .notice{top:calc(52px + env(safe-area-inset-top))}
  html[data-input="touch"] body[data-playing="true"] .boss-hud{top:calc(50px + env(safe-area-inset-top))}
  html[data-input="touch"] body[data-playing="true"]:has(#boss-hud:not(.hidden)) .notice{top:calc(104px + env(safe-area-inset-top))}
  html[data-input="touch"] body[data-playing="true"] .mode-button{height:42px}
}
/* Safari with its bars showing leaves little more than 300 px, and the home indicator lifts the form buttons: the
   gauges shrink so their readouts stay clear of them. */
@media(orientation:landscape) and (max-height:360px){html[data-input="touch"] body[data-playing="true"] .gauges{transform:translate(-50%,-50%) scale(.74)}}