/* Hallmark · macrostructure: Workbench · genre: playful · theme: Hum sport · nav: N7 · footer: Ft5 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 */
@import url('tokens.css');
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.6}button,a,select,input{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer;white-space:nowrap}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}button svg,.brand svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}h1,h2,p{margin:0}h1,h2{font-style:normal;overflow-wrap:anywhere;min-width:0}.icons{position:absolute;width:0;height:0;pointer-events:none}.masthead{max-width:1360px;margin:auto;padding:22px 40px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:2px solid var(--color-ink)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--color-ink);font-size:24px;letter-spacing:-1.2px;font-weight:900;line-height:1.2}.brand-icon{width:45px;height:45px;background:var(--color-accent);color:var(--color-accent-ink);display:grid;place-items:center;border-radius:var(--radius-sm);transform:rotate(-7deg)}.brand-icon svg{width:33px;height:33px}.brand small{display:block;font-family:var(--font-score);font-size:11px;letter-spacing:2px;margin-top:5px;font-weight:700}.mode{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px}.dot,.live-dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:var(--color-cyan-deep)}.mode-rule{font-family:var(--font-score);font-size:18px;margin-left:9px;border-left:1px solid var(--color-rule);padding-left:18px}.header-actions{display:flex;align-items:center;gap:20px}.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;color:var(--color-ink);padding:10px;min-height:44px;min-width:44px;font-size:13px}.icon-button:hover{background:var(--color-paper-2);color:var(--color-ink)}.icon-button:active{transform:translateY(1px)}.help-button{border:0;background:transparent;color:var(--color-ink);font-size:13px;font-weight:700;padding:10px 0;display:flex;gap:10px;align-items:center}.help-button span{border:1px solid var(--color-ink);border-radius:50%;height:20px;width:20px;line-height:18px}.help-button:hover{text-decoration:underline}main{max-width:1360px;margin:auto;padding:32px 40px 0}.match-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.match-heading h1{font-size:25px;font-weight:900;letter-spacing:-1.1px;line-height:1.35}.match-heading p{font-size:14px;color:var(--color-muted);margin-top:5px}.match-meta{display:flex;gap:12px;font-size:12px;color:var(--color-muted)}.match-meta span+span{border-left:1px solid var(--color-rule);padding-left:12px}.arena{position:relative;isolation:isolate;aspect-ratio:1280/680;border-radius:var(--radius-md);background:var(--color-cyan);box-shadow:0 3px 0 var(--color-rule);overflow:hidden;container-type:inline-size}canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;outline-offset:-4px!important}.scoreboard{position:absolute;top:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:22px;background:var(--color-paper);color:var(--color-ink);padding:10px 25px;border-radius:var(--radius-sm);box-shadow:0 4px 0 var(--color-shadow);pointer-events:none}.team-name{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:900;white-space:nowrap;line-height:1.35}.team-name small{display:block;font-size:9px;font-weight:500;color:var(--color-muted);margin-top:4px}.away{text-align:right}.team-mark{background:var(--color-cyan-deep);color:var(--color-paper);width:31px;height:34px;clip-path:polygon(0 0,100% 0,100% 73%,50% 100%,0 73%);display:grid;place-items:center;font-family:var(--font-score);font-size:22px}.away .team-mark{background:var(--color-accent);color:var(--color-accent-ink)}.score{display:flex;align-items:center;gap:16px;font-family:var(--font-score);font-variant-numeric:tabular-nums;font-size:40px;font-weight:700;line-height:1}.score span{font-size:25px;color:var(--color-muted)}.score b{min-width:22px;text-align:center}.arena-tools{position:absolute;right:14px;top:18px;display:flex;gap:5px}.arena-button{background:var(--color-paper);color:var(--color-ink);border-radius:var(--radius-sm);min-width:35px;min-height:35px;padding:7px}.arena-button svg{width:18px;height:18px}.start-panel{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,var(--color-paper) 0%,var(--color-paper) 26%,transparent 76%);padding:50px 6%;pointer-events:none}.start-panel>*{pointer-events:auto}.start-copy{margin-top:35px}.court-label{font-size:12px;font-weight:700;display:inline-block;padding:3px 10px;border:1px solid currentColor;border-radius:var(--radius-pill);margin-bottom:16px}.start-copy h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-display);line-height:1.2;letter-spacing:-2px}.start-copy h2 span{color:var(--color-cyan-deep)}.start-copy p{font-size:14px;line-height:1.9;margin-top:18px;color:var(--color-muted)}.setup{display:flex;align-items:center;gap:16px;margin-top:24px;font-size:12px}.setup label{font-weight:700}.setup select{border:0;border-bottom:1px solid var(--color-rule);background:transparent;color:var(--color-ink);font-size:12px;padding:8px 24px 8px 0}.btn{--btn-face:var(--color-accent);--btn-ink:var(--color-accent-ink);--btn-edge:var(--color-accent-deep);--btn-cast:var(--color-shadow);--btn-line:var(--color-accent-deep);display:inline-flex;align-items:center;justify-content:center;gap:.8em;padding:.8rem 1.4rem;font-weight:700;border:0;border-radius:var(--radius-sm);color:var(--btn-ink);background:var(--btn-face);cursor:pointer;position:relative;isolation:isolate;box-shadow:0 4px 0 0 var(--btn-edge),0 6px 12px -3px var(--btn-cast);transform:translateY(0);transition:transform 140ms cubic-bezier(.2,.7,.3,1),box-shadow 140ms cubic-bezier(.2,.7,.3,1),background-color 160ms}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 0 var(--btn-edge),0 12px 22px -4px var(--btn-cast)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 0 var(--btn-edge),0 2px 6px -2px var(--btn-cast);transition-duration:70ms}.start-button{margin-top:18px;font-size:15px;min-width:250px}.start-note{display:block;font-size:10px;color:var(--color-muted);margin-top:16px}.intro-stamp{position:absolute;right:6%;top:35%;font-family:var(--font-score);font-weight:800;font-size:clamp(40px,7vw,106px);line-height:.92;letter-spacing:-2px;color:var(--color-paper);opacity:.7;transform:rotate(-7deg);pointer-events:none}.rally-info{position:absolute;left:20px;top:23px;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--color-ink)}.rally-info[hidden]{display:none}.rally-info #rally-count{opacity:.65;font-family:var(--font-score);font-size:15px}.play-cue{position:absolute;left:50%;top:24%;transform:translateX(-50%);font-weight:900;font-size:clamp(12px,1.5vw,20px);color:var(--color-ink);background:var(--color-pear);padding:5px 16px;border-radius:var(--radius-pill);opacity:0;transition:opacity var(--dur-short) var(--ease-out);white-space:nowrap;pointer-events:none}.play-cue.visible{opacity:1}.break-overlay{position:absolute;inset:0;background:var(--color-overlay);display:grid;place-items:center;z-index:4}.break-overlay[hidden]{display:none}.break-card{background:var(--color-paper);color:var(--color-ink);padding:32px 48px;text-align:center;border-radius:var(--radius-md);min-width:300px;max-width:90%}.break-card>span{font-size:12px;color:var(--color-cyan-deep);font-weight:700}.break-card h2{font-family:var(--font-display);font-weight:400;font-size:36px;line-height:1.4;margin:8px 0}.break-card p{font-size:13px;color:var(--color-muted);margin-bottom:24px}.break-card .btn{font-size:14px}.text-button{display:flex;gap:8px;align-items:center;justify-content:center;background:transparent;color:var(--color-muted);border:0;font-size:12px;margin:14px auto 0;padding:8px}.text-button svg{width:15px;height:15px}.text-button:hover{color:var(--color-ink);text-decoration:underline}.point-banner{position:absolute;inset:30% 0 auto;display:flex;align-items:center;flex-direction:column;pointer-events:none;color:var(--color-ink);text-shadow:0 2px 0 var(--color-paper)}.point-banner[hidden]{display:none}.point-banner small{font-size:12px;background:var(--color-paper);padding:3px 12px;border-radius:var(--radius-pill)}.point-banner strong{font-family:var(--font-display);font-size:clamp(28px,5vw,65px);font-weight:400;line-height:1.35;margin-top:6px}.point-banner>span{background:var(--color-paper);padding:3px 12px;font-size:12px;border-radius:var(--radius-sm)}.under-court{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--color-rule)}.under-court p{font-size:12px;color:var(--color-muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}.tip-mark{font-family:var(--font-score);font-size:14px;font-weight:700;color:var(--color-cyan-deep);margin-right:4px}kbd{font-family:var(--font-body);display:inline-flex;align-items:center;justify-content:center;font-size:13px;min-width:30px;height:29px;padding:0 7px;border:1px solid var(--color-rule);border-bottom-width:3px;border-radius:4px;background:var(--color-white);color:var(--color-ink);line-height:1;font-weight:600}.under-court kbd{min-width:22px;height:22px;font-size:10px;border-bottom-width:2px}.assist-label{position:relative;display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap;cursor:pointer;min-height:44px}.assist-label input{position:absolute;left:0;width:34px;height:22px;opacity:0}.switch{display:block;width:32px;height:19px;background:var(--color-muted);border-radius:var(--radius-pill);padding:3px}.switch:after{content:'';display:block;width:13px;height:13px;border-radius:50%;background:var(--color-paper);transition:transform var(--dur-short) var(--ease-out)}input:checked+.switch{background:var(--color-cyan-deep)}input:checked+.switch:after{transform:translateX(13px)}input:focus-visible+.switch{outline:3px solid var(--color-focus);outline-offset:3px}.controls-guide{display:flex;align-items:center;justify-content:space-between;padding:24px 0 28px;gap:20px}.guide-title{display:flex;flex-direction:column;gap:3px;font-weight:800;font-size:14px;min-width:130px}.guide-title small{font-size:10px;font-weight:400;color:var(--color-muted)}.guide-item{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.guide-item b{font-size:11px;font-weight:500;color:var(--color-muted)}.key-group{display:flex;align-items:center;gap:4px}.key-group>span{font-size:10px;color:var(--color-muted);margin-left:4px}.wide-key{min-width:74px}footer{display:flex;justify-content:space-between;align-items:center;padding:20px 0 32px;border-top:1px solid var(--color-rule)}footer p{font-weight:700;font-size:14px;letter-spacing:-.4px}footer>span{font-family:var(--font-body);font-size:10px;color:var(--color-muted)}dialog{position:fixed;inset:0;margin:auto;height:fit-content;max-height:90dvh;max-width:min(90%,490px);border:0;background:var(--color-paper);color:var(--color-ink);border-radius:var(--radius-md);padding:32px}dialog::backdrop{background:var(--color-overlay)}.dialog-close{position:absolute;top:8px;right:8px;font-size:28px}dialog h2{font-family:var(--font-display);font-size:28px;font-weight:400;margin-bottom:12px}dialog p{font-size:14px}dialog ol{padding-left:20px;margin:24px 0}dialog li{padding:6px 0;font-size:13px}dialog li b,dialog li span{display:block}dialog li span{font-size:12px;color:var(--color-muted)}dialog .help-note{background:var(--color-paper-2);color:var(--color-muted);padding:12px;font-size:12px;border-radius:var(--radius-sm);margin-bottom:24px}dialog .btn{width:100%;font-size:14px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--color-ink);color:var(--color-paper);font-size:13px;padding:12px 20px;border-radius:var(--radius-sm);z-index:6}.result-stats{display:flex;justify-content:center;gap:24px;margin:-8px 0 24px}.result-stats[hidden]{display:none}.result-stats div{display:flex;flex-direction:column;font-size:11px;color:var(--color-muted)}.result-stats b{font-family:var(--font-score);font-size:32px;line-height:1.2;color:var(--color-ink)}.touch-controls{display:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.arena:fullscreen{border-radius:0;width:100%;height:100dvh;max-height:none;background:var(--color-ink);color:var(--color-paper);aspect-ratio:auto}.arena:fullscreen canvas{position:absolute;inset:0}.arena:fullscreen .scoreboard{top:12px}.arena:fullscreen .start-panel{padding:24px 10%}.arena:fullscreen .start-copy{margin-top:12px}




