* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Fredoka', 'Comic Sans MS', sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#game-container {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  cursor: pointer;
  /* palette vars, updated every frame by JS as day turns to night */
  --sky-top: rgb(154, 220, 240);
  --sky-bottom: rgb(232, 248, 244);
  --hill-back: rgb(184, 224, 154);
  --hill-front: rgb(140, 200, 112);
  --grass: rgb(124, 188, 96);
  --dirt: rgb(226, 188, 140);
  --stars-opacity: 0;
  --sun-opacity: 1;
  --cloud-opacity: 1;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
}

/* ---------- sky ---------- */

#sun {
  position: absolute;
  top: 7%;
  right: 9%;
  width: 90px;
  height: 90px;
  opacity: var(--sun-opacity);
}

.sun-core {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff6c8, #ffd95e 60%, #ffc233);
  box-shadow: 0 0 50px 18px rgba(255, 214, 90, 0.55);
  animation: sun-breathe 4s ease-in-out infinite;
}

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

#moon {
  position: absolute;
  top: 8%;
  right: 14%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fdfbf0, #e8e2c8);
  box-shadow: inset -16px -8px 0 rgba(180, 174, 140, 0.45), 0 0 40px 10px rgba(253, 251, 240, 0.35);
  opacity: var(--stars-opacity);
}

#stars-layer {
  position: absolute;
  inset: 0 0 30% 0;
  opacity: var(--stars-opacity);
  pointer-events: none;
}

.sky-star {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
  animation: twinkle 2.4s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.25); }
}

.cloud {
  position: absolute;
  width: 130px;
  height: 42px;
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.92);
  opacity: var(--cloud-opacity);
  animation: drift linear infinite;
}

.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

.cloud::before { width: 56px; height: 56px; top: -26px; left: 22px; }
.cloud::after  { width: 40px; height: 40px; top: -18px; right: 24px; }

.cloud-1 { top: 12%; animation-duration: 55s; }
.cloud-2 { top: 24%; transform: scale(0.7); animation-duration: 75s; animation-delay: -30s; }
.cloud-3 { top: 6%;  transform: scale(0.55); animation-duration: 90s; animation-delay: -60s; }
.cloud-4 { top: 31%; transform: scale(0.85); animation-duration: 65s; animation-delay: -15s; }

@keyframes drift {
  from { left: 105%; }
  to   { left: -180px; }
}

/* ---------- parallax layers ---------- */

.parallax {
  position: absolute;
  left: 0;
  display: flex;
  pointer-events: none;
  will-change: transform;
}

.parallax .tile { flex: none; display: block; }

#hills-back  { bottom: 80px; height: 200px; }
#hills-back .tile  { width: 800px; height: 200px; }

#hills-front { bottom: 70px; height: 140px; }
#hills-front .tile { width: 800px; height: 140px; }

#ground { bottom: 0; height: 90px; }
#ground .tile { width: 400px; height: 90px; overflow: visible; }

/* ---------- the cat ---------- */

#cat {
  position: absolute;
  left: 70px;
  bottom: 70px;
  width: 110px;
  height: 93px;
  will-change: transform;
}

/* Ty stands bigger on the intro screen; back to normal size in play */
#cat.intro {
  transform: scale(1.6);
  transform-origin: left bottom;
  transition: transform 0.3s ease-out;
}

#cat-svg { width: 100%; height: 100%; overflow: visible; }

.leg { transform-box: fill-box; transform-origin: 50% 10%; }

.running .leg-fn { animation: leg-swing 0.32s ease-in-out infinite; }
.running .leg-bn { animation: leg-swing 0.32s ease-in-out infinite reverse; }
.running .leg-ff { animation: leg-swing 0.32s ease-in-out infinite reverse; animation-delay: -0.08s; }
.running .leg-bf { animation: leg-swing 0.32s ease-in-out infinite; animation-delay: -0.08s; }

@keyframes leg-swing {
  0%, 100% { transform: rotate(32deg); }
  50% { transform: rotate(-32deg); }
}

.jumping .leg { animation: none; transform: rotate(14deg); }
.jumping .leg-fn, .jumping .leg-ff { transform: rotate(-20deg); }

.tail {
  transform-box: fill-box;
  transform-origin: 100% 90%;
  animation: tail-wag 0.55s ease-in-out infinite;
}

@keyframes tail-wag {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(14deg); }
}

