/* =====================================================================
   $SAVECATS — pixel-animated single page site
   ===================================================================== */

:root{
  /* cotton-candy pastel sky */
  --sky-top:#bfe3ff;
  --sky-mid:#e8d6ff;
  --sky-bottom:#ffe3f2;

  --ground:#c3f2cf;
  --ground-dark:#9fddb2;

  --ink:#6b4a63;          /* soft mauve, replaces harsh black for text */
  --cream:#fff8fb;

  --brand:#ff8fc2;        /* pookie bubblegum pink */
  --brand-dark:#e0629e;
  --gold:#ffd98a;         /* soft butter gold accent */

  --buy-green:#b8f5d6;
  --buy-green-dark:#6bd6a3;

  --nav-bg-a:#e9defd;
  --nav-bg-b:#ffd9ee;

  --panel-bg:rgba(255,248,251,0.82);
  --panel-border:#ffb8dd;

  --font-pixel:'Press Start 2P', monospace;
  --font-cartoon:'Baloo 2', system-ui, sans-serif;

  --nav-h:64px;
  --footer-h:auto;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
  font-family:var(--font-cartoon);
  background:var(--sky-bottom);
  color:var(--ink);
  overflow-x:hidden;
}

img,canvas{ image-rendering:pixelated; image-rendering:crisp-edges; }

button{ font-family:inherit; cursor:pointer; }

/* ===================== LAYOUT SHELL ===================== */

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ===================== NAVBAR ===================== */

.navbar{
  height:var(--nav-h);
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(12px,3vw,32px);
  background:linear-gradient(180deg,var(--nav-bg-a) 0%,var(--nav-bg-b) 100%);
  border-bottom:4px solid var(--gold);
  position:relative;
  z-index:50;
}

/* --- $SAVECATS 3D cartoon logo --- */
.logo-3d{
  font-family:var(--font-pixel);
  font-size:clamp(11px,2.6vw,20px);
  line-height:1;
  color:#f7e8ce;             /* beige, reads clearly against the pastel nav */
  letter-spacing:1px;
  -webkit-text-stroke:1.5px #7a5236;
  text-shadow:
    1px 1px 0 #c9976a,
    2px 2px 0 #c9976a,
    3px 3px 0 #7a5236,
    4px 4px 0 #7a5236,
    5px 5px 6px rgba(107,74,99,0.35);
  transform:rotate(-2deg);
  user-select:none;
  transition:transform .2s ease;
  white-space:nowrap;
}
.logo-3d:hover{ transform:rotate(-2deg) scale(1.05); }

.nav-right{
  display:flex;
  align-items:center;
  gap:clamp(8px,1.6vw,16px);
}

/* --- sound toggle --- */
.sound-btn{
  width:38px;
  height:38px;
  border-radius:50%;
  border:3px solid var(--brand-dark);
  background:#fff2fa;
  font-size:16px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 0 var(--brand-dark);
  transition:transform .15s ease;
}
.sound-btn:hover{ transform:scale(1.08); }
.sound-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--brand-dark); }
.sound-btn.is-muted{ opacity:.6; }

/* --- cartoon BUY button --- */
.buy-btn{
  border:none;
  background:none;
  padding:0;
  position:relative;
  transform:rotate(1.5deg);
  transition:transform .15s ease;
}
.buy-btn:hover{ transform:rotate(1.5deg) scale(1.06); }
.buy-btn:active{ transform:rotate(1.5deg) scale(0.94); }

.buy-btn-inner{
  display:inline-block;
  font-family:var(--font-pixel);
  font-size:clamp(8px,1.6vw,12px);
  color:#3d7a5c;
  background:linear-gradient(180deg,#d4fce8 0%,var(--buy-green) 55%,var(--buy-green-dark) 100%);
  padding:12px 16px;
  border-radius:14px;
  border:3px solid var(--buy-green-dark);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.65),
    inset 0 -4px 0 rgba(107,74,99,0.12),
    0 5px 0 var(--buy-green-dark),
    0 8px 10px rgba(107,74,99,0.25);
  white-space:nowrap;
}
.buy-btn:active .buy-btn-inner{
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.65),
    inset 0 -4px 0 rgba(107,74,99,0.12),
    0 2px 0 var(--buy-green-dark),
    0 3px 6px rgba(107,74,99,0.25);
}

/* ===================== SKY STAGE ===================== */

.sky{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:linear-gradient(180deg,var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bottom) 100%);
}

.pixel-sun{
  position:absolute;
  top:6%;
  right:6%;
  width:56px;
  height:56px;
  background:#ffe9ad;
  box-shadow:
    0 0 0 6px rgba(255,217,138,0.35),
    0 0 0 12px rgba(255,217,138,0.18);
  border:4px solid var(--gold);
  border-radius:10px;
  z-index:1;
}

