@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#172d31;--muted:#7c8985;--paper:#f5f6ef;--green:#355f4a;--line:#dce0d6;--blue:#4085b7;--orange:#db7e63}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans KR',Arial,sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #e3ac46;outline-offset:3px}header{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5.2%}.brand{font-weight:900;letter-spacing:-.6px;color:var(--ink);text-decoration:none;font-size:23px;display:flex;align-items:center;gap:10px}.mark{color:var(--green);font-size:32px}.edition{font-size:9px;letter-spacing:1.5px;border-left:1px solid #cdd4cb;padding-left:14px;margin-left:8px;font-weight:600;max-width:110px}.tag{font-size:10px;letter-spacing:1.5px;display:flex;align-items:center;gap:9px}.tag span{border:1px solid #cad4c7;border-radius:5px;padding:6px 9px;margin-left:12px;font-size:9px}.tag i,.arena-footer i{width:6px;height:6px;background:#719473;border-radius:50%;display:inline-block}main{max-width:1260px;padding:0 34px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:flex-end;padding:42px 0 27px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--green)}h1{font-size:40px;letter-spacing:-2px;margin:8px 0 10px;font-weight:900}h1 em{font-style:normal;color:var(--green)}p{color:var(--muted);line-height:1.8;margin:0}.quiet{border:1px solid #d3d9cd;background:transparent;border-radius:6px;padding:10px 15px;color:#56635b;font-size:12px}.arena{border:1px solid #ced6c9;border-radius:12px;overflow:hidden;box-shadow:0 9px 30px #283f3210;background:#fff}.scoreboard{height:116px;background:#fcfdf8;display:flex;justify-content:center;align-items:center;gap:90px}.team{width:200px;position:relative;display:grid;grid-template-columns:1fr 82px;align-items:center}.team>span{font-size:10px;letter-spacing:1px;font-weight:800}.team b{font-size:8px;color:var(--green);letter-spacing:0;display:block;margin-top:5px;min-height:12px}.team strong{grid-column:2;grid-row:1/3;font-family:monospace;font-size:58px;letter-spacing:-4px;font-weight:700;color:var(--blue)}.team small{font-size:8px;color:#8d9990;letter-spacing:1px}.team small span{color:var(--blue);margin-left:8px}.team.orange{direction:rtl;text-align:right}.team.orange strong{color:var(--orange);direction:ltr}.team.orange small span{color:var(--orange)}.match{text-align:center;min-width:130px}.match>span{font-size:8px;letter-spacing:2px;color:#859183}.match strong{display:block;font-size:19px;letter-spacing:2px;margin:4px}.match small{font-size:8px;letter-spacing:1px;color:#8d9990}.match #history{font-size:8px;margin-top:9px;color:var(--green);letter-spacing:1px}.screen{position:relative;background:#9ccaca;aspect-ratio:2.4;overflow:hidden}#court{width:100%;height:100%;display:block;image-rendering:pixelated}.screen-label{position:absolute;top:18px;left:20px;font:9px monospace;letter-spacing:1px;color:#477b7c}.screen-label span{background:#f8f8dc9c;padding:3px 5px;margin-left:7px}#overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#0e3b4039;backdrop-filter:blur(2px)}.setup{background:#fbfcf3;box-shadow:0 12px 0 #173e3e15,0 24px 40px #183f4030;width:520px;border:1px solid #fff;border-radius:10px;padding:23px 35px;text-align:center}.setup h2{font-size:22px;letter-spacing:-1px;margin:7px 0}.setup p{font-size:11px}.selectors{display:flex;justify-content:space-between;align-items:center;margin:18px 0}.choose{width:180px}.choose label{display:block;text-align:left;color:var(--blue);font:800 11px monospace}.choose:last-child label{color:var(--orange)}.choose label span{font-family:Arial;font-size:10px;margin-left:6px;color:#67766c}.characters{display:flex;gap:7px;margin-top:8px}.characters button{flex:1;border:1px solid #dce1d5;background:#f0f2e9;border-radius:5px;font-size:10px;color:#7f8b7d;padding:3px 0 7px}.characters canvas{display:block;margin:auto;width:49px;height:54px;image-rendering:pixelated}.characters .selected{border-color:#658b6a;background:#e8eedf;color:#355f4a;box-shadow:inset 0 0 0 1px #658b6a}.vs{font:italic 800 16px Arial;color:#b1b9aa}.formats{display:flex;gap:7px;margin-bottom:13px}.formats button{flex:1;border:1px solid #dce1d5;background:transparent;border-radius:5px;font-size:11px;padding:8px}.formats small{display:block;color:#99a08f;font-size:8px;margin-top:3px}.formats .selected{border-color:#4e7458;color:#355f4a;background:#edf1e6;font-weight:800}.primary{width:100%;background:var(--green);border:0;border-radius:5px;color:#fff;padding:12px;font-weight:700;font-size:12px}.primary span{float:right;margin-right:10px}.desktop-note{display:block;font-size:9px;color:#a1aa99;margin-top:10px}.arena-footer{height:48px;display:flex;justify-content:space-between;align-items:center;padding:0 21px;color:#7f8c80;font-size:10px}.arena-footer>span:first-child{display:flex;gap:7px;align-items:center}.arena-footer button{border:0;background:transparent;font-size:10px;color:#71806f;padding:7px 10px}.arena-footer button+button{border-left:1px solid #e3e7dd}.controls{display:flex;border:1px solid var(--line);border-radius:8px;margin-top:20px;background:#f9faf4;padding:22px 25px;gap:35px}.control{display:flex;gap:14px;flex:1}.control+.control{border-left:1px solid var(--line);padding-left:30px}.player-dot{width:30px;height:30px;border:1px solid #b3ccda;border-radius:50%;display:grid;place-items:center;font:bold 11px monospace;color:var(--blue);margin-top:3px}.player-dot.coral{border-color:#e5c8b9;color:var(--orange)}h3{font-size:10px;letter-spacing:1px;margin:0 0 10px}h3 span{font-size:9px;color:#9ba391;font-weight:400;letter-spacing:0;margin-left:8px}.keyline{display:flex;gap:4px;align-items:center;font-size:9px;color:#8c9784;white-space:nowrap}kbd{font:10px monospace;display:inline-grid;place-items:center;min-width:22px;height:22px;border:1px solid #d9dfd2;border-bottom:3px solid #d9dfd2;border-radius:4px;background:#fff;color:#53634e}.keyline span{margin:0 7px 0 2px}.wide{padding:0 6px}footer{display:flex;justify-content:space-between;padding:24px 0 28px;font-size:9px;color:#a1aa98}footer b{font-size:8px;letter-spacing:1px;color:#6c826b;margin-left:8px}#toast{position:absolute;top:20%;width:100%;text-align:center;pointer-events:none;color:white;text-shadow:2px 3px #244b50;font-size:29px;font-weight:900;white-space:pre-line}dialog{border:1px solid var(--line);border-radius:12px;padding:30px;max-width:530px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#12383399}dialog p{font-size:13px;margin:15px 0}dialog .quiet{float:right}@media(max-width:950px){main{padding:0 18px}.scoreboard{gap:30px}.controls{gap:16px;padding:18px 12px}.control+.control{padding-left:16px}.keyline{flex-wrap:wrap;white-space:normal}.screen{min-height:430px;aspect-ratio:auto}#court{object-fit:cover}.tag{display:none}.intro{padding-top:24px}.setup{width:min(94%,520px)}.arena-footer{padding:0 10px}.arena-footer>#touches{display:none}}@media(max-width:600px){header{height:68px}.brand{font-size:20px}.edition{font-size:7px}h1{font-size:32px}.intro p{font-size:11px}.scoreboard{gap:10px;height:100px}.team{width:115px;grid-template-columns:1fr 55px}.team strong{font-size:43px}.team>span{font-size:8px}.team small{font-size:6px}.match{min-width:90px}.match strong{font-size:15px}.controls{display:block}.control+.control{border:0;border-top:1px solid var(--line);padding:16px 0 0;margin-top:16px}.setup{padding:22px}.choose{width:42%}footer{gap:15px}.quiet{font-size:10px;padding:8px}.arena-footer button{padding:6px}}

