/* «Ball of Satan» onboarding (public/ui/tutorial.js): the step window, «Выйти», the offer / side choice, the end card */
.tut-box{position:fixed;left:50%;bottom:clamp(130px,20vh,176px);z-index:13;transform:translateX(-50%);box-sizing:border-box;width:max-content;max-width:min(620px,calc(100vw - 24px));
  padding:10px 18px 11px;background:rgba(7,5,11,.9);border-left:3px solid var(--amber);color:var(--ink);cursor:pointer;animation:tutIn .35s ease-out both}
.tut-box[hidden]{display:none}
.tut-box .kicker{font-size:11px;gap:.7em;margin-bottom:6px} .tut-box .kicker b{color:var(--dim)}
.tut-l{font:500 19px/1.2 var(--disp);letter-spacing:.03em;text-transform:uppercase;color:#fff}
.tut-k{margin-top:6px;font:500 13px/1.45 var(--mono);color:var(--ink2)}
.tut-k kbd{font-size:.9em;padding:1px 5px;color:var(--amber)}
.tut-tap{margin-top:5px;font-size:10px;color:var(--mute)}
@keyframes tutIn{0%{opacity:0;transform:translate(-50%,8px)}100%{opacity:1;transform:translate(-50%,0)}}
.tut-exit{position:fixed;right:calc(12px + var(--safe-r));bottom:calc(12px + var(--safe-b));z-index:13;min-height:34px;padding:0 12px;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;background:rgba(7,5,11,.7)}
.tut-exit[hidden]{display:none}
/* the phone: the left edge over the radio button (feat/mobile-hud: in the top middle it sat on the round's clock) */
body.touchp .tut-exit{top:calc(40% - 102px);bottom:auto;right:auto;left:calc(6px + var(--safe-l));min-height:32px;padding:0 10px;font-size:10px;letter-spacing:.14em}
body.touchp .tut-box{bottom:calc(30vh + var(--safe-b));max-width:calc(100vw - 32px)}
body.touchp .tut-l{font-size:16px} body.touchp .tut-k{font-size:12px}
@media (orientation:landscape) and (max-height:520px){ html body.touchp .tut-box{bottom:calc(70px + var(--safe-b));max-width:min(460px,56vw)} }
/* «Тихо в бою» (msg 4691, shared/hush.js): a mission's window in a fight folds into a plate under the line on top — one
   short line, no keys, nothing to tap, out of the way of the fight; it opens back once it is quiet */
html body .tut-box.mini{top:calc(48px + var(--safe-t));bottom:auto;max-width:min(300px,64vw);padding:4px 10px;background:rgba(7,5,11,.62);border-left-width:2px;
  opacity:.8;pointer-events:none;animation:none}
.tut-box.mini .kicker{display:none} .tut-box.mini .tut-k,.tut-box.mini .tut-tap{display:none}
html body .tut-box.mini .tut-l{font:500 11px/1.25 var(--mono);letter-spacing:.06em;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
body.touchp .tut-box.mini{top:calc(38px + var(--safe-t))}
/* the round's own helpers step aside in the tutorial: the window is the only teacher */
body.tut #tipLine,body.tut #sideHint,body.tut #tasks{display:none!important}

.tut-modal,.tut-end{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(7,5,11,.72)}
.tut-end{background:radial-gradient(ellipse at center,rgba(60,0,12,.55),rgba(7,5,11,.88) 70%);animation:tutEnd .6s ease-out both}
@keyframes tutEnd{0%{opacity:0}100%{opacity:1}}
.tut-m,.tut-e{box-sizing:border-box;width:min(480px,100%);padding:28px 28px 22px;background:var(--plate);display:flex;flex-direction:column;gap:12px}
.tut-e{--cc:var(--mag);width:min(560px,100%)}
.tut-m .h{margin:2px 0 0}
.tut-ms{margin:0;font:400 14px/1.45 var(--mono);color:var(--ink2)}
.tut-mb{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px} .tut-mb>button{flex:1 1 180px}
.btn-a.red{background:var(--mag);color:#fff}
.tut-skip{align-self:flex-start;min-height:34px;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.tut-e .title{font-size:clamp(48px,11vw,104px);color:#fff;text-shadow:0 0 30px rgba(255,43,80,.6),-2px 0 rgba(255,62,165,.7),2px 0 rgba(53,230,255,.55)}
.tut-mb .btn-a,.tut-mb .btn-g{font-size:18px;min-height:48px}
html[lang=en] .tut-m .tut-mb>.btn-a{padding:0 12px;letter-spacing:.06em;white-space:nowrap}   /* «AS THE POSSESSED» on one line on the PC (it wrapped in two; the Russian is shorter) */
.tut-mb>button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}
.tut-lock{margin:-4px 0 0;color:var(--mute)}
/* the phone on its side: the minimap fills the top-left corner — «Выйти» beside the radio button instead */
@media (orientation:landscape) and (max-height:500px){body.touchp .tut-exit{top:calc(40% - 50px);left:calc(60px + var(--safe-l))}}
/* the swat's missions (SOC-174): the line on top (the wave · the foes · the lives), the lost wave's card, the flashbang */
.tut-ms-line{position:fixed;left:50%;top:calc(10px + var(--safe-t));z-index:12;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.tut-ms-line[hidden]{display:none}
.tut-ms-line .tml{display:flex;align-items:center;gap:12px;padding:6px 14px;background:rgba(7,5,11,.82);border-left:3px solid var(--amber);font:600 14px/1.1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap}
.tut-ms-line .pips{display:flex;gap:4px} .tut-ms-line .pips i{width:9px;height:9px;border:1.5px solid var(--mag);transform:rotate(45deg)} .tut-ms-line .pips i.on{background:var(--mag)}
.tut-ms-line .tmo{padding:4px 10px;background:rgba(255,181,71,.92);color:#120c06;font:700 12px/1.1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
body.touchp .tut-ms-line{top:calc(6px + var(--safe-t))} body.touchp .tut-ms-line .tml{font-size:12px;padding:5px 10px;gap:9px}
.tut-lost{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(7,5,11,.6);animation:tutEnd .4s ease-out both}
body:has(#tutEnd,#tutLost) :is(#altarBlast,#camAlert){display:none!important}   /* the end / lost card: no «… РАЗРУШЕНА» title or camera card left over it (SOC-174, the phone) */
.tut-flash{position:fixed;inset:0;z-index:11;background:#fff;pointer-events:none}
.tut-flash[hidden]{display:none}
.tut-mk{margin-top:4px}
/* a mission's end card: the title smaller than the tutorial's SATAN-size one, line-height kept off the stats line under it */
.tut-end.ms .title{font-size:clamp(40px,8vw,68px);line-height:.95;margin-bottom:4px}
.tut-mb .tut-msb{flex-direction:column;gap:5px;padding:8px 12px;white-space:nowrap}
.tut-msb small{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:none;color:var(--mute)}
.tut-msb:hover small{color:var(--ink2)}
/* a mission's fall is 2 s, not a death: no spectator's panel, no round clock (the line on top is the mission's clock) */
body.tutms #specBar,body.tutms #specNav,body.tutms #efir .ef-bug{display:none!important}
/* SOC-241 «Сюжет»: three cards in the side choice (the number, the name, the minutes / the check), the brief's lines, the end card's next-line */
.tut-cards{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.tut-card{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;min-height:50px;padding:6px 14px 6px 8px;text-align:left;background:rgba(255,255,255,.04);border:1px solid var(--line,rgba(255,255,255,.14));border-left:3px solid var(--amber);color:var(--ink);cursor:pointer;font:600 17px/1.1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.tut-card i{display:grid;place-items:center;width:30px;height:30px;font:700 15px/1 var(--mono);font-style:normal;color:#120c06;background:var(--amber)}
.tut-card small{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:none;color:var(--mute);white-space:nowrap}
.tut-card:hover:not(:disabled){background:rgba(255,181,71,.1)} .tut-card:hover small{color:var(--ink2)}
.tut-card.done{border-left-color:var(--cyan)} .tut-card.done i{background:var(--cyan)} .tut-card.done small{color:var(--cyan)}
.tut-card:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}
.tut-box .tut-l{white-space:pre-line}
.tut-box[data-step=brief] .tut-l{font-size:15px;line-height:1.35;letter-spacing:.02em;max-width:520px}
body.touchp .tut-box[data-step=brief] .tut-l{font-size:13px}
.tut-next{color:var(--ink);font-style:italic}
@media (max-height:760px){ .tut-m{padding:18px 20px 16px;gap:8px} .tut-card{min-height:44px} }
/* the phone on its side (SOC-241): the side choice / the end card never taller than the screen — they scroll, the end card's title shrinks */
@media (max-height:520px){
  .tut-m,.tut-e{max-height:calc(100dvh - 12px);overflow-y:auto;padding:14px 20px 12px;gap:6px}
  .tut-modal,.tut-end,.tut-lost{padding:6px}
  .tut-end.ms .title{font-size:clamp(26px,9vh,40px)}
  .tut-mb .btn-a,.tut-mb .btn-g{min-height:38px;font-size:15px}
  .tut-mb .tut-msb{padding:5px 10px;gap:3px}
  .tut-card{min-height:38px;font-size:15px}
}
/* ================= SOC-266 «Сюжет»: the map of one night (public/ui/tutorial.js story()) =================
   The lobby's editorial dark: a plate over the dimmed lobby, the club's scheme on a blueprint grid (rooms in thin lines,
   the crypt's pentagram in magenta, the van in the garage), the route van -> 1 -> 2 -> 3 -> back to the van; the points:
   done = cyan + a check, open = amber + a pulse, locked = grey + a lock; the picked one in camera brackets. The plate on
   the right (under the map on a phone upright): the mission's number · minutes, name, brief, rooms, «Начать». */
.tut-modal.sm{padding:clamp(10px,3vh,32px) clamp(10px,3vw,40px);background:radial-gradient(ellipse at 30% 45%,rgba(255,62,165,.10),transparent 62%),rgba(7,5,11,.985);overflow:auto;align-items:flex-start;animation:tutEnd .25s ease-out both}
.sm-box{box-sizing:border-box;width:min(1240px,100%);margin:auto;display:flex;flex-direction:column;gap:clamp(10px,2vh,18px)}
.sm-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.sm-top .kicker{color:var(--mag)}
.sm-off{margin-left:.4em;padding:3px 7px;border:1px solid rgba(255,62,165,.55);color:var(--ink2);font-size:10px;letter-spacing:.18em}
.sm-t{margin:8px 0 0;font:600 clamp(40px,7.2vh,68px)/.92 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:#fff;text-shadow:-2px 0 rgba(255,62,165,.55),2px 0 rgba(53,230,255,.35)}
.sm-sub{margin:8px 0 0;font:italic 400 15px/1.4 var(--serif);color:var(--ink2);max-width:640px}
.sm-x{flex:none;min-height:38px;font-size:11px} .sm-x kbd{font-size:9.5px;padding:2px 5px;color:var(--dim)}
.sm-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:clamp(12px,1.6vw,22px);align-items:stretch}
.sm-map{position:relative;display:flex;align-items:center;justify-content:center;padding:10px;background:rgba(7,5,11,.72);border:var(--bw) solid var(--line)}
.sm-cnt{position:absolute;left:18px;bottom:12px;color:var(--dim);font-size:10px;letter-spacing:.2em}
.sm-svg{display:block;width:100%;height:auto;max-height:calc(100dvh - 250px);font-family:var(--mono)}
.sm-svg .sm-wall{fill:none;stroke:rgba(236,230,242,.32);stroke-width:3}
.sm-room rect{fill:rgba(236,230,242,.025);stroke:rgba(236,230,242,.16);stroke-width:1.5}
.sm-room.m1 rect{fill:rgba(255,181,71,.035)} .sm-room.m2 rect{fill:rgba(255,62,165,.04)} .sm-room.m3 rect{fill:rgba(53,230,255,.03)}
.sm-room .rl{font:500 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;fill:var(--mute)}
.sm-pent{fill:none;stroke:rgba(255,62,165,.42);stroke-width:1.6}
.sm-van rect,.sm-van circle{fill:rgba(7,5,11,.9);stroke:var(--ink2);stroke-width:1.6}
.sm-van .vl,.sm-dawn{font:600 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;fill:var(--ink2);text-anchor:middle}
.sm-dawn{fill:var(--dim)}
.sm-leg{fill:none;stroke-linecap:round;stroke-width:3}
.sm-leg.far{stroke:rgba(236,230,242,.22);stroke-dasharray:2 10}
.sm-leg.ahead{stroke:var(--amber);stroke-dasharray:12 10;animation:smMarch 1.2s linear infinite;filter:drop-shadow(0 0 4px rgba(255,181,71,.6))}
.sm-leg.walk{stroke:var(--cyan);stroke-width:3.5;filter:drop-shadow(0 0 4px rgba(53,230,255,.45))}
.sm-leg.back{stroke:rgba(236,230,242,.18);stroke-width:2;stroke-dasharray:2 8}
.sm-leg.back.walk{stroke:var(--cyan);stroke-dasharray:none}
@keyframes smMarch{to{stroke-dashoffset:-44}}
.sm-node{cursor:pointer;outline:none}
.sm-node .hit{fill:transparent}
.sm-node .ring{fill:rgba(7,5,11,.92);stroke-width:2.5}
.sm-node .disc{stroke:none}
.sm-node .nn{font:700 22px var(--mono);text-anchor:middle;dominant-baseline:central;fill:#120c06}
.sm-node .nl{font:600 30px var(--disp);letter-spacing:.08em;text-transform:uppercase;text-anchor:middle;fill:#fff;paint-order:stroke;stroke:#07050b;stroke-width:6px}
.sm-node .ns{font:500 13px var(--mono);letter-spacing:.16em;text-anchor:middle;fill:var(--dim);paint-order:stroke;stroke:#07050b;stroke-width:5px}
.sm-node .brk{fill:none;stroke:var(--cyan);stroke-width:2.5;opacity:0;transition:opacity .15s}
.sm-node .pulse{fill:none;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.sm-node.open .ring{stroke:var(--amber)} .sm-node.open .disc{fill:var(--amber)} .sm-node.open .ns{fill:var(--amber)}
.sm-node.open .pulse{stroke:var(--amber);animation:smPulse 1.8s ease-out infinite}
.sm-node.done .ring{stroke:var(--cyan)} .sm-node.done .disc{fill:rgba(53,230,255,.18)} .sm-node.done .ns{fill:var(--cyan)}
.sm-node .ck{fill:none;stroke:var(--cyan);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.sm-node.lock{cursor:default} .sm-node.lock .ring{stroke:rgba(236,230,242,.3);stroke-dasharray:4 5} .sm-node.lock .disc{fill:rgba(236,230,242,.06)} .sm-node.lock .nl{fill:var(--mute)}
.sm-node .lk rect,.sm-node .lk path{fill:none;stroke:var(--dim);stroke-width:2}
.sm-node.sel .brk{opacity:1}
.sm-node.sel.lock .brk{stroke:var(--mute)}
.sm-node:hover .ring{stroke-width:3.5}
@keyframes smPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.sm-plate{display:flex;flex-direction:column;gap:12px;padding:20px 20px 18px;background:var(--plate);border:var(--bw) solid var(--line);box-shadow:inset 3px 0 0 var(--amber)}
.sm-plate .kicker{font-size:11px;color:var(--amber)} .sm-plate .kicker .ok{font-weight:600;color:var(--cyan)}
.sm-ph{margin:0;font:600 clamp(34px,5vh,46px)/.95 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.sm-brief{display:flex;flex-direction:column;gap:6px}
.sm-brief p{margin:0;font:400 13.5px/1.45 var(--mono);color:var(--ink2)}
.sm-brief p:first-child{font:italic 400 16px/1.4 var(--serif);color:var(--ink)}
.sm-rooms{margin:0;color:var(--dim);font-size:10px;letter-spacing:.14em;line-height:1.7} .sm-rooms i{font-style:normal;color:var(--mag)}
.sm-go{margin-top:auto;min-height:56px;font-size:28px} .sm-go kbd{font-size:10px;padding:3px 6px}
.sm-lockl{display:flex;align-items:center;gap:10px;margin:auto 0 0;padding:14px 12px;border:1px dashed var(--line2);color:var(--dim)}
.sm-lockl svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.sm-tip{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:0;border-left:2px solid var(--amber);background:rgba(255,181,71,.06);color:var(--ink2);font:500 12px/1.3 var(--mono);letter-spacing:.04em;text-align:left;cursor:pointer}
.sm-tip b{color:var(--amber)} .sm-tip:hover{color:#fff;background:rgba(255,181,71,.12)}
@media (prefers-reduced-motion:reduce){ .sm-leg.ahead,.sm-node .pulse{animation:none} }
/* the phone upright: the map over the plate, the scheme's words bigger (they are in the svg's own units) */
@media (max-width:760px){
  .tut-modal.sm{padding:calc(12px + var(--safe-t)) 10px calc(12px + var(--safe-b))}
  .sm-top{align-items:flex-start}
  .sm-t{font-size:40px} .sm-sub{font-size:13px}
  .sm-body{grid-template-columns:1fr}
  .sm-map{padding:4px}
  .sm-svg{max-height:none}
  .sm-room .rl{font-size:20px;letter-spacing:.12em}
  .sm-node .nl{font-size:44px;stroke-width:8px} .sm-node .ns{font-size:22px;letter-spacing:.08em} .sm-node .nn{font-size:26px}
  .sm-van .vl,.sm-dawn{font-size:19px;letter-spacing:.1em}
  .sm-cnt{display:none}
  .sm-plate{padding:14px 14px 14px 16px;gap:10px}
  .sm-ph{font-size:34px}
  .sm-go{min-height:52px;font-size:24px} .sm-go kbd{display:none}
  .sm-x kbd{display:none}
}
/* the phone on its side: the map and the plate side by side, short */
@media (max-height:520px){
  .tut-modal.sm{padding:calc(6px + var(--safe-t)) calc(10px + var(--safe-r)) 6px calc(10px + var(--safe-l))}
  .sm-box{gap:6px}
  .sm-t{font-size:28px;margin-top:4px} .sm-sub{display:none}
  .sm-body{grid-template-columns:minmax(0,1fr) minmax(220px,280px)}
  .sm-svg{max-height:calc(100dvh - 100px)}
  .sm-plate{padding:10px 12px;gap:6px} .sm-ph{font-size:26px}
  .sm-brief p{font-size:11.5px} .sm-brief p:first-child{font-size:13px}
  .sm-go{min-height:44px;font-size:20px}
  .sm-tip{padding:5px 10px;font-size:11px}
}