.video-content > .twitch-player {
    width: 100%;
    height: 100%;
}
.self-hosted-player{position:relative;background:#000}.self-hosted-player video{display:block;width:100%;height:100%;object-fit:contain}.self-hosted-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:8px;padding:12px 12px calc(var(--player-controls-height,48px) + 12px);box-sizing:border-box;overflow-y:auto;background:#000a;color:#fff;text-align:center}.self-hosted-state[hidden]{display:none}.self-hosted-state p{margin:0;line-height:1.4}.self-hosted-preview{max-width:1100px;margin:24px auto;padding:16px}.self-hosted-preview .video-stage{margin:16px 0}.self-hosted-preview a{color:var(--text-main)}
.self-hosted-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:8px;min-height:48px;padding:4px 12px;box-sizing:border-box;background:linear-gradient(transparent,#000b);color:#fff;transform:translateY(0);clip-path:inset(-100vh -20px 0 -20px);transition:transform .24s ease,clip-path .24s ease}
.self-hosted-controls-hidden .self-hosted-controls{transform:translateY(100%);clip-path:inset(-100vh -20px 100% -20px);pointer-events:none}
.self-hosted-state [data-stream-retry]{max-width:100%;padding:6px 12px;border:1px solid #ffffff60;border-radius:8px;background:#ffffff18;color:inherit;font:inherit;line-height:1.3;cursor:pointer}
.self-hosted-state [data-stream-retry]:hover{background:#ffffff30}.self-hosted-state [data-stream-retry]:focus-visible{outline:2px solid #fff;outline-offset:3px}
.self-hosted-controls > button{display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;padding:8px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer}
.self-hosted-controls > button:hover{background:#fff2}.self-hosted-controls > button:disabled{opacity:.4;cursor:default}.self-hosted-controls > button svg{width:24px;height:24px;fill:currentColor;pointer-events:none}
.self-hosted-controls input[type=range]{width:112px;min-width:44px;flex:0 1 112px;max-width:calc(100% - 100px);height:40px;margin:0;padding:0;accent-color:#fff;cursor:pointer}
.self-hosted-controls :focus-visible{outline:2px solid #fff;outline-offset:2px}
.self-hosted-buffering{display:block;width:min(480px,100%);height:220px;max-height:50%;min-height:0;flex:0 1 220px;object-fit:contain;pointer-events:none}
.self-hosted-buffering[hidden]{display:none}.self-hosted-state p,.self-hosted-state button{flex:0 0 auto}
.self-hosted-player{overflow:hidden}.self-hosted-player:has(.stream-reaction-panel:not([hidden])){overflow:visible}.self-hosted-media{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.self-hosted-controls{z-index:6;border-radius:0 0 16px 16px}.video-stage:fullscreen .self-hosted-controls{border-radius:0}
.self-hosted-controls .stream-reaction-tools[data-stream-reactions="player"] > button{height:auto;min-height:40px}
.self-hosted-player.self-hosted-offline{background:var(--player-idle-surface,#0f132b75)}
.self-hosted-offline video{visibility:hidden}
.self-hosted-offline .self-hosted-state{background:transparent;color:var(--text-main,#fff);text-shadow:var(--player-idle-text-shadow,0 1px 3px #0008)}
.self-hosted-offline .self-hosted-state [data-stream-retry]{background:var(--field,#fff2);border-color:var(--border-color,#fff6);text-shadow:none}
.video-stage:fullscreen .self-hosted-offline{background:#000;--text-main:#fff;--player-idle-text-shadow:none;--field:#ffffff18;--border-color:#ffffff60}
@media(prefers-reduced-motion:reduce){.self-hosted-controls{transition:none}}
.player-privacy-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; text-align:center; color:var(--text-main); background:var(--panel); box-sizing:border-box; }
.player-privacy-placeholder p { margin:0; font-size:18px; }
.player-privacy-placeholder small { max-width:460px; line-height:1.5; color:var(--text-muted); }
.video-stage { position:relative; width:100%; aspect-ratio:16/9; flex:0 0 auto; margin-top:auto; min-width:0; }
.video-stage > .video-content { width:100%; height:100%; aspect-ratio:auto; margin:0; }
.stream-emotions { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:5; border-radius:16px; }
.stream-emotion { position:absolute; bottom:12%; width:max-content; line-height:1; font-size:clamp(32px,4vw,54px); text-shadow:0 2px 6px #0006; will-change:transform,opacity; animation:stream-emotion-wind 6s linear forwards; }
.stream-emotion.reduced-motion { animation-name:stream-emotion-fade; }
.video-stage:fullscreen { height:100%; width:100%; aspect-ratio:auto; background:#000; }
.video-stage:fullscreen > .video-content { height:100%; border-radius:0; }
@keyframes stream-emotion-wind {
    /* Quadratic Bezier flight: (0,0), (.1,-1), (.78,-1), sampled for transform-only rendering. */
    0% { opacity:0; transform:translate(0,0) scale(.85) rotate(-5deg); }
    4.25% { opacity:.65; transform:translate(calc(var(--emotion-drift)*.01477),calc(var(--emotion-rise)*-.12109)) scale(.97) rotate(-2.5deg); }
    8.5% { opacity:1; transform:translate(calc(var(--emotion-drift)*.03406),calc(var(--emotion-rise)*-.23438)) scale(1.04) rotate(0deg); }
    12.75% { transform:translate(calc(var(--emotion-drift)*.05789),calc(var(--emotion-rise)*-.33984)) scale(1.04) rotate(.4deg); }
    17% { transform:translate(calc(var(--emotion-drift)*.08625),calc(var(--emotion-rise)*-.4375)) scale(1.04) rotate(.9deg); }
    21.25% { transform:translate(calc(var(--emotion-drift)*.11914),calc(var(--emotion-rise)*-.52734)) scale(1.04) rotate(1.3deg); }
    25.5% { transform:translate(calc(var(--emotion-drift)*.15656),calc(var(--emotion-rise)*-.60938)) scale(1.04) rotate(1.7deg); }
    29.75% { transform:translate(calc(var(--emotion-drift)*.19852),calc(var(--emotion-rise)*-.68359)) scale(1.04) rotate(2.1deg); }
    34% { transform:translate(calc(var(--emotion-drift)*.245),calc(var(--emotion-rise)*-.75)) scale(1.04) rotate(2.6deg); }
    38.25% { transform:translate(calc(var(--emotion-drift)*.29602),calc(var(--emotion-rise)*-.80859)) scale(1.04) rotate(3deg); }
    42.5% { transform:translate(calc(var(--emotion-drift)*.35156),calc(var(--emotion-rise)*-.85938)) scale(1.04) rotate(3.4deg); }
    46.75% { transform:translate(calc(var(--emotion-drift)*.41164),calc(var(--emotion-rise)*-.90234)) scale(1.04) rotate(3.9deg); }
    51% { transform:translate(calc(var(--emotion-drift)*.47625),calc(var(--emotion-rise)*-.9375)) scale(1.04) rotate(4.3deg); }
    55.25% { transform:translate(calc(var(--emotion-drift)*.54539),calc(var(--emotion-rise)*-.96484)) scale(1.04) rotate(4.7deg); }
    59.5% { transform:translate(calc(var(--emotion-drift)*.61906),calc(var(--emotion-rise)*-.98438)) scale(1.04) rotate(5.1deg); }
    63.75% { transform:translate(calc(var(--emotion-drift)*.69727),calc(var(--emotion-rise)*-.99609)) scale(1.04) rotate(5.6deg); }
    68% { opacity:1; transform:translate(calc(var(--emotion-drift)*.78),calc(var(--emotion-rise)*-1)) scale(1.04) rotate(6deg); animation-timing-function:ease-out; }
    82% { opacity:.75; transform:translate(calc(var(--emotion-drift)*.92),calc(var(--emotion-rise)*-1 + var(--emotion-bounce)*.7)) scale(1) rotate(2deg); }
    100% { opacity:0; transform:translate(var(--emotion-drift),calc(var(--emotion-rise)*-1 + var(--emotion-bounce))) scale(.94) rotate(0deg); }
}
@keyframes stream-emotion-fade { 0%,100% { opacity:0; } 20%,70% { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .stream-emotion { animation-name:stream-emotion-fade; } }
@media(max-width:600px) { .stream-emotion { font-size:32px; } }