:root{color:#151515;font-synthesis:none;background:#efece4;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{overscroll-behavior:none;min-height:100%;margin:0}button{font:inherit;color:inherit}.landing{background:#efece4;grid-template-columns:minmax(250px,42%) 1fr;min-height:100svh;display:grid}.logo-grid{background:#ff5b45;border-right:3px solid #151515;grid-template-columns:repeat(4,1fr);gap:8px;padding:7vw 4vw 0;display:grid}.logo-grid i{background:#efece4;border:3px solid #151515;height:72%;display:block;box-shadow:8px 8px #151515}.logo-grid i.dark{background:#151515;transform:translateY(20%)}.landing section{align-self:center;max-width:760px;padding:10vw 8vw}.kicker{letter-spacing:.18em;font-size:.72rem;font-weight:900}.landing h1,.songbook h1{letter-spacing:-.08em;margin:.25em 0;font-size:clamp(4rem,11vw,9rem);line-height:.72}.landing h1 em{color:#ff5b45;font-style:normal}.landing section>p:not(.kicker){max-width:500px;font-size:1.15rem;line-height:1.5}.actions{flex-wrap:wrap;gap:12px;margin-top:32px;display:flex}.actions button,.start,.result button{color:#fff;cursor:pointer;background:#151515;border:3px solid #151515;padding:15px 22px;font-weight:900;box-shadow:5px 5px #ff5b45}.actions .secondary{color:#151515;background:#f4dc4b}.actions .icon-button{padding:12px}.status{text-align:center;place-content:center;min-height:100svh;display:grid}.status svg{margin:auto;animation:1s infinite alternate pulse}.songbook{background:#efece4;min-height:100svh}.songbook header,.play header{height:74px;padding:0 max(18px,env(safe-area-inset-left));border-bottom:3px solid #151515;justify-content:space-between;align-items:center;display:flex}.songbook header span,.brand{align-items:center;gap:12px;display:flex}.songbook header small,.brand small{color:#777;display:block}.songbook header>div{align-items:center;gap:12px;display:flex}.songbook section{width:min(780px,100%);margin:auto;padding:50px 20px 80px}.songbook h1{font-size:clamp(4rem,12vw,7rem);line-height:.85}.songs{border:3px solid #151515}.song{text-align:left;cursor:pointer;background:0 0;border:0;border-bottom:2px solid #151515;grid-template-columns:52px 1fr 30px;align-items:center;width:100%;min-height:78px;padding:12px;display:grid}.song:last-child{border-bottom:0}.song.selected{background:#ff5b45}.song i{font-style:normal;font-weight:900}.song b,.song small{display:block}.song small{margin-top:5px}.difficulty{align-items:center;gap:8px;margin:20px 0;display:flex}.difficulty span{margin-right:auto;font-size:.7rem;font-weight:900}.difficulty button{text-transform:uppercase;background:0 0;border:2px solid #151515;padding:8px 12px;font-size:.7rem;font-weight:900}.difficulty button.active{background:#f4dc4b;box-shadow:3px 3px #151515}.start{background:#151515;justify-content:space-between;width:100%;font-size:1.1rem;display:flex;box-shadow:7px 7px #ff5b45}.play{color:#efece4;touch-action:none;background:#151515;height:100svh;position:relative;overflow:hidden}.play header{color:#151515;z-index:20;background:#efece4;position:relative}.brand{text-align:left;cursor:pointer;background:0 0;border:0}.brand>b{background:#ff5b45;border:2px solid #151515;place-content:center;width:40px;height:40px;display:grid}.brand span b{display:block}.score{align-items:center;gap:15px;display:flex}.score>span{text-transform:uppercase;font-size:.62rem}.score>span b{font-size:1rem;display:block}.sound{background:0 0;border:0;padding:8px}.message{z-index:15;color:#151515;text-transform:uppercase;background:#f4dc4b;padding:7px 14px;font-size:.7rem;font-weight:900;position:absolute;top:84px;left:50%;transform:translate(-50%)}.board{background:#efece4;grid-template-columns:repeat(4,1fr);height:calc(100svh - 74px);display:grid;position:relative}.lane{touch-action:none;background:0 0;border:0;border-right:2px solid #151515;padding:0;position:relative;overflow:hidden}.lane:last-of-type{border-right:0}.lane:active{background:#f4dc4b}.lane.rejected{background:#ff5b45;animation:.26s ease-out rejected-tap}.tile{color:#f4dc4b;will-change:transform;background:#151515;border:2px solid #efece4;place-content:center;width:86%;font-style:normal;display:grid;position:absolute;top:0;left:7%;box-shadow:inset 0 -5px #333}.tile span{font-size:.7rem}.hitline{pointer-events:none;z-index:10;border-top:5px solid #ff5b45;position:absolute;top:82%;left:0;right:0}.hitline:after{content:"HIT";color:#151515;background:#ff5b45;padding:4px;font-size:.6rem;font-weight:900;position:absolute;top:-25px;right:8px}.result{z-index:30;color:#151515;text-align:center;background:#efece4;border:4px solid #151515;padding:34px;position:absolute;inset:110px 24px auto;box-shadow:10px 10px #ff5b45}.result.won{box-shadow:10px 10px #f4dc4b}.result h2{margin:.1em;font-size:3.2rem}.result p{font-size:1.5rem;font-weight:900}.result button{justify-content:center;align-items:center;gap:8px;width:100%;margin-top:24px;display:flex}.result .text{color:#151515;box-shadow:none;background:0 0;border:0;margin-top:8px}.error{color:#151515;background:#ff5b45;justify-content:space-between;align-items:center;gap:12px;padding:10px;font-weight:800;display:flex}.error button{cursor:pointer;background:#efece4;border:2px solid #151515;padding:4px 8px;font-weight:900}.play>.error{z-index:40;position:absolute;bottom:20px;left:20px;right:20px}.status,.landing,.songbook{padding-bottom:env(safe-area-inset-bottom)}@keyframes pulse{to{transform:scale(1.25)}}@keyframes rejected-tap{0%{background:#ff5b45;transform:scale(.96)}to{background:0 0;transform:scale(1)}}@media (width<=700px){.landing{display:block}.logo-grid{border-bottom:3px solid #151515;border-right:0;height:36svh;padding:28px 35px 0}.landing section{padding:35px 24px}.landing h1{font-size:5rem}.songbook section{padding-top:32px}.songbook h1{font-size:4.2rem}.score>span:first-child{display:none}.play header{padding-top:env(safe-area-inset-top);height:calc(68px + env(safe-area-inset-top))}.board{height:calc(100svh - 68px - env(safe-area-inset-top))}.message{top:calc(78px + env(safe-area-inset-top))}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.status svg{animation:none}.tile{will-change:auto}}button:focus-visible{outline-offset:2px;outline:4px solid #4e61ff}
