*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;font-family:system-ui,-apple-system,sans-serif}canvas{display:block}#hud{position:fixed;inset:0;pointer-events:none;color:#203b36}.panel{position:absolute;top:env(safe-area-inset-top,12px);left:16px;background:#fffffff0;border-radius:18px;padding:14px 18px;box-shadow:0 8px 32px #174a3b22}.panel h1{font-size:22px;margin:0}.panel p{margin:5px 0 0;font-size:13px}.hint{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#ffffffdc;padding:10px 16px;border-radius:20px;font-size:13px;text-align:center;max-width:90%}.action{position:absolute;right:18px;bottom:92px;background:#fff;border:0;border-radius:999px;padding:13px 18px;box-shadow:0 4px 20px #0002;pointer-events:auto;cursor:pointer}.dpad{position:absolute;bottom:76px;left:16px;display:grid;grid-template-columns:repeat(3,48px);gap:4px;pointer-events:auto}.dpad button{height:48px;border:0;border-radius:13px;background:#ffffffc9;font-size:22px;touch-action:none}.dpad .up{grid-column:2}.dpad .left{grid-column:1}.dpad .down{grid-column:2}.dpad .right{grid-column:3;grid-row:2}@media(pointer:fine){.dpad{display:none}}#joystick{display:none;position:absolute;left:28px;bottom:110px;width:112px;height:112px;border-radius:50%;background:#ffffffa8;border:2px solid #ffffffc9;pointer-events:auto;touch-action:none;box-shadow:0 5px 20px #174a3b22;align-items:center;justify-content:center}#joystick .knob{width:47px;height:47px;background:#ffffffed;border-radius:50%;box-shadow:0 2px 9px #0002;pointer-events:none}.action{opacity:.62;transition:opacity .2s,transform .2s}.action.available{opacity:1;transform:scale(1.04);background:#fff8dc}@media(pointer:coarse){#joystick{display:flex}.dpad{display:none}.hint{bottom:20px;font-size:12px}.panel{left:12px;top:calc(env(safe-area-inset-top) + 8px);padding:10px 14px}.panel h1{font-size:19px}.action{bottom:130px;right:15px}}@media(max-width:380px){#joystick{left:14px;bottom:110px;width:100px;height:100px}.action{padding:11px 13px}}.cat-profile{position:absolute;top:calc(env(safe-area-inset-top) + 106px);left:14px;max-width:78vw;padding:10px 15px;background:#fffffff0;border-radius:14px;box-shadow:0 4px 18px #0001;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s;pointer-events:none;font-size:13px}.cat-profile.show{opacity:1;transform:translateY(0)}.stats{position:absolute;top:calc(env(safe-area-inset-top) + 16px);right:12px;border-radius:12px;background:#ffffffdc;padding:9px 11px;font-size:12px;box-shadow:0 4px 18px #0001}@media(max-width:430px){.panel{max-width:68vw}.panel p{font-size:11px}.stats{top:calc(env(safe-area-inset-top) + 92px);right:12px}.cat-profile{top:calc(env(safe-area-inset-top) + 132px)}}@media(prefers-reduced-motion:reduce){.cat-profile,.action{transition:none}}.feature-bar{position:absolute;top:calc(env(safe-area-inset-top) + 142px);right:12px;display:flex;gap:6px;pointer-events:auto;flex-wrap:wrap;justify-content:flex-end;max-width:95vw}.feature-bar button,.album-dialog button{border:0;border-radius:14px;background:#ffffffdf;color:#25453b;padding:9px 12px;box-shadow:0 3px 12px #0001;font:inherit;font-size:12px;cursor:pointer}.album-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(88vw,420px);max-height:75vh;overflow:auto;border-radius:22px;padding:20px;background:#fffefa;box-shadow:0 12px 50px #0004;pointer-events:auto}.album-dialog[hidden]{display:none}.album-dialog header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.album-content{display:grid;grid-template-columns:1fr 1fr;gap:10px}.album-entry{padding:15px 8px;background:#edf3e9;border-radius:12px;font-size:13px;text-align:center}@media(max-width:430px){.feature-bar{top:calc(env(safe-area-inset-top) + 164px);left:12px;right:12px;justify-content:center}.feature-bar button{padding:7px 10px;font-size:11px}.album-dialog{padding:15px}}