/* Ночная смена — design system «Камера наблюдения» (grew from the release banner, tools/release/template.mjs).
   Tokens + components only; screens live in ui/screens/*.css. Docs: docs/art-direction.md.
   Rules: Oswald caps for titles/names/numbers, JetBrains Mono for labels/data/kbd (tracking .14–.22em),
   PT Serif italic only for the inner voice. Flat dark plates, 1.5px lines, camera corner frames, amber = action.
   Rain / blinds / grain belong to MENU backdrops only (.bd-*) — never over gameplay. Thin glow only (kant, title). */
:root{
  /* palette */
  --bg:#07050b; --bg2:#0d0a14; --plate:rgba(7,5,11,.86); --plate2:rgba(7,5,11,.6);
  --ink:#ece6f2; --ink2:#cfc6da; --dim:#9a90a8; --mute:#6c6379;
  --mag:#ff3ea5;   /* kant, second title line, the enemy / killer */
  --cyan:#35e6ff;  /* camera frames, «ты», live counters */
  --amber:#ffb547; /* buttons, currency, «новое» tape */
  --red:#ff3355;   /* REC, death kant */
  --live:#3dff9a;  /* online dot */
  --line:rgba(236,230,242,.16); --line2:rgba(236,230,242,.28);
  /* type */
  --disp:"Oswald","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --serif:"PT Serif",Georgia,"Times New Roman",serif;
  --t-hero:clamp(44px,8.2vw,118px); --t-h1:clamp(30px,5.4vw,84px); --t-h2:26px; --t-h3:19px; --t-num:54px;
  --t-body:14px; --t-lbl:11px; --t-kick:13px;
  --trk-lbl:.2em; --trk-kick:.22em; --trk-h:.05em;
  /* space (4px grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --bw:1.5px; --corner:26px; --tap:44px;
  --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);
  /* legacy aliases (older modules read these) */
  --hot:var(--mag); --gold:var(--amber); --panel:var(--plate); --noir:var(--bg); --display:var(--disp); --cond:var(--disp);
  color-scheme:dark;
}

/* ---------- text ---------- */
.kicker{display:flex;align-items:center;gap:.9em;font:500 var(--t-kick)/1 var(--mono);letter-spacing:var(--trk-kick);text-transform:uppercase;color:var(--amber);white-space:nowrap}
.kicker>i{flex:none;width:.6em;height:.6em;background:var(--mag);box-shadow:0 0 8px var(--mag)}
.kicker b{font-weight:500;color:var(--ink)} .kicker .s{color:var(--dim)}
.title{margin:0;font:700 var(--t-hero)/.86 var(--disp);text-transform:uppercase;letter-spacing:.035em;color:#fff;
  text-shadow:-2px 0 rgba(255,62,165,.7),2px 0 rgba(53,230,255,.55)}
.title>span{display:block} .title .l2{color:var(--mag);text-shadow:0 0 22px rgba(255,62,165,.45)}
.rule{height:2px;background:linear-gradient(90deg,var(--mag),rgba(255,62,165,0));box-shadow:0 0 10px var(--mag)}
.lbl{font:500 var(--t-lbl)/1.1 var(--mono);letter-spacing:var(--trk-lbl);text-transform:uppercase;color:var(--dim)}
.h{font:500 var(--t-h2)/1.02 var(--disp);letter-spacing:var(--trk-h);text-transform:uppercase;color:#fff}
.num{font:600 1em/1 var(--disp);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.voice{font:italic 400 17px/1.45 var(--serif);color:#d8cfe4}
.voice b{margin-right:6px;font:500 11px var(--mono);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--mag)}
.dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live)}
.dot.rec{background:var(--red);box-shadow:0 0 8px var(--red)}
kbd{font:700 .78em/1 var(--mono);letter-spacing:.12em;color:inherit;background:none;border:1.5px solid currentColor;border-color:color-mix(in srgb,currentColor 45%,transparent);padding:3px 6px;border-radius:0;text-transform:uppercase}

