@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500&display=swap');
*{box-sizing:border-box}body{margin:0;background:#09121d;color:#e1d5bf;font-family:Arial,'Noto Serif KR',serif;overflow:hidden;overscroll-behavior:none}#world{position:fixed;inset:0}canvas{display:block;outline:none}header{position:absolute;top:max(28px,env(safe-area-inset-top));left:5%;pointer-events:none;opacity:.78}h1{margin:0;font-family:'Noto Serif KR',serif;font-size:17px;font-weight:400;letter-spacing:3px}.departure{position:absolute;top:max(32px,env(safe-area-inset-top));right:5%;display:flex;align-items:center;gap:9px;opacity:.7}.departure strong{font-size:12px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:2px}.dot{width:3px;height:3px;background:#d8a664;border-radius:50%;box-shadow:0 0 7px #db993f}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:1px solid #dfbb7e;outline-offset:5px}button:disabled{opacity:.28;cursor:default;pointer-events:none}.controls{position:absolute;z-index:3;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:22px;background:#10191bb0;border:1px solid #dac09517;border-radius:40px;padding:12px 24px;backdrop-filter:blur(14px);white-space:nowrap}.controls button{border:0;padding:0;background:none;display:flex;align-items:center;justify-content:center;gap:6px;color:#b6a78c;min-height:24px}.controls button:hover,.controls button[aria-expanded=true],.controls button[aria-pressed=true]{color:#f0cea0}.controls button svg{width:17px;height:17px;flex-shrink:0}.controls button span{font-size:10px;font-weight:400;letter-spacing:.5px}
.toast{position:absolute;z-index:2;left:50%;bottom:calc(155px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:85vw;margin:0;padding:8px 14px;font-family:'Noto Serif KR',serif;font-size:12px;line-height:1.8;text-align:center;color:#dbd0b9;background:#0c151959;border-radius:20px;pointer-events:none;animation:toast-arrive .4s ease-out both}.toast[hidden]{display:none}@keyframes toast-arrive{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
#chat{position:absolute;z-index:4;bottom:calc(90px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(360px,86vw);display:flex;align-items:center;background:#111d20cf;border:1px solid #d4b58224;border-radius:24px;padding:5px 7px 5px 14px;backdrop-filter:blur(10px)}#chat input{width:100%;padding:9px 0;border:0;background:none;color:#e1d5bf;outline:none;font:inherit;font-size:12px}#chat input::placeholder{color:#918a7b;font-size:11px}#chat:focus-within{border-color:#d4b58266}#chat button{flex-shrink:0;width:30px;height:30px;margin-left:8px;border:0;border-radius:50%;background:#9d7b4640;color:#ddc49d;font-size:18px}#chat button:hover{background:#9d7b4670}
.bubble{position:absolute;left:50%;top:48%;transform:translate(-50%,-100%);font-size:12px;pointer-events:none}.sr{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}
#joystick{display:none;position:fixed;z-index:2;width:82px;height:82px;transform:translate(-50%,-50%);border:1px solid #e4cf9f30;border-radius:50%;background:radial-gradient(circle,#a1844a08,transparent 70%);pointer-events:none;user-select:none}#joystick.active{display:block}#joystick.unavailable{display:none}#stick-knob{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:23px;height:23px;border:1px solid #e0c79550;border-radius:50%;background:#c1a97020;box-shadow:0 0 16px #d5bd8610}
.onboard #world:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 130px 35px #1e120944;pointer-events:none}
@media(max-width:600px){header{top:25px;left:6%}h1{font-size:15px;letter-spacing:2px}.departure{top:28px;right:6%}.departure strong{font-size:11px}.controls{gap:20px;padding:13px 22px}.controls button{flex-direction:column;gap:5px;min-width:26px}.controls button span{font-size:9px}.controls button svg{width:18px;height:18px}.toast{bottom:calc(165px + env(safe-area-inset-bottom));font-size:11px}#chat{bottom:calc(105px + env(safe-area-inset-bottom))}}
/* Words linger, then dissolve into the station air. Animate the inner layer
   so the world-following bubble's projected position stays independent. */
.bubble{padding:0;background:none;border-radius:0;color:#eee1ca;max-width:min(280px,78vw);isolation:isolate}
.bubble-message{display:block;padding:12px 18px;border-radius:15px 15px 15px 2px;background:linear-gradient(125deg,#33332ee8,#242d2cd9);border:1px solid #dbc29b30;box-shadow:0 4px 24px #0002;backdrop-filter:blur(8px);line-height:1.8;overflow-wrap:anywhere;animation:words-arrive .55s ease-out both}
.bubble-message:after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 40% 70%,#d4bea91f,transparent 70%);pointer-events:none}
.bubble.is-dissolving .bubble-message{animation:words-to-mist 2.2s ease-out forwards}
.bubble-dust{position:absolute;inset:0;pointer-events:none}
.bubble-dust i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#dfbc82;box-shadow:0 0 7px 2px #d9ba7540;opacity:0}
.is-dissolving .bubble-dust i{animation:word-dust 1.8s var(--delay) ease-out both}
@keyframes words-arrive{from{opacity:0;filter:blur(4px);transform:translateY(5px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes words-to-mist{0%{opacity:1;filter:blur(0);transform:translate(0,0) scale(1)}35%{opacity:.65;filter:blur(1px)}100%{opacity:0;filter:blur(9px);transform:translate(10px,-25px) scale(1.12)}}
@keyframes word-dust{0%{opacity:0;transform:translate(0,0);filter:blur(0)}18%{opacity:.65}100%{opacity:0;transform:translate(var(--dx),var(--dy));filter:blur(3px)}}
#chat{transition:opacity .4s,filter .4s;animation:chat-awaken .55s ease-out both}
#chat.is-dissolving{animation:chat-to-mist 1.8s ease-out forwards;pointer-events:none}
#chat[hidden],#chat-reveal[hidden]{display:none}
.controls #chat-reveal{position:static;transform:none;animation:none}
@keyframes chat-to-mist{0%{opacity:1;filter:blur(0);transform:translate(-50%,0)}100%{opacity:0;filter:blur(9px);transform:translate(calc(-50% + 7px),-12px)}}
@keyframes chat-awaken{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
@keyframes quiet-in{from{opacity:0}to{opacity:.8}}
@media(prefers-reduced-motion:reduce){.bubble-message,#chat,#chat-reveal{animation:none}.bubble.is-dissolving .bubble-message,#chat.is-dissolving{animation:gentle-fade .3s linear forwards}.bubble-dust{display:none}@keyframes gentle-fade{from{opacity:1}to{opacity:0}}}
@media(max-width:600px){.controls{gap:8px;padding:8px 14px}.controls button{min-width:40px;min-height:44px}}

header{display:flex;align-items:center;gap:18px}#legend-open{pointer-events:auto;border:0;border-bottom:1px solid #c6b28730;background:none;padding:4px 0;color:#b7a98f;font-family:'Noto Serif KR',serif;font-size:10px;letter-spacing:.5px}#legend-open:hover{color:#ecd2a5;border-color:#c6b28799}
#legend{padding:0;width:min(560px,90vw);max-height:84dvh;border:1px solid #d7b88130;border-radius:12px;background:linear-gradient(150deg,#1b2425fa,#0e181cfc);color:#d5cbb7;box-shadow:0 24px 100px #0008;overflow:hidden}#legend::backdrop{background:#030a10b5;backdrop-filter:blur(5px)}#legend[open]{animation:legend-arrive .5s ease-out both}.legend-reading{max-height:84dvh;overflow:auto;overscroll-behavior:contain;padding:40px 45px 32px;scrollbar-width:thin;scrollbar-color:#85704a50 transparent}.legend-mark{display:block;color:#b49a6c;font-size:24px;text-align:center;margin:5px 0 22px}.legend-kicker{text-align:center;font-size:9px;letter-spacing:2px;color:#8c927f;margin:0 0 10px}#legend-title{font-family:'Noto Serif KR',serif;font-size:25px;font-weight:400;text-align:center;letter-spacing:3px;margin:0 0 32px}.legend-prose{font-family:'Noto Serif KR',serif;font-size:14px;line-height:2.25;word-break:keep-all;overflow-wrap:anywhere}.legend-prose p{margin:0 0 23px}.legend-prose p:last-child{color:#e2ccaa;margin-top:30px}#legend-close{position:absolute;z-index:1;top:9px;right:12px;width:36px;height:36px;border:0;background:#172023df;border-radius:50%;font-size:23px;font-weight:400;color:#b9aa90}#legend-close:hover{color:#f0d7b4;background:#715a3033}@keyframes legend-arrive{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@media(max-width:600px){header{gap:14px}#legend-open{font-size:9px}.legend-reading{padding:35px 27px 28px}.legend-prose{font-size:13px;line-height:2.2}#legend-title{font-size:23px}}@media(prefers-reduced-motion:reduce){#legend[open]{animation:none}}
/* Live station controls stay above the scene; only actions remain below. */
.top-tools{position:absolute;z-index:4;top:max(22px,env(safe-area-inset-top));right:4%;display:flex;align-items:center;gap:3px;padding:3px 8px;border:1px solid #dac09526;border-radius:30px;background:#121d1eb0;backdrop-filter:blur(12px)}.top-tools .departure{position:static;opacity:.8;padding:0 12px 0 8px;gap:6px}.top-tools button{background:none;border:0;color:#c6baa1;display:flex;align-items:center;justify-content:center;gap:7px;min-width:37px;height:37px;padding:8px}.top-tools button svg{width:18px;height:18px}.top-tools #sound span{display:none}.top-tools button[aria-pressed=true]{color:#efcb8e}#online-count{font-size:12px;font-variant-numeric:tabular-nums}.top-tools button:hover{color:#ffe0ac}.name-tag,.remote-name{position:absolute;z-index:1;transform:translate(-50%,-100%);white-space:nowrap;pointer-events:none;font-size:10px;line-height:24px;color:#ede1c9;background:#151f20ba;border:1px solid #cdbb8a33;border-radius:18px;padding:0 9px;backdrop-filter:blur(5px)}.name-tag b{font-size:9px;font-weight:400;border-radius:50%;background:#9a9c7755;padding:3px;margin-right:5px}.remote-name{font-size:9px;background:#17212499;border-color:#cdbb8a18}.remote-speech{z-index:2}.bubble-author{display:block;color:#c4b58c;font-size:9px;margin-bottom:3px}.event-toast{position:absolute;z-index:4;top:25%;left:50%;transform:translateX(-50%);max-width:min(440px,84vw);padding:13px 22px;margin:0;border:1px solid #dac69c40;border-radius:28px;background:#151e20c4;backdrop-filter:blur(12px);font-size:12px;color:#e9dec9;line-height:1.7;text-align:center;pointer-events:none}.event-toast[hidden]{display:none}
#settings{width:min(430px,91vw);max-height:85dvh;overflow:auto;padding:0;border:1px solid #d0ba8733;border-radius:15px;background:#142024fa;color:#d5c9b2;box-shadow:0 24px 100px #0008}#settings::backdrop{background:#030a10a8;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:10px;top:9px;width:36px;height:36px;border:0;border-radius:50%;background:none;color:#b8a98f;font-size:23px}.settings-content{padding:38px 29px 25px}.settings-content h2{font:400 23px 'Noto Serif KR',serif;letter-spacing:2px;text-align:center;margin:12px 0 30px}.settings-content label{display:block;font-size:10px;color:#aa9e87;margin-bottom:8px}.nickname-row{display:flex;gap:8px}.nickname-row input{background:#0d171b;border:1px solid #cfb98533;border-radius:8px;padding:12px;color:#e5d7bd;min-width:0;width:100%;font:inherit;font-size:13px;outline:none}.nickname-row input:focus{border-color:#bca776}.nickname-row button{border:1px solid #d3bc8733;border-radius:8px;background:#ab8a4840;padding:0 15px;font-size:11px}.connection-state{font-size:10px;color:#a89b80;line-height:1.8;margin:12px 0 24px}.visit-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #bfa87722;border-bottom:1px solid #bfa87722;padding:20px 0;gap:8px}.visit-stats>div{text-align:center}.visit-stats span{font-size:9px;display:block;color:#a89b80;margin-bottom:12px}.visit-stats strong{font-size:25px;font-weight:400;color:#e4c996;font-variant-numeric:tabular-nums}.stats-note{font-size:9px;color:#79877e;line-height:1.8}.settings-content h3{font-size:11px;font-weight:400;letter-spacing:1px;margin:25px 0 13px}#recent-visitors{list-style:none;padding:0;margin:0}#recent-visitors li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;color:#c8bba2;font-size:11px}#recent-visitors small{font-size:9px;color:#7e8e86}
@media(max-width:600px){header{top:19px;left:5%;display:block}header h1{font-size:14px}#legend-open{margin-top:4px;font-size:9px}.top-tools{top:18px;right:4%;padding:2px 5px}.top-tools .departure{padding:0 6px;font-size:10px}.top-tools .departure strong{font-size:9px;letter-spacing:1px}.top-tools button{min-width:34px;height:36px;padding:7px}.top-tools button svg{width:17px;height:17px}.controls{gap:15px;padding:9px 22px}.controls button{min-width:42px}.event-toast{top:23%;font-size:11px;padding:12px 18px}}
.name-tag{display:inline-flex;align-items:center;gap:7px;padding:2px 10px;color:#efdbb6;border-color:#d0b87c66;line-height:21px}.self-marker{width:4px;height:4px;flex-shrink:0;border-radius:50%;background:#efcb83;box-shadow:0 0 7px #e7bd6b88}.name-tag b{display:none}header{flex-wrap:wrap;max-width:290px;column-gap:18px;row-gap:5px}.sendoff-count{display:block;flex-basis:100%;pointer-events:auto;white-space:nowrap;padding:0;text-align:left;background:none;border:0;color:#9c9986;font-size:9px;letter-spacing:1px;line-height:20px}.sendoff-count i{font-style:normal;margin:0 4px;color:#68756e}.sendoff-count span{color:#c1b396}.sendoff-count:hover{color:#e8ce9d}#nickname-shuffle{padding:0 10px;min-width:38px}#nickname-shuffle svg{width:18px;height:18px}.sendoff-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;padding:16px 0;border-top:1px solid #bfa87722;border-bottom:1px solid #bfa87722;text-align:center}.sendoff-stats span{display:block;font-size:10px;color:#ac9f86;margin-bottom:10px}.sendoff-stats strong{font-size:25px;font-weight:400;color:#ddc28f}.sendoff-stats small{margin-left:5px;color:#8f9c8b;font-size:10px}#departed-passengers{list-style:none;padding:0;margin:0}#departed-passengers li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;color:#c8bba2;font-size:11px}#departed-passengers small,#departed-passengers .empty-list{font-size:9px;color:#7e8e86}@media(max-width:600px){header{max-width:160px}.sendoff-count{font-size:8px;letter-spacing:.5px;line-height:17px;margin-top:3px}.nickname-row{gap:5px}.nickname-row button{padding:0 11px}#nickname-shuffle{padding:0 8px;min-width:34px}}

/* World annotations never expand the page or intercept camera gestures. */
html,body{width:100%;height:100%;overflow:clip}#remote-labels{position:fixed;inset:0;overflow:clip;pointer-events:none}.name-tag,.remote-name,.bubble{position:fixed;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis;pointer-events:none;user-select:none}

#share-dialog{position:relative;width:min(430px,91vw);max-height:85dvh;padding:40px 25px 25px;border:1px solid #d0ba8733;border-radius:15px;background:#142024fa;color:#d5c9b2}#share-dialog::backdrop{background:#030a10a8;backdrop-filter:blur(4px)}#share-dialog h2{font-size:17px;font-weight:400}#share-dialog p{font-size:11px;line-height:1.7;color:#aa9e87}#share-message{display:block;width:100%;height:210px;resize:none;padding:13px;background:#0d171b;border:1px solid #cfb98533;border-radius:8px;color:#d5c9b2;font:12px/1.8 inherit}#share-copy{width:100%;margin-top:15px;padding:12px;border:1px solid #d3bc8733;border-radius:8px;background:#ab8a4840;font-size:12px}@media(max-width:380px){.top-tools .departure{position:absolute;top:47px;right:0;padding:7px 10px;border-radius:18px;background:#121d1eb0}}