*{box-sizing:border-box;margin:0;padding:0}
:root{
  --amber:#ffb224;
  --red:#ff3b30;
  --cyan:#36e0ff;
  --ink:#06080c;
  --panel:rgba(8,12,18,.88);
  --line:rgba(54,224,255,.28);
}
html,body{height:100%;background:#000;color:#e7f1f5;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;overflow:hidden;-webkit-tap-highlight-color:transparent}
#app{position:fixed;inset:0;overflow:hidden}
canvas#view{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;background:#05070a;cursor:crosshair}
.hidden{display:none!important}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;user-select:none}
#crosshair{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);opacity:.9}
#crosshair span{position:absolute;background:var(--cyan);box-shadow:0 0 6px rgba(54,224,255,.8)}
#crosshair span:nth-child(1),#crosshair span:nth-child(2){width:2px;height:8px;left:12px}
#crosshair span:nth-child(1){top:0}
#crosshair span:nth-child(2){bottom:0}
#crosshair span:nth-child(3),#crosshair span:nth-child(4){height:2px;width:8px;top:12px}
#crosshair span:nth-child(3){left:0}
#crosshair span:nth-child(4){right:0}
#crosshair.hit span{background:var(--red);box-shadow:0 0 8px rgba(255,59,48,.9)}

#damage{position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:radial-gradient(ellipse at center,transparent 35%,rgba(255,30,20,.55) 100%)}
#damage.on{opacity:1;transition:opacity .04s}

.hud-top{position:absolute;top:14px;left:14px;display:flex;gap:8px;flex-wrap:wrap}
.pill{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:6px 10px;font-size:11px;letter-spacing:.14em;color:#8fb6c4}
.pill b{color:#eaf7fb;font-size:13px}
.pill.credits{color:var(--amber);border-color:rgba(255,178,36,.4)}
.pill.credits b{color:var(--amber)}

#minimap{position:absolute;top:14px;right:14px;width:120px;height:120px;background:rgba(4,8,12,.72);
  border:1px solid var(--line);border-radius:3px}

.hud-bottom{position:absolute;bottom:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.health-block{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:8px 12px;min-width:200px}
.health-block .label{font-size:9px;letter-spacing:.22em;color:#6f93a0}
.health-block .bar{height:8px;background:rgba(255,255,255,.08);border-radius:2px;margin:6px 0 2px;overflow:hidden}
.health-block .bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#36e0ff,#5effc4);transition:width .18s}
.health-block .bar i.low{background:linear-gradient(90deg,#ff3b30,#ff9d2e)}
.health-block .num{font-size:12px;color:#bfe0ea}
.ammo-block{background:var(--panel);border:1px solid rgba(255,178,36,.35);border-radius:3px;padding:8px 14px;text-align:right}
.ammo-block .wname{font-size:10px;letter-spacing:.2em;color:var(--amber)}
.ammo-block .ammo{font-size:26px;line-height:1.1;color:#fff}
.ammo-block .ammo span{font-size:13px;color:#8fb6c4;margin-left:4px}
.ammo-block.empty{animation:blink .5s steps(2,end) infinite}
@keyframes blink{50%{opacity:.35}}

#toast{position:absolute;left:50%;top:22%;transform:translate(-50%,0);text-align:center;
  font-size:14px;letter-spacing:.18em;color:var(--amber);text-shadow:0 0 12px rgba(255,178,36,.5);opacity:0;transition:opacity .4s}
#toast.on{opacity:1}

/* ---------- touch ---------- */
#touch{position:absolute;inset:0;pointer-events:none}
#stick{position:absolute;left:18px;bottom:96px;width:124px;height:124px;border-radius:50%;
  border:1px solid var(--line);background:rgba(8,14,20,.4);pointer-events:auto;touch-action:none}
#stick i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:rgba(54,224,255,.3);border:1px solid rgba(54,224,255,.6)}
#touch button{position:absolute;pointer-events:auto;background:rgba(8,14,20,.75);color:#dff2f8;
  border:1px solid var(--line);border-radius:6px;font:inherit;font-size:11px;letter-spacing:.12em;padding:0;touch-action:none}
#btnFire{right:20px;bottom:96px;width:104px;height:104px;border-radius:50%;border-color:rgba(255,59,48,.6);color:#ffb7b2;font-size:14px}
#btnReload{right:140px;bottom:122px;width:84px;height:40px}
#btnArmory{right:140px;bottom:72px;width:84px;height:40px}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(circle at 50% 40%,rgba(14,26,36,.92),rgba(3,5,8,.97));backdrop-filter:blur(3px);z-index:5;overflow:auto}
.screen-inner{width:100%;max-width:460px;text-align:center}
.screen-inner.wide{max-width:900px}
h1{font-size:clamp(34px,8vw,64px);line-height:.92;letter-spacing:.06em;color:#fff;text-shadow:0 0 28px rgba(54,224,255,.35)}
h1 span{display:block;color:var(--amber);text-shadow:0 0 28px rgba(255,178,36,.35)}
h2{font-size:clamp(22px,5vw,34px);letter-spacing:.14em;color:#fff;margin-bottom:14px}
.tag{color:#90b2bf;font-size:13px;line-height:1.7;margin:16px 0 22px}
button{cursor:pointer;font:inherit}
.primary{display:block;width:100%;padding:15px;background:var(--amber);color:#1a1200;border:0;border-radius:4px;
  font-size:15px;letter-spacing:.2em;font-weight:700;transition:transform .1s,filter .15s}
.primary:hover{filter:brightness(1.1)}
.primary:active{transform:translateY(1px)}
.menu-row{display:flex;gap:10px;margin-top:10px}
.ghost{flex:1;padding:12px;background:transparent;color:#bddfea;border:1px solid var(--line);border-radius:4px;font-size:12px;letter-spacing:.14em}
.ghost:hover{background:rgba(54,224,255,.1)}
.stats{display:flex;gap:10px;margin-top:26px}
.stats div{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:4px;padding:12px 6px}
.stats b{display:block;font-size:22px;color:var(--cyan)}
.stats span{font-size:9px;letter-spacing:.16em;color:#7e9eab}

.keys{list-style:none;text-align:left;display:grid;gap:10px;margin-bottom:22px}
.keys li{display:flex;align-items:center;gap:6px;font-size:12px;color:#9dbdc9}
.keys span{margin-left:auto;color:#dff2f8}
kbd{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-bottom-width:2px;border-radius:3px;
  padding:3px 7px;font:inherit;font-size:11px;color:#fff}

/* ---------- armory ---------- */
.armory-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.armory-head h2{margin:0}
.bank{color:var(--amber);font-size:13px;letter-spacing:.1em}
.rack{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:22px;text-align:left}
.card{background:rgba(10,16,22,.82);border:1px solid rgba(255,255,255,.09);border-radius:6px;padding:14px;display:flex;flex-direction:column;gap:10px}
.card.locked{opacity:.78}
.card.equipped{border-color:var(--amber);box-shadow:0 0 0 1px rgba(255,178,36,.35),0 0 24px rgba(255,178,36,.12)}
.card h3{font-size:14px;letter-spacing:.14em;color:#fff}
.card .desc{font-size:11px;color:#8fb0bd;line-height:1.6;min-height:34px}
.card canvas{width:100%;height:68px;display:block;background:rgba(255,255,255,.03);border-radius:4px;image-rendering:pixelated}
.specs{display:grid;gap:5px}
.spec{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.12em;color:#7e9eab}
.spec em{width:52px;font-style:normal}
.spec i{flex:1;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.spec i b{display:block;height:100%;background:var(--cyan)}
.card button{width:100%;padding:10px;border-radius:4px;border:0;font-size:11px;letter-spacing:.14em}
.card .buy{background:var(--amber);color:#1a1200;font-weight:700}
.card .buy:disabled{background:rgba(255,255,255,.07);color:#6a8794;cursor:not-allowed}
.card .equip{background:rgba(54,224,255,.16);color:#bff0ff;border:1px solid var(--line)}
.card .on{background:transparent;color:var(--amber);border:1px dashed rgba(255,178,36,.5)}
.tier{font-size:9px;letter-spacing:.14em;color:var(--amber);border:1px solid rgba(255,178,36,.4);border-radius:99px;padding:2px 8px}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:8px}

@media (max-width:560px){
  #minimap{width:84px;height:84px}
  .health-block{min-width:150px}
  .ammo-block .ammo{font-size:20px}
  .hud-bottom{bottom:210px}
  .stats b{font-size:18px}
}