:root{--violet:#5b3fc4;--violet-dark:#2a1f52;--coral:#ff5a5f;--teal:#23b5a8;--yellow:#ffc93c;--white:#f6f2ea;--display:"Black Han Sans", "Noto Sans KR", sans-serif;font-family:Noto Sans KR,Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif}.logo,.banner .t,.combo .n,.popup,.panel h2,.sb-pts,.stats b{font-family:var(--display);letter-spacing:.02em;font-weight:400}*{box-sizing:border-box}html,body{height:100%;color:var(--white);background:#1a1238;margin:0;overflow:hidden}#game{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0}#ui .interactive{pointer-events:auto}.hud-guide{letter-spacing:.02em;white-space:nowrap;text-shadow:0 1px 2px #0009;background:#1a12388c;border-radius:999px;padding:6px 14px;font-size:13px;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.hud-guide b{color:var(--yellow);font-weight:700}.hud-dev{background:#1a123899;border-radius:8px;padding:8px 12px;font-size:13px;line-height:1.5;position:absolute;top:12px;left:14px}.hud-dev .title{letter-spacing:.08em;color:var(--yellow);font-weight:900}.lil-gui.root{pointer-events:auto}.banner{text-align:center;opacity:0;transition:opacity .15s,transform .15s;position:absolute;top:22%;left:50%;transform:translate(-50%,-50%)scale(.8)}.banner.show{opacity:1;transform:translate(-50%,-50%)scale(1)}.banner .t{letter-spacing:.04em;color:var(--yellow);-webkit-text-stroke:3px #1a1238;paint-order:stroke fill;text-shadow:0 4px #1a1238;font-size:64px;font-weight:900}.banner .d{background:#1a1238b3;border-radius:999px;margin-top:6px;padding:4px 12px;font-size:16px;display:inline-block}.banner.win .t{color:var(--teal)}.screen{pointer-events:auto;background:radial-gradient(#1a12388c,#1a1238d9);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.panel{text-align:center;background:#2a1f52eb;border:2px solid #ffffff1f;border-radius:18px;min-width:340px;max-width:min(560px,100vw - 32px);padding:28px 28px 24px;box-shadow:0 12px #00000040}.logo{letter-spacing:.04em;color:var(--yellow);-webkit-text-stroke:4px #1a1238;paint-order:stroke fill;text-shadow:0 6px #1a1238;font-size:clamp(40px,7vw,76px);font-weight:900;line-height:1}.logo small{letter-spacing:.3em;color:var(--white);-webkit-text-stroke:0;text-shadow:none;margin-top:10px;font-size:15px;display:block}.panel h2{letter-spacing:.04em;margin:0 0 18px;font-size:26px;font-weight:900}.panel p{color:#ddd6f3;margin:6px 0;line-height:1.6}.btns{flex-direction:column;gap:10px;margin-top:22px;display:flex}.btn{font:inherit;cursor:pointer;color:#1a1238;background:var(--white);border:0;border-radius:12px;padding:13px 20px;font-size:18px;font-weight:800;transition:transform 60ms;box-shadow:0 5px #a99fc9}.btn:hover{background:#fff;transform:translateY(-2px)}.btn:active{transform:translateY(3px);box-shadow:0 2px #a99fc9}.btn.primary{background:var(--yellow);box-shadow:0 5px #c48f12}.btn.ghost{color:var(--white);background:0 0;box-shadow:inset 0 0 0 2px #ffffff4d}.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}.btn .sub{opacity:.7;margin-top:2px;font-size:12px;font-weight:600;display:block}.diff-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px;display:grid}.diff-grid .btn{padding:16px 8px}.stats{grid-template-columns:1fr 1fr 1fr;gap:10px;margin:18px 0 4px;display:grid}.stats div{background:#0003;border-radius:12px;padding:12px 6px}.stats b{color:var(--yellow);font-size:30px;display:block}.stats span{color:#cfc6ea;font-size:13px}.row{text-align:left;justify-content:space-between;align-items:center;gap:16px;margin:14px 0;display:flex}.row label{font-weight:700}.seg{border-radius:10px;display:inline-flex;overflow:hidden;box-shadow:inset 0 0 0 2px #ffffff40}.seg button{font:inherit;color:var(--white);cursor:pointer;background:0 0;border:0;padding:8px 12px;font-size:14px;font-weight:700}.seg button.on{background:var(--yellow);color:#1a1238}input[type=range]{width:180px;accent-color:var(--yellow)}.howto-demo{background:#00000040;border-radius:14px;width:120px;height:120px;margin:10px auto 6px;position:relative}.howto-demo i{background:var(--yellow);border-radius:50%;width:22px;height:22px;margin:-11px;animation:1.6s infinite stroke;position:absolute;top:50%;left:50%}@keyframes stroke{0%{transform:translateY(-8px)}35%{transform:translateY(26px)}55%{opacity:1;transform:translateY(-34px)}75%,to{opacity:0;transform:translateY(-34px)}}.howto-list{text-align:left;color:#e6dff8;margin:14px 0 0;padding-left:20px;line-height:1.9}.howto-list b{color:var(--yellow)}.combo{text-align:left;position:absolute;top:14px;left:22px}.combo .n{color:var(--white);-webkit-text-stroke:3px #1a1238;paint-order:stroke fill;text-shadow:0 4px #1a1238;font-size:54px;font-weight:900;line-height:1;display:inline-block}.combo .n.punch{animation:.25s ease-out punch}@keyframes punch{0%{color:var(--yellow);transform:scale(1.45)}to{transform:scale(1)}}.combo .l{letter-spacing:.3em;color:var(--yellow);font-size:12px;font-weight:800}.combo .s{color:#ddd6f3;text-shadow:0 1px 2px #000;margin-top:4px;font-size:13px}.side-label{color:var(--coral);text-shadow:0 1px 2px #000;font-size:15px;font-weight:800;position:absolute;bottom:16px;left:18px}.pause-btn{pointer-events:auto;font:inherit;color:#fff;cursor:pointer;background:#1a123899;border:0;border-radius:12px;width:44px;height:44px;font-size:18px;font-weight:900;position:absolute;top:14px;right:16px}.popup{white-space:nowrap;-webkit-text-stroke:3px #1a1238;paint-order:stroke fill;pointer-events:none;font-size:30px;font-weight:900;animation:.75s ease-out forwards popup;position:absolute;transform:translate(-50%,-50%)}.popup.perfect{color:var(--yellow);font-size:38px}.popup.good{color:var(--teal)}.popup.weak{color:#fff;font-size:24px}.popup small{text-align:center;-webkit-text-stroke:2px #1a1238;color:#fff;margin-top:2px;font-size:15px;display:block}.popup.whiff{color:#b9b0d6;font-size:20px}@keyframes popup{0%{opacity:0;transform:translate(-50%,-30%)scale(.6)}15%{opacity:1;transform:translate(-50%,-60%)scale(1.15)}30%{transform:translate(-50%,-70%)scale(1)}to{opacity:0;transform:translate(-50%,-150%)scale(1)}}.tutorial{text-align:center;background:#1a1238d9;border-radius:14px;padding:14px 22px;font-size:18px;font-weight:700;line-height:1.6;animation:4.5s forwards fadeout;position:absolute;bottom:70px;left:50%;transform:translate(-50%)}.tutorial b{color:var(--yellow)}@keyframes fadeout{0%,80%{opacity:1}to{opacity:0}}.hidden{display:none!important}.speed-ctl{pointer-events:auto;background:#1a123899;border-radius:12px;align-items:center;gap:8px;padding:6px 12px;font-size:13px;font-weight:700;display:flex;position:absolute;top:18px;right:70px}.speed-ctl input{width:110px}.speed-ctl b{min-width:28px;color:var(--yellow)}.scoreboard{background:#1a1238d1;border-radius:14px;align-items:center;gap:10px;padding:6px 18px 20px;display:flex;position:absolute;top:10px;left:50%;transform:translate(-50%);box-shadow:0 4px #00000040}.sb-p{align-items:center;gap:8px;display:flex}.sb-name{letter-spacing:.06em;color:var(--teal);font-weight:900}.sb-name.ai{color:var(--coral)}.sb-games{color:var(--yellow);letter-spacing:.1em;font-size:11px}.sb-pts{text-align:center;color:#1a1238;background:var(--yellow);border-radius:8px;min-width:46px;padding:0 8px;font-size:30px;font-weight:900;display:inline-block}.sb-pts.punch{animation:.3s ease-out punch}.sb-sep{font-size:26px;font-weight:900}.sb-info{text-align:center;color:#cfc6ea;white-space:nowrap;font-size:11px;position:absolute;bottom:3px;left:0;right:0}.serve-tip{background:#1a1238d9;border-radius:999px;padding:10px 20px;font-size:18px;font-weight:800;animation:1s ease-in-out infinite alternate pulse;position:absolute;bottom:64px;left:50%;transform:translate(-50%)}.serve-tip b{color:var(--yellow)}@keyframes pulse{0%{transform:translate(-50%)scale(1)}to{transform:translate(-50%)scale(1.06)}}.logo-wrap{justify-content:center;align-items:center;gap:14px;display:flex}.logo-wrap svg{filter:drop-shadow(0 5px #1a1238);transform-origin:70% 90%;width:clamp(64px,9vw,112px);height:auto;animation:2.4s ease-in-out infinite swing}@keyframes swing{0%,to{transform:rotate(-12deg)}50%{transform:rotate(14deg)}}.panel{background:linear-gradient(#342668f2,#241a4cf2);border:2px solid #ffc93c2e}.panel.title-panel{box-shadow:none;background:0 0;border:0}.tagline{letter-spacing:.08em;font-size:15px;color:#e8e1ff!important;margin-top:14px!important}.btn{font-family:Noto Sans KR,sans-serif;font-weight:900}.btn.primary{animation:2s ease-in-out infinite alternate glow}@keyframes glow{0%{box-shadow:0 5px #c48f12,0 0 #ffc93c00}to{box-shadow:0 5px #c48f12,0 0 22px #ffc93c73}}.screen{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.logo-img{filter:drop-shadow(0 8px #1a123899);width:min(560px,80vw);height:auto;margin:0 auto;animation:.6s cubic-bezier(.2,1.6,.4,1) logoIn;display:block}.logo-img.small{width:min(320px,60vw)}@keyframes logoIn{0%{opacity:0;transform:scale(.6)rotate(-6deg)}to{opacity:1;transform:none}}.scoreboard{background:#1a1238eb;border:3px solid #6b4fd8;border-radius:20px;gap:14px;padding:6px 26px;top:12px;box-shadow:0 0 18px #6b4fd88c,0 4px #0000004d}.sb-name{font-family:Noto Sans KR,sans-serif;font-size:26px;font-weight:900}.sb-games{letter-spacing:.15em;font-size:14px}.sb-pts{border:2px solid #1a1238;border-radius:12px;min-width:58px;font-size:34px}.sb-sep{color:#fff}.sb-info{color:#fff;background:#1a1238eb;border:2px solid #6b4fd8;border-radius:999px;padding:4px 16px;font-size:13px;font-weight:700;inset:calc(100% + 6px) auto auto 50%;transform:translate(-50%)}.speed-ctl,.pause-btn{background:#1a1238e6;border:3px solid #6b4fd8;box-shadow:0 0 12px #6b4fd873}.speed-ctl{border-radius:18px;padding:8px 14px;top:14px}.pause-btn{border-radius:14px;width:48px;height:48px}.hud-guide{background:#1a1238e6;border:3px solid #6b4fd8;border-radius:16px;align-items:center;gap:12px;padding:7px 18px;font-size:13px;font-weight:700;display:flex}.hud-guide span{align-items:center;gap:4px;display:inline-flex}.hud-guide i{background:#ffffff40;width:2px;height:18px}.hud-guide kbd{text-align:center;color:#fff;background:#ffffff14;border:2px solid #fff;border-radius:6px;min-width:22px;padding:2px 6px;font:800 12px Noto Sans KR,sans-serif}.hud-guide .mouse{color:#fff;width:16px;height:22px}.combo{text-align:center;background:#1a1238bf;border:3px solid #6b4fd8;border-radius:16px;padding:8px 18px;top:12px;left:50%;transform:translate(-50%)}.touch-note{border:2px solid var(--coral);background:#ff5a5f33;border-radius:12px;padding:8px 14px;font-weight:700;color:#fff!important;margin-top:10px!important}.ctl-keys{flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:max(84px,10vh);left:max(48px,5vw)}.kc-row{gap:6px;display:flex}.kc{color:#fff;background:0 0;border:3px solid #fff;border-radius:10px;justify-content:center;align-items:center;width:44px;height:44px;font:900 18px Noto Sans KR,sans-serif;transition:background 60ms,color 60ms,transform 60ms;display:flex}.kc.on{background:var(--yellow);border-color:var(--yellow);color:#1a1238;transform:translateY(2px)}.ctl-label{color:#fff;text-shadow:0 1px 2px #000;font-size:13px;font-weight:800}.ctl-mouse{width:132px;position:absolute;top:max(96px,11vh);right:max(48px,5vw)}.ctl-mouse svg{width:100%;height:auto;overflow:visible}.ctl-mouse .mb,.ctl-mouse .mbody{fill:#0000;stroke:#fff;stroke-width:4px;stroke-linejoin:round;transition:fill 60ms}.ctl-mouse .mb.on{fill:var(--yellow);stroke:var(--yellow)}.ctl-mouse .mb.hint:not(.on){animation:.5s ease-in-out infinite alternate mhint}@keyframes mhint{0%{stroke:#fff}to{stroke:var(--yellow);filter:drop-shadow(0 0 6px var(--yellow))}}.ctl-mouse .ml{fill:#fff;text-anchor:middle;pointer-events:none;font:900 15px Noto Sans KR,sans-serif}.ctl-mouse.l-on .l,.ctl-mouse.r-on .r{fill:#1a1238}.ctl-mouse .mt,.ctl-mouse .ms{fill:#cfc6ea;text-anchor:middle;font:700 11px Noto Sans KR,sans-serif}.ctl-keys,.ctl-mouse{filter:drop-shadow(0 2px 3px #0009)}body.mobile .pc-only{display:none!important}html,body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}html,body,#ui,#ui *{touch-action:manipulation}#game,.touch,.touch *{touch-action:none!important}input,textarea{-webkit-user-select:text;user-select:text}.touch{pointer-events:none;touch-action:none;position:absolute;inset:0}.touch .t-zone{pointer-events:auto;touch-action:none;width:50%;position:absolute;top:18%;bottom:0;left:0}.touch .t-base{opacity:0;background:#1a123859;border:3px solid #ffffffbf;border-radius:50%;width:124px;height:124px;margin:-62px 0 0 -62px;transition:opacity .1s;position:absolute;top:72%;left:18%}.touch .t-base.on{opacity:1}.touch:not(.used) .t-base{opacity:.55}.touch .t-knob{background:var(--yellow);border:3px solid #1a1238;border-radius:50%;width:54px;height:54px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.touch .t-hint{color:#fff;text-shadow:0 1px 2px #000;white-space:nowrap;font-size:12px;font-weight:700;position:absolute;top:calc(72% + 72px);left:18%;transform:translate(-50%)}.touch.used .t-hint{display:none}.touch .t-btn{bottom:max(22px, env(safe-area-inset-bottom));color:#fff;pointer-events:auto;touch-action:none;background:#1a123873;border:4px solid #fff;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:104px;height:104px;display:flex;position:absolute}.touch .t-btn b{font:900 17px Noto Sans KR,sans-serif}.touch .t-btn small{opacity:.8;font-size:10px}.touch .t-btn.fore{right:max(22px, env(safe-area-inset-right))}.touch .t-btn.back{right:calc(max(22px, env(safe-area-inset-right)) + 120px);bottom:calc(max(22px, env(safe-area-inset-bottom)) + 34px)}.touch .t-btn.on{background:var(--yellow);border-color:var(--yellow);color:#1a1238;transform:scale(.94)}.touch .t-btn.hint:not(.on){animation:.5s ease-in-out infinite alternate mhint2}@keyframes mhint2{0%{border-color:#fff}to{border-color:var(--yellow);box-shadow:0 0 16px var(--yellow)}}.rotate-note{z-index:40;color:#fff;pointer-events:auto;background:#1a1238;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:20px;display:flex;position:absolute;inset:0}.rotate-note div{font-size:48px}@media (height<=500px){.scoreboard{transform-origin:top;top:4px;transform:translate(-50%)scale(.72)}.speed-ctl{transform-origin:100% 0;top:6px;right:58px;transform:scale(.8)}.pause-btn{width:40px;height:40px;top:6px;right:8px}.combo{transform-origin:top;top:4px;transform:translate(-50%)scale(.75)}.banner .t{font-size:40px}.side-label{display:none}.panel{max-height:92vh;padding:16px 18px;overflow-y:auto}.logo-img{width:auto;max-width:60vw;max-height:42vh}.logo-img.small{max-height:26vh}.tagline{font-size:13px;margin-top:4px!important}.touch-note{padding:5px 10px;font-size:12px}.btns{gap:7px;margin-top:12px}.btn{padding:9px 16px;font-size:16px}.howto-list{font-size:13px;line-height:1.5}}.join-row{gap:10px;margin-top:12px;display:flex}.code-input{letter-spacing:.3em;text-align:center;text-transform:uppercase;color:#fff;background:#00000040;border:3px solid #6b4fd8;border-radius:12px;flex:1;min-width:0;padding:10px;font:900 22px Noto Sans KR,sans-serif}.code-input::placeholder{letter-spacing:.05em;color:#a99fc9;font-size:15px}.note{opacity:.7;font-size:12px!important}.link-box{background:#00000040;border:2px solid #6b4fd8;border-radius:12px;align-items:center;gap:8px;margin:10px 0;padding:6px 6px 6px 12px;display:flex}.link-text{text-overflow:ellipsis;white-space:nowrap;color:#e8e1ff;text-align:left;flex:1;min-width:0;font-size:13px;overflow:hidden}.link-box .btn{padding:8px 14px;font-size:14px}.room-code{font-family:var(--display);letter-spacing:.15em;color:var(--yellow);font-size:30px}.spinner{border:5px solid #3a2a7a;border-top-color:var(--yellow);border-radius:50%;width:40px;height:40px;margin:6px auto;animation:.8s linear infinite bootspin}@keyframes bootspin{to{transform:rotate(360deg)}}.net-badge{color:#cfc6ea;text-shadow:0 1px 2px #000;font-size:11px;position:absolute;top:112px;left:50%;transform:translate(-50%)}