:root{
  --bg:#fff0f7;
  --panel:#fff6fb;
  --accent:#ff80b5;
  --muted:#7a5476;
  --glass: rgba(255,255,255,0.7);
  --card-shadow: 0 8px 30px rgba(168,85,140,0.12);
  --radius:20px;
  --max-width:960px;
}

html,body{height:100%}
body{
  margin:0;
  font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #fff6fb 0%, #ffeef8 100%);
  color:var(--muted);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:3rem 1.25rem;
  cursor: url('/assets/cursor.png') 16 16, auto; 
}

.frame{
  width:100%;
  max-width:var(--max-width);
  position:relative;
  padding:2rem;
  box-sizing:border-box;
}

.card {
  background:var(--panel);
  border-radius:var(--radius);
  padding:28px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(6px);
  position:relative;
  overflow:visible;
}

header.top {
  display:flex;
  gap:18px;
  align-items:center;
}

.avatar {
  width:120px;
  height:120px;
  border-radius:22px;
  overflow:hidden;
  flex:0 0 120px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  border: 6px solid rgba(255,255,255,0.6);
  background: linear-gradient(180deg,#fff0f7,#ffdff3);
}

.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.who {
  flex:1;
  text-align:left;
}

.who h1{
  margin:0;
  font-family: "Pacifico", cursive;
  font-size:1.9rem;
  color:var(--accent);
  text-shadow: 0 2px 8px rgba(255,150,190,0.25);
}

.who .meta{
  margin-top:6px;
  color:#9b6f92;
  font-size:0.95rem;
}
.who .badges{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.badge{
  background:linear-gradient(180deg,#fff,#ffe8f4);
  border-radius:12px;
  padding:6px 10px;
  font-size:0.85rem;
  box-shadow: 0 3px 8px rgba(255,145,195,0.08);
  color:#6f3a5b;
}

.bio {
  margin-top:18px;
  text-align:left;
  line-height:1.55;
  font-size:1rem;
  color: #69455f;
}

.two-col {
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:18px;
  margin-top:18px;
}

/* right column (sidebar) */
aside.sidebar {
  background: linear-gradient(180deg,#fff,#fff6fb);
  border-radius:14px;
  padding:16px;
  box-shadow:0 6px 18px rgba(160,90,130,0.06);
}

.section-title{
  font-weight:600;
  font-size:0.92rem;
  color:#8f5e81;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}

.cute-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.cute-list li{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:0.95rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,250,255,0.95));
  padding:8px;
  border-radius:10px;
}

.cute-list li img.icon {
  width:36px;
  height:36px;
  border-radius:10px;
  object-fit:cover;
  flex:0 0 36px;
  box-shadow:0 4px 12px rgba(200,120,160,0.07);
}

/* gallery / stamps */
.stamps{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.stamp{
  width:72px;
  height:72px;
  border-radius:12px;
  background:linear-gradient(180deg,#fff,#ffdff3);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(200,120,160,0.06);
}
.stamp img{ width:56px; height:56px; object-fit:cover; border-radius:9px; }

/* bottom area (longer personal notes, roleplay-friendly) */
.long-note{
  margin-top:16px;
  padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,245,252,0.8));
  border-radius:12px;
  font-size:0.95rem;
  color:#5f3f59;
}

footer.actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

.btn{
  background: linear-gradient(180deg,#ff9ac6,#ff6fa7);
  color:white;
  border:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  box-shadow: 0 8px 20px rgba(255,120,180,0.12);
  text-decoration:none;
}

.socials a{ text-decoration:none; color:#b64f83; font-weight:600; margin-right:10px }

/* responsive */
@media (max-width:880px){
  .two-col { grid-template-columns: 1fr; }
  .avatar{ width:96px; height:96px; border-radius:16px }
}

/* playful floating plushies (decorative absolute images) */
.decor {
  pointer-events:none;
  position:absolute;
  z-index:0;
}
.plush-left{
  left:-30px; top:-40px; transform:rotate(-8deg);
  width:120px; opacity:0.95;
}
.plush-right{
  right:-40px; bottom:-50px; width:140px; transform:rotate(10deg); opacity:0.9;
}

/* small accessible helper class */
.sr-only{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }