/* The live picture is the stage; controls sit in a small, consistent HUD. */
body.hud-watch { display:block; padding:0; background:var(--ui-bg); }
.hud-watch .hud-experience { position:relative; isolation:isolate; margin:12px; min-height:calc(100svh - 24px); overflow:hidden; border:1px solid #ffffff1f; border-radius:30px; background:#08080b; box-shadow:0 20px 70px #0005; }
body.hud-watch.ix-watch .shell { padding:0!important; margin:0; width:100%; max-width:none; background:transparent; }
.hud-watch .shell-body { min-height:0; }
.hud-watch .ix-watch-layout { display:block; position:relative; height:calc(100svh - 26px); min-height:640px; isolation:isolate; }
body.hud-watch.ix-watch .player-frame { position:absolute; inset:0; height:100%!important; width:100%; aspect-ratio:auto; border:0; border-radius:0!important; background:radial-gradient(ellipse at 50% 38%,#20202c,#08080b 75%); }
body.hud-watch.ix-watch .player-frame video { object-fit:contain!important; }
body.hud-watch.ix-watch .player-frame::after { display:block; background:linear-gradient(180deg,#0006,transparent 28%,transparent 60%,#0009); }
/* Fullscreen is the document's, so that everything the page hangs off the
   body is still drawn and still answers: the panels, the countdown, the
   toasts. The experience takes the screen and the rest of the page waits
   below, out of the way and out of reach. */
html:fullscreen { overflow:hidden; }
.hud-watch .hud-experience:fullscreen,
html:fullscreen .hud-watch .hud-experience { margin:0; width:100%; height:100svh; border:0; border-radius:0; overflow:hidden; }
.hud-watch .hud-experience:fullscreen .ix-watch-layout,
html:fullscreen .hud-watch .ix-watch-layout { height:100svh; }
.hud-watch .hud-experience:fullscreen .vod-strip,
html:fullscreen .hud-watch :is(.vod-strip,.store,.lv-footer) { display:none; }

/* Two corner cards use actual wallet and season data. */
.hud-watch .ar-top.hud-header { position:absolute; inset:22px 26px auto; z-index:30; display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; gap:22px; padding:0; margin:0; min-height:0; border:0; background:transparent; pointer-events:none; }
.hud-wallet,.hud-viewer,.hud-channel-card,.hud-round-cue,.hud-action-dock { border:1px solid #ffffff24; background:linear-gradient(145deg,#28282cd9,#151519d9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:inset 0 1px #ffffff12,0 12px 36px #0003; }
.hud-wallet,.hud-viewer { display:flex; align-items:center; gap:14px; min-height:78px; box-sizing:border-box; padding:12px 16px; border-radius:24px; pointer-events:auto; }
.hud-wallet { max-width:286px; }
.hud-home { display:grid; place-items:center; width:74px; flex:none; padding:8px 0; }
.hud-home img { display:block; width:74px; height:auto; }
.hud-wallet-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
.hud-kicker { color:var(--ui-muted); font-size:11px; letter-spacing:.11em; text-transform:uppercase; font-weight:700; }
.hud-watch .hud-wallet :is(#balance,#demo-balance) { display:flex; align-items:center; gap:7px; border:0; background:none; padding:0; font-size:19px; color:var(--ui-text); font-weight:800; letter-spacing:-.02em; white-space:nowrap; }
.hud-watch .hud-wallet .ar-coin { width:22px; height:22px; flex:none; }
.hud-wallet-copy:has(#balance[hidden]):not(:has(#demo-balance:not([hidden]))) > .hud-kicker { display:flex; align-items:center; gap:6px; }
.hud-wallet-copy:has(#balance[hidden]):not(:has(#demo-balance:not([hidden]))) > .hud-kicker::before { content:''; display:block; width:20px; height:20px; flex:none; background:var(--ui-coin) center / contain no-repeat; }
#hud-wallet-note { font-size:12px; color:var(--ui-muted); line-height:1.4; max-width:130px; }
:is(#balance,#demo-balance):not([hidden]) ~ #hud-wallet-note { display:none; }
.hud-add { display:grid; place-items:center; width:34px; height:34px; flex:none; border:1px solid #ffffff24; border-radius:50%; background:#ffffff0c; color:var(--ui-text); text-decoration:none; font-size:24px; font-weight:400; }
.hud-add:hover { background:var(--ui-accent); }
.hud-viewer { width:390px; }
.hud-viewer-avatar { display:grid; place-items:center; width:48px; height:48px; flex:none; border:1px solid #c3c4ff66; border-radius:17px; background:linear-gradient(135deg,#7477f555,#252532); color:var(--ui-link); font-size:18px; font-weight:800; }
.hud-watch .hud-viewer-avatar svg { width:25px; height:25px; }
.hud-viewer-copy { flex:1; min-width:0; }
.hud-watch #who { display:block; padding:0; border:0; border-radius:0; background:none; text-align:left; font-size:16px; font-weight:800; line-height:1.4; color:var(--ui-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; }
.hud-tier-row { display:flex; align-items:center; gap:8px; min-width:0; margin-top:6px; }
.hud-watch #tier { padding:0; border:0; background:none; font-size:11px; line-height:1.3; color:var(--ui-link); white-space:nowrap; text-decoration:none; }
#hud-progress-label { font-size:11px; line-height:1.4; color:var(--ui-muted); }
#hud-progress { display:block; appearance:none; -webkit-appearance:none; width:100%; height:5px; margin-top:8px; border:0; border-radius:8px; background:#ffffff16; overflow:hidden; }
#hud-progress::-webkit-progress-bar { background:#ffffff16; border-radius:8px; }
#hud-progress::-webkit-progress-value { background:var(--ui-accent); border-radius:8px; }
#hud-progress::-moz-progress-bar { background:var(--ui-accent); border-radius:8px; }

/* A compact channel card occupies the reference's lower-left map position. */
.hud-channel-card { position:absolute; z-index:12; left:26px; bottom:118px; width:290px; padding:16px; border-radius:22px; box-sizing:border-box; }
body.hud-watch.ix-watch .channel-head { display:flex; gap:10px; flex-wrap:nowrap; margin:0; padding:0; border:0; }
.hud-watch .channel-head .avatar { width:42px; height:42px; min-width:42px; border-radius:14px; background:#7477f52b; color:var(--ui-link); border:1px solid #c3c4ff40; font-size:17px; }
.hud-watch .channel-id { flex:1; }
.hud-watch .channel-name b { display:block; max-width:160px; overflow:hidden; text-overflow:ellipsis; font-family:inherit; font-size:15px; line-height:1.5; letter-spacing:0; text-transform:none; }
.hud-watch #ch-followers { font-size:11px; line-height:1.4; }
.hud-watch .btn-follow { justify-content:center; padding:0; width:34px; min-width:34px; height:34px; border:1px solid #ffffff26; border-radius:50%; background:#ffffff08; color:var(--ui-text); }
.hud-watch .btn-follow span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.hud-watch .btn-follow.following { border-color:#c3c4ff66; background:#7477f526; color:var(--ui-link); }
body.hud-watch.ix-watch .title-bar { margin:10px 0 0; padding:0; }
body.hud-watch.ix-watch .title-bar h1 { font-size:13px; line-height:1.55; font-weight:500; letter-spacing:0; color:var(--ui-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hud-watch #stream-source { display:none; }
.hud-channel-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }
.hud-channel-meta .pill { height:auto; min-height:20px; padding:0; border:0; background:none; font-size:10px; color:var(--ui-muted); letter-spacing:0; }
.hud-channel-meta .pill.live { padding:4px 7px; border-radius:6px; color:#fff; background:#c9364d; }
.hud-channel-meta .pill.live svg { width:6px; height:6px; }
.hud-channel-meta #stream-category { margin-top:0; font-size:11px; color:var(--ui-link); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* The room tools. The round cue and the six-tile dock they used to sit beside
   are gone from this page: play-along.css draws the Play along pill and the
   tools pill instead. */
.hud-utilities { position:absolute; z-index:26; right:24px; bottom:24px; display:flex; align-items:center; gap:12px; }
.hud-utilities :is(button,a) { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; width:44px; min-height:60px; padding:0; border:0; background:none; color:var(--ui-muted); font:600 11px/1.2 var(--ui-font); text-decoration:none; cursor:pointer; }
.hud-utilities svg { width:36px; height:36px; padding:6px; box-sizing:border-box; color:var(--ui-link); }
.hud-utilities img { width:36px; height:36px; object-fit:contain; }
.hud-utilities :is(button,a):hover { color:var(--ui-text); }
.hud-utilities .hud-focus[aria-pressed=true] { color:var(--ui-link); }

/* One dismissible panel, shared by play, chat, support and the guide. */
body.hud-watch.ix-watch .ix-room-panel { position:absolute; z-index:25; top:124px; right:26px; bottom:142px; width:370px; max-height:none; border:1px solid #ffffff26!important; border-radius:24px!important; background:linear-gradient(145deg,#242428f2,#151519ed)!important; box-shadow:0 22px 65px #0006; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
body.hud-watch.ix-watch .ix-room-panel[hidden],body.hud-watch.ix-watch .ix-room-panel [role=tabpanel][hidden] { display:none!important; }
.hud-panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 12px 0 20px; flex:none; }
.hud-panel-head button { display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:none; color:var(--ui-muted); cursor:pointer; }
.hud-panel-head button:hover { background:#ffffff0c; color:var(--ui-text); }
.hud-watch .ix-room-tabs { gap:0; padding:0 10px; border-bottom-color:#ffffff16; }
.hud-watch .ix-room-tabs button { font-size:13px; min-height:44px; }
.hud-watch .ix-room-tabs button[aria-selected=true] { border-bottom-color:var(--ui-accent); }
.hud-watch #ix-play-panel { flex:1; }
body.hud-watch.ix-watch #crowd { padding:14px!important; }
body.hud-watch.ix-watch .crowd-dock { padding:0!important; background:none; border:0; border-radius:0; }
body.hud-watch.ix-watch .crowd-table { padding:14px 10px; background:#ffffff05; border:1px solid #ffffff14; border-radius:14px; margin-bottom:16px; }
.hud-watch .pt-head { justify-content:space-between; }
.hud-watch .pt-who { font-family:inherit; font-size:10px; letter-spacing:.07em; min-width:45px; }
.hud-watch .pt-row { justify-content:flex-start; gap:10px; }
.hud-watch .pc { width:37px; height:53px; font-size:13px; border-radius:6px; }
.hud-watch .pt-cards { flex-wrap:wrap; gap:5px; }
.hud-watch .pt-artifacts { gap:8px; flex-wrap:wrap; }
.hud-watch .pt-artifact { flex:1; min-width:120px; font-family:inherit; min-height:48px; }
.hud-watch .crowd-head h3 { font-size:14px; }
.hud-watch .poll-top { flex-wrap:wrap; }
.hud-watch .poll-option { min-height:46px; }
.hud-watch .crowd-poll,.hud-watch .crowd-shares,.hud-watch .crowd-bets,.hud-watch .crowd-book,.hud-watch .crowd-bank { min-width:0; }
.hud-watch .crowd-refill { position:fixed; z-index:50; }
.hud-watch .ix-crowd-wait { padding:24px 20px; }
.hud-watch .ix-crowd-wait b { font-size:17px; }
.hud-context-note { margin:14px 16px 0; padding:12px 14px; border:1px solid #7477f53b; border-radius:12px; background:#7477f50c; color:var(--ui-link); font-size:13px; line-height:1.65; }
body.hud-watch.ix-watch .ix-room-panel .chat-panel { height:auto; min-height:0; max-height:none; flex:1; overflow:hidden; }
.hud-watch .chat-log:empty::before { content:'The room is quiet. Messages will appear here.'; display:block; color:var(--ui-muted); font-size:13px; line-height:1.6; padding:14px 0; }
body.hud-watch.ix-watch .chat-compose { padding:14px; background:none; border-top-color:#ffffff16; }
.hud-watch .chat-compose input { min-height:44px; font-size:16px; }
body.hud-watch.ix-watch .support-panel { margin:0; padding:20px; border:0; border-radius:0; background:none; overflow-y:auto; }
.hud-watch .support-head { flex-wrap:wrap; gap:8px; }
.hud-watch .support-amounts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px; }
.hud-watch .support-amounts button { min-height:48px; }
.hud-watch .support-note { font-size:13px; line-height:1.6; }
.hud-guide { padding:24px 20px; overflow-y:auto; min-height:0; }
.hud-guide h2 { font-size:24px; letter-spacing:-.04em; line-height:1.25; margin:14px 0; }
.hud-guide p,.hud-guide dd { font-size:14px; line-height:1.7; color:var(--ui-muted); }
.hud-guide dl { margin:20px 0; }
.hud-guide dl div { padding:14px 0; border-top:1px solid #ffffff16; }
.hud-guide dt { font-size:14px; font-weight:700; margin-bottom:5px; }
.hud-guide dd { margin:0; }
.hud-guide a { color:var(--ui-link); font-size:14px; }
.hud-guide .hud-guide-note { font-size:12px; }

.hud-watch .vod-strip { padding:26px 0; }
.hud-watch #store:empty { display:none; }
.hud-watch .lv-footer { font-family:inherit; text-transform:none; letter-spacing:0; color:var(--ui-soft); padding:8px 26px 18px; }
.hud-watch .off-stage { min-height:calc(100svh - 24px); padding-top:150px; }
.hud-watch .hud-experience.is-focused .hud-chrome { display:none!important; }
.hud-watch #offer-bar { bottom:142px!important; background:var(--ui-accent)!important; color:white!important; }

@media(hover:hover) and (pointer:fine) {
  .hud-dock-action:hover { color:var(--ui-text); border-color:#ffffff24; background:#ffffff0c; }
  .hud-dock-action:hover .hud-dock-icon { transform:translateY(-3px); }
  .hud-round-cue:hover { border-color:#c3c4ff70; }
}
@media(prefers-reduced-motion:no-preference) {
  .hud-dock-action,.hud-dock-icon,.hud-round-cue,.hud-focus { transition:transform .2s,background .2s,border-color .2s,color .2s; }
  .hud-watch .ix-room-panel:not([hidden]) { animation:hud-panel-in .22s ease-out both; }
  /* Fade only. A transform here would fill forward and outrank the panel's own
     transform, which is what centres it on the watch page. */
  @keyframes hud-panel-in { from { opacity:0; } to { opacity:1; } }
}
@media(max-width:1280px) and (min-width:901px) {
  .hud-action-dock { grid-template-columns:repeat(6,66px); gap:6px; }
  .hud-channel-card { width:250px; bottom:172px; }
  body.hud-watch.ix-watch .ix-room-panel { bottom:196px; width:350px; }
  .hud-round-cue { bottom:215px; width:300px; }
}
@media(max-width:900px) {
  .hud-watch .hud-experience { margin:0; border:0; border-radius:0; min-height:100svh; overflow:visible; }
  .hud-watch .ar-top.hud-header { position:relative; inset:auto; gap:8px; padding:12px; align-items:stretch; }
  .hud-wallet,.hud-viewer { border-radius:16px; min-height:70px; padding:10px; gap:8px; }
  .hud-wallet { flex:1; max-width:none; }
  .hud-home,.hud-home img { width:54px; }
  .hud-add { width:30px; height:30px; }
  .hud-viewer { flex:1; width:auto; max-width:60%; }
  .hud-viewer-avatar { width:36px; height:36px; border-radius:12px; font-size:14px; }
  .hud-watch #who { font-size:13px; }
  #hud-progress-label,.hud-watch #tier { font-size:10px; }
  .hud-wallet .hud-kicker { font-size:9px; }
  .hud-watch .hud-wallet :is(#balance,#demo-balance) { font-size:14px; }
  #hud-wallet-note { font-size:10px; }
  body.hud-watch.ix-watch .shell { padding:0!important; }
  .hud-watch .ix-watch-layout { display:flex; flex-direction:column; min-height:0; height:auto; }
  body.hud-watch.ix-watch .player-frame { position:sticky; inset:auto; top:0; height:auto!important; width:100%; aspect-ratio:16/9; z-index:20; order:0; flex:none; }
  .hud-action-dock { position:sticky; inset:auto; top:calc(100vw * 9 / 16); z-index:21; order:1; transform:none; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; border:0; border-bottom:1px solid #ffffff16; border-radius:0; padding:8px; background:#18181cf2; }
  .hud-dock-action { min-height:67px; border-radius:12px; gap:5px; font-size:10px; padding:4px 1px; }
  .hud-dock-icon { width:34px; height:34px; }
  .hud-dock-icon svg { width:23px; height:23px; }
  .hud-dock-icon img { width:34px; height:34px; }
  .hud-dock-action[aria-expanded=true]::after { bottom:-4px; }
  .hud-round-cue { position:relative; inset:auto; order:2; width:auto; margin:14px 12px 0; padding:14px; border-radius:16px; }
  body.hud-watch.ix-watch .ix-room-panel { position:relative; inset:auto; order:3; width:auto; min-height:310px; max-height:none; margin:14px 12px 0; border-radius:20px!important; }
  .hud-watch #ix-play-panel { overflow:visible; }
  body.hud-watch.ix-watch .ix-room-panel .chat-panel { height:360px; min-height:300px; }
  .hud-channel-card { position:relative; inset:auto; order:4; width:auto; margin:14px 12px 0; padding:16px; border-radius:18px; }
  .hud-watch .channel-name b { max-width:50vw; }
  .hud-channel-meta { margin-top:10px; }
  .hud-watch .title-bar h1 { -webkit-line-clamp:3; }
  .hud-utilities { position:relative; inset:auto; order:5; justify-content:center; margin:14px 60px; gap:24px; }
  /* Keep the eye reachable while the full-height video hides the other controls. */
  .hud-watch .hud-experience.is-focused .hud-utilities { position:fixed; right:20px; bottom:26px; margin:0; z-index:33; }
  .hud-watch .lv-footer { flex-direction:column; align-items:flex-start; gap:8px; font-size:11px; padding:12px 20px 70px; }
  .hud-watch .off-stage { min-height:60svh; padding:50px 22px; }
  .hud-watch .hud-experience.is-focused .player-frame { aspect-ratio:auto; height:100svh!important; }
  .hud-watch #offer-bar { bottom:74px!important; max-width:80vw; font-size:12px!important; }
}
@media(max-width:420px) {
  .hud-home { width:22px; font-size:20px; color:var(--ui-link); text-decoration:none; }
  .hud-home img { display:none; }
  .hud-home::before { content:'←'; }
  .hud-wallet { flex:0 0 auto; }
  .hud-viewer { min-width:0; max-width:none; }
  .hud-balance-unit { display:none; }
  .hud-wallet .ar-coin { width:18px; height:18px; }
  .hud-tier-row { gap:5px; flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) {
  .hud-watch .ix-room-panel,.hud-watch .pc,.hud-watch .pill.live svg { animation:none!important; }
}