/* ==========================================================================
   VEIL — interface
   ========================================================================== */
:root{
  --bg:#04060b;
  --bg2:#080d16;
  --ink:#dce8f7;
  --ink-dim:#7b8ba5;
  --ink-faint:#4a586e;

  --cyan:#4de2ff;
  --cyan-d:#0f6d8a;
  --violet:#b06bff;
  --violet-d:#5a2b96;
  --amber:#ffb347;
  --rose:#ff5e8a;
  --mint:#5ef2c7;

  --hunter:var(--cyan);
  --wraith:var(--violet);

  --panel:rgba(10,16,26,.66);
  --panel-2:rgba(14,22,35,.85);
  --line:rgba(120,170,210,.16);
  --line-hot:rgba(77,226,255,.45);

  --f-ui: 'Rajdhani', 'Eurostile', 'Bahnschrift', 'DIN Alternate', 'Segoe UI', system-ui, sans-serif;
  --f-mono: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', 'Consolas', monospace;

  --r: 3px;
  --sp: cubic-bezier(.16,1.02,.3,1);
  --safe-t: env(safe-area-inset-top,0px);
  --safe-b: env(safe-area-inset-bottom,0px);
  --safe-l: env(safe-area-inset-left,0px);
  --safe-r: env(safe-area-inset-right,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden}
body{
  background:
    radial-gradient(120% 80% at 50% -10%, #0d1a2b 0%, transparent 60%),
    radial-gradient(80% 60% at 110% 110%, #1a0f2e 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:16px;
  letter-spacing:.02em;
  user-select:none;
  touch-action:none;
  overscroll-behavior:none;
}
button,input{font-family:inherit;color:inherit}
h1,h2,h3,h4,p,ul{margin:0;padding:0}
ul{list-style:none}

/* ---------- global overlays ---------- */
#grain,#scanlines{position:fixed;inset:0;pointer-events:none;z-index:900}
#grain{
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 700ms steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}33%{transform:translate(-3px,2px)}66%{transform:translate(2px,-2px)}100%{transform:translate(0,0)}
}
#scanlines{
  opacity:.32;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.5) 2px 3px);
  mix-blend-mode:multiply;
}
body.no-fx #grain,body.no-fx #scanlines{display:none}

/* ---------- screens ---------- */
.screen{
  position:fixed;inset:0;display:none;
  padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  opacity:0;
}
.screen.on{display:flex;animation:screenIn .5s var(--sp) forwards}
.screen.off{display:flex;animation:screenOut .28s ease forwards;pointer-events:none}
@keyframes screenIn{from{opacity:0;transform:scale(1.015) translateY(8px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes screenOut{from{opacity:1}to{opacity:0;transform:scale(.99);filter:blur(4px)}}

/* ==========================================================================
   BOOT
   ========================================================================== */
#boot{flex-direction:column;align-items:center;justify-content:center;gap:14px}
.boot-eye{width:96px;height:96px;filter:drop-shadow(0 0 18px rgba(77,226,255,.65));animation:eyePulse 2.4s ease-in-out infinite}
@keyframes eyePulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.boot-title{font-size:clamp(15px,3.4vw,22px);font-weight:700;letter-spacing:.42em;text-indent:.42em;color:#cdefff;text-shadow:0 0 24px rgba(77,226,255,.6);white-space:nowrap}
.boot-bar{width:210px;height:2px;background:rgba(120,180,220,.15);overflow:hidden}
.boot-bar i{display:block;height:100%;width:35%;background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:bootSlide 1.1s ease-in-out infinite}
@keyframes bootSlide{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}
.boot-status{font-family:var(--f-mono);font-size:11px;color:var(--ink-faint);letter-spacing:.22em;text-transform:uppercase}

/* ==========================================================================
   PANELS / BUTTONS
   ========================================================================== */
.panel{
  position:relative;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  border-radius:var(--r);
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:0 24px 70px -30px #000, inset 0 1px 0 rgba(255,255,255,.05);
}
.panel::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(140deg,rgba(77,226,255,.35),transparent 35%,transparent 65%,rgba(176,107,255,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
}

.btn{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:13px 20px;border:1px solid var(--line);background:rgba(18,28,44,.5);
  border-radius:var(--r);cursor:pointer;overflow:hidden;
  transition:transform .16s var(--sp),border-color .2s,background .2s,box-shadow .25s;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
}
.btn-t{font-size:15px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;position:relative;z-index:2}
.btn-sub{font-size:10px;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase;position:relative;z-index:2}
.btn:hover{border-color:var(--line-hot);background:rgba(28,45,66,.62);transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn:disabled{opacity:.34;pointer-events:none;filter:grayscale(.6)}
.btn-glow{position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(77,226,255,.28) 50%,transparent 80%);transform:translateX(-120%);}
.btn:hover .btn-glow{animation:sheen .8s ease}
@keyframes sheen{to{transform:translateX(120%)}}
.btn-primary{
  border-color:rgba(77,226,255,.5);
  background:linear-gradient(180deg,rgba(31,86,110,.65),rgba(12,34,49,.7));
  box-shadow:0 0 0 1px rgba(77,226,255,.12),0 10px 40px -18px var(--cyan);
}
.btn-primary .btn-t{color:#d7f7ff;text-shadow:0 0 14px rgba(77,226,255,.7)}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(77,226,255,.3),0 14px 46px -16px var(--cyan)}
.btn-ghost{background:rgba(14,22,34,.42)}
.btn-sm{padding:9px 14px}.btn-sm .btn-t{font-size:12px}
.btn-lg{padding:17px 26px}.btn-lg .btn-t{font-size:18px}
.btn-wraith{border-color:rgba(176,107,255,.5);background:linear-gradient(180deg,rgba(69,36,110,.6),rgba(28,14,48,.7))}
.btn-wraith .btn-t{color:#e9d6ff;text-shadow:0 0 14px rgba(176,107,255,.7)}

.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r);
  border:1px solid var(--line);background:rgba(16,24,38,.6);cursor:pointer;font-size:17px;
  transition:.18s var(--sp)
}
.icon-btn:hover{border-color:var(--line-hot);transform:translateY(-1px)}
.link{background:none;border:0;cursor:pointer;color:var(--ink-dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:.2s}
.link:hover{color:var(--cyan);text-shadow:0 0 12px rgba(77,226,255,.6)}
.dot{color:var(--ink-faint);margin:0 8px}

/* ==========================================================================
   MENU
   ========================================================================== */
#menu{flex-direction:column;align-items:center;justify-content:center;gap:26px}
.bg-field{position:absolute;inset:0;z-index:-1;opacity:.55}
.bg-field canvas{width:100%;height:100%;display:block}

.brand{text-align:center;position:relative}
.logo{
  font-size:clamp(30px,7.4vw,78px);font-weight:800;line-height:.95;
  letter-spacing:.1em;text-indent:.1em;white-space:nowrap;
  background:linear-gradient(180deg,#eafaff 12%,#5ec4e8 52%,#2a6d95 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(77,226,255,.45));
  position:relative;animation:logoIn 1s var(--sp) both;
}
@keyframes logoIn{from{opacity:0;letter-spacing:.34em;filter:blur(14px)}to{opacity:1;letter-spacing:.1em;filter:blur(0)}}
/* the ampersand keeps its own colour: background-clip:text on the parent would
   otherwise paint it with the same cyan gradient as the words */
.logo .amp{
  font-style:normal;-webkit-text-fill-color:#b06bff;
  filter:drop-shadow(0 0 18px rgba(176,107,255,.7));
  font-size:.78em;padding:0 .04em;
}
.logo::after{
  content:attr(data-text);position:absolute;inset:0;
  background:linear-gradient(180deg,#ff6bd5,#7a2bff);-webkit-background-clip:text;background-clip:text;color:transparent;
  mix-blend-mode:screen;opacity:.5;animation:glitch 5.5s infinite steps(1);
}
@keyframes glitch{
  0%,92%{transform:none;opacity:0}
  93%{transform:translate(-3px,1px);opacity:.65}
  95%{transform:translate(3px,-2px);opacity:.5}
  97%{transform:translate(-2px,-1px);opacity:.6}
  99%{transform:none;opacity:0}
}
.tagline{font-size:12px;letter-spacing:.5em;text-indent:.5em;text-transform:uppercase;color:var(--ink-dim);margin-top:10px}
.tagline .vs{color:var(--violet)}

.menu-card{width:min(430px,94vw);padding:22px;display:flex;flex-direction:column;gap:14px;animation:cardIn .7s .15s var(--sp) both}
@keyframes cardIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.field{display:flex;flex-direction:column;gap:6px}
.field-lbl{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint)}
.field input,.code-in input{
  width:100%;padding:12px 14px;background:rgba(4,8,14,.7);border:1px solid var(--line);
  border-radius:var(--r);font-size:16px;letter-spacing:.16em;text-transform:uppercase;outline:none;
  transition:.2s;font-family:var(--f-mono)
}
.field input:focus,.code-in input:focus{border-color:var(--line-hot);box-shadow:0 0 0 3px rgba(77,226,255,.1),0 0 22px -6px var(--cyan)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.join-box{max-height:0;overflow:hidden;transition:max-height .4s var(--sp),opacity .3s;opacity:0}
.join-box.open{max-height:80px;opacity:1}
.code-in{display:grid;grid-template-columns:1fr auto;gap:8px}
.code-in input{text-align:center;font-size:24px;letter-spacing:.5em;text-indent:.5em}
.menu-foot{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding-top:4px}
.netstate{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase}
.netstate.ok{color:var(--mint)}.netstate.bad{color:var(--rose)}

.room-list{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:min(560px,94vw)}
.room-chip{
  display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);
  background:rgba(12,20,32,.55);border-radius:var(--r);cursor:pointer;font-family:var(--f-mono);font-size:12px;
  transition:.2s var(--sp)
}
.room-chip:hover{border-color:var(--line-hot);transform:translateY(-2px)}
.room-chip b{letter-spacing:.2em;color:var(--cyan)}
.room-chip i{font-style:normal;color:var(--ink-faint)}

/* ==========================================================================
   LOBBY
   ========================================================================== */
#lobby{flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(77,226,255,.3) transparent}
.lobby-wrap{width:min(1080px,100%);margin:auto;display:flex;flex-direction:column;gap:18px}
.lobby-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.code-badge{display:flex;flex-direction:column;gap:2px}
.code-lbl{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint)}
.code-val{
  background:none;border:0;cursor:pointer;display:flex;align-items:baseline;gap:10px;padding:0;
}
.code-val span{font-family:var(--f-mono);font-size:30px;font-weight:700;letter-spacing:.34em;color:#d9f6ff;text-shadow:0 0 22px rgba(77,226,255,.55)}
.code-val em{font-style:normal;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);opacity:0;transition:.2s}
.code-val:hover em{opacity:1}
.score-badge{margin-left:auto;display:flex;align-items:center;gap:10px}
.sc{display:flex;align-items:center;gap:8px}
.sc i{font-style:normal;font-size:9px;letter-spacing:.24em;color:var(--ink-faint)}
.sc b{font-family:var(--f-mono);font-size:26px}
.sc-h b{color:var(--cyan);text-shadow:0 0 18px rgba(77,226,255,.5)}
.sc-w b{color:var(--violet);text-shadow:0 0 18px rgba(176,107,255,.5)}
.sc-sep{color:var(--ink-faint);font-size:20px}

.lobby-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:18px}
.teams{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.team{
  position:relative;padding:14px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(12,20,32,.7),rgba(6,10,18,.55));
  display:flex;flex-direction:column;gap:10px;min-height:230px;
  transition:.3s var(--sp)
}
.team::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;opacity:.85}
.team-hunter::after{background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.team-wraith::after{background:linear-gradient(90deg,transparent,var(--violet),transparent)}
.team-hunter{--tc:var(--cyan)}
.team-wraith{--tc:var(--violet)}
.team.mine{border-color:color-mix(in srgb,var(--tc) 55%,transparent);box-shadow:0 0 40px -22px var(--tc),inset 0 0 40px -30px var(--tc)}
.team-head{display:flex;align-items:center;gap:10px}
.team-ic{width:34px;height:34px;color:var(--tc);filter:drop-shadow(0 0 10px var(--tc))}
.team-ic svg{width:100%;height:100%}
.team-head h3{font-size:14px;letter-spacing:.24em}
.team-head p{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.team-n{margin-left:auto;font-family:var(--f-mono);font-size:24px;color:var(--tc)}
.plist{display:flex;flex-direction:column;gap:6px;flex:1}
.plist li{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r);
  background:rgba(255,255,255,.03);border:1px solid transparent;font-size:13px;letter-spacing:.08em;
  animation:rowIn .35s var(--sp) both;
}
@keyframes rowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.plist li.me{border-color:var(--line-hot);background:rgba(77,226,255,.07)}
.plist li.offline{opacity:.42;filter:grayscale(.8)}
.plist li.offline .pmeta{color:var(--amber)}
.pdot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 10px currentColor;background:currentColor}
.pname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmeta{font-family:var(--f-mono);font-size:10px;color:var(--ink-faint)}
.crown{color:var(--amber);font-size:11px}
.join-team{margin-top:auto}

.maps{display:flex;flex-direction:column;gap:10px}
.sec-title{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-faint)}
.map-cards{display:flex;flex-direction:column;gap:8px}
.map-card{
  position:relative;display:flex;align-items:center;gap:12px;padding:10px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:rgba(10,16,26,.5);
  transition:.22s var(--sp);overflow:hidden;text-align:left
}
.map-card:hover{transform:translateX(3px);border-color:var(--line-hot)}
.map-card.sel{border-color:var(--line-hot);background:rgba(77,226,255,.08);box-shadow:0 0 30px -18px var(--cyan)}
.map-card.sel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.map-card canvas{width:74px;height:44px;image-rendering:pixelated;border-radius:2px;flex:none;opacity:.9}
.map-meta h5{font-size:13px;letter-spacing:.2em;margin:0}
.map-meta p{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.start-zone{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.hint{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);min-height:13px;text-align:center}

/* ==========================================================================
   GAME
   ========================================================================== */
#game{padding:0}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
#hud{position:absolute;inset:0;pointer-events:none;z-index:10;
  padding:calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) calc(10px + var(--safe-b)) calc(12px + var(--safe-l))}

.hud-top{position:absolute;top:calc(10px + var(--safe-t));left:0;right:0;display:flex;align-items:flex-start;justify-content:center;gap:22px}
.alive{display:flex;align-items:center;gap:7px;padding:5px 12px;border:1px solid var(--line);background:rgba(6,10,18,.55);border-radius:var(--r);backdrop-filter:blur(8px)}
.alive span{font-family:var(--f-mono);font-size:20px;font-weight:700}
.alive i{font-style:normal;font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}
.alive-h span{color:var(--cyan);text-shadow:0 0 14px rgba(77,226,255,.6)}
.alive-w span{color:var(--violet);text-shadow:0 0 14px rgba(176,107,255,.6)}
.timer-wrap{text-align:center}
.timer{font-family:var(--f-mono);font-size:30px;font-weight:700;letter-spacing:.08em;text-shadow:0 0 20px rgba(180,220,255,.35)}
.timer.low{color:var(--rose);animation:timerPulse 1s infinite}
@keyframes timerPulse{0%,100%{opacity:1}50%{opacity:.45}}
.round-tag{font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint)}

#minimap{position:absolute;left:calc(12px + var(--safe-l));top:calc(10px + var(--safe-t));width:150px;height:86px;
  image-rendering:pixelated;border:1px solid var(--line);border-radius:var(--r);background:rgba(3,6,11,.6);opacity:.8}

