/* GANG WAR KFS – Sprachchat (client/voice/*.js). Wird nach ui.css/app.css geladen und nutzt deren --gw-* Farben.
   Lobby: Mikro + Hören unten links neben «Verlassen». Liste: Lautsprecher pro Spieler (tippen = stumm).
   HUD: Touch = Mikro-Knopf oben rechts vor Punktestand/Menü (weit weg von Joystick und Feuer), PC = Anzeige unter
   der Minimap. «Spricht gerade»: Namen links unter der Minimap. Animationen nur per Klasse, nichts pro Bild. */
.vc-dock[hidden],.vc-hint[hidden],.vc-chip[hidden],.vc-hud[hidden],.vc-pause[hidden]{display:none!important}
#voice-audio{display:none}

/* ---------- Grundbaustein: Pegel-Striche (nur beim Sprechen animiert) ---------- */
.vc-bars{display:none;align-items:flex-end;gap:2px;height:12px;pointer-events:none}
.vc-bars b{display:block;width:3px;height:100%;background:currentColor;transform-origin:50% 100%;transform:scaleY(.35)}
[data-vc=talk] .vc-bars{display:inline-flex}
[data-vc=talk] .vc-bars b{animation:vc-eq .5s ease-in-out infinite alternate}
[data-vc=talk] .vc-bars b:nth-child(2){animation-delay:-.18s;animation-duration:.42s}
[data-vc=talk] .vc-bars b:nth-child(3){animation-delay:-.32s;animation-duration:.56s}
@keyframes vc-eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes vc-wait{50%{opacity:.35}}
.vc-ico{display:grid;place-items:center;pointer-events:none}
.vc-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vc-ico .vc-x{stroke:var(--gw-red-hi)}

/* ---------- Raum-Lobby: Knöpfe neben «Verlassen» ---------- */
.gw-room-foot.vc-has{grid-template-columns:auto auto minmax(0,1fr) auto}
.vc-dock{display:flex;align-items:center;gap:8px;min-width:0}
.vc-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;min-width:42px;padding:0 14px;border:1px solid var(--gw-line-2);border-radius:1px;background:rgba(236,232,224,.05);color:var(--gw-dim);font:700 15px/1 var(--gw-ui);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.vc-btn:hover{background:rgba(236,232,224,.1);border-color:var(--gw-line-3);color:var(--gw-text)}
.vc-btn .vc-ico{width:19px;height:19px}
.vc-btn .vc-label{min-width:5.6em;text-align:left}
.vc-btn .vc-bars{display:inline-flex;visibility:hidden;order:3}   /* Platz immer reserviert: kein Springen der Fusszeile */
.vc-btn[data-vc=talk] .vc-bars{visibility:visible}
.vc-out{padding:0}
.vc-out[data-on=true]{color:var(--gw-text)}
.vc-out[data-on=false]{color:var(--gw-mute)}
.vc-mic[data-vc=on],.vc-mic[data-vc=armed],.vc-mic[data-vc=talk]{border-color:var(--gw-accent);color:var(--gw-accent);background:rgba(233,182,74,.1);box-shadow:0 0 24px -12px var(--gw-accent-glow)}
.vc-mic[data-vc=armed]{border-style:dashed}
.vc-mic[data-vc=talk]{background:rgba(233,182,74,.2);color:var(--gw-accent-hi);box-shadow:0 0 0 1px rgba(233,182,74,.35),0 0 28px -8px var(--gw-accent-glow)}
.vc-mic[data-vc=wait]{animation:vc-wait 1s ease-in-out infinite}
.vc-mic[data-vc=denied]{border-color:rgba(226,38,60,.65);color:var(--gw-red-hi)}
.vc-dock.is-locked .vc-mic{color:var(--gw-mute);border-style:dashed;padding:0;width:42px}
.vc-dock.is-locked .vc-label{display:none}
/* Hinweis unter dem Lobby-Titel (ohne https / Gruppe voll / Mikro blockiert) */
.vc-hint{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:6px;color:var(--gw-accent);font:600 12px/1.15 var(--gw-ui);letter-spacing:.14em;text-transform:uppercase;white-space:normal;text-wrap:balance}
.vc-hint::before{content:"";flex:none;width:6px;height:6px;background:var(--gw-accent);transform:rotate(45deg);box-shadow:0 0 10px var(--gw-accent-glow)}
.vc-hint .vc-nb{white-space:nowrap}
.vc-dock>.vc-hint{margin:0;justify-content:flex-start;max-width:12.5em}
/* schmale Querformate (751 px): Mikro nur als Symbol, damit die Fusszeile auch für den Host passt */
@media (max-width:820px){.vc-dock .vc-mic{padding:0;width:42px}.vc-dock .vc-mic .vc-label,.vc-dock .vc-mic .vc-bars{display:none}}

