* { box-sizing: border-box; }

:root {
  --fun: ui-rounded, "Arial Rounded MT Bold", "Comic Sans MS", "Chalkboard SE", "Trebuchet MS", sans-serif;
  --ink: #2b2350;
  --blue: #2f8cff;
  --blue-dark: #1a62c9;
  --sky: #3ec1ff;
  --pink: #ff4fa3;
  --yellow: #ffd23f;
  --orange: #ff8a00;
  --orange-dark: #c25e00;
  --green: #22c55e;
  --green-dark: #15803d;
  --purple: #8b5cf6;
  --red: #ff5a5a;
  --card: #ffffff;
  --rainbow: linear-gradient(90deg, #ff4fa3, #ff8a00, #ffd23f, #22c55e, #3ec1ff, #8b5cf6, #ff4fa3);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fun);
  color: var(--ink);
  background: linear-gradient(180deg, #8fd9ff 0%, #c9f0ff 55%, #e6fbff 100%) fixed;
  overflow-x: hidden;
}

/* Bubbles drifting up behind everything, like a puddle. */
.bubbles { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.bubbles i {
  position: absolute;
  bottom: -80px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.05) 70%);
  border: 2px solid rgba(255, 255, 255, 0.6);
  animation: bubble 14s linear infinite;
}
.bubbles i:nth-child(1) { left: 4%; animation-duration: 13s; }
.bubbles i:nth-child(2) { left: 14%; width: 22px; height: 22px; animation-duration: 9s; animation-delay: -3s; }
.bubbles i:nth-child(3) { left: 26%; width: 60px; height: 60px; animation-duration: 18s; animation-delay: -8s; }
.bubbles i:nth-child(4) { left: 38%; width: 18px; height: 18px; animation-duration: 10s; animation-delay: -1s; }
.bubbles i:nth-child(5) { left: 50%; animation-duration: 15s; animation-delay: -11s; }
.bubbles i:nth-child(6) { left: 62%; width: 28px; height: 28px; animation-duration: 11s; animation-delay: -6s; }
.bubbles i:nth-child(7) { left: 74%; width: 70px; height: 70px; animation-duration: 20s; animation-delay: -4s; }
.bubbles i:nth-child(8) { left: 84%; width: 20px; height: 20px; animation-duration: 8s; animation-delay: -2s; }
.bubbles i:nth-child(9) { left: 92%; width: 36px; height: 36px; animation-duration: 16s; animation-delay: -9s; }
.bubbles i:nth-child(10) { left: 46%; width: 14px; height: 14px; animation-duration: 7s; animation-delay: -5s; }

@keyframes bubble {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(24px, -55vh); }
  100% { transform: translate(-12px, -115vh); opacity: 0.6; }
}

/* Chunky buttons that squash when pressed. */
button {
  font: inherit;
  font-weight: 700;
  padding: 8px 20px;
  border: none;
  border-radius: 999px;
  background: var(--blue);
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--blue-dark);
  transition: transform 0.1s, box-shadow 0.1s, filter 0.15s;
}

