*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:#0e1114;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Pretendard,Malgun Gothic,system-ui,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}body{display:flex;align-items:center;justify-content:center}#stage{position:relative;touch-action:none;width:min(100vw,56.25vh);height:min(100vh,calc(100vw * 640 / 360));overflow:hidden;background:#1b2a24}#game{display:block;width:100%;height:100%}#hud{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.hud-box{background:#0a0e129e;border-radius:8px;padding:6px 10px}.hud-box.right{text-align:right}.hud-label{font-size:11px;color:#a8b2bc;line-height:1.4}.hud-value{font-size:19px;font-weight:500;line-height:1.2;transition:color .2s}.hud-value.drop{color:#ff7a5c}.hud-goal{margin-top:3px;font-size:11px;color:#ffd84d;font-variant-numeric:tabular-nums}#gap-meter{position:absolute;top:150px;right:12px;width:34px;padding:8px 6px;text-align:center;background:#0a0e129e;border-radius:10px;opacity:0;transition:opacity .15s;pointer-events:none}#gap-meter.on{opacity:1}.gap-label{font-size:11px;color:#a8b2bc;margin-bottom:6px}.gap-track{height:110px;width:8px;margin:0 auto;background:#ffffff29;border-radius:4px;position:relative}.gap-fill{position:absolute;bottom:0;left:0;width:8px;height:0;background:#ffd84d;border-radius:4px}#popup{position:absolute;top:96px;left:0;right:0;text-align:center;pointer-events:none;opacity:0}#popup.show{animation:pop .9s ease-out}#popup .big{font-size:26px;font-weight:500;color:#ffd84d;line-height:1.1}#popup .small{font-size:13px;color:#ffd84d;line-height:1.5}@keyframes pop{0%{opacity:0;transform:translateY(10px)}20%{opacity:1;transform:translateY(0)}75%{opacity:1}to{opacity:0;transform:translateY(-14px)}}#toast{position:absolute;top:190px;left:0;right:0;text-align:center;pointer-events:none;opacity:0;font-size:15px;color:#7ed77e;font-weight:500}#toast.show{animation:pop 1s ease-out}#toast.level{color:#ffd84d}#controls{position:absolute;bottom:14px;left:14px;right:14px;display:flex;gap:10px}#controls button{flex:1;height:46px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:transparent;color:#ffffff9e;font-size:17px;cursor:pointer;touch-action:none}#controls button.on{border-color:#ffffff80;background:#ffffff24;color:#fff}#overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#080b0ed1;display:flex;align-items:center;justify-content:center;padding:24px}#overlay.hidden{display:none}.panel{text-align:center;max-width:300px;max-height:100%;overflow-y:auto}.panel-title{font-size:24px;font-weight:500;margin-bottom:14px}.panel-desc{font-size:14px;line-height:1.7;color:#c2ccd6}.panel-how{margin-top:16px;padding:9px 12px;font-size:14px;line-height:1.6;color:#eaf3ea;background:#3fa93f2e;border-radius:9px}.panel-stats{font-size:14px;line-height:1.8;color:#c2ccd6;margin-top:10px}.panel-stats .num{color:#ffd84d;font-weight:500}.panel-sec{display:none}.panel-sec.on{display:block}.panel-desc b{font-weight:500;color:#eaf3ea}.btn-main,.btn-sub{display:block;width:100%;margin-top:12px;padding:13px 20px;font-size:16px;font-weight:500;border-radius:10px;cursor:pointer;font-family:inherit}.btn-main{margin-top:20px;border:none;background:#3fa93f;color:#fff}.btn-sub{border:1px solid rgba(255,255,255,.24);background:transparent;color:#c2ccd6}.btn-main:active,.btn-sub:active{transform:scale(.98)}.btn-main:focus-visible,.btn-sub:focus-visible{outline:none;box-shadow:0 0 0 3px #3fa93f80}.panel-hint{margin-top:14px;font-size:12px;color:#7b8590}#btn-sound{position:absolute;top:12px;left:50%;transform:translate(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:none;border-radius:9px;background:#0a0e129e;color:#cfd8e0;cursor:pointer;padding:0;z-index:2}#btn-sound .slash{display:none}#btn-sound.muted{color:#7b8590}#btn-sound.muted .waves{display:none}#btn-sound.muted .slash{display:block}.rank-box{margin-top:18px;display:none}.rank-box.on{display:block}.rank-head{font-size:13px;color:#a8b2bc;margin-bottom:8px}.rank-list{list-style:none;text-align:left}.rank-list li{display:flex;gap:8px;align-items:baseline;padding:5px 8px;border-radius:6px;font-size:13px;color:#c2ccd6}.rank-list li.me{background:#ffd84d29;color:#ffd84d}.rank-list .pos{width:18px;color:#7b8590;font-variant-numeric:tabular-nums}.rank-list li.me .pos{color:#ffd84d}.rank-list .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-list .pts{font-variant-numeric:tabular-nums;font-weight:500}.rank-empty{font-size:13px;color:#7b8590;padding:6px 0}.rank-note{margin-top:8px;font-size:12px;color:#7b8590}#stage-pop{position:absolute;top:44%;left:0;right:0;text-align:center;pointer-events:none;opacity:0}#stage-pop.show{animation:stageIn 1.5s ease-out}#stage-pop .clear{font-size:32px;font-weight:500;color:#ffd84d;line-height:1.2}#stage-pop .bonus{margin-top:4px;font-size:16px;color:#eaf3ea}@keyframes stageIn{0%{opacity:0;transform:scale(.7)}14%{opacity:1;transform:scale(1.06)}24%{transform:scale(1)}78%{opacity:1}to{opacity:0;transform:scale(1.02)}}.sitebar{display:flex;justify-content:center;gap:6px;margin-bottom:16px;flex-wrap:wrap}.sitelink{font:inherit;font-size:12px;padding:5px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:transparent;color:#a8b2bc;text-decoration:none;cursor:pointer;white-space:nowrap}.sitelink:active{transform:scale(.97)}.panel-foot{display:inline-block;margin-top:16px;font-size:12px;color:#6b747d;text-decoration:underline}#modal{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;padding:24px;background:#080b0ee6;display:flex;align-items:center;justify-content:center}#modal.hidden{display:none}.modal-box{width:100%;max-width:300px;max-height:100%;overflow-y:auto;text-align:center}.modal-title{font-size:18px;font-weight:500;margin-bottom:14px}.modal-list{display:flex;flex-direction:column;gap:6px;text-align:left}.modal-item{font:inherit;font-size:14px;padding:10px 12px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:transparent;color:#c2ccd6;text-decoration:none;cursor:pointer}.modal-item.here{opacity:.5;cursor:default;border-style:dashed}.modal-item.on{border-color:#3fa93fb3;color:#eaf3ea}.modal-item.home{margin-top:6px;color:#a8b2bc}.modal-note{font-size:12px;color:#7b8590;padding:6px 2px}.nick-row{margin-top:14px}.nick-row input{width:100%;height:40px;padding:0 12px;text-align:center;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:#ffffff0f;color:#fff;font-size:15px;font-family:inherit}.nick-row input::placeholder{color:#6b747d}.nick-row input:focus{outline:none;border-color:#3fa93f;box-shadow:0 0 0 2px #3fa93f4d}.nick-hint{margin-top:6px;font-size:12px;color:#7b8590}.nick-hint.warn{color:#ff7a5c}.rank-tabs{display:flex;gap:6px;margin-bottom:8px}.rank-tab{flex:1;padding:7px 0;font:inherit;font-size:13px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:transparent;color:#7b8590;cursor:pointer}.rank-tab.on{border-color:#3fa93fb3;color:#eaf3ea;background:#3fa93f24}.multi-view{display:none}.multi-view.on{display:block}.code-row{display:flex;gap:6px;margin-top:10px}.code-row input{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:#ffffff0f;color:#fff;font-size:17px;font-family:inherit;text-align:center;letter-spacing:3px;text-transform:uppercase}.code-row input::placeholder{color:#6b747d;letter-spacing:0;text-transform:none}.code-row input:focus{outline:none;border-color:#3fa93f;box-shadow:0 0 0 2px #3fa93f4d}.code-row .btn-sub{width:auto;margin-top:0;flex:0 0 auto;padding:0 14px;font-size:14px}.room-err{display:none;margin-top:8px;font-size:12px;color:#ff7a5c}.room-err.on{display:block}.room-head{margin-top:18px;font-size:13px;color:#a8b2bc;text-align:left}.room-sub{font-size:13px;color:#a8b2bc;margin-bottom:10px}.room-sub .code{color:#ffd84d;font-weight:500;letter-spacing:2px}.room-list{margin-top:8px;display:flex;flex-direction:column;gap:5px;text-align:left}.room-row{display:flex;gap:8px;align-items:baseline;padding:8px 10px;border-radius:8px;font-size:13px;color:#c2ccd6;background:#ffffff0d;border:none;font-family:inherit;cursor:default}button.room-row{cursor:pointer;width:100%;text-align:left}.room-row .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-row .tag{font-size:11px;color:#7b8590}.room-row .pts{font-variant-numeric:tabular-nums;font-weight:500}.room-row.me{background:#ffd84d29;color:#ffd84d}.room-row.out{opacity:.45}.room-empty{font-size:13px;color:#7b8590;padding:6px 2px}#live-board{position:absolute;top:76px;left:12px;z-index:3;background:#0a0e12a8;border-radius:9px;padding:7px 9px;font-size:12px;line-height:1.6;color:#c2ccd6;pointer-events:none;min-width:108px}#live-board.hidden{display:none}#live-board .row{display:flex;gap:7px;font-variant-numeric:tabular-nums}#live-board .row.me{color:#ffd84d}#live-board .row.out{opacity:.45}#live-board .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#live-board .watch{margin-top:5px;color:#7ed77e;font-size:11px}.hidden-btn{display:none}