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

:root {
  --bg: #FFF7EC;
  --text: #3D2C2E;
  --text-muted: #8B7E80;
  --card: #ffffff;
  --accent-red: #FF6B6B;
  --accent-teal: #4ECDC4;
  --accent-yellow: #FFD93D;
  --accent-purple: #6C5CE7;
  --accent-orange: #FF9F43;
  --accent-green: #2ECC71;
  --rail: #E3D5C8;
  --shadow-sm: 0 4px 12px rgba(61, 44, 46, 0.08);
  --shadow-md: 0 8px 28px rgba(61, 44, 46, 0.12);
  --radius: 20px;
}

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* blobs */
.blob { position: fixed; border-radius: 50%; filter: blur(90px); opacity: 0.22; z-index: 0; animation: blobFloat 14s ease-in-out infinite alternate; pointer-events: none; }
.blob-1 { width: 380px; height: 380px; background: var(--accent-green); top: -140px; left: -80px; }
.blob-2 { width: 340px; height: 340px; background: var(--accent-teal); bottom: -100px; right: -60px; animation-delay: -5s; }
.blob-3 { width: 280px; height: 280px; background: var(--accent-yellow); top: 35%; left: 55%; animation-delay: -9s; }
@keyframes blobFloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(24px, -32px) scale(1.06); }
}

/* top bar */
.top-bar { position: relative; z-index: 10; padding: 12px 20px; }
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.95rem;
  color: var(--text-muted); text-decoration: none;
  padding: 8px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.6); backdrop-filter: blur(8px);
  transition: background 0.2s, color 0.2s;
}
.back-btn:hover { background: rgba(255,255,255,0.9); color: var(--text); }

/* game wrapper — wider than the other games, the line needs the room */
.game-wrapper {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 0 24px;
  max-width: 760px; margin: 0 auto; width: 100%;
}
.game-header, .equation, .hint, .hop-pad, .actions { padding-left: 16px; padding-right: 16px; }