.feed{position:absolute;right:calc(12px + var(--safe-r));top:calc(10px + var(--safe-t));display:flex;flex-direction:column;gap:5px;align-items:flex-end;max-width:44vw}
.feed-row{
  display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:var(--r);
  background:rgba(6,10,18,.6);border:1px solid var(--line);font-size:11px;letter-spacing:.08em;
  backdrop-filter:blur(6px);animation:feedIn .32s var(--sp) both
}
.feed-row.out{animation:feedOut .4s ease forwards}
@keyframes feedIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes feedOut{to{opacity:0;transform:translateX(26px)}}
.feed-ic{opacity:.85}

.hud-bottom{position:absolute;left:calc(14px + var(--safe-l));right:calc(14px + var(--safe-r));bottom:calc(12px + var(--safe-b));display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.vitals{display:flex;align-items:center;gap:10px}
.role-chip{
  padding:5px 11px;border-radius:var(--r);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  border:1px solid currentColor;background:rgba(6,10,18,.5)
}
.role-chip.hunter{color:var(--cyan);box-shadow:0 0 22px -8px var(--cyan)}
.role-chip.wraith{color:var(--violet);box-shadow:0 0 22px -8px var(--violet)}
.hp-wrap{display:flex;align-items:center;gap:9px}
.hp-bar{position:relative;width:min(230px,34vw);height:9px;background:rgba(255,255,255,.07);border:1px solid var(--line);overflow:hidden;border-radius:2px}
.hp-bar i{position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,#2ee6a8,#7cf3c0);box-shadow:0 0 16px rgba(46,230,168,.6);transition:transform .18s var(--sp)}
.hp-bar u{position:absolute;inset:0;transform-origin:left;background:rgba(255,90,120,.5);transition:transform .7s .16s ease}
.hp-bar.low i{background:linear-gradient(90deg,#ff4d6d,#ff9a7a);box-shadow:0 0 18px rgba(255,77,109,.7)}
#hpNum{font-family:var(--f-mono);font-size:17px;min-width:34px}

.weapon{display:flex;align-items:center;gap:12px}
.ammo-row{display:flex;gap:3px;align-items:flex-end}
.ammo-pip{width:4px;height:16px;background:var(--cyan);box-shadow:0 0 10px rgba(77,226,255,.7);transition:.18s var(--sp);border-radius:1px}
.ammo-pip.spent{background:rgba(255,255,255,.13);box-shadow:none;height:9px}
.wpn-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;color:var(--ink-dim)}
.wpn-label.reloading{color:var(--amber);animation:timerPulse .7s infinite}
.ability{position:relative;width:42px;height:42px;display:grid;place-items:center}
.ability svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ab-bg{fill:rgba(6,10,18,.6);stroke:rgba(120,170,210,.2);stroke-width:3}
.ab-arc{fill:none;stroke:var(--violet);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:100.5;stroke-dashoffset:0;filter:drop-shadow(0 0 6px var(--violet));transition:stroke-dashoffset .12s linear}
#abIcon{font-size:12px;font-weight:700;letter-spacing:.1em;z-index:2}
.ability.ready #abIcon{color:#fff;text-shadow:0 0 12px var(--violet)}

.center-msg{position:absolute;left:0;right:0;top:38%;text-align:center;font-size:clamp(26px,6vw,58px);font-weight:800;letter-spacing:.22em;opacity:0}
.center-msg.show{animation:cmsg 1.3s var(--sp) forwards}
@keyframes cmsg{0%{opacity:0;transform:scale(1.35);filter:blur(14px)}25%{opacity:1;transform:scale(1);filter:blur(0)}75%{opacity:1}100%{opacity:0;transform:scale(.96)}}

.hitmark{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%) scale(.4);opacity:0;
  background:
    linear-gradient(45deg,transparent 44%,#fff 44% 56%,transparent 56%),
    linear-gradient(-45deg,transparent 44%,#fff 44% 56%,transparent 56%)}
.hitmark.on{animation:hm .3s ease forwards}
.hitmark.kill{filter:drop-shadow(0 0 8px var(--rose))}
@keyframes hm{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}

.dmg-vig{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,transparent 42%,rgba(255,30,60,.55) 100%)}
.dmg-vig.hit{animation:dv .55s ease forwards}
@keyframes dv{0%{opacity:1}100%{opacity:0}}

.dead-overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(80% 60% at 50% 50%,transparent,rgba(2,4,8,.72))}
.dead-overlay.on{display:flex;animation:screenIn .8s var(--sp)}
.dead-t{font-size:clamp(24px,5vw,44px);font-weight:800;letter-spacing:.3em;color:#ff6b86;text-shadow:0 0 30px rgba(255,60,90,.6)}
.dead-s{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-faint)}

/* Lives under the minimap: the bottom-right corner already belongs to the
   weapon block, where this button was invisible and easy to miss. */
.net-lost{
  position:absolute;inset:0;z-index:25;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(70% 60% at 50% 50%,rgba(4,8,14,.7),rgba(2,4,8,.93));
  backdrop-filter:blur(3px)
}
.net-lost.on{display:flex;animation:screenIn .35s var(--sp)}
.nl-spin{width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(255,179,71,.18);border-top-color:var(--amber);
  animation:nlSpin .9s linear infinite}
@keyframes nlSpin{to{transform:rotate(360deg)}}
.nl-t{font-size:clamp(16px,3vw,26px);font-weight:800;letter-spacing:.3em;color:var(--amber);
  text-shadow:0 0 30px rgba(255,179,71,.5)}
.nl-s{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint)}
.nl-dots::after{content:'';animation:nlDots 1.4s steps(4,end) infinite}
@keyframes nlDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

.quit-btn{
  position:absolute;z-index:30;
  left:calc(12px + var(--safe-l));top:calc(104px + var(--safe-t));
  display:flex;align-items:center;gap:7px;
  padding:9px 14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);background:rgba(8,13,22,.72);border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;opacity:.85;transition:.18s var(--sp);
  backdrop-filter:blur(6px)
}
.quit-btn .q-x{font-size:13px;line-height:1;opacity:.8}
.quit-btn:hover{opacity:1;color:#ffdbe4;border-color:rgba(255,94,138,.65);
  background:rgba(60,14,28,.75);box-shadow:0 0 24px -10px var(--rose);transform:translateX(2px)}
.quit-btn:active{transform:scale(.96)}

/* ---------- touch ---------- */
.touch{position:absolute;inset:0;z-index:15;display:none}
body.touch-mode .touch{display:block}
.stick{position:absolute;bottom:calc(26px + var(--safe-b));left:calc(26px + var(--safe-l));width:118px;height:118px;border-radius:50%;
  border:1px solid rgba(120,180,220,.22);background:radial-gradient(circle,rgba(20,32,50,.42),rgba(8,14,24,.22));
  backdrop-filter:blur(3px);touch-action:none}

.stick i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(150,220,255,.6),rgba(40,90,130,.35));
  border:1px solid rgba(140,210,255,.4);box-shadow:0 0 22px rgba(77,226,255,.3);transition:transform .06s linear}
