/* Shared live-room motion: hidden state remains owned by room-layout.js. */
body.hud-watch { --room-ease: cubic-bezier(.22,1,.36,1); --room-duration: 360ms; }
body.hud-watch.ix-watch .ix-room-panel {
  animation: none !important;
  opacity: 1; translate: 0 0; scale: 1;
  transform-origin: right center;
  transition: opacity 220ms ease, translate var(--room-duration) var(--room-ease),
    scale var(--room-duration) var(--room-ease), bottom var(--room-duration) var(--room-ease),
    display var(--room-duration) allow-discrete;
}
body.hud-watch.ix-watch .ix-room-panel[hidden] {
  opacity: 0; translate: 100% 0; pointer-events: none;
}
@starting-style {
  body.hud-watch.ix-watch .ix-room-panel:not([hidden]) { opacity: 0; translate: 100% 0; }
}
body.hud-watch .room-drawer-handle { transition: right var(--room-duration) var(--room-ease), background 180ms ease; }
body.hud-watch .room-drawer-handle svg { transition: transform var(--room-duration) var(--room-ease); }

/* Fade the folded trigger back in after the panel begins its exit. */
body.hud-watch .play-along-pill {
  opacity: 1;
  transition: opacity 160ms ease 100ms, bottom var(--room-duration) var(--room-ease),
    transform var(--room-duration) var(--room-ease), display 160ms allow-discrete;
}
body.hud-watch .play-along-pill[hidden] { opacity: 0; pointer-events: none; transition-delay: 0s; }
@starting-style { body.hud-watch .play-along-pill:not([hidden]) { opacity: 0; } }

/* One selection highlight moves beneath Play, Chat and Support. */
body.hud-watch .ix-room-tabs { position: relative; --room-tabs: 3; --room-tab-index: 0; }
body.live-preview-page .ix-room-tabs { --room-tabs: 2; }
body.hud-watch .ix-room-tabs:has([data-mode=chat][aria-selected=true]) { --room-tab-index: 1; }
body.hud-watch .ix-room-tabs:has([data-mode=support][aria-selected=true]) { --room-tab-index: 2; }
body.hud-watch .ix-room-tabs::before {
  content: ''; position: absolute; inset: 4px auto 4px 4px;
  width: calc((100% - 8px - (var(--room-tabs) - 1) * 4px) / var(--room-tabs));
  border-radius: 999px; background: var(--pa-selected); pointer-events: none;
  transform: translateX(calc(var(--room-tab-index) * (100% + 4px)));
  transition: transform 300ms var(--room-ease), width 300ms var(--room-ease);
}
body.hud-watch .ix-room-tabs button { flex: 1 1 0; position: relative; z-index: 1; border-radius: 999px; }
body.hud-watch .ix-room-tabs button[aria-selected=true] { background: transparent !important; }
body.hud-watch .ix-room-panel { --room-view-shift: 14px; }
body.hud-watch .ix-room-panel[data-view-direction=backward] { --room-view-shift: -14px; }
body.hud-watch .ix-room-panel > [role=tabpanel] {
  opacity: 1; translate: 0 0;
  transition: opacity 200ms ease, translate 320ms var(--room-ease), display 320ms allow-discrete;
}
body.hud-watch .ix-room-panel > [role=tabpanel][hidden] {
  opacity: 0; translate: calc(-1 * var(--room-view-shift)) 0; pointer-events: none;
}
@starting-style {
  body.hud-watch .ix-room-panel > [role=tabpanel]:not([hidden]) { opacity: 0; translate: var(--room-view-shift) 0; }
}

/* Live tally updates must not replay a whole card entrance. */
body.hud-watch .interaction-arena .ia-content > *,
body.hud-watch .interaction-arena .ia-options > .gl-in { animation: none !important; }
body.hud-watch .interaction-arena .ia-tabs button {
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease,
    transform 200ms var(--room-ease) !important;
}

/* Only playback controls lift the bottom overlays; the drawer never moves them. */
body.live-preview-page .gl-vote {
  transition: left var(--room-duration) var(--room-ease), bottom var(--room-duration) var(--room-ease),
    width var(--room-duration) var(--room-ease), opacity 180ms ease,
    transform var(--room-duration) var(--room-ease), display 180ms allow-discrete;
}
body.live-preview-page .lp-streamer-cam { transition: bottom var(--room-duration) var(--room-ease); }
body.hud-watch .gl-store {
  visibility: hidden; opacity: 0; transform: translateX(20px);
  transition: opacity 220ms ease, transform var(--room-duration) var(--room-ease), visibility 0s linear var(--room-duration);
}
body.hud-watch .gl-store.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
body.hud-watch .gl-store.is-coins { top: calc(var(--bar) + 16px); bottom: auto; height: min(360px, calc(100dvh - var(--bar) - 32px)); width: min(320px, calc(100vw - 24px)) !important; background: #101113 !important; }
body.hud-watch .gl-store.is-coins .gl-store-head { flex: none; padding: 8px 10px 6px 14px !important; }
body.hud-watch .gl-store.is-coins .gl-store-x { width: 36px !important; height: 36px !important; }
body.hud-watch .gl-store-frame { min-height: 0; opacity: 0; transition: opacity 160ms ease; }
body.hud-watch .gl-store.is-loaded .gl-store-frame { opacity: 1; }
.gl-store-loading { position: absolute; inset: 70px 16px auto; display: flex; align-items: center; gap: 10px; color: #999da6; font-size: 12px; }
.gl-store-loading > span { width: 14px; height: 14px; border: 2px solid #ffffff20; border-top-color: #d6bb75; border-radius: 50%; animation: coin-loading 800ms linear infinite; }
.gl-store.is-loaded .gl-store-loading, .gl-store-loading[hidden] { display: none; }
@keyframes coin-loading { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  body.live-preview-page .hud-wallet .hud-add { display: grid; width: 40px !important; height: 40px !important; flex: none; }
  body.hud-watch .gl-store.is-coins { top: auto; bottom: 12px; max-height: calc(100dvh - var(--bar) - 24px); transform: translateY(20px); }
  body.hud-watch .gl-store.is-coins.is-on { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.hud-watch.ix-watch .ix-room-panel,
  body.hud-watch .room-drawer-handle,
  body.hud-watch .room-drawer-handle svg,
  body.hud-watch .play-along-pill,
  body.hud-watch .ix-room-tabs::before,
  body.hud-watch .interaction-arena .ia-tabs button,
  body.hud-watch :is(.gl-store, .gl-store-frame),
  body.live-preview-page :is(.lp-game-field, .gl-vote, .lp-streamer-cam) { transition: none !important; }
  body.hud-watch .ix-room-panel > [role=tabpanel] { transition: none !important; }
  .gl-store-loading > span { animation: none; }
}