/* ---- Theme & reset ---- */
:root {
  --sky: #7cc6ff;
  --sky-2: #a8e0ff;
  --ink: #3a3357;
  --card: #ffffff;
  --shadow: rgba(60, 50, 90, 0.18);
  --topbar-h: 64px;
  font-size: 18px;
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Baloo 2', 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 100%);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---- Top bar ---- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  padding-top: env(safe-area-inset-top, 0);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px var(--shadow);
  z-index: 20;
}
.top-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
}
.topbar-btn {
  min-width: 56px;
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  font-size: 1.1rem;
  font-weight: 700;
  background: #fff;
  box-shadow: 0 3px 0 var(--shadow);
  transition: transform 0.08s ease;
}
.topbar-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
.mute-btn .mute-off { display: none; }
.mute-btn.is-muted .mute-on { display: none; }
.mute-btn.is-muted .mute-off { display: inline; }

/* ---- App container ---- */
.app {
  position: absolute;
  inset: var(--topbar-h) 0 0 0;
  overflow: hidden;
}

/* ---- Hub menu ---- */
.hub-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 24px;
  align-content: center;
  justify-items: center;
  overflow-y: auto;
}
.game-card {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px;
  border-radius: 28px;
  background: var(--card);
  box-shadow: 0 8px 0 var(--shadow), 0 12px 24px var(--shadow);
  border: 5px solid var(--accent);
  transition: transform 0.12s ease;
}
.game-card:active { transform: scale(0.96); }
.game-card .game-emoji { font-size: 4.5rem; line-height: 1; filter: drop-shadow(0 4px 4px var(--shadow)); }
/* generated hero image */
.game-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6), 0 4px 10px var(--shadow);
}
.game-card.is-soon { justify-content: center; aspect-ratio: 1 / 1; }
.game-card .game-title { font-size: 1.6rem; font-weight: 800; }
.game-card .game-blurb { font-size: 0.95rem; opacity: 0.75; text-align: center; }
.game-card.is-soon { opacity: 0.7; filter: grayscale(0.3); }
.soon-badge {
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  padding: 3px 12px;
  border-radius: 999px;
}

/* ---- Animal Care: room ---- */
.ac-game { height: 100%; display: flex; flex-direction: column; }
.ac-room {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.ac-wall {
  position: absolute;
  inset: 0 0 32% 0;
  background: linear-gradient(180deg, #ffe9c7 0%, #ffe0b0 100%);
}
.ac-window {
  position: absolute;
  top: 12%;
  left: 10%;
  width: 26%;
  height: 46%;
  background: linear-gradient(180deg, #bfe9ff, #8fd3ff);
  border: 8px solid #fff;
  border-radius: 14px;
  box-shadow: 0 6px 0 var(--shadow);
  overflow: hidden;
}
.ac-cloud {
  position: absolute;
  top: 22%;
  left: -30%;
  width: 50%;
  height: 22%;
  background: #fff;
  border-radius: 999px;
  box-shadow: 30px 6px 0 -2px #fff, -16px 8px 0 -4px #fff;
  animation: drift 14s linear infinite;
}
.ac-cloud2 { top: 55%; animation-duration: 20s; animation-delay: -6s; opacity: 0.85; }
.ac-frame {
  position: absolute;
  top: 14%;
  right: 12%;
  font-size: 3rem;
  background: #fff;
  padding: 6px 10px;
  border-radius: 14px;
  box-shadow: 0 6px 0 var(--shadow);
}
.ac-floor {
  position: absolute;
  inset: 68% 0 0 0;
  background: linear-gradient(180deg, #c79a6b 0%, #b8895a 100%);
}
.ac-rug {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 78%;
  height: 56%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, #ff9ec4 0%, #ff7db0 55%, #f2669e 56%, #f2669e 100%);
  border-radius: 50%;
  opacity: 0.85;
}

/* ---- Animals on stage ---- */
.ac-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(4px, 3vw, 36px);
  padding: 0 12px 4%;
  /* let taps in the empty upper area reach the window / rainbow behind */
  pointer-events: none;
}
.ac-animal { pointer-events: auto; }
.ac-animal {
  position: relative;
  width: clamp(120px, 28vw, 230px);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease;
  outline: none;
}
.ac-animal.is-selected { transform: translateY(-10px) scale(1.06); z-index: 3; }
.ac-art { position: relative; width: 100%; display: block; }
.ac-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* selection glow ring under the selected pet */
.ac-animal.is-selected::after {
  content: '';
  position: absolute;
  bottom: 2%;
  left: 50%;
  width: 70%;
  height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255,224,102,0.9), rgba(255,224,102,0));
  animation: ring-pulse 1.4s ease-in-out infinite;
}

.ac-name {
  order: 3;
  margin-top: -6px;
  font-weight: 800;
  font-size: 1rem;
  background: #fff;
  padding: 2px 12px;
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--shadow);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ac-animal.is-selected .ac-name { opacity: 1; }

.ac-mood {
  order: 0;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 2px var(--shadow));
  transition: transform 0.2s ease;
}
.ac-animal[data-mood="sad"] .ac-mood { animation: mood-wobble 1.2s ease-in-out infinite; }

