/* MovieGame UI, using the palette and controls of the local Tools project. */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--t-bg);color:var(--t-text);font:14px/1.4 var(--t-font);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;min-height:40px;padding:0 16px;border-radius:var(--t-r-pill);background:var(--t-field);font-weight:500;cursor:pointer;transition:background-color .15s,color .15s}
button:hover{background:var(--t-field-2)}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--t-accent);color:#fff}
button.primary:hover:not(:disabled){filter:brightness(1.08)}
button[aria-busy=true]{cursor:progress}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
svg{display:block}
#world{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none;outline:none}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,#0005)}
#header{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:16px;justify-content:space-between;padding:24px 28px;pointer-events:none}
#header a{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:-.6px}
.brand .mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--t-field);font-size:16px;letter-spacing:0}
.connection{font-size:12px;color:var(--t-muted);background:#131315d9;padding:6px 10px;border-radius:10px}
body.in-menu #header{display:none}
.welcome{position:absolute;inset:0;display:grid;place-items:center;padding:24px;overflow:auto;pointer-events:none}
.session-menu{pointer-events:auto;width:min(380px,100%);padding:24px;border-radius:24px;background:var(--t-surface);box-shadow:var(--t-shadow-pop);display:grid;gap:22px}
.menu-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.menu-heading h1{margin:0;font-size:24px;font-weight:600;letter-spacing:-.7px}
.icon-button{width:36px;min-height:36px;display:grid;place-items:center;padding:0;background:transparent;color:var(--t-muted)}
.icon-button:hover{color:var(--t-text);background:var(--t-field)}
.segmented{display:flex;gap:2px;padding:4px;background:var(--t-field);border-radius:var(--t-r-pill)}
.segmented button{flex:1;min-width:0;min-height:34px;padding:0 10px;color:var(--t-muted);background:transparent;font-size:13px}
.segmented button[aria-pressed=true]{background:var(--t-field-2);color:var(--t-text)}
.menu-field{display:grid;gap:8px}
label{display:block;font-size:13px;color:var(--t-muted)}
input:not([type=range]):not([type=checkbox]),select{width:100%;min-width:0;height:44px;padding:0 14px;border:1px solid transparent;border-radius:12px;background:var(--t-field);color:var(--t-text)}
input::placeholder{color:var(--t-dim)}
input:not([type=range]):not([type=checkbox]):focus,select:focus{border-color:transparent;outline:2px solid var(--t-accent);outline-offset:-2px}
select{cursor:pointer;padding-right:28px}
.error{color:var(--t-err);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.error:empty{display:none}
.session-menu .wide{margin:0;height:44px}
#game-ui{position:absolute;inset:88px 24px 22px;pointer-events:none}
#game-ui button{pointer-events:auto}
.location,#seats-button{display:none!important}
.tools{position:absolute;right:0;top:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:calc(100vw - 48px)}
.tools button{font-size:12px;background:#232327}
.tools button:hover{background:var(--t-field-2)}
.company{position:absolute;right:0;top:58px;min-width:216px;max-width:280px;border-radius:20px;padding:16px;background:#131315}
.company-heading{display:flex;justify-content:space-between;gap:20px;padding-bottom:12px;font-size:12px;color:var(--t-muted)}
.person{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12px}
.person-icon{flex:none;width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:var(--t-field-2);color:var(--t-text)}
.person small{display:block;font-size:11px;color:var(--t-muted);margin-top:2px}
.bottom-bar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:11px;color:var(--t-muted)}
.controls-hint{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:55vw;line-height:1.6}
kbd{font:11px var(--t-mono);color:var(--t-text);background:var(--t-field-2);border-radius:6px;padding:3px 6px}
.status{display:flex;align-items:center;gap:10px;background:#131315d9;padding:6px 6px 6px 12px;border-radius:var(--t-r-pill)}
.status button{font-size:11px;min-height:30px;padding:0 12px}
.live-dot{width:5px;height:5px;flex:none;border-radius:50%;background:var(--t-ok)}
#clock{font-family:var(--t-mono);font-variant-numeric:tabular-nums;color:var(--t-text)}
.interaction{position:absolute;bottom:66px;left:50%;transform:translateX(-50%);background:var(--t-text);color:var(--t-bg);white-space:nowrap;font-size:13px;box-shadow:0 4px 24px #0004}
.interaction:hover{background:#fff}
.crosshair{position:absolute;top:50%;left:50%;width:4px;height:4px;border:1px solid #fff;border-radius:50%}
.sound-unlock{position:absolute;left:50%;top:25%;transform:translateX(-50%);background:var(--t-accent);color:#fff}
.touch-move{display:none}
.touch-move button{width:42px;height:42px;padding:0;font-size:20px;background:#232327e0;touch-action:none}
.touch-move>button{margin-left:46px}.touch-move div{display:flex;gap:4px;margin-top:4px}
.mouse-look .tools,.mouse-look .company{opacity:.2}.mouse-look .interaction{pointer-events:none}
dialog{width:500px;max-width:calc(100% - 32px);max-height:calc(100dvh - 48px);padding:24px;border:0;border-radius:24px;color:var(--t-text);background:var(--t-surface);box-shadow:var(--t-shadow-pop);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--t-field-2) transparent}
dialog::backdrop{background:#0007}
.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px}
.dialog-head h2{font:600 22px/1.25 var(--t-font);letter-spacing:-.5px;margin:3px 0 0}
.eyebrow{color:var(--t-muted);font-size:12px;letter-spacing:0}
.close{flex:none;width:32px;min-height:32px;padding:0;font-size:24px;line-height:1;background:var(--t-field);color:var(--t-muted)}
.close:hover{color:var(--t-text)}
.now-playing{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;background:var(--t-card)}
.reel{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--t-field);color:var(--t-text)}
.now-playing small{display:block;font-size:12px}.now-playing strong{display:block;margin-top:3px;font-size:14px;font-weight:500}
.screen-power-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 8px;font-size:12px}
.screen-power-row>span{color:var(--t-muted)}.screen-power-row button{font-size:12px;flex:none}
.power-note{margin:0 0 18px!important}
.transport{display:flex;gap:6px;margin:18px 0}.transport .primary{flex:1}.transport button{font-size:12px;padding:0 14px}
.range-label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
.range-label span+span{font:12px var(--t-mono);color:var(--t-text);padding:4px 8px;background:var(--t-field);border-radius:8px;white-space:nowrap}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:10px 0 18px;border-radius:10px;background:linear-gradient(90deg,var(--t-fill) var(--p,50%),var(--t-field) var(--p,50%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:24px;border-radius:8px;background:var(--t-text);box-shadow:0 1px 4px #0008}
input[type=range]::-moz-range-thumb{width:14px;height:24px;border:0;border-radius:8px;background:var(--t-text)}
input[type=range]::-moz-range-track{background:transparent}
.inline-form{display:flex;align-items:center;gap:8px}.inline-form input,.inline-form select{min-width:0;flex:1}.inline-form button{white-space:nowrap;font-size:12px}
hr{border:0;border-top:1px solid var(--t-line);margin:24px 0}
.wide{width:100%;margin-top:12px}dialog .wide+.wide{margin-top:8px}
small,.muted{font-size:12px;line-height:1.5;color:var(--t-muted)}.muted{margin:10px 0 18px}
.upload-area{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px;border:1px dashed var(--t-field-2);border-radius:20px;cursor:pointer;background:var(--t-card)}
.upload-area:hover{border-color:var(--t-muted)}.upload-area>span{font-size:24px;color:var(--t-text)}.upload-area strong{font-size:13px;font-weight:500;color:var(--t-text)}
#source-form>label{margin-bottom:8px}#source-form small{display:block;margin-top:8px}
.settings-card,.spotlight-settings{border:0;border-radius:20px;padding:16px;background:var(--t-card);margin:0 0 12px;min-width:0}
.settings-card .muted:last-child{margin-bottom:0}.settings-card>select{margin-top:8px}
.spotlight-settings{margin-top:20px}.spotlight-settings legend{float:left;width:100%;font-size:14px;font-weight:600;margin:0 0 16px;padding:0}.spotlight-settings label{clear:both}
.switch{display:flex;align-items:center;gap:12px;justify-content:space-between;color:var(--t-text);margin:4px 0 12px;cursor:pointer}
.switch input{order:1;appearance:none;flex:none;width:40px;height:24px;margin:0;border-radius:999px;background:var(--t-field-2);position:relative;cursor:pointer}
.switch input::after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--t-text);transition:transform .15s}
.switch input:checked{background:var(--t-accent)}.switch input:checked::after{transform:translateX(16px)}
#blackout-button[aria-pressed=true],#spotlight-button[aria-pressed=true]{background:var(--t-accent-soft);color:#c6baff}
#stage-button.live{background:var(--t-accent);color:#fff}
#admin-dialog p{margin:16px 0 10px}#admin-dialog label,#stage-dialog>label{margin:20px 0 8px}
#mkv-preparation{border-radius:20px;background:var(--t-card);padding:16px;margin:16px 0}#mkv-preparation strong{display:block;overflow-wrap:anywhere}
progress{width:100%;accent-color:var(--t-accent);margin:12px 0}
#toast{position:fixed;bottom:92px;left:50%;transform:translateX(-50%);max-width:min(520px,90%);padding:12px 18px;border-radius:16px;background:var(--t-popover);box-shadow:var(--t-shadow-pop);font-size:13px;z-index:20}
#fatal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(460px,90%);padding:24px;border-radius:20px;background:var(--t-surface);z-index:50}
#exit-cinema{position:fixed;right:16px;bottom:16px;min-height:30px;padding:0 12px;background:#23232799;color:var(--t-muted);font-size:11px;opacity:.7}#exit-cinema:hover{opacity:1}
body.cinema>:not(#world):not(#film):not(#shared-screen):not(#exit-cinema):not(script){display:none!important}
.screen-plan{border-top:2px solid var(--t-muted);padding-top:8px;text-align:center;font-size:11px;margin:20px}.seat-row{display:grid;grid-template-columns:20px repeat(6,minmax(0,1fr)) 14px repeat(6,minmax(0,1fr));gap:5px;margin:10px 0}.seat-row button{padding:0;border-radius:10px}.seat-row button.occupied{opacity:.4}.seat-row button.mine{background:var(--t-accent)}.seat-legend{display:flex;gap:16px;font-size:12px;color:var(--t-muted)}
@media(max-width:1000px){.controls-hint{display:none}.bottom-bar{justify-content:flex-end}.tools{top:auto;bottom:54px;max-width:100%}.company{top:0}.touch-move{display:block;position:absolute;left:0;bottom:105px}.interaction{bottom:112px}}
@media(max-width:600px){#header{padding:18px}.brand{font-size:16px}.brand .mark{display:none}.connection{font-size:10px}#game-ui{inset:76px 16px 18px}.company{min-width:160px;max-width:190px;padding:12px}.tools{gap:4px}.tools button{font-size:11px;min-height:36px;padding:0 11px}.status{font-size:10px;gap:7px}.interaction{font-size:12px;max-width:95%;white-space:normal;text-align:center}.welcome{padding:16px}.session-menu{padding:24px;width:min(380px,100%)}dialog{padding:20px;max-height:calc(100dvh - 24px)}.dialog-head h2{font-size:20px}.range-label{font-size:12px}.screen-power-row{align-items:flex-start}.screen-power-row>span{padding-top:9px}.inline-form button{padding:0 12px}.touch-move button{width:38px;height:38px;min-height:38px}.touch-move>button{margin-left:42px}}
@media(prefers-reduced-motion:reduce){button,.switch input::after{transition:none}}

/* Compact panels keep the room visible while lighting and sound are adjusted. */
dialog.control-panel{width:440px;padding:0;inset:16px 16px 16px auto;margin:0;max-width:calc(100% - 32px);max-height:none;height:calc(100dvh - 32px);overflow:hidden}
dialog.control-panel[open]{display:flex;flex-direction:column}
dialog.control-panel::backdrop{background:transparent;backdrop-filter:none}
.panel-header{flex:none;padding:22px 20px 16px;border-bottom:1px solid var(--t-line)}
.panel-header .dialog-head{margin:0}.panel-header .muted{margin:6px 0 0}
.panel-header h2{font-size:20px}.panel-tabs{margin-top:18px}
.panel-tabs button[aria-selected=true]{background:var(--t-field-2);color:var(--t-text)}
.panel-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px;scrollbar-width:thin;scrollbar-color:var(--t-field-2) transparent}
.panel-body [role=tabpanel]:focus-visible{outline:2px solid var(--t-accent);outline-offset:4px;border-radius:10px}
.panel-footer{padding:12px 20px 16px;border-top:1px solid var(--t-line);flex:none;background:var(--t-surface)}
.panel-footer .wide{margin:0;display:flex;align-items:center;justify-content:space-between}
.panel-footer kbd{color:var(--t-muted);background:transparent}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
h3{font-size:14px;font-weight:600;margin:0 0 16px}.section-heading h3{margin:0}
.state-label{font-size:11px;color:var(--t-muted)}
.settings-card .segmented{margin-bottom:20px}.settings-card .wide{margin-top:0}
.settings-card input[type=range]{margin-bottom:12px}
.settings-card>.muted:last-child{margin-bottom:0}
.spotlight-settings{padding:0;margin:16px 0 0;border-top:1px solid var(--t-line);border-radius:0;background:transparent}
summary{cursor:pointer;min-height:40px;display:list-item;align-content:center;font-size:13px;font-weight:500;color:var(--t-text)}
summary:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px;border-radius:4px}
.detail-content{padding-top:12px}.detail-content>label{margin-bottom:8px}
.transfer-details{margin-top:20px;border-top:1px solid var(--t-line);padding-top:8px}
.section-divider{display:flex;align-items:center;gap:16px;margin:20px 0;color:var(--t-muted);font-size:12px}
.section-divider::before,.section-divider::after{content:'';height:1px;flex:1;background:var(--t-line)}
.upload-area{position:relative}.upload-area input[type=file]{position:absolute;width:1px;height:1px;opacity:0;padding:0}
.upload-area:focus-within{outline:2px solid var(--t-accent);outline-offset:3px}
.upload-area:has(input:disabled){opacity:.45;cursor:default}
.now-playing>div{min-width:0}.now-playing strong{overflow-wrap:anywhere}
.dialog-feedback{background:var(--t-accent-soft);color:var(--t-text);padding:10px 12px;border-radius:12px;font-size:12px;line-height:1.5;margin:12px 0 0;overflow-wrap:anywhere}
.shortcut-list{display:grid;grid-template-columns:90px 1fr;gap:12px;font-size:12px;margin-bottom:0}
.shortcut-list dt{font-family:var(--t-mono)}.shortcut-list dd{margin:0;color:var(--t-muted)}
.switch input:focus-visible{outline:2px solid var(--t-text);outline-offset:3px}
.company{max-height:calc(100dvh - 260px);overflow:auto;pointer-events:auto}
body:has(.control-panel[open]) .tools,body:has(.control-panel[open]) .company,body:has(.control-panel[open]) .status{visibility:hidden}
@media(pointer:fine){.touch-move{display:none}}
@media(pointer:coarse){.touch-move{display:block;position:absolute;left:0;bottom:105px}.controls-hint{display:none}}
@media(max-width:600px){dialog.control-panel{inset:8px 8px 8px auto;width:420px;max-width:calc(100% - 16px);height:calc(100dvh - 16px)}.panel-header{padding:18px 16px 14px}.panel-body{padding:16px}.panel-footer{padding:12px 16px}.panel-tabs button{font-size:12px}}

.character-choice{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:14px;text-align:left;min-width:0}
.character-choice img{object-fit:contain;flex:none}.character-choice small{display:block;font-size:11px}.character-choice strong{font-size:13px;font-weight:500;display:block;margin-top:3px}.character-choice-action{margin-left:auto;font-size:11px;color:var(--t-muted);white-space:nowrap}
#character-dialog{width:min(720px,calc(100vw - 32px));padding:24px;max-height:calc(100dvh - 32px);overflow:auto}
#character-dialog .dialog-head{align-items:flex-start}#character-dialog .muted{margin:8px 0 0}
.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.character-card{padding:8px 4px 12px;display:flex;flex-direction:column;align-items:center;border:2px solid transparent;border-radius:16px;min-width:0;font-size:12px}
.character-card[aria-pressed=true]{border-color:var(--t-accent);background:var(--t-accent-soft)}
.character-card img{display:block;width:100%;height:auto;aspect-ratio:6/7;object-fit:contain;pointer-events:none}
.character-card span{min-height:2.8em;display:flex;align-items:center;justify-content:center}
.character-credit{font-size:11px;color:var(--t-dim);margin:18px 0 0;text-align:center}
img.person-icon{object-fit:cover;object-position:top;height:36px;width:32px;border-radius:8px}
@media(max-width:520px){#character-dialog{padding:18px}.character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.character-card img{max-height:155px}}

#voice-toggle.live{background:var(--t-accent);color:#fff}.voice-status{font-size:11px;color:var(--t-muted);align-self:center;max-width:125px;line-height:1.4}

.account-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;font-size:13px}.account-row button{font-size:11px;padding:7px 10px}#session-dialog label{display:block;margin:16px 0 8px}#owned-rooms{max-height:230px;overflow:auto;margin:16px 0}.owned-room{display:grid;grid-template-columns:1fr auto auto;gap:8px;padding:14px 0;border-bottom:1px solid var(--t-border)}.owned-room strong{grid-column:1/-1}.owned-room small{align-self:center}#session-dialog input{width:100%}#share-code{font-size:24px;letter-spacing:4px;text-align:center}#session-dialog .wide{margin-top:12px}.session-menu{max-height:calc(100dvh - 120px);overflow:auto}#auth-form>input{width:100%}

.session-menu{gap:16px;width:min(420px,100%)}.session-menu .account-row{margin-bottom:0}#auth-form .muted{margin:0}#auth-form .menu-field label{margin:0}

.owned-room{grid-template-columns:1fr}.room-actions{display:flex;flex-wrap:wrap;gap:6px}.room-actions button{min-height:34px;padding:0 12px;font-size:12px}.danger-button{color:var(--t-err)}#session-list #owned-rooms{max-height:280px}.account-row>span{overflow-wrap:anywhere;max-width:230px}

#header{gap:16px;align-items:flex-start}#header .connection{max-width:min(40vw,420px);overflow-wrap:anywhere}.top-actions{display:flex;gap:8px;pointer-events:auto;margin-left:auto}.top-actions button{display:flex;align-items:center;gap:8px;font-size:12px;background:#232327}.top-actions svg,.player-mic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}.top-actions circle{fill:#232327}.tools{left:0;right:auto;justify-content:flex-start;max-width:calc(100% - 300px)}.company{top:0;width:264px;max-width:280px}.person-info{flex:1;min-width:0;font-family:Geist,sans-serif;font-weight:400;letter-spacing:normal;overflow-wrap:anywhere}.player-mic{width:32px;height:32px;min-height:32px;display:grid;place-items:center;flex:none;padding:0;background:transparent;color:var(--t-muted);border-radius:50%}.player-mic.is-on{color:var(--t-ok)}button.player-mic:hover{background:var(--t-field)}.company .voice-status{display:block;max-width:none;margin-top:14px;font-size:11px}.person-icon{background:transparent}#share-code{font:400 18px Geist,sans-serif;letter-spacing:normal}body.cinema #header{display:none!important}
@media(max-width:600px){#header{padding:14px 16px;flex-wrap:wrap}.top-actions{gap:4px}.top-actions button{padding:0 10px;min-height:36px}.top-actions span{display:none}#header .connection{max-width:calc(100% - 152px)}.tools{position:relative;max-width:100%;margin-bottom:12px}.company{position:relative;margin-left:auto;max-width:264px;width:224px;top:auto}.tools button{font-size:11px}}