/* ======================================================================
   BYStrike — Investor Demo v10 · NEON-TACTICAL
   Тёмное стекло · мятное свечение #7CF5D0 · hex-кнопки · угловые скобки
   Раскладка HUD по методичке: урон у прицела, HP слева, радар справа,
   граната/щит слева-снизу (hex), FIRE справа-снизу, ally по центру-снизу.
   Все id/классы сохранены под script.js v9.
====================================================================== */

:root{
  --bg:#04070d;
  --mint:#7CF5D0; --mint-dim:#3ea88c; --mint-glow:rgba(124,245,208,.55);
  --glass:rgba(9,16,24,.62); --glass2:rgba(11,20,30,.82);
  --stroke:rgba(124,245,208,.22); --stroke-soft:rgba(124,245,208,.12);
  --text:#eaf6ff; --muted:#8fb3ba;
  --red:#ff5a6a; --red2:#8d1720; --blue:#49b0ff; --green:#52ff90; --warn:#ffcb58;
  --hud-blur:blur(10px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;width:100%;overflow:hidden;background:#02040a;color:var(--text);
  font-family:'Onest',Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{touch-action:manipulation}
.hidden{display:none!important}

.app-shell,.phone-frame{width:100vw;height:100dvh;overflow:hidden;position:relative;background:#03060c}
.phone-frame{max-width:100vw}

/* thin scanline + hex ambience overlay on everything */
.phone-frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:60;
  background:repeating-linear-gradient(0deg,rgba(124,245,208,.025) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen;opacity:.5}

.statusbar{position:absolute;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;
  padding:10px 16px calc(env(safe-area-inset-top) + 4px);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mint);text-shadow:0 0 8px var(--mint-glow);
  background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);font-weight:700}

.screen{position:absolute;inset:0;padding:calc(54px + env(safe-area-inset-top)) 18px 18px;overflow:auto}

/* ---------- buttons ---------- */
.button-row{display:flex;gap:12px}
.stack{flex-direction:column}
.primary,.secondary,.ghost,.small-btn{
  border:1px solid var(--stroke);border-radius:14px;padding:16px 18px;
  font:800 15px/1 'Onest',Inter,sans-serif;letter-spacing:.02em;color:var(--text);
  background:var(--glass);backdrop-filter:var(--hud-blur);position:relative;overflow:hidden;
  transition:transform .1s,box-shadow .2s,border-color .2s}
.primary{color:#03110d;background:linear-gradient(180deg,var(--mint),#46c9a6);
  border-color:transparent;box-shadow:0 0 24px var(--mint-glow),inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:none;font-weight:900}
.primary:active{transform:translateY(1px) scale(.99);box-shadow:0 0 14px var(--mint-glow)}
.secondary{background:var(--glass2);border-color:var(--stroke)}
.secondary:active{transform:translateY(1px)}
.ghost{padding:10px 14px;background:var(--glass);border-color:var(--stroke-soft);color:var(--mint)}
.small-btn{padding:10px 14px;font-size:12px;border-radius:11px;background:var(--glass2);
  border-color:var(--stroke-soft);color:var(--text)}
.small-btn.danger{color:#03110d;background:linear-gradient(180deg,var(--mint),#46c9a6);border-color:transparent;font-weight:900}
.full{width:100%}

.label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);
  margin-bottom:8px;text-shadow:0 0 8px var(--mint-glow)}
.input{width:100%;border-radius:12px;border:1px solid var(--stroke);background:rgba(7,14,22,.7);
  color:#fff;padding:16px 14px;font:700 18px/1 'Onest',Inter,sans-serif;margin-bottom:14px;
  letter-spacing:.06em}
.input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 16px var(--mint-glow)}

/* corner-bracket glass card */
.card,.menu-card,.lobby-card,.lobby-bottom{
  background:var(--glass);backdrop-filter:var(--hud-blur);
  border:1px solid var(--stroke);border-radius:18px;padding:16px;position:relative}
.card::before,.menu-card::before,.lobby-card::before{content:"";position:absolute;top:8px;left:8px;
  width:14px;height:14px;border-top:2px solid var(--mint);border-left:2px solid var(--mint);opacity:.7}
.card::after,.menu-card::after,.lobby-card::after{content:"";position:absolute;bottom:8px;right:8px;
  width:14px;height:14px;border-bottom:2px solid var(--mint);border-right:2px solid var(--mint);opacity:.7}

.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 11px;border-radius:8px;background:rgba(124,245,208,.08);
  border:1px solid var(--stroke-soft);font-size:11px;color:var(--mint);letter-spacing:.04em;
  text-transform:uppercase;font-weight:700}

/* ======================= MENU ======================= */
.menu-screen{padding:0}
.menu-backdrop{position:absolute;inset:0;background:url('hero.jpg') center/cover no-repeat;filter:saturate(.7) brightness(.5)}
.menu-overlay{position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 0%,rgba(124,245,208,.12),transparent 55%),
    linear-gradient(180deg,rgba(3,6,12,.55),rgba(3,6,12,.94))}
.menu-content{position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column;
  gap:20px;padding:calc(64px + env(safe-area-inset-top)) 20px 26px}
.logo-block{margin-top:6px}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mint);
  text-shadow:0 0 10px var(--mint-glow);margin-bottom:10px;font-weight:700}
.brand-title{font:900 52px/0.92 'Unbounded','Onest',sans-serif;letter-spacing:-.01em;margin:0;
  color:#fff;text-shadow:0 0 30px var(--mint-glow)}
.brand-title span{color:var(--mint)}
.brand-subtitle{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.5;max-width:34ch}

.menu-card{display:flex;flex-direction:column;gap:12px}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.feature-box{padding:14px;border-radius:14px;background:var(--glass);border:1px solid var(--stroke-soft);
  font-size:13px;font-weight:700;color:var(--text);text-align:center;letter-spacing:.02em;
  position:relative}
.feature-box::before{content:"";position:absolute;left:12px;top:12px;width:6px;height:6px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 10px var(--mint-glow)}

/* ======================= LOBBY ======================= */
.lobby-screen{display:flex;flex-direction:column;gap:14px}
.header-line{display:flex;align-items:center;gap:12px}
.section-kicker{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mint)}
.header-line h2{margin:2px 0 0;font:800 24px/1 'Unbounded','Onest',sans-serif}
.room-code{margin-left:auto;padding:8px 14px;border-radius:10px;background:rgba(124,245,208,.1);
  border:1px solid var(--stroke);color:var(--mint);font-weight:900;letter-spacing:.2em;font-size:16px;
  text-shadow:0 0 10px var(--mint-glow)}
.lobby-topline{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:12px}
.lobby-topline strong{color:var(--mint)}
.players-list{display:flex;flex-direction:column;gap:8px}
.player-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
  border-radius:12px;background:rgba(7,14,22,.55);border:1px solid var(--stroke-soft)}
