/* JABCALL gym TV · one move at a time. Stage units: 1u = 1/100 of the 16:9 stage width. */
@font-face{font-family:JabPunch;src:url(fonts/jab-punch-ko.woff2) format('woff2');font-display:block}
@font-face{font-family:JabText;src:url(fonts/jab-text-ko.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{--red:#ef4a36;--ink:#f4f3f0;--mute:rgba(244,243,240,.56);--u:min(1vw,1.7778vh)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden}
body{color:var(--ink);font-family:JabText,Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans CJK KR','Noto Sans KR','Hiragino Sans','Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
.stage{position:absolute;left:50%;top:50%;width:calc(100 * var(--u));height:calc(56.25 * var(--u));transform:translate(-50%,-50%);overflow:hidden;background:#141215}
.clip{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .45s ease}
.clip.out{opacity:0}
/* repeat cut: a short dip through the studio colour hides the camera jump between repeats */
.veil{position:absolute;left:0;top:0;width:100%;height:100%;background:#141215;opacity:0;pointer-events:none;transition:opacity .2s ease-out}
.veil.on{opacity:1;transition:opacity .12s ease-in}
.scrim{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;background:linear-gradient(90deg,rgba(8,7,9,.4) 0%,rgba(8,7,9,.16) 34%,rgba(8,7,9,0) 52%)}
.stage[data-side=right] .scrim{background:linear-gradient(270deg,rgba(8,7,9,.4) 0%,rgba(8,7,9,.16) 34%,rgba(8,7,9,0) 52%)}
/* text column: --x0/--x1 are the free floor beside the boxer, in percent of the stage */
.ui{position:absolute;top:calc(5.4 * var(--u));bottom:calc(4.4 * var(--u));left:var(--x0,5.2%);width:calc(var(--x1,50%) - var(--x0,5.2%));pointer-events:none;transition:opacity .35s ease}
.ui{text-align:center}
/* the lesson title is the headline of the text column, centred with the cue below it (approved 2026-11-04) */
.title{display:block;text-align:center;text-wrap:balance;font-size:calc(6.4 * var(--u));line-height:1.04;letter-spacing:-.045em;font-weight:700;text-shadow:0 calc(.3 * var(--u)) calc(2.6 * var(--u)) rgba(0,0,0,.45)}
.title .n{font-weight:300;margin-right:calc(1.8 * var(--u));color:var(--red);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.title .name{word-break:keep-all}
.dots{display:flex;justify-content:center;gap:calc(.7 * var(--u));margin-top:calc(1.8 * var(--u))}
.dots i{display:block;width:calc(3.2 * var(--u));height:calc(.32 * var(--u));border-radius:9px;background:rgba(244,243,240,.22);transition:background-color .3s ease}
.dots i.on{background:var(--red)}
.dots i.done{background:rgba(244,243,240,.62)}
.cue{position:absolute;left:0;right:0;top:calc(var(--cueTop,15.4) * var(--u));align-items:center;bottom:calc(7.6 * var(--u));display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(calc(2.2 * var(--u)));transition:opacity .28s ease,transform .38s cubic-bezier(.2,.7,.2,1)}
.cue .tag{font-family:JabPunch,JabText,sans-serif;font-size:calc(3.8 * var(--u));line-height:1;color:var(--red);margin-bottom:calc(.9 * var(--u))}
.cue .txt{display:block;font-family:JabPunch,JabText,sans-serif;font-size:calc(var(--fs,6.2) * var(--u));line-height:1.1;word-break:keep-all;overflow-wrap:break-word;text-shadow:0 calc(.3 * var(--u)) calc(2.4 * var(--u)) rgba(0,0,0,.45);transform-origin:center center}
.cue .txt span{display:block}
/* ko cues carry their own line breaks (catalog '|'): .keep stops a line from re-wrapping; fitCue drops .keep only when
   keeping the author's lines would make the cue smaller than wrapping a long line (balanced) would */
.cue .txt span{text-wrap:balance}
.cue.keep .txt span{white-space:nowrap}
.cue[lang=en] .txt,.cue[lang=ja] .txt{font-family:JabText,sans-serif;font-weight:800;letter-spacing:-.025em;line-height:1.14;text-wrap:balance}
.cue .bar{display:block;height:calc(.42 * var(--u));width:calc(9 * var(--u));background:var(--red);margin-top:calc(1.4 * var(--u));transform-origin:center center;transform:scaleX(0)}
.cue.show{opacity:1;transform:none}
.cue.land .txt{animation:land .26s cubic-bezier(.2,.9,.3,1.4)}
.cue.land .bar{transform:scaleX(1);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.cue.leave{opacity:0;transform:translateX(calc(-1.6 * var(--u)));transition:opacity .3s ease,transform .3s ease}
@keyframes land{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
.foot{text-align:left;position:absolute;left:0;bottom:0}
.next{font-size:calc(1.3 * var(--u));color:var(--mute);letter-spacing:-.01em;white-space:nowrap}
.next b{font-weight:600;color:rgba(244,243,240,.84);margin-left:calc(.6 * var(--u))}
.track{width:calc(22 * var(--u));height:calc(.22 * var(--u));background:rgba(244,243,240,.16);border-radius:9px;margin-top:calc(1 * var(--u));overflow:hidden}
.track i{display:block;height:100%;width:100%;background:rgba(244,243,240,.75);transform-origin:left center;transform:scaleX(0)}
.mark{position:absolute;bottom:0;right:0;font-weight:800;font-size:calc(1.5 * var(--u));letter-spacing:-.06em;opacity:.5;pointer-events:none}
.mark span{color:var(--red)}
.swap .ui{opacity:0}
/* controls: only while someone is using the remote or mouse */
.ctl{position:absolute;left:calc(3.2 * var(--u));right:calc(3.2 * var(--u));top:calc(2.6 * var(--u));display:flex;align-items:center;gap:calc(.6 * var(--u));opacity:0;transform:translateY(calc(-1 * var(--u)));transition:opacity .25s ease,transform .25s ease;pointer-events:none;z-index:5}
.awake .ctl{opacity:1;transform:none;pointer-events:auto}
.awake .ui .title{opacity:.25}
.ctl .gap{flex:1}
.btn{font:inherit;font-size:calc(1.25 * var(--u));line-height:1;color:var(--ink);background:rgba(16,15,17,.78);border:1px solid rgba(244,243,240,.18);border-radius:calc(.7 * var(--u));min-height:max(44px,calc(4.2 * var(--u)));padding:0 calc(1.4 * var(--u));display:inline-flex;align-items:center;justify-content:center;gap:.4em;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.sq{min-width:max(44px,calc(4.2 * var(--u)));padding:0}
.btn:focus-visible,.btn.focus{outline:2px solid var(--red);outline-offset:2px}
.btn[aria-pressed=true]{background:var(--ink);color:#141315}
/* lesson picker */
.drawer{position:absolute;left:0;right:0;bottom:0;max-height:78%;z-index:8;background:rgba(14,13,15,.96);border-top:1px solid rgba(244,243,240,.14);padding:calc(2.4 * var(--u)) calc(5.2 * var(--u)) calc(3 * var(--u));display:flex;flex-direction:column;gap:calc(1.6 * var(--u))}
.drawer[hidden]{display:none}
.drawer header{display:flex;align-items:center;justify-content:space-between}
.drawer h2{font-size:calc(2 * var(--u));font-weight:700;letter-spacing:-.04em}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(.7 * var(--u));overflow:auto}
.grid .btn{justify-content:flex-start;gap:calc(.8 * var(--u));min-height:calc(4.8 * var(--u));padding:0 calc(1.1 * var(--u));font-size:calc(1.15 * var(--u));white-space:normal;text-align:left;word-break:keep-all}
.grid .btn b{font-weight:300;color:var(--red);font-variant-numeric:tabular-nums}
.grid .btn.current{border-color:var(--red);background:rgba(239,74,54,.16)}
.grid .btn:disabled{opacity:.35;cursor:default}
/* curriculum board: between moves (timed) or opened from the menu (held) */
.board{position:absolute;inset:0;z-index:7;background:#121014;padding:calc(2.6 * var(--u)) calc(4.4 * var(--u)) calc(2.2 * var(--u));display:flex;flex-direction:column;gap:calc(1.1 * var(--u));animation:boardIn .22s ease-out}
.board[hidden]{display:none}
@keyframes boardIn{from{opacity:.4}to{opacity:1}}
.bhead{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(2 * var(--u));flex-shrink:0}
.eyebrow{display:block;font-size:calc(.85 * var(--u));letter-spacing:.14em;color:var(--mute);font-weight:600}
.bhead h2{font-size:calc(2.5 * var(--u));line-height:1.1;letter-spacing:-.045em;font-weight:750;margin-top:calc(.4 * var(--u))}
.btools{display:flex;align-items:center;gap:calc(1.2 * var(--u))}
.btime{display:flex;align-items:center;gap:calc(.8 * var(--u));padding-right:calc(1.2 * var(--u));border-right:1px solid rgba(244,243,240,.14)}
.btime>span{font-size:calc(.95 * var(--u));color:var(--mute);white-space:nowrap}
.btimes{display:flex;gap:calc(.3 * var(--u))}
.btimes .btn{min-width:max(44px,calc(3.6 * var(--u)));padding:0 calc(.8 * var(--u));font-variant-numeric:tabular-nums}
.bstatus{font-size:calc(1.15 * var(--u));color:rgba(244,243,240,.78);min-width:calc(8 * var(--u));text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bnext{display:flex;align-items:center;gap:calc(1.6 * var(--u));flex-shrink:0;min-height:calc(5.6 * var(--u));padding:calc(.6 * var(--u)) calc(1.6 * var(--u));border-left:calc(.4 * var(--u)) solid var(--red);background:linear-gradient(90deg,rgba(239,74,54,.22),rgba(239,74,54,.04) 70%);border-radius:calc(.5 * var(--u))}
.bnext .n{font-size:calc(3.4 * var(--u));font-weight:250;color:var(--red);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.bnext>div{min-width:0;flex:1}
.bnext small{display:block;font-size:calc(.85 * var(--u));letter-spacing:.14em;color:rgba(244,243,240,.7);font-weight:600;margin-bottom:calc(.25 * var(--u))}
.bnext h3{font-size:calc(2.3 * var(--u));line-height:1.12;letter-spacing:-.045em;font-weight:750;word-break:keep-all;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnext .reps{font-size:calc(1.1 * var(--u));color:var(--mute);white-space:nowrap}
.bgrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));grid-auto-flow:column;gap:calc(.5 * var(--u)) calc(.9 * var(--u))}
.bl{display:flex;align-items:center;gap:calc(.9 * var(--u));min-width:0;min-height:0;padding:calc(.3 * var(--u)) calc(.9 * var(--u));border-radius:calc(.45 * var(--u));background:#1b191d;border:1px solid rgba(244,243,240,.07)}
.bl .n{flex-shrink:0;min-width:1.25em;font-size:calc(1.75 * var(--u));font-weight:300;color:rgba(244,243,240,.42);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bl .name{min-width:0;max-width:100%;font-size:calc(1.95 * var(--u));line-height:1.12;font-weight:700;letter-spacing:-.045em;word-break:keep-all;overflow-wrap:anywhere}
html[lang=ja] .bl .name{word-break:normal}
.bl .t{display:block}
.bl .d{display:block;margin-top:calc(.15 * var(--u));font-size:.62em;font-weight:500;letter-spacing:-.02em;color:var(--mute)}
.bl small{display:block;margin-top:calc(.15 * var(--u));font-size:.5em;font-weight:500;color:var(--mute)}
.bl.off{opacity:.42}
.bl.here{background:var(--red);border-color:var(--red);color:#fff}
.bl.here .n{color:rgba(255,255,255,.78);font-weight:500}
.bl.here .d{color:rgba(255,255,255,.82)}
.bfoot{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;font-size:calc(1 * var(--u));color:var(--mute)}
.bfoot .mini{font-weight:800;font-size:calc(1.4 * var(--u));letter-spacing:-.06em;color:rgba(244,243,240,.6)}
.bfoot .mini span{color:var(--red)}
.bprog{position:absolute;left:0;right:0;bottom:0;height:calc(.32 * var(--u));background:rgba(244,243,240,.08)}
.bprog i{display:block;height:100%;background:var(--red);transform-origin:left center;transform:scaleX(0)}
.board .btn{font-size:calc(1.1 * var(--u))}
.loading{position:absolute;right:calc(5.2 * var(--u));top:calc(5.4 * var(--u));display:flex;align-items:center;gap:calc(.8 * var(--u));font-size:calc(1.2 * var(--u));color:var(--mute);z-index:4}
.loading[hidden],.error[hidden],.hint[hidden],.btn[hidden]{display:none}
.spin{width:calc(1.6 * var(--u));height:calc(1.6 * var(--u));border:2px solid rgba(244,243,240,.25);border-top-color:var(--red);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;background:rgba(14,13,15,.96);border:1px solid rgba(244,243,240,.16);border-radius:calc(1 * var(--u));padding:calc(2.4 * var(--u)) calc(3 * var(--u));text-align:center;font-size:calc(1.5 * var(--u))}
.error div{display:flex;gap:calc(.8 * var(--u));justify-content:center;margin-top:calc(1.6 * var(--u))}
.hint{position:absolute;left:50%;bottom:calc(1.4 * var(--u));transform:translateX(-50%);font-size:calc(1 * var(--u));color:var(--mute);opacity:0;transition:opacity .25s;white-space:nowrap}
.awake .hint{opacity:1}
@media (prefers-reduced-motion:reduce){.board{animation:none}.cue,.cue .bar,.clip,.ctl{transition:none}.cue.land .txt,.spin{animation:none}}