*{box-sizing:border-box}body{margin:0;min-height:100svh;background:#244a46;color:#fff;font:15px system-ui,sans-serif;overflow:hidden}main{width:min(100vw,calc(100svh * 1.5));height:min(100svh,calc(100vw / 1.5));position:absolute;inset:0;margin:auto}canvas{width:100%;height:100%;display:block;image-rendering:pixelated;background:#70be77}#hud{position:absolute;inset:12px 12px auto;display:flex;justify-content:space-between;text-shadow:0 2px #245}#online{background:#173c3aa8;padding:7px 10px;border-radius:9px}button{border:0;border-radius:9px;background:#f7c75b;color:#263535;padding:9px 14px;font-weight:800;font-size:14px;cursor:pointer}#chat{position:absolute;bottom:10px;left:10px;width:min(330px,calc(100% - 20px))}#messages{height:92px;overflow:hidden;display:flex;justify-content:end;flex-direction:column;gap:3px;text-shadow:1px 2px #163c35}.message{background:#173c3a9b;border-radius:7px;padding:3px 7px;width:max-content;max-width:100%}form{margin-top:6px;display:flex;gap:5px}input{min-width:0;border:0;border-radius:8px;padding:9px;font:inherit;width:100%}#joystick{display:none}dialog{border:0;background:transparent;padding:15px;max-width:420px;width:95%;color:#253735;text-align:center}dialog::backdrop{background:#102b2bcc}.welcome{background:#fff4d4;border:5px solid #704a32;border-radius:16px;padding:25px;box-shadow:0 8px #493223}.welcome h1{font-size:32px;margin:3px}.welcome h2{margin-top:0}.welcome label{display:block;text-align:left;margin:14px 0;font-weight:bold}.welcome input{border:2px solid #d1a96d;margin-top:5px}.welcome button{width:100%;margin:10px 0}.welcome small{display:block;color:#6a5a47}.leaf{font-size:30px;color:#4d9c64}@media(pointer:coarse){main{width:100vw;height:100svh}.game{object-fit:fill}#joystick{display:block;position:absolute;left:max(22px,env(safe-area-inset-left));bottom:max(26px,env(safe-area-inset-bottom));width:118px;height:118px;border:2px solid #ffffff55;border-radius:50%;background:#173c3a33;touch-action:none}#stick{position:absolute;width:52px;height:52px;left:31px;top:31px;border-radius:50%;background:#ffffff66;border:2px solid #ffffff88;box-shadow:0 2px 8px #0003}#chat{left:auto;right:10px;bottom:max(12px,env(safe-area-inset-bottom));width:min(270px,calc(100% - 155px))}#messages{height:52px}#chat form button{display:none}#chat input{background:#ffffffe8;padding:10px}.welcome{max-height:90svh;overflow:auto}}
@media (pointer:coarse){main{width:92vw;height:auto;aspect-ratio:3/2;max-height:88svh}canvas{object-fit:fill}}
@media (pointer:coarse) and (orientation:portrait){body{background:#07090c}main{width:100vw;height:100svh;max-height:none;aspect-ratio:auto}canvas{position:absolute;top:12px;left:12px;width:calc(100vw - 24px);height:auto;aspect-ratio:3/2;border:2px solid #1d252b;border-radius:10px;box-shadow:0 5px 18px #0008}#hud{inset:20px 20px auto}#joystick{left:max(26px,env(safe-area-inset-left));top:calc(66.666vw + 54px);bottom:auto}#chat{top:calc(66.666vw + 14px);bottom:auto;right:12px;width:calc(100vw - 166px)}#messages{height:38px}#chat input{font-size:16px}.welcome{max-height:88svh}}
#voice[aria-pressed="true"]{background:#8ee1a1;color:#173c3a}
#cameraFrame{position:absolute;z-index:2;right:12px;top:54px;width:156px;padding:4px;background:#172d32;border:2px solid #f7c75b;border-radius:10px;box-shadow:0 4px 12px #0008}#cameraFrame video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;transform:scaleX(-1);background:#101518}#cameraFrame span{position:absolute;z-index:1;left:9px;top:8px;padding:2px 5px;border-radius:4px;background:#173c3acc;color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em}#closeCamera{position:absolute;z-index:2;right:-9px;top:-10px;width:25px;height:25px;padding:0;border:2px solid #fff;border-radius:50%;background:#d8655b;color:#fff;font-size:18px;line-height:18px}@media (pointer:coarse) and (orientation:portrait){#cameraFrame{top:58px;right:20px;width:112px}}
#remoteCameras{position:absolute;z-index:2;right:12px;top:54px;display:flex;flex-direction:column;gap:8px}.remoteCamera{position:relative;width:156px;padding:4px;background:#172d32;border:2px solid #8ee1a1;border-radius:10px;box-shadow:0 4px 12px #0008}.remoteCamera video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:#101518}.remoteCamera span{position:absolute;left:9px;top:8px;padding:2px 5px;border-radius:4px;background:#173c3acc;color:#fff;font-size:10px;font-weight:800}@media (pointer:coarse) and (orientation:portrait){#remoteCameras{top:148px;right:20px}.remoteCamera{width:112px}}
#remoteCameras{right:176px}@media (pointer:coarse) and (orientation:portrait){#remoteCameras{top:58px;right:142px}}
#miniCamera,.remoteCamera .miniCamera{position:absolute;z-index:2;right:18px;top:-10px;width:25px;height:25px;padding:0;border:2px solid #fff;border-radius:50%;background:#527a9d;color:#fff;font-size:18px;line-height:18px}.remoteCamera .miniCamera{right:-9px}.minimized{width:68px!important;min-height:28px}.minimized video{display:none!important}.minimized span{position:static!important;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent!important}.minimized .miniCamera{right:-9px!important}#chatToggle{display:none}@media (pointer:coarse) and (orientation:portrait){#joystick{top:auto;bottom:max(24px,env(safe-area-inset-bottom));left:max(24px,env(safe-area-inset-left))}#cameraFrame{top:calc(66.666vw + 38px);right:14px;width:86px}#remoteCameras{top:calc(66.666vw + 38px);right:110px;flex-direction:row-reverse;align-items:flex-start;max-width:calc(100vw - 130px);flex-wrap:wrap}.remoteCamera{width:86px}#chatToggle{display:block;position:absolute;z-index:3;right:20px;bottom:max(34px,env(safe-area-inset-bottom));width:54px;height:54px;padding:0;border:3px solid #f1b849;border-radius:50%;background:#b85d58;color:#fff;font-size:22px;box-shadow:0 3px #713d3b}#chat{display:none;top:auto;bottom:100px;right:12px;width:min(270px,calc(100% - 145px))}#chat.chatOpen{display:block}#chat.chatOpen #messages{height:46px}.minimized{width:60px!important}}
#models{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}#models button{padding:7px 3px;background:#d8e7d4;border:2px solid transparent}#models button.selected{background:#f7c75b;border-color:#704a32}#colors{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin:8px 0}#colors label{font-size:11px;margin:0}#colors input{padding:1px;height:30px}#genderChoice{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:7px 0 12px}#genderChoice button{padding:7px 4px;background:#d8e7d4;border:2px solid transparent}#genderChoice button.selected{background:#f7c75b;border-color:#704a32}.closetName{margin:0 0 10px!important}.closetName input{margin-top:3px!important}
/* Hallmark · component: character-closet · genre: playful · theme: village wardrobe */
.closet{max-width:680px;padding:20px}.closetTitle{display:flex;align-items:center;justify-content:center;gap:12px;text-align:left}.closetTitle h1{margin:0;font-size:30px}.closetTitle p{margin:2px 0 10px;color:#6a5a47}.closetTitle .leaf{font-size:42px}#fittingRoom{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;align-items:stretch;text-align:left}.avatarStage{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:308px;padding:10px;border:3px solid #704a32;border-radius:13px;background:#dbe9d8;box-shadow:inset 0 0 0 5px #f8e8bd}.avatarStage>span{align-self:stretch;padding:4px 7px;border-radius:5px;background:#704a32;color:#fff4d4;font-size:11px;font-weight:900;letter-spacing:.08em}.avatarStage canvas{width:192px;height:192px;image-rendering:pixelated;filter:drop-shadow(0 6px 0 #98b99b)}.avatarStage small{margin-top:4px;text-align:center;color:#6a5a47}.wardrobe{padding:3px 0}.wardrobeGroup{margin:0 0 10px;padding:8px;border:2px solid #d1a96d;border-radius:10px;background:#fff8e7}.wardrobeGroup>b{display:block;color:#704a32;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.closet #genderChoice{margin:7px 0 0}.closet #models{margin:7px 0 0}.closet #models button{font-size:11px;line-height:1.1}.closet #colors{margin:7px 0 0}.closet #enter{margin:12px 0 8px;background:#6aaf70;color:#fff;box-shadow:0 3px #3d7249}.closet #enter:hover,.closet #enter:focus-visible{background:#4c9558}.closet button:focus-visible{outline:3px solid #3e769e;outline-offset:2px}@media(max-width:540px){.closet{padding:14px}.closetTitle h1{font-size:25px}#fittingRoom{grid-template-columns:1fr}.avatarStage{min-height:220px}.avatarStage canvas{width:150px;height:150px}.wardrobeGroup{padding:7px}.closet #models{grid-template-columns:repeat(3,minmax(0,1fr))}.closet #models button{padding:8px 2px}.closet #colors{grid-template-columns:repeat(3,minmax(0,1fr))}.closet #colors label{font-size:10px}.closet #colors input{width:100%;height:28px}.closetTitle{justify-content:flex-start}}