.player-left{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;color:#03110d}
.avatar.team-a{background:linear-gradient(180deg,var(--mint),#46c9a6);box-shadow:0 0 14px var(--mint-glow)}
.avatar.team-b{background:linear-gradient(180deg,#ff8a5a,#e0533a);box-shadow:0 0 14px rgba(255,120,80,.4);color:#180a06}
.role{font-size:11px;color:var(--muted);margin-top:2px}
.lobby-bottom{display:flex;flex-direction:column;gap:12px}

/* ======================= COUNTDOWN ======================= */
.countdown-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.countdown-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(124,245,208,.14),transparent 60%),#03060c}
.countdown-text{font:900 120px/1 'Unbounded','Onest',sans-serif;color:var(--mint);
  text-shadow:0 0 50px var(--mint-glow);z-index:2;animation:cdPulse .9s ease-out}
.countdown-label{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);z-index:2}
@keyframes cdPulse{0%{transform:scale(1.5);opacity:0}40%{opacity:1}100%{transform:scale(1);opacity:1}}

/* ======================= BATTLE ======================= */
.camera-feed,.battle-bg-fallback,.camera-mask,.battle-vignette,.scanlines,.target-layer,
.fx-layer,.camera-fallback,.damage-overlay,.hit-marker,.battle-toast,.ar-frame,
.crosshair-wrap,.lock-text{position:absolute}
.camera-feed,.battle-bg-fallback,.camera-mask,.battle-vignette,.scanlines,.target-layer,
.fx-layer,.camera-fallback,.damage-overlay{inset:0}
.camera-feed{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s;z-index:1}
.camera-feed.camera-live{opacity:1}
.battle-bg-fallback{background:
  linear-gradient(135deg,#0c1a24 0%,#071019 55%,#0a1622 100%);
  z-index:0}
.battle-bg-fallback::before{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(124,245,208,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,245,208,.05) 1px,transparent 1px);
  background-size:44px 44px;opacity:.6}
.camera-mask{background:radial-gradient(120% 90% at 50% 50%,transparent 40%,rgba(3,6,12,.5));z-index:5;pointer-events:none}
.battle-vignette{box-shadow:inset 0 0 160px rgba(0,0,0,.7);z-index:6;pointer-events:none}
.scanlines{background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);z-index:7;pointer-events:none;opacity:.4}

.camera-fallback{z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(3,6,12,.7);backdrop-filter:blur(6px)}
.fallback-card{max-width:80%;text-align:center;padding:22px;border-radius:18px;background:var(--glass2);border:1px solid var(--stroke)}
.fallback-card h3{margin:0 0 8px;font:800 18px 'Unbounded','Onest',sans-serif;color:var(--mint)}
.fallback-card p{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.5}

/* --- scoreboard (top center) --- */
.scoreboard{position:absolute;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  z-index:20;display:flex;align-items:stretch;gap:12px}
.score-team{background:var(--glass);backdrop-filter:var(--hud-blur);border:1px solid var(--stroke-soft);
  border-radius:12px;padding:6px 14px;min-width:92px}
.score-team.red-team{border-color:rgba(255,90,106,.35);text-align:right}
.score-team.blue-team{border-color:rgba(73,176,255,.3)}
.score-label{font-size:9px;letter-spacing:.14em;font-weight:800}
.red-team .score-label{color:var(--red)} .blue-team .score-label{color:var(--blue)}
.score-number{font:900 22px/1 'Unbounded','Onest',sans-serif;color:#fff;margin-top:1px}
.score-number small{font-size:11px;color:var(--muted);font-weight:600}
.score-sub{font-size:8px;color:var(--muted);margin-top:2px;letter-spacing:.04em}
.score-center{display:flex;align-items:center}
.score-ring{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--stroke);background:radial-gradient(circle,rgba(124,245,208,.1),transparent);
  box-shadow:0 0 20px var(--mint-glow),inset 0 0 16px rgba(124,245,208,.1)}
.score-time{font:900 15px/1 'Unbounded','Onest',sans-serif;color:var(--mint);text-shadow:0 0 10px var(--mint-glow)}

/* --- left HUD: player card --- */
.hud-left{position:absolute;left:12px;bottom:12px;z-index:20;display:flex;flex-direction:column;gap:10px}
.minimap-panel{display:none} /* radar moved to right per methodology */
.player-card{display:flex;gap:10px;background:var(--glass);backdrop-filter:var(--hud-blur);
  border:1px solid var(--stroke);border-radius:14px;padding:10px;min-width:190px;position:relative}
.player-card::before{content:"";position:absolute;top:6px;left:6px;width:10px;height:10px;
  border-top:2px solid var(--mint);border-left:2px solid var(--mint);opacity:.6}
.portrait{width:44px;height:44px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,var(--mint),#2f8a72);box-shadow:0 0 14px var(--mint-glow);
  position:relative;overflow:hidden}
.portrait::after{content:"";position:absolute;inset:0;background:url('assets/icons/heart.png') center/60% no-repeat;filter:brightness(0) invert(.1)}
.player-bars{flex:1;min-width:0}
.bar-label{font-size:9px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;display:flex;justify-content:space-between}
.bar-label strong{color:#fff}
.bar{height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin:3px 0 7px;position:relative}
.bar span{display:block;height:100%;transition:width .18s ease-out}
.hp-bar span{width:100%;background:repeating-linear-gradient(90deg,var(--mint) 0 8px,#3fbf9d 8px 11px);box-shadow:0 0 10px var(--mint-glow)}
.hp-bar span.low{background:repeating-linear-gradient(90deg,var(--red) 0 8px,#c11 8px 11px);animation:hpLowPulse .7s infinite}
.armor-bar span{width:100%;background:repeating-linear-gradient(90deg,var(--blue) 0 8px,#1f6fd0 8px 11px)}
.net-line{font-size:9px;color:var(--green);letter-spacing:.08em}

/* --- right HUD: radar + killfeed --- */
.hud-right{position:absolute;right:12px;top:calc(84px + env(safe-area-inset-top));z-index:20;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;width:170px}
.killfeed{width:100%;background:var(--glass);backdrop-filter:var(--hud-blur);border:1px solid var(--stroke-soft);
  border-radius:12px;padding:8px 10px}
.feed-title{font-size:9px;letter-spacing:.14em;color:var(--mint);text-transform:uppercase;margin-bottom:5px;font-weight:800}
.feed-items{display:flex;flex-direction:column;gap:3px}
.feed-item{font-size:10px;color:#dbe6f5;line-height:1.35;padding:2px 6px;border-radius:6px;
  background:rgba(124,245,208,.05);border-left:2px solid var(--mint-dim)}

/* control stack lives inside hud-right in DOM but we reposition to methodology zones */
.control-stack{display:none} /* legacy vertical stack hidden; hex controls rendered below */

.ammo-panel{position:absolute;right:12px;bottom:12px;z-index:22;background:var(--glass);backdrop-filter:var(--hud-blur);
  border:1px solid var(--stroke);border-radius:14px;padding:10px 14px;text-align:right;min-width:120px}
.ammo-head{font-size:9px;letter-spacing:.16em;color:var(--mint);text-transform:uppercase;font-weight:800}
.ammo-nums{font:900 22px/1 'Unbounded','Onest',sans-serif;color:#fff;margin:2px 0 6px}
.ammo-bars{display:flex;gap:3px;justify-content:flex-end}
.ammo-bars span{width:8px;height:14px;border-radius:2px;background:var(--mint);box-shadow:0 0 6px var(--mint-glow);opacity:.85}

/* --- targets --- */
.target-layer,.fx-layer{pointer-events:none;z-index:15}
.target{position:absolute;pointer-events:auto;background:none;border:0;color:#fff;padding:0;cursor:pointer}
.target .silhouette{width:48px;height:110px;border-radius:22px 22px 14px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  box-shadow:inset 0 0 26px rgba(255,255,255,.06)}
.target .outline{position:absolute;inset:-6px -12px;border:2px solid var(--red);border-radius:18px;
  box-shadow:0 0 16px rgba(255,90,106,.4)}
.target.ally .outline{border-color:var(--green);box-shadow:0 0 16px rgba(82,255,144,.4)}
.target .outline::before,.target .outline::after{content:"";position:absolute;width:10px;height:10px;border-color:inherit}
.target .outline::before{top:-2px;left:-2px;border-top:2px solid;border-left:2px solid}
.target .outline::after{bottom:-2px;right:-2px;border-bottom:2px solid;border-right:2px solid}
.target .tag{position:absolute;left:50%;top:-36px;transform:translateX(-50%);font-size:11px;font-weight:800;
  text-shadow:0 2px 6px rgba(0,0,0,.7);white-space:nowrap;letter-spacing:.04em}
.target.enemy .tag{color:#ffd0d5} .target.ally .tag{color:#c9ffe0}
.target .hpbar{width:88px;height:7px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:5px}
.target .hpbar span{display:block;height:100%}
.target.selected .outline{box-shadow:0 0 26px currentColor}
.target.hit-pulse .silhouette{animation:targetHit .16s}
@keyframes targetHit{0%{transform:scale(1);filter:brightness(3)}100%{transform:scale(1);filter:brightness(1)}}

/* --- fx --- */
.tracer{position:absolute;height:3px;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--mint),#fff);filter:drop-shadow(0 0 6px var(--mint-glow));z-index:16}
.impact{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:radial-gradient(circle,#fff,var(--mint) 40%,transparent 70%);z-index:16}
.damage-overlay{pointer-events:none;background:radial-gradient(circle at center,transparent 46%,rgba(255,40,60,.1) 68%,rgba(255,40,60,.5));opacity:0;transition:opacity .16s;z-index:25}
.damage-overlay.active{opacity:1}
.hit-marker{left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);font-size:40px;color:var(--mint);opacity:0;z-index:26;
  text-shadow:0 0 20px var(--mint-glow)}
.hit-marker.active{animation:hitMark .22s}
@keyframes hitMark{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}

/* --- crosshair + damage-at-crosshair (methodology) --- */
.crosshair-wrap{left:50%;top:50%;transform:translate(-50%,-50%);z-index:17;pointer-events:none;
  width:70px;height:70px;display:flex;align-items:center;justify-content:center}
.lock-ring{position:absolute;width:66px;height:66px;border-radius:50%;
  border:2px solid var(--stroke);
  background:conic-gradient(var(--mint) calc(var(--progress,0)*1%),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));opacity:.9}
.crosshair{position:relative;width:34px;height:34px}
.crosshair span{position:absolute;background:#fff;box-shadow:0 0 8px var(--mint-glow)}
.crosshair span:nth-child(1),.crosshair span:nth-child(2){left:50%;width:2px;height:9px;transform:translateX(-50%)}
.crosshair span:nth-child(1){top:0} .crosshair span:nth-child(2){bottom:0}
.crosshair span:nth-child(3),.crosshair span:nth-child(4){top:50%;height:2px;width:9px;transform:translateY(-50%)}
.crosshair span:nth-child(3){left:0} .crosshair span:nth-child(4){right:0}
.crosshair.neutral span{background:#cfe} 
.crosshair.enemy-lock span{background:var(--red);box-shadow:0 0 8px rgba(255,90,106,.7)}
.crosshair.ally-lock span{background:var(--green);box-shadow:0 0 8px rgba(82,255,144,.7)}
.crosshair.loading span{background:var(--warn)}
.crosshair.firing{animation:crossKick .1s}
@keyframes crossKick{0%{transform:scale(1.3)}100%{transform:scale(1)}}
.lock-text{left:50%;top:calc(50% + 44px);transform:translateX(-50%);z-index:17;font-size:10px;font-weight:800;
  letter-spacing:.08em;color:#fff;text-shadow:0 2px 6px #000;white-space:nowrap;pointer-events:none}

/* damage number near crosshair */
.dmg-pop{position:absolute;left:50%;top:calc(50% - 40px);transform:translateX(-50%);z-index:27;
  font:900 26px 'Unbounded','Onest',sans-serif;color:var(--red);text-shadow:0 0 14px rgba(255,90,106,.7);
  pointer-events:none;opacity:0}
.dmg-pop.show{animation:dmgPop .6s ease-out}
@keyframes dmgPop{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}30%{opacity:1;transform:translate(-50%,-6px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-30px) scale(1)}}

/* --- AR collimator sight frame (replaces drawn weapon; phone acts as red-dot sight) --- */
.ar-frame{position:absolute;inset:0;z-index:12;pointer-events:none}
.ar-corner{position:absolute;width:38px;height:38px;opacity:.85}
.ar-corner.tl{top:14px;left:14px;border-top:2px solid var(--mint);border-left:2px solid var(--mint);box-shadow:-2px -2px 12px rgba(124,245,208,.25)}
.ar-corner.tr{top:14px;right:14px;border-top:2px solid var(--mint);border-right:2px solid var(--mint);box-shadow:2px -2px 12px rgba(124,245,208,.25)}
.ar-corner.bl{bottom:14px;left:14px;border-bottom:2px solid var(--mint);border-left:2px solid var(--mint);box-shadow:-2px 2px 12px rgba(124,245,208,.25)}
.ar-corner.br{bottom:14px;right:14px;border-bottom:2px solid var(--mint);border-right:2px solid var(--mint);box-shadow:2px 2px 12px rgba(124,245,208,.25)}
/* subtle sight vignette ring, like looking through an optic */
.ar-frame::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 58%,rgba(3,8,14,.32) 78%,rgba(3,8,14,.6) 100%)}
/* firing kick — whole frame flashes/pulses like recoil through the optic */
.ar-frame.kick .ar-corner{opacity:1;transform:scale(1.06)}
.ar-frame.auto-fire::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(124,245,208,.06),transparent 55%);animation:sightPulse .14s infinite alternate}
@keyframes sightPulse{0%{opacity:.4}100%{opacity:.9}}
/* muzzle glow now blooms from screen center-bottom edge (energy discharge feel) */
.muzzle-flash{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);width:180px;height:90px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(124,245,208,.55) 0,rgba(124,245,208,.15) 40%,rgba(124,245,208,0) 70%);opacity:0;filter:blur(2px)}
.muzzle-flash.active{animation:muzzleBloom .12s}
@keyframes muzzleBloom{0%{opacity:0;transform:translateX(-50%) scaleY(.5)}45%{opacity:1;transform:translateX(-50%) scaleY(1.1)}100%{opacity:0;transform:translateX(-50%) scaleY(.8)}}

/* --- bottom action zones (methodology: hex left = grenade/shield, round right = fire) --- */
.bottom-actions{position:absolute;left:0;right:0;bottom:12px;z-index:23;display:flex;justify-content:center;gap:10px;
  padding:0 14px;pointer-events:none}
.bottom-actions .small-btn{pointer-events:auto}
.hold-fire{background:linear-gradient(180deg,var(--mint),#46c9a6)!important;color:#03110d!important;font-weight:900}

/* hex utility buttons bottom-left */
.hex-controls{position:absolute;left:12px;bottom:112px;z-index:23;display:flex;gap:10px}
.hex-btn{width:56px;height:62px;border:0;background:none;position:relative;cursor:pointer;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;padding:0}
.hex-btn .hex-bg{position:absolute;inset:0;background:var(--glass2);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  border:1px solid var(--stroke)}
.hex-btn::after{content:"";position:absolute;inset:0;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:inset 0 0 14px rgba(124,245,208,.2)}
.hex-btn img{width:26px;height:26px;position:relative;z-index:2;filter:drop-shadow(0 0 6px var(--mint-glow))}
.hex-btn:active{transform:scale(.94)}
.hex-btn .cool{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:8px;color:var(--muted);letter-spacing:.1em}

/* round fire button bottom-right (big) */
.fire-round{position:absolute;right:14px;bottom:96px;z-index:24;width:88px;height:88px;border-radius:50%;
  border:2px solid var(--mint);background:radial-gradient(circle,rgba(124,245,208,.25),rgba(9,16,24,.85));
  color:var(--mint);font-weight:900;font-size:13px;letter-spacing:.06em;cursor:pointer;
  box-shadow:0 0 26px var(--mint-glow),inset 0 0 20px rgba(124,245,208,.2);
  display:flex;align-items:center;justify-content:center;pointer-events:auto;
  background-image:url('assets/icons/fire.png');background-size:38px;background-repeat:no-repeat;background-position:center}
.fire-round span{display:none}
.fire-round.active-fire{animation:firePulse .3s infinite;transform:scale(1.04)}
@keyframes firePulse{0%,100%{box-shadow:0 0 26px var(--mint-glow),inset 0 0 20px rgba(124,245,208,.2)}50%{box-shadow:0 0 44px var(--mint-glow),inset 0 0 30px rgba(124,245,208,.4)}}

.action-round,.action-round.small-round{display:none} /* legacy right stack hidden */

/* icon helper */
.icn{width:20px;height:20px;vertical-align:middle;filter:drop-shadow(0 0 5px var(--mint-glow))}

/* ======================= RESULTS ======================= */
.results-screen{display:flex;align-items:center;justify-content:center}
.results-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(124,245,208,.12),transparent 60%),linear-gradient(180deg,#071019,#03060c)}
.results-inner{position:relative;z-index:2;width:100%;max-width:420px;text-align:center;display:flex;flex-direction:column;gap:16px;padding:20px}
.results-inner h2{margin:0;font:900 40px 'Unbounded','Onest',sans-serif;color:var(--mint);text-shadow:0 0 30px var(--mint-glow)}
.results-card{text-align:left}
.results-list{display:flex;flex-direction:column;gap:8px}
.result-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  background:rgba(7,14,22,.6);border:1px solid var(--stroke-soft)}
.result-row .place{font:900 18px 'Unbounded','Onest',sans-serif;color:var(--mint);min-width:32px}
.result-row .meta{font-size:11px;color:var(--muted);margin-top:2px}
.result-row .chip{margin-left:auto}

/* ======================= animations ======================= */
@keyframes hpLowPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.9)}}
.battle-toast{left:50%;top:22%;transform:translateX(-50%);z-index:40;padding:9px 15px;border-radius:999px;
  background:var(--glass2);backdrop-filter:var(--hud-blur);border:1px solid var(--stroke);
  font-size:13px;font-weight:800;color:#fff;letter-spacing:.02em}
.battle-toast.enemy{border-color:rgba(255,90,106,.5);animation:toastPop .18s ease-out}
.battle-toast.ally{border-color:rgba(82,255,144,.5)}
.battle-toast.warn{border-color:rgba(255,203,88,.5)}
@keyframes toastPop{0%{transform:translateX(-50%) scale(.82)}60%{transform:translateX(-50%) scale(1.06)}100%{transform:translateX(-50%) scale(1)}}

@keyframes shakeSoft{0%{transform:translate(0,0)}25%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,-1px)}100%{transform:translate(0,0)}}
@keyframes shakeHard{0%{transform:translate(0,0)}15%{transform:translate(-7px,4px)}30%{transform:translate(7px,-5px)}45%{transform:translate(-6px,3px)}60%{transform:translate(6px,4px)}75%{transform:translate(-4px,-3px)}100%{transform:translate(0,0)}}
.phone-frame.shake-soft{animation:shakeSoft .18s ease-in-out}
.phone-frame.shake-hard{animation:shakeHard .26s ease-in-out}

/* ======================= responsive: PORTRAIT vs LANDSCAPE ======================= */

/* ---- Shared compact tuning ---- */
.bottom-actions{gap:8px}

/* ============ PORTRAIT (phone upright) ============ */
@media (orientation:portrait){
  .scoreboard{top:calc(8px + env(safe-area-inset-top));gap:8px}
  .score-team{min-width:74px;padding:5px 10px}
  .score-number{font-size:19px}
  .score-ring{width:52px;height:52px}
  .score-time{font-size:13px}

  /* radar + killfeed: narrow, top-right, below scoreboard */
  .hud-right{width:38vw;max-width:150px;top:calc(78px + env(safe-area-inset-top));right:10px;gap:8px}
  .feed-item{font-size:9px}

  /* player card: bottom-left, compact */
  .hud-left{left:10px;bottom:120px}
  .player-card{min-width:150px;padding:8px}
  .portrait{width:38px;height:38px}

  /* hex controls above the bottom bar, left */
  .hex-controls{left:10px;bottom:196px}
  .hex-btn{width:50px;height:56px}
  .hex-btn img{width:22px;height:22px}

  /* fire button: right, above bottom bar */
  .fire-round{right:12px;bottom:150px;width:78px;height:78px;background-size:34px}

  /* ammo: sits just above fire, right */
  .ammo-panel{right:12px;bottom:236px;min-width:104px;padding:8px 12px}
  .ammo-nums{font-size:19px}

  /* weapon centered-bottom, pointing up into scene */

  /* bottom action row: reload + damage + target only (fire/grenade are dedicated buttons) */
  .bottom-actions{bottom:calc(10px + env(safe-area-inset-bottom));flex-wrap:wrap}
  .brand-title{font-size:44px}
}

/* ============ LANDSCAPE (phone sideways) ============ */
@media (orientation:landscape){
  .scoreboard{top:calc(10px + env(safe-area-inset-top))}
  .hud-right{width:180px;top:calc(90px + env(safe-area-inset-top));right:16px}
  .hud-left{left:16px;bottom:16px}
  .player-card{min-width:210px}
  .hex-controls{left:16px;bottom:118px}
  .fire-round{right:18px;bottom:100px;width:92px;height:92px}
  .ammo-panel{right:18px;bottom:16px}
  /* hide the redundant bottom text-button row in landscape — dedicated buttons cover it */
  .bottom-actions{bottom:calc(8px + env(safe-area-inset-bottom));left:auto;right:120px;width:auto}
}

/* very small screens safety */
@media (max-width:380px){
  .score-team{min-width:66px;padding:4px 8px}
  .score-number{font-size:17px}
  .player-card{min-width:138px}
  .hud-right{width:36vw}
}

/* ======================================================================
   v14 — SAFE ZONE (battle-royale signature) + phase banner + juice
   Зона = сжимающееся AR-кольцо; poison-края пульсируют когда сжимается;
   баннер фазы как в PUBG; cinematic HUD fade-in; directional damage.
====================================================================== */

/* zone layer sits above camera/vignette (z7) but below HUD (z20) */
.zone-layer{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}

/* the collimated safe-zone ring — a soft mint circle drawn in AR space */
.zone-ring{position:absolute;left:50%;top:50%;
  width:var(--zone-size,150vmax);height:var(--zone-size,150vmax);
  transform:translate(-50%,-50%);border-radius:50%;
  border:2px solid rgba(124,245,208,.55);
  box-shadow:0 0 0 1px rgba(124,245,208,.14) inset,
             0 0 40px rgba(124,245,208,.18),
             0 0 120px rgba(124,245,208,.10) inset;
  background:radial-gradient(circle at center,
             transparent 0 calc(50% - 3px),
             rgba(124,245,208,.05) calc(50% - 3px) 50%,
             transparent 50%);
  transition:width 2.6s cubic-bezier(.5,0,.2,1),height 2.6s cubic-bezier(.5,0,.2,1),border-color .4s;
  opacity:.9}
.zone-ring::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px dashed rgba(124,245,208,.30);
  animation:zoneSpin 26s linear infinite}
@keyframes zoneSpin{to{transform:rotate(360deg)}}

/* when zone is shrinking, ring turns amber and pulses */
.zone-ring.shrinking{border-color:rgba(255,203,88,.85);
  box-shadow:0 0 0 1px rgba(255,203,88,.2) inset,0 0 46px rgba(255,203,88,.28);
  animation:zonePulse .9s ease-in-out infinite}
@keyframes zonePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.4)}}

/* red poison vignette at screen edges, only visible while shrinking */
.poison-edges{position:absolute;inset:0;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 120px 30px rgba(255,90,106,.0);
  transition:opacity .5s}
.poison-edges.active{opacity:1;
  box-shadow:inset 0 0 130px 26px rgba(255,90,106,.42);
  animation:poisonBreathe 1.4s ease-in-out infinite}
@keyframes poisonBreathe{0%,100%{box-shadow:inset 0 0 120px 22px rgba(255,90,106,.30)}
  50%{box-shadow:inset 0 0 150px 34px rgba(255,90,106,.55)}}

/* phase banner (center, drops in like PUBG "phase closing") */
.phase-banner{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  z-index:34;text-align:center;pointer-events:none;
  animation:phaseIn 2.4s cubic-bezier(.2,.9,.2,1) forwards}
.phase-banner .phase-kicker{font-family:'Unbounded',sans-serif;font-weight:800;
  font-size:12px;letter-spacing:.42em;color:var(--warn);text-shadow:0 0 14px rgba(255,203,88,.6)}
.phase-banner .phase-title{font-family:'Unbounded',sans-serif;font-weight:900;
  font-size:clamp(20px,6vw,34px);letter-spacing:.06em;margin-top:6px;
  color:var(--text);text-shadow:0 0 24px rgba(124,245,208,.5),0 2px 10px rgba(0,0,0,.8)}
@keyframes phaseIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(1.25);filter:blur(6px)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
  80%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(.98);filter:blur(2px)}}

