:root{--accent: #4afca0;--warn: #ffb84a;--danger: #ff4a5a}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;background:#05060a;overflow:hidden;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;color:#e8e8f0;touch-action:none;user-select:none;-webkit-user-select:none}#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}#stage{display:block;background:#0a0b12;box-shadow:0 0 60px #50b4ff26,inset 0 0 0 1px #1a1d26;line-height:0}#stage canvas{display:block}#hud{position:fixed;top:10px;left:10px;right:10px;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:13px;text-shadow:0 1px 3px #000;z-index:5}.hudBox{background:#080a10b3;border:1px solid #2a2e3a;padding:8px 12px;border-radius:6px;backdrop-filter:blur(6px)}#status{color:var(--accent);font-weight:700}#status.warn{color:var(--warn)}#status.danger{color:var(--danger)}#toast{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);background:#000000d9;padding:24px 36px;border-radius:10px;border:2px solid var(--accent);display:none;text-align:center;font-size:22px;letter-spacing:2px;z-index:10;box-shadow:0 0 40px #000c}#toast small{display:block;font-size:12px;opacity:.7;margin-top:8px;letter-spacing:1px}#legend{position:fixed;bottom:10px;left:10px;font-size:11px;opacity:.6;background:#080a1080;padding:8px 12px;border-radius:6px;line-height:1.7;pointer-events:none;z-index:4}#legend kbd{display:inline-block;padding:1px 6px;background:#1a1d26;border:1px solid #2a2e3a;border-bottom-width:2px;border-radius:3px;font-size:10px;min-width:14px;text-align:center}.mobile{position:fixed;bottom:20px;z-index:6;touch-action:none}#joy{left:20px;width:150px;height:150px}#joyBase{width:100%;height:100%;border-radius:50%;background:#ffffff0f;border:2px solid rgba(255,255,255,.2)}#joyStick{position:absolute;left:50%;top:50%;width:64px;height:64px;margin-left:-32px;margin-top:-32px;border-radius:50%;background:#4afca040;border:2px solid var(--accent);transition:background .1s}#abilities{right:20px;display:grid;grid-template-columns:repeat(2,76px);gap:10px}.ab{position:relative;width:76px;height:76px;border-radius:14px;background:#080a10bf;border:2px solid #2a2e3a;color:#cdd;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;line-height:1.2;gap:2px;backdrop-filter:blur(6px)}.ab .ico{font-size:22px}.ab.on{border-color:var(--accent);color:var(--accent)}.ab .cdring{position:absolute;inset:0;border-radius:14px;pointer-events:none}.ab.cd .cdring{background:#0000008c}.ab.cd{opacity:.6}.show-mobile #legend{display:none}body:not(.show-mobile) .mobile{display:none}@media(max-width:780px){#hud{font-size:11px}.hudBox{padding:6px 8px}}.ab:active{transform:scale(.92);background:#4afca02e;transition:transform .05s,background .05s}@media(max-width:600px),(pointer:coarse)and (max-height:700px){#joy{width:130px;height:130px;bottom:14px;left:14px}#joyStick{width:56px;height:56px;margin-left:-28px;margin-top:-28px}#abilities{right:14px;bottom:14px;grid-template-columns:repeat(2,64px);gap:8px}.ab{width:64px;height:64px;border-radius:12px;font-size:10px}.ab .ico{font-size:19px}#hud{top:6px;left:6px;right:6px;font-size:11px}.hudBox{padding:5px 8px}.hud-btn{font-size:10px;padding:3px 8px}.menu-screen{padding:16px}.menu-inner{overflow-y:auto;max-height:100%}.menu-screen h1{font-size:clamp(28px,9vw,38px);letter-spacing:6px}.menu-tag{margin-bottom:18px;font-size:11px}.level-list{grid-template-columns:1fr;gap:10px;margin-bottom:16px}.level-card{padding:14px 16px 12px}.level-card h2{font-size:16px}.level-card p{font-size:12px;margin-bottom:10px}.menu-foot{font-size:10px}}.menu-screen{position:fixed;inset:0;background:radial-gradient(ellipse at center,#4afca012,#05060af2 60%),#05060af2;z-index:100;display:none;align-items:center;justify-content:center;padding:24px;animation:menu-fade-in .35s ease-out}body.show-menu .menu-screen{display:flex}@keyframes menu-fade-in{0%{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}.menu-inner{max-width:960px;width:100%;text-align:center}.menu-screen h1{margin:0 0 6px;font-size:clamp(34px,6vw,56px);letter-spacing:10px;font-weight:800;color:#e8e8f0;text-shadow:0 0 24px rgba(74,252,160,.35)}.menu-screen h1 span{color:var(--accent)}.menu-tag{margin:0 0 36px;opacity:.55;letter-spacing:4px;font-size:13px;text-transform:uppercase}.level-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:28px}.level-card{position:relative;text-align:left;background:#0f121ad9;border:1px solid #2a2e3a;border-radius:12px;padding:18px 20px 16px;color:#e8e8f0;font-family:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;overflow:hidden}.level-card:hover,.level-card:focus{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 24px #4afca02e;outline:none}.level-card:active{transform:translateY(0)}.level-card .level-num{position:absolute;top:14px;right:16px;font-size:11px;letter-spacing:2px;opacity:.4;font-weight:700}.level-card h2{margin:0 0 6px;font-size:18px;letter-spacing:1px;color:var(--accent)}.level-card p{margin:0 0 14px;opacity:.75;line-height:1.45}.level-card .level-best,.level-card .level-target{display:block;font-size:11px;letter-spacing:1px;opacity:.7;margin-top:4px}.level-card .level-best{color:var(--accent);opacity:.9}.menu-foot{margin:0;font-size:11px;opacity:.45;letter-spacing:1px}.menu-foot kbd{display:inline-block;padding:1px 6px;background:#1a1d26;border:1px solid #2a2e3a;border-bottom-width:2px;border-radius:3px;font-size:10px}body.show-menu #hud,body.show-menu #legend,body.show-menu #joy,body.show-menu #abilities,body.show-menu #toast{display:none!important}.hudBox-right{display:flex;align-items:center;gap:12px}.hud-btn{pointer-events:auto;background:transparent;border:1px solid #2a2e3a;color:#cdd;padding:4px 10px;border-radius:4px;font-family:inherit;font-size:11px;cursor:pointer;letter-spacing:1px}.hud-btn:hover{border-color:var(--accent);color:var(--accent)}