@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap');
:root{--cyan:#51eaff;--blue:#1b6fff;--amber:#ffc857;--red:#ff326d;--ink:#02050d;--panel:rgba(5,14,31,.78);--line:rgba(106,224,255,.25)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02040b;color:#eafcff;font-family:Rajdhani,system-ui,sans-serif;touch-action:none;user-select:none}button{font:inherit;color:inherit}#game-shell,#game{position:fixed;inset:0;width:100%;height:100%}#game{background:#030611;touch-action:none}.hidden{display:none!important}
#hud{position:fixed;z-index:4;left:0;right:0;top:0;padding:max(10px,env(safe-area-inset-top)) 12px 8px;display:grid;grid-template-columns:74px 1fr 84px;gap:12px;align-items:center;background:linear-gradient(180deg,rgba(1,5,14,.96),rgba(1,5,14,.55),transparent);pointer-events:none}.hud-block small,.hud-center small{display:block;color:#7595a5;font:9px Space Mono;letter-spacing:1.5px}.hud-block strong{font:700 18px Space Mono;color:var(--cyan)}.hud-block.right{text-align:right}.hud-block.right strong{color:white;font-size:14px}.hud-center{text-align:center}.meter{height:4px;background:#172230;margin-top:5px;transform:skewX(-18deg)}.meter i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--cyan),var(--amber),var(--red));box-shadow:0 0 9px var(--red);transition:width .2s}
#objective{position:fixed;z-index:5;top:72px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 20px);overflow:hidden;text-overflow:ellipsis;padding:6px 14px;background:rgba(2,8,20,.72);border:1px solid var(--line);clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);white-space:nowrap;pointer-events:none}#objective b{color:var(--amber);font:11px Space Mono;margin-right:8px}#objective span{font-size:12px;color:#a8c3d2}
#minimap{position:fixed;z-index:5;right:8px;top:118px;width:120px;height:80px;border:1px solid var(--line);background:rgba(1,6,15,.72);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);pointer-events:none}
#fleet-panel{position:fixed;z-index:6;left:8px;bottom:calc(8px + env(safe-area-inset-bottom));display:flex;gap:3px;max-width:calc(100vw - 145px);height:64px}#ship-cards{display:flex;gap:3px}.fleet-button,.ship-card{position:relative;min-width:34px;width:34px;height:60px;padding:5px 2px;background:var(--panel);border:1px solid #1a3850;border-radius:2px;overflow:hidden}.fleet-button{min-width:42px;width:42px}.fleet-button.active,.ship-card.active{border-color:var(--cyan);box-shadow:inset 0 0 14px rgba(81,234,255,.2),0 0 8px rgba(81,234,255,.15)}.fleet-button b{font:12px Space Mono}.fleet-button small{display:block;font-size:8px;color:#7d9baa}.ship-card img{width:24px;height:35px;object-fit:contain;filter:drop-shadow(0 0 4px var(--cyan))}.ship-card .hp{position:absolute;left:3px;right:3px;bottom:3px;height:3px;background:#18242d}.ship-card .hp i{display:block;height:100%;background:var(--cyan)}.ship-card.dead{opacity:.28;filter:grayscale(1)}
#abilities{position:fixed;z-index:6;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));display:flex;gap:6px}.ability{width:64px;height:64px;padding:3px;background:rgba(7,14,28,.9);border:1px solid #3a4554;position:relative;overflow:hidden}.ability .icon{display:block;font-size:20px;line-height:22px}.ability b{display:block;font-size:9px;letter-spacing:.5px}.ability small{display:block;font:7px Space Mono;color:#86a2b4}.ability i{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.72);transition:height .1s}.ability.ready{border-color:var(--amber);box-shadow:0 0 10px rgba(255,200,87,.2)}.ability.shield.ready{border-color:var(--cyan)}.ability:disabled{opacity:.48}
.icon-button{position:fixed;z-index:7;left:10px;top:76px;width:34px;height:34px;border:1px solid var(--line);background:rgba(2,8,18,.72);font:700 14px Space Mono}#toast{position:fixed;z-index:8;left:50%;bottom:98px;transform:translate(-50%,10px);padding:8px 16px;background:#071425;border:1px solid var(--cyan);font:11px Space Mono;letter-spacing:1px;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}
.screen{position:fixed;z-index:20;inset:0;display:none;align-items:center;justify-content:center;padding:24px;background:#030712}.screen.active{display:flex}.screen.modal{background:rgba(1,4,10,.86);backdrop-filter:blur(8px)}.nebula{position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(134,28,100,.35),transparent 36%),radial-gradient(circle at 20% 78%,rgba(19,101,142,.28),transparent 38%),linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.8)),url('assets/fleet-sprite-atlas.png') center 12%/min(900px,120vw) auto no-repeat;filter:saturate(.7);opacity:.7}.start-content,.tutorial-card,.modal-card{position:relative;width:min(430px,100%);text-align:center}.start-content{padding-top:min(25vh,170px)}.eyebrow{font:10px Space Mono;color:var(--cyan);letter-spacing:2px}h1{font-size:clamp(52px,17vw,82px);line-height:.8;margin:10px 0 0;letter-spacing:-4px;text-shadow:0 0 30px rgba(81,234,255,.35)}h1 span{color:var(--cyan)}.subtitle{margin:10px 0 22px;font:700 15px Space Mono;letter-spacing:8px;color:#98adbc}.signal{display:flex;align-items:center;gap:10px;color:var(--red);font:10px Space Mono;letter-spacing:2px}.signal i{height:1px;background:linear-gradient(90deg,transparent,var(--red));flex:1}.signal i:last-child{transform:scaleX(-1)}.brief{font-size:16px;line-height:1.35;color:#a9bdc8;margin:13px auto 17px;max-width:360px}.fleet-size label{display:block;font:9px Space Mono;letter-spacing:2px;color:#6f8899;margin-bottom:7px}.fleet-size>div{display:flex;justify-content:center;gap:8px}.fleet-size button{width:72px;height:48px;background:rgba(4,12,27,.85);border:1px solid #254256;font:700 18px Space Mono}.fleet-size button small{display:block;font:7px Space Mono;color:#718b9b;margin-top:2px}.fleet-size button.selected{border-color:var(--cyan);color:var(--cyan);box-shadow:inset 0 0 18px rgba(81,234,255,.12)}.primary{width:100%;height:54px;margin-top:18px;border:1px solid var(--cyan);background:linear-gradient(90deg,#087e9b,#0ba4c3);font:700 15px Space Mono;letter-spacing:2px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:0 0 25px rgba(81,234,255,.18)}.primary span{float:right;font-size:24px}.tip{font:8px Space Mono;color:#647a88;letter-spacing:1px}.tutorial-card,.modal-card{padding:28px 22px;background:rgba(4,12,26,.95);border:1px solid var(--line);clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}h2{font-size:30px;margin:8px 0 18px}.tutorial-card>p:not(.eyebrow){color:#a9bdc8;line-height:1.6}.gesture-demo{height:120px;position:relative;margin:5px 20px}.ship-dot{position:absolute;left:15%;top:55%;width:28px;height:48px;background:url('assets/sprites/human-scout.webp') center/contain no-repeat;transform:rotate(45deg)}.route{position:absolute;left:27%;top:58%;width:48%;border-top:1px dashed var(--cyan);transform:rotate(-15deg)}.tap-ring{position:absolute;right:12%;top:22%;width:46px;height:46px;border:2px solid var(--cyan);border-radius:50%;box-shadow:0 0 14px var(--cyan);animation:pulse 1.2s infinite}.secondary{width:100%;height:45px;margin-top:10px;border:1px solid #375064;background:transparent}.stats{display:flex;gap:8px;justify-content:center}.stats div{flex:1;border:1px solid #1e394f;padding:10px}.stats b{display:block;font:700 18px Space Mono;color:var(--cyan)}.stats small{font:8px Space Mono;color:#76909f}@keyframes pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.4);opacity:0}}
@media(min-width:700px){#fleet-panel{left:50%;transform:translateX(-50%);max-width:none}.ship-card{min-width:60px}#abilities{bottom:18px;right:18px}.start-content{padding-top:160px}.nebula{background-size:850px}.tutorial-card,.modal-card{padding:36px}}
@media(max-height:680px){.start-content{padding-top:15vh}.brief{margin:8px auto}.subtitle{margin-bottom:12px}.primary{margin-top:10px}.tip{margin:6px}.fleet-size button{height:42px}.fleet-panel{height:56px}}