/* Voice panel above the cube (PLAN_V8 §В, GAME_V4_CONTRACT.md «Voice panel»; js/game-voice-panel.js).
   The «Эффект» button (44 px row) over a 68 px glass strip: 116 px in all. The shell places the root; it takes the width. */
.vp{position:relative;display:flex;flex-direction:column;gap:4px;width:100%;min-width:0;color:var(--text)}

/* «Эффект»: a chip with a 44 px hit area, the current effect beside it, the bloom above it */
.vp__top{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:44px}
.vp__fx{position:relative;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px;border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,var(--lavender) 45%,transparent);background:rgba(14,15,18,.72);color:var(--text-2);
  font:400 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;-webkit-touch-callout:none;
  transition:color 300ms var(--ease),border-color 300ms var(--ease),box-shadow 300ms var(--ease),transform 150ms var(--ease)}
.vp__fx::after{content:"";position:absolute;inset:-5px -4px}                 /* hit area ≥ 44 px */
.vp__fx svg{width:13px;height:13px;flex:none}
.vp__fx:active{transform:scale(.96)}
.vp__fx.is-on{color:var(--text);border-color:color-mix(in srgb,var(--lavender) 85%,transparent);
  box-shadow:0 0 12px rgba(190,170,255,.35),inset 0 0 8px rgba(190,170,255,.18)}
.vp__fx.is-on svg{color:var(--lavender);filter:drop-shadow(0 0 4px rgba(190,170,255,.8))}
/* holding: a light fills the chip from the left in 600 ms (then the effect is off) */
.vp__fx::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(190,170,255,.28),rgba(190,170,255,.08));
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.vp__fx.is-holding::before{transform:scaleX(1);transition:transform 600ms linear}
/* ⊘ «Без эффекта»: only while an effect is on, a 44 px hit area */
.vp__off{position:relative;flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;margin-left:-4px;
  border:1px solid color-mix(in srgb,var(--lavender) 45%,transparent);background:rgba(14,15,18,.72);color:var(--text-2);
  transition:color 300ms var(--ease),transform 150ms var(--ease)}
.vp__off::after{content:"";position:absolute;inset:-6px}
.vp__off svg{width:14px;height:14px}
.vp__off:active{transform:scale(.94);color:var(--text)}
.vp__name{min-width:0;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 9px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.vp__bloom{position:absolute;left:50%;bottom:calc(100% - 4px);transform:translate(-50%,0);opacity:0;pointer-events:none;white-space:nowrap;
  font:300 15px/1 var(--f-sans);letter-spacing:.26em;text-transform:uppercase;color:#f3ecff;
  text-shadow:0 0 10px rgba(190,170,255,.95),0 0 24px rgba(190,170,255,.55),0 0 2px rgba(0,0,0,.9)}
.vp__bloom.is-on{animation:vp-bloom 1100ms var(--ease-out) forwards}
@keyframes vp-bloom{0%{opacity:0;transform:translate(-50%,8px) scale(.9);filter:blur(3px)}22%{opacity:1;transform:translate(-50%,0) scale(1.06);filter:none}
  70%{opacity:1;transform:translate(-50%,-2px) scale(1)}100%{opacity:0;transform:translate(-50%,-8px) scale(1)}}

/* the glass strip: record button left, the voice canvas filling the rest */
.vp__box{position:relative;display:flex;align-items:center;gap:10px;height:68px;padding:6px 14px 6px 6px;border-radius:34px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 60%),rgba(14,15,18,.72);
  border:1px solid var(--glass-border-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 26px rgba(0,0,0,.35);
  transition:border-color 300ms var(--ease),box-shadow 300ms var(--ease)} /* no backdrop blur: the cube below redraws every frame */
.vp[data-state=rec] .vp__box{border-color:rgba(255,77,79,.55);box-shadow:inset 0 0 14px rgba(229,72,77,.12),0 0 18px rgba(229,72,77,.18)}
.vp__cv{flex:1;min-width:0;height:52px;display:block}

.vp__rec{position:relative;flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(229,72,77,.14),rgba(14,15,18,.82) 70%);border:1px solid rgba(229,72,77,.55);color:var(--text);
  box-shadow:0 0 0 calc(var(--lvl,0) * 5px) rgba(229,72,77,.28),0 0 calc(var(--lvl,0) * 16px) rgba(229,72,77,.55);
  transition:transform 150ms var(--ease),border-color 300ms var(--ease),background 300ms var(--ease),opacity 300ms var(--ease),box-shadow 90ms linear}
.vp__rec::before{content:"";width:18px;height:18px;border-radius:50%;background:#ff4d4f;box-shadow:0 0 12px rgba(255,77,79,.7)}
.vp__rec[aria-pressed=true]::before{display:none}
.vp__rec:active{transform:scale(.94)}
.vp__rec:disabled{opacity:.35;cursor:default;transform:none}
.vp__dig{font:300 24px/1 var(--f-mono);color:var(--amber);font-variant-numeric:tabular-nums}
.vp__dig:empty{display:none}
.vp[data-state=mic] .vp__dig{font-size:18px;color:var(--text-2);animation:vp-blink 1s ease-in-out infinite}
.vp[data-state=rec] .vp__rec{background:radial-gradient(circle,rgba(229,72,77,.34),rgba(14,15,18,.82) 75%);border-color:rgba(255,77,79,.95)}
.vp[data-state=rec] .vp__dig{font:400 11px/1 var(--f-mono);letter-spacing:.14em;color:#ff6b6b;animation:vp-blink 1s ease-in-out infinite}
@keyframes vp-blink{50%{opacity:.45}}

/* the voice volume (0–150 %): a thin slider right of the wave, its number above; only with a take */
.vp__vol{flex:none;width:84px;height:56px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
.vp__voln{font:400 9px/1 var(--f-mono);letter-spacing:.12em;color:var(--text-3);font-variant-numeric:tabular-nums}
.vp__vin{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:none;touch-action:none;cursor:pointer}
.vp__vin::-webkit-slider-runnable-track{height:2px;border-radius:1px;background:rgba(255,255,255,.18)}
.vp__vin::-moz-range-track{height:2px;border-radius:1px;background:rgba(255,255,255,.18)}
.vp__vin::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-7px;border-radius:50%;border:0;background:var(--amber);box-shadow:0 0 8px rgba(247,176,100,.6)}
.vp__vin::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:0;background:var(--amber);box-shadow:0 0 8px rgba(247,176,100,.6)}

/* ✕: small in the corner, a 44 px hit area */
.vp__clr{position:absolute;top:4px;right:8px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  color:var(--text-3);background:rgba(0,0,0,.45);border:1px solid var(--glass-border-strong);transition:color 300ms var(--ease)}
.vp__clr::after{content:"";position:absolute;inset:-11px}
.vp__clr svg{width:10px;height:10px}
.vp__clr:active{color:var(--text)}

@media (prefers-reduced-motion: reduce){
  .vp__bloom,.vp__bloom.is-on{animation:none;opacity:0}
  .vp[data-state=mic] .vp__dig,.vp[data-state=rec] .vp__dig{animation:none}
  .vp__fx.is-holding::before{transition:none;transform:scaleX(.5)}
  .vp__off,.vp__off:active{transition:none;transform:none}
}