/* Ночная смена — in-game HUD: weapon / ammo / currency plate, camera-log kill feed, camera alerts, Tab score, perk cards. */
/* ================= in-game HUD ================= */
.hud{position:absolute;display:flex;gap:8px;pointer-events:none}
.hud.tl{left:calc(16px + var(--safe-l));bottom:calc(14px + var(--safe-b));flex-direction:column;align-items:flex-start;gap:6px;max-width:46%}
.hud.tr{top:calc(14px + var(--safe-t));right:calc(16px + var(--safe-r));flex-direction:column;align-items:flex-end;width:min(340px,40vw)}
#padStat{font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
#padStat:empty{display:none}
.hud.tl .me{display:flex;align-items:stretch;background:var(--plate);border:var(--bw) solid var(--line);box-shadow:inset 3px 0 0 var(--cyan)}
.hud.tl .me>span{display:flex;align-items:baseline;gap:10px;padding:8px 14px 8px 16px}
.hud.tl .me>span+span{border-left:1px solid var(--line);padding-left:14px}
.hud.tl .me em{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.hud.tl .me b{font:600 36px/1 var(--disp);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#fff}
.hud.tl .me .souls em,.hud.tl .me .souls b{color:var(--amber)}
.hud.tl .me .wico{width:20px;height:20px;margin-right:6px;vertical-align:-4px;color:var(--cyan)}   /* «Арсенал»: weapon line icon (ui/icons.js) */
.hud.tl .me .wpn b small{font-size:.45em;color:var(--dim);margin-left:2px}   /* magazine / reserve */
.hud.tl .me .souls:empty{display:none}
/* techno-guru chip (public/techno.js hud): cameras · blackout ready / cooldown · hack charges; a refusal line under it */
.hud.tl .me .tk{flex-wrap:wrap;align-items:center;gap:4px 12px}
.hud.tl .me .tk[hidden]{display:none}
.hud.tl .me .tk .tki{display:inline-flex;align-items:center;gap:5px;color:var(--cyan)}
.hud.tl .me .tk .tki .ico{width:18px;height:18px}
.hud.tl .me .tk .tki b{font-size:26px}
.hud.tl .me .tk .tki b small{font-size:.5em;color:var(--dim);margin-left:1px}
.hud.tl .me .tk .tki.off{color:var(--dim)} .hud.tl .me .tk .tki.off b{color:var(--dim)}
.hud.tl .me .tk em{flex-basis:100%;color:var(--amber);letter-spacing:.12em;font-size:10px}
body.touchp .hud.tl .me .tk{display:none}   /* phone: the count + cooldown live on the ОСОБОЕ button (touch.css) */
/* kill feed = camera log */
.feed{width:100%;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.feed .logln{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:0;border-right:2px solid var(--line2);animation:logIn .25s ease-out both}
.feed .logln:nth-child(2){opacity:.8}.feed .logln:nth-child(3){opacity:.6}.feed .logln:nth-child(n+4){display:none}
.feed .k,.feed .v{font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.06em}
.feed .w{color:var(--dim)}
.feed .me{font-weight:700;color:var(--cyan);text-transform:uppercase;letter-spacing:.06em}
.feed .mine{border-right-color:var(--red)} .feed .mykill{border-right-color:var(--cyan)}
.feed .mine .k{color:var(--mag)}
.feed .h2h{margin-left:8px;color:var(--dim)}.feed .h2h b{color:var(--cyan)}
.feed .pend{opacity:.7}
.feed .fico{width:14px;height:14px;vertical-align:-2px;color:var(--dim)}   /* weapon / ability icon */
.feed .mykill{background:rgba(53,230,255,.10)} .feed .mykill .fico{color:var(--cyan)}   /* your kills stand out */
/* your kill line (public/killfb.js): over the bottom of the screen on PC, under the top HUD on the phone; never on
   the HUD plates, the minimap or the touch buttons (scripts/killfb-shots.mjs measures it on 4 screens) */
.kfb{position:absolute;left:50%;bottom:calc(24% + var(--safe-b));transform:translate(-50%,6px);display:flex;flex-direction:column;align-items:center;gap:2px;
  pointer-events:none;opacity:0;transition:opacity .18s,transform .18s;z-index:5;max-width:min(560px,70vw);text-align:center}
.kfb.on{opacity:1;transform:translate(-50%,0)}
.kfb b{font:700 26px/1.05 var(--disp);letter-spacing:.06em;color:#fff;background:var(--plate);border:var(--bw) solid var(--line);box-shadow:inset 0 -2px 0 var(--red);padding:6px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.kfb span{font:600 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--amber);background:var(--plate);padding:4px 8px}
.kfb.cy b{box-shadow:inset 0 -2px 0 var(--cyan);color:var(--cyan)}
.kfb.rd span{color:var(--red)}
.kfb.gy b{box-shadow:inset 0 -2px 0 #8a5a62;color:#b0a0aa}   /* a guest / a teammate: dull grey-red, no victory colour */
.kfb.gy span{color:#a8838a}
body.touchp .kfb{bottom:auto;top:59%;max-width:78vw}   /* under your body, over the thumbs */
body.touchp .kfb b{font-size:18px;padding:4px 10px}
body.touchp .kfb span{font-size:10px}
@keyframes logIn{from{opacity:0;transform:translateX(8px)}}
/* pick-up chip (touch), top bar (touch) */
#grab{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(40px + var(--safe-b));display:none}
@media (hover:none){#grab{display:inline-flex}}
#topbar{position:absolute;top:calc(8px + var(--safe-t));right:calc(10px + var(--safe-r));display:none;gap:6px;z-index:6}
body.touchp #topbar{display:flex}
body.touchp .hud.tr{top:calc(56px + var(--safe-t))}
.tb{display:grid;place-items:center;width:var(--tap);height:var(--tap);padding:0;background:rgba(7,5,11,.8);border:var(--bw) solid var(--line);color:var(--ink);cursor:pointer;pointer-events:auto}
.tb.on{border-color:var(--cyan);color:var(--cyan)}
.tb svg,.mx svg,.mbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* phone HUD: compact, one line */
html body.touchp .hud.tl{bottom:calc(8px + var(--safe-b));left:50%;transform:translateX(-50%);max-width:44vw;align-items:center}
body.touchp .hud.tl .me>span{padding:5px 10px}
body.touchp .hud.tl .me b{font-size:22px}
body.touchp .hud.tl .me em{font-size:9px}
@media (orientation:portrait){html body.touchp .hud.tl{top:calc(10px + var(--safe-t));bottom:auto;left:calc(12px + var(--safe-l));transform:none;align-items:flex-start}}

/* ================= camera alerts (banners), PvP head-to-head ================= */
.alert{position:absolute;left:50%;top:calc(clamp(40px,11vh,110px) + var(--safe-t));transform:translateX(-50%);z-index:9;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 14px 7px;background:rgba(7,5,11,.86);width:max-content;max-width:40vw;box-sizing:border-box;
  --cc:var(--cyan);--cl:8px;--cw:1.5px;--dur:2.4s;
  background-image:linear-gradient(var(--cc),var(--cc)),linear-gradient(var(--cc),var(--cc)),linear-gradient(var(--cc),var(--cc)),linear-gradient(var(--cc),var(--cc)),linear-gradient(var(--cc),var(--cc)),linear-gradient(var(--cc),var(--cc)),linear-gradient(var(--cc),var(--cc)),linear-gradient(var(--cc),var(--cc));
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
  background-size:var(--cl) var(--cw),var(--cw) var(--cl),var(--cl) var(--cw),var(--cw) var(--cl),var(--cl) var(--cw),var(--cw) var(--cl),var(--cl) var(--cw),var(--cw) var(--cl);background-repeat:no-repeat}
.alert.show{animation:alIn var(--dur) ease-out both}
/* compact (every alert but the round's main moments): a red dot + ONE title line, the sub as one tiny line under it */
.alert .rec{display:none}
.alert .al-t{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 19px/1.1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:#fff;text-align:center}
.alert .al-t::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 3px 0;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red);vertical-align:middle}
.alert .al-cam{color:var(--cyan)}
.alert .al-s{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 9px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.alert .al-s:empty{display:none}
/* big: «САТАНА ВСТАЛ», «ПОБЕДА / ПОРАЖЕНИЕ» — half the old card, the camera line on top */
.alert.big{gap:3px;padding:7px 18px 8px;max-width:min(560px,70vw);--cl:14px;--cw:2px}
.alert.big .rec{display:inline-flex;font-size:10px}
.alert.big .al-t{font-size:clamp(18px,2.2vw,23px);text-shadow:-1.5px 0 rgba(255,62,165,.6),1.5px 0 rgba(53,230,255,.5)}
.alert.big .al-t::before{display:none}
.alert.big .al-s{font-size:10px;color:var(--ink2)}
.alert.big.nocam .rec{display:none}   /* «ПЕЧАТЬ НЕ УДЕРЖАЛИ»: no «КАМ 13 · АЛТАРЬ» over the title (SOC-186) */
.alert.wsub .al-s{white-space:normal;overflow:visible;text-align:center}   /* the ritual's began / complete: the hint line whole, two lines on a phone if it must */
.alert[data-tone=red]{--cc:var(--red)} .alert[data-tone=amber]{--cc:var(--amber)} .alert[data-tone=mag]{--cc:var(--mag)}
body.touchp .alert{max-width:40vw;padding:5px 10px 6px}
body.touchp .alert .al-t{font-size:15px}
body.touchp .alert.big{max-width:70vw}
body.touchp .alert.big .al-t{font-size:18px}
@media (orientation:portrait){body.touchp .alert{max-width:82vw}}
@media (orientation:portrait){body.touchp .alert.wsub{max-width:calc(100vw - 124px)}}   /* a card with its hint (the ritual's began / complete): clear of the left column (the minimap, the radio, the eye) — the hint wraps instead */   /* 40 % of a portrait phone is ~150 px: one short line still has to fit */
@keyframes alIn{0%{opacity:0;transform:translateX(-50%) translateY(-6px)}8%{opacity:1;transform:translateX(-50%)}82%{opacity:1}100%{opacity:0}}
.h2h-ban{position:absolute;left:50%;top:calc(34% + var(--safe-t));transform:translateX(-50%);z-index:9;pointer-events:none;display:none;align-items:center;gap:14px;padding:8px 16px;
  background:var(--plate);border:var(--bw) solid var(--line);box-shadow:inset 3px 0 0 var(--cyan)}
.h2h-ban.show{display:flex;animation:alIn 2.4s ease-out both}
.h2h-ban .hb-tag{color:var(--cyan)}
.h2h-ban .hb-name{font:600 22px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--mag)}
.h2h-ban .hb-sc{font-size:28px;color:#fff}.h2h-ban .hb-sc i{font-style:normal;color:var(--dim);margin:0 .1em}.h2h-ban .hb-sc .chg{color:var(--cyan)}

/* ================= score (Tab / Y / touch button): camera-log table ================= */
.board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;width:min(640px,92vw);max-height:86vh;overflow:auto;box-sizing:border-box;
  padding:16px 20px 12px;background:rgba(7,5,11,.94);box-shadow:inset 3px 0 0 var(--cyan);pointer-events:none;font:500 12.5px/1.2 var(--mono);font-variant-numeric:tabular-nums}
.board header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding-bottom:14px}
.board header>b{font:600 19px/1.1 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:#fff;min-width:0}
.board header .rec{color:var(--red)}
.board header>span:last-child{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.board ol{margin:0;padding:0;list-style:none}
.brow{display:grid;grid-template-columns:2em minmax(0,1fr) 5em 5.5em 5.5em;gap:8px;align-items:center;padding:7px 8px;color:var(--ink)}
.brow>span:nth-child(n+3){text-align:right}
.brow.bh{padding-top:0;color:var(--dim);font-size:10px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--line2)}
.board li{border-bottom:1px solid var(--line)}
.board li>span:first-child{color:var(--dim)}
.board li .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 16px/1 var(--disp);letter-spacing:.05em;text-transform:uppercase}
.board li .s{color:var(--amber);font:600 17px/1 var(--disp)}
.board li .r,.board li .b{color:var(--ink2);font:500 15px/1 var(--disp)}
.board li.me{box-shadow:inset 3px 0 0 var(--cyan);background:rgba(53,230,255,.06)}
.board li.me .n,.board li.me>span:first-child{color:var(--cyan)}
.board footer{display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.board footer b{color:#fff}
.board footer span:empty{display:none}
#ping{margin-left:auto;color:var(--cyan)}

/* ================= perk picker ================= */
#perkPanel{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(80px + var(--safe-b));width:min(900px,96vw);display:flex;flex-direction:column;gap:10px;pointer-events:none;z-index:7}
#perkPanel h3{margin:0;display:flex;justify-content:center;align-items:center;gap:18px}
#perkPanel h3>*{background:var(--plate);padding:7px 12px}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:560px){.perks{grid-template-columns:1fr;gap:8px}.perks .ncard .nc-flav,.perks .ncard .nc-stats{display:none}.perks .ncard .nc-in{padding:10px 12px;gap:4px}.perks .ncard b.nc-title{font-size:19px}}
@media (max-height:520px){.perks .ncard .nc-flav{display:none}.perks .ncard .nc-in{padding:10px 12px;gap:5px}.perks .ncard b.nc-title{font-size:18px}}
/* card (perks, bar shop, implant shop): plate + 1.5px line; the focused one gets camera corners */
.ncard{--trim:var(--mag);--cc:var(--cyan);--cl:18px;--cw:2px;position:relative;display:block;margin:0;padding:6px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;pointer-events:auto;font:12px/1.4 var(--mono);
  animation:ncIn .3s ease-out backwards;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes ncIn{from{opacity:0;transform:translateY(8px)}}
.ncard .nc-in{position:relative;display:flex;flex-direction:column;gap:8px;min-height:100%;box-sizing:border-box;padding:14px 16px 12px;background:rgba(7,5,11,.9);border:var(--bw) solid var(--line);box-shadow:inset 3px 0 0 var(--trim)}
.nc-head{display:flex;align-items:center;gap:10px;min-height:36px}
.nc-ico{flex:0 0 36px;height:36px;display:grid;place-items:center;border:var(--bw) solid color-mix(in srgb,var(--trim) 60%,transparent);color:var(--trim);background:rgba(7,5,11,.6)}
.nc-ico .ico{width:20px;height:20px}
.nc-tag{flex:1;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.nc-tag .kb{color:var(--amber)}
.nc-badge{font:700 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bg);background:var(--amber);padding:4px 6px}
.ncard .gpk{display:none;font:700 10px/1.8 var(--mono);font-style:normal;color:var(--bg);background:var(--cyan);border-radius:50%;width:1.8em;text-align:center}
.ncard b.nc-title{display:block;font:600 22px/1.05 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:#fff}
.ncard .nc-flav{font:italic 400 13px/1.35 var(--serif);color:#d8cfe4}
.ncard .nc-desc{font:400 11px/1.45 var(--mono);color:var(--dim)}
.nc-stats{display:flex;flex-wrap:wrap;margin-top:auto;padding-top:8px;border-top:1px solid var(--line);font:500 11px/1.2 var(--mono);font-variant-numeric:tabular-nums}
.nc-stats span{display:flex;flex-direction:column;gap:3px;padding-right:12px;margin-right:12px;border-right:1px solid var(--line);color:#fff}
.nc-stats span:last-child{border-right:0;margin-right:0}
.nc-stats em{font:500 9px/1 var(--mono);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.ncard.sel,.ncard.on{background-image:linear-gradient(var(--cc),var(--cc)),linear-gradient(var(--cc),var(--cc)),linear-gradient(var(--cc),var(--cc)),linear-gradient(var(--cc),var(--cc)),linear-gradient(var(--cc),var(--cc)),linear-gradient(var(--cc),var(--cc)),linear-gradient(var(--cc),var(--cc)),linear-gradient(var(--cc),var(--cc));
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
  background-size:var(--cl) var(--cw),var(--cw) var(--cl),var(--cl) var(--cw),var(--cw) var(--cl),var(--cl) var(--cw),var(--cw) var(--cl),var(--cl) var(--cw),var(--cw) var(--cl);background-repeat:no-repeat}
.ncard.sel .nc-in,.ncard.on .nc-in{border-color:color-mix(in srgb,var(--cyan) 55%,transparent)}
body.pad .ncard.sel .gpk{display:inline-block}
.ncard.taken{animation:ncTaken .42s ease-out forwards;pointer-events:none}
@keyframes ncTaken{to{opacity:0;transform:translateY(-14px)}}
.ncard.dis{opacity:.45}
.ncard.cursed .nc-in{box-shadow:inset 3px 0 0 var(--red)}
@media (prefers-reduced-motion:reduce){.ncard,.alert.show,.feed .logln{animation:none}}


/* v0.8 hints (public/newbie.js, public/reconnect.js set inline styles; the look is overridden here) */
#nbHint{padding:9px 16px!important;border:var(--bw) solid var(--line)!important;border-left:0!important;box-shadow:inset 3px 0 0 var(--amber)!important;background:var(--plate)!important;color:var(--ink)!important;font:500 12px/1.45 var(--mono)!important;letter-spacing:.08em!important}
#rcBanner{border:0!important;box-shadow:none!important;background:var(--plate)!important;color:#fff!important;font:600 20px/1.2 var(--disp)!important;letter-spacing:.08em!important;padding:14px 26px!important}
#rcBanner::before{content:"● rec · пересменка";display:block;margin-bottom:6px;font:500 10px/1 var(--mono);letter-spacing:.22em;color:var(--red)}
/* souls-carry: «+N фишек» / «N фишек → ник» in the feed — currency = amber */
.feed .sl{color:var(--amber);font-size:10px;letter-spacing:.04em}
/* the first-shift nudge sits at the top on phones: a camera alert steps below it instead of over it */
html body.touchp:has(#nudge) .alert{top:calc(96px + var(--safe-t))}
@media (orientation:portrait){html body.touchp:has(#nudge) .alert{top:calc(200px + var(--safe-t))}}

/* minimap (public/ui/minimap.js): the club plan in a camera frame; fog arenas only. Desktop top-left, C / click = full;
   phone: small, under the left column, a tap = full screen */
.mmap{--cl:14px;--cw:2px;position:absolute;left:calc(16px + var(--safe-l));top:calc(14px + var(--safe-t));width:clamp(216px,17vw,288px);aspect-ratio:4/3;z-index:4;
  background-color:rgba(7,5,11,.72);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;pointer-events:auto;touch-action:manipulation}
.mmap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mmap .mm-tag{position:absolute;left:12px;bottom:10px;display:none;align-items:center;gap:5px;font:500 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);pointer-events:none}
.mmap .mm-tag i{width:5px;height:5px;border-radius:50%;background:var(--red);box-shadow:0 0 5px var(--red)}
.mmap.full{--cl:26px;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,calc(86vh * 4 / 3));z-index:10;background-color:rgba(7,5,11,.97)}
.mmap.full .mm-tag{display:flex;font-size:11px}   /* the one word, full screen only */
body.touchp .mmap{left:calc(12px + var(--safe-l));top:calc(100px + var(--safe-t));width:112px}
body.touchp .mmap.full{left:50%;top:50%;width:min(94vw,calc(88vh * 4 / 3))}
@media (orientation:landscape){body.touchp .mmap:not(.full){top:calc(10px + var(--safe-t))}}
@media (orientation:portrait){body.touchp.tninja .mmap:not(.full){top:calc(122px + var(--safe-t))}}   /* the ninja's weapon plate is the form switch (taller, two lines): the chat chip moves down with it */
/* ninja forms: the «Q · сюрикены» hint; on a phone the weapon plate itself is the form switch (tap) */
.hud.tl .me .wpn .fsw{margin-left:10px;color:var(--dim)}
body.touchp.tninja .hud.tl .me .wpn.nf{pointer-events:auto;cursor:pointer;min-height:40px;align-items:center;box-shadow:inset 0 0 0 1px var(--cyan);touch-action:none}
body.touchp.tninja .hud.tl .me .wpn.nf:active{background:rgba(53,230,255,.12)}
/* «Ball of Satan» on a phone (public/fx/devils.js drawPhone): the round plate sits under the menu buttons in portrait /
   in the top row in landscape — the kill feed and the camera alerts step below it */
@media (orientation:portrait){html body.touchp.dvround .hud.tr{top:calc(112px + var(--safe-t))}}
html body.touchp.dvround .alert{top:calc(118px + var(--safe-t))}
@media (orientation:landscape){html body.touchp.dvround .alert{top:calc(66px + var(--safe-t))}html body.touchp.dvround:has(#nudge) .alert{top:calc(122px + var(--safe-t))}}