/*
 * The Play along overlay on the watch page: the panel on the right, its
 * folded pill, the crowd vote bar, the tools pill and the test bar. Loaded
 * last on the watch page. The interaction skin also applies to
 * .live-room-preview so the homepage teaches the same controls. Where an older sheet fights with !important, this one answers
 * in kind.
 */
:is(body.hud-watch, .live-room-preview) {
  --pa-surface: rgba(11, 12, 16, 0.94);
  --pa-surface-hover: rgba(20, 21, 26, 0.96);
  --pa-line: rgba(255, 255, 255, 0.08);
  --pa-ink: #f5f5f7;
  --pa-ink-on-white: #0b0c10;
  --pa-muted: #a1a1ad;
  --pa-green: #22c55e;
  --pa-green-soft: rgba(34, 197, 94, 0.14);
  --pa-red: #ef4444;
  --pa-ghost: rgba(255, 255, 255, 0.06);
  --pa-ghost-hover: rgba(255, 255, 255, 0.12);
  --pa-selected: rgba(255, 255, 255, 0.14);
  --pa-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --pa-font: var(--ui-font, system-ui, sans-serif);
}

/* ---------- gone from this page ---------- */
body.hud-watch .hud-action-dock,
body.hud-watch .hud-round-cue,
body.hud-watch .gl-info,
/* The pill keeps the tools for watching the room: guide, chat, an emote,
   and the switch that clears the overlay.
   Support and artifacts belong to the panel and the store is one tap away
   under the wallet's plus, so those three leave the row. */
body.hud-watch .hud-utilities #support,
/* .hud-dock-action is carried for the specificity: the pill's own "every item
   is a 36px circle" rule says display with !important too, and it comes later
   in this sheet. */
body.hud-watch .hud-utilities .hud-dock-action[data-room-target=artifacts],
body.hud-watch .hud-utilities a[href="/gifts"],
body.hud-watch .hud-panel-head .hud-kicker { display: none !important; }

/* ---------- the header cards ---------- */
/* The viewer on the left and the wallet on the right are the first two cards
   anyone sees on this page, and they were the last two drawn in another hand:
   rounder corners, a heavier black, a white disc for the avatar and another
   for the plus. They are the Play along card now, down to the type. */
body.hud-watch .hud-viewer, body.hud-watch .hud-wallet {
  border: 1px solid var(--pa-line) !important; border-radius: 16px !important;
  background: var(--pa-surface) !important; box-shadow: var(--pa-shadow) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font-family: var(--pa-font); color: var(--pa-ink);
}
body.hud-watch .hud-viewer::after, body.hud-watch .hud-wallet::after { display: none !important; }
/* Under the pointer they lift a little and take the ring — the ring itself
   is hover-ring.css, shared with the two pages the panel opens; what belongs
   here is which of them lift, and by how much. */
