/* Community membership cosmetics and title presentation. */

:is(
  .otl-community-preview-username,
  .otl-community-preview-theme-value,
  .otl-community-podium-username,
  .otl-community-leaderboard-username,
  .otl-community-profile-modal-identity h3,
  .otl-community-themed-username,
  #otlCommunityProfilePreviewUsername
)[data-theme="premium"] {
  --otl-community-username-gradient:
    linear-gradient(
      110deg,
      #a9783f 0%,
      #d8b873 16%,
      #f2dfb3 30%,
      #fffaf0 42%,
      #ffffff 49%,
      #d9d1ff 56%,
      #fff6dc 67%,
      #d6ad66 82%,
      #9f6f39 100%
    );

  background-size:
    260% 100% !important;

  filter:
    drop-shadow(
      0 0 5px
      rgba(244, 226, 180, .16)
    );

  animation:
    otl-community-premium-sheen
    8.5s
    ease-in-out
    infinite;
}

@keyframes otl-community-premium-sheen {
  0%,
  18% {
    background-position:
      0% 50%;
  }

  54%,
  72% {
    background-position:
      100% 50%;
  }

  100% {
    background-position:
      0% 50%;
  }
}

/*
  Titles are identity text, not badges. Source metadata still drives the
  material/color effect, but there is no surrounding pill chrome.
*/
.otl-community-title-badge {
  --otl-title-rgb:
    148, 163, 184;
  --otl-title-glow-alpha:
    .10;

  display:
    inline-block !important;
  width:
    fit-content;
  max-width:
    100%;
  min-height:
    0;
  padding:
    0;
  border:
    0;
  border-radius:
    0;
  color:
    rgb(
      var(--otl-title-rgb)
    ) !important;
  background:
    none;
  box-shadow:
    none;
  font-size:
    .78rem !important;
  font-weight:
    820 !important;
  line-height:
    1.2;
  letter-spacing:
    .025em;
  text-shadow:
    0 0 8px
    rgba(
      var(--otl-title-rgb),
      var(--otl-title-glow-alpha)
    );
}

/* Free membership baseline. */
.otl-community-title-badge[data-title-type="membership"][data-title-tier="free"] {
  --otl-title-rgb:
    148, 163, 184;
  --otl-title-glow-alpha:
    .04;
}

/* Premium membership title: animated pearl/champagne text with violet sheen. */
.otl-community-title-badge[data-title-type="membership"][data-title-tier="premium"] {
  color:
    transparent !important;
  background-image:
    linear-gradient(
      110deg,
      #a9783f 0%,
      #d8b873 16%,
      #f2dfb3 30%,
      #fffaf0 42%,
      #ffffff 49%,
      #d9d1ff 56%,
      #fff6dc 67%,
      #d6ad66 82%,
      #9f6f39 100%
    );
  background-repeat:
    no-repeat;
  background-size:
    220% 100%;
  -webkit-background-clip:
    text;
  background-clip:
    text;
  -webkit-text-fill-color:
    transparent;
  filter:
    drop-shadow(
      0 0 5px
      rgba(244, 226, 180, .18)
    );
  text-shadow:
    none;
  animation:
    otl-community-premium-title-sheen
    9s
    ease-in-out
    infinite;
}

@keyframes otl-community-premium-title-sheen {
  0%,
  20% {
    background-position:
      0% 50%;
  }

  56%,
  74% {
    background-position:
      100% 50%;
  }

  100% {
    background-position:
      0% 50%;
  }
}

/* Achievement titles use the exact rank-material gradient family. */
.otl-community-title-badge[data-title-rank] {
  color:
    transparent !important;
  background-image:
    var(--otl-title-gradient);
  background-repeat:
    no-repeat;
  background-size:
    100% 100%;
  -webkit-background-clip:
    text;
  background-clip:
    text;
  -webkit-text-fill-color:
    transparent;
  text-shadow:
    none;
}

.otl-community-title-badge[data-title-rank="bronze"] {
  --otl-title-gradient:
    var(--otl-community-username-bronze);
}

.otl-community-title-badge[data-title-rank="silver"] {
  --otl-title-gradient:
    var(--otl-community-username-silver);
}

.otl-community-title-badge[data-title-rank="gold"] {
  --otl-title-gradient:
    var(--otl-community-username-gold);
}

