/* 🎙 The voice rooms (js/voice.js, 2026-09-11; the persistent players' room
   2026-09-12): the sidebar widget under the tournament widget (the live
   widget's own dress), the PILL that rides over every other screen while
   joined, and the people panel. */

/* ------------------------------------------------------------ the widget */
#vienna-voice.live-widget { width: auto; padding: 10px 12px; background: rgba(20, 16, 10, .94); border-color: #8a6a2c; font-size: 12.5px; }
/* The status is two fixed rows (js/voice.js statusParts): the headcount, and
   under it a single ellipsised row for who is speaking that keeps its height
   while EMPTY — a name arriving must never push the buttons below it. */
.vc-status { display: block; }
.vc-status .vc-count { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-status .vc-who { display: block; min-height: 1.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #b4f0c0; }
.vc-row { display: flex; gap: 6px; }
.vc-row > .lw-btn { width: auto; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-mic.on { border-color: rgba(120, 220, 140, .6); color: #b4f0c0; background: rgba(120, 220, 140, .08); }
.vc-mic.muted { opacity: .7; }
/* the ⚙ beside the mic: the microphone's own settings (js/voice.js micControls).
   It never grows, so the label beside it keeps the whole row it is given. */
.vc-row > .vc-gear { flex: 0 0 auto; width: auto; padding: 8px 11px; font-size: 14px; line-height: 1; }
.vc-leave { color: #ffb3a7; }
/* the other room, while you are in one: a move, not a second call, so it is
   quieter than the mic row above it and never reads as an action on this one */
.vc-switch { opacity: .82; font-size: 12px; }
.vc-switch:hover { opacity: 1; }
.vc-err { color: #ffb3a7; }
.vc-note { color: #ffe9a8; font-size: 12px; }
/* the zone room walking with the player: only ever on screen in transit, so it
   is a quiet note rather than a state the widget wears */
.vc-travel { color: #cfe3ff; font-size: 12px; opacity: .9; }

/* ------------------------------------------------ a ring, over any screen
   The versus challenge card's shape and corner, because it is the same kind
   of thing arriving at the same kind of moment — and above the pill (43) and
   the panel (44), under the tournament's match call (70), which is a fixture
   of a match already under way. */
.voice-call-card {
  position: fixed; right: 18px; top: 18px; z-index: 46; max-width: 340px;
  background: #16201a; border: 1px solid rgba(120, 220, 140, .55);
  border-radius: 10px; box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
  color: #eee; font-size: 13px; text-align: left; animation: vcc-in .28s ease both;
}
.voice-call-card.hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .voice-call-card { animation: none; } }
@keyframes vcc-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.vcc-in { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.voice-call-card b { font-size: 15px; }
.vcc-sub { font-size: 12.5px; color: #9aa0aa; }
.vcc-ring { font-size: 11.5px; color: #b4f0c0; letter-spacing: .04em; }
.vcc-acts { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.vcc-acts .mode-btn { flex: 0 0 auto; padding: 7px 14px; font-size: 13px; }
@media (max-width: 560px) { .voice-call-card { right: 10px; left: 10px; max-width: none; } }
/* the widget's own line while a call is up: green like the room's speaker row */
.vc-status.vc-call .vc-count { color: #b4f0c0; }

/* --------------------------------------------------------------- the pill
   Joined and nowhere near a sidebar (a run, a mini-game, the spectator view,
   the tournament screen): under the HUD's top-right figures, over everything
   an overlay draws (10) and under the dialogs (45) and the match call (70). */
.voice-pill {
  position: fixed; top: 64px; right: 12px; z-index: 43; display: flex; align-items: stretch; gap: 4px;
  padding: 4px; border-radius: 999px; background: rgba(12, 10, 6, .86); border: 1px solid rgba(255, 215, 94, .45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5); backdrop-filter: blur(6px); font-size: 12px; color: #eee;
}
.voice-pill.hidden { display: none; }
.voice-pill button { font: inherit; cursor: pointer; border-radius: 999px; border: 1px solid transparent; background: transparent; color: inherit; }
.voice-pill .vp-main { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; }
.voice-pill .vp-main b { font-size: 14px; color: var(--gold, #ffd75e); }
.voice-pill .vp-main small { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d8d8d8; }
.voice-pill .vp-main:hover { background: rgba(255, 255, 255, .08); }
.voice-pill .vp-btn { padding: 4px 10px; font-weight: 800; font-size: 12px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); white-space: nowrap; }
.voice-pill .vp-btn.on { color: #b4f0c0; border-color: rgba(120, 220, 140, .6); background: rgba(120, 220, 140, .12); }
.voice-pill .vp-btn.muted { opacity: .7; }
.voice-pill .vc-gear { padding: 4px 9px; font-size: 14px; line-height: 1.2; }
.voice-pill .vp-unlock { color: #2a1d05; background: var(--gold, #ffd75e); border-color: var(--gold, #ffd75e); animation: lw-pulse 1.4s infinite; }
@media (max-width: 900px) { .voice-pill { top: auto; bottom: 14px; right: 10px; } .voice-pill .vp-main small { max-width: 90px; } }

/* -------------------------------------------------------------- the panel
   A card at the top right (the pill's corner), not a full overlay: the
   world or the menu stays in view behind it, a click outside closes it. */
.voice-panel { position: fixed; inset: 0; z-index: 44; background: transparent; }
.voice-panel.hidden { display: none; }
.voice-panel .vc-card {
  position: absolute; top: 56px; right: 12px; width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 72px); overflow: auto; box-sizing: border-box;
  padding: 14px 16px 12px; border-radius: 16px; background: linear-gradient(180deg, rgba(34, 27, 10, .98), rgba(14, 10, 4, .98)); border: 2px solid rgba(255, 215, 94, .5);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7); color: #eee; font-size: 13px; text-align: left;
}
@media (max-width: 900px) { .voice-panel .vc-card { top: auto; bottom: 10px; right: 10px; max-height: calc(100vh - 20px); }
  /* collapsed on a phone it is a bar along the bottom, not a card with a
     hole in it: the head tightens to one line and it hugs the edge. */
  .voice-panel .vc-card.shut { padding: 10px 12px; max-height: none; overflow: visible; }
  .voice-panel .vc-card.shut .vc-eyebrow { display: none; }
  .voice-panel .vc-card.shut .vc-head b { font-size: 14.5px; }
}
.vc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.vc-head b { font-size: 16px; color: var(--gold, #ffd75e); display: block; }
.vc-head small { color: #c9b98a; }
.vc-eyebrow { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #b9a76a; }
.vc-headacts { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.vc-x { font: inherit; font-size: 16px; color: #ccc; cursor: pointer; background: transparent; border: 0; padding: 2px 6px; }
.vc-x:hover { color: #fff; }
/* THE CARD COLLAPSES TO ITS HEAD (2026-09-13, Lionel: it needs to be
   collapsible in the mobile view). The caret is the fold language the rail
   already speaks — \25BE open, \25B8 shut — and collapsed the card keeps the
   room, who is speaking, the microphone and any note that is up, while the
   roster, the tabs and Leave go away. The touch target is 32px, and collapsed
   the whole head is the handle (js/voice.js onPanelClick). */
.vc-pfold { font: inherit; font-size: 13px; line-height: 1; color: #c9b98a; cursor: pointer; background: transparent; border: 0; padding: 6px 6px 4px; min-width: 32px; }
.vc-pfold::before { content: "\25BE"; }
.vc-pfold:hover { color: var(--gold, #ffd75e); }
.vc-card.shut .vc-pfold::before { content: "\25B8"; }
.vc-card.shut .vc-tabs, .vc-card.shut .vc-tabbody, .vc-card.shut .vc-foot { display: none; }
.vc-card.shut .vc-head { cursor: pointer; }
.vc-card.shut .vc-row { margin-bottom: 0; }
.vc-card .vc-row { margin: 10px 0 6px; align-items: center; }
.vc-card .vc-row .lw-btn { flex: 0 0 auto; width: auto; padding: 8px 14px; }
.vc-master { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; }
.vc-master input, .vc-vol input, .vc-gain input { flex: 1 1 0; min-width: 40px; margin: 0; accent-color: var(--gold, #ffd75e); }
.vc-master b, .vc-gain b { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
/* the panel turns two pages: who is in the room, and your own microphone */
.vc-tabs { display: flex; gap: 4px; margin: 12px 0 10px; border-bottom: 1px solid rgba(255, 215, 94, .18); }
.vc-tab { font: inherit; font-size: 12px; font-weight: 800; color: #c9b98a; cursor: pointer; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 6px 9px; margin-bottom: -1px; white-space: nowrap; }
.vc-tab:hover { color: var(--gold, #ffd75e); }
.vc-tab.on { color: var(--gold, #ffd75e); border-bottom-color: var(--gold, #ffd75e); }
.vc-h { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #c9a227; margin: 12px 0 6px; }
.vc-host { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; margin-top: 8px; border-radius: 10px; background: rgba(255, 90, 74, .08); border: 1px solid rgba(255, 90, 74, .35); }
.vc-host .vc-h { margin: 0 4px 0 0; }
.vc-host small { flex-basis: 100%; color: #b6bcc6; font-size: 11px; }
.vc-hbtn { font: inherit; font-size: 12px; font-weight: 700; color: #eee; cursor: pointer; padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); white-space: nowrap; }
.vc-hbtn:hover:not(:disabled) { border-color: var(--gold, #ffd75e); }
.vc-hbtn:disabled { opacity: .5; cursor: default; }
.vc-hbtn.on { color: #ffd6d0; background: rgba(255, 90, 74, .18); border-color: rgba(255, 90, 74, .6); }
.vc-kick { padding: 5px 8px; }
.vc-people { display: flex; flex-direction: column; gap: 4px; }
.vc-person { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-auto-flow: dense; align-items: center; gap: 6px 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.vc-person.speaking { border-color: rgba(120, 220, 140, .6); background: rgba(120, 220, 140, .07); }
.vc-person.me { border-color: rgba(255, 215, 94, .35); }
.vc-mic-ic { text-align: center; }
.vc-name { display: flex; flex-direction: column; min-width: 0; }
.vc-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-name small { color: #9aa0aa; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-level { display: block; height: 6px; min-width: 54px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.vc-level b { display: block; height: 100%; width: 0; background: #8ee6a0; transition: width .08s linear; }
.vc-level b.hot { background: #ffb347; }
.vc-level b.clip { background: #ff5a4a; }
.vc-vol, .vc-gain { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.vc-person .vc-vol { grid-column: 2 / span 2; }
.vc-person .vc-gain { grid-column: 1 / span 2; }
.vc-person .vc-hacts { grid-column: 3; justify-self: end; display: flex; gap: 4px; }
/* the host's row under a person (js/voice.js procRowHtml): the microphone
   switches they have on their own 🎤 page, flipped from here. Each box keeps
   its own hint beside it, and the row WRAPS rather than squeezing a label —
   the card is ~390px and two labelled boxes with a hint do not fit a line. */
.vc-person .vc-hproc { grid-column: 1 / span 3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-width: 0; }
.vc-hsw { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vc-hswitch { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #d8d8d8; cursor: pointer; white-space: nowrap; }
.vc-hswitch input { margin: 0; accent-color: var(--gold, #ffd75e); }
.vc-hswitch:has(input:disabled) { opacity: .6; cursor: progress; }
.vc-hproc small { color: #9aa0aa; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-mine { display: flex; flex-direction: column; gap: 8px; }
.vc-mine .vc-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.vc-mine .vc-line select { flex: 1 1 0; min-width: 0; font: inherit; font-size: 12px; color: #eee; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; padding: 5px 8px; }
.vc-mine .vc-line small { color: #9aa0aa; font-size: 11px; }
.vc-meter { flex: 0 0 120px; }
.vc-switches { flex-wrap: wrap; gap: 6px 14px; }
.vc-mine .vc-switches > .vc-procwarn { flex-basis: 100%; color: #ffb366; line-height: 1.35; }
/* WHAT THE MICROPHONE IS FOR (2026-09-13): the talking / playing pair on the
   🎤 Your microphone page. SCOPED to .vc-mine like every rule on this page —
   voice.css loads after vienna.css and `.vc-*` is a namespace it shares with
   the world's chat, so a bare .vc-qual would be a rule looking for a fight. */
.vc-mine .vc-qual { flex-wrap: wrap; gap: 6px 8px; }
.vc-mine .vc-qual > small { flex-basis: 100%; font-size: 11px; line-height: 1.35; }
.vc-mine .vc-qbtn { font: inherit; font-size: 12px; font-weight: 700; color: #eee; cursor: pointer; padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); white-space: nowrap; }
.vc-mine .vc-qbtn:hover:not(:disabled) { border-color: var(--gold, #ffd75e); }
.vc-mine .vc-qbtn:disabled { opacity: .5; cursor: default; }
.vc-mine .vc-qbtn.on { color: #1b1408; background: var(--gold, #ffd75e); border-color: var(--gold, #ffd75e); }
.vc-switches label, .vc-mine > label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #d8d8d8; cursor: pointer; }
.vc-dim { color: #9aa0aa; }
.vc-foot { margin-top: 12px; }
.vc-foot .lw-btn { width: auto; padding: 7px 14px; font-size: 12px; }
.vc-card .vc-note { padding: 6px 10px; border-radius: 8px; background: rgba(255, 215, 94, .08); border: 1px solid rgba(255, 215, 94, .3); margin-top: 8px; }

/* 🛡 ROOMS (2026-09-12): the moderator's page — open a room, join one, close
   one. It is the one page the panel will draw with nobody in a call, so it
   carries its own empty state rather than borrowing the people list's. */
.vc-rooms { display: flex; flex-direction: column; gap: 8px; }
.vc-newroom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border-radius: 10px; background: rgba(255, 215, 94, .06); border: 1px solid rgba(255, 215, 94, .28); }
.vc-newroom input { flex: 1 1 150px; min-width: 0; font: inherit; font-size: 12.5px; color: #eee; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; padding: 6px 9px; }
.vc-newroom input::placeholder { color: #8b919b; }
.vc-newroom input:focus { outline: none; border-color: var(--gold, #ffd75e); }
.vc-room { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.vc-room.here { border-color: rgba(255, 215, 94, .45); }
.vc-room .vc-dim { grid-column: 1; font-size: 11px; }
.vc-room .vc-hacts { grid-column: 2; grid-row: 1 / span 2; justify-self: end; display: flex; gap: 4px; }
.vc-here { font-size: 11px; color: var(--gold, #ffd75e); align-self: center; }
.vc-rooms > small { color: #9aa0aa; font-size: 11px; line-height: 1.45; }
.vc-rooms .vc-err { color: #ffb4a8; font-size: 12px; }
.vc-modbtn { color: #ffe9a8; }