:root {
  --sky: #bfe6ff;
  --sky-2: #e9f7ff;
  --grass: #9edc7a;
  --ink: #2b2d42;
  --ink-soft: #5c6178;
  --card: #ffffff;
  --coral: #ff7a6b;
  --blue: #4aa8ff;
  --lime: #3cc47c;
  --sun: #ffcc33;
  --grape: #9b6cff;
  --shadow: 0 6px 0 rgba(43, 45, 66, 0.15);
  --radius: 28px;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

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

body {
  background:
    radial-gradient(120% 60% at 50% 115%, var(--grass) 0 38%, transparent 38.5%),
    linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 70%);
  background-attachment: fixed;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}

/* ---------- screens ---------- */
.screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.screen.active { display: flex; animation: fade-in 0.3s ease; }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- home ---------- */
#home { justify-content: center; gap: clamp(16px, 4vh, 40px); }

.title {
  margin: 0;
  font-size: clamp(2.4rem, 10vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1;
}
.title span:first-child { color: var(--coral); }
.title span:last-child { color: var(--blue); }

.modes {
  display: flex;
  gap: clamp(14px, 4vw, 32px);
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.mode-card {
  flex: 1 1 240px;
  max-width: 340px;
  min-height: clamp(150px, 28vh, 260px);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.mode-card:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(43, 45, 66, 0.15); }
.mode-card.numbers { background: #fff1ee; }
.mode-card.letters { background: #eef6ff; }
.mode-art { font-size: clamp(2rem, 7vw, 3rem); }
.mode-name { font-size: clamp(2.4rem, 9vw, 3.6rem); font-weight: 900; line-height: 1; }
.numbers .mode-name { color: var(--coral); }
.letters .mode-name { color: var(--blue); }
.mode-sub { font-size: 1.1rem; font-weight: 700; color: var(--ink-soft); }

.settings {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}
.seg { display: flex; background: rgba(255, 255, 255, 0.7); border-radius: 999px; padding: 4px; }
.seg button {
  min-width: 56px;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.seg button.on { background: var(--coral); color: #fff; }

/* ---------- game bar ---------- */
#game { gap: 8px; }

.bar {
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.round-btn {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: 1.6rem;
  display: grid;
  place-items: center;
}
.round-btn:active { transform: translateY(3px); }
.exit { opacity: 0.75; }
.exit .ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  fill: none;
  stroke: var(--coral);
  stroke-width: 4;
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
}
.exit.holding .ring { transition: stroke-dashoffset 0.8s linear; stroke-dashoffset: 0; }

.progress {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(4px, 1.5vw, 10px);
}
.progress li {
  width: clamp(12px, 3vw, 20px);
  height: clamp(12px, 3vw, 20px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  display: grid;
  place-items: center;
  font-size: clamp(12px, 3vw, 20px);
  line-height: 1;
}
.progress li.now { background: var(--sun); transform: scale(1.3); }
.progress li.done { background: var(--lime); }
.progress li.star { background: none; transform: scale(1.25); }

/* ---------- stage ---------- */
.stage {
  flex: 1;
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* numbers: animals laid out like a ten-frame (rows of five) */
.field {
  /* animal size: fit the columns across the screen and the rows into ~1/3 of the height */
  --cell: min(calc((100vw - 48px) / (var(--cols) * 1.12 + 0.4)), calc(34vh / var(--rows)), 160px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: calc(var(--cell) * 0.12);
  /* exactly N cells + gaps + padding, so rows break after five (ten-frame) */
  max-width: calc(var(--cell) * (var(--cols) * 1.12 + 0.32));
  padding: calc(var(--cell) * 0.2);
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
}
.field .break { flex-basis: 100%; height: 0; }

.animal {
  position: relative;
  width: var(--cell);
  height: var(--cell);
  font-size: calc(var(--cell) * 0.78);
  line-height: 1;
  background: none;
  padding: 0;
  animation: pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) backwards;
}
.animal[data-count]::after {
  content: attr(data-count);
  position: absolute;
  top: -6%;
  right: -6%;
  min-width: 42%;
  height: 42%;
  padding: 0 6%;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: calc(var(--cell) * 0.28);
  font-weight: 900;
  display: grid;
  place-items: center;
  animation: pop 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.animal.bounce { animation: bounce 0.45s ease; }

@keyframes pop { from { transform: scale(0); } }
@keyframes bounce { 40% { transform: translateY(-22%) scale(1.12); } }

/* letters */
.letter-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.05em 0.35em;
  font-size: min(30vw, 26vh, 220px);
  font-weight: 900;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.letter-card .upper { color: var(--blue); }
.letter-card .lower { color: var(--grape); font-size: 0.75em; }
.letter-card:active { transform: scale(0.96); }

/* ---------- choices ---------- */
.choices {
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 3vw, 24px);
  padding-bottom: 4px;
}

.choice, .pic {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.3s ease;
  animation: pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) backwards;
}
.choice:nth-child(2), .pic:nth-child(2) { animation-delay: 0.08s; }
.choice:nth-child(3), .pic:nth-child(3) { animation-delay: 0.16s; }
.choice:active, .pic:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(43, 45, 66, 0.15); }

.choice {
  height: min(22vh, 150px);
  font-size: min(16vh, 18vw, 110px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}
.choice.c0 { background: var(--coral); }
.choice.c1 { background: var(--blue); }
.choice.c2 { background: var(--grape); }

.pic {
  background: var(--card);
  height: min(30vh, 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.pic .emoji { font-size: min(17vh, 20vw, 130px); line-height: 1.1; }
.pic .word {
  font-size: clamp(1rem, 4vw, 1.6rem);
  font-weight: 800;
  color: var(--ink-soft);
  visibility: hidden;
}
.pic .word b { color: var(--blue); font-size: 1.3em; }
.pic.reveal .word { visibility: visible; animation: pop 0.3s ease; }

.right { animation: celebrate 0.6s ease !important; box-shadow: 0 0 0 6px var(--lime), var(--shadow) !important; }
.wrong { animation: shake 0.45s ease !important; opacity: 0.35; filter: grayscale(0.8); }
.fade { opacity: 0.25; }

@keyframes celebrate { 30% { transform: scale(1.12) rotate(-3deg); } 60% { transform: scale(1.05) rotate(3deg); } }
@keyframes shake {
  20% { transform: translateX(-10px); } 40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(6px); }
}

/* ---------- finish ---------- */
#finish { justify-content: center; gap: 12px; text-align: center; }
.trophy { font-size: min(30vw, 24vh); animation: bounce 1.2s ease infinite; }
.finish-title { margin: 0; font-size: clamp(2.2rem, 9vw, 4rem); font-weight: 900; color: var(--coral); }
.stars { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.stars .row { font-size: clamp(1.6rem, 6vw, 2.6rem); letter-spacing: 0.05em; min-height: 1.2em; }
.stars .count { font-size: 1.4rem; font-weight: 800; color: var(--ink-soft); }
.finish-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.big-btn {
  min-width: 170px;
  padding: 18px 28px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: 1.5rem;
  font-weight: 900;
}
.big-btn.go { background: var(--lime); color: #fff; }
.big-btn:active { transform: translateY(4px); }

/* ---------- confetti ---------- */
#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }
#confetti span {
  position: absolute;
  top: -10vh;
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translate(var(--drift), 115vh) rotate(var(--spin)); }
}

/* short landscape phones */
@media (max-height: 480px) and (orientation: landscape) {
  .round-btn { width: 44px; height: 44px; font-size: 1.2rem; }
  .choice { height: 22vh; font-size: 16vh; }
  .pic { height: 34vh; }
  .pic .emoji { font-size: 20vh; }
  .letter-card { font-size: 30vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}