/* ---- Action bar ---- */
.ac-hint {
  text-align: center;
  margin: 0;
  padding: 4px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255,255,255,0.55);
  transition: opacity 0.3s ease, height 0.3s ease;
}
.ac-hint.is-hidden { opacity: 0; height: 0; padding: 0; overflow: hidden; }
.ac-actionbar {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 1.4vw, 14px);
  justify-content: center;
  padding: 10px clamp(8px, 3vw, 28px);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  box-shadow: 0 -3px 12px var(--shadow);
}
.ac-action {
  flex: 1 1 90px;
  max-width: 140px;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 22px;
  background: var(--accent);
  box-shadow: 0 5px 0 var(--shadow);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.ac-action:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--shadow); }
.ac-action-emoji { font-size: 2.2rem; line-height: 1; }
.ac-action-label { font-size: 1rem; font-weight: 800; color: #5a4a2a; }

/* ---- Props & particles (spawned by JS) ---- */
.ac-prop-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.ac-prop {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  font-size: 2.4rem;
  filter: drop-shadow(0 3px 3px var(--shadow));
}
.ac-prop-feed, .ac-prop-water { animation: prop-rise 1.4s ease both; }
.ac-prop-bath { bottom: auto; top: 6%; font-size: 2rem; animation: prop-bath 1.4s ease both; }
/* the play ball is big and bounces in front of the pet, up near its head */
.ac-prop-play { bottom: auto; top: 16%; font-size: 3.6rem; animation: play-ball 2s ease both; z-index: 6; }
.ac-prop-brush { bottom: auto; top: 20%; font-size: 2.4rem; animation: prop-rise 1.6s ease both; }
.ac-particle {
  position: absolute;
  bottom: 30%;
  font-size: 1.5rem;
  animation: particle-float 1.5s ease-out forwards;
  pointer-events: none;
}

/* ---- Thought bubble (a pet asking for something) ---- */
.ac-thought {
  order: -1;
  position: absolute;
  top: -6px;
  right: 14%;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--shadow);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 6;
}
/* little bubble tail */
.ac-thought::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 12px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: -8px 6px 0 -4px #fff;
}
.ac-thought.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  animation: bubble-bob 1.6s ease-in-out infinite;
}

/* ---- Queue badge (taps waiting their turn) ---- */
.ac-queue {
  position: absolute;
  top: -2px;
  left: 14%;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: #ff7db0;
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--shadow);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 7;
}
.ac-queue.show { opacity: 1; transform: scale(1); }