/* ---------- camera corner frame: <div class="camf"> (any size; --cc colour, --cl corner length) ---------- */
.camf{--cc:var(--cyan);--cl:var(--corner);--cw:2px;position:relative;
  background:
    linear-gradient(var(--cc),var(--cc)) left top/var(--cl) var(--cw),linear-gradient(var(--cc),var(--cc)) left top/var(--cw) var(--cl),
    linear-gradient(var(--cc),var(--cc)) right top/var(--cl) var(--cw),linear-gradient(var(--cc),var(--cc)) right top/var(--cw) var(--cl),
    linear-gradient(var(--cc),var(--cc)) left bottom/var(--cl) var(--cw),linear-gradient(var(--cc),var(--cc)) left bottom/var(--cw) var(--cl),
    linear-gradient(var(--cc),var(--cc)) right bottom/var(--cl) var(--cw),linear-gradient(var(--cc),var(--cc)) right bottom/var(--cw) var(--cl);
  background-repeat:no-repeat}
/* camera tag under / inside a frame: «● кам 01 · охранник» */
.camtag{display:inline-flex;align-items:center;gap:8px;padding:4px 9px 4px 7px;background:rgba(7,5,11,.8);font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);white-space:nowrap}
.camtag>i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}
/* REC + timecode: <span class="rec"><i></i>rec <b>08:32:14</b></span> */
.rec{display:inline-flex;align-items:center;gap:10px;font:500 var(--t-lbl)/1 var(--mono);letter-spacing:var(--trk-lbl);text-transform:uppercase;color:var(--red)}
.rec>i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:recBlink 1.2s steps(1,end) infinite}
.rec b{font-weight:500;color:var(--ink2);font-variant-numeric:tabular-nums}
@keyframes recBlink{50%{opacity:.15}}
/* b/w camera still with scanlines: <div class="photo" style="background-image:url(/ui/art/guard.jpg)"></div> */
.photo{position:relative;overflow:hidden;background:#111 center 18%/cover no-repeat;filter:grayscale(1) contrast(1.25) brightness(.95)}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(170deg,rgba(53,230,255,.5),rgba(255,62,165,.45));mix-blend-mode:color}
.photo::before{content:"";position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}

/* ---------- case-file panel (modals, shop, board): flat plate, 1.5px line, optional coloured kant ---------- */
.panel{position:relative;background:var(--plate);border:var(--bw) solid var(--line);color:var(--ink)}
.panel.k{box-shadow:inset 3px 0 0 var(--kc,var(--mag))}
.panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.panel-h h2{margin:0;font:600 28px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:#fff}

/* ---------- buttons ---------- */
.btn-a{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:var(--tap);padding:0 var(--s5);border:0;border-radius:0;cursor:pointer;
  background:var(--amber);color:var(--bg);font:600 30px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;transition:filter .12s,transform .08s}
.btn-a kbd{font-size:12px;color:var(--bg);border-color:rgba(7,5,11,.5)}
.btn-a:hover{filter:brightness(1.08)} .btn-a:active{transform:translateY(1px)}
.btn-a:disabled{opacity:.55;cursor:wait}
.btn-g{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:0 var(--s4);border:var(--bw) solid var(--line);border-radius:0;cursor:pointer;
  background:rgba(7,5,11,.72);color:var(--ink);font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.btn-g:hover,.btn-g.on{border-color:var(--cyan);color:#fff}
.btn-g svg,.ibtn svg{width:18px;height:18px;flex:none}
.ibtn{display:grid;place-items:center;width:var(--tap);height:var(--tap);padding:0;border:var(--bw) solid var(--line);border-radius:0;background:rgba(7,5,11,.72);color:var(--ink);cursor:pointer}
.ibtn:hover,.ibtn.on{border-color:var(--cyan);color:var(--cyan)}
:is(.btn-a,.btn-g,.ibtn,.chip,.tab):focus-visible,.pfocus,.pf{outline:2px solid var(--cyan)!important;outline-offset:3px}
/* icon in a square frame, colours alternate: .icobox (cyan) .m (magenta) .a (amber) */
.icobox{flex:none;display:grid;place-items:center;width:46px;height:46px;color:var(--cyan);border:var(--bw) solid rgba(53,230,255,.55);background:rgba(7,5,11,.6);box-shadow:inset 0 0 10px rgba(53,230,255,.12)}
.icobox.m{color:var(--mag);border-color:rgba(255,62,165,.6);box-shadow:inset 0 0 10px rgba(255,62,165,.12)}
.icobox.a{color:var(--amber);border-color:rgba(255,181,71,.6);box-shadow:inset 0 0 10px rgba(255,181,71,.12)}
.icobox svg{width:55%;height:55%}
/* chip: small toggle / tag */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:var(--bw) solid var(--line);border-radius:0;background:rgba(7,5,11,.72);color:var(--ink);
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;pointer-events:auto}
.chip:hover,.chip.on{border-color:var(--cyan);color:var(--cyan)}
.chip svg{width:14px;height:14px}
.tape{display:inline-block;padding:.55em 1.1em;background:var(--amber);color:var(--bg);font:700 12px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase}
/* input with cyan underline */
.field{display:flex;align-items:center;gap:14px;padding:0 16px;min-height:var(--tap);background:rgba(7,5,11,.6);border-bottom:2px solid var(--cyan)}
.field input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;color:#fff;font:500 24px/1 var(--disp);letter-spacing:.06em;-webkit-user-select:text;user-select:text}
.field input::placeholder{color:var(--mute)}
.field:focus-within{border-bottom-color:#fff;box-shadow:0 2px 0 var(--cyan)}
/* tab bar (phone bottom bar, section tabs) */
.tabbar{display:flex;justify-content:space-around;align-items:flex-start;border-top:1px solid var(--line);background:rgba(7,5,11,.94);padding:8px 0 calc(8px + var(--safe-b))}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:var(--tap);min-height:var(--tap);padding:0 6px;border:0;background:none;color:var(--ink);cursor:pointer;text-decoration:none;
  font:500 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.tab svg{width:22px;height:22px}
.tab span{color:var(--ink2)}
/* segmented bars (0..5): <i class="seg5"><b></b><b></b><em></em>…</i> */
.seg5{display:flex;gap:3px} .seg5>*{flex:1;height:8px;background:rgba(236,230,242,.14)} .seg5>b{background:var(--cyan)}
/* camera log line (kill feed, chat) */
.logln{font:500 11px/1.35 var(--mono);letter-spacing:.04em;color:var(--ink2);background:rgba(7,5,11,.72);padding:3px 8px;border-left:2px solid var(--line2)}
.logln time{color:var(--mute);margin-right:8px;font-variant-numeric:tabular-nums}

/* ---------- menu backdrop layers (lobby, death) — never over gameplay ---------- */
.bd{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bd-tint{background:linear-gradient(180deg,rgba(53,230,255,.10),rgba(255,62,165,.10));mix-blend-mode:color}
.bd-blinds{inset:-30%;mix-blend-mode:screen;background:repeating-linear-gradient(-24deg,rgba(210,235,255,0) 0 34px,rgba(210,235,255,.1) 34px 62px,rgba(210,235,255,0) 62px 70px);
  -webkit-mask-image:radial-gradient(ellipse 34% 40% at var(--bx,72%) var(--by,32%),#000 0%,rgba(0,0,0,.5) 45%,transparent 75%);mask-image:radial-gradient(ellipse 34% 40% at var(--bx,72%) var(--by,32%),#000 0%,rgba(0,0,0,.5) 45%,transparent 75%)}
.bd-rain{mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='260'><g stroke='rgb(200,225,255)' stroke-width='.8'><line x1='20' y1='10' x2='12' y2='52' stroke-opacity='.18'/><line x1='90' y1='80' x2='78' y2='140' stroke-opacity='.12'/><line x1='160' y1='20' x2='152' y2='60' stroke-opacity='.2'/><line x1='200' y1='150' x2='188' y2='210' stroke-opacity='.1'/><line x1='50' y1='170' x2='42' y2='205' stroke-opacity='.16'/><line x1='130' y1='190' x2='118' y2='250' stroke-opacity='.12' stroke-width='1.3'/></g></svg>");
  animation:bdRain .6s linear infinite}
@keyframes bdRain{to{background-position:-60px 260px}}
.bd-grain{opacity:.13;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.1 -.2'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>")}
.bd-vign{background:radial-gradient(ellipse 80% 75% at 60% 50%,transparent 45%,rgba(3,2,6,.85) 100%)}
.kant{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--mag);box-shadow:0 0 18px var(--mag);pointer-events:none}
.kant.red{background:var(--red);box-shadow:0 0 18px var(--red)}
@media (prefers-reduced-motion:reduce){.bd-rain,.rec>i{animation:none}}