/* Creator profile page (views/creator.php): pastel streamer & artist theme.
   Scoped under .cp so the site's dark nav and footer are untouched. */

.cp {
  --pink: #ff8dc4; --pink2: #ffc4e4; --pink3: #ffe3f2;
  --lilac: #c7a4ff; --lilac2: #e6d7ff; --purple: #a06be6;
  --blue: #79dcf3; --blue2: #c5f1fb;
  --cream: #fff6fb; --card: #fff;
  --ink: #4a2f52; --ink2: #8b6f96; --ink3: #b79dc0;
  --cline: #f3d9ec; --cline2: #ecc9e2;
  --cdisp: 'Nunito', system-ui, sans-serif;
  position: relative;
  padding: 108px 0 70px;
  color: var(--ink);
  font-family: var(--cdisp);
  font-weight: 600;
  background:
    radial-gradient(circle at 12% 8%, var(--pink3), transparent 38%),
    radial-gradient(circle at 88% 4%, var(--lilac2), transparent 36%),
    radial-gradient(circle at 50% 100%, var(--blue2), transparent 50%),
    var(--cream);
  /* clip, not hidden: hidden would make .cp a scroll container, which
     breaks sticky/anchored positioning inside it. */
  overflow-x: clip;
}
.cp a { color: inherit; text-decoration: none; }
.cp img { display: block; max-width: 100%; }
.cp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* buttons */
.cp-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; padding: 11px 22px; border-radius: 40px; border: 2px solid var(--pink); background: transparent; color: var(--pink) !important; transition: transform .2s, background-color .2s, color .2s, border-color .2s; white-space: nowrap; }
.cp-btn:hover { background: var(--pink); color: #fff !important; transform: translateY(-2px); }
.cp-btn-fill { background: var(--pink); color: #fff !important; box-shadow: 0 8px 20px -8px var(--pink); }
.cp-btn-fill:hover { background: var(--purple); border-color: var(--purple); }
.cp-btn-purple { background: var(--purple); border-color: var(--purple); color: #fff !important; box-shadow: 0 8px 20px -8px var(--purple); }
.cp-btn-purple:hover { background: var(--pink); border-color: var(--pink); }
.cp-btn-white { background: #fff; border-color: #fff; color: var(--purple) !important; }
.cp-btn-white:hover { background: var(--ink); border-color: var(--ink); color: #fff !important; }
.cp-btn-ghost { border-color: rgba(255, 255, 255, .55); color: #fff !important; }
.cp-btn-ghost:hover { background: #fff; border-color: #fff; color: var(--purple) !important; }

/* cover */
.cp-cover-card { position: relative; height: 320px; border-radius: 30px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 22px 50px -24px var(--pink); background: linear-gradient(135deg, var(--lilac2), var(--pink3)); }
.cp-cover-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.cp-cover-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(74, 47, 82, .45)); pointer-events: none; }
.cp-cover-share { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; gap: 8px; }
.cp-cover-share button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--pink); font-size: 16px; cursor: pointer; transition: transform .2s, background-color .2s, color .2s; }
.cp-cover-share button:hover { background: var(--pink); color: #fff; transform: translateY(-2px); }
.cp-cover-watch { position: absolute; right: 18px; bottom: 18px; z-index: 2; }

/* identity */
/* Only the avatar overlaps the cover; name and buttons sit below it. */
.cp-identity { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: flex-end; margin-top: 16px; position: relative; z-index: 2; }
.cp-avatar { margin-top: -86px; width: 150px; height: 150px; border-radius: 50%; border: 6px solid #fff; overflow: hidden; background: linear-gradient(135deg, var(--pink3), var(--lilac2)); box-shadow: 0 16px 34px -14px var(--pink); display: flex; align-items: center; justify-content: center; }
.cp-avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); }
.cp-avatar span { font-weight: 900; font-size: 64px; color: var(--pink); }
.cp-id-main { padding-bottom: 8px; }
.cp-name { font-family: var(--cdisp); font-weight: 900; font-size: clamp(38px, 5vw, 60px); line-height: 1; letter-spacing: -.01em; color: var(--ink); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; text-transform: none; }
.cp-partner { font-weight: 800; font-size: 14px; color: #fff; background: var(--blue); padding: 5px 12px; border-radius: 40px; letter-spacing: 0; }
.cp-handle { color: var(--ink2); font-weight: 700; font-size: 16px; margin-top: 8px; }
.cp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cp-tag { font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 40px; background: #fff; border: 2px solid var(--cline2); color: var(--ink2); }
.cp-tag.p { background: var(--pink3); border-color: var(--pink2); color: #e5629f; }
.cp-tag.l { background: var(--lilac2); border-color: var(--lilac); color: var(--purple); }
.cp-tag.b { background: var(--blue2); border-color: var(--blue); color: #2a9cb8; }
.cp-id-actions { display: flex; gap: 10px; padding-bottom: 12px; flex-wrap: wrap; }


/* stats */
.cp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 18px; }
.cp-stat { background: #fff; border: 2px solid var(--cline); border-radius: 24px; padding: 20px 22px; box-shadow: 0 12px 26px -18px var(--pink); }
.cp-stat .ico { font-size: 22px; margin-bottom: 6px; }
.cp-stat b { display: block; font-weight: 900; font-size: 34px; line-height: 1; color: var(--ink); }
.cp-stat .l { font-weight: 700; font-size: 13px; color: var(--ink3); margin-top: 6px; }
.cp-stat.earn b { color: var(--pink); }
.cp-stat .s { font-size: 12px; color: var(--ink3); margin-top: 2px; }

/* sections */
.cp-sec { padding: 56px 0 0; }
.cp-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.cp-title { font-family: var(--cdisp); font-weight: 900; font-size: clamp(28px, 4vw, 44px); line-height: 1; color: var(--ink); display: flex; align-items: center; gap: 12px; text-transform: none; letter-spacing: -.01em; }
.cp-title .e { font-size: .8em; }
.cp-sec-links { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-sec-link { font-weight: 800; font-size: 14px; color: var(--purple) !important; background: var(--lilac2); padding: 9px 18px; border-radius: 40px; transition: background-color .2s, color .2s; }
.cp-sec-link:hover { background: var(--purple); color: #fff !important; }
.cp-empty { color: var(--ink2); background: #fff; border: 2px dashed var(--cline2); border-radius: 20px; padding: 26px; text-align: center; }
.cp-kick { font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--purple); }

/* about + art */
.cp-feature { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: stretch; }
.cp-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; border-radius: 26px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 18px 40px -22px var(--pink); background: radial-gradient(circle at 30% 30%, var(--blue2), transparent 55%), radial-gradient(circle at 70% 70%, var(--pink3), transparent 60%), #fff; }
.cp-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .5s cubic-bezier(.16, .84, .28, 1); }
.cp-art:hover img { transform: scale(1.03); }
.cp-art-missing { color: var(--ink3); font-weight: 800; border: 2px dashed var(--cline2); border-radius: 18px; padding: 30px; }
.cp-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--pink); font-size: 28px; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px -10px var(--pink); transition: transform .2s; }
.cp-art:hover .cp-play, .cp-video:hover .cp-play { transform: translate(-50%, -50%) scale(1.08); }
.cp-play.sm { width: 50px; height: 50px; font-size: 18px; }
.cp-art-cap { position: absolute; left: 16px; bottom: 16px; font-weight: 800; font-size: 14px; color: #fff; background: rgba(160, 107, 230, .92); padding: 8px 16px; border-radius: 40px; }
.cp-about { background: #fff; border: 2px solid var(--cline); border-radius: 26px; padding: 30px 28px; display: flex; flex-direction: column; }
.cp-about h3 { font-family: var(--cdisp); font-weight: 900; font-size: 26px; margin-bottom: 14px; color: var(--ink); text-transform: none; }
.cp-about p { color: var(--ink2); font-size: 15.5px; line-height: 1.75; font-weight: 600; }
.cp-about p + p { margin-top: 12px; }
.cp-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 24px; }
.cp-soc { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 16px; font-weight: 800; font-size: 14px; transition: transform .2s, box-shadow .2s; }
.cp-soc:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -14px currentColor; }
.cp-soc .i { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; }
.cp-soc .i svg { width: 15px; height: 15px; fill: currentColor; }
.cp-soc.twitch { background: #efe6ff; color: #7a3fd4; } .cp-soc.twitch .i { background: #9146ff; }
.cp-soc.youtube { background: #ffe6ec; color: #d63652; } .cp-soc.youtube .i { background: #ff0033; }
.cp-soc.discord { background: #e6ecff; color: #4655c9; } .cp-soc.discord .i { background: #5865f2; }
.cp-soc.instagram { background: #ffe9f2; color: #c13584; } .cp-soc.instagram .i { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.cp-soc.x { background: #eeeeee; color: #333; } .cp-soc.x .i { background: #000; }
.cp-soc.tiktok { background: #e6fbfc; color: #1c8f97; } .cp-soc.tiktok .i { background: #111; }
.cp-soc.snapchat { background: #fffbdd; color: #8a7a00; } .cp-soc.snapchat .i { background: #fffc00; color: #4a2f52; }

/* videos */
.cp-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cp-video { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--cline); border-radius: 22px; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.cp-video:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -24px var(--pink); }
.cp-video-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lilac2); }
.cp-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cp-video-title { padding: 14px 16px 4px; font-weight: 800; font-size: 15px; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-video-date { padding: 0 16px 16px; font-size: 12.5px; color: var(--ink3); }

/* products */
.cp-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cp-piece { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--cline); border-radius: 24px; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.cp-piece:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -22px var(--pink); }
.cp-piece-frame { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--pink3); }
.cp-piece-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, .84, .28, 1); }
.cp-piece:hover .cp-piece-frame img { transform: scale(1.06); }
.cp-piece-tag { position: absolute; top: 12px; left: 12px; font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 40px; color: #fff; background: var(--pink); }
.cp-piece-tag.new { background: var(--blue); } .cp-piece-tag.sale { background: var(--purple); }
.cp-piece-meta { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.cp-piece-name { font-weight: 800; font-size: 18px; line-height: 1.15; color: var(--ink); }
.cp-piece-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-piece-price { font-weight: 900; font-size: 18px; color: var(--ink); }
.cp-piece-price s { color: var(--ink3); font-weight: 600; font-size: 13px; }
.cp-piece-add { font-weight: 800; font-size: 13px; padding: 8px 16px; border-radius: 40px; background: var(--pink); color: #fff; transition: background-color .2s; }
.cp-piece:hover .cp-piece-add { background: var(--purple); }

/* featured */
.cp-spot { display: grid; grid-template-columns: .9fr 1.1fr; border-radius: 30px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 22px 50px -26px var(--purple); background: linear-gradient(135deg, var(--lilac2), var(--pink3)); }
.cp-spot-img { min-height: 400px; background: #fff; }
.cp-spot-img img { width: 100%; height: 100%; object-fit: cover; }
.cp-spot-copy { padding: 44px 42px; display: flex; flex-direction: column; justify-content: center; }
.cp-spot-copy h3 { font-family: var(--cdisp); font-weight: 900; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; margin: 12px 0; color: var(--ink); text-transform: none; }
.cp-spot-copy p { color: var(--ink2); font-size: 15.5px; line-height: 1.7; max-width: 440px; }
.cp-spot-copy .cp-spot-price { font-weight: 900; font-size: 26px; color: var(--pink); margin: 14px 0 22px; }
.cp-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* join */
.cp-join { margin-top: 56px; }
/* The join card takes its two colours from the page, falling back to the
   site's pink and purple. A partner page that sets --join-a/--join-b gets a
   card in its own palette without restating the whole component; one that
   sets nothing looks exactly as it always has. --join-ink exists because a
   light pairing needs dark type on it, and the card is white-on-dark by
   default. */
.cp-join-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; padding: 56px 50px; border-radius: 34px; background: linear-gradient(135deg, var(--join-a, var(--pink)), var(--join-b, var(--purple))); box-shadow: 0 26px 60px -28px var(--join-glow, var(--purple)); color: var(--join-ink, #fff); }
.cp-join-card::before { content: '♡'; position: absolute; right: -30px; top: -110px; font-size: 340px; color: var(--join-wash, rgba(255, 255, 255, .1)); pointer-events: none; }
.cp-join-card .cp-kick { color: var(--join-ink, #fff); opacity: .9; }
.cp-join-card h2 { font-family: var(--cdisp); font-weight: 900; font-size: clamp(32px, 4.4vw, 52px); line-height: 1; margin: 14px 0 18px; color: var(--join-ink, #fff); text-transform: none; }
.cp-join-card p { color: var(--join-ink, #fff); opacity: .94; font-size: 16px; line-height: 1.7; max-width: 440px; margin-bottom: 24px; }
.cp-nums { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cp-num { background: var(--join-tile, rgba(255, 255, 255, .16)); border: 2px solid var(--join-tile-line, rgba(255, 255, 255, .28)); border-radius: 20px; padding: 20px; }
.cp-num b { display: block; font-weight: 900; font-size: 32px; line-height: 1; }
.cp-num .l { font-size: 12.5px; margin-top: 8px; line-height: 1.4; opacity: .92; }

@media (max-width: 1024px) {
  .cp-stats { grid-template-columns: 1fr 1fr; }
  .cp-feature, .cp-spot, .cp-join-card { grid-template-columns: 1fr; }
  .cp-gal { grid-template-columns: repeat(2, 1fr); }
  .cp-videos { grid-template-columns: 1fr 1fr; }
  .cp-art { min-height: 420px; }
  .cp-spot-img { min-height: 0; aspect-ratio: 4 / 3; max-height: 460px; }
  .cp-join-card { padding: 42px 30px; gap: 30px; }
}
@media (max-width: 768px) {
  .cp { padding-top: 150px; }
  .cp-wrap { padding: 0 18px; }
  .cp-identity { grid-template-columns: 1fr; gap: 12px; margin-top: 0; }
  .cp-avatar { width: 120px; height: 120px; margin-top: -60px; }
  .cp-id-actions { padding-bottom: 0; }
  .cp-cover-card { height: 220px; }
}
@media (max-width: 560px) {
  .cp-gal { gap: 12px; }
  .cp-videos, .cp-socials { grid-template-columns: 1fr; }
  .cp-piece-meta { padding: 12px; }
  .cp-piece-bot { flex-direction: column; align-items: flex-start; }
  .cp-spot-copy { padding: 30px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cp *, .cp *::before { transition: none !important; }
}

/* ---------------- creator header: frosted glass ----------------
   Fixed bar in the creator palette. The blur sits on one static element (no
   animation under it), and perf-lite devices get a solid tint instead. */
body.creator-page { background: #fff6fb; }
.cp-sec, .cp-join, .cp { scroll-margin-top: 104px; }
.cpnav { position: fixed; top: 12px; left: 0; right: 0; z-index: 100; padding: 0 16px; pointer-events: none; font-family: 'Nunito', system-ui, sans-serif; }
.cpnav-in {
  pointer-events: auto; max-width: 1232px; margin: 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 8px 10px 8px 14px; border-radius: 24px;
  background: rgba(255, 246, 251, .58); border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 14px 34px -20px rgba(160, 107, 230, .6), inset 0 1px 0 rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .cpnav-in { background: rgba(255, 246, 251, .94); } }
.perf-lite .cpnav-in { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 246, 251, .96); }
.cpnav a { text-decoration: none; }
.cpnav-drxp img { display: block; height: 40px; width: auto; }
.cpnav-who { display: flex; align-items: center; gap: 9px; padding-left: 12px; border-left: 2px solid rgba(236, 201, 226, .9); color: #4a2f52; font-weight: 900; font-size: 17px; white-space: nowrap; }
.cpnav-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 0 4px 12px -6px #ff8dc4; flex: 0 0 auto; }
.cpnav-av img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 38%; transform: scale(1.7); transform-origin: 66% 38%; }
.cpnav-links { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.cpnav-links::-webkit-scrollbar { display: none; }
.cpnav-links a { flex: 0 0 auto; padding: 8px 15px; border-radius: 40px; color: #8b6f96; font-weight: 800; font-size: 14px; transition: background-color .2s, color .2s; }
.cpnav-links a:hover { color: #ff5fae; background: rgba(255, 255, 255, .7); }
.cpnav-links a[aria-current="true"] { background: #ff8dc4; color: #fff; box-shadow: 0 6px 16px -8px #ff8dc4; }
.cpnav-actions { display: flex; align-items: center; gap: 8px; }
.cpnav-cart { padding: 9px 16px; border-radius: 40px; background: #a06be6; color: #fff; font-weight: 800; font-size: 14px; white-space: nowrap; box-shadow: 0 8px 18px -10px #a06be6; transition: background-color .2s, transform .2s; }
.cpnav-cart:hover { background: #ff8dc4; transform: translateY(-1px); }
.cpnav-burger { display: none; flex-direction: column; gap: 4px; padding: 10px 8px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .7); cursor: pointer; }
.cpnav-burger span { display: block; width: 20px; height: 2.5px; border-radius: 3px; background: #a06be6; }
@media (max-width: 960px) {
  .cpnav-in { flex-wrap: wrap; row-gap: 6px; }
  .cpnav-links { order: 3; flex: 1 0 100%; margin-left: 0; }
  .cpnav-actions { margin-left: auto; }
  .cpnav-burger { display: flex; }
}
@media (max-width: 560px) {
  .cpnav { top: 8px; padding: 0 10px; }
  .cpnav-drxp img { height: 32px; }
  .cpnav-who { font-size: 15px; padding-left: 9px; }
  .cpnav-links a { padding: 7px 12px; font-size: 13px; }
  .cp-sec, .cp-join, .cp { scroll-margin-top: 130px; }
}

/* Phone refinements: one compact header row plus the menu row, the creator's
   name tucked away (their avatar stays), and no orphaned stat tile. */
.cp-art-cap { transition: background-color .2s, transform .2s; }
.cp-art:hover .cp-art-cap { background: rgba(255, 141, 196, .95); transform: translateY(-2px); }
@media (max-width: 560px) {
  .cp { padding-top: 132px; }
  .cpnav-in { padding: 7px 8px 7px 12px; column-gap: 10px; }
  .cpnav-who { padding-left: 8px; }
  .cpnav-who > span:not(.cpnav-av) { display: none; }
  .cpnav-cart { padding: 8px 13px; font-size: 13px; }
  .cp-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cp-stat { padding: 16px; }
  .cp-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cp-art { min-height: 520px; }
}

/* creator header: account icon (shopper accounts) */
.cpnav-account { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .75); color: #a06be6; transition: background-color .2s, color .2s; }
.cpnav-account svg { width: 18px; height: 18px; fill: currentColor; }
.cpnav-account:hover { background: #a06be6; color: #fff; }
.cp-soc.kick { background: #e4fbd9; color: #2a7a0a; } .cp-soc.kick .i { background: #53fc18; color: #0b0e0f; }
.cp-soc.bluesky { background: #e2efff; color: #0b5fcc; } .cp-soc.bluesky .i { background: #1185fe; }
.cp-soc.carrd { background: #eceffa; color: #3f4f93; } .cp-soc.carrd .i { background: #596cb0; }
.cp-soc.website { background: #f1e9f5; color: #4a2f52; } .cp-soc.website .i { background: #4a2f52; }


/* ============================================================
   THE VIDEO PLAYER (shared by every partner page)

   A press opens the video centred on a dimmed backdrop rather than
   swelling the card it came from: Twitch draws its mature-content gate
   and its controls inside the frame and neither fits a thumbnail, and a
   card that grows in place shoves the rest of the grid around under the
   pointer.

   Deliberately neutral, so it sits correctly on every partner's palette.
   Nothing scales an iframe — the panel fades and rises, and the iframe is
   only built once it is open.
   ============================================================ */
.cp-player {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vmin, 48px);
  background: rgba(8, 6, 12, .93);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  opacity: 0; transition: opacity .3s ease;
}
.cp-player[hidden] { display: none; }
.cp-player.is-open { opacity: 1; }

.cp-player-panel {
  width: min(100%, 1060px);
  opacity: 0; transform: translate3d(0, 16px, 0) scale(.94);
  transition: opacity .34s ease, transform .42s cubic-bezier(.19, .84, .26, 1);
  will-change: transform, opacity;
}
.cp-player.is-open .cp-player-panel { opacity: 1; transform: none; }
.cp-player.is-tall .cp-player-panel { width: min(100%, 420px); }

.cp-player-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: #0B0810; border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .7);
}
.cp-player.is-tall .cp-player-frame { aspect-ratio: 9 / 16; max-height: 78vh; margin-inline: auto; }
.cp-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.cp-player-caption {
  margin: 14px 0 0; text-align: center; color: #fff;
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 700; font-size: 15px; line-height: 1.5;
}

.cp-player-close {
  position: absolute; top: 18px; right: 20px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12);
  color: #fff; font-size: 27px; line-height: 1;
  transition: background .18s ease, transform .18s ease;
}
.cp-player-close:hover { background: rgba(255, 255, 255, .24); transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .cp-player, .cp-player-panel { transition: none; }
}

/* ------------------------------------------------------- partner gallery */
/* The images a partner uploads themselves (partials/creator-gallery). Every
   rule hangs off .cpg- so a custom partner page can restyle the whole thing
   without the markup moving. Squares, because ten photographs of different
   shapes otherwise read as a mess rather than a set. */
.cpg-head { margin-bottom: 22px; }
.cpg-kick { font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--purple); margin: 0 0 6px; }
.cpg-title { font-family: var(--cdisp); font-weight: 900; font-size: clamp(28px, 4vw, 44px); line-height: 1; color: var(--ink); text-transform: none; margin: 0; }
.cpg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin: 0; padding: 0; }
.cpg-grid li { list-style: none; }
.cpg-grid a { display: block; border-radius: 16px; overflow: hidden; }
/* height:auto matters — the img carries width/height attributes, and
   without it the attribute's height wins and aspect-ratio never gets to
   compute one. */
.cpg-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .35s ease; }
.cpg-grid a:hover img, .cpg-grid a:focus-visible img { transform: scale(1.05); }
.cpg-grid a:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cpg-grid img { transition: none; } }

/* The page's scrollbars in the pastel pink (site.css reads --scroll-acc
   off <html>). A partner with a page of their own sets theirs instead. */
html:has(> body.creator-page:not([class*="cp-theme-"])) { --scroll-acc: #ff8dc4; }

/* Shop / Hire for art in a custom page's own menu (partials/two-sides,
   'cpnav'). Built from the menu's own pills, so each partner's theme colours
   the side you are on; Hire carries a pen and, when open, a green dot. */
.cpnav-sides { flex: none; margin-left: 6px; padding: 3px; gap: 2px; border-radius: 40px; background: rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); overflow: visible; }
.cpnav-sides a { display: inline-flex; align-items: center; gap: 6px; }
.cpnav-sides svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.cpnav-sides-dot { width: 7px; height: 7px; border-radius: 50%; background: #3FCB6B; box-shadow: 0 0 8px #3FCB6B; }
.cpnav-links + .cpnav-sides { margin-left: 8px; }
/* Most custom menus are long: below a wide screen the toggle says just
   Shop / Hire, so their own menu keeps its room. */
@media (max-width: 1400px) { .cpnav-sides-more { display: none; } .cpnav-sides a { padding-inline: 12px; } }
@media (max-width: 960px) {
  .cpnav-sides { order: 2; flex: none; margin-left: auto; }
  .cpnav-links + .cpnav-sides { margin-left: auto; }
}
@media (max-width: 560px) {
  .cpnav-sides-more { display: none; }
  .cpnav-sides a { padding: 7px 10px; }
}

/* ---- the partner's own colours (profile['theme'], PageTheme) ----
   Six colours come in as --t-*; every shade below is mixed from them, so
   any combination still looks finished. Without a theme the pastel values
   at the top of this file stand. */
.cp.cp-themed {
  --cream: var(--t-bg); --card: var(--t-card); --ink: var(--t-text);
  --ink2: color-mix(in srgb, var(--t-text) 72%, var(--t-bg)); --ink3: color-mix(in srgb, var(--t-text) 48%, var(--t-bg));
  --pink: var(--t-main); --pink2: color-mix(in srgb, var(--t-main) 45%, var(--t-bg)); --pink3: color-mix(in srgb, var(--t-main) 18%, var(--t-bg));
  --purple: var(--t-second); --lilac: color-mix(in srgb, var(--t-second) 70%, var(--t-bg)); --lilac2: color-mix(in srgb, var(--t-second) 22%, var(--t-bg));
  --blue: var(--t-third); --blue2: color-mix(in srgb, var(--t-third) 28%, var(--t-bg));
  --cline: color-mix(in srgb, var(--t-main) 22%, var(--t-card)); --cline2: color-mix(in srgb, var(--t-main) 34%, var(--t-card));
}

/* ---- video rows: Twitch VODs, TikToks, YouTube (views/creator.php) ---- */
.cp-subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 12px; }
.cp-subhead:first-of-type { margin-top: 6px; }
.cp-subhead h3 { margin: 0; font-size: 18px; font-weight: 900; color: var(--ink); }
.cp-subhead a { font-size: 13px; font-weight: 900; color: var(--purple); }
.cp-rail { display: grid; grid-auto-flow: column; gap: 16px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.cp-rail::-webkit-scrollbar { height: 8px; }
.cp-rail::-webkit-scrollbar-thumb { background: var(--pink2); border-radius: 9px; }
.cp-rail.is-wide { grid-auto-columns: minmax(260px, 300px); }
.cp-rail.is-tall { grid-auto-columns: 180px; }
.cp-clip { scroll-snap-align: start; display: grid; align-content: start; gap: 8px; margin: 0; color: var(--ink); }
.cp-clip-thumb { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--pink3); border: 3px solid var(--card); box-shadow: 0 10px 24px -14px var(--ink); }
.is-wide .cp-clip-thumb { aspect-ratio: 16 / 9; }
.is-tall .cp-clip-thumb { aspect-ratio: 9 / 16; }
.cp-clip-thumb > a, .cp-clip-thumb img, .cp-clip-thumb iframe { display: block; width: 100%; height: 100%; }
.cp-clip-thumb img { object-fit: cover; }
.cp-clip-badge { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 900; color: #fff; }
.cp-clip-badge.is-twitch { background: #9146FF; } .cp-clip-badge.is-tiktok { background: #111; } .cp-clip-badge.is-youtube { background: #FF0033; }
.cp-clip-play { position: absolute; inset: 0; display: grid; place-items: center; }
.cp-clip-play span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 18px; box-shadow: 0 8px 18px -6px var(--pink); transition: transform .2s; }
.cp-clip:hover .cp-clip-play span { transform: scale(1.08); }
.cp-clip-title { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) { .cp-rail.is-wide { grid-auto-columns: 78%; } .cp-rail.is-tall { grid-auto-columns: 46%; } }
@media (hover: none) { .cp-clip-play span { transition: none; } }

/* The rest of the default page in the partner's colours: the cards that
   are white in the pastel look, the page behind, and the nav bar. */
.cp-themed :is(.cp-tag, .cp-stat, .cp-empty, .cp-about, .cp-video, .cp-piece, .cp-spot-img) { background: var(--card); }
.cp-themed .cp-name, .cp-themed .cp-title, .cp-themed .cp-about h3 { color: var(--ink); }
body.creator-page.cp-has-theme { background: var(--t-bg); }
html:has(> body.creator-page.cp-has-theme) { --scroll-acc: var(--t-main); }
body.cp-has-theme .cpnav-in { background: color-mix(in srgb, var(--t-card) 72%, transparent); border-color: color-mix(in srgb, var(--t-text) 14%, transparent); box-shadow: 0 14px 34px -20px var(--t-main), inset 0 1px 0 color-mix(in srgb, var(--t-text) 8%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.cp-has-theme .cpnav-in { background: color-mix(in srgb, var(--t-card) 96%, transparent); } }
.perf-lite body.cp-has-theme .cpnav-in, body.cp-has-theme.perf-lite .cpnav-in { background: color-mix(in srgb, var(--t-card) 96%, transparent); }
body.cp-has-theme .cpnav-who { color: var(--t-text); border-left-color: color-mix(in srgb, var(--t-main) 40%, transparent); }
body.cp-has-theme .cpnav-av { border-color: var(--t-card); box-shadow: 0 4px 12px -6px var(--t-main); }
body.cp-has-theme .cpnav-links a { color: color-mix(in srgb, var(--t-text) 72%, var(--t-card)); }
body.cp-has-theme .cpnav-links a:hover { color: var(--t-main); background: color-mix(in srgb, var(--t-main) 14%, transparent); }
body.cp-has-theme :is(.cpnav-burger, .cpnav-account) { background: color-mix(in srgb, var(--t-card) 72%, transparent); color: var(--t-text); }

/* partials/creator-additions on a custom page: what a partner added in the
   Dash after their page was built. Custom pages don't all define the
   default page's colour names, so this takes its colours from the page
   around it (currentColor) and only uses theirs where they exist. */
body[class*="cp-theme-"] .cpg, body[class*="cp-theme-"] .cp-additions { color: inherit; }
body[class*="cp-theme-"] .cpg-title, body[class*="cp-theme-"] .cp-additions .cp-subhead h3 { color: var(--ink, currentColor); }
body[class*="cp-theme-"] .cpg-kick { color: var(--purple, currentColor); }
body[class*="cp-theme-"] .cp-additions .cp-clip { color: inherit; }
body[class*="cp-theme-"] .cp-additions .cp-clip-thumb { background: var(--pink3, color-mix(in srgb, currentColor 8%, transparent)); border-color: var(--card, color-mix(in srgb, currentColor 16%, transparent)); box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .5); }
body[class*="cp-theme-"] .cp-additions .cp-clip-play span { background: var(--pink, var(--acc, #ff6b35)); box-shadow: none; }
body[class*="cp-theme-"] .cp-additions .cp-rail::-webkit-scrollbar-thumb { background: color-mix(in srgb, currentColor 30%, transparent); }
body[class*="cp-theme-"] .cp-additions .cp-subhead h3 { font-size: clamp(22px, 3vw, 30px); line-height: 1.1; }