/* Live interactions: a compact game HUD, with movement tied to actual state. */
body:is(.home-page,.hud-watch) .has-interaction-arena { --ia-line:#ffffff18; --ia-ink:#f5f5f7; --ia-muted:#a9a9b6; --ia-gold:#f7cf62; --ia-back:#83eac0; --ia-fade:#ff9cab; display:block!important; color:var(--ia-ink); }
.interaction-arena { position:relative; isolation:isolate; width:100%; min-width:0; font-family:var(--ui-font, sans-serif); }
.interaction-arena * { box-sizing:border-box; }
.interaction-arena button,.interaction-arena a { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.interaction-arena [hidden] { display:none!important; }
.interaction-arena button:focus-visible,.interaction-arena a:focus-visible { outline:2px solid white; outline-offset:3px; }
.interaction-arena button:disabled { cursor:default; }
.ia-topline { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:0 0 14px; }
.ia-topline>span { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:.1em; color:#dfdfe7; }
.ia-topline>span>i { width:6px; height:6px; border-radius:50%; background:var(--ia-gold); box-shadow:0 0 12px #f7cf623d; }
.ia-topline button,.ia-foot button,.ia-preview-note button { background:#ffffff08; border:1px solid var(--ia-line); padding:7px 9px; border-radius:8px; color:#d5d5df; font-size:12px; }
.ia-preview-note>span { display:flex; gap:8px; flex-wrap:wrap; }
.ia-preview-note { padding:11px; margin:0 0 12px; border:1px solid #f7cf6255; background:#f7cf6210; border-radius:10px; color:#f7dc95; font-size:12px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:center; }
.ia-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:5px; border:1px solid var(--ia-line); background:#08080c65; border-radius:18px; }
.ia-tabs button { display:flex; position:relative; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:10px 2px; border:1px solid transparent; border-radius:13px; color:#b6b6c2; background:transparent; font-size:12px; font-weight:700; min-height:78px; }
.ia-tabs img { width:31px; height:31px; object-fit:contain; filter:drop-shadow(0 4px 4px #0008); transition:transform .24s ease; }
.ia-tabs button[aria-pressed=true] { border-color:#ffffff45; color:#fff; background:linear-gradient(160deg,#ffffff20,#ffffff08); box-shadow:inset 0 1px 0 #fff2,0 4px 10px #0002; }
.ia-tabs button[aria-pressed=true] img { transform:translateY(-3px) scale(1.1); }
.ia-tabs button:hover { background-color:#ffffff0b; }
.ia-tabs .is-available i { position:absolute; right:9px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--ia-gold); }
.ia-content { min-width:0; padding-top:12px; }
.ia-hero { position:relative; display:flex; align-items:center; gap:7px; padding:7px 0 3px; min-height:115px; overflow:hidden; }
.ia-hero-art { width:86px; height:96px; flex:0 0 86px; object-fit:contain; z-index:1; filter:drop-shadow(0 8px 14px #0007); }
.ia-orbit { position:absolute; left:13px; top:20px; width:65px; height:65px; border:1px solid #ffffff16; border-radius:50%; box-shadow:0 0 40px #ffffff0a,inset 0 0 28px #ffffff08; }
.ia-orbit::after { content:''; position:absolute; top:2px; left:15px; width:3px; height:3px; background:#fff; border-radius:50%; box-shadow:36px 44px 0 #f7cf62,-9px 55px 0 #fff8; }
.ia-eyebrow { display:block; color:var(--ia-muted); font-size:11px; letter-spacing:.11em; font-weight:800; margin-bottom:7px; }
.ia-eyebrow.is-live { color:var(--ia-back); }
.ia-kicker-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.ia-kicker-row .ia-eyebrow { margin-bottom:0; }
.ia-seg { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.ia-amount { margin-top:14px; }
.ia-amount-row { display:flex; justify-content:space-between; font-size:12px; color:var(--ia-muted); }
.ia-amount-n { display:flex; align-items:center; gap:6px; margin:4px 0 8px; font-size:22px; font-weight:800; }
.ia-range { width:100%; accent-color:var(--ia-gold); }
.ia-return { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--ia-line); font-size:12px; color:#b9b9c6; }
.ia-return b { display:block; text-align:right; color:#f4dc91; font-size:16px; }
.ia-return small { display:block; text-align:right; font-size:11px; color:var(--ia-muted); }
.interaction-arena .ia-hero h3 { margin:0; color:var(--ia-ink); font-size:21px; line-height:1.22; letter-spacing:-.04em; font-weight:800; }
.ia-meta { display:flex; padding:6px 0 16px; font-size:12px; color:var(--ia-muted); line-height:1.55; }
.ia-clock { flex-shrink:0; display:grid; place-items:center; min-width:51px; padding:6px 8px; border:1px solid var(--ia-line); border-radius:9px; background:#ffffff06; color:#ececf2; font-size:12px; font-variant-numeric:tabular-nums; font-weight:750; }
.ia-side { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:13px!important; border-radius:15px; border:1px solid var(--ia-line); background:#ffffff04; color:#f5f5f7; transition:transform .2s,border-color .2s,background .2s; }
.ia-side small { font-size:11px; color:#9d9dad; }
.ia-side.is-picked { border-color:var(--ia-back); background:linear-gradient(150deg,#83eac013,#ffffff03); box-shadow:inset 0 1px 0 #83eac02a; }.ia-against.is-picked { border-color:var(--ia-fade); background:linear-gradient(150deg,#ff9cab13,#ffffff03); }.ia-side:hover:not(:disabled) { transform:translateY(-2px); }
.ia-sizes { display:flex; gap:6px; margin-top:16px; }.ia-sizes button { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:4px; padding:10px 3px; border:1px solid var(--ia-line); border-radius:10px; background:#ffffff04; color:#d7d7e0; font-size:13px; font-weight:750; }.ia-sizes button.is-picked { color:#fff; border-color:#ffffff7a; background:#ffffff15; }
.ia-coin { display:inline-block; width:18px; height:18px; object-fit:contain; vertical-align:middle; }
.ia-review { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 1px; font-size:12px; color:#b9b9c6; }.ia-review b { display:flex; align-items:center; gap:5px; color:#f4dc91; font-size:16px; }
.interaction-arena .ia-submit { position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:47px; padding:12px; border:1px solid #ffffff; border-radius:12px; background:linear-gradient(#fff,#dedee5); color:#16161b; font-size:14px; font-weight:800; text-decoration:none; line-height:1.35; box-shadow:0 4px 0 #929299,0 8px 14px #0004; transition:transform .15s,box-shadow .15s; }
.ia-submit:not(:disabled):hover { transform:translateY(-2px); }.ia-submit:not(:disabled):active { transform:translateY(3px); box-shadow:0 1px 0 #929299; }.interaction-arena .ia-submit:disabled { opacity:.36; box-shadow:none; }
.interaction-arena .ia-rule { margin:14px 0 0; color:#9a9aaa; font-size:12px; line-height:1.65; }
.ia-options { display:flex; flex-direction:column; gap:9px; }
.ia-option { position:relative; overflow:hidden; width:100%; display:flex; align-items:center; gap:10px; min-height:73px; padding:12px; border:1px solid var(--ia-line); border-radius:13px; color:#f3f3f7; text-align:left; background:#ffffff04; isolation:isolate; }
.ia-option-fill { position:absolute; inset:0 auto 0 0; z-index:-1; background:linear-gradient(90deg,#ffffff12,#ffffff06); transition:width .65s cubic-bezier(.2,.8,.2,1); border-right:1px solid #ffffff0b; }
.ia-option-index { display:grid; place-items:center; width:27px; height:29px; flex-shrink:0; border:1px solid #ffffff1f; border-radius:8px; color:#bbbbc7; font-size:12px; font-weight:750; }
.ia-option-copy { flex:1; display:flex; flex-direction:column; gap:5px; }.ia-option-copy strong { font-size:14px; line-height:1.35; }.ia-option-copy small { font-size:11px; color:#a9a9b8; }.ia-option>b { font-size:16px; font-variant-numeric:tabular-nums; }
.ia-option.is-picked { border-color:#ffffff8c; }.ia-option.is-picked .ia-option-index { background:#f1f1f5; color:#18181d; }.ia-option:not(:disabled):hover { border-color:#ffffff5a; }
/* The row you actually voted for is also is-picked, so this has to win on order. */
.ia-option.is-mine { border-color:var(--ia-back); }
.ia-vote-status { display:flex; justify-content:space-between; gap:10px; margin-top:15px; color:#dddde7; font-size:12px; line-height:1.5; }.ia-vote-status>b { color:#9a9aa9; font-weight:500; white-space:nowrap; }
.ia-auction-score { text-align:center; padding:13px 0 18px; border-bottom:1px solid var(--ia-line); margin-bottom:14px; }.ia-auction-score>span { color:#aaaabb; font-size:11px; letter-spacing:.12em; font-weight:750; }.ia-auction-score>strong { display:flex; justify-content:center; align-items:center; gap:7px; padding:8px 0; color:#ffe3a1; font-size:37px; font-weight:850; letter-spacing:-.045em; }.ia-auction-score .ia-coin { width:31px; height:31px; }.ia-auction-score small { color:#b7b7c7; font-size:12px; }
.ia-auction-options { display:grid; gap:8px; }.ia-auction-option { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid var(--ia-line); border-radius:12px; background:#ffffff04; color:#f1f1f7; text-align:left; }.ia-auction-option>span:first-child { font-size:12px; color:#8c8c9d; }.ia-auction-option>span:nth-child(2) { flex:1; display:flex; flex-direction:column; gap:5px; }.ia-auction-option strong { font-size:14px; }.ia-auction-option small { font-size:12px; color:#9e9eaf; line-height:1.4; }.ia-auction-option>i { font-style:normal; }.ia-auction-option.is-picked { border-color:#f7cf6299; background:#f7cf6209; }
.ia-auction-options+.ia-sizes { margin-bottom:15px; }
.ia-empty { text-align:center; padding:22px 14px; border:1px dashed #ffffff25; border-radius:14px; background:#ffffff02; }.ia-empty p { color:#babac8; font-size:14px; line-height:1.6; margin:15px 0; }.ia-empty button { border:0; background:none; color:#f0f0f7; font-size:13px; text-decoration:underline; text-underline-offset:4px; }.ia-empty-dots { display:flex; justify-content:center; gap:5px; }.ia-empty-dots i { width:4px; height:4px; border-radius:50%; background:#ffffff80; }
.ia-locked,.ia-result { padding:15px; margin-top:13px; border:1px solid var(--ia-line); border-radius:12px; background:#ffffff06; color:#d1d1dd; font-size:13px; line-height:1.6; }.ia-result>span { display:block; font-size:11px; letter-spacing:.12em; color:#aaaabc; }.ia-result>strong { display:block; font-size:19px; margin-top:7px; color:#fff; }.ia-result>p { font-size:13px; margin:7px 0 0; }
.ia-receipt { display:flex; align-items:center; gap:10px; padding:13px; margin-top:14px; border:1px solid #ffffff39; border-radius:13px; background:#2a2a32; font-size:13px; line-height:1.5; color:#f2f2f7; }.ia-receipt-mark { display:grid; place-items:center; flex:0 0 27px; width:27px; height:27px; border-radius:50%; border:1px solid #ffffff40; font-weight:800; }.ia-receipt[data-kind=error] { border-color:#ff9cab55; color:#ffc4ce; }
.ia-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:19px; padding-top:12px; border-top:1px solid var(--ia-line); }.ia-foot>span { font-size:11px; color:#8e8e9f; }.ia-foot button { border:0; font-size:11px; }
/* Keep specialized controls in their mode; live cards remain visible for betting and voting. */
body:is(.home-page,.hud-watch) .has-interaction-arena .crowd-head,
body:is(.home-page,.hud-watch) .has-interaction-arena :is(#crowd-book,#crowd-poll) { display:none!important; }
body:is(.home-page,.hud-watch) .has-interaction-arena .crowd-dock { display:flex!important; flex-direction:column!important; margin-top:12px; }
body:is(.home-page,.hud-watch) .has-interaction-arena:not([data-interaction-mode=bet]) #crowd-bank,
body:is(.home-page,.hud-watch) .has-interaction-arena:not([data-interaction-mode=predict]) :is(#crowd-shares,#crowd-bets),
body:is(.home-page,.hud-watch) .has-interaction-arena:not([data-interaction-mode=vote]) #crowd-actions,
body:is(.home-page,.hud-watch) .has-interaction-arena.ia-preview-active :is(.crowd-dock,.crowd-table) { display:none!important; }
body:is(.home-page,.hud-watch) .has-interaction-arena[data-interaction-mode=artifacts] .interaction-arena { display:none; }
body.home-page .hl-stage .hl-panel { width:390px; top:120px; bottom:126px; max-height:760px; }
body.home-page .hl-panel:has(.interaction-arena) .hl-panel-head { padding:7px 13px; justify-content:flex-end; }
body.home-page .hl-panel:has(.interaction-arena) :is(.hl-panel-head>div,.hl-panel-hint) { display:none; }
body.home-page .hl-panel:has(.interaction-arena) #crowd { padding:0 16px 14px!important; }
body.hud-watch.ix-watch .ix-room-panel { width:414px; }
body.hud-watch.ix-watch .ix-room-panel:has(.interaction-arena) #hud-context-note { display:none; }
@media(prefers-reduced-motion:no-preference) {
 .interaction-arena:not(.ia-calm) .ia-hero-art { animation:ia-float 5s ease-in-out infinite; }
 .interaction-arena:not(.ia-calm) .ia-orbit { animation:ia-orbit 14s linear infinite; }
 .interaction-arena:not(.ia-calm) .ia-pop { animation:ia-confirm .4s cubic-bezier(.2,1.3,.4,1) both; }
 .interaction-arena:not(.ia-calm) .ia-empty-dots i { animation:ia-dot 2s ease-in-out infinite; }.ia-empty-dots i:nth-child(2) { animation-delay:.2s!important; }.ia-empty-dots i:nth-child(3) { animation-delay:.4s!important; }
 @keyframes ia-float { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-7px) rotate(3deg); } }
 @keyframes ia-orbit { to { transform:rotate(360deg); } }
 @keyframes ia-confirm { from { opacity:0; transform:translateY(9px) scale(.96); } to { opacity:1; transform:none; } }
 @keyframes ia-dot { 0%,100% { opacity:.35; transform:translateY(0); } 50% { opacity:1; transform:translateY(-3px); } }
}
.interaction-arena.ia-calm * { animation:none!important; transition:none!important; }
@media(prefers-reduced-motion:reduce) { .interaction-arena * { animation:none!important; transition:none!important; } }
@container featured (max-width:760px) { body.home-page .hl-stage .hl-panel { width:355px; } }
@container featured (max-width:500px) { body.home-page .hl-stage .hl-panel { width:calc(100% - 28px); max-width:calc(100% - 28px); right:14px; max-height:55svh; bottom:132px; top:auto; }.interaction-arena .ia-hero h3 { font-size:19px; }.ia-hero-art { width:68px; flex-basis:68px; height:82px; } }
@media(max-width:600px) { body.hud-watch.ix-watch .ix-room-panel { width:auto; }.ia-tabs button { font-size:12px; }.ia-sizes button { font-size:12px; }.ia-side { padding:10px!important; } }
body:is(.home-page,.hud-watch) .has-interaction-arena[hidden] { display:none!important; }
@container featured (max-width:500px) {
 .hl-dock { flex:1; justify-content:center; }.hl-dock button { width:50px; }
 .hl-utilities { position:absolute; right:0; bottom:96px; }
}
.interaction-arena.ia-sleep * { animation-play-state:paused!important; }
@media(prefers-reduced-motion:no-preference) {
 .interaction-arena:not(.ia-calm) .ia-auction-score strong { animation:ia-number-in .3s ease-out both; }
 @keyframes ia-number-in { from { opacity:.5; transform:translateY(4px) scale(.97); } to { opacity:1; transform:none; } }
}
@media(max-width:900px) { body.hud-watch.ix-watch .ix-room-panel { width:auto; } }