@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,800;1,900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#24202d;background:#d4bdde;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible{outline:3px solid #df574b;outline-offset:5px}button:disabled{cursor:wait;opacity:.6}button,a{touch-action:manipulation}#stage{position:fixed;inset:0;background:#bdb2d8 url('media/backdrop.jpg') center/cover}canvas{display:block;width:100%;height:100%;touch-action:none}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(#f7eff1c9,transparent 24%,transparent 69%,#191932a8)}header{position:absolute;top:0;left:0;right:0;padding:28px 38px;display:flex;align-items:center;justify-content:space-between;z-index:5}a{color:inherit;text-decoration:none}.wordmark{font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:800;line-height:.9;letter-spacing:-1px;transform:skew(-5deg)}.wordmark span{display:block;font-family:'DM Sans',sans-serif;font-size:8px;font-weight:600;letter-spacing:2.3px;margin-top:10px;transform:skew(5deg)}.round{text-align:center;position:absolute;left:50%;transform:translateX(-50%)}.round>span{font-size:9px;letter-spacing:2px;font-weight:700;display:block}.round strong{font-family:'Barlow Condensed';font-size:42px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}.utilities{display:flex;gap:8px;align-items:center}.utilities>span{font-size:8px;letter-spacing:1.4px;margin-right:12px}.utilities button{width:35px;height:35px;border:1px solid #29233636;background:#fff3;border-radius:50%;font-size:12px}.utilities button:first-of-type{width:48px;border-radius:25px;font-size:9px;font-weight:700}#menu{position:absolute;z-index:3;left:5%;top:29%;max-width:440px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:700;display:flex;align-items:center;gap:8px}.eyebrow i{height:6px;width:6px;background:#bd473e;border-radius:100%}h1,h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;letter-spacing:-2px;font-size:clamp(58px,6.3vw,100px);line-height:.88;margin:23px 0;transform:skew(-4deg)}h1 span{color:#ba493f}p{font-size:13px;line-height:1.8;max-width:330px}.primary{display:flex;align-items:center;justify-content:space-between;width:275px;padding:19px 22px;border:none;background:#282231;color:#fff9f5;font-size:11px;letter-spacing:1.3px;font-weight:700;margin-top:25px;border-radius:3px;transition:background .2s,transform .2s}.primary span:last-child{font-size:20px;line-height:10px}.primary:hover{background:#b64840;transform:translateY(-2px)}.menufoot{display:flex;gap:22px;font-size:8px;letter-spacing:1px;font-weight:600;margin-top:17px}.loadtrack{height:2px;width:275px;background:#26213720;margin-top:6px}.loadtrack i{display:block;height:100%;background:#c54e41;width:0;transition:width .3s}footer{position:absolute;z-index:6;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:26px 38px;color:#fff7ed;gap:30px;background:linear-gradient(transparent,#22204155)}.stamina{width:180px}.stamina>div:first-child{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.4px;margin-bottom:9px}.track{background:#ffffff30;height:4px;overflow:hidden}.track i{display:block;height:100%;width:100%;transition:width .12s linear,background .2s;background:#f8d8a9}.stamina .track i.low{background:#e04a3f}.controls{display:flex;gap:10px}.controls button{border:1px solid #fff4;background:#f5e2f00a;border-radius:6px;padding:11px 14px;display:flex;align-items:center;gap:9px;color:inherit;user-select:none;touch-action:none}.controls button:active,.controls button.active{background:#fff3;transform:translateY(2px)}kbd{border:1px solid #fff5;border-radius:3px;font:10px 'DM Sans';min-width:23px;text-align:center;padding:4px}.controls span{font-size:8px;letter-spacing:1px}.score{text-align:right;min-width:95px}.score span{font-size:8px;letter-spacing:2px;display:block}.score strong{font-family:'Barlow Condensed';font-size:33px;font-weight:600;font-variant-numeric:tabular-nums}.health{position:absolute;top:126px;width:26%;max-width:350px}.player{left:38px}.opponent{right:38px}.health>div:first-child{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.7px;font-weight:700;margin-bottom:9px}.health .track{height:5px;background:#25203226}.health .track i{background:#504478}.opponent .track i{background:#bb514d}.health small{font-size:7px;letter-spacing:1.6px;display:block;margin-top:8px;opacity:.7}#reticle{position:absolute;left:50%;top:49%;color:#fff8;font:22px monospace;pointer-events:none;display:none}body.playing #reticle{display:block}#cue{position:absolute;left:50%;transform:translateX(-50%);top:23%;border-radius:30px;background:#282235dd;color:#ffefe5;font-size:10px;letter-spacing:2px;padding:12px 22px;opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap}#cue.on{opacity:1}#cue.warning{background:#ad3c35}#combo{position:absolute;left:65%;top:44%;font-family:'Barlow Condensed';font-size:44px;color:#fff4db;transform:rotate(-8deg);text-shadow:0 2px 16px #0004;pointer-events:none}.modal{position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);background:#f4edeaeF;backdrop-filter:blur(20px);padding:40px 45px;max-width:460px;width:90%;border:1px solid #fff7;border-radius:6px;box-shadow:0 20px 90px #22143630}.modal h2{font-size:70px}.modal .primary{width:100%}.modal p{font-size:12px}.stats{display:flex;justify-content:space-between;margin-top:30px}.stats b{font-family:'Barlow Condensed';display:block;font-size:36px}.stats span{font-size:8px;letter-spacing:1px}.hidden{display:none!important}#impact{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;background:radial-gradient(ellipse at center,#c7253e00 26%,#c7253e4d 74%,#96122ba6 100%);box-shadow:inset 0 0 210px 65px #c7253e;transition:opacity .05s}#toast{position:absolute;z-index:20;bottom:120px;left:50%;transform:translateX(-50%);background:#282235e6;color:#fff;padding:10px 20px;border-radius:30px;font-size:11px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}#debug{position:absolute;bottom:140px;left:10px;background:#000;color:#fff;font:11px monospace;z-index:30}body.playing #menu{display:none}
@media(max-width:700px){header{padding:23px 20px}.wordmark{font-size:27px}.wordmark span{font-size:6px;letter-spacing:1.4px}.utilities>span{display:none}.utilities{gap:5px}.utilities button{width:30px;height:30px}.utilities button:first-of-type{display:none}.round strong{font-size:34px}.round>span{font-size:7px;letter-spacing:1px}#menu{top:auto;bottom:170px;left:25px;max-width:90%}h1{font-size:60px;margin:18px 0}#menu p{font-size:11px;max-width:270px}.eyebrow{font-size:7px;letter-spacing:1.2px}.primary{padding:16px 20px;width:255px;margin-top:19px}.loadtrack{width:255px}.menufoot{font-size:7px;gap:15px}.vignette{background:linear-gradient(#f7eff1bb,transparent 30%,#ece0ec99 65%,#191932cf)}body.playing .vignette{background:linear-gradient(#f7eff1a0,transparent 23%,transparent 64%,#191932cf)}footer{padding:15px 16px 20px;gap:15px;flex-wrap:wrap}.controls{order:3;width:100%;gap:7px;justify-content:center}.controls button{flex:1;padding:10px 4px;min-height:54px;gap:4px;flex-direction:column}.controls span{font-size:7px}.controls kbd{font-size:8px;padding:3px;min-width:22px}.stamina{width:calc(100% - 110px)}.score{min-width:80px}.score strong{font-size:23px}.score span{font-size:7px}.health{top:109px;width:37%}.player{left:20px}.opponent{right:20px}.health>div:first-child{font-size:8px}.health small{font-size:6px}#cue{top:180px;font-size:8px}#combo{left:72%;font-size:30px}.modal{padding:30px}.modal h2{font-size:60px}#toast{bottom:155px}body:not(.playing) .stamina,body:not(.playing) .score{opacity:.5}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}