#head { transform-box: fill-box; transform-origin: 30% 80%; }

.running #head { animation: head-bob 0.32s ease-in-out infinite; }

@keyframes head-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

.eye { transform-box: fill-box; transform-origin: center; animation: blink 3.6s infinite; }

@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(0.1); }
}

.face-oops { display: none; }
.oops .face-oops { display: block; }
.oops .face-normal { display: none; }
.oops .tail { animation: none; transform: rotate(40deg); }
.oops .leg { animation: none; transform: rotate(0deg); }

#cat-svg.landed { animation: squash 0.18s ease-out; }

/* happy victory dance on the win screen */
#cat.dancing { animation: cat-dance 0.62s ease-in-out infinite; }

@keyframes cat-dance {
  0%   { transform: translateY(0) rotate(-7deg); }
  25%  { transform: translateY(-20px) rotate(7deg); }
  50%  { transform: translateY(0) rotate(-7deg); }
  75%  { transform: translateY(-12px) rotate(9deg); }
  100% { transform: translateY(0) rotate(-7deg); }
}

/* a big, snappy paw flick when zapping an obstacle by typing */
#cat-svg.swiping { animation: cat-swipe 0.34s cubic-bezier(0.3, 1.4, 0.5, 1); }

@keyframes cat-swipe {
  0%   { transform: translateX(0) scale(1) rotate(0deg); }
  30%  { transform: translateX(18px) scale(1.16, 0.9) rotate(-8deg); }
  55%  { transform: translateX(12px) scale(1.08) rotate(-5deg); }
  100% { transform: translateX(0) scale(1) rotate(0deg); }
}

/* forward roll when tumbling over an obstacle */
#cat-svg.tumbling { animation: cat-tumble 0.7s ease-out; }

@keyframes cat-tumble {
  0%   { transform: rotate(0deg) translateY(0); }
  30%  { transform: rotate(190deg) translateY(-18px); }
  100% { transform: rotate(360deg) translateY(0); }
}

/* somersault on double jump */
#cat-svg.flip { animation: cat-flip 0.55s ease-out; }