.stick.active i{box-shadow:0 0 30px rgba(77,226,255,.6)}
/* column-reverse puts FIRE — first in the DOM — closest to the thumb, where
   the aim stick used to sit. */
.tbtns{
  position:absolute;right:calc(24px + var(--safe-r));bottom:calc(24px + var(--safe-b));
  display:flex;flex-direction:column-reverse;align-items:center;gap:10px
}
.tbtn{
  min-width:78px;padding:13px 15px;border-radius:var(--r);border:1px solid rgba(120,180,220,.28);
  background:rgba(14,24,38,.55);backdrop-filter:blur(6px);font-size:11px;letter-spacing:.18em;font-weight:700;
  color:var(--ink);cursor:pointer;transition:.1s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))
}
.tbtn:active,.tbtn.held{background:rgba(77,226,255,.28);border-color:var(--cyan);transform:scale(.95)}
.tbtn-fire{
  width:112px;height:112px;min-width:0;padding:0;border-radius:50%;clip-path:none;
  font-size:15px;letter-spacing:.22em;
  border:2px solid rgba(255,94,138,.55);background:radial-gradient(circle at 40% 35%,rgba(120,26,52,.6),rgba(48,12,24,.62));
  color:#ffd9e2;box-shadow:0 0 30px -12px var(--rose),inset 0 0 24px -10px var(--rose)
}
.tbtn-fire:active,.tbtn-fire.held{background:radial-gradient(circle at 40% 35%,rgba(255,94,138,.5),rgba(120,26,52,.5));border-color:var(--rose);transform:scale(.94)}
.tbtn-sm{min-width:66px;padding:9px 12px;font-size:10px;opacity:.85}