@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:0ms!important;animation:none!important;scroll-behavior:auto!important}}

.arena:not(.started) .scoreboard{visibility:hidden}.arena:not(.started) #pause{visibility:hidden}

/* Athlete motion revision: an uninterrupted court with compact match instruments. */
.masthead{padding-top:14px;padding-bottom:14px}main{padding-top:20px;max-width:1480px}.match-heading{margin-bottom:14px}.match-heading h1{font-size:21px}.match-heading p{font-size:12px}.arena{border-radius:var(--radius-sm)}.scoreboard{top:14px;padding:6px 20px;gap:20px;border-radius:2px;box-shadow:0 2px 0 var(--color-shadow)}.team-name{font-size:13px}.team-name small{display:none}.team-mark{width:25px;height:28px;font-size:18px}.score{font-size:34px}.rally-info{top:auto;bottom:18px}.play-cue{top:auto;bottom:18px;font-size:13px;border-radius:2px;background:var(--color-paper);padding:5px 12px}.start-copy{margin-top:0}.start-copy h2{font-size:clamp(32px,4vw,56px);line-height:1.16}.intro-stamp{font-size:clamp(46px,8vw,112px);right:9%;top:30%;opacity:.55}.practice-button{display:block;margin-top:20px;padding:0 0 6px;background:transparent;color:var(--color-cyan-deep);border:0;border-bottom:1px solid var(--color-cyan-deep);font-weight:800;font-size:13px}.practice-button span{display:inline;margin-left:12px;font-size:10px;font-weight:500}.practice-button:hover{color:var(--color-ink)}.practice-button:active{transform:translateY(1px)}.start-note{font-size:10px;margin-top:14px}.shot-readout{position:absolute;left:20px;top:22px;color:var(--color-ink);pointer-events:none}.shot-readout[hidden]{display:none}.shot-readout>span{font-size:10px;font-weight:800;letter-spacing:.3px}.shot-readout>div{display:flex;align-items:baseline;gap:5px;line-height:1}.shot-readout b{font-family:var(--font-score);font-size:39px}.shot-readout small{font-family:var(--font-score);font-size:13px}.shot-readout i{font-size:22px;margin:0 3px;font-style:normal}.shot-readout strong{font-family:var(--font-score);font-size:27px}.arena.training .scoreboard{opacity:.32}.arena.training .scoreboard .score{display:none}.arena.training .away{display:none}.arena.training .home{font-size:0}.arena.training .home>span:last-child{font-size:0}.arena.training .home>span:last-child:after{content:'스파이크 연습';font-size:13px}.under-court{padding-top:8px;padding-bottom:8px}.controls-guide{padding-top:18px;padding-bottom:18px}.arena.started .play-cue{max-width:70%;white-space:normal;text-align:center}.arena.started .point-banner{inset:26% 0 auto}



