/* ============================================================================
 * Catchmemeow — content-site styles (the landing + guide/treasures/worlds/
 * care/about/contact pages). Separate from the game's styles.css.
 * ==========================================================================*/
:root {
  --ink: #241a12; --cream: #fbf7ee; --card: #ffffff; --line: #241a12;
  --orange: #ef8b3a; --rust: #c1502a; --gold: #f4c23b; --sky: #bfe3f5;
  --green: #6cb24a; --muted: #7a6a52;
  /* body-text link color: like --rust but darker so it passes WCAG AA
     (#b04a26 on --cream = 5.10:1; --rust itself only measures 4.42:1).
     Buttons/brand/nav keep their own colors — this is for prose links only. */
  --link: #b04a26;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); background: var(--cream);
  font: 17px/1.6 "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--link); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 18px; }

/* ---- header / nav ---- */
.hd { position: sticky; top: 0; z-index: 20; background: rgba(251,247,238,0.92);
  backdrop-filter: blur(8px); border-bottom: 3px solid var(--ink); }
.hd-in { max-width: 980px; margin: 0 auto; padding: 9px 18px; display: flex;
  align-items: center; gap: 14px; flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 22px; color: var(--ink); text-decoration: none;
  text-shadow: 1.5px 1.5px 0 var(--gold); white-space: nowrap; }
.nav { display: flex; gap: 0 6px; flex-wrap: wrap; margin-left: auto; align-items: center; }
/* 15px × 1.6 line-height (24px) + 2×10px padding = 44px-tall tap targets */
.nav a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 10px 10px; border-radius: 9px; }
.nav a:hover { background: #fff; }
.nav a[aria-current="page"] { background: var(--gold); }

/* ---- buttons ---- */
.btn { display: inline-block; font: inherit; font-weight: 800; cursor: pointer;
  text-decoration: none; color: var(--ink); background: var(--gold);
  border: 3px solid var(--ink); border-radius: 16px; padding: 12px 22px;
  box-shadow: 0 5px 0 rgba(36,26,18,0.28); transition: transform .1s, box-shadow .1s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(36,26,18,0.28); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(36,26,18,0.28); }
.btn-lg { font-size: 21px; padding: 16px 34px; }
.btn-2 { background: #fff; }

/* ---- hero ---- */
.hero { text-align: center; padding: 40px 18px 26px;
  background: linear-gradient(180deg, var(--sky), var(--cream)); border-bottom: 3px solid var(--ink); }
.hero h1 { font-size: clamp(30px, 6vw, 50px); margin: 6px 0 8px; line-height: 1.05;
  text-shadow: 2.5px 2.5px 0 var(--gold); }
.hero p { font-size: clamp(17px, 2.4vw, 21px); max-width: 620px; margin: 0 auto 20px; color: #4a3a28; }

/* ---- sections & cards ---- */
main { padding: 28px 0 10px; }
section { margin: 0 0 34px; }
h2 { font-size: clamp(23px, 3.4vw, 30px); margin: 0 0 12px; }
h3 { font-size: 20px; margin: 22px 0 6px; }
.lead { font-size: 19px; color: #4a3a28; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card { background: var(--card); border: 3px solid var(--ink); border-radius: 18px;
  padding: 16px 18px; box-shadow: 0 6px 0 rgba(36,26,18,0.12); }
.card h3 { margin-top: 0; }
/* a world card you can tap to jump straight into that world */
.cmm-world-card { display: block; text-decoration: none; color: inherit; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease; }
.cmm-world-card:hover { transform: translateY(-3px); box-shadow: 0 9px 0 rgba(36,26,18,0.14); }
.cmm-world-card:focus-visible { outline: 3px solid #5aa9e6; outline-offset: 3px; }
.cmm-world-card .play-this { display: inline-block; margin-top: 10px; font-weight: 800; color: #ef5b4c; }
.cmm-world-card:hover .play-this { text-decoration: underline; }
.steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 12px; }
.steps li { counter-increment: s; background: #fff; border: 3px solid var(--ink);
  border-radius: 16px; padding: 14px 16px 14px 56px; position: relative; }
.steps li::before { content: counter(s); position: absolute; left: 12px; top: 12px;
  width: 30px; height: 30px; display: grid; place-items: center; font-weight: 800;
  color: var(--ink); background: var(--gold); border: 3px solid var(--ink); border-radius: 50%; }
.pill { display: inline-block; font-size: 13px; font-weight: 800; padding: 2px 10px;
  border: 2px solid var(--ink); border-radius: 999px; background: #fff; margin: 0 4px 4px 0; }
.note { background: #fff7df; border: 3px solid var(--ink); border-radius: 16px; padding: 14px 18px; }

/* ---- treasures gallery (client-rendered) ---- */
.tgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tcard { background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 10px; text-align: center; }
.tart { height: 120px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #fff7df, #ffe09a); border-radius: 12px; }
.tart svg { width: 100%; height: 100%; }
.tname { font-weight: 800; font-size: 14px; margin-top: 7px; }
.tblurb { font-size: 13px; color: #4a3a28; margin: 4px 0 0; }
.tcard { position: relative; }
.tcard.is-found { outline: 3px solid var(--green); outline-offset: -3px; }
.tcheck { position: absolute; top: 7px; right: 7px; z-index: 1; background: var(--green); color: #fff;
  font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; border: 2px solid var(--ink); }
.tprogress { margin: 0 0 18px; display: grid; gap: 8px; }
.tprog-head { font-size: 21px; font-weight: 800; }
.tset { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.tset > span:first-child { min-width: 132px; }
.tsetbar { flex: 1; height: 10px; background: #efe7d6; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.tsetbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--orange)); }

/* ---- ad slot ---- */
/* Reserve visible space for each ad so the slot is always present (no layout
   shift, and you can SEE where ads go even before AdSense fills them). Ads sit
   ABOVE the roaming critters (z-index 12 > the critter layer's 9) so a critter
   walks UNDER an ad instead of being faded out. */
.ad { margin: 26px auto; max-width: 728px; min-height: 110px; text-align: center; position: relative; z-index: 12; }
.ad-label { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #b6a888; margin-bottom: 4px; }
.ad ins.adsbygoogle { display: block; min-height: 92px; }
/* a faint "reserved" placeholder until a real ad fills the slot (it disappears
   the moment AdSense reports the slot filled; in the local preview, where ads
   never serve, it stays so the spot is visible). */
.ad ins.adsbygoogle:not([data-ad-status="filled"]) {
  background: repeating-linear-gradient(45deg, #f4efe3, #f4efe3 11px, #efe9da 11px, #efe9da 22px);
  border: 1px dashed #d0c3a4; border-radius: 10px;
}

/* ---- contact form ---- */
form.cf { display: grid; gap: 12px; max-width: 520px; }
form.cf label { font-weight: 700; }
form.cf input, form.cf textarea { font: inherit; width: 100%; padding: 11px 13px;
  border: 3px solid var(--ink); border-radius: 12px; background: #fff; }
.hp { position: absolute; left: -5000px; }

/* ---- footer ---- */
.ft { margin-top: 30px; border-top: 3px solid var(--ink); background: #fff7ef; }
.ft-in { max-width: 980px; margin: 0 auto; padding: 24px 18px; }
.ft-cols { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; }
/* 17px × 1.6 line-height (27px) + 2×9px padding ≈ 45px-tall tap targets */
.ft a { color: var(--ink); font-weight: 700; text-decoration: none; display: block; padding: 9px 0; }
.ft a:hover { color: var(--link); }
.ft-legal { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.pets-photo { display: block; width: 100%; max-width: 460px; border: 4px solid var(--ink);
  border-radius: 20px; margin: 10px 0; box-shadow: 0 8px 0 rgba(36,26,18,0.15); }

/* ---- world-card thumbnails (procedural "postcard" of each world) ---- */
.cmm-world-thumb { display: block; height: 124px; margin: -16px -18px 12px; border-bottom: 3px solid var(--ink);
  border-radius: 15px 15px 0 0; background: #bfe3f5 center 60% / cover no-repeat; opacity: 0; transition: opacity .35s ease; }
.cmm-world-thumb.is-ready { opacity: 1; }
.cmm-world-thumb.is-failed { display: none; }

/* ---- roaming site critters (a few cats/dogs strolling along the bottom) ---- */
.cmm-sc-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 9; }
.cmm-site-critter { position: fixed; left: 0; top: 0; width: 58px; pointer-events: auto; cursor: grab;
  will-change: transform; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 4px 3px rgba(20,16,10,0.22)); }
@media (max-width: 560px) { .cmm-site-critter { width: 46px; } }
.cmm-site-critter.is-held { cursor: grabbing; }
.cmm-site-critter:focus-visible { outline: 3px solid #5aa9e6; outline-offset: 3px; border-radius: 10px; }
.cmm-site-critter svg { width: 100%; height: auto; display: block; pointer-events: none; }
.cmm-sc-flip { transform-origin: 50% 100%; }
.cmm-sc-bob { transform-origin: 50% 100%; }
.cmm-site-critter.is-walking .cmm-sc-bob { animation: cmm-sc-walk .42s ease-in-out infinite; }
.cmm-site-critter.is-idle .cmm-sc-bob { animation: cmm-sc-idle 3.6s ease-in-out infinite; }
@keyframes cmm-sc-walk { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes cmm-sc-idle { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-2px) rotate(1deg); } }

/* ---- "meet this pet" popover (mirrors the in-game Oops card) ---- */
.cmm-sc-pop { position: fixed; z-index: 14; pointer-events: none; }
.cmm-sc-pop-card { pointer-events: auto; width: 190px; background: #fff; border: 4px solid var(--ink);
  border-radius: 18px; padding: 10px 13px 13px; box-shadow: 0 8px 0 rgba(36,26,18,0.24); text-align: center;
  animation: cmm-sc-pop .32s cubic-bezier(.34,1.56,.5,1); }
.cmm-sc-pop-card:focus { outline: none; }
.cmm-sc-pop-card:focus-visible { outline: 3px solid #5aa9e6; outline-offset: 3px; }
.cmm-sc-pop-svg { width: 74px; height: 86px; margin: 0 auto 3px; overflow: hidden; border: 3px solid var(--ink);
  border-radius: 14px; background: radial-gradient(circle at 50% 40%, #fff7df, #ffe6a8); }
.cmm-sc-pop-svg svg { width: 100%; height: 100%; display: block; }
.cmm-sc-pop-name { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 21px; line-height: 1.05;
  color: #ef5b4c; text-shadow: 1.4px 1.4px 0 #ffd34a; }
.cmm-sc-pop-type { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #8a6a44; margin: 2px 0 5px; }
.cmm-sc-pop-story { font-size: 13px; font-weight: 600; line-height: 1.32; color: var(--ink); }
@keyframes cmm-sc-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .cmm-site-critter.is-walking .cmm-sc-bob, .cmm-site-critter.is-idle .cmm-sc-bob { animation: none; }
  .cmm-sc-pop-card, .cmm-world-thumb { animation: none; transition: none; }
}

/* ============================================================
   Site panache: paw trail, fence watchers, edge peekers,
   hero loaf-cat & butterflies (js/site-panache.js)
   ============================================================ */

/* paw prints padding along behind the pointer */
.cmm-paw-layer { position: fixed; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
.cmm-paw-step { position: absolute; width: 15px; height: 15px; color: #c99a4e;
  animation: cmm-paw-fade 1.35s ease-out forwards; }
.cmm-paw-step svg { display: block; width: 100%; height: 100%; }
@keyframes cmm-paw-fade {
  0% { opacity: 0; }
  12% { opacity: 0.55; }
  55% { opacity: 0.45; }
  100% { opacity: 0; }
}

/* the neighbours: heads peeking over the footer fence-line.
   z-index -1 tucks the lower half of each head BEHIND the footer's own
   background, so only ears + eyes peek above the border. */
.ft { position: relative; }
.cmm-fence { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: -1; }
.cmm-fw { position: absolute; bottom: 0; width: 64px; cursor: pointer;
  transform: translateY(var(--fw-peek, 36%));
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-tap-highlight-color: transparent; }
.cmm-fw svg { display: block; width: 100%; height: auto; }
.cmm-fw.is-up { transform: translateY(12%); }
.cmm-fw.is-duck { transform: translateY(96%); }
.cmm-fw-paws { position: absolute; bottom: -5px; width: 30px; pointer-events: none; }
.cmm-fw-paws svg { display: block; width: 100%; height: auto; }
.cmm-fw-bubble { position: absolute; bottom: 58px; transform: translateX(-20%);
  background: #fff; border: 3px solid var(--ink); border-radius: 12px; border-bottom-left-radius: 2px;
  font-weight: 800; font-size: 14px; padding: 3px 10px; white-space: nowrap;
  animation: cmm-fw-bub 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; }
@keyframes cmm-fw-bub { 0% { transform: translateX(-20%) scale(0.5); opacity: 0; } 100% { transform: translateX(-20%) scale(1); opacity: 1; } }

/* a whole critter leaning in from the edge of the screen */
.cmm-peek { position: fixed; z-index: 8; width: 84px; cursor: pointer;
  transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-tap-highlight-color: transparent; }
.cmm-peek svg { width: 100%; height: auto; display: block; pointer-events: none;
  filter: drop-shadow(0 4px 3px rgba(20, 16, 10, 0.22)); }
.cmm-peek.from-left { left: -100px; }
.cmm-peek.from-right { right: -100px; }
.cmm-peek.from-left .cmm-peek-tilt { transform: rotate(14deg); transform-origin: 10% 100%; }
.cmm-peek.from-right .cmm-peek-tilt { transform: rotate(-14deg) scaleX(-1); transform-origin: 90% 100%; }
.cmm-peek.from-left.is-in { transform: translateX(86px); }
.cmm-peek.from-right.is-in { transform: translateX(-86px); }
.cmm-peek-heart { position: fixed; z-index: 15; width: 26px; pointer-events: none;
  transform: translate(-50%, -50%); animation: cmm-peek-heart 0.9s ease-out forwards; }
@keyframes cmm-peek-heart {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  25% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(0.9); }
}

/* blinking eyes for peekers AND the roaming critters (same machinery
   as the game: .cmm-eye groups squeeze shut for a moment) */
.cmm-eye, .cmm-pupil { transform-box: fill-box; transform-origin: center; }
.cmm-blink .cmm-eye, .cmm-site-critter .cmm-eye { animation: cmm-blink 4.2s var(--life-delay, 0s) infinite; }
.cmm-site-critter:nth-child(2) { --life-delay: -1.3s; }
.cmm-site-critter:nth-child(3) { --life-delay: -2.6s; }
.cmm-site-critter:nth-child(4) { --life-delay: -3.4s; }
@keyframes cmm-blink { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } }

/* the hero's sleeping loaf-cat + butterflies (landing page) */
.hero { position: relative; overflow: hidden; }
.cmm-loaf { position: absolute; bottom: -4px; right: 5%; width: 118px; pointer-events: none; }
.cmm-loaf svg { display: block; width: 100%; height: auto; }
@media (max-width: 620px) { .cmm-loaf { width: 86px; right: 2px; } }
.cmm-loaf-tail { transform-box: fill-box; transform-origin: 15% 90%; animation: cmm-loaf-flick 6s ease-in-out infinite; }
@keyframes cmm-loaf-flick { 0%, 78%, 100% { transform: rotate(0deg); } 84% { transform: rotate(-14deg); } 90% { transform: rotate(4deg); } }
.cmm-loaf-zzz text { opacity: 0; animation: cmm-loaf-z 3.6s ease-out infinite; }
.cmm-loaf-zzz .z2 { animation-delay: 0.5s; }
.cmm-loaf-zzz .z3 { animation-delay: 1s; }
@keyframes cmm-loaf-z {
  0% { opacity: 0; transform: translateY(4px); }
  25% { opacity: 0.8; }
  60% { opacity: 0; transform: translateY(-9px); }
  100% { opacity: 0; }
}
.cmm-bfly { position: absolute; width: 40px; pointer-events: none; }
.cmm-bfly svg { display: block; width: 100%; height: auto; }
.cmm-bfly .cmm-bfly-w { transform-box: fill-box; transform-origin: 100% 50%; animation: cmm-bfly-flap 0.34s ease-in-out infinite alternate; }
.cmm-bfly .cmm-bfly-w.wr { transform-origin: 0% 50%; }
@keyframes cmm-bfly-flap { 0% { transform: scaleX(1); } 100% { transform: scaleX(0.62); } }
.cmm-bfly.b1 { left: 9%; top: 24%; animation: cmm-bfly-drift1 13s ease-in-out infinite; }
.cmm-bfly.b2 { right: 12%; top: 16%; width: 30px; animation: cmm-bfly-drift2 17s ease-in-out infinite; }
@keyframes cmm-bfly-drift1 {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  25% { transform: translate(34px, -20px) rotate(7deg); }
  50% { transform: translate(70px, 6px) rotate(-4deg); }
  75% { transform: translate(26px, 20px) rotate(6deg); }
}
@keyframes cmm-bfly-drift2 {
  0%, 100% { transform: translate(0, 0) rotate(5deg); }
  30% { transform: translate(-42px, 16px) rotate(-7deg); }
  60% { transform: translate(-90px, -8px) rotate(4deg); }
  80% { transform: translate(-30px, -18px) rotate(-5deg); }
}

/* a little paw-print flourish under section headings */
main h2::after {
  content: ""; display: block; width: 66px; height: 13px; margin-top: 5px; opacity: 0.5;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 13"%3E%3Cg fill="%23c1502a"%3E%3Cellipse cx="7" cy="8.6" rx="3.4" ry="2.8"/%3E%3Ccircle cx="3.4" cy="5" r="1.5"/%3E%3Ccircle cx="6" cy="3.4" r="1.5"/%3E%3Ccircle cx="8.8" cy="3.4" r="1.5"/%3E%3Ccircle cx="11" cy="5" r="1.5"/%3E%3C/g%3E%3Cg fill="%23c1502a" opacity="0.72" transform="translate(24 1) rotate(8 7 6)"%3E%3Cellipse cx="7" cy="8.6" rx="3.4" ry="2.8"/%3E%3Ccircle cx="3.4" cy="5" r="1.5"/%3E%3Ccircle cx="6" cy="3.4" r="1.5"/%3E%3Ccircle cx="8.8" cy="3.4" r="1.5"/%3E%3Ccircle cx="11" cy="5" r="1.5"/%3E%3C/g%3E%3Cg fill="%23c1502a" opacity="0.45" transform="translate(48 0) rotate(-7 7 6)"%3E%3Cellipse cx="7" cy="8.6" rx="3.4" ry="2.8"/%3E%3Ccircle cx="3.4" cy="5" r="1.5"/%3E%3Ccircle cx="6" cy="3.4" r="1.5"/%3E%3Ccircle cx="8.8" cy="3.4" r="1.5"/%3E%3Ccircle cx="11" cy="5" r="1.5"/%3E%3C/g%3E%3C/svg%3E') no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .cmm-paw-step, .cmm-fw, .cmm-fw-bubble, .cmm-peek, .cmm-peek-heart,
  .cmm-loaf-tail, .cmm-loaf-zzz text, .cmm-bfly, .cmm-bfly .cmm-bfly-w,
  .cmm-blink .cmm-eye, .cmm-site-critter .cmm-eye { animation: none; transition: none; }
}

/* ===== world guide pages (/worlds/*.html) ===== */
.world-postcard { border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; margin: 16px 0 6px; background: #dfeff7; box-shadow: 0 6px 0 rgba(36,26,18,0.12); }
.world-postcard svg { display: block; width: 100%; height: auto; max-height: 420px; }
.byline { font-size: 14px; color: #7a6a52; }
.world-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* ===== coloring pages (/coloring/*.html) ===== */
.coloring-art { background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 8px; margin: 14px 0; box-shadow: 0 6px 0 rgba(36,26,18,0.12); }
.coloring-art svg { display: block; width: 100%; height: auto; max-height: 640px; margin: 0 auto; }
.coloring-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 14px; }
.coloring-grid .ccard { display: block; background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 10px; text-decoration: none; color: var(--ink); font-weight: 800; text-align: center; box-shadow: 0 4px 0 rgba(36,26,18,0.14); transition: transform .1s; }
.coloring-grid .ccard:hover { transform: translateY(-2px); }
.coloring-grid .ccard svg { display: block; width: 100%; height: 190px; }
.find-list { background: #fff7df; border: 3px dashed var(--ink); border-radius: 14px; padding: 12px 16px; font-weight: 700; }
@media print {
  .hd, .ft, .no-print, .btn, nav, .ad { display: none !important; }
  body { background: #fff !important; }
  .wrap { max-width: none; margin: 0; padding: 0; }
  .coloring-art { border: none; box-shadow: none; padding: 0; margin: 0; }
  .coloring-art svg { max-height: none; width: 100%; page-break-inside: avoid; }
}

/* ===== notes / articles ===== */
.note-meta { font-size: 14px; color: #7a6a52; margin-bottom: 18px; }
.note-list .card h3 { margin-bottom: 4px; }