/* Parent Center skin – CP-styled, readable, and dashboard-ready */
:root{
  --cp-blue-900:#0a4f87;
  --cp-blue-800:#0b5d9f;

  --cp-panel:#eaf2f7;
  --cp-card:#ffffff;

  --cp-ink:#0b2b45;
  --cp-ink-2:#234a63;
  --cp-muted:#4f768f;

  --cp-border:#bcd3e4;

  --pc-shadow:0 10px 24px rgba(0,0,0,0.08);
  --pc-shadow-soft:0 8px 18px rgba(0,0,0,0.08);
}

html,body{height:100%;}
body{
  margin:0;
  background:#0b5fa6;
  color:var(--cp-ink);
}

/* --------------------------------------------------------------------------
   Parent Center global layout + header
   -------------------------------------------------------------------------- */
.pc-appRoot{ min-height:100vh; display:flex; flex-direction:column; }
.pc-globalContent{ flex:1 0 auto; }

.pc-globalHeader{
  position:sticky;
  top:0;
  z-index:10000;
  background:linear-gradient(#0a6db5,#0b5d9f);
  box-shadow:0 8px 0 rgba(0,0,0,.18);
}

.pc-globalHeaderInner{
  max-width:1200px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:18px;
}

.pc-globalLogo{ flex:0 0 auto; }

.pc-globalNav{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
}

.pc-globalNavLink{
  color:#fff;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.01em;
  opacity:.95;
}
.pc-globalNavLink:hover{ opacity:1; text-decoration:underline; }

.pc-globalRight{ flex:0 0 auto; display:flex; align-items:center; }

.pc-globalCta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:14px;
  background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:900;
  text-decoration:none;
}
.pc-globalCta:hover{ background:rgba(255,255,255,.18); }

.pc-globalFooter{
  flex:0 0 auto;
  padding:18px 0 30px;
}
.pc-globalFooterInner{ max-width:1200px; margin:0 auto; padding:0 18px; }
.pc-globalFooterText{ margin:0; color:rgba(255,255,255,.88); font-weight:700; }

@media (max-width: 860px){
  .pc-globalHeaderInner{ padding:12px 14px; }
  .pc-globalNav{ justify-content:flex-start; gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .pc-globalNav::-webkit-scrollbar{ height:0; }
  .pc-globalNavLink{ white-space:nowrap; }
}

/* Layout shell */
.cp-parentWrap,.pc-shell{
  max-width:1040px;
  /* tuck the Parent Center card up tight to the global header */
  margin:0 auto 56px;
  padding:0 18px;
}

/* Main panel/card */
.cp-parentPanel,.pc-card{
  /* slightly graded surface so the hero strip blends naturally */
  /* hero strip fades into pure white for a seamless transition */
  background:linear-gradient(#e9f3fa 0px, #ffffff 260px);
  /* border-radius:22px; */
  border-bottom-right-radius: 22px;
  border-bottom-left-radius: 22px;
  padding:34px 34px 26px;
  box-shadow:0 12px 0 rgba(0,0,0,.08);
  position:relative;
  /* Keep the decorative header strip clipped to the rounded corners. */
  overflow:hidden;
}

/* Note: header stickiness is handled by .pc-globalHeader above. */

/* Decorative header strip (blends into the panel surface) */
.pc-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:380px;
  background-image:url("container-top-1.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  opacity:1;
  pointer-events:none;
  z-index:0;
  /* follow the card's rounded corners */
  /* border-radius:22px 22px 0 0; */
}

/* Soft fade so the hero strip blends into the panel surface (no harsh edge) */
.pc-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:150px;
  height:220px;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.85) 48%,
    rgba(255,255,255,1) 100%
  );
  filter:blur(0.5px);
  pointer-events:none;
  z-index:1;
}

/* Leave breathing room for the strip so titles don't collide */
.pc-card{padding-top:200px;}
.pc-card > *{position:relative;z-index:2;}

/* Titles */
.cp-parentH1,.pc-title,.pc-h1{
  font-size:58px;
  letter-spacing:.02em;
  margin:0;
  color:#2e6faa;
  font-weight:900;
}
.cp-parentSub,.pc-sub,.pc-lead{
  margin:6px 0 22px;
  color:var(--cp-ink-2);
  font-size:18px;
  font-weight:700;
}

/* Title row with optional icon */
.pc-titleRow{
  display:flex;
  align-items:center;
  gap:12px;
}
.pc-heroIcon{
  width:56px;height:56px;
  background:#fff;
  border-radius:16px;
  border:3px solid rgba(188,211,228,0.9);
  padding:8px;
  box-shadow:0 8px 22px rgba(0,0,0,0.10);
  object-fit:contain;
}