body.hud-watch :is(.hud-viewer, .hud-wallet, .play-along-pill) { transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
body.hud-watch :is(.hud-viewer, .hud-wallet):hover { transform: scale(1.02); }
/* the folded pill is centred with a transform of its own, so its lift carries it */
body.hud-watch .play-along-pill:hover { transform: translateY(-50%) scale(1.03); }
/* For now the viewer card is the logo and nothing else: the seat, the name
   and the note are hidden rather than removed, so the card still opens the
   sign in and everything behind it stays wired. */
body.hud-watch :is(.hud-viewer-avatar, .hud-viewer-copy) { display: none !important; }
body.hud-watch .hud-viewer { width: auto !important; padding: 6px 14px !important; gap: 0 !important; }
/* The logo is the whole card now, so it takes the room: no rule down its
   right-hand side separating it from what is no longer there, and drawn
   large enough to sit in the box rather than float in it. */
body.hud-watch .hud-home { height: auto !important; padding: 0 !important; margin: 0 !important; border-right: 0 !important; }
body.hud-watch .hud-home img { height: 38px !important; opacity: 1; }
body.hud-watch .hud-viewer-avatar { border-radius: 10px !important; transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
/* glass.css swaps the avatar's white disc for an 18% white wash under the
   pointer, which on this card reads as the mark going out. It keeps its own
   colour and grows a little instead. */
body.hud-watch .hud-viewer:hover .hud-viewer-avatar { background: #f2f2f2 !important; transform: scale(1.08); }
body.hud-watch .hud-viewer-copy .ar-tag, body.hud-watch .hud-viewer-copy b, body.hud-watch #who { font: 600 15px var(--pa-font) !important; color: var(--pa-ink) !important; }
body.hud-watch .hud-viewer-copy span, body.hud-watch #hud-progress-label, body.hud-watch #hud-wallet-note { font: 500 12px var(--pa-font) !important; color: var(--pa-muted) !important; }
/* Your coins reads as the card's name, the way Sign in does on the viewer
   card and Play along does on the panel; the line under it is the note. */
body.hud-watch .hud-wallet .hud-kicker { font: 600 15px var(--pa-font) !important; letter-spacing: normal !important; text-transform: none !important; color: var(--pa-ink) !important; }
body.hud-watch .hud-wallet :is(#balance, #demo-balance) { font: 600 17px var(--pa-font) !important; color: var(--pa-ink) !important; }
/* The plus is drawn rather than typed: a + glyph sits on the font's maths
   axis, which is not the middle of a 32px button, and it showed. */
body.hud-watch .hud-add {
  position: relative; width: 32px !important; height: 32px !important; border: 0 !important; border-radius: 8px !important;
  background: var(--pa-ghost) !important; color: var(--pa-ink) !important; font-size: 0 !important;
  transition: background 140ms, color 140ms, transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.hud-watch .hud-add::before, body.hud-watch .hud-add::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 1px; }
body.hud-watch .hud-add::before { width: 13px; height: 1.6px; transform: translate(-50%, -50%); }
body.hud-watch .hud-add::after { width: 1.6px; height: 13px; transform: translate(-50%, -50%); }
/* The plus is the way into the shop, so it says so when you reach for it:
   green, and a little bigger. The card behind it is doing its quieter thing
   at the same time, which is what tells you the two belong together. */
body.hud-watch .hud-add:hover { background: var(--pa-green) !important; color: #fff !important; transform: scale(1.08); }
body.hud-watch #hud-progress::-webkit-progress-value, body.hud-watch #hud-progress::-moz-progress-bar { background: var(--pa-green); }

/* ---------- the channel card ---------- */
/* Who you are watching, hung under the header card on the left. It comes up
   when the pointer is on its own corner or down in the controls' band, and
   goes three seconds after: watch.js puts .card-on on the layout for exactly
   that window, which is narrower than the one the controls answer. */
body.hud-watch .hud-channel-card {
  position: absolute !important; z-index: 24;
  left: 26px !important; top: 108px !important; right: auto !important; bottom: auto !important;
  width: 300px; padding: 14px !important; box-sizing: border-box;
  border: 1px solid var(--pa-line) !important; border-radius: 16px !important;
  background: var(--pa-surface) !important; box-shadow: var(--pa-shadow) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  color: var(--pa-ink); font-family: var(--pa-font);
  /* glass.css pops the card in on mount with a filled animation, which would
     hold it at opacity 1 whatever this sheet says about the hover. */
  animation: none !important;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 240ms ease, transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.hud-watch .hud-channel-card::before, body.hud-watch .hud-channel-card::after { display: none !important; }
body.hud-watch .ix-watch-layout.card-on .hud-channel-card { opacity: 1; transform: none; pointer-events: auto; }
body.hud-watch.ix-watch .hud-channel-card .channel-head { align-items: center; gap: 10px; }
body.hud-watch .hud-channel-card .avatar {
  width: 36px !important; height: 36px !important; min-width: 36px !important;
  border: 0 !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.08) !important;
  color: var(--pa-ink) !important; font: 600 14px var(--pa-font) !important;
}
body.hud-watch .hud-channel-card .channel-name b { max-width: 180px; font: 600 14px/1.3 var(--pa-font) !important; color: var(--pa-ink) !important; }
body.hud-watch .hud-channel-card #ch-followers { font: 500 11px/1.4 var(--pa-font) !important; color: var(--pa-muted) !important; }
body.hud-watch .hud-channel-card .btn-follow {
  width: 30px !important; min-width: 30px !important; height: 30px !important;
  border: 1px solid var(--pa-line) !important; border-radius: 9px !important;
  background: var(--pa-ghost) !important; color: var(--pa-muted) !important;
}
body.hud-watch .hud-channel-card .btn-follow:hover { background: var(--pa-ghost-hover) !important; color: var(--pa-ink) !important; }
body.hud-watch .hud-channel-card .btn-follow svg { width: 15px; height: 15px; }
body.hud-watch .hud-channel-card .btn-follow.following { border-color: var(--pa-green) !important; background: var(--pa-green-soft) !important; color: var(--pa-green) !important; }
body.hud-watch.ix-watch .hud-channel-card .title-bar { margin: 10px 0 0 !important; }
body.hud-watch.ix-watch .hud-channel-card .title-bar h1 { font: 500 12px/1.45 var(--pa-font) !important; color: var(--pa-muted) !important; }
body.hud-watch .hud-channel-card .hud-channel-meta { gap: 10px; margin-top: 10px; }
body.hud-watch .hud-channel-card .pill { font: 500 11px var(--pa-font) !important; color: var(--pa-muted) !important; }
body.hud-watch .hud-channel-card .pill.live {
  padding: 3px 7px !important; border-radius: 6px !important;
  background: var(--pa-red) !important; color: #fff !important;
  font: 700 10px var(--pa-font) !important; letter-spacing: 0.06em !important;
}
body.hud-watch .hud-channel-card .lv-watching { gap: 4px; }
body.hud-watch .hud-channel-card #stream-category { font: 500 11px var(--pa-font) !important; color: var(--pa-muted) !important; }

/* ---------- the panel ---------- */
body.hud-watch .ix-watch-layout { --room-drawer-width: 380px; }
body.hud-watch.ix-watch .ix-room-panel {
  position: absolute !important; z-index: 25; top: max(104px, calc(50% - 290px)) !important; right: 0 !important; bottom: auto !important; left: auto !important;
  transform: none; width: var(--room-drawer-width) !important; height: 580px; min-height: 0; max-height: calc(100% - 164px) !important;
  /* All views share one fixed frame and overlap only during their crossfade. */
  display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); overflow: hidden; isolation: isolate;
  background: var(--pa-surface) !important; border: 1px solid var(--pa-line) !important; border-right: 0 !important; border-radius: 16px 0 0 16px !important;
  box-shadow: var(--pa-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  color: var(--pa-ink); font-family: var(--pa-font);
}
body.hud-watch.ix-watch .ix-room-panel::before, body.hud-watch.ix-watch .ix-room-panel::after { display: none !important; }
body.hud-watch.ix-watch .ix-room-panel[hidden] { display: none !important; }
body.hud-watch .ix-room-panel > .hud-panel-head { grid-area: 1 / 1; }
body.hud-watch .ix-room-panel > .ix-room-tabs { grid-area: 1 / 1; align-self: center; margin: 12px 56px 12px 98px !important; padding: 4px !important; z-index: 1; }
body.hud-watch .ix-room-panel > [role=tabpanel] { grid-area: 2 / 1; min-width: 0; min-height: 0; }
body.hud-watch .hud-panel-head { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px !important; border: 0 !important; background: none !important; }
body.hud-watch .pa-title { font: 600 13px/1.2 var(--pa-font) !important; color: var(--pa-ink); }
body.hud-watch #hud-panel-close { width: 32px !important; height: 32px !important; padding: 0; border: 0 !important; border-radius: 8px !important; background: var(--pa-ghost) !important; color: var(--pa-muted); display: grid; place-items: center; cursor: pointer; box-shadow: none !important; }
body.hud-watch #hud-panel-close:hover { background: var(--pa-ghost-hover) !important; color: var(--pa-ink); }
body.hud-watch #hud-panel-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.hud-watch #ix-play-panel, body.hud-watch #support-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px !important; scrollbar-width: thin; }
body.hud-watch #ix-play-panel[hidden], body.hud-watch #support-panel[hidden] { display: none !important; }
/* Keep every room view reachable in the new overlay. The tools pill also
   opens chat directly when Play along is folded. */
body.hud-watch .ix-room-tabs {
  display: flex !important; flex: none; gap: 4px; margin: 0 16px 12px; padding: 4px;
  border: 0 !important; border-radius: 10px; background: var(--pa-ghost) !important;
  box-shadow: none !important;
}
body.hud-watch .ix-room-tabs .gl-thumb { display: none !important; }
body.hud-watch .ix-room-tabs button {
  min-height: 36px; padding: 6px 10px; border: 0 !important; border-radius: 7px;
  font: 600 13px var(--pa-font) !important; letter-spacing: normal !important;
  text-transform: none !important; color: var(--pa-muted) !important;
  background: transparent !important; box-shadow: none !important;
}
body.hud-watch .ix-room-tabs button[aria-selected=true] {
  color: var(--pa-ink) !important; background: var(--pa-selected) !important;
}
body.hud-watch .ix-room-tabs button:focus-visible { outline: 2px solid var(--pa-green); outline-offset: 2px; }
body.hud-watch.ix-watch .ix-room-panel #chat-panel {
  flex: 1; min-height: 0; height: auto; max-height: none;
  overflow: hidden; background: transparent; border-radius: 0 0 16px 16px;
}
body.hud-watch #chat-log { min-height: 0; padding: 4px 16px 12px; scrollbar-width: thin; }
body.hud-watch #chat-log .msg { flex-shrink: 0; overflow-wrap: anywhere; }
body.hud-watch.ix-watch #chat-panel .chat-compose {
  flex: none; gap: 8px; padding: 12px 16px; margin: 0;
  border-top: 1px solid var(--pa-line); background: none;
}
body.hud-watch #chat-input {
  min-width: 0; color: var(--pa-ink); background: var(--pa-ghost);
  border: 1px solid var(--pa-line); border-radius: 10px; font: 400 16px var(--pa-font);
}
body.hud-watch #chat-input:focus-visible { outline: 2px solid var(--pa-green); outline-offset: 2px; }
body.hud-watch #chat-panel .btn-send {
  flex: none; width: 44px; height: 44px; border-radius: 10px;
  background: var(--pa-green); color: #0b0c10;
}
body.hud-watch .ix-crowd-wait { display: none !important; }
/* The arena root keeps its hidden attribute until a crowd game connects, and
   interaction-arena.css honours it. On this page the tabs and their empty
   states are the panel, so an open panel always shows them. The rows that
   would have no data are hidden one by one elsewhere in this sheet. */
body.hud-watch #crowd[hidden] { display: block !important; }

/* the folded pill */
body.hud-watch .play-along-pill {
  position: absolute; z-index: 25; top: auto; right: 16px; bottom: 12px; transform: none;
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px;
  border: 1px solid var(--pa-line); border-radius: 999px; background: var(--pa-surface); color: var(--pa-ink);
  font: 600 13px var(--pa-font) !important; letter-spacing: normal !important; text-transform: none !important;
  box-shadow: var(--pa-shadow); cursor: pointer;
}
body.hud-watch .play-along-pill[hidden] { display: none; }
body.hud-watch .play-along-pill:hover { background: var(--pa-surface-hover); }
body.hud-watch .play-along-pill svg { width: 16px; height: 16px; color: var(--pa-green); fill: currentColor; stroke: none; }
body.hud-watch .ix-watch-layout.bar-on .play-along-pill { bottom: 60px; }

/* The pull tab stays at the edge of the drawer in both states. Its own
   disclosure control can close Chat as well as Play, without switching views. */
body.hud-watch .room-drawer-handle {
  position: absolute; z-index: 26; right: 0;
  top: calc(max(104px, 50% - 290px) + min(580px, 100% - 164px) / 2);
  transform: translateY(-50%); display: grid; place-items: center;
  width: 32px; height: 64px; min-height: 0; padding: 0;
  border: 1px solid var(--pa-line) !important; border-right: 0 !important;
  border-radius: 12px 0 0 12px !important; background: var(--pa-surface) !important;
  color: var(--pa-ink) !important; box-shadow: -5px 0 20px #0002;
  cursor: pointer; touch-action: manipulation;
}
body.hud-watch .room-drawer-handle[aria-expanded=true] { right: var(--room-drawer-width); }
body.hud-watch .room-drawer-handle:hover { background: var(--pa-surface-hover) !important; }
body.hud-watch .room-drawer-handle:focus-visible { outline: 2px solid var(--pa-green); outline-offset: -3px; }
body.hud-watch .room-drawer-handle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transform: rotate(180deg); }
body.hud-watch .room-drawer-handle[aria-expanded=true] svg { transform: rotate(0); }