/* zone status chip (top-left under scoreboard) */
.zone-chip{position:absolute;top:calc(70px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);z-index:22;display:flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:999px;font-size:11px;letter-spacing:.14em;
  font-weight:700;text-transform:uppercase;color:var(--mint);
  background:var(--glass);backdrop-filter:var(--hud-blur);
  border:1px solid var(--stroke);box-shadow:0 0 18px rgba(0,0,0,.4)}
.zone-chip strong{color:var(--text);font-variant-numeric:tabular-nums}
.zone-chip.warn{color:var(--warn);border-color:rgba(255,203,88,.5)}
.zone-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 8px var(--mint-glow);animation:zoneDot 1.6s ease-in-out infinite}
.zone-chip.warn .zone-dot{background:var(--warn);box-shadow:0 0 8px rgba(255,203,88,.7)}
@keyframes zoneDot{0%,100%{opacity:1}50%{opacity:.35}}

/* directional damage arc — shows roughly where a hit came from */
.damage-dir{position:absolute;inset:0;z-index:33;pointer-events:none;opacity:0}
.damage-dir.active{opacity:1;animation:dmgDirFade .7s ease-out forwards}
.damage-dir::before{content:"";position:absolute;left:50%;top:50%;
  width:60vmax;height:60vmax;transform:translate(-50%,-50%) rotate(var(--dir,0deg));
  background:conic-gradient(from -18deg,rgba(255,90,106,.6),transparent 36deg);
  mask:radial-gradient(circle,transparent 30%,#000 60%);
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 60%)}
@keyframes dmgDirFade{0%{opacity:.9}100%{opacity:0}}

