/* Ночная смена — death screen (mockups d2 / m2): the case file on the left, «его глазами» live view on the right. */
/* ================= death — case file (d2) + «его глазами» ================= */
#dead{position:absolute;inset:0;z-index:12;pointer-events:none;color:var(--ink)}
.dead-shade{background:linear-gradient(90deg,#07050b 0%,rgba(7,5,11,.96) 44%,rgba(7,5,11,.4) 58%,rgba(7,5,11,.12) 100%)}
#dead .bd-grain{opacity:.1}
.case{position:absolute;left:calc(72px + var(--safe-l));top:clamp(20px,6vh,54px);bottom:calc(clamp(16px,4vh,40px) + 92px);width:min(630px,48vw);display:flex;flex-direction:column;gap:clamp(10px,2.4vh,22px);pointer-events:auto;
  overflow:auto;scrollbar-width:none;animation:caseIn .45s ease-out .5s both}
.case::-webkit-scrollbar{display:none}
@keyframes caseIn{from{opacity:0;transform:translateX(-12px)}}
.case-k>i{background:var(--red);box-shadow:0 0 8px var(--red)}
.case-who{display:grid;grid-template-columns:minmax(0,1fr) 160px;column-gap:40px;align-items:start}
.case-who .title{font-size:min(84px,9.4vh);margin-top:6px}
.case-name{min-width:0;container-type:inline-size}
.case-who .title .l2{overflow-wrap:normal;word-break:keep-all;hyphens:none;font-size:min(1em,calc(100cqi / (var(--n,6) * .64)))} /* --n = longest word (ui/cards.js): long nicks shrink, never split mid-word */
.case-by{display:none}
.case-role{margin-top:12px;font:500 16px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.case-ph{width:160px;height:min(226px,24vh);box-sizing:border-box;padding:8px;margin-top:4px}
.case-ph .photo{width:100%;height:100%}
.facts{display:flex;flex-direction:column;gap:clamp(8px,1.6vh,14px);margin-top:clamp(0px,1vh,12px)}
.fact{display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:4px;align-items:center}
.fact .icobox{grid-row:1 / span 2}
.fact .lbl{align-self:end}
.fact .h{font-size:24px;align-self:start}
.tally{display:grid;grid-template-columns:1.2fr 1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tc{display:flex;flex-direction:column;gap:6px;padding:14px 0 14px 20px;min-width:0}
.tc+.tc{border-left:1px solid var(--line)}
.tc:first-child{padding-left:0}
.tc .num{font-size:min(54px,6.4vh);white-space:nowrap}
.tc .num i{font-style:normal;color:var(--dim);margin:0 .12em}
.tc .num em{font-style:normal;color:var(--mag)}
.tc.cur .lbl,.tc.cur .num{color:var(--amber)}
.tc.cur .num{display:flex;align-items:center;gap:8px}
.tc.cur .num .ico{width:.62em;height:.62em;stroke-width:2}
.case .voice{margin:0;max-width:620px}
.case-act{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;position:sticky;bottom:0;z-index:1}   /* sticky: a tall case file scrolls under it, the row stays */
/* «вернуться» (v0.10.3: the only way back, no auto respawn): its own bar under the case file, the biggest thing on
   the screen. Locked (.wait) = amber outline, a fill that grows over SPECTATE.minS and the seconds left; then solid. */
.dead-ret{position:absolute;left:calc(72px + var(--safe-l));bottom:clamp(16px,4vh,40px);width:min(630px,48vw);display:flex;align-items:center;gap:20px;pointer-events:auto;animation:caseIn .45s ease-out .5s both}
#deadBack{position:relative;overflow:hidden;flex:none;width:min(380px,100%);height:76px;font-size:34px;touch-action:manipulation}
#deadBack>:not(.ret-fill){position:relative}
#deadBack .ret-fill{position:absolute;inset:0;background:rgba(255,181,71,.26);transform-origin:left center;transform:scaleX(var(--k,0));transition:transform .2s linear;pointer-events:none}
#deadBack:not(.wait) .ret-fill{display:none}
#deadBack .ret-n{font:600 .82em/1 var(--disp);font-variant-numeric:tabular-nums}
#deadBack .ret-n:empty{display:none}
#deadBack.wait{opacity:1;background:rgba(7,5,11,.72);color:var(--amber);box-shadow:inset 0 0 0 2px rgba(255,181,71,.6)}
#deadBack.wait kbd{color:var(--amber);border-color:rgba(255,181,71,.4)}
#deadBack:not(:disabled){animation:retGlow 1.8s ease-in-out infinite}
#deadBack.sent{opacity:.7;cursor:wait}
@keyframes retGlow{50%{box-shadow:0 0 26px rgba(255,181,71,.5)}}
#deadBack.flash .ret-n{display:inline-block;animation:retFlash .6s ease-out}   /* pressed too early: the countdown jumps */
@keyframes retFlash{0%{color:#fff;transform:scale(1.4)}}
#deadSub{color:#cfc6da;font-size:11px;line-height:1.35}
#deadSub:empty{display:none}
/* the rest (тело · клуб · следующий · лидеры): one quiet row, never competing with «вернуться» */
@media (min-width:761px) and (min-height:521px) and (max-height:820px){   /* the bar took ~90 px of the case file: the facts go into one row */
  .facts{flex-direction:row;gap:28px;margin-top:0}
  .fact{grid-template-columns:36px auto;column-gap:12px}
  .fact .icobox{width:36px;height:36px}
  .fact .h{font-size:19px;white-space:nowrap}
}
.case-act .btn-g{min-height:38px;padding:0 12px;font-size:11px;color:var(--dim);border-color:transparent;background:rgba(7,5,11,.86)}
.case-act .btn-g:hover,.case-act .btn-g[aria-expanded=true]{color:#fff;border-color:var(--line)}
.case-act .btn-g svg{width:16px;height:16px}
.case-act .btn-g kbd{font-size:9px;padding:2px 4px}
.case-act .ibtn{width:38px;height:38px;color:var(--dim);border-color:transparent;background:rgba(7,5,11,.86)}
.case-act .ibtn svg{width:16px;height:16px}
#arenaSwitch{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#arenaSwitch.one{display:none}   /* one arena open (live tuning): nothing to switch to */
#arenaSwitch p{margin:0 6px 0 0;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
#arenaSwitch .arena{flex-direction:row;gap:6px;min-height:30px}
#arenaSwitch .arena b{font:500 13px/1 var(--disp);letter-spacing:.06em}
#arenaSwitch .arena span{display:none}
#arenaSwitch .arena.live b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--live);vertical-align:middle}
#arenaSwitch .arena.cur{border-color:var(--cyan);color:var(--cyan)}
#dead.nem .case-role{color:var(--mag)}
/* live view */
.eyes{position:absolute;left:max(calc(48vw + 140px),53%);right:calc(60px + var(--safe-r));top:clamp(24px,7.8vh,70px);bottom:clamp(80px,14.4vh,130px);pointer-events:none;--cl:26px}
.eyes-rec{position:absolute;left:22px;top:22px}
.eyes-tag{position:absolute;left:6px;bottom:-30px}

.eyes-k{display:none}
/* death — phone portrait (m2, v0.10.2 redo): top = the live view «его глазами» (REC inside the frame, the label in its
   own row under it), then the compact case card on the killer, then the actions. Nothing is absolutely stacked on
   top of anything else; long names / values ellipsize. The case never folds (v0.10.3: «вернуться» is its own bar
   under the card, locked with a countdown), and the spectate plate (#specBar) stays hidden behind the card.
   --eh: the live view gets what the card leaves (150..360 px). */
@media (max-width:760px) and (min-height:521px){
  #dead{--eh:clamp(150px,calc(100dvh - 520px - var(--safe-t) - var(--safe-b)),360px);--et:calc(10px + var(--safe-t))}
  #dead .kant{width:4px}
  .dead-shade{background:linear-gradient(180deg,rgba(7,5,11,0) 0,rgba(7,5,11,0) calc(var(--et) + var(--eh)),rgba(7,5,11,.94) calc(var(--et) + var(--eh) + 10px),#07050b calc(var(--et) + var(--eh) + 40px))}
  .eyes{left:calc(14px + var(--safe-l));right:calc(14px + var(--safe-r));top:var(--et);height:var(--eh);bottom:auto;--cl:22px}
  .eyes-rec{top:12px;left:14px;font-size:11px}
  .eyes-tag{left:0;right:92px;top:calc(100% + 8px);bottom:auto;background:none;padding:0;font-size:11px;letter-spacing:.2em;overflow:hidden}
  .eyes-tag #eyesLbl{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .eyes-k{display:block;position:absolute;right:0;top:calc(100% + 8px);max-width:88px;font:500 10px/11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
  .case{left:calc(18px + var(--safe-l));right:calc(18px + var(--safe-r));width:auto;top:calc(var(--et) + var(--eh) + 34px);bottom:calc(96px + var(--safe-b));gap:10px;animation-name:caseInUp}
  .dead-ret{left:calc(18px + var(--safe-l));right:calc(18px + var(--safe-r));width:auto;bottom:calc(12px + var(--safe-b));flex-direction:column-reverse;align-items:stretch;gap:4px}
  #deadBack{width:100%;height:64px;font-size:30px}
  #deadBack kbd{display:none}
  #deadSub{text-align:center;font-size:10px}
  .case-k{display:none}
  .case-who{grid-template-columns:76px minmax(0,1fr);column-gap:14px;align-items:center}
  .case-ph{grid-column:1;grid-row:1;width:76px;height:96px;padding:5px;margin:0;--cl:14px}
  .case-name{grid-column:2;grid-row:1}
  .case-by{display:block;color:var(--red);font-size:10px}
  .case-who .title{font-size:38px;margin-top:4px;line-height:.95}.case-who .title .l1{display:none}
  .case-who .title .l2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;line-height:1.1;font-size:max(18px,min(1em,calc(100cqi / (var(--n,6) * .74))))}
  .case-role{font-size:10px;margin-top:6px;letter-spacing:.16em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .facts{gap:6px;margin:0}
  .fact{grid-template-columns:28px 74px minmax(0,1fr);grid-template-rows:auto;column-gap:10px}
  .fact .icobox{grid-row:auto;width:28px;height:28px}
  .fact .icobox svg{width:15px;height:15px}
  .fact .lbl{font-size:9px}
  .fact .lbl,.fact .h{align-self:center}
  .fact .h{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .tally{grid-template-columns:1.25fr 1fr 1fr}
  .tc{padding:8px 0 8px 12px;gap:4px}.tc .num{font-size:28px}.tc .lbl{font-size:9px;letter-spacing:.14em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tc.cur .num .ico{width:.6em;height:.6em}
  .case .voice{font-size:13px;line-height:1.35}
  #arenaSwitch{justify-content:center}
}
@media (max-width:760px) and (min-height:521px) and (max-height:799px){ #dead{--eh:clamp(150px,calc(100dvh - 476px - var(--safe-t) - var(--safe-b)),300px)} .case .voice{display:none} }
/* the camera alerts are the living player's HUD: under the death screen they showed through the shade and behind the
   killer's photo («…ГОРИТ · 1 ДУША / СБРОСЬ БАФ»). While dead none of them — the case card says what matters */
body:has(#dead:not([hidden])) #camAlert{display:none!important}
@keyframes caseInUp{from{opacity:0;transform:translateY(10px)}}
/* death — phone landscape */
@media (max-height:520px){
  .case{left:calc(20px + var(--safe-l));top:10px;bottom:10px;width:min(430px,54vw);gap:8px}
  /* «вернуться» under the live view: bottom right, the right thumb */
  .dead-ret{left:calc(54vw + 40px);right:calc(16px + var(--safe-r));width:auto;bottom:calc(8px + var(--safe-b));flex-direction:column-reverse;align-items:stretch;gap:2px}
  #deadBack{width:100%;height:56px;font-size:26px}
  #deadBack kbd{display:none}
  #deadSub{text-align:center;font-size:9px;letter-spacing:.14em}
  .case-k{font-size:9px}
  .case-who{grid-template-columns:1fr 74px;column-gap:14px}
  .case-who .title{font-size:34px}.case-role{font-size:10px;margin-top:6px}
  .case-ph{width:74px;height:98px;padding:4px;--cl:14px}
  .facts{flex-direction:row;gap:14px;margin:0}.fact{grid-template-columns:28px auto;column-gap:8px;row-gap:0}.fact .icobox{width:28px;height:28px}.fact .h{font-size:13px;white-space:nowrap}.fact .lbl{font-size:8px}
  .tc.his{display:none}.tally{grid-template-columns:1.2fr 1fr}
  .case-act{padding-top:0}
  #arenaSwitch p{display:none}#arenaSwitch .arena{min-height:26px;padding:0 8px}#arenaSwitch .arena b{font-size:11px}
  .tc{padding:5px 0 5px 12px;gap:2px}.tc .num{font-size:24px}.tc .lbl{font-size:8px}
  .case .voice{display:none}
  .eyes{left:calc(54vw + 40px);right:calc(16px + var(--safe-r));top:14px;bottom:112px;--cl:16px}   /* room for its label + the «вернуться» bar */
  .eyes-rec{left:12px;top:12px;font-size:9px}.eyes-tag{font-size:9px;bottom:-24px}
  .case-who .title .l2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;line-height:1.1;font-size:max(16px,min(1em,calc(100cqi / (var(--n,6) * .74))))}
  .eyes-tag{max-width:calc(100% - 12px);overflow:hidden}
  .eyes-tag #eyesLbl{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .facts{min-width:0}.fact{min-width:0}.fact .h{overflow:hidden;text-overflow:ellipsis;min-width:0}
}


/* spectate (public/spectate.js): its bottom plate hides while the case file is open (the case file shows the same) */
body:has(#dead:not([hidden])) #specBar{display:none!important}
html body #specBar{bottom:calc(24px + var(--safe-b));padding:10px 18px 11px;background:var(--plate);border:var(--bw) solid var(--line);box-shadow:inset 3px 0 0 var(--red);font-family:var(--mono)}
html body #specBar .lbl{font-size:10px;letter-spacing:.24em;color:var(--red)}
html body #specBar .who{font:600 20px/1.1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:#fff}
html body #specBar .who .tag{font:500 10px var(--mono);letter-spacing:.18em;color:var(--dim)}
html body #specBar .meta{color:var(--dim)} html body #specBar .meta b{color:var(--amber)}
html body #specBar .ret{color:var(--amber);letter-spacing:.14em;text-transform:uppercase;font-size:11px}
body.spectating #game{filter:grayscale(.75) contrast(1.15) brightness(.72)}
/* arena switch: behind the «клуб» button, the case file flips to it (facts / tally / voice make room) */
.case-club{min-height:var(--tap)}
#dead:not(.clubs) #arenaSwitch{display:none}
#dead.clubs .case>:is(.facts,.tally,.voice){display:none}
#dead.clubs #arenaSwitch{order:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
#dead.clubs #arenaSwitch p{grid-column:1 / -1;margin:0 0 4px}
#dead.clubs #arenaSwitch .arena{min-height:52px;justify-content:flex-start;padding:0 14px}
#dead.clubs #arenaSwitch .arena b{font-size:20px}
#dead.clubs .case-club{border-color:var(--cyan);color:var(--cyan)}
/* «Тело» (perk loadout, public/ui/body.js): behind the «тело» button, the case file flips to it like the arena switch */
.case-body{min-height:var(--tap)}
.case-body svg{width:18px;height:18px}
#dead:not(.bodyv) #deadBody{display:none}
#dead.bodyv .case>:is(.facts,.tally,.voice){display:none}
#dead.bodyv #deadBody .bp{margin-top:0}
@media (max-height:520px),(max-width:760px){
  #dead.bodyv .case-who{display:none}
  #dead.bodyv #deadBody .bp{padding:8px 10px 6px 12px;gap:6px}
  #dead.bodyv #deadBody .bp-hint{display:none}
  #dead.bodyv #deadBody .bp-row{grid-template-columns:136px 1fr;gap:8px}
  #dead.bodyv #deadBody .bp-fig{width:136px;height:124px;margin:0}
  #dead.bodyv #deadBody .bp-cell{width:42px;min-height:30px}
  #dead.bodyv #deadBody .bp-strip{max-height:110px}
}
/* «Лидеры» (public/leaders.js): a square camera button at the end of the row */
.case-ld{flex:none}
/* phone portrait: тело · клуб · следующий · лидеры share one row above «вернуться» */
@media (max-width:760px) and (min-height:521px){
  .case-act{flex-wrap:nowrap}
  .case-act .btn-g{flex:1 1 0;min-width:0;min-height:44px;padding:0 6px;gap:6px;font-size:10px;letter-spacing:.1em}
  .case-act .btn-g kbd{display:none}
  .case-act .ibtn{width:44px;height:44px}
}

/* «Что зашло?» (public/feedback.js): a strip of the case file above the buttons — once a day, never blocks.
   While it is up the inner voice steps aside so «клуб» / «лидеры» stay on screen. */
#fb{display:flex;flex-direction:column;gap:8px;padding:10px 0 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:opacity .5s}
#fb.fade{opacity:0;pointer-events:none}
#fb .fb-h{display:flex;align-items:center;gap:.9em;margin:0;white-space:nowrap}
#fb .fb-h>i{flex:none;width:.6em;height:.6em;background:var(--amber);box-shadow:0 0 8px var(--amber)}
#fb .fb-h b{font-weight:500;color:var(--amber)} #fb .fb-h span{color:var(--mute)}
#fb .ch{display:flex;flex-wrap:wrap;gap:6px}
#fb .chip{min-height:30px;padding:0 9px;font-size:10.5px;touch-action:manipulation}
#fb .chip[aria-pressed=true]{border-color:var(--amber);color:var(--amber);background:rgba(255,181,71,.08)}
#fb .row{display:flex;align-items:stretch;gap:8px}
#fb .fb-in{flex:1;min-width:0;min-height:34px;padding:0 10px;border:0;border-bottom:2px solid var(--cyan);border-radius:0;background:rgba(7,5,11,.6);color:#fff;
  font:500 13px/1 var(--mono);letter-spacing:.04em;outline:0;-webkit-user-select:text;user-select:text}
#fb .fb-in::placeholder{color:var(--mute)}
#fb .fb-in:focus{border-bottom-color:#fff}
#fb .row .btn-g{min-height:34px;padding:0 12px;font-size:10.5px}
#fb .fb-x{border-color:transparent;background:none;color:var(--dim)}
#fb .fb-ok{margin:0;font:italic 400 15px/1.4 var(--serif);color:var(--ink2)}
#fb .pf{outline:2px solid var(--cyan);outline-offset:2px}
#dead.fbv .case>.voice{display:none}
#dead:is(.clubs,.bodyv) #fb{display:none}
/* desktop: the facts fold into one row while it is up */
@media (min-width:761px) and (min-height:521px){
  #dead.fbv .facts{flex-direction:row;gap:28px;margin-top:0}
  #dead.fbv .fact{grid-template-columns:36px auto;column-gap:12px}
  #dead.fbv .fact .icobox{width:36px;height:36px}
  #dead.fbv .fact .h{font-size:19px;white-space:nowrap}
}
/* phone portrait: one scrolling chip row; the facts step aside (the tally with your фишки stays) */
@media (max-width:760px) and (min-height:521px){
  #dead.fbv .facts{display:none}
  #dead.fbv .case{gap:10px}
  #fb{gap:6px;padding:8px 0}
  #fb .fb-h{font-size:10px}
  #fb .ch{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-22px;padding-right:22px}
  #fb .ch::-webkit-scrollbar{display:none}
  #fb .chip{flex:none;min-height:36px}
  #fb .row .fb-in{min-height:40px}
}
/* phone landscape: chips only */
@media (max-height:520px){
  #fb{gap:4px;padding:4px 0}
  #fb .fb-h{font-size:8px}
  #fb .ch{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #fb .chip{flex:none;min-height:28px;font-size:9px}
  #fb .row .fb-in{display:none}
  #dead.fbv .tally{display:none}
}
/* phone landscape: тело / клуб / следующий / лидеры compact in the case file («вернуться» sits under the live view) */
@media (max-height:520px){
  .case-act{flex-wrap:nowrap;column-gap:6px}
  .case-act .btn-g{min-height:40px;padding:0 10px;font-size:10px;letter-spacing:.1em}
  .case-act .btn-g kbd{display:none}
  .case-act .ibtn{width:40px;height:40px}
}

/* spectate switch (public/spectate.js #specNav): inside the live-view frame, at its bottom — ‹ and › at the sides, the
   watchable ones as chips between (the current one lit; bots / guards / Satan tagged). The frame itself lets clicks
   through to the game; only the strip takes them. Phone: 48 px arrows, 44 px chips, swipe on the view works too. */
#specNav{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:8px;pointer-events:none}
#specNav[hidden]{display:none}
#specNav>*{pointer-events:auto}
.sn-arr{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:var(--bw) solid var(--line2);border-radius:0;background:rgba(7,5,11,.82);color:#fff;cursor:pointer}
.sn-arr svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sn-arr:hover{border-color:var(--cyan);color:var(--cyan)}
.sn-arr:disabled{opacity:.35;cursor:default}
.sn-list{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;padding:2px 0}
.sn-list::-webkit-scrollbar{display:none}
.sn-chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;max-width:190px;padding:0 10px;border:var(--bw) solid var(--line);border-radius:0;background:rgba(7,5,11,.82);color:var(--ink2);cursor:pointer;
  font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.sn-chip .sn-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-chip .sn-t{flex:none;padding:2px 4px;font-size:9px;letter-spacing:.14em;color:var(--dim);border:1px solid var(--line)}
.sn-chip:hover{border-color:var(--cyan);color:#fff}
.sn-chip.on{border-color:var(--amber);color:var(--bg);background:var(--amber)}
.sn-chip.on .sn-t{color:var(--bg);border-color:rgba(7,5,11,.4)}
.sn-chip.t-s .sn-t{color:var(--red);border-color:rgba(255,51,85,.6)}
.sn-chip.t-c .sn-t{color:var(--mag);border-color:rgba(255,62,165,.5)}
@media (max-width:760px) and (min-height:521px){
  #specNav{left:8px;right:8px;bottom:8px;gap:6px}
  .sn-arr{width:48px;height:48px}
  .sn-chip{min-height:44px;max-width:150px;padding:0 9px;font-size:11px}
}
@media (max-height:520px){
  #specNav{left:6px;right:6px;bottom:6px}
  .sn-chip{min-height:44px;font-size:10px;max-width:130px}
}
/* the tabs «СВОИ / КАМЕРЫ» (a dead swat in the round: the van's cameras), over the strip's left end */
.sn-tabs{position:absolute;left:54px;bottom:calc(100% + 6px);display:flex;gap:0;pointer-events:auto}
.sn-tabs[hidden]{display:none}
.sn-tab{min-height:32px;padding:0 14px;border:var(--bw) solid var(--line2);border-radius:0;background:rgba(7,5,11,.86);color:var(--dim);cursor:pointer;
  font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.sn-tab+.sn-tab{border-left:0}
.sn-tab.on{color:var(--bg);background:var(--cyan);border-color:var(--cyan)}
.sn-chip.cam .sn-n{font-weight:700;letter-spacing:.14em}
.sn-chip.cam.nosig{color:var(--mute);border-style:dashed}
.sn-chip.cam.nosig .sn-t{color:var(--red);border-color:rgba(255,51,85,.5)}
@media (max-width:760px) and (min-height:521px){ .sn-tabs{left:56px}.sn-tab{min-height:44px;padding:0 16px} }
@media (max-height:520px){ .sn-tab{min-height:44px} }
.sn-chip.cam .sn-n{flex:none}
.sn-chip.cam .sn-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the case file folded (#dead.min, H / «свернуть» — client.js setDeadMin): one line on top «снял SATAN · бита · 1 м»
   + «развернуть»; the case, its shade and the kant go, the live view takes the whole screen (eyesOffset centres the
   camera). The «вернуться» bar and the score plate stay. Remembered; in the eclipse it folds by itself after 4 s. */
.case-mini{display:none}
#dead.min .case-mini{position:absolute;left:calc(12px + var(--safe-l));top:calc(10px + var(--safe-t));max-width:calc(100% - 24px - var(--safe-l) - var(--safe-r));box-sizing:border-box;
  display:flex;align-items:center;gap:10px;padding:4px 4px 4px 12px;background:var(--plate);border:var(--bw) solid var(--line);box-shadow:inset 3px 0 0 var(--mag);pointer-events:auto;white-space:nowrap;z-index:3}
.case-mini .lbl{flex:none;color:var(--dim)}
.case-mini b{min-width:0;overflow:hidden;text-overflow:ellipsis;font:600 18px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--mag)}
.case-mini .cm-w{flex:none;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.case-mini .cm-w:empty{display:none}
.case-mini .btn-g{flex:none;min-height:36px;padding:0 10px;font-size:11px;color:var(--dim);border-color:transparent}
.case-mini .btn-g:hover{color:#fff;border-color:var(--line)}
.case-mini svg,.case-min svg{width:16px;height:16px}
#dead.min :is(.case,.dead-shade,.kant){display:none}
#dead.min .eyes{left:calc(12px + var(--safe-l));right:calc(12px + var(--safe-r));top:calc(58px + var(--safe-t));height:auto}
#dead.min #deadSpawn,#dead.min #deadMap{display:none}
/* the case file's action row sticks to the bottom of a tall case: a solid band, so the «воля» line never shows through it */
.case-act{background:linear-gradient(180deg,rgba(7,5,11,0),#07050b 10px);padding-top:12px}
/* «Ball of Satan»: the frame's REC timecode is the old HUD's noise there */
#dead.dv .eyes-rec{display:none}
@media (max-width:760px) and (min-height:521px){
  #dead.min .eyes{top:calc(56px + var(--safe-t));bottom:calc(110px + var(--safe-b))}
  .case-mini .cm-w{display:none}
  .case-min>span,.case-min kbd{display:none}
}
@media (max-height:520px){
  #dead.min .eyes{top:calc(50px + var(--safe-t))}
  .case-min>span,.case-min kbd{display:none}
  .case-mini .btn-g kbd{display:none}
}

/* hotfix/death-screen (v0.13.6, Grisha: «этот экран стал плохо выглядеть»): ONE clean column on the left.
   · the round score is a compact line in the case (under the killer), not a plate beside «вернуться»: the «вернуться»
     bar keeps its own fixed height and never climbs over the case's button row;
   · the column hugs the bottom (the first child takes the free space): on a tall screen no hole between the text and
     the buttons; the buttons sit right above «вернуться»;
   · «Ball of Satan»: no tally row (no chips, no «ты : он»; the streak is on the role line). */
.case-kd{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:16px;row-gap:4px;padding:8px 0 8px 12px;border-left:3px solid var(--mag);white-space:nowrap}
.case-kd[hidden]{display:none}
.case-kd .lbl{color:var(--dim);font-size:10px}
.case-kd .kd-n{display:inline-flex;align-items:baseline;gap:6px}
.case-kd b{font:600 24px/1 var(--disp);color:var(--ink);font-variant-numeric:tabular-nums}
.case-kd b.k{color:var(--cyan)}
.case-kd em{font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.case>:first-child{margin-top:auto}
.case-act{margin-top:0}
.dead-ret{height:76px}
.ret-side{min-width:0}
#deadSub{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#dead.dv .tally{display:none}
@media (max-width:760px) and (min-height:521px){
  .dead-ret{height:auto}
  .case-kd{padding:4px 0 4px 10px;column-gap:12px}.case-kd b{font-size:18px}.case-kd .lbl{font-size:9px}
  #deadSub{-webkit-line-clamp:2}
}
@media (max-height:520px){
  .dead-ret{height:auto}
  .case-kd{padding:3px 0 3px 10px;column-gap:10px}.case-kd b{font-size:16px}.case-kd .lbl{font-size:8px}.case-kd em{font-size:9px}
}

/* «Следить за SATAN» (client.js specSatanBtn): a chip at the end of the spectate strip, the «Эфир» look */
.sn-chip.sn-sat{border-color:rgba(255,51,85,.6);color:var(--red);letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.sn-chip.sn-sat:hover{border-color:var(--red);color:#fff}
.sn-chip.sn-sat[hidden]{display:none}

/* the folded view (#dead.min), Grisha: «это сильно хуже предыдущего экрана» — ONE bottom bar, nothing over anything:
   left the spectate strip ‹ name · side › (+ «следить · SATAN»), centre «вернуться» / ЗАТМЕНИЕ with one status line,
   right the score «1 убил · 3 погиб · 0 помог»; the live frame above the bar, «смотришь: …» inside it top left; on top
   the one line «снял ЛИС · ПП · 5 м · развернуть H». Phones: the strip stays in the frame, the bar is a column. */
.fold-kd{display:none}
#dead.min .fold-kd{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 18px/1.2 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
#dead.min .fold-kd:empty{display:none}
@media (min-width:761px) and (min-height:521px){
  #dead.min .eyes{top:calc(58px + var(--safe-t));bottom:calc(112px + var(--safe-b))}
  #dead.min .eyes-tag{left:12px;top:12px;bottom:auto}
  #dead.min #specNav{left:0;right:auto;bottom:auto;top:calc(100% + 48px);width:calc(50% - 222px)}
  #dead.min .sn-tabs{bottom:auto;top:-40px;left:auto;right:0}
  #dead.min .dead-ret{left:calc(50% - 190px);right:auto;width:380px;bottom:calc(14px + var(--safe-b));height:auto;flex-direction:column;align-items:stretch;gap:4px;animation:none}
  #dead.min #deadBack{width:100%;height:58px;font-size:28px}
  #dead.min .ret-side{display:block;text-align:center}
  #dead.min #deadSub{-webkit-line-clamp:1;text-align:center}
  #dead.min .fold-kd{position:fixed;right:calc(24px + var(--safe-r));bottom:calc(36px + var(--safe-b));max-width:calc(50% - 240px);text-align:right;border-right:3px solid var(--mag);padding-right:12px}
}
@media (max-width:760px) and (min-height:521px){
  #dead.min .eyes{top:calc(58px + var(--safe-t));bottom:calc(176px + var(--safe-b))}
  #dead.min .fold-kd{text-align:center;font-size:16px;margin-bottom:4px}
}
@media (max-height:520px){
  #dead.min .eyes{top:calc(52px + var(--safe-t));bottom:calc(150px + var(--safe-b))}
  #dead.min .fold-kd{text-align:center;font-size:14px}
  #dead.min #deadSub{-webkit-line-clamp:1}
}

/* ui-138 (Grisha: «поаккуратней»): one grid for the «Ball of Satan» death screen.
   · the action row is as wide as its buttons: its solid band no longer paints a dark box over the live view;
   · «вернуться» in the round (ВОЛНА N / ТОЛПА N / ЗАТМЕНИЕ) is a calm plate under the case's column, its one status
     line right under it on the same left edge — not a 76 px bar with a caption hanging at its side;
   · the spectate strip: its scrolled edge fades out — never a cut letter against the arrow. */
.case-act{align-self:flex-start;max-width:100%}
@media (min-width:761px) and (min-height:521px){
  #dead.dv .case{bottom:calc(clamp(16px,4vh,40px) + 96px)}
  #dead.dv .dead-ret{height:auto;flex-direction:column;align-items:flex-start;gap:8px}
  #dead.dv #deadBack{width:min(300px,100%);height:56px;font-size:24px}
  #dead.dv .ret-side{max-width:100%}
  #dead.dv #deadSub{-webkit-line-clamp:1;display:-webkit-box}
}
@media (max-width:760px) and (min-height:521px){
  #dead.dv #deadBack{height:52px;font-size:22px}
  #dead.dv .case{bottom:calc(88px + var(--safe-b))}
}
@media (max-height:520px){
  #dead.dv #deadBack{height:46px;font-size:20px}
  #dead.dv .eyes{bottom:98px}
}
#dead.min.dv #deadBack{height:52px;font-size:22px}
@media (max-width:760px) and (min-height:521px){ .case-act{align-self:stretch} }   /* the phone's row spans the card */
.sn-list .sn-chip.cut{visibility:hidden}   /* partly out of the strip: hidden whole (spectate.js trimChips), never a letter sticking out */

/* «Ball of Satan»: a pentagram falls (public/fx/altar-blast.js) — the death screen's title over the live game for 3 s:
   the swat (and a watcher) white + magenta «ЗАПАДНАЯ ПЕНТАГРАММА / РАЗРУШЕНА», the sealer under it; the possessed red */
#altarBlast{position:absolute;left:0;right:0;top:18vh;z-index:11;pointer-events:none;text-align:center;padding:0 16px}
#altarBlast .title{font-size:min(84px,9.4vh,8.6vw);line-height:1.04;text-shadow:0 0 30px rgba(0,0,0,.8)}
#altarBlast .title .l2{margin-top:.1em}   /* the two lines never touch (the base .title's .86 lets the magenta ride the white) */
#altarBlast .ab-sub{margin-top:14px;font:500 16px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);text-shadow:0 0 10px rgba(0,0,0,.9)}
#altarBlast .ab-sub:empty{display:none}
#altarBlast.poss .title .l1{color:var(--red);text-shadow:0 0 26px rgba(255,51,85,.6)}
#altarBlast.poss .title .l2{color:#fff}
#altarBlast.poss .ab-sub{color:#ffb3be}
#altarBlast.go{animation:abIn 3.2s ease-out both}
#altarBlast.go .title{animation:abPunch .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes abIn{0%{opacity:0}6%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes abPunch{0%{transform:scale(1.5);letter-spacing:.2em;filter:blur(3px)}100%{transform:none;filter:none}}
body.touchp #altarBlast{top:22vh}
body.touchp #altarBlast .title{font-size:34px}
body.touchp #altarBlast .ab-sub{font-size:10px;margin-top:6px}
body:has(#dead:not([hidden])) #altarBlast{display:none}

/* the pause after death (ui/death-hold.js): the HUD gone at once, a red vignette over the corpse, then the case file slides in */
body.dhold > :not(#game):not(#dholdVig):not(#overlay):not(.modal):not([role="dialog"]):not(script){opacity:0!important;pointer-events:none!important;transition:opacity .12s}
#dholdVig{position:fixed;inset:0;pointer-events:none;z-index:30;opacity:0;transition:opacity .35s;
  background:radial-gradient(ellipse 75% 70% at 50% 50%,rgba(0,0,0,0) 40%,rgba(110,0,18,.32) 72%,rgba(150,0,24,.62) 100%)}
body.dhold #dholdVig{opacity:1;transition:opacity .12s}
#dead.dh-in{animation:dhIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes dhIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#dead.dh-in{animation:none}}

/* SOC-163 (Grisha: «Я не понимаю, как я умираю»): the summary on top of the case file (public/ui/cards.js deathSum) —
   «ТЕБЯ УБИЛ: ОДЕРЖИМЫЙ · ЩУПАЛЬЦЕ» big, the blows in order (пластина → смерть) + their count, the side of the last one
   (an arrow the screen's way + «последний удар сзади · 3 м»), the one line of why. It says what the facts said: they go */
.case-sum{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-left:4px solid var(--red);background:rgba(255,40,70,.08)}
.case-sum[hidden]{display:none}
#dead.sum .case>:is(.facts,.voice){display:none}
.sum-by{display:flex;align-items:center;gap:10px;font:600 clamp(20px,3.4vh,30px)/1.1 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.sum-ico{flex:none;width:1.1em;height:1.1em;color:var(--red)}.sum-ico svg{width:100%;height:100%}
.sum-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font:500 13px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.sum-steps{display:flex;align-items:center;gap:6px}
.sum-st{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border:1px solid var(--line);color:#9fd8ff}
.sum-st svg{width:14px;height:14px}
.sum-st.wound{color:var(--amber)}.sum-st.saved{color:var(--cyan)}
.sum-st.kill{color:#fff;background:var(--red);border-color:var(--red)}
.sum-ar{font-style:normal;color:var(--dim)}
.sum-dir{display:flex;align-items:center;gap:10px;font:500 14px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sum-dir[hidden]{display:none}
.sum-dir svg{flex:none;width:30px;height:30px;color:var(--red);transition:none}
.sum-tip{margin:0;font:500 14px/1.35 var(--mono);color:var(--amber)}
.sum-tip[hidden]{display:none}
@media (max-width:760px) and (min-height:521px){
  .case-sum{padding:9px 10px;gap:6px}
  .sum-by{font-size:21px}
  .sum-row,.sum-dir{font-size:11px;letter-spacing:.08em}.sum-dir svg{width:24px;height:24px}
  .sum-tip{font-size:12px}
}
@media (max-height:520px){
  .case-sum{padding:6px 10px;gap:4px}.sum-by{font-size:18px}.sum-row,.sum-dir{font-size:10px}.sum-dir svg{width:20px;height:20px}.sum-tip{font-size:11px}
}