:root{font-family:system-ui,-apple-system,Be Vietnam Pro,sans-serif;color:#f7f7ff;background:#0b1020}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 15% 10%,#26335b 0,#0b1020 48%)}button,a,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}a{color:inherit}.game-header{height:68px;padding:0 clamp(16px,4vw,56px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff20}.game-header a{text-decoration:none;color:#bec8e2}.game-header span{font-weight:900;letter-spacing:.16em}.game-header span b{color:#f7bf76}.game-header button,.result-actions button,.result-actions a{border:1px solid #ffffff40;border-radius:12px;color:#fff;background:#ffffff10;padding:11px 18px;text-decoration:none}.game-header button:hover,.result-actions button:hover,.result-actions a:hover{background:#ffffff25}.game-layout{max-width:1320px;margin:auto;display:grid;grid-template-columns:minmax(260px,370px) minmax(340px,620px);justify-content:center;gap:clamp(20px,4vw,56px);padding:28px clamp(16px,4vw,48px)}.game-info h1{font-size:clamp(26px,3vw,42px);line-height:1.1;margin:8px 0}.game-info>p{color:#b9c4df;line-height:1.5}.eyebrow{font-size:.72rem;letter-spacing:.2em;font-weight:800;color:#f7bf76}.demo-note{border-left:3px solid #f7bf76;padding:9px 12px;background:#ffffff0d;font-size:.84rem}.video-frame{aspect-ratio:16/9;background:#03050c;border-radius:14px;overflow:hidden;border:1px solid #ffffff2b}.video-frame iframe{width:100%;height:100%;border:0}.video-hint{font-size:.84rem}.calibration{display:grid;gap:8px;margin:22px 0;padding:16px;background:#ffffff0d;border-radius:14px;color:#ccd7f0;font-size:.85rem}.calibration output{float:right;color:#fff}.calibration input{width:100%;accent-color:#f7bf76}#status{min-height:2.7em;font-size:.85rem}.play-panel{min-width:0}.scorebar{display:flex;justify-content:space-around;text-align:center;padding:12px;background:#ffffff10;border:1px solid #ffffff20;border-radius:15px 15px 0 0}.scorebar div{display:grid;gap:4px}.scorebar small{font-size:.65rem;letter-spacing:.14em;color:#a7b6d7}.scorebar strong{font-size:1.35rem}.board{height:min(67dvh,650px);min-height:420px;position:relative;overflow:hidden;background:#101a32;border-left:1px solid #ffffff20;border-right:1px solid #ffffff20;touch-action:none}#notes{display:block;width:100%;height:100%}.hit-line{position:absolute;left:0;right:0;bottom:19%;height:3px;background:#ffd489;box-shadow:0 0 16px #ffc56f}.lanes{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(4,1fr)}.lanes button{position:relative;border:0;border-right:1px solid #ffffff1c;background:transparent;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none}.lanes button:last-child{border-right:0}.lanes button b{position:absolute;bottom:3%;left:50%;transform:translate(-50%);display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:#ffffff19;border:1px solid #ffffff55;font-size:1.25rem}.lanes button.active{background:#ffffff1c}.lanes button.active b{background:#f7bf76;color:#11182b}.center-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;justify-items:center;gap:14px;background:#09101acc;z-index:3;text-align:center;padding:20px}.center-overlay p{font-size:1.3rem;font-weight:700}.center-overlay button{background:#f7bf76;border:0;border-radius:13px;padding:16px 24px;font-weight:800;color:#192039}.center-overlay[hidden]{display:none}.progress{display:flex;align-items:center;gap:12px;padding:13px 2px;color:#bdc8df;font-variant-numeric:tabular-nums}.progress div{height:6px;border-radius:99px;flex:1;background:#fff2;overflow:hidden}.progress i{display:block;width:0;height:100%;background:#f7bf76}.result{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:#050914db;z-index:10}.result[hidden]{display:none}.result-card{width:min(100%,620px);padding:clamp(24px,5vw,46px);border:1px solid #ffffff36;border-radius:24px;background:#17213c;box-shadow:0 30px 80px #0008;text-align:center}.result-card h2{font-size:clamp(28px,5vw,44px);margin:8px 0 26px}.result-stats{display:flex;justify-content:space-around;gap:10px;margin:20px 0}.result-stats span{display:grid;gap:7px;color:#b9c4df;font-size:.82rem}.result-stats b{color:#fff;font-size:1.45rem}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.result-actions #retry{grid-column:1/-1}.result-actions #buy-midi{background:#f7bf76;color:#12182b;border-color:#f7bf76;font-weight:800}.result-actions #buy-midi:disabled{opacity:.5}.delivery-note{font-size:.75rem;color:#abb8d4;line-height:1.5;margin:22px 0 0}@media (max-width:820px){.game-header{height:54px}.game-header span{font-size:.8rem}.game-layout{display:flex;flex-direction:column;padding:16px;gap:10px}.game-info{display:contents}.game-info .eyebrow,.game-info h1,.game-info #artist,.game-info .demo-note{order:0}.game-info h1{font-size:23px;margin:0}.video-frame{order:1;width:min(100%,320px);aspect-ratio:16/9}.video-hint{order:1;margin:0;font-size:.72rem}.play-panel{order:2}.board{height:min(58dvh,620px);min-height:350px}.calibration,#status{order:3;margin:0}.scorebar{padding:8px}.scorebar strong{font-size:1.1rem}.lanes button b{width:42px;height:42px}.result-actions{grid-template-columns:1fr}.result-actions #retry{grid-column:auto}body.playing .game-info .eyebrow,body.playing .game-info h1,body.playing .game-info #artist,body.playing .game-info .demo-note,body.playing .video-hint{display:none}body.playing .game-layout{padding-top:8px;gap:5px}body.playing .video-frame{width:220px}body.playing .board{height:calc(100dvh - 285px);min-height:350px}}