/* The viewer page: always exactly the window, never a page scrollbar, and the video as big as
 * the window allows (no header - the chat's own bar names the channel; status and language sit
 * in the row under the sliders).
 * - Wide windows: video above the mixer on the left, chat as a full-height column on the right.
 * - Narrow/portrait (phones): video on top, then a "Sound | Chat" switch and that panel filling the rest.
 * - Short and wide (phone on its side, a low window): video on the left, the switch + panel on the right.
 * The video is the biggest 16:9 box that fits its area (container query units), so it grows and
 * shrinks with the window; panels scroll inside themselves if they ever run out of room. */
html, body.watch { height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body.watch { color: var(--text); font-family: var(--font); }
.w-app {
  --gap: 8px;
  --chat-w: clamp(272px, 22vw, 400px);
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  display: grid;
  gap: var(--gap);
  padding: max(var(--gap), env(safe-area-inset-top)) max(var(--gap), env(safe-area-inset-right)) max(var(--gap), env(safe-area-inset-bottom)) max(var(--gap), env(safe-area-inset-left));
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: 'stage' 'tabs' 'panel';
}

/* ---------- video ---------- */
.w-stage { grid-area: stage; min-height: 0; display: grid; place-items: center; }
.w-video {
  position: relative;
  width: min(100%, calc(50dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
#twitch-embed, #twitch-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.w-fake { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: 14px; background: repeating-linear-gradient(135deg, #0d1219 0 14px, #10161f 14px 28px); }
.w-gate { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: transparent; cursor: pointer; }
.w-gate span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px;
  background: rgba(4, 10, 18, 0.78); color: #fff; font-size: 15px; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(79, 220, 255, 0.35), 0 10px 30px rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px);
}
.w-gate:hover span { background: rgba(4, 10, 18, 0.9); }

/* ---------- Sound | Chat switch (narrow layouts) ---------- */
.w-tabs { grid-area: tabs; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.w-tabs button { height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 14px var(--font); cursor: pointer; }
.w-tabs button[aria-selected='true'] { background: var(--card2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.w-mixer, .w-chat { grid-area: panel; min-height: 0; }
.w-app[data-tab='mix'] .w-chat, .w-app[data-tab='chat'] .w-mixer { display: none; }

/* ---------- mixer ---------- */
.w-mixer { container: mixer / inline-size; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain; }
.w-strips { display: grid; gap: 6px; }
.w-strip {
  display: grid; align-items: center; gap: 4px 10px;
  grid-template-columns: auto minmax(64px, 7.5em) minmax(0, 1fr) auto;
  grid-template-areas: 'mute name range out';
  padding: 4px 12px 4px 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
}
.w-strip.master { background: linear-gradient(110deg, rgba(79, 220, 255, 0.07), rgba(61, 139, 255, 0.07)), var(--panel); border-color: var(--line2); }
.w-strip.off .w-name, .w-strip.off output { opacity: 0.5; }
.w-strip .w-name { grid-area: name; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-strip input[type='range'] { grid-area: range; width: 100%; margin: 0; min-width: 0; }
.w-strip output { grid-area: out; min-width: 3em; text-align: right; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.w-strip output.loud { color: var(--warn); }
.w-mute { grid-area: mute; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--text); cursor: pointer; }
.w-mute:hover { background: var(--card2); }
.w-mute[aria-pressed='true'] { color: var(--bad); }
.w-strip.master .w-mute { cursor: default; color: var(--c1); }
.w-strip.master .w-mute:hover { background: transparent; }

/* The bar under the video: the sliders (or, behind ⚙, the settings / sync page in their place) + status and ⚙.
   Narrow: ⚙ under them; wide: ⚙ at the end of the row. */
.w-bar { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 6px 8px; }
.w-bar > .w-more { justify-self: end; }
.w-part { min-width: 0; }
.w-part[hidden] { display: none; }
.w-sets { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 4px 16px; padding: 2px 4px; }
.w-sets .btn.small { min-height: 30px; }
.w-duck { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.w-duck input[type='range'] { width: 90px; }
.w-duck:not(.on) input[type='range'] { display: none; }
.w-more { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.w-status { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-status::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.w-status.on::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.w-status.warn::before { background: var(--warn); }
/* All well: just the dot (the words are its tooltip); a warning or a note shows its words. */
.w-status.quiet { font-size: 0; gap: 0; padding: 0 4px; }
.btn.w-cog { position: relative; flex: none; width: 36px; padding: 0; justify-content: center; }
.w-cog svg { flex: none; }
.w-cog[aria-expanded='true'] { color: var(--text); background: var(--card2); }
/* Something new in the menu (sign in to Twitch): a small dot until the menu has been opened once. */
.w-cog-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 8px var(--c1); }
.w-cog-dot[hidden] { display: none; }
/* ---------- ⚙: the settings (presets first) and their sync page, in the sliders' place ---------- */
.w-set { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; color: var(--text); cursor: pointer; }
.w-bar .seg { padding: 2px; border-radius: 10px; }
.w-bar .seg-btn { min-height: 26px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.w-bar .w-presets .seg-btn[aria-pressed='true'] { background: var(--grad); color: var(--on-grad); box-shadow: none; }
.btn.w-set-link { gap: 6px; padding: 0 6px 0 10px; color: var(--text); }
.btn.w-set-link output { color: var(--faint); font-variant-numeric: tabular-nums; }
.btn.w-set-link output:empty { display: none; }
.btn.w-set-link svg { color: var(--faint); }
.w-who { font-size: 13px; color: var(--muted); white-space: nowrap; }
.w-who::before { content: '✓'; margin-right: 6px; color: var(--ok); }
.btn.w-back { gap: 4px; padding: 0 10px 0 4px; color: var(--text); font-weight: 600; }
.w-nudge { display: inline-flex; align-items: center; gap: 4px; }
.w-nudge .btn { padding: 0 9px; }
.w-nudge output { min-width: 5.2em; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.w-sync-hint { flex: 1 1 200px; min-width: 0; color: var(--faint); font-size: 12px; line-height: 1.4; }
.w-bar:not([data-view='main']) .w-status { display: none; }
.w-cog .ic-close, .w-cog[aria-expanded='true'] .ic-cog { display: none; }
.w-cog[aria-expanded='true'] .ic-close { display: block; }
.w-mixer.idle .w-strips { opacity: 0.55; }
.w-debug { margin: 0; font: 11px/1.5 var(--font-mono); color: var(--faint); white-space: pre-wrap; }

/* ---------- chat ---------- */
.w-chat { display: flex; border-radius: 12px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.w-chat iframe { flex: 1; width: 100%; height: 100%; border: 0; background: var(--panel); }

/* ---------- wide: chat column on the right, the video right above the sliders ----------
   watch.js (fitWide) sizes the chat column (--chat-w) so the video fills the height above the sliders.
   The player always fills that whole area, like Twitch's theatre mode: where the chat's limits leave
   it a different shape than 16:9 (F11 on a 16:9 screen, ultrawide), Twitch's player puts black bars
   inside itself - no empty band on the page. The sliders' row never stretches (fitWide measures it). */
@media (min-width: 960px) and (min-aspect-ratio: 5/4) {
  .w-app {
    grid-template-columns: minmax(0, 1fr) var(--chat-w);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: 'stage chat' 'mixer chat';
    row-gap: 0;
  }
  .w-tabs { display: none; }
  .w-app[data-tab] .w-mixer, .w-app[data-tab] .w-chat { display: flex; }
  .w-mixer { grid-area: mixer; align-self: start; overflow: visible; margin-top: var(--gap); }
  .w-chat { grid-area: chat; }
  .w-stage { place-items: stretch; }
  .w-video { width: auto; height: auto; aspect-ratio: auto; }
  .w-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .w-sets { align-content: center; padding: 0 4px; }
  .w-strips { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .w-strip { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'mute name out' 'range range range'; gap: 2px 6px; padding: 4px 12px 8px 4px; }
  .w-strip input[type='range'] { padding: 0 0 0 6px; box-sizing: border-box; }
}

/* ---------- short and wide (phone on its side, a low window): video left, switch + panel right ---------- */
@media (max-height: 540px) and (min-aspect-ratio: 4/3) {
  .w-app {
    grid-template-columns: minmax(0, 1fr) clamp(250px, 38vw, 360px);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: 'stage tabs' 'stage panel';
  }
  .w-tabs { display: grid; }
  .w-app[data-tab='mix'] .w-chat, .w-app[data-tab='chat'] .w-mixer { display: none; }
  .w-mixer { grid-area: panel; overflow-y: auto; }
  .w-chat { grid-area: panel; }
  .w-stage { container-type: size; }
  .w-video { width: min(100cqw, 100cqh * 16 / 9); }
  .w-strips { grid-template-columns: minmax(0, 1fr); }
  .w-strip { grid-template-columns: auto minmax(52px, 6em) minmax(0, 1fr) auto; grid-template-areas: 'mute name range out'; padding: 2px 10px 2px 2px; }
}

/* A wide mixer (big screens): each track on one line, all side by side - the mixer stays low. */
@container mixer (min-width: 1000px) {
  .w-strips { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .w-strip { grid-template-columns: auto minmax(0, max-content) minmax(70px, 1fr) auto; grid-template-areas: 'mute name range out'; gap: 4px 10px; padding: 4px 12px 4px 4px; }
  .w-strip input[type='range'] { padding: 0; }
}

@media (max-width: 420px) {
  .w-strip { grid-template-columns: auto minmax(52px, 5.5em) minmax(0, 1fr) auto; gap: 4px 8px; }
  .w-strip .w-name { font-size: 14px; }
  .w-gate span { font-size: 14px; padding: 11px 16px; }
}