/* ---- Floating praise message ---- */
.ac-say {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-weight: 800;
  font-size: 1.1rem;
  color: #ff5fa0;
  background: #fff;
  padding: 4px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--shadow);
  pointer-events: none;
  z-index: 8;
  animation: say-float 1.3s ease-out forwards;
}

/* ---- Needs meter panel (selected pet) ---- */
.ac-needs {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 18px);
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.6);
}
.ac-needs-pet {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ink);
  min-width: 70px;
  text-align: right;
}
.ac-meters { display: flex; gap: clamp(8px, 2vw, 16px); flex-wrap: wrap; }
.ac-meter { display: flex; align-items: center; gap: 6px; }
.ac-meter-icon { font-size: 1.3rem; line-height: 1; }
.ac-meter-track {
  width: clamp(56px, 12vw, 96px);
  height: 16px;
  border-radius: 999px;
  background: rgba(60, 50, 90, 0.16);
  overflow: hidden;
  box-shadow: inset 0 2px 3px rgba(60, 50, 90, 0.18);
}
.ac-meter-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
}
/* a low need pulses to draw the eye */
.ac-meter.is-low .ac-meter-icon { animation: nudge 0.9s ease-in-out infinite; }
.ac-meter.is-low .ac-meter-fill { filter: saturate(1.4) brightness(0.95); }

/* ---- Celebration banner ---- */
.ac-banner {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translate(-50%, -10px);
  padding: 10px 28px;
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, #ff8fc0, #ff5fa0);
  border-radius: 999px;
  box-shadow: 0 8px 0 var(--shadow), 0 12px 22px var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 12;
}
.ac-banner.show { opacity: 1; transform: translate(-50%, 0); animation: banner-pop 0.5s ease; }

/* ---- Confetti (room-wide celebration) ---- */
.ac-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 11; }
.ac-confetti {
  position: absolute;
  top: -24px;
  width: 14px;
  height: 18px;
  border-radius: 3px;
  animation: confetti-fall 2.2s ease-in forwards;
}

/* ---- Drag ghost + drop target highlight ---- */
.ac-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) scale(1.2);
  font-size: 2.6rem;
  pointer-events: none;
  z-index: 1000;
  filter: drop-shadow(0 6px 6px var(--shadow));
}
.ac-action.is-dragging { opacity: 0.5; }
.ac-animal.is-drop-target { transform: translateY(-10px) scale(1.08); }
.ac-animal.is-drop-target::before {
  content: '';
  position: absolute;
  inset: -6% 8% 2% 8%;
  border: 4px dashed #ffd166;
  border-radius: 40% 40% 45% 45%;
  background: rgba(255, 209, 102, 0.18);
  z-index: 0;
}

