*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#b6dfd2;font-family:ui-rounded,'Avenir Next',system-ui,sans-serif;color:#fff}canvas{display:block;width:100vw;height:100dvh;touch-action:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}header{position:absolute;left:30px;right:30px;top:max(24px,env(safe-area-inset-top));display:flex;align-items:center;gap:28px;text-shadow:0 2px 14px #163a3544}.brand{font-size:10px;letter-spacing:2px;color:#244f46;text-decoration:none;font-weight:800}.brand strong{display:block;font-size:23px;letter-spacing:-.6px;margin-top:12px}.brand span{display:block;font-size:8px;letter-spacing:2px;margin-top:2px}.scores{margin-left:auto;display:flex;gap:28px;color:#21483f;font-size:10px;font-weight:800;letter-spacing:2px}.scores b{display:block;font-size:30px;letter-spacing:-1px}#pause{border-radius:50%;background:#204e42;color:#fff;width:44px;height:44px;font-weight:800}#meters{position:absolute;top:132px;right:30px;width:220px;color:#204e42}label{display:block;font-size:10px;font-weight:900;letter-spacing:1.5px;margin-bottom:16px}label span{float:right;font-weight:500;letter-spacing:0}i{display:block;height:7px;background:#21483f24;border-radius:10px;overflow:hidden;margin-top:8px}em{display:block;height:100%;width:75%;background:#295e4c;transition:width .12s}.boost em{background:#ee9e30;width:0}#overlay{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,#173b35ee 0%,#173b35dd 28%,#173b3500 75%);padding:100px 7vw 30px}.panel{max-width:470px;max-height:calc(100dvh - 130px);overflow:auto}.eyebrow{color:#efc674;font-size:11px;font-weight:800;letter-spacing:3px}h1{font-size:clamp(58px,7vw,104px);letter-spacing:-6px;line-height:.95;margin:23px 0}h1 span{color:#f4cb7d}p{font-size:15px;line-height:1.7;color:#daebe1}.rules{margin:27px 0;display:grid;gap:16px}.rules>div{display:flex;align-items:center;gap:14px}.rules b{width:38px;height:38px;border:1px solid #afc3b35c;border-radius:10px;display:grid;place-items:center;color:#f4cb7d;font-size:23px}.rules span{font-size:12px;color:#bdd0c5}.rules strong{display:block;letter-spacing:1.4px;color:#fff;font-size:10px;margin-bottom:4px}#start{background:#f4cb7d;color:#21483f;width:100%;padding:18px 22px;border-radius:10px;letter-spacing:2px;font-size:13px;font-weight:900;text-align:left}#start span{float:right;font-size:20px;line-height:16px}.keyboard{font-size:11px;margin:17px 0 0;color:#cad9cf}.foot{font-size:10px;letter-spacing:1px;color:#93b3a2}#toast{position:absolute;top:26%;width:100%;text-align:center;font-size:clamp(18px,3vw,30px);font-weight:950;color:#fff5d0;text-shadow:0 3px 5px #24472e,0 0 25px #24472e}#combo{position:absolute;top:33%;width:100%;text-align:center;color:#fff;font-size:13px;font-weight:800;letter-spacing:3px}#touch{position:absolute;left:28px;right:28px;bottom:max(26px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;pointer-events:none}#touch div{display:flex;gap:10px}#touch button{pointer-events:auto;touch-action:none;width:62px;height:60px;background:#21483fc9;border:1px solid #ffffff55;color:white;border-radius:16px;font-size:27px;box-shadow:0 8px 25px #21483f26}#touch small{display:block;font-size:9px;letter-spacing:1px}#touch .jump{background:#f4cb7d;color:#21483f}footer{position:absolute;bottom:24px;text-align:center;width:100%;pointer-events:none;font-size:9px;letter-spacing:3px;color:#21483f}body.menu #touch,body.menu #meters,body.menu footer{display:none}body.menu .brand{color:#d1e1d4}body.menu #pause{visibility:hidden}@media(max-width:650px){header{top:18px;left:18px;right:18px;gap:15px}.brand strong{font-size:16px}.brand span{display:none}.scores{gap:14px;font-size:8px}.scores b{font-size:24px}#meters{top:100px;right:18px;width:160px}#overlay{padding:100px 25px 20px;background:#173b35d9}.panel{width:100%;max-width:420px;margin:auto}h1{font-size:64px;letter-spacing:-4px;margin:18px 0}.rules{margin:20px 0;gap:12px}.keyboard{font-size:10px}#touch{left:15px;right:15px;bottom:22px}#touch button{width:54px;height:58px}footer{display:none}#toast{top:29%}}@media(max-height:650px){#overlay{padding-top:80px}.panel{max-height:calc(100dvh - 100px)}h1{font-size:54px}.rules{margin:14px 0;gap:8px}.foot{display:none}}