/* Thèmes de soirée : décor uniquement (participant + écran géant).
 * Variables posées par event-themes-ui.js sur <html data-klr-theme="..."> :
 *   --thm (accent), --thm-ink (encre lisible sur l'accent), --thm-motif (motif d'icône).
 * Jamais touchés : rose des états participant, or de l'admin, Safe Place, alertes,
 * statut « En direct », légende de la grille du mur (inscrit, lu, non lu, gagnant).
 * Mobile-safe : transform/opacity seulement, aucun backdrop-filter. Sans thème (Classique)
 * rien n'est posé : aucune règle de ce fichier ne s'applique. */

/* ── Pastille d'édition (participant et mur) ─────────────────────────── */
.thm-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; box-sizing: border-box;
  padding: 3px 8px 3px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--thm) 16%, transparent);
  color: color-mix(in srgb, var(--thm) 72%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--thm) 42%, transparent);
  font: 700 .6875rem/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
}
.thm-chip svg { flex: none; width: 1.1em; height: 1.1em; }
.thm-chip-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="light"] .thm-chip { background: var(--thm); color: var(--thm-ink); box-shadow: none; }

/* Participant : sous « En direct » dans la colonne .tb-kicker, sans l'écraser. */
.tb-kicker > .thm-chip { align-self: flex-start; margin-top: 5px; border-radius: 12px; }
/* Nom Élite long (32 caractères) : la pastille passe à la ligne plutôt que de tronquer. */
.tb-kicker > .thm-chip .thm-chip-txt { white-space: normal; overflow-wrap: anywhere; }

/* ── Calque d'ambiance : overlay fixe, sans toucher à la position d'aucun élément ── */
.thm-ambient {
  position: fixed; left: 0; right: 0; top: 0; height: 360px; z-index: 3; pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--thm) 30%, transparent), transparent 70%);
}
.thm-ambient::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--thm); opacity: .9; }
.thm-ambient-motif {
  position: absolute; inset: 0; opacity: .10;
  background-image: var(--thm-motif); background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent);
}
.thm-ambient--p { display: none; }
body:is(.mode-party, .mode-dual) .thm-ambient--p { display: block; }
/* Safe Place : écran d'alerte, sans décor de soirée. */
body.klr-safe-open .thm-ambient--p { display: none; }
[data-theme="light"] .thm-ambient { mix-blend-mode: normal; opacity: .5; }

/* ── Participant : sceau sur le badge, mot-sticker de l'affiche Jeux ─────── */
.thm-seal {
  position: absolute; right: -8px; top: 2px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none; rotate: 14deg;
  background: var(--thm); color: var(--thm-ink); box-shadow: 0 0 0 3px var(--bg, #09090E);
}
.thm-seal svg { width: 20px; height: 20px; }
.app-poster em[data-thm] { --sticker-bg: var(--thm); --sticker-ink: var(--thm-ink); }

/* Mention de marque d'un thème (`notice`) : discrète mais lisible, jamais tronquée.
   --text2 : 8,3:1 sur le fond nuit, 9:1 en Jour (base.css). */
.thm-notice {
  margin: 8px 0 0; font: 500 .75rem/1.4 'DM Sans', system-ui, sans-serif; color: var(--text2);
  max-width: 46ch; overflow-wrap: anywhere;
}
body:is(.mode-party, .mode-dual) .klr-ttl .thm-notice { margin-top: 8px; font-size: .75rem; line-height: 1.4; }
.thm-notice--wall {
  flex-shrink: 0; max-width: none; margin: 0; text-align: center;
  padding: clamp(.3rem, .8vmin, 1.1rem) var(--vw-gutter, 1rem);
  font-size: clamp(.8rem, 1.6vmin, 2.4rem); border-top: 1px solid var(--vw-line, transparent);
}

/* ── Écran géant ─────────────────────────────────────────────────────── */
.thm-chip--wall {
  font-size: clamp(.9rem, 2vmin, 2.6rem); padding: .4em .9em .4em .7em; gap: .5em;
  margin-right: clamp(.6rem, 1.4vmin, 1.6rem);
}
.thm-chip--stage { font-size: clamp(.9rem, 1.9vmin, 2.4rem); padding: .4em .9em .4em .7em; gap: .5em; }
html[data-klr-theme] header {
  border-bottom-color: color-mix(in srgb, var(--thm) 55%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--thm) 35%, transparent);
}
html[data-klr-theme] .vw-band {
  background: color-mix(in srgb, var(--thm) 9%, transparent);
  border-top-color: color-mix(in srgb, var(--thm) 45%, transparent);
}
html[data-klr-theme] .vw-band-item { color: color-mix(in srgb, var(--thm) 72%, #fff); }
[data-theme="light"][data-klr-theme] .vw-band-item { color: var(--text); }
.vw-band-item .thm-ico { display: inline-block; vertical-align: -.12em; margin: 0 .55em 0 .1em; color: var(--thm); }
.vw-band-item .thm-ico svg { width: .95em; height: .95em; display: block; }
html[data-klr-theme] .vw-poster { --sticker-bg: var(--thm); --sticker-ink: var(--thm-ink); }
html[data-klr-theme] .vw-match {
  background: radial-gradient(55% 50% at 50% 46%, color-mix(in srgb, var(--thm) 26%, transparent), transparent 72%), var(--vw-match-bg);
}
.thm-match-line {
  color: var(--thm); font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 800;
}
[data-theme="light"] .thm-match-line { color: var(--text); }
html[data-klr-theme] .vw-heart,
html[data-klr-theme] .vw-heart:nth-child(3n+1) { color: var(--thm); }
html[data-klr-theme] .vw-heart:nth-child(3n+1) { color: color-mix(in srgb, var(--thm) 50%, #fff); }
.vw-heart svg { width: 100%; height: 100%; display: block; stroke-width: 2; }

@media (prefers-reduced-motion: reduce) {
  .thm-ambient, .thm-ambient-motif, .thm-seal { animation: none; transition: none; }
}