/* ---- Bedtime: dim the room ---- */
.ac-night {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #2a2a5e 0%, #3d3a6b 70%, #4a3f70 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 9;
}
.ac-night.show { opacity: 0.55; }
.ac-moon { position: absolute; top: 10%; right: 14%; font-size: 3rem; filter: drop-shadow(0 0 12px #fff6c0); }
.ac-star { position: absolute; font-size: 1.4rem; animation: twinkle-star 1.8s ease-in-out infinite; }
.ac-star.s1 { top: 16%; left: 20%; }
.ac-star.s2 { top: 28%; left: 60%; animation-delay: -0.6s; }
.ac-star.s3 { top: 12%; left: 44%; animation-delay: -1.2s; }

/* ---- Window / rainbow tap surprises ---- */
.ac-window, .ac-frame { cursor: pointer; padding: 0; }
.ac-window { transition: box-shadow 0.3s ease; }
.ac-window.is-sunny { box-shadow: 0 0 24px 6px #ffe39a, 0 6px 0 var(--shadow); }
.ac-window:active, .ac-frame:active { transform: scale(0.96); }
.ac-sun {
  position: absolute;
  left: 50%;
  bottom: -30%;
  transform: translateX(-50%);
  font-size: 2.6rem;
  animation: sun-rise 1.7s ease forwards;
}
.ac-bird {
  position: absolute;
  top: 34%;
  left: -20%;
  font-size: 1.4rem;
  animation: bird-fly 1.7s linear forwards;
}
.ac-frame.pop { animation: frame-pop 0.7s ease; }
.ac-burst {
  position: absolute;
  font-size: 1.7rem;
  transform: translate(-50%, -50%);
  animation: burst 0.85s ease-out forwards;
  pointer-events: none;
  z-index: 12;
}

/* respect users who prefer less motion: keep gentle fades, drop big movement */
@media (prefers-reduced-motion: reduce) {
  .ac-cloud, .ac-particle, .ac-prop, .ac-confetti, .ac-thought.show,
  .ac-meter.is-low .ac-meter-icon, .ac-star, .ac-burst, .ac-sun, .ac-bird,
  .ac-animal.is-selected::after { animation-duration: 0.6s !important; }
}

/* ==================================================================
   SAMURAI game (letter-slashing)
   ================================================================== */
.sam-game { position: absolute; inset: 0; overflow: hidden; }
.sam-canvas { position: absolute; inset: 0; display: block; touch-action: none; }

.sam-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 16px;
  pointer-events: none;
}
.sam-target {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--shadow);
}
.sam-target.pulse { animation: sam-pulse 0.5s ease; }
.sam-target-label { font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.sam-target-letter { font-size: 2.4rem; font-weight: 900; line-height: 1; }
.sam-target-say { font-size: 1.2rem; }

.sam-scores { pointer-events: none; text-align: right; }
.sam-score {
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--shadow);
}
.sam-streak { display: block; margin-top: 6px; font-size: 1.1rem; font-weight: 800; color: #ff7043; }

/* start overlay */
.sam-start {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(60, 50, 90, 0.35);
  backdrop-filter: blur(3px);
  z-index: 5;
}
.sam-start.hidden { display: none; }
.sam-start-card {
  text-align: center;
  background: #fff;
  padding: 28px 34px;
  border-radius: 28px;
  box-shadow: 0 10px 0 var(--shadow), 0 16px 30px var(--shadow);
  max-width: 90%;
}
.sam-start-emoji { font-size: 4rem; line-height: 1; }
.sam-start-card h2 { margin: 8px 0 4px; font-size: 1.8rem; font-weight: 900; color: var(--ink); }
.sam-start-card p { margin: 0 0 18px; font-size: 1.05rem; color: var(--ink); opacity: 0.8; }
.sam-start-btn {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #5eb6e0, #3f9ad0);
  padding: 14px 40px;
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--shadow);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.sam-start-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--shadow); }

@keyframes sam-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sam-target.pulse { animation: none; }
}

/* Samurai: settings segmented controls + gear */
.sam-settings-btn {
  pointer-events: auto;
  font-size: 1.2rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 0 var(--shadow);
  margin-right: 8px;
  vertical-align: middle;
}
.sam-scores { display: flex; align-items: center; justify-content: flex-end; }
.sam-setting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0;
}
.sam-setting-label { font-weight: 800; color: var(--ink); min-width: 58px; text-align: right; }
.sam-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #eef1f7;
  border-radius: 999px;
}
.sam-seg button {
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  color: #5a5a72;
  background: transparent;
  transition: transform 0.08s ease;
}
.sam-seg button.is-active {
  background: #3f9ad0;
  color: #fff;
  box-shadow: 0 3px 0 var(--shadow);
}
.sam-seg button:active { transform: scale(0.95); }

/* ==================================================================
   CLIMB & SPELL game
   ================================================================== */
