/* demo.css: the OTT player page.
 *
 * A hand translation of ../mockui (Vite + React + Tailwind v4) into plain
 * CSS. Every value here is the computed value of the Tailwind utility it
 * replaces, read off mockui/src and confirmed against mockui/dist/assets/*.css:
 * --spacing is 0.25rem, so gap-4.5 is 1.125rem, px-3.5 is 0.875rem and so on.
 * Do not round these to "nicer" numbers. The point is that the two render the
 * same side by side.
 *
 * Everything lives under .ott so the site's own tokens, type scale and nav
 * from base.css, and the contact band and foot from ../src/css/close.css, are
 * untouched. The OTT app is a dark ink island
 * between the site's green nav and its green footer, which is exactly what it
 * is: a mock streaming service with Liat commentary running inside it.
 *
 * Two deliberate divergences from mockui, and the only ones:
 *
 * 1. The muted-white ladder has a floor of 0.5. Twenty-five text rules sat at
 *    0.25 to 0.45 alpha, which is 2.2:1 to 4.4:1 on these grounds and fails
 *    WCAG AA. Rungs at or below 0.35 became 0.5 and rungs from 0.38 to 0.45
 *    became 0.6, so the dim / secondary / bright hierarchy still reads but
 *    every rung is legible. Nothing at 0.5 or above was touched.
 * 2. Nothing is smaller than 10px. It went down to 8.5px. Timeline axis marks
 *    sit at the 10px floor; anything that is a word is 10.5px or more.
 *
 * Both changes are opacity and size only. No colour, radius, spacing, layout or
 * font family moved, so the two still render the same shape side by side. If
 * mockui is ever the source again, port these two changes into it rather than
 * reverting them here: a real streaming service has to pass AA as well, and the
 * failures were concentrated in the Liat panel, on copy like "Not a fixed list.
 * Liat ships whatever language a partner needs" at 9.5px and 3.2:1.
 */

.ott {
  /* mockui @theme, verbatim */
  --ink: #0a0a0a;
  --ink-2: #131316;
  --ink-3: #1c1c21;
  --accent: #ff6b00;
  --accent-dim: #cc5500;
  --grn: #5a9a5b;
  --grn-deep: #005f02;
  --live: #e63946;
  --f-display: Oswald, sans-serif;
  --f-body: Inter, "Helvetica Neue", Arial, sans-serif;

  /* The video plus the panel. Tall enough that the panel shows most of its
     controls without scrolling, capped so it never eats a huge desktop. */
  --stage-h: clamp(440px, calc(100vh - var(--nav-h) - 3.5rem - 4rem), 760px);
  --panel-w: 400px;

  background: var(--ink);
  color: #f5f5f5;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* base.css styles prose; none of that applies inside the app. Every reset below
   is wrapped in :where() so it carries zero specificity: a bare `.ott button`
   selector is (0,1,1) and would quietly outrank every single-class component
   below it, which silently stripped the borders and backgrounds off half the
   panel the first time round. */
:where(.ott) :where(p) { margin: 0; max-width: none; }
:where(.ott) :where(h1, h2, h3) { margin: 0; font-weight: 600; }
:where(.ott) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.ott) :where(button) {
  margin: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; cursor: pointer; text-align: left;
}
:where(.ott) :where(svg) { display: block; flex: none; }
.ott :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.liat-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.liat-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 999px; }
.liat-scroll::-webkit-scrollbar-track { background: transparent; }

/* ======================================================== app navbar ==== */
/* h-14, gap-8, border-b border-white/5, bg-ink/85, px-6, backdrop-blur-md */

