/* Identidade visual do jogador. A cor e o clima escolhidos acompanham o
   perfil próprio e também a página pública vista por outros jogadores. */
:root {
  --profile-accent: #39e6ff;
  --profile-ink: #05070b;
  --profile-bg: #05070b;
  --profile-surface: #101218;
  --profile-surface-strong: #151821;
  --profile-text: #f7f8fb;
  --profile-muted: #aab2c2;
}

body[data-profile-theme='midnight'] {
  --profile-bg: #04070d;
  --profile-surface: #0d131e;
  --profile-surface-strong: #111b2a;
}

body[data-profile-theme='ember'] {
  --profile-bg: #080506;
  --profile-surface: #151012;
  --profile-surface-strong: #211417;
}

body[data-profile-theme='violet'] {
  --profile-bg: #07050c;
  --profile-surface: #12101c;
  --profile-surface-strong: #1a1428;
}

html.show-profile body,
body.public-profile-page {
  color: var(--profile-text);
  background:
    radial-gradient(circle at 88% 5%, color-mix(in srgb, var(--profile-accent) 15%, transparent), transparent 31rem),
    radial-gradient(circle at 7% 62%, color-mix(in srgb, var(--profile-accent) 7%, transparent), transparent 28rem),
    var(--profile-bg) !important;
}

html.show-profile .navbar,
body.public-profile-page .navbar {
  border-bottom-color: color-mix(in srgb, var(--profile-accent) 42%, transparent) !important;
}

html.show-profile .admin-link,
html.show-profile .share-button,
html.show-profile .theme-toggle,
body.public-profile-page .admin-link {
  border-color: color-mix(in srgb, var(--profile-accent) 28%, #30333b) !important;
  background: color-mix(in srgb, var(--profile-accent) 6%, #101116) !important;
}

html.show-profile .admin-link:hover,
html.show-profile .share-button:hover,
html.show-profile .theme-toggle:hover,
body.public-profile-page .admin-link:hover {
  border-color: color-mix(in srgb, var(--profile-accent) 70%, white) !important;
  background: color-mix(in srgb, var(--profile-accent) 17%, #101116) !important;
}

html.show-profile .brand-mark,
body.public-profile-page .brand-mark {
  border-color: color-mix(in srgb, var(--profile-accent) 72%, white) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--profile-accent) 88%, white), color-mix(in srgb, var(--profile-accent) 58%, #090a0f)) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--profile-accent) 25%, transparent) !important;
}

html.show-profile .hero,
html.show-profile .collection-tools,
html.show-profile .content-card,
body.public-profile-page .public-hero {
  border-color: color-mix(in srgb, var(--profile-accent) 38%, #29313e) !important;
  background-color: color-mix(in srgb, var(--profile-surface) 94%, var(--profile-accent)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28), 0 0 0 1px color-mix(in srgb, var(--profile-accent) 5%, transparent) !important;
}

html.show-profile .cover-art::after,
body.public-profile-page .public-cover::after {
  background: linear-gradient(0deg, var(--profile-surface), transparent 84%) !important;
}

html.show-profile .avatar,
body.public-profile-page .public-avatar {
  border-color: var(--profile-surface) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--profile-accent) 72%, transparent), 0 16px 34px rgba(0, 0, 0, .5) !important;
}

html.show-profile .eyebrow,
html.show-profile .status,
body.public-profile-page .eyebrow {
  color: color-mix(in srgb, var(--profile-accent) 78%, white) !important;
}

html.show-profile .status span {
  background: var(--profile-accent) !important;
  box-shadow: 0 0 10px var(--profile-accent) !important;
}

html.show-profile .section-heading,
body.public-profile-page .section-heading {
  border-bottom-color: color-mix(in srgb, var(--profile-accent) 27%, transparent) !important;
}

html.show-profile .section-heading h2::after,
body.public-profile-page .section-heading h2::after {
  background: var(--profile-accent) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--profile-accent) 48%, transparent);
}

html.show-profile .profile-copy .platform-chip,
body.public-profile-page .public-platforms span {
  color: color-mix(in srgb, var(--profile-accent) 35%, white) !important;
  border-color: color-mix(in srgb, var(--profile-accent) 48%, transparent) !important;
  background: color-mix(in srgb, var(--profile-accent) 12%, var(--profile-surface)) !important;
}

html.show-profile .profile-copy .platform-chip::before {
  background: var(--profile-accent) !important;
  box-shadow: 0 0 9px var(--profile-accent) !important;
}

html.show-profile .profile-copy .platform-chip[aria-pressed='true'],
html.show-profile .save-button,
html.show-profile .follow-button,
body.public-profile-page .follow-button {
  color: var(--profile-ink) !important;
  border-color: color-mix(in srgb, var(--profile-accent) 72%, white) !important;
  background: var(--profile-accent) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--profile-accent) 24%, transparent) !important;
}

html.show-profile .social-chip,
html.show-profile .mini-stat,
html.show-profile .journey-summary,
html.show-profile .year-timeline,
html.show-profile .tracked-games,
body.public-profile-page .public-summary div {
  border-color: color-mix(in srgb, var(--profile-accent) 23%, #343943) !important;
  background: color-mix(in srgb, var(--profile-surface-strong) 94%, var(--profile-accent)) !important;
}

body.public-profile-page .public-game {
  border-color: color-mix(in srgb, var(--profile-accent) 32%, #303641) !important;
}

html.show-profile .bar-track span,
html.show-profile .next-progress-track span,
html.show-profile .progress-bar span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--profile-accent) 68%, #101116), var(--profile-accent)) !important;
}

body.public-profile-page .public-game-meta b,
body.public-profile-page .public-summary b {
  color: color-mix(in srgb, var(--profile-accent) 80%, white) !important;
}

@media (prefers-reduced-motion: no-preference) {
  html.show-profile .hero,
  body.public-profile-page .public-hero {
    animation: profile-theme-arrival .45s ease-out both;
  }
  @keyframes profile-theme-arrival {
    from { opacity: .55; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}