/* «Ball of Satan» — the side screen (ui/sidepick.js): two camera cards, cyan СПЕЦНАЗ / magenta ОДЕРЖИМЫЙ (the «Эфир»
   side colours), humans N/4 as pips, «мест нет» tape on a full side, «в прошлый раз» on the last pick. Desktop: side by
   side; phone portrait: stacked, big taps. Plus the settings row «Сторона» and the possessed hint line in the round. */
#sidePick{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--ink);
  padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));box-sizing:border-box;overflow:auto}
#sidePick[hidden]{display:none}
.sp-box{position:relative;display:flex;flex-direction:column;gap:clamp(12px,2.6vh,22px);width:min(980px,100%);margin:auto}
.sp-head{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.sp-head .h{font-size:clamp(28px,4.6vw,44px);letter-spacing:.06em}
.sp-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(12px,2vw,24px)}
.sp-card[data-side=watch]{--cc:var(--amber);--sc:var(--amber)}   /* ЗРИТЕЛЬ: the third, the camera over the club */
.sp-card{--cc:var(--cyan);--sc:var(--cyan);position:relative;display:flex;flex-direction:column;gap:0;padding:10px;border:0;border-radius:0;background-color:rgba(7,5,11,.72);
  color:var(--ink);text-align:left;cursor:pointer;font:inherit;outline:var(--bw) solid var(--line);outline-offset:0;transition:outline-color .12s,transform .08s}
.sp-card[data-side=possessed]{--cc:var(--mag);--sc:var(--mag)}
.sp-card:hover,.sp-card:focus-visible{outline:2px solid var(--sc)}
.sp-card:focus-visible{outline-offset:0}
.sp-card:active{transform:translateY(1px)}
.sp-photo{display:block;width:100%;height:clamp(140px,34vh,330px);background-position:center 22%}
.sp-txt{display:flex;flex-direction:column;gap:6px;padding:12px 6px 4px}
.sp-tag{color:var(--sc)}
.sp-name{font:700 clamp(30px,4vw,46px)/.95 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.sp-goal{font:500 14px/1.35 var(--mono);letter-spacing:.04em;color:var(--ink2)}
.sp-cnt{display:flex;align-items:center;gap:10px;margin-top:4px}
.sp-pips{display:flex;gap:4px}
.sp-pips>*{width:18px;height:8px;background:rgba(236,230,242,.14)}
.sp-pips>b{background:var(--sc);box-shadow:0 0 6px var(--sc)}
.sp-full{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%) rotate(-4deg);display:none;font-size:15px;padding:.7em 1.3em;background:var(--red);color:#fff}
.sp-card.full{cursor:not-allowed}
.sp-card.full .sp-photo{opacity:.35}
.sp-card.full .sp-txt{opacity:.5}
.sp-card.full .sp-full{display:block}
.sp-last{position:absolute;right:16px;top:16px;display:none;padding:4px 8px;background:rgba(7,5,11,.85);color:var(--amber);border:1px solid rgba(255,181,71,.6)}
.sp-card.last:not(.full) .sp-last{display:block}
.sp-card.last:not(.full){outline-color:rgba(255,181,71,.55)}
.sp-card.last:not(.full):focus-visible,.sp-card.last:not(.full):hover{outline-color:var(--sc)}
.sp-note{min-height:1.2em;margin:0;color:var(--amber)}
.sp-foot{display:flex;justify-content:space-between;gap:12px}
.sp-auto .lbl{color:var(--dim);letter-spacing:.14em}
.sp-auto.last{border-color:rgba(255,181,71,.6)}

/* step 2 — the class of the picked side: three cards, the donate ones carry «донат» with a lock (the lock blocks only when
   sidepick.js DEMO_UNLOCK_ALL is off: .lock) */
.sp-classes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,20px)}
.sp-cls{--sc:var(--cyan);position:relative;display:flex;flex-direction:column;padding:10px;border:0;border-radius:0;background-color:rgba(7,5,11,.72);
  color:var(--ink);text-align:left;cursor:pointer;font:inherit;outline:var(--bw) solid var(--line);outline-offset:0;transition:outline-color .12s,transform .08s}
