:root {
  --bg: #050405;
  --ink: #ffffff;
  --muted: #d7d0da;
  --soft: rgba(255, 255, 255, 0.72);
  --line: rgba(255, 255, 255, 0.14);

  --purple: #9b5cff;
  --pink: #e255b7;

  --profile-text: #ffffff;
  --profile-panel: #111111;
  --profile-bg: #305796;
  --profile-icon: #ffffff;
  --profile-primary: #ffffff;
  --profile-secondary: #636363;

  --card-opacity: 0.82;
  --card-blur: 20px;
  --card-radius: 26px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #050505;
  color: var(--profile-text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-weight: 700;
}

body.has-custom-cursor,
body.has-custom-cursor * {
  cursor: var(--custom-cursor), auto !important;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.profile-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(155, 92, 255, 0.18), transparent 34%),
    #050505;
}

.profile-background,
.profile-background-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.03);
}

.profile-background {
  background:
    linear-gradient(135deg, rgba(48, 87, 150, 0.32), rgba(0, 0, 0, 0.7)),
    var(--profile-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.profile-background-video {
  display: none;
  object-fit: cover;
  background: #050505;
}

.profile-background-video.is-active {
  display: block;
}

.background-shade {
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.16), transparent 20%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.62));
  backdrop-filter: blur(calc(var(--card-blur) * 0.16));
  -webkit-backdrop-filter: blur(calc(var(--card-blur) * 0.16));
  pointer-events: none;
}

.effect-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.effect-layer span {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

/* =========================
   CLICK TO ENTER
========================= */

.enter-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: #050505;
  transition:
    opacity 450ms ease,
    visibility 450ms ease;
}

.enter-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.enter-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(48, 87, 150, 0.22), rgba(0, 0, 0, 0.75)),
    #050505;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(10px);
  transform: scale(1.04);
  opacity: 0.82;
}

.enter-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.enter-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(155, 92, 255, 0.15), transparent 34%),
    rgba(0, 0, 0, 0.5);
}

.enter-button {
  position: relative;
  z-index: 2;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 950;
  letter-spacing: -0.05em;
  text-shadow:
    0 0 16px rgba(255, 255, 255, 0.38),
    0 0 36px rgba(155, 92, 255, 0.3);
  transition:
    transform 180ms ease,
    opacity 180ms ease,
    text-shadow 180ms ease;
}

.enter-button:hover {
  transform: scale(1.04);
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.55),
    0 0 46px rgba(226, 85, 183, 0.42);
}

.enter-button:active {
  transform: scale(0.98);
}

/* =========================
   PROFILE CARD
========================= */

.profile-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-glow-x: 50%;
  --tilt-glow-y: 0%;
  position: relative;
  z-index: 5;
  width: min(100%, 590px);
  min-height: 500px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 13px;
  border: var(--border-thickness, 1px) solid rgba(255, 255, 255, 0.16);
  border-radius: calc(var(--card-radius) + 4px);
  padding: 38px 46px 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
    rgba(17, 17, 17, var(--card-opacity));
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.6),
    0 0 96px color-mix(in srgb, var(--purple) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(calc(var(--card-blur) + 5px)) saturate(1.18);
  -webkit-backdrop-filter: blur(calc(var(--card-blur) + 5px)) saturate(1.18);
  opacity: 0;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(16px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 420ms ease,
    transform 220ms ease,
    border-color 180ms ease;
}

.profile-page.has-audio .profile-card {
  --audio-border-speed: 3.8s;
}

.profile-page.has-audio.is-playing.audio-border-enabled .profile-card {
  animation: cardAudioBorder var(--audio-border-speed) ease-in-out infinite;
}

.profile-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--tilt-glow-x) var(--tilt-glow-y), rgba(255, 255, 255, 0.16), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 34% 66%, rgba(255, 255, 255, 0.045));
  opacity: 0.82;
  transition: opacity 180ms ease;
}

.profile-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -2;
  border-radius: inherit;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--purple) 42%, transparent), transparent 34% 66%, color-mix(in srgb, var(--pink) 36%, transparent));
  filter: blur(20px);
  opacity: 0.38;
  pointer-events: none;
}

.profile-page.has-audio.is-playing.audio-glow-enabled .profile-card::after {
  animation: cardAudioAura 1.6s ease-in-out infinite;
}

.profile-page.border-none .profile-card {
  border-color: transparent;
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.55);
}

.profile-page.border-purple-neon .profile-card {
  border-color: color-mix(in srgb, var(--purple) 62%, rgba(255, 255, 255, 0.16));
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.62),
    0 0 calc(var(--border-glow, 48) * 1px) color-mix(in srgb, var(--purple) 52%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: purpleNeonBorder 3.4s ease-in-out infinite;
}

.profile-page.border-animated-gradient .profile-card,
.profile-page.border-chrome-shine .profile-card,
.profile-page.border-rain-shimmer .profile-card,
.profile-page.border-glass-sweep .profile-card,
.profile-page.border-electric-spark .profile-card,
.profile-page.border-matrix-rain .profile-card,
.profile-page.border-prism-edge .profile-card,
.profile-page.border-founder-gold .profile-card {
  border-color: transparent;
}

