/* === FIXED-VIEWPORT HUD v0.4 === */
:root{--hudpad:8px;--topbarh:46px}
html,body{height:100%;width:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{height:100vh;height:100dvh;display:flex;flex-direction:column;position:fixed;inset:0;touch-action:pan-x pan-y}
.topbar{width:100%;max-width:none;min-height:0;height:var(--topbarh);flex:0 0 var(--topbarh);padding:4px 14px;z-index:5}
.topbar .brand{font-size:15px}.topbar .brand-glyph{font-size:23px}.topbar .currency{padding:3px 9px;font-size:13px;min-width:auto}.topbar .currency span{font-size:16px}.topbar .icon-btn{padding:5px 9px}
#app{width:100%;max-width:1450px;margin:0 auto;min-height:0;height:auto;flex:1;overflow:hidden;padding:var(--hudpad)}
.screen,.home{width:100%;height:100%;min-height:0;overflow:hidden}
.panel{border-radius:12px}
/* global compact screens */
.compact-screen{display:flex;flex-direction:column;gap:6px}
.compact-screen .screen-top{height:32px;min-height:32px;margin:0;padding:0 4px;justify-content:space-between}
.screen-top h2{font-size:clamp(15px,1.8vw,22px);margin:0;font-weight:1000;color:#a9ecff;letter-spacing:.7px}
.mini-back{display:flex;align-items:center;justify-content:center;width:33px;height:31px;min-width:33px;border:1px solid #4b99c8;border-radius:8px;background:linear-gradient(#1b6195,#092849);font-size:30px;line-height:1}
.compact-screen .tag{padding:4px 9px;font-size:11px}
/* HOME */
.compact-home{position:relative;display:grid;grid-template-columns:minmax(290px,390px) minmax(0,1fr);gap:12px;margin:0}
.compact-home .home-menu{grid-column:1;grid-row:1;min-height:0;padding:clamp(12px,1.8vw,24px);display:flex;flex-direction:column;justify-content:center;z-index:2;gap:9px}
.compact-home .eyebrow{font-size:clamp(9px,1.1vw,12px);letter-spacing:2px}
.compact-home .game-title{font-size:clamp(30px,3.5vw,52px);line-height:1.0;margin:0 0 3px}
.compact-home .menu-actions{margin:0;display:grid;gap:8px;min-height:0}
.compact-home .menu-actions .btn{font-size:clamp(13px,1.45vw,17px);min-height:0;height:clamp(43px,8vh,65px);padding:4px 15px;border-radius:9px}
.compact-home .menu-actions .emoji{font-size:clamp(23px,2vw,29px)}
.compact-home .menu-actions small{font-size:11px}
.home-kpis{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;color:#bde5ff;font-size:11px;font-weight:800}
.compact-home .home-visual{grid-column:2;grid-row:1;min-height:0;height:100%;padding:10px;overflow:hidden}
.compact-home .home-visual:before{display:none}
.compact-home .hero-planet{width: min(55vw,480px);height:min(55vw,480px);right:-8%;top:-10%}
.compact-home .home-ship{width:min(88%,610px);max-height:78%;object-fit:contain;z-index:2}
.hero-glow{position:absolute;bottom:5%;left:30%;width:45%;height:28%;background:#008bff55;filter:blur(35px)}
/* CAREER */
.campaign-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 14px;min-height:34px}
.campaign-bar strong{color:#fadd94;font-size:clamp(12px,1.5vw,16px)}
.campaign-bar span{font-size:12px;color:#aacbec}
.compact-map{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(4px,.8vw,12px)}
.compact-map .sector{min-height:0;min-width:0;padding:5px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;overflow:hidden;background:linear-gradient(145deg,#0b2854ed,#07172fe6);border:1px solid #39689a;border-radius:12px}
.compact-map .sector .planet{width:clamp(30px,7vh,78px);height:clamp(30px,7vh,78px);flex:0 1 auto;border-radius:50%;background:radial-gradient(circle at 30% 26%,#74e6f1,#276ca7 52%,#101d4c 76%);border:2px solid #69cfff9e;box-shadow:0 0 20px #278fe899,inset -9px -9px 15px #0017389e}
.compact-map .sector:nth-child(3n) .planet{background:radial-gradient(circle at 31% 25%,#eaf4ab,#6c9d79 52%,#173c61 76%)}
.compact-map .sector:nth-child(2n) .planet{background:radial-gradient(circle at 31% 25%,#ffccad,#a84c75 50%,#3b1b50 76%)}
.compact-map .sector.boss .planet{display:flex;align-items:center;justify-content:center;font-size:28px;background:radial-gradient(circle,#b9285f,#4b143d 64%,#170e29);border-color:#ff6d85}
.compact-map .sector b{font-size:clamp(11px,1.15vw,15px);text-align:center;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.compact-map .sector small{font-size:clamp(9px,1vw,12px);font-weight:1000;color:#fadc8b}
.compact-map .sector.current{border:2px solid #63e8ff;box-shadow:0 0 15px #349eff66}.compact-map .sector.completed{border-color:#ffb95f}.compact-map .sector.locked{opacity:.52;filter:saturate(.5)}
/* HANGAR */
.hangar-v4{flex:1;min-height:0;display:grid;grid-template-columns:minmax(190px,310px) minmax(0,1fr);gap:8px}
.fleet-panel,.ship-detail{min-height:0;overflow:hidden}
.fleet-panel{display:flex;flex-direction:column;gap:8px;padding:10px}
.fleet-select{flex:1;min-height:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:6px}
.fleet-chip{display:flex;align-items:center;gap:8px;background:#0a2854;border:1px solid #315b88;border-radius:9px;padding:4px;font-size:clamp(10px,1vw,14px);min-height:0}
.fleet-chip img{width:41%;height:100%;object-fit:contain;min-height:0}.fleet-chip.active{border:2px solid #e9b64b;background:#174577}.fleet-chip.unavailable{opacity:.54}
.ship-stats{display:flex;justify-content:space-around;gap:2px;padding:8px 3px;background:#05162e;border:1px solid #2c5a88;border-radius:8px;font-weight:900;font-size:clamp(10px,1.1vw,14px)}
.ship-detail{display:flex;flex-direction:column;gap:4px;padding:8px 12px}
.ship-detail-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:clamp(13px,1.5vw,20px);color:#ffde88}
.ship-portrait{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(ellipse,#126cb46e,transparent 70%);overflow:hidden}
.ship-portrait img{max-height:100%;width:90%;object-fit:contain;animation:float 4s ease-in-out infinite}
.upgrade-list{flex:0 0 auto;display:grid;gap:4px}
.upgrade-row{display:flex;gap:10px;align-items:center;min-height:43px;background:#071d42;border:1px solid #28567d;border-radius:8px;padding:4px 8px}
.upgrade-symbol{font-size:clamp(16px,2vw,23px)}.upgrade-text{flex:1;min-width:0}.upgrade-text b{display:block;font-size:clamp(11px,1.1vw,15px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upgrade-text small{font-size:10px;color:#96b7d5}
.upgrade-row .btn{min-height:0;height:33px;padding:3px 12px;font-size:12px;box-shadow:none}
.hangar-foot{display:flex;gap:8px;flex:0 0 auto}.hangar-foot .btn{flex:1;min-height:0;height:35px;padding:2px 8px;font-size:12px;box-shadow:none}
/* BATTLE */
.battle-screen{min-height:0}.compact-battle{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,295px);gap:8px;align-items:stretch;max-width:1050px;width:100%;margin:0 auto}
.compact-battle .battle-left{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.compact-battle .battle-head{flex:0 0 auto;padding:6px 10px}
.compact-battle .fleets{grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);gap:6px}
.compact-battle .ship-stage{height:clamp(55px,12vh,115px);background:radial-gradient(ellipse at center,#1567a066,transparent 72%)}
.compact-battle .fleet-name{font-size:clamp(9px,1vw,12px);margin-bottom:3px}.compact-battle .fleet-name b{overflow:hidden;text-overflow:ellipsis;max-width:56%;white-space:nowrap}
.compact-battle .life-text{font-size:clamp(9px,1vw,12px)}
.compact-battle .versus b{font-size:clamp(20px,3.5vh,34px)}.compact-battle .versus small{font-size:10px}
.compact-battle .hpbar{height:10px}.compact-battle .shieldbar{height:5px;margin-top:2px}
.compact-battle .turn-ribbon{flex:0 0 auto;padding:4px;font-size:11px;letter-spacing:0}
.compact-battle .board-frame{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px;overflow:hidden}
.compact-battle .canvas-wrap{flex:0 0 auto;max-height:100%;max-width:100%;margin:auto}
.compact-battle .battle-right{min-height:0;display:flex;flex-direction:column;gap:9px;padding:10px;overflow:hidden}
.compact-battle .energy-card{flex:0 0 auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:#ffd985;font-weight:900}
.compact-battle .energy-card .energy-icon{font-size:24px}.compact-battle .energy-n{font-size:22px}
.compact-battle .energybar{flex-basis:100%;height:7px;margin:0}
.compact-battle .abilities{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;flex:1;min-height:0}
.compact-battle .ability{min-height:0;height:100%;display:flex;align-items:center;gap:8px;justify-content:flex-start;padding:5px 10px;border-radius:9px}
.compact-battle .ability img{width:clamp(33px,5.5vh,61px);height:clamp(33px,5.5vh,61px);object-fit:contain}
.compact-battle .ability span{display:flex;flex-direction:column;gap:4px}.compact-battle .ability strong{font-size:clamp(11px,1.1vw,14px)}.compact-battle .ability small{font-size:12px;font-weight:900;color:#ffe3a3}
.compact-battle .battle-tools{flex:0 0 auto;display:flex;gap:6px;justify-content:end}
.compact-battle .battle-tools button{width:35px;height:32px;background:linear-gradient(#17588c,#0d2856);border:1px solid #5fa9d6;border-radius:8px;font-weight:900;font-size:19px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.overlay .dialog{max-height:calc(100dvh - 26px);overflow:auto}.info-dialog .modal-feed{max-height:35vh;overflow:auto;font-size:13px;text-align:left}.info-dialog .modal-feed p{padding:5px;border-bottom:1px solid #2e4f7a}
/* HELP */
.compact-help{flex:1;min-height:0;padding:clamp(9px,2vh,22px);display:flex;flex-direction:column;justify-content:space-evenly;gap:5px;overflow:hidden;font-size:clamp(11px,1.3vw,17px)}
.compact-help p{margin:0}.compact-help .help-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.compact-help .help-icon{justify-content:center;padding:5px;display:flex;min-height:0}.compact-help .help-icon img{height:clamp(30px,8vh,65px);width:clamp(30px,8vh,65px)}
.compact-help .btn{min-height:40px;align-self:center}
/* MOBILE PORTRAIT */
@media(max-width:700px) and (orientation:portrait){
 :root{--topbarh:42px;--hudpad:5px}
 .topbar{padding:2px 7px}.topbar .brand{font-size:11px;letter-spacing:-.3px}.topbar .brand small{display:none}.topbar .brand-glyph{font-size:17px}.topbar .currency{padding:3px 5px;font-size:11px;gap:3px}.topbar .currency span{font-size:12px}.topbar .top-currency{gap:4px}
 .compact-home{display:block;position:relative}
 .compact-home .home-visual{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:flex-start;padding-top:5%;opacity:.9}
 .compact-home .home-visual .hero-planet{width:min(80vw,330px);height:min(80vw,330px);right:-20%;top:-9%}
 .compact-home .home-ship{max-height:44%;width:95%;align-self:center}
 .compact-home .home-menu{position:absolute;bottom:0;left:0;right:0;width:100%;max-width:none;height:auto;max-height:100%;padding:12px 15px;gap:7px;justify-content:flex-end;background:linear-gradient(0deg,rgba(4,17,46,.99),rgba(8,32,72,.96))}
 .compact-home .eyebrow{font-size:9px}.compact-home .game-title{font-size:clamp(25px,8vw,38px);line-height:1.0}.compact-home .menu-actions{gap:5px}.compact-home .menu-actions .btn{height:clamp(38px,6.4vh,51px);min-height:0;font-size:14px;padding:2px 11px}.compact-home .menu-actions .emoji{font-size:22px}.compact-home .home-kpis{font-size:10px}
 .campaign-bar{padding:4px 7px;min-height:30px}.campaign-bar span{display:none}
 .compact-map{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:4px}
 .compact-map .sector .planet{width:clamp(27px,6vh,46px);height:clamp(27px,6vh,46px)}.compact-map .sector b{font-size:10px}.compact-map .sector small{font-size:10px}
 .hangar-v4{grid-template-columns:minmax(0,1fr);grid-template-rows:98px minmax(0,1fr);gap:5px}
 .fleet-panel{padding:5px;gap:4px}.fleet-select{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:4px}.fleet-chip{display:flex;flex-direction:column;gap:1px;text-align:center;font-size:9px;padding:2px}.fleet-chip img{height:32px;width:95%}.ship-stats{padding:4px;font-size:11px}
 .ship-detail{padding:5px 8px;gap:2px}.ship-detail-top{font-size:14px}.ship-portrait{flex:1;min-height:0}.ship-portrait img{max-height:100%;width:80%}
 .upgrade-list{gap:3px}.upgrade-row{min-height:39px;padding:2px 6px}.upgrade-symbol{font-size:17px}.upgrade-text b{font-size:11px}.upgrade-row .btn{height:29px;padding:2px 8px;font-size:11px}
 .hangar-foot .btn{height:33px;font-size:11px}
 .compact-battle{display:flex;flex-direction:column;gap:4px}
 .compact-battle .battle-left{flex:1;min-height:0}
 .compact-battle .battle-head{padding:4px 7px}.compact-battle .fleets{grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);gap:2px}
 .compact-battle .ship-stage{height:clamp(54px,11vh,100px)}
 .compact-battle .fleet-name{font-size:9px}.compact-battle .versus b{font-size:25px}
 .compact-battle .turn-ribbon{padding:3px 0;font-size:10px}
 .compact-battle .board-frame{padding:3px}
 .compact-battle .battle-right{flex:0 0 69px;min-height:69px;display:flex;flex-direction:row;gap:4px;padding:4px}
 .compact-battle .energy-card{width:56px;flex:0 0 56px;align-content:center;justify-content:center;gap:0}.compact-battle .energy-icon{font-size:15px}.compact-battle .energy-n{font-size:15px}.compact-battle .energy-card small{font-size:10px}.compact-battle .energybar{width:90%;height:5px;flex-basis:90%}
 .compact-battle .abilities{flex:1;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr;gap:3px}
 .compact-battle .ability{display:flex;flex-direction:column;justify-content:center;gap:0;padding:2px 0;min-width:0}.compact-battle .ability img{width:33px;height:33px}.compact-battle .ability span{gap:0}.compact-battle .ability strong{display:none}.compact-battle .ability small{font-size:10px}
 .compact-battle .battle-tools{display:flex;flex-direction:column;gap:3px}.compact-battle .battle-tools button{width:27px;height:27px;font-size:14px}
 .compact-help .help-icons{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.compact-help .help-icon{padding:2px;gap:3px}.compact-help .help-icon img{height:clamp(25px,6vh,45px);width:clamp(25px,6vh,45px)}.compact-help .help-icon b{font-size:11px}
}
/* MOBILE LANDSCAPE: battle board left, icon rail right */
@media(max-height:500px) and (orientation:landscape){
 :root{--topbarh:31px;--hudpad:3px}
 .topbar{padding:0 8px}.topbar .brand{font-size:11px}.topbar .brand-glyph{font-size:16px}.topbar .brand small{display:none}.topbar .currency{padding:1px 5px;font-size:11px}.topbar .currency span{font-size:13px}.topbar .icon-btn{padding:2px 6px}
 .compact-screen{gap:2px}.compact-screen .screen-top{height:24px;min-height:24px}.mini-back{height:23px;width:27px;min-width:27px;font-size:23px}.screen-top h2{font-size:14px}
 .compact-home{grid-template-columns: minmax(240px,39%) minmax(0,1fr)}.compact-home .home-menu{padding:6px 13px;gap:2px}.compact-home .game-title{font-size:25px;margin:0}.compact-home .eyebrow{font-size:8px}.compact-home .menu-actions{gap:3px}.compact-home .menu-actions .btn{height:clamp(32px,8.5vh,39px);padding:1px 10px;font-size:12px}.compact-home .menu-actions .emoji{font-size:19px}.compact-home .menu-actions small{display:none}.compact-home .home-kpis{font-size:9px}.compact-home .home-visual{min-height:0}
 .campaign-bar{padding:2px 12px;min-height:25px}.compact-map{gap:3px}.compact-map .sector{padding:2px;gap:0}.compact-map .sector .planet{width:clamp(23px,8vh,43px);height:clamp(23px,8vh,43px)}.compact-map .sector b{font-size:10px}.compact-map .sector small{font-size:10px}
 .hangar-v4{grid-template-columns:minmax(180px,30%) minmax(0,1fr)}.fleet-panel{gap:3px;padding:5px}.fleet-select{gap:3px}.fleet-chip{font-size:10px}.ship-stats{font-size:10px;padding:5px 1px}.ship-detail{padding:3px 7px;gap:2px}.ship-detail-top{font-size:12px}.ship-portrait{flex:1;min-height:0}.upgrade-row{min-height:33px;padding:1px 5px}.upgrade-list{gap:2px}.upgrade-row .btn{height:27px}.hangar-foot .btn{height:28px}
 .compact-battle{grid-template-columns:minmax(0,1fr) 150px;gap:4px}
 .compact-battle .battle-head{padding:2px 7px}.compact-battle .ship-stage{height:clamp(36px,12vh,58px)}.compact-battle .fleet-name{font-size:9px}.compact-battle .life-text{font-size:9px}.compact-battle .hpbar{height:7px}.compact-battle .shieldbar{height:4px;margin-top:1px}.compact-battle .versus b{font-size:20px}.compact-battle .versus small{font-size:8px}.compact-battle .turn-ribbon{padding:2px;font-size:9px}.compact-battle .board-frame{padding:2px}
 .compact-battle .battle-right{gap:3px;padding:4px}.compact-battle .energy-card .energy-icon{font-size:15px}.compact-battle .energy-n{font-size:16px}.compact-battle .energybar{height:5px}
 .compact-battle .abilities{gap:3px}.compact-battle .ability{padding:1px 5px;gap:3px}.compact-battle .ability img{width:31px;height:31px}.compact-battle .ability strong{display:none}.compact-battle .ability small{font-size:11px}.compact-battle .battle-tools button{height:26px;width:30px}
 .compact-help{font-size:10px;padding:5px}.compact-help .help-icons{grid-template-columns:repeat(6,1fr);gap:3px}.compact-help .help-icon{flex-direction:column;gap:1px;padding:2px}.compact-help .help-icon img{height:34px;width:34px}.compact-help .help-icon b{font-size:9px}.compact-help .btn{height:30px;min-height:30px}
}
/* ultra-short devices: reduce fleet artwork to prioritize grid */
@media(max-height:640px) and (orientation:portrait){.compact-battle .ship-stage{height:50px}.compact-battle .fleet-name{margin-bottom:1px}.compact-home .game-title{font-size:25px}.compact-home .home-kpis{display:none}.compact-home .menu-actions .btn{height:39px}.compact-home .menu-actions small{display:none}}