/* ---- Fonts ---- */
/* Baloo 2 (SIL Open Font License) bundled locally — no CDN, works offline.
   Without this the playful rounded look silently fell back to Trebuchet on
   devices that don't ship Baloo 2 (i.e. essentially every iPad). */
@font-face {
  font-family: 'Baloo 2'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/baloo2-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/baloo2-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../assets/fonts/baloo2-800.woff2') format('woff2');
}

/* ---- 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;
  width: 1.9rem;
  height: 1.9rem;
  line-height: 1;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 2px var(--shadow));
  transition: transform 0.2s ease;
}
.ac-face-svg { width: 100%; height: 100%; display: block; }
.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; }
}

/* ============================================================
   Reward economy — hub header, sticker book, win toast, bond
   ============================================================ */

/* Hub layout: a header above the scrolling card grid. */
.hub { position: absolute; inset: 0; display: flex; flex-direction: column; }
.hub-header {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px;
}
.hub-stars {
  font-size: 1.4rem; font-weight: 900; color: var(--ink);
  background: var(--card); padding: 6px 18px; border-radius: 999px;
  box-shadow: 0 4px 0 var(--shadow); border: 3px solid #ffd166;
}
.hub-book-btn {
  font-size: 1.1rem; font-weight: 800; color: var(--ink);
  background: var(--card); padding: 8px 20px; border-radius: 999px;
  box-shadow: 0 4px 0 var(--shadow); border: 3px solid #bdb2ff;
  transition: transform .12s ease;
}
.hub-book-btn:active { transform: scale(0.94); }
.hub-profile-btn {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.05rem; font-weight: 800; color: var(--ink);
  background: var(--card); padding: 5px 16px 5px 6px; border-radius: 999px;
  box-shadow: 0 4px 0 var(--shadow); border: 3px solid #a0e7a0;
  transition: transform .12s ease;
}
.hub-profile-btn:active { transform: scale(0.94); }
.hub-profile-avatar {
  font-size: 1.4rem; line-height: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #eefbef;
}
.hub-profile-name { max-width: 7ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Grid now lives inside the flex column, scrolls under the header. */
.hub .hub-grid { flex: 1 1 auto; height: auto; min-height: 0; }
.game-progress {
  margin-top: 4px; font-size: 0.85rem; font-weight: 800; color: var(--ink);
  background: #fff6db; padding: 3px 12px; border-radius: 999px;
}

/* Sticker Book screen */
.sticker-book { position: absolute; inset: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #fff, #eef6ff); }
.sb-top { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.sb-back {
  font-size: 1.1rem; font-weight: 800; background: var(--card);
  padding: 8px 16px; border-radius: 999px; box-shadow: 0 4px 0 var(--shadow);
}
.sb-title { flex: 1 1 auto; margin: 0; font-size: 1.5rem; text-align: center; }
.sb-stars { font-size: 1.2rem; font-weight: 900; background: #fff6db; padding: 6px 14px; border-radius: 999px; box-shadow: 0 3px 0 var(--shadow); }
.sb-progress { margin: 0 0 8px; text-align: center; font-weight: 700; opacity: 0.7; }
.sb-groups { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 18px 24px; }
.sb-group { margin-bottom: 18px; }
.sb-group-title { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; margin: 8px 0; }
.sb-group-count { font-size: 0.9rem; font-weight: 800; background: #fff; padding: 2px 12px; border-radius: 999px; box-shadow: 0 2px 0 var(--shadow); }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.sb-sticker {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 14px 8px; border-radius: 20px; background: var(--card);
  box-shadow: 0 5px 0 var(--shadow);
}
.sb-sticker.is-earned { border: 3px solid #ffd166; }
.sb-sticker.is-locked { opacity: 0.7; filter: grayscale(0.5); background: #f1f0f6; }
.sb-emoji { font-size: 2.6rem; line-height: 1; }
.sb-name { font-weight: 800; font-size: 0.95rem; }
.sb-hint { font-size: 0.75rem; opacity: 0.65; }

/* "Who's playing?" — the kid profile picker */
.profile-menu { position: absolute; inset: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #fff, #eefbef); }
.pm-top { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.pm-back {
  font-size: 1.1rem; font-weight: 800; background: var(--card);
  padding: 8px 16px; border-radius: 999px; box-shadow: 0 4px 0 var(--shadow);
}
.pm-title { flex: 1 1 auto; margin: 0; font-size: 1.5rem; text-align: center; }
.pm-spacer { width: 80px; flex: 0 0 auto; }
.pm-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px; padding: 12px 24px 28px; align-content: start;
}
.pm-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 12px; border-radius: 24px; background: var(--card);
  box-shadow: 0 6px 0 var(--shadow); border: 4px solid transparent;
  transition: transform .12s ease;
}
.pm-card:active { transform: scale(0.95); }
.pm-card.is-active { border-color: #a0e7a0; }
.pm-card.pm-add { border-style: dashed; border-color: #cdb4ff; background: #f7f3ff; }
.pm-avatar {
  font-size: 3rem; line-height: 1;
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #eefbef;
}
.pm-add .pm-avatar { background: #efe6ff; }
.pm-name { font-weight: 800; font-size: 1.1rem; }
.pm-badge { font-size: 0.8rem; font-weight: 800; color: #2f8f2f; background: #e2f8e2; padding: 2px 12px; border-radius: 999px; }

/* New-profile form */
.pm-create { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 12px 24px 28px; }
.pm-create-hint { margin: 0; font-size: 1.1rem; font-weight: 700; opacity: 0.7; }
.pm-name-input {
  font-size: 1.3rem; font-weight: 700; text-align: center;
  padding: 12px 18px; border-radius: 16px; border: 3px solid #cdb4ff;
  background: #fff; width: min(320px, 90%);
}
.pm-avatars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: min(360px, 92%); }
.pm-avatar-pick {
  font-size: 2rem; padding: 8px; border-radius: 16px; background: #fff;
  box-shadow: 0 3px 0 var(--shadow); border: 3px solid transparent;
  transition: transform .1s ease;
}
.pm-avatar-pick:active { transform: scale(0.9); }
.pm-avatar-pick.is-picked { border-color: #a0e7a0; background: #eefbef; }
.pm-create-actions { display: flex; gap: 14px; margin-top: 4px; }
.pm-cancel, .pm-save {
  font-size: 1.15rem; font-weight: 800; padding: 12px 26px; border-radius: 999px;
  box-shadow: 0 4px 0 var(--shadow); transition: transform .12s ease;
}
.pm-cancel { background: var(--card); }
.pm-save { background: #a0e7a0; }
.pm-cancel:active, .pm-save:active { transform: scale(0.94); }

/* Reward toast shown inside a mini-game win */
.ac-mini-reward {
  position: absolute; bottom: 5%; left: 50%; transform: translate(-50%, 8px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 7; opacity: 0; transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.ac-mini-reward.show { opacity: 1; transform: translate(-50%, 0); }
.ac-reward-stars { font-size: 1.5rem; font-weight: 900; color: #f5a623; text-shadow: 0 2px 0 #fff; }
.ac-reward-level { font-size: 1.1rem; font-weight: 900; color: #ff6b9d; text-shadow: 0 2px 0 #fff; }
.ac-reward-sticker {
  font-size: 0.95rem; font-weight: 700; color: var(--ink);
  background: #fff; padding: 8px 16px; border-radius: 999px; box-shadow: 0 4px 0 var(--shadow);
}
.ac-reward-badge { font-size: 1.3rem; }

/* Friendship badge in the pet detail header */
.ac-bond { margin-left: auto; display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.95rem; }
.ac-bond-hearts { font-size: 1rem; letter-spacing: -2px; }
.ac-bond-lv { background: #fff; padding: 4px 12px; border-radius: 999px; box-shadow: 0 3px 0 var(--shadow); }

/* ============================================================
   Dress-Up — accessory overlay + the shop screen
   ============================================================ */

/* Accessories ride inside the pet box, positioned as a % of it. */
.ac-detail-pet, .ac-shop-pet { position: relative; }
.ac-art, .ac-detail-pet, .ac-mini-pet, .ac-shop-pet { overflow: visible; }
.ac-acc {
  position: absolute; transform: translate(-50%, -50%);
  line-height: 1; pointer-events: none; z-index: 5;
  filter: drop-shadow(0 2px 2px var(--shadow));
}
.ac-acc svg { width: 100%; height: 100%; display: block; }

/* Shop button in the detail header */
.ac-shop-btn {
  font-size: 0.95rem; font-weight: 800; color: var(--ink);
  background: #fff; padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 3px 0 var(--shadow); border: 2px solid #ffd166;
}
.ac-shop-btn:active { transform: scale(0.94); }

/* Shop screen */
.ac-shop { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ac-shop-top { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.ac-shop-top .ac-back {
  font-size: 1rem; font-weight: 800; background: #fff;
  padding: 8px 16px; border-radius: 999px; box-shadow: 0 4px 0 var(--shadow);
}
.ac-shop-title { flex: 1 1 auto; text-align: center; font-size: 1.3rem; font-weight: 900; }
.ac-shop-stars { font-size: 1.2rem; font-weight: 900; background: #fff6db; padding: 6px 14px; border-radius: 999px; box-shadow: 0 3px 0 var(--shadow); }
.ac-shop-stage { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 4px; }
.ac-shop-pet { width: clamp(120px, 26vw, 200px); display: block; }
.ac-shop-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; padding: 8px 16px 20px; align-content: start;
}
.ac-shop-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border-radius: 20px; background: var(--card);
  box-shadow: 0 5px 0 var(--shadow); border: 3px solid transparent;
}
.ac-shop-card.is-worn { border-color: #2ec4b6; background: #eafbf7; }
.ac-shop-emoji { font-size: 2.6rem; line-height: 1; }
.ac-shop-art { width: 2.8rem; height: 2.8rem; display: inline-flex; }
.ac-shop-art svg { width: 100%; height: 100%; display: block; }
.ac-shop-name { font-weight: 800; font-size: 0.9rem; }
.ac-shop-card button {
  margin-top: 2px; font-weight: 800; font-size: 0.9rem; color: var(--ink);
  padding: 7px 14px; border-radius: 999px; box-shadow: 0 3px 0 var(--shadow);
}
.ac-buy { background: #ffd166; }
.ac-buy:disabled { opacity: 0.45; box-shadow: none; }
.ac-equip { background: #cdeffe; }
.ac-equip.is-on { background: #2ec4b6; color: #fff; }

/* ============================================================
   Trick School — buttons, trick poses, show-off label
   ============================================================ */

/* the four trick buttons along the bottom of the trick-school stage */
.ac-trick-row {
  position: absolute; left: 0; right: 0; bottom: 4%;
  display: flex; justify-content: center; gap: clamp(8px, 2.5vw, 20px);
  padding: 0 12px; z-index: 6;
}
.ac-trick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 74px; padding: 10px 12px; border-radius: 20px;
  background: #fff; box-shadow: 0 5px 0 var(--shadow);
  border: 3px solid transparent; transition: transform .1s ease;
}
.ac-trick-btn:active { transform: scale(0.94); }
.ac-trick-emoji { font-size: 1.9rem; line-height: 1; }
.ac-trick-name { font-weight: 800; font-size: 0.9rem; }
/* the glowing "press me" trick */
.ac-trick-btn.is-target {
  border-color: #ffb84d;
  animation: ac-trick-glow 0.9s ease-in-out infinite;
}
@keyframes ac-trick-glow {
  0%, 100% { box-shadow: 0 5px 0 var(--shadow), 0 0 0 0 rgba(255,184,77,0.7); }
  50%      { box-shadow: 0 5px 0 var(--shadow), 0 0 0 10px rgba(255,184,77,0); }
}

/* detail pet is now a tappable button; keep it clean + show a pointer */
.ac-detail-pet { padding: 0; cursor: pointer; }
.ac-detail-stage { position: relative; }
.ac-trick-say {
  position: absolute; top: 8%; left: 50%; transform: translate(-50%, -6px);
  font-size: 1.4rem; font-weight: 900; color: #ff8c1a; text-shadow: 0 2px 0 #fff;
  background: #fff; padding: 6px 18px; border-radius: 999px; box-shadow: 0 5px 0 var(--shadow);
  opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; z-index: 6;
}
.ac-trick-say.show { opacity: 1; transform: translate(-50%, 0); }
.ac-trick-say.tip {
  opacity: 0.85; font-size: 0.95rem; color: var(--ink); background: rgba(255,255,255,0.85);
  animation: ac-tip-bob 1.6s ease-in-out infinite;
}
@keyframes ac-tip-bob { 0%,100% { transform: translate(-50%, 0);} 50% { transform: translate(-50%, -5px);} }

/* trick poses — reused in the mini-game and on the detail pet */
.mg-trick-spin  { animation: mg-trick-spin 0.85s ease-in-out; }
.mg-trick-jump  { animation: mg-trick-jump 0.7s ease; }
.mg-trick-sit   { animation: mg-trick-sit 0.7s ease; transform-origin: bottom center; }
.mg-trick-shake { animation: mg-trick-shake 0.6s ease-in-out; }
@keyframes mg-trick-spin { to { transform: rotate(360deg); } }
@keyframes mg-trick-jump { 0%,100% { transform: translateY(0);} 40% { transform: translateY(-16%);} }
@keyframes mg-trick-sit  { 0%,100% { transform: scaleY(1);} 45% { transform: scaleY(0.82) translateY(4%);} }
@keyframes mg-trick-shake { 0%,100% { transform: rotate(0);} 25% { transform: rotate(-8deg);} 75% { transform: rotate(8deg);} }

@media (prefers-reduced-motion: reduce) {
  .mg-trick-spin, .mg-trick-jump, .mg-trick-sit, .mg-trick-shake,
  .ac-trick-btn.is-target, .ac-trick-say.tip { animation-duration: .5s !important; }
}

/* ============================================================
   Mini-game levels — level badge + higher-level twists
   ============================================================ */

/* "Lv N" badge in the mini-game header */
.ac-mini-level {
  font-weight: 900; font-size: 0.9rem; color: #fff;
  background: var(--mg); padding: 3px 12px; border-radius: 999px;
  box-shadow: 0 3px 0 var(--shadow); white-space: nowrap;
}

/* Play level 3: a smaller, zippier ball */
.ac-ball.ac-ball-small { font-size: 2.4rem; }

/* Feed: yucky foods the pet refuses (subtly greenish so they read as "not a treat") */
.ac-treat.is-yucky { filter: saturate(1.15); }

/* Feed refuse pose — a quick "no thanks" head shake */
.ac-mini-pet.mg-refuse { animation: ac-refuse 0.5s ease; }
@keyframes ac-refuse {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5%) rotate(-4deg); }
  75% { transform: translateX(5%) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-mini-pet.mg-refuse { animation-duration: .3s !important; }
}

/* ============================================================
   Letter Samurai — belts (rank progression)
   ============================================================ */

/* In-game rank chip next to the score */
.sam-belt-chip {
  font-size: 0.95rem; font-weight: 900; padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 3px 0 var(--shadow); white-space: nowrap; line-height: 1.3;
}

/* Belt panel on the start card */
.sam-belt-panel {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 0 0 18px;
}
.sam-belt-badge {
  font-size: 1.1rem; font-weight: 900; padding: 6px 18px; border-radius: 999px;
  box-shadow: 0 4px 0 var(--shadow);
}
.sam-belt-bar {
  width: 200px; max-width: 70vw; height: 12px; border-radius: 999px;
  background: #eceaf3; overflow: hidden; box-shadow: inset 0 1px 3px var(--shadow);
}
.sam-belt-fill { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.sam-belt-next { font-size: 0.85rem; font-weight: 700; color: var(--ink); opacity: 0.7; }

/* Belt-up celebration banner */
.sam-beltup {
  position: absolute; top: 28%; left: 50%; transform: translate(-50%, -8px) scale(0.8);
  font-size: 1.8rem; font-weight: 900; color: #fff;
  background: var(--belt, #ffd23f); padding: 12px 30px; border-radius: 999px;
  box-shadow: 0 8px 0 var(--shadow); z-index: 15; opacity: 0; pointer-events: none;
  text-shadow: 0 2px 3px rgba(0,0,0,0.2);
}
.sam-beltup.show { animation: sam-beltup 2.2s ease forwards; }
@keyframes sam-beltup {
  0%   { opacity: 0; transform: translate(-50%, -8px) scale(0.8); }
  12%  { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  25%  { transform: translate(-50%, 0) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .sam-beltup.show { animation-duration: 1.6s; }
}

/* ============================================================
   Letter Samurai — Word Mode word bar
   ============================================================ */

.sam-wordbar {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 12; pointer-events: none;
}
.sam-word-slot {
  width: clamp(38px, 9vw, 56px); height: clamp(46px, 11vw, 66px);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.4rem, 5vw, 2.2rem); font-weight: 900; color: var(--ink);
  background: rgba(255,255,255,0.7); border-radius: 14px;
  box-shadow: 0 4px 0 var(--shadow); border: 3px dashed rgba(58,51,87,0.25);
}
.sam-word-slot.filled {
  background: #fff; border-style: solid; border-color: #1dd1a1;
  animation: sam-slot-pop 0.3s ease;
}
@keyframes sam-slot-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.sam-wordbar.done { animation: sam-word-done 0.7s ease; }
@keyframes sam-word-done { 0%,100% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .sam-word-slot.filled, .sam-wordbar.done { animation-duration: .3s; }
}

/* ============================================================
   Climb & Spell — worlds (word tiers + themed backdrops)
   ============================================================ */

/* World label (top-right) + the "new world" banner */
.cs-world {
  position: absolute; top: 12px; right: 12px; z-index: 8;
  background: #fff; padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 4px 0 var(--shadow); font-size: 1rem; font-weight: 800; color: var(--ink);
}
.cs-world-banner {
  position: absolute; top: 26%; left: 50%; transform: translate(-50%, -8px) scale(0.8);
  z-index: 12; font-size: 1.9rem; font-weight: 900; color: #fff;
  background: rgba(58,51,87,0.85); padding: 12px 30px; border-radius: 999px;
  box-shadow: 0 8px 0 var(--shadow); opacity: 0; pointer-events: none;
  text-shadow: 0 2px 3px rgba(0,0,0,0.25);
}
.cs-world-banner.show { animation: cs-world-in 2.2s ease forwards; }
@keyframes cs-world-in {
  0% { opacity: 0; transform: translate(-50%, -8px) scale(0.8); }
  12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  25% { transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(0.95); }
}

/* Per-world backdrops (two-class selectors override the base .cs-wall) */
.cs-wall.cs-world-backyard {
  background:
    repeating-linear-gradient(90deg, rgba(60,90,60,0.05) 0 2px, transparent 2px 84px),
    linear-gradient(180deg, #cdeafd 0%, #bfe6c6 60%, #9ed489 100%);
}
.cs-wall.cs-world-rooftops {
  background:
    repeating-linear-gradient(90deg, rgba(70,50,90,0.08) 0 2px, transparent 2px 74px),
    linear-gradient(180deg, #ffd59b 0%, #f5926a 42%, #7b6699 100%);
}
.cs-wall.cs-world-nightsky {
  background:
    radial-gradient(2px 2px at 18% 22%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 72% 16%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 40% 34%, #fff 50%, transparent 51%),
    radial-gradient(3px 3px at 86% 40%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 58% 12%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #1b2350 0%, #33407a 70%, #4a5aa0 100%);
}
/* On the night sky, keep the letters readable */
.cs-wall.cs-world-nightsky .cs-score,
.cs-wall.cs-world-nightsky .cs-world { color: var(--ink); }

/* ============================================================
   Beat Buddies — rhythm game
   ============================================================ */

.bb-game { height: 100%; display: flex; flex-direction: column; position: relative; }
.bb-stage {
  position: relative; flex: 1; overflow: hidden;
  background: linear-gradient(180deg, #2b2350 0%, #4b3d7a 55%, #6a5a9e 100%);
}

/* top: song progress meter + combo */
.bb-topbar { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 8; display: flex; align-items: center; gap: 10px; }
.bb-meter { flex: 1; height: 16px; border-radius: 999px; background: rgba(255,255,255,0.25); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.25); }
.bb-meter-fill { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #ffd166, #ff6b9d); transition: width .18s ease; }
.bb-combo { color: #fff; font-weight: 900; font-size: 1.1rem; min-width: 54px; text-shadow: 0 2px 3px rgba(0,0,0,0.3); }

/* three lanes */
.bb-lanes { position: absolute; inset: 40px 0 0 0; display: flex; }
.bb-lane { position: relative; flex: 1; border-left: 2px dashed rgba(255,255,255,0.15); overflow: hidden; }
.bb-lane:first-child { border-left: none; }
.bb-track { position: absolute; inset: 0; }

/* the hit ring the bubbles aim for, just above the pet */
.bb-hit {
  position: absolute; left: 50%; top: 82%; transform: translate(-50%, -50%);
  width: min(30vw, 128px); aspect-ratio: 1; border-radius: 50%;
  border: 4px dashed rgba(255,255,255,0.5); box-sizing: border-box;
}

/* the pet (tap target) sits at the bottom of its lane */
.bb-pet {
  position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%);
  width: min(30vw, 150px); display: flex; flex-direction: column; align-items: center;
  z-index: 3; transition: transform .08s ease;
}
.bb-pet:active { transform: translateX(-50%) scale(0.94); }
.bb-pet .bb-art { width: 100%; display: block; filter: drop-shadow(0 6px 6px rgba(0,0,0,0.25)); }
.bb-pet .bb-inst {
  font-size: clamp(1.4rem, 6vw, 2.2rem); line-height: 1; margin-bottom: -6px;
  background: #fff; border-radius: 999px; padding: 2px 10px; box-shadow: 0 3px 0 var(--shadow); z-index: 4;
}
.bb-pet.bounce { animation: bb-bounce 0.34s ease; }
@keyframes bb-bounce { 0%,100% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.14) translateY(-6%); } }
/* "tap me next": glow + gentle throb on the pet whose bubble is landing */
.bb-pet.bb-ready .bb-art { filter: drop-shadow(0 6px 6px rgba(0,0,0,0.25)) drop-shadow(0 0 10px var(--lane)); }
.bb-pet.bb-ready { animation: bb-ready 0.5s ease-in-out infinite; }
@keyframes bb-ready { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.07); } }

/* falling beat bubbles */
.bb-bubble {
  position: absolute; left: 50%; top: 0%; transform: translate(-50%, -50%);
  width: min(24vw, 104px); aspect-ratio: 1; border-radius: 50%;
  background: var(--lane); box-shadow: 0 4px 0 rgba(0,0,0,0.15), inset 0 0 0 4px rgba(255,255,255,0.5);
  will-change: top;
}
.bb-bubble-inst { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: min(12vw, 52px); line-height: 1; }
.bb-bubble.pop { animation: bb-pop 0.26s ease forwards; }
.bb-bubble.miss { animation: bb-miss 0.32s ease forwards; }
@keyframes bb-pop { to { transform: translate(-50%,-50%) scale(1.6); opacity: 0; } }
@keyframes bb-miss { to { transform: translate(-50%, 10%) scale(0.7); opacity: 0; } }

.bb-rating {
  position: absolute; left: 50%; top: 70%; transform: translateX(-50%);
  color: #fff; font-weight: 900; font-size: 1.2rem; text-shadow: 0 2px 3px rgba(0,0,0,0.35);
  z-index: 5; pointer-events: none; animation: bb-rating 0.8s ease forwards;
}
@keyframes bb-rating { 0% { opacity: 0; transform: translate(-50%, 6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -22px); } }

/* count-in + win banner */
.bb-count {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%);
  font-size: 4rem; font-weight: 900; color: #fff; z-index: 10; opacity: 0;
  text-shadow: 0 4px 6px rgba(0,0,0,0.35);
}
.bb-count.show { animation: bb-count 0.48s ease; }
@keyframes bb-count { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.5); } 40% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); } 100% { opacity: 0.9; transform: translate(-50%,-50%) scale(1); } }
.bb-banner {
  position: absolute; top: 32%; left: 50%; transform: translate(-50%,-8px) scale(0.8);
  font-size: 1.9rem; font-weight: 900; color: #fff; background: #ff6b9d;
  padding: 12px 30px; border-radius: 999px; box-shadow: 0 8px 0 rgba(0,0,0,0.2);
  z-index: 11; opacity: 0; pointer-events: none;
}
.bb-banner.show { animation: bb-banner 2s ease forwards; }
@keyframes bb-banner { 0% { opacity: 0; transform: translate(-50%,-8px) scale(0.8); } 12% { opacity: 1; transform: translate(-50%,0) scale(1.08); } 25%,80% { opacity: 1; transform: translate(-50%,0) scale(1); } 100% { opacity: 0; } }

.bb-confetti {
  position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px; z-index: 12;
  animation: confetti-fall 2.2s ease-in forwards;
}

/* start / song picker */
.bb-start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 15; background: rgba(43,35,80,0.55); backdrop-filter: blur(4px); }
.bb-start.hidden { display: none; }
.bb-start-card { text-align: center; background: #fff; padding: 26px 30px; border-radius: 28px; box-shadow: 0 10px 0 var(--shadow), 0 16px 30px var(--shadow); max-width: 90%; }
.bb-start-emoji { font-size: 3rem; }
.bb-start-card h2 { margin: 6px 0 4px; font-size: 1.8rem; font-weight: 900; color: var(--ink); }
.bb-start-msg { margin: 0 0 16px; opacity: 0.8; }
.bb-songs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.bb-song {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 110px; padding: 14px 16px; border-radius: 20px; background: #f4f2fb;
  box-shadow: 0 5px 0 var(--shadow); border: 3px solid #ff6b9d; font-weight: 800; color: var(--ink);
  transition: transform .1s ease;
}
.bb-song:active { transform: scale(0.95); }
.bb-song-emoji { font-size: 2rem; }
.bb-song-jam { border-color: #bdb2ff; }

@media (prefers-reduced-motion: reduce) {
  .bb-pet.bounce, .bb-bubble.pop, .bb-bubble.miss, .bb-rating, .bb-count.show, .bb-banner.show { animation-duration: .3s !important; }
  .bb-pet.bb-ready { animation: none; }   /* keep the glow, drop the throb */
}

/* ---- Beat Buddies Phase 2: difficulty + best on picker, polish ---- */
.bb-song-diff { font-size: 0.75rem; font-weight: 700; opacity: 0.7; }
.bb-song-best { font-size: 0.85rem; letter-spacing: 1px; color: #f5a623; }

/* hit ring flashes when a bubble lands */
.bb-hit.flash { animation: bb-ring-flash 0.3s ease; }
@keyframes bb-ring-flash {
  0% { border-color: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  100% { border-color: rgba(255,255,255,0.5); box-shadow: 0 0 0 16px rgba(255,255,255,0); }
}

/* instrument badge nods on each beat */
.bb-inst.beat { animation: bb-inst-beat 0.2s ease; }
@keyframes bb-inst-beat { 0%,100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-14%) scale(1.12); } }

/* win banner: big stars over the hit count */
.bb-banner-stars { display: block; font-size: 1.5rem; letter-spacing: 3px; }
.bb-banner-text { display: block; font-size: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  .bb-hit.flash, .bb-inst.beat { animation-duration: .2s !important; }
}

/* ============================================================
   Animal Care — Living World: the mystery egg
   ============================================================ */

.ac-egg {
  pointer-events: auto;
  position: relative;
  width: clamp(96px, 22vw, 180px);
  display: flex; flex-direction: column; align-items: center;
  align-self: flex-end;
}
.ac-egg-shell {
  font-size: clamp(3.4rem, 14vw, 6rem); line-height: 1;
  filter: drop-shadow(0 6px 5px var(--shadow));
  animation: ac-egg-idle 2.4s ease-in-out infinite;
}
@keyframes ac-egg-idle { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.ac-egg.wiggle .ac-egg-shell { animation: ac-egg-wiggle 0.35s ease; }
@keyframes ac-egg-wiggle { 0%,100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-12deg) scale(1.06); } 75% { transform: rotate(12deg) scale(1.06); } }
.ac-egg.hatch .ac-egg-shell { animation: ac-egg-hatch 1.2s ease forwards; }
@keyframes ac-egg-hatch {
  0% { transform: scale(1); } 30% { transform: scale(1.2) rotate(-8deg); }
  60% { transform: scale(1.1) rotate(8deg); } 100% { transform: scale(0) rotate(0); opacity: 0; }
}
.ac-egg-boom {
  position: absolute; top: 10%; left: 50%; transform: translate(-50%,-50%);
  font-size: clamp(3rem, 13vw, 5.4rem); animation: ac-egg-pop 1s ease forwards;
}
@keyframes ac-egg-pop { 0% { opacity: 0; transform: translate(-50%,10%) scale(0.3); } 40% { opacity: 1; transform: translate(-50%,-10%) scale(1.2); } 100% { transform: translate(-50%,-10%) scale(1); } }
.ac-egg-meter {
  margin-top: 4px; width: 76%; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,0.7); overflow: hidden; box-shadow: inset 0 1px 2px var(--shadow);
}
.ac-egg-fill { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #ffd166, #ff8c42); transition: width .2s ease; }
.ac-egg-tip { margin-top: 4px; font-size: 0.85rem; font-weight: 800; background: #fff; padding: 2px 12px; border-radius: 999px; box-shadow: 0 3px 0 var(--shadow); }

/* ============================================================
   Counting Market — numbers game
   ============================================================ */

.cm-game { height: 100%; position: relative; }
.cm-stall {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #fff4de 0%, #ffe9c9 100%);
  overflow: hidden;
}
.cm-awning {
  height: 26px; flex: 0 0 auto;
  background: repeating-linear-gradient(90deg, #ff6b6b 0 28px, #fff 28px 56px);
  box-shadow: 0 3px 8px var(--shadow);
}
.cm-top { position: absolute; top: 34px; left: 12px; right: 12px; z-index: 6; display: flex; align-items: center; gap: 10px; }
.cm-meter { flex: 1; height: 14px; border-radius: 999px; background: rgba(255,255,255,0.7); overflow: hidden; box-shadow: inset 0 1px 2px var(--shadow); }
.cm-meter-fill { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #4cc38a, #2ec4b6); transition: width .2s ease; }
.cm-level { font-weight: 900; font-size: 0.95rem; background: #fff; padding: 3px 12px; border-radius: 999px; box-shadow: 0 3px 0 var(--shadow); }

/* customer + order bubble */
.cm-customer { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 44px 12px 4px; }
.cm-cust-art { width: clamp(84px, 20vw, 140px); display: block; }
.cm-cust-art.cm-arrive { animation: cm-arrive .4s ease; }
.cm-cust-art.cm-happy { animation: cm-happy .5s ease; }
@keyframes cm-arrive { 0% { transform: translateX(-40px) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes cm-happy { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-12%) scale(1.05); } }
.cm-order {
  position: relative; background: #fff; border-radius: 22px; padding: 10px 18px;
  box-shadow: 0 6px 0 var(--shadow); display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cm-order-item { display: flex; flex-direction: column; align-items: center; }
.cm-order-num { font-size: clamp(2rem, 8vw, 3rem); font-weight: 900; color: var(--ink); line-height: 1; }
.cm-order-emoji { width: clamp(30px, 8vw, 46px); height: clamp(30px, 8vw, 46px); }
.cm-fruit-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15)); }
.cm-dots { display: flex; gap: 4px; margin-top: 4px; }
.cm-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff8c42; }
.cm-and { font-weight: 800; opacity: 0.7; }

/* basket (drop zone) */
.cm-basket {
  flex: 1 1 auto; min-height: 0; margin: 8px 16px; border-radius: 26px;
  background: rgba(255,255,255,0.6); border: 4px dashed #d9a86b;
  display: flex; align-items: center; justify-content: center; overflow-y: auto;
}
.cm-basket-items { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-content: center; padding: 10px; }
.cm-chip { width: clamp(38px, 9vw, 54px); height: clamp(38px, 9vw, 54px); line-height: 1; transition: transform .1s ease; }
.cm-chip-fruit { display: block; width: 100%; height: 100%; }
.cm-chip.pop { animation: cm-pop .3s ease; }
@keyframes cm-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.cm-basket:empty::after { content: 'Drop fruit here'; opacity: 0.5; font-weight: 700; }

/* give button */
.cm-give {
  flex: 0 0 auto; align-self: center; margin: 2px 0 6px;
  font-size: 1.2rem; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #59d19a, #37b985); padding: 10px 34px; border-radius: 999px;
  box-shadow: 0 5px 0 rgba(0,0,0,0.15);
}
.cm-give:disabled { opacity: 0.5; box-shadow: none; }
.cm-give:active { transform: translateY(2px); }

/* fruit bins */
.cm-bins { flex: 0 0 auto; display: flex; justify-content: center; gap: clamp(8px, 3vw, 20px); padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0)); }
.cm-bin {
  width: clamp(60px, 16vw, 92px); aspect-ratio: 1; border-radius: 20px;
  background: #fff; box-shadow: 0 5px 0 var(--shadow); display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
.cm-bin:active { transform: scale(0.94); }
.cm-bin-fruit { width: clamp(40px, 11vw, 62px); height: clamp(40px, 11vw, 62px); pointer-events: none; }
.cm-drag { position: fixed; transform: translate(-50%,-50%); width: 58px; height: 58px; z-index: 50; pointer-events: none; }

/* banner + rewards */
.cm-banner {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%,-8px) scale(0.85);
  font-size: 1.5rem; font-weight: 900; color: #fff; background: #f0a94b;
  padding: 10px 26px; border-radius: 999px; box-shadow: 0 8px 0 var(--shadow);
  z-index: 12; opacity: 0; pointer-events: none;
}
.cm-banner.is-good { background: #4cc38a; }
.cm-banner.show { animation: cm-banner 1.6s ease forwards; }
@keyframes cm-banner { 0% { opacity: 0; transform: translate(-50%,-8px) scale(.85); } 15% { opacity: 1; transform: translate(-50%,0) scale(1.06); } 30%,75% { opacity: 1; transform: translate(-50%,0) scale(1); } 100% { opacity: 0; } }
.cm-star { position: absolute; top: 30%; left: 50%; font-size: 2rem; z-index: 11; animation: particle-float 1s ease-out forwards; }
.cm-confetti { position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px; z-index: 12; animation: confetti-fall 2.2s ease-in forwards; }

/* start card */
.cm-start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 15; background: rgba(60,50,90,0.35); }
.cm-start.hidden { display: none; }
.cm-start-card { text-align: center; background: #fff; padding: 26px 30px; border-radius: 28px; box-shadow: 0 10px 0 var(--shadow), 0 16px 30px var(--shadow); max-width: 90%; }
.cm-start-emoji { font-size: 3rem; }
.cm-start-card h2 { margin: 6px 0 4px; font-size: 1.8rem; font-weight: 900; color: var(--ink); }
.cm-start-card p { margin: 0 0 16px; opacity: 0.8; }
.cm-start-btn { font-size: 1.3rem; font-weight: 800; color: #fff; background: linear-gradient(180deg, #59d19a, #37b985); padding: 14px 34px; border-radius: 999px; box-shadow: 0 6px 0 rgba(0,0,0,0.15); }

@media (prefers-reduced-motion: reduce) {
  .cm-cust-art.cm-arrive, .cm-cust-art.cm-happy, .cm-chip.pop, .cm-banner.show { animation-duration: .3s !important; }
}

/* ============================================================
   Living World P2: day/night cycle + room decorations
   ============================================================ */

/* Decorate button (top-right of the room) */
.ac-decorate {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  font-size: 0.95rem; font-weight: 800; color: var(--ink);
  background: #fff; padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 3px 0 var(--shadow); border: 2px solid #bdb2ff;
}
.ac-decorate:active { transform: scale(0.94); }

/* Placed decorations */
.ac-decor-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ac-decor { position: absolute; transform: translate(-50%, -50%); line-height: 1; filter: drop-shadow(0 3px 3px var(--shadow)); }
.ac-decor svg { width: 100%; height: 100%; display: block; }

/* Sun / moon / stars inside the window */
.ac-sun, .ac-moon {
  position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%;
  right: 20%; top: 22%; opacity: 0; transition: opacity .6s ease, top .6s ease;
}
.ac-sun { background: radial-gradient(circle, #fff3b0 45%, #ffd24d 100%); box-shadow: 0 0 22px rgba(255,210,77,0.7); }
.ac-moon { background: radial-gradient(circle at 60% 40%, #fdf7db 60%, #e7dfb0 100%); box-shadow: 0 0 16px rgba(253,247,219,0.6); }
.ac-stars {
  position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease;
  background:
    radial-gradient(1.5px 1.5px at 20% 25%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 65% 18%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 40% 40%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 80% 55%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 30% 62%, #fff 50%, transparent 51%);
}

/* Day (default look) */
.ac-room.tod-day .ac-sun { opacity: 1; top: 20%; }

/* Morning — peachy dawn, low sun */
.ac-room.tod-morning .ac-wall { background: linear-gradient(180deg, #ffe6d0 0%, #ffd8b4 100%); }
.ac-room.tod-morning .ac-window { background: linear-gradient(180deg, #ffdca6 0%, #bfe6ff 100%); }
.ac-room.tod-morning .ac-sun { opacity: 1; top: 46%; background: radial-gradient(circle, #fff0c4 45%, #ffb761 100%); }

/* Dusk — sunset */
.ac-room.tod-dusk .ac-wall { background: linear-gradient(180deg, #e9bd94 0%, #d89b6f 100%); }
.ac-room.tod-dusk .ac-window { background: linear-gradient(180deg, #ffa86b 0%, #f5926a 45%, #7b6699 100%); }
.ac-room.tod-dusk .ac-floor { background: linear-gradient(180deg, #b98a5e 0%, #a97c50 100%); }
.ac-room.tod-dusk .ac-sun { opacity: 1; top: 56%; background: radial-gradient(circle, #ffd08a 40%, #ff7e3c 100%); }

/* Night — dark, moon + stars, clouds tucked away */
.ac-room.tod-night .ac-wall { background: linear-gradient(180deg, #3b3560 0%, #2c2749 100%); }
.ac-room.tod-night .ac-window { background: linear-gradient(180deg, #1b2350 0%, #33407a 70%, #4a5aa0 100%); }
.ac-room.tod-night .ac-floor { background: linear-gradient(180deg, #5c4838 0%, #4a3a2c 100%); }
.ac-room.tod-night .ac-cloud { opacity: 0; }
.ac-room.tod-night .ac-moon { opacity: 1; }
.ac-room.tod-night .ac-stars { opacity: 1; }
.ac-room.tod-night .ac-hint { color: #fff; }

/* Decor shop grid reuses the dress-up shop card styles (.ac-shop-card). */

/* Counting Market P2: addition-order operators */
.cm-op { font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 900; color: var(--ink); align-self: center; }
.cm-eq { color: #37b985; }

/* The dragon's egg reads a little more mysterious (greenish tint). */
.ac-egg.egg-dragon .ac-egg-shell { filter: hue-rotate(90deg) saturate(1.3) drop-shadow(0 6px 5px var(--shadow)); }

/* ===== Pet Pairs (Memory Match) ===== */
.mm-game { position: absolute; inset: 0; }
.mm-stage {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; gap: 10px; padding: 14px;
  background: linear-gradient(180deg, #f3ecff 0%, #e7f7ff 100%);
  overflow: hidden;
}
.mm-top {
  flex: 0 0 auto; width: min(560px, 96%);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 34px;
}
.mm-level { font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.mm-found {
  font-size: 1.1rem; font-weight: 900; color: var(--ink);
  background: #fff; padding: 4px 16px; border-radius: 999px; box-shadow: 0 3px 0 var(--shadow);
}
.mm-grid {
  flex: 1 1 auto; min-height: 0; align-self: center;
  display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: clamp(8px, 2vw, 16px); width: min(560px, 96%);
  align-content: center; justify-content: center;
}
/* Each card is a flippable square. */
.mm-card {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  background: none; border: none; padding: 0; cursor: pointer;
  perspective: 600px;
}
.mm-card-inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .35s ease; transform: rotateY(0deg);
}
.mm-card.is-up .mm-card-inner { transform: rotateY(180deg); }
.mm-back, .mm-front {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px; box-shadow: 0 5px 0 var(--shadow);
  overflow: hidden;
}
.mm-back {
  background: radial-gradient(circle at 50% 40%, #c9b6f0, #a685e0);
  font-size: clamp(1.8rem, 8vw, 3rem);
}
.mm-front {
  background: #fff; transform: rotateY(180deg); padding: 6%;
}
.mm-front .ac-svg { width: 100%; height: 100%; }
.mm-front .ac-shadow { display: none; }   /* trim the pet's floor shadow inside a card */
.mm-acc {
  position: absolute; top: 4px; right: 6px;
  font-size: clamp(1rem, 4vw, 1.6rem);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}
.mm-card.is-matched { cursor: default; }
.mm-card.is-matched .mm-front {
  background: #eafbea; box-shadow: 0 5px 0 #a7e3a7, 0 0 0 3px #a7e3a7;
  animation: mm-pop .5s ease;
}
@keyframes mm-pop {
  0% { transform: rotateY(180deg) scale(1); }
  40% { transform: rotateY(180deg) scale(1.12); }
  100% { transform: rotateY(180deg) scale(1); }
}

/* Win banner + confetti (confetti-fall keyframe is shared). */
.mm-banner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8);
  background: #fff; color: var(--ink); font-weight: 900; font-size: 1.5rem;
  padding: 16px 30px; border-radius: 20px; box-shadow: 0 8px 0 var(--shadow);
  opacity: 0; pointer-events: none; z-index: 20; text-align: center;
  transition: opacity .2s ease, transform .2s ease;
}
.mm-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mm-banner.is-good { background: #fff6db; }
.mm-confetti { position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px; z-index: 12; animation: confetti-fall 2.2s ease-in forwards; }

/* Start card reuses the shared start-overlay look. */
.mm-start {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #f3ecff 0%, #e7f7ff 100%); z-index: 30;
}
.mm-start.hidden { display: none; }
.mm-start-card {
  background: var(--card); border-radius: 28px; padding: 30px 34px; text-align: center;
  box-shadow: 0 10px 0 var(--shadow); max-width: 90%;
}
.mm-start-emoji { font-size: 3.4rem; }
.mm-start-card h2 { margin: 8px 0 4px; font-size: 1.8rem; }
.mm-start-card p { margin: 0 0 18px; opacity: 0.75; font-weight: 600; }
.mm-start-btn {
  font-size: 1.3rem; font-weight: 800; padding: 14px 34px; border-radius: 999px;
  background: #b298dc; color: #fff; box-shadow: 0 5px 0 var(--shadow);
  transition: transform .12s ease;
}
.mm-start-btn:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .mm-card-inner { transition: none; }
  .mm-card.is-matched .mm-front { animation: none; }
}

/* ===== Daily treat modal ===== */
.daily-modal {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(40, 30, 70, 0.45); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .2s ease;
}
.daily-modal.show { opacity: 1; }
.daily-card {
  position: relative; overflow: hidden;
  background: var(--card); border-radius: 28px; padding: 26px 34px 30px;
  text-align: center; box-shadow: 0 12px 0 var(--shadow);
  max-width: 90%; width: 340px;
  transform: scale(0.85); transition: transform .25s cubic-bezier(.2,1.3,.5,1);
}
.daily-modal.show .daily-card { transform: scale(1); }
.daily-close {
  position: absolute; top: 10px; right: 12px;
  font-size: 1rem; font-weight: 800; width: 32px; height: 32px; border-radius: 50%;
  background: #f1f0f6; color: var(--ink); box-shadow: 0 2px 0 var(--shadow);
}
.daily-flame { font-size: 3.4rem; line-height: 1; }
.daily-flame-pop { animation: daily-pop .6s ease; }
@keyframes daily-pop { 0%{transform:scale(1)} 40%{transform:scale(1.35) rotate(-8deg)} 100%{transform:scale(1)} }
.daily-title { margin: 6px 0 2px; font-size: 1.6rem; }
.daily-streak { margin: 0 0 16px; font-weight: 800; color: #ff8c42; }
.daily-cycle { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; }
.daily-day {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem; color: var(--ink);
  background: #f1f0f6; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06);
}
.daily-day.is-done { background: #fff0c2; }
.daily-day.is-today { background: #ffd166; box-shadow: 0 0 0 3px #ffe9a8; transform: scale(1.15); }
.daily-day.is-chest { background: #ffe3b0; }
.daily-day.is-chest.is-today { background: #ffcf5e; }
.daily-bonus { margin: -8px 0 16px; font-weight: 800; color: #d9612f; }
.daily-claim {
  font-size: 1.3rem; font-weight: 800; padding: 14px 30px; border-radius: 999px;
  background: #ffd166; color: var(--ink); box-shadow: 0 5px 0 var(--shadow);
  transition: transform .12s ease;
}
.daily-claim:active { transform: scale(0.94); }
.daily-claim:disabled { background: #a0e7a0; opacity: 1; }
.daily-star {
  position: absolute; bottom: 70px; font-size: 1.4rem; pointer-events: none;
  animation: daily-fly 1s ease-out forwards;
}
@keyframes daily-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(0.6); }
  100% { opacity: 0; transform: translate(var(--dx, 0), -160px) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .daily-modal, .daily-card { transition: none; }
  .daily-flame-pop, .daily-star { animation: none; }
}

/* Pet Pairs — mode toggle on the start card + name-word cards */
.mm-modes { display: flex; gap: 10px; justify-content: center; margin: 4px 0 18px; }
.mm-mode {
  font-size: 1.05rem; font-weight: 800; color: var(--ink);
  padding: 9px 18px; border-radius: 999px; background: #f1ecfa;
  border: 3px solid transparent; box-shadow: 0 3px 0 var(--shadow);
  transition: transform .1s ease;
}
.mm-mode:active { transform: scale(0.94); }
.mm-mode.is-on { border-color: #b298dc; background: #efe4ff; }
.mm-word {
  font-size: clamp(1rem, 4.5vw, 1.9rem); font-weight: 900; color: #6b4fa0;
  text-align: center; line-height: 1.1; padding: 4px;
}

/* ===== Shape Sorters ===== */
.ss-game { position: absolute; inset: 0; }
.ss-stage {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; gap: 14px; padding: 16px;
  background: linear-gradient(180deg, #fff2e6 0%, #ffe9f0 100%); overflow: hidden;
}
.ss-top { flex: 0 0 auto; width: min(520px, 96%); display: flex; align-items: center; gap: 12px; }
.ss-meter { flex: 1 1 auto; height: 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 2px 0 rgba(0,0,0,0.06); overflow: hidden; }
.ss-meter-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #ffb26b, #ff8c42); transition: width .3s ease; }
.ss-level { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.ss-rule { margin: 0; font-size: 1.35rem; font-weight: 900; color: #d9612f; }
.ss-item-wrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }
.ss-item { width: clamp(90px, 26vw, 150px); height: clamp(90px, 26vw, 150px); filter: drop-shadow(0 6px 6px rgba(0,0,0,0.18)); }
.ss-shape-svg { width: 100%; height: 100%; display: block; }
.ss-drop { animation: ss-drop-in .35s ease; }
@keyframes ss-drop-in { 0% { transform: translateY(-40px) scale(0.6); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
.ss-into { animation: ss-into .5s ease forwards; }
@keyframes ss-into { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.3) translateY(60px); opacity: 0; } }

.ss-bins {
  flex: 0 0 auto; width: min(560px, 98%);
  display: grid; grid-template-columns: repeat(var(--bins, 3), 1fr); gap: 12px;
}
.ss-bin {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px 12px; border-radius: 20px; background: var(--card);
  box-shadow: 0 6px 0 var(--shadow); border: 3px solid #ffd9c2;
  transition: transform .1s ease;
}
.ss-bin:active { transform: scale(0.95); }
.ss-bin-icon { width: clamp(48px, 12vw, 72px); height: clamp(48px, 12vw, 72px); }
.ss-bin-label { font-weight: 800; font-size: 0.95rem; color: var(--ink); }
.ss-bin-yay { animation: ss-yay .5s ease; border-color: #a0e7a0; }
@keyframes ss-yay { 0%{transform:scale(1)} 45%{transform:scale(1.12)} 100%{transform:scale(1)} }
.ss-bin-no { animation: ss-no .4s ease; }
@keyframes ss-no { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

.ss-banner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.8);
  background: #fff; color: var(--ink); font-weight: 900; font-size: 1.4rem;
  padding: 14px 28px; border-radius: 20px; box-shadow: 0 8px 0 var(--shadow);
  opacity: 0; pointer-events: none; z-index: 20; transition: opacity .2s ease, transform .2s ease;
}
.ss-banner.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.ss-banner.is-good { background: #fff3e0; }
.ss-confetti { position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px; z-index: 12; animation: confetti-fall 2.2s ease-in forwards; }

.ss-start {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #fff2e6 0%, #ffe9f0 100%); z-index: 30;
}
.ss-start.hidden { display: none; }
.ss-start-card { background: var(--card); border-radius: 28px; padding: 30px 34px; text-align: center; box-shadow: 0 10px 0 var(--shadow); max-width: 90%; }
.ss-start-emoji { font-size: 3.4rem; }
.ss-start-card h2 { margin: 8px 0 4px; font-size: 1.8rem; }
.ss-start-card p { margin: 0 0 18px; opacity: 0.75; font-weight: 600; }
.ss-start-btn { font-size: 1.3rem; font-weight: 800; padding: 14px 34px; border-radius: 999px; background: #ff9f6b; color: #fff; box-shadow: 0 5px 0 var(--shadow); transition: transform .12s ease; }
.ss-start-btn:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .ss-drop, .ss-into, .ss-bin-yay, .ss-bin-no, .ss-meter-fill { animation: none; transition: none; }
}

/* ===== Word Builders ===== */
.wb-game { position: absolute; inset: 0; }
.wb-site {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; gap: 16px; padding: 16px;
  background: linear-gradient(180deg, #fdf3e3 0%, #f3e7d3 100%); overflow: hidden;
}
.wb-top { flex: 0 0 auto; width: min(520px, 96%); display: flex; align-items: center; gap: 12px; }
.wb-meter { flex: 1 1 auto; height: 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 2px 0 rgba(0,0,0,0.06); overflow: hidden; }
.wb-meter-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #ffd166, #f4a259); transition: width .3s ease; }
.wb-level { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.wb-goal { position: relative; z-index: 10; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.wb-blueprint {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #2f6690, #234f6e); color: #eaf4ff;
  padding: 8px 20px; border-radius: 14px; box-shadow: 0 4px 0 rgba(0,0,0,0.22);
  border: 3px dashed rgba(255,255,255,0.45);
}
.wb-blueprint-tag { font-size: 0.75rem; font-weight: 800; letter-spacing: 2px; opacity: 0.75; }
.wb-blueprint-word { font-size: clamp(1.5rem, 6vw, 2.4rem); font-weight: 900; letter-spacing: 5px; }
.wb-say { position: relative; z-index: 10; font-size: 1.6rem; background: #fff; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 4px 0 var(--shadow); }
.wb-say:active { transform: scale(0.92); }

/* Concrete slots — the word to build (pushed below the crane rail) */
.wb-slots { flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: clamp(2.2rem, 8vh, 4rem); }
.wb-slot {
  width: clamp(52px, 15vw, 84px); aspect-ratio: 1/1; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #d9d2c4, #d9d2c4 6px, #d2cabb 6px, #d2cabb 12px);
  /* a deeper recess so the empty slot reads as a mould cavity */
  box-shadow: inset 0 0 0 4px #c3bbab, inset 0 6px 12px rgba(0,0,0,0.22), inset 0 -2px 0 rgba(255,255,255,0.4);
}
.wb-slot.is-filled { background: linear-gradient(180deg, #ffe08a, #f4b860); box-shadow: 0 5px 0 #c98b3a; }
.wb-slot.is-target { box-shadow: inset 0 0 0 4px #6bbf59, 0 0 0 4px #a7e39a; }
/* the letter carved into the concrete — a debossed cavity in the shape of the
   letter (dark fill + a bright bottom lip where light catches the edge) */
.wb-slot-mold {
  font-size: clamp(1.9rem, 7vw, 3.1rem); font-weight: 900; color: #8f8676;
  text-shadow: 0 2px 0 rgba(255,255,255,0.6), 0 -1px 1px rgba(0,0,0,0.35);
}
.wb-slot-letter { font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 900; color: #6b4a1c; }
/* the just-seated block gives a satisfying little drop + settle */
.wb-just .wb-slot-letter { animation: wb-settle .4s ease; }
@keyframes wb-settle { 0%{transform:translateY(-10px) scale(1.12)} 55%{transform:translateY(2px) scale(0.95)} 100%{transform:translateY(0) scale(1)} }
/* a puff of concrete dust kicked up as it locks in */
.wb-dust {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(180,168,148,0.85); pointer-events: none; z-index: 3;
  transform: translate(-50%, -50%); animation: wb-dust .65s ease-out forwards;
}
@keyframes wb-dust {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0)), -140%) scale(1.3); }
}
.wb-slot-no { animation: wb-no .4s ease; }
@keyframes wb-no { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* Scattered letter blocks */
.wb-blocks { flex: 1 1 auto; min-height: 0; display: flex; flex-wrap: wrap; gap: 12px; align-content: center; justify-content: center; align-items: center; }
.wb-block {
  width: clamp(52px, 15vw, 84px); aspect-ratio: 1/1; border-radius: 14px;
  font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #ffb765, #f08a3c);
  box-shadow: 0 6px 0 #c56a26; text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  transition: transform .1s ease;
}
.wb-block:active { transform: scale(0.94); }
.wb-block.is-lifting { opacity: 0.3; }
.wb-block.is-used { visibility: hidden; }
.wb-drag { position: fixed; transform: translate(-50%, -60%); z-index: 40; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.wb-drag-hook { width: 40px; height: 34px; margin-bottom: -8px; }
.wb-drag-hook .wb-claw { width: 40px; height: 38px; margin: 0; }
.wb-drag-block {
  width: 72px; height: 72px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #ffb765, #f08a3c); box-shadow: 0 6px 0 #c56a26;
}

/* The gantry crane — tap a letter and it fetches + places it */
.wb-crane { position: absolute; inset: 0; pointer-events: none; }
.wb-gantry-beam {
  position: absolute; top: 15%; left: 4%; right: 4%; height: 12px; border-radius: 6px; z-index: 6;
  background: linear-gradient(180deg, #ffd97a, #f0a53c);
  box-shadow: 0 3px 0 #c67e22, inset 0 2px 0 rgba(255,255,255,0.4);
}
.wb-gantry-beam::before, .wb-gantry-beam::after {
  content: ''; position: absolute; top: -13px; width: 10px; height: 15px; border-radius: 3px 3px 0 0; background: #d98f2c;
}
.wb-gantry-beam::before { left: 5%; }
.wb-gantry-beam::after { right: 5%; }
.wb-gantry-leg { display: none; }
.wb-trolley {
  position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; z-index: 9;
  transition: left .45s cubic-bezier(.4,0,.35,1);
}
.wb-trolley-box { width: 34px; height: 18px; border-radius: 5px; background: linear-gradient(180deg,#6b7883,#4a5560); box-shadow: 0 2px 0 #38424c; margin-top: -5px; }
.wb-cable { width: 3px; height: 18px; background: linear-gradient(90deg,#3f4a54,#5b6b78,#3f4a54); transition: height .4s ease; }
.wb-hook { display: flex; flex-direction: column; align-items: center; margin-top: -2px; }
/* grabber claw: two prongs that open/close around the letter block */
.wb-claw { width: 42px; height: 40px; display: block; margin-bottom: -6px; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.22)); }
.wb-claw svg { width: 100%; height: 100%; overflow: visible; display: block; }
.wb-prong { transform-box: view-box; transform-origin: 24px 14px; transition: transform .16s ease; }
.wb-prong.l { transform: rotate(-24deg); }
.wb-prong.r { transform: rotate(24deg); }
.wb-claw.is-closed .wb-prong.l { transform: rotate(4deg); }
.wb-claw.is-closed .wb-prong.r { transform: rotate(-4deg); }
.wb-held { display: none; }
.wb-held.show {
  display: flex; align-items: center; justify-content: center; margin-top: -3px;
  width: clamp(44px, 12vw, 64px); aspect-ratio: 1/1; border-radius: 12px;
  font-size: clamp(1.4rem, 5vw, 2.2rem); font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #ffb765, #f08a3c);
  box-shadow: 0 5px 0 #c56a26; text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  animation: wb-sway 1.4s ease-in-out infinite;
}
@keyframes wb-sway { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }

.wb-banner {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%) scale(0.8);
  background: #fff; color: var(--ink); font-weight: 900; font-size: 1.4rem;
  padding: 14px 28px; border-radius: 20px; box-shadow: 0 8px 0 var(--shadow);
  opacity: 0; pointer-events: none; z-index: 20; transition: opacity .2s ease, transform .2s ease;
}
.wb-banner.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.wb-banner.is-good { background: #fff3e0; }
.wb-confetti { position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px; z-index: 12; animation: confetti-fall 2.2s ease-in forwards; }

.wb-start {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #fdf3e3 0%, #f3e7d3 100%); z-index: 30;
}
.wb-start.hidden { display: none; }
.wb-start-card { background: var(--card); border-radius: 28px; padding: 30px 34px; text-align: center; box-shadow: 0 10px 0 var(--shadow); max-width: 90%; }
.wb-start-emoji { font-size: 3.4rem; }
.wb-start-card h2 { margin: 8px 0 4px; font-size: 1.8rem; }
.wb-start-card p { margin: 0 0 18px; opacity: 0.75; font-weight: 600; }
.wb-start-btn { font-size: 1.3rem; font-weight: 800; padding: 14px 34px; border-radius: 999px; background: #f4a259; color: #fff; box-shadow: 0 5px 0 var(--shadow); transition: transform .12s ease; }
.wb-start-btn:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .wb-block, .wb-meter-fill, .wb-slot-no, .wb-held, .wb-dust, .wb-just .wb-slot-letter { animation: none; }
  .wb-block, .wb-meter-fill, .wb-slot-no, .wb-trolley, .wb-cable, .wb-prong { transition: none; }
}

/* ===== Metal Makers ===== */
.met-game { position: absolute; inset: 0; }
.met-workshop {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; gap: 12px; padding: 16px; overflow: hidden;
  /* a workshop: pegboard wall up top, workbench surface below */
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(120,86,54,0.10) 58%, rgba(120,86,54,0.16) 100%),
    radial-gradient(circle at 12px 12px, rgba(80,96,110,0.14) 2px, transparent 2.6px) 0 0 / 26px 26px,
    linear-gradient(180deg, #e3eaf1 0%, #cdd8e2 56%, #cbb79c 56%, #bfa989 100%);
}
.met-top { flex: 0 0 auto; width: min(520px, 96%); display: flex; align-items: center; justify-content: space-between; min-height: 30px; }
.met-level { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
/* a little trophy shelf: the creations sit on a wooden ledge */
.met-shelf {
  display: inline-flex; align-items: flex-end; gap: 4px; font-size: 1.4rem;
  padding: 2px 8px 5px; border-radius: 4px;
  background: linear-gradient(180deg, transparent 60%, #c9a26b 60%, #b5824a 100%);
  box-shadow: 0 3px 0 rgba(120,86,40,0.35);
  min-height: 26px;
}
.met-shelf:empty { background: none; box-shadow: none; }
.met-shelf-item { display: inline-block; line-height: 1; }
.met-shelf-item.pop { animation: met-shelf-pop .5s ease; }
@keyframes met-shelf-pop { 0%{transform:translateY(-14px) scale(0.4);opacity:0} 60%{transform:translateY(0) scale(1.2)} 100%{transform:translateY(0) scale(1)} }

/* the goggled worker mascot in the corner */
.met-worker { position: absolute; left: 12px; bottom: 10px; width: 72px; height: 95px; z-index: 4; pointer-events: none; animation: met-worker-bob 2.6s ease-in-out infinite; }
.met-worker svg { width: 100%; height: 100%; display: block; overflow: visible; }
.met-arm { transform-box: view-box; transition: transform .2s ease; }
.met-arm.l { transform-origin: 26px 76px; }
.met-arm.r { transform-origin: 74px 76px; }
@keyframes met-worker-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.met-worker.nod { animation: met-worker-nod .45s ease; }
@keyframes met-worker-nod { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-5px) rotate(-4deg)} }
.met-worker.cheer { animation: met-worker-cheer .42s ease 4; }
@keyframes met-worker-cheer { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-13px)} }
.met-worker.cheer .met-arm.l { transform: rotate(-135deg); }
.met-worker.cheer .met-arm.r { transform: rotate(135deg); }
@media (prefers-reduced-motion: reduce) {
  .met-worker, .met-worker.nod, .met-worker.cheer, .met-shelf-item.pop { animation: none; }
  .met-arm { transition: none; }
}
.met-step { margin: 0; font-size: 1.3rem; font-weight: 900; color: #2f6690; text-align: center; }
.met-stagewrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; }
.met-svgwrap { position: relative; width: min(340px, 82vw); aspect-ratio: 1/1; }
.met-svg { width: 100%; height: 100%; display: block; }

/* the sheet sits on a slightly recessed bench cutout */
.met-svgwrap { filter: drop-shadow(0 8px 10px rgba(40,50,60,0.25)); }
.met-cutguide { fill: none; stroke: #4b5a66; stroke-width: 3; stroke-dasharray: 6 6; opacity: 0.85; stroke-linecap: round; stroke-linejoin: round; }
.met-cutline { fill: none; stroke: #ff7a1a; stroke-width: 5.5; stroke-dasharray: 1; stroke-dashoffset: 1; pathLength: 1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #ffb03a) drop-shadow(0 0 8px #ff7a1a); }
.met-cutpiece { transition: opacity .2s ease; stroke: #ffffff; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.met-cutpiece-hi { transition: opacity .2s ease; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.met-cutpiece.met-pop, .met-cutpiece-hi.met-pop { animation: met-pop .5s ease; }
@keyframes met-pop { 0%{transform:scale(1)} 40%{transform:scale(1.09)} 100%{transform:scale(1)} }

/* the glowing molten dot at the leading edge of the cut */
.met-ember {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%,-50%); pointer-events: none; z-index: 5;
  background: radial-gradient(circle, #fff7c2, #ff9a2e 55%, rgba(255,120,20,0) 75%);
  box-shadow: 0 0 10px 3px rgba(255,150,40,0.7); transition: opacity .25s ease;
  animation: met-ember-pulse .5s ease-in-out infinite alternate;
}
@keyframes met-ember-pulse { from{transform:translate(-50%,-50%) scale(0.85)} to{transform:translate(-50%,-50%) scale(1.2)} }

/* ---- the tools: glued to the finger ---- */
/* The tool is positioned with a GPU-composited transform (no layout, no lag);
   the SVG carries the tip-anchor offset so the working tip lands on the finger.
   touch-action:none on the sheet stops the browser from delaying pointer events
   to check for a scroll gesture — the single biggest win for touch sync. */
.met-svgwrap { touch-action: none; }
.met-tool { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 7; will-change: transform; }
.met-tool svg { display: block; width: 100%; height: 100%; overflow: visible; }
.met-torch { width: 84px; height: 121px; }
.met-torch svg { transform: translate(-47%, -94%); filter: drop-shadow(0 4px 4px rgba(0,0,0,0.32)); }
.met-torch .met-flame { transform-box: fill-box; transform-origin: 50% 0%; }
.met-torch.is-cutting .met-flame { animation: met-flicker .09s infinite alternate; }
.met-torch .met-flame.o { filter: drop-shadow(0 0 7px #ff7a1a); }
@keyframes met-flicker { from{transform:scaleY(0.9) scaleX(1.03)} to{transform:scaleY(1.1) scaleX(0.95)} }
.met-welder { width: 78px; height: 120px; }
.met-welder svg { transform: translate(-50%, -80%); filter: drop-shadow(0 4px 4px rgba(0,0,0,0.32)); }
.met-welder .met-arc { opacity: 0; }
.met-welder.is-arcing .met-arc { opacity: 1; filter: drop-shadow(0 0 8px #9fdcff) drop-shadow(0 0 14px #6fc4ff); animation: met-arc .06s infinite alternate; }
@keyframes met-arc { from{transform:scale(0.7);opacity:0.7} to{transform:scale(1.3);opacity:1} }
.met-rivetgun { width: 80px; height: 123px; }
.met-rivetgun svg { transform: translate(-52%, -86%); filter: drop-shadow(0 4px 4px rgba(0,0,0,0.32)); }
.met-rivetgun.is-firing svg { animation: met-recoil .18s ease; }
@keyframes met-recoil { 0%{transform:translate(-52%,-86%)} 40%{transform:translate(-52%,-76%)} 100%{transform:translate(-52%,-86%)} }

/* sparks fly off the tool tip and fall */
.met-spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffe27a; box-shadow: 0 0 6px 1px #ffab2e; pointer-events: none; z-index: 6; animation: met-spark .45s ease-out forwards; }
@keyframes met-spark { 0%{opacity:1; transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0.4)} }

/* assembled pieces (weld/rivet/reveal) */
.met-asm { stroke: #6f7d88; stroke-width: 1.5; }
.met-asm-hi { pointer-events: none; }
.met-seam { stroke: #6a7783; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 4 5; }
.met-seam.is-active { stroke: #8a97a3; }
.met-bead { stroke: #ffb03a; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 3px #ff8c2e); }
.met-bead-active { stroke-dasharray: 1; stroke-dashoffset: 1; }
.met-hole { cursor: pointer; }
.met-hole.is-placed .met-rivet-head { animation: met-pop .4s ease; transform-box: fill-box; transform-origin: center; }

.met-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.75) 48%, transparent 62%); animation: met-sheen 1.1s ease; }
@keyframes met-sheen { 0%{transform:translateX(-60%)} 100%{transform:translateX(60%)} }
.met-sparkle { position: absolute; color: #fff; font-size: 1.2rem; pointer-events: none; text-shadow: 0 0 6px #ffe27a; animation: met-sparkle .9s ease forwards; }
@keyframes met-sparkle { 0%{opacity:0; transform:scale(0.4)} 40%{opacity:1; transform:scale(1.2)} 100%{opacity:0; transform:scale(0.8)} }
.met-reveal-badge { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); font-size: 2.8rem; animation: met-pop .6s ease; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25)); }

.met-banner {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%) scale(0.8);
  background: #fff; color: var(--ink); font-weight: 900; font-size: 1.3rem;
  padding: 14px 26px; border-radius: 20px; box-shadow: 0 8px 0 var(--shadow);
  opacity: 0; pointer-events: none; z-index: 20; text-align: center; transition: opacity .2s ease, transform .2s ease;
}
.met-banner.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.met-banner.is-good { background: #eef6ff; }
.met-confetti { position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px; z-index: 12; animation: confetti-fall 2.2s ease-in forwards; }

.met-start {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #dfe6ee 0%, #c7d2dd 100%); z-index: 30;
}
.met-start.hidden { display: none; }
.met-start-card { background: var(--card); border-radius: 28px; padding: 30px 34px; text-align: center; box-shadow: 0 10px 0 var(--shadow); max-width: 90%; }
.met-start-emoji { font-size: 3.4rem; }
.met-start-card h2 { margin: 8px 0 4px; font-size: 1.8rem; }
.met-start-card p { margin: 0 0 18px; opacity: 0.75; font-weight: 600; }
.met-start-btn { font-size: 1.3rem; font-weight: 800; padding: 14px 32px; border-radius: 999px; background: #2f6690; color: #fff; box-shadow: 0 5px 0 var(--shadow); transition: transform .12s ease; }
.met-start-btn:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .met-cutpiece.met-pop, .met-cutpiece-hi.met-pop, .met-spark, .met-shine, .met-reveal-badge,
  .met-ember, .met-torch.is-cutting .met-flame, .met-welder.is-arcing .met-arc,
  .met-rivetgun.is-firing, .met-sparkle, .met-hole.is-placed .met-rivet-head { animation: none; }
  .met-tool { transition: none; }
}

/* ===================== Tic-Tac-Toe & Connect Four ===================== */
/* Shared kid-friendly touches: a big turn indicator with the current pet's
   face, a chunky board, confetti reused from the shared confetti-fall keyframe. */
.ttt-game, .c4-game { position: absolute; inset: 0; }
.ttt-stage, .c4-stage {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 16px;
  background: linear-gradient(180deg, #eaf4ff 0%, #f5ecff 100%); overflow: hidden;
}

/* Whose turn — the enlarged pet face + its color is the real signal. */
.ttt-turn, .c4-turn {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  font-weight: 900; font-size: 1.3rem; color: var(--ink);
}
.ttt-turn-face, .c4-turn-face {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 999px; font-size: 2rem; overflow: hidden;
  background: color-mix(in srgb, var(--pc, #ffb703) 30%, #fff);
  box-shadow: 0 4px 0 var(--shadow), inset 0 0 0 4px var(--pc, #ffb703);
  animation: ttt-turn-pulse 1.1s ease-in-out infinite;
}
.ttt-turn-face svg, .c4-turn-face svg { width: 88%; height: 88%; display: block; }
@keyframes ttt-turn-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* --- Tic-Tac-Toe board --- */
.ttt-board {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  width: min(420px, 88vw); aspect-ratio: 1 / 1;
  background: #6a8ec9; padding: 10px; border-radius: 24px; box-shadow: 0 8px 0 var(--shadow);
}
.ttt-cell {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 18px; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.06);
  font-size: clamp(2.2rem, 12vw, 4rem); line-height: 1; transition: transform .1s ease, background .2s ease;
}
.ttt-cell:not(.is-filled):active { transform: scale(0.94); background: #eef4ff; }
.ttt-cell.is-filled { background: color-mix(in srgb, var(--pc, #ffb703) 18%, #fff); }
.ttt-mark { display: flex; align-items: center; justify-content: center; width: 82%; height: 82%; }
.ttt-mark svg { width: 100%; height: 100%; display: block; }
.ttt-pop { animation: ttt-pop .32s cubic-bezier(.3,1.5,.5,1); }
@keyframes ttt-pop { 0% { transform: scale(0.2); } 100% { transform: scale(1); } }
.ttt-win-cell { animation: ttt-win 0.7s ease-in-out infinite; box-shadow: 0 0 0 4px #ffd166, inset 0 -4px 0 rgba(0,0,0,0.06); }
@keyframes ttt-win { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* --- Connect Four board --- */
.c4-board {
  flex: 0 0 auto; display: flex; gap: 6px;
  width: min(520px, 94vw); background: #3a6ea5; padding: 10px; border-radius: 22px;
  box-shadow: 0 8px 0 var(--shadow);
}
.c4-col {
  flex: 1 1 0; display: flex; flex-direction: column; gap: 6px;
  background: transparent; border-radius: 12px; transition: background .15s ease;
}
.c4-col:not(:disabled):hover { background: rgba(255,255,255,0.12); }
.c4-col:not(:disabled):active { background: rgba(255,255,255,0.22); }
.c4-cell {
  aspect-ratio: 1 / 1; border-radius: 999px; background: #dfeaf7;
  box-shadow: inset 0 3px 5px rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.c4-cell.is-filled { background: color-mix(in srgb, var(--pc, #ffb703) 60%, #fff); box-shadow: inset 0 3px 5px rgba(0,0,0,0.12); }
.c4-token { display: flex; align-items: center; justify-content: center; width: 88%; height: 88%; }
.c4-token svg { width: 100%; height: 100%; display: block; }
.c4-fall { animation: c4-fall .38s cubic-bezier(.4,.1,.6,1); }
@keyframes c4-fall { 0% { transform: translateY(var(--drop, -60vh)); } 70% { transform: translateY(0); } 85% { transform: translateY(-6%); } 100% { transform: translateY(0); } }
.c4-win-cell { animation: ttt-win 0.7s ease-in-out infinite; box-shadow: 0 0 0 4px #ffd166, inset 0 3px 5px rgba(0,0,0,0.12); }

/* Shared banner + play-again + start overlays for both board games. */
.ttt-banner, .c4-banner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.8);
  background: #fff; color: var(--ink); font-weight: 900; font-size: 1.5rem;
  padding: 16px 30px; border-radius: 20px; box-shadow: 0 8px 0 var(--shadow);
  opacity: 0; pointer-events: none; z-index: 20; transition: opacity .2s ease, transform .2s ease;
}
.ttt-banner.show, .c4-banner.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.ttt-banner.is-good, .c4-banner.is-good { background: #eafff0; }

.ttt-again, .c4-again {
  flex: 0 0 auto; font-size: 1.15rem; font-weight: 800; padding: 12px 30px; border-radius: 999px;
  background: #6a8ec9; color: #fff; box-shadow: 0 5px 0 var(--shadow); transition: transform .12s ease;
}
.c4-again { background: #3a6ea5; }
.ttt-again:active, .c4-again:active { transform: scale(0.94); }

.ttt-confetti, .c4-confetti { position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px; z-index: 12; animation: confetti-fall 2.2s ease-in forwards; }

.ttt-start, .c4-start {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #eaf4ff 0%, #f5ecff 100%); z-index: 30;
}
.ttt-start.hidden, .c4-start.hidden { display: none; }
.ttt-start-card, .c4-start-card { background: var(--card); border-radius: 28px; padding: 30px 34px; text-align: center; box-shadow: 0 10px 0 var(--shadow); max-width: 90%; }
.ttt-start-emoji, .c4-start-emoji { font-size: 3rem; letter-spacing: 4px; }
.ttt-start-card h2, .c4-start-card h2 { margin: 10px 0 4px; font-size: 1.8rem; }
.ttt-start-card p, .c4-start-card p { margin: 0 0 20px; opacity: 0.75; font-weight: 600; }
.ttt-modes, .c4-modes { display: flex; flex-direction: column; gap: 12px; }
.ttt-mode, .c4-mode {
  font-size: 1.2rem; font-weight: 800; padding: 14px 30px; border-radius: 999px;
  background: #6a8ec9; color: #fff; box-shadow: 0 5px 0 var(--shadow); transition: transform .12s ease;
}
.c4-mode { background: #3a6ea5; }
.ttt-mode:active, .c4-mode:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .ttt-turn-face, .c4-turn-face, .ttt-pop, .c4-fall, .ttt-win-cell, .c4-win-cell { animation: none; }
}