@import url('/lib/audio/sound.css');
@import url('/library/drinks.css');

/*
  Rhyme Time (rhymes.js). The shelf is song cards with a moving picture's
  first moment on each; the player is the picture, then the words on a
  cream song sheet (cream in both themes, plum ink, as the books are) with
  a gold ball bouncing along them.
*/
.rhymes { --tint: var(--mint); --sheet: #fffaf2; --sheet-ink: #4a2545; max-width: 52rem; }
.rt-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.4rem; }
.rt-top .crumb { margin: 0; }
.rhymes .drinks__cup { width: 2.2rem; }
.rhymes .drinks { min-height: 2.2rem; }
.rhymes h1 { margin: 0.2rem 0 0.4rem; }
.rhymes .lede { color: var(--ink-soft); max-width: 36rem; margin: 0 0 1.25rem; }
.linkish { background: none; border: 0; box-shadow: none; padding: 0; font: inherit; color: var(--candyfloss-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }

/* The shelf ------------------------------------------------------------- */

.shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: 1rem; }
.song-card {
  display: grid; gap: 0.45rem; width: 100%; height: 100%; padding: 0.6rem 0.6rem 0.75rem; text-align: left;
  border-radius: 1.2rem; border: 2px solid var(--rule); background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow); transform: rotate(var(--tilt, 0deg)); transition: transform 0.2s ease;
}
.song-card:hover, .song-card:focus-visible { transform: rotate(0deg) translateY(-3px); }
.song-card .cover svg { display: block; width: 100%; height: auto; }
.song-card .name { font: 600 var(--step-0, 1.05rem)/1.2 var(--font-display); }
.song-card .badge { justify-self: start; font-size: 0.8rem; padding: 0.1rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--candyfloss) 30%, var(--paper)); }
.song-card .badge.sung { background: color-mix(in srgb, var(--mint) 55%, var(--paper)); }

/* The player ------------------------------------------------------------ */

.player { position: relative; display: grid; gap: 0.75rem; }
@media (min-width: 52rem) and (min-aspect-ratio: 5/4) {
  .player { grid-template-columns: 1.15fr 1fr; align-items: start; }
}
.stage svg { display: block; width: 100%; height: auto; border-radius: 1rem; box-shadow: var(--shadow); }
.singing { position: relative; display: grid; gap: 0.4rem; }
.sheet {
  position: relative; overflow: hidden; height: 9.6rem; padding: 2rem 1rem 0.6rem;
  border-radius: 1.2rem; background: var(--sheet); color: var(--sheet-ink);
  border: 2px solid color-mix(in srgb, var(--mint) 70%, var(--sheet));
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
}
@media (max-width: 30rem) { .song-card .name { font-size: 0.95rem; } }
@media (min-width: 52rem) and (min-aspect-ratio: 5/4) { .sheet { height: 12.5rem; } }
.lines { position: relative; transition: transform 0.45s ease; }
.line { margin: 0 0 0.5rem; font: 600 1.35rem/1.45 var(--font-display); color: color-mix(in srgb, var(--sheet-ink) 45%, var(--sheet)); transition: color 0.3s, font-size 0.3s; }
.line.current { color: var(--sheet-ink); font-size: 1.6rem; }
.line.past { opacity: 0.5; }
.syl { transition: color 0.12s; border-radius: 0.3rem; }
.syl.sung { color: var(--candyfloss-deep); color: #c2337f; }
.syl.now { background: color-mix(in srgb, #f2b632 30%, transparent); }
.ball {
  position: absolute; left: 0; top: 0; width: 1rem; height: 1rem; margin: -1rem 0 0 -0.5rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6c9, #f2b632 60%, #d9961a); border: 2px solid #4a2545; pointer-events: none;
}
.status { margin: 0; min-height: 1.4em; font-size: var(--step--1, 0.9rem); color: var(--ink-soft); text-align: center; }

.done {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 0.5rem; padding: 1rem; text-align: center;
  border-radius: 1.2rem; background: color-mix(in srgb, var(--sheet) 94%, transparent); color: var(--sheet-ink);
  border: 2px solid color-mix(in srgb, var(--mint) 70%, var(--sheet)); box-shadow: var(--shadow);
  animation: rt-pop 0.4s ease;
}
.done button { background: #fff; color: #4a2545; border-color: #f3d6e6; }
.done button:first-child { background: #ff8fc7; border-color: #ff8fc7; color: #3a1530; }
.done p { margin: 0; }
.done-big { font: 700 2rem/1 var(--font-display); color: #c2337f; }
.done-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.4rem; }
@keyframes rt-pop { from { opacity: 0; transform: scale(0.94); } }

.play-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; margin: 1rem 0 0.75rem; }
.big-play { font-size: 1.25rem; padding: 0.6rem 1.6rem; min-width: 10rem; background: var(--candyfloss); border-color: var(--candyfloss); color: #3a1530; }
.big-play[aria-pressed='true'] { background: var(--lilac); border-color: var(--lilac); }

.options { display: grid; gap: 0.6rem; justify-items: center; }
.chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; }
.chips-label { font-size: 0.9rem; color: var(--ink-soft); margin-right: 0.2rem; }
.chip, .switches > button { padding: 0.3rem 0.85rem; font-size: 0.9rem; }
.chip[aria-pressed='true'], .switches > button[aria-pressed='true'] { background: var(--mint); border-color: var(--mint); color: #173d31; }
.switches { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; }
.hint { margin: 0; font-size: 0.85rem; color: var(--ink-soft); text-align: center; max-width: 30rem; }

/* Old MacDonald's animals. */
.picker { margin-top: 0.9rem; text-align: center; }
.picker-label { margin: 0 0 0.4rem; font: 600 1rem/1.3 var(--font-display); }
.animals { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.animal {
  display: grid; justify-items: center; gap: 0; padding: 0.3rem 0.5rem 0.35rem; min-width: 4.6rem; border-radius: 1rem;
  background: #fffaf2; color: #4a2545; border: 2px solid var(--rule); font-size: 0.85rem; box-shadow: none;
}
.animal svg { display: block; }
.animal.been { opacity: 0.6; }
.animal.next { border-color: #c2337f; background: #ffe3f1; opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, #ff8fc7 45%, transparent); }
.animal:disabled { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .lines, .line, .song-card { transition: none; }
  .done { animation: none; }
}