.cs-game { position: absolute; inset: 0; display: flex; flex-direction: column; }
.cs-wall {
  position: relative;
  flex: 1;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.35) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(90deg, rgba(60,90,110,0.06) 0 2px, transparent 2px 84px),
    linear-gradient(180deg, #d7ecf0 0%, #bfe0e6 100%);
}
.cs-web-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.cs-web { stroke: #ffffff; stroke-width: 4; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 1px 1px rgba(60,50,90,.3)); }
.cs-web.show { opacity: 0.95; }

/* prompt chip */
.cs-prompt {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--shadow);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
.cs-prompt b { color: #2ec4b6; font-size: 1.5rem; }
.cs-say { font-size: 1.2rem; }

/* perches */
.cs-perches { position: absolute; inset: 0; z-index: 3; }
.cs-perch {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(46px, 10vw, 66px);
  height: clamp(46px, 10vw, 66px);
  border-radius: 50%;
  background: #fff;
  border: 4px solid #cfd6e0;
  box-shadow: 0 4px 0 var(--shadow);
  opacity: 0.42;
  filter: grayscale(0.4);
  transition: opacity 0.2s ease, transform 0.1s ease;
}
.cs-perch-letter { font-size: clamp(1.1rem, 3.4vw, 1.7rem); font-weight: 900; color: var(--ink); }
.cs-perch.is-reachable {
  opacity: 1;
  filter: none;
  border-color: #2ec4b6;
  animation: cs-perch-pulse 1.4s ease-in-out infinite;
}
.cs-perch.bump { animation: cs-bump 0.35s ease; }

/* hero */
.cs-hero {
  position: absolute;
  left: 0; top: 0;
  width: clamp(58px, 13vw, 96px);
  z-index: 6;
  pointer-events: none;
  will-change: transform;
}
.cs-hero-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 5px rgba(60,50,90,.25)); animation: cs-idle 2.6s ease-in-out infinite; }
/* crawl: alternating climbing gait (opposite arm+leg move together) */
.cs-hero.is-crawling .cs-hero-svg { animation: none; }
.cs-hero.is-crawling .cs-arm-l, .cs-hero.is-crawling .cs-leg-r { animation: cs-gait 0.3s ease-in-out infinite; }
.cs-hero.is-crawling .cs-arm-r, .cs-hero.is-crawling .cs-leg-l { animation: cs-gait 0.3s ease-in-out infinite reverse; }
.cs-arm, .cs-leg { transform-box: fill-box; transform-origin: 50% 50%; }
/* swing: arms reach up to the web, a gentle hang sway */
.cs-hero.is-swinging .cs-hero-svg { animation: none; }
.cs-hero.is-swinging .cs-arm-l { transform: rotate(-16deg); }
.cs-hero.is-swinging .cs-arm-r { transform: rotate(16deg); }
.cs-hero.is-swinging .cs-leg { animation: cs-dangle 1s ease-in-out; }
/* shooting a web at a baddie: fling an arm out */
.cs-hero.is-shooting .cs-hero-svg { animation: none; }
.cs-hero.is-shooting .cs-arm-r { transform: rotate(-52deg); }
.cs-hero.is-shooting .cs-arm-l { transform: rotate(-10deg); }
.cs-hero.is-cheering .cs-hero-svg { animation: cs-cheer 0.5s ease-in-out 3; }

