/* Profils complets, lot 2 : le look porté sur un profil (thème, fond) et les aperçus de la boutique.
   Le thème habille l'article du profil seulement ; la barre, le pied de page, les boutons et les champs
   gardent les couleurs du site. */

.dz-themed {
  --dz-night: var(--theme-bg);
  --dz-surface: var(--theme-surface);
  --dz-text: var(--theme-text);
  --dz-muted: var(--theme-muted);
  --dz-warden-bright: var(--theme-accent);
  --dz-line: color-mix(in srgb, var(--theme-accent) 30%, var(--theme-surface));
  position: relative;
  margin-top: 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--theme-bg) 86%, transparent);
  color: var(--theme-text);
}

.dz-themed .dz-block {
  background: color-mix(in srgb, var(--theme-surface) 90%, transparent);
}

.dz-themed[data-theme-font="serif"] :is(h1, h2, h3, .dz-me-name, .dz-game-card-name) {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.5px;
}

/* Boutons et champs : les couleurs du site, quel que soit le thème. */
.dz-themed :is(.dz-button, .dz-small-button, .dz-field, .dz-hovercard) {
  --dz-night: #070d15;
  --dz-surface: #0f1a28;
  --dz-text: #f4f7fb;
  --dz-muted: #9fb1c6;
  --dz-line: #22364f;
}

/* Le fond porté : fixe derrière tout le profil, sous un voile qui garde le texte lisible. */
.dz-profile-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--theme-bg, var(--dz-night));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.dz-profile-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(4 7 12 / 72%), rgb(4 7 12 / 88%));
}

/* Fond porté : l'article laisse voir l'image ; ce qui n'a pas de carte reçoit un panneau, pour rester lisible
   même sur une image claire choisie par le membre. */
.dz-has-backdrop.dz-themed {
  background: transparent;
}

.dz-has-backdrop :is(.dz-profile-head > div, .dz-actions, .dz-block-empty) {
  padding: 8px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--dz-surface) 92%, transparent);
}

/* La phrase, les rubriques et l'accueil d'un nouveau membre reçoivent le même panneau. */
.dz-has-backdrop :is(.dz-profile-intro, .dz-profile-tabs, .dz-welcome-note) {
  padding: 8px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--dz-surface) 92%, transparent);
}

/* Le navigateur ne sait pas figer une image animée : pour qui demande moins d'animations, le voile seul. */
@media (prefers-reduced-motion: reduce) {
  .dz-backdrop-animated {
    background-image: none !important;
  }
}

/* Effet d'ouverture (profile-effects.js) : par-dessus la page, sous la barre, jamais cliquable. */
.dz-effect {
  position: fixed;
  inset: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dz-effect-again {
  margin-top: 16px;
}

/* L'atelier des créations (lot 3). */
.dz-creation-list {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.dz-creation-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 12px 14px;
  border: 1px solid var(--dz-line);
  border-radius: 12px;
  background: var(--dz-surface);
  overflow-wrap: anywhere;
}

.dz-creation-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 8px 0;
}

.dz-creation-preview {
  margin: 16px 0;
  padding: 18px 20px;
  border: 1px solid var(--theme-accent);
  border-radius: 14px;
  background: var(--theme-surface);
  color: var(--theme-text);
}

.dz-creation-preview h3 {
  margin-bottom: 8px;
  color: var(--theme-text);
}

.dz-creation-preview a {
  color: var(--theme-accent);
}

.dz-creation-shelf {
  margin-top: 12px;
}

/* Aperçus de la boutique. */
.dz-preview-theme {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 12px;
  background: var(--theme-bg);
}

.dz-preview-theme-card {
  padding: 10px 18px;
  border: 1px solid var(--theme-accent);
  border-left: 4px solid var(--theme-accent);
  border-radius: 10px;
  background: var(--theme-surface);
  color: var(--theme-text);
  font: 700 1.1rem/1 var(--dz-display);
  text-transform: uppercase;
}

.dz-preview-theme-card[data-font="serif"] {
  font-family: Georgia, "Times New Roman", serif;
}

.dz-preview-effect,
.dz-preview-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}