:root{--ink:#0d1230;--navy:#1c2f75;--gold:#ffc21f;--violet:#b36bff;--cyan:#5ae6ff;--white:#fff;--danger:#ff3d6e;--panel:#0c1230b8;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;color:var(--white);-webkit-user-select:none;user-select:none;touch-action:none;background:#0d1230;margin:0;font-family:Rubik,system-ui,sans-serif;overflow:hidden}#game{width:100%;height:100%;display:block;position:fixed;inset:0}.hidden{display:none!important}button{color:var(--white);background:var(--navy);border:3px solid var(--white);letter-spacing:1px;cursor:pointer;border-radius:14px;padding:10px 22px;font-family:Bungee,Rubik,sans-serif;font-size:16px;transition:transform 80ms,filter .15s;box-shadow:0 5px #00000059}button:hover{filter:brightness(1.15)}button:active{transform:translateY(3px);box-shadow:0 2px #00000059}button.big{color:var(--ink);background:linear-gradient(#ffd84a,#ff9d1f);padding:14px 40px;font-size:24px}#hud{pointer-events:none;position:fixed;inset:0}#hud button{pointer-events:auto}#boss{top:calc(14px + var(--safe-t));text-align:center;width:min(520px,62vw);position:absolute;left:50%;transform:translate(-50%)}#boss-name{letter-spacing:1px;text-shadow:0 2px #2a0f40,0 0 12px #b36bffcc;font-family:Bungee,sans-serif;font-size:18px}#boss-name span{opacity:.85;letter-spacing:2px;text-transform:uppercase;margin-left:6px;font-family:Rubik;font-size:12px;font-weight:700}#resolve{background:#140824cc;border:2px solid #ffffffd9;border-radius:10px;height:16px;margin-top:6px;position:relative;overflow:hidden}#resolve-fill,#resolve-ghost{border-radius:8px;width:100%;position:absolute;top:0;bottom:0;left:0}#resolve-ghost{opacity:.6;background:#fff;transition:width .9s ease-in .25s}#resolve-fill{z-index:1;background:linear-gradient(90deg,#6c2bd9,#b36bff 60%,#ff6be6);transition:width .18s}#resolve.critical #resolve-fill{background:linear-gradient(90deg,#ff2d55,#ff7bd5);animation:.6s infinite alternate pulse}#resolve-label{z-index:2;letter-spacing:3px;color:#ffffffd9;font-size:10px;font-weight:900;line-height:12px;position:absolute;inset:0}@keyframes pulse{0%{filter:brightness()}to{filter:brightness(1.6)}}#count{top:calc(12px + var(--safe-t));left:calc(14px + var(--safe-l));background:var(--panel);border:2px solid #ffffff80;border-radius:12px;padding:8px 12px;font-size:13px;font-weight:900;position:absolute}#count .row{align-items:center;gap:6px;height:20px;display:flex}#count .lbl{opacity:.8;letter-spacing:1px;width:38px}.dot{border:2px solid #ffffffb3;border-radius:50%;width:13px;height:13px;display:inline-block}.dot.s.on{background:#ffcf2e;border-color:#ffcf2e;box-shadow:0 0 8px #ffcf2e}#outs{gap:4px;display:flex}#outs i{background:#ff5a5a;border:2px solid #fff;border-radius:50%;width:15px;height:15px;display:inline-block;box-shadow:0 0 6px #ff5a5a}#outs i.used{box-shadow:none;opacity:.4;background:0 0}#pause-btn{top:calc(12px + var(--safe-t));right:calc(14px + var(--safe-r));background:var(--panel);border-radius:50%;width:46px;height:46px;padding:0;font-size:16px;position:absolute}#run-info{top:calc(66px + var(--safe-t));right:calc(14px + var(--safe-r));text-align:right;letter-spacing:1px;opacity:.9;text-shadow:0 2px 4px #0009;flex-direction:column;gap:2px;font-size:12px;font-weight:900;display:flex;position:absolute}#callout{white-space:nowrap;letter-spacing:2px;opacity:0;text-shadow:0 5px #00000059;-webkit-text-stroke:2px #00000059;font-family:Bungee,sans-serif;font-size:clamp(30px,7vw,74px);position:absolute;top:27%;left:50%;transform:translate(-50%,-50%)}#callout.show{animation:1.15s cubic-bezier(.2,1.6,.4,1) forwards callout}@keyframes callout{0%{opacity:0;transform:translate(-50%,-50%)scale(2.2)rotate(-6deg)}18%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(-3deg)}80%{opacity:1;transform:translate(-50%,-50%)scale(1.04)rotate(-3deg)}to{opacity:0;transform:translate(-50%,-64%)scale(1.04)rotate(-3deg)}}#callout.perfect{color:#fff36b;text-shadow:0 0 18px #ffb300,0 5px #b35a00}#callout.good{color:#7dfcff}#callout.weak{color:#d6dcff}#callout.miss{color:#ff7d9a}#callout.hr{color:#ffe14d;text-shadow:0 0 24px #ff8a00,0 6px #9a3b00}#callout.clash{color:#ff7bf2;text-shadow:0 0 26px #b36bff,0 6px #3a0a5a}#timing{bottom:calc(22px + var(--safe-b));text-align:center;opacity:0;width:min(340px,50vw);transition:opacity .25s;position:absolute;left:50%;transform:translate(-50%)}#timing.show{opacity:1}#timing-bar{background:linear-gradient(90deg,#ff5f7e,#ffd15c 35%,#7dffb0 47% 53%,#ffd15c 65%,#ff5f7e);border:2px solid #fff;border-radius:6px;height:10px;position:relative}#timing-bar .zone.perfect{border:2px solid #fff;border-radius:3px;width:6%;position:absolute;top:-4px;bottom:-4px;left:47%}#timing-mark{opacity:0;background:#fff;border-radius:3px;width:6px;height:24px;margin-left:-3px;position:absolute;top:-9px;left:50%;box-shadow:0 0 8px #fff}#timing-text{letter-spacing:2px;height:18px;margin-top:6px;font-family:Bungee;font-size:15px}#distance{text-align:center;opacity:0;transition:opacity .3s;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}#distance.show{opacity:1}#distance-num{color:#fff;text-shadow:0 0 30px #ffaa28e6,0 7px #b04a00;font-family:Bungee;font-size:clamp(54px,12vw,128px);line-height:1;display:inline-block}#distance-unit{color:#ffd24a;margin-left:6px;font-family:Bungee;font-size:clamp(22px,4vw,40px);display:inline-block}#distance-sub{letter-spacing:3px;text-shadow:0 2px 4px #000;margin-top:8px;font-size:15px;font-weight:900}#stats{left:calc(14px + var(--safe-l));bottom:calc(18px + var(--safe-b));background:var(--panel);letter-spacing:.5px;opacity:0;border-radius:10px;padding:8px 12px;font-size:12px;font-weight:700;line-height:1.5;transition:opacity .3s;position:absolute}#stats.show{opacity:1}#stats b{color:var(--gold)}#upgrades-active{right:calc(14px + var(--safe-r));bottom:calc(18px + var(--safe-b));gap:6px;display:flex;position:absolute}#upgrades-active span{background:var(--panel);border:2px solid var(--gold);letter-spacing:1px;border-radius:10px;padding:4px 8px;font-size:11px;font-weight:900}#touch-pad,#touch-swing{display:none}body.touch #touch-pad{left:calc(24px + var(--safe-l));bottom:calc(70px + var(--safe-b));background:#0c123040;border:3px solid #ffffff59;border-radius:50%;width:128px;height:128px;display:block;position:absolute}#touch-knob{background:#ffffff8c;border-radius:50%;width:50px;height:50px;margin:-25px 0 0 -25px;position:absolute;top:50%;left:50%}body.touch #touch-swing{right:calc(24px + var(--safe-r));bottom:calc(70px + var(--safe-b));width:118px;height:118px;color:var(--ink);opacity:.92;background:radial-gradient(circle at 40% 35%,#ffe06a,#ff8a1f);border-radius:50%;padding:0;font-size:18px;display:block;position:absolute}body.touch #touch-swing:active{transform:scale(.94)}body.touch #stats,body.touch #upgrades-active{bottom:calc(210px + var(--safe-b))}body.touch #timing{bottom:calc(16px + var(--safe-b))}#skip-btn{right:calc(18px + var(--safe-r));bottom:calc(18px + var(--safe-b));background:var(--panel);font-size:14px;position:absolute}.screen{text-align:center;z-index:5;background:radial-gradient(#10163c59,#080a1ed9);flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:20px;display:flex;position:fixed;inset:0}.screen h2{color:var(--gold);text-shadow:0 5px #8a3c00,0 0 24px #ffb40099;margin:0;font-family:Bungee;font-size:clamp(34px,7vw,60px)}.screen p{opacity:.9;margin:0;font-size:16px;font-weight:700}#title{background:radial-gradient(at 50% 40%,#1e328c26,#06081cb3)}.logo{flex-direction:column;margin-bottom:8px;line-height:.9;display:flex;transform:rotate(-4deg)}.logo .l1{color:#fff;text-shadow:0 7px #1c2f75,0 0 30px #5ac8ffb3;font-family:Bungee;font-size:clamp(40px,9vw,96px)}.logo .l2{background:linear-gradient(#fff36b,#ff9d1f 60%,#ff5a1f);color:#0000;filter:drop-shadow(0 6px #6a1d00)drop-shadow(0 0 20px #ff780099);-webkit-background-clip:text;background-clip:text;font-family:Bungee;font-size:clamp(34px,8vw,84px)}.tag{max-width:520px}.hint{opacity:.75;font-size:13px;font-weight:700}.hint.touch{display:none}body.touch .hint.touch{display:block}body.touch .hint.desktop{display:none}#loading{opacity:.85;width:260px;margin-top:10px;font-size:12px;font-weight:700}#loading-bar{background:var(--gold);border-radius:4px;width:0%;height:6px;margin-bottom:6px;transition:width .2s}#play-btn[disabled]{filter:grayscale()brightness(.7)}#pause button{width:260px}#cards{flex-wrap:wrap;justify-content:center;gap:16px;max-width:980px;display:flex}.card{pointer-events:auto;cursor:pointer;opacity:0;background:linear-gradient(170deg,#24346f,#121a42);border:3px solid #ffffffd9;border-radius:18px;flex-direction:column;align-items:center;gap:10px;width:250px;min-height:280px;padding:18px 16px;transition:transform .15s,box-shadow .15s;animation:.45s cubic-bezier(.2,1.4,.4,1) forwards cardin;display:flex}.card:hover,.card:focus{box-shadow:0 0 30px var(--accent);outline:none;transform:translateY(-8px)scale(1.03)}.card .ico{background:radial-gradient(circle, var(--accent), transparent 70%);border-radius:50%;place-items:center;width:82px;height:82px;font-size:42px;display:grid}.card h3{color:var(--accent);margin:0;font-family:Bungee;font-size:20px}.card p{opacity:.92;font-size:14px;font-weight:500;line-height:1.4}.card .lvl{letter-spacing:2px;opacity:.7;margin-top:auto;font-size:11px;font-weight:900}@keyframes cardin{0%{opacity:0;transform:translateY(40px)scale(.9)}to{opacity:1;transform:none}}#flash{pointer-events:none;opacity:0;z-index:4;mix-blend-mode:screen;background:#fff;position:fixed;inset:0}#letterbox i{z-index:3;pointer-events:none;background:#000;height:0;transition:height .5s;position:fixed;left:0;right:0}#letterbox i:first-child{top:0}#letterbox i:last-child{bottom:0}#letterbox.on i{height:9vh}@media (max-width:640px){#boss-name{font-size:14px}#boss-name span{display:none}#boss{width:54vw}.card{text-align:left;flex-direction:row;width:92vw;min-height:0;padding:12px}.card .ico{flex:none;width:56px;height:56px;font-size:28px}.card .txt{flex-direction:column;gap:4px;display:flex}.card .lvl{margin-top:0}#count{padding:6px 8px;font-size:11px}}@media (max-height:480px){#cards{flex-wrap:nowrap}.card{width:30vw;min-height:0;padding:10px}.card .ico{width:48px;height:48px;font-size:24px}.card p{font-size:12px}body.touch #touch-pad,body.touch #touch-swing{bottom:calc(40px + var(--safe-b));width:104px;height:104px}body.touch #stats,body.touch #upgrades-active{bottom:calc(160px + var(--safe-b))}}#hud>*{transition:opacity .35s}#hud.cine #boss,#hud.cine #count,#hud.cine #pause-btn,#hud.cine #run-info,#hud.cine #stats,#hud.cine #timing,#hud.cine #upgrades-active,#hud.cine #touch-pad,#hud.cine #touch-swing{opacity:0;pointer-events:none}