button:hover { filter: brightness(1.08); transform: translateY(-1px); }
button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blue-dark); }
button.link, button.link:active { background: none; color: #5a5280; padding: 8px; box-shadow: none; transform: none; }
button.link:hover { color: var(--ink); text-decoration: underline; }

select, input {
  font: inherit;
  padding: 10px 14px;
  border: 3px solid #cfe6ff;
  border-radius: 14px;
  background: white;
  color: var(--ink);
}

input:focus, select:focus { outline: none; border-color: var(--sky); }

/* Login */

.login {
  max-width: 340px;
  margin: 14vh auto 0;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card);
  border: 5px solid var(--sky);
  border-radius: 28px;
  box-shadow: 0 8px 0 var(--blue-dark), 0 18px 40px rgba(20, 60, 120, 0.25);
  animation: card-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.login .buddy { font-size: 4rem; text-align: center; line-height: 1; animation: float 2.4s ease-in-out infinite; }
.login h1 { text-align: center; margin: 0; font-size: 2.2rem; }
.login button { padding: 12px; font-size: 1.3rem; background: var(--orange); box-shadow: 0 5px 0 var(--orange-dark); }
.login[hidden] { display: none; }
/* "Continue with Google", in Google's own style. */
.login .google-button { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; font-size: 1.05rem; background: white; color: #1f1f1f; border: 1px solid #747775; border-radius: 999px; box-shadow: none; text-decoration: none; font-weight: 600; }
.login .google-button[hidden] { display: none; }
.login-small { margin: -4px 0 0; font-size: 0.8rem; text-align: center; color: #5a5280; }
#error { color: var(--red); margin: 0; min-height: 1.2em; text-align: center; }
#error.good { color: var(--green-dark); }
.login-note, .login-links { margin: 0; text-align: center; color: #5a5280; }
.login a, .home a { color: var(--blue-dark); font-weight: 700; }
.login-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; color: #5a5280; }
.login-agree input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--blue); }

/* The home page (for anyone not logged in), and the privacy and terms pages. */

.home-nav { display: flex; align-items: center; gap: 16px; max-width: 1000px; margin: 0 auto; padding: 16px; white-space: nowrap; }
@media (max-width: 420px) {
  .home-nav { gap: 10px; padding: 12px; }
  .home .home-logo { font-size: 1rem; }
  .home-nav .home-button { padding: 7px 12px; font-size: 0.95rem; }
  .home-wide { display: none; }
}
.home .home-logo { font-size: 1.4rem; font-weight: 700; color: var(--ink); text-decoration: none; margin-right: auto; }
.home .home-login { color: var(--ink); }
.home .home-button {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--orange);
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--orange-dark);
  transition: transform 0.1s, filter 0.15s;
}
.home .home-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.home .home-big { font-size: 1.4rem; padding: 14px 32px; box-shadow: 0 6px 0 var(--orange-dark); }
.home-hero { max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; text-align: center; }
.home-frog { font-size: 6rem; line-height: 1; animation: float 2.4s ease-in-out infinite; }
.home-hero h1 { font-size: clamp(2rem, 6vw, 3.4rem); margin: 12px 0; line-height: 1.15; }
.home-hero > p { font-size: 1.25rem; line-height: 1.5; margin: 0 0 24px; }
.home-small { color: #5a5280; font-size: 0.95rem; margin-top: 14px; }
.home-section { max-width: 1000px; margin: 0 auto; padding: 24px 16px; text-align: center; }
.home-section h2 { font-size: 2rem; margin: 0 0 12px; }
.home-lead { max-width: 680px; margin: 0 auto 20px; font-size: 1.15rem; line-height: 1.5; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-bottom: 20px; }
.home-card, .home-list, .home-doc {
  background: var(--card);
  border: 4px solid var(--sky);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--blue-dark), 0 14px 30px rgba(20, 60, 120, 0.18);
}
.home-card { padding: 20px; }
.home-card > span { font-size: 2.6rem; }
.home-card h3 { margin: 6px 0; font-size: 1.35rem; }
.home-card p { margin: 0; line-height: 1.45; }
.home-list { list-style: none; max-width: 680px; margin: 0 auto; padding: 12px 24px; text-align: left; font-size: 1.1rem; }
.home-list li { padding: 8px 0; line-height: 1.4; }
.home-list li + li { border-top: 2px dashed #cfe6ff; }
.home .home-amount { font-size: 2.2rem; font-weight: 700; margin: 4px 0 10px; color: var(--blue-dark); }
.home-amount small { font-size: 1rem; color: #5a5280; }
.home-footer { text-align: center; padding: 32px 16px 48px; color: #5a5280; }
.home-doc { max-width: 760px; margin: 0 auto 48px; padding: 8px 28px 24px; line-height: 1.55; }
.home-doc h1 { margin-bottom: 0; }
.home-doc h2 { margin: 24px 0 6px; font-size: 1.3rem; }

/* A piano teacher's page (teacher.html). */
.teacher-logout { margin-left: auto; }
.home-doc .family-row input { flex: 1; min-width: 0; }
.teacher-student { margin: 12px 0; }
.teacher-student p { margin: 4px 0; }

/* The title in rainbow letters. */
.rainbow-text {
  background: var(--rainbow);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-slide 6s linear infinite;
}

@keyframes rainbow-slide { to { background-position: 200% 0; } }

/* Game screen */

header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px auto 0;
  width: calc(100% - 24px);
  max-width: 1100px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  box-shadow: 0 6px 0 rgba(47, 140, 255, 0.25), 0 10px 24px rgba(20, 60, 120, 0.15);
}

header h1 {
  font-size: 1.6rem;
  margin: 0 8px 0 0;
  user-select: none;
  cursor: default;
  white-space: nowrap;
}

/* Right of the top bar: Puddle Points, stickers, and the player's name with a menu for the grown-up things. */
.header-right { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-left: auto; }
.header-right > button, #player { white-space: nowrap; }
.player-menu { position: relative; }
#player { font-weight: 700; color: var(--ink); background: #eef6ff; padding: 6px 14px; border-radius: 999px; box-shadow: 0 3px 0 #b9dcff; }
#menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 8;
  display: flex;
  flex-direction: column;
  min-width: 230px;
  padding: 8px;
  background: white;
  border: 3px solid #dff1ff;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(20, 60, 120, 0.2);
  animation: card-pop 0.25s ease-out;
}
#menu[hidden] { display: none; }
#menu form { margin: 0; }
#menu button { display: block; width: 100%; padding: 9px 12px; text-align: left; color: var(--ink); border-radius: 12px; }
#menu button:hover { background: #eef6ff; text-decoration: none; }
#menu-piano { margin: 0 0 6px; padding: 6px 12px 10px; font-size: 0.85rem; color: #5a5280; border-bottom: 2px solid #eef6ff; }

/* Only shown when the piano isn't working (or in test mode, how hard each key was pressed). */
#midi-status { padding: 4px 12px; font-size: 0.9rem; font-weight: 700; color: var(--orange-dark); background: #fff1e0; border-radius: 999px; }
#midi-status[hidden] { display: none; }

/* Above the music: the level, and its Start and Help buttons. */
.level-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
#level-name {
  flex: 1 1 260px; /* its own row when there isn't room beside Start and Help */
  margin: 0;
  padding: 6px 16px;
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(47, 140, 255, 0.2);
}

