/* Little Words — songs/shared/chant-engine.css
 *
 * Mobile-first at 375px, and the 320px floor is checked too because the
 * games wall found seven unstartable pages the day nobody checked it.
 * Every interactive element clears 44px on its shortest side.
 *
 * The beat is a CSS variable (--lwc-beat, written by the engine from the
 * piece's bpm) so the pulse animations run at the tempo of the actual
 * recording. Change the slow control and the whole stage slows with it.
 */

.lwc {
  --lwc-beat: 660ms;
  --lwc-green: #2F6B4F;
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 12px 28px;
  font-family: var(--lw-font-body, system-ui, sans-serif);
  color: var(--lw-ink, #1E2A4A);
}

/* ---------------------------------------------------------------- stage */
.lwc-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  min-height: 190px;
  padding: 14px 10px 10px;
  border-radius: var(--lw-radius-lg, 24px);
  background:
    radial-gradient(120% 90% at 50% 108%, #FFE9DA 0%, rgba(255,233,218,0) 62%),
    linear-gradient(180deg, #FFF7EE 0%, #FFF0E4 100%);
  border: 1px solid var(--lw-line, #EFE9DF);
  overflow: hidden;
}

/* the room breathes on the beat while the chant is running — the visual
   half of the pulse a child entrains to */
.lwc.playing .lwc-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 60% at 50% 100%, rgba(242,139,110,.20), rgba(242,139,110,0) 70%);
  animation: lwc-pulse var(--lwc-beat) ease-out infinite;
}
@keyframes lwc-pulse { 0% { opacity: .85; } 55%, 100% { opacity: 0; } }

.lwc-buddy { flex: 0 0 auto; }
.lwc-buddy img {
  width: 132px; height: 132px;
  object-fit: contain;
  display: block;
  transform-origin: 50% 88%;
}
.lwc.playing .lwc-buddy img { animation: lwc-bob calc(var(--lwc-beat) * 2) ease-in-out infinite; }
@keyframes lwc-bob {
  0%, 100% { translate: 0 0; rotate: -1.5deg; }
  50%      { translate: 0 -7px; rotate: 1.5deg; }
}

.lwc-pic {
  flex: 0 0 auto;
  width: 118px; height: 118px;
  border-radius: 20px;
  background: #fff;
  border: 3px solid var(--lw-line-strong, #CFC7B9);
  box-shadow: var(--lw-shadow-soft, 0 2px 10px rgba(30,42,74,.07));
  display: grid; place-items: center;
  opacity: 0; scale: .8;
  transition: opacity 220ms ease, scale 220ms var(--lw-ease-pop, cubic-bezier(.34,1.56,.64,1));
}
.lwc-pic.on { opacity: 1; scale: 1; }
.lwc-pic img { width: 100%; height: 100%; object-fit: contain; border-radius: 17px; }
.lwc-pic.pop { animation: lwc-pop 420ms var(--lw-ease-pop, cubic-bezier(.34,1.56,.64,1)); }
@keyframes lwc-pop { 0% { scale: .72; } 60% { scale: 1.09; } 100% { scale: 1; } }

/* --------------------------------------------------------------- lyrics */
.lwc-lyric {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 8px;
  min-height: 84px;
  margin: 14px 0 10px;
  align-content: center;
}
.lwc-w {
  font-family: var(--lw-font-display, system-ui);
  font-weight: 800;
  font-size: clamp(1.3rem, 6.4vw, 2rem);
  line-height: 1.15;
  padding: 2px 8px;
  border-radius: 12px;
  color: var(--lw-ink, #1E2A4A);
  transition: color 120ms linear, background 120ms linear, scale 140ms var(--lw-ease-pop, ease);
}
.lwc-w.now {
  background: var(--lw-sun, #FFC94D);
  color: #3A2A00;
  scale: 1.14;
}
.lwc-w.dim { opacity: .38; }
.lwc-w-idle { color: var(--lw-primary-deep, #BE4327); opacity: .85; }

/* ------------------------------------------------------------- the gap */
.lwc-turn {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  min-height: 92px;
  padding: 6px 8px;
  border-radius: var(--lw-radius, 16px);
  transition: background 200ms linear;
}
.lwc.yourturn .lwc-turn { background: #E7F6EE; }
.lwc-turn-label {
  margin: 0;
  font-family: var(--lw-font-display, system-ui);
  font-weight: 800;
  font-size: clamp(1.05rem, 5vw, 1.4rem);
  color: var(--lwc-green);
  min-height: 1.2em;
}
/* lw-voice-viz.js mounts on these two; the base box is ours, the reaction
   is lw-feel.css's */
.lwt-mic { display: flex; align-items: center; gap: 10px; position: relative; }
.lwt-orb {
  position: relative;
  width: 74px; height: 74px;
  min-width: 44px; min-height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #E7F6EE;
  border: 4px solid #6BAF8D;
  transition: background 200ms linear, border-color 200ms linear;
}
.lwt-orb.off { background: #F1EFE9; border-color: #C6BFB2; }
.lwt-orb.off .lwt-orb-icon { opacity: .45; }
.lwt-orb.live { animation: lwt-pulse 1.5s ease-out infinite; }
@keyframes lwt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(107,175,141,.55); }
  70%  { box-shadow: 0 0 0 22px rgba(107,175,141,0); }
  100% { box-shadow: 0 0 0 0 rgba(107,175,141,0); }
}

/* -------------------------------------------------------------- progress */
.lwc-prog { display: flex; justify-content: center; gap: 5px; margin: 4px 0 12px; flex-wrap: wrap; }
.lwc-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lw-line-strong, #CFC7B9);
  transition: background 160ms linear, scale 160ms var(--lw-ease-pop, ease);
}
.lwc-dot.gap { background: #D6E9DE; }
.lwc-dot.done { background: var(--lw-primary, #F28B6E); }
.lwc-dot.gap.done { background: #6BAF8D; }
.lwc-dot.now { scale: 1.6; background: var(--lw-primary-deep, #BE4327); }

/* -------------------------------------------------------------- controls */
.lwc-bar { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lwc-play {
  min-height: 60px;
  min-width: 240px;
  padding: 12px 28px;
  border: none;
  border-radius: var(--lw-radius-round, 999px);
  background: var(--lw-primary, #F28B6E);
  color: #fff;
  font-family: var(--lw-font-display, system-ui);
  font-weight: 800;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--lw-primary-pressed, #C24E36);
  transition: translate 90ms ease, box-shadow 90ms ease;
}
.lwc-play:active { translate: 0 3px; box-shadow: 0 1px 0 var(--lw-primary-pressed, #C24E36); }
.lwc-play:focus-visible, .lwc-t:focus-visible, .lwc-cue:focus-visible {
  outline: 3px solid var(--lw-focus, #1E2A4A); outline-offset: 3px;
}

.lwc-toggles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lwc-t {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: var(--lw-radius-round, 999px);
  border: 2px solid var(--lw-line-strong, #CFC7B9);
  background: #fff;
  color: var(--lw-ink, #1E2A4A);
  font-family: var(--lw-font-body, system-ui);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
}
.lwc-t.on { border-color: var(--lw-primary, #F28B6E); background: var(--lw-bg-warm, #FFF0E8); color: var(--lw-primary-deep, #BE4327); }
.lwc-t-ico { font-size: 1.15rem; line-height: 1; }

/* ------------------------------------------------------------------ cues */
.lwc-cues {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.lwc-cue {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 108px;
  padding: 8px 4px;
  border-radius: var(--lw-radius, 16px);
  border: 2px solid var(--lw-line, #EFE9DF);
  background: #fff;
  font-family: var(--lw-font-body, system-ui);
  font-weight: 700;
  font-size: .86rem;
  color: var(--lw-ink, #1E2A4A);
  cursor: pointer;
}
.lwc-cue img { width: 100%; max-width: 72px; height: auto; aspect-ratio: 1; object-fit: contain; }
.lwc-cue.pop { animation: lwc-pop 380ms var(--lw-ease-pop, cubic-bezier(.34,1.56,.64,1)); }

.lwc-note {
  margin: 22px 0 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--lw-ink-soft, #4A4A4A);
  text-align: center;
}
.lwc-note a { color: var(--lw-primary-deep, #BE4327); }
.lwc-err { padding: 24px; text-align: center; }

/* --------------------------------------------------------------- consent */
.lwc-consent {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(30,42,74,.55);
}
.lwc-consent-card {
  background: #fff;
  border-radius: var(--lw-radius-lg, 24px);
  padding: 22px 20px;
  max-width: 420px;
  box-shadow: var(--lw-shadow, 0 6px 24px rgba(30,42,74,.10));
}
.lwc-consent-card h2 { font-family: var(--lw-font-display, system-ui); margin: 0 0 10px; font-size: 1.3rem; }
.lwc-consent-card p { margin: 0 0 10px; line-height: 1.5; font-size: .95rem; }
.lwc-consent-sub { color: var(--lw-ink-soft, #4A4A4A); font-size: .88rem !important; }
.lwc-consent-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.lwc-consent-yes { min-width: 0; flex: 1 1 200px; font-size: 1rem; }
.lwc-consent-no { flex: 0 0 auto; }

/* ----------------------------------------------------------- narrow phone */
@media (max-width: 400px) {
  .lwc { padding: 10px 8px 24px; }
  .lwc-stage { min-height: 168px; gap: 4px; padding: 12px 6px 8px; }
  .lwc-buddy img { width: 108px; height: 108px; }
  .lwc-pic { width: 96px; height: 96px; }
  .lwc-play { min-width: 0; width: 100%; font-size: 1.1rem; padding: 12px 16px; }
  .lwc-t { padding: 8px 11px; font-size: .88rem; }
  .lwc-cues { gap: 6px; }
  .lwc-cue { font-size: .78rem; min-height: 96px; padding: 6px 2px; }
  .lwt-orb { width: 62px; height: 62px; }
}
@media (max-width: 340px) {
  .lwc-buddy img { width: 92px; height: 92px; }
  .lwc-pic { width: 82px; height: 82px; }
  .lwc-t-txt { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lwc.playing .lwc-stage::after,
  .lwc.playing .lwc-buddy img,
  .lwc-pic.pop, .lwc-cue.pop, .lwt-orb.live { animation: none; }
  .lwc-pic, .lwc-w, .lwc-dot { transition: none; }
}