/* Talkapic Piano — playful but calm; big keys, no flashing. */
:root {
  --bg: #eef4f8; --card: #fff; --text: #2b3a45; --accent: #5b9bd5;
  --accent-soft: #dceaf6; --go: #7cc47f; --line: #cfe0ee;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
html, body { margin: 0; height: 100%; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font-family: "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--card); border-bottom: 3px solid var(--line);
}
.topbar h1 { font-size: 1.4rem; color: var(--accent); margin: 0; }
.top-tools { display: flex; gap: 8px; }
.toggle {
  font-size: 1.2rem; background: #fff; border: 2px solid var(--line);
  border-radius: 12px; padding: 8px 12px; cursor: pointer; opacity: 0.55;
}
.toggle.on { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }

.play-row { padding: 12px 16px 6px; }
.play-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.play-title { font-size: 1.05rem; color: #6b7c88; }
.stop {
  font-size: 1rem; font-family: inherit; color: #b06b6b; background: #fff;
  border: 2px solid #e3c4c4; border-radius: 12px; padding: 8px 14px; cursor: pointer;
}
/* Single horizontal scroll strip of compact picture buttons */
.songs {
  display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto;
  padding-bottom: 4px; -webkit-overflow-scrolling: touch;
}
.song {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 62px; font-family: inherit; background: #fff; color: var(--text);
  border: 2px solid var(--accent-soft); border-radius: 14px; padding: 6px 4px; cursor: pointer;
}
.song:active { transform: translateY(2px); }
.song.active { background: var(--go); border-color: var(--go); }
.song .s-emoji { font-size: 1.7rem; line-height: 1; }
.song .s-name { font-size: 0.62rem; color: #6b7c88; line-height: 1.05; text-align: center; }
.song.active .s-name { color: #fff; }

/* Keyboard */
.kbd-wrap { flex: 1 1 auto; display: flex; align-items: flex-end; overflow-x: auto; padding: 14px; }
.keyboard {
  position: relative; display: flex; height: min(46vh, 300px); width: 100%;
  min-width: 760px; margin: 0 auto;
}
.wkey {
  position: relative; flex: 1 1 0; background: #fff; border: 1px solid #9fb0c0;
  border-radius: 0 0 9px 9px; margin: 0 1px; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,0.05);
}
.wkey .lbl { font-size: 1.1rem; font-weight: bold; color: #fff;
  background: var(--cd); width: 26px; height: 26px; line-height: 26px; border-radius: 50%; text-align: center; }
.keyboard.no-letters .wkey .lbl { display: none; }
.keyboard.colored .wkey { background: var(--c); }
.wkey.press { background: var(--accent-soft); }
.wkey.lit { background: var(--go); box-shadow: inset 0 0 0 3px #fff, 0 0 14px rgba(124,196,127,0.7); }

.bkey {
  position: absolute; top: 0; height: 62%; background: #2b3a45; border-radius: 0 0 7px 7px;
  z-index: 2; cursor: pointer; box-shadow: inset 0 -5px 0 rgba(255,255,255,0.12);
}
.bkey.press { background: #55707f; }
.bkey.lit { background: var(--go); box-shadow: 0 0 12px rgba(124,196,127,0.9); }

.foot { text-align: center; padding: 10px; }
.foot a { color: var(--accent); text-decoration: none; }
.hidden { display: none; }