:root{--font: "Galmuri11", "DungGeunMo", "Apple SD Gothic Neo", monospace;--ink: #1e1430;--paper: #fff7e6;--yellow: #f7d33a;--red: #e23b2e;--blue: #2f6fd6;--sky: #a9dcff}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#8fc8f0;font-family:var(--font);color:var(--ink)}#app{position:fixed;top:0;right:0;bottom:0;left:0}.game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;cursor:crosshair}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-user-select:none;user-select:none}.scores{position:absolute;top:18px;left:50%;transform:translate(-50%);display:flex;gap:14px;align-items:center;font-size:44px;line-height:1;text-shadow:3px 3px 0 var(--ink);color:#fff}.score-me{color:var(--yellow)}.score-cpu{color:#ff8a6a}.score-sep{font-size:32px;color:#fff}.center-msg{position:absolute;top:28%;left:50%;transform:translate(-50%,-50%) scale(.8);font-size:56px;color:#fff;text-shadow:4px 4px 0 var(--ink);opacity:0;transition:opacity .15s,transform .15s;white-space:nowrap}.center-msg.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.sub-msg{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%);font-size:24px;color:var(--paper);text-shadow:2px 2px 0 var(--ink);opacity:0;transition:opacity .15s}.sub-msg.show{opacity:1}.crosshair{position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 0 2px #1e143080}.defend-ring{position:absolute;left:50%;top:50%;width:70px;height:70px;border:4px solid #7fe0ff;border-radius:50%;transform:translate(-50%,-50%);opacity:0;box-shadow:0 0 0 3px #1e143080}.defend-ring.show{opacity:1}.charge{position:absolute;left:50%;top:calc(50% + 34px);width:120px;height:12px;transform:translate(-50%);background:#1e1430b3;border:2px solid #fff;display:none}.charge.show{display:block}.charge-fill{height:100%;width:0;background:var(--yellow)}.charge-fill.full{background:#ff5a3c}.stun-bar{position:absolute;left:50%;top:calc(50% - 46px);width:120px;height:10px;transform:translate(-50%);background:#1e1430b3;border:2px solid #ffe36b;display:none}.stun-bar.show{display:block}.stun-fill{height:100%;background:#ffe36b}.popups{position:absolute;top:0;right:0;bottom:0;left:0}.popup{position:absolute;transform:translate(-50%,-50%);font-size:34px;color:#fff;text-shadow:3px 3px 0 var(--ink);animation:pop .9s ease-out forwards;white-space:nowrap}.popup.perfect{color:#ffe36b;font-size:44px}.popup.hit{color:#fff}.popup.nice{color:#7fe0ff}.popup.miss{color:#c9c9c9;font-size:26px}.popup.stun{color:#ff8a6a}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}70%{opacity:1;transform:translate(-50%,-70%) scale(1)}to{opacity:0;transform:translate(-50%,-90%) scale(1)}}.fps{position:absolute;right:12px;top:10px;font-size:14px;color:#fff;text-shadow:2px 2px 0 var(--ink)}.cam-label{position:absolute;left:12px;top:10px;font-size:14px;color:#fff;text-shadow:2px 2px 0 var(--ink)}.help{position:absolute;left:12px;bottom:12px;font-size:14px;line-height:1.6;color:#fff;background:#1e1430bf;padding:10px 14px;border:2px solid var(--yellow);display:none}.help.show{display:block}.lock-hint{position:absolute;left:50%;bottom:40px;transform:translate(-50%);font-size:18px;color:#fff;text-shadow:2px 2px 0 var(--ink);background:#1e143099;padding:8px 14px}.menu{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:#141e3c59;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.menu.show{display:flex}.menu-panel{background:var(--paper);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:22px 28px;width:min(760px,94vw);max-height:94vh;overflow:auto}.title{margin:0;font-size:44px;color:var(--ink);text-shadow:3px 3px 0 var(--yellow)}.subtitle{font-size:16px;opacity:.75;margin-bottom:16px}.face-row{display:flex;align-items:flex-start;gap:14px;justify-content:space-between}.vs{align-self:center;font-size:28px;color:var(--red);text-shadow:2px 2px 0 var(--ink)}.face-block{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}.face-label{font-size:16px}.face-preview{width:96px;height:96px;image-rendering:pixelated;border:3px solid var(--ink);background:var(--yellow)}.presets{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.preset-btn,.upload-btn,.opt-btn{font-family:var(--font);font-size:14px;padding:6px 10px;background:#fff;border:2px solid var(--ink);cursor:pointer;color:var(--ink)}.preset-btn:hover,.upload-btn:hover,.opt-btn:hover{background:var(--yellow)}.upload-btn{background:var(--sky)}.upload-btn input{display:none}.opt-rows{margin:18px 0 14px;display:flex;flex-direction:column;gap:10px}.opt-row{display:flex;align-items:center;gap:12px}.opt-label{width:70px;font-size:16px}.opt-group{display:flex;gap:6px}.opt-btn.on{background:var(--ink);color:var(--yellow)}.btn-start{font-family:var(--font);font-size:26px;width:100%;padding:12px;background:var(--yellow);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;color:var(--ink)}.btn-start:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}.btn-start:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}.menu-status{margin-top:10px;font-size:14px;min-height:18px;color:var(--blue)}.menu-help{margin-top:10px;font-size:13px;opacity:.7;line-height:1.5}@media(max-width:640px){.face-row{flex-direction:column;align-items:center}.title{font-size:32px}}.char-row{display:flex;gap:6px}.char-btn{font-family:var(--font);font-size:15px;padding:6px 14px;background:#fff;border:2px solid var(--ink);cursor:pointer;color:var(--ink)}.char-btn.on{background:var(--red);color:#fff}.char-btn:hover{outline:2px solid var(--yellow)}.smash-ring{position:absolute;left:50%;top:50%;width:200px;height:200px;border:3px solid rgba(255,255,255,.75);border-radius:50%;transform:translate(-50%,-50%);opacity:0;box-shadow:0 0 0 2px #1e143073;pointer-events:none}.smash-ring.show{opacity:1}.smash-ring.in{border-color:#5cff7a;border-width:5px;box-shadow:0 0 0 2px #1e143080,0 0 14px #5cff7acc}.smash-ring.perfect{border-color:#ffd84a;border-width:6px;box-shadow:0 0 0 2px #1e143080,0 0 18px #ffd84ae6}.smash-label{position:absolute;left:50%;top:calc(50% - 44px);transform:translate(-50%);font-size:20px;color:#5cff7a;text-shadow:2px 2px 0 var(--ink);opacity:0;white-space:nowrap}.smash-label.show{opacity:1}.online-box{margin-top:14px;padding:10px 12px;border:2px dashed var(--ink);background:#fff}.online-title{font-size:15px;margin-bottom:8px}.online-row{display:flex;gap:6px;flex-wrap:wrap}.text-input{font-family:var(--font);font-size:14px;padding:6px 8px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);min-width:120px;flex:1}.text-input:disabled{opacity:.6}.connect-btn{background:var(--sky)}.online-status{margin-top:8px;font-size:14px;color:var(--blue);min-height:18px}.net-status{position:absolute;left:50%;top:70px;transform:translate(-50%);font-size:16px;color:#ffe36b;text-shadow:2px 2px 0 var(--ink)}.lobby-list{margin-top:8px;display:flex;flex-direction:column;gap:4px;font-size:14px}.lobby-row{padding:4px 8px;background:var(--paper);border:1px solid var(--ink)}.btn-host{margin-top:10px;font-size:20px;background:var(--sky)}.btn-host:disabled{opacity:.5;cursor:default;transform:none}.room-box{margin-top:8px;padding:8px 10px;border:2px solid var(--ink);background:var(--paper)}.room-title{font-size:15px;margin-bottom:6px}.room-list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;max-height:160px;overflow:auto}.room-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px;background:#fff;border:1px solid var(--ink);font-size:14px}.room-join{padding:3px 10px}.room-empty{font-size:13px;opacity:.7}.chat-log{position:absolute;left:12px;bottom:60px;display:flex;flex-direction:column;gap:3px;max-width:46vw;pointer-events:none}.chat-line{font-size:15px;color:#fff;text-shadow:2px 2px 0 var(--ink);background:#1e14308c;padding:3px 8px;transition:opacity 1s}.chat-line.system{color:#ffe36b}.chat-line.fade{opacity:.25}.chat-input{position:absolute;left:12px;bottom:20px;width:46vw;font-family:var(--font);font-size:16px;padding:6px 10px;border:2px solid var(--yellow);background:#1e1430d9;color:#fff;pointer-events:auto}.name-input{max-width:140px;flex:0 1 140px}.seat-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.seat{padding:6px 10px;border:2px solid var(--ink);background:#fff;cursor:pointer;font-size:14px}.seat:hover{outline:2px solid var(--yellow)}.seat.taken{background:#eee;cursor:default}.seat.auto{background:#f6f6f6;cursor:pointer;border-style:dashed}.seat.mine{background:var(--yellow)}.seat.spectator{grid-column:1 / -1;background:var(--sky)}.seat.spectator.mine{background:var(--yellow)}.seat-title{font-weight:700}.seat-who{font-size:13px;opacity:.85}