:root{font-family:Segoe UI,Arial,sans-serif;color:#f2edff;background:#080717;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden}#world{position:fixed;inset:0;width:100%;height:100%}#ui{position:fixed;inset:0;pointer-events:none}button,input,select{font:inherit}button{cursor:pointer;color:#e9e4ff;background:#27213f;border:1px solid #62517e;border-radius:9px;padding:11px 16px;transition:.15s}button:hover{border-color:#e8a6ff;background:#453260;transform:translateY(-1px)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #5ee5ff;outline-offset:3px}.primary{background:linear-gradient(100deg,#a556e9,#e15cae);border-color:#ebadff;color:#fff;font-weight:700;box-shadow:0 0 28px #ae40d633}.home{pointer-events:auto;position:absolute;left:7%;top:12%;width:510px;padding:36px;background:linear-gradient(110deg,#100c24f5,#100c24bb);border-left:2px solid #d480ff;border-radius:0 24px 24px 0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;color:#b0a3ca}h1{font-size:50px;line-height:1.08;letter-spacing:-2px;margin:26px 0;color:#fff;text-shadow:0 0 35px #ad5bff66}h1 span{display:block;font-size:72px;letter-spacing:8px;color:#e9adff}p{color:#b7aacd;line-height:1.7}.homebuttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:30px 0}.homebuttons .primary{grid-column:span 2;padding:17px}.tag{font-size:10px;color:#9c8baa;margin-top:25px;letter-spacing:1px}small{display:block;font-size:11px;color:#ad9dc2;line-height:1.7}header{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;background:#100c24db;border-bottom:1px solid #73518c55;padding:15px 26px;gap:16px}header b{font-size:15px;letter-spacing:1px}em{font-size:9px;letter-spacing:2px;color:#7ce9dd;font-style:normal;margin-left:10px}nav{display:flex;gap:7px}nav button{font-size:12px;padding:9px 12px;background:#252039aa}.location{position:absolute;top:105px;left:26px;font-size:12px;letter-spacing:3px;text-shadow:0 2px 5px black}.location span{display:block;margin-top:8px;font-size:9px;color:#9a8bba;letter-spacing:2px}footer{display:flex;justify-content:space-between;gap:20px;position:absolute;bottom:0;width:100%;padding:17px 26px;background:#0d0a20e8;font-size:11px;color:#b1a5c7}footer #now{max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dfb3ff}.drawer{pointer-events:auto;position:absolute;right:22px;top:95px;width:370px;max-height:calc(100vh - 165px);overflow:auto;padding:24px;background:#151027f5;border:1px solid #75528b;border-radius:18px;box-shadow:0 20px 90px #0008;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}h2{font-size:23px;letter-spacing:-.6px;margin:16px 0 25px}h2 button{float:right;padding:2px 10px;font-size:24px}label{display:block;font-size:12px;color:#bcafcd;margin:13px 0}input:not([type=checkbox]):not([type=color]),select{display:block;width:100%;margin-top:7px}input[type=text],input:not([type]),select{padding:10px;background:#0d0b1a;border:1px solid #554167;border-radius:7px;color:#f3eaff}input[type=range]{accent-color:#c575ff;cursor:pointer}input[type=checkbox]{accent-color:#d477ff}input[type=color]{display:block;border:0;width:65px;height:35px;padding:0;background:none;margin-top:8px;cursor:pointer}.actiongrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:15px}.actiongrid button{font-size:11px;text-align:left;padding:12px 9px}.row{display:flex;gap:8px;margin:15px 0}.row>*{flex:1}.editor{pointer-events:auto;position:absolute;inset:4% 9%;padding:30px;background:#120e25f5;border:1px solid #72518d;border-radius:22px;overflow:auto;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.editor h2{font-size:30px}.editor h2 span{float:right;font-size:10px;font-weight:400;letter-spacing:1px;color:#b594bd}.editorbody{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:950px;margin:auto}.preview{display:flex;align-items:center;flex-direction:column;justify-content:center;background:radial-gradient(ellipse,#7446aa55,transparent 65%);border:1px solid #5d3d6955;border-radius:20px}.preview canvas{max-width:100%;object-fit:contain}.preview p{font-size:11px;text-align:center;padding:0 20px}.colors{display:flex;justify-content:space-between}.optionwrap .drawer{top:12%;right:calc(50% - 185px)}#prompt{position:absolute;bottom:85px;left:50%;transform:translate(-50%);padding:12px 22px;background:#180f2ce8;border-radius:25px;color:#d8b7fd;font-size:12px;border:1px solid #8d5aa277;white-space:nowrap}#prompt:empty{display:none}.upload{border:1px dashed #9f73c1;padding:12px;border-radius:8px;cursor:pointer}.upload input{font-size:11px}.track{display:flex;gap:3px;margin:5px 0}.track button{padding:7px;font-size:11px}.track button:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;min-width:0}#tracks{max-height:220px;overflow:auto;font-size:12px;color:#a593b7;padding:10px 0}#toast{position:fixed;bottom:65px;left:25px;max-width:450px;background:#27183df5;border:1px solid #946ab7;border-radius:9px;color:#e4c9ff;padding:12px 20px;font-size:12px;pointer-events:none}#toast:empty{display:none}@media(max-width:850px){header{padding:10px;align-items:start}nav{flex-wrap:wrap;justify-content:end}header b{font-size:11px}nav button{padding:7px;font-size:10px}.home{width:min(510px,90%);left:5%;top:7%;padding:25px}h1{font-size:38px}h1 span{font-size:53px}.editor{inset:2%;padding:18px}.editorbody{gap:15px}.preview canvas{width:240px}.drawer{right:10px;top:100px;width:min(370px,95%)}footer{padding:12px;font-size:9px}.location{top:100px;font-size:10px}}.virtual-controls{pointer-events:auto;position:absolute;bottom:49px;left:22px;right:22px;padding:10px 12px;background:#110d23eb;border:1px solid #72518c88;border-radius:14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.virtual-main{display:flex;align-items:center;gap:18px;margin-bottom:8px}.direction-pad{display:flex;gap:5px}.virtual-key{width:44px;height:40px;padding:5px;font-size:22px;touch-action:none;-webkit-user-select:none;user-select:none}.virtual-key.is-held,.virtual-key:active{background:#9752cc;border-color:#e4b4ff;box-shadow:0 0 15px #a856cc66}.virtual-tools{display:flex;gap:6px}.virtual-tools button{font-size:11px;padding:10px 12px}.virtual-main small{margin-left:auto;font-size:10px}.virtual-actions{display:flex;gap:6px;overflow-x:auto;overscroll-behavior:contain;padding:2px 0 5px;scrollbar-width:thin;scrollbar-color:#8e5daf #20152f}.virtual-actions button{flex:0 0 auto;font-size:11px;padding:9px 11px;white-space:nowrap}.virtual-actions button span{color:#d4a5ff;font-weight:700;margin-right:4px}#prompt{bottom:195px}.drawer{max-height:calc(100vh - 295px)}#toast{bottom:195px}@media(max-width:850px){.virtual-controls{left:8px;right:8px;bottom:38px;padding:8px}.virtual-main{gap:8px}.virtual-main small{display:none}.virtual-tools{gap:4px}.virtual-tools button{font-size:10px;padding:9px 6px}.virtual-key{width:36px;height:38px}.direction-pad{gap:3px}.virtual-actions button{font-size:10px}#prompt{bottom:180px;max-width:95%;white-space:normal;text-align:center}.drawer{max-height:calc(100vh - 275px)}}.all-actions{border-color:#c782ef;background:#66348d!important;font-weight:600}.all-actions[aria-pressed=true]{background:#9b3f77!important}.virtual-tools,.virtual-main{flex-wrap:wrap}.actiongrid{margin-top:12px}@media(max-width:850px){.virtual-main{flex-wrap:nowrap}.virtual-tools{flex:1}.virtual-tools .all-actions{flex-basis:100%;padding:6px}.virtual-controls{padding-top:6px}.virtual-main{align-items:center}}.nameplate{position:absolute;transform:translate(-50%,-100%);pointer-events:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 12px;border:1px solid #bc8de9a0;border-radius:14px;background:#140e29dc;color:#f8edff;font-size:12px;font-weight:600;letter-spacing:.3px;text-shadow:0 1px 3px #000;box-shadow:0 0 10px #8e58bb25;z-index:1}.nameplate[hidden]{display:none}header,.virtual-controls,.drawer{z-index:3}#prompt{z-index:2}.npc-name{font-size:11px;border-color:#7ba8c980;background:#102031dd;color:#c5edff;padding:4px 10px}.room-chat{pointer-events:auto;position:absolute;left:22px;bottom:205px;width:300px;border:1px solid #72518c88;border-radius:12px;background:#110d23e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:3;overflow:hidden}.chat-heading{display:flex;justify-content:space-between;align-items:center;padding:8px 12px}.chat-heading b{font-size:12px}.chat-heading button{font-size:10px;padding:4px 8px}.chat-body{padding:0 12px 10px}.chat-body small{font-size:9px}#chat-log{height:130px;overflow:auto;scrollbar-width:thin;margin:8px 0;font-size:11px;line-height:1.6;overflow-wrap:anywhere}.chat-message{margin:4px 0;color:#d0c3dd}.chat-message strong{color:#a5d4f3}#chat-form{display:flex;gap:5px}#chat-form input{margin:0;padding:8px;min-width:0;flex:1;font-size:11px}#chat-form button{padding:7px 10px;font-size:11px}.room-chat.collapsed .chat-body{display:none}.speech-bubble{position:absolute;transform:translate(-50%,-100%);max-width:200px;max-height:85px;overflow:hidden;overflow-wrap:anywhere;padding:7px 10px;border:1px solid #b69cdb88;background:#211735ed;border-radius:12px;color:#f7edff;font-size:11px;line-height:1.45;pointer-events:none;z-index:2}.speech-bubble[hidden]{display:none}@media(max-width:850px){.room-chat{left:8px;bottom:205px;width:240px}.chat-body{padding:0 9px 8px}#chat-log{height:85px}.speech-bubble{max-width:160px;font-size:10px}}@media(max-height:650px){#chat-log{height:65px}.room-chat{bottom:200px}}html,body{width:100%;height:100%;overscroll-behavior:none}#world{touch-action:none}#ui{height:var(--view-height,100dvh);bottom:auto}button{touch-action:manipulation}#chat-input{font-size:16px}@media(max-width:850px),(max-height:500px){:root{--controls-height:158px}header{padding:calc(5px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left));gap:6px}nav{flex-wrap:nowrap;overflow-x:auto;min-width:0;scrollbar-width:none;justify-content:flex-start}nav button{flex:0 0 auto;min-height:40px;padding:8px 10px}header>div{min-width:100px}header b{font-size:10px}header small{max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:9px}header em{display:none}.location{top:100px;left:12px;font-size:9px}.location span{display:none}.virtual-controls{bottom:calc(22px + env(safe-area-inset-bottom));left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));padding:7px}.virtual-main{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:10px;margin-bottom:5px}.direction-pad{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,40px);gap:3px;flex-shrink:0}.virtual-key{width:42px;height:40px;min-height:40px}.dir-w{grid-column:2;grid-row:1}.dir-a{grid-column:1;grid-row:2}.dir-s{grid-column:2;grid-row:2}.dir-d{grid-column:3;grid-row:2}.virtual-tools{display:grid;grid-template-columns:1fr 1fr;gap:5px;flex:0 1 280px}.virtual-tools .all-actions{grid-column:span 2;min-height:36px;font-size:10px;padding:6px}.virtual-tools button{min-height:35px;font-size:10px;padding:7px}.virtual-tools #virtual-cancel{grid-column:span 2;min-height:30px}.virtual-main small{display:none}.virtual-actions button{min-height:38px;padding:8px;font-size:10px}.virtual-actions{padding-bottom:2px}footer{height:calc(22px + env(safe-area-inset-bottom));padding:4px 10px env(safe-area-inset-bottom);font-size:9px}footer>span:first-child{display:none}footer #now{max-width:100%}#prompt{bottom:calc(195px + env(safe-area-inset-bottom));max-width:94%;white-space:normal;padding:8px 12px;font-size:10px}#toast{bottom:calc(225px + env(safe-area-inset-bottom));left:8px;max-width:calc(100% - 16px);padding:8px 12px}.room-chat{left:max(8px,env(safe-area-inset-left));bottom:calc(202px + env(safe-area-inset-bottom));width:min(300px,calc(100% - 16px));z-index:4}.chat-heading{padding:5px 9px}.chat-heading button{min-height:32px}.chat-body{padding:0 9px 8px}#chat-log{height:min(120px,18dvh)}#chat-form button{min-height:40px}#chat-form input{font-size:16px}.chat-body small{font-size:9px}.drawer{top:95px;bottom:calc(195px + env(safe-area-inset-bottom));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));width:auto;max-height:none;padding:16px;z-index:6}.drawer h2{margin:8px 0 14px}.drawer button{min-height:40px}.optionwrap .drawer{top:calc(12px + env(safe-area-inset-top));bottom:calc(12px + env(safe-area-inset-bottom));left:8px;right:8px}.actiongrid button{font-size:11px}#files{max-width:100%}.editor{inset:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));padding:16px}.editor input:not([type=color]),.editor select{font-size:16px}.editor h2{font-size:23px}.editor h2 span{float:none;display:block;margin-top:8px}.editorbody{gap:14px}.editor .row{flex-wrap:wrap}.editor .row button{min-height:44px}.preview canvas{width:200px;height:230px}.preview p{font-size:10px}.chat-typing .room-chat{bottom:calc(8px + env(safe-area-inset-bottom));width:calc(100% - 16px)}.chat-typing .virtual-controls,.chat-typing footer,.chat-typing #prompt{display:none}.chat-typing #chat-log{height:min(120px,25dvh)}}@media(max-width:600px)and (orientation:portrait){header{flex-direction:column;align-items:stretch}header>div{display:flex;align-items:center;justify-content:space-between;gap:8px}header small{max-width:45%;font-size:9px}nav{width:100%}nav button{font-size:10px;padding:7px 9px;min-height:38px}.location{top:90px}.editorbody{grid-template-columns:1fr}.preview{max-height:250px}.preview canvas{width:180px;height:205px}.preview p{margin:0 0 8px}.editor h2{margin:10px 0 15px}.home{top:5%;left:4%;width:92%;max-height:90%;padding:22px;overflow:auto}.home h1{font-size:34px;margin:18px 0}.home h1 span{font-size:46px;letter-spacing:4px}.homebuttons{margin:20px 0}.home small{font-size:10px}.virtual-tools{gap:4px;flex-basis:180px}.virtual-tools button{font-size:9px;padding:6px 4px}.virtual-tools .all-actions{font-size:9px}.drawer{top:90px}.room-chat:not(.collapsed){max-height:calc(var(--view-height,100dvh) - 300px);overflow:auto}.nameplate{font-size:11px;max-width:150px}.speech-bubble{max-width:150px;font-size:10px}}@media(max-height:500px)and (orientation:landscape){header{align-items:center}header>div{max-width:155px}nav{margin-left:auto;max-width:calc(100% - 165px)}nav button{min-height:34px;font-size:10px;padding:6px 9px}.location{top:65px}.virtual-controls{padding:5px}.direction-pad{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(2,32px)}.virtual-key{width:38px;height:32px;min-height:32px}.virtual-tools{display:flex;flex:0 1 auto;gap:5px}.virtual-tools button,.virtual-tools .all-actions,.virtual-tools #virtual-cancel{min-height:38px;font-size:10px;padding:7px 9px}.virtual-main{margin-bottom:2px}.virtual-actions button{min-height:32px;padding:6px 9px}.virtual-actions{padding:0}.room-chat{bottom:calc(142px + env(safe-area-inset-bottom));width:270px}.room-chat:not(.collapsed){max-height:calc(var(--view-height,100dvh) - 195px);overflow:auto}#chat-log{height:55px}#prompt{bottom:calc(145px + env(safe-area-inset-bottom))}.drawer{top:60px;bottom:calc(140px + env(safe-area-inset-bottom));max-height:none;padding:12px}.home{top:4%;left:5%;width:90%;max-height:92%;padding:16px 22px;overflow:auto}.home h1{font-size:25px;margin:8px 0}.home h1 span{display:inline;margin-left:10px;font-size:32px;letter-spacing:3px}.home p{margin:8px 0}.homebuttons{grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}.homebuttons button{padding:8px;min-height:36px}.homebuttons .primary{padding:10px}.tag{margin-top:10px}.editorbody{grid-template-columns:200px 1fr}.preview{align-self:start}.editor h2{margin:8px 0 12px}.optionwrap .drawer{top:8px;bottom:8px}}.admin-note{font-size:11px;line-height:1.6;color:#b8a2ca;margin:10px 0}.music-status{font-size:12px;line-height:1.6;overflow-wrap:anywhere;color:#d9b5ef;margin:12px 0}#music-progress{width:100%;accent-color:#bf78ec;height:9px}.music hr{border:0;border-top:1px solid #62487566;margin:20px 0}#spotify-url{font-size:12px}#admin{border-color:#9f75c0;color:#edc9ff}.music .row{flex-wrap:wrap}.music .row button{min-width:64px;padding:9px 8px}#tracks button{touch-action:manipulation}#spotify-url{display:block;width:100%;padding:10px;margin-top:7px;border:1px solid #554167;border-radius:7px;background:#0d0b1a;color:#f3eaff}.music h2{position:sticky;top:0;z-index:2;background:#151027;padding:8px 0}@media(max-width:850px),(max-height:500px){#spotify-url{font-size:16px}}.online-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:#08061680}.online-lobby{width:min(430px,94%);max-height:92%;overflow:auto;border:1px solid #9067ac;border-radius:18px;padding:26px;background:#171024f5}.online-lobby input{width:100%;padding:11px;border:1px solid #70527c;border-radius:7px;background:#0d0a18;color:#fff;font-size:16px}.online-lobby button{margin:5px 4px 5px 0}.online-lobby hr{border:0;border-top:1px solid #60416e;margin:15px 0}#join-error{font-size:12px;color:#fba7ba}#invite-link{font-size:12px;padding:10px;width:100%;color:#e8d5ff;background:#171020;border:1px solid #68477b}.location #online-status{display:block;color:#d4b5ed;letter-spacing:1px;font-size:10px}#online-admin{margin-top:14px}@media(max-height:500px){.online-lobby{padding:14px 22px;max-width:600px}.online-lobby h2{margin:5px 0}.online-lobby label{margin:6px 0}}