.ottnav {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 3.5rem;
  padding-inline: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ottnav__links { display: flex; align-items: center; gap: 0.25rem; }
.ottnav__link {
  border-radius: 6px;
  padding: 0.375rem 0.875rem;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}
.ottnav__link.is-live { color: var(--accent); }
.ottnav__pulse {
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 0.375rem;
  border-radius: 999px;
  background: var(--live);
  vertical-align: middle;
  animation: ott-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes ott-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.ottnav__right { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.ottnav__search {
  display: flex; align-items: center; gap: 0.625rem;
  height: 2.25rem; width: 14rem;
  padding-inline: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}
.ottnav__search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ottnav__ico { color: rgba(255, 255, 255, 0.55); }
.ottnav__bell { position: relative; display: block; }
.ottnav__bell i {
  position: absolute; top: -2px; right: -2px;
  width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
}
.ottnav__av {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 999px;
  background: linear-gradient(to bottom right, var(--accent), var(--grn-deep));
  font-size: 12px; font-weight: 700; color: #120800;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(255, 107, 0, 0.6);
}

/* ============================================================= stage ==== */
/* The one structural change from mockui: the panel is a permanent column
   beside the video instead of a hover-revealed overlay on top of it. */

.ottrow { display: flex; align-items: stretch; height: var(--stage-h); }

.stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  background: #000;
}

.stage__vids { position: absolute; inset: 0; background: #000; }
.stage__v {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 500ms;
  will-change: opacity;
}
.stage__v.is-on { opacity: 1; }

/* click-to-pause layer, below the chrome */
.stage__surface { position: absolute; inset: 0; z-index: 10; width: 100%; height: 100%; }

/* --------------------------------------------------------- captions ---- */
/* bottom-24, max-w-[760px], rounded-lg, bg-black/70, px-4 py-2, 18px */

.cap {
  position: absolute;
  left: 2rem; right: 2rem; bottom: 6rem;
  z-index: 20;
  margin-inline: auto;
  max-width: 760px;
  width: fit-content;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.375;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.cap.is-on { opacity: 1; transform: none; }

/* ----------------------------------------------------- player chrome --- */

.chrome {
  position: absolute;
  inset-inline: 0; bottom: 0;
  z-index: 20;
  padding: 3.5rem 1.5rem 0.875rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4) 50%, transparent);
  opacity: 1;
  transition: opacity 180ms;
}
.chrome.is-idle { opacity: 0; pointer-events: none; }
/* The chrome fades after a few idle seconds. If focus is inside it when
   that happens, a keyboard user is tabbing through controls that are
   invisible and, worse, pointer-events: none. Focus pins it open. Placed
   after .is-idle deliberately: same specificity, so source order wins. */
.chrome:focus-within { opacity: 1; pointer-events: auto; }

.chrome__bar {
  position: relative;
  height: 4px;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}
.chrome__bar i {
  position: absolute; inset-block: 0; left: 0;
  display: block;
  width: 1.5%;
  border-radius: 999px;
  background: var(--live);
}

.chrome__row { display: flex; align-items: center; gap: 1.5rem; }

.chrome__play { color: #fff; transition: color 150ms; }
.chrome__play:hover { color: var(--accent); }
.chrome__play:active { transform: scale(0.85); }
.chrome__play .ico-play { display: none; }
.chrome__play.is-paused .ico-play { display: block; }
.chrome__play.is-paused .ico-pause { display: none; }

/* The glyphs are drawn at 20px, which is under the 24px WCAG 2.2 asks for at
   AA. The icon keeps its size and gets a 44px hit area from a pseudo element,
   so nothing in the bar moves. The row gap goes to 1.5rem so that the boxes of
   two neighbouring icons meet without overlapping. */
.chrome__ico { position: relative; color: rgba(255, 255, 255, 0.85); transition: color 150ms; }
.chrome__ico::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.chrome__ico:hover { color: #fff; }
.chrome__ico.is-accent { color: var(--accent); }
.chrome__vol .ico-off { display: none; }
.chrome__vol.is-muted .ico-off { display: block; }
.chrome__vol.is-muted .ico-on { display: none; }

.chrome__live {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  background: rgba(230, 57, 70, 0.15);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--live);
}
.chrome__ping { position: relative; display: flex; width: 8px; height: 8px; }
.chrome__ping i, .chrome__ping b {
  position: absolute; inset: 0; border-radius: 999px; background: var(--live);
}
.chrome__ping i { animation: ott-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0.75; }
@keyframes ott-ping { 75%, 100% { transform: scale(2); opacity: 0; } }

.chrome__right {
  margin-left: auto;
  display: flex; align-items: center; gap: 1.5rem;
  color: rgba(255, 255, 255, 0.85);
}
.chrome__on {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid rgba(90, 154, 91, 0.4);
  border-radius: 6px;
  background: rgba(0, 95, 2, 0.3);
  font-size: 11px; font-weight: 600; letter-spacing: 0.025em;
  color: var(--grn);
  white-space: nowrap;
}
.chrome__on i { width: 6px; height: 6px; border-radius: 999px; background: var(--grn); }

/* ------------------------------------------------------ start screen --- */
/* Delta 1: nothing plays until this is dismissed, and it never comes back. */

.start {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(120% 90% at 50% 45%, rgba(10, 10, 10, 0.72), rgba(6, 6, 6, 0.93));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 320ms ease-out;
}
.start.is-gone { opacity: 0; pointer-events: none; }

.start__box { max-width: 560px; text-align: center; }

.start__badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid rgba(255, 107, 0, 0.35);
  border-radius: 999px;
  background: rgba(255, 107, 0, 0.12);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.start__badge svg { color: var(--accent); }

.start__h {
  margin-top: 1rem;
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
}

.start__p {
  margin-top: 0.75rem;
  font-size: 14px;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.68);
}
.start__p b { color: #fff; font-weight: 600; }

.start__btn {
  display: inline-flex; align-items: center; gap: 0.625rem;
  margin-top: 1.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(to bottom right, var(--accent), var(--accent-dim));
  box-shadow: 0 10px 15px -3px rgba(255, 107, 0, 0.35), 0 4px 6px -4px rgba(255, 107, 0, 0.35);
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  /* White on this gradient is 2.86:1 at the bright end. The near black the
     rest of the site uses on orange is 6.94:1 there and 4.59:1 at the dim
     end, so it clears AA across the whole sweep. */
  color: #120800;
  transition: transform 140ms, box-shadow 140ms;
}
.start__btn:hover { transform: translateY(-1px); box-shadow: 0 14px 24px -6px rgba(255, 107, 0, 0.5); }
.start__btn:active { transform: scale(0.97); }

.nojs {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 50;
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.85);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

/* ================================================ commentary panel ====== */
/* Delta 2: permanent column. Internals are the mockui panel unchanged. */

.panel {
  flex: 0 0 var(--panel-w);
  width: var(--panel-w);
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  /* No scrollbar-width/-color here on purpose: setting either makes Chrome
     ignore the ::-webkit-scrollbar rules, and the 4px rail from mockui's
     index.css is part of the panel's look. */
}

.panel__head { display: flex; align-items: center; gap: 0.75rem; }
.panel__mark {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 12px;
  background: linear-gradient(to bottom right, var(--accent), var(--accent-dim));
  box-shadow: 0 10px 15px -3px rgba(255, 107, 0, 0.3), 0 4px 6px -4px rgba(255, 107, 0, 0.3);
  color: #120800;
}
.panel__title {
  font-family: var(--f-display);
  font-size: 16px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: #fff;
}
.panel__sub { font-size: 11px; font-weight: 500; color: var(--grn); }

.panel__rule {
  height: 1px;
  background: linear-gradient(to right, rgba(255, 107, 0, 0.4), rgba(255, 255, 255, 0.1) 50%, transparent);
}
.panel__spacer { margin-top: auto; }

.panel__foot {
  padding-top: 0.25rem;
  font-size: 10.5px; line-height: 1.625; text-align: center;
  color: rgba(255, 255, 255, 0.5);
}
.panel__foot b { font-weight: 600; color: var(--accent); }
.panel__foot span { color: rgba(255, 255, 255, 0.5); }
.panel__foot i { font-style: normal; font-weight: 600; color: var(--grn); }

/* ----------------------------------------------------- control shell --- */

.ctl__label {
  display: block;
  margin-bottom: 0.625rem;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.ctl__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.ctl__row .ctl__label { margin-bottom: 0; }
/* Label and its info dot sit together, as in the mock. Space-between would push
   the dot to the panel's right edge and hang its tooltip off the column. */
.ctl__row--tight { justify-content: flex-start; gap: 0.375rem; margin-bottom: 0.625rem; }
.ctl__val {
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--f-display);
  font-size: 12.5px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
  transition: color 150ms, background-color 150ms;
}
.ctl__val--accent {
  background: rgba(255, 107, 0, 0.15);
  font-size: 13px;
  color: var(--accent);
}
.ctl__hint {
  margin-top: 0.5rem;
  font-size: 10.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------- language ------ */
/* Delta 5: the four with recorded samples are the tiles. Everything else is
   a capability list, deliberately not styled as a row of dead buttons. */

.langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; }
.lang {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.125rem;
  height: 64px;
  padding-inline: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
  transition: border-color 150ms, background-color 150ms, transform 120ms;
}
.lang:hover { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); }
.lang:active { transform: scale(0.94); }
.lang.is-on { border-color: rgba(255, 107, 0, 0.7); background: rgba(255, 107, 0, 0.12); }
.lang__tick { position: absolute; top: 0.375rem; right: 0.375rem; color: var(--accent); display: none; }
.lang.is-on .lang__tick { display: block; }
.lang__flag { font-size: 17px; line-height: 1; }
.lang__name { font-size: 11px; font-weight: 600; line-height: 1.25; color: rgba(255, 255, 255, 0.85); }
.lang.is-on .lang__name { color: var(--accent); }
.lang__sub { font-size: 11px; font-weight: 500; line-height: 1.25; color: rgba(255, 255, 255, 0.6); }

.more {
  margin-top: 0.875rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.more__head {
  display: flex; align-items: center; gap: 0.375rem;
  margin-bottom: 0.5rem;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grn);
}
.more__list { display: flex; flex-wrap: wrap; gap: 3px; }
.more__list li {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 10.5px; font-weight: 500; line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}
.more__list li.more__rest { background: none; color: rgba(255, 255, 255, 0.5); padding-left: 2px; }
.more__note {
  margin-top: 0.4375rem;
  font-size: 10.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------- style ------ */

.pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.pill {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
  padding: 0.625rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 12px; font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  transition: border-color 150ms, color 150ms, transform 120ms, background-color 150ms, box-shadow 150ms;
}
.pill:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.25); color: #fff; transform: scale(1.04); }
.pill:active:not(:disabled) { transform: scale(0.93); }
.pill.is-on {
  border-color: rgba(255, 107, 0, 0.7);
  background: rgba(255, 107, 0, 0.12);
  box-shadow: 0 0 18px rgba(255, 107, 0, 0.25);
  color: var(--accent);
}
.pill:disabled { opacity: 0.35; cursor: not-allowed; }

/* --------------------------------------------------- segmented knob ---- */
/* framer-motion layoutId by hand: one knob per track, moved to the selected
   button's offsetLeft and width and remeasured on resize. */

.seg {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}
.seg__knob {
  position: absolute;
  top: 0.25rem; left: 0; bottom: 0.25rem;
  width: 0;
  border-radius: 8px;
  background: linear-gradient(to bottom right, var(--accent), var(--accent-dim));
  box-shadow: 0 10px 15px -3px rgba(255, 107, 0, 0.3), 0 4px 6px -4px rgba(255, 107, 0, 0.3);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), width 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.seg__opt {
  position: relative;
  z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  transition: color 150ms;
}
.seg__opt:hover { color: rgba(255, 255, 255, 0.85); }
.seg__opt.is-on { color: #fff; }
.seg__opt:active { transform: scale(0.96); }

/* -------------------------------------------------------- persona ------ */

.ctl--persona { position: relative; }

.tipwrap { position: relative; display: inline-flex; }
.tip__ico { color: rgba(255, 255, 255, 0.5); cursor: help; transition: color 150ms; }
.tipwrap:hover .tip__ico, .tip__ico:focus { color: rgba(255, 255, 255, 0.7); }
/* Anchored left, not centred: the panel is a 400px column with its own scroll
   box, and a centred 224px tooltip near its right edge gets clipped. */
.tip {
  position: absolute;
  bottom: 100%; left: 0;
  z-index: 40;
  margin-bottom: 0.5rem;
  width: 14rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: var(--ink-2);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6);
  font-size: 10.5px; font-weight: 500; line-height: 1.625;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms;
}
.tipwrap:hover .tip, .tip__ico:focus + .tip { opacity: 1; }

.av {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  overflow: hidden;
  font-size: 14px; font-weight: 700; color: #fff;
}
.av img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.av--shaurya { background: linear-gradient(to bottom right, #e08b2d, #7a4a10); }
.av--lopez { background: linear-gradient(to bottom right, #c0392b, #6e1f16); }
.av--davide { background: linear-gradient(to bottom right, #1a8a4a, #7a1414); }

.drop {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 150ms;
}
.drop:hover { border-color: rgba(255, 255, 255, 0.25); }
.drop[aria-expanded="true"] { border-color: rgba(255, 107, 0, 0.6); }
.drop__txt { min-width: 0; }
.drop__name { display: block; font-size: 13.5px; font-weight: 600; color: #fff; }
.drop__chev { margin-left: auto; color: rgba(255, 255, 255, 0.5); transition: transform 180ms; }
.drop[aria-expanded="true"] .drop__chev { transform: rotate(180deg); }

.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.tags span {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600; line-height: 1.5;
}
.tags .tag--lang { background: rgba(90, 154, 91, 0.15); color: var(--grn); }
.tags .tag--mood { display: inline-flex; align-items: center; gap: 2px; }
.tags .tag--excited { background: rgba(255, 107, 0, 0.15); color: var(--accent); }
.tags .tag--calm { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); }

.drop__note {
  display: flex; align-items: center; gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 10px; font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}
.drop__note svg { color: rgba(255, 107, 0, 0.7); }

.drop__list {
  position: absolute;
  left: 0; right: 0;
  z-index: 30;
  margin-top: 0.5rem;
  padding: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(19, 19, 22, 0.95);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: ott-drop 160ms ease-out;
}
@keyframes ott-drop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.drop__row {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  transition: background-color 100ms;
}
.drop__row:hover { background: rgba(255, 255, 255, 0.08); }
.drop__row.is-on { background: rgba(255, 107, 0, 0.12); }
.drop__row .av { width: 32px; height: 32px; font-size: 13px; }
.drop__rname { display: block; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.drop__row.is-on .drop__rname { color: var(--accent); }
.drop__tick { margin-left: auto; color: var(--accent); display: none; }
.drop__row.is-on .drop__tick { display: block; }

/* ------------------------------------------------------ allegiance ----- */

.bias { position: relative; height: 1.75rem; margin-inline: 0.375rem; }
.bias__base, .bias__fill {
  position: absolute; top: 50%;
  height: 3px;
  border-radius: 999px;
  transform: translateY(-50%);
}
.bias__base { inset-inline: 0; background: rgba(255, 255, 255, 0.1); }
.bias__fill { left: 50%; width: 0; background: transparent; transition: left 200ms, width 200ms, background-color 200ms; }
/* The visible dot is the <i> inside. This box is only the target, so it can be
   the full 44 without changing anything on screen. The five nodes sit at 0, 25,
   50, 75 and 100 percent of a track well over 220px, so the boxes do not meet. */
.bias__node {
  position: absolute; top: 50%;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.bias__node i {
  display: block;
  border: 2px solid;
  border-radius: 999px;
  background: #0c0c0e;
  opacity: 0.5;
  transition: transform 180ms, opacity 180ms, background-color 180ms, box-shadow 180ms;
}
.bias__node:active i { transform: scale(0.82); }
.bias__node.is-on i { opacity: 1; transform: scale(1.12); }
.bias__node[data-bias="-100"] { left: 0; }
.bias__node[data-bias="-50"] { left: 25%; }
.bias__node[data-bias="0"] { left: 50%; }
.bias__node[data-bias="50"] { left: 75%; }
.bias__node[data-bias="100"] { left: 100%; }
.bias__node[data-bias="-100"] i { width: 16px; height: 16px; border-color: var(--accent); }
.bias__node[data-bias="-50"] i { width: 13px; height: 13px; border-color: var(--accent); }
.bias__node[data-bias="0"] i { width: 10px; height: 10px; border-color: #9aa0a6; }
.bias__node[data-bias="50"] i { width: 13px; height: 13px; border-color: var(--grn); }
.bias__node[data-bias="100"] i { width: 16px; height: 16px; border-color: var(--grn); }
.bias__node[data-bias="-100"].is-on i { background: var(--accent); box-shadow: 0 0 10px rgba(255, 107, 0, 0.6); }
.bias__node[data-bias="-50"].is-on i { background: var(--accent); box-shadow: 0 0 10px rgba(255, 107, 0, 0.6); }
.bias__node[data-bias="0"].is-on i { background: #9aa0a6; box-shadow: 0 0 10px rgba(154, 160, 166, 0.6); }
.bias__node[data-bias="50"].is-on i { background: var(--grn); box-shadow: 0 0 10px rgba(90, 154, 91, 0.6); }
.bias__node[data-bias="100"].is-on i { background: var(--grn); box-shadow: 0 0 10px rgba(90, 154, 91, 0.6); }

.bias__ends {
  display: flex; justify-content: space-between;
  margin: 0.25rem 0.375rem 0;
  font-size: 10px; font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
.bias__ends .is-usa { color: var(--accent); }
.bias__ends .is-ger { color: var(--grn); }

/* ------------------------------------------------------- speed --------- */
/* index.css .liat-slider, carried over unchanged. */

.liat-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
  cursor: pointer;
  --fill: 33%;
}
.liat-slider::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent), var(--grn) var(--fill), rgba(255, 255, 255, 0.14) var(--fill));
}
.liat-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--accent);
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.55);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.liat-slider:hover::-webkit-slider-thumb { transform: scale(1.15); }
.liat-slider:active::-webkit-slider-thumb { transform: scale(1.3); box-shadow: 0 0 16px rgba(255, 107, 0, 0.8); }
.liat-slider::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent), var(--grn) var(--fill), rgba(255, 255, 255, 0.14) var(--fill));
}
.liat-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--accent);
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.55);
}

.ticks {
  display: flex; justify-content: space-between;
  margin-top: 0.25rem;
  font-size: 10px; font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

/* ====================================================== stage note ====== */

.stagenote {
  padding: 0.75rem 2rem 0;
  font-size: 10.5px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}

/* ======================================================== title row ===== */

.titlerow { display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem 2rem; }
.titlerow__tags { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.25rem; flex-wrap: wrap; }
.titlerow__comp {
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  background: rgba(255, 107, 0, 0.15);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent);
}
.titlerow__live {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--live);
}
.titlerow__live svg { animation: ott-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.titlerow__h1 {
  display: flex; align-items: baseline; flex-wrap: wrap;
  font-family: var(--f-display);
  font-size: 22px; font-weight: 600;
  letter-spacing: 0.025em; text-transform: uppercase;
  color: #fff;
}
.titlerow__vs { margin-inline: 0.5rem; color: rgba(255, 255, 255, 0.6); }
.titlerow__score {
  margin-left: 0.75rem;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.titlerow__score.is-pop { animation: ott-pop 420ms cubic-bezier(0.22, 1.2, 0.36, 1); }
@keyframes ott-pop { from { transform: scale(1.5); } to { transform: scale(1); } }
.titlerow__venue { margin-top: 0.125rem; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }


/* ========================================================= insights ===== */

.insights { padding: 0.25rem 2rem 1.5rem; }
.insights__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.875rem; }
.insights__ico { color: var(--accent); }
.insights__h {
  font-family: var(--f-display);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.insights__live {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: rgba(90, 154, 91, 0.15);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--grn);
}
.insights__grid { display: grid; gap: 1rem; grid-template-columns: 1.15fr 1fr; }

.sum {
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
  border: 1px solid rgba(255, 107, 0, 0.2);
  border-radius: 16px;
  background: linear-gradient(to bottom right, rgba(255, 107, 0, 0.07), rgba(255, 255, 255, 0.02) 50%, transparent);
}
.sum__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem; }
.sum__mark {
  display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 8px;
  background: linear-gradient(to bottom right, var(--accent), var(--accent-dim));
  box-shadow: 0 4px 6px -1px rgba(255, 107, 0, 0.3), 0 2px 4px -2px rgba(255, 107, 0, 0.3);
  color: #120800;
}
.sum__t { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; }
.sum__upd {
  margin-left: auto;
  display: flex; align-items: center; gap: 0.25rem;
  font-size: 10.5px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
}
.sum__upd i {
  width: 6px; height: 6px; border-radius: 999px; background: var(--grn);
  animation: ott-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.sum__body { font-size: 13px; line-height: 1.625; color: rgba(255, 255, 255, 0.7); min-height: 5.2em; }
.sum__fine { margin-top: 0.75rem; font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, 0.5); }

