/* One top bar, then the world and its continuing conversation. */
:root { --studio-bar:calc(52px + env(safe-area-inset-top,0px)); }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important; }
body { height:100dvh; padding-top:var(--studio-bar); }
.studio-lanes { position:fixed; z-index:40; inset:0 0 auto; height:var(--studio-bar); padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px)); display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--bg); border-bottom:1px solid var(--glass-border); }
.studio-brand,.studio-destinations,.studio-actions { display:flex; align-items:center; gap:4px; }
.studio-brand { flex:1; gap:9px; }
.studio-brand .logo { font-size:15px; letter-spacing:2px; }
.studio-brand .studio-title { font-size:10px; }
.studio-actions { flex:1; justify-content:flex-end; }
.studio-lanes button,.studio-menu>summary { font:500 12px var(--font-sans); color:var(--text-muted); background:transparent; border:0; padding:10px 13px; border-radius:6px; cursor:pointer; white-space:nowrap; }
.studio-lanes button[aria-current="page"] { color:var(--text); background:var(--glass-bg-hover); }
.studio-lanes button:hover,.studio-menu>summary:hover { color:var(--text); background:var(--glass-bg); }
.studio-lanes :is(button,summary):focus-visible,.elsewhere-world :is(button,summary,input,select):focus-visible { outline:2px solid #edd2a0; outline-offset:2px; }
.studio-menu { position:relative; }
.studio-menu>summary { list-style:none; font-size:20px; line-height:20px; padding:10px; }
.studio-menu>summary::-webkit-details-marker { display:none; }
.studio-menu-body { position:absolute; right:0; top:calc(100% + 9px); min-width:210px; padding:12px; display:flex; flex-direction:column; align-items:stretch; gap:9px; background:var(--bg); border:1px solid var(--glass-border); border-radius:9px; box-shadow:0 12px 35px #0005; }
.studio-menu-body button { text-align:left; }
.studio-menu-body .connection-status { padding:8px 12px; font:11px/1.5 var(--font-sans); }
body.mode-chat .rail,body.mode-board .main { height:calc(100dvh - var(--studio-bar)); }
.activity-panel .activity-ledger>summary { padding-right:60px; }
.elsewhere-world[hidden] { display:none; }
body.mode-elsewhere .main { display:none; }
body.mode-elsewhere .rail { order:2; width:clamp(330px,32vw,470px); height:calc(100dvh - var(--studio-bar)); border-right:0; border-left:1px solid var(--glass-border); overflow:hidden; gap:8px; padding:12px; }
body.mode-elsewhere .conversation { flex:1; min-height:0; }
body.mode-elsewhere .conversation-scroll { flex:1; max-height:none; }
body.mode-elsewhere .play-panel { display:none!important; }
body.mode-elsewhere #publishCard { display:none; }
.elsewhere-world { order:1; flex:1; min-width:0; height:calc(100dvh - var(--studio-bar)); display:flex; flex-direction:column; overflow:hidden; position:relative; background:var(--bg); }
.elsewhere-world button,.elsewhere-dialog button { color:var(--text); background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:7px; padding:9px 12px; font:500 12px var(--font-sans); cursor:pointer; }
.elsewhere-world button:hover,.elsewhere-dialog button:hover { border-color:var(--purple); }
.elsewhere-world button:disabled { opacity:.38; cursor:default; }
.world-heading { position:absolute; top:12px; right:16px; display:flex; gap:6px; z-index:4; }
.world-heading button { background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(12px); border-color:var(--glass-border); min-height:40px; }
.world-stage { flex:1; min-height:0; position:relative; }
#worldCanvas { position:absolute; inset:0; overflow:hidden; }
#worldCanvas canvas { display:block; width:100%; height:100%; touch-action:none; }
.world-preview,.world-notice { position:absolute; bottom:16px; left:16px; max-width:calc(100% - 32px); font:12px/1.5 var(--font-sans); padding:8px 12px; border:1px solid var(--glass-border); border-radius:7px; background:var(--bg); z-index:3; }
.world-preview { top:14px; bottom:auto; color:var(--cyan); }
.world-notice { display:flex; align-items:center; gap:12px; }
.world-notice[hidden],.world-preview[hidden] { display:none; }
#worldStatus.error { color:var(--orange); }
.world-view-dialog { width:min(430px,calc(100vw - 24px)); max-height:calc(100dvh - var(--studio-bar) - 24px); margin:calc(var(--studio-bar) + 12px) 12px auto auto; color:var(--text); background:var(--bg); border:1px solid var(--glass-border); border-radius:12px; padding:0; overflow:auto; box-shadow:0 18px 60px #0006; }
.world-view-dialog::backdrop { background:#0003; }
.world-dialog-heading { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 8px; }
.world-dialog-heading h2 { font:500 16px var(--font-sans); }
.world-bottom { padding:8px 18px 20px; }
.world-view { display:flex; align-items:center; gap:6px; margin:4px 0 16px; }
.world-view button[aria-pressed="true"] { background:var(--glass-bg-hover); color:var(--purple); }
.world-view #worldResetView { margin-right:auto; }
.world-interior { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.world-interior[hidden],.world-room-caption { display:none; }
.world-interior button[aria-pressed="true"] { color:#edd2a0; background:#bc925318; border-color:#bc925340; }
#worldLeave { flex-basis:100%; margin-top:6px; }
.world-stage-note { color:var(--text-muted); font:12px/1.7 var(--font-sans); margin:16px 0; }
.world-home { display:flex; align-items:center; gap:8px; }
.world-surprise { padding:12px 0; border-top:1px solid var(--glass-border); font:12px/1.5 var(--font-sans); }
.world-surprise p { margin:7px 0; color:var(--text-muted); }
.world-surprise button { margin:3px 5px 3px 0; min-height:36px; }
.world-home label { display:flex; align-items:center; gap:8px; font-size:12px; }
.world-home label[hidden] { display:none; }
.world-home select { max-width:150px; color:var(--text); background:var(--bg); border:1px solid var(--glass-border); padding:7px; }
.elsewhere-world[data-location="inside"] .world-editor,.elsewhere-world[data-location="inside"] .world-gesture,.elsewhere-world[data-location="inside"] .world-home { display:none; }
.world-tools { border-top:1px solid var(--glass-border); margin-top:18px; padding-top:8px; font-size:12px; }
.world-tools>summary,.world-editor>summary { cursor:pointer; color:var(--text-muted); padding:9px 0; }
.world-options { display:flex; flex-wrap:wrap; gap:12px; padding-top:10px; }
.world-inference { display:flex; gap:8px; align-items:center; font:12px/1.6 var(--font-sans); color:var(--text-muted); }
.world-inference input { accent-color:var(--purple); }
.world-options-right { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#worldRevision { font-size:11px; color:var(--text-muted); }
.world-editor { margin-top:13px; border-top:1px solid var(--glass-border); padding-top:8px; }
.world-editor summary span { display:block; margin-top:4px; font-size:10px; }
.world-editor-row,.world-gesture { display:flex; align-items:end; flex-wrap:wrap; gap:9px; margin-top:12px; }
.world-editor label,.world-gesture label { display:flex; flex-direction:column; gap:5px; color:var(--text-muted); font:11px var(--font-sans); }
.world-editor input,.world-editor select,.world-gesture select { background:var(--bg); color:var(--text); border:1px solid var(--glass-border); border-radius:5px; padding:7px; font:12px var(--font-sans); min-height:36px; }
.world-editor input[type="number"] { width:60px; }
.world-editor input[type="color"] { padding:3px; width:42px; }
#worldObjects { max-width:min(260px,65vw); }
.world-gesture { padding:14px 0; border-top:1px solid var(--glass-border); font-size:12px; }
.world-stage > .tarot-camera { display:none; }
#worldCameraPresets .tarot-camera { position:static; transform:none; display:flex; flex-wrap:wrap; background:transparent; border:0; padding:0; margin:12px 0; backdrop-filter:none; }
#worldCameraPresets .tarot-camera[hidden] { display:none; }
.elsewhere-dialog { width:min(1400px,96vw); height:93dvh; margin:auto; padding:0; background:var(--bg); color:var(--text); border:1px solid var(--glass-border); border-radius:12px; }
.elsewhere-dialog::backdrop { background:#0009; backdrop-filter:blur(6px); }
.elsewhere-dialog header { height:48px; display:flex; justify-content:space-between; align-items:center; padding:8px 16px; font:12px var(--font-sans); }
#elsewhereCreatureFrame { height:calc(100% - 48px); }
.elsewhere-dialog iframe { width:100%; height:100%; border:0; }
body.mode-elsewhere.scene-focus .rail { display:none; }
@media(max-width:900px) {
  body.mode-elsewhere { flex-direction:column; overflow:hidden; }
  body.mode-elsewhere .rail { width:100%; flex:1; min-height:0; height:auto; border-left:0; border-top:1px solid var(--glass-border); padding:8px 12px max(8px,env(safe-area-inset-bottom,0px)); }
  .elsewhere-world { flex:0 0 53%; height:auto; min-height:0; }
  .world-heading { top:10px; right:12px; }
  body.mode-elsewhere.scene-focus .elsewhere-world { flex:1; }
  body.mode-elsewhere .activity-panel { padding:8px 12px; }
  body.mode-elsewhere .activity-controls { top:8px; right:12px; }
  body.mode-elsewhere .conversation .panel-label { display:none; }
  body.mode-elsewhere .text-input-bar textarea { font-size:16px; }
}
@media(max-width:600px) {
  .studio-lanes { gap:4px; padding-left:max(10px,env(safe-area-inset-left,0px)); padding-right:max(6px,env(safe-area-inset-right,0px)); }
  .studio-brand,.studio-actions { flex:0; }
  .studio-brand .logo { font-size:12px; letter-spacing:1px; }
  .studio-brand .studio-title,.skills-label { display:none; }
  .studio-destinations { margin:0 auto; gap:0; }
  .studio-lanes button { padding:12px 8px; font-size:11px; }
  .studio-actions { gap:0; }
  .studio-menu>summary { padding:12px 8px; }
  .world-view-dialog { margin:calc(var(--studio-bar) + 6px) auto auto; }
  .world-view-dialog button { min-height:42px; }
}
@media(max-height:520px) and (min-width:601px) {
  body.mode-elsewhere { flex-direction:row; }
  .elsewhere-world { flex:1; height:100%; }
  body.mode-elsewhere .rail { flex:0 0 42%; height:100%; border-top:0; border-left:1px solid var(--glass-border); }
}
@media(prefers-reduced-motion:reduce) { .elsewhere-world *, .studio-lanes * { transition:none!important; animation:none!important; } }

/* Three small destinations use the existing saved home and exit path. */
.world-travel { padding:12px 0; border-top:1px solid var(--glass-border); }
.world-travel p { margin:0 0 8px; }
.world-travel-destinations { display:flex; flex-wrap:wrap; gap:8px; }
.world-travel-destinations button { display:flex; align-items:center; gap:8px; min-height:48px; }
.world-travel-destinations img { width:36px; height:36px; object-fit:contain; }
.world-travel-note { margin-top:8px!important; font-size:11px; color:var(--text-muted); line-height:1.5; }
