:root{--stage-left:0px;--stage-top:0px;--stage-right:100vw;--stage-bottom:100vh;--stage-width:100vw;--stage-height:100vh;--stage-center-x:50vw;--stage-dialog-height:150px;--stage-mobile-dialog-height:150px;--corner-icon-size:4.35%;--corner-icon-top:5.8%;--corner-icon-left:3.4%;--corner-sound-right:10.2%;--corner-settings-right:4.3%;--standard-character-stage-height:62.7%}
.lobby-greeting{position:absolute;z-index:4;left:48%;bottom:1%;width:32%;height:68%;object-fit:contain;pointer-events:none}
.hud{left:calc(var(--stage-left) + clamp(10px,1.5vw,22px));right:calc(100vw - var(--stage-right) + clamp(10px,1.5vw,22px));top:calc(var(--stage-top) + clamp(10px,1.5vw,20px))}
.dialogue{left:var(--stage-center-x);bottom:calc(100vh - var(--stage-bottom) + clamp(12px,2vh,24px));width:min(720px,calc(var(--stage-width) - 32px));max-height:var(--stage-dialog-height);overflow:visible;pointer-events:none;transition:opacity .4s,visibility .4s,transform .4s}
.dialogue p{max-height:calc(var(--stage-dialog-height) - 42px);overflow:auto}
.dialogue button{pointer-events:auto}.dialogue.finished{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(18px)}
.hint{left:calc(var(--stage-left) + 16px);bottom:calc(100vh - var(--stage-bottom) + 16px)}
.floor-map,.chat-panel,.rooftop-chat,.machine-focus{max-height:calc(var(--stage-height) - 24px)}
.art-dialog,.note-editor{max-width:calc(var(--stage-width) - 24px);max-height:calc(var(--stage-height) - 24px)}
.chat-panel{top:max(12px,calc(var(--stage-top) + 12px));bottom:max(12px,calc(100vh - var(--stage-bottom) + 12px))}
.rooftop-chat{top:max(12px,calc(var(--stage-top) + 12px));bottom:max(12px,calc(100vh - var(--stage-bottom) + 12px))}
@media(max-width:760px){.home-button,.sound-button{transform:scale(.82);transform-origin:top}.home-button{transform-origin:top left}.sound-button{transform-origin:top right}.dialogue{min-height:0;max-height:var(--stage-mobile-dialog-height);padding-top:24px;padding-bottom:10px}.speaker{top:-18px}.chat-panel,.rooftop-chat{max-height:calc(var(--stage-height) - 28px)}}