.team-name meter{display:block;height:4px;width:100%;min-width:65px;margin-top:5px;border:0;border-radius:0;background:var(--color-rule)}.team-name meter::-webkit-meter-bar{border:0;border-radius:0;background:var(--color-rule)}.team-name meter::-webkit-meter-optimum-value{background:var(--color-cyan-deep)}.team-name.away meter::-webkit-meter-optimum-value{background:var(--color-accent-deep)}.arena.training meter{display:none}
.slow-button{display:none;background:var(--color-paper);color:var(--color-ink);border:0;border-radius:2px;padding:0 12px;font-size:10px;font-weight:700;min-height:35px}.arena.training .slow-button{display:block}.slow-button[aria-pressed=true]{background:var(--color-pear)}.slow-button:hover{color:var(--color-cyan-deep)}.slow-button:active{transform:translateY(1px)}



footer{flex-wrap:wrap}.rig-link{font-size:11px;color:var(--color-cyan-deep);text-decoration:underline;text-underline-offset:3px}.rig-link:hover{color:var(--color-ink)}
.rig-import{position:relative;display:inline-block;margin-left:12px;color:var(--color-cyan-deep);font-size:11px;cursor:pointer;text-decoration:underline}.rig-import input{position:absolute;width:1px;height:1px;opacity:0}.rig-import:focus-within{outline:3px solid var(--color-focus);outline-offset:3px}

