/* NEON INFILTRATION — киберпанк-стелс, ВЕРТИКАЛЬНАЯ ориентация (портрет).
   Вариант B: поле адаптируется, на развороте Fold видно больше по горизонтали. */
:root{
  --cyan:#00e5ff;
  --magenta:#ff2bd6;
  --red:#ff3b3b;
  --bg:#07070d;
  --glow-cyan:0 0 8px #00e5ff, 0 0 18px rgba(0,229,255,.5);
  --glow-mag:0 0 8px #ff2bd6, 0 0 18px rgba(255,43,214,.5);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{height:100%;overflow:hidden;background:var(--bg);font-family:'Courier New',monospace;color:#cfeaff}
#game-wrap{position:fixed;inset:0;overflow:hidden;
  /* киберпанк-рамка со свечением по краям */
  box-shadow:inset 0 0 40px rgba(0,229,255,.12), inset 0 0 90px rgba(255,43,214,.06);
}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}

/* ===== HUD ===== */
#hud-top{position:absolute;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,13,.85),transparent);z-index:5}
.hud-stat{display:flex;flex-direction:column;gap:3px;font-size:11px;letter-spacing:1px}
.hud-stat .lbl{color:var(--cyan);text-shadow:var(--glow-cyan);font-size:9px;opacity:.8}
#objective{font-size:12px;color:#eaf7ff;max-width:60vw}
#alarm-bar{width:120px;height:8px;border:1px solid rgba(255,59,59,.5);background:rgba(255,59,59,.08)}
#alarm-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--red),var(--magenta));
  box-shadow:0 0 8px var(--red);transition:width .2s}

#hud-side{position:absolute;top:50%;right:10px;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:5;pointer-events:none}
.weapon-slot{padding:6px 8px;font-size:9px;letter-spacing:1px;border:1px solid rgba(0,229,255,.25);
  color:#5a7a88;background:rgba(7,7,13,.6)}
.weapon-slot.active{color:var(--cyan);border-color:var(--cyan);box-shadow:var(--glow-cyan)}

/* ===== Джойстики ===== */
.stick{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 26px);width:120px;height:120px;z-index:6;touch-action:none}
#stick-left{left:22px}
#stick-right{right:22px}
.stick-base{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(0,229,255,.25);
  background:radial-gradient(circle,rgba(0,229,255,.06),transparent 70%)}
#stick-right .stick-base{border-color:rgba(255,43,214,.25);
  background:radial-gradient(circle,rgba(255,43,214,.06),transparent 70%)}
.stick-knob{position:absolute;width:52px;height:52px;left:34px;top:34px;border-radius:50%;
  border:2px solid var(--cyan);background:rgba(0,229,255,.12);box-shadow:var(--glow-cyan);
  transition:transform .02s linear;pointer-events:none}
#stick-right .stick-knob{border-color:var(--magenta);background:rgba(255,43,214,.12);box-shadow:var(--glow-mag)}

.action-btn{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 150px);right:40px;z-index:7;
  padding:14px 10px;width:76px;height:76px;border-radius:50%;font-family:inherit;font-size:11px;letter-spacing:1px;
  color:var(--cyan);background:rgba(0,229,255,.1);border:2px solid var(--cyan);box-shadow:var(--glow-cyan);
  opacity:0;pointer-events:none;transition:opacity .3s}
.action-btn.visible{opacity:1;pointer-events:auto}
.action-btn:active{background:rgba(0,229,255,.3)}

/* Кнопка огня — крупная, над правым стиком */
.fire-btn{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 96px);right:150px;z-index:7;
  width:88px;height:88px;border-radius:50%;font-family:inherit;font-size:12px;letter-spacing:1px;
  color:var(--magenta);background:rgba(255,43,214,.14);border:2px solid var(--magenta);box-shadow:var(--glow-mag)}
.fire-btn:active{background:rgba(255,43,214,.4)}

/* ===== Оверлеи ===== */
#start-overlay,#hack-overlay,#win-overlay{position:absolute;inset:0;z-index:20;display:flex;
  align-items:center;justify-content:center;background:rgba(5,5,10,.9);backdrop-filter:blur(3px)}
.hidden{display:none!important}
.start-panel{text-align:center;padding:30px}
.logo{font-size:40px;line-height:1.05;letter-spacing:3px;color:#fff;
  text-shadow:0 0 10px var(--cyan),0 0 30px var(--magenta);margin-bottom:14px}
.tagline{color:#8fb8c9;font-size:13px;letter-spacing:2px;margin-bottom:30px}
.start-btn{padding:16px 46px;font-family:inherit;font-size:16px;letter-spacing:3px;color:#001016;
  background:var(--cyan);border:none;box-shadow:0 0 20px var(--cyan);cursor:pointer}
.ctrl-hint{margin-top:26px;font-size:10px;color:#4d6b78;line-height:1.8;letter-spacing:1px}

.hack-panel{text-align:center;padding:24px}
.hack-title{color:var(--magenta);letter-spacing:3px;font-size:16px;text-shadow:var(--glow-mag);margin-bottom:16px}
.hack-hint{margin-top:14px;font-size:10px;color:#6b8b98;letter-spacing:1px}
.hack-progress{margin-top:14px;height:6px;border:1px solid rgba(255,43,214,.4)}
#hack-progress-fill{height:100%;width:0;background:var(--magenta);box-shadow:var(--glow-mag);transition:width .15s}

.win-panel{text-align:center}
.win-title{font-size:28px;color:var(--cyan);letter-spacing:4px;text-shadow:var(--glow-cyan)}
.win-sub{margin-top:12px;font-size:12px;color:#8fb8c9;letter-spacing:1px}

@media (min-width:600px){
  .stick{width:140px;height:140px}
  .stick-knob{width:60px;height:60px;left:40px;top:40px}
}