/* Critter Cove — funzone.css — assembled by stitch.sh. DO NOT EDIT (edit the shards). */
/* ===== 00-base.css ===== */
/* ============================================================================
   Critter Cove -- 00-base.css  (shell shard)
   Owns: :root --cc-* design tokens, .cc-app, .cc-screen, .cc-nav, .cc-hud
   + shell-only structural chrome (unique prefixes: .cc-skip, .cc-main,
   #cc-fx-layer, .cc-shop-*, .cc-daily-*, .cc-toast-*, .cc-mute).
   Base / layout only -- every game module owns its own component CSS.
   Bioluminescent / dreamy. Mobile-first. Reduced-motion-safe. >=44px touch.
   ========================================================================== */

/* ---------- design tokens : neutral (landing) ---------- */
:root {
  /* deep dreamy backdrop */
  --cc-bg-0:    #070b1e;
  --cc-bg-1:    #0d1638;
  --cc-bg-2:    #14224f;
  --cc-ink:     #eaf2ff;
  --cc-ink-dim: #9fb2d8;

  /* bioluminescent accents */
  --cc-cyan:    #45e7ff;
  --cc-teal:    #2bd1c4;
  --cc-violet:  #9b6cff;
  --cc-magenta: #ff5fd2;
  --cc-gold:    #ffd45e;
  --cc-aqua:    #5effc9;

  /* currency + signals */
  --cc-stardust: var(--cc-gold);

  /* rarity ramp (mirrors CreatureEngine.RARITIES order) */
  --cc-rar-common:    #9fb2d8;
  --cc-rar-rare:      #45e7ff;
  --cc-rar-epic:      #9b6cff;
  --cc-rar-legendary: #ffd45e;
  --cc-rar-secret:    #ff5fd2;

  /* glass surfaces */
  --cc-surface:   rgba(20, 34, 79, 0.55);
  --cc-surface-2: rgba(13, 22, 56, 0.78);
  --cc-stroke:    rgba(122, 162, 247, 0.28);
  --cc-stroke-hi: rgba(160, 210, 255, 0.55);

  /* glow shadows */
  --cc-glow-cyan:   0 0 18px rgba(69, 231, 255, 0.55);
  --cc-glow-violet: 0 0 18px rgba(155, 108, 255, 0.55);
  --cc-glow-gold:   0 0 22px rgba(255, 212, 94, 0.6);

  /* geometry */
  --cc-touch: 44px;
  --cc-r-sm: 10px;
  --cc-r-md: 16px;
  --cc-r-lg: 24px;
  --cc-pad:  16px;
  --cc-gap:  12px;

  /* timing */
  --cc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cc-fast: 160ms;
  --cc-med:  320ms;

  --cc-font: "Baloo 2", "Quicksand", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* JS may write the just-revealed rarity colour here for accenting */
  --cc-accent: var(--cc-cyan);
}

/* ---------- age theme : Autumn (7-8) -- warmer, softer, dreamier ---------- */
.cc-app[data-age="autumn"] {
  --cc-bg-0: #0a0820;
  --cc-bg-1: #241043;
  --cc-bg-2: #3a1556;
  --cc-cyan: #66e0ff;
  --cc-violet: #c08bff;
  --cc-magenta: #ff8fd6;
  --cc-aqua: #8affd8;
  --cc-accent: var(--cc-magenta);
}

/* ---------- age theme : Annabel (10-11) -- cooler, sleeker neon ---------- */
.cc-app[data-age="annabel"] {
  --cc-bg-0: #050912;
  --cc-bg-1: #081a2e;
  --cc-bg-2: #0a2a46;
  --cc-cyan: #38f0ff;
  --cc-teal: #19e6cf;
  --cc-violet: #8a73ff;
  --cc-accent: var(--cc-cyan);
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--cc-bg-0);
  color: var(--cc-ink);
  font-family: var(--cc-font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body { overflow: hidden; }
button { font-family: inherit; color: inherit; }

/* ---------- skip link (a11y) ---------- */
.cc-skip {
  position: fixed;
  left: 8px; top: -120px;
  z-index: 999;
  padding: 10px 16px;
  background: var(--cc-surface-2);
  border: 1px solid var(--cc-stroke-hi);
  border-radius: var(--cc-r-sm);
  color: var(--cc-ink);
  text-decoration: none;
  transition: top var(--cc-fast) var(--cc-ease);
}
.cc-skip:focus { top: 8px; }

/* ============================================================================
   APP SHELL -- header(HUD) / main(screens) / nav grid
   ========================================================================== */
.cc-app {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
}

/* dreamy living backdrop: aurora blobs + starfield, behind everything */
.cc-app__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--cc-bg-2) 0%, var(--cc-bg-1) 45%, var(--cc-bg-0) 100%);
  overflow: hidden;
}
.cc-app__bg::before {
  /* drifting aurora */
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(40% 38% at 22% 30%, rgba(69,231,255,0.20), transparent 70%),
    radial-gradient(46% 40% at 80% 22%, rgba(155,108,255,0.20), transparent 70%),
    radial-gradient(42% 44% at 62% 82%, rgba(255,95,210,0.16), transparent 72%),
    radial-gradient(38% 38% at 14% 78%, rgba(94,255,201,0.14), transparent 72%);
  filter: blur(8px);
  animation: cc-aurora 26s var(--cc-ease) infinite alternate;
}
.cc-app__bg::after {
  /* twinkle starfield (pure gradient dots) */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 62%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px   at 47% 34%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 66% 12%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px   at 78% 48%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 76%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px   at 36% 88%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px   at 6% 52%,  rgba(255,255,255,0.7), transparent 60%);
  opacity: 0.7;
  animation: cc-twinkle 7s ease-in-out infinite alternate;
}
@keyframes cc-aurora {
  0%   { transform: translate3d(-4%, -2%, 0) rotate(0deg)   scale(1.05); }
  100% { transform: translate3d(4%, 3%, 0)   rotate(8deg)   scale(1.15); }
}
@keyframes cc-twinkle {
  0%   { opacity: 0.45; }
  100% { opacity: 0.85; }
}

/* ============================================================================
   HUD (top bar) -- stardust / streak / collection + mascot + mute
   ========================================================================== */
.cc-hud {
  display: flex;
  align-items: center;
  gap: var(--cc-gap);
  padding: max(10px, env(safe-area-inset-top)) var(--cc-pad) 10px;
  padding-top: calc(10px + env(safe-area-inset-top));
  min-height: 56px;
  background: linear-gradient(180deg, var(--cc-surface-2), rgba(13,22,56,0));
  backdrop-filter: blur(6px);
  z-index: 5;
}
.cc-hud__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-size: 1.02rem;
  white-space: nowrap;
}
.cc-hud__mascot {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  filter: drop-shadow(var(--cc-glow-cyan));
}
.cc-hud__mascot svg { width: 100%; height: 100%; display: block; }
.cc-hud__title {
  background: linear-gradient(90deg, var(--cc-cyan), var(--cc-magenta));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cc-hud__title small {
  display: block;
  -webkit-text-fill-color: var(--cc-ink-dim); color: var(--cc-ink-dim);
  font-size: 0.6rem; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase;
}
.cc-hud__stats {
  display: flex;
  gap: 8px;
  margin-left: auto;
  align-items: center;
}
.cc-hud__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  min-height: 36px;
  border-radius: 999px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-stroke);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: transform var(--cc-fast) var(--cc-ease), box-shadow var(--cc-med);
}
.cc-hud__chip .cc-hud__ico { font-size: 1.05rem; line-height: 1; }
.cc-hud__chip[data-kind="stardust"] { color: var(--cc-gold);   box-shadow: var(--cc-glow-gold); }
.cc-hud__chip[data-kind="streak"]   { color: var(--cc-magenta); }
.cc-hud__chip[data-kind="collection"] { color: var(--cc-cyan); }
.cc-hud__chip.cc-pop { animation: cc-chip-pop 420ms var(--cc-ease); }
@keyframes cc-chip-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.cc-mute {
  flex: 0 0 auto;
  width: var(--cc-touch); height: var(--cc-touch);
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--cc-stroke);
  background: var(--cc-surface);
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform var(--cc-fast) var(--cc-ease), box-shadow var(--cc-med);
}
.cc-mute:hover { box-shadow: var(--cc-glow-cyan); }
.cc-mute:active { transform: scale(0.92); }