/* cinematic HUD fade-in: elements stagger in on battle enter */
.battle-screen.hud-intro .scoreboard,
.battle-screen.hud-intro .hud-left,
.battle-screen.hud-intro .hud-right,
.battle-screen.hud-intro .zone-chip,
.battle-screen.hud-intro .hex-controls,
.battle-screen.hud-intro .ammo-panel,
.battle-screen.hud-intro .control-stack{
  animation:hudIn .6s cubic-bezier(.2,.8,.2,1) both}
.battle-screen.hud-intro .scoreboard{animation-delay:.05s}
.battle-screen.hud-intro .zone-chip{animation-delay:.15s}
.battle-screen.hud-intro .hud-left{animation-delay:.22s}
.battle-screen.hud-intro .hud-right{animation-delay:.30s}
.battle-screen.hud-intro .hex-controls{animation-delay:.38s}
.battle-screen.hud-intro .ammo-panel,
.battle-screen.hud-intro .control-stack{animation-delay:.44s}
@keyframes hudIn{0%{opacity:0;transform:translateY(10px) scale(.98)}
  100%{opacity:1;transform:none}}

/* kill freeze — micro time-stop on a kill for weight */
.battle-screen.kill-freeze .camera-feed,
.battle-screen.kill-freeze .battle-bg-fallback,
.battle-screen.kill-freeze .target-layer{filter:brightness(1.5) contrast(1.15) saturate(1.2)}
.battle-screen.kill-freeze{animation:killFreeze .16s steps(1) 1}
@keyframes killFreeze{0%{filter:brightness(1.2)}100%{filter:none}}