/* header */
.game-header { text-align: center; margin-bottom: 6px; animation: fadeDown 0.5s ease both; }
.game-header h1 {
  font-family: 'Baloo 2', cursive; font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  background: linear-gradient(135deg, var(--accent-green), var(--accent-purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.emoji-bounce {
  display: inline-block; -webkit-text-fill-color: initial;
  animation: emojiBounce 2s ease-in-out infinite;
}
@keyframes emojiBounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%  { transform: translateY(-6px) rotate(-8deg); }
  75%  { transform: translateY(-3px) rotate(6deg); }
}
.subtitle { font-size: 0.95rem; font-weight: 600; color: var(--text-muted); margin-top: 2px; }
@keyframes fadeDown {
  0% { opacity: 0; transform: translateY(-18px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── The running equation ── */
.equation {
  display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: 8px;
  font-family: 'Baloo 2', cursive; font-weight: 800;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  margin: 10px 0 6px;
  min-height: 46px;
  animation: fadeDown 0.5s 0.1s ease both;
}
.eq-part { display: inline-block; }
.eq-start { color: var(--text-muted); }
.eq-rest { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.eq-term { display: inline-block; animation: termIn 0.34s cubic-bezier(0.34,1.56,0.64,1) both; }
.eq-term.fwd  { color: var(--accent-green); }
.eq-term.back { color: var(--accent-red); }
.eq-equals { color: var(--text-muted); }
.eq-total {
  color: var(--accent-purple);
  background: var(--card);
  border-radius: 14px;
  padding: 2px 16px;
  box-shadow: var(--shadow-sm);
}
.eq-total.pop { animation: totalPop 0.36s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes totalPop {
  0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); }
}
@keyframes termIn {
  0%   { opacity: 0; transform: translateY(-14px) scale(0.6); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── The number line ── */
/* The line runs 0-20, which is wider than a phone. Fade the edge that has
   more line beyond it so it's obvious the line keeps going. */
.line-viewport { position: relative; width: 100%; }
.line-viewport::before,
.line-viewport::after {
  content: '';
  position: absolute; top: 0; bottom: 8px; width: 48px;
  pointer-events: none; z-index: 4;
  opacity: 0; transition: opacity 0.25s;
}
.line-viewport::before { left: 0;  background: linear-gradient(to right, var(--bg) 20%, rgba(255,247,236,0)); }
.line-viewport::after  { right: 0; background: linear-gradient(to left,  var(--bg) 20%, rgba(255,247,236,0)); }
.line-viewport.can-left::before  { opacity: 1; }
.line-viewport.can-right::after  { opacity: 1; }

.line-stage {
  position: relative;
  width: 100%;
  height: 186px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  animation: fadeDown 0.5s 0.2s ease both;
}
.line-stage::-webkit-scrollbar { height: 6px; }
.line-stage::-webkit-scrollbar-thumb { background: #E3D5C8; border-radius: 3px; }

.number-line {
  position: absolute;
  left: 0; bottom: 8px;
  display: flex;
  align-items: flex-start;
  z-index: 1;
}
/* the rail the frog hops along */
.number-line::before {
  content: '';
  position: absolute;
  left: 18px; right: 18px; top: 5px;
  height: 5px;
  background: var(--rail);
  border-radius: 3px;
}

.tick {
  flex: 0 0 48px;
  width: 48px;
  background: none; border: none; padding: 0 0 4px;
  cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  position: relative;
  touch-action: manipulation;
}
.tick-mark {
  width: 4px; height: 15px;
  background: #D8C9BC; border-radius: 2px;
  transition: height 0.2s, background 0.2s;
}
.tick-label {
  font-family: 'Baloo 2', cursive; font-weight: 700;
  font-size: 1rem; color: var(--text-muted);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), color 0.25s;
}
.tick.five .tick-mark { height: 24px; background: var(--accent-purple); }
.tick.five .tick-label { color: var(--accent-purple); font-size: 1.2rem; }
.tick:hover .tick-label { transform: scale(1.18); }
.tick:active .tick-label { transform: scale(0.9); }
.tick.current .tick-mark { background: var(--accent-green); height: 26px; }
.tick.current .tick-label { color: var(--accent-green); transform: scale(1.35); }

/* hop arcs drawn over the line */
.hop-arcs {
  position: absolute;
  left: 0; bottom: 74px;
  height: 74px;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.hop-arc {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: arcDraw 0.34s ease forwards;
}
@keyframes arcDraw { to { stroke-dashoffset: 0; } }
.hop-arc.fading { transition: opacity 0.5s; opacity: 0; }

/* ── The frog ── */
.frog {
  position: absolute;
  bottom: 62px;
  width: 46px; height: 46px;
  font-size: 2.2rem; line-height: 46px;
  text-align: center;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,0.18));
  transition: left 0.19s cubic-bezier(0.4, 0, 0.6, 1);
}
.frog.hopping { animation: frogHop 0.19s ease-in-out; }
@keyframes frogHop {
  0%   { transform: translateY(0) scale(1, 1); }
  25%  { transform: translateY(-26px) scale(0.92, 1.12); }
  60%  { transform: translateY(-30px) scale(1.04, 0.94); }
  100% { transform: translateY(0) scale(1, 1); }
}
.frog.bumped { animation: frogBump 0.42s cubic-bezier(0.36,0.07,0.19,0.97); }
@keyframes frogBump {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-8px) rotate(-8deg); }
  45% { transform: translateX(7px) rotate(7deg); }
  70% { transform: translateX(-4px) rotate(-4deg); }
}

/* ── Hint line ── */
.hint {
  text-align: center; font-size: 0.92rem; font-weight: 700;
  color: var(--text-muted); margin: 4px 0 12px;
  min-height: 22px;
  animation: fadeDown 0.5s 0.3s ease both;
  transition: color 0.2s;
}
.hint.alert { color: var(--accent-orange); }

/* ── Hop pad ── */
.hop-pad {
  display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
  animation: fadeDown 0.5s 0.35s ease both;
}
.hop-group { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hop-group-label {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.hop-row { display: flex; gap: 8px; }

.hop-btn {
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 1.25rem;
  width: 62px; height: 56px;
  border: none; border-radius: 18px; cursor: pointer;
  color: #fff;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s, opacity 0.25s;
  touch-action: manipulation;
}
.hop-btn.fwd  { background: linear-gradient(135deg, var(--accent-green), #55DD8E); box-shadow: 0 4px 14px rgba(46,204,113,0.34); }
.hop-btn.back { background: linear-gradient(135deg, var(--accent-red), #FF8E8E);  box-shadow: 0 4px 14px rgba(255,107,107,0.34); }
.hop-btn:hover:not(:disabled) { transform: translateY(-3px); }
.hop-btn:active { transform: scale(0.92); }
.hop-btn:disabled { opacity: 0.3; pointer-events: none; }

/* ── Actions ── */
.actions {
  display: flex; gap: 10px; justify-content: center;
  animation: fadeDown 0.5s 0.4s ease both;
  margin-top: 16px;
}
.btn {
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.95rem;
  border: none; border-radius: 16px; padding: 12px 22px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, opacity 0.3s;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.93); }
.btn:disabled { opacity: 0.35; pointer-events: none; }
.btn-icon { font-size: 1.1rem; display: inline-block; }
.btn-clear { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }
.btn-clear:hover:not(:disabled) { box-shadow: var(--shadow-md); transform: translateY(-2px); }

@media (max-width: 420px) {
  .hop-btn { width: 54px; height: 50px; font-size: 1.1rem; }
  .hop-pad { gap: 14px; }
  .btn { padding: 11px 16px; font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .blob, .emoji-bounce { animation: none; }
  .frog { transition-duration: 0.01s; }
  .frog.hopping { animation-duration: 0.01s; }
}