body{--room-bg:#eef4ff;background:var(--room-bg)}body[data-theme="dark"]{--room-bg:#101d35;--ink:#e7f0ff;--muted:#b7c5de;--line:#334361;color:var(--ink)}body[data-theme="dark"] header,body[data-theme="dark"] .room-panel{background:#1b2d49}body[data-theme="dark"] input,body[data-theme="dark"] textarea{background:#10203a;color:white}body[data-theme="light"]{--room-bg:#fff}body[data-theme="dark"] .button{color:#092455}.room-shell{max-width:1380px;margin:auto;padding:35px 28px}.room-shell h1{font-size:36px;letter-spacing:-1px}.room-shell h2{font-size:23px;letter-spacing:-.5px}.room-grid{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(280px,1fr);gap:22px}.stage{aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#092455;color:white;display:flex;align-items:center;justify-content:center;text-align:center}.stage iframe{width:100%;height:100%;border:0}.stage-icon{color:#95f52c;font-size:95px;line-height:1}.stage h2{margin:8px 0}.stage p{color:#bccde8}.room-panel{background:white;border:1px solid var(--line);border-radius:20px;padding:23px;margin-top:20px}.chat-panel{margin-top:0;align-self:start}.live-dot{display:inline-block;background:#95f52c;width:8px;height:8px;border-radius:50%;vertical-align:middle}#messages{position:relative;min-width:0;height:360px;overflow-y:auto;border-block:1px solid var(--line);margin:15px 0;padding:15px 0}.chat-message{padding:10px 0;font-size:14px;overflow-wrap:anywhere}.chat-message b{font-size:12px;color:var(--blue)}.chat-message p{white-space:pre-wrap;margin:3px 0}.chat-panel textarea{margin-bottom:12px}.chat-panel small,#chat-error{font-size:12px;color:var(--muted)}.notice{background:#d5fca6;color:#092455;padding:16px 20px;border-radius:14px;margin-bottom:20px}.offer-live{margin-top:20px;background:#0864ff;color:white;padding:25px;border-radius:20px;display:flex;justify-content:space-between;align-items:center;gap:25px}.offer-live h2{margin:8px 0}.offer-live strong{font-size:30px}.offer-live small{letter-spacing:1.5px}.offer-live[hidden]{display:none}canvas{width:100%;height:auto;background:white;border-radius:12px;border:1px solid #d9e5f4;touch-action:none}.poll-option{display:flex;width:100%;justify-content:space-between;gap:15px;margin:10px 0;padding:14px;border:1px solid var(--line);border-radius:12px;background:#edf4ff;color:#092455;text-align:left;cursor:pointer}.join{max-width:450px;border:1px solid var(--line);border-radius:20px;padding:30px;background:white;color:#092455}.join button{margin-top:20px}.host-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.host-grid label{display:block;font-size:13px;margin-bottom:15px}.host-grid .check{margin-top:15px}.host-actions{display:flex;gap:15px;flex-wrap:wrap}.host-actions button{padding:12px 20px}.host-note{font-size:13px;color:var(--muted)}[hidden]{display:none!important}@media(max-width:800px){.room-grid,.host-grid{grid-template-columns:1fr}.room-shell{padding:25px 18px}.room-shell h1{font-size:29px}.offer-live{display:block}.offer-live .button{margin-top:18px}#messages{height:260px}body{padding-bottom:20px}.stage{border-radius:14px}.stage-icon{font-size:60px}.stage h2{font-size:20px}.stage p{font-size:12px}}

.stage video{width:100%;height:100%;object-fit:contain;background:#000}#recording-error{color:#ac1938;font-size:13px}.upload-progress{width:100%;height:14px;accent-color:var(--blue)}
.stage{position:relative;display:flex;flex-direction:column;align-items:stretch;aspect-ratio:auto;text-align:left;background:#06142e}
.stage-media{position:relative;aspect-ratio:16/9;min-height:200px;width:100%;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.stage-media iframe,.stage-media video{position:absolute;inset:0;width:100%;height:100%}
.stage-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:#06142e;color:#d6e5ff;flex-shrink:0}
.stage-tools span{font-size:10px}.stage-tools button{border:1px solid #557092;border-radius:8px;background:#183557;color:#fff;padding:9px 12px;font-size:12px;font-weight:bold;cursor:pointer;min-height:38px}
.stage-alerts{display:flex;flex-wrap:wrap;gap:8px;padding:8px;background:#06142e;max-height:30vh;overflow:auto;flex-shrink:0}
.stage-alerts:has(> [hidden]):not(:has(> :not([hidden]))){display:none}
.stage-alert{position:relative;flex:1;min-width:190px;max-width:420px;background:#fff;color:#092455;border-left:4px solid #95f52c;border-radius:10px;padding:12px 34px 12px 14px;box-shadow:0 3px 14px #0003;overflow-wrap:anywhere;pointer-events:auto}
.stage-alert small{display:block;font-size:9px;letter-spacing:1px;font-weight:bold;color:#365472}.stage-alert p{color:#092455;font-size:13px;line-height:1.4;margin:5px 0 0;max-height:17vh;overflow:auto;white-space:pre-wrap}
.stage-dismiss{position:absolute;right:4px;top:3px;width:30px;height:30px;border:0;border-radius:6px;font-size:23px;line-height:1;background:#eaf1fb;color:#092455;cursor:pointer}
.stage-offer{background:#e5ffc9}.stage-offer strong{display:block;font-size:14px;line-height:1.3;margin:5px 0}.stage-offer>span{font-size:13px;font-weight:bold;display:inline-block;margin-right:12px}.stage-offer a{display:inline-block;font-size:12px;font-weight:bold;border-radius:7px;padding:8px 12px;background:#092455;color:white;margin-top:5px}
.stage:fullscreen,.stage.is-expanded{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;border-radius:0;z-index:9999;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.stage:fullscreen .stage-media,.stage.is-expanded .stage-media{flex:1;min-height:200px;aspect-ratio:auto}.stage-expanded{overflow:hidden}
#recording-video::-webkit-media-controls-fullscreen-button{display:none}
@media(max-width:650px){.stage-tools{padding:6px 9px}.stage-tools span{max-width:100px;line-height:1.3}.stage-tools button{font-size:11px}.stage-alert{padding:10px 32px 10px 11px}.stage-alert p{font-size:12px}.stage-offer strong{font-size:13px}.stage:fullscreen .stage-alerts,.stage.is-expanded .stage-alerts{bottom:100px}}

/* Popups are anchored to the recording surface, including outside fullscreen. */
.stage .stage-alerts{position:absolute;inset:8px 8px 54px auto;width:min(300px,calc(100% - 16px));padding:0;background:none;display:flex;flex-flow:column nowrap;justify-content:flex-end;align-items:stretch;gap:6px;max-height:none;overflow:visible;pointer-events:none;z-index:2}
.stage .stage-alert{flex:0 1 auto;min-width:0;max-width:100%;padding:10px 32px 10px 12px;max-height:100%;overflow:auto}
.stage .stage-offer{margin-top:0}.stage .stage-offer strong{font-size:14px;line-height:1.2;margin:4px 0}.stage .stage-offer>span{font-size:12px;margin-right:8px}
.stage .stage-offer .offer-countdown{display:inline-block;padding:3px 7px;background:#092455;color:#fff;border-radius:5px;font-variant-numeric:tabular-nums;font-weight:bold;letter-spacing:.5px}
.stage .stage-offer a{padding:7px 10px;font-size:11px;margin-top:6px}.stage.has-stage-offer #stage-notice{display:none}
.stage .stage-dismiss{min-width:28px;min-height:28px}.stage[data-source="youtube"] .stage-alerts{display:none}
.stage:fullscreen .stage-alerts,.stage.is-expanded .stage-alerts{bottom:54px}
@media(max-width:650px){.stage .stage-alerts{width:min(270px,calc(100% - 16px))}.stage .stage-offer strong{font-size:12px}.stage .stage-alert small{font-size:8px}.stage .stage-alert{padding:8px 30px 8px 10px}.stage .stage-offer>span{font-size:11px}.stage .stage-offer a{padding:6px 9px;margin-top:4px}}