/* Ночная смена — case-file panels: settings, «Как играть», toast, nudge (the bar shop: public/bar.js). */
/* ================= modals: «Настройки», «Как играть» — case-file panels ================= */
.modal{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:rgba(7,5,11,.72)}
.modal.open{display:flex}
.mbox{position:relative;width:min(560px,100%);max-height:100%;overflow:auto;box-sizing:border-box;padding:20px 24px 16px 28px;background:rgba(9,7,14,.97);border:var(--bw) solid var(--line);box-shadow:inset 3px 0 0 var(--mag);color:var(--ink);
  font:400 13px/1.5 var(--mono);-webkit-user-select:text;user-select:text;overscroll-behavior:contain}
.mbox.wide{width:min(960px,100%)}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.mhead h2{margin:0;display:flex;align-items:center;gap:14px;font:600 30px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.mhead h2::before{content:"";width:10px;height:10px;background:var(--mag);box-shadow:0 0 8px var(--mag)}
.mx{display:grid;place-items:center;width:var(--tap);height:var(--tap);padding:0;background:none;border:var(--bw) solid var(--line);color:var(--dim);cursor:pointer}
.mx:hover{color:#fff;border-color:var(--cyan)}
.msec{padding:14px 0 10px;border-top:1px solid var(--line)}
.msec:first-of-type{border-top:0}
.msec h3,.ctl3 h3{margin:0 0 10px;font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
.grp h4{margin:8px 0 2px;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.grp.tonly{display:none}
body.touchp .grp.tonly{display:block}
.mnote{margin:8px 0 0;font:400 11.5px/1.5 var(--mono);color:var(--dim)}
.opt{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;box-sizing:border-box;min-height:var(--tap);padding:6px 10px;margin:0;
  font:500 13px/1.2 var(--mono);color:var(--ink);background:none;border:var(--bw) solid transparent;cursor:pointer;text-align:left}
.opt:hover{border-color:var(--line)}
.opt b{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.opt.off b{color:var(--mute)}
.opt.cur>span::after{content:" · сейчас";color:var(--amber);font-size:11px;letter-spacing:.14em}   /* «Прицел»: the row of the device in use */
.opt.rng{cursor:default}
.opt input[type=range]{width:min(240px,55%);margin:0;accent-color:var(--amber)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg button{min-height:var(--tap);padding:0 6px;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);background:rgba(7,5,11,.6);border:var(--bw) solid var(--line);cursor:pointer}
.seg button:hover{color:#fff}
.seg button.on{color:var(--cyan);border-color:var(--cyan)}
.mfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.mbtn{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 16px;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:rgba(7,5,11,.72);border:var(--bw) solid var(--line);cursor:pointer}
.mbtn:hover{border-color:var(--cyan);color:#fff}
.mbtn.pri{color:var(--bg);background:var(--amber);border-color:var(--amber);font:600 18px/1 var(--disp);letter-spacing:.1em;padding:0 22px}
.mbtn.pri:hover{filter:brightness(1.08);color:var(--bg)}
:is(.opt,.seg button,.mbtn,.mx,.tb):focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.modal .pf{outline:2px solid var(--cyan);outline-offset:2px}
#snd .padset{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
#snd.open .sl{display:flex}
/* «Как играть» */
#help .lead{margin:8px 0 12px;color:var(--ink2);max-width:74ch;font:italic 400 15px/1.5 var(--serif)}
.rules{margin:0 0 16px;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.rules li{padding-left:16px;position:relative;color:var(--ink)}
.rules li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--cyan)}
.ctl3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.ctl3 section{padding:14px 16px 8px 0}
.ctl3 section+section{padding-left:16px;border-left:1px solid var(--line)}
.ctl3 dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;font-size:12px;align-items:baseline}
.ctl3 dt{color:var(--dim)}
.ctl3 dd{margin:0;text-align:right;color:var(--ink)}
.ctl3 kbd{font-size:10px;padding:2px 5px}
@media (max-width:760px),(max-height:520px){.modal{padding:8px}.mbox{padding:14px 14px 12px 18px}.rules{grid-template-columns:1fr}.ctl3 dd{white-space:normal}.mhead h2{font-size:24px}}
@media (max-width:760px){.ctl3{grid-template-columns:1fr}.ctl3 section+section{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
@media (max-height:520px) and (min-width:761px){.mbox:not(.wide){width:min(720px,100%)}#snd .mbox{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}#snd .mhead,#snd .mfoot{grid-column:1 / -1}#snd .msec:nth-of-type(2){border-top:0}}

/* ================= toast, one-time nudge ================= */
#toast{position:absolute;left:50%;bottom:calc(120px + var(--safe-b));transform:translate(-50%,10px);z-index:40;opacity:0;pointer-events:none;padding:10px 16px;background:var(--plate);border:var(--bw) solid rgba(255,181,71,.6);
  font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber);transition:opacity .2s,transform .2s}
#toast.show{opacity:1;transform:translate(-50%,0)}
#nudge{position:absolute;left:50%;bottom:calc(46px + var(--safe-b));transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:12px;max-width:min(600px,76vw);padding:6px 6px 6px 16px;
  background:var(--plate);border:var(--bw) solid var(--line);box-shadow:inset 3px 0 0 var(--amber);font:500 12px/1.4 var(--mono);color:var(--ink);animation:ncIn .3s ease-out both}
#nudge .mbtn.pri{font-size:15px;min-height:36px;flex:none}
#nudge .mx{width:36px;height:36px;flex:none;border:0}
html body.touchp #nudge{bottom:auto;top:calc(8px + var(--safe-t));max-width:52vw} /* html-prefixed: wins over touch.js's injected #nudge top */
@media (orientation:portrait){html body.touchp #nudge{top:auto;bottom:calc(236px + var(--safe-b));left:calc(12px + var(--safe-l));right:calc(12px + var(--safe-r));transform:none;max-width:none}} /* above the run / fire buttons: the top is the weapon/chat stack, minimap, feed */
@media (orientation:landscape){html body.touchp.dvround #nudge{top:calc(62px + var(--safe-t))}} /* «Ball of Satan»: the round plate holds the top row */

/* ================= «Лидеры» (public/leaders.js): case-file modal, persistent boards ================= */
#ld{z-index:31;position:fixed}
#ld .ld-box{width:min(640px,100%);display:flex;flex-direction:column;overflow:hidden;padding-bottom:12px}
#ld .ld-p{margin:6px 0 12px}
#ld .ld-p button{min-height:40px}
#ld .ld-p button.on{color:var(--cyan);border-color:var(--cyan)}
#ld .ld-b,#ld .ld-f{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#ld .ld-f{margin:10px 0 12px;padding-top:10px;border-top:1px solid var(--line)}
#ld .ld-f .chip{min-height:28px;padding:0 8px;font-size:10px;color:var(--dim)}
#ld .chip.on{color:var(--amber);border-color:var(--amber)}
#ld .ld-f .chip.on{color:var(--cyan);border-color:var(--cyan)}
#ld .ld-sep{width:1.5px;height:18px;margin:0 4px;background:var(--line2)}
#ld .ld-t{flex:1;min-height:140px;overflow:auto;overscroll-behavior:contain;border-top:1px solid var(--line)}
#ld .ldt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
#ld .ldt th{position:sticky;top:0;z-index:1;padding:10px 8px 8px;background:rgba(9,7,14,.97);font:500 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);text-align:left;border-bottom:1px solid var(--line)}
#ld .ldt td{padding:clamp(6px,1.1vh,10px) 8px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:baseline}
#ld .ldt .r{width:2.6em;color:var(--dim);font:500 14px/1 var(--mono)}
#ld .ldt th.r{font-size:10px}
#ld .ldt td.n{width:100%;max-width:0;overflow:hidden;text-overflow:ellipsis}
#ld .ldt td.n b{font:500 19px/1.1 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:#fff}
#ld .ldt td.n i{margin-left:8px;font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.1em;color:var(--mute)}
#ld .ldt td.n em{margin-left:8px;font:500 9px/1 var(--mono);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
#ld .ldt .v{text-align:right}
#ld .ldt td.v{font:600 20px/1 var(--disp);color:var(--amber)}
#ld .ldt td.v i{margin-left:8px;font:500 10px/1 var(--mono);font-style:normal;color:var(--dim)}
#ld .ldt tr.p1 td.r{color:var(--mag)}#ld .ldt tr.p2 td.r{color:var(--cyan)}#ld .ldt tr.p3 td.r{color:var(--amber)}
#ld .ldt tr.me td{background:rgba(53,230,255,.07)}#ld .ldt tr.me td.n b,#ld .ldt tr.me td.r{color:var(--cyan)}
#ld .ldt tr.me td:first-child{box-shadow:inset 3px 0 0 var(--cyan)}
#ld .ldt tr.gap td{padding:2px;text-align:center;color:var(--dim);border:0}
#ld .ld-m{margin:0;padding:28px 8px;text-align:center;font:italic 400 15px/1.5 var(--serif);color:var(--ink2)}
#ld .mfoot .mbtn{margin-left:auto}
#ld .ld-keys{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:9.5px;letter-spacing:.14em}
#ld .ld-keys kbd{font-size:9px;padding:2px 4px}
body.pad #ld .ld-kb{display:none}
@media (max-width:760px),(max-height:520px){
  #ld .ld-b,#ld .ld-f{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-14px;padding-right:14px}
  #ld .ld-b::-webkit-scrollbar,#ld .ld-f::-webkit-scrollbar{display:none}
  #ld .chip{flex:none}
  #ld .ldt td.n b{font-size:16px}#ld .ldt td.v{font-size:17px}
  #ld .ld-keys{display:none}
}
@media (max-height:520px){#ld .ld-p{margin:2px 0 6px}#ld .ld-f{margin:6px 0}#ld .ld-t{min-height:90px}}

/* live tuning (public/tuning.js): the owner's panel */
.tune .trow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tune .opt.rng b{margin-left:8px;color:var(--amber)}
.tune .tlog{padding-left:16px;margin-top:6px}
.tune .tlog li{margin:2px 0}

/* «Как играть» · Ball of Satan: two short cards (ui/modals.js bosCard), magenta = одержимый, cyan = спецназ */
#help .bos{margin:0 0 16px;padding-top:14px;border-top:1px solid var(--line)}
#help .bos h3{margin:0 0 4px}
#help .bos-lead{margin:0 0 12px;color:var(--ink2);max-width:74ch}
#help .bos-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#help .bos-col{padding:12px 14px;background:var(--plate);border:var(--bw) solid var(--line);box-shadow:inset 3px 0 0 var(--mag)}
#help .bos-col[data-side="swat"]{box-shadow:inset 3px 0 0 var(--cyan)}
#help .bos-col h4{margin:0;font:600 18px/1.1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--mag)}
#help .bos-col[data-side="swat"] h4{color:var(--cyan)}
#help .bos-goal{margin:4px 0 10px;color:var(--ink);font-weight:600}
#help .bos-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
#help .bos-col li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}
#help .bos-col li i{display:grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--mag);color:var(--mag)}
#help .bos-col[data-side="swat"] li i{border-color:var(--cyan);color:var(--cyan)}
#help .bos-col li .ico{width:18px;height:18px}
#help .bos-col li b{display:block;color:var(--ink);font-weight:600}
#help .bos-col li span{display:block;color:var(--ink2);font-size:12px;line-height:1.45}
#help .bos-col kbd{font-size:10px;padding:1px 5px}
#help .bos-more{margin:10px 0 0;color:var(--dim);font-size:11px}
#snd .row{display:flex;align-items:center;gap:10px;margin-top:8px}
@media (max-width:760px){#help .bos-cols{grid-template-columns:1fr}}