/* The show around a round (ui/show.js): the results «КОНЕЦ ВЫПУСКА» / «КОНЕЦ СМЕНЫ» and the VS screen before ШТУРМ.
   TV titles in the «Эфир» language: flat plates, 1.5 px lines, cyan = спецназ, magenta = одержимые, amber = the action.
   Over the HUD and the death screen, under the lobby overlay and the modals. Phone portrait: the columns stack. */
#show{position:absolute;inset:0;z-index:14;color:var(--ink);font-family:var(--mono);overflow:hidden}
#show[hidden]{display:none}
#show.off{z-index:21}   /* the results kept after the socket went (ui/show.js detach): over the lobby (.overlay 20) till ПРИНЯТЬ */
#show .bd-grain{position:absolute;inset:0;pointer-events:none;opacity:.5}
body.showon #efir,body.showon .alert,body.showon #dead{visibility:hidden}

/* ---------- results ---------- */
.sh-bg,.vs-bg{position:absolute;inset:0;background:#07050b center/cover no-repeat;filter:grayscale(.35) brightness(.32) contrast(1.1)}
.sh-bg::after,.vs-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,5,11,.55),rgba(7,5,11,.92) 70%)}
#show.res{background:rgba(7,5,11,.72);animation:shIn .35s ease-out}
.sh-box{--cc:rgba(255,62,165,.75);--cl:40px;position:absolute;inset:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  display:flex;flex-direction:column;gap:12px;padding:18px 30px 16px;overflow:auto;overscroll-behavior:contain}
.sh-box>*{flex:none}
.sh-box{scroll-padding-bottom:110px}
.sh-k{display:flex;align-items:center;gap:14px}
.sh-title{margin:0;font:600 clamp(32px,4.2vw,52px)/.95 var(--disp);letter-spacing:.08em;color:#fff;text-shadow:0 0 18px rgba(255,62,165,.35)}
.sh-win{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;padding:8px 0 10px;border-bottom:var(--bw) solid var(--line)}
.sh-win b{font:600 clamp(22px,2.6vw,32px)/1 var(--disp);letter-spacing:.1em}
.sh-win[data-win="0"] b{color:var(--cyan)} .sh-win[data-win="1"] b{color:var(--mag)} .sh-win[data-win=shift] b{color:var(--amber)}
.sh-win span{font:500 13px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.sh-win .sh-vs{color:var(--red)}
.sh-win em{margin-left:auto;font:600 16px/1 var(--disp);font-style:normal;letter-spacing:.16em;padding:5px 10px;border:var(--bw) solid currentColor}
.sh-win em.w{color:var(--amber)} .sh-win em.l{color:var(--red)}
.sh-sides{display:grid;grid-template-columns:1fr 1fr;gap:22px;min-height:0}
.sh-sides.one{grid-template-columns:minmax(0,760px)}
.sh-side{--sc:var(--cyan);display:flex;flex-direction:column;gap:10px;min-width:0}
.sh-side[data-team=possessed]{--sc:var(--mag)} .sh-side[data-team=shift]{--sc:var(--amber)}
.sh-side h2{margin:0;display:flex;align-items:baseline;gap:12px;font:600 22px/1 var(--disp);letter-spacing:.14em;color:var(--sc)}
.sh-side h2 em{font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.24em;text-transform:uppercase;padding:4px 7px;background:var(--sc);color:var(--bg)}
.sh-mvp{display:flex;gap:14px;align-items:center;padding:7px 12px 7px 8px;background:rgba(7,5,11,.78);border:var(--bw) solid var(--line);box-shadow:inset 3px 0 0 var(--sc)}
.sh-mvp.none{justify-content:space-between}
.sh-mvp .ph{--cc:var(--sc);--cl:12px;flex:none;width:58px;height:58px;padding:3px}
.sh-mvp .photo{width:100%;height:100%}
.sh-mvp .tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.sh-mvp .lbl{display:flex;align-items:center;gap:6px;color:var(--amber)}
.sh-mvp .h{font-size:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-mvp .role{font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--sc)}
.sh-mvp .st{font:500 12px/1.2 var(--mono);letter-spacing:.08em;color:var(--ink2)}
#show .cr{display:inline-block;width:15px;height:15px;color:var(--amber);flex:none} #show .cr svg{width:100%;height:100%;display:block}
#show small{font:500 9px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding:2px 5px;border:1px solid var(--line2);vertical-align:middle}
#show small.you{color:var(--amber);border-color:var(--amber)}
/* «ЛИВ»: away more than the threshold — the row grey, a grey tag; his own line on top says so (.sh-win em.lv) */
.sh-tr.lv .nm b,.sh-tr.lv .n{color:var(--mute)!important;text-shadow:none!important} .sh-tbl .sh-tr.lv .n.top{background:none}
#show small.lvt{color:var(--dim);border-color:var(--dim);background:rgba(236,230,242,.06)}
.sh-win em.lv{color:var(--dim);font-size:14px;text-transform:uppercase}
.sh-tbl{display:flex;flex-direction:column;background:rgba(7,5,11,.7);border:var(--bw) solid var(--line)}
.sh-tr{display:grid;grid-template-columns:minmax(0,1fr) repeat(6,minmax(44px,auto));align-items:center;gap:8px;padding:5px 10px;border-top:1px solid var(--line)}
.sh-tbl[data-team=shift] .sh-tr{grid-template-columns:minmax(0,1fr) repeat(3,minmax(64px,auto))}
.sh-tbl[data-team=swat] .sh-tr{grid-template-columns:minmax(0,1fr) repeat(7,minmax(44px,auto))}
.sh-tr:first-child{border-top:0}
.sh-th{padding:7px 10px;background:rgba(236,230,242,.04)}
.sh-th span{font:500 9px/1.15 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:right}
.sh-th span.nm{text-align:left}
.sh-th .sm{display:none;font-weight:500}
.sh-th .lg{font-weight:500}
.sh-tr .nm{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.sh-tr .nm em{flex:none;min-width:0;font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.14em;color:var(--sc)}
.sh-tr .nm b{font:500 17px/1.2 var(--disp);letter-spacing:.06em;color:#fff;overflow:hidden;text-overflow:ellipsis}
.sh-tr .n{font:600 22px/1 var(--disp);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
/* K / D / A first, as on the Tab board (efir.css .bd-side): K white and bold, D dimmer, a rule after A; the best of a
   column on its side in amber with an underline (Grisha: «в статистике итоговой не вижу количество убийств») */
.sh-tr .n.k{font-weight:700;color:#fff}
.sh-tr .n.kda:nth-child(3){color:var(--ink2)}
.sh-tr .kda3{padding-right:10px;border-right:1px solid var(--line2)}
.sh-th span.kda{color:var(--ink2)}
.sh-tbl .sh-tr .n.top{color:var(--amber);text-shadow:0 0 10px rgba(255,181,71,.45);background:linear-gradient(var(--amber),var(--amber)) right bottom/1.1em 2px no-repeat;padding-bottom:3px}
.sh-tr.me{background:rgba(255,181,71,.08);box-shadow:inset 2px 0 0 var(--amber)}
.sh-tr.mvp .nm b{color:var(--amber)}
.sh-empty .nm{color:var(--mute)}
.sh-mom{display:flex;flex-direction:column;gap:4px}
.sh-mom .lbl{color:var(--amber)}
.sh-mom .logln{margin:0;padding:5px 12px;background:rgba(7,5,11,.72);border-left:2px solid var(--mag);font:500 13px/1.3 var(--mono);letter-spacing:.04em;color:var(--ink)}
.sh-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:6px}
.sh-t{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:4px 14px;min-width:240px}
.sh-t b{font:600 40px/1 var(--disp);font-variant-numeric:tabular-nums;color:#fff}
.sh-t .sh-rdy{grid-column:1/-1;color:var(--cyan)}
.sh-bar{grid-column:1/-1;height:3px;background:var(--line)} .sh-bar i{display:block;height:100%;background:var(--amber);transition:width .25s linear}
.sh-t:empty{display:none}
/* his own row in the footer (SOC-163: the footer must never hide «ТЫ»): side colour kant, nick, role, the stats he has */
.sh-me{--sc:var(--cyan);flex:1;min-width:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:6px 12px;border-left:3px solid var(--sc);background:rgba(20,16,26,.9)}
.sh-me[data-team=possessed]{--sc:var(--mag)}
#show .sh-me small.you{font:700 12px/1 var(--mono);letter-spacing:.16em;padding:4px 7px;color:#07050b;background:var(--amber);border:0}
.sh-me .nk{font:600 22px/1 var(--disp);letter-spacing:.06em;color:#fff;max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-me em{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--sc)}
.sh-me .st{display:flex;flex-wrap:wrap;gap:4px 12px;font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.sh-me .st b{font:600 18px/1 var(--disp);color:#fff;margin-right:2px}
.sh-btns{display:flex;gap:12px;align-items:center}
.sh-btns .btn-a{min-width:230px;height:60px}
.sh-btns .btn-a:disabled{opacity:.6;cursor:default}
.sh-btns .btn-g{height:60px}
.sh-btns .sh-again{max-width:300px;white-space:normal;line-height:1.15;text-align:center;letter-spacing:.12em;color:var(--cyan);border-color:rgba(53,230,255,.45)}   /* «ЕЩЁ РАЗ · ТА ЖЕ СТОРОНА» (SOC-163) */
@keyframes shIn{from{opacity:0}to{opacity:1}}

/* ---------- the VS screen ---------- */
#show.vs{background:#07050b;animation:shIn .25s ease-out}
#show.vs.gone{animation:vsOut .9s ease-in forwards}
.vs-bg{filter:grayscale(.1) brightness(.5) contrast(1.1)}
.vs-bg::after{background:linear-gradient(90deg,rgba(53,230,255,.14),rgba(7,5,11,.55) 34%,rgba(7,5,11,.55) 66%,rgba(255,62,165,.16)),linear-gradient(180deg,rgba(7,5,11,.2),rgba(7,5,11,.85))}
.vs-box{position:absolute;inset:calc(18px + var(--safe-t)) calc(22px + var(--safe-r)) calc(18px + var(--safe-b)) calc(22px + var(--safe-l));display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.8fr) minmax(0,1fr);gap:22px;align-items:center}
.vs-col{--sc:var(--cyan);display:flex;flex-direction:column;gap:10px;min-width:0}
.vs-col[data-tm="1"]{--sc:var(--mag)}
.vs-col h2{margin:0;font:600 30px/1 var(--disp);letter-spacing:.16em;color:var(--sc);text-shadow:0 0 14px color-mix(in srgb,var(--sc) 45%,transparent)}
.vs-col[data-tm="1"] h2{text-align:right}
.vs-cards{display:flex;flex-direction:column;gap:10px}
.vs-card{display:flex;gap:12px;align-items:center;padding:8px 12px 8px 8px;background:rgba(7,5,11,.82);border:var(--bw) solid var(--line);box-shadow:inset 3px 0 0 var(--sc);animation:vsCard .4s ease-out both}
.vs-col[data-tm="1"] .vs-card{flex-direction:row-reverse;padding:8px 8px 8px 12px;box-shadow:inset -3px 0 0 var(--sc);text-align:right}
.vs-card:nth-child(2){animation-delay:.06s} .vs-card:nth-child(3){animation-delay:.12s} .vs-card:nth-child(4){animation-delay:.18s}
.vs-card.me{border-color:var(--amber)}
.vs-card .ph{--cc:var(--sc);--cl:10px;flex:none;width:64px;height:64px;padding:3px}
.vs-card .photo{width:100%;height:100%}
.vs-card .q{width:100%;height:100%;display:grid;place-items:center;background:rgba(255,62,165,.08);font:600 40px/1 var(--disp);color:var(--mag)}
.vs-card .tx{flex:1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 10px;min-width:0}
.vs-col[data-tm="1"] .vs-card .tx{grid-template-columns:auto 1fr}
.vs-card .nk{grid-column:1/-1;font:600 22px/1 var(--disp);letter-spacing:.06em;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-card .cl{grid-column:1/-1;color:var(--sc);font-size:10px}
.vs-card .ld{height:4px;background:var(--line)}
.vs-col[data-tm="1"] .vs-card .ld{order:2;transform:scaleX(-1)}
.vs-card .ld i{display:block;height:100%;background:var(--sc);transition:width .3s ease-out}
.vs-card .pc{font-size:10px;color:var(--dim);min-width:40px}
.vs-card.ok .pc{color:var(--live)}
.vs-mid{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.vs-ep{font:600 clamp(34px,4.6vw,58px)/1 var(--disp);letter-spacing:.1em;color:#fff}
.vs-show{font:500 clamp(14px,1.5vw,19px)/1 var(--disp);letter-spacing:.34em;color:var(--red)}
.vs-vs{margin-top:10px;font:700 clamp(46px,7vw,96px)/1 var(--disp);letter-spacing:.06em;color:transparent;-webkit-text-stroke:2px #fff;opacity:.9}
.vs-count{min-height:1em;font:700 clamp(56px,8vw,110px)/1 var(--disp);color:var(--amber);font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(255,181,71,.45)}
.vs-count.tick{animation:vsTick .9s ease-out}
.vs-count.go{color:var(--red);letter-spacing:.12em;font-size:clamp(44px,6vw,84px);text-shadow:0 0 22px rgba(255,51,85,.55)}
.vs-st{color:var(--ink2)}
@keyframes vsCard{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes vsTick{0%{transform:scale(1.5);opacity:.2}30%{transform:scale(1);opacity:1}}
@keyframes vsOut{0%,45%{opacity:1}100%{opacity:0}}

/* a short desktop (1366×768 and the like): the box scrolls, ПРИНЯТЬ and the timer stay on screen (the XP panel, ui/xp.js, takes height) */
@media (min-width:901px) and (max-height:900px){
  .sh-foot{position:sticky;bottom:-16px;z-index:2;margin:0 -30px -16px;padding:10px 30px 14px;background:rgba(7,5,11,.96);border-top:var(--bw) solid var(--line)}
  .sh-t b{font-size:32px} .sh-btns .btn-a{height:54px}
}
/* ---------- phone / narrow ---------- */
@media (max-width:900px){
  .sh-box{padding:16px 16px 14px;gap:12px;--cl:26px}
  .sh-sides{grid-template-columns:1fr;gap:16px}
  .sh-th .lg{display:none} .sh-th .sm{display:inline}
  .sh-tr{grid-template-columns:minmax(0,1fr) repeat(6,32px);gap:5px;padding:6px 8px}
  .sh-tbl[data-team=shift] .sh-tr{grid-template-columns:minmax(0,1fr) repeat(3,44px)}
  .sh-tbl[data-team=swat] .sh-tr{grid-template-columns:minmax(0,1fr) repeat(7,32px)}
  .sh-tr .nm{gap:3px 6px;flex-wrap:wrap} #show .sh-tr .nm .cr{display:none} .sh-tr .nm em{flex-basis:100%}   /* the role over the nick: the nick keeps its width */ .sh-tr .nm b{font-size:15px} .sh-tr .nm em{font-size:9px;letter-spacing:.08em}
  .sh-tr .n{font-size:19px} .sh-tr .kda3{padding-right:5px}
  .sh-mvp .ph{width:56px;height:56px} .sh-mvp .h{font-size:21px}
  .sh-foot{flex-direction:column;align-items:stretch;position:sticky;bottom:-14px;margin:0 -16px -14px;padding:10px 16px calc(12px);background:rgba(7,5,11,.96);border-top:var(--bw) solid var(--line)}
  .sh-t{min-width:0} .sh-t b{font-size:30px}
  .sh-btns{display:grid;grid-template-columns:auto 1fr}
  .sh-btns .btn-a{min-width:0;height:64px;font-size:26px} .sh-btns .btn-g{height:64px}
  .sh-btns kbd{display:none}
  .sh-btns .sh-again{max-width:150px;padding:0 10px;font-size:11px}
  .sh-me{padding:4px 8px;gap:2px 8px} .sh-me .nk{font-size:17px} .sh-me .st b{font-size:15px} .sh-me .st{font-size:9.5px;gap:2px 8px}
}
/* phone landscape: the footer one slim row (the timer, ПРИНЯТЬ) — stacked it hid most of a 390 px screen */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  .sh-foot{flex-direction:row;align-items:center;gap:14px;padding:6px 16px 8px}
  .sh-t{flex:1;grid-template-columns:auto auto 1fr;align-items:center;gap:4px 12px} .sh-t b{font-size:22px} .sh-bar{grid-column:3;grid-row:1}
  .sh-btns{display:flex} .sh-btns .btn-a{height:46px;font-size:22px;min-width:180px} .sh-btns .btn-g{height:46px}
  .sh-me .st{display:none}
}
@media (max-width:900px) and (orientation:portrait){
  .vs-box{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:center;gap:12px;overflow:auto}
  .vs-mid{order:0;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 12px}
  .vs-mid .rec{flex-basis:100%;justify-content:center}
  .vs-ep{font-size:34px} .vs-show{font-size:14px;align-self:center}
  .vs-vs{display:none}
  .vs-count{flex-basis:100%;min-height:0;font-size:64px} .vs-count:empty{display:none}
  .vs-st{flex-basis:100%}
  .vs-col[data-tm="0"]{order:-1}
  .vs-col h2{font-size:20px}
  .vs-col[data-tm="1"] h2{text-align:left}
  .vs-cards{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .vs-card,.vs-col[data-tm="1"] .vs-card{flex-direction:row;padding:5px 8px 5px 5px;gap:8px;box-shadow:inset 3px 0 0 var(--sc);text-align:left}
  .vs-col[data-tm="1"] .vs-card .tx{grid-template-columns:1fr auto}
  .vs-col[data-tm="1"] .vs-card .ld{order:0;transform:none}
  .vs-card .ph{width:40px;height:40px;padding:2px} .vs-card .q{font-size:24px}
  .vs-card .nk{font-size:16px} .vs-card .cl{font-size:8px;letter-spacing:.12em}
  .vs-card .pc{min-width:30px;font-size:9px}
}
@media (max-height:500px) and (orientation:landscape){
  .vs-box{gap:12px} .vs-cards{gap:5px} .vs-card{padding:4px 8px 4px 4px} .vs-card .ph{width:40px;height:40px}
  .vs-card .nk{font-size:16px} .vs-col h2{font-size:20px} .vs-vs{font-size:40px;margin-top:0} .vs-ep{font-size:30px} .vs-count{font-size:52px}
}