.profile-page.border-animated-gradient .profile-card::before,
.profile-page.border-chrome-shine .profile-card::before,
.profile-page.border-rain-shimmer .profile-card::before,
.profile-page.border-glass-sweep .profile-card::before,
.profile-page.border-electric-spark .profile-card::before,
.profile-page.border-matrix-rain .profile-card::before,
.profile-page.border-prism-edge .profile-card::before,
.profile-page.border-founder-gold .profile-card::before {
  inset: calc(var(--border-thickness, 1px) * -1);
  padding: var(--border-thickness, 1px);
  opacity: 1;
  background:
    linear-gradient(135deg, var(--border-gradient, #ffffff, var(--purple), var(--pink), #ffffff));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.profile-page.border-animated-gradient .profile-card::before {
  --border-gradient: #9b5cff, #e255b7, #32d8ff, #9b5cff;
  background-size: 260% 260%;
  animation: cardGradientBorder 4s linear infinite;
}

.profile-page.border-chrome-shine .profile-card::before {
  --border-gradient: #ffffff, #7a7a7a, #f6f6f6, #2f2f2f, #ffffff;
  background-size: 220% 220%;
  animation: cardGradientBorder 3.2s linear infinite;
}

.profile-page.border-rain-shimmer .profile-card::before {
  --border-gradient: rgba(255,255,255,0.25), #79d5ff, rgba(255,255,255,0.65), #7c5cff;
  background-size: 180% 180%;
  animation: cardRainBorder 1.8s linear infinite;
}

.profile-page.border-glass-sweep .profile-card::before {
  --border-gradient: rgba(255,255,255,0.22), rgba(255,255,255,0.95), rgba(255,255,255,0.18);
  background-size: 240% 100%;
  animation: cardSweepBorder 2.6s ease-in-out infinite;
}

.profile-page.border-electric-spark .profile-card::before {
  --border-gradient: #60f7ff, #ffffff, #7e5cff, #60f7ff;
  background-size: 260% 260%;
  animation: cardElectricBorder 900ms steps(2, end) infinite;
}

.profile-page.border-cyan-aura .profile-card {
  border-color: rgba(83, 231, 255, 0.62);
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.62),
    0 0 calc(var(--border-glow, 48) * 1px) rgba(83, 231, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.profile-page.border-matrix-rain .profile-card::before {
  background:
    repeating-linear-gradient(180deg, rgba(72, 214, 184, 0) 0 10px, rgba(72, 214, 184, 0.86) 12px 15px, rgba(72, 214, 184, 0) 18px 28px),
    linear-gradient(135deg, rgba(72, 214, 184, 0.2), rgba(166, 255, 218, 0.92), rgba(72, 214, 184, 0.18));
  background-size: 100% 90px, 200% 200%;
  animation: matrixBorderRain 1.4s linear infinite;
}

.profile-page.border-prism-edge .profile-card::before {
  --border-gradient: #ffffff, #72f1ff, #ff5bd6, #ffe76b, #89ffbc, #ffffff;
  background-size: 320% 320%;
  animation: cardGradientBorder 2.8s linear infinite;
}

.profile-page.border-founder-gold .profile-card::before {
  --border-gradient: #8a5b00, #fff0a8, #ffb52e, #ffffff, #8a5b00;
  background-size: 260% 260%;
  animation: cardGradientBorder 4.4s linear infinite;
}

.profile-page.border-glitch-border .profile-card {
  border-color: #ffffff;
  animation: cardGlitchBorder 1.1s steps(2, end) infinite;
}

.profile-page.border-black-glass .profile-card {
  border-color: rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, calc(var(--card-opacity) + 0.08));
}

.profile-page.border-clean-white .profile-card {
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.48),
    0 0 calc(var(--border-glow, 48) * 0.8px) rgba(255, 255, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.profile-page.border-frosted-blue .profile-card {
  border-color: rgba(120, 205, 255, 0.42);
  background:
    radial-gradient(circle at 18% 0%, rgba(91, 177, 255, 0.2), transparent 36%),
    linear-gradient(180deg, rgba(180, 230, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(9, 18, 28, calc(var(--card-opacity) + 0.04));
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.5),
    0 0 calc(var(--border-glow, 48) * 0.9px) rgba(91, 177, 255, 0.34);
}

.profile-page.border-pink-aura .profile-card {
  border-color: rgba(255, 96, 205, 0.45);
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.58),
    0 0 calc(var(--border-glow, 48) * 1.15px) rgba(255, 96, 205, 0.36),
    0 0 calc(var(--border-glow, 48) * 0.6px) rgba(120, 92, 255, 0.24);
}

.profile-page.border-laser-grid .profile-card {
  border-color: rgba(72, 214, 184, 0.42);
  background:
    linear-gradient(90deg, rgba(72, 214, 184, 0.11) 1px, transparent 1px),
    linear-gradient(180deg, rgba(72, 214, 184, 0.08) 1px, transparent 1px),
    rgba(6, 16, 17, var(--card-opacity));
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.58),
    0 0 calc(var(--border-glow, 48) * 1px) rgba(72, 214, 184, 0.34);
  animation: laserGridPulse 2s ease-in-out infinite;
}

.profile-page.border-void-pulse .profile-card {
  border-color: rgba(130, 75, 255, 0.46);
  background:
    radial-gradient(circle at 50% 42%, rgba(130, 75, 255, 0.16), transparent 40%),
    rgba(4, 4, 9, calc(var(--card-opacity) + 0.06));
  animation: voidPulseCard 2.8s ease-in-out infinite;
}

.profile-page.is-monochrome-icons .profile-platform-icon-img {
  filter:
    grayscale(1)
    brightness(0)
    invert(1)
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
}

.profile-page.is-monochrome-icons .social-card,
.profile-page.is-monochrome-icons .link-card-icon {
  color: #ffffff;
}

.profile-card:hover::before {
  opacity: 1;
}

.profile-page.is-entered .profile-card {
  opacity: 1;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(0) scale(1);
  pointer-events: auto;
}

.profile-page.template-void-glass .profile-card {
  border-color: rgba(155, 92, 255, 0.34);
  box-shadow:
    0 30px 110px rgba(0, 0, 0, 0.62),
    0 0 90px rgba(155, 92, 255, 0.24);
}

.profile-page.template-afterhours-edit .profile-card {
  border-radius: 14px;
  border-color: rgba(0, 213, 255, 0.36);
  background:
    linear-gradient(135deg, rgba(255, 47, 125, 0.13), rgba(0, 213, 255, 0.09)),
    rgba(7, 10, 18, var(--card-opacity));
  box-shadow:
    0 30px 110px rgba(0, 0, 0, 0.62),
    0 0 80px rgba(0, 213, 255, 0.22),
    0 0 120px rgba(255, 47, 125, 0.16);
}

.profile-page.template-afterhours-edit .profile-background::after,
.profile-page.template-afterhours-edit .enter-bg::after {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(255, 255, 255, 0.16) 20%, transparent 22% 48%, rgba(0, 213, 255, 0.18) 50%, transparent 54%),
    radial-gradient(circle at 28% 24%, rgba(255, 47, 125, 0.32), transparent 26%),
    radial-gradient(circle at 72% 30%, rgba(0, 213, 255, 0.32), transparent 30%);
  filter: blur(10px) saturate(1.25);
  opacity: 0.86;
  animation: editBackgroundSweep 6s linear infinite;
  pointer-events: none;
}

.top-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  min-height: 104px;
}

.avatar-wrap {
  position: relative;
  grid-column: 2;
  width: 124px;
  height: 124px;
  display: grid;
  place-items: center;
}

.avatar-wrap::before,
.avatar-wrap::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
}

.avatar-wrap::before {
  border: 2px solid color-mix(in srgb, var(--pink) 72%, #ffffff);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--pink) 38%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--purple) 28%, transparent);
}

.avatar-wrap::after {
  inset: -5px;
  border: 1px solid color-mix(in srgb, var(--purple) 54%, transparent);
  box-shadow: 0 0 34px color-mix(in srgb, var(--purple) 32%, transparent);
}

.profile-page:not(.avatar-visualizer-off) .avatar-wrap::before {
  opacity: 0.86;
  animation: avatarVisualizerRing 1.8s ease-in-out infinite;
}

.profile-page:not(.avatar-visualizer-off) .avatar-wrap::after {
  opacity: 0.62;
  animation: avatarVisualizerHalo 2.6s ease-in-out infinite;
}

.profile-page.has-audio.is-playing:not(.avatar-visualizer-off) .avatar-wrap::before {
  animation-duration: 1.05s;
}

.profile-page.has-audio.is-playing:not(.avatar-visualizer-off) .avatar-wrap::after {
  animation-duration: 1.8s;
}

.profile-page.avatar-visualizer-halo .avatar-wrap::before {
  display: none;
}

.profile-page.avatar-visualizer-pulse-ring .avatar-wrap::after {
  display: none;
}

.profile-page.avatar-visualizer-orbit .avatar-wrap::before,
.profile-page.avatar-visualizer-orbit .avatar-wrap::after {
  opacity: 0.9;
  border-style: dashed;
  animation: avatarOrbit 3.2s linear infinite;
}

.profile-page.avatar-visualizer-orbit .avatar-wrap::after {
  animation-duration: 4.8s;
  animation-direction: reverse;
}

.profile-page.avatar-visualizer-equalizer .avatar-wrap::before {
  opacity: 0.9;
  border-width: 3px;
  border-style: dotted;
  animation: avatarVisualizerRing 620ms steps(3, end) infinite;
}

.profile-page.avatar-visualizer-equalizer .avatar-wrap::after {
  display: none;
}

.profile-page.avatar-visualizer-eclipse .avatar-wrap::before {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.72);
  border-left-color: transparent;
  border-bottom-color: transparent;
  animation: avatarOrbit 1.7s linear infinite;
}

.profile-page.avatar-visualizer-eclipse .avatar-wrap::after {
  opacity: 0.55;
  background: radial-gradient(circle, rgba(155, 92, 255, 0.26), transparent 58%);
}

.profile-page.avatar-visualizer-breathing .avatar-wrap::before {
  opacity: 0.92;
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 0 22px rgba(255, 255, 255, 0.18),
    0 0 calc(var(--avatar-visualizer-intensity, 55) * 0.85px) color-mix(in srgb, var(--profile-accent) 48%, transparent);
  animation: avatarBreathingGlow 2.8s ease-in-out infinite;
}

.profile-page.avatar-visualizer-breathing .avatar-wrap::after {
  opacity: 0.38;
  background: radial-gradient(circle, color-mix(in srgb, var(--profile-accent) 30%, transparent), transparent 62%);
}

.profile-page.avatar-visualizer-spectrum .avatar-wrap::before {
  inset: -7px;
  border: 0;
  opacity: 0.96;
  background:
    conic-gradient(from 0deg, #ff4d9d, #ffe76b, #5dffbd, #55d9ff, #9b5cff, #ff4d9d);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  animation: avatarOrbit 1.9s linear infinite;
}

.profile-page.avatar-visualizer-spectrum .avatar-wrap::after {
  opacity: 0.56;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 58%);
  animation: avatarVisualizerHalo 1.3s ease-in-out infinite;
}

.avatar {
  position: relative;
  z-index: 2;
  width: 98px;
  height: 98px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.28), transparent 26%),
    linear-gradient(135deg, var(--purple), var(--pink));
  color: #ffffff;
  font-size: 36px;
  font-weight: 950;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.1),
    0 0 0 9px rgba(255, 255, 255, 0.045),
    0 0 42px color-mix(in srgb, var(--pink) 46%, transparent);
}

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