/* ---------- Spielerliste (Lobby) und Punktestand: Lautsprecher pro Spieler, Mikro bei mir ---------- */
.gw-roster li>.vc-cell{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.vc-peer,.vc-self{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:3px;height:26px;min-width:26px;padding:0 5px;border:1px solid var(--gw-line);border-radius:1px;background:rgba(10,11,13,.35);color:var(--gw-dim);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.vc-peer::after{content:"";position:absolute;inset:-6px -5px}
.vc-peer .vc-ico,.vc-self .vc-ico{width:15px;height:15px}
.vc-peer .vc-bars,.vc-self .vc-bars{height:10px}
.vc-peer:hover{border-color:var(--gw-line-3);color:var(--gw-text)}
.vc-peer[data-vc=on]{color:var(--gw-text);border-color:var(--gw-line-2)}
.vc-peer[data-vc=talk],.vc-self[data-vc=talk]{color:#fff;border-color:var(--team-hi,var(--gw-accent-hi));background:color-mix(in srgb,var(--team,var(--gw-accent)) 34%,rgba(10,11,13,.5));box-shadow:0 0 14px -4px var(--team-glow,var(--gw-accent-glow))}
.vc-peer[data-vc=wait]{opacity:.6;animation:vc-wait 1.2s ease-in-out infinite}
.vc-peer[data-vc=off],.vc-peer[data-vc=deaf]{opacity:.32}
.vc-peer[data-vc=mute]{color:var(--gw-red-hi);border-color:rgba(226,38,60,.62);background:rgba(226,38,60,.13)}
.vc-self{border-style:dashed;background:transparent}
.vc-self[data-vc=on],.vc-self[data-vc=armed]{color:var(--gw-accent);border-color:rgba(233,182,74,.6);border-style:solid}
.vc-self[data-vc=off],.vc-self[data-vc=locked]{opacity:.45}
.vc-self[data-vc=denied]{color:var(--gw-red-hi)}
.gw-trow>span:first-child>.vc-peer,.gw-trow>span:first-child>.vc-self{height:20px;min-width:22px;padding:0 3px;margin-right:-2px}
.gw-trow .vc-peer .vc-ico,.gw-trow .vc-self .vc-ico{width:13px;height:13px}

/* ---------- Match-HUD ---------- */
/* Touch: erster Knopf der Reihe oben rechts; 14 px Abstand (Trefferflächen der Nachbarn überlappen nicht) */
.hud-top .vc-hud{margin-right:6px;color:var(--gw-dim)}
.hud-top .vc-hud .vc-ico{width:18px;height:18px}
.hud-top .vc-hud .vc-bars{display:none!important}               /* Sprechen = Amber gefüllt, Knopf bleibt gleich gross */
.hud-top .vc-hud[data-vc=on],.hud-top .vc-hud[data-vc=armed]{border-color:var(--gw-accent);color:var(--gw-accent-hi);background:rgba(233,182,74,.16)}
.hud-top .vc-hud[data-vc=armed]{border-style:dashed}
.hud-top .vc-hud[data-vc=talk]{border-color:var(--gw-accent-hi);color:var(--gw-accent-ink);background:var(--gw-accent);box-shadow:0 0 18px -4px var(--gw-accent-glow)}
.hud-top .vc-hud[data-vc=wait]{animation:vc-wait 1s ease-in-out infinite}
.hud-top .vc-hud[data-vc=locked]{color:var(--gw-mute);border-style:dashed}
.hud-top .vc-hud[data-vc=denied]{color:var(--gw-red-hi);border-color:rgba(226,38,60,.65)}
/* PC: kleine Anzeige unter «Raum · Ping» (die HUD-Knöpfe sind am PC ausgeblendet) */
.vc-chip{position:absolute;top:calc(max(14px,var(--gw-sat,env(safe-area-inset-top))) + clamp(110px,24vh,168px) + 24px);left:max(16px,var(--gw-sal,env(safe-area-inset-left)));display:flex;align-items:center;gap:6px;color:rgba(236,232,224,.5);font:500 10px/1 var(--gw-mono);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 3px #000;pointer-events:none}
.vc-chip .vc-ico{width:12px;height:12px}
.vc-chip[data-vc=on],.vc-chip[data-vc=armed]{color:var(--gw-accent)}
.vc-chip[data-vc=talk]{color:var(--gw-accent-hi)}
.vc-chip[data-vc=locked]{opacity:.7}
body.touch .vc-chip{display:none}
/* «Spricht gerade»: bis 4 Namen links unter der Minimap (ausserhalb von Joystick und Bewegungsfeld-Mitte) */
.vc-talkers{position:absolute;top:calc(max(14px,var(--gw-sat,env(safe-area-inset-top))) + clamp(110px,24vh,168px) + 44px);left:max(16px,var(--gw-sal,env(safe-area-inset-left)));display:flex;flex-direction:column;gap:3px;margin:0;padding:0;list-style:none;pointer-events:none}
body.touch .vc-talkers{top:calc(max(14px,var(--gw-sat,env(safe-area-inset-top))) + clamp(110px,24vh,168px) + 10px)}
.vc-talkers li{display:flex;align-items:center;gap:7px;height:22px;max-width:190px;padding:0 12px 0 8px;border-left:2px solid var(--team);background:linear-gradient(90deg,rgba(9,10,12,.78),rgba(9,10,12,0));color:var(--gw-text);font:700 13px/1 var(--gw-ui);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;animation:vc-in .14s ease-out}
.vc-talkers li>span:last-child{overflow:hidden;text-overflow:ellipsis}
.vc-talkers .vc-ico{width:14px;height:14px;flex:none;color:var(--team-hi)}
@keyframes vc-in{from{transform:translateX(-8px);opacity:0}to{transform:none;opacity:1}}
#hud[hidden] .vc-talkers{display:none}

/* ---------- Pausenmenü ---------- */
.vc-pause{display:grid;gap:6px}
.vc-pause .vc-p-hint:empty{display:none}

/* ---------- Handy quer ---------- */
@media (max-height:500px){
  .vc-btn{height:34px;min-width:34px;padding:0 10px;font-size:13px;gap:6px}
  .vc-btn .vc-ico{width:17px;height:17px}
  .vc-out{padding:0}
  .vc-dock.is-locked .vc-mic{width:34px}
  @media (max-width:820px){.vc-dock .vc-mic{width:34px}}
  .vc-hint{font-size:10.5px;margin-top:4px;letter-spacing:.12em}
  .vc-dock .vc-mic{min-width:34px}
  .gw-room-foot.vc-has{column-gap:12px}
  .vc-peer,.vc-self{height:22px;min-width:22px;padding:0 3px}
  .vc-peer .vc-ico,.vc-self .vc-ico{width:13px;height:13px}
  .gw-roster li>.vc-cell{gap:5px}
  .vc-talkers li{height:19px;font-size:11.5px;max-width:160px}
  body.touch .vc-talkers{top:calc(max(14px,var(--gw-sat,env(safe-area-inset-top))) + 96px + 10px)}
}
@media (max-height:380px){
  .vc-btn .vc-label{min-width:0}
  .vc-talkers li:nth-child(n+3){display:none}                     /* 751×303: endet über dem Joystick-Ring */
  /* sehr flache Lobby (~16 px pro Zeile): Lautsprecher ohne Rahmen, passt in die Zeile; Trefferfläche bleibt grösser */
  .gw-roster .vc-peer,.gw-roster .vc-self{height:16px;min-width:18px;padding:0 2px;border-color:transparent;background:transparent;box-shadow:none}
  .gw-roster .vc-peer[data-vc=talk],.gw-roster .vc-self[data-vc=talk]{color:var(--team-hi,var(--gw-accent-hi));background:transparent;box-shadow:none}
  .gw-roster .vc-peer .vc-ico,.gw-roster .vc-self .vc-ico{width:12px;height:12px}
  .gw-roster .vc-peer .vc-bars,.gw-roster .vc-self .vc-bars{height:9px}
  .gw-roster .vc-peer::after{inset:-4px -6px}
  body.touch .vc-talkers{top:calc(max(14px,var(--gw-sat,env(safe-area-inset-top))) + 84px + 8px)}
}
@media (max-width:649px){.gw-room-foot.vc-has{grid-template-columns:1fr}.vc-dock{justify-content:center}}
@media (prefers-reduced-motion:reduce){[data-vc=talk] .vc-bars b,.vc-mic[data-vc=wait],.vc-peer[data-vc=wait],.hud-top .vc-hud[data-vc=wait],.vc-talkers li{animation:none!important}}

/* ---------- [2.7.1] Mikro-Hinweis: andere sind im Raum, mein Mikro ist aus (Sprechblase am Knopf, Knopf pulsiert) ---------- */
.vc-dock{position:relative}
.vc-nudge[hidden]{display:none!important}
.vc-nudge{position:absolute;left:0;bottom:calc(100% + 12px);z-index:3;display:flex;flex-direction:column;gap:3px;padding:7px 12px 8px;
  background:var(--gw-accent);color:var(--gw-accent-ink);font:700 13px/1.05 var(--gw-ui);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.85);pointer-events:none;animation:vc-nudge 1.6s ease-in-out infinite}
.vc-nudge span{font-weight:600;font-size:10.5px;letter-spacing:.1em;opacity:.78}
.vc-nudge::after{content:"";position:absolute;left:15px;top:100%;border:7px solid transparent;border-bottom:0;border-top-color:var(--gw-accent)}
@keyframes vc-nudge{50%{transform:translateY(-3px)}}
@keyframes vc-pulse{0%,100%{box-shadow:0 0 0 0 rgba(233,182,74,.55)}60%{box-shadow:0 0 0 9px rgba(233,182,74,0)}}
.vc-btn.is-nudge{border-color:var(--gw-accent);color:var(--gw-accent-hi);animation:vc-pulse 1.6s ease-in-out infinite}
.vc-btn.is-nudge .vc-label{display:inline!important}            /* auch am Handy: «Mikro aus» lesbar */
.vc-dock .vc-mic.is-nudge{width:auto!important;padding:0 12px!important}
.hud-top .vc-hud.is-nudge{border-color:var(--gw-accent);color:var(--gw-accent-hi);animation:vc-pulse 1.6s ease-in-out infinite}
/* Treffpunkt (kein Lobby-Bildschirm): Blase unter dem Mikro-Knopf oben rechts (Touch) bzw. unter der PC-Anzeige */
.vc-nudge--hud{left:auto;bottom:auto;right:max(16px,var(--gw-sar,env(safe-area-inset-right)));top:calc(max(14px,var(--gw-sat,env(safe-area-inset-top))) + 60px)}
.vc-nudge--hud::after{left:auto;right:16px;top:auto;bottom:100%;border:7px solid transparent;border-top:0;border-bottom-color:var(--gw-accent)}
body:not(.touch) .vc-nudge--hud{right:auto;left:max(16px,var(--gw-sal,env(safe-area-inset-left)));top:calc(max(14px,var(--gw-sat,env(safe-area-inset-top))) + clamp(110px,24vh,168px) + 52px)}
body:not(.touch) .vc-nudge--hud::after{right:auto;left:16px}
#hud[hidden] .vc-nudge--hud{display:none}
@media (prefers-reduced-motion:reduce){.vc-nudge,.vc-btn.is-nudge,.hud-top .vc-hud.is-nudge{animation:none}}

/* ---------- [2.7.1] Namensschilder auf dem Dach: Mikro an / aus / blockiert, spricht, verbindet, keine Verbindung ---------- */
.rl-meta .rl-mic{display:inline-grid;place-items:center;width:12px;height:12px;color:var(--gw-dim)}
.rl-meta .rl-mic:empty{display:none}
.rl-mic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.rl-mic[data-vc=on]{color:#ece8e0}
.rl-mic[data-vc=talk]{color:var(--gw-accent-hi)}
.rl-mic[data-vc=off]{color:var(--gw-mute)}
.rl-mic[data-vc=blocked],.rl-mic[data-vc=mute]{color:var(--gw-red-hi)}
.rl-mic[data-vc=wait]{color:#ece8e0;animation:vc-wait 1s ease-in-out infinite}
.rl-mic[data-vc=fail]{color:#ff9f43}
.rl-mic[data-vc=far]{opacity:.4}
.rl-plates .rl-plate.is-talk{box-shadow:inset 0 -2px 0 var(--team),0 0 0 1px var(--gw-accent-hi),0 0 18px -4px var(--gw-accent-glow)}
/* Liste: verbunden, aber Mikro aus / blockiert */
.vc-peer[data-vc=nomic]{opacity:.5}
.vc-peer[data-vc=blocked]{opacity:.7;color:var(--gw-red-hi)}

/* ---------- [2.8] Text-Chat (client/ui/chat.js): Zeilen blenden aus, offen = Verlauf + Eingabe oben Mitte ---------- */
.ct-root[hidden],.ct-bar[hidden],.ct-btn[hidden],.ct-hud[hidden]{display:none!important}
.ct-root{position:fixed;z-index:7;left:max(16px,var(--gw-sal,env(safe-area-inset-left)));top:calc(max(14px,var(--gw-sat,env(safe-area-inset-top))) + clamp(110px,24vh,168px) + 150px);width:min(340px,40vw);pointer-events:none}
body.touch .ct-root{left:50%;transform:translateX(-50%);top:calc(max(12px,var(--gw-sat,env(safe-area-inset-top))) + 52px);width:min(420px,48vw)}
.ct-root.is-lobby{top:auto;bottom:clamp(150px,30vh,230px);transform:none;left:max(20px,var(--gw-sal,env(safe-area-inset-left)));width:min(340px,34vw)}
body.touch .ct-root.is-lobby{top:auto;transform:none;left:max(12px,var(--gw-sal,env(safe-area-inset-left)));bottom:118px;width:min(300px,38vw)}
.ct-log{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;margin:0;padding:0;list-style:none;max-height:calc(6 * 24px);overflow:hidden}
body.touch .ct-log{max-height:calc(3 * 22px)}
.ct-root.is-open .ct-log{max-height:calc(10 * 24px);overflow-y:auto;pointer-events:auto}
.ct-line{display:block;padding:3px 9px 4px;background:linear-gradient(90deg,rgba(9,10,12,.78),rgba(9,10,12,.35));font:500 13px/1.35 var(--gw-ui);color:var(--gw-text);overflow-wrap:anywhere;transition:opacity .6s ease}
body.touch .ct-line{font-size:12px;padding:2px 8px 3px;text-align:left}
.ct-line.is-old{opacity:0}
.ct-root.is-open .ct-line.is-old{opacity:.9}
.ct-name{margin-right:6px;font-weight:700;letter-spacing:.04em}
.ct-name.is-blue{color:var(--gw-blue-hi,#8fb0ff)}.ct-name.is-red{color:var(--gw-red-hi,#ff8a97)}.ct-name.is-ffa{color:var(--gw-accent,#e9b64a)}
.ct-line.is-me .ct-name{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ct-line.is-team{border-left:2px solid var(--gw-accent)}
.ct-bar{position:fixed;z-index:31;left:50%;top:max(10px,var(--gw-sat,env(safe-area-inset-top)));transform:translateX(-50%);display:flex;gap:8px;width:min(560px,92vw);padding:8px;background:rgba(9,10,12,.94);border:1px solid var(--gw-line-2);box-shadow:0 14px 40px rgba(0,0,0,.6);pointer-events:auto}
.ct-input{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid var(--gw-line-2);border-radius:1px;background:rgba(236,232,224,.06);color:var(--gw-text);font:500 16px/1 var(--gw-ui)}   /* 16 px: iOS zoomt sonst */
.ct-input:focus{outline:none;border-color:var(--gw-accent)}
.ct-send{height:40px}
.ct-btn{padding:0;width:42px}
.ct-btn svg,.ct-hud svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.hud-top .ct-hud{color:var(--gw-dim)}
@media (max-height:500px){.ct-btn{width:34px;min-width:34px}}
@media (prefers-reduced-motion:reduce){.ct-line{transition:none}}