#kok-game{padding:100px 24px 120px;background:#f5f9ff;color:#102344;scroll-margin-top:64px}
.kg-heading{max-width:1200px;margin:0 auto 30px;display:flex;align-items:end;justify-content:space-between;gap:24px}.kg-heading small{color:#1477ff;font-weight:800;letter-spacing:.12em}.kg-heading h2{font-size:clamp(26px,3vw,42px);margin:10px 0;letter-spacing:-.05em}.kg-heading p{color:#63728b;margin:0;font-size:15px}
.kg-frame{position:relative;max-width:1200px;aspect-ratio:16/9;margin:auto;border-radius:24px;overflow:hidden;background:#154984;isolation:isolate;outline:none;box-shadow:0 14px 40px #17356415;container-type:inline-size}.kg-frame canvas{display:block;width:100%;height:100%}.kg-frame button{font:inherit;cursor:pointer;touch-action:none;border:0}.kg-hud{position:absolute;top:4%;left:50%;transform:translateX(-50%);display:flex;gap:24px;align-items:center;background:#fffefc;color:#183b71;padding:12px 28px;border-radius:40px;font-size:clamp(12px,2cqw,24px);font-weight:800;white-space:nowrap}.kg-hud strong{color:#1477ff;margin-left:10px;font-size:1.3em}.kg-hud span+span{border-left:1px solid #d9e4f3;padding-left:24px}.kg-pause{position:absolute;right:3%;top:4%;width:44px;height:44px;border-radius:50%;background:white;color:#1477ff;font-size:22px!important}.kg-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#0b285b20}.kg-center[hidden],.kg-video[hidden],.kg-rotate[hidden]{display:none}.kg-center p{padding:8px 18px;border-radius:24px;background:#ffffffed;color:#173b68;margin:0;font-size:clamp(12px,1.6cqw,18px)}.kg-primary{padding:18px 46px;border-radius:40px;background:#1477ff;color:#fff;font-weight:900!important;font-size:clamp(20px,3cqw,38px)!important;box-shadow:0 6px 0 #0657cf}.kg-secondary{background:white;border-radius:22px;padding:10px 22px;color:#183b71}.kg-controls{position:absolute;left:4%;right:4%;bottom:5%;display:flex;justify-content:space-between;align-items:end;pointer-events:none}.kg-controls>div{display:flex;gap:12px}.kg-controls button{pointer-events:auto;user-select:none;-webkit-user-select:none;width:72px;height:58px;border-radius:20px;background:#fffffff2;color:#1477ff;font-size:25px;font-weight:900;box-shadow:0 4px 0 #bfd4ee}.kg-controls button:active,.kg-controls button.held{background:#cbe6ff;transform:translateY(2px)}.kg-controls .kg-smash{width:105px;height:70px;border-radius:28px;background:#fa75ac;color:white;font-size:16px;box-shadow:0 4px 0 #cb467f}.kg-hint{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);font-size:13px;color:#fff;background:#123663aa;padding:8px 15px;border-radius:20px;white-space:nowrap}.kg-video{position:absolute;inset:0;z-index:5;background:#08162c}.kg-video video{width:100%;height:100%;object-fit:contain}.kg-rotate{position:absolute;inset:0;z-index:9;background:#eff6fff5;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:14px;color:#14355e}.kg-rotate svg{width:64px;height:64px;stroke:#1477ff;fill:none;stroke-width:2}.kg-rotate strong{font-size:20px}.kg-rotate p{margin:0;font-size:14px}.kg-exit{position:absolute;left:3%;top:4%;background:#ffffffdc;color:#285179;border-radius:20px;padding:10px 15px;font-size:12px!important}.kg-note{max-width:1200px;margin:16px auto 0;font-size:13px;color:#7686a0}.kg-frame[data-state="ready"] .kg-pause,.kg-frame[data-state="result"] .kg-pause{visibility:hidden}
@media(hover:hover) and (pointer:fine){.kg-controls{opacity:.45}.kg-controls:hover{opacity:1}}
@media(max-width:1023px){#kok-game{padding:60px 16px 100px}.kg-heading{display:block}.kg-heading p{font-size:13px}.kg-frame{border-radius:16px}.kg-hud{padding:7px 18px;gap:12px}.kg-hud span+span{padding-left:12px}.kg-pause{width:34px;height:34px}.kg-controls button{width:58px;height:44px;border-radius:15px}.kg-controls .kg-smash{width:86px;height:58px}.kg-hint{font-size:10px}.kg-frame.kg-expanded{position:fixed;inset:0;z-index:10000;max-width:none;width:100%;height:100dvh;aspect-ratio:auto;border-radius:0;background:#133b65}.kg-expanded canvas{object-fit:contain}.kg-expanded .kg-controls{bottom:max(4%,env(safe-area-inset-bottom))}.kg-expanded .kg-hint{display:none}}
@media(max-width:1023px) and (orientation:portrait){.kg-frame{aspect-ratio:4/3}.kg-frame .kg-center,.kg-frame .kg-controls,.kg-frame .kg-hint{display:none!important}}

.kg-video{position:fixed;inset:0;z-index:20000}.kg-primary:disabled{opacity:.55;cursor:wait}
.kg-nice{position:absolute;left:50%;top:48%;width:20%;max-width:240px;opacity:0;transform:translate(-50%,-50%);pointer-events:none;z-index:4}
.kg-controls button,.kg-controls .kg-smash,.kg-pause{background:transparent center/contain no-repeat!important;box-shadow:none!important;color:transparent!important;border-radius:0!important}
.kg-controls [data-input=left]{background-image:url('left.webp')!important}.kg-controls [data-input=right]{background-image:url('right.webp')!important}.kg-controls .kg-smash{background-image:url('smash.webp')!important;width:104px;height:96px}.kg-pause{background-image:url('pause.webp')!important;width:54px;height:54px}.kg-controls button{width:88px;height:72px}.kg-controls{opacity:1!important}
.kg-primary{background:linear-gradient(#59d6ff,#1682f8);border:4px solid #a7e6ff!important;box-shadow:inset 0 3px 2px #fff8,0 5px 0 #286ed0,0 8px 16px #13458033;padding:15px 44px;text-shadow:0 2px #1267bd}.kg-primary:hover{filter:brightness(1.08)}
.kg-hud{background:transparent url('score.webp') center/100% 100% no-repeat;width:440px;height:64px;padding:0 24px 0 65px;gap:42px;justify-content:space-between;font-size:16px}.kg-hud span{flex:1;white-space:nowrap}.kg-hud span+span{border:0;padding-left:38px}.kg-hud strong{font-size:24px;margin-left:6px}.kg-hint{background:#1435689c}
@media(max-width:1023px){.kg-hud{width:340px;height:50px;padding-left:50px;gap:24px;font-size:12px}.kg-hud span+span{padding-left:28px}.kg-hud strong{font-size:19px}.kg-controls button{width:70px;height:58px}.kg-controls .kg-smash{width:87px;height:80px}.kg-pause{width:43px;height:43px}}
.kg-heading{justify-content:center;text-align:center;margin-bottom:42px}.kg-heading h2{font-family:Pretendard,sans-serif;font-size:clamp(36px,4vw,56px);font-weight:850;line-height:1.18;letter-spacing:-.055em;margin:0 0 20px;color:#0d1934}.kg-heading h2 em{font-style:normal;color:#0b50cc}.kg-heading p{line-height:1.8;color:#637b98;font-size:16px}@media(max-width:1023px){.kg-heading h2{font-size:clamp(27px,3.8vw,36px);line-height:1.23;margin-bottom:13px}.kg-heading p{font-size:14px}}@media(max-width:640px){.kg-heading h2{font-size:clamp(25px,6.6vw,31px)}}
/* Center each score group inside its illustrated inset. */
.kg-hud{display:block;padding:0}
.kg-hud span,.kg-hud span+span{position:absolute;top:50%;left:30%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:8px;padding:0;border:0;line-height:1}
.kg-hud span+span{left:79%}
.kg-hud strong{margin:0;line-height:1}

.kg-controls .kg-actions{align-items:center;gap:12px}.kg-controls .kg-lift{background:linear-gradient(#67dfff,#158de8)!important;color:white!important;border:3px solid #b7edff!important;border-radius:24px!important;box-shadow:inset 0 2px 2px #fff8,0 4px 0 #276bb2!important;width:80px;height:78px;font-size:30px;line-height:1}.kg-lift small{display:block;font:700 12px 'SUIT Variable',sans-serif;margin-top:5px}.kg-hint{bottom:2%;font-size:11px}
@media(max-width:1023px){.kg-controls .kg-lift{width:68px;height:65px}.kg-actions{gap:8px!important}}
@media(max-width:1023px) and (orientation:portrait){.kg-frame.kg-expanded{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3;z-index:auto}.kg-video{display:none!important}}

.kg-controls .kg-lift{background:transparent url("lift.png") center/contain no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important;width:104px;height:96px;font-size:0}@media(max-width:1023px){.kg-controls .kg-lift{width:87px;height:80px}}
.kg-controls .kg-lift{transform:scaleX(-1)}.kg-controls .kg-lift:active,.kg-controls .kg-lift.held{transform:scaleX(-1) translateY(2px)}
.kg-video-caption{position:absolute;inset:40% 0 0;display:flex;align-items:flex-end;justify-content:center;padding:0 20px max(4vh,env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,10,30,.18) 45%,rgba(0,10,30,.48));pointer-events:none}.kg-video-caption img{display:block;width:min(60vw,660px);max-height:27vh;object-fit:contain;filter:drop-shadow(0 5px 12px #00133355)}@media(max-width:1023px) and (orientation:landscape){.kg-video-caption img{width:46vw;max-height:25vh}.kg-video-caption{padding-bottom:3vh}}

/* Match the site typeface and align game text and controls. */
#kok-game,#kok-game :is(h2,p,button,span,strong,small){font-family:'SUIT Variable',SUIT,sans-serif!important}
#kok-game .kg-hud span{line-height:1.2;font-weight:800;align-items:center;gap:8px}
#kok-game .kg-hud strong{line-height:1.2;font-weight:900;font-variant-numeric:tabular-nums}
#kok-game .kg-primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;line-height:1.2;font-weight:900!important;text-align:center}
#kok-game .kg-primary-icon{display:block;width:.7em;height:.7em;flex:0 0 .7em}
#kok-game :is(.kg-message,.kg-hint,.kg-secondary,.kg-rotate){text-align:center;line-height:1.5}
#kok-game .kg-center{padding:20px;box-sizing:border-box}
#kok-game .kg-message{max-width:100%;box-sizing:border-box}
/* Shared TOP 5 scoreboard and game-over record entry. */
#kok-game .kg-leaderboard{max-width:720px;margin:30px auto 0;padding:24px;border:3px solid #8fd8ff;border-radius:20px;background:linear-gradient(135deg,#132f60,#07172f);box-shadow:inset 0 2px 0 #ffffff38,0 5px 0 #266ab3,0 12px 26px #163d7820;color:#fff}
#kok-game .kg-leaderboard header{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px}
#kok-game .kg-leaderboard h3{font:900 24px/1.2 'SUIT Variable',sans-serif;letter-spacing:.06em;margin:0;color:#a8e8ff}
#kok-game .kg-board-light{width:9px;height:9px;border-radius:50%;background:#74e2ff;box-shadow:0 0 12px #74e2ff}
#kok-game .kg-board-tag{font-size:10px;letter-spacing:.1em;color:#83d5ff;border:1px solid #38729d;padding:3px 6px;border-radius:4px}
#kok-game .kg-board-columns,#kok-game .kg-board-rows li{display:grid;grid-template-columns:70px 1fr 100px;align-items:center;gap:12px;text-align:center}
#kok-game .kg-board-columns{font-size:12px;color:#8aa9c9;padding:0 12px 10px}
#kok-game .kg-board-rows{list-style:none;padding:0;margin:0;display:grid;gap:8px}
#kok-game .kg-board-rows li{min-height:48px;padding:0 12px;border:1px solid #305175;background:linear-gradient(#173862,#102a4f);border-radius:7px;font-size:18px;font-weight:800}
#kok-game .kg-board-rows li span:first-child{color:#7dcfff;font-variant-numeric:tabular-nums}
#kok-game .kg-board-rows li span:last-child{color:#a7edff;font-variant-numeric:tabular-nums}
#kok-game .kg-board-rows li:first-child:not(.kg-record-empty){border-color:#d4bb6b}
#kok-game .kg-record-empty{color:#6e88a6;font-size:14px!important;font-weight:500!important}
#kok-game .kg-record-empty span:last-child{color:#6e88a6!important}
#kok-game .kg-record-highlight{background:#205e96!important;border-color:#99e8ff!important}
#kok-game .kg-board-note{font-size:12px;color:#8aa9c9;text-align:center;margin:16px 0 0;line-height:1.5}
#kok-game .kg-record-entry{width:min(360px,100%);max-height:100%;overflow-y:auto;box-sizing:border-box;text-align:center;padding:20px 24px;border:3px solid #a7e6ff;border-radius:20px;background:linear-gradient(#effaff,#d5ecff);box-shadow:inset 0 2px 0 #fff,0 6px 0 #286ed0,0 10px 30px #061f5766;color:#173b68}
#kok-game .kg-record-entry[hidden],#kok-game .kg-primary[hidden]{display:none!important}
#kok-game .kg-show-record{background:#081e5080}
#kok-game .kg-show-record>.kg-message,#kok-game .kg-show-record>.kg-primary,#kok-game .kg-show-record>.kg-secondary{display:none!important}
#kok-game .kg-record-entry img{display:block;width:160px;max-width:65%;height:68px;object-fit:contain;margin:0 auto 2px}
#kok-game .kg-record-entry h3{font:900 24px/1.2 'SUIT Variable',sans-serif;color:#0b50cc;margin:0 0 8px}
#kok-game .kg-record-entry p{background:none;border-radius:0;padding:0;line-height:1.5;font-size:14px}
#kok-game .kg-record-entry label{display:block;margin:18px 0 8px;font-size:14px;font-weight:800;text-align:left}
#kok-game .kg-name-field{position:relative}
#kok-game .kg-name-field input{box-sizing:border-box;width:100%;height:48px;padding:0 70px 0 12px;font:700 17px 'SUIT Variable',sans-serif;color:#173b68;background:#fff;border:2px solid #98c9ee;border-radius:8px;outline:none}
#kok-game .kg-name-field input:focus{border-color:#1682f8;box-shadow:0 0 0 3px #1682f822}
#kok-game .kg-name-field span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;color:#6c89a6}
#kok-game .kg-record-entry .kg-entry-status{margin:8px 0;color:#b13939;min-height:21px;font-size:12px}
#kok-game .kg-entry-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#kok-game .kg-entry-actions button{min-height:44px;border:2px solid #a7e6ff;border-radius:12px;background:linear-gradient(#38bbff,#1682f8);color:white;font-size:15px;font-weight:900;box-shadow:0 3px 0 #286ed0}
#kok-game .kg-entry-actions button+button{background:#fff;color:#173b68;border-color:#a9cbea;box-shadow:0 3px 0 #a9cbea}
#kok-game .kg-entry-actions button:disabled{opacity:.6;cursor:wait}
@media(max-width:640px){#kok-game .kg-leaderboard{padding:18px 12px;border-radius:16px}#kok-game .kg-leaderboard h3{font-size:21px}#kok-game .kg-board-columns,#kok-game .kg-board-rows li{grid-template-columns:42px 1fr 65px;gap:6px;padding-left:6px;padding-right:6px}#kok-game .kg-board-rows li{font-size:16px}#kok-game .kg-record-entry{padding:12px 16px}#kok-game .kg-record-entry img{height:48px}#kok-game .kg-record-entry label{margin-top:10px}}

@media(min-width:1024px){#kok-game .kg-frame{max-width:min(1200px,calc(177.7778svh - 195.5556px))}}
/* Compact arena scoreboard, above the spectators and clear of the court. */
#kok-game .kg-leaderboard{position:absolute;z-index:2;left:3%;top:15%;width:24%;max-width:260px;box-sizing:border-box;margin:0;padding:10px;border-width:2px;border-radius:10px;box-shadow:inset 0 1px 0 #ffffff38,0 3px 0 #266ab3,0 5px 12px #07172f55;pointer-events:none}
#kok-game .kg-leaderboard header{gap:6px;margin-bottom:8px}
#kok-game .kg-leaderboard h3{font-size:clamp(9px,1.35cqw,15px);letter-spacing:.03em}
#kok-game .kg-board-light{width:5px;height:5px}
#kok-game .kg-board-tag{font-size:7px;padding:2px 3px}
#kok-game .kg-board-columns,#kok-game .kg-board-rows li{grid-template-columns:24px 1fr 42px;gap:4px;padding-left:4px;padding-right:4px}
#kok-game .kg-board-columns{font-size:9px;padding-bottom:5px}
#kok-game .kg-board-rows{gap:4px}
#kok-game .kg-board-rows li{min-height:25px;font-size:12px;border-radius:4px}
#kok-game .kg-record-empty{font-size:9px!important}
#kok-game .kg-board-note{display:none}
#kok-game .kg-center{z-index:3}
@media(max-width:640px){#kok-game .kg-leaderboard{left:2%;top:13%;width:44%;max-width:180px;padding:6px;border-radius:8px}#kok-game .kg-leaderboard h3{font-size:10px}#kok-game .kg-board-columns,#kok-game .kg-board-rows li{grid-template-columns:18px 1fr 30px;gap:2px;padding-left:2px;padding-right:2px}#kok-game .kg-board-rows li{min-height:19px;font-size:10px}#kok-game .kg-record-empty{font-size:8px!important}#kok-game .kg-board-columns{font-size:8px}#kok-game .kg-leaderboard header{margin-bottom:5px}#kok-game .kg-board-tag{display:none}}
#kok-game .kg-leaderboard{top:11%}
#kok-game .kg-board-rows li span:first-child{display:flex;align-items:center;justify-content:center;gap:3px}
#kok-game .kg-rank-crown{width:13px;height:13px;flex:0 0 13px}
#kok-game .kg-crown-1{color:#f6cf69}#kok-game .kg-crown-2{color:#c6d8e8}#kok-game .kg-crown-3{color:#dca078}
#kok-game .kg-board-columns,#kok-game .kg-board-rows li{grid-template-columns:36px 1fr 40px}
@media(max-width:640px){#kok-game .kg-leaderboard{top:10%}#kok-game .kg-rank-crown{width:10px;height:10px;flex-basis:10px}#kok-game .kg-board-columns,#kok-game .kg-board-rows li{grid-template-columns:29px 1fr 29px}}

@media(max-width:1023px) and (orientation:landscape){#kok-game .kg-frame:not(.kg-expanded){max-width:min(1200px,calc(177.7778svh - 275.5556px))}#kok-game .kg-frame:not(.kg-expanded) .kg-leaderboard{width:32%;max-width:180px;padding:5px;top:10%}#kok-game .kg-frame:not(.kg-expanded) .kg-board-rows li{min-height:18px;font-size:9px}#kok-game .kg-frame:not(.kg-expanded) .kg-record-empty{font-size:7px!important}#kok-game .kg-frame:not(.kg-expanded) .kg-board-columns{font-size:8px}#kok-game .kg-frame:not(.kg-expanded) .kg-leaderboard header{margin-bottom:4px}#kok-game .kg-frame:not(.kg-expanded) .kg-leaderboard h3{font-size:9px}}

#kok-game .kg-video{touch-action:none;overscroll-behavior:none}
/* Mobile: place rankings below the game and keep overlays readable. */
@media(max-width:1023px),(pointer:coarse){
#kok-game>.kg-leaderboard{position:relative!important;inset:auto!important;width:min(100%,480px)!important;max-width:480px!important;margin:24px auto 0!important;padding:16px!important;border-radius:12px!important;pointer-events:auto}
#kok-game>.kg-leaderboard header{margin-bottom:12px!important;gap:8px}
#kok-game>.kg-leaderboard h3{font-size:18px!important}
#kok-game>.kg-leaderboard .kg-board-tag{display:inline-block;font-size:9px}
#kok-game>.kg-leaderboard .kg-board-columns,#kok-game>.kg-leaderboard .kg-board-rows li{grid-template-columns:48px minmax(0,1fr) 58px!important;gap:8px;padding-left:8px;padding-right:8px}
#kok-game>.kg-leaderboard .kg-board-columns{font-size:12px!important}
#kok-game>.kg-leaderboard .kg-board-rows li{min-height:36px!important;font-size:14px!important}
#kok-game>.kg-leaderboard .kg-board-rows li span{white-space:nowrap}
#kok-game>.kg-leaderboard .kg-board-rows li span:nth-child(2){overflow:hidden;text-overflow:ellipsis}
#kok-game>.kg-leaderboard .kg-rank-crown{width:13px;height:13px;flex-basis:13px}
#kok-game .kg-frame:not(.kg-expanded){max-width:100%!important}
#kok-game .kg-center{gap:12px;padding:16px;overflow:auto}
#kok-game .kg-primary{font-size:24px!important;line-height:1.2;padding:12px 30px;border-radius:32px;gap:10px}
#kok-game .kg-secondary{font-size:14px!important;padding:9px 20px;line-height:1.3}
#kok-game .kg-center>.kg-message{font-size:14px!important;padding:7px 12px;line-height:1.4;max-width:90%}
#kok-game .kg-frame:not([data-state="playing"]) .kg-controls,#kok-game .kg-frame:not([data-state="playing"]) .kg-hint{visibility:hidden}
#kok-game .kg-hud{width:min(340px,calc(100% - 110px));height:44px;font-size:12px}
#kok-game .kg-hud strong{font-size:18px}
#kok-game .kg-record-entry{max-height:calc(100dvh - 24px);padding:12px 18px}
#kok-game .kg-record-entry img{height:44px}
#kok-game .kg-record-entry h3{font-size:21px}
#kok-game .kg-record-entry label{margin-top:10px}
}
@media(max-width:1023px) and (orientation:landscape){#kok-game .kg-frame:not(.kg-expanded){aspect-ratio:16/9;min-height:260px}#kok-game .kg-frame.kg-expanded{width:100%;height:100dvh;max-width:none!important}#kok-game .kg-record-entry{width:340px}#kok-game .kg-record-entry .kg-entry-status{min-height:16px;margin:4px 0}}

/* Game-over video skip action */
.kg-video .kg-video-skip{position:absolute;z-index:2;top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:100px;min-height:44px;padding:10px 18px;border:1px solid #ffffff80;border-radius:999px;background:#08162ccc;color:#fff;font-family:SUIT,sans-serif;font-size:15px;font-weight:800;line-height:1.2;cursor:pointer;touch-action:manipulation}.kg-video .kg-video-skip:hover{background:#0b50cc}.kg-video .kg-video-skip:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Mobile visual viewport fallback and native fullscreen */
@media (max-width:1023px), (pointer:coarse){#kok-game .kg-frame.kg-expanded{position:fixed!important;inset:auto!important;top:var(--kg-vtop,0px)!important;left:var(--kg-vleft,0px)!important;width:var(--kg-vw,100vw)!important;height:var(--kg-vh,100dvh)!important;max-width:none!important;min-height:0!important;margin:0!important;border-radius:0;z-index:10000;aspect-ratio:auto}}
#kok-game .kg-frame:fullscreen{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;border-radius:0;aspect-ratio:auto;background:#154984}#kok-game .kg-frame:-webkit-full-screen{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;border-radius:0}

/* Above-court personal and club rankings */
#kok-game .kg-ranking-panels{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1200px;margin:0 auto 32px;align-items:stretch}
#kok-game .kg-ranking-panels .kg-leaderboard,#kok-game .kg-club-board{position:relative;inset:auto;transform:none;width:100%;max-width:none;margin:0;padding:22px;box-sizing:border-box;pointer-events:auto;border:2px solid #77c7ed;border-radius:16px;background:linear-gradient(145deg,#15335e,#081a33);color:#fff;box-shadow:0 5px 0 #2465a3}
#kok-game .kg-ranking-panels header{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px}#kok-game .kg-ranking-panels h3{font:800 22px SUIT,sans-serif;color:#a2e5ff;margin:0}
#kok-game .kg-ranking-panels .kg-board-columns{font-size:12px}#kok-game .kg-ranking-panels .kg-board-rows li{min-height:40px;font-size:15px;grid-template-columns:60px minmax(0,1fr) 80px}#kok-game .kg-ranking-panels .kg-board-rows li span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#kok-game .kg-ranking-panels .kg-board-note{display:block;font-size:12px;line-height:1.6;margin:16px 0 0;color:#94b6d1}
#kok-game .kg-club-board nav{display:flex;gap:6px;margin-bottom:12px}#kok-game .kg-club-board button{flex:1;padding:10px 4px;border:1px solid #6094b9;border-radius:5px;background:transparent;color:#b6d5ea;font:700 13px SUIT,sans-serif;cursor:pointer}#kok-game .kg-club-board button[aria-pressed=true]{background:#0b50cc;color:#fff;border-color:#5cbaff}
#kok-game .kg-club-board ol{list-style:none;margin:0;padding:0;max-height:256px;overflow:auto}#kok-game .kg-club-board li{display:grid;grid-template-columns:42px minmax(0,1fr) 85px;gap:8px;align-items:center;min-height:42px;border-bottom:1px solid #ffffff25;font-size:14px}#kok-game .kg-club-board li span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#kok-game .kg-club-board li span:last-child{text-align:right;color:#a2e5ff;font-weight:800}#kok-game .kg-club-board .kg-my-club{background:#15518b}#kok-game .kg-club-note{font-size:12px;line-height:1.6;color:#94b6d1;margin:14px 0 0}
@media(max-width:700px){#kok-game .kg-ranking-panels{grid-template-columns:1fr;gap:18px;margin-bottom:24px}#kok-game .kg-ranking-panels .kg-leaderboard,#kok-game .kg-club-board{padding:16px}#kok-game .kg-ranking-panels h3{font-size:19px}}

/* Header visibility follows the viewport section, not a persistent game result state. */
html.kok-game-video .pc-header,html.kok-game-video .m-topbar,html.kok-game-video .m-bottom-nav{visibility:hidden!important;pointer-events:none!important;opacity:0!important}

html.kok-game-video .kg-ranking-panels{visibility:hidden!important;pointer-events:none!important}.kg-video{touch-action:none;overscroll-behavior:none}.kg-video:not([hidden]){position:fixed!important;inset:0!important;width:100%!important;height:100%!important;z-index:2147483647!important}.kg-video[hidden]{display:none!important}

#kok-game .kg-club-board li{padding:9px 14px;min-height:54px;box-sizing:border-box;grid-template-columns:62px minmax(0,1fr) 85px}#kok-game .kg-club-board li>span:first-child{display:flex;align-items:center;gap:5px}#kok-game .kg-club-board .kg-rank-crown{width:17px;height:17px;flex:0 0 17px}#kok-game .kg-club-board .kg-club-identity{display:flex;align-items:center;gap:9px;min-width:0}#kok-game .kg-club-identity img{width:32px;height:32px;border-radius:5px;object-fit:cover;flex:0 0 32px;background:#e9eff5}#kok-game .kg-club-identity b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}#kok-game .kg-club-board .kg-crown-1{color:#f6cf69}#kok-game .kg-club-board .kg-crown-2{color:#c6d8e8}#kok-game .kg-club-board .kg-crown-3{color:#dca078}@media(max-width:700px){#kok-game .kg-club-board li{padding:8px 10px;grid-template-columns:54px minmax(0,1fr) 66px;gap:6px}#kok-game .kg-club-identity img{width:28px;height:28px;flex-basis:28px}}

.kg-video-caption .kg-video-skip{position:fixed;pointer-events:auto}@media(min-width:1024px){.kg-video-caption{flex-direction:column;align-items:center;justify-content:flex-end;gap:16px}.kg-video-caption .kg-video-skip{position:static;inset:auto;flex:0 0 auto;transform:none}}

body #kok-game{background-color:#fff;background-image:linear-gradient(rgba(255,255,255,.98),rgba(255,255,255,.98)),url('/assets/redesign/assets/white.png');background-size:100% 100%,100% auto;background-position:center top;background-repeat:no-repeat,repeat-y}

/* Soft blue towel transition between the game and app introduction. */
.kok-game-app-divider{height:150px;width:100%;background:#0b50cc url('/assets/redesign/assets/blue-terry.png') center 48%/cover no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 70%,transparent 100%);pointer-events:none}@media(max-width:700px){.kok-game-app-divider{height:90px}}

.kok-game-app-divider{opacity:.8}

body #kok-game{padding-bottom:180px}body #kok-app{padding-top:240px}@media(max-width:1023px){body #kok-game{padding-bottom:150px}body #kok-app{padding-top:150px}}

/* Floating wink medallion, independent from the faded towel layer. */
body #kok-game{padding-bottom:234px}.kok-game-app-divider{position:relative;display:flex;align-items:center;justify-content:center;overflow:visible;background:none;opacity:1;-webkit-mask-image:none;mask-image:none}.kok-game-app-divider::before{content:'';position:absolute;inset:0;background:#0b50cc url('/assets/redesign/assets/blue-terry.png') center 48%/cover no-repeat;opacity:.8;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent)}.kok-divider-badge{position:relative;z-index:1;width:300px;height:300px;flex:0 0 auto;filter:drop-shadow(0 15px 15px #003e872b);animation:kok-badge-float 4.5s ease-in-out infinite}.kok-divider-badge img{display:block;width:100%;height:100%;object-fit:contain}.kok-divider-badge::after{content:'';position:absolute;inset:8%;border-radius:50%;background:linear-gradient(115deg,transparent 30%,#ffffff60 48%,transparent 62%);mix-blend-mode:screen;opacity:0;animation:kok-badge-shine 6s ease-in-out infinite;pointer-events:none}@keyframes kok-badge-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(1deg)}}@keyframes kok-badge-shine{0%,65%,100%{opacity:0}78%{opacity:.5}}@media(max-width:1023px){body #kok-game{padding-bottom:195px}}@media(max-width:700px){.kok-divider-badge{width:210px;height:210px}}@media(prefers-reduced-motion:reduce){.kok-divider-badge,.kok-divider-badge::after{animation:none}}

/* More breathing room around the towel medallion. */
body #kok-game{padding-bottom:351px}body #kok-app{padding-top:360px}@media(max-width:1023px){body #kok-game{padding-bottom:292.5px}body #kok-app{padding-top:225px}}

/* Scroll-triggered rolling ring, followed by the mascot reveal. */
body #kok-game{padding-bottom:526.5px}body #kok-app{padding-top:540px}.kok-game-app-divider{overflow:clip;overflow-clip-margin:130px}.kok-divider-badge.kok-roll-badge{animation:none;filter:drop-shadow(0 15px 15px #003e872b)}.kok-roll-badge::after{display:none}.kok-badge-ring{position:absolute;inset:5%;border-radius:50%;box-sizing:border-box;border:12px solid #0873ef;background:radial-gradient(circle at 35% 26%,#fff 20%,#eef7ff 62%,#b4d2ef);box-shadow:inset 0 5px 12px #00459865,0 0 0 3px #8fdfff,inset 0 -3px 4px #fff,0 9px 0 #034caf,0 14px 22px #034b8830;opacity:0;transform:translateX(calc(-50vw - 180px)) rotate(-540deg)}.kok-badge-ring::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:3px solid transparent;border-top-color:#d7faff;border-left-color:#65c4ff;filter:blur(.5px)}.kok-roll-badge .kok-badge-character{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;opacity:0;transform:translateY(55px) scale(.15);transform-origin:50% 80%;filter:drop-shadow(0 4px 2px #00377522)}.is-revealed .kok-badge-ring{animation:kok-ring-roll 1.35s cubic-bezier(.2,.65,.25,1) both}.is-revealed .kok-badge-character{animation:kok-character-pop .65s cubic-bezier(.2,.8,.3,1) 1.28s both}@keyframes kok-ring-roll{0%{opacity:0;transform:translateX(calc(-50vw - 180px)) rotate(-540deg)}8%{opacity:1}82%{opacity:1;transform:translateX(12px) rotate(10deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}@keyframes kok-character-pop{0%{opacity:0;transform:translateY(55px) scale(.15)}50%{opacity:1;transform:translateY(-12px) scale(1.08)}75%{opacity:1;transform:translateY(4px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:1023px){body #kok-game{padding-bottom:438.75px}body #kok-app{padding-top:337.5px}}@media(prefers-reduced-motion:reduce){.kok-badge-ring,.kok-roll-badge .kok-badge-character{animation:none!important;opacity:1;transform:none}}

/* Brief centered reveal, then release scrolling. */
body #kok-app{padding-top:526.5px}.is-revealed .kok-badge-ring{animation-duration:.75s}.is-revealed .kok-badge-character{animation-duration:.45s;animation-delay:.7s}@media(max-width:1023px){body #kok-app{padding-top:438.75px}}

#kok-game .kg-club-picker{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:1200px;margin:0 auto 18px;font:700 15px SUIT,sans-serif;color:#183b71}#kok-game .kg-club-picker[hidden]{display:none}#kok-game .kg-club-picker select{min-height:44px;padding:10px 32px 10px 12px;max-width:100%;border:1px solid #b9cce3;border-radius:5px;background:white;color:#183b71;font:inherit}#kok-game .kg-club-picker small{font-size:12px;font-weight:500;color:#687b8c}

#kok-game .kg-club-picker select[aria-invalid=true]{border-color:#e45d64;outline:3px solid #e45d6426;outline-offset:2px}

/* Sculpted game keycaps below the action artwork. */
.kg-control-unit{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px}.kg-control-key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:64px;padding:6px 10px;border:2px solid #a9e8ff;border-radius:12px;background:linear-gradient(180deg,#56c9fb 0%,#137bd5 54%,#0d52a4 100%);box-shadow:inset 0 2px 2px #ffffffaa,0 4px 0 #073771,0 5px 10px #001b4e66;color:#fff;text-shadow:0 2px 1px #063568;font-family:SUIT,sans-serif;text-align:center;white-space:nowrap;box-sizing:border-box}.kg-control-key b{font-size:14px;line-height:1.1;font-weight:900;letter-spacing:.04em}.kg-control-key small{font-size:10px;line-height:1.2;color:#d8f5ff;font-weight:700}.kg-actions .kg-control-unit:last-child .kg-control-key{border-color:#ffd1e7;background:linear-gradient(#ffadd8,#e6509b 55%,#a52d71);box-shadow:inset 0 2px 2px #fff9,0 4px 0 #68204e,0 5px 10px #001b4e66;text-shadow:0 2px 1px #6c164a}#kok-game .kg-controls .kg-actions{align-items:flex-end}#kok-game .kg-hint{display:none}@media(max-width:1023px) and (pointer:coarse){.kg-control-key{display:none}.kg-control-unit{gap:0}}

/* Align label and number optically within the scoreboard. */
#kok-game .kg-hud>span{height:32px;top:50%;line-height:1;align-items:center;transform:translate(-50%,-50%);font-size:16px}#kok-game .kg-hud>span strong{display:flex;align-items:center;justify-content:center;height:32px;line-height:1;font-size:24px;transform:translateY(-1px)}@media(max-width:1023px){#kok-game .kg-hud>span{height:24px;font-size:12px}#kok-game .kg-hud>span strong{height:24px;font-size:18px}}

/* Approved hand-position start artwork, with a real accessible START hit target. */
.kg-hand-guide{display:none}#kok-game .kg-frame[data-state=ready] .kg-center{padding:0;gap:0;overflow:hidden;background:#102955;z-index:3}#kok-game .kg-frame[data-state=ready] .kg-hand-guide{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}#kok-game .kg-frame[data-state=ready] .kg-center>.kg-message{display:none}#kok-game .kg-frame[data-state=ready] .kg-primary{position:absolute;left:38%;top:77.5%;width:24%;height:14%;padding:0;margin:0;border:0;border-radius:999px;background:transparent!important;box-shadow:none!important;transform:none!important;color:transparent!important;z-index:2}#kok-game .kg-frame[data-state=ready] .kg-primary>*{visibility:hidden}#kok-game .kg-frame[data-state=ready] .kg-primary:focus-visible{outline:3px solid white;outline-offset:4px}#kok-game .kg-frame[data-state=ready] .kg-primary:disabled{background:#09254e88!important}#kok-game .kg-frame[data-state=ready] .kg-center.kg-start-error>.kg-message{display:block;position:absolute;top:3%;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;z-index:4;text-align:center;font-size:14px}#kok-game .kg-frame[data-state=ready] .kg-hud{visibility:hidden}

#kok-game .kg-frame[data-state=ready] .kg-secondary:not([hidden]){position:absolute;right:16px;top:16px;z-index:4;background:#092d60d9;color:#fff;border:1px solid #94dfff;padding:9px 16px}

/* Arcade countdown before the first serve. */
.kg-countdown{display:none;position:absolute;inset:0;z-index:4;align-items:center;justify-content:center;background:radial-gradient(ellipse,#07295c08,#07295c55);pointer-events:none}#kok-game .kg-frame[data-state=countdown] .kg-countdown{display:flex}.kg-countdown span{display:flex;align-items:center;justify-content:center;width:clamp(120px,20cqw,220px);height:clamp(120px,20cqw,220px);border-radius:50%;border:4px solid #a4efff;background:radial-gradient(circle at 35% 20%,#71e9ff,#188cf1 55%,#0754bb);box-shadow:inset 0 4px 5px #fff9,inset 0 -8px 12px #0745a877,0 9px 0 #053976,0 0 40px #51cbff99;color:#fff;font:900 clamp(70px,12cqw,150px)/1 SUIT,sans-serif;text-shadow:0 6px 0 #0753a2,0 10px 12px #02286566;letter-spacing:-.05em}.kg-countdown.is-go span{width:clamp(190px,30cqw,350px);border-radius:60px;font-size:clamp(60px,10cqw,120px);border-color:#fff2b3;background:linear-gradient(#ffe98a,#ffbe42 60%,#f18b24);box-shadow:inset 0 4px 5px #fff9,0 9px 0 #9b4e13,0 0 40px #ffd16c88;text-shadow:0 5px 0 #ba621c}#kok-game .kg-frame[data-state=countdown] .kg-pause{visibility:hidden}

/* Image countdown: identical centered sprite viewport for all four frames. */
#kok-game .kg-countdown{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;align-items:center;justify-content:center;box-sizing:border-box}#kok-game .kg-countdown span,#kok-game .kg-countdown.is-go span{display:block;position:relative;flex:0 0 auto;width:clamp(130px,24cqw,260px);height:clamp(130px,24cqw,260px);padding:0;margin:0;border:0;border-radius:0;box-shadow:none;text-shadow:none;background-image:url('countdown-sprites.png');background-size:200% 200%;background-repeat:no-repeat;background-color:transparent;color:transparent;font-size:0;line-height:0}#kok-game .kg-countdown span[data-step="3"]{background-position:0 0}#kok-game .kg-countdown span[data-step="2"]{background-position:100% 0}#kok-game .kg-countdown span[data-step="1"]{background-position:0 100%}#kok-game .kg-countdown span[data-step="GO!"]{background-position:100% 100%}

/* Only hide fixed site navigation while viewing the game section; keep page scrolling. */
html.kok-game-section-view .pc-header,html.kok-game-section-view .m-topbar,html.kok-game-section-view .m-bottom-nav{visibility:hidden!important;opacity:0!important;pointer-events:none!important;transform:translateY(-110%)!important}html.kok-game-section-view .m-bottom-nav{transform:translateY(110%)!important}

html.kok-game-section-view .global-my-club-fab,html.kok-game-section-view .global-chat-fab{visibility:hidden!important;opacity:0!important;pointer-events:none!important}

#kok-game .kg-frame.kg-touch-guide[data-state=ready] .kg-primary{left:35.5%;top:74.5%;width:29%;height:17%}

/* Glossy illustrated controls, shared with the touch instructions. */
#kok-game .kg-primary,#kok-game .kg-secondary{position:relative;flex-shrink:0;width:240px;height:120px;padding:0!important;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;color:transparent!important;text-shadow:none;font-size:0!important;overflow:hidden}
#kok-game .kg-primary>*{visibility:hidden}
#kok-game .kg-primary::after,#kok-game .kg-secondary::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:url('ui-glossy-sprites.png');background-repeat:no-repeat;background-size:300% 583.256%;background-position:0 12.03%}
#kok-game .kg-primary[data-ui=resume]::after{background-position:50% 12.03%}
#kok-game .kg-primary[data-ui=retry]::after{background-position:100% 12.03%}
#kok-game .kg-secondary{width:150px;height:75px}
#kok-game .kg-secondary::after{background-position:0 51.97%}
#kok-game .kg-frame[data-state=ready] .kg-secondary:not([hidden]){padding:0;border:0;background:transparent;color:transparent;width:120px;height:60px}
#kok-game .kg-controls button,#kok-game .kg-controls .kg-lift,#kok-game .kg-controls .kg-smash,#kok-game .kg-pause{background-image:url('ui-glossy-sprites.png')!important;background-size:300% 300%!important;background-repeat:no-repeat!important;background-color:transparent!important;border:0!important;box-shadow:none!important;color:transparent!important;width:90px;height:90px;transform:none}
#kok-game .kg-controls [data-input=left]{background-position:100% 50%!important}
#kok-game .kg-controls [data-input=right]{background-position:0 100%!important}
#kok-game .kg-controls [data-input=lift]{background-position:50% 100%!important}
#kok-game .kg-controls [data-input=smash]{background-position:100% 100%!important}
#kok-game .kg-pause{background-position:50% 50%!important;width:54px;height:54px}
#kok-game .kg-controls button:active,#kok-game .kg-controls button.held{transform:translateY(2px);filter:brightness(1.12)}
#kok-game .kg-primary:focus-visible,#kok-game .kg-secondary:focus-visible{outline:3px solid #aeefff;outline-offset:2px}
@media(min-width:1024px) and (pointer:fine){
#kok-game .kg-controls button,#kok-game .kg-controls .kg-lift,#kok-game .kg-controls .kg-smash{width:66px;height:66px}
#kok-game .kg-pause{width:42px;height:42px}
#kok-game .kg-primary{width:190px;height:95px}
#kok-game .kg-secondary{width:120px;height:60px}
#kok-game .kg-control-key{min-width:54px;padding:4px 7px}.kg-control-key b{font-size:12px}.kg-control-key small{font-size:9px}
}
/* The guide already contains the approved START artwork; preserve its exact hit area. */
#kok-game .kg-frame[data-state=ready] .kg-primary::after{display:none}

/* Two bold lines flank the centered towel mascot, entering from the left in sequence. */
.kok-game-app-divider{overflow:visible}
.kok-divider-copy{position:absolute;left:0;width:100%;overflow:hidden;pointer-events:none;text-align:center;z-index:2;padding:8px 16px;box-sizing:border-box}
.kok-divider-copy-top{bottom:calc(50% + 170px)}
.kok-divider-copy-bottom{top:calc(50% + 170px)}
.kok-divider-copy span{display:block;margin:0;font-family:'SUIT Variable',SUIT,sans-serif;font-size:min(10.5vw,140px,13svh);font-weight:950;line-height:1.15;letter-spacing:-.065em;white-space:nowrap;color:#0755ef;opacity:0;transform:translateX(-105%)}
.kok-divider-copy-bottom span{color:transparent;-webkit-text-stroke:2px #0755ef}
.is-revealed .kok-divider-copy-top span{animation:kok-copy-enter .75s cubic-bezier(.16,1,.3,1) .12s both}
.is-revealed .kok-divider-copy-bottom span{animation:kok-copy-enter .75s cubic-bezier(.16,1,.3,1) .85s both}
@keyframes kok-copy-enter{from{opacity:0;transform:translateX(-105%)}to{opacity:1;transform:translateX(0)}}
@media(max-width:700px){.kok-divider-copy-top{bottom:calc(50% + 120px)}.kok-divider-copy-bottom{top:calc(50% + 120px)}.kok-divider-copy span{font-size:min(10.5vw,10svh)}.kok-divider-copy-bottom span{-webkit-text-stroke:1.3px #0755ef}}
@media(max-height:600px) and (orientation:landscape){.kok-divider-copy-top{bottom:calc(50% + 155px)}.kok-divider-copy-bottom{top:calc(50% + 155px)}.kok-divider-copy span{font-size:min(9vw,9svh)}}
@media(prefers-reduced-motion:reduce){.kok-divider-copy span{animation:none!important;opacity:1;transform:none}}

/* Paint the outline first, then fill overlapping glyph strokes cleanly. */
.kok-divider-copy-bottom span{color:#fff;-webkit-text-fill-color:#fff;-webkit-text-stroke:2px #0755ef;paint-order:stroke fill}
@media(max-width:700px){.kok-divider-copy-bottom span{-webkit-text-stroke-width:1.3px}}

/* Large left headline, right-aligned outline-and-solid closing line. */
.kok-divider-copy{padding-inline:clamp(20px,5vw,100px)}
.kok-divider-copy-top{text-align:left}
.kok-divider-copy-top span{font-size:min(12.5vw,172px,16svh)}
.kok-divider-copy-bottom{text-align:right}
.kok-divider-copy-bottom span{font-size:min(8.2vw,118px,12svh);-webkit-text-stroke:0;color:#0755ef;-webkit-text-fill-color:initial}
.kok-divider-copy-bottom em{font-style:normal}
.kok-divider-copy-bottom .kok-copy-outline{color:#fff;-webkit-text-fill-color:#fff;-webkit-text-stroke:2px #0755ef;paint-order:stroke fill}
.kok-divider-copy-bottom .kok-copy-filled{color:#0755ef;-webkit-text-fill-color:#0755ef;-webkit-text-stroke:0}
@media(max-width:700px){.kok-divider-copy-top span{font-size:min(12vw,12svh)}.kok-divider-copy-bottom span{font-size:min(8.2vw,10svh)}.kok-divider-copy-bottom .kok-copy-outline{-webkit-text-stroke-width:1.3px}}
@media(max-height:600px) and (orientation:landscape){.kok-divider-copy-top span{font-size:min(12vw,11svh)}.kok-divider-copy-bottom span{font-size:min(8.2vw,9svh)}}

/* Overlapping reveal: mascot (.70-1.15), headline (.95-1.70), closing (1.45-2.20). */
.kok-divider-copy-top span,.kok-divider-copy-bottom span{font-size:min(10.5vw,150px,16svh)}
.is-revealed .kok-divider-copy-top span{animation:kok-copy-enter .75s cubic-bezier(.16,1,.3,1) .95s both}
.is-revealed .kok-divider-copy-bottom span{animation:kok-copy-enter-right .75s cubic-bezier(.16,1,.3,1) 1.45s both}
@keyframes kok-copy-enter-right{from{opacity:0;transform:translateX(105%)}to{opacity:1;transform:translateX(0)}}
@media(max-width:700px){.kok-divider-copy-top span,.kok-divider-copy-bottom span{font-size:min(10.2vw,12svh)}}
@media(max-height:600px) and (orientation:landscape){.kok-divider-copy-top span,.kok-divider-copy-bottom span{font-size:min(10.5vw,11svh)}}
@media(prefers-reduced-motion:reduce){.is-revealed .kok-divider-copy span{animation:none!important;opacity:1;transform:none}}

.kok-divider-copy-top span,.kok-divider-copy-bottom span{font-size:min(12.5vw,172px,16svh)}
.kok-divider-copy-bottom span{white-space:normal;overflow-wrap:normal;text-wrap:balance}
.kok-divider-copy-bottom em{white-space:nowrap}
@media(max-width:700px){.kok-divider-copy-top span,.kok-divider-copy-bottom span{font-size:min(10.2vw,12svh)}}
@media(max-height:600px) and (orientation:landscape){.kok-divider-copy-top span,.kok-divider-copy-bottom span{font-size:min(10.5vw,11svh)}}

/* Fill the towel stripe first, then run the overlapping mascot and copy reveal. */
.kok-game-app-divider::before{clip-path:inset(0 100% 0 0)}
.kok-game-app-divider.is-revealed::before{animation:kok-stripe-fill .35s cubic-bezier(.2,.8,.3,1) both}
@keyframes kok-stripe-fill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.is-revealed .kok-badge-ring{animation-delay:.35s}
.is-revealed .kok-badge-character{animation-delay:1.05s}
.is-revealed .kok-divider-copy-top span{animation-delay:1.3s}
.is-revealed .kok-divider-copy-bottom span{animation-delay:1.8s}
@media(prefers-reduced-motion:reduce){.kok-game-app-divider::before,.kok-game-app-divider.is-revealed::before{animation:none;clip-path:none}}

/* The body emerges from inside the medallion; hands and feathers overlap its rim. */
.kok-character-window{position:absolute;inset:0;z-index:2;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 0 72%,transparent 72%),radial-gradient(ellipse 43% 42% at 50% 49%,#000 98%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0 72%,transparent 72%),radial-gradient(ellipse 43% 42% at 50% 49%,#000 98%,transparent 100%)}
.kok-roll-badge .kok-badge-character{transform:translateY(92%) scale(.72);transform-origin:50% 85%;opacity:0}
.is-revealed .kok-character-window .kok-badge-character{animation:kok-character-emerge .65s cubic-bezier(.2,.75,.25,1) 1.05s both}
@keyframes kok-character-emerge{0%{opacity:1;transform:translateY(92%) scale(.72)}75%{opacity:1;transform:translateY(-2%) scale(1.025)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.kok-roll-badge .kok-character-window .kok-badge-character{animation:none!important;opacity:1;transform:none}}

/* Club selection bar in the site's blue terry material. */
#kok-game .kg-club-picker{box-sizing:border-box;width:100%;max-width:1200px;min-height:64px;padding:10px 14px;gap:12px;border-radius:9px;color:#fff;background:linear-gradient(90deg,rgba(9,49,116,.68),rgba(10,62,138,.58)),url('/assets/redesign/assets/blue-terry.png') center 48%/cover no-repeat;box-shadow:inset 0 1px 0 #ffffff24}
#kok-game .kg-club-picker label{color:#fff;white-space:nowrap;font-weight:800}
#kok-game .kg-club-picker select{flex:0 1 190px;min-width:150px;background:#fff;color:#183b71;border-color:#c5d7ed}
#kok-game .kg-club-picker small{margin-left:auto;text-align:right;color:#fff;font-size:12px;line-height:1.5}
@media(max-width:640px){#kok-game .kg-club-picker{padding:12px;gap:9px}#kok-game .kg-club-picker select{flex:1;min-width:130px}#kok-game .kg-club-picker small{flex-basis:100%;text-align:right;font-size:11px}}

/* Match the scoreboard's cyan rim and blue lower edge. */
#kok-game .kg-club-picker,#kok-game .kg-frame{border:2px solid #8fd8ff;border-radius:16px;box-shadow:inset 0 1px 0 #ffffff38,0 5px 0 #266ab3,0 10px 24px #163d7818}
#kok-game .kg-frame{box-sizing:border-box}
/* Keep the expanded court flush with the display edges. */
#kok-game .kg-frame.kg-expanded,#kok-game .kg-frame:fullscreen,#kok-game .kg-frame:-webkit-full-screen{border:0;border-radius:0;box-shadow:none}

/* Use the actual blue towel material inside the filled lettering. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
.kok-divider-copy-top span,.kok-divider-copy-bottom .kok-copy-filled{background-color:#0755ef;background-image:linear-gradient(110deg,#0864ed18,#004bcb12),url('/assets/redesign/assets/blue-terry.png');background-position:center;background-size:auto,620px auto;background-repeat:repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:0}
.kok-divider-copy-bottom .kok-copy-filled{display:inline-block}
@media(max-width:700px){.kok-divider-copy-top span,.kok-divider-copy-bottom .kok-copy-filled{background-size:auto,360px auto}}
}

/* Compact arena ticker beneath the RALLY/BEST display. */
#kok-game .kg-tip-banner{position:absolute;top:calc(4% + 70px);left:50%;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:9px;max-width:88%;width:max-content;box-sizing:border-box;padding:6px 13px 6px 7px;border:1px solid #8bdaff;border-radius:999px;background:linear-gradient(180deg,#205b90ed,#0b2b54ef);box-shadow:inset 0 1px 0 #ffffff35,0 3px 0 #125393;color:#eafaff;pointer-events:none;font-family:'SUIT Variable',SUIT,sans-serif}
#kok-game .kg-tip-banner b{flex:none;font-size:10px;line-height:1;padding:4px 7px;border-radius:20px;background:linear-gradient(#fff0a4,#ffc44d);color:#704000;box-shadow:inset 0 1px 0 #fff9;font-weight:900;letter-spacing:.05em}
#kok-game .kg-tip-copy{display:block;min-width:0;font-size:clamp(9px,1.3cqw,13px);font-weight:700;line-height:1.4;white-space:nowrap}
#kok-game .kg-frame:not([data-state=playing]):not([data-state=paused]) .kg-tip-banner{display:none}
@media(max-width:1023px){#kok-game .kg-tip-banner{top:calc(4% + 55px);gap:6px;padding:4px 9px 4px 5px;max-width:94%}#kok-game .kg-tip-banner b{font-size:8px;padding:3px 5px}#kok-game .kg-tip-copy{font-size:clamp(8px,1.25cqw,11px)}}
@media(max-width:1023px) and (orientation:portrait){#kok-game .kg-tip-banner{display:none}}

/* Larger desktop controls with tighter key-label spacing. */
@media(min-width:1024px) and (pointer:fine){
#kok-game .kg-controls button,#kok-game .kg-controls .kg-lift,#kok-game .kg-controls .kg-smash{width:99px;height:99px}
#kok-game .kg-controls .kg-control-unit{gap:0}
#kok-game .kg-controls .kg-control-key{margin-top:-5px;position:relative}
}

#kok-game .kg-start-help{display:none;position:absolute;bottom:2%;left:50%;transform:translateX(-50%);z-index:3;white-space:nowrap;font:800 clamp(9px,1.55cqw,17px)/1.3 'SUIT Variable',SUIT,sans-serif;color:#e7f7ff;text-shadow:0 2px 3px #001f65;pointer-events:none}
#kok-game .kg-frame[data-state=ready] .kg-start-help{display:block}
#kok-game .kg-start-help kbd{font:inherit;color:#fff;padding:1px 5px;border:1px solid #a3ddff;border-radius:4px;background:linear-gradient(#2583d7,#11539c);box-shadow:0 2px 0 #07346d}

.kg-character-picker{display:flex;align-items:center;gap:20px;padding:14px 20px;margin:14px 0 20px;border:2px solid #80d8ff;border-radius:16px;background:linear-gradient(115deg,#07366bdd,#0864aec9),url('/assets/redesign/assets/blue-terry.png') center/500px;box-shadow:0 4px 0 #206da1,inset 0 1px 0 #ffffff66;color:#fff}.kg-character-picker>b{font-size:14px;white-space:nowrap}.kg-character-options{display:flex;gap:12px}.kg-character-options button{position:relative;display:flex;align-items:center;flex-direction:column;gap:4px;border:0;background:none;padding:0;color:#c5e8ff;cursor:pointer;font:inherit;font-size:11px;font-weight:800}.kg-character-options canvas{display:block;width:54px;height:54px;border:3px solid #90bfd8;border-radius:50%;background:radial-gradient(circle at 35% 20%,#fff,#c9ecff 56%,var(--skin-color));box-shadow:0 3px 0 #05234f,inset 0 1px 4px #fff;transition:transform .15s,border-color .15s}.kg-character-options button[aria-pressed=true]{color:#fff}.kg-character-options button[aria-pressed=true] canvas{border-color:#ffe47c;box-shadow:0 0 0 2px #1683dc,0 0 15px #5bcaff,0 4px 0 #05234f;transform:translateY(-3px)}.kg-character-options button:hover canvas{transform:translateY(-3px)}.kg-character-options button:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:40px}.kg-character-description{margin-left:auto;text-align:right;font-size:12px;color:#e0f1ff}@media(max-width:640px){.kg-character-picker{gap:10px;padding:12px;flex-wrap:wrap}.kg-character-picker>b{width:100%;font-size:12px}.kg-character-options{justify-content:space-between;width:100%;gap:8px}.kg-character-options canvas{width:48px;height:48px}.kg-character-description{width:100%;text-align:left;margin:0;font-size:11px}}@media(prefers-reduced-motion:reduce){.kg-character-options canvas{transition:none}}

/* One shared strip for club and character selection. */
.kg-game-settings{gap:16px;flex-wrap:wrap;padding:12px 18px}.kg-game-settings .kg-club-picker:not([hidden]){display:contents}.kg-game-settings .kg-club-picker[hidden]{display:none!important}.kg-game-settings .kg-club-picker>span{order:0;white-space:nowrap}.kg-game-settings .kg-club-picker>select{order:0;max-width:210px}.kg-game-settings .kg-club-picker>small{order:3;margin-left:auto;flex:1 1 180px;text-align:right}.kg-character-inline{display:contents}.kg-character-inline>b,.kg-character-inline>.kg-character-description,.kg-character-inline button>span{display:none}.kg-character-inline .kg-character-options{order:1;gap:10px;width:auto}.kg-character-inline .kg-character-options canvas{width:46px;height:46px}.kg-character-inline button{gap:0}@media(max-width:640px){.kg-game-settings{gap:10px;padding:12px}.kg-game-settings .kg-club-picker>select{max-width:180px;flex:1}.kg-character-inline .kg-character-options{width:auto;gap:9px}.kg-character-inline .kg-character-options canvas{width:40px;height:40px}.kg-game-settings .kg-club-picker>small{flex-basis:100%;text-align:left}}

.kg-character-options .kg-sponsor-badge{position:absolute;right:-12px;top:-15px;z-index:2;transform:rotate(10deg);white-space:nowrap;border-radius:4px;padding:3px 5px;background:linear-gradient(155deg,#64b5ff 0%,#1477f0 40%,#0645b2 100%);box-shadow:inset 0 1px 0 #ffffffaa,0 2px 3px #00174366;color:#fff;font:bold 9px/1 Arial,sans-serif;letter-spacing:.1px;pointer-events:none}.kg-game-settings{padding-top:20px}.kg-character-inline .kg-character-options{column-gap:12px}@media(max-width:640px){.kg-character-inline .kg-character-options{gap:9px}.kg-character-options .kg-sponsor-badge{right:-7px;font-size:8px;top:-13px}}

/* Keep the selection strip aligned with the ranking panels. */
#kok-game .kg-game-settings{width:100%;max-width:1200px;box-sizing:border-box;margin-left:auto;margin-right:auto;min-width:0}