:root{--night:#080504;--paper:#fff0d0;--sand:#ccb184;--fire:#ed4e29;--sun:#ffd36f;--red:#a9251b;--line:rgba(255,240,208,.2);--safe:max(12px,env(safe-area-inset-bottom))}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--night);color:var(--paper);font-family:Arial,sans-serif;touch-action:none}button,a{font:inherit;color:inherit}button{cursor:pointer}a{text-decoration:none}.hidden{display:none!important}button:focus-visible,a:focus-visible{outline:2px solid var(--sun);outline-offset:3px}canvas{position:fixed;inset:0;width:100%;height:100%;display:block}.grain{position:fixed;z-index:3;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}header{position:fixed;z-index:20;top:0;left:0;right:0;padding:max(12px,env(safe-area-inset-top)) 16px 8px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;pointer-events:none}.brand{display:flex;align-items:center;gap:9px;pointer-events:auto;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 4px 18px #000}.brand svg{width:30px;fill:var(--fire)}.mode{text-align:center;text-transform:uppercase}.mode small,.mode strong{display:block}.mode small{color:var(--sand);font-size:6px;letter-spacing:.2em}.mode strong{font:20px Impact,sans-serif;letter-spacing:.08em}nav{justify-self:end;display:flex;gap:5px;pointer-events:auto}nav>*{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#080504ba;font-size:9px;font-weight:900}nav>*:hover{border-color:var(--sun);background:#52170f}.hud{position:fixed;z-index:14;top:65px;left:50%;width:min(980px,calc(100% - 24px));transform:translateX(-50%);display:grid;grid-template-columns:.8fr .7fr 1.2fr .7fr 1.2fr;gap:6px;pointer-events:none}.hud>div{padding:7px 10px;border:1px solid var(--line);border-radius:12px;background:#080504a8;backdrop-filter:blur(11px)}.hud span,.hud strong{display:block}.hud span{color:var(--sand);font-size:6px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.hud strong{margin-top:3px;font-size:14px}.hud i{display:block;height:3px;margin-top:5px;background:#fff2;overflow:hidden}.hud i b{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--red),var(--fire),var(--sun));transition:width .12s}.overdrive i b{width:0;background:linear-gradient(90deg,#b52e1f,#ffd36f)}.judgement{position:fixed;z-index:17;left:50%;top:36%;transform:translate(-50%,-50%);text-align:center;opacity:0;pointer-events:none;text-shadow:0 5px 24px #000}.judgement strong,.judgement small{display:block}.judgement strong{font:clamp(42px,8vw,82px)/.8 Impact,sans-serif;text-transform:uppercase;color:var(--sun)}.judgement small{margin-top:6px;font-size:9px;font-weight:900;letter-spacing:.12em}.judgement.pop{animation:judge .62s ease-out}@keyframes judge{10%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-72%) scale(.95)}}.touch-lanes{position:fixed;z-index:15;left:50%;bottom:var(--safe);transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(58px,100px)) minmax(68px,110px);gap:7px}.touch-lanes button{height:54px;border:1px solid var(--line);border-radius:14px;background:#080504b8;backdrop-filter:blur(11px);font-weight:900}.touch-lanes button.active,.touch-lanes button:active{border-color:var(--sun);background:#7d2417d9;transform:translateY(2px)}.touch-lanes kbd,.touch-lanes span{display:block}.touch-lanes kbd{font:bold 11px Arial}.touch-lanes span{margin-top:3px;color:var(--sand);font-size:6px;text-transform:uppercase}.touch-lanes .ignite{border-color:#ef512e;background:linear-gradient(145deg,#681b12cc,#160806dd)}.touch-lanes .ignite.ready{border-color:var(--sun);box-shadow:0 0 20px #ef512e88;animation:ready .65s infinite alternate}@keyframes ready{to{filter:brightness(1.5)}}.loading{position:fixed;z-index:60;inset:0;display:grid;place-content:center;justify-items:center;gap:17px;background:radial-gradient(circle at 50% 65%,#691e1050,transparent 40%),#080504}.loading>strong{font-size:10px;letter-spacing:.19em;text-transform:uppercase}.loading>small{color:var(--sand);font-size:8px}.loading>div:not(.mark){width:min(280px,70vw);height:2px;background:#fff2}.loading>div i{display:block;width:0;height:100%;background:var(--fire)}.mark{position:relative;width:76px;height:62px}.mark i{position:absolute;width:42px;height:38px;clip-path:polygon(50% 0,100% 100%,80% 100%,50% 24%,20% 100%,0 100%);background:var(--red);filter:drop-shadow(0 0 17px #ff5a2d88)}.mark i:first-child{left:17px}.mark i:nth-child(2){left:0;top:23px;transform:scale(.7)}.mark i:nth-child(3){right:0;top:23px;transform:scale(.7)}.overlay,.pause{position:fixed;z-index:40;inset:0;padding:18px;display:grid;place-items:center;overflow:auto;background:#040302bd;backdrop-filter:blur(13px)}.start-card,.end-card{width:min(1080px,100%);max-height:calc(100svh - 36px);display:grid;grid-template-columns:.88fr 1.12fr;overflow:auto;border:1px solid #d5482d77;border-radius:30px;background:linear-gradient(145deg,#241009fa,#080504fc);box-shadow:0 40px 140px #000}.start-art,.end-art{position:relative;min-height:650px;background:linear-gradient(0deg,#080504ef,transparent 58%),url("../assets/game/environment-night.webp") center/cover}.start-art:after,.end-art:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,#e54b2d55,transparent 28%)}.logo-fire{position:absolute;z-index:2;left:24px;bottom:28px;text-transform:uppercase}.logo-fire span,.logo-fire strong,.logo-fire small{display:block}.logo-fire span{color:var(--sun);font:74px/.72 Impact,sans-serif}.logo-fire strong{font:112px/.68 Impact,sans-serif;color:var(--fire)}.logo-fire small{margin-top:16px;font-size:8px;font-weight:900;letter-spacing:.24em}.start-copy,.end-copy{padding:clamp(26px,5vw,55px);align-self:center}.start-copy>p:first-child,.end-copy>p:first-child,.pause p{margin:0;color:var(--sun);font-size:8px;font-weight:900;letter-spacing:.2em;text-transform:uppercase}.start-copy h1,.end-copy h2,.pause h2{margin:12px 0;font:clamp(48px,6vw,78px)/.82 Impact,sans-serif;text-transform:uppercase}.start-copy>p:not(:first-child),.end-copy>p{color:var(--sand);font:14px/1.6 Georgia,serif}.config{display:grid;grid-template-columns:1.3fr .7fr;gap:9px;margin-top:18px}.config>div{padding:10px;border:1px solid var(--line);border-radius:12px;background:#0003}.config>div>span{display:block;margin-bottom:6px;color:var(--sand);font-size:7px;font-weight:900;text-transform:uppercase}.config>div>div{display:flex;gap:4px;flex-wrap:wrap}.config button{min-height:34px;flex:1;padding:4px 7px;border:1px solid var(--line);border-radius:8px;background:#fff1;color:var(--sand);font-size:7px;font-weight:900;text-transform:uppercase}.config button.selected{border-color:var(--sun);background:#681b12;color:var(--paper)}.keys{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}.keys span{padding:7px 9px;border:1px solid var(--line);border-radius:8px;color:var(--sand);font-size:7px;font-weight:900;text-transform:uppercase}.keys kbd{display:inline-grid;place-items:center;min-width:22px;height:21px;margin-right:2px;border:1px solid #fff4;border-radius:5px;background:#0004;color:var(--paper);font-size:8px}.career{margin-top:14px;padding:10px 13px;border-left:2px solid var(--fire);background:#0003}.career span,.career strong{display:block}.career span{color:var(--sand);font-size:7px;text-transform:uppercase}.career strong{margin-top:4px;font-size:13px}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px}.actions>*,.pause button,.pause a{min-height:46px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;background:#fff1;font-size:8px;font-weight:900;text-transform:uppercase}.actions .primary,.primary{border:0;background:linear-gradient(135deg,var(--red),#65130d);box-shadow:0 12px 28px #a32d1b42}.pause{z-index:35;text-align:center}.pause>div{padding:42px;border:1px solid var(--line);border-radius:27px;background:#100a07ed}.pause button,.pause a{display:flex;margin:9px auto 0}.end-art>span{position:absolute;z-index:2;top:24px;left:24px;font:150px/.72 Impact,sans-serif;color:var(--sun)}.end-art>strong{position:absolute;z-index:2;left:24px;bottom:24px;font:42px/.8 Impact,sans-serif;text-transform:uppercase}.final span,.final strong{display:block}.final span{color:var(--sand);font-size:7px;text-transform:uppercase}.final strong{margin-top:4px;font:clamp(64px,9vw,112px)/.8 Impact,sans-serif;color:var(--sun)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:18px 0;background:var(--line);border:1px solid var(--line)}.stats>div{padding:11px;background:#100a07}.stats span,.stats strong{display:block}.stats span{color:var(--sand);font-size:6px;text-transform:uppercase}.stats strong{margin-top:3px;font-size:15px}
@media(max-width:850px){header{grid-template-columns:1fr auto}.mode{display:none}nav a:nth-last-child(2),nav a:nth-last-child(3){display:none}.hud{top:56px;grid-template-columns:repeat(4,1fr)}.hud .overdrive{grid-column:1/-1}.overlay{padding:7px;align-items:start}.start-card,.end-card{grid-template-columns:1fr;max-height:calc(100svh - 14px);border-radius:22px}.start-art,.end-art{min-height:190px;height:24svh}.logo-fire span{font-size:52px}.logo-fire strong{font-size:72px}.start-copy,.end-copy{padding:19px}.start-copy h1,.end-copy h2{font-size:46px}.end-art>span{font-size:75px}.end-art>strong{font-size:30px}.touch-lanes{grid-template-columns:repeat(4,58px) 68px}}
@media(max-width:430px){.brand span{display:none}header nav>*{width:33px;height:33px}.hud{top:52px;width:calc(100% - 10px);gap:3px}.hud>div{padding:5px 6px}.hud strong{font-size:11px}.touch-lanes{bottom:6px;grid-template-columns:repeat(4,46px) 56px;gap:4px}.touch-lanes button{height:48px;border-radius:12px}.config{grid-template-columns:1fr}.keys{display:none}.start-art{min-height:145px;height:18svh}.logo-fire{bottom:14px}.logo-fire span{font-size:40px}.logo-fire strong{font-size:58px}.start-copy h1{font-size:38px}.stats{grid-template-columns:1fr 1fr}}
@media(max-height:650px) and (orientation:landscape){.start-card,.end-card{grid-template-columns:.75fr 1.25fr}.start-art,.end-art{height:auto;min-height:calc(100svh - 24px)}.start-copy,.end-copy{padding:18px}.start-copy h1,.end-copy h2{font-size:42px}.keys{display:none}.touch-lanes{left:auto;right:8px;transform:none;grid-template-columns:repeat(5,52px)}.touch-lanes button{height:43px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* v31 rhythm calibration and hold-note UI */
.calibration{margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#0003}.calibration>span{display:block;margin-bottom:6px;color:var(--sand);font-size:7px;font-weight:900;text-transform:uppercase}.calibration>div{display:flex;gap:4px}.calibration button{min-height:32px;flex:1;padding:4px 7px;border:1px solid var(--line);border-radius:8px;background:#fff1;color:var(--sand);font-size:7px;font-weight:900;text-transform:uppercase}.calibration button.selected{border-color:var(--sun);background:#681b12;color:var(--paper)}.calibration small{display:block;margin-top:6px;color:var(--sand);font-size:7px}.touch-lanes button.holding{border-color:var(--sun);box-shadow:0 0 18px #ffd36f88;background:#7d2417ee}

/* v32 practice mode */
.config button[data-mode="practice"]{border-color:rgba(255,211,111,.42)}