*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:system-ui,Segoe UI,Roboto,sans-serif;color:#fff;touch-action:none}
canvas{display:block}.hidden{display:none!important}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#3a0b2a,#07020a 70%);z-index:50;overflow:auto}
.card{max-width:420px;padding:28px;text-align:center;background:#000a;border:1px solid #ff2e88;border-radius:16px;box-shadow:0 0 40px #ff2e8855;margin:12px}
.card.wide{max-width:560px}.mx{letter-spacing:6px;color:#00e5ff;font-weight:800;text-shadow:0 0 12px #00e5ff}
.logo{font-size:40px;line-height:1;color:#ff2e88;text-shadow:0 0 18px #ff2e88;margin:14px 0}.sub{color:#ffb347}.small{font-size:12px;opacity:.75}
button,.card button{display:block;width:100%;margin:8px 0;padding:12px;border-radius:10px;border:0;background:linear-gradient(90deg,#ff2e88,#ff7a00);color:#fff;font-weight:700;font-size:15px;cursor:pointer}
button.ghost{background:#ffffff14;border:1px solid #ffffff33}
label{display:block;text-align:left;margin:8px 0;font-size:13px}input,select{width:100%;margin-top:4px;padding:8px;border-radius:8px;border:1px solid #ffffff33;background:#111;color:#fff}
.tut{text-align:left;line-height:1.5}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#stats{position:absolute;left:10px;top:10px;background:#0009;padding:8px 10px;border-radius:10px;font-size:12px;min-width:190px}
.bar{height:7px;background:#333;border-radius:4px;margin:2px 0 5px;overflow:hidden}.bar i{display:block;height:100%}
#clock{position:absolute;right:10px;top:10px;background:#0009;padding:8px 12px;border-radius:10px;font-weight:700}
#feed{position:absolute;right:10px;top:52px;width:250px;font-size:11px}#feed div{background:#000a;margin-bottom:4px;padding:6px;border-left:3px solid #ffb347;border-radius:4px}
#quest{position:absolute;left:10px;top:150px;background:#000a;padding:8px 10px;border-radius:10px;font-size:12px;max-width:240px;border:1px solid #00e5ff55}
#minimap{position:absolute;right:10px;bottom:10px;width:140px;height:140px;border-radius:12px;border:2px solid #ff2e88;background:#000c;pointer-events:auto}
#districtTag{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:#000a;padding:6px 14px;border-radius:20px;font-size:13px;border:1px solid #00e5ff}
#prompt{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);background:#000c;padding:8px 14px;border-radius:20px;border:1px solid #00e5ff}
#dlg{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);width:min(640px,96vw);background:#0b0510ee;border:1px solid #ff2e88;border-radius:14px;padding:14px;z-index:30;max-height:55vh;overflow:auto;pointer-events:auto}
#dlg .who{font-weight:800;color:#ff2e88;font-size:17px}#dlg .meters{font-size:11px;opacity:.85;margin:4px 0}#dlg .txt{margin:8px 0 10px;line-height:1.4}
#dlg .opts button{text-align:left;font-size:13px;padding:9px}
#sub{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);max-width:min(720px,92vw);background:#000c;border:1px solid #ff2e88;padding:10px 14px;border-radius:12px;z-index:35;text-align:center;font-size:15px}
#scene{position:fixed;inset:0;z-index:40;background:#000}#sil{position:absolute;inset:0;width:100%;height:100%}
.rhythm{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:min(520px,94vw)}
.track{position:relative;height:22px;background:#222;border-radius:11px}.zone{position:absolute;left:42%;width:16%;top:0;bottom:0;background:#ff2e8866}
.dot{position:absolute;top:2px;width:18px;height:18px;border-radius:50%;background:#fff}.sync{text-align:center;margin:6px 0}
#fade{position:fixed;inset:0;background:#000;z-index:60;display:flex;align-items:center;justify-content:center;font-size:20px;text-align:center;padding:20px}
#phone{position:fixed;inset:0;background:#0008;z-index:45;display:flex;align-items:center;justify-content:center;pointer-events:auto}
.ph{width:min(380px,94vw);max-height:85vh;overflow:auto;background:#120818;border:2px solid #00e5ff;border-radius:18px;padding:12px}
.ph-top{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:#00e5ff;margin-bottom:8px}
.ph-top button{width:auto;padding:4px 10px;margin:0}
.ph-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:10px}
.ph-tabs button{padding:8px;font-size:12px;margin:0}
#phBody{font-size:13px;text-align:left;line-height:1.4}
#phBody .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #ffffff15}
#mapFull{position:fixed;inset:0;background:#000a;z-index:46;display:flex;align-items:center;justify-content:center;pointer-events:auto}
#mapGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
#mapGrid button{margin:0;font-size:12px;min-height:64px}
#mapGrid button.here{outline:2px solid #00e5ff}
#minigame{position:fixed;inset:0;background:#000b;z-index:42;display:flex;align-items:center;justify-content:center;pointer-events:auto}
#pause{position:fixed;inset:0;background:#000b;z-index:55;display:flex;align-items:center;justify-content:center;pointer-events:auto}
#joy{position:fixed;left:24px;bottom:24px;width:120px;height:120px;border-radius:50%;background:#ffffff18;border:2px solid #ffffff44;z-index:20;pointer-events:auto}
#joy .knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:#ff2e88aa}
#talkBtn{position:fixed;right:24px;bottom:40px;width:100px;z-index:20;pointer-events:auto}
#toast{position:fixed;top:40%;left:50%;transform:translateX(-50%);background:#000d;padding:10px 16px;border-radius:10px;opacity:0;transition:.4s;z-index:70;pointer-events:none;text-align:center;max-width:90vw}
.mapcard{max-width:640px}