:root{color-scheme:dark;--bg: #090e19;--surface: #111b2d;--surface-2: #16243a;--border: #2b3c55;--text: #f2f5fd;--muted: #91a4bc;--cyan: #79f4e2;--danger: #ff8096;--key-up: #ffc83d;--key-down: #ff57d8;--key-left: #ff4f6d;--key-right: #3fa1ff;--font-display: "Barlow Condensed", system-ui, sans-serif;--font-body: Inter, system-ui, sans-serif;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px)}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px var(--font-body);-webkit-font-smoothing:antialiased}button,select,input{font:inherit}button,select{color:inherit;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px 16px}button{cursor:pointer;touch-action:manipulation}button:hover{border-color:var(--cyan);background:#1b3045}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.primary{background:var(--cyan);color:#071c22;border:0;font-weight:800;min-width:160px;padding:14px 25px}.primary:hover{background:#b3ffef;color:#071c22}.hidden{display:none!important}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;background:#233449;border:1px solid #435369;border-bottom-width:3px;border-radius:5px;font:16px system-ui}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}html,body{height:100%;overflow:hidden;overscroll-behavior:none}body,.app{position:fixed;inset:0}.arena{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#0b1322;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#game,#labels{position:absolute;inset:0;display:block;width:100%;height:100%}#labels{pointer-events:none}@media (pointer: coarse){.arena{touch-action:none}}.hud{position:absolute;inset:0;pointer-events:none}.combo{position:absolute;top:calc(var(--safe-top) + 16px);left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;min-width:70px}.combo b{font:900 italic clamp(30px,4vw,54px) / 1 var(--font-display);color:#ffffe8;letter-spacing:4px;text-shadow:3px 3px #151507;transform:skew(-8deg)}.combo img{width:65px;height:auto;margin-top:3px}.precision{--size: clamp(78px, 9vw, 128px);position:absolute;top:1.5%;right:1.5%;width:var(--size);aspect-ratio:1;display:grid;place-items:center;background:url(/assets/precision-frame-D-4UhCI2.png) center / 100%;border-radius:50%;filter:drop-shadow(0 2px 2px #000)}.precision:before{content:"";position:absolute;inset:5%;border:5px solid #68edff;border-radius:50%;box-shadow:0 0 5px #44c5ff77;mask:repeating-conic-gradient(#000 0deg 37deg,transparent 37deg 45deg)}.precision__disc{position:absolute;inset:19%;border:2px solid #03182f;border-radius:50%;background:radial-gradient(circle at 30% 20%,#ccf8ff,#26a2de 45%,#064983 85%)}.precision b{position:relative;font:900 italic clamp(23px,3vw,39px) / 1 var(--font-display);color:#fff05a;letter-spacing:-1px;text-shadow:2px 2px #151300,-1px -1px #151300}.turbo-gauge{--charge: 0%;position:absolute;top:calc(2% + clamp(78px,9vw,128px));right:3%;width:58px;height:58px;padding:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:linear-gradient(to top,#e4b127 var(--charge),#152535 var(--charge));border:2px solid #8ca5bf;border-radius:10px;box-shadow:0 2px 3px #000}.turbo-gauge span{font-size:26px;line-height:1}.turbo-gauge b{font:800 10px/1.4 var(--font-body)}.turbo-gauge.ready{border-color:#fff176;box-shadow:0 0 14px #ffd53988}.turbo-gauge.boosting{background:#f59d16;animation:boost-glow .4s infinite alternate}@keyframes boost-glow{to{box-shadow:0 0 22px #ffce4b}}#feedback{position:absolute;top:26%;left:0;right:0;text-align:center;pointer-events:none;transition:opacity .2s}#feedback img{display:inline-block;width:159px;max-width:30vw;height:auto;filter:drop-shadow(0 3px 6px #0008)}.action-name{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:2px;color:#c8dae9;pointer-events:none}.clock{position:absolute;right:calc(var(--safe-right) + 14px);bottom:calc(var(--safe-bottom) + 10px);font-size:11px;font-variant-numeric:tabular-nums;color:#8da4bf;pointer-events:none}.progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#203047}.progress i{display:block;width:0;height:100%;background:var(--cyan)}@media (pointer: coarse){.combo{top:calc(var(--safe-top) + 10px);left:50%;transform:translate(-50%)}.combo b{font-size:clamp(28px,7vmin,48px)}.combo img{width:clamp(44px,10vmin,62px)}.precision{--size: clamp(64px, 15vmin, 104px);top:calc(var(--safe-top) + 8px);right:calc(var(--safe-right) + 8px)}.precision b{font-size:clamp(20px,5vmin,32px)}.turbo-gauge,.action-name,.clock{display:none}#feedback{top:22%}#feedback img{width:clamp(120px,34vmin,200px);max-width:45vw}}.overlay{position:absolute;inset:0;z-index:35;display:flex;align-items:center;padding:5% 6%;overflow-y:auto;background:linear-gradient(90deg,#08121af2,#08121adc 45%,#08121a10);touch-action:pan-y}.card{max-width:560px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:3px;color:var(--cyan)}h1{margin:18px 0 20px;font:800 clamp(32px,4vw,59px) / 1 var(--font-display);letter-spacing:-.5px}h2{margin:16px 0;font:800 48px var(--font-display)}p{margin:14px 0;line-height:1.7;color:#b4c5d8}.instructions{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;margin:24px 0;font-size:12px}.hint{max-width:430px;font-size:12px}.hint--touch{display:none}.startrow{display:flex;gap:12px;margin:24px 0 14px}#loading{font-size:11px;color:var(--muted)}#loading.error{color:var(--danger)}.paused{position:absolute;inset:0;z-index:15;display:grid;place-content:center;justify-items:center;gap:24px;background:#07111bb3;backdrop-filter:blur(3px)}.paused strong{font:700 36px var(--font-display);letter-spacing:8px}.paused__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:0 16px}@media (pointer: coarse){.overlay{align-items:safe center;padding:calc(var(--safe-top) + 20px) calc(var(--safe-right) + 24px) calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + 24px);background:#08121ae6}h1{font-size:clamp(30px,8vmin,48px);margin:10px 0 12px}.card p{font-size:13px;margin:8px 0}.instructions--keys,.hint--keys{display:none}.hint--touch{display:block}.startrow{margin:16px 0 10px}}.controls{display:none}.pause-btn{position:absolute;z-index:11;top:calc(var(--safe-top) + 12px);left:calc(var(--safe-left) + 12px);display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;background:#121a28b3;border:1px solid #ffffff26;backdrop-filter:blur(6px)}.pause-btn svg{width:20px;height:20px;fill:#e6eefc}@media (pointer: coarse){.controls{--key: calc(clamp(46px, 11.5vmin, 86px) * var(--control-scale, 1));--diag: calc(var(--key) * 1.4142);--step: calc(var(--diag) * .8);--gap: clamp(8px, 2vmin, 18px);position:absolute;inset:0;z-index:10;display:block;pointer-events:none}.controls__side{position:absolute;bottom:calc(var(--safe-bottom) + var(--gap));display:flex;flex-direction:column;gap:clamp(10px,4vmin,40px)}.controls__side--left{left:calc(var(--safe-left) + var(--gap));align-items:flex-start}.controls__side--right{right:calc(var(--safe-right) + var(--gap));align-items:flex-end}.pad{position:relative;width:calc(var(--diag) + var(--step));height:calc(var(--diag) + var(--step) * 2);pointer-events:auto;touch-action:none}.pad__key{--color: #fff;--x: 0px;--y: 0px;position:absolute;left:calc(var(--x) + (var(--diag) - var(--key)) / 2);top:calc(var(--y) + (var(--diag) - var(--key)) / 2);width:var(--key);height:var(--key);padding:0;border:1.5px solid #ffffff38;border-radius:14%;background:linear-gradient(135deg,#ffffff2e,#ffffff0a 55%,#00000026),#1a2333a8;box-shadow:inset 0 1px #ffffff30,0 6px 16px #0008;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transform:rotate(45deg);transition:transform 80ms ease-out,background 80ms,box-shadow 80ms,border-color 80ms;pointer-events:none}.pad__key:after{content:"";position:absolute;inset:22%;background:var(--color);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--color) 55%,transparent));mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 3 12h6v10h6V12h6z'/%3E%3C/svg%3E") center / contain no-repeat;transform:rotate(var(--arrow))}.pad__key--up{--color: var(--key-up);--arrow: -45deg}.pad__key--down{--color: var(--key-down);--arrow: 135deg}.pad__key--left{--color: var(--key-left);--arrow: -135deg}.pad__key--right{--color: var(--key-right);--arrow: 45deg}.pad--left .pad__key--left,.pad--right .pad__key--right{--y: var(--step)}.pad--left .pad__key--left{--x: 0px}.pad--right .pad__key--right,.pad--left .pad__key--up,.pad--left .pad__key--down{--x: var(--step)}.pad__key--down{--y: calc(var(--step) * 2)}.pad__key.is-held{border-color:color-mix(in srgb,var(--color) 80%,white);background:radial-gradient(circle,color-mix(in srgb,var(--color) 45%,transparent),transparent 75%),#1a2333d0;box-shadow:0 0 0 2px color-mix(in srgb,var(--color) 50%,transparent),0 0 24px color-mix(in srgb,var(--color) 70%,transparent);transform:rotate(45deg) scale(.92)}.turbo-btn{--charge: 0%;--size: calc(clamp(52px, 12vmin, 88px) * var(--control-scale, 1));position:relative;display:grid;place-items:center;width:var(--size);height:var(--size);padding:0;border:0;border-radius:50%;color:#fff;background:radial-gradient(circle at 50% 35%,#2b3a52,#121a28 70%) padding-box,conic-gradient(#ffd23f var(--charge),#ffffff1f var(--charge)) border-box;border:4px solid transparent;box-shadow:0 6px 18px #0009;pointer-events:auto;touch-action:none;transition:transform 80ms ease-out}.turbo-btn svg{width:46%;height:46%;fill:currentColor}.turbo-btn span{position:absolute;top:calc(100% + 4px);font:800 clamp(9px,2.2vmin,13px) var(--font-body);letter-spacing:1.5px;color:#dbe6f5;text-shadow:0 1px 3px #000}.turbo-btn:disabled{opacity:.55}.turbo-btn.ready{color:#ffe066;opacity:1;animation:turbo-ready .9s ease-in-out infinite alternate}.turbo-btn.active{color:#1a1200;background:radial-gradient(circle at 50% 35%,#ffe27a,#f59d16 70%) padding-box,conic-gradient(#fff3b0 100% 0) border-box;animation:turbo-boost .35s ease-in-out infinite alternate}.turbo-btn:active{transform:scale(.92)}@keyframes turbo-ready{to{box-shadow:0 0 0 3px #ffd23f55,0 0 26px #ffd23faa}}@keyframes turbo-boost{to{box-shadow:0 0 34px #ffb31f}}@media (orientation: landscape){.controls{--key: calc(clamp(44px, 13vmin, 92px) * var(--control-scale, 1))}.controls__side{top:calc(var(--safe-top) + 12px);justify-content:space-between}.controls__side--left{top:calc(var(--safe-top) + 64px)}.controls__side--right{top:calc(var(--safe-top) + clamp(64px,15vmin,104px) + 24px)}}}.menu{position:absolute;inset:0;z-index:30;display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;padding:calc(var(--safe-top) + 16px) calc(var(--safe-right) + 18px) calc(var(--safe-bottom) + 14px) calc(var(--safe-left) + 18px);background:radial-gradient(120% 80% at 80% 0%,#17305255 0%,transparent 60%),linear-gradient(180deg,#0a1220f7,#070d17fa);overflow:hidden;touch-action:pan-y}.menu__top{display:flex;align-items:center;justify-content:space-between}.menu__brand{font:900 26px var(--font-display);letter-spacing:1.5px}.menu__brand span{color:var(--cyan)}.menu__settings{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px}.menu__settings svg{width:18px;height:18px;fill:currentColor}.menu__categories{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.menu__categories::-webkit-scrollbar{display:none}.tab{--accent: #9fb4cc;flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;border:1px solid #ffffff1c;background:#ffffff0a;font-size:13px;font-weight:700;white-space:nowrap}.tab small{min-width:20px;padding:1px 6px;border-radius:999px;background:#ffffff14;font-size:11px;color:#b9c7d8}.tab__star{width:20px;height:20px;image-rendering:pixelated}.song-card__level{display:flex;align-items:center;gap:6px}.song-card__level img{height:18px;width:auto;image-rendering:pixelated}.tab__icon{width:18px;height:18px;background:var(--accent);mask:var(--icon) center / contain no-repeat}.tab[aria-selected=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent);color:#fff}.tab--novato{--accent: #8ee08a;--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C7 8 5 11 5 14a7 7 0 0 0 14 0c0-3-2-6-7-11z'/%3E%3C/svg%3E")}.tab--novato-estrella,.tab--estrella{--accent: #ffd23f;--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 2.9 6.9 7.1.6-5.4 4.7 1.7 7.3L12 17.8 5.7 21.5l1.7-7.3L2 9.5l7.1-.6z'/%3E%3C/svg%3E")}.tab--novato-lunar,.tab--luna{--accent: #8fc8ff;--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5A9 9 0 0 1 8.5 4a9 9 0 1 0 11.5 11.5z'/%3E%3C/svg%3E")}.tab--novato-solar,.tab--solar{--accent: #ff9a3d;--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v4M12 19v4M1 12h4M19 12h4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M4.2 19.8 7 17M17 7l2.8-2.8' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")}.tab--novato-estrella .tab__icon,.tab--novato-lunar .tab__icon,.tab--novato-solar .tab__icon{opacity:.6}.menu__songs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));align-content:start;gap:10px;overflow-y:auto;overscroll-behavior:contain;padding:2px}.song-card{display:flex;align-items:center;gap:12px;padding:8px;text-align:left;border-radius:12px;border:1px solid #ffffff14;background:#ffffff08;transition:border-color .15s,background .15s,transform .1s}.song-card:active{transform:scale(.98)}.song-card img{flex:none;width:96px;height:56px;object-fit:cover;border-radius:8px;background:#0f1a2b}.song-card__info{display:grid;gap:2px;min-width:0}.song-card strong{overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap}.song-card span,.song-card em{overflow:hidden;font-size:12px;font-style:normal;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}.song-card[aria-selected=true]{border-color:var(--cyan);background:#79f4e214;box-shadow:inset 0 0 0 1px #79f4e255}.menu__empty{grid-column:1 / -1;max-width:460px;color:var(--muted)}.menu__bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid #ffffff14}.menu__selected{display:flex;align-items:center;gap:10px;min-width:0}.menu__selected img{width:64px;height:38px;object-fit:cover;border-radius:6px}.menu__selected div{display:grid;min-width:0}.menu__selected strong,.menu__selected span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu__selected span{font-size:12px;color:var(--muted)}.menu__actions{display:flex;flex:none;gap:10px}.menu__actions .primary{min-width:130px}.menu__progress{position:absolute;left:0;right:0;top:-4px;height:3px;overflow:hidden;border-radius:3px;background:#ffffff12}.menu__progress i{display:block;width:0;height:100%;background:var(--cyan);transition:width .15s}.menu__progress.indeterminate i{width:40%!important;animation:indeterminate 1s ease-in-out infinite}.menu__progress span{position:absolute;top:6px;left:0;font-size:11px;color:var(--muted)}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media (max-width: 560px){.menu__selected img{display:none}.menu__actions .primary{min-width:100px}.menu__settings span{display:none}}@media (orientation: landscape) and (max-height: 500px){.menu{gap:8px;padding-top:calc(var(--safe-top) + 10px)}.menu__brand{font-size:20px}.song-card img{width:72px;height:42px}}.settings{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;color:var(--text);background:#0e1726;border:1px solid #ffffff1f;border-radius:16px;box-shadow:0 24px 64px #000a}.settings::backdrop{background:#03070dcc;backdrop-filter:blur(4px)}.settings__form{display:grid;gap:14px;padding:18px 20px 20px}.settings__head{display:flex;align-items:center;justify-content:space-between}.settings__head h2{margin:0;font-size:30px}.settings__close{width:38px;height:38px;padding:0;border-radius:50%}.setting{display:grid;gap:8px;margin:0;padding:0;border:0}.setting legend{margin-bottom:8px;font-size:13px;font-weight:700;color:#cdd9e8}.setting output{margin-left:6px;color:var(--cyan)}.setting__hint{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}.setting input[type=range]{width:100%;accent-color:var(--cyan)}.segmented{display:flex;gap:4px;padding:4px;border-radius:12px;background:#ffffff0d}.segmented label{flex:1;cursor:pointer}.segmented input{position:absolute;opacity:0;pointer-events:none}.segmented span{display:block;padding:9px 6px;border-radius:9px;text-align:center;font-size:13px;font-weight:600;color:#b9c7d8;transition:background .15s}.segmented input:checked+span{background:var(--cyan);color:#062027}.segmented input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}.settings__done{justify-self:end}