*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#12304a;overscroll-behavior:none;touch-action:none;position:fixed;width:100%;
 font-family:"Arial Rounded MT Bold","Arial Black","Helvetica Neue",system-ui,sans-serif;font-weight:900;color:#fff}
#app{position:fixed;inset:0;overflow:hidden}
canvas#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
svg{display:block}
:root{--u:min(1vw,1.4vh)}
/* ---------- big block buttons ---------- */
.bb{display:flex;align-items:center;justify-content:center;gap:1.2em;background:#2ecc71;color:#fff;border-radius:calc(var(--u)*2.2);
 box-shadow:0 calc(var(--u)*1) 0 #1b8f4b,0 calc(var(--u)*1.6) calc(var(--u)*2) rgba(0,0,0,.35);padding:calc(var(--u)*2) calc(var(--u)*5);min-width:calc(var(--u)*14);min-height:calc(var(--u)*11)}
.bb:active{transform:translateY(calc(var(--u)*.8));box-shadow:0 calc(var(--u)*.2) 0 #1b8f4b}
.bb.blue{background:#3b82f6;box-shadow:0 calc(var(--u)*1) 0 #1e56b8,0 calc(var(--u)*1.6) calc(var(--u)*2) rgba(0,0,0,.35)}
.bb.orange{background:#f59e0b;box-shadow:0 calc(var(--u)*1) 0 #b36f00,0 calc(var(--u)*1.6) calc(var(--u)*2) rgba(0,0,0,.35)}
.bb.grey{background:#64748b;box-shadow:0 calc(var(--u)*1) 0 #3d4a5c}
.bb.red{background:#ef4444;box-shadow:0 calc(var(--u)*1) 0 #a31d1d}
.bb svg{width:calc(var(--u)*7);height:calc(var(--u)*7)}
.bb.small{min-height:calc(var(--u)*8);min-width:calc(var(--u)*8);padding:calc(var(--u)*1) calc(var(--u)*2.5);font-size:calc(var(--u)*3)}
.bb.small svg{width:calc(var(--u)*5);height:calc(var(--u)*5)}
.bb[disabled]{filter:grayscale(1) brightness(.7);pointer-events:none}
/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*3);
 padding:max(env(safe-area-inset-top),2vh) max(env(safe-area-inset-right),2vw) max(env(safe-area-inset-bottom),2vh) max(env(safe-area-inset-left),2vw);
 background:rgba(8,28,48,.55);text-align:center}
#home{background:linear-gradient(rgba(8,28,48,.25),rgba(8,28,48,.6))}
.logo{font-size:calc(var(--u)*10);line-height:.95;letter-spacing:.02em;text-shadow:0 calc(var(--u)*.7) 0 #1b4f8c,0 calc(var(--u)*1.2) calc(var(--u)*2) rgba(0,0,0,.4);color:#ffd93b}
.logo span{color:#7fe3ff}
.stats{display:flex;gap:calc(var(--u)*3);align-items:center;font-size:calc(var(--u)*5);flex-wrap:wrap;justify-content:center}
.chip{display:flex;align-items:center;gap:.4em;background:rgba(0,0,0,.35);border-radius:calc(var(--u)*2);padding:calc(var(--u)*.8) calc(var(--u)*2)}
.chip svg{width:calc(var(--u)*5);height:calc(var(--u)*5)}
.row{display:flex;gap:calc(var(--u)*3);align-items:center;justify-content:center;flex-wrap:wrap}
.corner{position:absolute;top:max(env(safe-area-inset-top),1.5vh);right:max(env(safe-area-inset-right),1.5vw)}
.cornerL{position:absolute;top:max(env(safe-area-inset-top),1.5vh);left:max(env(safe-area-inset-left),1.5vw)}
/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none}
#hud>*{pointer-events:auto}
#qwrap{position:absolute;top:max(env(safe-area-inset-top),1.2vh);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1);pointer-events:none}
#qpanel{display:flex;align-items:center;gap:calc(var(--u)*1.2);background:rgba(10,30,55,.72);padding:calc(var(--u)*1.2) calc(var(--u)*2);border-radius:calc(var(--u)*2.4);pointer-events:auto}
.tile{min-width:calc(var(--u)*9);padding:0 calc(var(--u)*1);height:calc(var(--u)*10);display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*8);border-radius:calc(var(--u)*1.4);
 background:#fff;color:#16324f;box-shadow:inset 0 calc(var(--u)*-.8) 0 rgba(0,0,0,.18),inset 0 calc(var(--u)*.5) 0 rgba(255,255,255,.9)}
.tile.op{background:transparent;color:#ffd93b;box-shadow:none;width:calc(var(--u)*6)}
.tile.q{background:#ffd93b;color:#7a4a00;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.12)}}
#qbtns{display:flex;gap:calc(var(--u)*1);margin-left:calc(var(--u)*1)}
#qbtns .bb{min-width:calc(var(--u)*7);min-height:calc(var(--u)*7);padding:0;border-radius:calc(var(--u)*1.6)}
#qbtns .bb svg{width:calc(var(--u)*4.5);height:calc(var(--u)*4.5)}
#progress{display:flex;gap:calc(var(--u)*.8);align-items:center;height:calc(var(--u)*3)}
.pb{width:calc(var(--u)*3);height:calc(var(--u)*3);background:rgba(255,255,255,.3);border-radius:calc(var(--u)*.5)}
.pb.on{background:#ffd93b;box-shadow:inset 0 calc(var(--u)*-.5) 0 rgba(0,0,0,.2)}
#bossbar{width:calc(var(--u)*38);height:calc(var(--u)*2.6);background:rgba(0,0,0,.5);border-radius:calc(var(--u)*1);overflow:hidden}
#bossfill{height:100%;background:#ef4444;width:100%;transition:width .4s}
#hint{display:grid;grid-template-columns:repeat(10,calc(var(--u)*3.6));gap:calc(var(--u)*.7);background:rgba(10,30,55,.6);padding:calc(var(--u)*1);border-radius:calc(var(--u)*1.5);pointer-events:none}
.hb{width:calc(var(--u)*3.6);height:calc(var(--u)*3.6);border-radius:calc(var(--u)*.6);font-size:calc(var(--u)*2.4);display:flex;align-items:center;justify-content:center;color:#fff;background:#3b82f6;box-shadow:inset 0 calc(var(--u)*-.5) 0 rgba(0,0,0,.25)}
.hb.b2{background:#f59e0b}.hb.slot{background:transparent;border:calc(var(--u)*.4) dashed rgba(255,255,255,.7);box-shadow:none}
.hb.gone{background:rgba(255,255,255,.12);box-shadow:none;position:relative}
.hb.gone:after{content:"✕";color:#ff8a8a;font-size:calc(var(--u)*2.6)}
.hb.on{background:#2ecc71;transform:scale(1.25);color:#fff}
.hb.slot.on{background:#2ecc71;border-color:#2ecc71}
#topL{position:absolute;top:max(env(safe-area-inset-top),1.2vh);left:max(env(safe-area-inset-left),1.2vw);display:flex;flex-direction:column;gap:calc(var(--u)*1.2);align-items:flex-start}
#topR{position:absolute;top:max(env(safe-area-inset-top),1.2vh);right:max(env(safe-area-inset-right),1.2vw);display:flex;flex-direction:column;gap:calc(var(--u)*1.2);align-items:flex-end;font-size:calc(var(--u)*5)}
#fuel{width:calc(var(--u)*14);height:calc(var(--u)*2.2);background:rgba(0,0,0,.45);border-radius:calc(var(--u)*1);overflow:hidden;display:flex}
#fuelfill{background:linear-gradient(#7fe3ff,#3b82f6);height:100%;width:100%}
.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.35)}}
#controls{position:absolute;left:0;right:0;bottom:0;height:0}
.cbtn{position:absolute;bottom:max(env(safe-area-inset-bottom),2.2vh);width:calc(var(--u)*16);height:calc(var(--u)*16);border-radius:calc(var(--u)*3);background:rgba(255,255,255,.28);
 display:flex;align-items:center;justify-content:center;border:calc(var(--u)*.5) solid rgba(255,255,255,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.cbtn:active,.cbtn.down{background:rgba(255,255,255,.55)}
.cbtn svg{width:60%;height:60%}
#bL{left:max(env(safe-area-inset-left),2.5vw)}
#bR{left:calc(max(env(safe-area-inset-left),2.5vw) + var(--u)*18.5)}
#bF{right:max(env(safe-area-inset-right),2.5vw);width:calc(var(--u)*20);height:calc(var(--u)*20);border-radius:50%;background:rgba(239,68,68,.75);border-color:#ffd0d0}
#bF.off{opacity:.3}
#bF.pulse{animation:pulse 1s infinite}
#toast{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:calc(var(--u)*11);color:#ffd93b;text-shadow:0 calc(var(--u)*.8) 0 #7a4a00,0 0 calc(var(--u)*3) rgba(0,0,0,.5);pointer-events:none;opacity:0;white-space:nowrap}
#toast.show{animation:pop 1.2s ease-out}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%) scale(1)}}
/* ---------- pilot screen ---------- */
#pilot{background:radial-gradient(circle at 50% 35%,rgba(255,217,59,.35),rgba(8,28,48,.82) 70%)}
.num1{font-size:calc(var(--u)*15);line-height:.85;color:#ffd93b;text-shadow:0 calc(var(--u)*1.4) 0 #b36f00,0 calc(var(--u)*2.4) calc(var(--u)*3) rgba(0,0,0,.5);animation:pulse 1.6s infinite}
.pilotword{font-size:calc(var(--u)*5.5);letter-spacing:.12em;color:#fff;text-shadow:0 calc(var(--u)*.8) 0 #1b4f8c}
#pstars{display:flex;gap:calc(var(--u)*2)}
#pstars svg{width:calc(var(--u)*7);height:calc(var(--u)*7);opacity:.25;transition:opacity .3s,transform .3s}
#pstars svg.on{opacity:1;transform:scale(1.15)}
#pdance{width:calc(var(--u)*20);height:calc(var(--u)*13.6);flex:0 1 auto}
#pilot{gap:calc(var(--u)*1.2)}
#pilot .stats{font-size:calc(var(--u)*4.4)}
#hCoins{font-size:calc(var(--u)*5)}
#hCoins svg{width:calc(var(--u)*5);height:calc(var(--u)*5)}
/* ---------- hangar ---------- */
#hangar{justify-content:flex-start;padding-top:max(env(safe-area-inset-top),2vh);background:rgba(8,28,48,.9)}
#tabs{display:flex;gap:calc(var(--u)*2)}
#tabs .bb.sel{background:#ffd93b;color:#7a4a00;box-shadow:0 calc(var(--u)*1) 0 #b38f00}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*24),1fr));gap:calc(var(--u)*2);width:min(100%,calc(var(--u)*110));overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;flex:1}
.card{background:rgba(255,255,255,.14);border-radius:calc(var(--u)*2);padding:calc(var(--u)*1.2);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.6);border:calc(var(--u)*.6) solid transparent;font-size:calc(var(--u)*3.6)}
.card.eq{border-color:#2ecc71;background:rgba(46,204,113,.25)}
.card.lock canvas{opacity:.55;filter:grayscale(.6)}
.card canvas{width:calc(var(--u)*20);height:calc(var(--u)*14)}
.card .cost{display:flex;align-items:center;gap:.3em;color:#ffd93b}
.card .cost svg{width:calc(var(--u)*3.6);height:calc(var(--u)*3.6)}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
/* ---------- landed ---------- */
#landed{background:radial-gradient(circle at 50% 30%,rgba(60,80,140,.55),rgba(5,12,30,.9) 75%)}
.zzz{font-size:calc(var(--u)*9);color:#bcd1ff;letter-spacing:.2em}
/* ---------- pin / parent ---------- */
#pin,#parent,#pause{background:rgba(8,28,48,.94)}
.pinbox{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2)}
#pindots{display:flex;gap:calc(var(--u)*2)}
.dot{width:calc(var(--u)*4);height:calc(var(--u)*4);border-radius:50%;border:calc(var(--u)*.5) solid #fff}
.dot.on{background:#ffd93b;border-color:#ffd93b}
#pad{display:grid;grid-template-columns:repeat(3,calc(var(--u)*13));gap:calc(var(--u)*1.6)}
#pad button{height:calc(var(--u)*11);border-radius:calc(var(--u)*2);background:#fff;color:#16324f;font-size:calc(var(--u)*6);box-shadow:0 calc(var(--u)*.7) 0 #9db1c8}
#pad button:active{transform:translateY(3px)}
.ptxt{font-size:calc(var(--u)*3.2);font-weight:700;max-width:calc(var(--u)*80);line-height:1.3}
#parent{justify-content:flex-start;overflow:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;font-size:calc(var(--u)*3.2);gap:calc(var(--u)*2)}
#parent .set{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*2);width:min(100%,calc(var(--u)*90));background:rgba(255,255,255,.1);border-radius:calc(var(--u)*1.6);padding:calc(var(--u)*1.2) calc(var(--u)*2)}
#parent .set .row{gap:calc(var(--u)*1.2)}
.seg{padding:calc(var(--u)*1) calc(var(--u)*1.8);border-radius:calc(var(--u)*1.2);background:#475569;font-size:calc(var(--u)*2.8);min-height:calc(var(--u)*6.5)}
.seg.sel{background:#2ecc71}
.minus,.plus{width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:calc(var(--u)*1.4);background:#3b82f6;font-size:calc(var(--u)*5)}
@media (orientation:portrait){:root{--u:min(1.2vw,1.1vh)}.logo{font-size:calc(var(--u)*9)}
 #topL,#topR{top:calc(max(env(safe-area-inset-top),1.2vh) + var(--u)*18.5)}}