.clouds{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.cloud{
  position:absolute;
  background:#ffffff;
  opacity:.85;
  border-radius:4px;
  box-shadow:
    16px 6px 0 0 #fff,
    -16px 6px 0 0 #fff,
    0 -8px 0 0 #fff,
    32px 0 0 0 rgba(255,255,255,.9);
}
.cloud--1{ width:70px; height:22px; top:12%; left:-120px; animation:driftCloud 34s linear infinite; }
.cloud--2{ width:50px; height:16px; top:26%; left:-160px; animation:driftCloud 46s linear infinite 4s; }
.cloud--3{ width:90px; height:26px; top:8%;  left:-220px; animation:driftCloud 58s linear infinite 12s; }
.cloud--4{ width:40px; height:14px; top:40%; left:-100px; animation:driftCloud 30s linear infinite 8s; }

@keyframes driftCloud{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(100vw + 260px)); }
}

/* ---- tagline banner ---- */
.tagline-wrap{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  text-align:center;
  width:min(92vw,720px);
  pointer-events:none;
}
.tagline{
  font-family:var(--font-pixel);
  font-size:clamp(9px,2.4vw,15px);
  color:var(--ink);
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:10px;
  padding:10px 14px;
  box-shadow:0 5px 0 rgba(107,74,99,0.2);
  display:inline-block;
  line-height:1.7;
}
.tagline-emoji{ display:inline-block; transform:translateY(2px); }
.tagline-sub{
  margin-top:8px;
  font-family:var(--font-cartoon);
  font-weight:700;
  font-size:clamp(11px,2vw,14px);
  color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,0.6);
}
.tagline-note{
  margin-top:6px;
  font-family:var(--font-cartoon);
  font-weight:600;
  font-size:clamp(10px,1.7vw,13px);
  color:var(--brand-dark);
  background:rgba(255,248,251,0.85);
  border:2px solid var(--panel-border);
  border-radius:8px;
  padding:4px 10px;
  display:inline-block;
}

/* ---- save meter panel ---- */
.meter{
  position:absolute;
  top:14px;
  right:14px;
  z-index:25;
  background:var(--panel-bg);
  border:3px solid var(--panel-border);
  border-radius:14px;
  padding:10px 14px;
  color:var(--ink);
  min-width:150px;
  text-align:center;
  backdrop-filter:blur(2px);
}
.meter-label{
  font-family:var(--font-pixel);
  font-size:9px;
  letter-spacing:1px;
  color:var(--brand-dark);
  margin-bottom:6px;
}
.meter-count{
  font-family:var(--font-pixel);
  font-size:26px;
  color:var(--brand-dark);
  text-shadow:2px 2px 0 var(--gold);
  margin-bottom:8px;
}
.meter-track{
  height:12px;
  border:2px solid var(--gold);
  border-radius:6px;
  background:#fff0f7;
  overflow:hidden;
  margin-bottom:6px;
}
.meter-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--brand),var(--gold));
  transition:width .35s ease;
}
.meter-milestone{
  font-size:10px;
  font-weight:700;
  color:var(--ink);
  opacity:.75;
}

/* ---- ground strip ---- */
.ground{
  position:absolute;
  left:0; right:0; bottom:0;
  height:26px;
  background:
    repeating-linear-gradient(90deg,var(--ground) 0 16px, var(--ground-dark) 16px 20px);
  border-top:4px solid #7fcf98;
  z-index:2;
}

/* ---- layer that holds JS-spawned flying cats ---- */
.cat-layer{
  position:absolute;
  inset:0;
  z-index:10;
}

/* a single flying unit (balloon + string + cat), positioned/animated via JS */
.cat-unit{
  position:absolute;
  bottom:0;
  left:0;
  will-change:transform;
  cursor:default;
}
.cat-unit canvas{
  display:block;
  pointer-events:none;
}
.balloon-hit{
  position:absolute;
  left:0; top:0;
  border-radius:50%;
  cursor:pointer;
  pointer-events:auto;
}
.balloon-hit:hover{ filter:brightness(1.15); }

/* real cat artwork (assets/cat.png), swapped in for the canvas-drawn
   fallback once it's uploaded — see script.js */
.cat-photo{
  position:absolute;
  width:auto;
  transform:translateX(-50%);
  pointer-events:none;
  filter:drop-shadow(0 3px 4px rgba(107,74,99,0.25));
}
.cat-photo[hidden]{ display:none; }

