.mascot-stage-shell{position:absolute;left:50%;top:50%;width:250px;height:292px;z-index:1;pointer-events:none;transform:translate(-50%,-53%);opacity:.84;transition:opacity .35s ease,filter .35s ease}
.mascot-stage{position:relative;z-index:2;display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 66%;animation:mascotFloat 5.6s ease-in-out infinite;filter:drop-shadow(0 26px 44px rgba(67,190,255,.13));transition:transform .6s cubic-bezier(.22,.8,.22,1),filter .4s ease}
.mascot-stage-shell[data-stage="dormant"]{opacity:.22;filter:saturate(.25)}
.mascot-stage-shell[data-stage="newborn"] .mascot-stage{transform:scale(.72)}
.mascot-stage-shell[data-stage="baby"] .mascot-stage{transform:scale(.82)}
.mascot-stage-shell[data-stage="growing"] .mascot-stage{transform:scale(.9)}
.mascot-stage-shell[data-stage="adult"] .mascot-stage{transform:scale(1)}
.mascot-stage-shell[data-stage="companion"] .mascot-stage{transform:scale(1.04)}
.mascot-stage-shell[data-stage="legend"] .mascot-stage{transform:scale(1.08);filter:drop-shadow(0 25px 50px rgba(103,180,255,.2)) drop-shadow(0 0 32px rgba(155,168,255,.16))}
.mascot-aura{position:absolute;left:50%;top:54%;border:1px solid rgba(107,220,255,.12);border-radius:50%;transform:translate(-50%,-50%);opacity:.7}
.mascot-aura-one{width:220px;height:88px}.mascot-aura-two{width:176px;height:64px;opacity:.38}
[data-life-stage="companion"] .mascot-aura-one,[data-life-stage="legend"] .mascot-aura-one{animation:auraDrift 7s ease-in-out infinite}
[data-life-stage="legend"] .mascot-aura{border-color:rgba(155,168,255,.22)}
@keyframes mascotFloat{0%,100%{translate:0 2px}50%{translate:0 -7px}}
@keyframes auraDrift{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.35}}
.life-stage-chip{width:max-content;max-width:100%;display:inline-flex;align-items:center;gap:8px;margin:17px auto 0;padding:7px 10px;border:1px solid var(--stroke);border-radius:999px;background:rgba(8,20,29,.34);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--muted);font-size:.68rem;font-weight:650;letter-spacing:.02em}
:root[data-theme="light"] .life-stage-chip{background:rgba(255,255,255,.54)}
.life-stage-chip strong{color:var(--text);font-size:.72rem;font-weight:760}
.mascot-stage-shell.is-evolving .mascot-stage{animation:evolutionPulse 1.35s cubic-bezier(.16,.9,.26,1)}
.mascot-stage-shell.is-evolving::after{content:"";position:absolute;left:50%;top:53%;width:92px;height:92px;border:1px solid rgba(139,241,215,.72);border-radius:50%;transform:translate(-50%,-50%);animation:evolutionWave 1.45s ease-out forwards}
@keyframes evolutionPulse{0%{filter:brightness(1)}36%{filter:brightness(1.7) drop-shadow(0 0 46px rgba(107,220,255,.5));transform:scale(.88)}68%{filter:brightness(1.22) drop-shadow(0 0 32px rgba(139,241,215,.34));transform:scale(1.11)}100%{filter:brightness(1);transform:scale(1)}}
@keyframes evolutionWave{to{width:360px;height:360px;opacity:0}}
.evolution-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 45%,rgba(80,206,255,.16),rgba(4,11,17,.72) 46%,rgba(3,8,12,.82));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}
.evolution-overlay[hidden]{display:none}.evolution-overlay.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.evolution-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.evolution-rings span{position:absolute;width:160px;height:160px;border:1px solid rgba(107,220,255,.18);border-radius:50%;animation:evolutionRing 2.4s ease-out infinite}
.evolution-rings span:nth-child(2){animation-delay:.55s}.evolution-rings span:nth-child(3){animation-delay:1.1s}
@keyframes evolutionRing{0%{transform:scale(.65);opacity:0}18%{opacity:.75}100%{transform:scale(3.2);opacity:0}}
.evolution-card{position:relative;width:min(430px,100%);display:grid;justify-items:center;padding:24px 24px 27px;border:1px solid var(--stroke-strong);border-radius:30px;background:linear-gradient(145deg,rgba(107,220,255,.08),rgba(155,168,255,.035)),var(--surface-solid);box-shadow:0 32px 110px rgba(0,0,0,.48);text-align:center;transform:translateY(14px) scale(.96);transition:transform .36s cubic-bezier(.2,.9,.2,1)}
.evolution-overlay.is-visible .evolution-card{transform:translateY(0) scale(1)}
.evolution-dismiss{position:absolute;right:14px;top:14px;width:34px;height:34px;border:0;border-radius:12px;background:var(--soft);color:var(--muted);font:inherit;font-size:1.35rem;cursor:pointer}
.evolution-dismiss:hover{background:var(--soft-strong);color:var(--text)}
.evolution-mascot-wrap{width:190px;height:220px;margin:-4px 0 -2px}.evolution-mascot-wrap svg{width:100%;height:100%;filter:drop-shadow(0 22px 42px rgba(75,194,255,.18));animation:evolutionMascotIn .8s cubic-bezier(.16,.95,.22,1)}
@keyframes evolutionMascotIn{0%{transform:scale(.62);opacity:0;filter:brightness(2)}100%{transform:scale(1);opacity:1}}
.evolution-kicker{color:var(--accent);font-size:.7rem;font-weight:800;letter-spacing:.16em}.evolution-card>strong{margin-top:8px;font-size:1.75rem;letter-spacing:-.04em}.evolution-card>small{max-width:320px;margin-top:8px;color:var(--muted);font-size:.82rem;line-height:1.55}
@media(max-width:700px){.mascot-stage-shell{width:205px;height:240px;transform:translate(-50%,-56%)}.life-stage-chip{margin-top:14px}}
@media(max-width:390px){.mascot-stage-shell{width:184px;height:216px}.life-stage-chip{margin-top:12px;padding:6px 9px}.evolution-card{padding:20px 18px 24px;border-radius:25px}.evolution-mascot-wrap{width:165px;height:192px}}
@media(prefers-reduced-motion:reduce){.mascot-stage,.mascot-aura,.mascot-stage-shell.is-evolving .mascot-stage,.mascot-stage-shell.is-evolving::after,.evolution-rings span,.evolution-mascot-wrap svg{animation:none!important}}