#points {
  color: white;
  font-weight: 700;
  padding: 4px 14px;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  border-radius: 999px;
  box-shadow: 0 3px 0 #6b3fa0;
}

#points.bump { animation: bump 0.6s cubic-bezier(0.2, 1.8, 0.4, 1); }

/* The level dropdown only shows in test mode (turned on in the parent area). */
#level, #test-badge { display: none; }
.test-mode #level, .test-mode #test-badge { display: inline-block; }
#test-badge { background: var(--red); color: white; font-size: 0.8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
#start { background: var(--green); box-shadow: 0 4px 0 var(--green-dark); }
#start:active { box-shadow: 0 1px 0 var(--green-dark); }

main {
  max-width: 900px;
  margin: 18px auto;
  padding: 0 16px;
}

.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.info > span:not(:empty) {
  padding: 4px 14px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(47, 140, 255, 0.2);
}

/* 🔥 5 in a row! Gets bigger and hotter as the streak grows. */
#streak { color: var(--orange-dark); }
#streak.bump { animation: bump 0.35s cubic-bezier(0.2, 1.8, 0.4, 1); }
#streak.hot { color: white; background: linear-gradient(135deg, var(--orange), var(--pink)); }

/* Stars: earn one for each run at or above the pass mark. */
.star { color: #d4dbe8; display: inline-block; }
.star.on { color: var(--yellow); text-shadow: 0 2px 0 #e08a00, 0 0 12px rgba(255, 210, 63, 0.8); }
.star.new { animation: star-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) 0.3s backwards; }
#stars { font-size: 1.6rem; line-height: 1; letter-spacing: 2px; }
#result-stars { font-size: 4rem; line-height: 1; letter-spacing: 8px; }
#result-stars .star.on { animation: twinkle 1.6s ease-in-out infinite; }
#result-stars .star.new { animation: star-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) 0.3s backwards, twinkle 1.6s ease-in-out 1.2s infinite; }

@keyframes star-pop {
  0% { transform: scale(0) rotate(-270deg); }
  70% { transform: scale(1.5) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.12) rotate(8deg); }
}

/* The accuracy bar, with the buddy frog beside it. */
.accuracy-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

#buddy {
  flex: 0 0 auto;
  font-size: 2.6rem;
  line-height: 1;
  user-select: none;
  animation: float 2.4s ease-in-out infinite;
}

#buddy.hop { animation: hop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
#buddy.wobble { animation: wobble 0.5s ease-in-out; }

.accuracy {
  position: relative;
  flex: 1;
  height: 34px;
  background: rgba(255, 255, 255, 0.85);
  border: 3px solid white;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 3px 6px rgba(20, 60, 120, 0.15), 0 3px 0 rgba(47, 140, 255, 0.2);
}

#accuracy-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: repeating-linear-gradient(-45deg, #ffb340 0 14px, var(--orange) 14px 28px);
  background-size: 40px 100%;
  transition: width 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
  animation: stripes 1s linear infinite;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.1), inset 0 5px 0 rgba(255, 255, 255, 0.35);
}

#accuracy-fill.passing { background: var(--rainbow); background-size: 200% 100%; animation: rainbow-slide 3s linear infinite; }

@keyframes stripes { to { background-position: 40px 0; } }

/* The pass mark is a little star flag that lights up once you're over it. */
#pass-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(43, 35, 80, 0.5);
}

#pass-mark::after {
  content: '★';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.3rem;
  color: #c8cfdc;
  text-shadow: 0 1px 0 white;
  transition: color 0.3s;
}

#pass-mark.lit::after { color: var(--yellow); text-shadow: 0 0 8px white, 0 1px 0 #e08a00; animation: twinkle 1.2s ease-in-out infinite; }

#accuracy-text {
  position: absolute;
  inset: 0;
  text-align: center;
  line-height: 28px;
  font-weight: 800;
  color: var(--ink);
  text-shadow: 0 0 4px white, 0 0 4px white;
}

.staff-box {
  position: relative;
  background: var(--card);
  border: 4px solid white;
  border-radius: 28px;
  padding: 12px;
  box-shadow: 0 8px 0 rgba(47, 140, 255, 0.25), 0 16px 36px rgba(20, 60, 120, 0.18);
  transition: box-shadow 0.4s;
}

.staff-box.shake { animation: shake 0.35s ease-in-out; }

/* A long streak: the box glows with a moving rainbow edge. */
.staff-box.hot { border-color: transparent; background: linear-gradient(white, white) padding-box, var(--rainbow) border-box; background-size: 100% 100%, 200% 100%; animation: rainbow-slide 3s linear infinite; }