/* ---- touch layout: keep the HUD out of the thumb zones ---- */
body.touch-mode .hud-bottom{
  left:50%;right:auto;transform:translateX(-50%);
  width:auto;flex-direction:row;align-items:center;gap:22px;
  bottom:calc(10px + var(--safe-b));
}
body.touch-mode .hp-bar{width:min(180px,26vw)}
body.touch-mode .weapon{order:1}
body.touch-mode .wpn-label{display:none}
body.touch-mode .quit-btn{padding:11px 16px}
@media (max-width:620px){
  .quit-btn{top:calc(78px + var(--safe-t));padding:8px 11px}
  .quit-btn .q-t{display:none}
  body.touch-mode .hud-bottom{gap:12px}
}

/* ==========================================================================
   ROUND OVER
   ========================================================================== */
#over{align-items:center;justify-content:center}
.over-wrap{width:min(620px,94vw);display:flex;flex-direction:column;gap:18px;align-items:center}
.over-banner{text-align:center;animation:cardIn .6s var(--sp) both}
.over-banner span{display:block;font-size:clamp(34px,8vw,68px);font-weight:800;letter-spacing:.24em;text-indent:.24em}
.over-banner em{font-style:normal;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint)}
.over-banner.hunter span{color:#bff0ff;text-shadow:0 0 46px rgba(77,226,255,.75)}
.over-banner.wraith span{color:#e6ccff;text-shadow:0 0 46px rgba(176,107,255,.75)}
.score{width:100%;border-collapse:collapse;font-size:13px;animation:cardIn .6s .1s var(--sp) both}
.score th{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);text-align:left;padding:6px 10px;border-bottom:1px solid var(--line)}
.score td{padding:9px 10px;border-bottom:1px solid rgba(120,170,210,.07);font-family:var(--f-mono)}
.score td:first-child{font-family:var(--f-ui);letter-spacing:.08em}
.score tr.me td{background:rgba(77,226,255,.07)}
.score .tag{font-size:9px;letter-spacing:.18em;padding:2px 7px;border:1px solid currentColor;border-radius:2px}
.tag.hunter{color:var(--cyan)}.tag.wraith{color:var(--violet)}
.over-foot{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)}

