* { box-sizing: border-box; }
:root { --ink:#071018; --paper:#e8f0ec; --muted:#7e9296; --line:#21353b; --cyan:#74f2df; --orange:#ff795f; --yellow:#ffd166; }
body { margin:0; min-height:100vh; color:var(--paper); background:#071018; font-family:'Space Mono', monospace; overflow-x:hidden; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(116,242,223,.06) 1px, transparent 1px),linear-gradient(90deg,rgba(116,242,223,.06) 1px, transparent 1px); background-size:42px 42px; }
.game-shell { width:min(1640px,100%); min-height:100vh; margin:0 auto; padding:clamp(16px,3vw,40px); display:grid; grid-template-columns:minmax(140px, .2fr) minmax(520px, 1080px); gap:clamp(20px,3vw,48px); align-items:center; }
.brand-rail { align-self:center; padding-bottom:20px; }
.brand-mark { display:flex; align-items:flex-start; gap:8px; font:800 clamp(34px,3.4vw,50px)/.78 'Barlow Condensed',sans-serif; letter-spacing:-2px; color:var(--paper); }
.brand-mark i { color:var(--orange); font:700 13px/1 'Space Mono',monospace; letter-spacing:0; padding-top:4px; }
.game-panel { width:100%; max-width:min(1080px, calc((100vh - 170px) * 1.5)); justify-self:center; position:relative; }.hud { height:52px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; border:1px solid var(--line); border-bottom:0; padding:0 16px; background:#0b1a20; }.hud-block { display:flex; flex-direction:column; gap:5px; }.hud-block.center { align-items:center; }.hud-block.right { align-items:flex-end; }.hud-label { color:#668087; font-size:8px; letter-spacing:2px; }.hud strong { font:700 20px/1 'Space Mono',monospace; letter-spacing:1px; }.hud .lives { color:var(--orange); font-size:12px; letter-spacing:3px; }
.canvas-wrap { position:relative; aspect-ratio:3/2; border:1px solid #294149; background:#07141a; overflow:hidden; box-shadow:0 18px 45px rgba(0,0,0,.32); } canvas { width:100%; height:100%; display:block; touch-action:none; }
.overlay { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:14%; background:rgba(7,16,24,.78); transition:opacity .25s ease; }.overlay.hidden { opacity:0; pointer-events:none; }.overlay-kicker { color:var(--orange); font-size:9px; letter-spacing:3px; margin-bottom:15px; }.overlay h1 { margin:0; font:800 clamp(48px,11vw,72px)/.78 'Barlow Condensed',sans-serif; letter-spacing:-1px; }.overlay h1 em { color:var(--cyan); font-style:normal; }.overlay p { color:#92a6a8; font-size:10px; line-height:1.8; margin:23px 0 27px; max-width:220px; }
button { display:flex; align-items:center; gap:26px; border:0; padding:13px 16px 13px 19px; color:var(--ink); background:var(--cyan); cursor:pointer; font:700 12px 'Space Mono',monospace; letter-spacing:1px; } button b { font-size:17px; } button:hover { background:#b6fff3; }.control-hint { margin-top:32px; color:#60777c; font-size:8px; letter-spacing:1px; }.control-hint span { color:var(--cyan); margin-right:5px; }.control-hint span:nth-of-type(2) { margin-left:12px; }
.boss-bar { position:absolute; z-index:2; top:20px; left:8%; right:8%; }.boss-bar.hidden { display:none; }.boss-caption { display:flex; justify-content:space-between; margin-bottom:6px; color:#fca08d; font-size:8px; letter-spacing:1px; }.boss-track { height:5px; background:#341f28; border:1px solid #633744; }.boss-fill { height:100%; width:100%; background:var(--orange); transition:width .15s; }.status-pill { position:absolute; z-index:3; top:16px; left:50%; transform:translateX(-50%); padding:7px 10px; border:1px solid var(--cyan); color:var(--cyan); background:rgba(7,20,26,.88); font-size:8px; letter-spacing:1px; white-space:nowrap; }.status-pill.hidden { display:none; }
.game-footer { display:flex; gap:17px; align-items:center; min-height:39px; padding:0 12px; border:1px solid var(--line); border-top:0; color:#627a7f; font-size:8px; letter-spacing:1px; }.game-footer .footer-right { margin-left:auto; }.dot { display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:5px; background:var(--cyan); box-shadow:0 0 7px var(--cyan); }.game-footer #powerReadout { color:var(--yellow); }
@media (max-width:760px) { .game-shell { display:block; padding:18px 14px 28px; }.brand-rail { padding:13px 8px 23px; }.brand-mark { font-size:40px; }.game-panel { margin:0 auto; max-width:1080px; }.hud { height:47px; }.game-footer { font-size:7px; gap:9px; } }
.transform-button { flex:none; min-height:32px; gap:8px; padding:8px 9px; border:1px solid #31505a; color:var(--cyan); background:#10242b; font:700 9px 'Space Mono',monospace; letter-spacing:.5px; white-space:nowrap; }
.transform-button b { color:var(--yellow); font-size:8px; }
.transform-button:hover { color:var(--ink); background:var(--cyan); }
@media (max-width:760px) { .game-footer { flex-wrap:wrap; padding:7px 9px; }.game-footer .footer-right { margin-left:auto; }.transform-button { order:3; }.game-footer #powerReadout { order:2; flex:1; } }
.overlay.intermission { justify-content:flex-start; overflow-y:auto; padding:5% 8%; }
.overlay.intermission h1 { font-size:clamp(30px,7vw,56px); }
.overlay.intermission p { margin:12px 0 10px; max-width:none; }
.overlay.intermission .control-hint { display:none; }
.weapon-brief { width:100%; max-width:560px; margin-bottom:16px; }
.weapon-brief.hidden { display:none; }
.weapon-brief .weapon-name { color:var(--yellow); font:800 clamp(20px,4vw,30px)/1 'Barlow Condensed',sans-serif; letter-spacing:1px; }
.overlay .weapon-brief .weapon-tag { color:var(--orange); font-size:8px; letter-spacing:2px; margin:0 0 6px; }
.overlay .weapon-brief .weapon-summary { color:#c9d6d4; font-size:10px; line-height:1.6; margin:6px 0 10px; max-width:none; }
.weapon-brief .weapon-modes { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.weapon-brief .weapon-mode { border:1px solid #31505a; background:rgba(16,36,43,.85); padding:8px 10px; }
.weapon-brief .weapon-mode b { display:block; color:var(--cyan); font-size:9px; letter-spacing:1.5px; margin-bottom:4px; }
.weapon-brief .weapon-mode span { color:#92a6a8; font-size:9px; line-height:1.55; }
@media (max-width:560px) { .weapon-brief .weapon-modes { grid-template-columns:1fr; } .overlay.intermission { padding:12px 14px; } }
.weapon-brief .weapon-head { display:flex; gap:14px; align-items:center; margin-bottom:4px; }
.weapon-brief .weapon-icon { flex:none; width:clamp(64px,12vw,96px); aspect-ratio:1; filter:drop-shadow(0 0 10px rgba(116,242,223,.35)); }
.weapon-brief .weapon-icon svg { display:block; width:100%; height:100%; }
/* On phones the game box is too small for the reward card, so the stop screen takes the whole screen. */
@media (max-width:760px), (max-height:560px) {
  .overlay.intermission { position:fixed; inset:0; z-index:50; padding:20px 16px 28px; background:rgba(7,16,24,.97); }
  .overlay.intermission h1 { font-size:clamp(30px,9vw,44px); }
  .overlay.intermission #startButton { position:sticky; bottom:0; flex:none; box-shadow:0 -14px 18px rgba(7,16,24,.97); }
}
@media (max-height:560px) { .overlay.intermission h1 { font-size:28px; } .overlay.intermission h1 br { display:none; } .overlay.intermission h1 em { margin-left:8px; } }
.weapon-brief .threat-card { display:flex; gap:12px; align-items:center; margin-top:10px; padding:8px 10px; border:1px solid #5a2a34; background:rgba(40,12,20,.55); }
.weapon-brief .threat-card canvas { flex:none; width:clamp(96px,16vw,150px); height:auto; }
.weapon-brief .threat-card .weapon-tag { color:#ff6f61; }
.weapon-brief .threat-name { color:#ff9a8a; font:800 clamp(18px,3.2vw,24px)/1 'Barlow Condensed',sans-serif; letter-spacing:1px; }
.overlay .weapon-brief .threat-card .weapon-summary { margin:4px 0 0; }
.overlay.intermission #startButton { position:sticky; bottom:0; flex:none; box-shadow:0 -12px 16px rgba(7,16,24,.9); }
.weapon-brief .weapon-mode span { display:block; }
.overlay.intermission h1 { font-size:clamp(30px,5.2vw,46px); }
.overlay.intermission .weapon-brief .threat-card { padding:6px 10px; }
.test-picker { margin:0 0 16px; padding:8px 10px; border:1px dashed #ff795f; color:#ff9a8a; font-size:9px; letter-spacing:1px; }
.test-picker div { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.test-picker button { gap:0; min-width:34px; justify-content:center; padding:7px 0; background:#10242b; color:var(--cyan); border:1px solid #31505a; font-size:11px; }
.test-picker button.on, .test-picker button:hover { background:var(--cyan); color:var(--ink); }
.overlay.intermission .test-picker { display:none; }
.hud .lives { display:flex; gap:4px; }
.life-icon { width:22px; height:22px; filter:drop-shadow(0 0 4px rgba(255,120,30,.5)); }
.life-icon .helm { fill:#1c1f25; stroke:#ff7a1a; stroke-width:1.2; }
.life-icon .fin { fill:#ff6a00; stroke:#9a3200; stroke-width:.8; }
.life-icon .visor { fill:#6fdcff; }
.life-icon .mouth { fill:#ff7a1a; }
.life-icon.lost { filter:none; opacity:.35; }
.life-icon.lost .helm, .life-icon.lost .fin, .life-icon.lost .visor, .life-icon.lost .mouth { fill:none; stroke:#7e9296; stroke-width:1; }
@media (max-width:760px) { .life-icon { width:18px; height:18px; } }
.boss-bar.second { top:48px; }
.boss-bar.second .boss-caption { color:#ffd08a; }
.boss-bar.second .boss-fill { background:#ffb84a; }
/* Game over: START OVER button and the Repair Bay (upgrade shop) */
.overlay .restart-button { margin-top:10px; background:transparent; color:var(--cyan); border:1px solid #31505a; }
.overlay .restart-button:hover { background:#10242b; }
.restart-button.hidden { display:none; }
.repair-bay .upgrade-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; padding:8px 10px; border:1px solid #31505a; background:rgba(16,36,43,.85); }
.repair-bay .upgrade-name { color:var(--yellow); font:800 clamp(16px,2.6vw,20px)/1 'Barlow Condensed',sans-serif; letter-spacing:1px; }
.repair-bay .upgrade-pips { margin-left:8px; color:var(--cyan); font:11px 'Space Mono',monospace; letter-spacing:2px; }
.repair-bay .upgrade-perk { display:block; margin-top:4px; color:#92a6a8; font-size:9px; line-height:1.5; }
.repair-bay .upgrade-row button { flex:none; gap:0; min-height:36px; padding:8px 12px; font-size:10px; }
.repair-bay .upgrade-row button:disabled { background:#1a2c33; color:#5d7276; cursor:default; }
/* Repair Shop card: the little shop with its OPEN / CLOSED sign, salvage and next refit price */
.shop-card { display:flex; gap:12px; align-items:center; margin-top:10px; padding:8px 10px; border:1px dashed #5a3a2a; background:rgba(40,22,12,.55); }
.shop-card.open { border:1px solid #31505a; background:rgba(16,36,43,.85); margin:0 0 6px; }
.shop-card .shop-icon { flex:none; width:clamp(64px,10vw,88px); }
.shop-card .shop-icon svg { display:block; width:100%; height:auto; }
.overlay .shop-card .weapon-tag { color:#ff9a6a; margin:0 0 4px; }
.overlay .shop-card.open .weapon-tag { color:var(--cyan); }
.overlay .shop-card .shop-stats { margin:0 0 4px; color:#92a6a8; font-size:9px; letter-spacing:1px; }
.overlay .shop-card .shop-stats b { color:var(--yellow); font-weight:700; }
.overlay .shop-card .weapon-summary { margin:0; }
/* Victory screen: built around the donation ask. The card and its button are the focus; PLAY AGAIN is small. */
.overlay.victory-mode { align-items:center; text-align:center; justify-content:center; }
.overlay.victory-mode .overlay-kicker { color:var(--cyan); }
.overlay.victory-mode h1 { font-size:clamp(20px,3.4vw,30px); }
.overlay.victory-mode h1 em { color:var(--cyan); }
.overlay.victory-mode p#overlayText { margin:6px auto 14px; color:#9fb4b6; }
.overlay.victory-mode .weapon-brief { max-width:620px; margin:0 auto 6px; }
.weapon-brief .victory { position:relative; padding:22px 24px 24px; border:2px solid var(--yellow); background:linear-gradient(180deg,rgba(60,44,12,.92),rgba(16,22,28,.95)); box-shadow:0 0 0 1px rgba(255,209,102,.25),0 0 36px rgba(255,209,102,.22); }
.victory-heart { font-size:clamp(34px,6vw,48px); line-height:1; color:#ff5a6a; text-shadow:0 0 18px rgba(255,90,106,.7); animation:victoryBeat 1.2s ease-in-out infinite; }
.victory-head { margin:8px 0 10px; color:var(--paper); font:800 clamp(24px,4.6vw,40px)/1.05 'Barlow Condensed',sans-serif; letter-spacing:1px; text-transform:uppercase; }
.victory-head em { color:var(--yellow); font-style:normal; }
.overlay .weapon-brief .victory-lead { margin:0 auto 8px; max-width:520px; color:#f4f7f2; font-size:clamp(13px,1.9vw,16px); line-height:1.6; }
.overlay .weapon-brief .victory-sub { margin:0 auto 18px; color:#c9b98e; font-size:clamp(11px,1.5vw,13px); }
.donate-button { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; max-width:440px; margin:0 auto; padding:16px 20px; background:var(--yellow); color:var(--ink); font:700 clamp(14px,2.2vw,18px) 'Space Mono',monospace; letter-spacing:1.5px; text-decoration:none; animation:donateGlow 1.8s ease-in-out infinite; }
.donate-button b { font-size:1.3em; color:#c0303f; }
.donate-button:hover, .donate-button:focus-visible { background:#ffe39a; outline:none; }
.overlay .weapon-brief .victory-note { margin:10px 0 0; color:#c9b98e; font-size:9px; }
@keyframes victoryBeat { 0%,100% { transform:scale(1); } 15% { transform:scale(1.18); } 30% { transform:scale(1); } 45% { transform:scale(1.1); } }
@keyframes donateGlow { 0%,100% { box-shadow:0 0 0 0 rgba(255,209,102,.55); } 50% { box-shadow:0 0 0 10px rgba(255,209,102,0),0 0 28px rgba(255,209,102,.45); } }
@media (prefers-reduced-motion:reduce) { .victory-heart, .donate-button { animation:none; } }
/* PLAY AGAIN shrinks to a quiet secondary button on the victory screen */
.overlay.victory-mode #startButton, .overlay.intermission.victory-mode #startButton { position:static; align-self:center; margin-top:14px; gap:10px; padding:8px 14px; background:transparent; color:#9fb4b6; border:1px solid #31505a; box-shadow:none; font-size:10px; }
.overlay.victory-mode #startButton b { font-size:12px; }
.overlay.victory-mode #startButton:hover { color:var(--cyan); border-color:var(--cyan); background:transparent; }
.victory-cast { display:block; width:100%; max-width:560px; height:auto; margin:-6px auto 2px; }
/* keep the whole victory screen reachable: start at the top when it is taller than the box, and trim the art a little */
.overlay.victory-mode { justify-content:flex-start; justify-content:safe center; padding-top:2.5%; padding-bottom:2.5%; }
.overlay.victory-mode .weapon-brief .victory { padding:12px 20px 18px; }
.victory-cast { max-width:430px; margin:-8px auto 0; }
.overlay.victory-mode .victory-head { margin:2px 0 8px; font-size:clamp(22px,3.6vw,34px); }
.overlay.victory-mode .weapon-brief .victory-lead { font-size:clamp(12px,1.6vw,15px); }
.overlay.victory-mode .weapon-brief .victory-sub { margin-bottom:14px; }
.overlay.victory-mode .donate-button { padding:13px 18px; }
/* ---------- Site link, ad banner and the text below the game ---------- */
.home-link { display:inline-block; margin-bottom:22px; color:var(--muted); font-size:10px; letter-spacing:2px; text-decoration:none; }
.home-link:hover { color:var(--cyan); }
@media (max-width:760px) { .home-link { margin-bottom:10px; } }
/* On screens tall enough, the game (with its score bar and footer, ~91px) takes the whole first screen; the banner
   follows below it, 150px+ away (AdSense policy). */
@media (min-height:600px) and (min-width:761px) {
  .game-shell { min-height:100vh; }
  .game-panel { max-width:min(1080px, calc((100vh - 185px) * 1.5)); }
}
.ad-slot { text-align:center; }
/* Wide computer screens: a 160x600 skyscraper in the leftover space right of the game (as in Missle Defense). It is
   placed by js/flow.js (placeSideAd) only when that space fits 150px of gap plus the ad, so the game never shrinks for
   it; otherwise (and in fit-to-screen mode) it stays hidden. */
.side-ad { display:none; position:absolute; z-index:1; }
.side-ad.on { display:flex; flex-direction:column; align-items:center; gap:4px; }
.side-ad ins { display:inline-block; width:160px; height:600px; }
.ad-label { color:var(--muted); font-size:8px; letter-spacing:2px; text-transform:uppercase; opacity:.8; }
.ad-banner { margin-top:100px; padding:14px 0 max(10px, env(safe-area-inset-bottom)); } /* ~150px below the game (AdSense: keep ads well away from games) */
.ad-banner ins { display:inline-block; width:320px; height:50px; }
@media (min-width:768px) and (min-height:600px) { .ad-banner ins { width:728px; height:90px; } } /* phones held sideways keep the small banner */
.ad-placeholder ins { background:repeating-linear-gradient(45deg,#0b1a20,#0b1a20 10px,#10242b 10px,#10242b 20px); border:1px dashed var(--line); }
.content { position:relative; max-width:760px; margin:0 auto; padding:28px 20px 48px; font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:15px; line-height:1.65; color:#c9d6d4; }
.content h2 { margin:30px 0 10px; color:var(--cyan); font:800 26px/1.1 'Barlow Condensed',sans-serif; letter-spacing:1px; text-transform:uppercase; }
.content li { margin-bottom:6px; }
.content b { color:var(--paper); }
.content a { color:var(--yellow); }
.content kbd { padding:1px 6px; border:1px solid #31505a; border-bottom-width:2px; border-radius:4px; background:#10242b; font:12px 'Space Mono',monospace; color:var(--paper); }
.content footer { margin-top:40px; color:var(--muted); font-size:13px; text-align:center; }
/* Phones held sideways: trim the side panel so the game fits on the first screen */
@media (max-height:500px) and (min-width:761px) { .home-link { margin-bottom:10px; } }
/* ---------- Fit to screen ----------
   body.fit (js/flow.js: automatic when a phone / tablet player starts; computers keep the normal page): the game
   fills the screen and the page is locked (nothing scrolls, zooms or pulls to refresh). No ad shows while you play:
   AdSense asks for ads to be kept well away from games (at least 150px), so the banner only appears, in a strip at the
   top, on the pause, stage-clear and game-over screens (the same banner the page loaded; nothing is refreshed).
   Pause / exit sit small inside the game at the top right, the score line at its bottom. Touch players (body.touch)
   get a joystick on the left and a round FORM button on the right: in the margins beside the game when the phone is
   held sideways (over the game's corners if the margins are narrow), below the game when upright.
   --gh / --gw: height and width for the game; --m: the margin on each side of it; --adS: the banner strip. */
.mini-buttons { display:none; }
.fit-layer { display:none; }
.joystick { display:none; }
/* Sound toggles: ♪ music, FX effects, VO voice. Off = dimmed and struck through. */
.sound-buttons { display:flex; gap:4px; flex:none; }
.sound-toggle { flex:none; gap:0; justify-content:center; min-width:30px; min-height:28px; padding:4px 6px; border:1px solid #31505a; color:var(--cyan); background:#10242b; font:700 10px 'Space Mono',monospace; letter-spacing:0; }
.sound-toggle:hover { color:var(--ink); background:var(--cyan); }
.sound-toggle[aria-pressed="false"] { color:#5d7276; text-decoration:line-through; background:#0b1a20; }
.fit-button { flex:none; gap:6px; min-height:28px; padding:6px 9px; border:1px solid #31505a; color:var(--cyan); background:#10242b; font:700 9px 'Space Mono',monospace; letter-spacing:.5px; white-space:nowrap; }
.fit-button:hover { color:var(--ink); background:var(--cyan); }
html.fit, body.fit { overscroll-behavior:none; }
body.fit { overflow:hidden; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
  --vh:100vh; --adS:calc(64px + env(safe-area-inset-top)); --sx:calc(env(safe-area-inset-left) + env(safe-area-inset-right));
  --gh:calc(var(--vh) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); --gw:min(calc(100vw - var(--sx)), calc(var(--gh) * 1.5));
  --m:calc((100vw - var(--gw)) / 2); --js:104px; }
@media (min-width:768px) and (min-height:600px) { body.fit { --adS:calc(104px + env(safe-area-inset-top)); } }
@supports (height:100dvh) { body.fit { --vh:100dvh; } }
body.fit .game-panel { position:fixed; inset:0; z-index:100; max-width:none; width:auto; margin:0; background:#050b10;
  justify-self:stretch; align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body.fit .canvas-wrap { width:var(--gw); flex:none; box-shadow:none; }
body.fit .game-footer, body.fit .fit-button { display:none; }
/* stop screens: the banner strip at the top, the screen's text and buttons below it */
body.fit:has(#overlay:not(.hidden)) .ad-banner { position:fixed; left:0; right:0; top:0; z-index:101; height:var(--adS); margin:0; padding:env(safe-area-inset-top) 0 0;
  background:#050b10; border-bottom:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
body.fit .ad-label { font-size:7px; line-height:1; }
/* upright phones with room to spare: the banner sits in the empty middle while you play, at least 150px from the game
   and from the controls (js/flow.js measures that and sets .mid-ad / --midTop; otherwise there is no banner during play) */
body.fit.mid-ad .ad-banner { position:fixed; left:0; right:0; top:var(--midTop); z-index:101; height:64px; margin:0; padding:0; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
body.fit .overlay:not(.intermission) { justify-content:flex-start; padding-top:calc(var(--adS) + 14px); }
body.fit .overlay.intermission { top:var(--adS); }
/* in-game layer: pause / exit (and, held sideways, the sound toggles) top right, the score line at the bottom */
body.fit .fit-layer { display:block; position:absolute; inset:0; z-index:3; pointer-events:none; }
body.fit .fit-layer > * { pointer-events:auto; }
body.fit .fit-layer .hud { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); height:auto; display:flex; gap:10px; align-items:center; padding:3px 7px; border:0; background:rgba(5,11,16,.5); white-space:nowrap; }
body.fit .fit-layer .hud-block { flex-direction:row; align-items:center; gap:4px; }
body.fit .fit-layer .hud-label { font-size:6px; letter-spacing:1px; }
body.fit .fit-layer .hud strong { font-size:11px; letter-spacing:0; }
body.fit .fit-layer .life-icon { width:13px; height:13px; }
body.fit .fit-layer .mini-buttons { position:absolute; top:5px; right:6px; display:flex; gap:4px; }
body.fit .fit-layer .mini-button { gap:0; justify-content:center; min-width:30px; min-height:26px; padding:3px 6px; border:1px solid #31505a; color:var(--cyan); background:rgba(16,36,43,.8); font:700 11px 'Space Mono',monospace; }
body.fit .fit-layer .sound-buttons { position:absolute; top:5px; right:78px; gap:3px; }
body.fit .fit-layer .sound-toggle { min-width:26px; min-height:26px; padding:2px 4px; font-size:8px; background:rgba(16,36,43,.8); }
body.fit .boss-bar { top:8px; left:12%; right:max(28%, 176px); } /* clear of the buttons in the top-right */
body.fit .boss-bar.second { top:30px; }
/* touch controls: centred in the side margins when there is room, otherwise over the game's bottom corners */
body.fit.touch .joystick { display:block; position:fixed; z-index:102; left:max(calc(10px + env(safe-area-inset-left)), calc(var(--m) / 2 - var(--js) / 2));
  bottom:calc(14px + env(safe-area-inset-bottom)); width:var(--js); height:var(--js);
  border-radius:50%; border:2px solid rgba(116,242,223,.35); background:radial-gradient(circle,rgba(16,36,43,.55),rgba(16,36,43,.25)); touch-action:none; }
.joy-knob { position:absolute; left:50%; top:50%; width:50px; height:50px; margin:-25px 0 0 -25px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#b6fff3,#3fb6a8 60%,#1c4c50); box-shadow:0 0 14px rgba(116,242,223,.45); pointer-events:none; }
.transform-button.form-float { display:none; }
body.fit.touch .transform-button.form-float { display:flex; position:fixed; z-index:102; right:max(calc(10px + env(safe-area-inset-right)), calc(var(--m) / 2 - 41px));
  bottom:calc(22px + env(safe-area-inset-bottom)); width:82px; height:82px; border-radius:50%; flex-direction:column; justify-content:center; gap:2px; padding:0;
  border:2px solid var(--cyan); background:rgba(16,36,43,.55); color:var(--cyan); font:700 10px 'Space Mono',monospace; white-space:normal; text-align:center; touch-action:manipulation; }
body.fit.touch .transform-button.form-float b { display:none; }
body.fit.touch .transform-button.form-float:active { background:var(--cyan); color:var(--ink); }
body.fit.touch:has(#overlay:not(.hidden)) .joystick, body.fit.touch:has(#overlay:not(.hidden)) .transform-button.form-float { display:none; } /* menus and stop screens: out of the way */
/* upright: game at the top, sound toggles just under it on the right, joystick / FORM low down */
@media (orientation:portrait) {
  body.fit { --js:116px; }
  body.fit .game-panel { justify-content:flex-start; padding-top:calc(10px + env(safe-area-inset-top)); }
  body.fit .fit-layer .sound-buttons { position:fixed; top:calc(env(safe-area-inset-top) + 20px + var(--gw) / 1.5); right:calc(10px + env(safe-area-inset-right)); z-index:102; }
  body.fit .fit-layer .hud { left:6px; transform:none; }
  body.fit .boss-bar { right:max(17%, 84px); }
  body.fit .game-panel::after { content:'Turn your phone sideways for a bigger view'; margin-top:52px; color:var(--muted); font-size:10px; letter-spacing:1px; }
}