/* ---------- the arena inside it ---------- */
:is(body.hud-watch, .live-room-preview) .has-interaction-arena { --ia-line: var(--pa-line); --ia-ink: var(--pa-ink); --ia-muted: var(--pa-muted); --ia-gold: var(--pa-green); --ia-back: var(--pa-green); --ia-fade: var(--pa-muted); }
:is(body.hud-watch, .live-room-preview) .interaction-arena { font-family: var(--pa-font); }
/* live.css letter-spaces and bolds every button on the watch page; the panel speaks in sentence case. */
:is(body.hud-watch, .live-room-preview) .interaction-arena button,
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-submit,
:is(body.hud-watch, .live-room-preview) #hud-panel-close,
:is(body.hud-watch, .live-room-preview) #support-panel button { letter-spacing: normal !important; text-transform: none !important; }
/* The preview note goes with them. The test bar over the picture now says
   PREVIEW · Demo coins only and carries Simulate result, so a second copy
   hanging off the panel would only repeat it — and the panel goes back to
   being centred, in preview exactly as in live. */
:is(body.hud-watch, .live-room-preview) .ia-topline, :is(body.hud-watch, .live-room-preview) .ia-foot, :is(body.hud-watch, .live-room-preview) .ia-hero-art, :is(body.hud-watch, .live-room-preview) .ia-orbit, :is(body.hud-watch, .live-room-preview) .ia-meta, :is(body.hud-watch, .live-room-preview) .ia-preview-note { display: none !important; }