.stats {
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}
.stats__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.875rem;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.stats__usa { color: var(--accent); }
.stats__ger { color: var(--grn); }
.stats__t { color: rgba(255, 255, 255, 0.5); }
.stats__list { display: flex; flex-direction: column; gap: 0.625rem; }

.stat__top {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 0.25rem;
  font-size: 12px; font-weight: 600;
}
.stat__usa { color: var(--accent); font-variant-numeric: tabular-nums; }
.stat__ger { color: var(--grn); font-variant-numeric: tabular-nums; }
.stat__label {
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.stat__bar {
  display: flex; gap: 1px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}
.stat__a { border-radius: 999px 0 0 999px; background: var(--accent); transition: width 420ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.stat__b { flex: 1; border-radius: 0 999px 999px 0; background: var(--grn); }
/* Nothing recorded yet: an empty track, not a level one. */
.stat__bar.is-empty .stat__a, .stat__bar.is-empty .stat__b { background: rgba(255, 255, 255, 0.06); }

/* --------------------------------------------------------- timeline ---- */

.tl {
  margin-top: 1rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}
.tl__head {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.tl__key { margin-left: auto; display: flex; gap: 0.75rem; font-size: 10px; letter-spacing: 0; text-transform: none; }
.tl__key .is-usa { color: var(--accent); }
.tl__key .is-ger { color: var(--grn); }
.tl__track { position: relative; height: 3rem; }
.tl__base { position: absolute; inset-inline: 0; top: 50%; height: 1px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.12); }
.tl__prog {
  position: absolute; left: 0; top: 50%;
  height: 2px; width: 0;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(to right, rgba(255, 107, 0, 0.6), rgba(90, 154, 91, 0.6));
}
.tl__ht { position: absolute; left: 50%; top: 50%; height: 12px; width: 1px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.2); }
.tl__htl { position: absolute; left: 50%; top: calc(50% + 9px); transform: translateX(-50%); font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, 0.5); }
.tl__now {
  position: absolute; top: 50%; left: 0;
  width: 10px; height: 10px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--live);
  box-shadow: 0 0 8px rgba(230, 57, 70, 0.7);
  transition: left 300ms linear;
}
.tl__z, .tl__n { position: absolute; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, 0.5); }
.tl__z { left: 0; }
.tl__n { right: 0; }
.tl__mark {
  position: absolute;
  transform: translateX(-50%);
  animation: ott-fade 320ms ease-out;
}
.tl__mark i {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--ink);
  font-size: 11px; font-style: normal;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}
