:root{--ink:#1c2333;--ink-soft:#5b6478;--paper:#fff;--veil:#f6f8fbdb;--line:#d9dee8;--hall:#e7ebf1;--touche-red:#e2483d;--touche-green:#2b9e57;--steel:#3b4556;--f-display:"Jua", "IBM Plex Sans KR", system-ui, sans-serif;--f-body:"IBM Plex Sans KR", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}[hidden]{display:none!important}html,body{height:100%;margin:0;overflow:hidden}body{background:var(--hall);color:var(--ink);font-family:var(--f-body);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#stage{z-index:0;position:fixed;inset:0}#stage canvas{touch-action:none;outline:none;width:100%;height:100%;display:block}.hud{top:calc(14px + env(safe-area-inset-top,0px));left:max(16px, env(safe-area-inset-left,0px));pointer-events:none;flex-direction:column;gap:6px;max-width:calc(100% - 32px);display:flex;position:fixed}.hud h1{font-family:var(--f-display);letter-spacing:.01em;margin:0;font-size:26px;font-weight:400;line-height:1.1}.hud .meta{flex-wrap:wrap;gap:6px;display:flex}.chip{background:var(--veil);border:1px solid var(--line);color:var(--ink-soft);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:500}.chip b{color:var(--ink);font-weight:600}.chip .dot{background:var(--touche-green);vertical-align:1px;border-radius:50%;width:7px;height:7px;margin-right:6px;display:inline-block}.toasts{left:50%;top:calc(86px + env(safe-area-inset-top,0px));pointer-events:none;flex-direction:column;align-items:center;gap:6px;width:min(92vw,420px);display:flex;position:fixed;transform:translate(-50%)}.toast{background:var(--ink);color:#fff;text-align:center;border-radius:12px;padding:8px 14px;font-size:13.5px;transition:opacity .4s,transform .4s;box-shadow:0 6px 18px #1c23332e}.toast.out{opacity:0;transform:translateY(-6px)}.pad{right:max(16px, env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));flex-direction:column;align-items:flex-end;gap:10px;display:flex;position:fixed}.pad .row{align-items:flex-end;gap:10px;display:flex}.act.sm{background:#f4f6fa;width:60px;height:60px;font-size:14px}.act{font-family:var(--f-display);color:var(--ink);border:2px solid var(--ink);background:var(--paper);cursor:pointer;width:74px;height:74px;box-shadow:0 4px 0 var(--ink);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:1px;font-size:17px;transition:transform 80ms,box-shadow 80ms;display:flex}.act small{font-family:var(--f-body);color:var(--ink-soft);font-size:10px;font-weight:600}.act:active,.act.hit{box-shadow:0 0 0 var(--ink);transform:translateY(4px)}.act.big{background:var(--touche-red);color:#fff;border-color:var(--ink);width:88px;height:88px;font-size:20px}.act.big small{color:#ffffffd9}.act:focus-visible{outline:3px solid var(--touche-green);outline-offset:3px}.help{left:max(16px, env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));color:var(--ink-soft);background:var(--veil);border:1px solid var(--line);border-radius:10px;max-width:42vw;padding:6px 10px;font-size:12px;line-height:1.45;position:fixed}@media (width<=520px){.help{display:none}.act{width:62px;height:62px;font-size:14px}.act.big{width:74px;height:74px;font-size:17px}.act.sm{width:52px;height:52px;font-size:12px}}.join{z-index:50;-webkit-overflow-scrolling:touch;padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));background:#1c233347;padding-block:16px;display:flex;position:fixed;inset:0;overflow:auto}.sheet{background:var(--paper);border:2px solid var(--ink);width:min(100%,380px);box-shadow:0 8px 0 var(--ink);border-radius:20px;flex-direction:column;gap:14px;margin:auto;padding:22px 20px 20px;display:flex}.sheet h2{font-family:var(--f-display);text-wrap:balance;margin:0;font-size:24px;font-weight:400}.sheet p.lead{color:var(--ink-soft);margin:0;font-size:13.5px;line-height:1.55}.field{flex-direction:column;gap:5px;display:flex}.field label,.field .lbl{letter-spacing:.03em;color:var(--ink-soft);font-size:12px;font-weight:600}.field input{font:500 15px var(--f-body);color:var(--ink);border:1.5px solid var(--line);-webkit-user-select:text;user-select:text;background:#f4f6fa;border-radius:10px;outline:none;padding:10px 12px}.field input:focus{border-color:var(--ink);background:#fff}.seg{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.seg.two{grid-template-columns:repeat(2,1fr)}.seg label{cursor:pointer;position:relative}.seg input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.seg span{border:1.5px solid var(--line);font-family:var(--f-display);color:var(--ink);background:#f4f6fa;border-radius:12px;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 7px;font-size:16px;display:flex}.seg span small{font-family:var(--f-body);color:var(--ink-soft);font-size:10.5px;font-weight:500}.seg input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}.seg input:checked+span small{color:#fffc}.seg input:focus-visible+span{outline:3px solid var(--touche-green);outline-offset:2px}.seg .hall-name{font:inherit;color:inherit;background:0 0;border:0;flex-direction:row;align-items:center;gap:6px;padding:0;display:inline-flex}.hall-dot{border:1.5px solid #fff;border-radius:50%;width:9px;height:9px}.hall-dot.red{background:var(--touche-red)}.hall-dot.green{background:var(--touche-green)}.enter{font-family:var(--f-display);color:#fff;background:var(--ink);cursor:pointer;border:0;border-radius:12px;margin-top:4px;padding:12px;font-size:19px}.enter:focus-visible{outline:3px solid var(--touche-green);outline-offset:2px}.keys{flex-direction:column;gap:9px;display:flex}.krow{grid-template-columns:118px 1fr;align-items:center;gap:10px;font-size:13.5px;line-height:1.4;display:grid}.krow>span:last-child{min-width:0}.kcap{flex-wrap:wrap;gap:3px;display:flex}kbd{font:600 12px var(--f-body);color:var(--ink);border:1.5px solid var(--line);text-align:center;background:#f4f6fa;border-bottom-width:3px;border-radius:6px;min-width:24px;padding:2px 7px}@media (width<=420px){.krow{grid-template-columns:96px 1fr}}.flash{pointer-events:none;z-index:40;opacity:0;box-shadow:inset 0 0 70px 12px var(--flash,#2c5bd6);position:fixed;inset:0}.flash.go{animation:.6s ease-out flash}@keyframes flash{0%{opacity:0}15%{opacity:var(--fo,.7)}to{opacity:0}}.stick-zone{touch-action:none;width:45%;height:100%;position:fixed;top:0;left:0}.stick{pointer-events:none;z-index:5;background:#1c23331a;border:2px solid #1c233359;border-radius:50%;width:112px;height:112px;margin:-56px 0 0 -56px;display:none;position:fixed;top:0;left:0}.stick.on{display:block}.stick .knob{background:var(--paper);border:2px solid var(--ink);width:50px;height:50px;box-shadow:0 3px 0 var(--ink);border-radius:50%;margin:-25px 0 0 -25px;position:absolute;top:50%;left:50%}.stick-hint{left:max(24px, env(safe-area-inset-left,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));color:var(--ink-soft);background:var(--veil);border:1px dashed var(--ink-soft);pointer-events:none;border-radius:12px;padding:8px 12px;font-size:12px;line-height:1.45;position:fixed}html.touch .pad{width:214px;height:166px;display:block}html.touch .pad .row{display:contents}html.touch .pad .act{touch-action:manipulation;width:58px;height:58px;font-size:14px;position:absolute}html.touch .pad .act small{display:none}html.touch .b-lunge{background:var(--touche-red);color:#fff;width:92px;height:92px;font-size:21px;bottom:0;right:0}html.touch .b-thrust{width:70px;height:70px;font-size:16px;bottom:4px;right:100px}html.touch .b-marche{background:#f4f6fa;bottom:80px;right:84px}html.touch .b-rompre{background:#f4f6fa;bottom:104px;right:10px}html.touch .b-salute{background:var(--paper);color:var(--ink);font-size:14px;bottom:86px;right:152px}@media (height<=520px){.hud h1{font-size:18px}.hud .chip{padding:3px 8px;font-size:11px}.sheet{gap:10px;width:min(100%,560px);padding:14px 18px}.sheet h2{font-size:20px}.sheet p.lead{font-size:12.5px}.field input{padding:7px 10px}.seg span{padding:6px 4px 5px}.keys{grid-template-columns:1fr 1fr;gap:8px 18px;display:grid}.krow{grid-template-columns:92px 1fr;font-size:12.5px}.enter{padding:9px;font-size:17px}}@media (prefers-reduced-motion:reduce){.toast{transition:none}}.perf{top:calc(8px + env(safe-area-inset-top,0px));right:max(8px, env(safe-area-inset-right,0px));z-index:90;color:#fff;pointer-events:none;background:#1c2333cc;border-radius:6px;padding:4px 8px;font:600 12px ui-monospace,monospace;position:fixed}.queue-count{color:var(--ink-soft);border:1.5px solid var(--line);text-align:center;background:#f4f6fa;border-radius:12px;padding:12px;font-size:14px}.queue-count b{font-family:var(--f-display);color:var(--ink);margin-right:2px;font-size:30px;font-weight:400}.enter.ghost{background:var(--paper);color:var(--ink);border:2px solid var(--ink)}.chip.warn{color:var(--touche-red);border-color:currentColor}.labels{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.tag{white-space:nowrap;flex-direction:column;align-items:center;gap:3px;transition:opacity .2s;display:flex;position:absolute;top:0;left:0;transform:translate(-50%,-100%)}.tag .nick{font-family:var(--f-display);background:var(--veil);border:1px solid var(--line);border-radius:8px;padding:2px 9px;font-size:14px}.tag .club{color:var(--ink-soft);letter-spacing:.02em;font-size:10.5px;font-weight:500}.tag .club i{opacity:.75;font-style:normal}.tag.me .nick{background:var(--ink);color:#fff;border-color:var(--ink)}.tag .bub{font-family:var(--f-display);background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:10px;margin-bottom:2px;padding:2px 8px;font-size:13px;animation:.25s ease-out pop}@keyframes pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.tag.hide{opacity:0}.tag.far .club{display:none}.tag.far .nick{font-size:12px}@media (prefers-reduced-motion:reduce){.tag .bub{animation:none}}