/* ============================================================
   PIXEL PET COMPANION — v2 theme overrides
   Modern, warm, premium dark SaaS shell wrapped around the same
   pixel-art creature. Load AFTER pixel.css — reuses its keyframes
   (bob, wob, squash, patbounce, heart-rise, zzz, pop) and swaps the
   design tokens for a cozier, less "toy" surface.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* surfaces */
  --cc-bg:        #14121c;
  --cc-elev-1:    #1d1a29;
  --cc-elev-2:    #262233;
  --cc-stroke:    rgba(255,255,255,0.08);
  --cc-stroke-2:  rgba(255,255,255,0.14);

  /* text */
  --cc-text:      #f4f1fa;
  --cc-text-dim:  #a89fc2;
  --cc-text-mute: #776e93;

  /* warm accent (primary CTA / relationship warmth) */
  --cc-accent:      #ffb454;
  --cc-accent-ink:  #2b1c05;
  --cc-accent-soft: rgba(255,180,84,0.16);

  /* mode identity colors */
  --cc-scout:     #ff9457;
  --cc-creative:  #b58cff;
  --cc-calm:      #6bd9b0;

  /* keep the pet's own vars mapped onto this dark surface so
     floating-pet.jsx's speech bubble reads correctly here too */
  --paper: var(--cc-elev-2);
  --ink:   var(--cc-text);

  --cc-font: 'Manrope', system-ui, sans-serif;
  --cc-radius: 20px;
  --cc-radius-sm: 13px;
}

.cc-root {
  font-family: var(--cc-font);
  color: var(--cc-text);
}

.cc-card {
  background: var(--cc-elev-1);
  border: 1px solid var(--cc-stroke);
  border-radius: var(--cc-radius);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 48px -28px rgba(0,0,0,.7);
}

.cc-btn {
  font-family: var(--cc-font);
  border-radius: var(--cc-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 700;
  transition: transform .12s ease, filter .12s ease, background .15s ease;
}
.cc-btn:active { transform: scale(.96); }
.cc-btn-primary { background: var(--cc-accent); color: var(--cc-accent-ink); }
.cc-btn-primary:hover { filter: brightness(1.06); }
.cc-btn-primary:disabled { opacity: .45; cursor: default; transform: none; }
.cc-btn-ghost {
  background: var(--cc-elev-2); color: var(--cc-text);
  border: 1px solid var(--cc-stroke-2); font-weight: 600;
}
.cc-btn-ghost:hover { background: #2c273c; }

.cc-chip {
  font-family: var(--cc-font); font-size: 13px; font-weight: 600;
  background: var(--cc-elev-2); color: var(--cc-text-dim);
  border: 1px solid var(--cc-stroke); border-radius: 999px;
  padding: 7px 13px; cursor: pointer; white-space: nowrap;
  transition: all .12s ease;
}
.cc-chip:hover { color: var(--cc-text); border-color: var(--cc-stroke-2); }

.cc-nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; padding: 8px 4px;
  color: var(--cc-text-mute); font-family: var(--cc-font); font-size: 10.5px; font-weight: 700;
  flex: 1; border-radius: 12px; transition: color .12s ease;
}
.cc-nav-btn.active { color: var(--cc-accent); }
.cc-nav-btn .cc-nav-icon { font-size: 18px; line-height: 1; }

.cc-scroll::-webkit-scrollbar { width: 5px; }
.cc-scroll::-webkit-scrollbar-thumb { background: var(--cc-stroke-2); border-radius: 4px; }

/* ---- keyframes new to v2 ---- */
@keyframes cc-fade-up {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes cc-dot-pulse {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@keyframes cc-cookie-eat {
  0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.6) rotate(0deg); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) rotate(-10deg); }
  55% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(.85) rotate(8deg); }
  85% { opacity: .9; transform: translateX(-50%) translateY(-4px) scale(.4) rotate(0deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.1) rotate(0deg); }
}
@keyframes cc-icon-pop {
  0% { opacity: 0; transform: translateY(6px) scale(.5); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.12); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cc-fruit-eat {
  0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.6) rotate(0deg); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) rotate(-8deg); }
  55% { opacity: 1; transform: translateX(-50%) translateY(-3px) scale(.85) rotate(8deg); }
  85% { opacity: .9; transform: translateX(-50%) translateY(-5px) scale(.4) rotate(0deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-7px) scale(.1) rotate(0deg); }
}
@keyframes cc-bubble-rise {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  15% { opacity: .95; }
  100% { opacity: 0; transform: translateY(-92px) scale(1.15); }
}
@keyframes cc-ring-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--glow-color, rgba(255,180,84,.35)); }
  50% { box-shadow: 0 0 0 10px rgba(255,180,84,0); }
}
@keyframes cc-walk-off {
  0% { transform: translateX(0) scaleX(1); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(140px) scaleX(1); opacity: 0; }
}
@keyframes cc-walk-in {
  0% { transform: translateX(-140px) scaleX(-1); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateX(0) scaleX(-1); opacity: 1; }
}