/* v2 layout: mascot and elapsed time each get their own visual lane instead of overlapping. */
.time-stage{
  grid-template-columns:minmax(240px,.92fr) minmax(0,1.08fr);
  align-items:center;
  column-gap:28px;
  min-height:390px;
  padding:12px 8px 8px;
}
.time-stage .mascot-stage-shell{
  position:relative;
  left:auto;
  top:auto;
  grid-column:1;
  grid-row:1;
  align-self:center;
  justify-self:center;
  transform:none;
}
.time-stage .elapsed-wrap{
  grid-column:2;
  grid-row:1;
  width:100%;
  min-width:0;
  text-align:left;
  justify-self:stretch;
}
.time-stage .days-row{justify-content:flex-start}
.time-stage .life-stage-chip{margin-left:0;margin-right:0}
.time-stage .ripple{
  left:26.5%;
  top:50%;
}
.time-stage .ripple-one{width:250px;height:250px}
.time-stage .ripple-two{width:330px;height:330px}
.time-stage .ripple-three{width:410px;height:410px}
.time-stage .days{
  font-size:clamp(6.6rem,15vw,10.5rem);
}
.time-stage .clock-row{
  font-size:clamp(1.65rem,4.4vw,2.75rem);
}

@media(max-width:700px){
  .time-stage{
    grid-template-columns:minmax(118px,.82fr) minmax(0,1.18fr);
    column-gap:10px;
    min-height:300px;
    padding:8px 0 4px;
  }
  .time-stage .mascot-stage-shell{
    width:158px;
    height:186px;
    transform:none;
  }
  .time-stage .ripple{left:23%}
  .time-stage .ripple-one{width:170px;height:170px}
  .time-stage .ripple-two{width:220px;height:220px}
  .time-stage .ripple-three{width:275px;height:275px}
  .time-stage .days{
    font-size:clamp(4.7rem,22vw,7.2rem);
    letter-spacing:-.07em;
  }
  .time-stage .unit{
    font-size:.95rem;
  }
  .time-stage .clock-row{
    margin-top:15px;
    font-size:clamp(1.25rem,5.8vw,1.85rem);
    letter-spacing:.07em;
    white-space:nowrap;
  }
  .time-stage .life-stage-chip{
    margin-top:12px;
    padding:6px 9px;
  }
}
@media(max-width:390px){
  .time-stage{
    grid-template-columns:112px minmax(0,1fr);
    column-gap:6px;
    min-height:275px;
  }
  .time-stage .mascot-stage-shell{width:138px;height:162px}
  .time-stage .ripple{left:20%}
  .time-stage .ripple-one{width:145px;height:145px}
  .time-stage .ripple-two{width:190px;height:190px}
  .time-stage .ripple-three{width:235px;height:235px}
  .time-stage .days{font-size:clamp(4.25rem,20vw,5.6rem)}
  .time-stage .clock-row{font-size:1.16rem;letter-spacing:.045em}
  .time-stage .life-stage-chip{font-size:.62rem;gap:5px;padding:5px 7px}
  .time-stage .life-stage-chip strong{font-size:.66rem}
}