.avatar-decoration {
  position: absolute;
  inset: -11px;
  z-index: 4;
  width: calc(100% + 22px);
  height: calc(100% + 22px);
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.2));
}

.avatar-decoration[hidden] {
  display: none !important;
}

.floating-music-button {
  justify-self: end;
  min-width: 58px;
  height: 36px;
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.13);
  color: var(--profile-text);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12px;
  font-weight: 950;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.floating-music-button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
}

.name-wrap {
  position: relative;
  display: grid;
  justify-items: center;
  max-width: 100%;
}

.display-name {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  color: var(--profile-text);
  font-size: clamp(40px, 5vw, 58px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: 0;
  text-align: center;
  isolation: isolate;
  text-shadow:
    0 1px 18px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(255, 255, 255, 0.18);
}

.uid-hover-card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 4;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(0, 0, 0, 0.58);
  color: #ffffff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.26);
  font-size: 11px;
  font-weight: 950;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  pointer-events: none;
  white-space: nowrap;
}

.name-wrap:hover .uid-hover-card,
.name-wrap:focus-within .uid-hover-card {
  opacity: 1;
  transform: translate(-50%, 0);
}

.username {
  margin: -6px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.status-line {
  max-width: 390px;
  margin: -2px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.status-line[hidden] {
  display: none !important;
}

.bio {
  max-width: 460px;
  margin: 2px 0 4px;
  color: var(--profile-text);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.38;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.54);
}

.profile-page.layout-compact .profile-card {
  min-height: 420px;
  gap: 10px;
  padding-block: 30px;
}

.profile-page.layout-compact .discord-presence-card,
.profile-page.layout-compact .links {
  display: none !important;
}

.profile-page.layout-music .profile-card {
  gap: 16px;
}

.profile-page.layout-music .avatar-wrap {
  width: 138px;
  height: 138px;
}

.profile-page.layout-edit .profile-card {
  border-radius: 16px;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(16px) scale(0.98) skewX(-0.4deg);
}

.profile-page.layout-edit.is-entered .profile-card {
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(0) scale(1) skewX(-0.4deg);
}

.profile-page.layout-social-stack .profile-card {
  min-height: 560px;
}

.profile-page.layout-social-stack .socials {
  width: min(100%, 360px);
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-page.layout-social-stack .links {
  width: min(100%, 360px);
}

.profile-page.layout-wide .profile-card {
  width: min(760px, calc(100vw - 36px));
  grid-template-columns: minmax(220px, 0.85fr) minmax(260px, 1fr);
  align-items: center;
  justify-items: center;
  text-align: left;
}

.profile-page.layout-wide .top-row,
.profile-page.layout-wide .name-wrap,
.profile-page.layout-wide .bio,
.profile-page.layout-wide .discord-presence-card,
.profile-page.layout-wide .socials,
.profile-page.layout-wide .links,
.profile-page.layout-wide .reactions,
.profile-page.layout-wide .profile-actions,
.profile-page.layout-wide .profile-footer {
  grid-column: auto;
}

.profile-page.layout-wide .top-row {
  grid-row: span 6;
  grid-template-columns: 1fr;
  justify-items: center;
}

.profile-page.layout-wide .bio {
  text-align: left;
}

.profile-page.layout-spotlight .profile-card {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.22), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(8, 8, 10, var(--card-opacity));
}

.profile-page.layout-minimal .profile-card {
  min-height: 430px;
  gap: 12px;
  padding: 34px;
}

.profile-page.layout-minimal .bio,
.profile-page.layout-minimal .discord-presence-card,
.profile-page.layout-minimal .links,
.profile-page.layout-minimal .profile-actions,
.profile-page.layout-minimal .profile-footer {
  display: none !important;
}

.profile-page.layout-creator .profile-card {
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 0%, rgba(217, 86, 212, 0.2), transparent 36%),
    radial-gradient(circle at 88% 10%, rgba(72, 214, 184, 0.16), transparent 30%),
    rgba(8, 8, 10, var(--card-opacity));
}

.profile-page.layout-creator .links {
  width: min(100%, 380px);
}

.profile-page.layout-split .profile-card {
  width: min(820px, calc(100vw - 36px));
  grid-template-columns: 0.86fr 1fr;
  align-items: center;
  gap: 18px 28px;
}

.profile-page.layout-split .top-row {
  grid-row: 1 / span 4;
}

.profile-page.layout-split .discord-presence-card,
.profile-page.layout-split .links {
  width: 100%;
}

.profile-page.layout-poster .profile-card {
  min-height: 670px;
  justify-content: end;
  background:
    linear-gradient(180deg, transparent 0 22%, rgba(0, 0, 0, 0.38) 62%, rgba(0, 0, 0, 0.72)),
    rgba(8, 8, 10, calc(var(--card-opacity) - 0.1));
}

.profile-page.layout-poster .display-name {
  font-size: clamp(52px, 7vw, 84px);
}

.profile-page.layout-terminal .profile-card {
  align-content: start;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(72, 214, 184, 0.08), transparent 38%),
    rgba(0, 8, 8, calc(var(--card-opacity) + 0.1));
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.profile-page.layout-terminal .display-name,
.profile-page.layout-terminal .username,
.profile-page.layout-terminal .bio {
  text-align: left;
}

.profile-page.layout-centerpiece .profile-card {
  width: min(570px, calc(100vw - 36px));
  min-height: 560px;
  place-content: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16), transparent 32%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--profile-accent) 18%, transparent), transparent 38%),
    rgba(8, 8, 10, var(--card-opacity));
}

.profile-page.layout-centerpiece .discord-presence-card,
.profile-page.layout-centerpiece .links {
  width: min(100%, 390px);
}

.profile-page.layout-cinema .profile-card {
  width: min(780px, calc(100vw - 36px));
  min-height: 500px;
  border-radius: 26px;
  padding-block: 54px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0 9%, transparent 9% 91%, rgba(0, 0, 0, 0.42) 91% 100%),
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.12), transparent 45%),
    rgba(8, 8, 10, calc(var(--card-opacity) + 0.03));
}

.profile-page.layout-cinema .links {
  width: min(100%, 460px);
}

.profile-page.layout-hud .profile-card {
  width: min(650px, calc(100vw - 36px));
  border-radius: 18px;
  align-content: start;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--profile-accent) 12%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--profile-accent) 10%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--profile-accent) 22%, transparent), transparent 38%),
    rgba(2, 7, 11, calc(var(--card-opacity) + 0.1));
  background-size: 42px 42px, 42px 42px, auto, auto;
}

.profile-page.layout-hud .discord-presence-card,
.profile-page.layout-hud .links a {
  border-left: 2px solid color-mix(in srgb, var(--profile-accent) 82%, white);
}

/* =========================
   DISCORD PRESENCE
========================= */

.discord-presence-card {
  width: min(100%, 335px);
  display: grid;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 22px;
  padding: 12px;
  background:
    radial-gradient(circle at 0% 0%, rgba(88, 101, 242, 0.25), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.075));
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 18px 46px rgba(0, 0, 0, 0.26);
}

.discord-presence-card[hidden] {
  display: none !important;
}

.discord-left {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.discord-avatar-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
}

.discord-avatar {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.25), transparent 26%),
    linear-gradient(135deg, #5865f2, var(--pink));
  color: #ffffff;
  font-size: 20px;
  font-weight: 950;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.08),
    0 0 24px rgba(88, 101, 242, 0.28);
}

.discord-avatar span {
  position: relative;
  z-index: 1;
}

.discord-avatar img {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.discord-avatar img[hidden],
.discord-avatar.has-avatar span {
  display: none !important;
}

.discord-avatar-decoration {
  position: absolute;
  inset: -8px;
  z-index: 4;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(88, 101, 242, 0.24));
}

.discord-avatar-decoration[hidden] {
  display: none !important;
}

.discord-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.discord-name-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.discord-presence-card strong,
.discord-presence-card span {
  display: block;
}

.discord-name-row strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.05;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-badge,
.discord-guild-tag {
  flex: 0 0 auto;
  border: 1px solid rgba(88, 101, 242, 0.44);
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(88, 101, 242, 0.16);
  color: #dce0ff;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.discord-guild-tag {
  border-color: rgba(217, 86, 212, 0.42);
  background: rgba(217, 86, 212, 0.16);
  color: #f3caff;
}