/* Narrow phones (<=430px): the single HUD row can't fit brand + 3 chips + mute,
   so the mute used to clip off the right edge (D1). Wrap into two rows -- the mute
   pins to the top-row right edge (always on-screen + full 44px touch), the stat
   chips drop to their own right-aligned row below. Tablet/landscape (>430px) keep
   the original single row. */
@media (max-width: 430px) {
  .cc-hud { flex-wrap: wrap; row-gap: 8px; }
  .cc-hud__brand { order: 0; }
  .cc-mute { order: 1; margin-left: auto; }
  .cc-hud__stats { order: 2; flex-basis: 100%; margin-left: 0; justify-content: flex-end; }
}

/* ============================================================================
   MAIN + SCREENS
   ========================================================================== */
.cc-main {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.cc-screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--cc-pad);
  padding-bottom: 24px;
  animation: cc-screen-in var(--cc-med) var(--cc-ease);
}
.cc-screen[hidden] { display: none; }
@keyframes cc-screen-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================================
   NAV (bottom)
   ========================================================================== */
.cc-nav {
  display: flex;
  gap: 8px;
  padding: 8px var(--cc-pad) calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, var(--cc-surface-2), rgba(13,22,56,0));
  backdrop-filter: blur(6px);
  z-index: 5;
}
.cc-nav__btn {
  flex: 1 1 0;
  min-width: 0;                 /* phone-portrait: never let a label force overflow */
  min-height: var(--cc-touch);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 6px;
  border-radius: var(--cc-r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--cc-ink-dim);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: color var(--cc-fast), background var(--cc-med) var(--cc-ease),
              border-color var(--cc-med), box-shadow var(--cc-med), transform var(--cc-fast);
}
.cc-nav__ico { font-size: 1.35rem; line-height: 1; filter: grayscale(0.4); transition: filter var(--cc-med); }
.cc-nav__btn:active { transform: scale(0.95); }
.cc-nav__btn[aria-current="page"] {
  color: var(--cc-ink);
  background: var(--cc-surface);
  border-color: var(--cc-stroke-hi);
  box-shadow: var(--cc-glow-cyan);
}
.cc-nav__btn[aria-current="page"] .cc-nav__ico { filter: none; }
.cc-nav__badge {
  position: absolute;
  transform: translate(14px, -14px);
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--cc-magenta);
  color: #1a0820;
  font-size: 0.62rem; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 0 10px var(--cc-magenta);
}

/* ============================================================================
   FX OVERLAY -- shared layer for supernova / meteor / golden egg.
   Styled by ID only (surprises + hatch own .cc-fx-*/.cc-supernova-* classes).
   ========================================================================== */
#cc-fx-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;           /* children opt back in as needed */
  overflow: hidden;
}

/* ============================================================================
   SHELL-OWNED CHROME (unique prefixes -- no module uses these)
   ========================================================================== */

/* --- egg machine / shop (lives inside #cc-screen-hatch chrome) --- */
.cc-shop-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; min-width: 0;
  gap: 8px; margin: 4px 2px 14px;
}
.cc-shop-head h2, .cc-shop-head p { min-width: 0; }
.cc-shop-head h2 { margin: 0; font-size: 1.25rem; }
.cc-shop-head p  { margin: 0; color: var(--cc-ink-dim); font-size: 0.85rem; }
.cc-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--cc-gap);
}
.cc-shop-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
  min-height: 132px;
  border-radius: var(--cc-r-lg);
  background: var(--cc-surface);
  border: 1px solid var(--cc-stroke);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--cc-med) var(--cc-ease), border-color var(--cc-med), box-shadow var(--cc-med);
}
.cc-shop-card::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 0%, var(--cc-accent), transparent 70%);
  opacity: 0.12; pointer-events: none;
}
.cc-shop-card:hover:not([disabled]) { transform: translateY(-3px); border-color: var(--cc-stroke-hi); box-shadow: var(--cc-glow-violet); }
.cc-shop-card:active:not([disabled]) { transform: scale(0.98); }
.cc-shop-card[disabled] { opacity: 0.5; cursor: not-allowed; }
.cc-shop-card__name { font-weight: 800; font-size: 1.05rem; }
.cc-shop-card__odds { font-size: 0.72rem; color: var(--cc-ink-dim); line-height: 1.5; }
.cc-shop-card__cost {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; color: var(--cc-gold);
}
.cc-shop-reveal { margin-top: 14px; }

/* --- daily-egg ribbon --- */
.cc-daily {
  display: flex; align-items: center; gap: 12px;
  margin: 0 2px 14px;
  padding: 12px 16px;
  border-radius: var(--cc-r-md);
  background: linear-gradient(100deg, rgba(255,212,94,0.18), rgba(255,95,210,0.16));
  border: 1px solid var(--cc-stroke-hi);
  box-shadow: var(--cc-glow-gold);
  animation: cc-daily-breathe 3.2s var(--cc-ease) infinite alternate;
}
.cc-daily__txt { flex: 1; min-width: 0; }
.cc-daily__txt b { display: block; }
.cc-daily__txt span { font-size: 0.8rem; color: var(--cc-ink-dim); }
.cc-daily__btn {
  min-height: var(--cc-touch); padding: 0 18px;
  border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 800; color: #1a0820;
  background: linear-gradient(90deg, var(--cc-gold), var(--cc-magenta));
  box-shadow: var(--cc-glow-gold);
  transition: transform var(--cc-fast) var(--cc-ease);
}
.cc-daily__btn:active { transform: scale(0.94); }
@keyframes cc-daily-breathe {
  from { box-shadow: 0 0 12px rgba(255,212,94,0.4); }
  to   { box-shadow: 0 0 26px rgba(255,212,94,0.7); }
}