/* Actions row */
.cp-btnRow,.pc-actionsRow,.pc-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:10px 0 18px;
  align-items:center;
}
.pc-actions--toolbar{margin-top:18px;}

/* Buttons */
.cp-actionBtn,
.pc-btn,
.pc-actionLink,
.pc-btnSm{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 16px;
  border-radius:16px;
  text-decoration:none;
  font-weight:900;
  border:2px solid rgba(13,53,88,0.22);
  background:rgba(255,255,255,0.92);
  color:#1c4f76;
  box-shadow:var(--pc-shadow-soft);
}
.cp-actionBtn:hover,
.pc-btn:hover,
.pc-actionLink:hover,
.pc-btnSm:hover{
  filter:brightness(1.02);
  transform:translateY(-1px);
}
.pc-btn--primary{
  background:linear-gradient(#3ab6ff,#1e77d6);
  color:#fff;
  border-color:rgba(0,0,0,0.10);
}

/* Section titles */
.cp-sectionTitle,.pc-sectionTitle{
  font-size:34px;
  margin:22px 0 10px;
  color:#123b5a;
  font-weight:900;
}
.pc-sectionTitle{font-size:28px;margin:22px 0 12px;color:#224c69;}
.pc-muted{color:var(--cp-muted);margin:0 0 12px;font-weight:700;}

/* --- Banned child highlighting (dashboard table rows) --- */
.pc-row--banned td{
  background:rgba(220,53,69,0.06);
}
.pc-row--banned td:first-child{
  border-top-left-radius:18px;
  border-bottom-left-radius:18px;
}
.pc-row--banned td:last-child{
  border-top-right-radius:18px;
  border-bottom-right-radius:18px;
}

/* Optional: slightly stronger divider for banned rows */
.pc-row--banned td{
  border-bottom-color:rgba(220,53,69,0.14) !important;
}

/* Status pill variant */
.pc-pill--banned{
  background:rgba(220,53,69,0.10);
  border:1px solid rgba(220,53,69,0.30);
  color:#b02a37;
}

/* Avatar “moderator” badge overlay */
.pc-avatarSlot{
  position:relative; /* REQUIRED so the badge can anchor */
  width:96px;
  height:96px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.pc-modBadge{
  position:absolute;
  right:-6px;
  bottom:-6px;
  width:34px;
  height:34px;
  border-radius:14px;
  background:rgba(255,255,255,0.92);
  border:2px solid rgba(220,53,69,0.35);
  box-shadow:0 10px 18px rgba(0,0,0,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
}

.pc-modBadge img{
  width:18px;
  height:18px;
  display:block;
}

/* --- Legacy CP table (blue rows) --- */
.cp-table{width:100%;border-collapse:separate;border-spacing:0 10px;}
.cp-table th{font-size:16px;color:#1c4f77;text-align:left;padding:0 12px 6px;}

.cp-row{
  background:#2f79bd;
  border:3px solid #245e93;
  border-radius:16px;
  overflow:hidden;
}
/* IMPORTANT: scope white text to only the legacy blue rows */
.cp-row td{
  padding:14px 12px;
  color:#f6fbff;
  font-weight:800;
  vertical-align:middle;
  text-shadow:0 1px 0 rgba(0,0,0,0.25);
}
.cp-pill{
  display:inline-block;
  background:#1b65a7;
  border:2px solid #154f82;
  color:#bfe5ff;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
}
.cp-actions{display:flex;gap:10px;align-items:center;justify-content:flex-start;flex-wrap:wrap;}
.cp-actionBtnDanger{background:#2d6ead;border-color:#245e93;color:#bfe5ff;}
.cp-avatarCell{width:92px;}
.cp-avatarCircle{
  width:70px;height:70px;border-radius:999px;
  background:#1d6db0;border:3px solid #134c7a;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.cp-avatarCircle img{width:96px;height:96px;display:block;object-fit:cover;}

/* --- New dashboard table (white rows) --- */
.pc-tableWrap{
  /* Default: avoid always-on horizontal scrollbars (Chrome sometimes shows them even when not needed). */
  overflow:hidden;
  border-radius:18px;
  border:2px solid rgba(0,0,0,0.05);
  background:rgba(255,255,255,0.92);
  box-shadow:var(--pc-shadow);
}

/* Opt-in horizontal scrolling for wide tables */
.pc-tableWrap--scroll{overflow-x:auto;}
.pc-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:760px;
}
.pc-table th,.pc-table td{
  padding:14px 14px;
  text-align:left;
  vertical-align:middle;
  color:var(--cp-ink); /* force readable */
}
.pc-table th{
  font-size:14px;
  letter-spacing:.02em;
  color:#335a74;
  background:rgba(255,255,255,0.88);
  border-bottom:2px solid rgba(0,0,0,0.06);
  position:sticky;
  top:0;
}
.pc-table td{
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.pc-table tr:last-child td{border-bottom:none;}

.pc-tdUser{display:flex;align-items:center;gap:12px;}
.pc-userMain{font-weight:950;color:#1f3f57;}
.pc-userSub{color:var(--cp-muted);font-size:13px;font-weight:800;}

.pc-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:rgba(46,127,92,0.12);
  color:#2e7f5c;
  border:1px solid rgba(46,127,92,0.25);
}

.pc-actionLink{height:36px;padding:0 14px;border-radius:14px;box-shadow:none;}
.pc-actionLink.danger{
  background:rgba(220,53,69,0.09);
  border-color:rgba(220,53,69,0.25);
  color:#b02a37;
}

/* --- Avatar components --- */
.pc-avatarWrap{
  width:120px;height:120px;
  border-radius:999px;
  overflow:hidden;
  border:4px solid rgba(11,43,69,0.28);
  background:rgba(255,255,255,0.75);
  box-shadow:var(--pc-shadow);
}
img.pc-avatar{width:100%;height:100%;object-fit:cover;display:block;}

/* Yukon layered avatar integration */
.pc-avatarSlot .cp-avatar{
  width:96px !important;
  height:96px !important;
  border-radius:999px !important;
  overflow:hidden;
  border-width:3px;
}
.pc-avatarSlot .cp-avatar-colour,
.pc-avatarSlot .cp-avatar-layer{border-radius:inherit;}
.pc-playercardWrap .cp-avatar{width:300px !important;height:300px !important;}

/* Mini profile avatar (colour + overlay + optional clothing) */
.pc-miniAvatar{
  --pc-avatar-size:96px;
  position:relative;
  display:inline-block;
  width:var(--pc-avatar-size);
  height:var(--pc-avatar-size);
  border-radius:50%;
  overflow:hidden;
  border:3px solid rgba(11,43,69,0.28);
  background:rgba(255,255,255,0.75);
  box-shadow:var(--pc-shadow);
}
.pc-miniAvatar__layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pc-miniAvatar--clothed .pc-miniAvatar__layer{object-fit:contain;}

/* Playercard box */
.pc-playercardBox{
  background:rgba(255,255,255,0.82);
  border:2px solid rgba(0,0,0,0.06);
  border-radius:18px;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:var(--pc-shadow);
}
.pc-playercardImg{width:100%;height:auto;max-width:520px;display:block;}
.pc-empty{
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,0.7);
  border:2px solid rgba(0,0,0,0.05);
  color:#3b5f78;
  font-weight:800;
}

/* --- Dashboard: Stats cards --- */
.pc-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:14px 0 8px;
}
.pc-statCard{
  background:rgba(255,255,255,0.86);
  border:2px solid rgba(0,0,0,0.06);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:var(--pc-shadow);
}
.pc-statLabel{
  color:var(--cp-muted);
  font-weight:950;
  font-size:12px;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.pc-statValue{
  color:#123b5a;
  font-weight:1000;
  font-size:28px;
  line-height:1.1;
  margin-top:6px;
}

/* --- Dashboard: Callouts --- */
.pc-callouts{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin:10px 0 16px;
}
.pc-callout{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,0.80);
  border:2px solid rgba(0,0,0,0.06);
  box-shadow:var(--pc-shadow);
}
.pc-calloutIcon{
  width:42px;height:42px;
  border-radius:14px;
  object-fit:contain;
  background:rgba(255,255,255,0.8);
  border:2px solid rgba(0,0,0,0.06);
  padding:8px;
}
.pc-calloutTitle{font-weight:1000;color:var(--cp-ink);}
.pc-calloutText{
  margin-top:2px;
  color:#3a617a;
  font-weight:800;
  font-size:13px;
  line-height:1.35;
}

/* --- Alert banners stack --- */
.pc-alertStack{
  margin:14px 0 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pc-banner{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 12px;
  border-radius:18px;
  border:2px solid rgba(0,0,0,0.06);
  background:rgba(255,255,255,0.88);
  box-shadow:var(--pc-shadow);
  color:var(--cp-ink); /* force readable */
}
.pc-banner--warning{
  border-color:rgba(255,193,7,0.35);
  background:rgba(255,193,7,0.10);
}
.pc-banner--danger{
  border-color:rgba(220,53,69,0.35);
  background:rgba(220,53,69,0.09);
}
.pc-bannerIcon{
  width:42px;height:42px;
  border-radius:14px;
  background:rgba(255,255,255,0.8);
  border:2px solid rgba(0,0,0,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.pc-bannerIcon img{width:24px;height:24px;display:block;}
.pc-bannerBody{flex:1 1 auto;min-width:0;}
.pc-bannerTitle{font-weight:1000;color:var(--cp-ink);}
.pc-bannerSub{
  margin-top:4px;
  color:var(--cp-ink-2);
  font-weight:800;
  font-size:13px;
  line-height:1.35;
}
.pc-bannerActions{flex:0 0 auto;}

/* Simple alerts (optional) */
.pc-alert{
  padding:10px 12px;
  border-radius:14px;
  margin:12px 0;
  font-weight:900;
  border:2px solid rgba(0,0,0,0.06);
  background:rgba(255,255,255,0.75);
  color:var(--cp-ink);
}
.pc-alert--success{background:rgba(60,200,120,.16);border-color:rgba(60,200,120,.35);color:#0f5b2f;}
.pc-alert--error{background:rgba(255, 60, 60, .14);border-color:rgba(255,60,60,.35);color:#8a0f0f;}

/* Footer spacing */
.cp-parentFooterFix{margin-top:28px;}

/* Responsive */
@media (max-width:820px){
  .pc-stats{grid-template-columns:1fr;}
  .pc-callouts{grid-template-columns:1fr;}
}

/* =============================
   Child page modular layout
   ============================= */

.pc-grid2{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:16px;
  align-items:start;
}

/* Two equal columns (used for Inventory + Ban History) */
.pc-grid2b{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:start;
}

@media (max-width:980px){
  .pc-grid2{grid-template-columns:1fr;}
  .pc-grid2b{grid-template-columns:1fr;}
}

/* Inventory grid */
.pc-invGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(72px, 1fr));
  gap:10px;
}
.pc-invItem{text-align:center;}
.pc-invItem img{
  width:54px;
  height:54px;
  border-radius:14px;
  border:2px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.95);
  display:block;
  margin:0 auto;
}
.pc-invId{margin-top:6px;font-size:12px;color:var(--cp-muted);font-weight:800;}

.pc-panel{
  background:rgba(255,255,255,0.88);
  border:2px solid rgba(0,0,0,0.06);
  border-radius:18px;
  box-shadow:var(--pc-shadow);
  overflow:hidden;
}

.pc-panelHeader{
  padding:14px 16px;
  font-weight:1000;
  color:var(--cp-ink);
  border-bottom:2px solid rgba(0,0,0,0.06);
  background:rgba(255,255,255,0.72);
}

.pc-sectionHeaderRow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px;}
.pc-sectionHeaderTitle{font-weight:1000;color:var(--cp-ink);font-size:20px;}
.pc-sectionHeaderHint{color:#4f768f;font-size:12px;font-weight:700;}

/* Ban history as cards (no horizontal scroll) */
.pc-banList{
  padding:14px 16px 16px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

@media (min-width:980px){
  .pc-banList{grid-template-columns:1fr 1fr;}
}

.pc-banCard{
  border:2px solid rgba(0,0,0,0.06);
  border-radius:16px;
  background:rgba(255,255,255,0.92);
  padding:12px 12px;
}

.pc-banCard.is-active{
  border-color:rgba(220,53,69,0.30);
  background:rgba(220,53,69,0.07);
}

.pc-banTop{display:flex;flex-direction:column;gap:6px;}
.pc-banMeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:#234a63;font-weight:700;font-size:13px;}
.pc-banDot{opacity:0.55;}
.pc-banReason{margin-top:10px;color:var(--cp-ink);font-weight:800;line-height:1.35;}

/* Puffle cards */
.pc-puffleGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px;
}

.pc-puffleCard{
  border:2px solid rgba(0,0,0,0.06);
  border-radius:18px;
  background:rgba(255,255,255,0.92);
  box-shadow:var(--pc-shadow);
  overflow:hidden;
}

.pc-puffleImage{
  position:relative;
  height:110px;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  background-color:rgba(234,242,247,0.55);
}

.pc-puffleName{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  padding:6px 10px;
  border-radius:14px;
  background:rgba(10,79,135,0.85);
  color:#fff;
  font-weight:1000;
  text-align:center;
  text-shadow:0 1px 0 rgba(0,0,0,0.25);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.pc-puffleMeta{padding:10px 12px 12px;}
.pc-puffleAdopted{color:#345b73;font-weight:800;font-size:12px;}
.pc-puffleAdopted span{color:var(--cp-ink);}
.pc-puffleStats{margin-top:6px;color:#234a63;font-weight:800;font-size:12px;line-height:1.35;}

/* Banned chip + badge overlay */
.pc-pill--banned{background:rgba(220,53,69,0.14);border-color:rgba(220,53,69,0.28);color:#b02a37;}

.pc-avatarSlot{position:relative;display:inline-block;}
.pc-modBadge{
  position:absolute;
  right:-6px;
  bottom:-6px;
  width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(255,255,255,0.92);
  border:2px solid rgba(0,0,0,0.10);
  box-shadow:0 6px 14px rgba(0,0,0,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
}
.pc-modBadge img{width:18px;height:18px;display:block;}
@media (max-width:720px){
  .cp-parentH1,.pc-title,.pc-h1{font-size:42px;}
  .cp-parentPanel,.pc-card{padding:24px 18px 18px;padding-top:40px;}
  .cp-avatarCell{width:78px;}
}

/* --- Puffle name treatment (cleaner: text over subtle bottom fade, no glass pill) --- */
.pc-puffleName{
  left:14px;
  right:14px;
  bottom:12px;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
  text-align:left;
  color:#ffffff;
  font-weight:1000;
  font-size:18px;
  letter-spacing:0.01em;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.35),
    0 6px 18px rgba(0,0,0,0.35);
}

/* Child page: make the playercard area feel more intentional */
.pc-playercardWrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Make the ban history anchor jump feel nicer */
#ban-history {
  scroll-margin-top: 18px;
}

/* Slightly stronger banned panel accent on the right column */
.pc-childDangerPanel {
  border: 2px solid rgba(220,53,69,0.22);
  background: rgba(220,53,69,0.04);
  border-radius: 18px;
}

/* --- Child page: Section header row (used for Puffles card section) --- */
.pc-sectionHeaderRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:2px 0 12px;
}
.pc-sectionHeaderTitle{
  font-weight:1000;
  color:var(--cp-ink);
  font-size:18px;
}
.pc-sectionHeaderHint{
  color:var(--cp-muted);
  font-weight:700;
  font-size:12px;
  line-height:1.25;
  text-align:right;
}
.pc-sectionHeaderHint code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:11px;
}

/* --- Child page: Puffles visual cards --- */
.pc-puffleGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.pc-puffleCard{
  border-radius:18px;
  overflow:hidden;
  border:2px solid rgba(0,0,0,0.06);
  background:rgba(255,255,255,0.92);
  box-shadow:var(--pc-shadow);
}
.pc-puffleImage{
  position:relative;
  height:118px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:rgba(11,43,69,0.06);
}
.pc-puffleImage::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  /* soft fade so the name is readable without a heavy bar */
  height:44%;
  background:linear-gradient(to top,
    rgba(0,0,0,0.42),
    rgba(0,0,0,0.18) 55%,
    rgba(0,0,0,0.00)
  );
  pointer-events:none;
}
.pc-puffleName{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:16px;
  /* "glass" chip instead of an opaque bar across the art */
  background:rgba(255,255,255,0.76);
  border:1px solid rgba(255,255,255,0.60);
  box-shadow:0 10px 20px rgba(0,0,0,0.18);
  color:var(--cp-ink);
  font-weight:1000;
  font-size:15px;
  letter-spacing:0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:2;
}
.pc-puffleMeta{
  padding:10px 12px 12px;
  color:var(--cp-ink);
}
.pc-puffleType{
  display:inline-block;
  font-weight:1000;
  font-size:12px;
  color:var(--cp-ink-2);
  background:rgba(11,43,69,0.06);
  border:1px solid rgba(11,43,69,0.10);
  border-radius:999px;
  padding:4px 8px;
}
.pc-puffleAdopted{
  margin-top:8px;
  color:var(--cp-muted);
  font-weight:800;
  font-size:12px;
}
.pc-puffleAdopted span{color:var(--cp-ink-2);font-weight:900;}
.pc-puffleStats{
  margin-top:6px;
  color:var(--cp-ink-2);
  font-weight:900;
  font-size:12px;
}

@media (max-width:980px){
  .pc-puffleGrid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:620px){
  .pc-sectionHeaderRow{flex-direction:column;align-items:flex-start;}
  .pc-sectionHeaderHint{text-align:left;}
  .pc-puffleGrid{grid-template-columns:1fr;}
}

/* Final override: puffle name should be simple text over the bottom fade (no pill) */
.pc-puffleName{
  display:block;
  align-items:initial;
  justify-content:initial;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:#ffffff;
  text-align:left;
  font-weight:1000;
  font-size:18px;
  letter-spacing:0.01em;
  text-shadow:0 2px 0 rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,0,0.35);
}