/* NekoWars3D — js/ui/hud.css (2026-11-01). THE SHARED HUD CHROME for every map — the first
   map (HKI index.html) and the arc-2 map (LUNA moon.html) both link this file, so one UI
   update re-skins every map including future ones (2026-11-01). Extracted verbatim
   from index.html's style block on 2026-11-01: root tokens, panel, SRW deploy bar, minimap. */

:root { --edge:#a9cfe8; --ink:#2b6a9f; }
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

.panel { background:rgba(255,255,255,.82); border:1px solid var(--edge); border-radius:12px; backdrop-filter:blur(4px); }
/* perf pass (2026-10-07): backdrop-filter forces a per-frame framebuffer readback + blur per
   panel over the WebGL canvas — brutal on mobile GPUs. Touch keeps the same look via alpha. */
@media (pointer: coarse) { .panel { backdrop-filter: none; background: rgba(255,255,255,.92); } }

/* HUD */
#hud { position:fixed; top:10px; left:10px; padding:8px 12px; z-index:20; pointer-events:none; }
#hud .mech { color:var(--ink); font-size:11px; font-weight:700; margin-top:3px; }
#srwBar { display:flex; flex-direction:column; gap:4px; margin-top:5px; }
.srwRow { display:flex; align-items:center; gap:8px; padding:3px 8px 3px 4px;
          border:1px solid var(--edge); border-radius:8px; background:rgba(255,255,255,.55); }
.srwRow.ctl { border-color:#ff8c1a; background:rgba(255,226,180,.8); box-shadow:0 0 8px rgba(255,140,26,.3); }
.srwIco { width:38px; height:38px; border-radius:6px; object-fit:cover; object-position:top center;
          border:1px solid rgba(20,40,70,.5); background:#0e1e34; flex:none; }
.srwBars { display:flex; flex-direction:column; gap:2px; min-width:118px; }
.srwLine { display:flex; align-items:center; gap:4px; }
.srwTrack { position:relative; width:74px; height:7px; border-radius:3px; background:rgba(20,40,70,.35); overflow:hidden; flex:none; }
.srwTrack i { position:absolute; inset:0 auto 0 0; display:block; width:100%; border-radius:3px; transition:width .25s; }
.srwTrack.hp i { background:#2fbf5f; }
.srwTrack.en i { background:#3a8fd8; }
.srwTrack.xp i { background:#e0a020; }
.srwNum { font-size:9px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* squad-bar collapse chevron (Henry 2026-10-06): collapsed = piloted row only */
#srwChev { pointer-events:auto; cursor:pointer; text-align:center; font-size:10px; font-weight:800;
           color:var(--ink); opacity:.7; padding:1px 0; letter-spacing:2px; user-select:none; }
#srwChev:hover { opacity:1; }
#srwBar.collapsed .srwRow:not(.ctl) { display:none; }
#hud .xpTxt { color:#6a8fb0; font-size:10px; font-variant-numeric:tabular-nums; }
@media (max-width: 700px) {
  /* FIX (Henry 2026-10-05): the squad bar took half the screen — compact mobile rows */
  .srwRow { padding:1px 4px; gap:4px; border-radius:6px; }
  .srwIco { width:22px; height:22px; border-radius:4px; }
  .srwBars { min-width:84px; gap:1px; }
  .srwTrack { width:52px; height:5px; }
  .srwNum { font-size:7px; }
  #srwBar { gap:2px; margin-top:3px; }
  #hud { padding:4px 8px; }
  /* further horizontal squeeze (Henry 2026-10-05): numbers only on the piloted row,
     the XP line gone in combat, shorter bars */
  .srwRow:not(.ctl) .srwNum { display:none; }
  #srwBar .srwLine.xp { display:none; }
  .srwTrack { width:42px; }
  .srwBars { min-width:66px; }
}

/* minimap — circular player-centred relief disc; Tab (or toggleMini) expands it on HKI */
#mini { position:fixed; top:48px; right:10px; z-index:20; padding:4px; pointer-events:none; line-height:0; border-radius:50%; }
#mini canvas { border-radius:50%; display:block; width:92px; height:92px; }
#mini.big { border-radius:12px; }
#mini.big canvas { width:280px; height:auto; border-radius:10px; }
#mini.big ~ #dbgBox { top:260px; }          /* keep the debug list below the expanded map */
#mini.full { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
             padding:0; border:none; border-radius:0; background:rgba(8,14,22,.78); pointer-events:auto; z-index:30; }
#mini.full canvas { border-radius:8px; }    /* pixel size set inline by sizeFull() (js/map.js) */
#mini.full ~ #dbgBox { display:none; }      /* the full-screen map owns the screen */
#miniClose { display:none; }
#mini.full #miniClose { display:block; position:absolute; top:12px; right:16px; width:46px; height:46px;
             line-height:46px; text-align:center; font-size:24px; color:#cfe3f2; pointer-events:auto; }
#miniZoom { display:none; position:absolute; right:10px; bottom:10px; flex-direction:column; gap:10px; z-index:2; }
#mini.big #miniZoom, #mini.full #miniZoom { display:flex; }   /* zoom buttons on both expanded modes */
#mini.full #miniZoom { right:18px; bottom:34px; }
.mzBtn { width:40px; height:40px; border-radius:50%; background:rgba(10,20,32,.66); border:1px solid rgba(255,255,255,.5);
         color:#e6eef5; font-size:22px; line-height:38px; text-align:center; pointer-events:auto; user-select:none; }
.mzBtn:active { transform:scale(.94); }

/* ===== HANGAR — the command menu (🗄 or M). Shared chrome for every map: the first map's
   tabs run on combat/economy/save; the arc-2 map (LUNA) reuses the same chrome with a working
   VISUALS tab and "arc 2 — with combat" placeholders for the rest (2026-11-01). ===== */
#codex { position:fixed; inset:0; z-index:47; display:none; color:#cfe6f5;
         background:radial-gradient(120% 100% at 50% 0%, #12263f 0%, #0a1626 55%, #060d18 100%); }
#codex.open { display:flex; flex-direction:column; align-items:center; }
#codex .cxHead { margin-top:12px; font-size:clamp(15px,2.4vw,21px); font-weight:900; letter-spacing:6px;
                 color:#ffd777; text-shadow:0 0 18px rgba(255,180,40,.45); pointer-events:none; }
#codex .cxTabs { display:flex; gap:8px; margin:12px 0 0; flex-wrap:wrap; justify-content:center; }
.cxTab { padding:8px 16px; border:1px solid #2c4a70; border-radius:9px; background:rgba(10,22,40,.9);
         font-size:12px; font-weight:800; letter-spacing:2px; color:#9fc6e8; cursor:pointer; user-select:none; }
.cxTab:hover { border-color:#3b6ea5; }
.cxTab.on { border-color:#ffd777; color:#ffe9b0; box-shadow:0 0 12px rgba(255,200,80,.2) inset; }
#cxBody { width:min(720px, 94vw); flex:1; margin:12px 0 16px; padding:16px 18px; overflow-y:auto; scrollbar-width:thin;
          border:1px solid #3b6ea5; border-radius:14px;
          background:linear-gradient(180deg, rgba(14,30,52,.92), rgba(8,16,30,.94));
          box-shadow:0 0 40px rgba(0,20,50,.8); }
.cxH { margin:14px 0 6px; font-size:12px; font-weight:900; letter-spacing:3px; color:#ffd777; }
.cxH:first-child { margin-top:0; }
.cxP { font-size:13px; line-height:1.65; color:#cfe6f5; margin-bottom:10px; }
.cxFin { text-align:center; font-size:11px; letter-spacing:1px; color:#5d84a8; margin:14px 0 2px; }
.cxKeys { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:#9fc6e8; }
.cxKeys b { color:#eaf6ff; }
.cxCount { font-size:12px; font-weight:800; letter-spacing:2px; color:#ffd777; margin-bottom:10px; }
.cxRow { border:1px solid #223c5c; border-left:4px solid #3b6ea5; border-radius:9px; padding:10px 12px;
         margin-bottom:10px; background:rgba(12,26,46,.85); }
.cxDone { border-color:#2fbf5f; }
.cxName { font-size:14px; font-weight:900; letter-spacing:1.5px; color:#eaf6ff; overflow:hidden; }
.cxLv { margin-left:10px; font-size:11px; font-weight:700; color:#ffd777; letter-spacing:1px; }
.cxSt { float:right; font-size:10px; font-weight:800; letter-spacing:2px; color:#e8a53a; }
.cxDone .cxSt { color:#5fe89a; }
.cxStats { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:6px; font-size:11px; color:#7fa8cc; }
.cxStats b { color:#d9ecff; font-size:13px; }
.cxSp { margin-top:6px; font-size:11px; color:#9fc6e8; }
.cxUn { margin-top:4px; font-size:10px; color:#5d84a8; }
.cxLock { opacity:.55; }
.cxLock .cxSt { color:#6a8fb0; }
/* THE MISSION MAP-MARK (2026-10-29): a not-cleared mission row is SELECTABLE — tapping it
   marks its location on the map (js/codex.js data-mission -> __NEKO.selectedMission, drawn
   by js/map.js). These three rules were lost when the HANGAR CSS moved out of index.html
   into this file (the LUNA arc-2 UI pass, 2026-11-01): rows stayed wired, but with no
   pointer cue and no highlight a click looked like it did nothing (Henry 2026-11-01:
   "I suddenly cannot select missions"). Restored here, next to the other .cx rules. */
.cxSite { cursor:pointer; border-left-color:#3fae8c; }
.cxSite:hover { background:rgba(63,174,140,.12); }
.cxSelected { background:rgba(63,174,140,.18); border-left-color:#5fe8b0; }
.cxEmpty { padding:30px 10px; text-align:center; font-size:13px; color:#7fa8cc; line-height:1.7; }
/* the arc-2 placeholder rows: the tab exists (chrome parity) but the system ships with combat */
.cxSoon { border-left-color:#e8a53a; }
.cxSoon .cxSt { color:#e8a53a; }
@media (max-width: 700px) { #codex .cxHead { letter-spacing:3px; } }

/* ===== touch controls — virtual joystick + action buttons + the top-right UI cluster.
   Shared chrome: the first map shows the full set (JUMP/💥/🔥/🤖); the arc-2 map (LUNA) shows
   the joystick + JUMP + the 🕹/🗄 cluster (no combat buttons — no combat on the moon yet). ===== */
#joy { position:fixed; z-index:30; width:120px; height:120px; border-radius:50%; border:2px solid rgba(255,255,255,.7);
       background:rgba(169,207,232,.25); display:none; touch-action:none; }
#joy .knob { position:absolute; left:50%; top:50%; width:52px; height:52px; border-radius:50%;
             background:radial-gradient(circle at 35% 30%, #9fd0f0, #2b6a9f); box-shadow:0 3px 8px rgba(0,40,80,.35);
             transform:translate(-50%,-50%); }
#jumpBtn { position:fixed; right:22px; bottom:76px; z-index:30; width:74px; height:74px; border-radius:50%;
           border:2px solid rgba(255,255,255,.75); background:rgba(255,140,26,.55); color:#fff; font-weight:900;
           font-size:13px; letter-spacing:1px; display:none; align-items:center; justify-content:center; user-select:none; }
#punchBtn { position:fixed; right:106px; bottom:60px; z-index:30; width:66px; height:66px; border-radius:50%;
            border:2px solid rgba(255,255,255,.75); background:rgba(255,60,30,.6); color:#fff; font-weight:900;
            font-size:26px; display:none; align-items:center; justify-content:center; user-select:none; }
#fireBtn { position:fixed; right:106px; bottom:136px; z-index:30; width:66px; height:66px; border-radius:50%;
           border:2px solid rgba(255,255,255,.75); background:rgba(200,0,0,.65); color:#fff; font-weight:900;
           font-size:24px; display:none; align-items:center; justify-content:center; user-select:none; }
#uiBtns { position:fixed; top:10px; right:10px; z-index:31; display:flex; gap:8px; }
.ubtn { position:relative; padding:7px 12px; font-size:12px; font-weight:700; color:var(--ink); cursor:pointer; user-select:none; }
.ubtn:active { transform:scale(.96); }
/* OFF-state indicator (Henry 2026-10-06): red ring + slash over the icon — replaces the ON/OFF words */
.ubtn.xout::after { content:''; position:absolute; inset:1px 4px; border:2px solid #e23b2e; border-radius:50%; pointer-events:none; }
.ubtn.xout::before { content:''; position:absolute; top:50%; left:16%; right:16%; height:2px; background:#e23b2e;
                     transform:rotate(-45deg); border-radius:1px; pointer-events:none; }