:root{
  --pink-light:#ffe9f3;
  --pink:#ffc2de;
  --pink-mid:#ff9ac9;
  --pink-dark:#e8659f;
  --pink-deep:#c94f8c;
  --cream:#fffaf6;
  --lavender:#ecdcff;
  --mint:#d8f7e9;
  --text:#7a4a63;
  --text-dark:#5c3450;
  --shadow: rgba(232,101,159,0.35);
  --font-head:'Mochiy Pop One', cursive;
  --font-body:'Quicksand', sans-serif;
  --font-pixel:'Press Start 2P', cursive;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background-color:var(--pink-light);
  background-image:
    linear-gradient(45deg, var(--pink) 25%, transparent 25%, transparent 75%, var(--pink) 75%),
    linear-gradient(45deg, var(--pink) 25%, transparent 25%, transparent 75%, var(--pink) 75%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  background-attachment: fixed;
  overflow-x:hidden;
}

a, button, .pixel-button{ cursor: pointer; }

::-webkit-scrollbar{ width:14px; height:14px; }
::-webkit-scrollbar-track{ background:var(--cream); border-radius:10px; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(var(--pink-mid), var(--pink-dark));
  border-radius:10px;
  border:3px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover{ background: var(--pink-deep); }

#sparkle-container{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  overflow:hidden;
}
.floaty{
  position:absolute;
  bottom:-40px;
  font-size:20px;
  opacity:0.85;
  animation: floatUp linear forwards;
  user-select:none;
}
@keyframes floatUp{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:0.9; }
  50%{ transform:translateY(-55vh) translateX(15px) rotate(15deg); }
  100%{ transform:translateY(-110vh) translateX(-15px) rotate(-10deg); opacity:0; }
}

.paw-trail{
  position:fixed;
  font-size:14px;
  pointer-events:none;
  z-index:9998;
  animation: pawFade 0.9s ease-out forwards;
}
@keyframes pawFade{
  0%{ opacity:0.8; transform:scale(1); }
  100%{ opacity:0; transform:scale(0.4); }
}

.marquee-wrap{
  width:100%;
  overflow:hidden;
  background: repeating-linear-gradient(45deg, var(--pink-dark), var(--pink-dark) 10px, var(--pink-mid) 10px, var(--pink-mid) 20px);
  padding:6px 0;
  white-space:nowrap;
}
.marquee-text{
  display:inline-block;
  color:#fff;
  font-family:var(--font-pixel);
  font-size:11px;
  padding-left:100%;
  animation: scrollLeft 28s linear infinite;
  text-shadow: 1px 1px var(--pink-deep);
}
@keyframes scrollLeft{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}

.page-wrapper{
  max-width: 900px;
  margin: 20px auto;
  padding: 0 16px 40px;
}

.header-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  text-align:center;
  background: linear-gradient(180deg, #fff 0%, var(--pink-light) 100%);
  border: 3px dashed var(--pink-dark);
  border-radius: 24px;
  padding: 24px 16px;
  margin-top:18px;
  box-shadow: 0 6px 0 var(--shadow);
  position:relative;
}
.banner-deco{ font-size:26px; filter: drop-shadow(0 2px 2px var(--shadow)); }
.site-title{
  font-family:var(--font-head);
  color:var(--pink-deep);
  font-size: clamp(24px, 5vw, 40px);
  margin:0;
  text-shadow: 2px 2px 0 #fff, 3px 3px 0 var(--shadow);
}
.subtitle{ margin:6px 0 0; font-size:14px; color:var(--text-dark); }

.site-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin: 18px 0;
}
.site-nav a{
  text-decoration:none;
  font-weight:700;
  color:var(--pink-deep);
  background:#fff;
  border:2px solid var(--pink-mid);
  padding:8px 16px;
  border-radius:999px;
  font-size:14px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
  box-shadow: 0 3px 0 var(--pink-mid);
}
.site-nav a:hover{
  background:var(--pink-mid);
  color:#fff;
  transform:translateY(-2px);
}
.site-nav a:active{ transform:translateY(1px); box-shadow:none; }

