/* «Ball of Satan» — where you come in (ui/spawnpick.js): on the death case file, in place of the facts / tally / voice.
   The mini plan in the «Эфир» minimap look (КАМ 00 · ПЛАН, cyan corners), pins: entrances (swat, cyan squares) /
   altars (possessed, magenta diamonds); the pick amber, a broken altar grey, an entrance under fire red.
   One grid (ui-138, Grisha: «поаккуратней»): the head line (ВХОД · the pick · its state … the camera tag), the «дальше»
   line, the plan — all on the case's left edge, one 10 px rhythm. The pins sit in .dsp-map (the canvas' own box, the
   frame's padding outside it) and carry no names: the head line says the pick (the names stacked on each other). */
#dead.dvsp .case>:is(.facts,.tally,.voice){display:none}
#dead:is(.clubs,.bodyv) #deadSpawn{display:none}
#deadSpawn[hidden]{display:none}
#deadSpawn{display:flex;flex-direction:column;gap:10px;min-height:0}
.dsp-h{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:4px;min-width:0}
.dsp-h .lbl{flex:none;color:var(--amber)}
.dsp-pick{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 26px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.dsp-h .dsp-st{color:var(--dim)}
.dsp-h .dsp-st.hot{color:var(--red)}
.dsp-h .dsp-st:empty{display:none}
.dsp-plan{position:relative;align-self:flex-start;max-width:100%;box-sizing:border-box;padding:8px;background-color:rgba(7,5,11,.72)}
.dsp-map{position:relative;height:min(300px,34vh);max-width:100%}
.dsp-map canvas{display:block;width:100%;height:100%;image-rendering:pixelated;opacity:.9}
.dsp-tag{display:inline-flex;align-items:center;gap:6px;color:var(--cyan);font-size:9px;white-space:nowrap}
.dsp-tag>i{width:6px;height:6px;border-radius:50%;background:var(--red)}
.dsp-plan>.dsp-tag{position:absolute;right:14px;bottom:-22px}   /* ui/deathmap.js: under the frame, clear of its corners */
/* a pin: a 44 px tap target centred on the place, the mark (ui/deathmap.js: its «появишься» under it) */
.dsp-pin{--pc:var(--cyan);position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.dsp-pin.on{z-index:2}
.dsp-pin.alt{--pc:var(--mag)}
.dsp-pin>i{width:14px;height:14px;box-sizing:border-box;border:2px solid var(--pc);background:rgba(7,5,11,.8);box-shadow:0 0 8px var(--pc)}
.dsp-pin.alt>i{transform:rotate(45deg)}
.dsp-pin>span{position:absolute;top:34px;left:50%;transform:translateX(-50%);padding:3px 6px;background:rgba(7,5,11,.9);white-space:normal;width:max-content;max-width:118px;text-align:center;
  font:500 9.5px/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.dsp-pin>span em{display:block;font-style:normal;color:var(--red);letter-spacing:.12em}
.dsp-pin.el>span{left:0;transform:none;text-align:left}   /* at the plan's edge: the label runs inward, never past the frame */
.dsp-pin.er>span{left:auto;right:0;transform:none;text-align:right}
.dsp-pin:hover>i,.dsp-pin:focus-visible>i{background:var(--pc)}
.dsp-pin.on{--pc:var(--amber)}
.dsp-pin.on>i{width:18px;height:18px;background:var(--amber)}
.dsp-pin.on>span{color:var(--bg);background:var(--amber)}
.dsp-pin.hot:not(.on)>i{border-color:var(--red);box-shadow:0 0 10px var(--red)}
.dsp-pin.hot>span{color:var(--red)}
.dsp-pin.hot.on>span{color:#fff;background:var(--red)}
.dsp-mark{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;transform:rotate(45deg);background:rgba(255,62,165,.55);pointer-events:none}
.dsp-mark.off{background:var(--mute);opacity:.6}
.dsp-pin.off{cursor:not-allowed}
.dsp-pin.off>i{border-color:var(--mute);box-shadow:none;background:rgba(7,5,11,.8)}
.dsp-pin.off>span{color:var(--mute)}   /* the state says why (осада, сгорел): no strike-through that reads as a crossed-out word */
.dsp-pin.lock>i{display:flex;align-items:center;justify-content:center;width:18px;height:18px}
.dsp-lock{width:9px;height:11px;color:var(--mute)}
.dsp-pin.lock>span{text-decoration:none}
/* «дальше»: the next goal from where you come back (the ЗАДАЧИ main goal / server/death-map.js) — one line + a cyan target */
.dsp-next{display:flex;align-items:baseline;gap:12px;min-width:0}
.dsp-next[hidden]{display:none}
.dsp-next .lbl{flex:none;color:var(--dim)}
.dsp-next b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 16px/1.1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.dsp-goal{position:absolute;z-index:1;width:18px;height:18px;margin:-9px 0 0 -9px;box-sizing:border-box;border:2px solid var(--cyan);border-radius:50%;box-shadow:0 0 10px var(--cyan);pointer-events:none}
.dsp-goal::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--cyan)}
/* your side's bodies (the team's own sight): small dots in the side's colour */
.dsp-ally{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--cyan);opacity:.85;pointer-events:none}
#deadSpawn[data-side=possessed] .dsp-ally{background:var(--mag)}
/* the other arenas (ui/deathmap.js): the same plate over the facts; the flavour line steps aside, the pins are not buttons */
#deadMap[hidden]{display:none}
#dead:is(.clubs,.bodyv) #deadMap{display:none}
#deadMap{display:flex;flex-direction:column;gap:8px;min-height:0;padding-bottom:22px}
#deadMap .dsp-map{height:min(220px,26vh)}
#deadMap .dsp-pin{pointer-events:none;cursor:default}
#dead.dmap .case>.voice{display:none}
#deadMap .dsp-pin[style*="left: 8"]>span,#deadMap .dsp-pin[style*="left: 9"]>span{left:auto;right:0;transform:none}   /* «появишься» near the right edge */

/* phone portrait: the case file is under the live view (the killer is on it, «прямой эфир») — the plan takes the
   killer's block and spans the width */
@media (max-width:640px) and (orientation:portrait){
  #dead.dmap .case>.facts{display:none}
  #deadMap .dsp-plan{align-self:center}
  #deadMap .dsp-map{height:min(190px,26vh)}
  #dead.dvsp .case-who{display:none}
  #deadSpawn{gap:8px}
  .dsp-pick{font-size:22px}
  .dsp-plan{align-self:center}
  .dsp-map{height:min(24vh,300px)}
}
/* phone landscape: low screen — the plan takes the killer's block too */
@media (orientation:landscape) and (max-height:520px){
  #dead.dmap .case>.facts{display:none}
  #deadMap .dsp-map{height:min(170px,42vh)}
  #dead.dvsp .case-who{display:none}
  #deadSpawn{gap:6px}
  .dsp-pick{font-size:20px}
  .dsp-next b{font-size:14px}
  .dsp-map{height:min(220px,52vh)}
}