/* Shrink to fit short screens too. */
#staff svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 240px); }

/* The recorder test (record.html): a whole piece, so the music is as tall as it needs. */
.record { max-width: 900px; }
.record #staff svg { max-height: none; }
.record-settings { flex-wrap: wrap; }
.record label { display: block; margin: 8px 0; }
.record-settings label { margin: 0; }
.record input[type=number] { width: 80px; }
.record-tools { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.record-tools span { display: flex; gap: 4px; }
.record-tools button { padding: 6px 12px; }
.record textarea { display: block; width: 100%; margin-top: 4px; font: 0.9rem ui-monospace, monospace; }

/* Practice (practice.html): the song list, the version and speed buttons, and the whole song drawn at once. */
#practice-note { margin: 0 0 14px; padding: 12px 18px; background: rgba(255, 255, 255, 0.92); border-radius: 18px; font-size: 1.1rem; }
.song-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.song-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; text-align: left; color: var(--ink); background: white; border-radius: 22px; box-shadow: 0 6px 0 rgba(47, 140, 255, 0.25); }
.song-card strong { font-size: 1.25rem; }
.song-card span { font-size: 0.95rem; font-weight: 400; color: #5a5280; }
.song-card .song-best { font-weight: 700; color: var(--green-dark); }
.song-card:disabled { opacity: 0.6; cursor: default; transform: none; }
.practice-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 12px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 4px; }
.choice-row button { padding: 6px 14px; color: var(--ink); background: white; box-shadow: 0 4px 0 #b9dcff; }
.choice-row button.on { color: white; background: var(--blue); box-shadow: 0 4px 0 var(--blue-dark); }
#best { font-weight: 700; color: var(--green-dark); }
.practice #staff.whole svg { max-height: none; }

/* Quiz levels: tap the letter name of the blue note. */
#quiz { margin-top: 16px; text-align: center; }
.quiz-letters { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.quiz-letters button { min-width: 64px; padding: 12px 0; font-size: 1.8rem; }
#quiz-hint { min-height: 1.5em; margin: 12px 0 0; font-weight: 800; color: var(--orange-dark); }

/* GOOD JOB! / GREAT! / PERFECT! pops up on the accuracy bar, never over the notes. */
#message {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 2px 20px;
  font-size: 1.6rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--green);
  background: white;
  border: 4px solid var(--green);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--green-dark), 0 6px 14px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

#message:empty { display: none; }
/* Tips after a miss ("Louder!", "Hold it longer!") stay up longer than a cheer, so there's time to read them. */
#message.hint { color: var(--orange-dark); border-color: var(--orange); box-shadow: 0 4px 0 var(--orange-dark), 0 6px 14px rgba(0, 0, 0, 0.2); }
#message.hint.pop { animation-duration: 2.6s; }
#message.pop { animation: pop 1.2s ease-out; }
#message.prompt { opacity: 1; color: var(--blue); border-color: var(--blue); box-shadow: 0 4px 0 var(--blue-dark); animation: breathe 1.6s ease-in-out infinite; }

/* The big cheers, in rainbow letters with a wiggle. */
#message.cheer {
  font-size: 2.2rem;
  border-color: var(--yellow);
  box-shadow: 0 4px 0 #e0a800, 0 0 24px rgba(255, 210, 63, 0.8);
  animation: cheer 1.6s cubic-bezier(0.2, 1.4, 0.4, 1);
}

#message.cheer span { display: inline-block; animation: wiggle 0.5s ease-in-out infinite alternate; }

/* Count-in numbers: big and bouncy. */
#message.count { font-size: 2.4rem; min-width: 80px; text-align: center; color: var(--purple); border-color: var(--purple); box-shadow: 0 4px 0 #6b3fa0; animation: count 0.9s ease-out; }

@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes cheer {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-20deg); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(4deg); }
  35% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(0.9); }
}

@keyframes count {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(0.95); }
  30% { transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes wiggle {
  from { transform: translateY(2px) rotate(-6deg); }
  to { transform: translateY(-2px) rotate(6deg); }
}

#result {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 24px;
  animation: fade-in 0.3s ease-out;
}

#result[hidden] { display: none; }
#result h2, #result p { margin: 0; }
#result h2 { font-size: 2.4rem; animation: card-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
#result p { font-size: 1.2rem; }
#result button { font-size: 1.3rem; padding: 12px 32px; }
#next { background: var(--green); box-shadow: 0 5px 0 var(--green-dark); }

/* Sparkles and confetti that fly out from a spot, then vanish (made in hud.js). */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }

.spark {
  position: absolute;
  font-size: var(--size, 20px);
  line-height: 1;
  color: var(--color);
  text-shadow: 0 0 6px white;
  transform: translate(-50%, -50%);
  animation: spark var(--time, 0.8s) cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes spark {
  0% { transform: translate(-50%, -50%) scale(0.3) rotate(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--spin, 180deg)); opacity: 0; }
}

/* A ring spreading out like a raindrop in a puddle. */
.ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 4px solid var(--color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 0.7s ease-out forwards;
}

