:root {
  --background: oklch(97% .03 95);
  --foreground: oklch(25% .05 280);
  --card: oklch(100% 0 0);
  --muted: oklch(94% .012 250);
  --muted-foreground: oklch(55% .046 257);
  --primary: oklch(62% .22 350);
  --primary-foreground: oklch(99% 0 0);
  --ink: oklch(25% .05 280);
  --candy-pink: oklch(80% .15 355);
  --candy-yellow: oklch(90% .16 95);
  --candy-blue: oklch(80% .12 230);
  --candy-green: oklch(82% .17 145);
  --candy-purple: oklch(78% .14 300);
  --candy-orange: oklch(82% .15 60);
  --done: oklch(62% .17 145);
  --shadow: 0 10px 25px -5px rgb(60 40 90 / .18), 0 6px 10px -6px rgb(60 40 90 / .12);
  --shadow-lg: 0 20px 40px -10px rgb(60 40 90 / .25);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* floating background blobs */
.blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.blobs div { position: absolute; border-radius: 50%; opacity: .4; filter: blur(40px); animation: float 3s ease-in-out infinite; }

/* header */
.top { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; }
.brand { background: none; font-size: 1.9rem; font-weight: 800; color: var(--primary); padding: 0; }
.top-right { display: flex; align-items: center; gap: 12px; }
.pill { background: var(--card); border-radius: 999px; padding: 6px 18px; font-size: 1.5rem; font-weight: 700; box-shadow: var(--shadow); }
.icon-btn { padding: 6px 14px; transition: transform .15s; }
.icon-btn:hover { transform: scale(1.1); }

.wrap { position: relative; z-index: 10; max-width: 64rem; margin: 0 auto; padding: 0 16px 64px; }

/* map */
.center { text-align: center; }
.title { margin: 16px 0 0; font-size: clamp(2.4rem, 7vw, 3.75rem); font-weight: 800; line-height: 1.1; }
.sub { margin: 12px 0 0; font-size: 1.25rem; color: var(--muted-foreground); }
.levels { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 768px) { .levels { grid-template-columns: repeat(3, 1fr); } }
.level {
  position: relative; border-radius: 2rem; padding: 24px 16px; box-shadow: var(--shadow-lg);
  transition: transform .2s; color: var(--ink);
}
.level:not(:disabled):hover { transform: translateY(-8px) rotate(1deg); }
.level:disabled { cursor: not-allowed; opacity: .4; }
.level .critter { font-size: 4.5rem; line-height: 1.1; display: inline-block; animation: wiggle 2.5s ease-in-out infinite; transition: transform .2s; }
.level:not(:disabled):hover .critter { transform: scale(1.25); }
.level .num { margin-top: 12px; font-size: .9rem; font-weight: 700; opacity: .7; }
.level .name { font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.level .tick { position: absolute; top: 12px; right: 14px; font-size: 1.4rem; }
.reset { margin-top: 40px; background: none; color: var(--muted-foreground); font-size: 1rem; text-decoration: underline; }

/* play */
.play { position: relative; margin-top: 16px; text-align: center; }
.bar { margin: 0 auto; height: 20px; max-width: 36rem; overflow: hidden; border-radius: 999px; background: var(--card); box-shadow: inset 0 2px 4px rgb(0 0 0 / .08); }
.bar > div { height: 100%; border-radius: 999px; transition: width .5s; }
.count { margin: 8px 0 0; font-size: 1.15rem; font-weight: 700; color: var(--muted-foreground); }
.stage { position: relative; margin-top: 24px; display: flex; justify-content: center; }
.big-critter { font-size: clamp(6rem, 14vw, 8rem); line-height: 1.1; animation: float 3s ease-in-out infinite; }
.big-critter.jump { animation: jump .6s; }
.cheer { position: absolute; top: -24px; left: 50%; background: var(--card); color: var(--primary); border-radius: 1.5rem; padding: 6px 20px; font-size: 1.9rem; font-weight: 800; box-shadow: var(--shadow-lg); white-space: nowrap; animation: pop .9s forwards; }
.word {
  margin: 24px auto 0; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  background: var(--card); border-radius: 2rem; padding: 24px 32px; box-shadow: var(--shadow-lg); max-width: 100%;
}
.word.shake { animation: shake .4s; }
.word span { min-width: 1ch; font-size: clamp(3rem, 9vw, 4.5rem); font-weight: 800; line-height: 1.1; transition: transform .15s, color .15s; color: var(--muted-foreground); }
.word span.done { color: var(--done); transform: scale(.9); }
.word span.now { color: var(--foreground); text-decoration: underline; text-decoration-thickness: 8px; text-underline-offset: 10px; animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.hint { margin: 16px 0 0; font-size: 1.25rem; color: var(--muted-foreground); }
.hint b { color: var(--foreground); }

/* keyboard */
.kb { margin: 32px auto 0; max-width: 48rem; padding: 16px; border-radius: 2rem; background: rgb(255 255 255 / .7); box-shadow: var(--shadow-lg); display: grid; gap: 8px; }
.kb-row { display: flex; justify-content: center; gap: 8px; min-width: 0; }
.key {
  position: relative; width: 56px; height: 56px; flex: 0 1 56px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--muted); font-size: 1.25rem; font-weight: 700; text-transform: uppercase;
  box-shadow: 0 2px 4px rgb(0 0 0 / .08); transition: transform .15s; touch-action: manipulation; user-select: none;
}
.key:active { transform: scale(.92); }
.key.bump::after { content: ''; position: absolute; bottom: 9px; width: 14px; height: 3px; border-radius: 2px; background: currentColor; opacity: .45; }
.key.lit { color: var(--ink); transform: scale(1.25); animation: bounce 1s infinite; z-index: 1; }
.key.space { width: 288px; flex: 0 1 288px; height: 48px; }
.key.space.lit { transform: none; }
.word .chunk { display: inline-flex; gap: 8px; white-space: nowrap; }
@media (max-width: 640px) {
  .top { padding: 12px 16px; }
  .brand { font-size: 1.35rem; white-space: nowrap; }
  .pill { font-size: 1.15rem; padding: 4px 14px; }
  .word, .word .chunk { gap: 4px; }
  .kb { padding: 10px 6px; gap: 6px; }
  .kb-row { gap: 4px; padding-left: 0 !important; }
  .key { min-width: 0; height: 44px; font-size: 1rem; border-radius: 8px; }
  .key.lit { transform: scale(1.1); }
  .key.space { height: 40px; }
  .word { padding: 18px 20px; }
}

/* finish */
.finish { position: relative; margin-top: 40px; border-radius: 2.5rem; padding: 40px 24px; text-align: center; box-shadow: var(--shadow-lg); color: var(--ink); }
.finish .big-critter { animation: bounce 1s infinite; font-size: 8rem; }
.finish h2 { margin: 16px 0 0; font-size: clamp(2.2rem, 6vw, 3rem); font-weight: 800; line-height: 1.1; }
.finish p { margin: 8px 0 0; font-size: 1.5rem; opacity: .8; }
.btns { margin-top: 32px; display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
.btn { border-radius: 999px; padding: 14px 32px; font-size: 1.5rem; font-weight: 700; box-shadow: var(--shadow); transition: transform .15s; background: var(--card); }
.btn:hover { transform: scale(1.05); }
.btn.primary { background: var(--primary); color: var(--primary-foreground); }

/* confetti */
.confetti { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.confetti span { position: absolute; top: -40px; font-size: 2.25rem; animation: confetti 2.5s linear forwards; }

.bounce-slow { animation: bounce 2.5s infinite; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes jump { 0% { transform: scale(1); } 40% { transform: translateY(-40px) scale(1.2) rotate(-10deg); } 100% { transform: scale(1); } }
@keyframes pop { 0% { opacity: 0; transform: translateX(-50%) scale(.3); } 30% { opacity: 1; transform: translate(-50%, -20px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -50px) scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-12px); } 75% { transform: translateX(12px); } }
@keyframes confetti { to { transform: translateY(110vh) rotate(720deg); } }
@keyframes pulse { 50% { opacity: .5; } }
@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8,0,1,1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0,0,.2,1); }
}
.key.lit { animation-name: keybounce; }
@keyframes keybounce {
  0%, 100% { transform: scale(1.25) translateY(-20%); animation-timing-function: cubic-bezier(.8,0,1,1); }
  50% { transform: scale(1.25); animation-timing-function: cubic-bezier(0,0,.2,1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .confetti { display: none; }
}