.discord-badge[hidden],
.discord-guild-tag[hidden] {
  display: none !important;
}

.discord-handle {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-status-line {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.discord-status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 999px;
  background: #747f8d;
  box-shadow: 0 0 14px rgba(116, 127, 141, 0.5);
}

.discord-status-dot.status-online,
.discord-presence-card.status-online .discord-status-dot {
  background: #23a55a;
  box-shadow: 0 0 16px rgba(35, 165, 90, 0.75);
}

.discord-status-dot.status-idle,
.discord-presence-card.status-idle .discord-status-dot {
  background: #f0b232;
  box-shadow: 0 0 16px rgba(240, 178, 50, 0.75);
}

.discord-status-dot.status-dnd,
.discord-presence-card.status-dnd .discord-status-dot {
  background: #f23f43;
  box-shadow: 0 0 16px rgba(242, 63, 67, 0.75);
}

.discord-status-dot.status-offline,
.discord-presence-card.status-offline .discord-status-dot {
  background: #747f8d;
  box-shadow: 0 0 14px rgba(116, 127, 141, 0.5);
}

.discord-activity-wrap,
.discord-custom-status-wrap {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  padding: 10px 11px;
  background: rgba(0, 0, 0, 0.14);
  min-width: 0;
}

.discord-activity-wrap[hidden],
.discord-custom-status-wrap[hidden] {
  display: none !important;
}

.discord-activity-wrap span,
.discord-custom-status-wrap span {
  color: rgba(255, 255, 255, 0.54);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.discord-activity-wrap strong,
.discord-custom-status-wrap strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
   BADGES / SOCIALS / LINKS
========================= */

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.badges:empty {
  display: none;
}

.badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 5px 9px 5px 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #e8c4ff;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.profile-badge i {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  font-style: normal;
  box-shadow: 0 0 14px rgba(226, 85, 183, 0.22);
}

.profile-badge svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-badge .discord-logo-svg {
  width: 13px;
  height: 11px;
  fill: #ffffff;
  stroke: none;
}

.badge-verified i {
  background: linear-gradient(135deg, #25d0ff, #5865f2);
}

.badge-premium i {
  background: linear-gradient(135deg, #ffd262, #c78a18);
}

.badge-discord i {
  background: linear-gradient(135deg, #5865f2, #7a85ff);
}

.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
}

.socials:empty {
  display: none;
}

.social-card {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--profile-icon);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.36), transparent 32%),
    rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 20px rgba(255, 255, 255, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.2);
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.2));
  transition:
    transform 160ms ease,
    opacity 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.social-card:hover {
  transform: translateY(-4px) scale(1.09);
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.48), transparent 34%),
    rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 24px rgba(255, 255, 255, 0.24),
    0 18px 36px rgba(0, 0, 0, 0.24);
}

.social-card small {
  display: none;
}

.profile-platform-icon-img {
  width: 23px;
  height: 23px;
  display: block;
  object-fit: contain;
}

.profile-platform-icon-img + span[hidden] {
  display: none !important;
}

.links {
  width: min(100%, 430px);
  display: grid;
  gap: 9px;
  margin-top: 4px;
}

.links:empty {
  display: none;
}

.link-card {
  width: 100%;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 17px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.055)),
    rgba(0, 0, 0, 0.13);
  color: #ffffff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.link-card.is-featured-link {
  min-height: 64px;
  border-color: color-mix(in srgb, var(--pink) 34%, rgba(255, 255, 255, 0.13));
  background:
    radial-gradient(circle at 8% 50%, rgba(226, 85, 183, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.105);
}

.link-card.is-featured-link .link-card-icon {
  background: linear-gradient(135deg, rgba(155, 92, 255, 0.3), rgba(226, 85, 183, 0.2));
  box-shadow: 0 0 24px rgba(226, 85, 183, 0.18);
}

.link-card:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(217, 86, 212, 0.38);
  background: rgba(255, 255, 255, 0.12);
}

.link-card-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(155, 92, 255, 0.16);
  font-size: 18px;
  font-weight: 950;
}

.link-card-icon .profile-platform-icon-img {
  width: 18px;
  height: 18px;
}

.link-card-copy {
  min-width: 0;
}

.link-card b,
.link-card small {
  display: block;
}

.link-card b {
  overflow: hidden;
  color: #ffffff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-card small {
  margin-top: 2px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-card em {
  border-radius: 999px;
  padding: 6px 8px;
  background: rgba(155, 92, 255, 0.18);
  color: #efccff;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.music-card {
  width: min(100%, 430px);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 15px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05)),
    rgba(0, 0, 0, 0.16);
}

.music-card.is-hidden {
  display: none;
}

.music-card button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #080808;
  font-size: 13px;
  font-weight: 950;
  overflow: hidden;
  text-indent: -999px;
}

.music-card button::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid #080808;
  transform: translateX(1px);
}

.profile-page.is-playing .music-card button::after {
  width: 12px;
  height: 14px;
  border: 0;
  border-left: 4px solid #080808;
  border-right: 4px solid #080808;
  transform: none;
}

.music-copy {
  min-width: 0;
}

.music-card span,
.music-card strong {
  display: block;
}

.music-card span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.music-card strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bars {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 30px;
}

.bars i {
  width: 5px;
  border-radius: 999px;
  background: var(--pink);
  animation: bounce 900ms ease-in-out infinite alternate;
  animation-play-state: paused;
  opacity: 0.4;
}

.profile-page.is-playing .bars i {
  opacity: 1;
  animation-play-state: running;
}

.bars i:nth-child(1) {
  height: 13px;
}

.bars i:nth-child(2) {
  height: 24px;
  animation-delay: 80ms;
}

.bars i:nth-child(3) {
  height: 17px;
  animation-delay: 160ms;
}

.bars i:nth-child(4) {
  height: 28px;
  animation-delay: 240ms;
}

.profile-footer {
  width: min(100%, 430px);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.visitor-reactions {
  width: min(100%, 440px);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 5px;
}

.visitor-reactions:empty,
.visitor-reactions[hidden] {
  display: none !important;
}

.reaction-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  padding: 0 11px;
  background:
    radial-gradient(circle at 25% 10%, rgba(255, 255, 255, 0.16), transparent 36%),
    rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  font-weight: 950;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.reaction-button:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--pink) 42%, rgba(255, 255, 255, 0.16));
  background: rgba(255, 255, 255, 0.13);
}

.reaction-button.is-selected {
  border-color: color-mix(in srgb, var(--pink) 58%, rgba(255, 255, 255, 0.16));
  background:
    radial-gradient(circle at 25% 10%, rgba(255, 255, 255, 0.2), transparent 36%),
    color-mix(in srgb, var(--purple) 30%, rgba(255, 255, 255, 0.08));
  box-shadow:
    0 0 26px color-mix(in srgb, var(--pink) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.reaction-emoji {
  font-size: 16px;
  line-height: 1;
}

.reaction-count {
  min-width: 1.4em;
  text-align: left;
}

.profile-actions {
  width: min(100%, 360px);
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
}

.copy-profile-button {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 950;
  transition:
    transform 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.report-profile-button {
  min-height: 34px;
  border: 1px solid rgba(255, 80, 104, 0.24);
  border-radius: 999px;
  padding: 0 13px;
  background: rgba(255, 80, 104, 0.08);
  color: rgba(255, 210, 218, 0.78);
  font-size: 12px;
  font-weight: 900;
  transition:
    transform 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.copy-profile-button:hover,
.report-profile-button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}

.profile-report-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.74);
}

.profile-report-modal[hidden] {
  display: none !important;
}

.profile-report-dialog {
  width: min(430px, 100%);
  display: grid;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 18px;
  background: #111111;
}

.profile-report-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-report-dialog h2 {
  margin: 0;
  font-size: 21px;
}

.profile-report-dialog label {
  display: grid;
  gap: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 850;
}

.profile-report-dialog select,
.profile-report-dialog textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 12px;
  background: #080808;
  color: #ffffff;
  font: inherit;
}

.profile-report-dialog textarea {
  min-height: 110px;
  resize: vertical;
}

.profile-report-dialog button {
  min-height: 40px;
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(217, 86, 212, 0.22);
  color: #ffffff;
  font-weight: 900;
}