.status-box{
  background:var(--mint);
  border:2px dotted var(--pink-dark);
  border-radius:14px;
  padding:10px 16px;
  text-align:center;
  font-size:14px;
  margin-bottom:24px;
  color:var(--text-dark);
}
.status-dot{
  display:inline-block;
  width:9px; height:9px;
  border-radius:50%;
  background:#7be08a;
  margin-right:6px;
  box-shadow:0 0 6px #7be08a;
  animation: pulse 1.6s infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }

.panel{
  background:#fff;
  border:3px solid var(--pink);
  border-radius:22px;
  padding:24px;
  margin-bottom:28px;
  box-shadow: 0 6px 0 var(--shadow);
  position:relative;
}
.section-title{
  font-family:var(--font-head);
  color:var(--pink-deep);
  text-align:center;
  font-size:22px;
  margin-top:0;
}
.section-note{
  text-align:center;
  font-size:12px;
  color:var(--pink-dark);
  margin-top:-10px;
}

.profile-card{
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}
.profile-avatar{
  position:relative;
  width:120px; height:120px;
  background:var(--pink-light);
  border-radius:50%;
  border:4px solid var(--pink-mid);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.avatar-face{ font-size:48px; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.avatar-face img{ width:100%; height:100%; object-fit:cover; }

.cat-ear{
  position:absolute;
  top:-18px;
  width:0; height:0;
  border-left:22px solid transparent;
  border-right:22px solid transparent;
  border-bottom:32px solid var(--pink-mid);
  z-index:2;
}
.left-ear{ left:-6px; transform:rotate(-15deg); }
.right-ear{ right:-6px; transform:rotate(15deg); }
.cat-ear::after{
  content:"";
  position:absolute;
  top:10px; left:-14px;
  width:0; height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-bottom:20px solid var(--pink-light);
}

.whiskers{
  position:absolute;
  top:55%;
  width:34px; height:2px;
  background:var(--pink-dark);
  opacity:0.6;
}
.whiskers.left{ left:-30px; }
.whiskers.right{ right:-30px; }
.whiskers::before, .whiskers::after{
  content:"";
  position:absolute;
  width:34px; height:2px;
  background:var(--pink-dark);
}
.whiskers::before{ top:-8px; }
.whiskers::after{ top:8px; }

.info-table{ border-collapse:collapse; margin-bottom:12px; }
.info-table td{ padding:4px 10px; font-size:14px; }
.info-table td:first-child{
  font-weight:700;
  color:var(--pink-deep);
  text-transform:lowercase;
}
.profile-blurb{
  font-size:14px;
  line-height:1.6;
  background:var(--pink-light);
  padding:10px 14px;
  border-radius:14px;
  max-width:360px;
}

.gallery-scroll{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding:10px 4px 16px;
  scroll-snap-type:x mandatory;
}
.card{
  flex:0 0 auto;
  width:220px;
  background:var(--pink-light);
  border:3px solid var(--pink-mid);
  border-radius:18px;
  padding:14px;
  text-align:center;
  scroll-snap-align:start;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  position:relative;
}
.card:hover{
  transform: translateY(-6px) rotate(-1.5deg) scale(1.04);
  box-shadow: 0 10px 0 var(--shadow);
  background:#fff;
}
.card-img-wrap{
  width:100%;
  height:140px;
  border-radius:12px;
  overflow:hidden;
  background:var(--mint);
  margin-bottom:10px;
  border:2px dashed var(--pink-dark);
  display:flex; align-items:center; justify-content:center;
}
.card-img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:40px;
  background: linear-gradient(135deg, var(--pink-light), var(--lavender));
}
.card h3{
  font-family:var(--font-head);
  font-size:14px;
  color:var(--pink-deep);
  margin:6px 0;
}
.card p{ font-size:12px; line-height:1.5; color:var(--text-dark); }

footer{
  text-align:center;
  font-size:12px;
  color:var(--text-dark);
  padding:20px 10px;
}
.blink{ animation: blink 1.4s steps(1) infinite; color:var(--pink-deep); font-weight:700; }
@keyframes blink{ 50%{ opacity:0; } }

@media (max-width:600px){
  .profile-card{ flex-direction:column; text-align:center; }
  .site-title{ font-size:26px; }
  .card{ width:170px; }
  .card-img-wrap{ height:110px; }
}