@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Jua&display=swap');
:root{color-scheme:dark;--night:#1d1e38;--panel:#282943;--ink:#f6f1df;--muted:#aaa9c2;--mint:#a9d6ad;--gold:#f5cc7d}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#17182e;color:var(--ink);font:14px 'Gowun Dodum',sans-serif}body{min-height:100dvh}.world-app{min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 42%,#383957,#1a1b33 75%)}.topbar{height:58px;flex:none;display:flex;align-items:center;gap:18px;padding:0 22px;background:#1b1c35;border-bottom:1px solid #ffffff15}.brand{color:#fff1cb;text-decoration:none;font:20px Jua,sans-serif}.place{font:13px Jua,sans-serif;color:#d8d2ef;border:1px solid #ffffff20;border-radius:20px;padding:6px 12px}.online{font-size:11px;color:#bbb9cb}.online i,.world-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#96d3a5;margin-right:6px;box-shadow:0 0 8px #96d3a577}.identity{margin-left:auto;font:12px Jua,sans-serif;background:#34334e;padding:8px 12px;border-radius:12px}.world-wrap{position:relative;flex:1;min-height:540px;overflow:hidden;margin:0 auto;width:min(100%,1400px);padding:0 18px}#phaser-canvas{position:absolute;inset:0 18px}#phaser-canvas canvas{width:100%!important;height:100%!important;object-fit:contain;image-rendering:pixelated;touch-action:none}.world-tip,.world-status{position:absolute;z-index:2;top:18px;padding:9px 12px;border:1px solid #ffffff20;border-radius:12px;background:#252642dc;color:#e6e1d4;font-size:11px;backdrop-filter:blur(8px)}.world-tip{left:34px}.world-status{right:34px}.world-status i{background:#eccb7c}.world-status.connected i{background:#96d3a5}.chat-panel{position:absolute;z-index:3;right:30px;bottom:25px;width:min(310px,35vw);padding:13px;background:#20213ceF;border:1px solid #ffffff26;border-radius:16px;box-shadow:0 12px 36px #0c0d2080}.chat-title{font:13px Jua,sans-serif;display:flex;justify-content:space-between}.chat-title span{font:10px 'Gowun Dodum';color:#a6d4a9}.chat-lines{height:100px;overflow:auto;margin:8px 0;color:#d0cee0;font-size:11px;line-height:1.55}.chat-lines p{margin:4px 0}.chat-lines b{color:#f2cf8a;margin-right:5px}#chat-form{display:flex;gap:6px}#chat-input{min-width:0;flex:1;background:#33334f;border:1px solid #ffffff18;border-radius:9px;padding:9px;color:white;font:11px 'Gowun Dodum'}#chat-form button{background:#a590d9;border:0;border-radius:9px;padding:0 12px;color:#211e39;font:11px Jua,sans-serif}.footer{flex:none;min-height:38px;padding:8px 22px;display:flex;justify-content:space-between;gap:15px;color:#a09eb5;font-size:10px;border-top:1px solid #ffffff12}.mobile-pad{display:none}@media(max-width:680px){.topbar{height:52px;padding:0 12px;gap:8px}.brand{font-size:17px}.place{font-size:10px;padding:5px 8px}.online{font-size:9px}.identity{font-size:10px;padding:7px}.world-wrap{min-height:calc(100dvh - 90px);padding:0}#phaser-canvas{inset:0}.world-tip{left:9px;top:9px;font-size:9px;padding:7px 9px;max-width:65%}.world-status{right:9px;top:9px;font-size:9px;padding:7px 8px}.chat-panel{right:9px;bottom:12px;width:min(255px,67vw);padding:10px;border-radius:13px}.chat-lines{height:66px;font-size:10px}.mobile-pad{display:flex;position:absolute;z-index:4;left:12px;bottom:19px;flex-direction:column;align-items:center;gap:4px}.mobile-pad>button,.mobile-pad div button{width:38px;height:36px;background:#282945dd;border:1px solid #ffffff35;border-radius:10px;color:#fff0cd;touch-action:none}.mobile-pad>div{display:flex;gap:4px}.footer{font-size:9px;padding:6px 10px}.footer span:first-child{max-width:70%}}

/* v4: interaction and touch feedback */
.mobile-pad button{font-size:16px;box-shadow:0 4px 12px #10112477;touch-action:none;user-select:none;-webkit-user-select:none}.mobile-pad button:active{transform:scale(.94);background:#7567a9}.world-tip{max-width:min(390px,70vw)}#phaser-canvas canvas{display:block}

@media(max-width:680px){.world-status{right:8px;max-width:calc(100vw - 20px)}.chat-panel{right:8px;left:auto;width:min(238px,calc(100vw - 150px))}}

@media(max-width:680px){.chat-panel{position:absolute!important;left:150px!important;right:8px!important;bottom:45px!important;width:calc(100vw - 158px)!important;max-width:232px!important;min-width:150px!important}.world-status{display:none!important}}

/* v5: accessible venue interactions */
.venue-panel[hidden]{display:none}.venue-panel{position:absolute;z-index:5;top:72px;left:30px;width:min(330px,calc(100% - 60px));padding:16px 18px 12px;background:#20213cf5;border:1px solid #ffffff30;border-radius:16px;box-shadow:0 14px 42px #0b0c2088;backdrop-filter:blur(12px)}.venue-panel h2{margin:0 34px 6px 0;color:#f3d18b;font:18px Jua,sans-serif}.venue-panel p{margin:6px 0;color:#dedbea;font-size:12px;line-height:1.55}.venue-close{position:absolute;right:10px;top:8px;width:30px;height:30px;border:1px solid #ffffff25;border-radius:9px;background:#ffffff10;color:#fff2d1;font-size:20px}.venue-actions{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 8px}.venue-actions button{min-height:38px;padding:8px 12px;border:1px solid #ffffff28;border-radius:10px;background:#383753;color:#fff1d0;font:12px Jua,sans-serif;cursor:pointer}.venue-actions button:hover,.venue-actions button:focus-visible{background:#665b91;outline:2px solid #f5cc7d;outline-offset:2px}.venue-actions button:disabled{opacity:.6}.venue-panel .venue-footnote{color:#aaa9c2;font-size:10px}.venue-panel .venue-feedback{min-height:18px;color:#b9dfa9;font:12px Jua,sans-serif}@media(max-width:680px){.venue-panel{top:62px;left:10px;width:min(330px,calc(100% - 20px));max-height:42dvh;overflow:auto;padding:13px 14px 10px}.venue-panel h2{font-size:16px}.venue-actions{gap:6px}.venue-actions button{min-height:40px;padding:8px 10px}}

/* v6 venue graphics depth and pixel details */
.world-tip,.world-status,.chat-panel,.venue-panel{backdrop-filter:blur(10px)}

/* v7: route and collision feedback */

/* v8 device wardrobe feedback */

/* v9 quick social reactions and mobile install */
.topbar{position:relative}.install-button{border:1px solid #ffffff35;border-radius:10px;background:#a590d9;color:#211e39;padding:8px 12px;font:12px Jua,sans-serif;cursor:pointer}.install-button[hidden]{display:none}
.emote-bar{position:absolute;z-index:3;left:50%;bottom:27px;transform:translateX(-50%);display:flex;gap:7px;padding:7px;border:1px solid #ffffff26;border-radius:14px;background:#20213ceF;box-shadow:0 8px 24px #0c0d2066}.emote-bar button{width:40px;height:38px;border:1px solid #ffffff20;border-radius:10px;background:#363550;color:white;font-size:20px;cursor:pointer;touch-action:manipulation}.emote-bar button:hover,.emote-bar button:focus-visible{background:#675c91;outline:2px solid #f5cc7d;outline-offset:2px}.emote-bar button:disabled{opacity:.55}
@media(max-width:680px){.install-button{margin-left:auto;padding:7px 9px;font-size:10px}.emote-bar{left:50%;bottom:auto;top:57px;padding:5px;gap:4px}.emote-bar button{width:35px;height:34px;font-size:18px}.chat-panel{bottom:48px!important}}
@media(max-width:420px){.topbar{gap:5px;padding-inline:8px}.identity{display:none}.place{white-space:nowrap;padding-inline:7px}.online{white-space:nowrap}.install-button{padding-inline:7px}}
@media(max-width:680px){.mobile-pad{left:10px;bottom:18px}.mobile-pad>button,.mobile-pad div button{width:44px;height:44px}.chat-panel{left:158px!important;right:8px!important;width:calc(100vw - 166px)!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}