#closeReportModal {
  width: 36px;
  min-height: 36px;
  padding: 0;
  background: #080808;
}

.copy-profile-button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.profile-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 30;
  transform: translateX(-50%);
  border: 1px solid rgba(64, 214, 111, 0.34);
  border-radius: 999px;
  padding: 11px 14px;
  background: rgba(10, 20, 12, 0.94);
  color: #ffffff;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.36);
  font-size: 13px;
  font-weight: 850;
}

.profile-toast[hidden] {
  display: none !important;
}

.profile-footer b {
  color: #ffffff;
}

/* =========================
   BACKGROUND EFFECTS
========================= */

.effect-layer.night::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 70%, rgba(255, 255, 255, 0.28) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.3) 0 1px, transparent 2px);
  background-size:
    260px 260px,
    320px 320px,
    360px 360px,
    410px 410px;
  animation: starsMove 18s linear infinite;
  opacity: 0.7;
}

.effect-layer.aurora::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 30% 30%, rgba(217, 86, 212, 0.24), transparent 28%),
    radial-gradient(circle at 70% 55%, rgba(70, 120, 255, 0.2), transparent 30%),
    radial-gradient(circle at 50% 85%, rgba(64, 214, 111, 0.13), transparent 26%);
  filter: blur(34px);
  animation: auroraMove 8s ease-in-out infinite alternate;
}

.effect-layer.snow span {
  top: -8%;
  width: var(--size, 4px);
  height: var(--size, 4px);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  animation-name: fall, drift;
  animation-duration: var(--duration, 10s), 3.5s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite;
}

.effect-layer.rain span {
  top: -12%;
  width: 1px;
  height: var(--height, 46px);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.58));
  animation: fall var(--duration, 0.95s) linear infinite;
}

.effect-layer.particles span {
  width: var(--size, 5px);
  height: var(--size, 5px);
  background: rgba(226, 85, 183, 0.72);
  box-shadow:
    0 0 14px rgba(226, 85, 183, 0.7),
    0 0 28px rgba(155, 92, 255, 0.32);
  animation: floatParticle var(--duration, 8s) ease-in-out infinite;
}

.effect-layer.embers span {
  bottom: -8%;
  width: var(--size, 4px);
  height: var(--size, 4px);
  background: rgba(255, 128, 48, 0.78);
  box-shadow:
    0 0 14px rgba(255, 128, 48, 0.72),
    0 0 34px rgba(255, 60, 0, 0.32);
  animation: emberRise var(--duration, 9s) ease-in infinite;
}

.effect-layer.meteor span {
  width: 2px;
  height: var(--height, 86px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), transparent);
  box-shadow: 0 0 22px rgba(120, 205, 255, 0.7);
  transform: rotate(58deg);
  animation: meteorFall var(--duration, 2.2s) linear infinite;
}

.effect-layer.cyber-rain span {
  top: -12%;
  width: 2px;
  height: var(--height, 46px);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(72, 214, 184, 0.82));
  box-shadow: 0 0 14px rgba(72, 214, 184, 0.58);
  animation: fall var(--duration, 0.95s) linear infinite;
}

.effect-layer.plasma::before,
.effect-layer.dither::before,
.effect-layer.spotlight::before,
.effect-layer.scan-grid::before,
.effect-layer.vhs-noise::before,
.effect-layer.starfield::before,
.effect-layer.dream-bloom::before,
.effect-layer.liquid-metal::before,
.effect-layer.prism-fog::before,
.effect-layer.blackout::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
}

.effect-layer.plasma::before {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 48, 188, 0.26), transparent 28%),
    radial-gradient(circle at 82% 28%, rgba(63, 220, 255, 0.24), transparent 28%),
    radial-gradient(circle at 52% 78%, rgba(155, 92, 255, 0.24), transparent 32%);
  filter: blur(24px) saturate(1.6);
  animation: plasmaMove 7s ease-in-out infinite alternate;
}

.effect-layer.dither::before {
  inset: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(135deg, rgba(217, 86, 212, 0.12), rgba(72, 214, 184, 0.08));
  background-size: 6px 6px, auto;
  opacity: 0.28;
  mix-blend-mode: screen;
}

.effect-layer.spotlight::before {
  inset: 0;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.22), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(217, 86, 212, 0.14), transparent 42%);
  animation: spotlightSweep 5s ease-in-out infinite alternate;
}

.effect-layer.scan-grid::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(72, 214, 184, 0.1) 1px, transparent 1px),
    linear-gradient(180deg, rgba(72, 214, 184, 0.08) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: 0.28;
  animation: gridDrift 8s linear infinite;
}

.effect-layer.vhs-noise::before {
  inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, 0.08) 4px),
    repeating-linear-gradient(90deg, rgba(255, 0, 90, 0.05) 0 2px, rgba(0, 240, 255, 0.05) 3px 5px);
  opacity: 0.22;
  animation: vhsNoise 600ms steps(2, end) infinite;
}

.effect-layer.starfield::before {
  inset: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(120, 220, 255, 0.72) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255, 91, 214, 0.52) 0 1px, transparent 1.3px);
  background-position: 0 0, 34px 18px, 18px 46px;
  background-size: 92px 92px, 126px 126px, 160px 160px;
  opacity: 0.42;
  animation: starfieldDrift 18s linear infinite;
}

.effect-layer.dream-bloom::before {
  background:
    radial-gradient(circle at 16% 26%, rgba(255, 91, 214, 0.2), transparent 32%),
    radial-gradient(circle at 76% 20%, rgba(83, 231, 255, 0.18), transparent 30%),
    radial-gradient(circle at 50% 78%, rgba(255, 231, 107, 0.12), transparent 34%);
  filter: blur(30px) saturate(1.5);
  opacity: 0.82;
  animation: plasmaMove 9s ease-in-out infinite alternate;
}

.effect-layer.liquid-metal::before {
  background:
    conic-gradient(from 120deg at 50% 50%, rgba(255, 255, 255, 0.04), rgba(180, 180, 190, 0.34), rgba(45, 45, 55, 0.08), rgba(255, 255, 255, 0.3), rgba(80, 80, 90, 0.1));
  filter: blur(18px) contrast(1.25) saturate(0.82);
  opacity: 0.42;
  mix-blend-mode: screen;
  animation: plasmaMove 5.8s ease-in-out infinite alternate;
}

.effect-layer.prism-fog::before {
  background:
    linear-gradient(120deg, rgba(255, 91, 214, 0.15), transparent 26%, rgba(83, 231, 255, 0.14) 48%, transparent 66%, rgba(137, 255, 188, 0.13)),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12), transparent 48%);
  filter: blur(22px);
  opacity: 0.7;
  animation: spotlightSweep 6.5s ease-in-out infinite alternate;
}

.effect-layer.blackout::before {
  inset: 0;
  background:
    radial-gradient(circle at 50% 44%, transparent 0 24%, rgba(0, 0, 0, 0.38) 58%, rgba(0, 0, 0, 0.86) 100%);
  opacity: 0.9;
  animation: blackoutPulse 3.8s ease-in-out infinite;
}

/* =========================
   USERNAME EFFECTS FINAL
========================= */

#profilePage #displayName {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding-inline: 0.12em;
  margin-inline: -0.12em;
  isolation: isolate;
}

#profilePage.name-effect-none #displayName,
#displayName.username-effect-none,
#profilePage.effect-none #displayName,
#displayName.username-effect-none {
  color: var(--profile-text);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  text-shadow: none;
  animation: none;
}

#profilePage.name-effect-glow #displayName,
#displayName.username-effect-glow,
#profilePage.effect-glow #displayName,
#displayName.username-effect-glow {
  color: var(--profile-text);
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.6),
    0 0 34px rgba(217, 86, 212, 0.5),
    0 0 62px rgba(155, 92, 255, 0.34);
  animation: cardGlowPulse 2.2s ease-in-out infinite;
}

#profilePage.name-effect-pulse #displayName,
#displayName.username-effect-pulse,
#profilePage.effect-pulse #displayName,
#displayName.username-effect-pulse {
  color: var(--profile-text);
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.48),
    0 0 32px rgba(217, 86, 212, 0.34);
  animation: cardPulseText 1.55s ease-in-out infinite;
}