.otl-community-title-badge[data-title-rank="diamond"] {
  --otl-title-gradient:
    var(--otl-community-username-diamond);
}

.otl-community-title-badge[data-title-rank="sapphire"] {
  --otl-title-gradient:
    var(--otl-community-username-sapphire);
}

.otl-community-title-badge[data-title-rank="emerald"] {
  --otl-title-gradient:
    var(--otl-community-username-emerald);
}

.otl-community-title-badge[data-title-rank="amethyst"] {
  --otl-title-gradient:
    var(--otl-community-username-amethyst);
}

.otl-community-title-badge[data-title-rank="ruby"] {
  --otl-title-gradient:
    var(--otl-community-username-ruby);
}

.otl-community-title-badge[data-title-rank="prismatic"] {
  --otl-title-gradient:
    var(--otl-community-username-prismatic);
  filter:
    drop-shadow(
      0 0 4px
      rgba(196, 181, 253, .11)
    );
}

.otl-community-title-badge[data-title-rank="spectral"] {
  --otl-title-gradient:
    var(--otl-community-username-spectral);
  filter:
    drop-shadow(
      0 0 4px
      rgba(56, 189, 248, .13)
    );
}

/* Level titles inherit the same hue cycle and prestige intensity as Levels. */
.otl-community-title-badge[data-title-level-color="slate"] { --otl-title-rgb: 148, 163, 184; }
.otl-community-title-badge[data-title-level-color="red"] { --otl-title-rgb: 248, 113, 113; }
.otl-community-title-badge[data-title-level-color="orange"] { --otl-title-rgb: 251, 146, 60; }
.otl-community-title-badge[data-title-level-color="amber"] { --otl-title-rgb: 251, 191, 36; }
.otl-community-title-badge[data-title-level-color="green"] { --otl-title-rgb: 74, 222, 128; }
.otl-community-title-badge[data-title-level-color="teal"] { --otl-title-rgb: 45, 212, 191; }
.otl-community-title-badge[data-title-level-color="cyan"] { --otl-title-rgb: 34, 211, 238; }
.otl-community-title-badge[data-title-level-color="blue"] { --otl-title-rgb: 96, 165, 250; }
.otl-community-title-badge[data-title-level-color="violet"] { --otl-title-rgb: 167, 139, 250; }
.otl-community-title-badge[data-title-level-color="magenta"] { --otl-title-rgb: 232, 121, 249; }

.otl-community-title-badge[data-title-level-generation="1"] { --otl-title-glow-alpha: .11; }
.otl-community-title-badge[data-title-level-generation="2"] { --otl-title-glow-alpha: .14; }
.otl-community-title-badge[data-title-level-generation="3"] { --otl-title-glow-alpha: .17; }
.otl-community-title-badge[data-title-level-generation="4"] { --otl-title-glow-alpha: .20; }
.otl-community-title-badge[data-title-level-generation="5"] { --otl-title-glow-alpha: .23; }
.otl-community-title-badge[data-title-level-generation="6"] { --otl-title-glow-alpha: .26; }
.otl-community-title-badge[data-title-level-generation="7"] { --otl-title-glow-alpha: .29; }
.otl-community-title-badge[data-title-level-generation="8"] { --otl-title-glow-alpha: .32; }
.otl-community-title-badge[data-title-level-generation="9"] { --otl-title-glow-alpha: .36; }

.otl-community-title-badge[data-title-level-color="prismatic"],
.otl-community-title-badge[data-title-level-special="millennium"] {
  color:
    transparent !important;
  background-image:
    linear-gradient(
      105deg,
      #f472b6,
      #a78bfa,
      #38bdf8,
      #4ade80,
      #facc15,
      #f8fafc
    );
  background-repeat:
    no-repeat;
  background-size:
    100% 100%;
  -webkit-background-clip:
    text;
  background-clip:
    text;
  -webkit-text-fill-color:
    transparent;
  filter:
    drop-shadow(
      0 0 5px
      rgba(167, 139, 250, .18)
    );
  text-shadow:
    none;
}

/* Obsidian titles stay dark/material-driven, but only the text carries it. */
.otl-community-title-badge[data-title-type="obsidian"] {
  --otl-title-rgb:
    184, 194, 208;
  --otl-title-glow-alpha:
    .12;
}