/* --- toast (gentle, reward-positive messages) --- */
.cc-toast-host {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
  width: max-content; max-width: 90vw;
}
.cc-toast {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--cc-surface-2);
  border: 1px solid var(--cc-stroke-hi);
  box-shadow: var(--cc-glow-cyan);
  font-weight: 700;
  animation: cc-toast-in 280ms var(--cc-ease), cc-toast-out 360ms var(--cc-ease) forwards;
  animation-delay: 0s, 2.4s;
}
@keyframes cc-toast-in  { from { opacity: 0; transform: translateY(16px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes cc-toast-out { to { opacity: 0; transform: translateY(-10px) scale(0.96); } }

/* --- generic empty/placeholder state (kept gentle, never a fail) --- */
.cc-empty {
  margin: 24px auto; max-width: 320px; text-align: center; color: var(--cc-ink-dim);
}

/* ---------- focus visibility ---------- */
:focus-visible {
  outline: 3px solid var(--cc-cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- landscape: keep nav slim, screens roomy ---------- */
@media (orientation: landscape) and (max-height: 540px) {
  .cc-hud { min-height: 48px; }
  .cc-nav__btn { flex-direction: row; gap: 8px; }
  .cc-nav__ico { font-size: 1.1rem; }
}

/* ============================================================================
   REDUCED MOTION -- blooms degrade to fades; no drift, no twinkle, no >3Hz
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cc-app__bg::before { animation: none; }
  .cc-app__bg::after  { animation: none; opacity: 0.6; }
  .cc-daily           { animation: none; }
  .cc-screen          { animation: none; }
  .cc-hud__chip.cc-pop { animation: none; }
  .cc-toast { animation: cc-toast-in 1ms linear, cc-toast-out 1ms linear 2.6s forwards; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}

/* ===== creature-engine.css ===== */
/* creature-engine.css -- owns .cc-creature, .cc-aura-*
   Procedural creature presentation: idle springy bob, rarity aura motion, sparkle
   twinkle. Every animation is gated behind .cc-creature--animate and switched off
   under prefers-reduced-motion (degrades to a calm static glow). No flash > 3Hz. */

.cc-creature {
  display: block;
  overflow: visible;
  -webkit-user-select: none;
  user-select: none;
}

.cc-creature__body,
.cc-creature__aura,
.cc-creature__spark {
  transform-box: fill-box;
  transform-origin: center;
}

/* aura sits behind; the gradient supplies the glow, CSS only adds gentle motion */
.cc-creature__aura { transform-origin: 50% 54px; }

/* drop shadow under the feet keeps creatures grounded across backgrounds */
.cc-creature__shape { paint-order: stroke fill; }

/* ---- idle motion (only when animated) ---- */
.cc-creature--animate .cc-creature__body {
  animation: cc-creature-bob 3.4s ease-in-out infinite;
}

.cc-creature--animate .cc-aura-soft {
  animation: cc-creature-breathe 4.5s ease-in-out infinite;
}
.cc-creature--animate .cc-aura-shimmer {
  animation: cc-creature-shimmer 2.6s ease-in-out infinite;
}
.cc-creature--animate .cc-aura-sparkle {
  animation: cc-creature-shimmer 2s ease-in-out infinite;
}
.cc-creature--animate .cc-aura-rainbow {
  animation: cc-creature-shimmer 2.4s ease-in-out infinite, cc-creature-hue 7s linear infinite;
}

.cc-creature__spark { opacity: 0; transform: scale(0.4); }
.cc-creature--animate .cc-creature__spark {
  animation: cc-creature-twinkle 1.9s ease-in-out infinite;
}

@keyframes cc-creature-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2.4px) rotate(-0.6deg); }
}
@keyframes cc-creature-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.03); }
}
@keyframes cc-creature-shimmer {
  0%, 100% { opacity: 0.7;  transform: scale(0.98); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
@keyframes cc-creature-hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}
@keyframes cc-creature-twinkle {
  0%, 100% { opacity: 0;    transform: scale(0.4) rotate(0deg); }
  45%      { opacity: 0.95; transform: scale(1)   rotate(20deg); }
  60%      { opacity: 0.95; transform: scale(1)   rotate(20deg); }
}

/* reduced motion: hold everything still, keep the glow as a calm static aura */
@media (prefers-reduced-motion: reduce) {
  .cc-creature--animate .cc-creature__body,
  .cc-creature--animate .cc-creature__aura,
  .cc-creature--animate .cc-creature__spark {
    animation: none !important;
  }
  .cc-creature__spark { opacity: 0.85; transform: scale(1); }
  .cc-creature__aura  { opacity: 0.9; }
}

/* ===== catch-game.css ===== */
/* catch-game.css -- Critter Cove CATCH mini-round.
   Namespaced .cc-catch-* only. Uses --cc-* design tokens from 00-base.css with
   safe fallbacks so the shard renders standalone. Reduced-motion safe: every
   animation degrades to a soft fade or is disabled; nothing flashes >3Hz. */

.cc-catch {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 320px;
  box-sizing: border-box;
  gap: 10px;
  padding: 10px;
  color: var(--cc-ink, #eaf6ff);
  font-family: var(--cc-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* ---------- top bar: combo meter / tally / timer ---------- */
.cc-catch-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cc-catch-meter {
  position: relative;
  flex: 1 1 160px;
  min-width: 140px;
  height: 30px;
  border-radius: 999px;
  background: var(--cc-surface-2, rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.cc-catch-meter-fill {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--cc-accent-2, #5cf0d0),
    var(--cc-accent, #6ea8ff));
  transition: width 220ms cubic-bezier(.2, .9, .3, 1.2);
}
.cc-catch-combo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
/* meter colour warms as the multiplier climbs */
.cc-catch[data-tier="2"] .cc-catch-meter-fill { background: linear-gradient(90deg, #5cf0d0, #aef06e); }
.cc-catch[data-tier="3"] .cc-catch-meter-fill { background: linear-gradient(90deg, #aef06e, #ffd166); }
.cc-catch[data-tier="4"] .cc-catch-meter-fill { background: linear-gradient(90deg, #ffd166, #ff9a62); }
.cc-catch[data-tier="5"] .cc-catch-meter-fill { background: linear-gradient(90deg, #ff9a62, #ff6ad5); }

.cc-catch-tally {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--cc-surface-2, rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.cc-catch-tally-star { width: 20px; height: 20px; color: var(--cc-gold, #ffd166); display: inline-flex; }
.cc-catch-tally-star svg { width: 100%; height: 100%; filter: drop-shadow(0 0 4px rgba(255, 209, 102, 0.7)); }

.cc-catch-timer {
  flex: 1 1 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--cc-surface-2, rgba(255, 255, 255, 0.08));
  overflow: hidden;
  order: 9;
}
.cc-catch-timer-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cc-accent, #6ea8ff), var(--cc-accent-2, #5cf0d0));
  transition: width 120ms linear;
}

/* ---------- play field ---------- */
.cc-catch-field {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  border-radius: var(--cc-radius, 18px);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(110, 168, 255, 0.18), transparent 60%),
    radial-gradient(90% 60% at 80% 110%, rgba(92, 240, 208, 0.14), transparent 60%),
    var(--cc-surface, rgba(12, 20, 44, 0.55));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  cursor: crosshair;
}

/* ---------- motes ---------- */
.cc-catch-mote {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  min-width: 44px;
  min-height: 44px;
  will-change: transform;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: cc-catch-pop-in 280ms cubic-bezier(.2, .9, .3, 1.4) both;
}
.cc-catch-mote:focus-visible { outline: 3px solid var(--cc-accent-2, #5cf0d0); outline-offset: 3px; border-radius: 50%; }
.cc-catch-mote svg { position: absolute; inset: 14%; width: 72%; height: 72%; overflow: visible; }
.cc-catch-fill { fill: var(--cc-accent, #6ea8ff); filter: drop-shadow(0 0 6px rgba(110, 168, 255, 0.8)); }
.cc-catch-core { fill: #fff; opacity: 0.92; }
.cc-catch-shine { fill: #fff; opacity: 0.85; }

.cc-catch-glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(110, 168, 255, 0.35) 38%, transparent 70%);
  filter: blur(2px);
}
/* the "perfect window" ring -- a single fade over windowMs (set inline). Not a loop. */
.cc-catch-ring {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
  animation-name: cc-catch-ring;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  pointer-events: none;
}

.cc-catch-mote-star  .cc-catch-fill { fill: var(--cc-accent-2, #5cf0d0); filter: drop-shadow(0 0 6px rgba(92, 240, 208, 0.85)); }
.cc-catch-mote-crystal .cc-catch-fill { fill: #b58bff; filter: drop-shadow(0 0 6px rgba(181, 139, 255, 0.85)); }
.cc-catch-mote-spark .cc-catch-fill { fill: #ff9ad8; filter: drop-shadow(0 0 6px rgba(255, 154, 216, 0.85)); }

.cc-catch-mote-gold .cc-catch-fill {
  fill: var(--cc-gold, #ffd166);
  filter: drop-shadow(0 0 10px rgba(255, 209, 102, 0.95));
}
.cc-catch-mote-gold .cc-catch-glow {
  background: radial-gradient(circle, rgba(255, 245, 200, 0.85), rgba(255, 209, 102, 0.45) 40%, transparent 72%);
}
.cc-catch-mote-gold { animation: cc-catch-pop-in 280ms cubic-bezier(.2, .9, .3, 1.4) both, cc-catch-gold-bob 1.6s ease-in-out 280ms infinite; }

.cc-catch-mote.is-caught { animation: cc-catch-caught 320ms ease-out forwards; pointer-events: none; }

/* ---------- catch feedback: dust pip + particles ---------- */
.cc-catch-pip {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: cc-catch-pip 880ms cubic-bezier(.2, .7, .2, 1) forwards;
}
.cc-catch-pip.is-perfect { color: var(--cc-accent-2, #5cf0d0); font-size: 1.12rem; }
.cc-catch-pip.is-gold { color: var(--cc-gold, #ffd166); font-size: 1.3rem; }

.cc-catch-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--cc-accent-2, #5cf0d0);
  box-shadow: 0 0 8px currentColor;
  color: var(--cc-accent-2, #5cf0d0);
  pointer-events: none;
  animation: cc-catch-particle 740ms ease-out forwards;
}
.cc-catch-particle.is-gold { background: var(--cc-gold, #ffd166); color: var(--cc-gold, #ffd166); }

/* ---------- floating text (combo labels, oops) ---------- */
.cc-catch-floater {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  animation: cc-catch-float 1080ms ease-out forwards;
}
.cc-catch-flare { font-size: 1.5rem; color: var(--cc-gold, #ffd166); }
.cc-catch-oops { font-size: 1.2rem; color: var(--cc-accent, #6ea8ff); }

.cc-catch-ripple {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  pointer-events: none;
  animation: cc-catch-ripple 500ms ease-out forwards;
}

/* ---------- round-end card ---------- */
.cc-catch-end {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(6, 12, 28, 0.55);
  backdrop-filter: blur(4px);
  z-index: 5;
  border-radius: var(--cc-radius, 18px);
}
.cc-catch-end[hidden] { display: none; }
.cc-catch-card {
  width: min(360px, 92%);
  text-align: center;
  padding: 24px 22px 22px;
  border-radius: var(--cc-radius, 18px);
  background: var(--cc-surface, rgba(16, 26, 54, 0.96));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: cc-catch-card-in 360ms cubic-bezier(.2, .9, .3, 1.2) both;
}
.cc-catch-card:focus { outline: none; }
.cc-catch-card-title { margin: 0 0 12px; font-size: 1.4rem; }
.cc-catch-card-stat { display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
.cc-catch-card-big {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  color: var(--cc-gold, #ffd166);
  text-shadow: 0 0 18px rgba(255, 209, 102, 0.5);
}
.cc-catch-card-sub { font-size: 0.85rem; opacity: 0.8; letter-spacing: 0.04em; text-transform: uppercase; }
.cc-catch-card-best { font-size: 1rem; opacity: 0.9; margin-bottom: 18px; }
.cc-catch-again {
  min-height: 48px;
  min-width: 160px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  color: #05122a;
  background: linear-gradient(135deg, var(--cc-accent-2, #5cf0d0), var(--cc-accent, #6ea8ff));
  box-shadow: 0 8px 22px rgba(92, 240, 208, 0.35);
  touch-action: manipulation;
}
.cc-catch-again:hover { filter: brightness(1.06); }
.cc-catch-again:active { transform: translateY(1px); }
.cc-catch-again:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- keyframes ---------- */
@keyframes cc-catch-pop-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; } }
@keyframes cc-catch-gold-bob { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
@keyframes cc-catch-ring { from { opacity: 0.95; transform: scale(0.7); } to { opacity: 0; transform: scale(1.55); } }
@keyframes cc-catch-caught { to { opacity: 0; transform: scale(1.7); } }
@keyframes cc-catch-pip { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%) scale(1.1); } }
@keyframes cc-catch-particle { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.3); } }
@keyframes cc-catch-float { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.7); } 20% { opacity: 1; transform: translate(-50%, -55%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -120%) scale(1); } }
@keyframes cc-catch-ripple { from { opacity: 0.7; transform: scale(0.4); } to { opacity: 0; transform: scale(2.4); } }
@keyframes cc-catch-card-in { from { opacity: 0; transform: scale(0.85) translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- reduced motion: soft fades only, no drift sway/particles/bob ---------- */
.cc-catch-reduced .cc-catch-mote,
.cc-catch-reduced .cc-catch-mote-gold { animation: cc-catch-fade-in 220ms ease both; }
.cc-catch-reduced .cc-catch-ring { animation: cc-catch-fade-out 1ms linear forwards; opacity: 0; }
.cc-catch-reduced .cc-catch-pip { animation: cc-catch-fade-in 200ms ease, cc-catch-fade-out 300ms ease 300ms forwards; }
.cc-catch-reduced .cc-catch-floater { animation: cc-catch-fade-in 200ms ease, cc-catch-fade-out 300ms ease 360ms forwards; }
.cc-catch-reduced .cc-catch-card { animation: cc-catch-fade-in 200ms ease both; }
.cc-catch-reduced .cc-catch-meter-fill,
.cc-catch-reduced .cc-catch-timer-fill { transition: none; }

@keyframes cc-catch-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-catch-fade-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cc-catch-mote, .cc-catch-mote-gold { animation: cc-catch-fade-in 220ms ease both; }
  .cc-catch-ring { animation: none; opacity: 0; }
  .cc-catch-particle { display: none; }
  .cc-catch-pip { animation: cc-catch-fade-in 200ms ease, cc-catch-fade-out 300ms ease 360ms forwards; }
  .cc-catch-floater { animation: cc-catch-fade-in 200ms ease, cc-catch-fade-out 300ms ease 420ms forwards; }
  .cc-catch-card { animation: cc-catch-fade-in 200ms ease both; }
  .cc-catch-meter-fill, .cc-catch-timer-fill { transition: none; }
}

/* landscape: keep the field generous, bar compact */
@media (orientation: landscape) and (max-height: 540px) {
  .cc-catch { gap: 6px; padding: 6px 8px; }
  .cc-catch-meter { height: 26px; }
  .cc-catch-field { min-height: 180px; }
}

/* ===== hatch.css ===== */
/* hatch shard CSS -- owns .cc-hatch-*, .cc-supernova-*
   Uses --cc-* design tokens from 00-base.css with safe fallbacks so it renders even
   before the shell shard's exact token names are known. Reduced-motion safe: all
   transforms/keyframes collapse to soft fades in the prefers-reduced-motion block. */

/* ---------------- egg stage ---------------- */
.cc-hatch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 22px);
  min-height: 60vh;
  padding: 18px;
  text-align: center;
  color: var(--cc-ink, #eaf6ff);
}

.cc-hatch-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.cc-hatch-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(180px, 56vw, 320px);
  height: clamp(180px, 56vw, 320px);
  transform: translate(-50%, -55%) scale(calc(0.7 + var(--cc-charge, 0) * 0.6));
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--cc-glow-a, #7fe3d4) 0%,
    var(--cc-glow-b, #6d4ad0) 42%,
    transparent 70%);
  opacity: calc(0.18 + var(--cc-charge, 0) * 0.55);
  filter: blur(8px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1);
  pointer-events: none;
  z-index: 0;
}

.cc-hatch-egg {
  position: relative;
  z-index: 1;
  width: clamp(132px, 42vw, 200px);
  height: clamp(160px, 52vw, 244px);
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .35));
  transition: transform .25s cubic-bezier(.3, 1.5, .5, 1);
  animation: cc-hatch-bob 3.4s ease-in-out infinite;
}
.cc-hatch-egg:focus-visible {
  outline: 3px solid var(--cc-focus, #ffd76a);
  outline-offset: 4px;
  border-radius: 24px;
}
.cc-hatch-egg .cc-hatch-crack {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset .4s ease;
}
.cc-hatch-egg[data-stage="1"] .cc-hatch-crack { stroke-dashoffset: 150; }
.cc-hatch-egg[data-stage="2"] .cc-hatch-crack { stroke-dashoffset: 70; }
.cc-hatch-egg[data-stage="3"] .cc-hatch-crack { stroke-dashoffset: 0; }

.cc-hatch-shake { animation: cc-hatch-shake .42s cubic-bezier(.36, .07, .19, .97); }
.cc-hatch-burst { animation: cc-hatch-pop-out .42s ease forwards; }

.cc-hatch-hint {
  margin: 0;
  font-size: clamp(1rem, 4.4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: .01em;
  min-height: 1.4em;
  color: var(--cc-ink-soft, #bcd6ea);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

/* ---------------- reveal card ---------------- */
.cc-hatch-reveal {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.6vw, 18px);
}
.cc-hatch-reveal[hidden] { display: none; }

.cc-hatch-creature {
  width: clamp(180px, 56vw, 260px);
  height: clamp(180px, 56vw, 260px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-hatch-pop .cc-hatch-creature { animation: cc-hatch-spring .6s cubic-bezier(.3, 1.6, .4, 1); }
.cc-hatch-shimmer .cc-hatch-creature::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .65) 50%, transparent 65%);
  background-size: 280% 100%;
  animation: cc-hatch-sweep 1.1s ease forwards;
  border-radius: 24px;
}

.cc-hatch-rarity {
  margin: 0;
  font-size: clamp(1.2rem, 5.6vw, 2rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cc-hatch-rarity-common { color: #9fe9dc; }
.cc-hatch-rarity-rare { color: #7fb6ff; }
.cc-hatch-rarity-epic {
  background: linear-gradient(90deg, #c79bff, #ff9be6, #c79bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cc-hatch-rarity-legendary,
.cc-hatch-rarity-secret {
  background: linear-gradient(90deg, #ffd76a, #fff7d6, #ff9d4d, #ffd76a);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cc-hatch-rarity-shine 2.4s linear infinite;
  text-shadow: 0 0 18px rgba(255, 215, 106, .35);
}
.cc-hatch-rarity-secret {
  background: linear-gradient(90deg, #b69bff, #7fe3d4, #ffd76a, #ff9bd1, #b69bff);
  background-size: 300% 100%;
}

.cc-hatch-continue {
  min-height: 48px;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  font-size: clamp(1rem, 4vw, 1.15rem);
  font-weight: 800;
  color: #0c1626;
  background: linear-gradient(180deg, var(--cc-accent, #ffd76a), var(--cc-accent-2, #ffb24d));
  box-shadow: 0 8px 20px rgba(255, 178, 77, .35);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cc-hatch-continue:hover { transform: translateY(-2px); }
.cc-hatch-continue:active { transform: translateY(1px); }
.cc-hatch-continue:focus-visible {
  outline: 3px solid var(--cc-focus, #fff);
  outline-offset: 3px;
}

/* ---------------- supernova (signature) ---------------- */
.cc-supernova-dim {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(6, 10, 22, .25), rgba(4, 6, 16, .92));
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 40;
}
.cc-supernova-dim-on { opacity: 1; }

.cc-supernova {
  position: fixed;
  top: 45%;
  left: 50%;
  width: min(86vw, 560px);
  height: min(86vw, 560px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 41;
}
.cc-supernova-svg { transform: scale(0); opacity: 0; }
.cc-supernova-pin .cc-supernova-svg {
  transform: scale(0.06);
  opacity: 1;
  transition: transform .5s ease, opacity .4s ease;
}
.cc-supernova-bloom .cc-supernova-svg {
  transform: scale(var(--cc-sn-scale, 1));
  opacity: 1;
  transition: transform 1.1s cubic-bezier(.18, .9, .3, 1);
}
.cc-supernova-petal {
  transform-origin: 0 0;
  transform: rotate(var(--a)) scaleY(0.04);
  transition: transform .9s cubic-bezier(.2, .9, .3, 1);
}
.cc-supernova-bloom .cc-supernova-petal { transform: rotate(var(--a)) scaleY(1); }
.cc-supernova-core { animation: cc-supernova-pulse 1.4s ease-in-out infinite; }
.cc-supernova-ring {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.cc-supernova-bloom .cc-supernova-ring { animation: cc-supernova-ring 1.1s ease-out forwards; }

.cc-supernova-fade { opacity: 0 !important; transition: opacity .6s ease; }

/* reduced-motion signature: a calm fade, no scaling/flashing */
.cc-supernova-soft {
  position: fixed;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
  z-index: 40;
  background: radial-gradient(circle at 50% 45%, rgba(255, 215, 106, .42), rgba(8, 12, 24, .55) 60%, rgba(6, 9, 18, .7));
}
.cc-supernova-soft-secret {
  background: radial-gradient(circle at 50% 45%, rgba(182, 155, 255, .42), rgba(127, 227, 212, .22) 45%, rgba(6, 9, 18, .7));
}
.cc-supernova-soft-on { opacity: 1; }

/* ---------------- particles ---------------- */
.cc-supernova-particles {
  position: fixed;
  top: 45%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 42;
}
.cc-supernova-particle {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  opacity: 1;
  box-shadow: 0 0 8px currentColor;
  animation: cc-supernova-particle .95s cubic-bezier(.15, .7, .3, 1) forwards;
}

/* ---------------- keyframes ---------------- */
@keyframes cc-hatch-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes cc-hatch-shake {
  10%, 90% { transform: translateX(-2px) rotate(-2deg); }
  20%, 80% { transform: translateX(4px) rotate(2deg); }
  30%, 50%, 70% { transform: translateX(-7px) rotate(-3deg); }
  40%, 60% { transform: translateX(7px) rotate(3deg); }
}
@keyframes cc-hatch-pop-out {
  0% { transform: scale(1); opacity: 1; }
  35% { transform: scale(1.18); }
  100% { transform: scale(.2); opacity: 0; }
}
@keyframes cc-hatch-spring {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes cc-hatch-sweep { from { background-position: 180% 0; } to { background-position: -120% 0; } }
@keyframes cc-hatch-rarity-shine { from { background-position: 0 0; } to { background-position: 240% 0; } }
@keyframes cc-supernova-pulse { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }
@keyframes cc-supernova-ring {
  0% { opacity: .9; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(4); }
}
@keyframes cc-supernova-particle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(var(--ps, .3)); opacity: 0; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .cc-hatch-egg { animation: none; }
  .cc-hatch-shake,
  .cc-hatch-burst,
  .cc-hatch-pop .cc-hatch-creature { animation: none; }
  .cc-hatch-shimmer .cc-hatch-creature::after,
  .cc-hatch-rarity-legendary,
  .cc-hatch-rarity-secret { animation: none; }
  .cc-supernova-core { animation: none; }
  .cc-supernova-particle { animation: none; display: none; }
  .cc-hatch-glow { transition: opacity .4s ease; transform: translate(-50%, -55%); }
  .cc-supernova-svg,
  .cc-supernova-pin .cc-supernova-svg,
  .cc-supernova-bloom .cc-supernova-svg { transition: opacity .6s ease; transform: translate(0, 0) scale(1); }
  .cc-supernova-petal,
  .cc-supernova-bloom .cc-supernova-petal { transition: none; transform: rotate(var(--a)) scaleY(1); }
}

/* ===== cove.css ===== */
/* cove.css -- Critter Cove COLLECT half: the grid, the Collection Book, the biomes.
   Namespaces: .cc-cove-* .cc-book-* .cc-biome-*. Uses --cc-* tokens (from 00-base.css)
   with fallbacks. The .cc-aura-* glow classes are OWNED by creature-engine -- we only
   apply them, never define them. Reduced-motion safe; all touch targets >=44px. */

.cc-cove {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding: 12px;
  gap: 12px;
  color: var(--cc-ink, #eaf6ff);
  font-family: var(--cc-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  border-radius: var(--cc-radius, 18px);
  transition: background 500ms ease;
}

/* ---- decorate themes (the dreamy backdrops) ---- */
.cc-cove-theme-dusk   { background: radial-gradient(130% 90% at 50% 0%, #1b2350, #0a0f24 70%); }
.cc-cove-theme-meadow { background: radial-gradient(130% 90% at 50% 0%, #1d3a2a, #0c1f17 70%); }
.cc-cove-theme-reef   { background: radial-gradient(130% 90% at 50% 0%, #0f3a52, #061b28 70%); }
.cc-cove-theme-galaxy { background: radial-gradient(130% 90% at 50% 0%, #2a1747, #0b0618 70%); }
.cc-cove-theme-aurora { background: linear-gradient(160deg, #0b1f3a, #143a4d 45%, #2b1b46 100%); }

/* ---- toolbar ---- */
/* Phone-portrait robustness (D3): the toolbar AND its inner tool cluster both
   wrap, and every flex child carries min-width:0, so NOTHING (notably the Book
   button) can ever push past the right edge / spawn a horizontal scrollbar on a
   390px viewport. On wide screens these rules are inert -- premium look intact. */
.cc-cove-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.cc-cove-toolbar > * { min-width: 0; }
.cc-cove-count { font-size: 1rem; opacity: 0.92; min-width: 0; }
.cc-cove-count b { font-size: 1.25rem; color: var(--cc-accent-2, #5cf0d0); }
.cc-cove-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; max-width: 100%; }
.cc-cove-btn {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--cc-ink, #eaf6ff);
  background: var(--cc-surface-2, rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  touch-action: manipulation;
}
.cc-cove-btn:hover { background: rgba(255, 255, 255, 0.16); }
.cc-cove-btn:focus-visible { outline: 3px solid var(--cc-accent-2, #5cf0d0); outline-offset: 2px; }
.cc-cove-btn.is-on { background: linear-gradient(135deg, var(--cc-accent-2, #5cf0d0), var(--cc-accent, #6ea8ff)); color: #06122a; }

/* ---- sort control (Cove toolbar + Collection Book head) ---- */
.cc-cove-sort-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cc-cove-sort-lbl { font-size: 0.8rem; opacity: 0.82; }
.cc-cove-sort, .cc-book-sort {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  max-width: 100%;
  color: var(--cc-ink, #eaf6ff);
  background: var(--cc-surface-2, rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  cursor: pointer;
  touch-action: manipulation;
}
.cc-cove-sort:focus-visible, .cc-book-sort:focus-visible { outline: 3px solid var(--cc-accent-2, #5cf0d0); outline-offset: 2px; }
.cc-cove-sort option, .cc-book-sort option { color: #06122a; }
.cc-book-head .cc-cove-sort-wrap { margin-left: auto; margin-right: 8px; }

/* ---- decorate tray ---- */
.cc-cove-decotray {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 14px;
  background: var(--cc-surface, rgba(10, 16, 36, 0.6));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.cc-cove-decotray[hidden] { display: none; }
.cc-cove-swatch {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  touch-action: manipulation;
}
.cc-cove-swatch.is-active { border-color: #fff; box-shadow: 0 0 0 2px var(--cc-accent-2, #5cf0d0); }
.cc-cove-swatch:focus-visible { outline: 3px solid var(--cc-accent-2, #5cf0d0); outline-offset: 2px; }
.cc-cove-swatch.cc-cove-theme-dusk   { background: linear-gradient(135deg, #1b2350, #0a0f24); }
.cc-cove-swatch.cc-cove-theme-meadow { background: linear-gradient(135deg, #1d3a2a, #0c1f17); }
.cc-cove-swatch.cc-cove-theme-reef   { background: linear-gradient(135deg, #0f3a52, #061b28); }
.cc-cove-swatch.cc-cove-theme-galaxy { background: linear-gradient(135deg, #2a1747, #0b0618); }
.cc-cove-swatch.cc-cove-theme-aurora { background: linear-gradient(135deg, #143a4d, #2b1b46); }

/* ---- biome sections ---- */
.cc-cove-biomes { display: flex; flex-direction: column; gap: 14px; }
.cc-biome {
  position: relative;
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.cc-biome-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  min-width: 0;
}
.cc-biome-title {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-biome-tally {
  margin-left: auto;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--cc-surface-2, rgba(255, 255, 255, 0.1));
}

.cc-biome.is-locked { background: rgba(4, 8, 20, 0.7); }
.cc-biome.is-locked .cc-biome-title { opacity: 0.55; }
.cc-biome-locked-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 14px;
  text-align: center;
}
.cc-biome-lock { width: 40px; height: 40px; color: rgba(255, 255, 255, 0.45); }
.cc-biome-lock svg { width: 100%; height: 100%; }
.cc-biome-hint { margin: 0; font-size: 0.92rem; opacity: 0.7; max-width: 32ch; }

/* locked-biome progress hint -- "Collect 12 Meadow critters to unlock Reef -- 7/12" */
.cc-biome-progress { width: min(280px, 90%); margin-top: 4px; }
.cc-biome-progress-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.cc-biome-progress-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cc-accent-2, #5cf0d0), var(--cc-gold, #ffd166));
  transition: width 500ms cubic-bezier(.2, .9, .3, 1.1);
}
.cc-biome-progress-num { display: block; margin-top: 5px; font-size: 0.82rem; font-weight: 800; opacity: 0.92; }
@media (prefers-reduced-motion: reduce) { .cc-biome-progress-bar i { transition: none; } }

/* biome unlock animation */
.cc-biome-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: cc-biome-sweep 900ms ease-out forwards;
}
.cc-biome-sweep.is-soft { animation: cc-biome-soft 350ms ease forwards; background: rgba(255, 255, 255, 0.25); transform: none; }
.cc-biome.is-unlocking { background: rgba(92, 240, 208, 0.12); box-shadow: inset 0 0 0 1px rgba(92, 240, 208, 0.4); }
.cc-biome.is-unlocked { background: rgba(92, 240, 208, 0.06); }
.cc-biome-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.cc-biome-reveal-text {
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--cc-accent-2, #5cf0d0);
  text-shadow: 0 0 18px rgba(92, 240, 208, 0.7);
  animation: cc-biome-reveal 2200ms ease forwards;
}

/* ---- creature grid ---- */
.cc-cove-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.cc-cove-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 26px 10px;
  margin: 0;
  font-size: 1rem;
  opacity: 0.8;
}
.cc-cove-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 8px;
  min-height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.cc-cove-tile:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 22px rgba(0, 0, 0, 0.35); }
.cc-cove-tile:focus-visible { outline: 3px solid var(--cc-accent-2, #5cf0d0); outline-offset: 2px; }
.cc-cove-art { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.cc-cove-art svg { max-width: 100%; max-height: 100%; }
.cc-cove-meta { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; }
.cc-cove-name {
  font-weight: 700;
  font-size: 0.9rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-cove-name i { opacity: 0.5; font-weight: 500; }
.cc-cove-rarity {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}
.cc-cove-pct { margin-left: 5px; opacity: 0.85; }
.cc-cove-rarity-common    { color: #cfe6ff; }
.cc-cove-rarity-rare      { color: #6ec1ff; }
.cc-cove-rarity-epic      { color: #b58bff; }
.cc-cove-rarity-legendary { color: #ffd166; }
.cc-cove-rarity-secret    { color: #ff8bd6; }

/* ---- arrange mode ---- */
.cc-cove.is-arranging .cc-cove-tile { cursor: grab; box-shadow: inset 0 0 0 2px rgba(92, 240, 208, 0.5); }
.cc-cove.is-arranging .cc-cove-tile::after {
  content: "";
  position: absolute;
  top: 6px; right: 6px;
  width: 16px; height: 16px;
  opacity: 0.7;
  background:
    radial-gradient(circle 2px at 4px 4px, currentColor 99%, transparent),
    radial-gradient(circle 2px at 12px 4px, currentColor 99%, transparent),
    radial-gradient(circle 2px at 4px 12px, currentColor 99%, transparent),
    radial-gradient(circle 2px at 12px 12px, currentColor 99%, transparent);
}
.cc-cove-tile.is-dragging {
  position: fixed;
  z-index: 50;
  margin: 0;
  cursor: grabbing;
  pointer-events: none;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transform: scale(1.06);
}
.cc-cove-placeholder {
  border-radius: 14px;
  border: 2px dashed rgba(92, 240, 208, 0.6);
  background: rgba(92, 240, 208, 0.08);
}

/* ---- detail / naming overlay ---- */
.cc-cove-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 9, 22, 0.6);
  backdrop-filter: blur(4px);
  z-index: 20;
}
.cc-cove-detail {
  position: relative;
  width: min(340px, 94%);
  padding: 22px 20px;
  text-align: center;
  border-radius: var(--cc-radius, 18px);
  background: var(--cc-surface, rgba(16, 26, 54, 0.97));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: cc-cove-in 320ms cubic-bezier(.2, .9, .3, 1.2) both;
}
.cc-cove-detail:focus { outline: none; }
.cc-cove-x {
  position: absolute;
  top: 8px; right: 8px;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  color: var(--cc-ink, #eaf6ff);
  background: rgba(255, 255, 255, 0.1);
  touch-action: manipulation;
}
.cc-cove-x:hover { background: rgba(255, 255, 255, 0.2); }
.cc-cove-x:focus-visible { outline: 3px solid var(--cc-accent-2, #5cf0d0); outline-offset: 2px; }
.cc-cove-detail-art { width: 180px; height: 180px; margin: 6px auto 4px; display: flex; align-items: center; justify-content: center; }
.cc-cove-detail-art svg { max-width: 100%; max-height: 100%; }
.cc-cove-detail-name { margin: 6px 0 4px; font-size: 1.3rem; }
.cc-cove-detail-rarity {
  display: inline-block;
  margin: 0 0 12px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cc-cove-nameform { margin-top: 8px; }
.cc-cove-namelabel { display: block; font-size: 0.85rem; opacity: 0.85; margin-bottom: 6px; }
.cc-cove-namerow { display: flex; gap: 8px; }
.cc-cove-nameinput {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  font-size: 1rem;
  color: #06122a;
  background: #eaf6ff;
}
.cc-cove-nameinput:focus-visible { outline: 3px solid var(--cc-accent-2, #5cf0d0); outline-offset: 2px; }
.cc-cove-namesave {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  color: #06122a;
  background: linear-gradient(135deg, var(--cc-accent-2, #5cf0d0), var(--cc-accent, #6ea8ff));
  touch-action: manipulation;
}
.cc-cove-namesave:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ============ Collection Book ============ */
.cc-book-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(4, 8, 20, 0.7);
  backdrop-filter: blur(6px);
  z-index: 60;
  animation: cc-book-fade 220ms ease both;
}
.cc-book {
  display: flex;
  flex-direction: column;
  width: min(640px, 96%);
  max-height: 92vh;
  padding: 18px;
  border-radius: var(--cc-radius, 18px);
  background: var(--cc-surface, rgba(14, 22, 48, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: cc-cove-in 320ms cubic-bezier(.2, .9, .3, 1.2) both;
}
.cc-book:focus { outline: none; }
.cc-book-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cc-book-title { margin: 0; font-size: 1.4rem; min-width: 0; }
.cc-book-x {
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  color: var(--cc-ink, #eaf6ff);
  background: rgba(255, 255, 255, 0.1);
  touch-action: manipulation;
}
.cc-book-x:hover { background: rgba(255, 255, 255, 0.2); }
.cc-book-x:focus-visible { outline: 3px solid var(--cc-accent-2, #5cf0d0); outline-offset: 2px; }
.cc-book-progress { margin-bottom: 14px; }
.cc-book-progress-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.cc-book-progress-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cc-accent-2, #5cf0d0), var(--cc-gold, #ffd166));
  transition: width 600ms cubic-bezier(.2, .9, .3, 1.1);
}
.cc-book-progress-num { margin-top: 6px; font-size: 0.9rem; font-weight: 700; opacity: 0.9; }
.cc-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  overflow-y: auto;
  padding: 4px;
}
.cc-book-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  min-height: 44px;
}
.cc-book-art { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.cc-book-art svg { max-width: 100%; max-height: 100%; }
.cc-book-celllabel {
  font-size: 0.72rem;
  text-transform: capitalize;
  opacity: 0.9;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-book-pct { margin-left: 4px; opacity: 0.75; }
.cc-book-cell.is-missing { opacity: 0.85; }
.cc-book-silhouette {
  position: relative;
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.cc-book-silhouette svg { width: 80%; height: 80%; fill: rgba(255, 255, 255, 0.12); }
.cc-book-q {
  position: absolute;
  font-size: 1.6rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.4);
}

/* ---- keyframes ---- */
@keyframes cc-cove-in { from { opacity: 0; transform: scale(0.88) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cc-book-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-biome-sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes cc-biome-soft { from { opacity: 0; } 40% { opacity: 1; } to { opacity: 0; } }
@keyframes cc-biome-reveal {
  0% { opacity: 0; transform: scale(0.7); }
  20% { opacity: 1; transform: scale(1.05); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* ---- reduced motion ---- */
.cc-cove-reduced .cc-cove-tile,
.cc-cove-reduced .cc-cove-detail,
.cc-book-reduced .cc-book { animation: cc-book-fade 200ms ease both; transition: none; }
.cc-cove-reduced .cc-book-progress-bar i { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .cc-cove, .cc-cove-tile, .cc-cove-detail, .cc-book, .cc-book-progress-bar i { transition: none; }
  .cc-cove-tile:hover { transform: none; }
  .cc-cove-detail, .cc-book { animation: cc-book-fade 200ms ease both; }
  .cc-biome-sweep { animation: cc-biome-soft 350ms ease forwards; background: rgba(255, 255, 255, 0.25); transform: none; }
  .cc-biome-reveal-text { animation: cc-book-fade 300ms ease both, cc-book-fade 300ms ease 1600ms reverse forwards; }
}

/* ---- landscape compaction ---- */
@media (orientation: landscape) and (max-height: 540px) {
  .cc-cove { padding: 8px; gap: 8px; }
  .cc-cove-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* ===== surprises.css ===== */
/* surprises shard CSS -- owns .cc-fx-*, .cc-golden-*, .cc-meteor-*, .cc-trace-*
   Overlays live inside #cc-fx-layer. Uses --cc-* tokens from 00-base.css with fallbacks.
   Reduced-motion safe: meteor/eclipse degrade to a calm colour fade (no streaks, no flash);
   golden egg uses a gentle opacity pulse; trace trail/teaser still appear, just without bounce. */

/* the overlay layer is pass-through; only the surprise widgets capture taps */
.cc-fx-layer,
#cc-fx-layer { pointer-events: none; }
.cc-golden { pointer-events: auto; }

/* ============================ GOLDEN EGG ============================ */
.cc-golden {
  position: fixed;
  right: clamp(12px, 5vw, 40px);
  bottom: clamp(76px, 16vh, 150px);
  width: clamp(64px, 16vw, 92px);
  height: clamp(80px, 20vw, 116px);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 45;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 215, 106, .7));
  animation: cc-golden-float 2.6s ease-in-out infinite;
}
.cc-golden:focus-visible { outline: 3px solid var(--cc-focus, #fff); outline-offset: 4px; border-radius: 20px; }
.cc-golden-shell { display: block; width: 100%; height: 100%; }
.cc-golden-teaser {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 56%;
  height: 56%;
  transform: translate(-50%, -50%);
  opacity: .35;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: cc-golden-teaser-glow 2.2s ease-in-out infinite;
}
.cc-golden-spark {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 247, 214, .5), transparent 62%);
  animation: cc-golden-spark 1.8s ease-in-out infinite;
}
.cc-golden-pop { animation: cc-golden-pop .26s ease forwards; }

@keyframes cc-golden-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes cc-golden-teaser-glow { 0%, 100% { opacity: .22; } 50% { opacity: .5; } }
@keyframes cc-golden-spark { 0%, 100% { transform: scale(.85); opacity: .5; } 50% { transform: scale(1.12); opacity: .9; } }
@keyframes cc-golden-pop { 0% { transform: scale(1); } 45% { transform: scale(1.25); } 100% { transform: scale(0); opacity: 0; } }

/* ============================ METEOR / ECLIPSE ============================ */
.cc-meteor-sky {
  position: fixed;
  inset: 0;
  z-index: 38;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(36, 12, 64, .0), rgba(20, 8, 44, .55) 60%, rgba(8, 4, 22, .8)),
    linear-gradient(180deg, rgba(94, 42, 132, .35), rgba(20, 30, 90, .35));
}
.cc-meteor-on { opacity: 1; }
.cc-meteor-off { opacity: 0; }

.cc-meteor-banner {
  position: absolute;
  top: clamp(10px, 4vh, 28px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(.85rem, 3.6vw, 1.05rem);
  color: #fff4d6;
  background: rgba(40, 18, 70, .7);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 215, 106, .4);
  white-space: nowrap;
}

.cc-meteor-streaks { position: absolute; inset: 0; overflow: hidden; }
.cc-meteor-streak {
  position: absolute;
  top: -12vh;
  left: var(--cc-mx, 50vw);
  width: 2px;
  height: 16vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 247, 214, .95));
  border-radius: 2px;
  filter: drop-shadow(0 0 6px rgba(255, 247, 214, .8));
  transform: rotate(18deg);
  animation-name: cc-meteor-fall;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
@keyframes cc-meteor-fall {
  0% { transform: translate(0, -10vh) rotate(18deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-22vw, 120vh) rotate(18deg); opacity: 0; }
}

/* ============================ TRACE (secret shapes) ============================ */
.cc-trace-trail {
  position: fixed;
  inset: 0;
  z-index: 46;
  pointer-events: none;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cc-trace-line {
  stroke: var(--cc-accent, #ffd76a);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(255, 215, 106, .9));
  opacity: .92;
}
.cc-trace-fade { opacity: 0 !important; transition: opacity .55s ease; }

.cc-trace-reveal {
  position: fixed;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.4);
  z-index: 47;
  pointer-events: none;
  opacity: 0;
  transition: transform .5s cubic-bezier(.2, 1.3, .4, 1), opacity .4s ease;
}
.cc-trace-reveal-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cc-trace-creature {
  display: block;
  width: clamp(120px, 38vw, 180px);
  height: clamp(120px, 38vw, 180px);
  filter: drop-shadow(0 0 18px rgba(182, 155, 255, .85));
}
.cc-trace-burst {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 247, 214, .9), rgba(182, 155, 255, .35) 45%, transparent 68%);
  animation: cc-trace-burst .7s ease-out forwards;
}
@keyframes cc-trace-burst {
  0% { transform: scale(.2); opacity: .95; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ============================ REDUCED MOTION ============================ */
.cc-golden-rm { animation: none; }
.cc-golden-rm .cc-golden-spark,
.cc-golden-rm .cc-golden-teaser { animation: none; }
.cc-meteor-rm .cc-meteor-streaks { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cc-golden,
  .cc-golden-spark,
  .cc-golden-teaser { animation: none; }
  .cc-golden-pop { animation: none; opacity: 0; }
  .cc-meteor-streaks { display: none; }
  .cc-meteor-sky { transition: opacity 1.2s ease; }
  .cc-trace-reveal { transition: opacity .6s ease; transform: translate(-50%, -50%) scale(1); }
  .cc-trace-reveal-on { transform: translate(-50%, -50%) scale(1); }
  .cc-trace-burst { animation: none; opacity: .5; }
}