/* Learn mode and the song shelf: big, friendly, touch-first (iPad). */
:root {
  --dock-h: 190px;
}
body.kid {
  background: #f3efe6;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;          /* no double-tap zoom on buttons */
  font-size: 17px;
}
body.kid button { touch-action: manipulation; }

.kbtn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
  border-radius: 14px; border: 2px solid #e4ddcf; background: #fff; font-weight: 600; font-size: 17px;
  text-decoration: none; color: var(--ink); cursor: pointer;
}
.kbtn:active { transform: scale(.97); }
.kbtn[aria-pressed="true"] { background: var(--kid-accent); border-color: var(--kid-accent); color: #fff; }
.kbtn.round { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; }
.kbtn.round svg { width: 26px; height: 26px; }

/* ---------- header ---------- */
.ktop {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid #e8e2d6;
}
.ktitle { flex: 1; min-width: 0; }
.ktitle h1 { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktitle div { color: var(--muted); font-size: 15px; }
.ktitle div:empty { display: none; }

/* ---------- score ---------- */
.kmain { padding: 16px 12px calc(var(--dock-h) + 24px); }
.kpaper { background: #fff; border-radius: 18px; box-shadow: 0 2px 14px rgba(60,40,0,.08); max-width: 1100px; margin: 0 auto; padding: 18px 10px; }
.kmsg { text-align: center; font-size: 20px; color: var(--muted); padding: 60px 20px; }
.grownups { display: block; text-align: center; margin: 28px auto 0; color: #a39b8c; font-size: 14px; }

.kpaper { cursor: pointer; }

/* ---------- dock ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border-top: 1px solid #e6dfd2; box-shadow: 0 -4px 20px rgba(60,40,0,.08);
  padding: 8px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.scrubrow { display: flex; align-items: center; gap: 14px; }
.barlabel { font-size: 15px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }
.controls { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; padding: 6px 0 4px; }
.transport { display: flex; align-items: center; gap: 12px; }
.play {
  width: 72px; height: 72px; border-radius: 50%; border: none; background: var(--kid-accent); color: #fff;
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(106,75,216,.4); cursor: pointer;
}
.play svg { width: 34px; height: 34px; }
.play:active { transform: scale(.95); }
.play.on { background: #4b32b5; }
.kspin { width: 28px; height: 28px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.9s linear infinite; }

/* range inputs: big thumbs for fingers */
.dock input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 40px; margin: 0; }
.dock input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 6px; background: #e9e3f8; }
.dock input[type=range]::-moz-range-track { height: 10px; border-radius: 6px; background: #e9e3f8; }
.dock input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%;
  background: #fff; border: 3px solid var(--kid-accent); box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.dock input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--kid-accent); }
.scrub { flex: 1; }
.speedbox { display: grid; gap: 0; justify-items: center; }
.speedtop { display: flex; align-items: center; gap: 8px; font-size: 24px; }
.speed { width: 200px; }
.speedlabel { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.handsbox { display: grid; gap: 4px; justify-items: start; }
.small { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

.kseg { display: inline-flex; background: #f1ece2; border-radius: 14px; padding: 4px; gap: 4px; align-items: center; }
.kseg button { min-height: 44px; padding: 0 14px; border: none; border-radius: 10px; background: transparent; font-weight: 600; font-size: 16px; }
.kseg button[aria-pressed="true"] { background: #fff; color: var(--kid-accent); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.loop { margin-left: auto; }
.loop[aria-pressed="true"] { background: #ffc400; border-color: #ffc400; color: #3a2a00; }

/* ---------- keyboard ---------- */
.keyswrap { padding-top: 6px; }
.keys { position: relative; display: flex; height: 92px; user-select: none; -webkit-user-select: none; touch-action: none; }
.key.white {
  flex: 1; position: relative; background: #fff; border: 1px solid #cfc8bb; border-top: none; border-radius: 0 0 8px 8px;
  margin-right: -1px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 6px;
  transition: background .08s;
}
.key.white .lbl { font-size: 12px; color: #9b9384; font-weight: 600; }
.key.white.c .lbl { color: #4e473c; }
.key .mid { position: absolute; bottom: 24px; width: 7px; height: 7px; border-radius: 50%; background: #c9c0ae; }
.key.black {
  position: absolute; top: 0; height: 58%; background: #2a2622; border-radius: 0 0 6px 6px; z-index: 2;
  box-shadow: inset 0 -3px 0 rgba(255,255,255,.12);
}
.key.on.rh { background: var(--rh); }
.key.on.lh { background: var(--lh); }
.key.on .lbl { color: #fff; }
.key.pressed { background: #b9a9f0 !important; }

/* ---------- look panel ---------- */
.look {
  position: fixed; z-index: 30; top: 74px; right: max(16px, env(safe-area-inset-right)); width: min(480px, calc(100vw - 32px));
  background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.22); padding: 18px 20px; display: grid; gap: 14px;
}
.look h2 { margin: 0 0 2px; font-size: 20px; }
.lrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.llabel { font-weight: 600; }
.lval { min-width: 56px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.look .done { justify-self: end; background: var(--kid-accent); color: #fff; border-color: var(--kid-accent); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h) + 16px); z-index: 40;
  background: #2a2622; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 16px; max-width: 90vw;
}

/* ---------- the song shelf ---------- */
.shelf { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; }
.shelf-top { display: flex; align-items: center; gap: 14px; padding: max(14px, env(safe-area-inset-top)) 16px 8px; max-width: 1100px; margin: 0 auto; }
.shelf-top h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.02em; flex: 1; }
.shelf-top input { min-height: 48px; border-radius: 14px; border: 2px solid #e4ddcf; padding: 0 14px; font-size: 17px; width: min(280px, 45vw); }
.songs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.song {
  background: #fff; border-radius: 20px; box-shadow: 0 2px 14px rgba(60,40,0,.08); text-decoration: none; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .1s;
}
.song:active { transform: scale(.98); }
.song .thumb { height: 120px; overflow: hidden; display: flex; align-items: center; padding: 0 6px; }
.song .thumb > div { width: 100%; }
.song .band { height: 8px; }
.song .name { padding: 12px 16px 2px; font-size: 20px; font-weight: 750; line-height: 1.2; }
.song .by { padding: 0 16px 14px; color: var(--muted); font-size: 15px; min-height: 1em; }
.shelf .empty { font-size: 20px; }

@media (max-width: 920px) {
  .controls { gap: 10px 14px; }
  .speed { width: 140px; }
  .kseg button { padding: 0 11px; }
  .loop { padding: 0 12px; }
}
@media (max-width: 600px) {
  .keyswrap { display: none; }   /* a phone has no room for it */
}
@media (max-width: 700px) {
  .ktitle h1 { font-size: 19px; }
  .kbtn span { display: none; }
  .kbtn { padding: 0 12px; }
  .controls { gap: 10px 14px; }
  .speed { width: 140px; }
  .handsbox .small { display: none; }
  .loop span { display: none; }
  .keys { height: 70px; }
}
@media print {
  .ktop, .dock, .look, .grownups, .playhead, .loop-zone { display: none !important; }
  .kmain { padding: 0; }
}