.under-court{flex-wrap:wrap}.under-court #rhythm-status{flex-basis:100%;color:#25726f;font-size:12px}.header-actions #bgm{white-space:nowrap}

.court-keys{display:none;position:absolute;z-index:8;left:12px;right:12px;bottom:10px;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;padding:8px 10px;background:rgba(250,245,228,.96);border:1px solid #215d5e;border-radius:6px;box-shadow:0 2px 8px #263e4820}.arena.started .court-keys{display:flex}.court-keys button{display:flex;align-items:center;gap:5px;min-height:36px;border:1px solid #b4c5bd;border-radius:4px;background:#fffdf1;color:#263e48;padding:4px 9px;font-size:11px;font-weight:800;touch-action:none}.court-keys kbd{font:800 13px var(--font-body);padding:1px 4px;background:#e4ece4;border-radius:3px}.court-keys .key-hit{background:#f7d65c;border-color:#ce7940}.court-keys button.held{background:#25726f;color:white;transform:translateY(1px)}.court-keys small{font-size:10px;flex-basis:100%;text-align:center}.keys-hint{font-size:10px;margin-right:3px}.arena.started .touch-controls{display:none!important}.arena.started .play-cue{bottom:105px}



.serve-coach{position:absolute;z-index:7;top:90px;left:50%;transform:translateX(-50%);padding:10px 18px;background:#193e43ec;border:1px solid #f7d65c80;border-radius:7px;color:#fff9e8;text-align:center;pointer-events:none;min-width:280px}.serve-coach[hidden]{display:none}.serve-coach>div{display:flex;gap:10px;align-items:center;justify-content:center}.serve-coach b{font-size:13px;padding:4px 8px;opacity:.5;border-radius:4px}.serve-coach b.active{opacity:1;background:#f7d65c;color:#263e48}.serve-coach b.done{opacity:1;color:#94dfca}.serve-coach strong{display:block;font-size:13px;margin-top:5px}.court-keys button.timing-cue{outline:4px solid #ef9b4c;outline-offset:2px;background:#f7d65c;box-shadow:0 0 14px #f7d65caa}