/* The battle layout follows the owner's blue/red diagonal camera mockup and app typography. */
.kbb-lobby { position:fixed; inset:0; z-index:65; overflow:auto; overscroll-behavior:contain; background:var(--bg, #fffbed); color:var(--ink); font-family:var(--sans); padding:32px max(20px,env(safe-area-inset-right)) max(36px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.kbb-lobby[hidden], .kbb-arena[hidden], .kbb-hud[hidden], .kbb-result[hidden] { display:none; }
.kbb-lobby-inner { max-width:1240px; margin:auto; }
.kbb-lobby-head { display:flex; justify-content:space-between; gap:24px; align-items:center; padding-bottom:24px; border-bottom:2px solid var(--ink); }
.kbb-eyebrow { font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:0 0 8px; }
.kbb-lobby h1 { font-size:48px; line-height:1.08; margin:0; }
.kbb-lobby h2 { font-size:24px; line-height:1.15; margin:0; }
.kbb-lobby-grid { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:48px; padding-top:28px; }
.kbb-matchmaking { min-width:0; }
.kbb-intro { display:flex; align-items:center; gap:24px; margin-bottom:24px; }
.kbb-intro>img { width:144px; height:144px; object-fit:contain; flex:none; }
.kbb-intro p { max-width:45ch; font-size:15px; line-height:1.55; margin:8px 0 0; }
.kbb-intro .kbb-my-rating { font-family:var(--display); color:var(--blue-600,#007da7); }
.kbb-lobby fieldset { padding:0; margin:0 0 20px; border:0; min-width:0; }
.kbb-lobby legend { font-family:var(--display); font-size:16px; padding:0 0 10px; }
.kbb-genres { display:flex; gap:12px; overflow-x:auto; padding:4px 4px 10px; scrollbar-width:thin; }
.kbb-genre { flex:none; width:116px; height:84px; display:flex; align-items:flex-end; padding:0 8px 7px; font-family:var(--display); font-size:12px; color:var(--white); text-align:left; text-shadow:1px 2px 0 var(--ink),-1px -1px 0 var(--ink); background:var(--blue) center/cover; border:2px solid var(--ink); border-radius:12px; box-shadow:var(--shadow-sm); transition:transform .12s; }
.kbb-genre.on { outline:3px solid var(--blue); outline-offset:2px; }
.kbb-genre:active { transform:translate(2px,3px); }
.kbb-preflight-note, .kbb-camera-note { max-width:65ch; font-size:13px; line-height:1.5; margin:12px 0; color:var(--text-2); }
.kbb-camera-note { font-weight:700; }
.kbb-wait { display:flex; gap:16px; align-items:center; padding:24px 0 16px; }
.kbb-wait-title { font-size:28px!important; }
.kbb-wait-detail { margin:7px 0 0; font-size:14px; line-height:1.5; }
.kbb-wait-time { font-family:var(--display); font-size:28px; font-variant-numeric:tabular-nums; margin-left:auto; }
.kbb-wait-pulse { display:none; width:18px; height:18px; flex:none; background:var(--blue); border:2px solid var(--ink); border-radius:50%; }
.queuing .kbb-wait-pulse { display:block; animation:kbb-search 1.8s ease-in-out infinite; }
.kbb-queue-actions { display:flex; flex-wrap:wrap; gap:12px; }
.kbb-join { min-width:220px; padding:14px 24px; font-size:20px; }
.kbb-widen { display:flex; align-items:center; gap:8px; margin:20px 0 14px; font-size:15px; font-weight:700; min-height:44px; }
.kbb-widen input { width:20px; height:20px; accent-color:var(--blue); }
.kbb-bot { align-items:center; gap:8px; min-height:48px; }
.kbb-bot-note { font-size:12px; line-height:1.5; max-width:40ch; }
.kbb-error { background:var(--pale-yellow,#fff3bb); color:var(--ink); border:2px solid var(--ink); border-radius:12px; padding:12px 16px; font-weight:600; font-size:14px; line-height:1.5; }
.kbb-board { padding-top:8px; min-width:0; }
.kbb-board-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.kbb-board-heading h2 { font-size:24px; }
.kbb-board-content { font-size:14px; line-height:1.5; }
.kbb-board-list { padding:0; margin:0; list-style:none; }
.kbb-board-list li { display:flex; align-items:center; gap:12px; padding:14px 8px; border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent); }
.kbb-board-list li.you { background:var(--pale-yellow,#fff3bb); }
.kbb-board-rank { font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums; width:32px; flex:none; }
.kbb-board-name { flex:1; overflow-wrap:anywhere; min-width:0; }
.kbb-board-list strong { font-family:var(--display); font-weight:400; font-size:18px; font-variant-numeric:tabular-nums; }
.kbb-board-you { font-weight:700; padding:12px 0; }
.kbb-lobby button:focus-visible, .kbb-lobby input:focus-visible, .kbb-hud button:focus-visible, .kbb-result button:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }

/* Both cameras occupy the same canvas space. The clipping boundary IS server territory. */
.kbb-active { --kb-side:48px; }
.kbb-active .kb-cam { visibility:hidden; }
.kbb-arena { position:absolute; inset:0; z-index:1; overflow:hidden; --split-top:57%; --split-bottom:43%; }
.kbb-camera { position:absolute; inset:0; overflow:hidden;  }
.kbb-camera-a { background:#087aa3; clip-path:polygon(0 0,var(--split-top) 0,var(--split-bottom) 100%,0 100%); }
.kbb-camera-b { background:#b52c3b; clip-path:polygon(var(--split-top) 0,100% 0,100% 100%,var(--split-bottom) 100%); }
.kbb-camera video { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; opacity:.86; }
.kbb-camera-a video { object-position:25% center; }
.kbb-camera-b video { object-position:75% center; }
.kbb-camera video.local { transform:scaleX(-1); }
.kbb-camera::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,rgba(13,20,31,.65),transparent 50%,rgba(13,20,31,.6)),linear-gradient(90deg,rgba(0,182,243,.16),transparent); }
.kbb-camera-b::after { background:linear-gradient(0deg,rgba(13,20,31,.65),transparent 50%,rgba(13,20,31,.6)),linear-gradient(90deg,transparent,rgba(254,50,68,.16)); }
.kbb-camera-fallback { position:absolute; top:28%; width:50%; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:12px; color:var(--white); }
.kbb-camera-a .kbb-camera-fallback { left:0; }
.kbb-camera-b .kbb-camera-fallback { right:0; }
.kbb-camera-fallback p { font-family:var(--display); font-size:16px; }
.kbb-avatar { display:grid; place-items:center; border:3px solid var(--white); border-radius:50%; width:96px; height:96px; font-family:var(--display); font-size:54px; opacity:.7; }
.kbb-camera.has-video .kbb-camera-fallback { display:none; }
.kbb-camera.is-bird .kbb-avatar { width:160px; height:160px; border:0; border-radius:0; color:transparent; background:url('/static/img/bird-sing.png') center/contain no-repeat; opacity:1; }
.kbb-active.nocam .kb-vignette { background:radial-gradient(100% 70% at 50% 40%,transparent 30%,rgba(13,20,31,.55)); }
.kbb-hud { position:absolute; inset:0; z-index:38; pointer-events:none; color:var(--white); }
.kbb-player { position:absolute; top:max(24px,env(safe-area-inset-top)); display:flex; flex-direction:column; max-width:calc(50% - 142px); gap:4px; }
.kbb-player-a { left:max(32px,env(safe-area-inset-left)); }
.kbb-player-b { right:max(32px,env(safe-area-inset-right)); text-align:right; align-items:flex-end; }
.kbb-player-name { font-family:var(--display); font-size:24px; line-height:1.25; overflow-wrap:anywhere; text-shadow:2px 3px 0 var(--ink); }
.kbb-player-score { font-family:var(--display); font-size:88px; font-weight:400; line-height:1.1; font-variant-numeric:tabular-nums; text-shadow:3px 4px 0 var(--ink); }
.kbb-active .kb-yt { top:max(12px,env(safe-area-inset-top)); bottom:auto; left:50%; transform:translateX(-50%); }
.kbb-song-name { position:absolute; top:212px; left:25%; right:25%; text-align:center; font-size:12px; margin:6px 0 0; text-shadow:1px 2px 2px var(--ink); }
.kbb-active .kb-hud-left, .kbb-active .kb-end, .kbb-active .kb-timer { display:none; }
.kbb-active .kb-hud-right { position:absolute; top:230px; right:16px; }
.kbb-active .kb-lyrics { bottom:110px; left:60px; right:60px; }
.kbb-active .kb-birdwrap { bottom:110px; width:120px; }
.kbb-active .kb-bird { width:72px; }
.kbb-active #kb-bubble { max-width:min(300px,40vw); }
.kbb-status-group { position:absolute; bottom:76px; left:24px; right:190px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; line-height:1.4; }
.kbb-status-group:empty { display:none; }
.kbb-status-group>span:empty { display:none; }
.kbb-status-group>span { padding:4px 8px; border-radius:6px; background:rgba(13,20,31,.8); }
.kbb-status-group button { pointer-events:auto; padding:7px 10px; min-height:36px; font-size:12px; color:var(--white); background:rgba(13,20,31,.8); border:1px solid currentColor; border-radius:6px; }
/* The two clipped score traces belong to their actual territory halves. */
.kbb-power { --territory:50%; --energy-color:#e7faff; --energy-strength:.3; position:absolute; bottom:max(20px,env(safe-area-inset-bottom)); left:24px; right:24px; height:58px; overflow:hidden; border:3px solid #061d2b; border-radius:10px; background:#071c2b; box-shadow:0 0 0 2px #e9fbff,0 0 16px color-mix(in srgb,var(--energy-color) 70%,transparent),0 6px 20px #04131dcc,inset 0 0 0 2px #ffffff66; }
.kbb-power-side { position:absolute; top:0; bottom:0; overflow:hidden; }
.kbb-power-a { left:0; width:var(--territory); background:linear-gradient(0deg,#067798,#09b4dd 52%,#63e3fb); box-shadow:inset 0 0 16px #01d9ff,inset 0 2px 0 #c8faffaa; }
.kbb-power-b { right:0; width:calc(100% - var(--territory)); background:linear-gradient(0deg,#af153c,#f93657 52%,#ff8298); box-shadow:inset 0 0 16px #ff597e,inset 0 2px 0 #ffddedaa; }
.kbb-power-side canvas { position:absolute; inset:0; width:100%; height:100%; }
.kbb-power-center { position:absolute; top:0; bottom:0; left:var(--territory); width:3px; transform:translateX(-50%); background:#fffefa; box-shadow:0 0 5px 3px var(--energy-color),0 0 14px 7px var(--energy-color); }
.kbb-power::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:6px; box-shadow:inset 0 0 0 1px #ffffff88,inset 0 3px 8px #ffffff33,inset 0 -3px 8px #03182b44; }
.kbb-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.kbb-energy { position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; }
.kbb-frozen { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.86; }
.kbb-camera-a .kbb-frozen { object-position:25% center; }
.kbb-camera-b .kbb-frozen { object-position:75% center; }
.kbb-frozen.local { transform:scaleX(-1); }
.kbb-ended .kbb-camera.has-frozen .kbb-frozen { display:block; }
.kbb-ended .kbb-camera.has-frozen video,.kbb-ended .kbb-camera.has-frozen .kbb-camera-fallback { display:none; }
.kbb-player-score.unknown { font-family:var(--sans); font-size:48px; line-height:1.8; }
.kbb-forfeit { position:absolute; bottom:76px; right:24px; pointer-events:auto; min-height:40px; font-size:13px; }
.kbb-stamp { position:absolute; inset:0; display:grid; place-items:center; }
.kbb-stamp img { width:min(55vw,520px); animation:kbb-stamp .85s cubic-bezier(.18,.8,.25,1) forwards; }


.kbb-ended .kbb-forfeit, .kbb-ended .kbb-status-group, .kbb-ended .kb-yt, .kbb-ended .kb-hud, .kbb-ended .kb-birdwrap { visibility:hidden; }
.kbb-result { position:absolute; inset:0; z-index:72; overflow:auto; display:grid; align-items:center; justify-items:center; padding:32px 20px; color:var(--ink); background:rgba(13,20,31,.38); }
.kbb-result.after-ko { animation:kbb-result-in .35s .7s both; }
@keyframes kbb-result-in { from { opacity:0; } to { opacity:1; } }
@keyframes kbb-search { 0%,100% { transform:scale(.85); opacity:.6; } 50% { transform:scale(1); opacity:1; } }
@keyframes kbb-stamp { 0% { opacity:0; transform:scale(2) rotate(-10deg); } 35% { opacity:1; transform:scale(1) rotate(-4deg); } 80% { opacity:1; } 100% { opacity:0; transform:scale(1.1) rotate(-4deg); } }
@keyframes kbb-knocked-a { to { transform:translateX(-110%); } }
@keyframes kbb-knocked-b { to { transform:translateX(110%); } }
@media(max-width:900px) {
  .kbb-lobby-grid { grid-template-columns:minmax(0,1fr) 260px; gap:24px; }
  .kbb-lobby h1 { font-size:40px; }
  .kbb-intro { gap:12px; }
  .kbb-intro>img { width:112px; height:112px; }
  .kbb-player { max-width:calc(50% - 120px); }
  .kbb-player-name { font-size:18px; }
  .kbb-player-score { font-size:68px; }
  .kbb-player-a { left:20px; } .kbb-player-b { right:20px; }
}
@media(max-width:680px) {
  .kbb-lobby { padding-top:20px; }
  .kbb-lobby-head { align-items:flex-start; gap:12px; }
  .kbb-lobby h1 { font-size:32px; }
  .kbb-lobby-head .btn { font-size:12px; padding:9px; min-height:44px; }
  .kbb-lobby-grid { grid-template-columns:1fr; gap:32px; }
  .kbb-intro { align-items:flex-start; }
  .kbb-intro>img { width:80px; height:80px; }
  .kbb-intro h2 { font-size:22px; }
  .kbb-intro p { font-size:13px; }
  .kbb-join { width:100%; }
  .kbb-board { border-top:2px solid var(--ink); padding-top:24px; }
  .kbb-result-inner { padding:24px 16px; }
  .kbb-result-title { font-size:26px; }
}
@media(max-width:680px) and (orientation:portrait) {
  
  .kbb-player { top:max(20px,env(safe-area-inset-top)); max-width:44%; }
  .kbb-player-score { font-size:60px; }
  .kbb-player-name { font-size:16px; }
  .kbb-player-a { left:16px; } .kbb-player-b { right:16px; }
  .kbb-active .kb-yt { top:auto; bottom:76px; left:16px; transform:none; }
  .kbb-song-name { top:134px; left:16px; right:16px; font-size:11px; }
  .kbb-active .kb-hud-right { top:166px; left:16px; right:16px; max-width:none; justify-content:center; }
  .kbb-active .kb-chip { font-size:11px; padding:3px 8px; }
  .kbb-active .kb-lyrics { top:52%; bottom:290px; left:16px; right:16px; }
  .kbb-active .kb-line-now { font-size:24px; } .kbb-active .kb-line-next { font-size:15px; }
  .kbb-active .kb-birdwrap { bottom:132px; width:96px; right:12px; }
  .kbb-active #kb-bubble { max-width:calc(100vw - 40px); }
  .kbb-power { left:12px; right:12px; height:32px; }
  .kbb-status-group { left:228px; right:12px; bottom:124px; gap:6px; font-size:10px; }
  .kbb-status-group button { min-height:36px; font-size:10px; padding:6px; }
  .kbb-forfeit { right:12px; bottom:76px; width:calc(100% - 240px); min-height:44px; padding:8px 4px; font-size:11px; }
  .kbb-avatar { width:68px; height:68px; font-size:38px; }
  .kbb-camera.is-bird .kbb-avatar { width:104px; height:104px; }
}
@media(max-height:600px) and (orientation:landscape) {
  
  .kbb-active .kb-yt { left:12px; top:auto; bottom:66px; transform:none; }
  .kbb-player { top:12px; max-width:40%; }
  .kbb-player-score { font-size:48px; }
  .kbb-player-name { font-size:16px; }
  .kbb-song-name { top:12px; left:32%; right:32%; }
  .kbb-active .kb-hud-right { top:82px; right:12px; }
  .kbb-active .kb-lyrics { left:228px; right:24px; top:60%; bottom:110px; }
  .kbb-active .kb-line-now { font-size:23px; } .kbb-active .kb-line-next { font-size:15px; }
  .kbb-active .kb-birdwrap { display:none; }
  .kbb-status-group { left:228px; bottom:69px; }
  .kbb-forfeit { bottom:67px; right:12px; }
  .kbb-power { bottom:16px; left:12px; right:12px; height:32px; }
}
@media(prefers-reduced-motion:reduce) {
  .kbb-lobby *, .kbb-arena *, .kbb-hud *, .kbb-result * { animation:none!important; transition:none!important; }
  .kbb-stamp img { display:none; }
}

/* Owner's latest size request: halve each current player dimension, keeping 16:9. */
.kbb-active .kb-yt,.kbb-active.timing-only .kb-yt { --kb-yt-w:178px; --kb-yt-h:100.125px; width:178px; height:100.125px; aspect-ratio:16/9; }
.kbb-active .kb-score-history { display:none; }
.kbb-player { max-width:calc(50% - 110px); }
.kbb-song-name { top:118px; left:28%; right:28%; }
.kbb-active .kb-hud-right { top:204px; }
.kbb-status-group,.kbb-forfeit { bottom:96px; }
.kbb-active .kb-lyrics,.kbb-active .kb-birdwrap { bottom:146px; }
.kbb-power { height:58px; }
@media(max-width:680px) and (orientation:portrait) {
 .kbb-active .kb-yt,.kbb-active.timing-only .kb-yt { --kb-yt-w:100px; --kb-yt-h:56.25px; width:100px; height:56.25px; bottom:96px; }
 .kbb-player { max-width:44%; }
 .kbb-song-name { top:134px; left:16px; right:16px; }
 .kbb-active .kb-hud-right { top:162px; }
 .kbb-status-group { left:132px; right:12px; bottom:144px; }
 .kbb-forfeit { right:12px; bottom:96px; width:calc(100% - 148px); }
 .kbb-active .kb-lyrics { top:auto; bottom:210px; height:96px; }
 .kbb-active .kb-birdwrap { bottom:182px; }
 .kbb-power { height:52px; }
}
@media(max-height:600px) and (orientation:landscape) {
 .kbb-active .kb-yt,.kbb-active.timing-only .kb-yt { --kb-yt-w:100px; --kb-yt-h:56.25px; width:100px; height:56.25px; bottom:88px; }
 .kbb-player { max-width:40%; }
 .kbb-song-name { top:12px; left:32%; right:32%; }
 .kbb-active .kb-hud-right { top:80px; }
 .kbb-status-group { left:132px; bottom:90px; }
 .kbb-forfeit { bottom:88px; }
 .kbb-active .kb-lyrics { left:132px; top:auto; bottom:144px; height:66px; }
 .kbb-power { height:46px; }
}
@media(prefers-reduced-motion:reduce) { .kbb-power,.kbb-power * { animation:none!important;transition:none!important; } }
/* Matchmaking lives in a dismissible dialog over the song picker. */
.kbb-lobby { display:grid; place-items:center; padding:24px; background:#061c32a6; backdrop-filter:blur(5px); }
.kbb-lobby-inner { width:min(1180px,100%); max-height:calc(100svh - 48px); overflow:auto; overscroll-behavior:contain; margin:0; padding:28px 32px; background:var(--bg,#fffbed); border:3px solid var(--ink); border-radius:24px; box-shadow:0 12px 0 #05172366; }
.kbb-lobby-head { gap:16px; padding-bottom:18px; }.kbb-lobby h1 { font-size:36px; }
.kbb-lobby-grid { gap:28px; padding-top:22px; }.kbb-intro>img { width:104px; height:104px; }
@media(max-width:680px) { .kbb-lobby { padding:12px; }.kbb-lobby-inner { max-height:calc(100svh - 24px); padding:20px 16px; border-radius:18px; }.kbb-lobby h1 { font-size:28px; }.kbb-lobby-grid { gap:24px; }.kbb-intro>img { width:70px; height:70px; } }
/* Frame each decoded singer inside their own territory, including frozen result frames. */
.kbb-camera-a video,.kbb-camera-a .kbb-frozen { left:0; right:auto; width:var(--split-top); object-position:center; }
.kbb-camera-b video,.kbb-camera-b .kbb-frozen { left:var(--split-bottom); right:auto; width:calc(100% - var(--split-bottom)); object-position:center; }
.kbb-camera-a .kbb-camera-fallback { left:0; width:var(--split-top); }
.kbb-camera-b .kbb-camera-fallback { left:var(--split-bottom); right:auto; width:calc(100% - var(--split-bottom)); }

/* A matched rival appears immediately, before the chart/player/capture promises resolve. */
.kbb-population { margin:12px 0; padding:10px 12px; border-radius:10px; background:#d9f4df; color:#174b2a; font-size:13px; font-weight:650; }
.kbb-match-intro { position:absolute; inset:0; z-index:71; display:grid; place-items:center; overflow:auto; padding:24px; color:var(--ink); background:rgba(6,18,32,.78); backdrop-filter:blur(8px); }
.kbb-match-intro[hidden] { display:none; }
.kbb-intro-card { width:min(620px,100%); margin:auto; padding:28px; border:3px solid var(--ink); border-radius:26px; background:#fff; text-align:center; box-shadow:8px 9px 0 rgba(0,0,0,.3); animation:kbb-intro-in .28s ease-out; }
.kbb-intro-card h2 { font-size:30px; margin:4px 0 24px; }
.kbb-intro-players { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:20px; }
.kbb-intro-players>div { min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px; }
.kbb-intro-players strong { font-size:21px; line-height:1.2; overflow-wrap:anywhere; }
.kbb-intro-players small { font-size:14px; }
.kbb-intro-players>b { font:italic 24px var(--display); }
.kbb-intro-avatar { width:96px; height:96px; display:grid; place-items:center; border:3px solid var(--ink); border-radius:24px; background:#25c6ff; color:#082e49; font:42px var(--display); box-shadow:4px 5px 0 var(--ink); }
[data-side="b"] .kbb-intro-avatar { background:#ff6d64; color:#591517; }
.kbb-intro-avatar img { width:90%; height:90%; object-fit:contain; }
.kbb-intro-song { font-family:var(--display); margin:24px 0 16px; }
.kbb-intro-status { min-height:44px; font-size:14px; line-height:1.5; margin:18px 0; }
.kbb-intro-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.kbb-active #kb-ready { visibility:hidden; pointer-events:none; }
@keyframes kbb-intro-in { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@media(max-width:520px) { .kbb-match-intro {padding:16px;}.kbb-intro-card{padding:22px 16px;}.kbb-intro-players{gap:12px;}.kbb-intro-avatar{width:74px;height:74px;font-size:32px;border-radius:18px;}.kbb-intro-players strong{font-size:18px;}.kbb-intro-card h2{font-size:26px;} }
@media(prefers-reduced-motion:reduce) { .kbb-intro-card{animation:none;} }

.kbb-match-intro.music-intro { background:rgba(6,18,32,.56); }
.kbb-match-intro.music-intro .kbb-intro-card { background:#fff; }
.kbb-match-intro.music-intro .kbb-intro-status { font-weight:650; }
.kbb-active .kb-song-cue { top:35%; }
@media(max-width:520px) { .kbb-active .kb-song-cue { top:29%; } }

/* Deliberate modal hierarchy: one main action, shared white surfaces, reachable close. */
.kbb-lobby-inner,.kbb-intro-card { background:#fff; }
.kbb-close { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:0; border-radius:8px; color:var(--ink); background:transparent; font:26px/1 var(--sans); box-shadow:none; cursor:pointer; }
.kbb-close:hover { background:color-mix(in srgb,var(--blue) 12%,white); }.kbb-close:active { background:color-mix(in srgb,var(--blue) 24%,white); }
.kbb-close:focus-visible,.kbb-forfeit-confirm button:focus-visible,.kbb-intro-actions button:focus-visible { outline:3px solid #007da7; outline-offset:4px; }
.kbb-queue-actions .kbb-join { width:100%; min-height:60px; padding:16px 24px; color:var(--ink); background:var(--blue,#00b6f3); border:2px solid var(--ink); font-size:22px; box-shadow:0 5px 0 var(--ink); }
.kbb-queue-actions .kbb-join:disabled { opacity:.45; }
.kbb-board-content { margin-top:16px; }
.kbb-board-list li { display:grid; grid-template-columns:30px 34px minmax(0,1fr) auto; gap:9px; }
.kbb-board-list .kbr-badge { width:34px; height:34px; }
.kbb-board-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kbb-status-group button,.kbb-forfeit { min-height:44px; border:2px solid #171717; border-radius:10px; color:#171717; background:#fff; box-shadow:0 3px 0 #171717; font:700 13px var(--sans); }
.kbb-status-group .kbb-mute { display:inline-flex; gap:8px; align-items:center; padding:9px 14px; }
.kbb-mute>span:first-child { font-size:18px; line-height:1; }
.kbb-status-group .kbb-mute[aria-pressed="true"] { color:#fff; background:#171717; border-color:#fff; box-shadow:0 3px 0 #171717; }
.kbb-forfeit-confirm { position:fixed; width:min(440px,calc(100vw - 32px)); max-width:none; padding:30px; margin:auto; color:var(--ink); background:#fff; border:3px solid var(--ink); border-radius:22px; box-shadow:0 8px 0 #171717; font-family:var(--sans); }
.kbb-forfeit-confirm::backdrop { background:rgba(8,21,31,.66); }
.kbb-forfeit-confirm .kbb-close { position:absolute; top:16px; right:16px; }
.kbb-forfeit-confirm .kbb-eyebrow { padding-right:48px; margin-bottom:20px; }
.kbb-forfeit-confirm h2 { margin:0 0 12px; font:30px/1.15 var(--display); }
.kbb-leave-detail { margin:0 0 28px; max-width:34ch; font-size:15px; line-height:1.6; }
.kbb-leave-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kbb-leave-actions .btn { min-height:48px; padding:12px 10px; font-size:14px; }
.kbb-leave-actions .primary,.kbb-intro-actions .primary { color:var(--ink); background:var(--blue,#00b6f3); }
.kbb-intro-loader { display:none; width:32px; height:32px; border:3px solid #d5edf5; border-top-color:#007da7; border-radius:50%; margin:24px auto 0; }
.kbb-match-intro[data-busy="true"] .kbb-intro-loader { display:block; animation:kb-prepare-spin .9s linear infinite; }
.kbb-intro-status { margin:18px auto 24px; max-width:40ch; min-height:24px; }
.kbb-intro-actions { gap:12px; }
.kbb-intro-actions .btn { min-height:46px; }
.kbb-result-inner { position:relative; width:min(620px,100%); padding:32px; border:3px solid var(--ink); border-radius:24px; background:#fff; text-align:left; }
.kbb-result-exit { position:absolute; right:18px; top:18px; }
.kbb-result-heading { display:flex; align-items:center; gap:20px; padding-right:30px; }
.kbb-result-art { width:124px; height:124px; object-fit:contain; flex:none; }
.kbb-result-title:focus { outline:none; }
.kbb-result-title { margin:0 0 10px; font:34px/1.12 var(--display); }
.kbb-result-reason { margin:0; font-size:14px; line-height:1.55; }
.kbb-final-scores { display:grid; grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); align-items:center; gap:16px; margin:28px 0; text-align:center; }
.kbb-final-scores>div { display:grid; gap:5px; min-width:0; padding:16px 12px; border-radius:14px; background:#eff9fc; color:#006985; }
.kbb-final-scores>[data-side="b"] { background:#fff1f2; color:#b3263a; }
.kbb-final-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:800; }
.kbb-final-score { font:52px/1.12 var(--display); font-variant-numeric:tabular-nums; }
.kbb-final-label { font-size:11px; font-weight:700; }
.kbb-final-scores .is-winner .kbb-final-label { color:var(--ink); }
.kbb-final-scores>b { font:14px var(--display); }
.kbb-rating-result { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:6px 12px; padding:20px 0; border-top:1px solid #d5dde1; border-bottom:1px solid #d5dde1; }
.kbb-rating-label { font-size:14px; font-weight:700; }
.kbb-rating-result>strong { font:30px/1.1 var(--display); font-variant-numeric:tabular-nums; }
.kbb-rating-delta { font-size:13px; font-weight:800; }
.kbb-rating-delta[data-direction="up"] { color:#16703a; }.kbb-rating-delta[data-direction="down"] { color:#b3263a; }
.kbb-result-board { grid-column:1/-1; margin:0; font-size:12px; color:#53616b; }
.kbb-result-actions { display:grid; grid-template-columns:1.2fr 1fr; gap:12px; margin-top:24px; }
.kbb-result-actions .btn { min-height:52px; padding:12px; font-size:15px; }
.kbb-result-actions .kbb-again { color:var(--ink); background:var(--blue,#00b6f3); }
.kbb-result-actions .kbb-analysis:disabled { opacity:.45; }
.kbb-result-footer { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:18px; }
.kbb-result-save { flex-basis:100%; margin:0; font-size:12px; line-height:1.5; color:#53616b; }
.kbb-result-footer button { min-height:36px; padding:4px 0; border:0; color:#006985; background:none; text-decoration:underline; text-underline-offset:3px; font:700 13px var(--sans); }

/* Untimed lyrics remain readable in the real embedded video. */
.kbb-active.lyrics-video .kb-yt { --kb-yt-w:480px; --kb-yt-h:270px; width:480px; height:270px; top:20px; bottom:auto; left:50%; transform:translateX(-50%); }
.kbb-active.lyrics-video .kbb-player { max-width:calc(50% - 260px); }
.kbb-active.lyrics-video .kbb-song-name { top:300px; }
.kbb-active.lyrics-video .kb-song-cue { top:43%; }
@media(max-width:680px) {
  .kbb-result-inner { padding:24px 18px; }.kbb-result-heading { gap:12px; padding-top:26px; padding-right:0; }.kbb-result-art { width:82px; height:82px; }.kbb-result-title { font-size:28px; }.kbb-result-reason { font-size:12px; }
  .kbb-final-scores { gap:8px; margin:22px 0; }.kbb-final-scores>div { padding:14px 6px; }.kbb-final-name { font-size:12px; }.kbb-final-score { font-size:44px; }.kbb-rating-result { gap:6px 9px; }.kbb-rating-label { font-size:12px; }
  .kbb-result-actions { grid-template-columns:1fr; gap:10px; }.kbb-result-actions .btn { min-height:48px; }
  .kbb-forfeit-confirm { padding:26px 22px; }.kbb-leave-actions { grid-template-columns:1fr; }.kbb-leave-actions .btn { width:100%; }
  .kbb-status-group button,.kbb-forfeit { font-size:11px; }.kbb-status-group .kbb-mute { padding:8px 10px; }
}
@media(max-width:680px) and (orientation:portrait) {
  .kbb-active.lyrics-video .kb-yt { --kb-yt-w:min(360px,calc(100vw - 24px)); --kb-yt-h:calc(var(--kb-yt-w)*9/16); width:var(--kb-yt-w); height:var(--kb-yt-h); top:152px; bottom:auto; }
  .kbb-active.lyrics-video .kbb-player { max-width:44%; }.kbb-active.lyrics-video .kbb-song-name { top:124px; }.kbb-active.lyrics-video .kb-song-cue { top:46%; }
  .kbb-active.lyrics-video .kbb-status-group { left:12px; right:12px; bottom:150px; }.kbb-active.lyrics-video .kbb-forfeit { right:12px; width:auto; min-width:130px; }
}
@media(max-height:600px) and (orientation:landscape) {
  .kbb-active.lyrics-video .kb-yt { --kb-yt-w:240px; --kb-yt-h:135px; width:240px; height:135px; left:12px; top:auto; bottom:100px; transform:none; }
  .kbb-active.lyrics-video .kbb-player { max-width:40%; }.kbb-active.lyrics-video .kbb-song-name { top:12px; }.kbb-active.lyrics-video .kb-song-cue { top:35%; }
}
@media(prefers-reduced-motion:reduce) { .kbb-match-intro[data-busy="true"] .kbb-intro-loader { animation:none; border-top-color:#007da7; } }
/* Fixed geometry prevents inherited typography from stretching the close glyph. */
.kbb-close { display:inline-grid; place-items:center; box-sizing:border-box; min-width:44px; min-height:44px; width:44px; height:44px; margin:0; padding:0; line-height:1; }
.kbb-close svg { display:block; width:20px; height:20px; aspect-ratio:1; flex-shrink:0; }