/* Preview-only framing. The live interaction overlay keeps its shared skin. */
/* One shared 48px lift keeps the lower overlays in step with playback controls. */
body.live-preview-page .ix-watch-layout { --lp-cam-width: clamp(176px, 18vw, 260px); --lp-controls-gap: 0px; --lp-vote-space: 136px; overflow-anchor: none; }
body.live-preview-page .ix-watch-layout.bar-on { --lp-controls-gap: 48px; }
body.live-preview-page :is(.lp-streamer-cam, .gl-vote, .play-along-pill, .hud-utilities) {
  transition: bottom 240ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease, transform 240ms cubic-bezier(.2,.8,.2,1), width 240ms ease;
}
body.live-preview-page.ix-watch #video { display: block; width: 100%; height: 100%; object-fit: cover !important; }
.live-preview-page .lp-streamer-cam { position: absolute; z-index: 23; left: 20px; bottom: calc(var(--lp-controls-gap) + 12px); width: var(--lp-cam-width); aspect-ratio: 16 / 10; margin: 0; overflow: hidden; border: 1px solid #ffffff40; border-radius: 12px; background: #141416; box-shadow: 0 8px 28px #0007; }
.live-preview-page .lp-streamer-cam figcaption { position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 6px; padding: 16px 10px 8px; background: linear-gradient(transparent,#000b); color: #fff; font-size: 10px; font-weight: 600; }
.live-preview-page .lp-streamer-cam figcaption i { width: 5px; height: 5px; border-radius: 50%; background: #75d594; }
.live-preview-page .lp-streamer-cam figcaption span { margin-left: auto; color: #c0c0c5; font-size: 9px; }
.live-preview-page [hidden] { display: none !important; }
.live-preview-page .lp-badge { position: absolute; z-index: 26; top: 22px; left: 22px; display: flex; flex-direction: column; gap: 7px; padding: 14px 17px; border: 1px solid #ffffff21; border-radius: 14px; background: #111113e8; color: #f2f2f4; font-family: 'Plus Jakarta Sans',sans-serif; }
.live-preview-page .lp-badge > span { font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.live-preview-page .lp-badge small { color: #aaaab3; font-size: 11px; }
.live-preview-page .lp-badge a { font-size: 11px; color: #e2e2e6; text-decoration: none; }
.live-preview-page .lp-game-picker { display: flex; align-items: center; gap: 10px; }
.live-preview-page .lp-game-picker select { min-width: 116px; min-height: 30px; padding: 4px 22px 4px 0; border: 0; border-radius: 4px; background: transparent; color: #f2f2f4; font: 600 13px 'Plus Jakarta Sans',sans-serif; cursor: pointer; }
.live-preview-page .lp-game-picker option { background: #17181b; color: #fff; }
.live-preview-page .lp-game-picker select:focus-visible { outline: 2px solid #9bd3ae; outline-offset: 3px; }
.live-preview-page .lp-game-picker a { display: grid; place-items: center; min-width: 28px; min-height: 28px; font-size: 16px; }
.live-preview-page .ia-preview-note [data-ia="preview"],
.live-preview-page .ia-topline [data-ia="preview"] { display: none; }
.live-preview-page .lp-chat-note { margin: 0; padding: 10px 14px; color: #aaaab3; font-size: 11px; border-bottom: 1px solid #ffffff10; }
body.live-preview-page .hud-channel-card { display: none !important; }
.live-preview-page #player-bar .bar-sep { display: none; }
body.live-preview-page .gl-top-timer { top: calc(var(--bar) + 34px); left: calc(50% + var(--rail) / 2); }
body.live-preview-page.kk-collapsed .gl-top-timer { left: calc(50% + var(--rail-min) / 2); }
body.live-preview-page .gl-vote,
body.live-preview-page .ix-watch-layout.hud-panel-open .gl-vote { bottom: calc(var(--lp-controls-gap) + 12px); left: 50%; width: min(420px,calc(100% - 40px)); transform: translateX(-50%); }
body.live-preview-page .gl-vote.is-on { transform: translateX(-50%); }
/* Play along overlays the picture. None of the existing frames reflow for it. */
body.live-preview-page.ix-watch .ix-room-panel { background: #101214 !important; }
@media (min-width: 901px) {
  body.live-preview-page .hud-utilities { position-anchor: none; top: auto !important; bottom: calc(var(--lp-controls-gap) + 12px) !important; z-index: 24; }
}
/* The ballot owns the bottom centre. On narrow game areas the camera moves
   above that row instead of pushing the interaction bar up the screen. */
@media (min-width: 901px) and (max-width: 1250px) {
  body.live-preview-page .lp-streamer-cam { bottom: calc(var(--lp-controls-gap) + var(--lp-vote-space) + 12px); }
}
@media (max-width: 1100px) {
  .live-preview-page .lp-badge { top: 14px; left: 14px; padding: 11px; }
  .live-preview-page .lp-badge small { display: none; }
}
/* Stack the ballot above the bottom tools when the two cannot fit side by side. */
@media (min-width: 901px) and (max-width: 1100px) {
  body.live-preview-page .gl-vote,
  body.live-preview-page .ix-watch-layout.hud-panel-open .gl-vote { bottom: calc(var(--lp-controls-gap) + 64px); }
  body.live-preview-page .lp-streamer-cam { bottom: calc(var(--lp-controls-gap) + var(--lp-vote-space) + 64px); }
}
@media (max-width: 600px) {
  .live-preview-page .lp-badge { top: 10px; left: 10px; padding: 9px 11px; }
  .live-preview-page .lp-badge > span { font-size: 8px; }
  .live-preview-page .lp-badge a { font-size: 10px; }
}
@media (max-width: 900px) {
  /* Let the open phone sheet sit above the wallet and floating timer, rather
     than letting those background controls cover its tabs and close button. */
  body.live-preview-page :is(.hud-experience, .ix-watch-layout) { isolation: auto; }
  body.live-preview-page .ix-watch-layout { --lp-cam-width: clamp(120px, 28vw, 190px); }
  body.live-preview-page .ix-watch-layout .hud-utilities,
  body.live-preview-page .ix-watch-layout:has(.ix-room-panel:not([hidden])) .hud-utilities { position: absolute !important; position-anchor: none; top: auto !important; right: 12px !important; bottom: calc(var(--lp-controls-gap) + 12px) !important; }
  .live-preview-page .lp-streamer-cam { left: 12px; bottom: calc(var(--lp-controls-gap) + var(--lp-vote-space) + 64px); border-radius: 9px; }
  .live-preview-page .lp-streamer-cam figcaption { font-size: 9px; padding: 12px 8px 6px; }
  .live-preview-page .lp-streamer-cam figcaption span { display: none; }
  .live-preview-page .lp-badge { max-width: calc(100% - 148px); }
  .live-preview-page .lp-game-picker { gap: 4px; }
  .live-preview-page .lp-game-picker select { min-width: 90px; font-size: 11px; }
  body.live-preview-page .gl-top-timer,
  body.live-preview-page.kk-collapsed .gl-top-timer { display: block; top: calc(var(--bar) + 102px); left: 68px; width: 96px; min-width: 96px; max-width: 96px; height: 36px !important; }
  body.live-preview-page .ar-top.hud-header { position: absolute; inset: 12px 12px auto auto; padding: 0; }
  body.live-preview-page .hud-wallet { min-height: 62px; padding: 10px 12px; max-width: 170px; gap: 8px; }
  body.live-preview-page .hud-wallet .hud-kicker { font-size: 11px !important; }
  body.live-preview-page .hud-wallet #demo-balance { font-size: 14px !important; }
  body.live-preview-page .hud-wallet .hud-add { display: none; }
  body.live-preview-page .ix-watch-layout { display: block; min-height: 0; height: calc(100svh - var(--bar) - 26px); }
  body.live-preview-page.ix-watch .player-frame { position: absolute; inset: 0; width: 100%; height: 100% !important; aspect-ratio: auto; }
  body.live-preview-page .gl-vote,
  body.live-preview-page .ix-watch-layout.hud-panel-open .gl-vote { left: 50%; bottom: calc(var(--lp-controls-gap) + 64px); width: min(340px,calc(100% - 24px)); }
  body.live-preview-page.ix-watch .ix-room-panel {
    /* The open sheet has one stable viewport budget. Playback controls and
       tab changes must not lift it or shrink the form inside it. */
    position: fixed !important; bottom: 72px !important;
    height: min(580px, calc(100svh - var(--bar) - 88px));
    max-height: calc(100svh - var(--bar) - 88px) !important;
  }
  body.live-preview-page .lp-badge { max-width: calc(100% - 168px); }
}
html:fullscreen body.live-preview-page .gl-top-timer { top: 34px; left: 50%; }
@media (prefers-reduced-motion: reduce) {
  body.live-preview-page :is(.lp-streamer-cam, .gl-vote, .play-along-pill, .hud-utilities) { transition: none; }
}