@keyframes cat-flip {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes squash {
  0% { transform: scale(1.12, 0.82); }
  100% { transform: scale(1, 1); }
}

/* ---------- obstacles & effects ---------- */

.obstacle {
  position: absolute;
  bottom: 74px;
  will-change: transform;
  pointer-events: none;
}

.obstacle svg { display: block; overflow: visible; }

/* big readable letter floating above each obstacle */
.ob-letter {
  position: absolute;
  left: 50%;
  top: -56px;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  font-size: 2.1rem;
  font-weight: 700;
  color: #fff;
  background: #5a6cc0;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 0 rgba(60, 50, 90, 0.25);
  animation: letter-float 1.4s ease-in-out infinite;
}

@keyframes letter-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

.ob-letter.wrong {
  background: #e0573f;
  animation: letter-shake 0.4s ease-in-out;
}

@keyframes letter-shake {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  20% { transform: translateX(-58%) rotate(-12deg); }
  50% { transform: translateX(-42%) rotate(12deg); }
  80% { transform: translateX(-54%) rotate(-6deg); }
}

/* word badge: the whole word to type, one span per letter */
.ob-word {
  position: absolute;
  left: 50%;
  top: -54px;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  padding: 7px 12px;
  white-space: nowrap;
  border: 4px solid #fff;
  border-radius: 16px;
  box-shadow: 0 4px 0 rgba(60, 50, 90, 0.25);
  animation: letter-float 1.4s ease-in-out infinite;
}

.ob-word .wl {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  transition: opacity 0.12s, transform 0.12s;
}

.ob-word .wl.done { opacity: 0.3; }
.ob-word .wl.next { transform: scale(1.18); text-decoration: underline; }

/* colour theme: dark badge, letters drawn in their own colour (set inline) */
.ob-word.theme-colour { background: #2e3450; }
/* picture themes: cream badge, dark letters */
.ob-word.theme-word { background: #fff6e9; }
.ob-word.theme-word .wl { color: #5a4632; }

.ob-word.wrong {
  animation: word-shake 0.4s ease-in-out;
  border-color: #e0573f;
}

@keyframes word-shake {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-54%) rotate(-5deg); }
  75% { transform: translateX(-46%) rotate(5deg); }
}

/* obstacle blowing apart when its letter is typed
   (animate the inner art so the div keeps its translateX position) */
.obstacle.smashing svg { animation: smash-out 0.42s ease-out forwards; }
.obstacle.smashing .ob-letter,
.obstacle.smashing .ob-word { opacity: 0; transition: opacity 0.1s; }

@keyframes smash-out {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  30%  { transform: scale(1.25); }
  100% { transform: scale(0.2) rotate(40deg); opacity: 0; }
}

/* finish line that rolls in at the end of a level */
.finish {
  position: absolute;
  bottom: 74px;
  z-index: 3;
  will-change: transform;
  pointer-events: none;
}

.finish svg {
  display: block;
  overflow: visible;
  transform-origin: 16px 100%;
  animation: finish-sway 1s ease-in-out infinite;
}

@keyframes finish-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}

/* rough patch of unsettled dirt left where an obstacle was zapped.
   The container only ever holds translateX (its scroll position); the
   appear effect lives on the inner svg so it never slides horizontally. */
.patch {
  position: absolute;
  bottom: 64px;
  will-change: transform;
  pointer-events: none;
  animation: patch-fade 0.18s ease-out;
}

.patch svg {
  display: block;
  overflow: visible;
  animation: patch-grow 0.2s ease-out;
  transform-origin: center bottom;
}

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

@keyframes patch-grow {
  from { transform: scaleY(0.3); }
}

/* sparkly stars Ty flicks across the screen to zap an obstacle */
.zap-star {
  position: absolute;
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: 6;
  background: #ffd23a;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  box-shadow: 0 0 16px 3px rgba(255, 210, 60, 0.95), 0 0 6px #fff;
  opacity: 1;
  /* travel slowly; stay bright most of the way then fade as they arrive */
  transition: transform 0.55s ease-out, opacity 0.22s ease-out 0.42s;
}

/* whoosh arc that pops in front of Ty on a swipe */
.swoosh {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
  animation: swoosh-go 0.4s ease-out forwards;
}

.swoosh svg { display: block; overflow: visible; }

@keyframes swoosh-go {
  0%   { transform: translateX(-10px) scale(0.5) rotate(-12deg); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(34px) scale(1.35) rotate(10deg); opacity: 0; }
}

/* collectible fish */
.item {
  position: absolute;
  will-change: transform;
  pointer-events: none;
}

.item svg { display: block; overflow: visible; }

.fish svg { animation: fish-bob 1.3s ease-in-out infinite; }

@keyframes fish-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}

/* smashed letter flying up out of the rubble */
.letter-pop {
  position: absolute;
  font-size: 3rem;
  font-weight: 700;
  color: #5a6cc0;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.9), 0 3px 0 rgba(60, 50, 90, 0.3);
  pointer-events: none;
  z-index: 5;
  animation: letter-rise 0.8s ease-out forwards;
}

@keyframes letter-rise {
  0%   { transform: translateY(0) scale(0.6) rotate(-15deg); opacity: 1; }
  40%  { transform: translateY(-70px) scale(1.5) rotate(10deg); opacity: 1; }
  100% { transform: translateY(-130px) scale(1) rotate(20deg); opacity: 0; }
}

/* fireflies on night-time bushes */
.ff { animation: firefly-glow 1.6s ease-in-out infinite; }
.ff2 { animation-delay: 0.4s; }
.ff3 { animation-delay: 0.8s; }
.ff4 { animation-delay: 1.2s; }

@keyframes firefly-glow {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.puff {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  pointer-events: none;
  animation: puff-out 0.5s ease-out forwards;
}

@keyframes puff-out {
  from { transform: scale(0.4) translateY(0); opacity: 0.9; }
  to   { transform: scale(2.2) translateY(-14px); opacity: 0; }
}

.star-pop {
  position: absolute;
  font-size: 4.5rem;
  color: #ffce3a;
  text-shadow:
    0 0 20px rgba(255, 200, 60, 0.95),
    0 0 6px #fff,
    0 3px 0 rgba(160, 110, 0, 0.35);
  pointer-events: none;
  z-index: 5;
  animation: star-rise 1.4s ease-out forwards;
}

@keyframes star-rise {
  0%   { transform: translateY(0) scale(0.2) rotate(-25deg); opacity: 1; }
  25%  { transform: translateY(-60px) scale(1.7) rotate(8deg); opacity: 1; }
  70%  { transform: translateY(-120px) scale(1.3) rotate(15deg); opacity: 1; }
  100% { transform: translateY(-170px) scale(1) rotate(22deg); opacity: 0; }
}

.burst-ring {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 5px solid #ffd166;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  animation: ring-out 0.6s ease-out forwards;
}

@keyframes ring-out {
  from { transform: scale(0.4); opacity: 1; }
  to   { transform: scale(4.5); opacity: 0; }
}

.sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: sparkle-fade 0.7s ease-out forwards;
}