/* Match names, charge meters, fullscreen, and award ceremony. */
.team{grid-template-columns:1fr 82px;row-gap:3px}.team>span{overflow-wrap:anywhere}.team strong{grid-row:1/4}.team .power{grid-column:1;grid-row:3;margin-top:3px}.power>div{height:5px;background:#e1e8dd;border-radius:4px;overflow:hidden;width:104px;direction:ltr}.power>div>span{display:block;height:100%;width:0;background:#5e9fbe;transition:width .16s}.power small{display:block!important;letter-spacing:0!important;font-size:8px!important;margin-top:3px}.power.ready>div>span{background:#e4af36;animation:charge 1s infinite alternate}.power.ready small{color:#9b7120}.orange .power>div>span{background:#d48368}.orange .power.ready>div>span{background:#e4af36}.name-input{width:100%;border:1px solid #d6decf;background:#fffef8;border-radius:4px;padding:7px 9px;font:inherit;font-size:11px;color:var(--ink);margin-top:7px}.setup{padding-top:18px;padding-bottom:18px}.selectors{margin:12px 0}.name-input:focus{outline:2px solid #739779;outline-offset:1px}#deuceBadge{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:2;border:1px solid #e6d8a4;border-radius:5px;background:#fff6d6;color:#8b6326;font-size:15px;font-weight:900;padding:6px 15px;box-shadow:0 2px 6px #284f4320}#deuceBadge span{font-size:9px;font-weight:500;margin-left:8px}.special-guide{margin:13px 0 0;font-size:10px;color:#819078;line-height:2}.special-guide>b{color:#9a772e;margin-right:10px}.special-guide>span{float:right}.special-guide kbd{height:19px;font-size:9px}.special-guide>small{display:block;font-size:9px;color:#9a9f8f}.arena:fullscreen,.arena.fullscreen-fallback{width:100vw;height:100dvh;border:0;border-radius:0;background:#173b3e;display:flex;flex-direction:column;justify-content:center}.arena:fullscreen .scoreboard,.arena.fullscreen-fallback .scoreboard{flex:0 0 110px}.arena:fullscreen .screen,.arena.fullscreen-fallback .screen{flex:1;min-height:0;aspect-ratio:auto;background:#173b3e}.arena:fullscreen #court,.arena.fullscreen-fallback #court{object-fit:contain}.arena:fullscreen .arena-footer,.arena.fullscreen-fallback .arena-footer{flex:0 0 46px;background:#fcfdf8}.arena.fullscreen-fallback{position:fixed;inset:0;z-index:1000}body.game-fullscreen{overflow:hidden}.arena:fullscreen #overlay,.arena.fullscreen-fallback #overlay{backdrop-filter:none}.screen.ceremony #overlay{background:transparent;backdrop-filter:none;align-items:flex-end;pointer-events:none}.award-panel{pointer-events:auto;display:flex;align-items:center;gap:14px;background:#fbfcf3ed;border:1px solid #fff;border-radius:7px;padding:10px 18px;margin-bottom:10px;max-width:94%;color:#355f4a;box-shadow:0 4px 15px #173b3e50}.award-panel p{font-size:10px;max-width:280px}.award-panel .primary{width:auto;white-space:nowrap;padding:10px 15px}.award-panel .quiet{white-space:nowrap;padding:9px;font-size:10px}.screen.ceremony #toast{display:none}@keyframes charge{to{filter:brightness(1.4)}}@media(max-width:700px){.special-guide>span{float:none;display:block}.power>div{width:65px}.power small{font-size:7px!important}.scoreboard{height:125px}.arena-footer{height:auto;min-height:48px;flex-wrap:wrap;padding:5px 10px}.arena-footer button{padding:6px}.setup{padding:16px 20px}.setup h2{font-size:19px}.screen{min-height:460px}.award-panel{flex-wrap:wrap;justify-content:center;gap:6px}.award-panel p{width:100%;text-align:center}.arena:fullscreen .scoreboard,.arena.fullscreen-fallback .scoreboard{flex-basis:115px}}

.play-modes{display:flex;gap:8px;margin-top:12px}.play-modes button{flex:1;padding:8px;border:1px solid #d3dccb;border-radius:5px;background:#f2f4e9;color:#61745c;font-size:11px}.play-modes .selected{background:#355f4a;color:white;border-color:#355f4a}#botOptions{margin-top:8px;text-align:left;font-size:10px;color:#6e8066}#botOptions[hidden]{display:none}#botOptions select{margin-left:12px;border:1px solid #cdd8c4;border-radius:4px;padding:5px;color:#355f4a;background:#fffef5;font:inherit}#botDescription{display:block;margin-top:5px;color:#8b947d;font-size:9px}.setup{max-height:98%;overflow:auto}.screen{min-height:490px}.setup .selectors{margin:10px 0}.setup .characters canvas{height:46px;width:42px}.setup .characters button{padding-bottom:4px}.setup .desktop-note{margin-top:6px}.screen #toast{z-index:5;animation:effect-shake .3s linear;pointer-events:none}.screen #toast.ultimate{top:28%;font-size:clamp(25px,4vw,52px);font-style:italic;font-weight:900;letter-spacing:-1px;color:#fff4a2;-webkit-text-stroke:1px #b95f1b;text-shadow:3px 3px 0 #653522,-2px -2px 0 #fff9cc,0 0 25px #ffc842,0 0 55px #ff8a31;animation:ultimate-shake .65s ease-out;transform:rotate(-4deg)}#toast.receive-fail{color:#fff0ed;text-shadow:2px 3px #962f36,0 0 18px #ff8f73}#specialFX{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}#specialFX>div{opacity:0}.special-flash{position:absolute;inset:0;background:radial-gradient(ellipse,#fff4b5,transparent 70%)}.special-slash{position:absolute;left:-10%;top:28%;width:120%;height:34%;background:linear-gradient(90deg,transparent,#23334ee8 18%,#23334ee8 82%,transparent);border-block:3px solid #ffe986;transform:rotate(-4deg)}.special-ring{position:absolute;width:150px;height:150px;border:8px solid #ffe98a;border-radius:50%;left:calc(50% - 75px);top:calc(50% - 75px);box-shadow:0 0 30px #fff0a5,inset 0 0 20px #ffd05b}#specialFX.active .special-flash{animation:special-flash .5s ease-out}#specialFX.active .special-slash{animation:slash-enter .95s ease-out}#specialFX.active .special-ring{animation:ring-burst .7s ease-out}.screen.shock #court{animation:court-shake .28s linear}@keyframes effect-shake{0%,100%{transform:translate(0)}20%,60%{transform:translate(-2px,1px)}40%,80%{transform:translate(2px,-1px)}}@keyframes ultimate-shake{0%{transform:rotate(-4deg) scale(1.25);opacity:0}12%{opacity:1}25%,55%{transform:rotate(-4deg) translate(-4px,2px)}40%,70%{transform:rotate(-4deg) translate(4px,-2px)}100%{transform:rotate(-4deg)}}@keyframes court-shake{20%,60%{transform:translate(3px,1px)}40%,80%{transform:translate(-3px,-1px)}}@keyframes special-flash{0%{opacity:.8}100%{opacity:0}}@keyframes slash-enter{0%{opacity:0;transform:translateX(-80%) rotate(-4deg)}15%,75%{opacity:1;transform:translateX(0) rotate(-4deg)}100%{opacity:0;transform:translateX(20%) rotate(-4deg)}}@keyframes ring-burst{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(5)}}@media(prefers-reduced-motion:reduce){#toast,#toast.ultimate,.screen.shock #court{animation:none!important}#specialFX.active .special-ring{animation:none!important}}@media(max-width:700px){.screen{min-height:560px}}

#deuceBadge{animation:effect-shake .3s linear}@media(prefers-reduced-motion:reduce){#deuceBadge{animation:none}}

.binding-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.binding-column h3{color:#4085b7;font-size:12px;margin:4px 0 12px}.binding-column:last-child h3{color:#db7e63}.binding-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:7px 0;border-bottom:1px solid #dce0d6;font-size:12px}.binding-key{min-width:95px;border:1px solid #c8d4bf;border-bottom:3px solid #c8d4bf;border-radius:5px;padding:6px 10px;background:#fffef5;color:#355f4a;font:12px monospace}.binding-key.capturing{border-color:#d3a133;background:#fff3c8}.binding-actions{display:flex;gap:8px;align-items:center;margin-top:15px}.binding-actions .quiet{float:none;white-space:nowrap}.binding-actions .primary{width:auto;flex:1;white-space:nowrap}#keySettings{width:560px;max-width:95vw;max-height:92dvh;overflow:auto}#keySettings>p{font-size:11px;line-height:1.7;margin:12px 0}#bindingMessage{min-height:20px;color:#a7633c}.binding-hint{color:#7a8a6c}#toast.block{color:#dbffff;text-shadow:2px 3px #277887,0 0 18px #8ee5ff;font-size:38px}.arena-footer{height:auto;min-height:48px;gap:8px;flex-wrap:wrap}@media(max-width:530px){.binding-grid{gap:12px}.binding-row{gap:5px;font-size:10px}.binding-key{min-width:78px;font-size:10px;padding:6px}.binding-actions{flex-wrap:wrap}.binding-actions .primary{flex-basis:100%}}