/* Karaoke mode (plan §2, §7, §8). Every colour, font and shadow is an app.css token. The hard
   offset shadow appears ONLY on pressables (cards, buttons, chips you can press); text uses ink
   strokes and hard text-shadows, art carries its own baked shadow. */

/* ================================================================ tab + picker */
.tabs { grid-template-columns:1fr 1fr 1fr; }
main[data-view="karaoke"] { display:block; overflow-y:auto; -webkit-overflow-scrolling:touch; }
main[data-view="karaoke"] .library, main[data-view="karaoke"] .stage { display:none; }
.kb-picker { display:none; padding:18px 20px 44px; max-width:1240px; margin:0 auto; width:100%; }
main[data-view="karaoke"] .kb-picker { display:block; }

.kb-pick-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.kb-pick-title { display:flex; align-items:center; gap:10px; margin-right:auto; }
.kb-pick-title img { width:46px; height:46px; }
.kb-pick-title h2 { font-size:24px; line-height:1.1; }
.kb-pick-sub { font-size:13px; color:var(--text-2); }
.kb-search {
  flex:1 1 220px; min-width:0; max-width:380px; padding:10px 14px; font:inherit; font-size:15px;
  color:var(--ink); background:var(--white); border:2px solid var(--ink); border-radius:12px;
  box-shadow:var(--shadow-sm); transition:transform .1s, box-shadow .1s;
}
.kb-search:focus { outline:none; transform:translate(1px,2px); box-shadow:1px 2px 0 var(--ink); }

.kb-genres { display:flex; gap:12px; overflow-x:auto; padding:4px 4px 12px 2px; scrollbar-width:thin; }
.kb-genre {
  flex:none; width:138px; aspect-ratio:3/2; padding:0; position:relative; overflow:hidden;
  border:2px solid var(--ink); border-radius:14px; background:var(--blue-200) center/cover no-repeat;
  box-shadow:var(--shadow-sm); transition:transform .1s, box-shadow .1s;
}
.kb-genre:active { transform:translate(2px,3px); box-shadow:none; }
.kb-genre.on { box-shadow:var(--shadow-sm), 0 0 0 3px var(--yellow); }
.kb-genre.on::after { content:""; position:absolute; inset:0; border:3px solid var(--yellow); border-radius:11px; }
.kb-genre b {
  position:absolute; left:0; right:0; bottom:0; padding:3px 9px; text-align:left;
  font-family:var(--display); font-weight:400; font-size:12px; color:var(--white); background:rgba(23,23,23,.72);
}
.kb-genre.plain { background:var(--pale-yellow); font-family:var(--display); font-size:15px; color:var(--ink); }
.kb-genre.plain b { position:static; background:none; color:var(--ink); font-size:15px; padding:0; }

.kb-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:16px; }
.kb-song {
  display:flex; flex-direction:column; text-align:left; padding:0; overflow:hidden; min-width:0;
  background:var(--white); border:2px solid var(--ink); border-radius:16px; box-shadow:var(--shadow);
  transition:transform .1s, box-shadow .1s;
}
.kb-song:active { transform:translate(2px,4px); box-shadow:none; }
.kb-song-thumb { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-bottom:2px solid var(--ink); background:var(--blue-200); }
.kb-song-body { padding:10px 12px 12px; display:flex; flex-direction:column; gap:3px; }
.kb-song-title { font-family:var(--display); font-size:15px; line-height:1.2; }
.kb-song-artist { font-size:12.5px; color:var(--text-2); }
.kb-song-meta { display:flex; align-items:center; gap:8px; margin-top:5px; font-size:11.5px; color:var(--muted); font-weight:600; flex-wrap:wrap; }
.kb-tag { padding:1px 8px; border:2px solid var(--ink); border-radius:999px; font-family:var(--display); font-weight:400; font-size:11px; color:var(--ink); background:var(--pale-yellow); }
.kb-diff { display:inline-flex; gap:3px; }
.kb-diff i { width:8px; height:8px; border-radius:50%; border:1.5px solid var(--ink); background:var(--white); }
.kb-diff i.on { background:var(--red); }
.kb-song-best { margin-left:auto; font-family:var(--display); font-weight:400; color:var(--green); }
.kb-song-best.none { color:var(--muted); font-family:var(--sans); font-weight:600; }
.kb-empty { text-align:center; color:var(--text-2); padding:30px 0; }