:is(body.hud-watch, .live-room-preview) .ia-tabs { display: flex !important; justify-content: space-between; gap: 5px !important; padding: 0 !important; border: 0; background: none; border-radius: 0; }
/* Each tab takes the width of its own words rather than a quarter of the row:
   at a quarter, Predict's mark and label needed 72px in a 61px box and were
   cut off inside it. They spread across the row instead. */
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-tabs button { flex: 0 1 auto; min-width: 0; flex-direction: row; gap: 5px; min-height: 36px; padding: 0 9px !important; border: 1px solid var(--pa-line) !important; border-radius: 10px !important; background: var(--pa-ghost) !important; color: var(--pa-muted) !important; font: 600 13px var(--pa-font) !important; box-shadow: none !important; white-space: nowrap !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-tabs button span { font: 600 13px var(--pa-font) !important; letter-spacing: 0 !important; color: inherit !important; white-space: nowrap; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-tabs button:hover { background: var(--pa-ghost-hover) !important; color: var(--pa-ink) !important; }
/* The mode you are in is the one white thing in the panel: a tinted chip read
   as one more of the ghosts beside it, and which tab was selected was the one
   thing the row had to say. */
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-tabs button[aria-pressed=true] { background: #fff !important; color: var(--pa-ink-on-white) !important; border-color: #fff !important; box-shadow: none !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-tabs button[aria-pressed=true] span { color: var(--pa-ink-on-white) !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-tabs button img, :is(body.hud-watch, .live-room-preview) .interaction-arena .ia-tabs button .gl-emoji { width: 16px !important; height: 16px !important; margin: 0 !important; font-size: 14px !important; line-height: 1; transform: none !important; filter: none !important; }
/* The tab's mark takes the button's own colour, which is what turns it dark
   on the white chip the open mode wears. */
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-tabs button .ia-tab-icon { width: 17px !important; height: 17px !important; flex: none; margin: 0 !important; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: none !important; transform: none !important; }
:is(body.hud-watch, .live-room-preview) .ia-tabs [data-ia-mode=vote] { order: 1; }
:is(body.hud-watch, .live-room-preview) .ia-tabs [data-ia-mode=bet] { order: 2; }
:is(body.hud-watch, .live-room-preview) .ia-tabs [data-ia-mode=bid] { order: 3; }
:is(body.hud-watch, .live-room-preview) .ia-tabs [data-ia-mode=predict] { order: 4; }
/* A mode with a round open in it wears the ring the cards wear under the
   pointer — hover-ring.css draws it — in place of the dot that used to sit
   in the corner. */
:is(body.hud-watch, .live-room-preview) .ia-tabs .is-available i { display: none; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-tabs button.is-available { border-color: rgba(34, 197, 94, 0.3) !important; }
:is(body.hud-watch, .live-room-preview) .ia-tabs .gl-thumb { display: none !important; }

:is(body.hud-watch, .live-room-preview) .ia-content { padding-top: 14px; }
:is(body.hud-watch, .live-room-preview) .ia-hero { display: block; min-height: 0; padding: 0; overflow: visible; }
:is(body.hud-watch, .live-room-preview) .ia-kicker-row { margin-bottom: 8px; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 700 11px var(--pa-font) !important; letter-spacing: 0.08em !important; text-transform: none !important; color: var(--pa-muted) !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-eyebrow.is-live { color: var(--pa-red) !important; }
:is(body.hud-watch, .live-room-preview) .ia-eyebrow.is-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pa-red); box-shadow: 0 0 8px var(--pa-red); }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-hero h3 { font: 600 15px/1.35 var(--pa-font) !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.35 !important; margin: 0; color: var(--pa-ink) !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-clock { min-width: 0; padding: 0 !important; border: 0; background: none !important; border-radius: 0 !important; display: inline-flex; align-items: center; gap: 4px; font: 500 12px var(--pa-font) !important; color: var(--pa-muted) !important; white-space: nowrap; }
body.hud-watch .interaction-arena .ia-clock { display: none; }
:is(body.hud-watch, .live-room-preview) .ia-clock::after { content: '\23F1'; font-size: 12px; }

/* bet */
:is(body.hud-watch, .live-room-preview) .ia-seg { gap: 6px; margin-top: 14px; }
:is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-side { min-height: 40px; padding: 0 12px !important; border-radius: 10px !important; border: 1px solid var(--pa-line) !important; background: var(--pa-ghost) !important; color: var(--pa-ink) !important; font: 600 13px var(--pa-font) !important; transition: background 120ms; }
:is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-side small { margin: 0; font-size: 11px; color: inherit; opacity: 0.8; }
:is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-side:hover:not(:disabled) { transform: none; background: var(--pa-ghost-hover) !important; }
:is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-side.is-picked, :is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-side.is-picked:hover { background: var(--pa-green) !important; border-color: var(--pa-green) !important; color: #fff !important; box-shadow: none !important; }
/* The same filled chip on the other side of the question, in the colour that
   side already speaks in everywhere else on the page. */
:is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-against.is-picked, :is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-against.is-picked:hover { background: var(--pa-red) !important; border-color: var(--pa-red) !important; }
:is(body.hud-watch, .live-room-preview) .ia-amount { margin-top: 16px; }
:is(body.hud-watch, .live-room-preview) .ia-amount-row { font: 500 12px var(--pa-font); color: var(--pa-muted); }
:is(body.hud-watch, .live-room-preview) .ia-amount-n { margin: 4px 0 8px; font: 600 24px/1.1 var(--pa-font); color: var(--pa-ink); font-variant-numeric: tabular-nums; }
:is(body.hud-watch, .live-room-preview) .ia-amount-n .ia-coin { width: 20px; height: 20px; }
:is(body.hud-watch, .live-room-preview) .ia-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 6px 0 0; border-radius: 3px; background: linear-gradient(90deg, #22c55e, #facc15, #ef4444); outline: none; accent-color: #fff; }
:is(body.hud-watch, .live-room-preview) .ia-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); cursor: pointer; }
:is(body.hud-watch, .live-room-preview) .ia-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); cursor: pointer; }
:is(body.hud-watch, .live-room-preview) .ia-range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #22c55e, #facc15, #ef4444); }
:is(body.hud-watch, .live-room-preview) .ia-range:disabled { opacity: 0.4; }
:is(body.hud-watch, .live-room-preview) .ia-range:focus-visible { outline: 2px solid var(--pa-ink); outline-offset: 6px; }
:is(body.hud-watch, .live-room-preview) .ia-return { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pa-line); font: 500 13px var(--pa-font); color: var(--pa-ink); }
:is(body.hud-watch, .live-room-preview) .ia-return > span:first-child { padding-top: 2px; }
:is(body.hud-watch, .live-room-preview) .ia-return b { font: 600 17px/1.2 var(--pa-font); color: var(--pa-ink); font-variant-numeric: tabular-nums; }
:is(body.hud-watch, .live-room-preview) .ia-return small { margin-top: 2px; font-size: 11px; color: var(--pa-muted); max-width: 210px; margin-left: auto; }

/* primary button, rule, states */
:is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-submit { min-height: 40px; margin-top: 14px; padding: 0 14px; border: 0 !important; border-radius: 10px !important; background: var(--pa-green) !important; color: #fff !important; font: 600 14px var(--pa-font) !important; box-shadow: none !important; }
:is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-submit:not(:disabled):hover { transform: none; filter: brightness(1.08); }
:is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-submit:not(:disabled):active { transform: none; box-shadow: none !important; filter: brightness(0.95); }
:is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-submit:disabled { opacity: 0.4; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-rule { margin-top: 10px; font: 500 12px/1.5 var(--pa-font) !important; color: var(--pa-muted) !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-locked, :is(body.hud-watch, .live-room-preview) .interaction-arena .ia-result, :is(body.hud-watch, .live-room-preview) .interaction-arena .ia-receipt { margin-top: 12px; padding: 12px; border: 1px solid var(--pa-line) !important; border-radius: 10px !important; background: var(--pa-ghost) !important; color: var(--pa-ink) !important; font: 500 13px/1.5 var(--pa-font) !important; }
:is(body.hud-watch, .live-room-preview) .ia-result > span { color: var(--pa-muted); }
:is(body.hud-watch, .live-room-preview) .ia-result > strong { font-size: 16px; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-receipt-mark { border: 1px solid var(--pa-green) !important; color: var(--pa-green) !important; background: none !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-receipt[data-kind=error] { border-color: rgba(239, 68, 68, 0.5) !important; color: #fecaca !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-receipt[data-kind=error] .ia-receipt-mark { border-color: var(--pa-red) !important; color: var(--pa-red) !important; }
:is(body.hud-watch, .live-room-preview) .ia-empty { margin-top: 14px; padding: 18px 12px; border: 1px dashed var(--pa-line); border-radius: 12px; background: none; }
:is(body.hud-watch, .live-room-preview) .ia-empty p { margin: 10px 0; font-size: 13px; color: var(--pa-muted); }
:is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-empty button { border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--pa-green) !important; text-decoration: none; font: 600 13px var(--pa-font) !important; }

/* vote and predict rows */
:is(body.hud-watch, .live-room-preview) .ia-options { gap: 6px; margin-top: 14px; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option { min-height: 52px !important; padding: 10px 12px 14px !important; gap: 10px; border: 1px solid var(--pa-line) !important; border-radius: 10px !important; background: var(--pa-ghost) !important; color: var(--pa-ink) !important; box-shadow: none !important; font-family: var(--pa-font) !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option:not(:disabled):hover { border-color: rgba(255, 255, 255, 0.2) !important; background: var(--pa-ghost-hover) !important; }
/* The share under an option. The one you took runs green to the end of the
   track rather than stopping at its percentage — the number beside it still
   says what the room thinks; the bar says what you did. render() carries
   the old width onto the new element and lets the transition play, so the
   run happens once, on the tap, and not again on every tally that lands. */
/* The light that travels the row.
   glass.css put it inside the fill and moved it by a percentage of the
   fill, so a 21% share got a small light on a short run and a 57% one a
   wide light on a long run — the same effect at two sizes, side by side.
   It rides the whole line now, filled part and empty part alike, as a
   90px band whose background-position is animated: percentages there are
   of the line minus the band, so every row runs the same distance at the
   same speed whatever its share. */
@keyframes pa-sheen { from { background-position: -90px 0; } to { background-position: calc(100% + 90px) 0; } }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option-fill::after { display: none; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option::before {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 4px; z-index: 1;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) no-repeat;
  background-size: 90px 100%;
  animation: pa-sheen 2.8s linear infinite;
}
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option-fill { inset: auto 12px 6px 12px; height: 4px; border: 0; border-radius: 2px !important; background: rgba(255, 255, 255, 0.35) !important; z-index: 0; transition: width 520ms cubic-bezier(0.2, 0.8, 0.2, 1) !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option-index { width: 26px; height: 26px; border: 0 !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.08) !important; color: var(--pa-ink) !important; font: 600 12px var(--pa-font) !important; box-shadow: none !important; }
:is(body.hud-watch, .live-room-preview) .ia-option-copy strong { font: 600 14px/1.3 var(--pa-font); }
:is(body.hud-watch, .live-room-preview) .ia-option-copy small { font-size: 11px; color: var(--pa-muted); }
:is(body.hud-watch, .live-room-preview) .ia-option > b { order: 10; font: 600 14px var(--pa-font); }
/* While the round runs, green is the side you took — is-picked is only on
   an option while there is still something to take. */
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option.is-picked { border-color: var(--pa-green) !important; background: var(--pa-green-soft) !important; box-shadow: none !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option.is-picked .ia-option-fill { background: var(--pa-green) !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option.is-picked .ia-option-index { background: var(--pa-green) !important; color: #fff !important; }
/* The Voted chip is what marks your own choice; the green border belongs to
   whichever option is the answer — yours while the round runs, the room's
   once it has closed. */
/* Once the result is in, green belongs to the room's answer and yours goes
   white, so a closed round never lights two options the same way. */
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option.is-mine { box-shadow: none !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option.is-mine:not(.is-picked):not(.is-win) { border-color: rgba(255, 255, 255, 0.5) !important; background: rgba(255, 255, 255, 0.10) !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option.is-mine:not(.is-picked):not(.is-win) .ia-option-fill { background: #fff !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option.is-mine:not(.is-picked):not(.is-win) .ia-option-index { background: #fff !important; color: var(--pa-ink-on-white) !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option.is-win { border-color: var(--pa-green) !important; background: var(--pa-green-soft) !important; box-shadow: none !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option.is-win .ia-option-fill { background: var(--pa-green) !important; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-option.is-win .ia-option-index { background: var(--pa-green) !important; color: #fff !important; }
:is(body.hud-watch, .live-room-preview) .ia-option.is-mine::after { content: '\2713  Voted'; order: 5; padding: 4px 10px; border-radius: 999px; background: var(--pa-green); color: #fff; font: 600 11px var(--pa-font); white-space: nowrap; }
:is(body.hud-watch, .live-room-preview) .ia-option.is-mine:not(.is-picked):not(.is-win)::after { background: #fff; color: var(--pa-ink-on-white); }
:is(body.hud-watch, .live-room-preview) .ia-option.is-mine.is-win::after { content: '\2713  You won it'; background: var(--pa-green); color: #fff; }
:is(body.hud-watch, .live-room-preview) .ia-review { padding: 12px 0 0; font: 500 12px var(--pa-font); color: var(--pa-muted); }
:is(body.hud-watch, .live-room-preview) .ia-review b { color: var(--pa-ink); font-size: 15px; }
:is(body.hud-watch, .live-room-preview) .interaction-arena .ia-vote-status { margin-top: 12px; font: 500 12px/1.5 var(--pa-font) !important; color: var(--pa-muted) !important; }
:is(body.hud-watch, .live-room-preview) .ia-vote-status > b { color: var(--pa-muted); }

/* bid */
:is(body.hud-watch, .live-room-preview) .ia-auction-score { padding: 12px 0 14px; margin-bottom: 12px; border-color: var(--pa-line); }
:is(body.hud-watch, .live-room-preview) .ia-auction-score > span { color: var(--pa-muted); font: 700 11px var(--pa-font); letter-spacing: 0.08em; }
:is(body.hud-watch, .live-room-preview) .ia-auction-score > strong { padding: 6px 0; color: var(--pa-ink); font: 600 28px var(--pa-font); letter-spacing: -0.02em; }
:is(body.hud-watch, .live-room-preview) .ia-auction-score .ia-coin { width: 24px; height: 24px; }
:is(body.hud-watch, .live-room-preview) .ia-auction-score small { color: var(--pa-muted); }
:is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-auction-option { padding: 10px 12px !important; border: 1px solid var(--pa-line) !important; border-radius: 10px !important; background: var(--pa-ghost) !important; color: var(--pa-ink) !important; font: 500 13px var(--pa-font) !important; }
:is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-auction-option.is-picked { border-color: var(--pa-green) !important; background: var(--pa-green-soft) !important; }
:is(body.hud-watch, .live-room-preview) .ia-auction-option strong { font: 600 14px var(--pa-font); }
:is(body.hud-watch, .live-room-preview) .ia-auction-option small { color: var(--pa-muted); }
:is(body.hud-watch, .live-room-preview) .ia-sizes { margin-top: 12px; }
:is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-sizes button { min-height: 36px; padding: 0 8px !important; border: 1px solid var(--pa-line) !important; border-radius: 10px !important; background: var(--pa-ghost) !important; color: var(--pa-ink) !important; font: 600 13px var(--pa-font) !important; }
:is(body.hud-watch, .live-room-preview).ix-watch .interaction-arena .ia-sizes button.is-picked { border-color: var(--pa-green) !important; background: var(--pa-green-soft) !important; color: #fff !important; }

/* A single compact canvas: no nested card padding or scrolling for a normal
   round. Keep overflow as a fallback for long creator questions and text zoom. */
body.hud-watch.ix-watch .ix-room-panel #crowd { padding: 0 !important; }
body.hud-watch .ix-room-panel #ix-play-panel { overscroll-behavior: contain; overflow-anchor: none; }
body.hud-watch .ix-room-panel .ia-content { padding-top: 10px; }
/* The selected mode and main countdown already identify this round. */
body.hud-watch .ix-room-panel .ia-kicker-row { display: none; }
body.hud-watch .ix-room-panel :is(.ia-seg, .ia-options, .ia-amount, .ia-sizes) { margin-top: 10px; }
body.hud-watch .ix-room-panel .ia-amount {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
}
body.hud-watch .ix-room-panel .ia-amount-row { display: grid; gap: 3px; }
body.hud-watch .ix-room-panel .ia-amount-row > span:last-child { font-size: 11px; }
body.hud-watch .ix-room-panel .ia-amount-n { margin: 0; font-size: 20px; }
body.hud-watch .ix-room-panel .ia-range { grid-column: 1 / -1; margin: 14px 0 8px; }
body.hud-watch .ix-room-panel .ia-return { margin-top: 8px; padding-top: 9px; gap: 10px; }
body.hud-watch .ix-room-panel .ia-return > span:first-child { white-space: nowrap; font-size: 12px; }
body.hud-watch.ix-watch .ix-room-panel .ia-submit { margin-top: 10px; min-height: 40px; }
body.hud-watch .ix-room-panel .interaction-arena .ia-rule { margin-top: 8px; font-size: 11px !important; line-height: 1.4 !important; }
body.hud-watch .ix-room-panel .interaction-arena .ia-option { min-height: 48px !important; padding: 7px 10px 12px !important; }
body.hud-watch .ix-room-panel .ia-option-copy { gap: 2px; }
body.hud-watch .ix-room-panel .ia-auction-score {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 3px 8px; text-align: left; padding: 6px 0 4px; margin-bottom: 8px;
}
body.hud-watch .ix-room-panel .ia-auction-score > strong { grid-area: 1 / 2 / 3; padding: 0; font-size: 22px; }
body.hud-watch .ix-room-panel .ia-auction-score small { font-size: 11px; }
body.hud-watch .ix-room-panel .ia-auction-options { gap: 6px; }
body.hud-watch.ix-watch .ix-room-panel .ia-auction-option { min-height: 44px; padding: 7px 10px !important; }
body.hud-watch .ix-room-panel .ia-auction-option strong { font-size: 13px; }
body.hud-watch .ix-room-panel .ia-auction-option small { font-size: 11px; line-height: 1.3; }
body.hud-watch .ix-room-panel .ia-auction-options + .ia-sizes { margin-bottom: 0; }
body.hud-watch .ix-room-panel [data-interaction-mode=bid] .ia-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; }
body.hud-watch .ix-room-panel [data-interaction-mode=bid] .ia-body > :not(.ia-sizes):not(.ia-submit) { grid-column: 1 / -1; }
body.hud-watch .ix-room-panel [data-interaction-mode=bid] .ia-sizes { align-self: start; }
body.hud-watch.ix-watch .ix-room-panel [data-interaction-mode=bid] .ia-sizes button { min-height: 40px; padding: 0 3px !important; font-size: 12px !important; }
body.hud-watch .ix-room-panel [data-interaction-mode=bid] .ia-sizes .ia-coin { width: 14px; height: 14px; }
body.hud-watch .ix-room-panel [data-interaction-mode=predict] .ia-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.hud-watch .ix-room-panel [data-interaction-mode=predict] .ia-option { flex-wrap: wrap; gap: 4px; }
body.hud-watch .ix-room-panel [data-interaction-mode=predict] .ia-option-index { display: none; }
body.hud-watch .ix-room-panel [data-interaction-mode=predict] .ia-option-copy { flex-basis: 100%; }
body.hud-watch .ix-room-panel [data-interaction-mode=predict] .ia-option > b { position: absolute; bottom: 14px; right: 10px; font-size: 11px; }

/* support view, same language */
body.hud-watch #support-panel { color: var(--pa-ink); font-family: var(--pa-font); }
body.hud-watch .support-head { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0 12px; font: 600 15px var(--pa-font); }
body.hud-watch .support-head .muted { color: var(--pa-muted); font-weight: 500; }
body.hud-watch .support-amounts { display: flex; flex-wrap: wrap; gap: 6px; }
body.hud-watch .support-amounts button { min-height: 40px; padding: 0 14px; border: 1px solid var(--pa-line); border-radius: 10px; background: var(--pa-ghost); color: var(--pa-ink); font: 600 13px var(--pa-font); cursor: pointer; }
body.hud-watch .support-amounts button:hover { background: var(--pa-ghost-hover); }
body.hud-watch .support-note { margin-top: 10px; font-size: 12px; color: var(--pa-muted); }

/* ---------- the crowd vote bar ---------- */
/* glass.css's flat theme repaints .gl-vote and .gl-vote-opt with !important,
   so every paint property below has to answer in kind; the geometry does not. */
/* Centred on the picture rather than fitted into what the panel leaves over:
   the open round is the middle of the room. An open panel takes the width off
   the bar's own two edges instead of pushing it off centre — 20 of inset, 360
   of panel and 16 of air, twice over, is what comes off. */
body.hud-watch .gl-vote {
  /* parked above the controls row rather than under it: the row is 48px, and
     the stage's bottom is (--kk-top - 26px) below the picture's. The bar used
     to be lifted by that much as the row appeared, which moved it under every
     hover. */
  position: absolute; z-index: 24; left: 50%; right: auto; top: auto; bottom: calc(24px + 48px + var(--kk-top, 60px) - 26px);
  width: min(960px, calc(100% - 40px)); min-height: 84px; padding: 7px 12px 7px 14px;
  display: flex; align-items: center; gap: 14px; overflow: hidden;
  background: var(--pa-surface) !important; border: 1px solid var(--pa-line) !important; border-radius: 16px; box-shadow: var(--pa-shadow) !important;
  font-family: var(--pa-font); color: var(--pa-ink);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity 320ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), width 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.hud-watch .gl-vote.is-on { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
/* With the panel open the bar centres on what is left of the picture rather
   than on the picture: taking the panel off both edges to keep the middle
   would have left it too narrow to read its own options on anything but a
   very wide window. 360 of panel, 20 of inset and 16 of air is 396; half of
   that comes off the centre, all of it plus the far margin off the width. */
/* The bar keeps the middle of the picture whatever else is open: with the
   panel out it gives width back off both of its own edges — 20 of inset,
   360 of panel and 16 of air, twice — rather than sliding off centre. */
body.hud-watch .ix-watch-layout.hud-panel-open .gl-vote { left: 50%; width: max(420px, min(960px, calc(100% - 792px))); }
body.hud-watch .gl-vote.is-closed { opacity: 0.85; }
/* The green line along the top said what the clock at the other end of the bar
   already says, in the one place a bar of options cannot afford the room. */
body.hud-watch .gl-vote-bar { display: none; }
/* The label and the turnout read as one line of small print: CROWD VOTE over
   two lines because it is the narrower of the two, and the count beside it
   rather than under it. */
body.hud-watch .gl-vote-head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin: 0; }
/* game-ui.css flattens every text-transform on the page with !important. */
body.hud-watch .gl-vote-k { width: 48px; font: 700 11px/1.2 var(--pa-font); letter-spacing: 0.08em; text-transform: uppercase !important; color: var(--pa-green); }
body.hud-watch .gl-vote-n { display: flex; align-items: center; gap: 6px; font: 600 14px var(--pa-font); color: var(--pa-ink); white-space: nowrap; }
body.hud-watch .gl-vote-n::before { content: '\1F465'; font-size: 13px; }
body.hud-watch .gl-vote-q, body.hud-watch .gl-vote-foot, body.hud-watch .gl-vote .gl-combo { display: none; }
body.hud-watch .gl-vote-opts { flex: 1; display: flex; gap: 8px; }
/* The option reads down, not across: its number and its share on one line,
   its words on the next with the whole card to themselves, its bar under
   both. Across, a long choice had to fight the percentage for the room and
   wrapped to three lines to lose. */
body.hud-watch .gl-vote-opt {
  flex: 1; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 2px; align-items: center;
  min-height: 58px; padding: 6px 10px 8px; border: 1px solid var(--pa-line) !important; border-radius: 12px !important; background: var(--pa-ghost) !important; color: var(--pa-ink);
  font: 600 13px var(--pa-font); text-align: left; cursor: pointer; overflow: visible; box-shadow: none !important;
}
body.hud-watch .gl-vote-opt:hover { background: var(--pa-ghost-hover) !important; }
body.hud-watch .gl-vote-glyph { grid-column: 1; grid-row: 1; width: 24px; height: 24px; display: grid; place-items: center; margin: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.08); font-size: 15px; }
/* An option's words are the choice; they are never cut. They wrap to a
   second line and the bar carries the height for it — three of them and a
   Voted chip in a centred bar leave a label less room than a wide mock. */
body.hud-watch .gl-vote-opt > span:not(.gl-vote-glyph) { grid-column: 1 / -1; grid-row: 2; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
body.hud-watch .gl-vote-opt em { grid-column: 2; grid-row: 1; justify-self: end; font: 600 15px var(--pa-font); color: var(--pa-ink); font-variant-numeric: tabular-nums; }
/* A share is a bar on a track, not a hairline. The track is the option's own
   ::after, laid in the same grid cell under the fill — the fill is the one
   element glass.js writes a width onto, so it cannot hold both. */
body.hud-watch .gl-vote-opt::after { content: ''; grid-column: 1 / -1; grid-row: 3; height: 6px; margin-top: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.09); }
body.hud-watch .gl-vote-opt .fill { position: relative; z-index: 1; grid-column: 1 / -1; grid-row: 3; height: 6px; margin-top: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.5); transition: width 500ms ease; }
/* Voted is a receipt rather than a label: it fades in over the end of the
   option, holds, and fades out again, leaving the green. It is out of flow on
   purpose — taking a grid cell pushed the words aside on the way in and gave
   the width back a pixel at a time on the way out, which read as a stutter. */
@keyframes pa-voted { 0% { opacity: 0; } 10%, 62% { opacity: 1; } 100% { opacity: 0; } }
body.hud-watch .gl-vote-check {
  display: none; position: absolute; right: 10px; top: 8px; z-index: 2;
  padding: 3px 8px; border: 1px solid var(--pa-green); border-radius: 8px; background: var(--pa-surface);
  color: var(--pa-green); font: 600 11px var(--pa-font); white-space: nowrap;
}
body.hud-watch .gl-vote-opt.is-mine { background: var(--pa-green-soft) !important; border-color: var(--pa-green) !important; color: var(--pa-ink); box-shadow: 0 0 18px rgba(34, 197, 94, 0.22) !important; }
/* Until the result. Then green is the room's answer and yours turns white,
   so the bar never shows two greens and leaves you to work out which. */
body.hud-watch .gl-vote.is-closed .gl-vote-opt.is-mine:not(.is-win) { background: rgba(255, 255, 255, 0.10) !important; border-color: rgba(255, 255, 255, 0.5) !important; box-shadow: none !important; }
body.hud-watch .gl-vote.is-closed .gl-vote-opt.is-mine:not(.is-win) .fill { background: #fff; }
body.hud-watch .gl-vote.is-closed .gl-vote-opt.is-mine:not(.is-win) .gl-vote-check { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
/* The vote lands: a ring leaves the option once, and the green stays. The
   option's own box-shadow is spoken with !important against glass.css, which
   an animation cannot outrank — so the ring is drawn on ::before instead. */
@keyframes pa-vote-taken { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(1.07); } }
body.hud-watch .gl-vote-opt.is-mine::before {
  content: ''; position: absolute; inset: -2px; border: 2px solid var(--pa-green); border-radius: 13px;
  pointer-events: none; animation: pa-vote-taken 700ms ease-out forwards;
}
body.hud-watch .gl-vote-opt.is-mine .fill { background: var(--pa-green); }
body.hud-watch .gl-vote-opt.is-mine .gl-vote-check { display: inline-block; animation: pa-voted 2.6s ease both; }
/* The round's answer, for the seconds the bar has left: the same green the
   panel gives a winning option, and the chip in the corner stays up and
   says which it was rather than fading out like a receipt. */
body.hud-watch .gl-vote-opt.is-win { border-color: var(--pa-green) !important; background: var(--pa-green-soft) !important; }
body.hud-watch .gl-vote-opt.is-win .fill { background: var(--pa-green); }
body.hud-watch .gl-vote-opt.is-win .gl-vote-glyph { background: var(--pa-green); }
body.hud-watch .gl-vote-opt.is-win .gl-vote-check { display: inline-block; animation: none; opacity: 1; background: var(--pa-green); color: #fff; border-color: var(--pa-green); }
body.hud-watch .gl-vote-clock { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 42px; margin: 0; padding: 0 16px; border: 1px solid var(--pa-line); border-radius: 12px; background: var(--pa-ghost); font: 600 15px var(--pa-font); color: var(--pa-ink); font-variant-numeric: tabular-nums; }
body.hud-watch .gl-vote-clock::before { content: '\23F1'; font-size: 15px; }
/* The clock carries the pressure quietly: a line going round it, the way the
   cards answer a pointer, running green while there is time, amber for the
   last third and red for the last ten seconds. hover-ring.css owns the
   angle and the keyframes; this only says where and in what colour. */
body.hud-watch .gl-vote-clock { position: relative; transition: color 200ms, border-color 200ms, background 200ms; }
body.hud-watch .gl-vote:not(.is-closed) .gl-vote-clock::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; pointer-events: none;
  background: conic-gradient(from var(--ring-angle),
    rgba(var(--ring-rgb, 34, 197, 94), 0) 0 38%, rgba(var(--ring-rgb, 34, 197, 94), 0.5) 62%,
    rgba(var(--ring-rgb, 34, 197, 94), 0.9) 82%, rgb(var(--ring-rgb, 34, 197, 94)) 93%,
    rgba(var(--ring-rgb, 34, 197, 94), 0) 99%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: ring-spin 2.6s linear infinite;
}
body.hud-watch .gl-vote-clock.is-soon { --ring-rgb: 245, 158, 11; color: #f59e0b; border-color: rgba(245, 158, 11, 0.45); }
body.hud-watch .gl-vote-clock.is-late { --ring-rgb: 239, 68, 68; color: var(--pa-red); border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.10); }
/* once it says Closed it is not a stopwatch any more */
body.hud-watch .gl-vote.is-closed .gl-vote-clock { color: var(--pa-muted); }
body.hud-watch .gl-vote.is-closed .gl-vote-clock::before { display: none; }

/* ---------- the tools pill ---------- */
/* It sat on the bottom edge, where the controls bar comes up under a hover and
   shoved it aside every time. It hangs under the right-hand column instead —
   the open panel, or the folded Play along pill, whichever is on screen —
   through the anchor the two share, and nothing the picture does moves it
   again. Engines without anchor positioning get the ratio below, which is
   about where a panel of the usual height ends. */
body.hud-watch .hud-utilities {
  position: absolute !important; z-index: 26; right: 20px !important; top: 66% !important; bottom: auto !important; left: auto !important;
  display: flex !important; align-items: center; gap: 4px !important; height: 44px !important; min-height: 0 !important;
  padding: 0 4px !important; margin: 0 !important; border: 1px solid var(--pa-line) !important; border-radius: 999px !important;
  background: var(--pa-surface) !important; box-shadow: var(--pa-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.hud-watch .hud-utilities::before, body.hud-watch .hud-utilities::after { display: none !important; }
/* Every item of the pill, but not glass's emote wheel: it is appended here as
   a child too, and it is an anchor for the arc, not a seventh button. */
body.hud-watch .hud-utilities > *:not(.gl-wheel) {
  position: relative; width: 36px !important; min-width: 0 !important; max-width: none !important; height: 36px !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important; display: grid !important; place-items: center;
  /* place-items centres the mark in its track; the emote's track is 20px
     in a 36px button and something upstream starts it, which left that one
     glyph 8px left of the two beside it. place-content centres the track. */
  place-content: center !important; flex-direction: row !important; gap: 0 !important;
  border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--pa-ink) !important; cursor: pointer; transform: none !important;
}
body.hud-watch .hud-utilities > *:not(.gl-wheel):hover { background: var(--pa-ghost-hover) !important; color: #fff !important; }
body.hud-watch .hud-utilities > *:not(.gl-wheel) > span:not(.hud-dock-icon):not(.gl-emoji):not(.pa-info) { display: none !important; }
body.hud-watch .hud-utilities .hud-dock-icon { width: 20px !important; height: 20px !important; display: grid !important; place-items: center; filter: none; }
body.hud-watch .hud-utilities .hud-dock-icon::after, body.hud-watch .hud-utilities .hud-dock-action::after { display: none !important; }
/* glass.css gives an emoji in a dock icon a 34px box, which in this pill sits
   7px below the line the two drawn marks share. */
body.hud-watch .hud-utilities .gl-emoji { display: grid !important; place-items: center; width: 20px !important; height: 20px !important; font-size: 18px !important; line-height: 1; transform: none !important; }
/* live-hud.css paints every icon in the utilities in the link colour. In
   this pill they take the row's own ink instead, and its hover and pressed
   colours with it — a purple eye on a dark surface over a dark picture was
   hard to find, and in focus mode it is the only thing left to find. */
body.hud-watch .hud-utilities svg, body.hud-watch .hud-utilities img { width: 20px !important; height: 20px !important; padding: 0 !important; color: inherit !important; transform: none !important; filter: none !important; }
body.hud-watch .hud-utilities .hud-dock-icon img { width: 22px !important; height: 22px !important; }
/* glass.css hides every span in a utilities item with !important, so the Guide's
   glyph needs the extra class to win. */
body.hud-watch .hud-utilities .pa-info { display: grid !important; place-items: center; width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 50%; font: italic 700 12px/1 Georgia, 'Times New Roman', serif; }
body.hud-watch .hud-utilities .hud-focus[aria-pressed=true] { color: var(--pa-green) !important; }
body.hud-watch .hud-utilities #room-chat[aria-expanded=true] { color: var(--pa-green) !important; }
body.hud-watch .hud-utilities .gl-thumb { display: none !important; }
/* The emotes as a panel beside the pill rather than an arc over it. glass.js
   draws them on a 128px arc hung off a zero-sized point, which worked when the
   pill sat in the corner of the picture and throws them across the panel now
   that it hangs under it. The arc's own placement — an inline left on the
   wheel, an --x and a --y on every emote — is answered here rather than in
   glass.js, which still draws the dock's arc on every other page. */
body.hud-watch .hud-utilities .gl-wheel {
  /* One row, bottom-aligned with the pill: two rows stood 110px tall and ran
     up into the Play along panel, which clears the pill by 12px. */
  position: absolute; left: auto !important; right: calc(100% + 10px); bottom: 0; top: auto;
  /* glass.css sizes every child of the pill to a 46px circle with !important */
  width: auto !important; height: auto !important; min-height: 0 !important; padding: 8px !important;
  display: grid !important; grid-template-columns: repeat(8, 38px); gap: 6px !important;
  border: 1px solid var(--pa-line); border-radius: 14px; background: var(--pa-surface); box-shadow: var(--pa-shadow);
  pointer-events: auto; opacity: 0; transform: translateX(6px);
  transition: opacity 160ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.hud-watch .hud-utilities .gl-wheel.is-on { opacity: 1; transform: none; }
body.hud-watch .hud-utilities .gl-wheel-e {
  position: static !important; width: 38px !important; min-width: 0 !important; height: 38px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--pa-line) !important; border-radius: 10px !important; background: var(--pa-ghost) !important;
  box-shadow: none !important; font-size: 20px !important; opacity: 1 !important; transform: none !important;
  transition: background 120ms, border-color 120ms, transform 160ms;
}
body.hud-watch .hud-utilities .gl-wheel-e:hover { background: var(--pa-green-soft) !important; border-color: var(--pa-green) !important; }
body.hud-watch .hud-utilities .gl-wheel.is-on .gl-wheel-e { transform: none !important; }
body.hud-watch .hud-utilities .gl-wheel.is-on .gl-wheel-e.is-tap { transform: scale(1.14) !important; }
/* the combo count over the panel, not 150px above a point in mid-air */
body.hud-watch .hud-utilities .gl-wheel-combo { left: 50%; top: -10px; transform: translate(-50%, -100%); background: var(--pa-green); color: #fff; box-shadow: none; font: 700 13px var(--pa-font); }
@supports (anchor-name: --a) {
  body.hud-watch.ix-watch .ix-room-panel, body.hud-watch .play-along-pill { anchor-name: --pa-column; }
  /* Only ever one of the two is on screen, and a hidden element is not an
     acceptable anchor, so this reads whichever one that is. */
  body.hud-watch .hud-utilities { position-anchor: --pa-column; top: calc(anchor(bottom, 66%) + 12px) !important; }
}

/* ---------- the countdown ---------- */
/* The room's clock, over the top of the picture. Its ring ran amber whatever
   was left; it runs the room's own three colours now — green while there is
   time, amber for the last third, red for the last ten seconds — and the
   frame under it is the Play along card like everything else here. */
body.hud-watch .gl-top-timer { --c: var(--pa-green); width: 128px; min-width: 128px; max-width: 128px; height: 40px !important; border-radius: 12px !important; background: var(--pa-surface) !important; border: 1px solid var(--pa-line); box-shadow: var(--pa-shadow) !important; font-family: var(--pa-font); }
body.hud-watch .gl-top-timer.is-compact { width: 76px; min-width: 76px; max-width: 76px; }
body.hud-watch .gl-top-timer .gl-timer-copy { padding: 0 10px; gap: 1px; }
body.hud-watch .gl-top-timer.is-soon { --c: #f59e0b; }
body.hud-watch .gl-top-timer.is-late { --c: var(--pa-red); }
body.hud-watch .gl-top-timer .gl-timer-copy small { font: 600 8px var(--pa-font); letter-spacing: 0.04em; color: var(--pa-muted); }
body.hud-watch .gl-top-timer .gl-timer-copy b { font: 700 16px var(--pa-font); color: var(--pa-ink); }
/* The eye clears the overlay; the clock is overlay. It lives on the body
   rather than inside the experience, so it is reached from outside it. */
body.hud-watch:has(.hud-experience.is-focused) .gl-top-timer { display: none !important; }

/* ---------- the store and the sign in ---------- */
/* Both ride in the same shell, a frame over the picture with a head on top of
   it. On this page the shell is the Play along card: same surface, same line,
   same radius, same shadow. What each one puts inside the frame is dressed to
   match by store-embed.css and auth.css, which are the only sheets that reach
   in there. */
body.hud-watch .gl-store {
  /* wider than the room's own panel: this one carries rows of prices and
     names, and at 360 they were being cut. */
  width: min(420px, calc(100vw - 24px)) !important;
  border: 1px solid var(--pa-line) !important; border-radius: 16px !important;
  background: var(--pa-surface) !important; box-shadow: var(--pa-shadow) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  overflow: hidden; font-family: var(--pa-font); color: var(--pa-ink);
}
/* the panel's own head: a title, a close, and no rule under them */
body.hud-watch .gl-store-head { padding: 14px 12px 10px 16px !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body.hud-watch .gl-store-title { margin-right: auto; font: 600 17px var(--pa-font) !important; letter-spacing: normal !important; text-transform: none !important; color: var(--pa-ink) !important; }
body.hud-watch :is(.gl-store-x, .gl-store-back) { width: 32px !important; height: 32px !important; padding: 0; border: 0 !important; border-radius: 8px !important; background: var(--pa-ghost) !important; color: var(--pa-muted) !important; font: 600 13px var(--pa-font) !important; cursor: pointer; display: grid; place-items: center; transition: background 140ms, color 140ms, transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1); }
body.hud-watch :is(.gl-store-x, .gl-store-back):hover { transform: scale(1.08); }
body.hud-watch .gl-store-back { font-size: 20px !important; line-height: 1; margin-right: 10px; }
body.hud-watch .gl-store-back[hidden] { display: none !important; }
body.hud-watch :is(.gl-store-x, .gl-store-back):hover { background: var(--pa-ghost-hover) !important; color: var(--pa-ink) !important; }
body.hud-watch .gl-store-frame { background: transparent !important; border: 0 !important; }
/* glass.css takes the room panel and the side sheet down while the store is
   open; the folded pill and the tools row are the same room and were being
   drawn over the panel. */
body.hud-watch.gl-store-on :is(.play-along-pill, .hud-utilities) { opacity: 0 !important; pointer-events: none !important; }
/* The sign in has one card in it and nothing else, so the panel is that card:
   it takes the height its content asks for instead of standing 600px tall
   around a 460px form. */
body.hud-watch .gl-store.is-signin { height: auto !important; max-height: calc(100vh - 48px); }
body.hud-watch .gl-store.is-signin, body.hud-watch .gl-store.is-signin .gl-store-frame { background: var(--pa-surface) !important; }
/* The form is 360 tall at its shortest step and grows a little at the others;
   the frame scrolls rather than the panel changing size under the pointer. */
body.hud-watch .gl-store.is-signin .gl-store-frame { height: 420px; flex: none; }

/* ---------- the room guide ---------- */
/* The walkthrough over the picture: one card and a ring round whatever the
   step is about. Both were drawn in the old purple; on this page they speak
   the room's green and wear the Play along card. */
body.hud-watch .room-guide-spotlight { border: 2px solid var(--pa-green) !important; border-radius: 14px !important; box-shadow: 0 0 0 150vmax rgba(0, 0, 0, 0.72), 0 0 26px rgba(34, 197, 94, 0.45) !important; }
body.hud-watch .room-guide-card {
  padding: 18px !important; border: 1px solid var(--pa-line) !important; border-radius: 16px !important;
  background: var(--pa-surface) !important; box-shadow: var(--pa-shadow) !important; font-family: var(--pa-font);
}
body.hud-watch .room-guide-head { margin-bottom: 12px !important; }
body.hud-watch .room-guide-head span { font: 600 12px var(--pa-font) !important; letter-spacing: normal !important; text-transform: none !important; color: var(--pa-green) !important; }
body.hud-watch .room-guide-close { width: 32px !important; height: 32px !important; border: 0 !important; border-radius: 8px !important; background: var(--pa-ghost) !important; color: var(--pa-muted) !important; }
body.hud-watch .room-guide-close:hover { background: var(--pa-ghost-hover) !important; color: var(--pa-ink) !important; }
body.hud-watch .room-guide-card h2 { margin: 0 0 14px !important; font: 600 20px/1.25 var(--pa-font) !important; letter-spacing: -0.01em !important; color: var(--pa-ink) !important; }
body.hud-watch .room-guide-points { gap: 12px !important; }
body.hud-watch .room-guide-points b { font: 600 14px var(--pa-font) !important; color: var(--pa-ink) !important; }
body.hud-watch .room-guide-points span { font: 500 13px/1.6 var(--pa-font) !important; color: var(--pa-muted) !important; }
body.hud-watch .room-guide-progress { margin: 18px 0 14px !important; padding-top: 14px !important; border-top: 1px solid var(--pa-line) !important; }
/* The step you are on is a bigger dot, not a bar: room-guide.css stretches it
   to 20px, which reads as a line that wandered into a row of dots. */
body.hud-watch .room-guide-dots { gap: 6px !important; }
body.hud-watch .room-guide-dots span { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--pa-ghost-hover) !important; }
body.hud-watch .room-guide-dots .current { width: 9px !important; height: 9px !important; }
body.hud-watch .room-guide-dots .current { background: var(--pa-green) !important; }
body.hud-watch .room-guide-dots .complete { background: rgba(34, 197, 94, 0.45) !important; }
body.hud-watch #room-guide-count { font: 500 12px var(--pa-font) !important; color: var(--pa-muted) !important; }
body.hud-watch .room-guide-actions button { min-height: 40px !important; padding: 0 14px !important; border: 1px solid var(--pa-line) !important; border-radius: 10px !important; background: var(--pa-ghost) !important; font: 600 13px var(--pa-font) !important; color: var(--pa-ink) !important; }
body.hud-watch .room-guide-actions button:not(:disabled):hover { background: var(--pa-ghost-hover) !important; filter: none !important; }
body.hud-watch .room-guide-actions .room-guide-skip { border: 0 !important; background: none !important; color: var(--pa-muted) !important; font-weight: 500 !important; }
body.hud-watch .room-guide-actions .room-guide-next { min-width: 78px !important; border: 0 !important; background: var(--pa-green) !important; color: #fff !important; }

/* ---------- the test bar ---------- */
/* Admin controls, in the band the header leaves empty between the viewer on
   the left and the wallet on the right. The tools pill's surface, spoken more
   quietly: this is scaffolding for testing, not part of the room. */
body.hud-watch .pv-bar {
  /* under the countdown, not on it: that band belongs to the round's clock. */
  position: absolute; z-index: 26; top: 84px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 4px;
  border: 1px solid var(--pa-line); border-radius: 999px; background: var(--pa-surface);
  box-shadow: var(--pa-shadow); font-family: var(--pa-font);
}
/* live.css letter-spaces and bolds every button on this page. */
body.hud-watch .pv-bar button {
  height: 28px; min-height: 0; padding: 0 12px; border: 0; border-radius: 999px;
  background: none; color: var(--pa-muted); white-space: nowrap; cursor: pointer;
  font: 600 12px var(--pa-font) !important; letter-spacing: normal !important; text-transform: none !important;
}
body.hud-watch .pv-bar button:hover:not(:disabled) { background: var(--pa-ghost-hover); color: var(--pa-ink); }
body.hud-watch .pv-bar button:disabled { opacity: 0.35; cursor: default; }
/* Both, and in this order: :hover:not(:disabled) outranks the bare attribute,
   so a toggle went grey again under the pointer that had just pressed it. */
body.hud-watch .pv-bar button[aria-pressed=true],
body.hud-watch .pv-bar button[aria-pressed=true]:hover { background: var(--pa-green-soft); color: var(--pa-green); }
body.hud-watch .pv-sep { width: 1px; height: 16px; background: var(--pa-line); }

/* focus mode: the eye stays, everything else goes */
body.hud-watch .hud-experience.is-focused .hud-utilities > :not(.hud-focus) { display: none !important; }
/* The pill hangs off the right-hand column, and focus mode takes that column
   away. Keeping its box and hiding only its paint does not help: an engine
   that positions against an anchor hides what is anchored to one it cannot
   see, and the eye went with it. So in focus mode the pill stops anchoring
   and sits where the folded pill's own geometry would have put it — centre,
   plus half its height, plus the gap — which is where it was a moment ago. */
body.hud-watch .hud-experience.is-focused .hud-utilities {
  position-anchor: none !important; top: calc(50% + 34px) !important; bottom: auto !important;
}
/* With the room cleared the eye is the only control left, over a moving
   picture, so it wears a ring: something to aim at to bring the room back. */
body.hud-watch .hud-experience.is-focused .hud-utilities .hud-focus {
  border: 1px solid var(--pa-green) !important; border-radius: 50% !important;
  background: var(--pa-green-soft) !important; color: var(--pa-green) !important;
}
body.hud-watch:has(.hud-experience.is-focused) .gl-vote { display: none !important; }
body.hud-watch .hud-experience.is-focused .pv-bar { display: none !important; }

/* These selectors outrank glass.css's own reduced-motion rule, so repeat it. */
@media (prefers-reduced-motion: reduce) {
  body.hud-watch .interaction-arena .ia-option::before { animation: none; opacity: 0; }
  body.hud-watch .gl-vote:not(.is-closed) .gl-vote-clock::before { animation: none; }
  body.hud-watch .gl-vote, body.hud-watch .gl-vote-opt .fill { transition: none; }
  body.hud-watch .gl-vote-opt.is-mine::before { animation: none; opacity: 0; }
  body.hud-watch :is(.hud-viewer, .hud-wallet, .play-along-pill) { transition: none; }
  body.hud-watch .hud-add { transition: background 140ms, color 140ms; }
  body.hud-watch :is(.hud-add, .gl-store-x, .gl-store-back):hover { transform: none; }
  body.hud-watch :is(.hud-viewer, .hud-wallet):hover { transform: none; }
  body.hud-watch .play-along-pill:hover { transform: translateY(-50%); }
}

@media (max-width: 1100px) {
  body.hud-watch .ix-watch-layout { --room-drawer-width: 360px; }
  body.hud-watch .gl-vote { min-height: 84px; gap: 12px; padding: 8px 12px 8px 14px; width: calc(100% - 40px); }
  body.hud-watch .ix-watch-layout.hud-panel-open .gl-vote { left: 50%; width: max(320px, calc(100% - 712px)); }
  body.hud-watch .gl-vote-k { width: auto; }
  body.hud-watch .gl-vote-opt { min-height: 56px; padding: 7px 10px 9px; font-size: 13px; }
  body.hud-watch .pv-bar button { padding: 0 9px; font-size: 11px !important; }
}

/* In the narrow layout the video is only 16:9. Room controls need a viewport-sized
   sheet so the prediction slider and confirmation remain reachable, as chat does. */
@media (max-width: 900px) {
  body.hud-watch .ix-watch-layout { --room-drawer-width: min(380px, calc(100vw - 40px)); }
  body.hud-watch.ix-watch .ix-room-panel {
    position: fixed !important; top: auto !important; bottom: 72px !important;
    left: auto !important; right: 0 !important;
    height: min(580px, calc(100svh - var(--bar) - 88px)); max-height: calc(100svh - var(--bar) - 88px) !important;
    transform: none; margin: 0 !important; z-index: 60;
  }
  body.hud-watch .room-drawer-handle {
    position: fixed; z-index: 61; top: auto; transform: none;
    bottom: calc(72px + min(580px, 100svh - var(--bar) - 88px) / 2 - 32px);
  }
  body.hud-watch .ix-watch-layout:has(.ix-room-panel:not([hidden])) .hud-utilities {
    position: fixed !important; position-anchor: none; top: auto !important;
    bottom: 16px !important; right: 12px !important; z-index: 41;
  }
}
@media (max-width: 400px) {
  body.hud-watch .interaction-arena .ia-tabs button { padding: 0 6px !important; }
  body.hud-watch .interaction-arena .ia-tabs button img,
  body.hud-watch .interaction-arena .ia-tabs button .gl-emoji { display: none !important; }
}