@keyframes sparkle-fade {
  from { transform: scale(1) rotate(0deg); opacity: 1; }
  to   { transform: scale(0.2) rotate(120deg); opacity: 0; }
}

.confetti {
  position: absolute;
  width: 12px;
  height: 12px;
  top: -20px;
  pointer-events: none;
  animation: confetti-fall 2.6s ease-in forwards;
}

@keyframes confetti-fall {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to   { transform: translateY(110vh) rotate(720deg); opacity: 0.8; }
}

/* ---------- HUD ---------- */

#hud {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  /* sit above the overlays so the sound/home buttons stay clickable */
  z-index: 40;
}

.badge {
  background: rgba(255, 255, 255, 0.82);
  border: 3px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  padding: 6px 20px;
  font-family: inherit;
  font-size: 1.9rem;
  font-weight: 700;
  color: #5a4632;
  min-width: 96px;
  text-align: center;
}

#fish-badge { display: flex; align-items: center; gap: 8px; }

#paws-badge {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  min-width: 0;
}

.paw { font-size: 1.5rem; transition: opacity 0.2s, filter 0.2s; }
.paw.used { opacity: 0.28; filter: grayscale(1); }

#paws-badge.shake { animation: badge-shake 0.4s ease-in-out; }

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

.badge.bump { animation: badge-bump 0.3s ease-out; }

@keyframes badge-bump {
  50% { transform: scale(1.25); }
}

.hud-spacer { flex: 1; }

#timer-display {
  min-width: 0;
  font-size: 1.4rem;
  padding: 8px 16px;
  background: rgba(150, 210, 150, 0.95);
}
#timer-display.warning {
  background: rgba(255, 170, 110, 0.97);
  animation: pulse 1s ease-in-out infinite;
}
#timer-display.hidden { display: none; }

#gear-btn, #home-btn {
  pointer-events: auto;
  cursor: pointer;
  min-width: 0;
  font-size: 1.5rem;
  padding: 8px 16px;
}

/* ---------- settings menu + how-to-play ---------- */

#settings-menu { background: rgba(30, 20, 60, 0.5); z-index: 60; }
#help-screen { background: rgba(30, 20, 60, 0.55); z-index: 60; }