#profilePage.name-effect-shine #displayName,
#displayName.username-effect-shine,
#profilePage.effect-shine #displayName,
#displayName.username-effect-shine {
  background: linear-gradient(110deg, #ffffff 0%, #ffffff 34%, #d990ff 46%, #ffffff 58%, #ffffff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none;
  animation: cardShineText 2.4s ease-in-out infinite;
}

#profilePage.name-effect-rainbow #displayName,
#displayName.username-effect-rainbow,
#profilePage.effect-rainbow #displayName,
#displayName.username-effect-rainbow {
  background: linear-gradient(90deg, #ff3b3b, #ffd93b, #38ff7a, #38c7ff, #d83bff, #ff3b3b);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none;
  animation: cardRainbowText 2.8s linear infinite;
}

#profilePage.name-effect-glitch #displayName,
#displayName.username-effect-glitch,
#profilePage.effect-glitch #displayName,
#displayName.username-effect-glitch {
  color: #ffffff;
  text-shadow:
    2px 0 #ff1744,
    -2px 0 #00e5ff,
    0 0 18px rgba(255, 255, 255, 0.32);
  animation: cardGlitchText 1s steps(2, end) infinite;
}

#profilePage.name-effect-glitch #displayName::before,
#displayName.username-effect-glitch::before,
#profilePage.name-effect-glitch #displayName::after,
#displayName.username-effect-glitch::after,
#profilePage.effect-glitch #displayName::before,
#displayName.username-effect-glitch::before,
#profilePage.effect-glitch #displayName::after,
#displayName.username-effect-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.65;
}

#profilePage.name-effect-glitch #displayName::before,
#displayName.username-effect-glitch::before,
#profilePage.effect-glitch #displayName::before,
#displayName.username-effect-glitch::before {
  color: #ff1744;
  transform: translateX(2px);
  clip-path: inset(0 0 54% 0);
}

#profilePage.name-effect-glitch #displayName::after,
#displayName.username-effect-glitch::after,
#profilePage.effect-glitch #displayName::after,
#displayName.username-effect-glitch::after {
  color: #00e5ff;
  transform: translateX(-2px);
  clip-path: inset(46% 0 0 0);
}

#profilePage.name-effect-shuffle #displayName,
#displayName.username-effect-shuffle,
#profilePage.effect-shuffle #displayName,
#displayName.username-effect-shuffle {
  color: #ffffff;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.32),
    0 0 28px rgba(217, 86, 212, 0.22);
  animation: cardShuffleText 1.25s steps(2, end) infinite;
}

#profilePage.name-effect-typewriter #displayName,
#displayName.username-effect-typewriter,
#profilePage.effect-typewriter #displayName,
#displayName.username-effect-typewriter {
  overflow: visible;
  white-space: nowrap;
  color: var(--profile-text);
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.35),
    0 0 28px rgba(217, 86, 212, 0.25);
  animation: none;
}

#displayName.username-effect-typewriter.is-js-typewriter::after {
  content: "|";
  display: inline-block;
  margin-left: 0.04em;
  color: var(--profile-text);
  animation: cardCaretBlink 720ms step-end infinite;
}

#profilePage.name-effect-typewriter #displayName::before,
#displayName.username-effect-typewriter::before,
#profilePage.effect-typewriter #displayName::before,
#displayName.username-effect-typewriter::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0.12em;
  width: 0;
  max-width: var(--typewriter-width, 100%);
  overflow: hidden;
  border-right: 3px solid currentColor;
  color: var(--profile-text);
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.35),
    0 0 28px rgba(217, 86, 212, 0.25);
  white-space: nowrap;
  animation:
    cardTypewriter 4s steps(var(--typewriter-steps, 12), end) infinite,
    cardCaretBlink 720ms step-end infinite;
}

#profilePage.name-effect-typewriter #displayName.username-effect-typewriter.is-js-typewriter::before,
#profilePage.effect-typewriter #displayName.username-effect-typewriter.is-js-typewriter::before,
#displayName.username-effect-typewriter.is-js-typewriter::before {
  content: none;
}

#profilePage.name-effect-sparkle-blue #displayName,
#displayName.username-effect-sparkle-blue,
#profilePage.effect-sparkle-blue #displayName,
#displayName.username-effect-sparkle-blue {
  color: #465cff !important;
  text-shadow: 0 0 12px #465cff, 0 0 28px rgba(70, 92, 255, 0.75), 0 0 52px rgba(70, 92, 255, 0.45);
  animation: cardSparkleText 1.65s ease-in-out infinite;
}

#profilePage.name-effect-sparkle-green #displayName,
#displayName.username-effect-sparkle-green,
#profilePage.effect-sparkle-green #displayName,
#displayName.username-effect-sparkle-green {
  color: #baff5e !important;
  text-shadow: 0 0 12px #baff5e, 0 0 28px rgba(186, 255, 94, 0.72), 0 0 52px rgba(186, 255, 94, 0.38);
  animation: cardSparkleText 1.65s ease-in-out infinite;
}

#profilePage.name-effect-sparkle-pink #displayName,
#displayName.username-effect-sparkle-pink,
#profilePage.effect-sparkle-pink #displayName,
#displayName.username-effect-sparkle-pink {
  color: #ff3d9d !important;
  text-shadow: 0 0 12px #ff3d9d, 0 0 28px rgba(255, 61, 157, 0.72), 0 0 52px rgba(255, 61, 157, 0.42);
  animation: cardSparkleText 1.65s ease-in-out infinite;
}

#profilePage.name-effect-sparkle-red #displayName,
#displayName.username-effect-sparkle-red,
#profilePage.effect-sparkle-red #displayName,
#displayName.username-effect-sparkle-red {
  color: #ff4c4c !important;
  text-shadow: 0 0 12px #ff4c4c, 0 0 28px rgba(255, 76, 76, 0.72), 0 0 52px rgba(255, 76, 76, 0.42);
  animation: cardSparkleText 1.65s ease-in-out infinite;
}

#profilePage.name-effect-sparkle-white #displayName,
#displayName.username-effect-sparkle-white,
#profilePage.effect-sparkle-white #displayName,
#displayName.username-effect-sparkle-white {
  color: #ffffff !important;
  text-shadow: 0 0 12px #ffffff, 0 0 28px rgba(255, 255, 255, 0.72), 0 0 52px rgba(255, 255, 255, 0.36);
  animation: cardSparkleText 1.65s ease-in-out infinite;
}

#profilePage.name-effect-sparkle-yellow #displayName,
#displayName.username-effect-sparkle-yellow,
#profilePage.effect-sparkle-yellow #displayName,
#displayName.username-effect-sparkle-yellow {
  color: #ffff00 !important;
  text-shadow: 0 0 12px #ffff00, 0 0 28px rgba(255, 255, 0, 0.72), 0 0 52px rgba(255, 255, 0, 0.42);
  animation: cardSparkleText 1.65s ease-in-out infinite;
}

#profilePage.name-effect-sparkle-blue #displayName::before,
#displayName.username-effect-sparkle-blue::before,
#profilePage.name-effect-sparkle-green #displayName::before,
#displayName.username-effect-sparkle-green::before,
#profilePage.name-effect-sparkle-pink #displayName::before,
#displayName.username-effect-sparkle-pink::before,
#profilePage.name-effect-sparkle-red #displayName::before,
#displayName.username-effect-sparkle-red::before,
#profilePage.name-effect-sparkle-white #displayName::before,
#displayName.username-effect-sparkle-white::before,
#profilePage.name-effect-sparkle-yellow #displayName::before,
#displayName.username-effect-sparkle-yellow::before,
#profilePage.effect-sparkle-blue #displayName::before,
#displayName.username-effect-sparkle-blue::before,
#profilePage.effect-sparkle-green #displayName::before,
#displayName.username-effect-sparkle-green::before,
#profilePage.effect-sparkle-pink #displayName::before,
#displayName.username-effect-sparkle-pink::before,
#profilePage.effect-sparkle-red #displayName::before,
#displayName.username-effect-sparkle-red::before,
#profilePage.effect-sparkle-white #displayName::before,
#displayName.username-effect-sparkle-white::before,
#profilePage.effect-sparkle-yellow #displayName::before,
#displayName.username-effect-sparkle-yellow::before {
  content: "";
  position: absolute;
  inset: -12px -20px;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 28%, currentColor 0 2px, transparent 3px),
    radial-gradient(circle at 28% 78%, currentColor 0 2px, transparent 3px),
    radial-gradient(circle at 50% 10%, currentColor 0 2px, transparent 3px),
    radial-gradient(circle at 72% 76%, currentColor 0 2px, transparent 3px),
    radial-gradient(circle at 88% 24%, currentColor 0 2px, transparent 3px);
  filter: drop-shadow(0 0 8px currentColor);
  animation: cardSparkleDots 1.7s ease-in-out infinite;
}

