:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;color:#f5ebf8;background:#151321}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 10%,#43233988,transparent 60%);min-height:100dvh;user-select:none}header{height:84px;max-width:1120px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid #ffffff17}header img{width:145px;height:65px;object-fit:contain}a{color:#ffb6db;text-decoration:none}a:hover{text-decoration:underline}main{max-width:1020px;margin:28px auto;display:grid;grid-template-columns:1fr minmax(290px,460px);gap:60px;padding:0 24px}.song-info{align-self:center}h1{font:600 clamp(28px,4vw,46px)/1.15 Georgia,serif;margin:14px 0;color:#ffe5f2}h2{font-family:Georgia,serif}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#e0a7cc}p{color:#bdb2cb;line-height:1.6;font-size:14px}.stats{display:flex;gap:30px;margin:30px 0}.stats b{display:block;font-size:32px;font-variant-numeric:tabular-nums}.stats small{font-size:10px;letter-spacing:1.4px;color:#a69ab3}.reward-rule{color:#edcb8c}button{font:inherit;cursor:pointer;border:1px solid #ffffff20;border-radius:12px;padding:14px 22px;background:#34283f;color:#fff}button:disabled{opacity:.5;cursor:default}#start{display:block;width:100%;margin:24px 0 12px;background:linear-gradient(110deg,#de70a6,#ac79c7);font-weight:700}#stop{width:100%}label{display:flex;align-items:center;gap:16px;font-size:13px;color:#c4b5cb}input{accent-color:#ed91bf}#status{min-height:23px}#result{border:1px solid #ec9ac24a;background:#43263766;padding:20px;border-radius:16px}#reward{font-size:32px;color:#f9d99a}#result a{display:block;margin-top:15px}.game{min-width:0}.highway{position:relative;height:min(66dvh,620px);min-height:300px;background:#0a0a14;border:1px solid #8b6e9b55;border-radius:18px 18px 0 0;overflow:hidden;box-shadow:0 25px 100px #e379b313}canvas{width:100%;height:100%;display:block}.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;background:#0a0a14;padding:10px;border-radius:0 0 18px 18px}.keys button{color:var(--lane);border-color:var(--lane);touch-action:none;font-weight:700;font-size:20px;padding:17px 0;background:#1d1b2c}.keys button.pressed{background:var(--lane);color:#151321;box-shadow:0 0 20px var(--lane)}#judgement{position:absolute;top:47%;width:100%;text-align:center;font-weight:800;font-size:26px;text-shadow:0 0 18px currentColor;pointer-events:none}progress{width:100%;height:4px;margin-top:16px;accent-color:#e7a3ca}button:focus-visible,a:focus-visible{outline:3px solid #ffe0ee;outline-offset:4px}[hidden]{display:none!important}@media(max-width:700px){header{height:65px;font-size:12px}header img{width:110px;height:50px}main{grid-template-columns:1fr;gap:18px;margin:20px auto;padding:0 16px}.song-info{order:0}.game{order:1}h1{font-size:28px}.stats{margin:12px 0;gap:25px}.stats b{font-size:24px}.song-info>p:not(#status){margin:6px 0;font-size:12px}#start{margin:12px 0}#status:empty{display:none}.highway{height:48dvh;min-height:260px}}

.mobile-song-title{display:none}
@media(max-width:700px){
 body{background:radial-gradient(ellipse at 50% 25%,#502b5366,transparent 70%),#141020}
 header{height:64px;padding:8px 16px;justify-content:flex-start;gap:14px;border-bottom-color:#b57caf55}
 header img,header>span,.back-label{display:none}
 .back-link{display:grid;place-items:center;width:30px;min-height:44px;font:48px/1 Georgia,serif;flex-shrink:0}
 .mobile-song-title{display:block;margin:0;font-size:clamp(20px,5.5vw,28px);line-height:1.1;letter-spacing:-.5px}
 main{display:flex;flex-direction:column;gap:0;margin:16px auto 24px;padding:0 14px;max-width:560px}
 .song-info{display:contents}
 .song-info>.eyebrow,.song-info>h1,.song-info>p:not(#status){display:none}
 .stats{order:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:center;margin:0;padding:12px 6px;background:linear-gradient(145deg,#452a48cc,#201628);border:1px solid #b77dc3;border-bottom:0;border-radius:28px 28px 0 0;box-shadow:0 -3px 20px #e98bc733;text-align:center}
 .stats>div+div{border-left:1px solid #b77dc366}
 .stats b{font-size:30px;line-height:1.15;color:#ffe9f8}
 .stats small{display:block;margin-top:3px;font-size:10px;color:#cc94c4;letter-spacing:2px}
 .game{order:1;border:1px solid #b77dc3;border-top:0;border-radius:0 0 28px 28px;padding-bottom:8px;background:#121020;box-shadow:0 8px 30px #d07fc526;overflow:hidden}
 .highway{height:calc(100svh - 340px);min-height:220px;max-height:760px;border:0;border-top:1px solid #b77dc326;border-radius:20px 20px 0 0;background:linear-gradient(110deg,#10101e,#181224);box-shadow:none}
 .keys{padding:10px 9px 8px;gap:8px;background:transparent;border-radius:0}
 .keys button{height:60px;padding:0;border-radius:17px;font-size:26px;border-width:1px;background:linear-gradient(145deg,#343042,#1b1729);box-shadow:inset 0 1px 0 #ffffff22}
 .keys button.pressed{background:var(--lane);color:#151321}
 progress{display:block;width:calc(100% - 26px);height:3px;margin:0 auto;opacity:.65}
 #start,#stop{order:2;margin:16px 0 0;min-height:56px;border-radius:24px;font-size:22px;box-shadow:0 0 18px #dc80b529}
 #start{background:linear-gradient(110deg,#f27abd,#ac79d4);border-color:#ffc1e2a0}
 body.is-playing #start{display:none}
 #status{order:3;margin:10px 0 0;text-align:center;font-size:12px;min-height:0}
 #result{order:4;margin-top:16px}
 .signin{order:3;margin-top:12px;text-align:center}
 .play-help{order:5;margin-top:18px;padding:12px 4px;border-top:1px solid #ffffff17}
 .play-help p{font-size:12px;margin:4px 0 10px}
 .play-help label{font-size:12px}
}