:root{font-family:Inter,Arial,sans-serif;color:#f4f7ff;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:#121d33;overflow:hidden}canvas{width:100vw;height:100dvh;display:block;touch-action:none}header{position:absolute;top:0;left:0;right:0;padding:24px 30px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}header a{color:#fff;text-decoration:none;font-size:11px;letter-spacing:2px;font-weight:800;pointer-events:auto}.brand{font-size:24px;font-weight:950;letter-spacing:-1px}.brand span{color:#ff765f}.brand small{display:block;font-size:8px;letter-spacing:3px;text-align:center;margin-top:4px}#connection{font-size:9px;letter-spacing:1px;color:#8ce8cd;background:#102a30dd;padding:9px 12px;border-radius:20px}#stats{position:absolute;top:102px;left:28px;display:flex;gap:22px;background:#111e32db;border:1px solid #ffffff18;border-radius:18px;padding:18px 22px;backdrop-filter:blur(12px)}small{font-size:9px;letter-spacing:1.5px;display:block;color:#a9b8cc}#stats strong{display:block;font-size:25px;margin-top:7px}.clock strong{color:#ffd087}aside{position:absolute;top:102px;right:28px;background:#111e32db;border:1px solid #ffffff18;border-radius:18px;width:230px;padding:18px 20px;backdrop-filter:blur(12px)}h2{font-size:10px;letter-spacing:2px;margin:0 0 16px;color:#a9b8cc}ol{padding:0;margin:0;list-style:none}li{display:flex;justify-content:space-between;gap:8px;padding:7px 0;font-size:12px}li.me{color:#ff9983}li b{font-variant-numeric:tabular-nums}aside p{font-size:10px;color:#8194ac;border-top:1px solid #ffffff12;padding-top:12px;margin-bottom:0}#hint{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#111e32c9;padding:12px 20px;border-radius:30px;font-size:11px;color:#ced8e6}.modal{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);background:#101c30ed;border:1px solid #ffffff24;border-radius:26px;padding:35px 40px;width:min(450px,90vw);box-shadow:0 25px 100px #08101e80;backdrop-filter:blur(20px)}.eyebrow{font-size:9px;letter-spacing:3px;color:#7de4c7;font-weight:800}h1{font-size:45px;line-height:1.05;letter-spacing:-2px;margin:20px 0}h1 em{font-style:normal;color:#ff8870}.modal p{font-size:13px;color:#b9c6d8;line-height:1.8}.modal label{display:block;font-size:9px;letter-spacing:2px;margin:24px 0 8px}.modal input{background:#ffffff08;border:1px solid #ffffff25;border-radius:10px;color:white;padding:13px 15px;width:100%;font:inherit}.modal button{cursor:pointer;width:100%;margin:14px 0 17px;border:0;padding:16px;background:#ff795f;border-radius:11px;font-size:12px;font-weight:900;letter-spacing:2px;color:#1f1b25;box-shadow:0 7px 25px #ff795f20}.modal button:disabled{opacity:.5;cursor:wait}.modal small{font-size:9px;letter-spacing:.3px;text-align:center}#joystick{display:none;position:absolute;width:100px;height:100px;border:2px solid #ffffff55;border-radius:50%;background:#15223d55;pointer-events:none}#joystick i{display:block;width:38px;height:38px;position:absolute;left:29px;top:29px;background:#ff977a99;border-radius:50%}#toast{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);font-size:13px;color:#fff;background:#142338dd;border-radius:10px;padding:10px 18px;display:none}[hidden]{display:none!important}@media(max-width:650px){header{padding:16px}.brand{font-size:19px}header a{font-size:8px;letter-spacing:1px}#connection{font-size:8px;padding:7px}#stats{left:12px;top:78px;gap:16px;padding:12px 16px}#stats strong{font-size:20px}#stats small{font-size:8px}aside{top:78px;right:12px;width:140px;padding:12px}aside h2{font-size:8px;margin-bottom:8px}li{font-size:10px;padding:5px 0}aside p{font-size:8px}.modal{padding:27px}h1{font-size:39px}#hint{font-size:9px;white-space:normal;text-align:center;width:90%;bottom:15px}#stats>div:last-child{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.city-badge{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:8px 18px;border-radius:30px;background:#142432da;color:#fff3d4;font:700 13px system-ui;pointer-events:none;z-index:3}.city-select{display:block;width:100%;margin-top:14px;padding:12px;border:1px solid #76c9c9;border-radius:12px;background:#152b39;color:white;font:600 16px system-ui}

.city-badge{bottom:auto;top:73px;font-size:15px;letter-spacing:1px;background:#13273def;z-index:10;white-space:nowrap}#city-minimap{position:fixed;right:28px;bottom:90px;width:180px;padding:10px;background:#102236ed;border:1px solid #7db6b777;border-radius:16px;z-index:4;color:#fff}#city-minimap strong{display:block;text-align:center;font:700 14px system-ui;margin-bottom:6px}#city-minimap canvas{width:160px;height:160px;display:block;border-radius:8px}#city-minimap small{margin-top:6px;text-align:center;font:10px system-ui;letter-spacing:0;color:#afffee}#spawn-protection{position:fixed;top:112px;left:50%;transform:translateX(-50%);padding:8px 14px;background:#125565e8;border:1px solid #aaffef;border-radius:20px;color:#d5fff4;font:700 13px system-ui;z-index:10}@media(max-width:650px){.city-badge{top:52px;font-size:12px;padding:5px 12px}#city-minimap{right:10px;bottom:145px;width:124px;padding:7px}#city-minimap canvas{width:108px;height:108px}#city-minimap strong{font-size:11px}#city-minimap small{font-size:9px}#spawn-protection{top:145px;font-size:11px;padding:6px 10px}}
.modal{z-index:20}@media(max-width:650px){#spawn-protection{left:12px;top:153px;transform:none}}

#city-minimap button{display:block;width:100%;border:0;background:none;color:#fff;padding:0 0 5px;font:700 14px system-ui;cursor:pointer}#city-minimap .district-name{font-size:9px;line-height:1.3;margin:0 0 7px;color:#c2d3d8}#city-minimap .landmark-list{display:none}#city-minimap.expanded{width:min(530px,calc(100vw - 24px));top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);max-height:90vh;overflow:auto;z-index:510;box-shadow:0 0 0 100vmax #07121cc9;padding:16px}#city-minimap.expanded canvas{width:100%;height:auto;aspect-ratio:1}#city-minimap.expanded .landmark-list{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:10px 0 0;padding:0;list-style:none;color:#f6dfac}#city-minimap.expanded li{display:block;padding:2px;font:12px system-ui}@media(max-width:650px){#city-minimap button{font-size:11px}#city-minimap .district-name{font-size:8px}#city-minimap.expanded .landmark-list{grid-template-columns:1fr}}