.otl-community-title-badge[data-title-material="polished-black"],
.otl-community-title-badge[data-title-material="smoky"],
.otl-community-title-badge[data-title-material="silver-sheen"],
.otl-community-title-badge[data-title-material="gold-sheen"],
.otl-community-title-badge[data-title-material="mahogany"],
.otl-community-title-badge[data-title-material="iridescent"],
.otl-community-title-badge[data-title-material="rainbow"],
.otl-community-title-badge[data-title-material="fire"],
.otl-community-title-badge[data-title-material="black-fire"] {
  color:
    transparent !important;
  background-image:
    var(--otl-title-material-gradient);
  background-repeat:
    no-repeat;
  background-size:
    100% 100%;
  -webkit-background-clip:
    text;
  background-clip:
    text;
  -webkit-text-fill-color:
    transparent;
  text-shadow:
    none;
}

.otl-community-title-badge[data-title-material="polished-black"] {
  --otl-title-material-gradient:
    linear-gradient(110deg, #6b7280, #e2e8f0, #667085);
}

.otl-community-title-badge[data-title-material="smoky"] {
  --otl-title-material-gradient:
    linear-gradient(110deg, #64748b, #cbd5e1, #475569);
}

.otl-community-title-badge[data-title-material="silver-sheen"] {
  --otl-title-material-gradient:
    linear-gradient(110deg, #7c8794, #f8fafc, #bcc7d3, #64748b);
}

.otl-community-title-badge[data-title-material="gold-sheen"] {
  --otl-title-material-gradient:
    linear-gradient(110deg, #8f6505, #f3d35f, #fff3b0, #a66f08);
}

.otl-community-title-badge[data-title-material="mahogany"] {
  --otl-title-material-gradient:
    linear-gradient(110deg, #713a2e, #e5a27f, #a6533e, #5b2b26);
}

.otl-community-title-badge[data-title-material="iridescent"] {
  --otl-title-material-gradient:
    linear-gradient(110deg, #8be1df, #d8c8ff, #f2c8e7, #8fd7f0, #cab8ef);
}

.otl-community-title-badge[data-title-material="rainbow"] {
  --otl-title-material-gradient:
    var(--otl-community-username-spectral);
  filter:
    drop-shadow(
      0 0 4px
      rgba(56, 189, 248, .12)
    );
}

.otl-community-title-badge[data-title-material="fire"] {
  --otl-title-material-gradient:
    linear-gradient(110deg, #991b1b, #ef4444, #fb923c, #fde68a, #f97316, #7f1d1d);
  filter:
    drop-shadow(
      0 0 4px
      rgba(249, 115, 22, .16)
    );
}

.otl-community-title-badge[data-title-material="black-fire"] {
  --otl-title-material-gradient:
    linear-gradient(110deg, #6b7280, #111827, #ef4444, #fca5a5, #991b1b, #111827, #9ca3af);
  filter:
    drop-shadow(
      0 0 5px
      rgba(220, 38, 38, .16)
    );
}

/* The leaderboard receives the same millennium marker as every other Level surface. */
.otl-community-level-pill[data-level-special="millennium"] {
  --otl-level-rgb:
    248, 250, 252;
}

/*
  Achievement cards use the card itself for hover feedback. The badge artwork
  stays fixed in space instead of becoming its own moving pointer target.
*/
.otl-achievement-badge {
  pointer-events:
    none;
}

@media (hover: hover) and (pointer: fine) {
  .otl-achievement-card[
    data-achievement-unlocked="true"
  ]:not(.is-flipped):hover
  .otl-achievement-badge {
    filter:
      brightness(1.055);
  }
}

/* Reward-title labels mirror the exact material used by their achievement rank. */
.otl-achievement-card[data-achievement-rank]
.otl-achievement-rank-line {
  color:
    transparent !important;
  background-image:
    var(--otl-achievement-title-gradient);
  background-repeat:
    no-repeat;
  background-size:
    100% 100%;
  -webkit-background-clip:
    text;
  background-clip:
    text;
  -webkit-text-fill-color:
    transparent;
  text-shadow:
    none;
}

.otl-achievement-card[data-achievement-rank="bronze"]
.otl-achievement-rank-line {
  --otl-achievement-title-gradient:
    var(--otl-community-username-bronze);
}

.otl-achievement-card[data-achievement-rank="silver"]
.otl-achievement-rank-line {
  --otl-achievement-title-gradient:
    var(--otl-community-username-silver);
}

.otl-achievement-card[data-achievement-rank="gold"]
.otl-achievement-rank-line {
  --otl-achievement-title-gradient:
    var(--otl-community-username-gold);
}

.otl-achievement-card[data-achievement-rank="diamond"]
.otl-achievement-rank-line {
  --otl-achievement-title-gradient:
    var(--otl-community-username-diamond);
}

.otl-achievement-card[data-achievement-rank="sapphire"]
.otl-achievement-rank-line {
  --otl-achievement-title-gradient:
    var(--otl-community-username-sapphire);
}

.otl-achievement-card[data-achievement-rank="emerald"]
.otl-achievement-rank-line {
  --otl-achievement-title-gradient:
    var(--otl-community-username-emerald);
}

.otl-achievement-card[data-achievement-rank="amethyst"]
.otl-achievement-rank-line {
  --otl-achievement-title-gradient:
    var(--otl-community-username-amethyst);
}

.otl-achievement-card[data-achievement-rank="ruby"]
.otl-achievement-rank-line {
  --otl-achievement-title-gradient:
    var(--otl-community-username-ruby);
}

.otl-achievement-card[data-achievement-rank="prismatic"]
.otl-achievement-rank-line {
  --otl-achievement-title-gradient:
    var(--otl-community-username-prismatic);
  filter:
    drop-shadow(
      0 0 4px
      rgba(196, 181, 253, .11)
    );
}

.otl-achievement-card[data-achievement-rank="spectral"]
.otl-achievement-rank-line {
  --otl-achievement-title-gradient:
    var(--otl-community-username-spectral);
  filter:
    drop-shadow(
      0 0 4px
      rgba(56, 189, 248, .13)
    );
}

/* Move existing materials gently; keep rank palettes and text glows intact. */
:is(
  .otl-community-preview-username,
  .otl-community-preview-theme-value,
  .otl-community-podium-username,
  .otl-community-leaderboard-username,
  .otl-community-profile-modal-identity h3,
  .otl-community-themed-username,
  #otlCommunityProfilePreviewUsername
)[data-theme]:not([data-theme="default"]):not([data-theme="premium"]),
.otl-community-title-badge[data-title-rank],
.otl-community-title-badge[data-title-material]:not([data-title-material="raw-black"]),
.otl-community-title-badge[data-title-level-color="prismatic"],
.otl-community-title-badge[data-title-level-special="millennium"] {
  background-size:
    var(--otl-cosmetic-motion-span, 160%) 100% !important;
  animation:
    otl-community-material-sheen
    var(--otl-cosmetic-motion-duration, 14s)
    ease-in-out
    infinite;
}

:is(
  .otl-community-preview-username,
  .otl-community-preview-theme-value,
  .otl-community-podium-username,
  .otl-community-leaderboard-username,
  .otl-community-profile-modal-identity h3,
  .otl-community-themed-username,
  #otlCommunityProfilePreviewUsername
):is([data-theme="prismatic"], [data-theme="spectral"]),
.otl-community-title-badge:is([data-title-rank="prismatic"], [data-title-rank="spectral"]),
.otl-community-title-badge:is(
  [data-title-material="iridescent"],
  [data-title-material="rainbow"],
  [data-title-material="fire"],
  [data-title-material="black-fire"],
  [data-title-level-color="prismatic"],
  [data-title-level-special="millennium"]
) {
  --otl-cosmetic-motion-span: 220%;
  --otl-cosmetic-motion-duration: 12s;
}

.otl-community-title-badge[data-title-material="fire"] {
  --otl-cosmetic-motion-duration: 8s;
}

.otl-community-title-badge[data-title-material="black-fire"] {
  --otl-cosmetic-motion-duration: 10s;
  -webkit-text-stroke: .3px rgba(226, 232, 240, .55);
}

@keyframes otl-community-material-sheen {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .otl-community-preview-username,
    .otl-community-preview-theme-value,
    .otl-community-podium-username,
    .otl-community-leaderboard-username,
    .otl-community-profile-modal-identity h3,
    .otl-community-themed-username,
    #otlCommunityProfilePreviewUsername
  )[data-theme],
  .otl-community-title-badge {
    --otl-cosmetic-motion-span: 100% !important;
    animation:
      none !important;
    background-size:
      100% 100% !important;
    background-position:
      50% 50%;
  }
}