/* TeenConnect Celebrity Titles v5
   CSS-built premium title skins.
   Only the user's supplied crown/diamond emblems are image assets.
   Everything else is CSS: frame, stage, glow, ornaments, reflections, animation. */

/* ---------- shared badge core ---------- */
.profile-title-badge.tc-title-v5{
  --h:42px;
  --w:178px;
  --r:14px;
  --edge1:#67e8ff;
  --edge2:#a976ff;
  --metal:#f4d27e;
  --ink1:#0b1534;
  --ink2:#1a2a5b;
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:var(--h)!important;
  min-width:var(--w)!important;
  padding:0 28px 0 56px!important;
  margin:0 4px!important;
  border:0!important;
  border-radius:var(--r)!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  isolation:isolate!important;
  white-space:nowrap!important;
  line-height:1!important;
  font-size:12px!important;
  font-weight:950!important;
  letter-spacing:.045em!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.12),transparent 27%),
    linear-gradient(135deg,var(--ink1) 0%,var(--ink2) 54%,var(--ink1) 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 9px 18px rgba(255,255,255,.045),
    inset 0 -12px 22px rgba(1,5,18,.24),
    0 5px 15px rgba(7,13,38,.25),
    0 0 16px color-mix(in srgb,var(--edge1) 24%,transparent)!important;
}

/* metallic double border */
.profile-title-badge.tc-title-v5:before{
  content:""!important;
  position:absolute!important;
  inset:-2px!important;
  border-radius:calc(var(--r) + 2px)!important;
  padding:2px!important;
  background:
    linear-gradient(110deg,
      var(--edge1) 0%,
      rgba(255,255,255,.95) 16%,
      var(--metal) 34%,
      rgba(255,255,255,.98) 50%,
      var(--edge2) 69%,
      var(--metal) 84%,
      var(--edge1) 100%)!important;
  background-size:240% 100%!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask-composite:exclude!important;
  filter:
    drop-shadow(0 0 5px color-mix(in srgb,var(--edge1) 42%,transparent))
    drop-shadow(0 0 6px color-mix(in srgb,var(--edge2) 28%,transparent))!important;
  z-index:7!important;
  pointer-events:none!important;
  animation:tcTitleV5Border 7.2s linear infinite!important;
}

/* moving glass sheen */
.profile-title-badge.tc-title-v5:after{
  content:""!important;
  position:absolute!important;
  top:2px!important;
  bottom:2px!important;
  left:-40%!important;
  width:26%!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent)!important;
  transform:skewX(-18deg)!important;
  z-index:5!important;
  opacity:0!important;
  pointer-events:none!important;
  animation:tcTitleV5Sheen 5.6s ease-in-out infinite!important;
}

.profile-title-badge.tc-title-v5 .tc-title-v5-text{
  position:relative!important;
  z-index:9!important;
  min-width:78px!important;
  text-align:center!important;
}

/* left premium medallion */
.profile-title-badge.tc-title-v5 .tc-title-v5-medal{
  position:absolute!important;
  left:-10px!important;
  top:50%!important;
  width:54px!important;
  height:54px!important;
  transform:translateY(-50%)!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  z-index:11!important;
  overflow:visible!important;
  background:
    radial-gradient(circle at 34% 25%,rgba(255,255,255,.18),transparent 26%),
    linear-gradient(145deg,#0d1b45,#0a1029 70%)!important;
  border:2px solid var(--metal)!important;
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb,var(--edge1) 28%,transparent),
    inset 0 0 18px rgba(255,255,255,.05),
    0 0 0 3px rgba(255,255,255,.055),
    0 0 14px color-mix(in srgb,var(--edge1) 30%,transparent)!important;
}
.profile-title-badge.tc-title-v5 .tc-title-v5-medal:before{
  content:""!important;
  position:absolute!important;
  inset:-8px!important;
  border-radius:50%!important;
  border:1.5px solid color-mix(in srgb,var(--edge1) 65%,transparent)!important;
  border-right-color:var(--edge2)!important;
  border-bottom-color:transparent!important;
  box-shadow:0 0 10px color-mix(in srgb,var(--edge1) 28%,transparent)!important;
  animation:tcTitleV5Orbit 8s linear infinite!important;
}
.profile-title-badge.tc-title-v5 .tc-title-v5-medal:after{
  content:""!important;
  position:absolute!important;
  inset:-15px!important;
  border-radius:50%!important;
  background:
    conic-gradient(from 0deg,
      transparent 0 13%,
      color-mix(in srgb,var(--edge1) 72%,transparent) 14% 16%,
      transparent 17% 44%,
      var(--metal) 45% 47%,
      transparent 48% 74%,
      color-mix(in srgb,var(--edge2) 72%,transparent) 75% 77%,
      transparent 78% 100%)!important;
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 59%)!important;
  mask:radial-gradient(circle,transparent 58%,#000 59%)!important;
  opacity:.78!important;
  animation:tcTitleV5Orbit 12s linear infinite reverse!important;
}

