@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:light;--ink:#263c37;--paper:#f3efe6;--red:#b54635}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans KR',system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #263c3720;background:transparent;border-radius:8px;padding:10px 16px}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #b54635;outline-offset:4px}a{color:inherit;text-decoration:none}header{max-width:1256px;margin:auto;height:76px;display:flex;align-items:center;gap:22px;border-bottom:1px solid #263c3720;padding:0 24px}.brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:19px}.edition{font-size:10px;letter-spacing:2px;color:#78847c}nav{margin-left:auto;display:flex;gap:15px;align-items:center;font-size:12px}nav button{border:0;font-size:12px}main{max-width:1208px;margin:auto;padding:28px 24px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.6px;margin:0 0 8px;color:#7d8576}h1{font-weight:900;font-size:clamp(32px,5vw,54px);letter-spacing:-2.5px;margin:0;display:flex;align-items:center;gap:14px}.stamp{font-size:12px;letter-spacing:2px;border:2px solid var(--red);color:var(--red);width:39px;height:39px;display:grid;place-content:center;transform:rotate(-8deg);border-radius:5px;line-height:1}.intro{font-size:13px;color:#69776e;margin:9px 0 0}.best{text-align:right}.best small{display:block;font-size:9px;letter-spacing:1px;color:#738076}.best b{font-size:44px;line-height:1.3;letter-spacing:-2px;margin-right:7px;font-weight:500}.best span{font-size:12px}.game-shell{position:relative;height:min(65vh,660px);min-height:440px;border-radius:18px;overflow:hidden;background:#d7d8c8;border:1px solid #263c3720;box-shadow:0 14px 30px #374a3010}#stage,#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#stage canvas{outline:none}#loading{position:absolute;z-index:3;top:45%;width:100%;text-align:center;padding:20px;font-size:14px;background:#f3efe6e8}.hud{position:absolute;top:20px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center}.live-label{font-size:9px;letter-spacing:2px;display:flex;gap:8px;align-items:center}.live-label i{width:6px;height:6px;border-radius:50%;background:#4a7962}#pause{background:#f6f0e8b8;padding:7px 10px;font-size:11px;backdrop-filter:blur(8px)}.scoreboard{position:absolute;top:51px;left:28px;pointer-events:none}.scoreboard span{font-size:82px;line-height:1;letter-spacing:-6px;font-weight:800;text-shadow:0 1px 20px #fff8}.scoreboard small{display:block;letter-spacing:1.6px;font-size:8px;margin-top:7px}.cue{position:absolute;top:26%;right:30px;max-width:230px;padding:9px 14px;border-radius:30px;background:#faf6edd4;font-size:12px;backdrop-filter:blur(8px);transition:background .15s}.cue.go{background:#245c48;color:#fff}.cue.perfect{background:#af4634;color:#fff}.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,88%);padding:30px;background:#f8f4eaf5;backdrop-filter:blur(16px);border:1px solid #ffffffa0;box-shadow:0 20px 80px #263c3728;border-radius:16px;text-align:center}.panel-label{font-size:9px;letter-spacing:1.8px;color:#a04737;font-weight:700}.panel h2{font-size:23px;letter-spacing:-1px;margin:13px 0}.panel p{font-size:12px;line-height:1.9;color:#6b766b}.mode{display:flex;gap:6px;margin:20px 0 12px}.mode button{flex:1;font-size:10px;padding:10px 6px}.mode button[aria-pressed=true]{background:#e1e8de;border-color:#536d59}.primary{background:var(--ink);color:#fff;width:100%;border:none;padding:15px;font-weight:700;text-align:center;display:flex;justify-content:center;gap:30px}.panel small{font-size:9px;line-height:1.7;color:#778074;display:block;margin-top:13px}.panel>button:not(.primary){font-size:11px;margin:10px 4px 0;padding:7px 12px}.result-stats{display:flex;justify-content:space-around;font-size:11px;margin:23px 0;gap:15px}.result-stats b{font-size:21px;display:block;margin-top:5px}.bottom-hint{position:absolute;bottom:22px;right:24px;left:24px;display:flex;align-items:center;gap:14px;font-size:10px;pointer-events:none}.timing-track{width:145px;height:6px;border-radius:4px;background:#fff8;position:relative;overflow:visible}.timing-track #zone{position:absolute;height:100%;background:#457a57;border-radius:4px}.timing-track i{position:absolute;top:-5px;width:4px;height:16px;background:#a23e2d;border:1px solid white;border-radius:3px;transform:translateX(-50%)}.height-label{font-size:8px;letter-spacing:1px}.controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:20px 0}.controls p{margin:0}.controls b{font-size:14px;display:block}.controls p span{font-size:11px;color:#7c8378;display:block;margin-top:7px}.kick{background:var(--red);color:white;min-width:240px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 24px;border-radius:12px;touch-action:manipulation;box-shadow:0 5px 0 #8e3729;user-select:none}.kick:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #8e3729}.kick span{font-size:21px;font-weight:800}.kick kbd{font-size:10px;font-family:inherit;letter-spacing:1px;opacity:.8}.kick.available{background:#2c7050;box-shadow:0 5px 0 #194832}footer{display:flex;justify-content:space-between;font-size:10px;color:#798273;border-top:1px solid #263c3715;padding:20px 0;margin-top:26px}[hidden]{display:none!important}@media(max-width:650px){header{height:60px;padding:0 18px;gap:12px}.edition{font-size:8px}main{padding:22px 14px}.heading{margin-bottom:18px}.eyebrow{font-size:8px;letter-spacing:1.4px}h1{font-size:35px}.intro{font-size:10px}.best b{font-size:34px}.best small{font-size:8px;max-width:80px}.game-shell{height:57svh;min-height:420px;border-radius:13px}.hud{top:15px;left:16px;right:16px}.live-label{font-size:7px;letter-spacing:1px}.scoreboard{top:46px;left:18px}.scoreboard span{font-size:58px}.scoreboard small{font-size:7px;letter-spacing:.5px}.cue{top:25%;right:12px;font-size:10px;max-width:150px;padding:7px 10px}.panel{padding:24px 18px}.panel h2{font-size:21px}.panel p{font-size:11px}.bottom-hint{left:16px;right:16px;gap:9px;bottom:15px;font-size:8px}.timing-track{width:100px}.height-label{display:none}.controls{flex-direction:column-reverse;gap:17px;margin-top:13px}.kick{width:100%;min-width:0;padding:15px 22px}.controls p{text-align:center}.controls b{font-size:12px}.controls p span{font-size:10px}footer{font-size:9px;gap:20px;margin-top:20px}.stamp{width:30px;height:30px;font-size:10px}nav{gap:8px}nav button{padding:6px;font-size:10px}}