/* landscape: nudge zone chip & phase banner up a touch */
@media (orientation:landscape){
  .zone-chip{top:calc(56px + env(safe-area-inset-top))}
  .phase-banner{top:30%}
}

/* ======================================================================
   v15 — карта ТЦ (лобби), мини-карта (бой), команды, ТОП-1 экран
====================================================================== */

/* --- lobby: mall map --- */
.mall-card{margin-top:10px}
.mall-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.mall-name{font-family:'Unbounded',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.06em;color:var(--text)}
.mall-map{width:100%;height:auto;display:block;border-radius:10px;
  background:radial-gradient(circle at 50% 45%,rgba(124,245,208,.04),transparent 70%)}
.mall-shop{fill:rgba(124,245,208,.04);stroke:rgba(124,245,208,.22);stroke-width:1}
.mall-lbl{fill:rgba(124,245,208,.5);font-size:7px;font-weight:700;letter-spacing:.15em;
  font-family:'Onest',sans-serif}
.spawn{stroke-width:0}
.spawn-blue{fill:#5ac8ff;filter:drop-shadow(0 0 4px rgba(90,200,255,.8))}
.spawn-red{fill:#ff5a6a;filter:drop-shadow(0 0 4px rgba(255,90,106,.8))}
.spawn-you{animation:youPulse 1.8s ease-in-out infinite}
@keyframes youPulse{0%,100%{opacity:.9;r:11}50%{opacity:.4;r:14}}
.spawn-lbl{font-size:6.5px;font-weight:800;letter-spacing:.1em;text-anchor:middle;
  font-family:'Onest',sans-serif}
.spawn-lbl.blue{fill:#5ac8ff}.spawn-lbl.red{fill:#ff5a6a}
.mall-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:10px;
  color:var(--muted);letter-spacing:.03em}
.mall-legend span{display:flex;align-items:center;gap:5px}
.mall-legend .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.mall-legend .dot.blue{background:#5ac8ff}
.mall-legend .dot.red{background:#ff5a6a}
.mall-legend .dot.mint{background:var(--mint)}

/* team accent on lobby avatars (reuse existing team-a/team-b if present) */
.avatar.team-a{box-shadow:0 0 0 2px rgba(90,200,255,.5)}
.avatar.team-b{box-shadow:0 0 0 2px rgba(255,90,106,.5)}
.player-row.you{background:rgba(124,245,208,.06);border-radius:10px}
.player-row .you-tag{font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--mint);
  background:rgba(124,245,208,.12);padding:2px 6px;border-radius:6px;margin-left:6px}

/* --- battle: mini-map --- */
.mini-map{position:absolute;z-index:22;
  right:calc(12px + env(safe-area-inset-right));
  bottom:calc(96px + env(safe-area-inset-bottom));
  width:88px;height:88px;border-radius:12px;
  background:rgba(8,14,20,.66);backdrop-filter:var(--hud-blur);
  border:1px solid var(--stroke);box-shadow:0 4px 20px rgba(0,0,0,.4);overflow:hidden}
.mini-ring{position:absolute;left:50%;top:50%;width:78%;height:78%;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1.5px solid rgba(124,245,208,.5);
  box-shadow:0 0 10px rgba(124,245,208,.25) inset;
  transition:width 2.6s cubic-bezier(.5,0,.2,1),height 2.6s cubic-bezier(.5,0,.2,1),border-color .4s}
.mini-ring.shrinking{border-color:rgba(255,203,88,.85);animation:zonePulse .9s ease-in-out infinite}
.mini-blip{position:absolute;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%)}
.mini-blip.you{left:50%;top:72%;background:var(--mint);
  box-shadow:0 0 8px var(--mint-glow);animation:zoneDot 1.6s ease-in-out infinite}
.mini-blip.ally{background:#5ac8ff;box-shadow:0 0 6px rgba(90,200,255,.7)}
.mini-blip.foe{background:#ff5a6a;box-shadow:0 0 6px rgba(255,90,106,.7)}
.mini-label{position:absolute;top:4px;left:0;right:0;text-align:center;
  font-size:7px;font-weight:800;letter-spacing:.2em;color:rgba(124,245,208,.55);
  font-family:'Onest',sans-serif}
@media (orientation:landscape){
  .mini-map{bottom:calc(76px + env(safe-area-inset-bottom));width:80px;height:80px}
}

/* --- results: TOP-1 battle-royale style --- */
.results-crown{font-family:'Unbounded',sans-serif;font-weight:900;
  font-size:clamp(30px,9vw,52px);letter-spacing:.02em;
  background:linear-gradient(180deg,#fff,var(--mint));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(124,245,208,.35);margin:2px 0}
.results-sub{font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:14px}
.results-standing{display:flex;justify-content:center;gap:10px;margin:10px 0 4px}
.stat-pill{background:var(--glass);border:1px solid var(--stroke);border-radius:10px;
  padding:8px 14px;text-align:center;backdrop-filter:var(--hud-blur)}
.stat-pill .n{font-family:'Unbounded',sans-serif;font-weight:800;font-size:18px;color:var(--text)}
.stat-pill .l{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.result-row .place.gold{color:#ffd764;text-shadow:0 0 12px rgba(255,215,100,.5)}

/* ======================================================================
   v16 — новое меню (hero-фон боец), grenade/shield визуал
====================================================================== */

/* menu hero background */
.menu-hero-bg{position:absolute;inset:0;z-index:0;
  background:url('menu-bg.jpg') center 30% / cover no-repeat;
  animation:menuHeroIn 1.2s ease-out both, menuHeroDrift 24s ease-in-out infinite alternate}
@keyframes menuHeroIn{0%{opacity:0;transform:scale(1.08)}100%{opacity:1;transform:scale(1.03)}}
@keyframes menuHeroDrift{0%{transform:scale(1.03) translateY(0)}100%{transform:scale(1.08) translateY(-2%)}}
.menu-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,10,14,.55) 0%,rgba(6,10,14,.2) 30%,rgba(6,10,14,.75) 68%,rgba(6,10,14,.96) 100%)}
.menu-grid-fx{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(124,245,208,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,245,208,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask:radial-gradient(circle at 50% 40%,#000,transparent 75%);
  -webkit-mask:radial-gradient(circle at 50% 40%,#000,transparent 75%)}
.menu-screen .menu-content{position:relative;z-index:3;display:flex;flex-direction:column;
  min-height:100%;justify-content:flex-end;gap:18px;padding:24px 22px calc(28px + env(safe-area-inset-bottom))}

/* logo */
.menu-screen .eyebrow{display:inline-flex;align-items:center;gap:7px;
  font-family:'Onest',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.24em;
  color:var(--mint);text-transform:uppercase;margin-bottom:10px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 8px var(--mint-glow);animation:zoneDot 1.4s ease-in-out infinite}
.brand-title{font-family:'Unbounded',sans-serif;font-weight:900;line-height:.9;
  font-size:clamp(52px,17vw,88px);letter-spacing:-.01em;margin:0;
  text-shadow:0 0 50px rgba(124,245,208,.35),0 4px 20px rgba(0,0,0,.6);
  animation:logoIn 1s cubic-bezier(.2,.9,.2,1) .2s both}
.brand-by{color:var(--text)}
.brand-strike{color:var(--mint);text-shadow:0 0 40px rgba(124,245,208,.7)}
@keyframes logoIn{0%{opacity:0;transform:translateY(24px);filter:blur(8px)}
  100%{opacity:1;transform:none;filter:blur(0)}}
.brand-underline{width:64px;height:3px;margin:12px 0 12px;border-radius:2px;
  background:linear-gradient(90deg,var(--mint),transparent);
  box-shadow:0 0 12px var(--mint-glow);animation:lineGrow .8s ease-out .6s both}
@keyframes lineGrow{0%{width:0;opacity:0}100%{width:64px;opacity:1}}
.brand-subtitle{font-size:14px;line-height:1.5;color:var(--text);max-width:34ch;
  opacity:.9;animation:fadeUp .8s ease-out .5s both}
@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}100%{opacity:.9;transform:none}}

/* menu card */
.menu-screen .menu-card{background:rgba(10,16,22,.62);backdrop-filter:var(--hud-blur);
  border:1px solid var(--stroke);border-radius:16px;padding:16px;
  animation:fadeUp .8s ease-out .7s both}
.big-cta{position:relative;overflow:hidden;font-family:'Unbounded',sans-serif;
  font-weight:800;letter-spacing:.04em;font-size:15px}
.cta-glow{position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:ctaSweep 3.2s ease-in-out infinite}
@keyframes ctaSweep{0%{left:-60%}55%,100%{left:130%}}

/* menu stats */
.menu-stats{display:flex;gap:10px;animation:fadeUp .8s ease-out .85s both}
.menu-stat{flex:1;text-align:center;background:rgba(10,16,22,.5);
  border:1px solid var(--stroke);border-radius:12px;padding:10px 6px;backdrop-filter:var(--hud-blur)}
.menu-stat strong{display:block;font-family:'Unbounded',sans-serif;font-weight:800;
  font-size:20px;color:var(--mint)}
.menu-stat span{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.menu-foot{text-align:center;font-size:10px;letter-spacing:.14em;color:var(--muted);
  opacity:.6;animation:fadeUp .8s ease-out 1s both}

/* --- grenade flash overlay --- */
.grenade-flash{position:absolute;inset:0;z-index:35;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 55%,rgba(255,220,150,.9),rgba(255,140,60,.5) 30%,transparent 65%)}
.grenade-flash.active{animation:grenadeBoom .5s ease-out}
@keyframes grenadeBoom{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.1)}
  100%{opacity:0;transform:scale(1.4)}}
.hex-btn.cooldown{opacity:.4;filter:grayscale(.6)}

/* --- shield bubble --- */
.shield-bubble{position:absolute;inset:0;z-index:12;pointer-events:none;opacity:0;
  border-radius:50%;
  box-shadow:inset 0 0 120px 20px rgba(124,245,208,.35),0 0 0 3px rgba(124,245,208,.4) inset;
  background:radial-gradient(circle at 50% 50%,transparent 55%,rgba(124,245,208,.12) 100%);
  transition:opacity .3s}
.shield-bubble.active{opacity:1;animation:shieldPulse 1.6s ease-in-out infinite}
.shield-bubble.flash{animation:shieldHit .2s ease-out}
@keyframes shieldPulse{0%,100%{box-shadow:inset 0 0 120px 20px rgba(124,245,208,.3),0 0 0 3px rgba(124,245,208,.35) inset}
  50%{box-shadow:inset 0 0 150px 30px rgba(124,245,208,.45),0 0 0 4px rgba(124,245,208,.6) inset}}
@keyframes shieldHit{0%{opacity:1;box-shadow:inset 0 0 160px 40px rgba(255,255,255,.5)}100%{opacity:1}}
.hex-btn.active{box-shadow:0 0 0 2px var(--mint),0 0 20px var(--mint-glow)}

/* ======================================================================
   v17 — LIGHT PREMIUM THEME + adaptive portrait/landscape backgrounds
   Светлая премиум-тема (стиль C). Мятный акцент сохранён (#7CF5D0),
   стекло стало светлым, текст — тёмный графит. Фоны свапаются по
   ориентации автоматически через @media (orientation).
   Этот блок идёт последним → переопределяет тёмную тему v10-v16.
====================================================================== */

:root{
  /* light palette */
  --l-bg:#eef3f6;
  --l-ink:#0f1e26;            /* main dark text on light */
  --l-ink-soft:#3f5560;       /* muted dark text */
  --l-glass:rgba(255,255,255,.66);
  --l-glass2:rgba(255,255,255,.82);
  --l-stroke:rgba(15,40,50,.14);
  --l-stroke-mint:rgba(46,140,120,.4);
  --mint-ink:#0c8f74;         /* accent readable on light */
  --l-shadow:0 8px 30px rgba(20,50,60,.14);
}

/* base surface -> light */
html,body{background:var(--l-bg);color:var(--l-ink)}
.app-shell,.phone-frame{background:var(--l-bg)}

/* soften the global scanline/hex overlay so it doesn't dirty light bg */
.phone-frame::after{opacity:.14;mix-blend-mode:multiply;
  background:repeating-linear-gradient(0deg,rgba(15,40,50,.03) 0 1px,transparent 1px 3px)}

/* ---------- MENU ---------- */
.menu-hero-bg{background-image:url('menu-bg.jpg');background-position:center 28%}
/* lighter scrim: keep photo bright, darken only bottom for text legibility */
.menu-scrim{background:linear-gradient(180deg,
  rgba(238,243,246,0) 0%,rgba(238,243,246,0) 34%,
  rgba(238,243,246,.55) 62%,rgba(238,243,246,.92) 100%)}
.menu-grid-fx{opacity:.22;mix-blend-mode:multiply;
  background-image:linear-gradient(rgba(12,143,116,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(12,143,116,.12) 1px,transparent 1px)}

.menu-screen .eyebrow{color:var(--mint-ink);text-shadow:none}
.live-dot{background:var(--mint-ink);box-shadow:0 0 8px rgba(12,143,116,.5)}
.brand-title{text-shadow:0 2px 14px rgba(255,255,255,.6),0 1px 3px rgba(20,50,60,.25)}
.brand-by{color:var(--l-ink)}
.brand-strike{color:var(--mint-ink);text-shadow:0 0 22px rgba(12,143,116,.35)}
.brand-underline{background:linear-gradient(90deg,var(--mint-ink),transparent);
  box-shadow:0 0 10px rgba(12,143,116,.4)}
.brand-subtitle{color:var(--l-ink-soft);opacity:1}

.menu-screen .menu-card{background:var(--l-glass2);backdrop-filter:blur(14px);
  border:1px solid var(--l-stroke);box-shadow:var(--l-shadow)}
.feature-box{background:var(--l-glass);border:1px solid var(--l-stroke);color:var(--l-ink)}
.feature-box::before{background:var(--mint-ink);box-shadow:0 0 8px rgba(12,143,116,.5)}
.menu-stat{background:var(--l-glass);border:1px solid var(--l-stroke)}
.menu-stat strong{color:var(--mint-ink)}
.menu-stat span{color:var(--l-ink-soft)}
.menu-foot{color:var(--l-ink-soft);opacity:.7}
.big-cta{color:#04231c}

/* ---------- LOBBY ---------- */
.lobby-hero-bg{position:absolute;inset:0;z-index:0;
  background:url('lobby-bg.jpg') center/cover no-repeat}
.lobby-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(238,243,246,.72),rgba(238,243,246,.9))}
.lobby-screen{position:relative}
.lobby-screen>*:not(.lobby-hero-bg):not(.lobby-scrim){position:relative;z-index:2}
.section-kicker{color:var(--mint-ink)}
.header-line h2{color:var(--l-ink)}
.room-code{background:rgba(12,143,116,.12);border:1px solid var(--l-stroke-mint);
  color:var(--mint-ink);text-shadow:none}
.lobby-topline{color:var(--l-ink-soft)}
.lobby-topline strong{color:var(--mint-ink)}
.player-row{background:var(--l-glass);border:1px solid var(--l-stroke)}
.player-row.you{background:rgba(12,143,116,.1)}
.player-row .you-tag{color:var(--mint-ink);background:rgba(12,143,116,.14)}
.role{color:var(--l-ink-soft)}
.mall-legend{color:var(--l-ink-soft)}

/* ---------- COUNTDOWN ---------- */
.countdown-backdrop{background:radial-gradient(circle at 50% 45%,rgba(12,143,116,.12),transparent 60%),var(--l-bg)}
.countdown-text{color:var(--mint-ink);text-shadow:0 0 30px rgba(12,143,116,.4)}
.countdown-label{color:var(--l-ink-soft)}

/* ---------- BATTLE (kept darker for camera/HUD contrast, but fallback = light) ---------- */
/* fallback bg uses the light bokeh image; HUD panels get a subtle dark backing for readability over live camera */
.battle-bg-fallback{background:url('battle-bg.jpg') center/cover no-repeat}
.battle-bg-fallback::before{opacity:.25}
/* battle HUD panels: semi-dark glass so they read over BOTH live camera and light fallback */
.score-team,.player-card,.killfeed,.ammo-panel,.mini-map{
  background:rgba(10,20,26,.52);backdrop-filter:blur(12px);
  border:1px solid rgba(124,245,208,.28)}
.score-number,.ammo-nums{color:#fff}
.bar-label strong{color:#fff}
/* keep battle accents mint-bright on dark HUD (unchanged from base) */

/* ---------- RESULTS / WIN ---------- */
.results-backdrop{position:absolute;inset:0;z-index:0;
  background:url('win-bg.jpg') center/cover no-repeat}
.results-backdrop::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(238,243,246,.55),rgba(238,243,246,.86))}
.results-inner{position:relative;z-index:2}
.results-crown{background:linear-gradient(180deg,var(--l-ink),var(--mint-ink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 16px rgba(255,255,255,.5)}
.results-sub{color:var(--l-ink-soft)}
.stat-pill{background:var(--l-glass2);border:1px solid var(--l-stroke);
  box-shadow:var(--l-shadow)}
.stat-pill .n{color:var(--l-ink)}
.stat-pill .l{color:var(--l-ink-soft)}
.results-card{background:var(--l-glass2)!important;border:1px solid var(--l-stroke)!important;
  box-shadow:var(--l-shadow)}

/* ---------- generic light buttons on light screens (menu/lobby/results) ---------- */
.menu-screen .secondary,.lobby-screen .secondary,.results-screen .secondary,
.menu-screen .ghost,.lobby-screen .ghost{
  color:var(--l-ink);border-color:var(--l-stroke)}

/* ======================================================================
   ADAPTIVE BACKGROUNDS — portrait vs landscape auto-swap
====================================================================== */
@media (orientation:landscape){
  .menu-hero-bg{background-image:url('menu-bg-land.jpg');background-position:center 40%}
  .lobby-hero-bg{background-image:url('lobby-bg-land.jpg')}
  .battle-bg-fallback{background-image:url('battle-bg-land.jpg')}
  .results-backdrop{background-image:url('win-bg-land.jpg')}
}

/* ======================================================================
   v18 — переопределяющий блок (в самом конце файла)
   1) полупрозрачное оружие + коллиматор  2) типы врагов
   3) подсветка «вне зоны»  4) светлые HUD-иконки гранаты/щита
   5) плавные анимации результатов
====================================================================== */

/* ---------- 1. TRANSLUCENT WEAPON + COLLIMATOR RED-DOT ---------- */
.ar-weapon{
  position:absolute; left:50%; bottom:-2%;
  width:min(72vw,360px); transform:translateX(-50%);
  pointer-events:none; z-index:11;
  opacity:.9;
  filter:drop-shadow(0 0 14px rgba(124,245,208,.35)) drop-shadow(0 6px 18px rgba(0,0,0,.4));
  transition:transform .09s ease-out;
  animation:wpnFloat 4.2s ease-in-out infinite;
}
.ar-weapon svg{width:100%;height:auto;display:block}
@keyframes wpnFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}

/* recoil kick when firing (weaponWrap gets .kick / .auto-fire from JS) */
.ar-frame.kick .ar-weapon{transform:translateX(-50%) translateY(7px) scale(1.015)}
.ar-frame.auto-fire .ar-weapon{animation:wpnRattle .12s linear infinite}
@keyframes wpnRattle{0%{transform:translateX(-50%) translateY(4px)}50%{transform:translateX(-51%) translateY(7px)}100%{transform:translateX(-49%) translateY(4px)}}

/* collimator sight: floating glass tube with holographic red dot, dead center */
.collimator{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:13;pointer-events:none}
.collimator-tube{
  position:relative;width:112px;height:112px;border-radius:50%;
  border:2px solid rgba(191,255,240,.55);
  box-shadow:0 0 22px rgba(124,245,208,.35),inset 0 0 26px rgba(124,245,208,.18);
  backdrop-filter:blur(1.5px);
}
.collimator-glass{
  position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(191,255,240,.16),rgba(12,143,116,.06) 60%,transparent 72%);
}
.collimator-reticle{
  position:absolute;left:50%;top:50%;width:70px;height:70px;transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    linear-gradient(rgba(255,90,106,.5),rgba(255,90,106,.5)) center/1.5px 70px no-repeat,
    linear-gradient(rgba(255,90,106,.5),rgba(255,90,106,.5)) center/70px 1.5px no-repeat;
  opacity:.7;
}
.collimator-dot{
  position:absolute;left:50%;top:50%;width:11px;height:11px;transform:translate(-50%,-50%);
  border-radius:50%;background:#ff3b4e;
  box-shadow:0 0 10px 3px rgba(255,59,78,.85),0 0 22px 6px rgba(255,59,78,.5);
  animation:dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{opacity:.95;transform:translate(-50%,-50%) scale(1)}50%{opacity:.6;transform:translate(-50%,-50%) scale(.82)}}
.ar-frame.kick .collimator-dot{box-shadow:0 0 16px 5px rgba(255,59,78,1),0 0 30px 9px rgba(255,59,78,.6)}
@media (orientation:landscape){
  .collimator{top:42%}
  .collimator-tube{width:96px;height:96px}
  .ar-weapon{width:min(46vw,320px);bottom:-4%}
}

/* ---------- 2. ENEMY TYPES (grunt / runner / brute) ---------- */
.target .tag .type-badge{
  display:inline-block;font-size:9px;font-weight:800;letter-spacing:.5px;
  padding:1px 5px;border-radius:6px;margin-left:4px;vertical-align:middle;
  font-family:'Onest',sans-serif;text-transform:uppercase;
}
.target.t-runner .tag .type-badge{background:rgba(90,200,255,.22);color:#8fe0ff;border:1px solid rgba(90,200,255,.5)}
.target.t-brute  .tag .type-badge{background:rgba(255,150,80,.22);color:#ffb27a;border:1px solid rgba(255,150,80,.55)}
.target.t-grunt  .tag .type-badge{background:rgba(255,90,106,.20);color:#ff9aa5;border:1px solid rgba(255,90,106,.5)}
/* brute = tankier: thicker outline; runner = leaner + faint speed streak */
.target.t-brute .outline{box-shadow:0 0 0 2px rgba(255,150,80,.6),0 0 16px rgba(255,150,80,.35)}
.target.t-runner .outline{box-shadow:0 0 0 1px rgba(90,200,255,.6),0 0 14px rgba(90,200,255,.4)}
.target.t-runner{transition:left .3s linear,top .3s linear}

/* ---------- 3. OUT-OF-ZONE EDGE WARNING (когда кольцо мало) ---------- */
.battle-screen .oob-warning{
  position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 140px 40px rgba(255,59,78,.0);
  transition:opacity .5s ease;
}
.battle-screen.oob .oob-warning{
  opacity:1;
  animation:oobBreathe 1.8s ease-in-out infinite;
}
@keyframes oobBreathe{
  0%,100%{box-shadow:inset 0 0 120px 30px rgba(255,59,78,.28)}
  50%{box-shadow:inset 0 0 170px 55px rgba(255,59,78,.5)}
}
.oob-chip{
  position:absolute;left:50%;top:12%;transform:translateX(-50%);
  z-index:14;pointer-events:none;
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:13px;letter-spacing:1px;
  color:#fff;background:rgba(200,30,45,.82);
  padding:7px 16px;border-radius:999px;
  border:1px solid rgba(255,120,130,.7);
  box-shadow:0 4px 20px rgba(255,30,50,.4);
  opacity:0;transition:opacity .35s ease;
}
.battle-screen.oob .oob-chip{opacity:1;animation:oobChipPulse 1.4s ease-in-out infinite}
@keyframes oobChipPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}

/* ---------- 4. LIGHT-THEME HUD ICON CAPSULES (grenade / shield) ---------- */
/* иконки-капсулы читаемее в бою: чёткое стекло + мятная окантовка */
.hex-controls .hex-btn .hex-bg{
  background:linear-gradient(180deg,rgba(20,32,40,.72),rgba(12,20,26,.82))!important;
  border:1px solid rgba(124,245,208,.45)!important;
  box-shadow:0 4px 16px rgba(0,0,0,.4),inset 0 0 14px rgba(124,245,208,.12)!important;
}
.hex-controls .hex-btn .cool{color:#bffff0}
.hex-controls .hex-btn.cooldown .hex-bg{border-color:rgba(255,150,80,.5)!important;opacity:.7}
.hex-controls .hex-btn.active .hex-bg{border-color:rgba(124,245,208,.9)!important;box-shadow:0 0 20px rgba(124,245,208,.5),inset 0 0 18px rgba(124,245,208,.3)!important}

/* ---------- 5. SMOOTH WIN/LOSS ANIMATIONS ---------- */
.results-inner>*{opacity:0;transform:translateY(14px);animation:resIn .5s cubic-bezier(.2,.7,.3,1) forwards}
.results-inner>*:nth-child(1){animation-delay:.05s}
.results-inner>*:nth-child(2){animation-delay:.15s}
.results-inner>*:nth-child(3){animation-delay:.25s}
.results-inner>*:nth-child(4){animation-delay:.35s}
.results-inner>*:nth-child(5){animation-delay:.45s}
.results-inner>*:nth-child(6){animation-delay:.55s}
@keyframes resIn{to{opacity:1;transform:none}}
.results-crown{animation:crownPop .7s cubic-bezier(.2,.8,.2,1.2) .2s both}
@keyframes crownPop{0%{opacity:0;transform:scale(.5) translateY(10px)}60%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
/* win vs loss accent on the results screen */
.results-screen.win .results-crown{filter:drop-shadow(0 0 22px rgba(124,245,208,.6))}
.results-screen.loss .results-crown{background:linear-gradient(180deg,#ff8a94,#c8323d)!important;-webkit-background-clip:text;background-clip:text}
.results-screen.win .results-backdrop{filter:saturate(1.15) brightness(1.02)}
.results-screen.loss .results-backdrop{filter:saturate(.6) brightness(.82)}

/* v18 fix — стек-порядок: коллиматор/оружие выше HUD-целей; старый crosshair убираем
   (его роль теперь у коллиматора), muzzle остаётся. */
.ar-frame{z-index:18!important}
.ar-weapon{z-index:18}
.collimator{z-index:19}
.crosshair-wrap{display:none!important}       /* старый двойной прицел скрыт */
.lock-text{z-index:19}
.muzzle-flash{z-index:19}

/* v18 fix — oob поверх vignette, чуть заметнее */
.battle-screen .oob-warning{z-index:8}
.battle-screen.oob .oob-warning{box-shadow:inset 0 0 140px 36px rgba(255,59,78,.34)}