/* user's supplied emblem */
.profile-title-badge.tc-title-v5 .tc-title-v5-icon{
  position:relative!important;
  z-index:4!important;
  width:30px!important;
  height:30px!important;
  object-fit:contain!important;
  display:block!important;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.18))
    drop-shadow(0 0 7px color-mix(in srgb,var(--edge1) 34%,transparent))!important;
  animation:tcTitleV5IconFloat 3.2s ease-in-out infinite!important;
}

/* bevel caps */
.profile-title-badge.tc-title-v5 .tc-title-v5-cap{
  position:absolute!important;
  top:50%!important;
  width:28px!important;
  height:34px!important;
  transform:translateY(-50%)!important;
  z-index:2!important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--edge1) 92%,#fff 8%),
      var(--metal) 50%,
      color-mix(in srgb,var(--edge2) 90%,#fff 10%))!important;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--edge1) 28%,transparent))!important;
}
.profile-title-badge.tc-title-v5 .tc-title-v5-cap.left{
  left:-24px!important;
  clip-path:polygon(100% 0,100% 100%,55% 84%,0 50%,55% 16%)!important;
}
.profile-title-badge.tc-title-v5 .tc-title-v5-cap.right{
  right:-22px!important;
  clip-path:polygon(0 0,0 100%,45% 84%,100% 50%,45% 16%)!important;
}

/* top/bottom gems */
.profile-title-badge.tc-title-v5 .tc-title-v5-jewel{
  position:absolute!important;
  left:53%!important;
  width:10px!important;
  height:10px!important;
  transform:translateX(-50%) rotate(45deg)!important;
  z-index:12!important;
  border:1px solid rgba(255,255,255,.74)!important;
  background:linear-gradient(135deg,var(--edge1),var(--metal) 50%,var(--edge2))!important;
  box-shadow:0 0 8px color-mix(in srgb,var(--edge1) 40%,transparent)!important;
  animation:tcTitleV5Gem 2.8s ease-in-out infinite!important;
}
.profile-title-badge.tc-title-v5 .tc-title-v5-jewel.top{top:-7px!important}
.profile-title-badge.tc-title-v5 .tc-title-v5-jewel.bottom{bottom:-7px!important;animation-delay:.45s!important}