#profilePage.name-effect-neon #displayName,
#displayName.username-effect-neon,
#profilePage.effect-neon #displayName,
#displayName.username-effect-neon {
  color: #49f5ff;
  text-shadow:
    0 0 10px #49f5ff,
    0 0 28px rgba(73, 245, 255, 0.85),
    0 0 54px rgba(73, 245, 255, 0.46);
}

#profilePage.name-effect-fire #displayName,
#displayName.username-effect-fire,
#profilePage.effect-fire #displayName,
#displayName.username-effect-fire,
#profilePage.name-effect-ice #displayName,
#displayName.username-effect-ice,
#profilePage.effect-ice #displayName,
#displayName.username-effect-ice,
#profilePage.name-effect-chrome #displayName,
#displayName.username-effect-chrome,
#profilePage.effect-chrome #displayName,
#displayName.username-effect-chrome,
#profilePage.name-effect-hologram #displayName,
#displayName.username-effect-hologram,
#profilePage.effect-hologram #displayName,
#displayName.username-effect-hologram,
#profilePage.name-effect-cosmic #displayName,
#displayName.username-effect-cosmic,
#profilePage.effect-cosmic #displayName,
#displayName.username-effect-cosmic,
#profilePage.name-effect-gold #displayName,
#displayName.username-effect-gold,
#profilePage.effect-gold #displayName,
#displayName.username-effect-gold,
#profilePage.name-effect-inferno #displayName,
#displayName.username-effect-inferno,
#profilePage.effect-inferno #displayName,
#displayName.username-effect-inferno {
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cardRainbowText 3s linear infinite;
}

#profilePage.name-effect-fire #displayName,
#displayName.username-effect-fire,
#profilePage.effect-fire #displayName,
#displayName.username-effect-fire {
  background-image: linear-gradient(90deg, #fff2a8, #ff9f1c, #ff2e00, #fff2a8);
  filter: drop-shadow(0 0 14px rgba(255, 77, 0, 0.5));
}

#profilePage.name-effect-ice #displayName,
#displayName.username-effect-ice,
#profilePage.effect-ice #displayName,
#displayName.username-effect-ice {
  background-image: linear-gradient(90deg, #ffffff, #8eeaff, #5f9dff, #ffffff);
  filter: drop-shadow(0 0 14px rgba(142, 234, 255, 0.42));
}

#profilePage.name-effect-toxic #displayName,
#displayName.username-effect-toxic,
#profilePage.effect-toxic #displayName,
#displayName.username-effect-toxic {
  color: #baff00;
  text-shadow: 0 0 10px #baff00, 0 0 30px rgba(186, 255, 0, 0.75), 0 0 58px rgba(100, 255, 0, 0.35);
}

#profilePage.name-effect-chrome #displayName,
#displayName.username-effect-chrome,
#profilePage.effect-chrome #displayName,
#displayName.username-effect-chrome {
  background-image: linear-gradient(180deg, #ffffff, #898989, #f7f7f7, #343434, #ffffff);
}

#profilePage.name-effect-ghost #displayName,
#displayName.username-effect-ghost,
#profilePage.effect-ghost #displayName,
#displayName.username-effect-ghost {
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 10px 0 rgba(255, 255, 255, 0.15), -10px 0 rgba(155, 92, 255, 0.18);
  animation: cardGhostText 2.2s ease-in-out infinite;
}

#profilePage.name-effect-wave #displayName,
#displayName.username-effect-wave,
#profilePage.effect-wave #displayName,
#displayName.username-effect-wave {
  animation: cardWaveText 1.6s ease-in-out infinite;
}

#profilePage.name-effect-jitter #displayName,
#displayName.username-effect-jitter,
#profilePage.effect-jitter #displayName,
#displayName.username-effect-jitter {
  animation: cardJitterText 340ms steps(2, end) infinite;
}

#profilePage.name-effect-scanline #displayName,
#displayName.username-effect-scanline,
#profilePage.effect-scanline #displayName,
#displayName.username-effect-scanline {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.42);
}

#profilePage.name-effect-scanline #displayName::after,
#displayName.username-effect-scanline::after,
#profilePage.effect-scanline #displayName::after,
#displayName.username-effect-scanline::after {
  content: "";
  position: absolute;
  inset: -4px -12px;
  background: linear-gradient(180deg, transparent 0 42%, rgba(255, 255, 255, 0.35) 48% 52%, transparent 58% 100%);
  pointer-events: none;
  animation: cardScanline 1.7s linear infinite;
}

#profilePage.name-effect-shadow-pop #displayName,
#displayName.username-effect-shadow-pop,
#profilePage.effect-shadow-pop #displayName,
#displayName.username-effect-shadow-pop {
  color: #ffffff;
  text-shadow: 4px 4px #a64dba, 8px 8px rgba(0, 0, 0, 0.74);
}

#profilePage.name-effect-hologram #displayName,
#displayName.username-effect-hologram,
#profilePage.effect-hologram #displayName,
#displayName.username-effect-hologram {
  background-image: linear-gradient(90deg, #8ffcff, #ffb8ff, #fff4a3, #8ffcff);
  filter: drop-shadow(0 0 14px rgba(143, 252, 255, 0.44));
}

#profilePage.name-effect-matrix #displayName,
#displayName.username-effect-matrix,
#profilePage.effect-matrix #displayName,
#displayName.username-effect-matrix {
  color: #72ff72;
  text-shadow: 0 0 10px #72ff72, 0 0 30px rgba(114, 255, 114, 0.7), 0 0 58px rgba(0, 255, 80, 0.34);
}

#profilePage.name-effect-lightning #displayName,
#displayName.username-effect-lightning,
#profilePage.effect-lightning #displayName,
#displayName.username-effect-lightning {
  color: #fff36a;
  text-shadow: 0 0 12px #fff36a, 0 0 32px rgba(120, 210, 255, 0.86);
  animation: cardLightningText 1.35s steps(2, end) infinite;
}

#profilePage.name-effect-cosmic #displayName,
#displayName.username-effect-cosmic,
#profilePage.effect-cosmic #displayName,
#displayName.username-effect-cosmic {
  background-image: linear-gradient(90deg, #9b5cff, #38c7ff, #ff4fd8, #9b5cff);
  filter: drop-shadow(0 0 18px rgba(155, 92, 255, 0.44));
}

#profilePage.name-effect-gold #displayName,
#displayName.username-effect-gold,
#profilePage.effect-gold #displayName,
#displayName.username-effect-gold {
  background-image: linear-gradient(90deg, #7a4b00, #ffd262, #fff2b3, #b07000, #ffd262);
  filter: drop-shadow(0 0 14px rgba(255, 210, 98, 0.38));
}

#profilePage.name-effect-inferno #displayName,
#displayName.username-effect-inferno,
#profilePage.effect-inferno #displayName,
#displayName.username-effect-inferno {
  background-image: linear-gradient(90deg, #3b0000, #ff2e00, #ffb000, #ffffff, #ff2e00);
  filter: drop-shadow(0 0 18px rgba(255, 46, 0, 0.5));
}

/* =========================
   ANIMATIONS
========================= */

@keyframes fall {
  to {
    transform: translateY(120vh);
  }
}

@keyframes drift {
  50% {
    margin-left: 34px;
  }
}

