*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#1a1d2c;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid white;outline-offset:3px}#app{position:relative;overflow:hidden;margin:auto;width:min(100%,520px);height:100%;height:100dvh;background:#75c2d0;box-shadow:0 0 80px #0006}#world{width:100%;height:100%;display:block}.hidden{display:none!important}.editor{position:absolute;inset:0;display:flex;flex-direction:column;background:linear-gradient(155deg,#632ea7 0%,#8f4cd0 48%,#b775e3 100%);overflow:hidden}.editor:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;background:repeating-linear-gradient(135deg,transparent 0 35px,#37215e 35px 70px);mask-image:linear-gradient(to bottom,#000,transparent 55%)}.editor-header{position:relative;text-align:center;padding:calc(env(safe-area-inset-top) + 17px) 16px 0;color:white;text-shadow:0 3px 0 #21172d,-2px -2px 0 #21172d,2px -2px 0 #21172d,-2px 2px 0 #21172d,2px 2px 0 #21172d}.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:900;color:#edcaff}.editor h1{font-size:27px;line-height:1;margin:6px 0 0;font-weight:1000}.preview-area{position:relative;flex:1;min-height:155px;max-height:300px;display:grid;place-items:center;overflow:hidden}.preview-glow{position:absolute;width:220px;height:220px;border-radius:50%;background:#e8acfa;filter:blur(35px);opacity:.38}.preview-area:after{content:"";position:absolute;width:65%;height:28px;bottom:10%;border-radius:50%;background:#39205155;filter:blur(4px)}#preview{position:relative;width:min(100%,360px);height:100%;z-index:1;object-fit:contain;image-rendering:auto}.preview-stars{position:absolute;inset:20% 16%;display:flex;justify-content:space-between;color:#eec7ff;font-size:25px;opacity:.7}.preview-stars span{align-self:end}.square{display:grid;place-items:center;width:50px;height:50px;border:3px solid #161522;border-radius:13px;color:white;background:linear-gradient(#8f7ec5,#5b4c94);box-shadow:0 4px 0 #161522,inset 0 3px #ffffff55}.square:active,.play:active,.choice:active{transform:translateY(2px);box-shadow:0 2px 0 #161522}.square svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}.random{position:absolute;right:20px;bottom:20px;z-index:2}.wardrobe{position:relative;display:flex;flex-direction:column;min-height:0;height:43%;max-height:370px;padding:11px 13px 0;background:#282640;border-top:4px solid #171625;box-shadow:0 -4px 0 #ddd0f233}.tabs{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:0 1px 8px;flex-shrink:0}.tabs::-webkit-scrollbar{display:none}.tab{flex:0 0 48px;height:48px;padding:5px;border:3px solid #161522;border-radius:11px;background:#5a567e;box-shadow:inset 0 2px #ffffff45}.tab[aria-selected=true]{background:#d1b7fa;box-shadow:inset 0 2px #fff,0 2px 0 #161522}.tab img{width:100%;height:100%;object-fit:contain}.choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;overflow-y:auto;align-content:start;padding:3px 1px 12px;overscroll-behavior:contain}.choice{position:relative;min-width:0;aspect-ratio:1;border:3px solid #171522;border-radius:11px;background:linear-gradient(145deg,#eee9f6,#bdb5d1);box-shadow:inset 0 2px #fff7,0 2px 0 #171522;display:grid;place-items:center;padding:6px}.choice.selected{background:linear-gradient(145deg,#f9e98e,#f2b950);outline:2px solid #fff2aa;outline-offset:-5px}.choice img{width:100%;height:100%;object-fit:contain;image-rendering:auto}.choice .none{font-size:25px;font-weight:900;color:#777}.color-swatch{display:block;border:3px solid #2a2232;border-radius:50%;width:75%;aspect-ratio:1;box-shadow:inset 0 3px #ffffff77}.editor-footer{position:relative;padding:10px 14px calc(env(safe-area-inset-bottom) + 14px);background:#282640}.play{width:100%;height:51px;border:3px solid #161522;border-radius:12px;background:linear-gradient(#a8ea63,#6dbb3b);box-shadow:inset 0 3px #d6ff9d,0 4px 0 #161522;color:#fff;font-size:20px;font-weight:1000;text-shadow:-2px -2px #26351e,2px -2px #26351e,-2px 2px #26351e,2px 2px #26351e}.play span{padding-left:8px}.hud{position:absolute;inset:0;pointer-events:none}.location-label{position:absolute;top:calc(env(safe-area-inset-top) + 19px);left:17px;padding:8px 13px;border:3px solid #182124;border-radius:10px;background:#f5e8bf;color:#263128;font-size:12px;font-weight:1000;letter-spacing:.09em;box-shadow:0 3px #182124}.location-label span{color:#e6a530}.customize{position:absolute;right:18px;top:calc(env(safe-area-inset-top) + 17px);pointer-events:auto}.joystick{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 28px);left:25px;width:112px;height:112px;border:4px solid #162923aa;border-radius:50%;background:#1d333255;box-shadow:inset 0 2px 9px #0003;pointer-events:auto;touch-action:none}.stick{position:absolute;left:31px;top:31px;width:42px;height:42px;border:3px solid #1d2824;border-radius:50%;background:#f6edd4d9;box-shadow:inset 0 3px #fff9,0 3px #0005;pointer-events:none}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#6535a1;color:white;font-weight:900}.loading.done{display:none}@media(max-height:600px){.editor-header{padding-top:6px}.editor h1{font-size:21px}.preview-area{min-height:95px}.wardrobe{height:43%}.editor-footer{padding-top:6px;padding-bottom:7px}.play{height:44px}.tab{height:42px;flex-basis:42px}.choices{grid-template-columns:repeat(7,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}