/* fx + celebration */
.cs-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 10; }
.cs-confetti { position: absolute; top: -24px; width: 14px; height: 18px; border-radius: 3px; animation: confetti-fall 2.2s ease-in forwards; }
.cs-cheer {
  position: absolute;
  top: 16%; left: 50%;
  transform: translate(-50%, -10px);
  z-index: 12;
  padding: 10px 26px;
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, #3fd9cb, #2ec4b6);
  border-radius: 999px;
  box-shadow: 0 8px 0 var(--shadow), 0 12px 22px var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cs-cheer.show { opacity: 1; transform: translate(-50%, 0); animation: banner-pop 0.5s ease; }

/* word bar */
.cs-wordbar {
  display: flex;
  gap: clamp(8px, 2vw, 16px);
  justify-content: center;
  align-items: center;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 -3px 12px var(--shadow);
}
.cs-slot {
  width: clamp(38px, 9vw, 58px);
  height: clamp(46px, 11vw, 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  font-weight: 900;
  color: var(--ink);
  background: #fff;
  border-bottom: 5px solid #2ec4b6;
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--shadow);
}
.cs-slot.filled { animation: cs-pop 0.35s ease; background: #eafaf8; }

/* start overlay (mirrors sam-start) */
.cs-start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(60,50,90,.35); backdrop-filter: blur(3px); z-index: 15; }
.cs-start.hidden { display: none; }
.cs-start-card { text-align: center; background: #fff; padding: 28px 34px; border-radius: 28px; box-shadow: 0 10px 0 var(--shadow), 0 16px 30px var(--shadow); max-width: 90%; }
.cs-start-emoji { font-size: 4rem; line-height: 1; }
.cs-start-card h2 { margin: 8px 0 4px; font-size: 1.8rem; font-weight: 900; color: var(--ink); }
.cs-start-card p { margin: 0 0 18px; font-size: 1.05rem; color: var(--ink); opacity: 0.8; }
.cs-start-btn { font-size: 1.4rem; font-weight: 800; color: #fff; background: linear-gradient(180deg, #3fd9cb, #23a99d); padding: 14px 40px; border-radius: 999px; box-shadow: 0 6px 0 var(--shadow); transition: transform 0.08s ease, box-shadow 0.08s ease; }
.cs-start-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--shadow); }

@keyframes cs-perch-pulse { 0%,100% { box-shadow: 0 4px 0 var(--shadow), 0 0 0 0 rgba(46,196,182,.5); } 50% { box-shadow: 0 4px 0 var(--shadow), 0 0 0 8px rgba(46,196,182,0); } }
@keyframes cs-bump { 0%,100% { transform: translate(-50%,-50%); } 25% { transform: translate(-56%,-50%) rotate(-6deg); } 75% { transform: translate(-44%,-50%) rotate(6deg); } }
@keyframes cs-idle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes cs-gait { 0%,100% { transform: translateY(3px) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(5deg); } }
@keyframes cs-dangle { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(6deg); } }
@keyframes cs-cheer { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.05); } }
@keyframes cs-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .cs-perch.is-reachable, .cs-hero-svg, .cs-confetti { animation-duration: 0.6s !important; }
}

/* Climb & Spell: score + web-up-able baddies */
.cs-score {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 8;
  background: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--shadow);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink);
}
.cs-enemies { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.cs-enemy {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(52px, 12vw, 84px);
  height: clamp(52px, 12vw, 84px);
  pointer-events: auto;
  animation: cs-enemy-in 0.4s ease, cs-enemy-wiggle 0.9s ease-in-out 0.4s infinite;
}
.cs-enemy-art { position: absolute; inset: 0; }
.cs-enemy-art svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 4px rgba(60,50,90,.25)); }
.cs-enemy-web {
  position: absolute; inset: -10%;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s ease;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.9) 0 2deg, transparent 2deg 30deg),
    radial-gradient(circle, rgba(255,255,255,.8) 26%, rgba(255,255,255,.25) 68%, transparent 72%);
}
.cs-enemy.webbed { animation: cs-webbed 0.7s ease forwards; }
.cs-enemy.webbed .cs-enemy-web { opacity: 1; }
.cs-enemy.flee { animation: cs-flee 0.4s ease forwards; }
.cs-float {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 11;
  font-size: 1.6rem;
  font-weight: 900;
  color: #ff8c42;
  text-shadow: 0 2px 0 #fff, 0 0 6px #fff;
  pointer-events: none;
  animation: cs-float 1s ease-out forwards;
}