/* "saved!" popup text */
.saved-pop{
  position:absolute;
  font-family:var(--font-pixel);
  font-size:14px;
  color:#fff;
  -webkit-text-stroke:1px var(--brand-dark);
  text-shadow:2px 2px 0 var(--brand-dark);
  pointer-events:none;
  animation:savedFloat 1s ease-out forwards;
  white-space:nowrap;
  z-index:30;
}
@keyframes savedFloat{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.5); }
  20%{ opacity:1; transform:translate(-50%,-70%) scale(1.15); }
  100%{ opacity:0; transform:translate(-50%,-160%) scale(1); }
}

/* ===================== FOOTER ===================== */

.footer{
  flex:0 0 auto;
  background:linear-gradient(180deg,var(--nav-bg-b) 0%,var(--nav-bg-a) 100%);
  border-top:4px solid var(--gold);
  padding:12px clamp(12px,3vw,32px);
  color:var(--ink);
  text-align:center;
}
.footer-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  font-family:var(--font-pixel);
  font-size:11px;
}
.ca-label{ color:var(--brand-dark); }
.ca-value{
  background:rgba(255,255,255,0.6);
  border:2px solid var(--brand);
  border-radius:8px;
  padding:6px 10px;
  font-size:10px;
  max-width:60vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
}
.copy-btn{
  font-family:var(--font-pixel);
  font-size:9px;
  background:var(--buy-green);
  color:#3d7a5c;
  border:2px solid var(--buy-green-dark);
  border-radius:8px;
  padding:6px 8px;
  box-shadow:0 3px 0 var(--buy-green-dark);
}
.copy-btn:active{ box-shadow:0 1px 0 var(--buy-green-dark); transform:translateY(2px); }
.copy-btn.copied{ background:var(--gold); border-color:#e0b85c; box-shadow:0 3px 0 #e0b85c; }

.footer-disclaimer{
  margin-top:8px;
  font-size:11px;
  opacity:.75;
  font-family:var(--font-cartoon);
  line-height:1.4;
}

/* ===================== MILESTONE CELEBRATION ===================== */

.milestone-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(107,74,99,0.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}
.milestone-overlay.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  cursor:pointer;
}

.milestone-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:scale(.4);
  opacity:0;
}
.milestone-card.is-popping{
  animation:msPop 1s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes msPop{
  0%{ transform:scale(.3) rotate(0deg); opacity:0; }
  40%{ transform:scale(1.18) rotate(0deg); opacity:1; }
  55%{ transform:scale(1) rotate(-5deg); }
  64%{ transform:scale(1) rotate(5deg); }
  73%{ transform:scale(1) rotate(-4deg); }
  82%{ transform:scale(1) rotate(4deg); }
  91%{ transform:scale(1) rotate(-1.5deg); }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}

.milestone-halo{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:210px;
  height:210px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,217,138,0.95) 0%, rgba(255,217,138,0.5) 42%, rgba(255,217,138,0) 74%);
  z-index:0;
  animation:msHaloPulse 1.5s ease-in-out infinite;
}
@keyframes msHaloPulse{
  0%,100%{ transform:translateX(-50%) scale(1); opacity:.85; }
  50%{ transform:translateX(-50%) scale(1.12); opacity:1; }
}

.milestone-cat{ position:relative; width:180px; height:196px; z-index:1; }

.milestone-photo{
  display:block;
  max-width:min(70vw,260px);
  max-height:min(50vh,260px);
  width:auto;
  height:auto;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 6px 10px rgba(107,74,99,0.3));
}
.milestone-photo[hidden]{ display:none; }

.ms-ear{
  position:absolute;
  top:0;
  width:54px;
  height:54px;
  background:var(--brand);
  border:4px solid var(--brand-dark);
  clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
  z-index:1;
}
.ms-ear::after{
  content:'';
  position:absolute;
  left:50%;
  top:58%;
  width:22px;
  height:22px;
  background:var(--gold);
  opacity:.6;
  clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
  transform:translate(-50%,-28%);
}
.ms-ear--l{ left:8px; transform:rotate(-16deg); }
.ms-ear--r{ right:8px; transform:rotate(16deg); }

.ms-head{
  position:absolute;
  top:36px;
  left:50%;
  transform:translateX(-50%);
  width:122px;
  height:108px;
  background:var(--brand);
  border:4px solid var(--brand-dark);
  border-radius:50% 50% 46% 46% / 56% 56% 44% 44%;
  z-index:2;
}
.ms-eye{
  position:absolute;
  top:44px;
  width:14px;
  height:16px;
  background:#2b1f28;
  border-radius:50%;
}
.ms-eye::after{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:4px;
  height:5px;
  background:#fff;
  border-radius:50%;
}
.ms-eye--l{ left:28px; }
.ms-eye--r{ right:28px; }
.ms-blush{
  position:absolute;
  top:64px;
  width:18px;
  height:11px;
  background:#ffe6f3;
  border-radius:50%;
  opacity:.9;
}
.ms-blush--l{ left:12px; }
.ms-blush--r{ right:12px; }
.ms-mouth{
  position:absolute;
  top:76px;
  left:50%;
  transform:translateX(-50%);
  width:16px;
  height:9px;
  border-bottom:4px solid var(--brand-dark);
  border-radius:0 0 50% 50%;
}

