/* SKYBREAK v2 — HUD layout (hud mod). Load after style.css / game-shell.css. */
:root{--hud-v2:1;--hud-ink:#e4f1e8;--hud-dim:#7f9c96;--hud-line:#24403e;--hud-lime:#d2f78a;--hud-gold:#ffd98a;--hud-cyan:#8fe3f0}

/* ---------- Toasts: small banner under the top bar, never mid-field ---------- */
.viewport #toast{top:60px!important;left:50%!important;width:max-content!important;max-width:88%;transform:translateX(-50%);padding:4px 14px!important;box-sizing:border-box;font-size:11px!important;letter-spacing:1.6px!important;line-height:1.35;white-space:normal;border-radius:3px;background:linear-gradient(90deg,#04151a00,#04151ab8 18%,#04151ab8 82%,#04151a00);text-shadow:0 1px 3px #000;z-index:5}
.viewport:has(#boss-ui:not([hidden])) #toast{top:52px!important}

/* ---------- Wide layouts: HUD lives in the side margins ---------- */
.hud-side{display:none}
body.hud-wide .viewport{overflow:visible}
body.hud-wide .hud-side{display:flex;flex-direction:column;gap:14px;position:absolute;top:0;bottom:0;width:var(--hud-side,220px);padding:22px 0 20px;box-sizing:border-box;z-index:6;pointer-events:none;color:var(--hud-ink);font-family:'DM Sans',Arial,sans-serif}
body.hud-wide .hud-side button{pointer-events:auto}
body.hud-wide #hud-left{right:calc(100% + 22px);text-align:right;border-right:1px solid var(--hud-line);padding-right:18px}
body.hud-wide #hud-right{left:calc(100% + 22px);border-left:1px solid var(--hud-line);padding-left:18px;max-width:230px}
body.hud-wide .hud-side-bottom{margin-top:auto;display:flex;flex-direction:column;gap:10px}
body.hud-wide .mobile-stats{display:none!important}
body.hud-wide .viewport:has(.overlay:not([hidden])) :is(#hud-stats,#hud-left-bottom,#hud-right-bottom){visibility:hidden}

/* score */
body.hud-wide #hud-left-top>div{padding:0}
body.hud-wide #hud-left-top span{display:block;font-size:10px;letter-spacing:3px;color:var(--hud-dim)}
body.hud-wide #hud-left-top #score{display:block;margin-top:2px;font:800 clamp(30px,5.2vh,50px)/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:3px;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 18px #d2f78a33}
/* pilot readouts */
body.hud-wide #hud-stats .spec{border-top:1px solid var(--hud-line);padding:9px 0}
body.hud-wide #hud-stats .spec:first-child{border-top:0}
body.hud-wide #hud-stats .spec>span{font-size:9px;letter-spacing:2px;color:var(--hud-dim);margin-bottom:5px}
body.hud-wide #hud-stats .spec b{font-size:12px;letter-spacing:1px;color:var(--hud-ink)}
body.hud-wide #hud-stats .hearts{font-size:clamp(15px,2.5vh,22px);letter-spacing:3px;color:var(--hud-lime);line-height:1}
body.hud-wide #hud-stats .levels{justify-content:flex-end;margin-top:7px}
body.hud-wide #hud-stats .levels i{flex:0 0 22px;height:5px;transform:skewX(-20deg)}
body.hud-wide #hud-stats .levels i.on{background:var(--hud-lime);box-shadow:0 0 6px #d2f78a88}

/* special core panel */
body.hud-wide #hud-left .super-control{position:static;width:auto;left:auto;bottom:auto;display:block}
body.hud-wide #hud-left #super{display:block;width:100%;height:auto;min-height:46px;padding:7px 10px;border:1px solid #6f7f63;border-radius:6px 6px 0 0;background:#0e2427d9;color:#cfd9c9;font-size:12px;letter-spacing:1px;line-height:1.25;text-align:right}
body.hud-wide #hud-left #super small{display:block;font-size:9px;letter-spacing:.5px;color:var(--hud-dim);margin-top:3px}
body.hud-wide #hud-left #super[data-state="ready"]{border-color:var(--hud-gold);color:#fff1c6;background:#2f3a22e0}
body.hud-wide #hud-left #super[data-state="active"]{border-color:#fff1c6;color:#fff;background:#445026e6}
body.hud-wide #hud-left .energy-track{height:4px;border-radius:0 0 3px 3px;background:#1d3533;overflow:hidden}
body.hud-wide #hud-left .energy-track i{background:linear-gradient(90deg,#ffb95a,var(--hud-gold));box-shadow:0 0 8px #ffd98a88}
body.hud-wide #hud-left .core-tiers{display:flex;gap:6px;margin-top:8px}
body.hud-wide #hud-left .core-tiers button{flex:1;height:44px;min-height:44px;padding:4px 2px;border:1px solid #3e5956;border-radius:6px;background:#0d2124cc;color:#8ca6a0;font-size:15px;font-weight:800;line-height:1.05}
body.hud-wide #hud-left .core-tiers button small{display:block;font-size:8px;font-weight:600;letter-spacing:.4px;margin-top:3px}
body.hud-wide #hud-left .core-tiers button:not(:disabled){background:#3a4422;border-color:var(--hud-gold);color:#fff3c9;box-shadow:0 0 12px #ffd98a44}

/* right column: pause/exit on top, mini / bomb / focus at the bottom */
body.hud-wide #hud-right-top{display:flex;gap:8px}
body.hud-wide #hud-right-top :is(#pause,#fullscreen){position:static;display:block;margin:0;min-width:48px;min-height:40px;padding:6px 10px;border:1px solid #46625f;border-radius:6px;background:#0f2629e0;color:#d8ebe3;font-size:12px;letter-spacing:1px;pointer-events:auto}
body.hud-wide #hud-right #mini-dock,body.hud-wide #hud-right #touch-bomb,body.hud-wide #hud-right .arsenal{position:static;width:100%;left:auto;right:auto;bottom:auto;margin:0}
body.hud-wide #hud-right #mini-dock{display:block;height:auto;min-height:48px;border-radius:6px;background:#11303cd9;font-size:11px}
body.hud-wide #hud-right #mini-dock>span,body.hud-wide #hud-right #mini-dock small{font-size:10px}
body.hud-wide #hud-right #touch-bomb{display:block;height:72px;min-height:72px;border-radius:6px;border:1px solid #ffe0a5;background:linear-gradient(#e2b273,#c98e49);color:#1b1f16;font-size:20px;font-weight:900;letter-spacing:3px;box-shadow:inset 0 1px #ffffff66,0 0 18px #ffb95a33}
body.hud-wide #hud-right #touch-bomb small{display:block;font-size:10px;letter-spacing:1.5px;font-weight:700;margin-top:2px}
body.hud-wide #hud-right #touch-bomb:disabled{background:#1d3131;border-color:#445c59;color:#8aa29d;box-shadow:none}
body.hud-wide #hud-right .arsenal{display:flex}
body.hud-wide #hud-right .loadout-lock{display:none}
body.hud-wide #hud-right #focus{flex:1;height:58px;min-height:58px;border-radius:6px;border:1px solid #56787e;background:#12303ad9;color:#d8f3ee;font-size:12px;font-weight:800;letter-spacing:1px}
body.hud-wide #hud-right #focus small{display:block;font-size:9px;margin-top:2px}
body.hud-wide #hud-right #focus[aria-pressed="true"]{background:#a3e1dc;border-color:#c5fbef;color:#173535}
@media(pointer:fine){
 body.hud-wide #hud-right #touch-bomb:after{content:'SPACE';display:block;font-size:8px;letter-spacing:2px;opacity:.6;margin-top:3px}
 body.hud-wide #hud-right #focus:after{content:'SHIFT';display:block;font-size:8px;letter-spacing:2px;opacity:.55;margin-top:2px}
}
/* in-canvas top line stays small; boss bar gets the full top edge */
body.hud-wide .hud{padding:12px 16px;background:linear-gradient(#06171799,transparent)}
body.hud-wide .viewport #boss-ui{top:12px;left:16px;right:16px}

/* short wide screens (landscape phones, 720p) */
@media(max-height:560px){
 body.hud-wide .hud-side{gap:6px;padding:10px 0 8px}
 body.hud-wide #hud-left-top #score{font-size:26px;letter-spacing:2px}
 body.hud-wide #hud-left-top span{font-size:8px}
 body.hud-wide #hud-stats .spec{padding:4px 0}
 body.hud-wide #hud-stats .spec>span{font-size:8px;margin-bottom:2px}
 body.hud-wide #hud-stats .spec b{font-size:10px}
 body.hud-wide #hud-stats .hearts{font-size:13px}
 body.hud-wide #hud-stats .levels{margin-top:4px}
 body.hud-wide #hud-left #super{min-height:34px;padding:4px 8px;font-size:10px}
 body.hud-wide #hud-left #super small{font-size:8px;margin-top:1px}
 body.hud-wide #hud-left .core-tiers{margin-top:5px}
 body.hud-wide #hud-left .core-tiers button{height:40px;min-height:40px;font-size:13px}
 body.hud-wide .hud-side-bottom{gap:6px}
 body.hud-wide #hud-right #touch-bomb{height:52px;min-height:52px;font-size:16px}
 body.hud-wide #hud-right #touch-bomb:after{display:none}
 body.hud-wide #hud-right :is(#mini-dock,#focus){min-height:44px;height:44px}
 body.hud-wide #hud-right #focus:after{display:none}
 body.hud-wide #hud-right-top :is(#pause,#fullscreen){min-height:44px}
}

/* ---------- Portrait phones: one thin, translucent control strip ---------- */
@media(max-width:600px) and (max-aspect-ratio:3/4){
 :root body .cockpit .viewport .hud #score{font-size:19px}
 :root body .cockpit .viewport #boss-ui{left:94px}
 :root body .cockpit .viewport .mobile-stats{opacity:.8}
 :root body .cockpit .viewport #toast{top:82px!important;font-size:10px!important;letter-spacing:1px!important;max-width:94%}
 :root body .cockpit .viewport #super[data-state="ready"]{border-color:#d6bd78;color:#fff0be;background:#354132c0}
 :root body .cockpit .viewport #super[data-state="active"]{border-color:#dfc886;color:#fff0be;background:#374731c0}
 :root body .cockpit .viewport .super-control{left:8px;bottom:calc(6px + env(safe-area-inset-bottom,0px));width:calc(100% - 200px)}
 :root body .cockpit .viewport #super{display:flex;align-items:center;justify-content:space-between;gap:6px;height:22px;min-height:22px;padding:0 8px;border-radius:8px 8px 0 0;font-size:10px;line-height:1;background:#0c2226a0;white-space:nowrap;overflow:hidden}
 :root body .cockpit .viewport #super small{margin:0;font-size:8px;overflow:hidden;text-overflow:ellipsis}
 :root body .cockpit .viewport .energy-track{height:3px}
 :root body .cockpit .viewport .core-tiers{gap:4px;margin-top:3px}
 :root body .cockpit .viewport .core-tiers button{height:44px;min-height:44px;padding:2px;font-size:13px;border-radius:8px;background:#0c222699}
 :root body .cockpit .viewport .core-tiers button small{font-size:7px;margin-top:2px}
 :root body .cockpit .viewport .core-tiers button:not(:disabled){background:#39432ad0}
 :root body .cockpit .viewport #mini-dock,:root body .cockpit .viewport #touch-bomb,:root body .cockpit .viewport .arsenal{bottom:calc(6px + env(safe-area-inset-bottom,0px))!important;width:56px!important;height:48px!important;min-height:48px!important;min-width:0!important;padding:2px!important}
 :root body .cockpit .viewport #mini-dock{right:128px!important;background:#12303c99;border-radius:10px}
 :root body .cockpit .viewport #mini-dock>span,:root body .cockpit .viewport #mini-dock small{font-size:8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
 :root body .cockpit .viewport #touch-bomb{right:68px!important;font-size:12px;background:#d9a869b0}
 :root body .cockpit .viewport #touch-bomb small{font-size:8px;letter-spacing:.5px}
 :root body .cockpit .viewport #touch-bomb:disabled{background:#24353599}
 :root body .cockpit .viewport .arsenal{right:8px!important;left:auto}
 :root body .cockpit .viewport #focus{height:48px;min-height:48px;padding:2px;font-size:11px;background:#17333a99}
 :root body .cockpit .viewport #focus small{font-size:8px}
}

/* v2 mobile fixes: toast never overlaps the menu / game-over overlay */
body:has(#overlay:not([hidden])) #toast{display:none!important}
/* Short landscape phones: compact the menu so START fits without scrolling */
@media (max-height:500px) and (orientation:landscape){
 :root body #overlay h1,:root body #overlay #overlay-title{font-size:30px!important;line-height:1!important;margin:4px 0!important}
 :root body #overlay #overlay-desc{font-size:10px!important;margin:2px 0 4px!important;line-height:1.3!important}
 :root body #overlay #ship-preview{width:44px!important;height:44px!important}
 :root body #overlay #ship-desc,:root body #overlay #difficulty-desc,:root body #overlay .eyebrow:not(#overlay-kicker){display:none!important}
 :root body #overlay .ship-picker,:root body #overlay .difficulty-picker{margin:2px 0!important;gap:6px!important}
 :root body #overlay select{padding:4px 8px!important;min-height:30px!important;font-size:12px!important}
 :root body #overlay button{min-height:30px!important;padding:6px 10px!important;font-size:11px!important;margin-top:4px!important;margin-bottom:0!important}
 :root body #overlay .game-menu-actions{gap:4px!important;margin:2px 0!important}
 :root body #overlay #overlay-hint,:root body #overlay label[for="steering-choice"],:root body #overlay #steering-choice{display:none!important}
}

/* Wingmen readout (replaces the old CALL MINI / DISMANTLE button; non-interactive) */
#mini-dock.wing-readout{pointer-events:none;cursor:default;opacity:1;text-align:center;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;letter-spacing:.8px;line-height:1.15;border-color:var(--wing-color,#8ac8d8);color:#fff1cf}
#mini-dock.wing-readout>span{display:block;white-space:nowrap}
#mini-dock.wing-readout small{color:var(--wing-color,#cef5ff)}
#mini-dock.wing-readout[data-level="0"]{opacity:.55;border-color:#46625f;color:#9fb6b0}
#mini-dock.wing-readout[data-level="0"] small{color:#9fb6b0}
.viewport:has(.overlay:not([hidden])) #mini-dock.wing-readout{display:none}