@keyframes cs-enemy-in { 0% { transform: translate(-50%, 40px) scale(0.4); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes cs-enemy-wiggle { 0%,100% { transform: translate(-50%, -50%) rotate(-5deg); } 50% { transform: translate(-50%, -50%) rotate(5deg); } }
@keyframes cs-webbed { 0% { transform: translate(-50%, -50%) scale(1); } 30% { transform: translate(-50%, -50%) scale(1.12) rotate(6deg); } 100% { transform: translate(-50%, -46%) scale(0.86); opacity: 0.85; } }
@keyframes cs-flee { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, 30px) scale(0.4); opacity: 0; } }
@keyframes cs-float { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  .cs-enemy { animation: cs-enemy-in 0.3s ease !important; }
}

/* ==================================================================
   ANIMAL CARE — zoomed detail view + mini-games
   ================================================================== */
.ac-detail { position: absolute; inset: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #fff5e6, #ffe9c7); }
.ac-detail-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.ac-back { font-size: 1.1rem; font-weight: 800; background: #fff; padding: 8px 16px; border-radius: 999px; box-shadow: 0 4px 0 var(--shadow); }
.ac-detail-name { font-size: 1.5rem; font-weight: 900; color: var(--ink); }
.ac-detail-stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.ac-detail-pet { width: clamp(180px, 42vw, 340px); display: block; animation: ac-zoom-in 0.35s ease; }
.ac-detail-pet .ac-svg { width: 100%; height: auto; overflow: visible; animation: idle-breathe 3.4s ease-in-out infinite; }
@keyframes ac-zoom-in { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.ac-detail .ac-meters { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; padding: 8px 16px; }

/* mini-game shell */
.ac-mini { position: absolute; inset: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #eafaff, #d7f0f7); }
.ac-mini.is-night { background: linear-gradient(180deg, #2a2a5e, #4a3f70); }
.ac-mini.is-night .ac-mini-title, .ac-mini.is-night .ac-mini-hint { color: #fff; }
.ac-mini-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.ac-mini-back { font-size: 1.3rem; font-weight: 900; background: #fff; width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 4px 0 var(--shadow); }
.ac-mini-title { font-size: 1.3rem; font-weight: 900; color: var(--ink); }
.ac-mini-goal { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.ac-mini-goal-icon { font-size: 1.3rem; }
.ac-mini-track { width: clamp(90px, 26vw, 200px); height: 18px; border-radius: 999px; background: rgba(60,50,90,.18); overflow: hidden; box-shadow: inset 0 2px 3px rgba(60,50,90,.2); }
.ac-mini-fill { display: block; height: 100%; width: 0%; border-radius: 999px; background: var(--mg); transition: width 0.25s ease; }

.ac-mini-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: none; }
.ac-mini-pet { width: clamp(190px, 46vw, 360px); position: relative; z-index: 1; }
.ac-mini-pet .ac-svg { width: 100%; height: auto; overflow: visible; }
.ac-mini-fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ac-mini-hint { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-weight: 800; color: var(--ink); background: rgba(255,255,255,.75); padding: 6px 16px; border-radius: 999px; z-index: 3; }
.ac-mini-banner { position: absolute; top: 30%; left: 50%; transform: translate(-50%,-10px); font-size: 1.6rem; font-weight: 900; color: #fff; background: var(--mg); padding: 10px 26px; border-radius: 999px; box-shadow: 0 8px 0 var(--shadow); opacity: 0; z-index: 6; transition: opacity .3s ease, transform .3s ease; }
.ac-mini-banner.show { opacity: 1; transform: translate(-50%,0); animation: banner-pop .5s ease; }
.ac-mini-confetti { position: absolute; top: -20px; width: 13px; height: 17px; border-radius: 3px; animation: confetti-fall 2.2s ease-in forwards; z-index: 5; }

/* pet reaction poses */
.ac-mini-pet.mg-win { animation: ac-mg-win .6s ease; }
.ac-mini-pet.mg-chew { animation: ac-mg-chew .3s ease; }
.ac-mini-pet.mg-hop { animation: ac-mg-hop .4s ease; }
.ac-mini-pet.mg-drink { animation: ac-mg-drink .5s ease; }
.ac-mini-pet.mg-pat { animation: ac-mg-pat .3s ease; }
.ac-mini-pet.mg-asleep .ac-eye-l, .ac-mini-pet.mg-asleep .ac-eye-r { transform: scaleY(.12); transform-origin: center; }
@keyframes ac-mg-win { 0%{transform:scale(1)} 35%{transform:scale(1.12) rotate(-3deg)} 70%{transform:scale(.97) rotate(3deg)} 100%{transform:scale(1)} }
@keyframes ac-mg-chew { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05,.93)} }
@keyframes ac-mg-hop { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-26px)} }
@keyframes ac-mg-drink { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(8px) rotate(4deg)} }
@keyframes ac-mg-pat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03,.95)} }

/* dirt / suds / tufts (spots on the pet) */
.ac-dirt, .ac-sud, .ac-tuft, .ac-shine-spark { position: absolute; transform: translate(-50%,-50%); transition: opacity .25s ease, transform .25s ease; }
.ac-dirt { width: clamp(30px,7vw,48px); height: clamp(30px,7vw,48px); border-radius: 46% 54% 60% 40%; background: radial-gradient(circle at 35% 35%, #a9784f, #6f4a2a); box-shadow: 0 2px 3px rgba(60,50,90,.3); }
.ac-sud { width: clamp(26px,6vw,42px); height: clamp(26px,6vw,42px); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #d7ecf5); box-shadow: 0 0 0 3px rgba(255,255,255,.5); }
.ac-tuft { width: clamp(26px,6vw,40px); height: clamp(26px,6vw,40px); border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff6, transparent 60%), #caa; box-shadow: 0 2px 2px rgba(60,50,90,.25); }
.ac-shine-spark { font-size: 1.4rem; }
.ac-shine-spark::before { content: '✨'; }
.ac-dirt.gone, .ac-sud.gone, .ac-tuft.gone { opacity: 0; transform: translate(-50%,-50%) scale(0.2); }

/* feed treats */
.ac-treat { position: absolute; bottom: 4%; font-size: clamp(2rem,7vw,3rem); z-index: 4; transition: transform .2s ease; touch-action: none; }
.ac-treat.dragging { z-index: 9; transition: none; }
.ac-mini-heart { position: absolute; bottom: 34%; left: 50%; font-size: 1.6rem; z-index: 4; animation: particle-float 1s ease-out forwards; }
.ac-zzz { font-size: 1.8rem; }

/* water bowl + stream */
.ac-bowl { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); width: clamp(90px,22vw,150px); height: clamp(46px,11vw,74px); background: #cfd6e0; border-radius: 0 0 50% 50% / 0 0 90% 90%; overflow: hidden; z-index: 4; box-shadow: inset 0 -6px 10px rgba(60,50,90,.2); }
.ac-bowl-water { position: absolute; left: 0; bottom: 0; width: 100%; height: 0%; background: linear-gradient(180deg, #7fd3ff, #4aa8e0); transition: height .1s linear; }
.ac-stream { position: absolute; top: 0; width: 12px; height: 60%; background: linear-gradient(180deg, rgba(120,210,255,0), #7fd3ff); border-radius: 999px; transform: translateX(-50%); opacity: 0; z-index: 4; }
.ac-stream.show { opacity: .9; }

/* play ball */
.ac-ball { position: absolute; font-size: clamp(2.2rem,8vw,3.4rem); z-index: 4; transition: left .25s ease, top .25s ease; animation: ac-ball-bob 1s ease-in-out infinite; }
@keyframes ac-ball-bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }

@media (prefers-reduced-motion: reduce) {
  .ac-detail-pet, .ac-mini-confetti, .ac-ball { animation-duration: .6s !important; }
}