/* Ritim's Song Garden: a scene picker, one stage with the picture, the words and the play-along band. */
.ks{position:relative}
.ks [hidden]{display:none!important}
.ks .ks-back{margin-bottom:12px}
.ks-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Hero ---------- */
.ks-hero{display:grid;grid-template-columns:minmax(0,1fr) clamp(92px,22vw,230px);grid-template-areas:"head art" "lede art" "note art";column-gap:clamp(14px,3vw,36px);align-items:center;margin:0 0 26px;padding:clamp(18px,3vw,30px);border-radius:28px;background:linear-gradient(135deg,#4a1d5e,#2a2166 58%,#13295f);border:2px solid #5a4396;box-shadow:var(--k-shadow)}
.ks-head{grid-area:head}
.kp-main .ks-hero h1{margin:.1em 0 .3em;color:var(--k-ink);font-size:clamp(2rem,5vw,3.2rem)}
.kp-main .ks-lede{grid-area:lede;font-size:1.15rem;color:var(--k-ink-2);margin:0 0 6px;max-width:36em}
.kp-main .ks-note{grid-area:note;margin:0;color:var(--k-muted);font-size:.95rem;font-weight:700}
.ks-hero-art{grid-area:art;align-self:end;justify-self:center;width:100%}
.ks-hero-art img{display:block;width:100%;height:auto;max-height:280px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(2,5,26,.45))}

/* ---------- Scene picker: phones get a compact picture-and-name row, wider screens a picture card ---------- */
.ks-picker{margin:0 0 22px}
.kp-main .ks-picker h2{margin:0 0 12px;font-size:1.3rem}
.ks-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ks-pick{display:flex;align-items:center;gap:8px;min-width:0;min-height:64px;padding:6px 8px 6px 6px;border-radius:18px;border:3px solid var(--k-line);background:var(--k-surface);color:var(--k-ink);font:800 .88rem/1.2 "Manrope",Inter,sans-serif;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ks-pick img{display:block;flex:none;width:62px;height:auto;aspect-ratio:480/268;border-radius:10px;object-fit:cover}
.ks-pick-title{min-width:0;overflow-wrap:break-word}
.ks-pick:hover{background:var(--k-surface-2);border-color:#3b4a9a}
.ks-pick[aria-pressed="true"]{border-color:var(--k-gold);background:var(--k-surface-3);box-shadow:0 0 0 3px rgba(246,201,108,.22)}
.ks-pick:focus-visible,.ks-opt:focus-visible,.ks-inst:focus-visible,.ks-play:focus-visible,.ks-tune:focus-visible{outline:3px solid var(--k-gold);outline-offset:3px}
@media(min-width:600px){
 .ks-picks{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
 .ks-pick{flex-direction:column;align-items:stretch;gap:8px;padding:8px;text-align:center;font-size:1rem}
 .ks-pick img{width:100%}
}

/* ---------- Stage: one scene at a time ---------- */
.ks-stage{position:relative}
.ks-song{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"pic" "title" "words" "opts" "dock";gap:14px;padding:clamp(10px,2.2vw,22px);border-radius:28px;background:var(--k-surface);border:2px solid var(--k-line);box-shadow:var(--k-shadow);scroll-margin-top:96px}
.ks-pic{grid-area:pic;margin:0;border-radius:20px;overflow:hidden;background:#0d1333;aspect-ratio:960/536}
.ks-pic img{display:block;width:100%;height:100%;object-fit:cover}
.kp-main .ks-title{grid-area:title;margin:0;font-size:clamp(1.5rem,4.4vw,2.1rem)}
.ks-slot-opts{grid-area:opts}
.ks-slot-dock{grid-area:dock;position:sticky;bottom:10px;z-index:5}
.ks-slot-opts:empty,.ks-slot-dock:empty{display:none}
.ks-lyrics,.ks-band{grid-area:words}

/* ---------- The words: every syllable is its own span, so the one being sung can light up ---------- */
.ks-lyrics{display:grid;gap:12px;align-content:start}
.ks-verse{padding:12px 14px 14px;border-radius:20px;background:rgba(7,11,33,.45);border:1px solid var(--k-line-soft)}
.kp-main .ks-verse-n{margin:0 0 4px 6px;color:var(--k-gold);font-size:.8rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.kp-main .ks-line{margin:0;max-width:none;padding:2px 6px;border-radius:14px;color:var(--k-ink);font:700 clamp(1.05rem,4.6vw,1.45rem)/1.75 "Manrope",Inter,sans-serif;scroll-margin:130px 0 120px}
.ks-w{border-radius:10px;transition:background .1s,box-shadow .1s}
.ks-s{border-radius:8px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background .1s,color .1s,box-shadow .1s}
.ks-line.is-line{background:rgba(255,255,255,.07)}
.ks-line.is-read{background:rgba(246,201,108,.18)}
.ks-w.is-word{background:rgba(246,201,108,.2);box-shadow:0 0 0 2px rgba(246,201,108,.2)}
.ks-s.is-done{color:var(--k-gold)}
.ks-s.is-now{background:var(--k-gold);color:#1b1438;box-shadow:0 0 0 2px var(--k-gold)}

/* ---------- Play dock: Play/Stop and the four instruments. On phones it stays at the bottom of the screen while the words scroll. ---------- */
.ks-dock{display:flex;align-items:center;justify-content:space-between;gap:clamp(6px,1.6vw,12px);padding:9px;border-radius:999px;background:var(--k-surface-3);border:2px solid #3b4a9a;box-shadow:0 10px 30px rgba(2,4,20,.55)}
.ks-play{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:64px;height:64px;padding:0;border-radius:999px;border:0;background:var(--k-gold);color:#1b1438;font:800 1.15rem/1 "Manrope",Inter,sans-serif;cursor:pointer;touch-action:manipulation;box-shadow:0 4px 0 #946f1c;-webkit-tap-highlight-color:transparent}
.ks-play svg{width:30px;height:30px;fill:currentColor}
.ks-play .ks-i-stop{display:none}
.ks-play.is-playing{background:var(--k-coral);box-shadow:0 4px 0 #99443a}
.ks-play.is-playing .ks-i-play{display:none}
.ks-play.is-playing .ks-i-stop{display:block}
.ks-play-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ks-insts{display:flex;flex:1 1 auto;justify-content:flex-end;gap:inherit;min-width:0}
.ks-inst{--ks-c:var(--k-gold);position:relative;flex:1 1 56px;min-width:56px;max-width:66px;aspect-ratio:1;display:grid;place-items:center;padding:0;border-radius:50%;border:3px solid var(--ks-c);background:var(--k-surface);color:var(--k-ink);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .1s,transform .1s}
.ks-inst[data-inst="drum"]{--ks-c:var(--k-coral)}
.ks-inst[data-inst="shaker"]{--ks-c:var(--k-mint)}
.ks-inst[data-inst="bell"]{--ks-c:var(--k-gold)}
.ks-inst[data-inst="clap"]{--ks-c:var(--k-sky)}
.ks-inst svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ks-inst:hover{background:var(--k-surface-2)}
.ks-inst.is-hit{background:var(--ks-c);color:#1b1438;transform:scale(.92)}
.ks-inst-name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ks-key{position:absolute;right:-2px;top:-2px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ks-c);color:#1b1438;font:800 .75rem/1 "Manrope",Inter,sans-serif}

/* ---------- Options ---------- */
.ks-options{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px}
.ks-mode-box{display:grid;gap:6px;flex:1 1 100%}
.ks-opt-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ks-opt-label{flex:0 0 100%;color:var(--k-muted);font-size:.8rem;font-weight:800;letter-spacing:.04em}
.ks-opt,.ks-tune{min-height:48px;padding:0 16px;border-radius:999px;border:2px solid var(--k-line);background:var(--k-surface);color:var(--k-ink-2);font:800 .95rem/1.15 "Manrope",Inter,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ks-opt:hover,.ks-tune:hover{background:var(--k-surface-2);border-color:#3b4a9a}
.ks-opt[aria-pressed="true"],.ks-tune[aria-pressed="true"]{background:var(--k-gold);border-color:var(--k-gold);color:#1b1438}
.kp-main .ks-hint{flex:1 1 100%;margin:0;max-width:none;color:var(--k-muted);font-size:.85rem}
.ks-read{display:inline-flex;align-items:center;gap:10px;min-height:52px}
.ks-read svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Ritim's band: the tune picker and the beat light ---------- */
.ks-band{display:grid;gap:18px;align-content:start;padding:16px 18px 20px;border-radius:20px;background:rgba(7,11,33,.45);border:1px solid var(--k-line-soft)}
.kp-main .ks-band-text{margin:0;max-width:none;font-size:1.08rem;color:var(--k-ink)}
.ks-beat{display:flex;justify-content:center;gap:clamp(10px,3vw,18px);padding:8px 0}
.ks-beat-dot{width:clamp(40px,11vw,52px);aspect-ratio:1;border-radius:50%;background:var(--k-surface-3);border:3px solid var(--k-line);transition:background .08s,border-color .08s,transform .12s}
.ks-beat-dot.is-on{background:var(--k-gold);border-color:var(--k-gold);transform:scale(1.14)}
.ks-beat-dot:first-child.is-on{background:var(--k-coral);border-color:var(--k-coral)}
.kp-main .ks-tunes-title{margin:0 0 8px;color:var(--k-gold);font-size:.8rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.ks-tune-list{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- For grown-ups ---------- */
.ks-grownups{margin-top:30px;padding:22px 24px;border-radius:24px;background:rgba(7,11,33,.55);border:1px dashed #3a4588}
.kp-main .ks-grownups h2{font-size:1.2rem;margin:0 0 8px}
.kp-main .ks-grownups p{color:var(--k-muted);margin:0}

/* ---------- Wide screens: picture, title and controls on the left, the words on the right ---------- */
@media(min-width:900px){
 .ks-song{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"pic words" "title words" "dock words" "opts words";column-gap:26px;align-items:start}
 .ks-slot-dock{position:static}
 .ks-dock{border-radius:999px}
 .ks-play{padding:0 26px}
 .ks-play-text{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
 .ks-inst{flex:none;width:64px;min-width:0}
 .ks-insts{flex:0 1 auto;margin-left:auto}
}
@media(max-width:600px){
 .ks-hero{grid-template-areas:"head art" "lede lede" "note note";padding:18px 16px;border-radius:22px}
 .ks-hero-art{align-self:center}
 .ks-hero-art img{max-height:150px}
 .ks-song{border-radius:22px;padding:10px}
 .ks-verse{padding:10px 8px 12px}
 .kp-main .ks-line{padding:2px 4px}
}
@media(max-width:380px){
 .ks-pick{font-size:.82rem}
 .ks-pick img{width:54px}
}
@media(hover:none){
 .ks-key,.ks-keys{display:none}
}
@media(prefers-reduced-motion:reduce){
 .ks-s,.ks-inst,.ks-beat-dot{transition:none}
 .ks-inst.is-hit,.ks-beat-dot.is-on{transform:none}
}