@keyframes floatParticle {
  0% {
    transform: translate3d(0, 110vh, 0) scale(0.8);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  50% {
    transform: translate3d(28px, 48vh, 0) scale(1.2);
  }

  100% {
    transform: translate3d(-18px, -12vh, 0) scale(0.8);
    opacity: 0;
  }
}

@keyframes bounce {
  to {
    transform: scaleY(0.45);
    opacity: 0.55;
  }
}

@keyframes cardAudioBorder {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
      0 34px 120px rgba(0, 0, 0, 0.6),
      0 0 96px color-mix(in srgb, var(--purple) 22%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -1px 0 rgba(255, 255, 255, 0.055);
  }

  50% {
    border-color: color-mix(in srgb, var(--pink) 54%, rgba(255, 255, 255, 0.18));
    box-shadow:
      0 34px 120px rgba(0, 0, 0, 0.62),
      0 0 118px color-mix(in srgb, var(--pink) 34%, transparent),
      0 0 46px color-mix(in srgb, var(--purple) 26%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(255, 255, 255, 0.075);
  }
}

@keyframes purpleNeonBorder {
  0%,
  100% {
    filter: saturate(1);
  }

  50% {
    filter: saturate(1.35) brightness(1.14);
  }
}

@keyframes cardGradientBorder {
  to {
    background-position: 260% 50%;
  }
}

@keyframes cardRainBorder {
  to {
    background-position: 100% 220%;
  }
}

@keyframes cardSweepBorder {
  0%,
  100% {
    background-position: -120% 50%;
  }

  50% {
    background-position: 180% 50%;
  }
}

@keyframes cardElectricBorder {
  0%,
  100% {
    filter: drop-shadow(0 0 12px rgba(96, 247, 255, 0.5));
  }

  50% {
    filter: drop-shadow(0 0 28px rgba(126, 92, 255, 0.62));
  }
}

@keyframes matrixBorderRain {
  to {
    background-position: 0 90px, 220% 50%;
  }
}

@keyframes cardGlitchBorder {
  0%,
  100% {
    box-shadow:
      0 34px 120px rgba(0, 0, 0, 0.62),
      2px 0 0 rgba(255, 47, 125, 0.62),
      -2px 0 0 rgba(0, 213, 255, 0.62);
  }

  50% {
    box-shadow:
      0 34px 120px rgba(0, 0, 0, 0.62),
      -3px 0 0 rgba(255, 47, 125, 0.7),
      3px 0 0 rgba(0, 213, 255, 0.7);
  }
}

@keyframes laserGridPulse {
  50% {
    background-position: 14px 14px, 14px 14px, 0 0;
    filter: brightness(1.12);
  }
}

@keyframes voidPulseCard {
  50% {
    box-shadow:
      0 34px 120px rgba(0, 0, 0, 0.62),
      0 0 calc(var(--border-glow, 48) * 1.3px) rgba(130, 75, 255, 0.42);
  }
}

@keyframes avatarOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes avatarBreathingGlow {
  0%,
  100% {
    transform: scale(0.96);
    filter: brightness(0.96);
  }

  50% {
    transform: scale(calc(1 + var(--visualizer-ring-scale, 0.066)));
    filter: brightness(1.28);
  }
}

@keyframes emberRise {
  0% {
    transform: translate3d(0, 108vh, 0) scale(0.7);
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  100% {
    transform: translate3d(28px, -16vh, 0) scale(1.35);
    opacity: 0;
  }
}

@keyframes meteorFall {
  0% {
    transform: translate3d(80vw, -20vh, 0) rotate(58deg);
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  100% {
    transform: translate3d(-22vw, 120vh, 0) rotate(58deg);
    opacity: 0;
  }
}

@keyframes plasmaMove {
  50% {
    transform: rotate(10deg) scale(1.12);
    filter: blur(30px) hue-rotate(50deg) saturate(1.8);
  }
}

@keyframes spotlightSweep {
  50% {
    background-position: 54% 38%, 46% 52%;
    filter: brightness(1.16);
  }
}

@keyframes gridDrift {
  to {
    background-position: 54px 54px;
  }
}

@keyframes vhsNoise {
  50% {
    transform: translateX(2px);
    opacity: 0.32;
  }
}

@keyframes starfieldDrift {
  to {
    background-position: 92px 92px, -126px 126px, 160px -160px;
  }
}

@keyframes blackoutPulse {
  0%,
  100% {
    opacity: 0.74;
    transform: scale(1);
  }

  50% {
    opacity: 0.96;
    transform: scale(1.04);
  }
}

@keyframes cardAudioAura {
  0%,
  100% {
    opacity: 0.32;
    filter: blur(20px);
    transform: scale(1);
  }

  50% {
    opacity: 0.58;
    filter: blur(24px);
    transform: scale(1.015);
  }
}

@keyframes avatarVisualizerRing {
  0%,
  100% {
    transform: scale(0.94);
    filter: brightness(0.95);
  }

  50% {
    transform: scale(calc(1 + var(--visualizer-ring-scale, 0.066)));
    filter: brightness(1.25);
  }
}

@keyframes avatarVisualizerHalo {
  0%,
  100% {
    transform: scale(0.98);
    opacity: 0.38;
  }

  50% {
    transform: scale(calc(1 + var(--visualizer-halo-scale, 0.11)));
    opacity: 0.76;
  }
}

@keyframes auroraMove {
  to {
    transform: translate3d(4%, -3%, 0) rotate(4deg);
  }
}

@keyframes starsMove {
  to {
    background-position:
      260px 260px,
      -320px 320px,
      360px -360px,
      -410px -410px;
  }
}

@keyframes cardRainbowText {
  to {
    background-position: 280% 0;
  }
}

@keyframes cardGlitchText {
  0%,
  100% {
    transform: translate(0, 0);
  }

  30% {
    transform: translate(1px, -1px);
  }

  65% {
    transform: translate(-1px, 1px);
  }
}

@keyframes cardShuffleText {
  0%,
  100% {
    transform: translate(0, 0) skewX(0);
    letter-spacing: -0.06em;
  }

  35% {
    transform: translate(1px, 0) skewX(-4deg);
    letter-spacing: -0.04em;
  }

  70% {
    transform: translate(-1px, 1px) skewX(3deg);
    letter-spacing: -0.075em;
  }
}

@keyframes cardSparkleText {
  50% {
    filter: brightness(1.35);
  }
}

@keyframes cardSparkleDots {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes cardGlowPulse {
  50% {
    filter: brightness(1.15);
  }
}

@keyframes cardPulseText {
  50% {
    transform: scale(1.035);
  }
}

@keyframes cardShineText {
  to {
    background-position: -260% 0;
  }
}

@keyframes cardTypewriter {
  0%,
  10% {
    width: 0;
  }

  40%,
  58% {
    width: var(--typewriter-width, 100%);
  }

  90%,
  100% {
    width: 0;
  }
}

@keyframes cardCaretBlink {
  50% {
    border-color: transparent;
  }
}

@keyframes cardGhostText {
  50% {
    opacity: 0.58;
    transform: translateX(2px);
  }
}

@keyframes cardWaveText {
  50% {
    transform: translateY(-5px) rotate(-1deg);
  }
}

@keyframes cardJitterText {
  25% {
    transform: translate(1px, -1px);
  }

  75% {
    transform: translate(-1px, 1px);
  }
}

@keyframes cardScanline {
  to {
    transform: translateY(44px);
  }
}

@keyframes cardLightningText {
  0%,
  84%,
  100% {
    filter: brightness(1);
  }

  86%,
  92% {
    filter: brightness(2);
  }
}

@keyframes editBackgroundSweep {
  0% {
    transform: translate3d(-7%, -3%, 0) rotate(0deg) scale(1.06);
    opacity: 0.72;
  }

  50% {
    transform: translate3d(6%, 4%, 0) rotate(5deg) scale(1.14);
    opacity: 0.94;
  }

  100% {
    transform: translate3d(-7%, -3%, 0) rotate(0deg) scale(1.06);
    opacity: 0.72;
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 560px) {
  body {
    overflow: auto;
  }

  .profile-page {
    align-items: start;
    padding: 18px;
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .profile-card {
    min-height: auto;
    padding: 30px 20px 24px;
  }

  .top-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
  }

  .avatar-wrap {
    grid-column: auto;
  }

  .floating-music-button {
    justify-self: center;
    order: 2;
  }

  .display-name {
    font-size: 42px;
  }

  .bio {
    font-size: 15px;
  }

  .discord-presence-card {
    width: 100%;
  }

  .discord-left {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .discord-avatar-wrap {
    width: 52px;
    height: 52px;
  }

  .discord-avatar {
    width: 48px;
    height: 48px;
  }

  .music-card {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .music-card button {
    width: 100%;
  }

  .bars {
    justify-content: center;
  }

  .profile-footer {
    flex-direction: column;
    text-align: center;
  }
}