.sp-classes[data-side=possessed] .sp-cls{--sc:var(--mag)}
.sp-cls:hover,.sp-cls:focus-visible{outline:2px solid var(--sc)}
.sp-cls:active{transform:translateY(1px)}
.sp-cls .sp-photo{height:clamp(120px,30vh,280px)}
.sp-cls .sp-name{font-size:clamp(24px,2.8vw,34px)}
.sp-cls .gpk{position:absolute;right:16px;top:16px;padding:2px 7px;font:700 11px/1.4 var(--mono);font-style:normal;color:var(--dim);background:rgba(7,5,11,.85);border:1px solid var(--line)}
.sp-don{display:inline-flex;align-items:center;gap:5px;color:var(--amber)}
.sp-don svg{width:12px;height:12px}
.sp-cls.lock{cursor:not-allowed}
.sp-cls.lock .sp-photo{opacity:.4}
/* the swat's step: «Согласен стать SATAN» (the opt-in to be SATAN's vessel), a switch under the classes; red when on */
.sp-sat{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:10px 14px;border:0;border-radius:0;background:rgba(7,5,11,.72);color:var(--ink);
  text-align:left;cursor:pointer;font:inherit;outline:var(--bw) solid var(--line);outline-offset:0;transition:outline-color .12s}
.sp-sat[hidden]{display:none}
.sp-sat:hover,.sp-sat:focus-visible{outline:2px solid var(--red)}
.sp-tgl{position:relative;flex:none;width:44px;height:24px;background:rgba(236,230,242,.14);border:1px solid var(--line);transition:background .12s}
.sp-tgl::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;background:var(--dim);transition:transform .12s,background .12s}
.sp-sat.on .sp-tgl{background:rgba(255,51,85,.35);border-color:var(--red)}
.sp-sat.on .sp-tgl::after{transform:translateX(20px);background:var(--red);box-shadow:0 0 8px var(--red)}
.sp-sat-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.sp-sat-t b{font:700 clamp(18px,2vw,22px)/1.05 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.sp-sat.on .sp-sat-t b{color:var(--red)}
.sp-sat-s{font:500 13px/1.35 var(--mono);letter-spacing:.03em;color:var(--ink2)}

/* phone portrait: stacked cards, the still becomes a strip on the left */
@media (max-width:640px) and (orientation:portrait){
  #sidePick{align-items:flex-start}
  .sp-box{gap:12px}
  .sp-cards{grid-template-columns:1fr;gap:12px}
  .sp-card{flex-direction:row;align-items:stretch;padding:8px;min-height:150px}
  .sp-photo{width:36%;height:auto;flex:none}
  .sp-txt{flex:1;min-width:0;padding:4px 4px 4px 12px;justify-content:center}
  .sp-name{font-size:32px}
  .sp-goal{font-size:13px}
  .sp-pips>*{width:14px}
  .sp-full{left:50%;top:50%}
  .sp-last{right:10px;top:10px}
  .sp-classes{grid-template-columns:1fr;gap:10px}
  .sp-cls{flex-direction:row;align-items:stretch;padding:8px;min-height:112px}
  .sp-cls .sp-photo{width:32%;height:auto;flex:none}
  .sp-cls .sp-name{font-size:26px}
  .sp-foot{flex-direction:column-reverse}
  .sp-foot .btn-g{width:100%;min-height:52px}
}
/* phone landscape: low screen, side by side, the still is a strip */
@media (max-height:480px) and (orientation:landscape){
  .sp-box{gap:8px}
  .sp-head{flex-direction:row;align-items:center;gap:14px}
  .sp-head .h{font-size:26px}
  .sp-card{flex-direction:row;padding:8px}
  .sp-photo{width:34%;height:auto;flex:none}
  .sp-txt{padding:2px 2px 2px 10px}
  .sp-name{font-size:28px}
  .sp-goal{font-size:12px}
  .sp-cls .sp-photo{height:clamp(70px,26vh,120px)}
  .sp-cls .sp-name{font-size:22px}
}

/* settings modal: «Сторона» (hidden outside the round) */
#snd .msec[hidden]:first-of-type+.msec{border-top:0}
.sp-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.sp-me{font:600 22px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.sp-me.possessed,.sp-to.possessed{color:var(--mag)}
.sp-to.swat{color:var(--cyan)}
.sp-row .mbtn{margin-left:auto}

/* in the round: a possessed human's one line (body + keys), over the ability strip (the round banner owns the top), never over the HUD pieces */
#sideHint{position:fixed;left:50%;bottom:clamp(140px,21vh,180px);z-index:12;transform:translateX(-50%);max-width:calc(100vw - 24px);box-sizing:border-box;
  padding:7px 14px;background:rgba(7,5,11,.82);border-left:3px solid var(--mag);color:var(--ink2);pointer-events:none;
  font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;animation:spHint 7s linear both}
#sideHint[hidden],#tipLine[hidden]{display:none}
#sideHint b{font-weight:700;color:var(--mag)}
#sideHint kbd,#tipLine kbd{font-size:.9em;padding:1px 5px}
@keyframes spHint{0%{opacity:0}5%{opacity:1}88%{opacity:1}100%{opacity:0}}
body.touchp #sideHint,body.touchp #tipLine{bottom:calc(28vh + var(--safe-b));white-space:normal;text-align:center;width:max-content;max-width:calc(100vw - 32px);font-size:11px;letter-spacing:.08em}
body.touchp #sideHint span{display:block}
.sp-bots{color:var(--mute)}
.sp-cnt{flex-wrap:wrap;row-gap:6px}
.sp-n,.sp-bots{white-space:nowrap}
/* phone landscape: the camera alert owns the middle, the chat button the bottom centre -> bottom left (the lens is up top there) */
@media (orientation:landscape) and (max-height:520px){ body.touchp #sideHint{left:calc(16px + var(--safe-l));bottom:calc(14px + var(--safe-b));transform:none;text-align:left;max-width:min(360px,44vw)} }
/* the possessed's first-minute tips (ui/tips.js): the same slot as #sideHint, one line, 4 s, sentence case (they read as advice) */
#tipLine{position:fixed;left:50%;bottom:clamp(140px,21vh,180px);z-index:12;transform:translateX(-50%);max-width:min(860px,calc(100vw - 24px));white-space:nowrap;box-sizing:border-box;
  padding:8px 16px;background:rgba(7,5,11,.88);border-left:3px solid var(--amber);color:var(--ink);pointer-events:none;
  font:500 13px/1.45 var(--mono);letter-spacing:.02em;animation:tipIn 4s linear both}
@keyframes tipIn{0%{opacity:0}6%{opacity:1}90%{opacity:1}100%{opacity:0}}
body.touchp #tipLine{width:max-content;max-width:calc(100vw - 32px);font-size:12px;text-align:center;white-space:normal}
/* phone landscape: the chat button sits at the bottom centre, the top row is the plate + the lens -> the tip goes just above the chat button, between the stick and АТАКА */
@media (orientation:landscape) and (max-height:520px){ html body.touchp #tipLine{left:50%;right:auto;top:auto;bottom:calc(64px + var(--safe-b));transform:translateX(-50%);max-width:min(440px,52vw);text-align:center} }
/* the possessed's keys card (ui/tips.js card): three rows — the picture, the key, what it does — on the left above the
   lower third; it goes after his first actions. Phone: over the right thumb's buttons, smaller. */
#possKeys{position:fixed;left:calc(18px + var(--safe-l,0px));bottom:clamp(170px,26vh,230px);z-index:12;box-sizing:border-box;min-width:260px;max-width:min(380px,calc(100vw - 36px));
  padding:9px 12px 8px;background:rgba(7,5,11,.95);border-left:3px solid var(--mag);color:var(--ink);pointer-events:none;
  font:500 12px/1.35 var(--mono);letter-spacing:.02em;animation:pkIn .35s ease-out both}
#possKeys[hidden]{display:none}
#possKeys b{display:block;margin:0 0 6px;font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mag)}
#possKeys p{display:flex;align-items:center;gap:8px;margin:0 0 5px}
#possKeys kbd{flex:none;min-width:34px;text-align:center;font-size:10px;padding:1px 5px}
#possKeys .pk-ico{flex:none;width:20px;height:20px;fill:none;stroke:var(--ink2,#cfc6da);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#possKeys .pk-ico .on{fill:var(--mag);stroke:none}
#possKeys .pk-ico text{fill:var(--ink2,#cfc6da);stroke:none;font:700 7px var(--mono)}
#possKeys small{display:block;margin-top:2px;color:var(--mute);font-size:10.5px}
@keyframes pkIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
body.touchp #possKeys{left:auto;right:calc(14px + var(--safe-r,0px));bottom:calc(214px + var(--safe-b,0px));min-width:0;max-width:min(300px,calc(100vw - 28px));font-size:11px;padding:7px 10px 6px}
@media (orientation:landscape) and (max-height:520px){ html body.touchp #possKeys{right:calc(220px + var(--safe-r,0px));bottom:calc(14px + var(--safe-b,0px));max-width:min(300px,40vw)} }