/* ---------- operator ---------- */
.profile-title-badge.tc-title-v5.tc-title-operator{
  --w:184px;
  --edge1:#55d7ff;
  --edge2:#5c96ff;
  --metal:#ffd86e;
  --ink1:#071227;
  --ink2:#12366d;
  color:#fff0b2!important;
  min-width:var(--w)!important;
  background:
    radial-gradient(circle at 82% 36%,rgba(79,183,255,.16),transparent 25%),
    linear-gradient(135deg,#061124 0%,#0a2450 43%,#173e79 72%,#08152f 100%)!important;
}
.profile-title-badge.tc-title-v5.tc-title-operator .tc-title-v5-text{
  background:linear-gradient(180deg,#fff9da 0%,#ffe896 40%,#f0c95a 72%,#fff7d2 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  text-shadow:none!important;
  letter-spacing:.06em!important;
}

/* ---------- partner ---------- */
.profile-title-badge.tc-title-v5.tc-title-partner{
  --w:184px;
  --edge1:#b579ff;
  --edge2:#f5a1e2;
  --metal:#efbf87;
  --ink1:#160a3a;
  --ink2:#43227a;
  min-width:var(--w)!important;
  color:#f6eaff!important;
  background:
    radial-gradient(circle at 80% 22%,rgba(226,155,255,.20),transparent 25%),
    radial-gradient(circle at 20% 78%,rgba(99,123,255,.14),transparent 24%),
    linear-gradient(135deg,#11082d 0%,#28145b 44%,#512487 74%,#21103f 100%)!important;
}
.profile-title-badge.tc-title-v5.tc-title-partner .tc-title-v5-text{
  background:linear-gradient(180deg,#ffffff 0%,#eee0ff 36%,#c8aaff 72%,#fff1fb 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  text-shadow:none!important;
  letter-spacing:.05em!important;
}

/* ---------- shop preview: make it look like a collectible title skin ---------- */
.profile-item-preview.type-title:has(.tc-title-v5){
  position:relative!important;
  overflow:hidden!important;
  min-height:146px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
}
.profile-item-preview.type-title:has(.tc-title-v5.tc-title-operator){
  background:
    radial-gradient(circle at 50% 102%,rgba(41,121,255,.27),transparent 38%),
    radial-gradient(circle at 16% 18%,rgba(255,221,111,.09),transparent 22%),
    linear-gradient(135deg,#040a1c 0%,#081b3e 42%,#102d68 76%,#071329 100%)!important;
}
.profile-item-preview.type-title:has(.tc-title-v5.tc-title-partner){
  background:
    radial-gradient(circle at 50% 104%,rgba(139,72,255,.30),transparent 40%),
    radial-gradient(circle at 18% 20%,rgba(255,161,228,.10),transparent 24%),
    linear-gradient(135deg,#0c061f 0%,#1c0d46 42%,#3b176d 74%,#180b34 100%)!important;
}

/* star field */
.profile-item-preview.type-title:has(.tc-title-v5):before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 12% 24%,rgba(255,255,255,.75) 0 1px,transparent 2px),
    radial-gradient(circle at 24% 72%,rgba(255,255,255,.46) 0 1px,transparent 2px),
    radial-gradient(circle at 49% 18%,rgba(255,255,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 28%,rgba(255,255,255,.46) 0 1px,transparent 2px),
    radial-gradient(circle at 84% 68%,rgba(255,255,255,.64) 0 1px,transparent 2px),
    linear-gradient(116deg,transparent 20%,rgba(255,255,255,.045) 36%,transparent 54%)!important;
  opacity:.8!important;
  animation:tcTitleV5Stars 5.6s ease-in-out infinite!important;
}

/* soft stage/pedestal */
.profile-item-preview.type-title:has(.tc-title-v5):after{
  content:""!important;
  position:absolute!important;
  left:19%!important;
  right:19%!important;
  bottom:14px!important;
  height:16px!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at center,rgba(88,151,255,.34),rgba(88,151,255,.10) 48%,transparent 72%)!important;
  filter:blur(1px)!important;
  pointer-events:none!important;
}

/* large store badge */
.profile-item-preview.type-title .profile-title-badge.tc-title-v5{
  --h:62px;
  --r:19px;
  min-width:270px!important;
  padding-left:82px!important;
  padding-right:48px!important;
  font-size:18px!important;
  z-index:2!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 12px 25px rgba(255,255,255,.05),
    0 12px 30px rgba(4,10,30,.34),
    0 0 28px color-mix(in srgb,var(--edge1) 25%,transparent)!important;
}
.profile-item-preview.type-title .profile-title-badge.tc-title-v5 .tc-title-v5-medal{
  width:78px!important;
  height:78px!important;
  left:-22px!important;
  border-width:3px!important;
}
.profile-item-preview.type-title .profile-title-badge.tc-title-v5 .tc-title-v5-icon{
  width:47px!important;
  height:47px!important;
}
.profile-item-preview.type-title .profile-title-badge.tc-title-v5 .tc-title-v5-cap{
  width:38px!important;
  height:46px!important;
}
.profile-item-preview.type-title .profile-title-badge.tc-title-v5 .tc-title-v5-cap.left{left:-32px!important}
.profile-item-preview.type-title .profile-title-badge.tc-title-v5 .tc-title-v5-cap.right{right:-30px!important}
.profile-item-preview.type-title .profile-title-badge.tc-title-v5 .tc-title-v5-jewel{
  width:12px!important;height:12px!important;
}
.profile-item-preview.type-title .profile-title-badge.tc-title-v5 .tc-title-v5-jewel.top{top:-9px!important}
.profile-item-preview.type-title .profile-title-badge.tc-title-v5 .tc-title-v5-jewel.bottom{bottom:-9px!important}

/* actual profile keeps the premium design but at a sensible size */
.profile-hero .profile-title-badge.tc-title-v5{
  --h:38px;
  --r:13px;
  min-width:160px!important;
  padding-left:52px!important;
  padding-right:26px!important;
  font-size:12px!important;
}
.profile-hero .profile-title-badge.tc-title-v5 .tc-title-v5-medal{
  width:48px!important;
  height:48px!important;
  left:-8px!important;
}
.profile-hero .profile-title-badge.tc-title-v5 .tc-title-v5-icon{
  width:27px!important;height:27px!important;
}
.profile-hero .profile-title-badge.tc-title-v5 .tc-title-v5-cap{
  width:22px!important;height:28px!important;
}
.profile-hero .profile-title-badge.tc-title-v5 .tc-title-v5-cap.left{left:-17px!important}
.profile-hero .profile-title-badge.tc-title-v5 .tc-title-v5-cap.right{right:-16px!important}

/* motion */
@keyframes tcTitleV5Border{to{background-position:240% 0}}
@keyframes tcTitleV5Sheen{
  0%,18%{left:-40%;opacity:0}
  29%{opacity:.82}
  62%{opacity:.35}
  78%,100%{left:120%;opacity:0}
}
@keyframes tcTitleV5Orbit{to{transform:rotate(360deg)}}
@keyframes tcTitleV5IconFloat{
  0%,100%{transform:translateY(0) scale(.98)}
  50%{transform:translateY(-2px) scale(1.03)}
}
@keyframes tcTitleV5Gem{
  0%,100%{filter:brightness(.92);box-shadow:0 0 6px color-mix(in srgb,var(--edge1) 34%,transparent)}
  50%{filter:brightness(1.25);box-shadow:0 0 12px color-mix(in srgb,var(--edge1) 58%,transparent)}
}
@keyframes tcTitleV5Stars{
  0%,100%{opacity:.58;filter:brightness(.95)}
  50%{opacity:1;filter:brightness(1.2)}
}

@media(max-width:520px){
  .profile-hero .profile-title-badge.tc-title-v5{
    min-width:146px!important;
    padding-left:48px!important;
    padding-right:20px!important;
    font-size:11px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .profile-title-badge.tc-title-v5 *,
  .profile-title-badge.tc-title-v5:before,
  .profile-title-badge.tc-title-v5:after,
  .profile-item-preview.type-title:has(.tc-title-v5):before{
    animation:none!important;
  }
}