/* v3: give the mascot more presence without letting it collide with the timer lane. */
@media(min-width:701px){
  .time-stage{grid-template-columns:minmax(285px,1fr) minmax(0,1fr);column-gap:22px}
  .time-stage .mascot-stage-shell{width:312px;height:364px}
  .time-stage .ripple{left:25%}
  .time-stage .ripple-one{width:286px;height:286px}
  .time-stage .ripple-two{width:368px;height:368px}
  .time-stage .ripple-three{width:448px;height:448px}
}
@media(max-width:700px){
  .time-stage{grid-template-columns:minmax(138px,.9fr) minmax(0,1.1fr);column-gap:8px}
  .time-stage .mascot-stage-shell{width:190px;height:222px}
  .time-stage .ripple{left:24%}
  .time-stage .ripple-one{width:188px;height:188px}
  .time-stage .ripple-two{width:238px;height:238px}
  .time-stage .ripple-three{width:292px;height:292px}
}
@media(max-width:390px){
  .time-stage{grid-template-columns:122px minmax(0,1fr);column-gap:4px}
  .time-stage .mascot-stage-shell{width:164px;height:192px}
  .time-stage .ripple{left:21%}
  .time-stage .ripple-one{width:158px;height:158px}
  .time-stage .ripple-two{width:202px;height:202px}
  .time-stage .ripple-three{width:246px;height:246px}
}


/* Care system: age chooses the mascot; care state changes how that same mascot feels. */
.care-strip[hidden]{display:none!important}
.care-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:2px 4px 4px;padding:16px 0 6px;border-top:1px solid var(--stroke)}
.care-copy{min-width:0;display:grid;gap:3px}
.care-kicker{color:var(--accent);font-size:.64rem;font-weight:800;letter-spacing:.13em}
.care-copy strong{font-size:.9rem;line-height:1.35}
.care-copy small{color:var(--muted);font-size:.7rem}
.feed-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:108px;min-height:44px;padding:0 15px;border:1px solid var(--stroke);border-radius:15px;background:var(--soft);color:var(--muted);font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease}
.feed-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feed-btn:hover{transform:translateY(-1px);background:var(--soft-strong);color:var(--text)}
.feed-btn.is-ready{border-color:var(--stroke-strong);color:var(--accent);background:linear-gradient(135deg,rgba(107,220,255,.09),rgba(139,241,215,.05)),var(--soft)}
.status-pill.care-peckish{opacity:.92}.status-pill.care-hungry{opacity:.84}.status-pill.care-weak,.status-pill.care-sick{opacity:.76}.status-pill.care-critical{opacity:.68}
.mascot-stage-shell[data-care-status="peckish"]{opacity:.8;filter:saturate(.9)}
.mascot-stage-shell[data-care-status="hungry"]{opacity:.75;filter:saturate(.78) brightness(.96)}
.mascot-stage-shell[data-care-status="weak"]{opacity:.68;filter:saturate(.66) brightness(.9);translate:0 5px}
.mascot-stage-shell[data-care-status="sick"]{opacity:.62;filter:saturate(.5) brightness(.86);translate:0 8px}
.mascot-stage-shell[data-care-status="critical"]{opacity:.52;filter:grayscale(.18) saturate(.38) brightness(.8);translate:0 10px;animation:careCritical 2.4s ease-in-out infinite}
.mascot-stage-shell.is-fed{animation:careFed 1s cubic-bezier(.2,.9,.2,1)}
.mascot-stage-shell.is-nudged{animation:careNudge .58s ease}
@keyframes careFed{0%,100%{scale:1}38%{scale:1.09}62%{scale:.98}}
@keyframes careNudge{0%,100%{rotate:0deg}24%{rotate:-3deg}48%{rotate:3deg}72%{rotate:-2deg}}
@keyframes careCritical{0%,100%{opacity:.52}50%{opacity:.68}}
@media(max-width:700px){.care-strip{gap:10px;padding-top:13px}.care-copy strong{font-size:.82rem}.feed-btn{min-width:96px;min-height:42px;padding:0 12px}}
@media(max-width:390px){.care-strip{align-items:flex-end}.care-copy strong{font-size:.76rem}.care-copy small{font-size:.64rem}.feed-btn{min-width:88px;min-height:40px;padding:0 10px;font-size:.72rem}}
@media(prefers-reduced-motion:reduce){.mascot-stage-shell[data-care-status="critical"],.mascot-stage-shell.is-fed,.mascot-stage-shell.is-nudged{animation:none!important}}