/* 16:9 lobby redesign */
#scene-lobby{isolation:isolate;background:#d98d71}
#scene-lobby .scene-bg{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover}
.lobby-dots{position:absolute;z-index:2;left:50%;top:0;width:100%;height:auto;transform:translateX(-50%);object-fit:contain;opacity:1;mix-blend-mode:normal;pointer-events:none}
.lobby-entry-glow{position:absolute;z-index:3;display:block;object-fit:fill;pointer-events:none;opacity:0;visibility:hidden}
.glow-gallery{left:calc(4.4% - 2px);top:calc(15.5% - 2px);width:25.1%;height:59.7%}
.glow-cafe{left:71.7%;top:calc(15.5% - 2px);width:24.1%;height:59.8%}
.glow-b1{left:36.7%;top:calc(35.8% - 1px);width:28.1%;height:47.6%}
#scene-lobby.character-ready .lobby-entry-glow{animation:lobbyEntryGlow 1.9s ease-in-out infinite}
#scene-lobby.cue-gallery .glow-gallery,#scene-lobby.cue-cafe .glow-cafe,#scene-lobby.cue-b1 .glow-b1,#scene-lobby.nav-ready .lobby-entry-glow{visibility:visible}
@keyframes lobbyEntryGlow{0%,100%{opacity:.3;filter:brightness(.9)}50%{opacity:1;filter:brightness(1.15)}}
#scene-lobby .lobby-greeting{z-index:5;left:54.85%;bottom:calc(7.5% - 10px);width:23.21%;height:var(--standard-character-stage-height);object-fit:cover;opacity:0;visibility:hidden}
#scene-lobby .lobby-greeting{pointer-events:auto;cursor:pointer}
.character-skip-hotspot{position:absolute;z-index:6;display:block;padding:0;border:0;background:transparent;cursor:pointer}
.home-character-skip{left:49%;top:42%;width:19%;height:50%}
.lobby-character-skip{left:58%;top:27%;width:17%;height:62%}
.aigc-character-skip{left:3%;top:39%;width:21%;height:55%}
.cinema-character-skip{left:8%;top:27%;width:22%;height:52%}
.cafe-character-skip{left:65%;top:25%;width:24%;height:60%}
#scene-lobby.character-ready .lobby-greeting{opacity:1;visibility:visible}
.lobby-ui-button{position:absolute;z-index:8;width:var(--corner-icon-size);aspect-ratio:1;height:auto;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;transition:transform .2s,filter .2s}
.lobby-nav{position:absolute;z-index:8;width:5.35%;aspect-ratio:1;height:auto;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;transition:transform .2s,filter .2s}
#scene-lobby:not(.nav-ready) .lobby-nav{opacity:0;visibility:hidden;pointer-events:none}
#scene-lobby.nav-ready .lobby-nav{opacity:1;visibility:visible;transition:opacity .45s ease,transform .2s,filter .2s}
.lobby-ui-button img,.lobby-nav img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.lobby-ui-button:hover,.lobby-ui-button:focus-visible,.lobby-nav:hover,.lobby-nav:focus-visible{transform:scale(1.09);filter:drop-shadow(0 6px 7px rgba(66,31,20,.28));outline:0}
.lobby-return{left:var(--corner-icon-left);top:var(--corner-icon-top)}.lobby-sound{right:var(--corner-sound-right);top:var(--corner-icon-top)}.lobby-settings{right:var(--corner-settings-right);top:var(--corner-icon-top)}
#scene-lobby .hotspot-aigc{left:14.2%;top:44.1%}
#scene-lobby .hotspot-cafe{right:13.4%;top:44.1%}
#scene-lobby .hotspot-archive{left:calc(48.5% - 3px);bottom:calc(25.5% - 8px);width:5.35%;height:auto}
#scene-lobby .lobby-nav:after{display:none}
#scene-lobby .lobby-nav span{display:none}
.hotspot-aigc>img{animation:lobbyGuideLeft 1.8s ease-in-out infinite}
.hotspot-cafe>img{animation:lobbyGuideRight 1.8s .18s ease-in-out infinite}
.hotspot-archive>img{animation:lobbyGuideDown 1.8s .36s ease-in-out infinite}
.lobby-nav:hover>img,.lobby-nav:focus-visible>img{animation-play-state:paused}
@keyframes lobbyGuideLeft{0%,100%{transform:translateX(0);filter:brightness(1)}50%{transform:translateX(-5%);filter:brightness(1.12)}}
@keyframes lobbyGuideRight{0%,100%{transform:translateX(0);filter:brightness(1)}50%{transform:translateX(5%);filter:brightness(1.12)}}
@keyframes lobbyGuideDown{0%,100%{transform:translateY(0);filter:brightness(1)}50%{transform:translateY(5%);filter:brightness(1.12)}}
@media(prefers-reduced-motion:reduce){.lobby-nav>img,.lobby-entry-glow{animation:none!important}.lobby-entry-glow{opacity:.72}}
.game.lobby-mode>.hud{display:none}
.game.lobby-mode>.dialogue{display:none}
.game.lobby-mode:not(.lobby-intro-complete)>.hint{opacity:0;visibility:hidden;pointer-events:none}
.game.lobby-mode.lobby-intro-complete>.hint{opacity:1;visibility:visible}

/* One shared 16:9 canvas for every page and room. */
.scene,.scene.active{
  inset:auto;
  left:50%;
  top:50%;
  width:min(100vw,177.7778svh);
  height:min(100svh,56.25vw);
}
.scene{transform:translate(-50%,-50%) scale(1.035)}
.scene.active{transform:translate(-50%,-50%) scale(1)}