.settings-card, .help-card { border-color: #5a6cc0; gap: 12px; }
.settings-card h2, .help-card h2 { color: #5a6cc0; }

.menu-btn {
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  color: #5a4632;
  background: #eef0fb;
  border: 3px solid #c4cdee;
  border-radius: 16px;
  padding: 12px 28px;
  min-width: 260px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.menu-btn:hover { background: #dde2f7; }
.menu-btn:active { transform: scale(0.96); }

.help-list {
  text-align: left;
  max-width: 420px;
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.help-list li { font-size: 1.2rem; font-weight: 600; color: #5a4632; }

/* ---------- change-stars (reset) banner ---------- */

.reset-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(240, 165, 0, 0.95);
  border: 3px solid #fff;
  border-radius: 18px;
  padding: 8px 16px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(90, 70, 50, 0.3);
}
.reset-banner.hidden { display: none; }
.reset-banner .big-btn { padding: 8px 22px; font-size: 1.1rem; }

/* level cells pulse while in change-stars mode */
.lv-grid.reset-mode .lv-cell {
  border-style: dashed;
  border-color: #f0a500;
  animation: reset-pulse 1.1s ease-in-out infinite;
}
@keyframes reset-pulse {
  0%, 100% { background: #fff3d6; }
  50% { background: #ffe6a8; }
}

/* ---------- play timer picker + time's up ---------- */

#timer-picker { background: rgba(30, 20, 60, 0.5); z-index: 60; }

.timer-card { border-color: #f0a500; }
.timer-card h2 { color: #e07a3f; }

.timer-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 360px;
}

.timer-opt {
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  color: #5a4632;
  background: #f4f6ff;
  border: 3px solid #b9c2ec;
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.timer-opt:hover { background: #e7ecff; }
.timer-opt:active { transform: scale(0.93); }
.timer-opt.selected { background: #f0a500; color: #fff; border-color: #c98600; }

.timer-note {
  font-size: 0.95rem;
  font-weight: 600;
  color: #8a7560;
  margin-top: 4px;
}

#timesup-screen { background: rgba(30, 20, 60, 0.82); z-index: 70; }

.timesup-bubble {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 32px;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 4px solid #b89ae0;
  animation: card-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 90vw;
  text-align: center;
}

.timesup-moon {
  font-size: 5rem;
  animation: moon-bob 3s ease-in-out infinite;
}

@keyframes moon-bob {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50% { transform: translateY(-14px) rotate(10deg); }
}

.timesup-bubble h2 { font-size: 2.6rem; color: #5a3a9a; }
.timesup-bubble p { font-size: 1.4rem; color: #5a4632; font-weight: 600; }
.timesup-sub { font-size: 1.05rem !important; color: #9a8a78 !important; }

/* ---------- player (profile) bar ---------- */

.user-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 94vw;
}

.user-bar-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 0 rgba(90, 70, 50, 0.3);
  margin-right: 2px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: #5a4632;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  padding: 4px 14px 4px 10px;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}

.user-chip .uc-icon { font-size: 1.3rem; }
.user-chip:hover { background: #fff; }
.user-chip:active { transform: scale(0.94); }
.user-chip.selected { background: #ffd166; border-color: #f0a500; }
.user-chip.add { color: #5a6cc0; }
.user-chip.add .uc-icon { color: #5a6cc0; font-weight: 700; }

/* add-player dialog */
#user-dialog { background: rgba(30, 20, 60, 0.5); z-index: 50; }

#user-name {
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  color: #5a4632;
  background: #f4f6ff;
  border: 3px solid #b9c2ec;
  border-radius: 14px;
  padding: 10px 16px;
  width: 280px;
  max-width: 80vw;
  outline: none;
}

#user-name:focus { border-color: #5a6cc0; }

.pick-icon-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #8a7560;
  margin-top: 4px;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  max-width: 88vw;
}

.icon-opt {
  font-size: 1.6rem;
  background: #eef0fb;
  border: 3px solid #c4cdee;
  border-radius: 12px;
  padding: 4px;
  cursor: pointer;
  transition: transform 0.1s;
}

.icon-opt:active { transform: scale(0.9); }
.icon-opt.selected { background: #ffd166; border-color: #f0a500; }

/* ---------- home-screen settings bar ---------- */

.settings-bar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.set-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.88);
  border: 3px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  padding: 5px 10px 5px 14px;
}

.set-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #8a7560;
  margin-right: 2px;
}

.set-opt {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #5a4632;
  background: #eef0fb;
  border: 2px solid #c4cdee;
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.set-opt:hover { background: #dde2f7; }
.set-opt.selected { background: #5a6cc0; color: #fff; border-color: #4a5aa8; }
.set-opt:active { transform: scale(0.94); }

/* ---------- level picker grid ---------- */

.picker-card {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 26px;
  padding: 16px 20px;
  border: 4px solid #5a6cc0;
  animation: card-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 96vw;
  max-height: 74vh;
  overflow-y: scroll;
  scrollbar-width: auto;
  scrollbar-color: #5a6cc0 #eef0fb;
}

/* big, chunky, kid-friendly scrollbar */
.picker-card::-webkit-scrollbar { width: 22px; }
.picker-card::-webkit-scrollbar-track {
  background: #eef0fb;
  border-radius: 11px;
  margin: 6px;
}
.picker-card::-webkit-scrollbar-thumb {
  background: #5a6cc0;
  border-radius: 11px;
  border: 4px solid #eef0fb;
  min-height: 60px;
}
.picker-card::-webkit-scrollbar-thumb:hover { background: #4a5aa8; }

.lv-grid { display: flex; flex-direction: column; gap: 7px; }

.lv-head, .lv-row-wrap {
  display: grid;
  grid-template-columns: 118px repeat(5, 78px);
  gap: 7px;
  align-items: center;
}

.lv-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #5a6cc0;
}

.lv-col span { font-size: 0.78rem; color: #8a7560; }

.lv-rowlabel {
  font-size: 1.05rem;
  font-weight: 700;
  color: #5a4632;
  text-align: right;
  padding-right: 4px;
  letter-spacing: 0.03em;
}

/* word rows get a tinted label to set them apart from the letter rows */
.lv-row-wrap.word-row .lv-rowlabel { color: #8a4bd0; }

.lv-cell {
  height: 54px;
  font-family: inherit;
  background: #eef0fb;
  border: 3px solid #b9c2ec;
  border-radius: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
}

.lv-row-wrap.word-row .lv-cell { background: #f3ecfb; border-color: #d3bdf0; }

.lv-cell:hover { background: #dde2f7; }
.lv-row-wrap.word-row .lv-cell:hover { background: #e7d9f7; }
.lv-cell:active { transform: scale(0.93); }

.lv-stars {
  font-size: 1.05rem;
  color: #ffb703;
  letter-spacing: 0.02em;
}

/* ---------- win screen ---------- */

#win-title { color: #5a6cc0; }

.win-stars {
  font-size: 3.4rem;
  color: #ffb703;
  letter-spacing: 0.06em;
  line-height: 1;
}

.win-stars span {
  display: inline-block;
  animation: star-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes star-bounce {
  from { transform: scale(0) rotate(-40deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

.win-btns { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }

.big-btn {
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  background: #7cbc60;
  border: none;
  border-radius: 999px;
  padding: 12px 30px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(60, 90, 40, 0.3);
  transition: transform 0.1s;
}

.big-btn.alt { background: #5a6cc0; box-shadow: 0 4px 0 rgba(40, 50, 90, 0.3); }
.big-btn:active { transform: translateY(3px); box-shadow: none; }

/* ---------- overlays ---------- */

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 20px;
}

.overlay.hidden { display: none; }

#title {
  font-size: clamp(3rem, 11vw, 6.5rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 0 rgba(90, 70, 50, 0.25);
  letter-spacing: 0.02em;
}

#title span {
  display: inline-block;
  animation: letter-bounce 1.6s ease-in-out infinite;
}

@keyframes letter-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-16px) rotate(-4deg); }
  50% { transform: translateY(0); }
}

/* speech bubble that sits above Ty in the bottom-left of the intro screen */
.greeting {
  position: absolute;
  left: 30px;
  bottom: 236px;
  font-size: clamp(1.3rem, 4vw, 2rem);
  font-weight: 700;
  color: #fff;
  background: rgba(240, 133, 31, 0.96);
  border: 3px solid #fff;
  border-radius: 20px;
  padding: 8px 20px;
  text-shadow: 0 2px 0 rgba(90, 70, 50, 0.25);
  animation: greeting-bob 2.2s ease-in-out infinite;
}

.greeting::after {
  content: '';
  position: absolute;
  left: 34px;
  bottom: -13px;
  border: 9px solid transparent;
  border-top-color: rgba(240, 133, 31, 0.96);
  border-bottom: 0;
}

@keyframes greeting-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

.hint {
  font-size: clamp(1.3rem, 4vw, 2rem);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 0 rgba(90, 70, 50, 0.2);
}

.tap-hint {
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-weight: 600;
  color: #fff;
  background: rgba(90, 70, 50, 0.35);
  padding: 10px 26px;
  border-radius: 999px;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.07); opacity: 0.85; }
}

.total-stars {
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 0 rgba(90, 70, 50, 0.2);
}

.card {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 28px;
  padding: 34px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 4px solid #ffd166;
  animation: card-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 90vw;
}

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

.card h2 {
  font-size: 3rem;
  color: #e07a3f;
}

.big-time {
  font-size: 2.4rem;
  font-weight: 700;
  color: #5a4632;
}

.over-stars {
  font-size: 1.8rem;
  color: #ffb703;
  letter-spacing: 0.1em;
}

.over-fish {
  font-size: 1.5rem;
  font-weight: 600;
  color: #4a8fc7;
}

.over-fish:empty { display: none; }

.best-line {
  font-size: 1.25rem;
  font-weight: 600;
  color: #8a7560;
}

.best-line.new-best {
  color: #e0573f;
  font-size: 1.6rem;
  animation: pulse 0.8s ease-in-out infinite;
}

.card .tap-hint {
  color: #fff;
  background: #7cbc60;
  margin-top: 8px;
}