/* ==========================================================================
   MODAL / TOAST
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:800;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(2,4,9,.7);backdrop-filter:blur(8px)}
.modal.on{display:flex;animation:screenIn .35s var(--sp)}
.modal-card{width:min(560px,94vw);max-height:82vh;overflow-y:auto;overflow-x:hidden;padding:26px;
  scrollbar-width:thin;scrollbar-color:rgba(77,226,255,.35) transparent}
.modal-card::-webkit-scrollbar{width:8px;height:8px}
.modal-card::-webkit-scrollbar-track{background:transparent}
.modal-card::-webkit-scrollbar-thumb{background:rgba(77,226,255,.28);border-radius:4px}
.modal-card::-webkit-scrollbar-thumb:hover{background:rgba(77,226,255,.5)}
.modal kbd{white-space:nowrap}
.modal-x{position:absolute;right:10px;top:10px}
.modal h3{font-size:16px;letter-spacing:.2em;margin-bottom:14px;color:var(--cyan)}
.modal h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin:16px 0 6px}
.modal p,.modal li{font-size:13px;line-height:1.65;color:var(--ink-dim);letter-spacing:.02em}
.modal li{margin:4px 0;padding-left:16px;position:relative}
.modal li::before{content:'▸';position:absolute;left:0;color:var(--cyan)}
.modal kbd{font-family:var(--f-mono);font-size:11px;padding:2px 6px;border:1px solid var(--line);border-radius:3px;background:rgba(255,255,255,.05);color:var(--ink)}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(120,170,210,.08)}
.switch{position:relative;width:44px;height:24px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid var(--line);cursor:pointer;transition:.25s}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--ink-dim);transition:.25s var(--sp)}
.switch.on{background:rgba(77,226,255,.25);border-color:var(--line-hot)}
.switch.on::after{left:22px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.range{width:150px;accent-color:var(--cyan)}

.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);z-index:950;opacity:0;pointer-events:none;
  padding:11px 20px;border-radius:var(--r);background:rgba(10,16,26,.9);border:1px solid var(--line-hot);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(10px);
  box-shadow:0 16px 50px -20px #000}
.toast.on{animation:toastIn 2.6s var(--sp) forwards}
@keyframes toastIn{
  0%{opacity:0;transform:translate(-50%,20px)}
  10%{opacity:1;transform:translate(-50%,0)}
  85%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,-10px)}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .lobby-grid{grid-template-columns:1fr}
  .lobby-wrap{padding-bottom:20px}
  .teams{grid-template-columns:1fr 1fr}
  .team{min-height:180px}
}
@media (max-width:620px){
  .teams{grid-template-columns:1fr}
  .score th:nth-child(5),.score td:nth-child(5){display:none}
  #minimap{width:104px;height:60px}
  .hud-top{gap:10px}
  .timer{font-size:22px}
  .alive span{font-size:16px}
  .hud-bottom{align-items:flex-start;flex-direction:column;gap:8px}
  .weapon{order:-1}
}
@media (orientation:portrait) and (max-width:900px){
  #game::after{
    content:'ПОВЕРНИТЕ УСТРОЙСТВО';position:absolute;inset:0;z-index:60;display:grid;place-items:center;
    background:rgba(3,6,12,.94);font-size:14px;letter-spacing:.3em;color:var(--cyan);text-align:center
  }
}