/* Ночная смена — phone action buttons around the fire button (public/touch.js builds them).
   Re-skin here: every look lives in these classes; touch.js only toggles .on / .used / .cool and body classes.

   Geometry: an arc around the fire button's centre (fire: right 26 + 48, bottom 30 + 48 = the anchor).
   Slots (angle from the anchor, CCW from the right): БЕГ 95° (ninja) · the special 135° (r 116, 64 px) · ДЫМ 175°, radius 106 px.
   In «Огонь: стиком» mode (no fire button, the idle aim ring sits at right 90 / bottom 110, r 56) the arc
   opens to radius 132 so no slot touches that ring.
   Classes: .tact (all buttons) · #spBtn the special (both classes, below) · #sprBtn «БЕГ», #smokeBtn «ДЫМ» (ninja only)
   state: .on (held / active) · .cool (dash not ready: no breath / recovering) · .used (no smoke left)
   body: .touchp (touch profile) · .tplay (alive in a round) · .tninja (you play the ninja) · .stickfire */
/* skin = «Камера наблюдения» (ui/theme.css): same plate/line/amber as #fireBtn — amber outline, dark plate, filled amber when held */
.tact{--sz:52px;position:absolute;width:var(--sz);height:var(--sz);border-radius:50%;padding:0;margin:0;z-index:4;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:none;pointer-events:auto;
  border:var(--bw,1.5px) solid rgba(255,181,71,.8);background:rgba(7,5,11,.35);color:var(--amber,#ffb547);
  box-shadow:inset 0 0 0 4px rgba(255,181,71,.08);
  font:500 8px/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;-webkit-user-select:none;user-select:none}
.tact svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;pointer-events:none}
.tact span{pointer-events:none}
.tact .n{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:0;background:var(--amber,#ffb547);color:var(--bg,#07050b);
  font:700 10px/16px var(--mono,monospace);letter-spacing:0;text-align:center}
.tact.on{background:rgba(255,181,71,.85);color:var(--bg,#07050b);border-color:var(--amber,#ffb547);transform:scale(.95)}
.tact.cool{opacity:.45}
.tact.used{opacity:.35;border-color:var(--line2,rgba(236,230,242,.28));color:var(--dim,#9a90a8);box-shadow:none}
.tact.used .n{background:var(--mute,#6c6379);color:var(--ink,#ece6f2)}
.tact .n:empty{display:none}
#spBtn[data-cd]:not([data-cd=""])::after{content:attr(data-cd);position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);white-space:nowrap;font:500 9px/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--dim,#9a90a8);pointer-events:none}

body.touchp.tplay #spBtn{display:flex}
body.touchp.tplay #spBtn.idle{display:none}   /* fix/stick-sprint: no «БЕГ» — the special shows only when it has something to do */
#sprBtn{display:none!important}   /* fix/stick-sprint: the stick at the rim runs */
body.touchp.tplay.tninja #sprBtn,body.touchp.tplay.tninja #smokeBtn{display:flex}
body.touchp.tplay.tninja.tstars #sprBtn{display:none}   /* stars in hand: the special itself is «БЕГ» (no dash-slash in that form) */
body.touchp.tplay.ttechno #sprBtn{display:flex}   /* techno-guru: the special is «КАМЕРА» (hold: the light), «БЕГ» is a satellite */
body.touchp.tplay.tflash #smokeBtn{display:flex}   /* tflash: sawed-off photo flash */
body.touchp.tplay.tsatan #smokeBtn{display:flex}   /* «Сосуд Сатаны»: РЫВОК */
body.touchp.tplay.tposs.tabF #grbBtn{display:flex}   /* «Ball of Satan», a possessed: ЗАХВАТ (the ДЫМ slot: a possessed has no smoke) */
body.touchp.tplay.tposs.tabL #lepBtn,body.touchp.tplay.tposs.tabH #howlBtn,body.touchp.tplay.tposs.tabS #splBtn{display:flex}   /* + СПЛЕШ: both pentagrams lit */
#splBtn{right:calc(200px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px))}   /* РЫВОК (the evolution 2), ВОЙ (3): shown when open */
.tact.lock{opacity:.4;border-style:dashed}   /* a locked ability: the badge says its stage */
#lepBtn{right:calc(57px + env(safe-area-inset-right,0px));bottom:calc(158px + env(safe-area-inset-bottom,0px))}
#howlBtn{right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(214px + env(safe-area-inset-bottom,0px))}

/* slots, radius 106 (bounding boxes clear the fire button's too) */
#sprBtn{right:calc(57px + env(safe-area-inset-right,0px));bottom:calc(158px + env(safe-area-inset-bottom,0px))}
#smokeBtn,#grbBtn{right:calc(154px + env(safe-area-inset-right,0px));bottom:calc(61px + env(safe-area-inset-bottom,0px))}
/* «Огонь: стиком»: radius 132 */
body.stickfire #sprBtn{right:calc(60px + env(safe-area-inset-right,0px));bottom:calc(184px + env(safe-area-inset-bottom,0px))}
body.stickfire #smokeBtn,body.stickfire #grbBtn{right:calc(180px + env(safe-area-inset-right,0px));bottom:calc(64px + env(safe-area-inset-bottom,0px))}

/* the special button (v0.10.2, #spBtn .tact.sp): the second action button next to attack — the class move (ninja
   «РЫВОК», guard «БЕГ») that morphs into the object in focus (.ctx: СПРЯТАТЬСЯ / ВЫЙТИ / ВЗЯТЬ / БАР / ИГРАТЬ / ВЫБИТЬ /
   ПЕРЕПРЫГНУТЬ). 64 px on the arc at 135°, radius 116 (stick-fire: 150); the «взять / бросить» chip and the separate
   «РЫВОК» are gone (a guard's «БЕГ» lives here; the ninja keeps «БЕГ» / «ДЫМ» as satellites).
   .swap = icon + label cross-fade, .long = a long label in smaller type, .lp = the long-press ring (drop the gun). */
.tact.sp{--sz:64px;gap:3px;font-size:8px;letter-spacing:.08em;background:rgba(7,5,11,.5);
  transition:background-color .15s,color .15s,border-color .2s,box-shadow .25s,transform .08s}
.tact.sp svg{width:22px;height:22px;transition:opacity .11s ease,transform .11s ease}
.tact.sp .lb{display:block;white-space:nowrap;transition:opacity .11s ease,transform .11s ease}
.tact.sp.long{font-size:7px;letter-spacing:.02em}
.tact.sp.swap svg,.tact.sp.swap .lb{opacity:0;transform:scale(.8)}
.tact.sp.ctx{border-color:var(--amber,#ffb547);border-width:2px;background:rgba(7,5,11,.66);box-shadow:inset 0 0 0 5px rgba(255,181,71,.16),0 0 16px rgba(255,181,71,.4)}
.tact.sp.ctx.on,.tact.sp.on{background:rgba(255,181,71,.85);color:var(--bg,#07050b)}
.tact.sp.lp::after{content:"";position:absolute;inset:-5px;border-radius:50%;pointer-events:none;
  background:conic-gradient(var(--amber,#ffb547) calc(var(--lp,0) * 1turn),transparent 0);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px))}
#spBtn{right:calc(124px + env(safe-area-inset-right,0px));bottom:calc(128px + env(safe-area-inset-bottom,0px))}
body.stickfire #spBtn{right:calc(148px + env(safe-area-inset-right,0px));bottom:calc(152px + env(safe-area-inset-bottom,0px))}