*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:Arial Black,Arial,sans-serif;color:#fff;touch-action:none}
canvas{display:block;width:100vw;height:100vh}
.hidden{display:none!important}
.bar{position:absolute;top:12px;left:12px;width:34vw;height:26px;background:#0008;border:3px solid #fff;border-radius:14px;overflow:hidden}
.bar span{position:absolute;left:10px;top:2px;font-size:15px;z-index:2;text-shadow:2px 2px #000}
.bar .fill{height:100%;width:100%;background:linear-gradient(#5f5,#1a1)}
.bar.boss{left:auto;right:12px}.bar.boss .fill{background:linear-gradient(#f5f,#a1a);margin-left:auto}
#flyBar{position:absolute;top:46px;left:12px;width:20vw;height:14px;background:#0008;border:2px solid #fff;border-radius:8px;overflow:hidden}
#flyBar .fill{height:100%;background:#4cf;width:100%}#flyBar span{position:absolute;left:6px;top:-1px;font-size:11px}
#superWrap{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center}
#superMeter{width:28vw;height:24px;background:#0008;border:3px solid #fd0;border-radius:12px;overflow:hidden;position:relative}
#superMeter .fill{height:100%;width:0;background:linear-gradient(90deg,#fa0,#ff5)}#superMeter span{position:absolute;left:8px;top:1px;font-size:14px;text-shadow:2px 2px #000}
#superTimer{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);font-size:20px;color:#ff5;text-shadow:2px 2px #000}
.btn{background:#225c;border:3px solid #fff;color:#fff;border-radius:50%;font:bold 12px Arial Black,Arial;width:74px;height:74px;touch-action:none}
.btn.on,.btn:active{background:#fa0c}.btn.sp{background:#a2ac}
#bTransform{border-radius:12px;width:auto;height:44px;padding:0 10px;opacity:.4}
#bTransform.ready{opacity:1;background:#f80;animation:pulse .6s infinite alternate}
@keyframes pulse{to{transform:scale(1.1);box-shadow:0 0 20px #ff0}}
.btn.small{position:absolute;top:70px;width:auto;height:40px;border-radius:10px;padding:0 12px}
#bPause{right:12px}#bSwitch{right:70px}
#joy{position:absolute;left:30px;bottom:30px;width:150px;height:150px;border-radius:50%;background:#fff2;border:3px solid #fff8}
#knob{position:absolute;left:45px;top:45px;width:60px;height:60px;border-radius:50%;background:#fff9}
#lookZone{position:absolute;right:0;top:120px;width:50vw;bottom:0}
#btns{position:absolute;right:16px;bottom:16px;display:grid;grid-template-columns:repeat(3,78px);gap:6px}
#msg{position:absolute;top:30%;width:100%;text-align:center;font-size:42px;color:#ff5;text-shadow:3px 3px #000;pointer-events:none}
.screen{position:absolute;inset:0;background:radial-gradient(#3a1a6a,#0a0520);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:auto}
h1{font-size:54px;margin:8px;color:#ffd84a;text-shadow:4px 4px #c0392b}h2{margin:10px}
.pick{font:bold 24px Arial Black;padding:12px 30px;margin:6px;border-radius:14px;border:4px solid #fff;background:#335;color:#fff}.pick.sel{background:#f80}
#levels{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:900px}
.lv{width:120px;padding:10px;border-radius:12px;border:3px solid #fff;background:#264;font-size:13px}
.lv.boss{background:#a2a;font-size:15px}.lv.locked{background:#333;color:#888;border-color:#666}
.lv.play{cursor:pointer;animation:pulse .7s infinite alternate}
.btn.big{border-radius:14px;width:220px;height:60px;font-size:20px;margin:8px}.hint{font:12px Arial;opacity:.7;max-width:700px}
.dmg{position:absolute;font-size:26px;color:#ff4;text-shadow:2px 2px #000;pointer-events:none;transition:all .8s;font-weight:bold}