:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #000; color: #fff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }

/* Foodlion's stage model: full-bleed media with overlay chrome that never
   takes space away from the picture. */
.player-shell { position: fixed; inset: 0; overflow: hidden; background: #000; outline: none; }
.stage-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.stage-media.is-zoomed { cursor: grab; }
.stage-media.is-panning { cursor: grabbing; }
.player { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: #000; object-fit: contain; transform-origin: center; }

.player-controls { position: absolute; inset: 0; z-index: 20; pointer-events: none; transition: opacity 300ms ease; }
.bottombar { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 0.6rem; padding: clamp(0.75rem, 2.5vw, 1rem) clamp(1rem, 3vw, 1.5rem); background: linear-gradient(to top, rgb(0 0 0 / 76%), transparent); pointer-events: none; }
.bottombar > * { pointer-events: auto; }
.bottombar button { min-height: 2.5rem; padding: 0.45rem 0.8rem; border: 1px solid rgb(255 255 255 / 22%); border-radius: 0.45rem; background: rgb(10 10 10 / 84%); }
.bottombar .icon-button { display: grid; width: 2.5rem; height: 2.5rem; min-height: 0; place-items: center; padding: 0.45rem; }
.icon-button svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottombar button:hover, .bottombar button:focus-visible { background: rgb(255 255 255 / 24%); outline: 2px solid #fff; outline-offset: 2px; }
.bottombar-spacer { flex: 1; }
#volume { width: clamp(4.5rem, 12vw, 8.75rem); accent-color: #fff; cursor: pointer; }
.controls-idle .player-controls { opacity: 0; pointer-events: none; }
.controls-idle .bottombar > * { pointer-events: none; }
.controls-idle.is-fullscreen { cursor: none; }

.stream-message { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 1.5rem; pointer-events: none; text-align: center; }
.stream-message p { max-width: 26rem; margin: 0; padding: 0.75rem 1rem; border: 1px solid rgb(255 255 255 / 18%); border-radius: 0.55rem; background: rgb(10 10 10 / 78%); box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 35%); }
.click-to-unmute { position: absolute; z-index: 15; top: 50%; left: 50%; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.6rem 0.9rem; border: 1px solid rgb(255 255 255 / 30%); border-radius: 0.55rem; background: rgb(10 10 10 / 84%); box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 35%); transform: translate(-50%, -50%); }
.click-to-unmute:hover, .click-to-unmute:focus-visible { background: rgb(255 255 255 / 24%); outline: 2px solid #fff; outline-offset: 2px; }
.click-to-unmute svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-error { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1.5rem; color: #fff; text-align: center; background: #000; }
.auth-error p { max-width: 32rem; margin: 0; }

@media (max-width: 34rem) { .bottombar { flex-wrap: wrap; gap: 0.45rem; } .bottombar-spacer { display: none; } #volume { flex: 1 1 5rem; } }