/* ==================================================================== stage */
.kb-stage {
  position:fixed; inset:0; z-index:60; overflow:hidden; background:#101418; color:var(--white);
  font-family:var(--sans); touch-action:manipulation;
  --kb-yt-w:178px; --kb-yt-h:100.125px;          /* compact 16:9 player */
  --kb-band-top:25px; --kb-band-h:calc(100% - 50px);            /* the note highway band; highway.mjs reads these */
  --kb-side:calc(var(--kb-yt-w) + 34px);
}
.kb-stage[hidden] { display:none; }
.kb-stage.timing-only { --kb-yt-w:178px; --kb-yt-h:100.125px; }
.kb-shake { position:absolute; inset:0; will-change:transform; }
.kb-cam { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); background:#101418; z-index:1; }
.kb-stage.nocam .kb-cam { display:none; }
.kb-tone { position:absolute; inset:0; z-index:2; pointer-events:none; --tone-lo:#dbf5ff; --tone:#00b6f3; --tone-dark:#008fc8; }
.kb-tone[hidden] { display:none; }
.kb-vignette {
  position:absolute; inset:0; transition:background 1.2s ease, filter .35s ease;
  background:radial-gradient(115% 85% at 50% 45%, transparent 36%, color-mix(in srgb, var(--tone) 64%, transparent) 100%),
             linear-gradient(rgba(16,20,24,.5), transparent 24%, transparent 70%, rgba(16,20,24,.62));
}
.kb-stage.nocam .kb-vignette { background:radial-gradient(125% 85% at 50% 4%, var(--tone-lo) 0%, var(--tone) 58%, var(--tone-dark) 100%); }
.kb-tone.idle .kb-vignette { filter:saturate(.15); }
.kb-vignette.desat { filter:saturate(0) brightness(.7); transition:filter .04s; }
.kb-bloom { position:absolute; inset:0; opacity:0; background:radial-gradient(58% 42% at 50% 38%, #fff 0%, transparent 70%); }
.kb-bloom.on { animation:bloom .9s ease-out; }
.kb-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.kb-highway { z-index:10; }
.kb-fx { z-index:11; }
.kb-fx.over { z-index:75; }   /* results: star bursts draw above the sheet */
.kb-edge { position:absolute; inset:0; z-index:12; pointer-events:none; opacity:0;
  box-shadow:inset 0 0 0 6px var(--red), inset 0 0 80px rgba(254,50,68,.8); }
.kb-edge.on { animation:kb-edge .5s ease-out; }
@keyframes kb-edge { 0%{opacity:0} 25%{opacity:1} 100%{opacity:0} }

/* ------------------------------------------------------------------ lyrics */
.kb-lyrics {
  position:absolute; left:var(--kb-side); right:var(--kb-side); z-index:20; pointer-events:none;
  top:calc(var(--kb-band-top) + var(--kb-band-h) + 8px); bottom:14px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:6px;
}
.kb-line {
  margin:0; font-family:var(--display); color:var(--white); line-height:1.22;
  -webkit-text-stroke:1.5px var(--ink); paint-order:stroke fill;
  text-shadow:0 3px 0 var(--ink), 0 6px 18px rgba(0,0,0,.55);
  display:flex; flex-wrap:wrap; justify-content:center; gap:0 .28em;
}
.kb-line-now { font-size:clamp(26px, 4.6vh, 44px); }
.kb-line-next { font-size:clamp(15px, 2.6vh, 26px); opacity:.6; }
.kb-line-now.note { font-size:clamp(18px, 3vh, 26px); opacity:.85; }
.kb-line span { position:relative; --word-progress:0%; }
.kb-line span.past { --word-progress:100%; }
.kb-line span.active::before, .kb-line span.past::before {
  content:attr(data-w); position:absolute; inset:0; color:var(--yellow);
  clip-path:inset(-12px calc(100% - var(--word-progress)) -12px -12px);
}

/* ------------------------------------------------------ popups, ribbon, count */
.kb-popups { position:absolute; left:0; right:0; top:var(--kb-band-top); height:var(--kb-band-h); z-index:30; pointer-events:none; }
.kb-pop {
  position:absolute; left:30%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center;
  justify-content:center; will-change:transform, opacity; animation:kb-pop .62s cubic-bezier(.2,1.5,.4,1) forwards;
}
.kb-pop img { width:clamp(170px, 24vw, 340px); height:auto; }
.kb-pop.big { left:50%; animation:kb-pop-big .95s cubic-bezier(.2,1.4,.4,1) forwards; }
.kb-pop.big img { width:clamp(260px, 38vw, 520px); }
.kb-pop.pulse { animation:kb-pulse 1s ease-in-out infinite; }
.kb-pop-n {
  position:absolute; left:64%; top:50%; transform:translate(-50%,-50%) rotate(-6deg);
  font-family:var(--display); font-size:clamp(44px, 8vw, 112px); color:var(--white);
  -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; text-shadow:3px 4px 0 var(--ink); line-height:1;
}
.kb-pop-text {
  font-family:var(--display); font-size:clamp(30px, 6.2vh, 60px); color:var(--white); white-space:nowrap;
  -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; text-shadow:3px 4px 0 var(--ink); line-height:1.1;
}
.kb-pop-text.red { color:var(--red-300); }
.kb-pop-text.yellow { color:var(--yellow); }
.kb-pop-text.blue { color:var(--blue-400); }
@keyframes kb-pop {
  0%{opacity:0; transform:translate(-50%,-50%) scale(.4)} 22%{opacity:1; transform:translate(-50%,-50%) scale(1.1)}
  40%{transform:translate(-50%,-50%) scale(1)} 78%{opacity:1; transform:translate(-50%,-64%) scale(1)}
  100%{opacity:0; transform:translate(-50%,-78%) scale(.94)} }
@keyframes kb-pop-big {
  0%{opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(-7deg)} 24%{opacity:1; transform:translate(-50%,-50%) scale(1.12) rotate(2deg)}
  44%{transform:translate(-50%,-50%) scale(1) rotate(0)} 80%{opacity:1; transform:translate(-50%,-50%) scale(1.03)}
  100%{opacity:0; transform:translate(-50%,-62%) scale(1.12)} }
@keyframes kb-pulse { 0%,100%{transform:translate(-50%,-50%) scale(.95); opacity:.8} 50%{transform:translate(-50%,-50%) scale(1.07); opacity:1} }

.kb-ribbon { position:absolute; left:0; right:0; top:7%; z-index:25; display:flex; justify-content:center; pointer-events:none; opacity:0; }
.kb-ribbon img { width:min(60vw, 560px); height:auto; }
.kb-ribbon.on { animation:kb-ribbon 1.8s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes kb-ribbon {
  0%{opacity:0; transform:translateX(-60vw) rotate(-4deg)} 18%{opacity:1; transform:translateX(0) rotate(0)}
  78%{opacity:1; transform:translateX(0)} 100%{opacity:0; transform:translateX(50vw) rotate(3deg)} }

.kb-count {
  position:absolute; left:30%; top:calc(var(--kb-band-top) + var(--kb-band-h) / 2); transform:translate(-50%,-50%);
  z-index:31; pointer-events:none; font-family:var(--display); font-size:clamp(90px, 20vh, 190px); line-height:1;
  color:var(--white); -webkit-text-stroke:4px var(--ink); paint-order:stroke fill; text-shadow:5px 6px 0 var(--ink);
}
.kb-count:empty { display:none; }
.kb-count.tick { animation:kb-count .66s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes kb-count { 0%{opacity:0; transform:translate(-50%,-50%) scale(1.7)} 30%{opacity:1; transform:translate(-50%,-50%) scale(1)} 100%{opacity:.3; transform:translate(-50%,-50%) scale(.88)} }

/* --------------------------------------------------------------------- HUD */
.kb-hud {
  position:absolute; left:0; right:0; top:0; z-index:35; pointer-events:none;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
.kb-hud-left { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.kb-score {
  font-family:var(--display); font-size:clamp(56px, 12vh, 108px); line-height:.9; letter-spacing:-.02em;
  color:var(--white); text-shadow:4px 5px 0 var(--ink); -webkit-text-stroke:1.5px var(--ink); paint-order:stroke fill;
  font-variant-numeric:tabular-nums; min-width:1.2em;
}
.kb-score.up { animation:num-up .5s cubic-bezier(.2,1.7,.35,1); }
.kb-score.down { animation:num-down .5s ease-out; }
.kb-caption {
  font-family:var(--display); font-size:clamp(13px, 2vh, 17px); color:var(--ink); background:var(--white);
  padding:4px 14px; border:2px solid var(--ink); border-radius:999px;
}
.kb-caption.swap { animation:cap-swap .4s cubic-bezier(.2,1.5,.4,1); }
.kb-hud-right { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; max-width:58%; }
.kb-chip {
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border:2px solid var(--ink); border-radius:999px;
  background:rgba(255,255,255,.88); color:var(--ink); font-family:var(--display); font-size:15px;
  font-variant-numeric:tabular-nums; line-height:1.3;
}
.kb-chip img { width:20px; height:20px; }
.kb-chip b { font-weight:400; }
.kb-combo { background:var(--yellow); }
.kb-combo.pop, .kb-streak.pop { animation:streak-pop .45s cubic-bezier(.2,1.6,.4,1); }
.kb-combo.hot { background:var(--orange); color:var(--white); }
.kb-state-chip { background:var(--red); color:var(--white); }
.kb-state-chip.calm { background:var(--blue-200); color:var(--ink); }

/* ---------------------------------------------------------- bird + bubble */
.kb-burst { position:absolute; inset:0; z-index:36; pointer-events:none; overflow:hidden; }
.kb-burst img { position:absolute; width:30px; height:30px; will-change:transform, opacity; animation:fly 1.15s cubic-bezier(.15,.75,.35,1) forwards; }
.kb-birdwrap {
  position:absolute; right:max(16px, env(safe-area-inset-right)); bottom:calc(max(14px, env(safe-area-inset-bottom)) + 58px);
  z-index:37; width:var(--kb-yt-w); display:flex; justify-content:center; pointer-events:none;
}
.kb-bird { width:clamp(72px, 14vh, 118px); height:auto; display:block; animation:bird-breathe 2.8s ease-in-out infinite; }
.kb-bird.talk { animation:bird-talk .5s cubic-bezier(.2,1.6,.4,1); }
#kb-bubble {
  left:auto; right:calc(50% - var(--kb-yt-w) / 2); transform:none; max-width:min(340px, 46vw);
  font-size:clamp(13px, 1.9vh, 16px); animation:kb-bubble-pop .26s cubic-bezier(.2,1.5,.4,1);
}
#kb-bubble::before, #kb-bubble::after { left:auto; right:calc(var(--kb-yt-w) / 2 - 10px); transform:none; }
#kb-bubble::after { right:calc(var(--kb-yt-w) / 2 - 8px); }
@keyframes kb-bubble-pop { 0%{opacity:0; transform:translateY(9px) scale(.92)} 100%{opacity:1; transform:none} }

/* --------------------------------------------------- player + end button */
.kb-yt {
  position:absolute; left:max(16px, env(safe-area-inset-left)); bottom:max(14px, env(safe-area-inset-bottom));
  width:var(--kb-yt-w); height:var(--kb-yt-h); z-index:40; border:2px solid var(--ink); border-radius:12px;
  overflow:hidden; background:#000;
}
.kb-yt iframe, #kb-yt-player { display:block; width:100%; height:100%; border:0; }
.kb-yt-tag { position:absolute; left:8px; top:8px; padding:2px 10px; border:2px solid var(--ink); border-radius:999px;
  background:var(--red); color:var(--white); font-family:var(--display); font-size:12px; }
.kb-end {
  position:absolute; right:max(16px, env(safe-area-inset-right)); bottom:max(14px, env(safe-area-inset-bottom));
  z-index:41; width:var(--kb-yt-w); padding:9px 14px; font-size:15px; border-radius:12px; gap:8px;
}
.kb-end-sq { width:13px; height:13px; flex:none; background:var(--red); border:2px solid var(--ink); border-radius:4px; }

/* -------------------------------------------------------- ready + results */
.kb-sheet {
  position:absolute; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:16px;
  overflow-y:auto; background:rgba(16,20,24,.52); backdrop-filter:blur(4px); color:var(--ink);
}
.kb-card {
  width:min(560px, 100%); margin:auto; background:var(--white); border:2px solid var(--ink); border-radius:22px;
  padding:20px 22px; animation:modal-in .22s cubic-bezier(.2,1.4,.4,1);
}
.kb-ready-song { display:flex; gap:14px; align-items:center; }
.kb-ready-thumb { width:124px; aspect-ratio:16/9; object-fit:cover; border:2px solid var(--ink); border-radius:12px; background:var(--blue-200); flex:none; }
.kb-ready-text { min-width:0; }
.kb-ready-text h2 { font-size:22px; line-height:1.15; }
.kb-ready-artist { font-size:13.5px; color:var(--text-2); }
.kb-ready-status { margin:12px 0 4px; font-size:13.5px; font-weight:600; color:var(--blue-600); min-height:20px; }
.kb-ready-status.bad { color:var(--red); }
.kb-opt-note { font-size:12px; color:var(--muted); line-height:1.4; }
.kb-ready-actions { display:flex; gap:10px; margin-top:18px; }
.kb-start { flex:1; font-size:18px; padding:13px 20px; }
.kb-start:disabled { opacity:.55; cursor:default; }
.kb-start:disabled:active { transform:none; box-shadow:var(--shadow); }

.kb-results-card { text-align:center; }
.kb-stars { display:flex; justify-content:center; gap:6px; min-height:56px; margin:6px 0 2px; }
.kb-stars img { width:50px; height:50px; opacity:0; transform:scale(.2); }
.kb-stars img.on { animation:kb-star .55s cubic-bezier(.2,1.6,.4,1) forwards; }
.kb-stars img.off { opacity:.2; transform:none; filter:grayscale(1); }
@keyframes kb-star { 0%{opacity:0; transform:scale(.2) rotate(-40deg)} 60%{opacity:1; transform:scale(1.28) rotate(8deg)} 100%{opacity:1; transform:scale(1) rotate(0)} }
.kb-res-big { display:flex; flex-direction:column; align-items:center; }
.kb-res-overall { font-family:var(--display); font-size:72px; line-height:1; font-variant-numeric:tabular-nums; }
.kb-res-label { font-family:var(--display); font-size:15px; color:var(--text-2); }
.kb-res-tiles { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:14px; text-align:left; }
.kb-res-tiles .tile-val { font-size:22px; }
.kb-res-note { margin-top:12px; font-size:13.5px; color:var(--text-2); min-height:20px; }
.kb-attrib { margin-top:6px; font-size:11.5px; color:var(--muted); }
.kb-res-actions { display:flex; gap:10px; margin-top:16px; }
.kb-res-actions .btn { flex:1; justify-content:center; }
.kb-error {
  position:absolute; left:16px; right:16px; top:50%; transform:translateY(-50%); z-index:80; padding:14px 16px;
  background:var(--red); color:var(--white); border:2px solid var(--ink); border-radius:14px; font-family:var(--display); text-align:center;
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 700px) {
  .kb-picker { padding:14px 14px 40px; }
  .kb-grid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
  .kb-genre { width:118px; }
  .kb-lyrics { left:12px; right:12px; bottom:calc(var(--kb-yt-h) + 24px); }
  .kb-line-now { font-size:clamp(22px, 3.6vh, 32px); }
  .kb-score { font-size:clamp(44px, 9vh, 72px); }
  .kb-hud-right { max-width:50%; }
  .kb-chip { font-size:13px; padding:3px 10px; }
  .kb-pop img { width:44vw; }
  .kb-pop.big img { width:64vw; }
  .kb-birdwrap, .kb-end { width:calc(100% - var(--kb-yt-w) - 44px); right:12px; }
  #kb-bubble { right:0; max-width:min(300px, 56vw); }
  #kb-bubble::before, #kb-bubble::after { right:auto; left:50%; transform:translateX(-50%); }
  .kb-res-tiles { grid-template-columns:1fr 1fr; }
  .kb-res-actions { flex-direction:column; }
}
@media (max-height: 520px) {
  .kb-score { font-size:clamp(40px, 16vh, 64px); }
  .kb-bird { width:56px; }
  .kb-count { font-size:clamp(70px, 26vh, 120px); }
}
@media (prefers-reduced-motion: reduce) {
  .kb-pop, .kb-pop.big, .kb-pop.pulse, .kb-ribbon.on, .kb-count.tick, .kb-bird, #kb-bubble, .kb-score, .kb-caption,
  .kb-stars img.on, .kb-combo.pop, .kb-streak.pop, .kb-card, .kb-edge.on, .kb-bloom.on, .kb-vignette { animation:none !important; transition:none !important; }
  .kb-pop, .kb-pop.big, .kb-pop.pulse { opacity:1; }
  .kb-ribbon.on, .kb-count.tick, .kb-stars img.on { opacity:1; transform:none; }
  .kb-edge.on { opacity:.6; }
}

/* Development completion: explicit controls, recoverable states and readable small screens. */
.kb-picker, .kb-stage { --kb-space-sm:8px; --kb-space-md:16px; --kb-space-lg:24px; }
.kb-pick-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 16px; }
.kb-picker button, .kb-stage button, .kb-stage select, .kb-picker select { min-height:44px; }
.kb-picker button:focus-visible, .kb-stage button:focus-visible, .kb-picker input:focus-visible, .kb-stage input:focus-visible,
.kb-picker select:focus-visible, .kb-stage select:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.kb-picker button:disabled, .kb-stage button:disabled { opacity:.5; cursor:not-allowed; }
.kb-song-title, .kb-song-artist, .kb-ready-text, .kb-res-song { overflow-wrap:anywhere; }
.kb-grid[aria-busy="true"] { opacity:.65; }
.kb-device-retry { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.kb-stage select, .kb-board select { max-width:100%; font:inherit; color:var(--ink); background:var(--white); border:2px solid var(--ink); border-radius:10px; padding:8px 12px; }
.kb-play-controls { position:absolute; z-index:41; right:max(16px,env(safe-area-inset-right)); bottom:70px; display:flex; gap:8px; width:var(--kb-yt-w); }
.kb-play-controls button { flex:1; padding:8px; font-size:14px; }
.kb-birdwrap { bottom:126px; }
.kb-end { display:flex; align-items:center; justify-content:center; background:var(--white); color:var(--ink); }
.kb-error-back { position:absolute; top:calc(50% + 72px); left:50%; transform:translateX(-50%); z-index:81; }
.kb-stage[data-state="loading"]::after { content:"Getting your stage ready…"; position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-size:24px; }
.kb-stage[data-state="ready"] .kb-yt { visibility:hidden; }
.kb-board { margin:16px 0; color:var(--ink); text-align:left; }
.kb-board-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.kb-board-head h3 { font-family:var(--display); font-size:18px; line-height:1.2; }
.kb-board-status { margin:8px 0; color:var(--text-2); font-size:14px; line-height:1.4; }
.kb-board-list { list-style:none; padding:0; margin:0; }
.kb-board-list li { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px 8px; border-bottom:1px solid var(--ink); }
.kb-board-list li.me { background:var(--pale-yellow); }
.kb-board-name { overflow-wrap:anywhere; font-weight:600; }
.kb-board-score, .kb-board-rank { font-family:var(--display); font-variant-numeric:tabular-nums; }
.kb-board-song { grid-column:2; color:var(--text-2); }
.kb-results-card { width:min(600px,100%); }
.kb-results .kb-board-body { max-height:230px; overflow-y:auto; }
.kb-results .kb-res-tiles { gap:8px; }
.kb-results .tile { min-width:0; }
.kb-results .tile .card-label { overflow-wrap:anywhere; }
.kb-res-actions { position:sticky; bottom:0; background:var(--white); padding:8px 0 0; }
.kb-res-note { line-height:1.5; }
.kb-stage.nocam .kb-vignette { background:radial-gradient(125% 95% at 50% 45%,color-mix(in srgb,var(--tone) 48%,#101418),#101418 100%); }
@media (hover:hover) { .kb-song:hover, .kb-genre:hover { transform:translateY(-2px); } }
@media (max-width:700px) {
  .kb-stage { --kb-band-top:19%; --kb-band-h:36%; }
  .kb-lyrics { top:calc(var(--kb-band-top) + var(--kb-band-h) + 8px); bottom:calc(var(--kb-yt-h) + 28px); }
  .kb-line-now { font-size:30px; }
  .kb-line-next { font-size:18px; }
  .kb-play-controls { right:12px; width:calc(100% - var(--kb-yt-w) - 44px); }
  .kb-birdwrap { bottom:126px; }
  .kb-picker .kb-song-artist, .kb-picker .kb-song-meta, .kb-picker .kb-song-best, .kb-picker .kb-tag, .kb-opt-note, .kb-attrib { font-size:14px; }
  .kb-ready-thumb { width:88px; }
  .kb-ready-text h2 { font-size:20px; }
  .kb-card { padding:16px; }
  .kb-res-actions { flex-direction:row; gap:8px; }
  .kb-res-actions .btn { font-size:14px; padding:8px; }
}
@media (max-width:380px) {
  .kb-yt { left:8px; }
  .kb-end { right:8px; width:calc(100% - 224px); font-size:13px; padding:8px 4px; }
  .kb-play-controls { right:8px; width:calc(100% - 224px); flex-direction:column; bottom:66px; gap:6px; }
  .kb-birdwrap { width:calc(100% - 224px); right:8px; bottom:174px; }
  .kb-bird { width:60px; }
  .kb-chip { font-size:12px; padding:4px 8px; }
  .kb-board-head { align-items:flex-start; }
}
@media (max-width:700px) and (max-height:650px) {
  .kb-stage { --kb-band-top:19%; --kb-band-h:27%; }
  .kb-line-now { font-size:22px; }
  .kb-line-next { font-size:14px; }
}
@media (orientation:landscape) and (max-height:520px) {
  .kb-lyrics { left:224px; right:168px; top:62%; bottom:8px; }
  .kb-line-now { font-size:24px; }
  .kb-line-next { font-size:16px; }
  .kb-end, .kb-play-controls { width:140px; }
  .kb-birdwrap { width:140px; bottom:120px; }
  .kb-hud-right { max-width:66%; }
}
@media (prefers-reduced-motion:reduce) {
  .kb-stage .kb-shake { transform:none !important; }
  .kb-pop { will-change:auto; }
  .kb-stars img.on { transform:none; opacity:1; }
  .kb-stage .kb-fx { visibility:hidden; }
}
.kb-stage.diagnostic::before { content:"Pitch simulation · visual preview"; position:absolute; z-index:39; left:50%; top:12px; transform:translateX(-50%); padding:6px 12px; background:var(--yellow); color:var(--ink); border:2px solid var(--ink); border-radius:10px; font-size:14px; }

/* Owner revision, 9 September: broad time zoom, a nearly full-height piano, clear coach and score history. */
.kb-stage { --kb-band-top:25px; --kb-band-h:calc(100% - 50px); --kb-yt-w:178px; --kb-yt-h:100.125px; --kb-live-tone:var(--blue); }
.kb-stage.timing-only { --kb-yt-w:178px; --kb-yt-h:100.125px; }
.kb-yt { aspect-ratio:16 / 9; border-radius:10px; }
.kb-end, .kb-play-controls, .kb-birdwrap { width:200px; }
.kb-lyrics { top:auto; bottom:32px; height:142px; left:calc(var(--kb-yt-w) + 36px); right:236px; }
.kb-vignette, .kb-stage.nocam .kb-vignette {
  background:linear-gradient(180deg,color-mix(in srgb,var(--kb-live-tone) 52%,#101418) 0%,color-mix(in srgb,var(--kb-live-tone) 38%,transparent) 38%,color-mix(in srgb,var(--kb-live-tone) 50%,transparent) 74%,color-mix(in srgb,var(--kb-live-tone) 64%,#101418) 100%);
  transition:background .65s ease,filter .45s ease;
}
.kb-stage[data-scorer-presence="waiting"] .kb-vignette { filter:saturate(.25); }
.kb-stage #kb-bubble, .kb-stage #kb-bubble.praise, .kb-stage #kb-bubble.fix {
  color:#171717; background:#fffdf6; opacity:1; text-shadow:none; -webkit-text-stroke:0;
  font-size:17px; line-height:1.4; font-weight:400; border:2px solid #171717; padding:12px 16px;
  width:max-content; max-width:min(360px,calc(100vw - 32px));
}
.kb-stage #kb-bubble [data-perf="perf-bubble-text"], .kb-stage #kb-bubble * { color:#171717; -webkit-text-fill-color:#171717; opacity:1; text-shadow:none; }
.kb-stage #kb-bubble::after, .kb-stage #kb-bubble.praise::after, .kb-stage #kb-bubble.fix::after { border-top-color:#fffdf6; }
#kb-bubble { right:0; }
#kb-bubble::before, #kb-bubble::after { right:88px; }
.kb-score-history { position:absolute; left:180px; top:25px; width:min(34vw,440px); height:112px; z-index:34; margin:0; padding:8px 10px 6px; border:2px solid var(--ink); border-radius:12px; color:#171717; background:#fffdf6; pointer-events:none; }
.kb-score-history figcaption { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 2px; font-size:11px; font-weight:800; letter-spacing:.06em; }
.kb-score-history figcaption span { font-weight:500; letter-spacing:0; }
.kb-score-history canvas { display:block; width:100%; height:78px; }
.kb-stage[data-state="ready"] .kb-score-history, .kb-stage[data-state="loading"] .kb-score-history, .kb-stage[data-state="results"] .kb-score-history, .kb-stage[data-state="ending"] .kb-score-history { visibility:hidden; }
.kb-battle-entry { display:grid; grid-template-columns:62px 1fr; gap:2px 12px; text-align:left; font-size:21px; padding:12px 20px 12px 12px; margin-right:auto; }
.kb-battle-entry img { width:62px; height:62px; object-fit:contain; grid-row:1 / 3; }
.kb-battle-entry span { font-family:var(--sans); font-size:14px; font-weight:600; }
.kb-pick-actions { margin-bottom:20px; }
.kb-results-history { margin:16px 0 8px; padding:10px 12px; border:1px solid #bac5cb; border-radius:12px; text-align:left; }
.kb-results-history figcaption { font-size:13px; font-weight:700; margin-bottom:4px; }
.kb-results-history canvas { width:100%; height:92px; display:block; }
@media (max-width:900px) {
  .kb-score-history { left:156px; width:calc(100% - 400px); min-width:200px; }
  .kb-lyrics { left:calc(var(--kb-yt-w) + 28px); right:180px; }
  .kb-end,.kb-play-controls,.kb-birdwrap { width:152px; }
}
@media (max-width:700px) {
  .kb-stage, .kb-stage.timing-only { --kb-yt-w:min(160px,calc(100vw - 24px)); --kb-yt-h:calc(var(--kb-yt-w) * 9 / 16); }
  .kb-yt { left:50%; transform:translateX(-50%); bottom:12px; }
  .kb-stage .kb-lyrics { left:12px; right:12px; top:auto; bottom:calc(var(--kb-yt-h) + 84px); height:112px; }
  .kb-line-now { font-size:26px; }
  .kb-line-next { font-size:17px; }
  .kb-play-controls { right:auto; left:12px; width:calc(58% - 18px); bottom:calc(var(--kb-yt-h) + 24px); flex-direction:row; }
  .kb-end { right:12px; width:calc(42% - 18px); bottom:calc(var(--kb-yt-h) + 24px); font-size:14px; padding:8px; }
  .kb-birdwrap { width:72px; right:12px; bottom:calc(var(--kb-yt-h) + 188px); }
  .kb-bird { width:64px; }
  #kb-bubble { right:0; bottom:calc(100% + 6px); }
  .kb-stage #kb-bubble { max-width:calc(100vw - 28px); font-size:15px; padding:10px 12px; }
  #kb-bubble::before,#kb-bubble::after { left:auto; right:22px; transform:none; }
  .kb-score-history { left:12px; right:12px; top:112px; width:auto; min-width:0; height:98px; }
  .kb-score-history canvas { height:66px; }
  .kb-score-history figcaption { font-size:11px; }
  .kb-battle-entry { width:100%; font-size:21px; }
  .kb-battle-entry img { width:54px; height:54px; }
}
@media (orientation:landscape) and (max-height:600px) {
  .kb-stage, .kb-stage.timing-only { --kb-yt-w:120px; --kb-yt-h:67.5px; }
  .kb-yt { left:12px; bottom:12px; transform:none; }
  .kb-stage .kb-lyrics { left:148px; right:170px; bottom:12px; height:110px; }
  .kb-line-now { font-size:22px; }
  .kb-line-next { font-size:15px; }
  .kb-end,.kb-play-controls { width:142px; left:auto; right:12px; }
  .kb-end { bottom:12px; }
  .kb-play-controls { bottom:66px; flex-direction:row; }
  .kb-birdwrap { width:70px; right:42px; bottom:116px; }
  .kb-score-history { left:148px; right:auto; top:16px; width:28vw; min-width:180px; height:92px; }
  .kb-score-history canvas { height:60px; }
}
@media (max-width:700px) and (max-height:650px) and (orientation:portrait) {
  .kb-stage, .kb-stage.timing-only { --kb-yt-w:120px; --kb-yt-h:67.5px; }
  .kb-score-history { top:92px; height:82px; }
  .kb-score-history canvas { height:50px; }
  .kb-stage .kb-lyrics { height:84px; }
  .kb-line-now { font-size:22px; }
  .kb-line-next { font-size:14px; }
  .kb-birdwrap { bottom:calc(var(--kb-yt-h) + 166px); }
}
@media (prefers-reduced-motion:reduce) { .kb-vignette { transition:none; } }
/* Live battle is the main invitation; rendered text remains separate from the artwork. */
.kb-battle-hero { display:block; position:relative; isolation:isolate; width:100%; min-height:270px; margin:0 0 28px; padding:34px 40px; overflow:hidden; border:3px solid var(--ink); border-radius:22px; background:#083652 url('/static/img/kb-battle-hero-v1.webp') center/cover no-repeat; color:#fffdf6; text-align:left; box-shadow:0 6px 0 var(--ink); }
.kb-battle-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#052940c9 0%,#05294044 36%,transparent 65%); }
.kb-battle-hero-copy { display:flex; flex-direction:column; align-items:flex-start; gap:12px; max-width:40%; }
.kb-battle-eyebrow { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.kb-battle-hero strong { font-family:var(--display); font-size:38px; line-height:1.05; }
.kb-battle-hero-copy>span:not([class]) { font-size:14px; line-height:1.4; }
.kb-battle-hero-cta { display:inline-flex; align-items:center; gap:24px; margin-top:4px; padding:11px 15px; border:2px solid var(--ink); border-radius:10px; background:var(--blue); color:var(--ink); font-family:var(--display); font-size:16px; box-shadow:0 3px 0 #031b2c; }
.kb-battle-hero:hover .kb-battle-hero-cta { transform:translateY(-2px); }
.kb-battle-hero:active .kb-battle-hero-cta { transform:translateY(2px); box-shadow:none; }
.kb-battle-hero:focus-visible { outline:4px solid var(--blue); outline-offset:5px; }
.kb-res-components { font-size:13px; line-height:1.6; margin:12px 0 16px; }
@media(max-width:700px) { .kb-battle-hero { min-height:260px; padding:26px 20px; background-position:60% center; margin-bottom:24px; }.kb-battle-hero::before { background:linear-gradient(90deg,#052940ed,#052940a8 45%,#05294022); }.kb-battle-hero-copy { max-width:68%; }.kb-battle-hero strong { font-size:29px; }.kb-battle-hero-cta { font-size:13px; gap:14px; padding:10px 12px; }.kb-battle-eyebrow { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .kb-battle-hero * { transition:none!important; transform:none!important; } }
@media(max-width:700px) { .kb-battle-hero { min-height:320px; padding:24px 20px 138px; background-position:center bottom; background-size:100% auto; }.kb-battle-hero-copy { max-width:100%; }.kb-battle-hero::before { background:linear-gradient(180deg,#052940 0%,#052940dd 46%,transparent 67%); } }
.kb-battle-hero { min-height:380px; padding:48px 44px; display:flex; align-items:center; }
.kb-hero-board { position:absolute; top:28px; right:28px; display:flex; gap:22px; align-items:center; padding:12px 16px; min-height:44px; border:2px solid #fffdf6; border-radius:10px; background:#082b43de; color:#fffdf6; font-family:var(--display); font-size:15px; }
.kb-battle-hero-cta:focus-visible,.kb-hero-board:focus-visible { outline:4px solid var(--yellow); outline-offset:4px; }
@media(max-width:700px) { .kb-battle-hero { min-height:390px; padding:74px 20px 138px; align-items:flex-start; }.kb-hero-board { top:16px; right:16px; padding:9px 12px; font-size:13px; gap:14px; }.kb-battle-hero-copy { gap:12px; }.kb-battle-hero strong { font-size:32px; } }
.kb-battle-hero { margin-bottom:52px; }
.kb-pick-head { padding-top:8px; margin-bottom:24px; }
@media(max-width:700px) { .kb-battle-hero { margin-bottom:40px; }.kb-pick-head { padding-top:4px; } }

/* Preparation reflects settled device/model/player promises, never an invented percentage. */
.kb-analysis { width:100%; display:flex; justify-content:space-between; align-items:center; margin-top:18px; min-height:52px; font-size:18px; }
.kb-analysis-note { margin:9px 0 0; color:var(--text-2); font-size:12px; }
@keyframes kb-prepare-spin { to { transform:rotate(360deg); } }

/* Explain actual musical gaps separately from paused/loading playback. */
.kb-song-cue { position:absolute; z-index:42; left:50%; top:38%; transform:translateX(-50%); max-width:min(420px,calc(100% - 40px)); padding:16px 22px; border:1px solid #ffffff70; border-radius:16px; background:#071f32ed; color:#fffdf6; text-align:center; box-shadow:0 5px 22px #0004; pointer-events:none; }
.kb-song-cue[hidden] { display:none; }
.kb-song-cue strong { display:block; font:24px/1.2 var(--display); }
.kb-song-cue span { display:block; margin-top:7px; font-size:13px; line-height:1.45; }
.kb-song-cue[data-busy="true"] strong::before { content:''; display:inline-block; width:13px; height:13px; margin-right:10px; border:2px solid #6bd7ff; border-top-color:transparent; border-radius:50%; animation:kb-prepare-spin .9s linear infinite; }
@media(max-width:520px) { .kb-song-cue { top:30%; width:max-content; max-width:calc(100% - 40px); padding:12px 16px; }.kb-song-cue strong { font-size:21px; } }
@media(orientation:landscape) and (max-height:560px) { .kb-song-cue { top:28%; padding:9px 14px; }.kb-song-cue strong { font-size:18px; }.kb-song-cue span { margin-top:3px;font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .kb-song-cue[data-busy="true"] strong::before { animation:none; border-top-color:#6bd7ff; } }

.kb-line { max-width:100%; overflow-wrap:anywhere; }
.kb-line-now.line-active { color:var(--yellow); } /* Genuine line cues highlight the whole line; no invented word fill. */

/* Automatic preparation keeps only the current task and its genuine recovery controls. */
.kb-ready .kb-card { width:min(540px,100%); min-height:360px; display:flex; flex-direction:column; justify-content:center; background:#fff; padding:32px; text-align:center; }
.kb-ready-song { justify-content:center; flex-direction:column; gap:16px; }
.kb-ready-thumb { width:148px; }
.kb-ready-text h2 { font-size:26px; }
.kb-ready-status { margin:24px 0 12px; color:#303841; font-size:15px; line-height:1.55; }
.kb-ready[data-busy="true"] .kb-ready-status::before { content:''; display:block; width:26px; height:26px; margin:0 auto 18px; border:3px solid #d3e8f1; border-top-color:#008bbd; border-radius:50%; animation:kb-prepare-spin .9s linear infinite; }
.kb-ready-actions,.kb-device-retry { justify-content:center; }
.kb-device-retry:empty { display:none; }
.kb-ready-actions .btn { min-width:110px; }
.kb-start[hidden] { display:none; }
.kb-sheet .kb-card,.kb-results-card { background:#fff; }
.kb-results .kb-res-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
.kb-res-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; background:#fff; }
.kb-res-actions #kb-again { grid-column:1; grid-row:1; }
.kb-res-actions #kb-share { grid-column:2; grid-row:1; }
.kb-res-actions .kb-home { grid-column:1/-1; grid-row:2; border:0; box-shadow:none; background:transparent; min-height:44px; font-size:14px; text-decoration:underline; }
/* When usable lyric text is unavailable, the video becomes the readable lyric surface. */
.kb-stage.lyrics-video { --kb-yt-w:min(480px,calc(100vw - 32px)); --kb-yt-h:calc(var(--kb-yt-w) * 9 / 16); }
.kb-stage.lyrics-video .kb-lyrics { left:calc(var(--kb-yt-w) + 34px); right:220px; bottom:38px; height:140px; }
@media(max-width:700px) { .kb-ready .kb-card {padding:26px 20px;}.kb-stage.lyrics-video { --kb-yt-w:min(360px,calc(100vw - 24px)); --kb-yt-h:calc(var(--kb-yt-w) * 9 / 16); }.kb-stage.lyrics-video .kb-lyrics { left:12px;right:12px;bottom:calc(var(--kb-yt-h) + 84px);height:100px; } }
@media(orientation:landscape) and (max-height:560px) { .kb-stage.lyrics-video { --kb-yt-w:240px; --kb-yt-h:135px; }.kb-stage.lyrics-video .kb-lyrics {left:268px;right:170px;bottom:12px;height:100px;}.kb-ready .kb-card {min-height:0;padding:18px;}.kb-ready-song{flex-direction:row;}.kb-ready-status{margin:14px 0 8px;} }
@media(prefers-reduced-motion:reduce) { .kb-ready[data-busy="true"] .kb-ready-status::before {animation:none;border-top-color:#008bbd;} }

/* A mismatched vocal reference is available only as honest, unscored video practice. */
.kb-stage.video-only #kb-highway,.kb-stage.video-only .kb-hud-left,.kb-stage.video-only .kb-res-big,.kb-stage.video-only .kb-res-tiles,.kb-stage.video-only #kb-stars,.kb-stage.video-only #kb-res-board { display:none; }
.kb-stage.video-only .kb-vignette { filter:none; }
.kb-stage.video-only .kb-hud { justify-content:flex-end; }
.kb-practice-tag { background:var(--blue-200);color:var(--ink); }
#kb-practice-complete { font:30px/1.15 var(--display);margin:8px 0 16px; }

/* Large solo video sits on the right; singing controls stay clear on the opposite side. */
.kb-stage.lyrics-video:not(.kbb-active) .kb-yt { left:auto; right:max(12px,env(safe-area-inset-right)); transform:none; }
@media(min-width:701px) {
  .kb-stage.lyrics-video:not(.kbb-active) .kb-yt { right:max(16px,env(safe-area-inset-right)); }
  .kb-stage.lyrics-video:not(.kbb-active) .kb-end, .kb-stage.lyrics-video:not(.kbb-active) .kb-play-controls, .kb-stage.lyrics-video:not(.kbb-active) .kb-birdwrap { left:max(16px,env(safe-area-inset-left)); right:auto; }
  .kb-stage.lyrics-video:not(.kbb-active) #kb-bubble { left:0;right:auto; }
  .kb-stage.lyrics-video:not(.kbb-active) #kb-bubble::before, .kb-stage.lyrics-video:not(.kbb-active) #kb-bubble::after { left:88px;right:auto; }
}
@media(orientation:landscape) and (max-height:560px) {
  .kb-stage.lyrics-video:not(.kbb-active) .kb-end, .kb-stage.lyrics-video:not(.kbb-active) .kb-play-controls { left:12px;right:auto; }
  .kb-stage.lyrics-video:not(.kbb-active) .kb-birdwrap { left:42px;right:auto; }
  .kb-stage.lyrics-video:not(.kbb-active) #kb-bubble { left:0;right:auto; }
  .kb-stage.lyrics-video:not(.kbb-active) #kb-bubble::before, .kb-stage.lyrics-video:not(.kbb-active) #kb-bubble::after { left:22px;right:auto; }
}