@keyframes ripple {
  from { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  to { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* Reward popup */

#reward {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(circle, rgba(120, 60, 200, 0.6), rgba(40, 20, 80, 0.8));
  overflow: hidden;
  z-index: 10;
  animation: fade-in 0.3s ease-out;
}

#reward[hidden] { display: none; }

/* Sun rays spinning slowly behind the card. */
.rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160vmax;
  height: 160vmax;
  margin: -80vmax 0 0 -80vmax;
  background: repeating-conic-gradient(rgba(255, 230, 120, 0.28) 0 10deg, transparent 10deg 20deg);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, black 10%, transparent 60%);
  mask: radial-gradient(circle, black 10%, transparent 60%);
  animation: spin 30s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.reward-card {
  position: relative;
  z-index: 1;
  max-width: 460px;
  width: 100%;
  padding: 32px 24px;
  text-align: center;
  background: linear-gradient(160deg, #fff7d6, #ffe0f0);
  border: 6px solid var(--yellow);
  border-radius: 36px;
  box-shadow: 0 12px 0 var(--orange), 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 80px rgba(255, 210, 63, 0.6);
  animation: reward-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.reward-stars { font-size: 3.5rem; }
.reward-stars span { display: inline-block; animation: reward-bounce 0.6s ease-in-out infinite alternate; }
.reward-stars span:nth-child(2) { font-size: 1.4em; animation-delay: 0.2s; }
.reward-stars span:nth-child(3) { animation-delay: 0.4s; }

.reward-card h2 {
  margin: 8px 0 0;
  font-size: 3.6rem;
  color: var(--pink);
  text-shadow: 3px 3px 0 var(--yellow), 6px 6px 0 rgba(255, 138, 0, 0.4);
  animation: wiggle-big 1.2s ease-in-out infinite;
}

@keyframes wiggle-big {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50% { transform: rotate(3deg) scale(1.06); }
}

#reward-level { font-size: 1.4rem; margin: 4px 0 20px; color: #6b3fa0; }
#reward-total { font-size: 1.1rem; margin: 16px 0 0; color: #6b3fa0; }

.reward-prize {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px 12px 12px;
  background: linear-gradient(135deg, var(--sky), var(--blue));
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  text-align: left;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--blue-dark);
}

#reward-points {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  background: white;
  color: var(--blue);
  font-size: 2.6rem;
  border-radius: 50%;
  animation: twinkle 1s ease-in-out infinite;
}

#reward-close {
  display: block;
  margin: 24px auto 0;
  padding: 14px 40px;
  font-size: 1.6rem;
  background: var(--orange);
  box-shadow: 0 5px 0 var(--orange-dark);
  animation: breathe-button 1.4s ease-in-out infinite;
}

