/* Little Lab prototype — calm palette, huge targets, no clutter */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: ui-rounded, "Segoe UI", system-ui, sans-serif;
  background: #FDF6EC; color: #3D3A36;
  overscroll-behavior: none; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* Splash / all done */
.splash-inner { margin: auto; text-align: center; padding: 24px; }
.splash-emoji { font-size: 96px; }
.splash-sub { opacity: 0.6; margin-top: -8px; }
h1 { font-size: 40px; margin: 8px 0; }
.big-btn {
  font-size: 28px; padding: 20px 40px; border: none; border-radius: 24px;
  background: #7FB685; color: #fff; box-shadow: 0 4px 0 #5E9165; cursor: pointer;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #5E9165; }
.wave { animation: wave 1.2s ease-in-out infinite; display: inline-block; transform-origin: 70% 70%; }
@keyframes wave { 0%,100% { transform: rotate(0); } 50% { transform: rotate(18deg); } }

/* Shelf */
.shelf-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; }
.shelf-header h2 { font-size: 28px; margin: 0; }
.shelf-cards { display: flex; flex-wrap: wrap; gap: 16px; padding: 20px; overflow-y: auto; }
.card {
  flex: 1 1 220px; min-height: 140px; border-radius: 24px; border: none; cursor: pointer;
  background: #fff; box-shadow: 0 3px 0 #E4D9C8; font-size: 20px; padding: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.card .card-emoji { font-size: 52px; }
.card:active { transform: translateY(2px); box-shadow: 0 1px 0 #E4D9C8; }
.hint { text-align: center; opacity: 0.5; font-size: 13px; padding-bottom: 10px; }

/* Parent-gated buttons: require press-and-hold */
.parent-btn {
  width: 52px; height: 52px; border-radius: 50%; border: none; background: #EFE6D7;
  font-size: 22px; cursor: pointer; position: relative;
}
.parent-btn.holding { background: #D9CBB3; }
.stage-home { position: absolute; top: 12px; right: 12px; z-index: 5; opacity: 0.65; }

/* Stage */
#stage { background: #FDF6EC; }
#stageInner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 20px; }
.prompt-line { font-size: 24px; text-align: center; min-height: 32px; opacity: 0.85; padding: 0 60px; }

.choices { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; align-items: center; }
.choice {
  min-width: 160px; min-height: 160px; border-radius: 32px; border: none; cursor: pointer;
  background: #fff; box-shadow: 0 5px 0 #E4D9C8; font-size: 84px; padding: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform 0.15s ease;
}
.choice:active { transform: scale(0.96); }
.choice.correct-flash { animation: pop 0.6s ease; background: #EAF6EC; }
.choice.redirect-flash { animation: nudge 0.5s ease; }
@keyframes pop { 30% { transform: scale(1.12); } }
@keyframes nudge { 25% { transform: translateX(-8px);} 75% { transform: translateX(8px);} }

/* Wait cue: the expectant lean-in */
.wait-cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-size: 44px; animation: breathe 1.6s ease-in-out infinite; pointer-events: none;
}
@keyframes breathe { 0%,100% { transform: translateX(-50%) scale(1); opacity: 0.55; } 50% { transform: translateX(-50%) scale(1.18); opacity: 0.95; } }

/* Drag pattern */
.drag-scene { position: relative; width: min(92vw, 720px); height: min(64vh, 440px); }
.drop-zone {
  position: absolute; border: 3px dashed #C9B892; border-radius: 24px;
  display: flex; align-items: center; justify-content: center; font-size: 15px; color: #A0906F;
}
.drop-zone.glow { border-color: #7FB685; box-shadow: 0 0 18px #7FB68588; }
.drop-zone.filled { border-style: solid; background: #EAF6EC; }
.scene-fixture { position: absolute; font-size: 90px; }
.draggable {
  position: absolute; font-size: 72px; cursor: grab; touch-action: none; z-index: 10;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.15)); transition: left 0.25s ease, top 0.25s ease;
}
.draggable.dragging { transition: none; cursor: grabbing; transform: scale(1.1); }

/* Song pattern */
.song-scene { font-size: 96px; text-align: center; }
.song-scene .lean { animation: lean 1.4s ease-in-out infinite; display: inline-block; }
@keyframes lean { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-10deg) translateY(-6px); } }

/* Parent menu / recording */
.panel { margin: auto; background: #fff; border-radius: 24px; padding: 28px; width: min(92vw, 460px); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
.menu-btn { font-size: 18px; padding: 14px 18px; border: none; border-radius: 14px; background: #7FB685; color: #fff; cursor: pointer; }
.menu-btn.subtle { background: #EFE6D7; color: #3D3A36; }
.menu-btn:disabled { opacity: 0.45; cursor: default; }
.menu-row { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.fineprint { font-size: 12px; opacity: 0.55; }
#parentMenu { background: rgba(61,58,54,0.35); }

.rec-header { display: flex; gap: 14px; align-items: center; padding: 14px 18px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.rec-header h2 { margin: 0; font-size: 20px; }
.rec-body { flex: 1; overflow-y: auto; padding: 18px; }
.rec-activity { margin-bottom: 14px; }
.rec-activity > button { width: 100%; text-align: left; font-size: 17px; }
table.lines { width: 100%; border-collapse: collapse; margin-top: 8px; background: #fff; border-radius: 12px; overflow: hidden; }
table.lines td, table.lines th { padding: 8px 10px; border-bottom: 1px solid #F0E8DA; font-size: 14px; text-align: left; vertical-align: top; }
td.mono { font-family: ui-monospace, monospace; font-size: 12px; white-space: nowrap; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.pill.have { background: #EAF6EC; color: #3E7047; }
.pill.miss { background: #F6ECEA; color: #8C4A3F; }
.line-actions button { font-size: 12px; padding: 6px 9px; margin-right: 4px; border-radius: 8px; border: none; cursor: pointer; background: #EFE6D7; }
.line-actions button.rec-live { background: #D9534F; color: #fff; }

/* Teleprompter */
#teleprompter { background: #201D1A; color: #FDF6EC; align-items: center; justify-content: center; gap: 24px; }
.tp-text { font-size: clamp(28px, 6vw, 54px); text-align: center; padding: 0 8vw; line-height: 1.3; }
.tp-text .gap { color: #7FB685; font-size: 0.6em; display: block; margin-top: 18px; }
.tp-meta { opacity: 0.6; font-size: 15px; font-family: ui-monospace, monospace; }
.tp-controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 640px) {
  .choice { min-width: 120px; min-height: 120px; font-size: 60px; }
  .prompt-line { font-size: 19px; padding: 0 48px; }
}

/* Flesh-out pass additions */
.sound-replay {
  font-size: 34px; width: 76px; height: 76px; border-radius: 50%; border: none;
  background: #fff; box-shadow: 0 4px 0 #E4D9C8; cursor: pointer;
}
.sound-replay:active { transform: translateY(2px); box-shadow: 0 1px 0 #E4D9C8; }
.song-caption { font-size: 28px; min-height: 76px; }
.song-caption .blank {
  color: #7FB685; border-bottom: 4px dotted #7FB685; letter-spacing: 2px;
}
.song-caption .resolved { color: #5E9165; font-weight: 700; animation: pop 0.6s ease; display: inline-block; }
.song-scene .sway { animation: sway 1.1s ease-in-out infinite; display: inline-block; }
@keyframes sway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.draggable.wiggle { animation: wiggleAnim 0.9s ease; }
@keyframes wiggleAnim {
  0%,100% { transform: rotate(0); }
  20% { transform: rotate(-12deg) scale(1.08); }
  40% { transform: rotate(10deg) scale(1.08); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(6deg); }
}

.boot-error {
  margin-top: 18px; max-width: 480px; font-size: 13px; text-align: left;
  background: #F6ECEA; color: #8C4A3F; border-radius: 12px; padding: 12px 14px;
  font-family: ui-monospace, monospace; user-select: text; -webkit-user-select: text;
}