/* care-v2: make each care state visually distinct instead of only desaturating the mascot. */
body[data-care-status="healthy"]{
  --care-color:#8bf1d7;--care-bg:rgba(80,224,180,.10);--care-line:rgba(139,241,215,.25);--care-glow:rgba(93,230,198,.22)
}
body[data-care-status="peckish"]{
  --care-color:#f2d27a;--care-bg:rgba(242,210,122,.10);--care-line:rgba(242,210,122,.26);--care-glow:rgba(242,210,122,.20)
}
body[data-care-status="hungry"]{
  --care-color:#ffb45e;--care-bg:rgba(255,180,94,.11);--care-line:rgba(255,180,94,.28);--care-glow:rgba(255,167,76,.22)
}
body[data-care-status="weak"]{
  --care-color:#ff966b;--care-bg:rgba(255,150,107,.11);--care-line:rgba(255,150,107,.29);--care-glow:rgba(255,132,92,.21)
}
body[data-care-status="sick"]{
  --care-color:#c7a0ff;--care-bg:rgba(199,160,255,.11);--care-line:rgba(199,160,255,.28);--care-glow:rgba(174,126,255,.22)
}
body[data-care-status="critical"]{
  --care-color:#ff7084;--care-bg:rgba(255,112,132,.12);--care-line:rgba(255,112,132,.32);--care-glow:rgba(255,82,108,.28)
}
:root[data-theme="light"] body[data-care-status="healthy"]{--care-color:#15896f;--care-bg:rgba(21,137,111,.09);--care-line:rgba(21,137,111,.22);--care-glow:rgba(21,137,111,.14)}
:root[data-theme="light"] body[data-care-status="peckish"]{--care-color:#8a6a16;--care-bg:rgba(164,127,28,.09);--care-line:rgba(138,106,22,.22);--care-glow:rgba(190,151,46,.14)}
:root[data-theme="light"] body[data-care-status="hungry"]{--care-color:#a75d13;--care-bg:rgba(184,104,24,.09);--care-line:rgba(167,93,19,.23);--care-glow:rgba(205,116,31,.15)}
:root[data-theme="light"] body[data-care-status="weak"]{--care-color:#b34f2f;--care-bg:rgba(190,82,48,.09);--care-line:rgba(179,79,47,.23);--care-glow:rgba(205,91,53,.14)}
:root[data-theme="light"] body[data-care-status="sick"]{--care-color:#7551b5;--care-bg:rgba(117,81,181,.09);--care-line:rgba(117,81,181,.22);--care-glow:rgba(117,81,181,.14)}
:root[data-theme="light"] body[data-care-status="critical"]{--care-color:#c94b5f;--care-bg:rgba(201,75,95,.09);--care-line:rgba(201,75,95,.24);--care-glow:rgba(201,75,95,.16)}

body[data-care-status] .status-pill.running{
  color:var(--care-color);
  background:var(--care-bg);
  border-color:var(--care-line);
  opacity:1
}
body[data-care-status] .status-pill.running::before{
  box-shadow:0 0 0 0 currentColor
}
body[data-care-status] .care-kicker{color:var(--care-color)}
body[data-care-status] .feed-btn.is-ready{
  color:var(--care-color);
  border-color:var(--care-line);
  background:linear-gradient(135deg,var(--care-bg),transparent),var(--soft)
}

.mascot-stage-shell::before{
  content:"";
  position:absolute;
  z-index:0;
  left:10%;right:10%;top:12%;bottom:8%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 58%,var(--care-glow,transparent),transparent 68%);
  filter:blur(18px);
  opacity:0;
  transform:scale(.86);
  transition:opacity .35s ease,transform .45s ease,background .35s ease
}
.mascot-stage-shell:not([data-care-status="dormant"])::before{opacity:.78;transform:scale(1)}
.mascot-stage-shell[data-care-status] .mascot-aura{
  border-color:var(--care-line);
  transition:border-color .35s ease,opacity .35s ease,box-shadow .35s ease
}
.mascot-stage-shell[data-care-status="healthy"]{opacity:.92;filter:none;translate:0 0}
.mascot-stage-shell[data-care-status="healthy"] .mascot-stage{
  filter:saturate(1.06) brightness(1.03) drop-shadow(0 24px 44px rgba(83,220,211,.17))
}
.mascot-stage-shell[data-care-status="peckish"]{opacity:.91;filter:none;translate:0 1px}
.mascot-stage-shell[data-care-status="peckish"] .mascot-stage{
  filter:saturate(.96) sepia(.08) brightness(1.01) drop-shadow(0 23px 40px rgba(242,210,122,.14))
}
.mascot-stage-shell[data-care-status="hungry"]{opacity:.89;filter:none;translate:0 3px}
.mascot-stage-shell[data-care-status="hungry"] .mascot-stage{
  animation-duration:6.5s;
  filter:saturate(.86) sepia(.22) hue-rotate(-13deg) brightness(.98) drop-shadow(0 20px 38px rgba(255,166,76,.18))
}
.mascot-stage-shell[data-care-status="hungry"] .mascot-aura-two{opacity:.24}
.mascot-stage-shell[data-care-status="weak"]{opacity:.84;filter:none;translate:0 8px}
.mascot-stage-shell[data-care-status="weak"] .mascot-stage{
  animation-duration:8s;
  filter:saturate(.72) sepia(.26) hue-rotate(-18deg) brightness(.91) drop-shadow(0 18px 34px rgba(255,132,92,.18))
}
.mascot-stage-shell[data-care-status="weak"] .mascot-aura{opacity:.32}
.mascot-stage-shell[data-care-status="sick"]{opacity:.83;filter:none;translate:0 9px}
.mascot-stage-shell[data-care-status="sick"] .mascot-stage{
  animation-name:careSickDrift;
  animation-duration:3.8s;
  filter:saturate(.68) hue-rotate(42deg) brightness(.9) drop-shadow(0 18px 36px rgba(174,126,255,.23))
}
.mascot-stage-shell[data-care-status="sick"] .mascot-aura{
  border-style:dashed;
  opacity:.45;
  animation:careSickAura 3s ease-in-out infinite
}
.mascot-stage-shell[data-care-status="critical"]{
  opacity:.78;
  filter:none;
  translate:0 11px;
  animation:none
}
.mascot-stage-shell[data-care-status="critical"]::before{
  opacity:1;
  animation:careDangerGlow 1.35s ease-in-out infinite
}
.mascot-stage-shell[data-care-status="critical"] .mascot-stage{
  animation-name:careCriticalDrift;
  animation-duration:1.55s;
  filter:grayscale(.28) saturate(.5) sepia(.12) brightness(.78) drop-shadow(0 0 28px rgba(255,82,108,.32))
}
.mascot-stage-shell[data-care-status="critical"] .mascot-aura{
  opacity:.58;
  box-shadow:0 0 20px rgba(255,82,108,.12);
  animation:careDangerAura 1.35s ease-in-out infinite
}

@keyframes careSickDrift{
  0%,100%{translate:0 2px;rotate:-.6deg}
  50%{translate:0 -3px;rotate:.8deg}
}
@keyframes careSickAura{
  0%,100%{opacity:.28}
  50%{opacity:.55}
}
@keyframes careCriticalDrift{
  0%,100%{translate:0 2px;rotate:-1deg}
  50%{translate:0 -1px;rotate:1deg}
}
@keyframes careDangerGlow{
  0%,100%{opacity:.55;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.04)}
}
@keyframes careDangerAura{
  0%,100%{opacity:.32;transform:translate(-50%,-50%) scale(.96)}
  50%{opacity:.72;transform:translate(-50%,-50%) scale(1.04)}
}
@media(prefers-reduced-motion:reduce){
  .mascot-stage-shell[data-care-status="sick"] .mascot-stage,
  .mascot-stage-shell[data-care-status="sick"] .mascot-aura,
  .mascot-stage-shell[data-care-status="critical"]::before,
  .mascot-stage-shell[data-care-status="critical"] .mascot-stage,
  .mascot-stage-shell[data-care-status="critical"] .mascot-aura{animation:none!important}
}