/* =========================================================
   Dub-Modus (Synchronisieren)
   Spiel-Stil: dunkles Studio mit Fernseher, Fernbedienung rechts, Wellenform unten (wie im Spiel)
   Schlichter Stil: flach und ruhig wie Voicitool
   ========================================================= */

.dub { display: flex; flex-direction: column; gap: 14px; }
.dub[hidden], .dub [hidden] { display: none !important; }

/* ---------- Lobby (Hub) ---------- */
.dub-hub { display: flex; flex-direction: column; gap: 14px; }
.dub-lead-tag { font-size: .78rem; font-weight: 900; padding: 3px 10px; border-radius: 999px; background: #ffd65c; color: #5a3d00; }
.dub-pack { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
.dub-pack img { width: 76px; height: 76px; object-fit: cover; border-radius: 16px; background: rgba(255,255,255,.6); }
.dub-pack h2 { margin: 0; }
.dub-pack .muted { font-size: .92rem; }
.dub-drop {
  border: 2px dashed rgba(10,111,168,.45); border-radius: 18px; padding: 18px; text-align: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.dub-drop.over { background: rgba(25,179,230,.15); border-color: var(--aqua); }
.dub-drop input[type=file] { display: none; }
.dub-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; }
.dub-switch { display: flex; align-items: center; gap: 10px; font-weight: 800; cursor: pointer; flex-direction: row; font-size: .95rem; }
.dub-switch input { width: 20px; height: 20px; accent-color: var(--aqua); }
.dub-select { font: inherit; font-weight: 700; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(10,111,168,.35); background: #fff; color: var(--ink); }
.dub-invite { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; }
.dub-invite img { width: 120px; height: 120px; border-radius: 12px; background: #fff; padding: 6px; }
.dub-code { font-size: 2.2rem; font-weight: 900; letter-spacing: .2em; margin: 0; }
.dub-link { word-break: break-all; font-weight: 700; font-size: .9rem; margin: 0; }
.dub-chat { display: flex; flex-direction: column; gap: 8px; }
.dub-chat-log { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; font-size: .92rem; }
.dub-chat-log p { margin: 0; }
.dub-chat-log b { font-weight: 900; }
.dub-chat form { display: flex; gap: 8px; }
.dub-chat input { flex: 1; min-width: 0; font: inherit; font-weight: 700; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(10,111,168,.35); }
.dub-chars .claim small { font-size: .78rem; color: var(--ink-soft); }
.dub-chars .claim.free { border-style: dashed; }
.dub-order { margin: 8px 0 0; padding-left: 1.4em; font-weight: 700; }
.dub-order li.me { color: var(--leaf-deep); }
.dub-note { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.dub-bar { height: 10px; border-radius: 999px; background: rgba(6,56,90,.12); overflow: hidden; }
.dub-bar span { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #b8f18a, var(--leaf) 55%, var(--leaf-deep)); transition: width .3s; }
.dub-start { display: flex; flex-direction: column; gap: 8px; align-items: center; }

/* ---------- Studio (Spiel-Stil) ---------- */
.dub-studio {
  --studio: #1e1e1e;
  --bezel-a: #555; --bezel-b: #3c3c3c;
  --remote: #262626;
  --btn-a: #e2f5f8; --btn-b: #a8dce6;
  --btn-off-a: #666; --btn-off-b: #4a4a4a;
  --wave-frame: #6fdcff;
  --clip-in: #ff00ff; --clip-out: #8a008a; --clip-pitch: #ff1a1a;
  --take-in: #3cff3c; --take-out: #0f7a0f; --take-pitch: #9dff6a;
  --playbar: #d8421c;
  --results: #0037ff;
  font-family: "Duru Sans", var(--font);
  color: #fff;
  position: relative;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  grid-template-areas: "tv" "caption" "wave" "remote" "extra";
}
body.dub-dark { background: #1e1e1e; }
body.dub-dark .sky { opacity: 0; transition: opacity .6s; }
.dub-backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 115%, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 90%),
    repeating-radial-gradient(circle at 50% 118%, #242424 0 26px, #1b1b1b 26px 52px);
}
.dub-tv { grid-area: tv; }
.dub-bezel {
  border-radius: clamp(18px, 4vw, 44px); padding: clamp(10px, 3.2vw, 38px);
  background: linear-gradient(180deg, var(--bezel-a), var(--bezel-b));
  box-shadow: 0 16px 40px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.18), inset 0 -3px 8px rgba(0,0,0,.35);
}
.dub-screen {
  position: relative; aspect-ratio: 1.976; background: #000; overflow: hidden;
  border: 3px solid #5f5f5f; box-shadow: inset 0 0 18px rgba(0,0,0,.9);
}
.dub-screen > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.dub-screen img { object-fit: contain; }
.dub-screen video { object-fit: fill; background: #000; }
.dub-screen canvas.dub-static { image-rendering: pixelated; }
.dub-onscreen {
  display: flex; align-items: flex-end; justify-content: center; padding: 3%; inset: auto 0 0 0; height: auto;
  pointer-events: none;
}
.dub-onscreen span {
  background: rgba(0,0,0,.62); padding: 6px 14px; border-radius: 10px; font-size: clamp(.9rem, 2.4vw, 1.3rem); font-weight: 700;
}
.dub-results {
  color: #fff; background: var(--results); display: flex; flex-direction: column; overflow: hidden; text-align: center;
}
.dub-results h3 { margin: 1.2% 0 0; font-weight: 400; font-size: clamp(1.4rem, 5vw, 3.4rem); }
.dub-results hr { width: 99%; border: 0; border-top: 1px solid rgba(255,255,255,.55); margin: .6% auto 0; }
.dub-results-list { flex: 1; overflow-y: auto; padding: 2% 4% 4%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dub-big { font-size: clamp(1.8rem, 6.5vw, 4.4rem); line-height: 1.25; margin: 2% 0 3%; white-space: pre-line; }
.dub-best { font-size: clamp(.95rem, 2.4vw, 1.3rem); margin: 0 0 8px; }
.dub-rrow { display: grid; grid-template-columns: 64px minmax(8.5em, 1fr) 160px; width: min(100%, 560px); gap: 12px; align-items: center; text-align: left; font-size: clamp(.9rem, 2.2vw, 1.3rem); }
.dub-rrow img { width: 64px; height: 64px; object-fit: cover; }
.dub-rrow canvas { width: 160px; height: 48px; background: #000; }
.dub-rrow small { display: block; opacity: .8; font-size: .78em; }

.dub-caption {
  grid-area: caption; text-align: center; margin: 0; min-height: 1.5em; transition: opacity .5s;
  font-size: clamp(1rem, 2.6vw, 1.65rem); text-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.dub-wave {
  grid-area: wave; position: relative; border: clamp(5px, 1vw, 9px) solid var(--wave-frame); border-radius: 14px; background: #000;
  height: clamp(110px, 17vw, 230px); overflow: hidden; touch-action: none;
}
.dub-wave canvas { width: 100%; height: 100%; display: block; }
.dub-wave.drag { cursor: ew-resize; }
.dub-sync {
  position: absolute; right: 8px; top: 6px; font-size: .9rem; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.6); padding: 2px 8px; border-radius: 8px;
}

.dub-remote {
  grid-area: remote; background: var(--remote); border: 2px solid #333; border-radius: 26px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px; align-self: start;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
}
.dub-remote h3 { margin: 0; text-align: center; font-size: 1.35rem; font-weight: 700; }
.dub-speaker { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.15rem; font-weight: 700; margin: 0; min-height: 1.4em; }
.dub-speaker svg { width: 26px; height: 22px; flex: none; }
.dub-who { text-align: center; margin: 2px 0; font-size: 1.05rem; }
.dub-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dub-btns .gap { grid-column: 1 / -1; height: 4px; }
.cv-btn {
  font-family: "Duru Sans", var(--font); font-size: 1.15rem; color: #111; cursor: pointer;
  border-radius: 10px; border: 1px solid #0b0b0b; padding: 12px 8px; min-height: 52px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--btn-a) 0%, var(--btn-b) 72%, #c9ecf2 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.75), inset 0 -3px 6px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.4);
}
.cv-btn:disabled {
  cursor: default; color: #8d8d8d;
  background: linear-gradient(180deg, var(--btn-off-a), var(--btn-off-b));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 2px 4px rgba(0,0,0,.4);
}
.cv-btn:not(:disabled):active { transform: translateY(1px); filter: brightness(.95); }
.cv-btn:focus-visible { outline: 3px solid var(--wave-frame); outline-offset: 2px; }
.cv-btn.wide { grid-column: 1 / -1; }
.cv-btn.rec { color: #111; }
.cv-btn .sq { display: inline-block; width: .7em; height: .7em; background: #111; margin-right: .35em; vertical-align: middle; }
.cv-pill {
  font-family: "Saira", "Duru Sans", var(--font); font-size: 1.25rem; color: #fff; cursor: pointer; padding: 6px 22px;
  border-radius: 999px; border: 2px solid #eaeaea;
  background: linear-gradient(180deg, #d4d4d4, #9c9c9c 55%, #7d7d7d);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 3px 8px rgba(0,0,0,.5);
}
.cv-pill:disabled { opacity: .45; cursor: default; }
.dub-extra { grid-area: extra; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.dub-extra .grow { flex: 1; }
.dub-status { text-align: center; font-weight: 700; margin: 0; min-height: 1.3em; color: #fff; }
.dub-status.warn { color: #ffd65c; }
.dub-order-mini { list-style: none; margin: 4px 0 0; padding: 0; font-size: .95rem; }
.dub-order-mini li { color: #aaa; text-shadow: 0 1px 2px #000; }
.dub-order-mini li.now { color: #fff; font-weight: 700; }
.dub-order-mini li.now::before { content: "> "; }
.dub-exp { display: flex; flex-direction: column; gap: 6px; }
.dub-exp .dub-bar { background: rgba(255,255,255,.18); }
.dub-link-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* Einstellungen (wie „Options & Settings“ im Spiel) */
.dub-options {
  position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 16px;
}
.dub-options-box {
  width: min(760px, 100%); max-height: 90vh; overflow: auto; background: #000; color: #fff;
  border: 3px solid #bdbdbd; border-radius: 14px; padding: 18px 20px; font-family: "Duru Sans", var(--font);
  display: flex; flex-direction: column; gap: 12px;
}
.dub-options-box h3 { margin: 0; text-align: center; font-weight: 400; font-size: 1.5rem; border-bottom: 1px solid #555; padding-bottom: 10px; }
.dub-opt { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; cursor: pointer; }
.dub-opt input { width: 22px; height: 22px; margin-top: 3px; accent-color: #6fdcff; }
.dub-opt span { font-size: 1.1rem; }
.dub-opt small { display: block; color: #aaa; font-size: .88rem; }
.dub-options-box label.vol { display: grid; grid-template-columns: 9em 1fr 3.5em; gap: 10px; align-items: center; font-weight: 400; }

/* Große Ansicht beim Anschauen */
.dub-studio.expanded .dub-tv {
  position: fixed; inset: 0; z-index: 25; background: #111; display: flex; align-items: center; justify-content: center; padding: 1.5vw;
}
.dub-studio.expanded .dub-bezel { width: min(100%, calc((100vh - 3vw) * 1.976 + 6vw)); }
.dub-studio.expanded .dub-close-big { position: fixed; right: 16px; bottom: 16px; z-index: 26; }
.dub-close-big { display: none; }
.dub-studio.expanded .dub-close-big { display: block; }

@media (min-width: 900px) {
  .dub-studio {
    grid-template-columns: minmax(0, 1fr) 290px;
    grid-template-areas: "tv remote" "caption caption" "wave wave" "extra extra";
    column-gap: 3vw;
  }
  .dub-studio .dub-caption, .dub-studio .dub-wave { margin: 0 6%; }
  .dub-btns { grid-template-columns: 1fr; }
  #app.dub-wide { max-width: 1320px; padding-bottom: 90px; }
  .dub-hub-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
  .dub-hub-grid > div { display: flex; flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .dub-caption { transition: none; }
}

/* =========================================================
   Schlichter Stil (wie Voicitool)
   ========================================================= */
[data-style="simple"] body.dub-dark { background: #f3f6f9; }
[data-style="simple"] .dub-backdrop { display: none; }
[data-style="simple"] .dub-studio {
  --wave-frame: #dde4ea;
  --clip-in: #6aa0ff; --clip-out: #33507f; --clip-pitch: #f5a524;
  --take-in: #3ecf8e; --take-out: #1d6a48; --take-pitch: #b6f5d6;
  --playbar: #ff4d4d;
  --results: #191c23;
  font-family: var(--font); color: var(--ink);
}
[data-style="simple"] .dub-bezel { background: #111318; border-radius: 10px; padding: 0; box-shadow: 0 1px 3px rgba(20,40,60,.12); }
[data-style="simple"] .dub-screen { border: 0; border-radius: 10px; box-shadow: none; }
[data-style="simple"] .dub-screen video { object-fit: contain; }
[data-style="simple"] .dub-caption { text-shadow: none; color: var(--ink); font-weight: 600; }
[data-style="simple"] .dub-wave { border-width: 1px; border-radius: 8px; background: #15181e; }
[data-style="simple"] .dub-remote { background: #fff; border: 1px solid #dde4ea; border-radius: 12px; box-shadow: 0 1px 3px rgba(20,40,60,.08); color: var(--ink); }
[data-style="simple"] .dub-remote h3 { font-weight: 700; }
[data-style="simple"] .cv-btn {
  font-family: var(--font); font-size: 1rem; font-weight: 700; color: #fff; border: 0; border-radius: 8px;
  background: var(--aqua); box-shadow: none; min-height: 46px;
}
[data-style="simple"] .cv-btn.rec { background: var(--rec); color: #fff; }
[data-style="simple"] .cv-btn .sq { background: #fff; }
[data-style="simple"] .cv-btn:disabled { background: #e6ecf1; color: #8a9aa8; }
[data-style="simple"] .cv-pill {
  font-family: var(--font); font-size: 1rem; font-weight: 700; color: var(--ink); text-shadow: none; border: 1px solid #dde4ea;
  background: #fff; box-shadow: 0 1px 3px rgba(20,40,60,.1); border-radius: 8px;
}
[data-style="simple"] .dub-status { color: var(--ink); }
[data-style="simple"] .dub-status.warn { color: #b86e00; }
[data-style="simple"] .dub-order-mini li { color: var(--ink-soft); text-shadow: none; }
[data-style="simple"] .dub-order-mini li.now { color: var(--ink); }
[data-style="simple"] .dub-sync { background: #191c23; }
[data-style="simple"] .dub-options-box { background: #fff; color: var(--ink); border: 1px solid #dde4ea; border-radius: 12px; font-family: var(--font); }
[data-style="simple"] .dub-options-box h3 { border-color: #dde4ea; font-weight: 700; }
[data-style="simple"] .dub-opt small { color: var(--ink-soft); }
[data-style="simple"] .dub-exp .dub-bar { background: #e6ecf1; }
[data-style="simple"] .dub-bar span { background: var(--leaf); }
[data-style="simple"] .dub-drop { border-radius: 10px; border-color: #cfd8e0; }
[data-style="simple"] .dub-pack img { border-radius: 8px; }
[data-style="simple"] .dub-lead-tag { border-radius: 6px; }
[data-style="simple"] .dub-results h3 { font-weight: 700; }
[data-style="simple"] .dub-studio.expanded .dub-tv { background: #0b0d11; }

/* Hinweis oben: PC hat die Runde beendet oder ist nicht verbunden */
.dub-banner { margin: 8px auto; max-width: 900px; padding: 10px 14px; border-radius: 12px; background: var(--rec); color: #fff; font-weight: 700; text-align: center; }

/* Schalter: Originalstimme beim Aufnehmen an/aus */
.dub-quiet { display: block; margin: 8px auto 0; }
.dub-quiet[aria-pressed="true"] { outline: 2px solid var(--leaf); }