.tl__mark.is-card i { border-color: rgba(255, 255, 255, 0.2); }
@keyframes ott-fade { from { opacity: 0; transform: translateX(-50%) scale(0.7); } }

/* =========================================================== events ===== */

.events { padding: 0.5rem 2rem 2.5rem; }
.events__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.875rem; }
.events__ico { color: var(--accent); }
.events__h {
  font-family: var(--f-display);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.events__tag { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grn); }
.events__more {
  margin-left: auto;
  display: flex; align-items: center; gap: 0.125rem;
  font-size: 12px; font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
.events__row {
  display: flex; gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  min-height: 132px;
}
/* The rail holds its height so the first card does not shove the footer
   down. That leaves a hole before kick off, so the hole is dressed as a
   placeholder rather than left as a sentence floating in a void. */
.events__empty {
  flex: 1;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

.ev {
  position: relative;
  flex: none;
  display: flex; flex-direction: column; gap: 0.5rem;
  width: 252px;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 200ms;
  animation: ott-card 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ott-card { from { opacity: 0; transform: translateY(10px); } }
.ev:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.06); }
.ev.is-goal { border-color: rgba(255, 255, 255, 0.12); }
.ev__stripe { position: absolute; inset-block: 0; left: 0; width: 3px; }
.ev.is-usa .ev__stripe { background: var(--accent); }
.ev.is-ger .ev__stripe { background: var(--grn); }
.ev__top { display: flex; align-items: center; gap: 0.5rem; }
.ev__min { font-family: var(--f-display); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.ev__type {
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.ev.is-usa .ev__type.is-goal { background: rgba(255, 107, 0, 0.15); color: var(--accent); }
.ev.is-ger .ev__type.is-goal { background: rgba(90, 154, 91, 0.15); color: var(--grn); }
.ev__type.is-card { background: rgba(231, 193, 74, 0.15); color: #e7c14a; }
.ev__type.is-other { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.65); }
.ev__team { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.ev.is-usa .ev__team { color: var(--accent); }
.ev.is-ger .ev__team { color: var(--grn); }
.ev__score {
  margin-left: auto;
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--f-display);
  font-size: 12.5px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.ev__head { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.ev__det { font-size: 11.5px; line-height: 1.625; color: rgba(255, 255, 255, 0.6); }

/* ======================================================= responsive ===== */

@media (max-width: 1100px) {
  /* Delta 2, second half: below this the panel drops under the video as a
     full-width block instead of squeezing the picture into a slot. */
  .ottrow { flex-direction: column; height: auto; }
  .stage { width: 100%; aspect-ratio: 16 / 9; flex: none; }
  /* A stacked 16:9 stage is only ~220px tall on a phone, which is not enough
     room for the start instructions. The stage holds itself open until the
     start screen is dismissed, then settles back to its real aspect. */
  .stage.is-armed { aspect-ratio: auto; min-height: 320px; }
  .panel {
    flex: none;
    width: 100%;
    max-height: none;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    overflow: visible;
  }
  .panel__spacer { display: none; }
  .insights__grid { grid-template-columns: 1fr; }
}

@media (min-width: 641px) and (max-width: 1100px) {
  /* Two columns of controls so the panel does not become a very long strip. */
  .panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .panel__head, .panel__rule, .panel__foot { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .ottnav { gap: 1rem; overflow-x: auto; }
  .ottnav__search { display: none; }
}

@media (max-width: 768px) {
  .chrome__on { display: none; }
  .titlerow, .insights, .events, .stagenote { padding-inline: 1.25rem; }
  .titlerow { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .cap { left: 1rem; right: 1rem; bottom: 4.5rem; font-size: 14px; }
}

@media (max-width: 640px) {
  .ott { --stage-h: auto; }
  .ottnav__links { display: none; }
  .panel { padding: 1rem; }
  .chrome { padding: 2.5rem 1rem 0.75rem; }
  .chrome__row { gap: 0.875rem; }
  .chrome__right { gap: 0.875rem; }
  .titlerow__h1 { font-size: 19px; }
  .start { padding: 1rem; }
  .start__badge { font-size: 10px; letter-spacing: 0.1em; }
  .start__h { margin-top: 0.625rem; font-size: 19px; }
  .start__p { margin-top: 0.5rem; font-size: 12.5px; line-height: 1.5; }
  .start__btn { margin-top: 1rem; padding: 0.75rem 1.25rem; font-size: 13px; }
  .ev { width: 220px; }
  .tl { padding: 1.5rem 1rem; }
}

@media (max-width: 420px) {
  .chrome__right { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ottnav__pulse, .chrome__ping i, .sum__upd i, .titlerow__live svg { animation: none; }
  .ev, .tl__mark, .drop__list { animation: none; }
}

/* ------------------------------------------- commentary kit additions --- */
/* The tiles and persona rows come from kit/manifest.json (see ott.js). */

.langs { grid-template-columns: repeat(3, minmax(0, 1fr)); }


.cap__main, .cap__en { display: block; }
.cap__en {
  margin-top: 0.25rem;
  font-size: 14px; font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}

.start__btn:disabled { opacity: 0.5; cursor: progress; transform: none; box-shadow: none; }

@media (max-width: 768px) {
  .cap__en { font-size: 12px; }
}

/* ---------------------------------- not available for the current match --- */

.pill.is-off { opacity: 0.35; cursor: not-allowed; transform: none; }
.pill.is-off:hover { border-color: rgba(255, 255, 255, 0.1); color: inherit; }
.seg__opt.is-off { opacity: 0.35; cursor: not-allowed; }
.seg__opt.is-off:hover { color: inherit; }
.seg__opt.is-off:active { transform: none; }

.lang.is-off { opacity: 0.4; cursor: not-allowed; }
.lang.is-off:hover { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); }
.lang.is-off:active { transform: none; }

.ctl.is-off { cursor: not-allowed; }
.ctl.is-off > :not(.ctl__off) { opacity: 0.4; pointer-events: none; }
.ctl__off {
  margin-top: 0.5rem;
  font-size: 10.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.notice {
  position: fixed;
  left: 50%;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 300;
  width: max-content;
  max-width: min(92vw, 26rem);
  padding: 0.75rem 1.125rem;
  border: 1px solid rgba(255, 107, 0, 0.55);
  border-radius: 12px;
  background: var(--ink-2);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13.5px; font-weight: 500; line-height: 1.45;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.notice.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------ one screen, OTT proportions --- */
/* The user asked for a player that reads as a streaming service rather than a
   demo: a bigger picture, and every control in view at once (2026-09-16). The
   screen's own size lives in pitch.css, which frames it and loads last. Here
   the panel is packed so that ten controls clear the first screen, and the
   height tiers below give back pixels as the display gets shorter. Order
   matters: the flat values come first, the tiers override them. */

.ott { --panel-w: clamp(352px, 26vw, 420px); }

.panel { gap: 0.625rem; padding: 0.875rem 1.125rem 1rem; }
.panel__head { gap: 0.625rem; }
.panel__mark { width: 2rem; height: 2rem; border-radius: 10px; }
.panel__title { font-size: 15px; }
.panel__foot { padding-top: 0; font-size: 10px; line-height: 1.5; }
.ctl__label { margin-bottom: 0.4375rem; }
.ctl__hint { margin-top: 0.375rem; }
.langs { gap: 0.3125rem; }
.lang { height: 46px; border-radius: 10px; }
.drop { padding: 0.5rem 0.625rem; }
.drop__note { margin-top: 0.375rem; }

/* Controls that are a single short row sit two to a line. */
.ctlpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem 0.875rem; }
.ctlpair .ctl { min-width: 0; }
.ctlpair .pill { padding: 0.5rem 0.375rem; gap: 0.25rem; }

/* The picture fills its frame. With object-fit: contain the clip sat in black
   bars, which is what made the match look small inside a large player. */
.stage__v { object-fit: cover; }

/* The language list Liat can ship sits under the picture, where it reads as a
   claim about the product rather than as a control. */
.langstrip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem;
  padding: 0.875rem 0.25rem 0;
}
.langstrip__head {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grn);
}
.langstrip__list { display: flex; flex-wrap: wrap; gap: 3px; }
.langstrip__list li {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 10.5px; font-weight: 500; line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}
.langstrip__list li.more__rest { background: none; padding-left: 2px; color: rgba(255, 255, 255, 0.5); }
.langstrip__note { font-size: 10.5px; color: rgba(255, 255, 255, 0.5); }

/* Shorter displays: the panel gives up decoration before it gives up a
   control, and the two switched off controls keep their grey and their
   popup once their line goes. */
@media (max-height: 940px) {
  .panel { gap: 0.5rem; padding-block: 0.75rem; }
  .lang { min-height: 40px; }
  .drop__note, .panel__sub, .panel__foot { display: none; }
  .ctlpair { gap: 0.5rem 0.875rem; }
  .avails { margin-top: 0.25rem; }
}
@media (max-height: 840px) {
  .lang { min-height: 34px; }
  .avail { line-height: 1.25; }
  .ctlpair { gap: 0.4375rem 0.75rem; }
}
@media (max-height: 760px) {
  /* The region under a tile's language stays: without it two tiles read
     "English" and two read "Spanish". The pixels come from the shell. */
  .panel { gap: 0.375rem; padding-block: 0.375rem; }
  .panel__head, .panel__rule, .panel__spacer { display: none; }
  .lang { min-height: 25px; gap: 0; }
  .lang__name { font-size: 11px; }
  .lang__sub { font-size: 10px; }
  .ctl__label { margin-bottom: 0.1875rem; }
  .ctlpair { gap: 0.375rem 0.75rem; }
  .ctlpair .pill { padding: 0.3125rem; }
  .avails { margin-top: 0.1875rem; }
  .avail { font-size: 9px; line-height: 1.2; }
}

@media (max-width: 1100px) {
  .langstrip { padding-inline: 1.25rem; }
  /* Stacked, the panel is as tall as it needs and the tiers stand down. */
  .panel__head, .panel__rule, .panel__foot, .panel__sub, .drop__note, .ctl__off { display: revert; }
  .lang { min-height: 50px; }
}

/* ------------------------------------------------- availability tags --- */
/* A switched off option carries the short codes of the languages that do have
   it, which the user asked for in place of a sentence under the control
   (2026-09-16). The tags have to stay readable, so an off control is dimmed
   less than it used to be. */

/* The tags are a permanent row under the buttons, one cell per button, so a
   button never changes size and nothing shifts when the language changes. */
.pill.is-off, .seg__opt.is-off { opacity: 0.5; }
.avails {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 0.5rem;
  margin-top: 0.3125rem;
}
.avails--seg { gap: 0 0.25rem; padding-inline: 0.25rem; }
.avail {
  font-size: 10px; font-weight: 500; line-height: 1.35;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}
.avail.is-off { color: rgba(255, 255, 255, 0.4); }

/* A tile sizes to its contents. It was a fixed height, which clipped the flag
   above languages that carry a region line. */
.lang { height: auto; min-height: 46px; padding-block: 0.3125rem; }
.lang__flag { line-height: 1.2; }

/* ------------------------------------------------------------ phone --- */
/* Two fixes for phones only (owner, 2026-09-17).

   The captions are small. At full size a caption covered more than a
   quarter of a picture that is only about 210px tall.

   The persona list sits in the panel's flow and pushes the controls under
   it down. As a floating list it ran past the bottom of the rounded
   screen, which cuts off what overflows it, so the lower personas could
   not be reached by scrolling. */
@media (max-width: 640px) {
  .cap {
    left: 0.75rem; right: 0.75rem; bottom: 3.25rem;
    max-width: 30rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 6px;
    font-size: 11.5px;
    line-height: 1.3;
  }
  .cap__en { margin-top: 1px; font-size: 10px; }
  .drop__list {
    position: static;
    box-shadow: none;
    animation: none;
  }
}