*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#07040d;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff;touch-action:none;user-select:none}
canvas{display:block;width:100vw;height:100vh}
#title{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at 50% 40%,#3a0f5c,#07040d 70%);z-index:20;text-align:center;padding:20px}
#title img{width:min(60vw,300px);border-radius:24px;box-shadow:0 0 40px #b13cff,0 0 80px #ff3ea588}
#title h1{font-size:clamp(36px,9vw,72px);letter-spacing:4px;color:#fff;text-shadow:0 0 10px #ff3ea5,0 0 30px #b13cff}
#title p{color:#9dff3a;letter-spacing:10px;text-shadow:0 0 10px #9dff3a}
#title small{opacity:.7;line-height:1.6}
#play{font-size:24px;font-weight:800;padding:14px 42px;border-radius:40px;border:2px solid #ff3ea5;background:#14061f;color:#fff;box-shadow:0 0 20px #ff3ea5;cursor:pointer}
#prompt{position:fixed;left:50%;bottom:22%;transform:translateX(-50%);background:#14061fdd;border:2px solid #9dff3a;box-shadow:0 0 16px #9dff3a;padding:10px 18px;border-radius:14px;display:none;z-index:5;cursor:pointer;white-space:nowrap}
#joy{position:fixed;width:120px;height:120px;border-radius:50%;border:2px solid #b13cff99;background:#b13cff22;display:none;z-index:6;pointer-events:none;transform:translate(-50%,-50%)}
#knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:#ff3ea5cc;box-shadow:0 0 14px #ff3ea5}
#run{position:fixed;right:22px;bottom:calc(30px + env(safe-area-inset-bottom));width:84px;height:84px;border-radius:50%;border:2px solid #ff7a1a;background:#2a0f05aa;color:#fff;font-weight:800;box-shadow:0 0 14px #ff7a1a;display:none;z-index:6}
.touch #run{display:block}
#run.on{background:#ff7a1a}
#popup{position:fixed;inset:0;background:#05020acc;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:30;padding:16px}
#popup.hidden{display:none}
.card{position:relative;width:min(420px,100%);max-height:92vh;overflow:auto;background:linear-gradient(160deg,#1a0a2b,#0b0612);border:2px solid #b13cff;border-radius:26px;box-shadow:0 0 30px #b13cff88,0 0 60px #ff3ea544;padding:30px 22px 18px;text-align:center;animation:pop .25s ease-out}
@keyframes pop{from{transform:scale(.8);opacity:0}}
#close{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:50%;border:1px solid #ff3ea5;background:#0008;color:#fff;font-size:18px;cursor:pointer}
#avatar{width:104px;height:104px;border-radius:50%;object-fit:cover;border:3px solid #ff3ea5;box-shadow:0 0 20px #ff3ea5}
.card h2{margin-top:10px;font-size:28px;text-shadow:0 0 12px #b13cff}
.card p{opacity:.75;margin:4px 0 18px}
#plinks a{display:flex;align-items:center;gap:12px;justify-content:center;margin:12px 0;padding:16px;border-radius:16px;font-size:18px;font-weight:700;color:#fff;text-decoration:none;background:#120819;border:2px solid var(--c);box-shadow:0 0 10px var(--c)55;transition:.15s}
#plinks a:hover{background:var(--c);color:#000;transform:translateY(-2px);box-shadow:0 0 22px var(--c)}
.card footer{margin-top:14px;font-size:12px;opacity:.5;letter-spacing:2px}
#hud{position:fixed;left:12px;top:10px;font:700 13px system-ui;letter-spacing:2px;text-shadow:0 0 8px #b13cff;z-index:4;pointer-events:none}
#jump{position:fixed;right:22px;bottom:calc(130px + env(safe-area-inset-bottom));width:84px;height:84px;border-radius:50%;border:2px solid #9dff3a;background:#0f2a05aa;color:#fff;font-weight:800;box-shadow:0 0 14px #9dff3a;display:none;z-index:6}
#run{right:120px}
.touch #jump{display:block}
#jbase{position:fixed;left:30px;bottom:calc(40px + env(safe-area-inset-bottom));width:130px;height:130px;border-radius:50%;border:2px solid #b13cff99;background:#b13cff22;display:none;z-index:6}
.touch #jbase{display:block}
#jknob{position:absolute;left:40px;top:40px;width:50px;height:50px;border-radius:50%;background:#ff3ea5cc;box-shadow:0 0 14px #ff3ea5}
#joy{display:none!important}
#load{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#07040d;z-index:40;color:#ff3ea5;font:800 20px system-ui;letter-spacing:4px}
#qbtn{position:fixed;right:12px;top:10px;z-index:25;padding:7px 12px;border-radius:12px;border:1px solid #b13cff;background:#14061fcc;color:#fff;font:700 12px system-ui;letter-spacing:1px;box-shadow:0 0 10px #b13cff88;cursor:pointer}
#qbtn b{color:#9dff3a}