@import"https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Noto+Sans+KR:wght@500;700;800&display=swap";:root{font-family:Manrope,Noto Sans KR,sans-serif;color:#fff;background:#14201f;--mint: #51d5bf;--gold: #e2b34f}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden;background:url(/assets/backdrop.webp) center/cover}button{font:inherit}.world{position:relative;width:100vw;height:100svh;overflow:hidden}#scene,canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}header{height:68px;padding:0 clamp(12px,4vw,50px);display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:3;left:0;right:0;top:0;background:#12201fdd;border-bottom:1px solid #ffffff38;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.brand{display:flex;align-items:center;gap:10px}.brand>span{width:38px;height:38px;border-radius:50%;background:#090d0d;color:var(--mint);border:3px solid var(--mint);display:grid;place-items:center}.brand svg{width:21px}.brand strong{display:block;font-size:15px}.brand small,.district small{display:block;color:#b8cac4;font-size:9px;text-transform:uppercase}.district{text-align:center}.district strong{font-size:14px}.icon{width:40px;height:40px;border:1px solid #8aa19a;border-radius:5px;background:#20302ed9;color:#fff;display:grid;place-items:center;cursor:pointer}.icon svg{width:18px}.score,.timer{position:absolute;z-index:3;top:88px;background:#13201fe5;border:1px solid #9bb0a9;border-radius:6px;padding:12px;box-shadow:0 10px 35px #0004}.score{left:24px;width:180px}.timer{right:24px;text-align:center;width:82px}.score small,.timer small{display:block;color:#aac0b9;font-size:9px}.score strong{font-size:28px}.timer strong{font-size:28px;color:var(--gold)}.score>div{height:4px;background:#53645e;margin:6px 0}.score i{display:block;height:100%;background:var(--mint)}.score span{font-size:10px;color:#c5d2ce}nav{position:absolute;z-index:3;left:50%;bottom:18px;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#13201fdd;padding:6px;border:1px solid #839992;border-radius:6px;color:#d7e0dc;font-size:10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#joystick{display:none;position:absolute;z-index:4;left:24px;bottom:26px;width:104px;height:104px;border-radius:50%;border:1px solid #ffffff88;background:#13201f88;touch-action:none}#joystick i{position:absolute;width:46px;height:46px;border-radius:50%;background:var(--mint);left:28px;top:28px;box-shadow:0 5px 20px #0006}#notice{position:absolute;z-index:2;left:50%;top:92px;transform:translate(-50%);background:#f4eee0e6;color:#1b2926;padding:8px 12px;border-radius:5px;font-weight:800;font-size:11px}dialog{width:min(370px,88vw);border:1px solid #87a39a;border-radius:6px;background:#14221f;color:#fff;text-align:center;padding:28px;box-shadow:0 30px 100px #000}dialog::backdrop{background:#07100fcc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}dialog small{font-size:10px;color:var(--mint)}dialog h2{margin:5px}dialog p{color:#bbc9c4;font-size:13px}dialog button{width:100%;height:42px;margin-top:12px;border:0;border-radius:5px;background:var(--gold);color:#17201e;font-weight:800}@media(max-width:650px){header{height:58px;padding:0 10px}.brand>span{width:34px;height:34px}.brand strong{font-size:13px}.brand small{display:none}.score{top:70px;left:10px;width:130px;padding:8px}.score strong{font-size:22px}.timer{top:70px;right:10px;padding:8px;width:65px}.timer strong{font-size:22px}nav{display:none}#joystick{display:block}#notice{top:auto;bottom:22px;left:auto;right:12px;transform:none;font-size:9px;max-width:140px}.district small{display:none}}@media(orientation:landscape)and (max-height:600px){header{height:48px;padding:0 10px}.brand small,.district small{display:none}.brand>span{width:32px;height:32px}.score{top:58px;left:10px;width:128px;padding:8px}.score strong,.timer strong{font-size:21px}.timer{top:58px;right:10px;width:62px;padding:8px}nav{display:none}#joystick{display:block;left:20px;bottom:16px;width:92px;height:92px}#joystick i{width:40px;height:40px;left:25px;top:25px}#notice{top:auto;bottom:16px;left:auto;right:12px;transform:none;font-size:9px}}