@keyframes breathe-button {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

/* Intro card before each level, and the Help button's card. */

button.help { background: var(--yellow); color: var(--ink); box-shadow: 0 4px 0 #e0a800; }
button.help:active { box-shadow: 0 1px 0 #e0a800; }

#explain, #setup, #family, #book, #certificate, #shop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 60, 120, 0.45);
  z-index: 10;
  animation: fade-in 0.25s ease-out;
}

#explain[hidden], #setup[hidden], #family[hidden], #book[hidden], #certificate[hidden], #shop[hidden] { display: none; }

.explain-card {
  position: relative;
  max-width: 640px;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 24px;
  background: #f4fbff;
  border: 5px solid var(--sky);
  border-radius: 28px;
  box-shadow: 0 8px 0 #1e8fd9, 0 16px 40px rgba(0, 0, 0, 0.3);
  animation: card-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}

/* A ✕ at the top of every card, staying in sight while the card scrolls. */
.card-x {
  position: sticky;
  top: 0;
  z-index: 3;
  display: block;
  width: 40px;
  height: 40px;
  margin: -8px -8px -32px auto;
  padding: 0;
  font-size: 1.2rem;
  line-height: 40px;
  background: white;
  color: var(--ink);
  border: 3px solid #dff1ff;
  border-radius: 50%;
  box-shadow: 0 3px 0 #b9dcff;
}
.card-x:active { box-shadow: 0 1px 0 #b9dcff; }
.card-x[hidden] { display: none; }

/* The buddy frog peeks in at the top corner of every card (next to the ✕). */
.explain-card::before {
  content: '🐸';
  position: absolute;
  top: 14px;
  right: 66px;
  font-size: 3rem;
  line-height: 1;
  animation: float 2.4s ease-in-out infinite;
}

/* Room for the frog and the ✕ beside each card's title. */
.explain-card h2 { padding-right: 112px; }

.explain-card h2 { margin: 0; color: var(--blue); font-size: 1.8rem; }
#explain-text, #setup-text { font-size: 1.25rem; margin: 10px 0 0; }
#explain-heading { margin: 18px 0 8px; color: var(--pink); font-size: 1.3rem; clear: both; }
#explain-heading:empty { display: none; }
#explain-goal { font-size: 1.1rem; font-weight: 700; color: #6b3fa0; margin: 16px 0 0; }
#explain-goal:empty { display: none; }

.topic {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  margin-bottom: 10px;
  background: white;
  border: 3px solid #dff1ff;
  border-radius: 18px;
  animation: slide-in 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
}

.topic:nth-child(2) { animation-delay: 0.1s; }
.topic:nth-child(3) { animation-delay: 0.2s; }
.topic:nth-child(4) { animation-delay: 0.3s; }
.topic:nth-child(n + 5) { animation-delay: 0.4s; }

.topic h3 { margin: 0 0 2px; font-size: 1.15rem; color: var(--blue-dark); }
.topic p { margin: 0; }

.topic-picture {
  flex: 0 0 200px;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
}

.topic-picture svg { display: block; max-width: 100%; height: auto; }

@media (max-width: 520px) {
  .topic { flex-direction: column; align-items: stretch; }
  .topic-picture { flex-basis: auto; }
  header h1 { font-size: 1.3rem; }
}

/* The app's own question popup (js/ask.js), instead of the browser's. */
.ask {
  max-width: 400px;
  width: calc(100% - 32px);
  padding: 24px;
  text-align: center;
  color: var(--ink);
  background: #f4fbff;
  border: 5px solid var(--sky);
  border-radius: 28px;
  box-shadow: 0 8px 0 #1e8fd9, 0 16px 40px rgba(0, 0, 0, 0.3);
  animation: card-pop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.ask::backdrop { background: rgba(20, 40, 80, 0.45); }
.ask p { margin: 0 0 4px; font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.ask input { width: 100%; margin-top: 12px; box-sizing: border-box; }
.ask .link { display: block; margin: 12px auto 0; }

#explain-close, #setup-close, .family-button {
  display: block;
  margin: 20px auto 0;
  padding: 12px 36px;
  font-size: 1.4rem;
  background: var(--orange);
  box-shadow: 0 5px 0 var(--orange-dark);
  animation: breathe-button 1.6s ease-in-out infinite;
}

#explain-other, #setup-again {
  display: block;
  margin: 12px auto 0;
  font-size: 1.05rem;
  color: var(--blue);
  text-decoration: underline;
}

#explain-other[hidden], #setup-again[hidden] { display: none; }

/* Piano setup: dots for the keys played so far, and a bar showing how hard the last key was pressed. */
#setup-dots { margin: 16px 0 8px; font-size: 2rem; letter-spacing: 8px; color: var(--pink); text-align: center; }
#setup-dots[hidden] { display: none; }
.setup-meter { height: 22px; margin-top: 12px; background: #e3f1ff; border-radius: 999px; overflow: hidden; }
#setup-meter-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--sky), var(--purple), var(--pink)); border-radius: 999px; transition: width 0.15s; }
/* Who's playing, and the parent area. */
.players { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 18px 0; }
.player { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 120px; padding: 16px 20px; font-size: 1.3rem; background: white; color: var(--ink); border: 4px solid #dff1ff; box-shadow: 0 5px 0 #b9dcff; border-radius: 22px; }
.player-avatar { font-size: 3rem; line-height: 1; }
#family-body input { display: block; width: 100%; margin-top: 10px; }
/* The PIN and the account password show as dots without being password boxes (see secretBox in family.js). */
input.secret { -webkit-text-security: disc; }
#family-body input.pin { width: 9em; margin: 14px auto 0; font-size: 1.6rem; text-align: center; letter-spacing: 8px; }
#family-body .link { display: block; margin: 8px auto 0; color: var(--blue); }
.family-error { min-height: 1.2em; margin: 8px 0 0; color: var(--red); font-weight: 700; text-align: center; }
.family-child { margin: 14px 0; padding: 12px 14px; background: white; border: 3px solid #dff1ff; border-radius: 18px; }
.family-child h3 { margin: 0; color: var(--blue-dark); }
.family-child p { margin: 4px 0 0; }
.family-added { justify-content: space-between; margin: 8px 0 0; padding: 8px 14px; background: white; border: 3px solid #dff1ff; border-radius: 18px; font-weight: 700; }
.family-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.family-confirm { margin: 14px 0; padding: 10px 14px; background: #fff8dc; border: 3px solid var(--yellow); border-radius: 18px; }
.family-confirm p { margin: 0; }
.family-confirm .family-row { margin-top: 2px; flex-wrap: wrap; }
.family-plan { margin: 14px 0; padding: 10px 14px; background: white; border: 3px solid var(--sky); border-radius: 18px; }
.family-plan h3 { margin: 0 0 4px; color: var(--blue-dark); }
.family-plan p { margin: 0; }
.family-plan .family-row { flex-wrap: wrap; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
#family-body .family-row input { flex: 1; margin: 0; }
#family-body .family-row .link { display: inline; margin: 0; }
.family-log { margin: 8px 0 0; padding-left: 20px; font-size: 0.9rem; color: #5a5280; }

#setup-result { min-height: 1.5em; margin: 10px 0 0; font-size: 1.3rem; font-weight: 700; text-align: center; color: #6b3fa0; }

.confetti {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 16px;
  border-radius: 3px;
  animation: confetti-fall linear infinite;
}

@keyframes reward-pop {
  0% { transform: scale(0.2) rotate(-12deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes card-pop {
  from { transform: scale(0.6) translateY(30px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes slide-in {
  from { transform: translateX(-30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fade-in { from { opacity: 0; } }

@keyframes reward-bounce {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-12px) scale(1.1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}

@keyframes hop {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-18px) scale(1.2) rotate(-8deg); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-14deg); }
  75% { transform: rotate(14deg); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); }
}

/* Background scenes, unlocked as stages are finished and picked in the sticker book (stickers.json). */
body[data-scene="sunset"], [data-scene="sunset"].swatch { background: linear-gradient(180deg, #ffb07c 0%, #ff8fb1 55%, #ffe29f 100%) fixed; }
body[data-scene="sea"], [data-scene="sea"].swatch { background: linear-gradient(180deg, #5fd3ff 0%, #1e88e5 60%, #0d47a1 100%) fixed; }
body[data-scene="night"], [data-scene="night"].swatch { background: linear-gradient(180deg, #0b1d51 0%, #2b2f77 60%, #5b3a8c 100%) fixed; }
body[data-scene="jungle"], [data-scene="jungle"].swatch { background: linear-gradient(180deg, #b8f28a 0%, #56ab2f 60%, #2e7d32 100%) fixed; }
body[data-scene="candy"], [data-scene="candy"].swatch { background: linear-gradient(180deg, #ffd1ec 0%, #e3c6ff 50%, #b8f1ff 100%) fixed; }
body[data-scene="snow"], [data-scene="snow"].swatch { background: linear-gradient(180deg, #d9f2ff 0%, #ffffff 60%, #e6f4ff 100%) fixed; }
body[data-scene="rainbow"], [data-scene="rainbow"].swatch { background: linear-gradient(180deg, #ff9a9e 0%, #fecfef 25%, #fbc2eb 45%, #a6c1ee 70%, #c2e9fb 100%) fixed; }
[data-scene="puddle"].swatch { background: linear-gradient(180deg, #8fd9ff 0%, #c9f0ff 55%, #e6fbff 100%); }

/* Stickers: normal, sparkly (a glow and a twinkle) and animated (a little dance). Not found yet: a dark silhouette. */
.sticker { display: inline-block; line-height: 1; }
.sticker.sparkly { position: relative; animation: sparkly 2s ease-in-out infinite; }
.sticker.sparkly::after { content: '✨'; position: absolute; top: -0.3em; right: -0.35em; font-size: 0.45em; animation: twinkle 1.2s ease-in-out infinite; }
.sticker.animated { animation: dance 1.4s ease-in-out infinite; }
.sticker.locked { filter: brightness(0); opacity: 0.15; }

@keyframes sparkly {
  0%, 100% { filter: drop-shadow(0 0 2px #fff6a8) drop-shadow(0 0 6px #ffd23f); }
  50% { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #ff4fa3); }
}

@keyframes dance {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-6px) rotate(-10deg); }
  50% { transform: translateY(0) rotate(0) scale(1.1); }
  75% { transform: translateY(-6px) rotate(10deg); }
}

/* Your stickers on the background. They're above it so they can be dragged, but never cover the game (stickers.js),
   and below the cards. Faint (and not in the way) only when there's no open spot for them at all. */
#my-stickers { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#my-stickers .sticker { position: absolute; font-size: 2.8rem; transform: translate(-50%, -50%); pointer-events: auto; cursor: grab; touch-action: none; user-select: none; }
#my-stickers .sticker.dragging { z-index: 1; cursor: grabbing; animation: none; transform: translate(-50%, -50%) scale(1.3); filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.3)); }
#my-stickers .sticker.settling { transition: left 0.35s ease-out, top 0.35s ease-out; }
#my-stickers .sticker.squeezed { opacity: 0.2; pointer-events: none; }
#my-stickers .sticker.normal { animation: float-sticker 5s ease-in-out infinite; }

@keyframes float-sticker {
  0%, 100% { transform: translate(-50%, -50%) rotate(-6deg); }
  50% { transform: translate(-50%, calc(-50% - 10px)) rotate(6deg); }
}

/* Picking a sticker on the reward popup (and in the book). */
#reward-pick:empty { display: none; }
#reward-pick { margin-top: 18px; }
.pick-title { margin: 0 0 10px; font-size: 1.3rem; font-weight: 700; color: #6b3fa0; }
.pick-choices { display: flex; justify-content: center; gap: 14px; }
.pick { width: 84px; height: 84px; padding: 0; font-size: 3rem; background: white; border: 4px solid #ffe08a; border-radius: 22px; box-shadow: 0 5px 0 #f0c64a; }
.pick.sparkly { border-color: #ffb3dd; box-shadow: 0 5px 0 #ff7ec4, 0 0 16px #ffd23f; }
.pick.animated { border-color: #b9a6ff; box-shadow: 0 5px 0 #8b5cf6, 0 0 16px #b9a6ff; }
.picked { animation: card-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
.picked .sticker { font-size: 4.5rem; }
.picked p { margin: 6px 0 0; font-weight: 700; color: #6b3fa0; }
.certificate-button { margin-top: 12px; background: var(--yellow); color: var(--ink); box-shadow: 0 4px 0 #e0a800; }

/* The Puddle Shop, and its editor in the parent area. */
.shop-card { max-width: 680px; }
.shop-points { margin: 6px 0 0; font-size: 1.4rem; font-weight: 800; color: #6b3fa0; }
.shop-message { margin: 12px 0 0; padding: 10px 14px; font-weight: 700; color: var(--green-dark); background: #eaffea; border-radius: 14px; }
.shop-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.shop-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; text-align: center; background: white; border: 3px solid #dff1ff; border-radius: 18px; }
.shop-emoji { font-size: 3rem; line-height: 1; }
.shop-name { font-weight: 700; }
.shop-price { font-weight: 700; color: #6b3fa0; }
.shop-item button:disabled { background: #c9d3e0; box-shadow: 0 4px 0 #a9b4c4; cursor: default; transform: none; }
.shop-waiting { padding-left: 22px; font-size: 1.1rem; }
.family-waiting-title { margin: 8px 0 0; font-weight: 700; color: var(--orange-dark); }
.family-waiting span { flex: 1; }
.family-row.shop-edit { display: grid; grid-template-columns: 3.5em 1fr 5.5em 2em; }
.shop-edit-emoji { text-align: center; font-size: 1.3rem; }
.shop-edit-head span { font-size: 0.85rem; font-weight: 700; color: #5a5280; }

/* The sticker book. */
.book-card { max-width: 760px; }
.book-count { margin: 4px 0 0; font-weight: 700; color: #6b3fa0; }
.book-picks { margin: 14px 0; padding: 12px; text-align: center; background: #fff7d6; border: 3px dashed var(--yellow); border-radius: 18px; }
.book-picks h3 { margin: 0 0 8px; }
.book-tip { margin: 6px 0 0; color: #5a5280; }
.scenes { display: flex; flex-wrap: wrap; gap: 8px; }
.scene-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; font-size: 0.85rem; background: white; color: var(--ink); border: 3px solid #dff1ff; box-shadow: none; border-radius: 14px; }
.scene-swatch.on { border-color: var(--pink); }
.scene-swatch:disabled { opacity: 0.6; cursor: default; }
.swatch { width: 64px; height: 40px; border-radius: 10px; }
.book-page { margin-top: 18px; }
.book-page-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.book-page-title h3 { margin: 0; color: var(--blue-dark); }
.book-page-title .link { margin: 0; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; margin-top: 8px; }
.slot { position: relative; display: grid; place-items: center; height: 58px; padding: 0; font-size: 2.2rem; background: white; border: 3px solid #e8f3ff; border-radius: 14px; box-shadow: none; }
button.slot { cursor: pointer; }
.slot.on { border-color: var(--yellow); background: #fffbe6; }
.slot.on::after { content: '✓'; position: absolute; right: 3px; bottom: 1px; font-size: 0.8rem; font-weight: 800; color: var(--green-dark); }

/* A certificate for finishing a stage. Only it is printed. */
.certificate {
  position: relative;
  max-width: 640px;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 32px 28px;
  text-align: center;
  font-size: 1.15rem;
  background: #fffdf3;
  border: 10px double #d4a017;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  animation: card-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.certificate p { margin: 6px 0; }
.certificate h2 { margin: 4px 0 12px; font-family: Georgia, "Times New Roman", serif; font-size: 2.2rem; color: #9a6b00; }
.cert-stars { font-size: 2.4rem; }
.cert-small { font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--pink); }
.cert-name { font-family: Georgia, "Times New Roman", serif; font-size: 2.6rem; font-style: italic; color: var(--ink); }
.cert-stage { font-size: 1.5rem; font-weight: 800; color: var(--blue-dark); }
#cert-stickers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 4px; font-size: 2rem; }
.cert-date { color: #5a5280; }
.cert-buttons { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; }

@media print {
  body { background: white !important; }
  body > *:not(#certificate) { display: none !important; }
  #certificate { position: static; padding: 0; background: none; }
  .certificate { max-height: none; box-shadow: none; animation: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cert-buttons, .card-x { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bubbles, .confetti, #fx, .rays { display: none; }
  .sticker, .sticker::after, .picked, .certificate { animation: none !important; }
  .rainbow-text, #accuracy-fill, #buddy, .staff-box, .star, .reward-card, .reward-card h2, .reward-stars span,
  #reward-points, #reward-close, .explain-card, .explain-card::before, .topic, #explain-close, .login, #result h2,
  #message.prompt, #message.cheer span, #streak, #points, #pass-mark::after, .login .buddy, .home-frog { animation: none !important; }
}