:root {
  --bg: #fff7ed;
  --ink: #3b2d3f;
  --pink: #ff5d8f;
  --yellow: #ffd166;
  --green: #06d6a0;
  --blue: #4cc9f0;
  --red: #ef476f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: ui-rounded, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at 15% 20%, #ffe3ee 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, #dff6ff 0%, transparent 45%),
    var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

.screen {
  text-align: center;
  padding: 24px;
  max-width: 480px;
  width: 100%;
}

h1 {
  font-size: 3rem;
  margin: 0 0 8px;
  color: var(--pink);
}

.tagline { font-size: 1.1rem; margin-bottom: 32px; }

.big-btn {
  font-size: 1.4rem;
  padding: 18px 36px;
  border: none;
  border-radius: 999px;
  background: var(--pink);
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 0 #d23369;
}
.big-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #d23369; }
.big-btn.secondary {
  background: white;
  color: var(--pink);
  box-shadow: 0 4px 0 #e8d5c4;
  margin-top: 12px;
}
.big-btn.secondary:active { box-shadow: 0 2px 0 #e8d5c4; }

.level-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.level-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: none;
  border-radius: 16px;
  background: white;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  box-shadow: 0 2px 0 #e8d5c4;
}
.level-card:active { transform: translateY(1px); }
.level-card .level-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
}
.level-card .badge {
  font-size: 1.5rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  flex-shrink: 0;
}
.level-card.cleared .badge { background: #d8f5ec; }
.level-card.current { outline: 3px solid var(--pink); }
.level-card .level-name { font-weight: 700; }
.level-card .level-sub { font-size: 0.85rem; color: #8a7a8f; }

.theory-body {
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 20px;
}

.level-card .book-btn {
  margin-left: auto;
  border: none;
  background: var(--bg);
  border-radius: 10px;
  font-size: 1.1rem;
  padding: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.quiz-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.quiz-header .bar-track { flex: 1; }

.icon-btn {
  border: none;
  background: white;
  border-radius: 12px;
  font-size: 1.2rem;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  cursor: pointer;
  box-shadow: 0 2px 0 #e8d5c4;
}

.book-btn { min-width: 44px; min-height: 44px; }

.walk {
  display: flex;
  gap: 10px;
  justify-content: center;
  min-height: 1.5em;
  margin: 0 0 6px;
  font-weight: 700;
  color: #c4b2c9;
}
.walk-note { transition: transform 0.15s, color 0.15s; }
.walk-note.lit { color: var(--pink); transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .walk-note.lit { transform: none; }
}

.replays {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 8px;
}

.chip-btn {
  border: none;
  background: white;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  min-height: 44px;
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: 0 2px 0 #e8d5c4;
}
.chip-btn:disabled { opacity: 0.4; }

.slots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 8px 0;
}
.slot {
  min-width: 56px;
  min-height: 48px;
  border-radius: 14px;
  background: white;
  box-shadow: inset 0 0 0 2px #e8d5c4;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.1rem;
}
.slot.filled { box-shadow: inset 0 0 0 2px var(--blue); }
.slot.good { background: #d8f5ec; box-shadow: inset 0 0 0 2px var(--green); }
.slot.bad { background: #fde3e9; box-shadow: inset 0 0 0 2px var(--red); }

.kbd-hint { font-size: 0.75rem; }

.about {
  text-align: left;
  margin-top: 40px;
  padding-top: 8px;
  border-top: 2px dashed #f3dccb;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #5d4c62;
}
.about h2 {
  font-size: 1.05rem;
  color: var(--ink);
  margin: 20px 0 6px;
}
.about p { margin: 0 0 10px; }

.footer {
  margin-top: 24px;
  font-size: 0.8rem;
}
.footer a { color: #b39bbb; }

.meet-help {
  margin-top: 14px;
  font-size: 0.85rem;
}
.meet-help a { color: #b39bbb; }
@media (pointer: coarse) {
  .kbd-hint { display: none; }
}

.status { color: #8a7a8f; }

.prompt { font-size: 1.3rem; min-height: 2em; }

.bar-track {
  height: 18px;
  border-radius: 999px;
  background: #f3e3d3;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--yellow), var(--green));
  transition: width 0.4s ease;
}

.degrees {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 24px 0;
}

.degree-btn {
  min-width: 88px;
  min-height: 88px;
  border: none;
  border-radius: 20px;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform 0.1s;
}
.degree-btn:disabled { opacity: 0.45; }
.degree-btn:not(:disabled):active { transform: scale(0.95); }
.degree-btn .num { font-size: 0.9rem; font-weight: 400; opacity: 0.85; }

.degree-btn[data-degree="1"] { background: var(--pink); }
.degree-btn[data-degree="2"] { background: #f4845f; }
.degree-btn[data-degree="3"] { background: var(--yellow); color: var(--ink); }
.degree-btn[data-degree="4"] { background: var(--green); }
.degree-btn[data-degree="5"] { background: var(--blue); }
.degree-btn[data-degree="6"] { background: #7b6cf6; }
.degree-btn[data-degree="7"] { background: #c66cf6; }

.degree-btn.correct { outline: 4px solid var(--green); }
.degree-btn.wrong { outline: 4px solid var(--red); }
.degree-btn.playing {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px var(--yellow), 0 0 18px var(--yellow);
}
@media (prefers-reduced-motion: reduce) {
  .degree-btn.playing { transform: none; }
}

.feedback {
  font-size: 1.2rem;
  min-height: 2em;
  font-weight: 600;
  margin: 0;
  text-align: left;
  flex: 1;
}
.feedback.good { color: #04a47b; }
.feedback.bad { color: var(--red); }

.feedback-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  margin-top: 8px;
}

/* ---------- mascot ---------- */

.mascot svg { width: 100%; height: 100%; overflow: visible; } /* head pokes out mid-wiggle */
.mascot-lg { width: 130px; height: 156px; margin: 0 auto; }
.mascot-sm { width: 56px; height: 67px; flex-shrink: 0; }

.mascot .flamingo { transform-origin: 50% 80%; animation: bob 3s ease-in-out infinite; }
.mascot.good .flamingo { animation: hop 0.5s ease-out 2; }
.mascot.bad .flamingo { animation: wiggle 0.5s ease-in-out 1; }
.mascot.party .flamingo { animation: party 0.7s ease-in-out infinite; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-2deg); }
}
@keyframes hop {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-12px) rotate(-4deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}
@keyframes party {
  0%, 100% { transform: translateY(0) rotate(-6deg) scale(1); }
  50% { transform: translateY(-10px) rotate(6deg) scale(1.06); }
}

/* ---------- hand signs ---------- */

.degree-btn .sign {
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.9);
}
.degree-btn[data-degree="3"] .sign { color: rgba(59, 45, 63, 0.75); }
.degree-btn .sign svg { width: 100%; height: 100%; display: block; }

/* ---------- confetti ---------- */

.confetti-piece {
  position: fixed;
  top: -20px;
  width: 10px;
  height: 14px;
  border-radius: 3px;
  pointer-events: none;
  animation: confetti-fall linear forwards;
  z-index: 10;
}
@keyframes confetti-fall {
  to { transform: translateY(105vh) rotate(720deg); }
}

/* ---------- streak ---------- */

.streak-pop {
  display: inline-block;
  animation: streak-pop 0.4s ease-out;
}
@keyframes streak-pop {
  0% { transform: scale(0.4); }
  70% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mascot .flamingo,
  .mascot.good .flamingo,
  .mascot.bad .flamingo,
  .mascot.party .flamingo,
  .streak-pop { animation: none; }
  .confetti-piece { display: none; }
  .bar-fill { transition: none; }
}