.ms-body{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:142px;
  height:92px;
  background:var(--brand);
  border:4px solid var(--brand-dark);
  border-radius:50% 50% 38% 38% / 62% 62% 30% 30%;
  z-index:1;
}
.ms-arm{
  position:absolute;
  bottom:28px;
  width:68px;
  height:26px;
  background:var(--brand);
  border:4px solid var(--brand-dark);
  border-radius:16px;
  z-index:3;
}
.ms-arm--l{ left:-4px; transform:rotate(20deg); }
.ms-arm--r{ right:-4px; transform:rotate(-20deg); }

.ms-ball{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  width:80px;
  height:80px;
  background:radial-gradient(circle at 35% 30%, #ff9a9a, #e0405a 72%);
  border:4px solid #a8283f;
  border-radius:50%;
  z-index:2;
  box-shadow:0 4px 0 rgba(107,74,99,0.2);
}
.ms-ball-shine{
  position:absolute;
  top:14px;
  left:16px;
  width:16px;
  height:12px;
  background:rgba(255,255,255,0.65);
  border-radius:50%;
}

.milestone-text{
  margin-top:16px;
  font-family:var(--font-pixel);
  font-size:36px;
  color:#fff2fa;
  -webkit-text-stroke:2px var(--brand-dark);
  text-shadow:2px 2px 0 var(--brand-dark), 4px 4px 0 var(--gold), 0 0 20px rgba(255,217,138,0.9);
  letter-spacing:2px;
  position:relative;
  z-index:2;
}
.milestone-sub{
  margin-top:8px;
  font-family:var(--font-cartoon);
  font-weight:800;
  font-size:15px;
  color:var(--ink);
  background:#fff8fb;
  border:2px solid var(--panel-border);
  border-radius:10px;
  padding:5px 14px;
  position:relative;
  z-index:2;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width:720px){
  :root{ --nav-h:56px; }

  .meter{
    top:auto;
    bottom:34px;
    right:8px;
    left:8px;
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    text-align:left;
  }
  .meter-label{ margin-bottom:0; font-size:8px; flex:0 0 auto; }
  .meter-count{ margin-bottom:0; font-size:18px; flex:0 0 auto; }
  .meter-track{ flex:1 1 auto; margin-bottom:0; height:10px; }
  .meter-milestone{ display:none; }

  .tagline-wrap{ top:8px; width:94vw; }
  .tagline{ font-size:9px; padding:8px 10px; line-height:1.6; }
  .tagline-sub{ font-size:10px; }
  .tagline-note{ font-size:9px; padding:4px 8px; }

  .buy-btn-inner{ padding:9px 12px; }
  .sound-btn{ width:32px; height:32px; font-size:13px; }

  .footer-disclaimer{ font-size:9.5px; }

  .milestone-cat{ width:132px; height:144px; }
  .milestone-halo{ width:150px; height:150px; }
  .ms-ear{ width:40px; height:40px; }
  .ms-ear::after{ width:16px; height:16px; }
  .ms-head{ width:90px; height:80px; top:26px; }
  .ms-eye{ top:32px; width:11px; height:13px; }
  .ms-eye--l{ left:20px; } .ms-eye--r{ right:20px; }
  .ms-blush{ top:47px; width:14px; height:9px; }
  .ms-blush--l{ left:8px; } .ms-blush--r{ right:8px; }
  .ms-mouth{ top:56px; width:12px; height:7px; }
  .ms-body{ width:104px; height:68px; }
  .ms-arm{ width:50px; height:19px; bottom:20px; }
  .ms-ball{ width:58px; height:58px; bottom:10px; }
  .ms-ball-shine{ top:10px; left:12px; width:12px; height:9px; }
  .milestone-text{ font-size:26px; margin-top:10px; }
  .milestone-sub{ font-size:12px; padding:4px 10px; }
}

@media (max-width:720px){
  .pixel-sun{ top:auto; bottom:120px; right:5%; width:32px; height:32px; }
}

@media (max-width:420px){
  .pixel-sun{ width:26px; height:26px; bottom:100px; }
  .ca-value{ max-width:46vw; }
}

@media (prefers-reduced-motion: reduce){
  .cloud{ animation:none; }
  .milestone-halo{ animation:none; }
  .milestone-card.is-popping{ animation:msPopReduced .3s ease both; }
}
@keyframes msPopReduced{
  from{ transform:scale(.7); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}