.hybrid-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 16px 8px;
}

.hybrid-chat-head-label {
  color: var(--hybrid-gold);
  font: 700 0.72rem/1 var(--hybrid-font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hybrid-chat-head-title {
  display: block;
  margin-top: 1px;
  color: var(--chat-ui-ink, var(--hybrid-ink));
  font: 400 1.05rem/1 var(--hybrid-font-title);
}

.hybrid-chat-head-note {
  max-width: 360px;
  color: var(--chat-ui-muted, var(--hybrid-muted));
  text-align: right;
  font-size: 0.84rem;
}

.chat-toolbar {
  margin: 0;
  padding: 6px 16px 4px;
}

.chat-tabs {
  padding: 0;
  gap: 4px;
}

.chat-tabs-bottom {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

.chat-tabs-bottom.is-hidden {
  display: none;
}

.chat-tab {
  border-radius: var(--hybrid-radius-sm);
  padding: 4px 10px;
  background: var(--hybrid-bg-panel-soft);
  border: 1px solid var(--hybrid-border);
  color: var(--chat-ui-muted, var(--hybrid-muted));
  font: 700 0.72rem var(--hybrid-font-ui);
  transition: all 0.2s ease;
}

.chat-tab:hover,
.chat-tab:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--chat-ui-ink, var(--hybrid-ink));
}

.chat-tab.is-active {
  background: var(--hybrid-bg-panel);
  color: var(--hybrid-gold);
  border-color: var(--hybrid-gold);
}

.chat-tab-compact {
  padding: 3px 8px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.chat-tab-compact .chat-tab-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

.chat-tab-compact:hover .chat-tab-icon,
.chat-tab-compact.is-active .chat-tab-icon {
  transform: scale(1.25);
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1.25); }
  14% { transform: scale(1.45); }
  28% { transform: scale(1.25); }
  42% { transform: scale(1.38); }
  56% { transform: scale(1.25); }
}

.chat-tab-compact.is-active[data-channel-id="lovers"] .chat-tab-icon {
  animation: heartbeat 1.4s ease-in-out infinite;
}

.legacy-center-board {
  position: relative !important;
  display: flex;
  flex-direction: column;
  --chat-composer-height: 46px;
  /* Limite l'overlay de nuit à la zone du chat entre les bannières. Renseigné par JS. */
  --night-mask-top: 0px;
  --night-mask-bottom: 0px;
}

.chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 6px 0;
  background: transparent;
  border: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: opacity 0.15s ease;
  zoom: var(--chat-ui-scale, 0.8);
  contain: layout style;
}

.chat-messages::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Horizontal padding on all chat children except banners */
.chat-messages > * {
  padding-left: 18px;
  padding-right: 18px;
}

.chat-messages > .chat-message-banner {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  align-self: stretch;
  max-width: none !important;
  box-sizing: border-box;
}

.chat-messages > .chat-phase-separator {
  box-sizing: border-box;
}

.legacy-chat-form {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  max-width: none !important;
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  transform: translateY(23px);
  margin-top: auto;
  margin-bottom: 0 !important;
  border: 1px solid var(--hybrid-border-strong, rgba(216, 188, 121, 0.4));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  z-index: 10;
  min-height: var(--chat-composer-height);
  height: var(--chat-composer-height);
  box-sizing: border-box;
}

.legacy-chat-form > * {
  min-width: 0;
}

@keyframes chatShake {
  0%, 100% { transform: translateX(0) translateY(23px); }
  15% { transform: translateX(-6px) translateY(23px); }
  30% { transform: translateX(5px) translateY(23px); }
  45% { transform: translateX(-4px) translateY(23px); }
  60% { transform: translateX(3px) translateY(23px); }
  75% { transform: translateX(-2px) translateY(23px); }
}

.legacy-chat-form.chat-shake {
  animation: chatShake 0.4s ease;
}

@keyframes chatDeniedPulse {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(0.94); }
  60% { transform: scale(1.04); }
}

.legacy-chat-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 32px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--chat-input-ink, var(--chat-ui-ink, var(--hybrid-ink)));
  font-size: 0.9rem;
}

.legacy-chat-input::placeholder {
  color: var(--chat-input-placeholder, var(--chat-ui-muted, var(--hybrid-muted)));
}

.legacy-chat-input:focus {
  outline: none !important;
}

.legacy-chat-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.chat-bottom-actions {
  padding: 0 12px 0;
  background: transparent;
}

.chat-bottom-actions:not(:has(button:not(.hidden))) {
  display: none;
}

.legacy-chat-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  color: var(--chat-ui-muted, var(--hybrid-muted));
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0;
}

.legacy-chat-icon-btn:hover {
  color: var(--chat-ui-ink, var(--hybrid-ink));
}

.legacy-chat-form {
  overflow: visible;
}

.legacy-chat-emoji-toggle {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 213, 79, 0.18);
  border: 1px solid rgba(255, 213, 79, 0.34);
  color: #ffd54f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.18);
}

.legacy-chat-emoji-toggle:hover,
.legacy-chat-emoji-toggle.is-open {
  background: rgba(255, 213, 79, 0.28);
  border-color: rgba(255, 213, 79, 0.52);
  color: #ffe082;
}

.legacy-chat-emoji-glyph {
  font-size: 1.3rem;
  line-height: 1;
}

.chat-emoji-picker {
  position: absolute;
  left: 10px;
  bottom: calc(100% + 10px);
  z-index: 30;
  display: grid;
  gap: 6px;
  width: min(320px, calc(100vw - 44px));
  padding: 10px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(41, 45, 54, 0.98), rgba(24, 27, 34, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
}

.chat-emoji-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
}

.chat-emoji-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  transition:
    transform 0.12s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.chat-emoji-btn:hover,
.chat-emoji-btn:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 213, 79, 0.22);
  transform: translateY(-1px);
  outline: none;
}

.chat-mention-picker {
  position: absolute;
  left: 54px;
  bottom: calc(100% + 10px);
  z-index: 32;
  display: grid;
  gap: 4px;
  width: min(280px, calc(100vw - 86px));
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(33, 37, 45, 0.98), rgba(20, 23, 30, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.chat-mention-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--hybrid-ink);
  cursor: pointer;
  text-align: left;
  transition:
    background 0.16s ease,
    transform 0.12s ease;
}

.chat-mention-option:hover,
.chat-mention-option:focus-visible,
.chat-mention-option.is-selected {
  background: rgba(216, 188, 121, 0.16);
  transform: translateY(-1px);
  outline: none;
}

.chat-mention-option-at {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--hybrid-gold);
}

.chat-mention-option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.chat-mention {
  display: inline-block;
  margin: 0 1px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(216, 188, 121, 0.16);
  color: var(--hybrid-gold);
  font-weight: 800;
  border: 1px solid rgba(216, 188, 121, 0.2);
}

.chat-mention.is-targeted {
  background: rgba(255, 94, 94, 0.18);
  color: #ffb1b1;
  border-color: rgba(255, 94, 94, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 94, 94, 0.08);
}

.legacy-chat-input.chat-denied,
.legacy-chat-send.chat-denied {
  animation: chatDeniedPulse 0.28s ease;
}

.legacy-chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--hybrid-gold), color-mix(in srgb, var(--hybrid-gold) 70%, #000));
  color: var(--hybrid-bg-deep, #0b0e11);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.14s ease,
    filter 0.14s ease,
    opacity 0.14s ease,
    box-shadow 0.14s ease;
}

.legacy-chat-send:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.legacy-chat-send:active {
  transform: translateY(0);
}

.legacy-chat-send:focus-visible {
  outline: 2px solid rgba(255, 226, 143, 0.56);
  outline-offset: 2px;
}

.legacy-chat-send.is-draft-locked {
  opacity: 0.88;
}

.legacy-chat-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}

.legacy-chat-send-glyph {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transform: translateX(1px);
}

.legacy-chat-send-icon {
  width: 18px;
  height: 18px;
  overflow: visible;
}

.chat-tab.is-active {
  background: var(--hybrid-bg-panel);
  color: var(--hybrid-gold);
  border-color: var(--hybrid-gold);
}

.chat-author {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--hybrid-gold); /* Default for general chat */
}

.chat-text {
  display: inline;
  max-width: 100%;
  color: var(--chat-ui-ink, var(--hybrid-ink));
  font-size: 0.88rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

/* ── Player Chat Messages ── */
.chat-message-user {
  background: transparent;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 0;
  padding-right: 0;
}

.chat-bubble {
  display: block;
  padding: 1px 6px 1px 0;
  border-radius: 0;
  background: transparent;
  border: none;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.chat-message-own .chat-bubble {
  background: transparent;
}

/* Wolf channel bubbles */
.chat-message-wolves .chat-bubble {
  background: transparent;
}

/* Dead channel bubbles */
.chat-message-dead .chat-bubble {
  background: transparent;
}

/* Lovers channel bubbles */
.chat-message-lovers .chat-bubble {
  background: transparent;
}

/* Siblings channel bubbles */
.chat-message-siblings .chat-bubble {
  background: transparent;
}

.chat-meta-inline {
  font-size: 0.85rem;
  display: inline;
}

.chat-time {
  color: var(--chat-ui-muted, var(--hybrid-muted, #8b9aa7));
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.7;
}

.chat-role-banner-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(216, 188, 121, 0.4));
}

.chat-role-icon-small {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Atmospheric Channel Styles */
.chat-message-wolves .chat-author {
  color: var(--chat-wolf-ink);
  text-shadow: 0 0 10px rgba(255, 94, 94, 0.3);
  font-weight: 800;
}

.chat-message-wolves .chat-author-alias {
  font-style: italic;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 94, 94, 0.7);
  letter-spacing: 0.03em;
}

.chat-message-dead .chat-text {
  color: var(--chat-dead-ink);
  opacity: 1;
}

.chat-message-dead .chat-author {
  color: var(--chat-dead-ink);
  opacity: 1;
}

.chat-message-dead .chat-author::before {
  content: "👻 ";
  font-size: 0.8em;
}

.chat-message-lovers .chat-author {
  color: #ff85a1;
  text-shadow: 0 0 8px rgba(255, 100, 160, 0.2);
}

.chat-message-siblings .chat-author {
  color: #85a1ff;
  text-shadow: 0 0 8px rgba(100, 140, 255, 0.2);
}

.chat-message-system .chat-system-text {
  color: var(--chat-system-ink);
  font-weight: 600;
}

.chat-channel-note {
  padding: 0 18px;
  color: var(--chat-ui-muted, var(--hybrid-muted));
  font-size: 0.85rem;
  min-height: 0;
  max-height: 28px;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.25s ease, max-height 0.25s ease;
}

.chat-channel-note.is-faded {
  opacity: 0;
  max-height: 0;
}

/* System Messages */
.chat-message-system {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--chat-ui-muted, var(--hybrid-muted));
  border-left: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  transition: background 0.2s ease;
}

.chat-message-system:hover {
  background: rgba(255, 255, 255, 0.02);
}

.chat-message-narration {
  animation: none;
  transition: none !important;
}

.chat-message-system .chat-role-icon-small {
  margin-top: 1px;
}

.chat-system-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 1px;
}

.chat-system-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.chat-message-system .chat-system-text {
  line-height: 1.45;
}

/* Inline player name highlights */
.chat-inline-name {
  font-weight: 800;
  color: var(--chat-inline-name-ink, #fff);
  letter-spacing: 0.01em;
}

/* Name highlights in banners inherit banner text color */
.chat-message-banner .chat-inline-name {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Name highlights in elimination */
.chat-elimination-line .chat-inline-name {
  color: #fff;
}

.chat-inline-role {
  display: inline;
  padding: 0 5px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 0.88em;
  color: var(--hybrid-gold);
  background: rgba(201, 164, 106, 0.12);
  border: 1px solid rgba(201, 164, 106, 0.18);
}

/* Join/leave entries */
.chat-message-system.is-entry {
  border-left-color: rgba(92, 218, 137, 0.35);
}
.chat-message-system.is-entry .chat-system-icon {
  color: var(--hybrid-success, #5cda89);
  opacity: 0.8;
}
.chat-message-system.is-exit {
  border-left-color: rgba(255, 94, 94, 0.25);
}
.chat-message-system.is-exit .chat-system-icon {
  color: var(--hybrid-danger, #ff5e5e);
  opacity: 0.7;
}


.chat-phase-separator {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 14px;
  margin: 6px 0;
  background: rgba(216, 188, 121, 0.05);
  border-top: 1px solid rgba(216, 188, 121, 0.15);
  border-bottom: 1px solid rgba(216, 188, 121, 0.15);
  color: #d8bc79;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  font-size: 0.85rem;
  text-align: center;
}

.chat-phase-separator-label {
  flex: 0 1 auto;
  text-align: center;
}

@media (min-width: 1900px) {
  .hybrid-chat-head {
    gap: 12px;
    padding: 8px 14px 10px;
  }

  .hybrid-chat-head-title {
    margin-top: 2px;
    font-size: 1.2rem;
  }

  .hybrid-chat-head-note {
    font-size: 0.95rem;
  }

  .chat-toolbar {
    padding: 4px 14px 2px;
  }

  .chat-tabs {
    gap: 6px;
  }

  .chat-tab {
    padding: 4px 12px;
    font-size: 0.75rem;
  }

  .chat-messages {
    margin: 0;
    padding: 8px 0 6px;
    min-height: 0;
  }

  .legacy-chat-form {
    gap: 10px;
    padding: 0 14px;
  }

  .legacy-chat-input {
    height: 34px;
    font-size: 0.95rem;
  }

  .legacy-chat-actions {
    gap: 8px;
  }

  .chat-bottom-actions {
    padding: 0 18px 0;
  }

  .legacy-chat-icon-btn {
    width: 32px;
    height: 32px;
  }

  .chat-text {
    font-size: 0.92rem;
    line-height: 1.4;
  }
}

/* ── LGEL-Style Night Banner ── */
/* ── Chat Banners Base ── */
.chat-message-banner {
  position: relative;
  padding: 0;
  margin: 6px 0 4px;
  border: none;
  border-radius: 0;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 100px;
}

.chat-message-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.chat-message-banner p {
  position: relative;
  z-index: 5;
  margin: 0 0 12px 0;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-align: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Night Banner ── */
.chat-message-banner.chat-banner-night {
  background: #07101c;
  min-height: 120px;
}

.chat-message-banner.chat-banner-night::before {
  background-image: url("../img/ui/banners/banner-night.png");
  background-image: image-set(
    url("../img/ui/banners/banner-night.webp") type("image/webp"),
    url("../img/ui/banners/banner-night.png") type("image/png")
  );
  background-size: cover;
  background-position: center;
}

.chat-message-banner.chat-banner-night p {
  color: #d4c88a;
  background: rgba(7, 16, 28, 0.72);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  border-color: rgba(212, 200, 138, 0.15);
}


/* ── Day Banner ── */
.chat-message-banner.chat-banner-day {
  background: #e8dcc8;
  min-height: 120px;
}

.chat-message-banner.chat-banner-day::before {
  background-image: url("../img/ui/banners/banner-day.png");
  background-image: image-set(
    url("../img/ui/banners/banner-day.webp") type("image/webp"),
    url("../img/ui/banners/banner-day.png") type("image/png")
  );
  background-size: cover;
  background-position: center;
}

.chat-message-banner.chat-banner-day p {
  color: #3a2a10;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ── Victory Banners (chat) ── */

/* Shared victory banner base */
.chat-message-banner[class*="chat-banner-victory"] {
  min-height: 150px;
  overflow: visible;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 16px;
  padding-bottom: 16px;
  animation: chat-important-rise 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}


.chat-message-banner[class*="chat-banner-victory"]::before {
  background-size: cover;
  background-position: center;
  filter: brightness(0.7) saturate(1.1);
}

.chat-message-banner[class*="chat-banner-victory"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 2;
}

.chat-message-banner[class*="chat-banner-victory"] p {
  position: relative;
  z-index: 5;
  margin: 0;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  max-width: 88%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* "FIN DE PARTIE" label */
.chat-victory-endgame-label {
  position: relative;
  z-index: 5;
  display: block;
  margin-bottom: 8px;
  font: 800 0.65rem/1 var(--hybrid-font-ui, sans-serif);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Victory banner action buttons */
.chat-victory-actions {
  position: relative;
  z-index: 5;
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.chat-victory-btn {
  padding: 7px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  font: 600 0.8rem/1.3 var(--hybrid-font-body, sans-serif);
  cursor: pointer;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.chat-victory-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.chat-victory-btn:active {
  transform: translateY(0);
}

.chat-victory-btn-next {
  background: linear-gradient(180deg, rgba(212, 165, 60, 0.85), rgba(184, 134, 46, 0.85));
  color: #1a1000;
  border-color: rgba(200, 160, 50, 0.5);
}

.chat-victory-btn-next:hover {
  background: linear-gradient(180deg, rgba(224, 180, 74, 0.9), rgba(196, 149, 48, 0.9));
}

.chat-victory-btn-reset {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
}

.chat-victory-btn-reset:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ── Victory banner collapsed/expanded toggle ── */
.chat-message-banner[class*="chat-banner-victory"].is-collapsed {
  min-height: 0;
  cursor: pointer;
}
.chat-message-banner[class*="chat-banner-victory"].is-collapsed p,
.chat-message-banner[class*="chat-banner-victory"].is-collapsed .chat-victory-actions,
.chat-message-banner[class*="chat-banner-victory"].is-collapsed .chat-role-banner-icon {
  display: none;
}
.chat-message-banner[class*="chat-banner-victory"].is-collapsed::before {
  opacity: 0.15;
}
.chat-message-banner[class*="chat-banner-victory"]:not(.is-collapsed) {
  cursor: pointer;
}

/* ── Wolves Victory ── */
.chat-message-banner.chat-banner-victory-wolves {
  background: #210404;
}
.chat-message-banner.chat-banner-victory-wolves::before {
  background-image: url("../img/ui/victory/victory-wolves.png");
  background-image: image-set(
    url("../img/ui/victory/victory-wolves.webp") type("image/webp"),
    url("../img/ui/victory/victory-wolves.png") type("image/png")
  );
}
.chat-message-banner.chat-banner-victory-wolves::after {
  background:
    linear-gradient(180deg, rgba(50, 5, 5, 0.2) 0%, rgba(20, 0, 0, 0.65) 100%);
}
.chat-message-banner.chat-banner-victory-wolves p {
  color: #ffb0b0;
  background: rgba(40, 4, 4, 0.75);
  border: 1px solid rgba(255, 80, 80, 0.25);
  box-shadow: 0 4px 20px rgba(200, 0, 0, 0.35);
}

/* ── Village Victory ── */
.chat-message-banner.chat-banner-victory-village {
  background: #3a2a10;
}
.chat-message-banner.chat-banner-victory-village::before {
  background-image: url("../img/ui/victory/victory-village.png");
  background-image: image-set(
    url("../img/ui/victory/victory-village.webp") type("image/webp"),
    url("../img/ui/victory/victory-village.png") type("image/png")
  );
  filter: brightness(0.8) saturate(1.2);
}
.chat-message-banner.chat-banner-victory-village::after {
  background:
    linear-gradient(180deg, rgba(255, 248, 230, 0.1) 0%, rgba(60, 40, 10, 0.6) 100%);
}
.chat-message-banner.chat-banner-victory-village p {
  color: #fff8e8;
  background: rgba(60, 40, 10, 0.7);
  border: 1px solid rgba(255, 200, 80, 0.3);
  box-shadow: 0 4px 20px rgba(200, 150, 30, 0.3);
}
.chat-message-banner.chat-banner-victory-village .chat-victory-endgame-label {
  color: rgba(255, 248, 230, 0.9);
}

/* ── Draw ── */
.chat-message-banner.chat-banner-victory-draw {
  background: #1a1a1a;
}
.chat-message-banner.chat-banner-victory-draw::before {
  background-image: url("../img/ui/victory/victory-draw.png");
  background-image: image-set(
    url("../img/ui/victory/victory-draw.webp") type("image/webp"),
    url("../img/ui/victory/victory-draw.png") type("image/png")
  );
}
.chat-message-banner.chat-banner-victory-draw::after {
  background:
    linear-gradient(180deg, rgba(40, 40, 40, 0.25) 0%, rgba(15, 15, 15, 0.7) 100%);
}
.chat-message-banner.chat-banner-victory-draw p {
  color: #d8d6ce;
  background: rgba(20, 20, 20, 0.75);
  border: 1px solid rgba(150, 150, 140, 0.2);
  box-shadow: 0 4px 20px rgba(80, 80, 70, 0.25);
}

/* ── Lovers Victory ── */
.chat-message-banner.chat-banner-victory-lovers {
  background: #2a0a1a;
}
.chat-message-banner.chat-banner-victory-lovers::before {
  background-image: url("../img/ui/victory/victory-lovers.png");
  background-image: image-set(
    url("../img/ui/victory/victory-lovers.webp") type("image/webp"),
    url("../img/ui/victory/victory-lovers.png") type("image/png")
  );
}
.chat-message-banner.chat-banner-victory-lovers::after {
  background:
    linear-gradient(180deg, rgba(60, 15, 35, 0.15) 0%, rgba(40, 8, 25, 0.6) 100%);
}
.chat-message-banner.chat-banner-victory-lovers p {
  color: #ffd8ec;
  background: rgba(50, 10, 30, 0.7);
  border: 1px solid rgba(255, 150, 200, 0.25);
  box-shadow: 0 4px 20px rgba(255, 80, 160, 0.3);
}

/* ── Solo Victory ── */
.chat-message-banner.chat-banner-victory-solo {
  background: #1a0a2a;
}
.chat-message-banner.chat-banner-victory-solo::before {
  background-image: url("../img/ui/victory/victory-solo.png");
  background-image: image-set(
    url("../img/ui/victory/victory-solo.webp") type("image/webp"),
    url("../img/ui/victory/victory-solo.png") type("image/png")
  );
}
.chat-message-banner.chat-banner-victory-solo::after {
  background:
    linear-gradient(180deg, rgba(30, 10, 50, 0.2) 0%, rgba(20, 5, 35, 0.65) 100%);
}
.chat-message-banner.chat-banner-victory-solo p {
  color: #e8d0ff;
  background: rgba(25, 8, 40, 0.7);
  border: 1px solid rgba(180, 100, 255, 0.25);
  box-shadow: 0 4px 20px rgba(150, 0, 255, 0.3);
}

/* Full overlay on the center board */
.victory-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: inherit;
  background: #0a0a0a;
  animation: victoryFadeIn 1.5s ease-out forwards;
}

.victory-overlay::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  animation: victoryZoom 8s ease-out forwards;
  z-index: 0;
}

.victory-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Wolves */
.victory-overlay[data-victory="wolves"] {
  background: #210404;
}
.victory-overlay[data-victory="wolves"]::before {
  background-image: url("../img/ui/victory/victory-wolves.png");
  background-image: image-set(
    url("../img/ui/victory/victory-wolves.webp") type("image/webp"),
    url("../img/ui/victory/victory-wolves.png") type("image/png")
  );
}
.victory-overlay[data-victory="wolves"]::after {
  background: linear-gradient(180deg, rgba(33, 4, 4, 0.3) 0%, rgba(33, 4, 4, 0.7) 100%);
}

/* Village */
.victory-overlay[data-victory="village"] {
  background: #3a2a10;
}
.victory-overlay[data-victory="village"]::before {
  background-image: url("../img/ui/victory/victory-village.png");
  background-image: image-set(
    url("../img/ui/victory/victory-village.webp") type("image/webp"),
    url("../img/ui/victory/victory-village.png") type("image/png")
  );
}
.victory-overlay[data-victory="village"]::after {
  background: linear-gradient(180deg, rgba(255, 248, 230, 0.15) 0%, rgba(200, 160, 60, 0.35) 100%);
}

/* Solo */
.victory-overlay[data-victory="solo"] {
  background: #1a0a2a;
}
.victory-overlay[data-victory="solo"]::before {
  background-image: url("../img/ui/victory/victory-solo.png");
  background-image: image-set(
    url("../img/ui/victory/victory-solo.webp") type("image/webp"),
    url("../img/ui/victory/victory-solo.png") type("image/png")
  );
}
.victory-overlay[data-victory="solo"]::after {
  background: linear-gradient(180deg, rgba(40, 10, 60, 0.3) 0%, rgba(40, 10, 60, 0.65) 100%);
}

/* Draw */
.victory-overlay[data-victory="draw"] {
  background: #1a1a1a;
}
.victory-overlay[data-victory="draw"]::before {
  background-image: url("../img/ui/victory/victory-draw.png");
  background-image: image-set(
    url("../img/ui/victory/victory-draw.webp") type("image/webp"),
    url("../img/ui/victory/victory-draw.png") type("image/png")
  );
}
.victory-overlay[data-victory="draw"]::after {
  background: linear-gradient(180deg, rgba(50, 50, 50, 0.3) 0%, rgba(30, 30, 30, 0.7) 100%);
}

/* Lovers */
.victory-overlay[data-victory="lovers"] {
  background: #2a0a1a;
}
.victory-overlay[data-victory="lovers"]::before {
  background-image: url("../img/ui/victory/victory-lovers.png");
  background-image: image-set(
    url("../img/ui/victory/victory-lovers.webp") type("image/webp"),
    url("../img/ui/victory/victory-lovers.png") type("image/png")
  );
}
.victory-overlay[data-victory="lovers"]::after {
  background: linear-gradient(180deg, rgba(60, 20, 40, 0.2) 0%, rgba(80, 20, 50, 0.5) 100%);
}

/* Victory text */
.victory-overlay-text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 16px 32px;
  border-radius: 8px;
  font: 700 1.4rem/1.3 var(--hybrid-font-title, Georgia, serif);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  animation: victoryTextReveal 2s ease-out 0.5s both;
}

.victory-overlay[data-victory="wolves"] .victory-overlay-text {
  color: #ff6b6b;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 80, 80, 0.3);
  box-shadow: 0 0 40px rgba(200, 0, 0, 0.3);
}

.victory-overlay[data-victory="village"] .victory-overlay-text {
  color: #4a3010;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(200, 160, 60, 0.4);
  box-shadow: 0 0 40px rgba(255, 200, 50, 0.3);
}

.victory-overlay[data-victory="solo"] .victory-overlay-text {
  color: #e0c0ff;
  background: rgba(20, 5, 35, 0.6);
  border: 1px solid rgba(180, 100, 255, 0.3);
  box-shadow: 0 0 40px rgba(150, 0, 255, 0.3);
}

.victory-overlay[data-victory="draw"] .victory-overlay-text {
  color: #c0bfb8;
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(150, 150, 140, 0.3);
  box-shadow: 0 0 40px rgba(100, 100, 90, 0.2);
}

.victory-overlay[data-victory="lovers"] .victory-overlay-text {
  color: #ffd0e8;
  background: rgba(40, 10, 25, 0.55);
  border: 1px solid rgba(255, 150, 200, 0.3);
  box-shadow: 0 0 40px rgba(255, 100, 180, 0.3);
}

.victory-overlay-label {
  display: block;
  margin-top: 6px;
  font: 400 0.85rem/1.4 var(--hybrid-font-body, sans-serif);
  opacity: 0.8;
  letter-spacing: 0.02em;
}

/* Winner names list */
.victory-overlay-winners {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  max-width: 90%;
  animation: victoryTextReveal 2s ease-out 1s both;
}

.victory-winner-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.95);
}

.victory-winner-tag strong {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.victory-winner-role {
  font-size: 0.7rem;
  opacity: 0.88;
  font-style: italic;
}

/* Action buttons on overlay */
.victory-overlay-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 12px;
  margin-top: 24px;
  animation: victoryTextReveal 2s ease-out 1.5s both;
}

.victory-action-btn {
  padding: 10px 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font: 600 0.9rem/1.3 var(--hybrid-font-body, sans-serif);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  letter-spacing: 0.02em;
}

.victory-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.victory-action-btn:active {
  transform: translateY(0);
}

.victory-btn-next {
  background: linear-gradient(180deg, #d4a53c, #b8862e);
  color: #1a1000;
  border-color: #c49530;
}

.victory-btn-next:hover {
  background: linear-gradient(180deg, #e0b44a, #c49530);
}

.victory-btn-reset {
  background: linear-gradient(180deg, #4a4a4a, #333);
  color: #ddd;
  border-color: #555;
}

.victory-btn-reset:hover {
  background: linear-gradient(180deg, #5a5a5a, #444);
  color: #fff;
}

/* Category-specific winner tag tints */
.victory-overlay[data-victory="wolves"] .victory-winner-tag {
  background: rgba(80, 10, 10, 0.80);
  border-color: rgba(255, 80, 80, 0.35);
  color: #ffb0b0;
}

.victory-overlay[data-victory="village"] .victory-winner-tag {
  background: rgba(80, 55, 10, 0.88);
  border-color: rgba(216, 188, 121, 0.50);
  color: #fff8e8;
}

.victory-overlay[data-victory="lovers"] .victory-winner-tag {
  background: rgba(80, 20, 50, 0.80);
  border-color: rgba(255, 150, 200, 0.35);
  color: #ffd0e8;
}

.victory-overlay[data-victory="solo"] .victory-winner-tag {
  background: rgba(60, 20, 100, 0.80);
  border-color: rgba(180, 100, 255, 0.35);
  color: #e0c0ff;
}

@keyframes victoryFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes victoryZoom {
  from { transform: scale(1.15); }
  to { transform: scale(1); }
}

@keyframes victoryTextReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Chat night filigrane ── */
.legacy-center-board {
  position: relative;
  overflow: hidden;
}

.legacy-center-board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 3s ease-in-out;
  z-index: 0;
  background: rgba(7, 16, 28, 0.35);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--night-mask-top),
    #000 var(--night-mask-top),
    #000 var(--night-mask-bottom),
    transparent var(--night-mask-bottom),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--night-mask-top),
    #000 var(--night-mask-top),
    #000 var(--night-mask-bottom),
    transparent var(--night-mask-bottom),
    transparent 100%
  );
  mask-repeat: no-repeat;
}

.legacy-center-board::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: url("../img/ui/banners/banner-night.png") center / cover no-repeat;
  background-image: image-set(
    url("../img/ui/banners/banner-night.webp") type("image/webp"),
    url("../img/ui/banners/banner-night.png") type("image/png")
  );
  opacity: 0;
  transition: opacity 3s ease-in-out;
  z-index: 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--night-mask-top),
    #000 var(--night-mask-top),
    #000 var(--night-mask-bottom),
    transparent var(--night-mask-bottom),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--night-mask-top),
    #000 var(--night-mask-top),
    #000 var(--night-mask-bottom),
    transparent var(--night-mask-bottom),
    transparent 100%
  );
  mask-repeat: no-repeat;
}

body.scene-night .legacy-center-board::before {
  opacity: 1;
}

body.scene-night .legacy-center-board::after {
  opacity: 0.18;
}

.legacy-center-board > *:not(.victory-overlay) {
  position: relative;
  z-index: 1;
}

/* ── Game-end countdown bar ── */
.game-end-delay-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 6;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border-radius: 0 0 14px 14px;
}
.game-end-delay-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 140, 60, 0.9), rgba(255, 200, 100, 0.7));
  animation: gameEndBarShrink linear forwards;
  transform-origin: left center;
}
@keyframes gameEndBarShrink {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ── Elimination Announcement ── */
.chat-elimination {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 4px 0;
  border-left: 3px solid var(--hybrid-danger, #ff5e5e);
  background: rgba(255, 60, 60, 0.05);
}

/*
 * sfx-pending keeps the final elimination wrapper out of layout and paint.
 * JS then removes it and adds sfx-reveal-active exactly when the death sound
 * starts, so the visible node appears and begins its slide-up in the same beat.
 */
.chat-elimination.sfx-pending {
  display: none !important;
}

.chat-elimination-cluster {
  display: block !important;
  gap: 0;
}

.chat-elimination-cluster-pyromancer {
  border-left-color: #e07030;
  background: rgba(220, 100, 30, 0.07);
}

.chat-elimination-cluster-pyromancer .chat-elimination-entry.is-grouped + .chat-elimination-entry.is-grouped {
  border-top-color: rgba(220, 100, 30, 0.2);
}

.chat-elimination-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.chat-elimination-entry.is-grouped + .chat-elimination-entry.is-grouped {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-elimination-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255, 60, 60, 0.2));
}

.chat-elimination-skull {
  flex-shrink: 0;
  font-size: 1.2rem;
  line-height: 32px;
  width: 32px;
  text-align: center;
}

.chat-elimination-body {
  flex: 1;
  min-width: 0;
}

.chat-elimination-line {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--chat-ui-ink, var(--hybrid-ink));
}

.chat-elimination-name {
  font-weight: 800;
  color: var(--chat-elimination-name-ink, #fff);
}

/* Line 2: "Nom qui était Rôle" */
.chat-elimination-role-line {
  margin: 3px 0 0;
  font-size: 0.88rem;
  color: var(--chat-ui-muted, var(--hybrid-muted));
  line-height: 1.4;
}

/* Role tag (inline within elimination line) */
.chat-elimination-role {
  display: inline;
  font-weight: 700;
  color: var(--hybrid-gold, #c9a46a);
  padding: 1px 8px;
  border-radius: 3px;
  background: rgba(201, 164, 106, 0.12);
  border: 1px solid rgba(201, 164, 106, 0.18);
  font-size: 0.85em;
  margin-left: 2px;
}

/* ── Hacked Role Display ── */
.chat-hacked-role {
  color: #00ff88;
  font-family: "Courier New", monospace;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
  letter-spacing: 1px;
}

.chat-hacked-badge {
  filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.6));
}

/* ── Vote Cast Messages ── */
.chat-vote-cast {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 0.88rem;
  color: var(--chat-ui-muted, var(--hybrid-muted, #8b9aa7));
  border-left: 3px solid rgba(216, 188, 121, 0.25);
  margin: 0;
  background: rgba(216, 188, 121, 0.03);
}

.chat-vote-icon {
  font-size: 0.8rem;
  flex-shrink: 0;
}

.chat-vote-time {
  color: var(--chat-ui-muted, var(--hybrid-muted, #8b9aa7));
  font-size: 0.82rem;
  opacity: 0.7;
}

.chat-vote-text {
  color: var(--chat-ui-ink, var(--hybrid-ink, #e0dcd4));
  font-weight: 500;
  font-size: 0.88rem;
}

.chat-vote-voter {
  font-weight: 800;
  color: var(--chat-inline-name-ink, var(--chat-ui-ink, var(--hybrid-ink, #e0dcd4)));
}

.chat-vote-target {
  font-weight: 800;
  color: var(--hybrid-gold, #c9a46a);
}

.chat-vote-arrow {
  color: var(--chat-ui-muted, var(--hybrid-muted, #8b9aa7));
  opacity: 0.6;
  font-size: 0.8rem;
}

/* ── Tone-based System Message Styling ── */
.chat-message-system.tone-danger {
  border-left: 3px solid var(--hybrid-danger, #ff5e5e);
  background: rgba(255, 94, 94, 0.06);
  padding-left: 12px;
}
.chat-message-system.tone-danger .chat-system-text {
  color: var(--hybrid-danger, #ff5e5e);
}
.chat-message-system.tone-danger .chat-system-icon {
  color: var(--hybrid-danger, #ff5e5e);
}

.chat-message-system.tone-warning {
  border-left: 3px solid #f0a030;
  background: rgba(240, 160, 48, 0.06);
  padding-left: 12px;
}
.chat-message-system.tone-warning .chat-system-text {
  color: #f0c060;
}
.chat-message-system.tone-warning .chat-system-icon {
  color: #f0c060;
}

.chat-message-system.tone-success {
  border-left: 3px solid var(--hybrid-success, #5cda89);
  background: rgba(92, 218, 137, 0.06);
  padding-left: 12px;
}
.chat-message-system.tone-success .chat-system-text {
  color: var(--hybrid-success, #5cda89);
}
.chat-message-system.tone-success .chat-system-icon {
  color: var(--hybrid-success, #5cda89);
}

/* ── Enhanced Role Info Messages ── */
.chat-message-system.chat-message-role-info {
  font-style: normal;
  font-size: 0.92rem;
}
.chat-message-system.chat-message-role-info .chat-system-text {
  font-weight: 700;
}

/* ── Role Reveal Card ── */
.chat-role-reveal {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  margin: 4px 0;
  border-radius: 6px;
  background: rgba(201, 164, 106, 0.08);
  border: 1px solid rgba(201, 164, 106, 0.18);
  border-left: 3px solid var(--hybrid-gold, #c9a46a);
}

.chat-role-reveal .chat-role-icon-small {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  filter: drop-shadow(0 0 6px rgba(216, 188, 121, 0.3));
  flex-shrink: 0;
}

.chat-role-reveal-body,
.chat-role-reveal-main {
  flex: 1;
  min-width: 0;
}

.chat-role-reveal-text {
  margin: 0;
  color: var(--chat-ui-ink, var(--hybrid-ink, #e0dcd4));
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

.chat-role-reveal .chat-inline-name {
  color: #9ab4c4;
  font-weight: 800;
}

body[data-theme="classic"] .chat-role-reveal .chat-inline-name {
  color: #7a9aa8;
}

.chat-role-reveal-tag {
  display: inline-block;
  padding: 2px 9px;
  margin: 0 3px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.88em;
  color: var(--hybrid-gold, #c9a46a);
  background: rgba(201, 164, 106, 0.13);
  border: 1px solid rgba(201, 164, 106, 0.28);
  vertical-align: baseline;
}

/* Tone variants for role reveal — box */
.chat-role-reveal.tone-danger {
  background: rgba(255, 94, 94, 0.08);
  border-color: rgba(255, 94, 94, 0.2);
  border-left-color: var(--hybrid-danger, #ff5e5e);
}
.chat-role-reveal.tone-warning {
  background: rgba(240, 160, 48, 0.08);
  border-color: rgba(240, 160, 48, 0.18);
  border-left-color: #f0a030;
}
.chat-role-reveal.tone-success {
  background: rgba(92, 218, 137, 0.08);
  border-color: rgba(92, 218, 137, 0.18);
  border-left-color: var(--hybrid-success, #5cda89);
}

/* Tone variants — tag pill (nouvelle palette) */
.chat-role-reveal.tone-danger .chat-role-reveal-tag {
  color: #f87171;
  background: rgba(248, 113, 113, 0.13);
  border-color: rgba(248, 113, 113, 0.3);
}
.chat-role-reveal.tone-danger .chat-role-reveal-text {
  color: #ffadad;
}

.chat-role-reveal.tone-warning .chat-role-reveal-tag {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.13);
  border-color: rgba(192, 132, 252, 0.3);
}

.chat-role-reveal.tone-success .chat-role-reveal-tag {
  color: #7dd3fc;
  background: rgba(125, 211, 252, 0.13);
  border-color: rgba(125, 211, 252, 0.3);
}

.chat-highlighted-role-stolen {
  color: #9dff73 !important;
  background:
    linear-gradient(180deg, rgba(28, 48, 24, 0.92), rgba(11, 21, 12, 0.92)),
    rgba(96, 216, 96, 0.18);
  border-color: rgba(120, 255, 120, 0.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(150, 255, 150, 0.08),
    0 0 16px rgba(96, 216, 96, 0.18);
  text-shadow: 0 0 10px rgba(120, 255, 120, 0.2);
}

.chat-message-system.chat-role-hacker .chat-highlighted-role-stolen,
.chat-role-reveal.tone-success.chat-role-hacker .chat-highlighted-role-stolen {
  color: #b8ff9b !important;
  background:
    linear-gradient(180deg, rgba(12, 36, 16, 0.95), rgba(5, 18, 8, 0.95)),
    rgba(96, 216, 96, 0.22);
  border-color: rgba(136, 255, 136, 0.5) !important;
  box-shadow:
    inset 0 0 0 1px rgba(185, 255, 170, 0.12),
    0 0 18px rgba(96, 216, 96, 0.24);
}

.history-role-reveal {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-role-reveal .history-detail-line {
  margin-top: 0;
}

.history-role-reveal-tag {
  display: inline-block;
  margin: 0 3px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(201, 164, 106, 0.18);
  border: 1px solid rgba(201, 164, 106, 0.28);
  color: var(--hybrid-gold, #c9a46a);
  font-weight: 800;
}

.history-role-info {
  font-weight: 700;
  font-style: normal;
}

/* ── Enhanced Elimination Styling ── */

/* ── Generic banner (no specific type matched) ── */
.chat-message-banner:not([class*="chat-banner-"]) {
  min-height: 60px;
  background: rgba(216, 188, 121, 0.05);
  border-top: 1px solid rgba(216, 188, 121, 0.15);
  border-bottom: 1px solid rgba(216, 188, 121, 0.15);
}
.chat-message-banner:not([class*="chat-banner-"])::before {
  background: linear-gradient(180deg, rgba(201, 164, 106, 0.08) 0%, transparent 100%);
}
.chat-message-banner:not([class*="chat-banner-"]) p {
  color: var(--hybrid-ink);
  background: rgba(0, 0, 0, 0.4);
}

/* ── Role-Specific Visual Identity ── */

/* Phase separators: color the text + border-top/bottom + tinted background (centered) */
/* System messages (role_info, game_phase_event): left border + tinted background */

/* Wolves — deep crimson */
.chat-phase-separator.chat-role-werewolf .chat-phase-separator-label,
.chat-message-system.chat-role-werewolf .chat-system-text { color: #e05555 !important; }
.chat-phase-separator.chat-role-werewolf { border-color: rgba(224, 85, 85, 0.3); background: rgba(224, 85, 85, 0.07); }
.chat-message-system.chat-role-werewolf:not([class*="tone-"]) { border-left: 3px solid rgba(224, 85, 85, 0.4); }

/* Big Bad Wolf — darker crimson */
.chat-phase-separator.chat-role-bigBadWolf .chat-phase-separator-label,
.chat-message-system.chat-role-bigBadWolf .chat-system-text { color: #c03030 !important; }
.chat-phase-separator.chat-role-bigBadWolf { border-color: rgba(192, 48, 48, 0.3); background: rgba(192, 48, 48, 0.07); }

/* White Werewolf — icy blue */
.chat-phase-separator.chat-role-whiteWerewolf .chat-phase-separator-label,
.chat-message-system.chat-role-whiteWerewolf .chat-system-text { color: #88c8e8 !important; }
.chat-phase-separator.chat-role-whiteWerewolf { border-color: rgba(136, 200, 232, 0.25); background: rgba(136, 200, 232, 0.06); }

/* La Mort — dark violet-red, ominous */
.chat-phase-separator.chat-role-death .chat-phase-separator-label,
.chat-message-system.chat-role-death .chat-system-text { color: #c46080 !important; }
.chat-phase-separator.chat-role-death { border-color: rgba(196, 96, 128, 0.3); background: rgba(196, 96, 128, 0.08); }
.chat-message-system.chat-role-death { border-left: 3px solid rgba(196, 96, 128, 0.5); background: rgba(196, 96, 128, 0.05); }

/* Seer — gold / divination */
.chat-phase-separator.chat-role-seer .chat-phase-separator-label,
.chat-message-system.chat-role-seer .chat-system-text { color: #d4a854 !important; }
.chat-phase-separator.chat-role-seer { border-color: rgba(212, 168, 84, 0.25); background: rgba(212, 168, 84, 0.06); }

/* Witch — emerald green */
.chat-phase-separator.chat-role-witch .chat-phase-separator-label,
.chat-message-system.chat-role-witch .chat-system-text { color: #55b880 !important; }
.chat-phase-separator.chat-role-witch { border-color: rgba(85, 184, 128, 0.25); background: rgba(85, 184, 128, 0.06); }
.chat-message-system.chat-role-witch:not([class*="tone-"]) { border-left: 3px solid rgba(85, 184, 128, 0.4); }

/* Guard / Salvateur — steel blue */
.chat-phase-separator.chat-role-guard .chat-phase-separator-label,
.chat-message-system.chat-role-guard .chat-system-text { color: #6098cc !important; }
.chat-phase-separator.chat-role-guard { border-color: rgba(96, 152, 204, 0.25); background: rgba(96, 152, 204, 0.06); }

/* Sleepwalker / Noctambule — lavender purple */
.chat-phase-separator.chat-role-sleepwalker .chat-phase-separator-label,
.chat-message-system.chat-role-sleepwalker .chat-system-text { color: #a080d0 !important; }
.chat-phase-separator.chat-role-sleepwalker { border-color: rgba(160, 128, 208, 0.3); background: rgba(160, 128, 208, 0.07); }
.chat-message-system.chat-role-sleepwalker { border-left: 3px solid rgba(160, 128, 208, 0.5); background: rgba(160, 128, 208, 0.05); }

/* Bear Tamer — earthy brown-orange */
.chat-phase-separator.chat-role-bearTamer .chat-phase-separator-label,
.chat-message-system.chat-role-bearTamer .chat-system-text { color: #c89050 !important; }
.chat-phase-separator.chat-role-bearTamer { border-color: rgba(200, 144, 80, 0.3); background: rgba(200, 144, 80, 0.07); }
.chat-message-system.chat-role-bearTamer.chat-style-public-role-effect { border-left: 3px solid rgba(200, 144, 80, 0.5); background: rgba(200, 144, 80, 0.06); }

/* Fox — orange-red */
.chat-phase-separator.chat-role-fox .chat-phase-separator-label,
.chat-message-system.chat-role-fox .chat-system-text { color: #d87040 !important; }
.chat-phase-separator.chat-role-fox { border-color: rgba(216, 112, 64, 0.25); background: rgba(216, 112, 64, 0.06); }
.chat-message-system.chat-role-fox:not([class*="tone-"]) { border-left: 3px solid rgba(216, 112, 64, 0.4); }

/* Hunter — dernier coup : rouge sang dramatique, pulsation */
.chat-phase-separator.chat-role-hunter .chat-phase-separator-label,
.chat-message-system.chat-role-hunter .chat-system-text { color: #e84040 !important; }
.chat-phase-separator.chat-role-hunter {
  border-color: rgba(220, 50, 30, 0.55) !important;
  background: rgba(200, 35, 20, 0.13) !important;
  color: #e84040 !important;
}

/* Cupid — rose pink */
.chat-phase-separator.chat-role-cupid .chat-phase-separator-label,
.chat-message-system.chat-role-cupid .chat-system-text { color: #e07090 !important; }
.chat-phase-separator.chat-role-cupid { border-color: rgba(224, 112, 144, 0.25); background: rgba(224, 112, 144, 0.06); }
.chat-message-system.chat-role-cupid:not([class*="tone-"]) { border-left: 3px solid rgba(224, 112, 144, 0.4); }

/* Wild Child — burnt copper */
.chat-phase-separator.chat-role-wildChild .chat-phase-separator-label,
.chat-message-system.chat-role-wildChild .chat-system-text { color: #c96b44 !important; }
.chat-phase-separator.chat-role-wildChild { border-color: rgba(201, 107, 68, 0.25); background: rgba(201, 107, 68, 0.06); }
.chat-message-system.chat-role-wildChild:not([class*="tone-"]) { border-left: 3px solid rgba(201, 107, 68, 0.4); }

/* Wolf Dog — mossy olive */
.chat-phase-separator.chat-role-wolfDog .chat-phase-separator-label,
.chat-message-system.chat-role-wolfDog .chat-system-text { color: #8fa54c !important; }
.chat-phase-separator.chat-role-wolfDog { border-color: rgba(143, 165, 76, 0.25); background: rgba(143, 165, 76, 0.06); }
.chat-message-system.chat-role-wolfDog:not([class*="tone-"]) { border-left: 3px solid rgba(143, 165, 76, 0.4); }

/* Flute Player — teal / enchanting */
.chat-phase-separator.chat-role-flutePlayer .chat-phase-separator-label,
.chat-message-system.chat-role-flutePlayer .chat-system-text { color: #50b8b0 !important; }
.chat-phase-separator.chat-role-flutePlayer { border-color: rgba(80, 184, 176, 0.25); background: rgba(80, 184, 176, 0.06); }

/* Hacker — neon green / matrix */
.chat-phase-separator.chat-role-hacker .chat-phase-separator-label,
.chat-message-system.chat-role-hacker .chat-system-text { color: #60d860 !important; }
.chat-phase-separator.chat-role-hacker { border-color: rgba(96, 216, 96, 0.25); background: rgba(96, 216, 96, 0.05); }
.chat-message-system.chat-role-hacker { border-left: 3px solid rgba(96, 216, 96, 0.4); background: rgba(96, 216, 96, 0.04); }

/* Pyromancer — fiery orange */
.chat-phase-separator.chat-role-pyromancer .chat-phase-separator-label,
.chat-message-system.chat-role-pyromancer .chat-system-text { color: #e87830 !important; }
.chat-phase-separator.chat-role-pyromancer { border-color: rgba(232, 120, 48, 0.25); background: rgba(232, 120, 48, 0.06); }
.chat-message-system.chat-role-pyromancer:not([class*="tone-"]) { border-left: 3px solid rgba(232, 120, 48, 0.4); }

/* Raven — dark indigo */
.chat-phase-separator.chat-role-raven .chat-phase-separator-label,
.chat-message-system.chat-role-raven .chat-system-text { color: #8070b8 !important; }
.chat-phase-separator.chat-role-raven { border-color: rgba(128, 112, 184, 0.25); background: rgba(128, 112, 184, 0.06); }
.chat-message-system.chat-role-raven.chat-style-public-role-effect { border-left: 3px solid rgba(128, 112, 184, 0.5); background: rgba(128, 112, 184, 0.06); }

/* Infected Father Wolf — sickly green-red */
.chat-phase-separator.chat-role-infectedFatherWolf .chat-phase-separator-label,
.chat-message-system.chat-role-infectedFatherWolf .chat-system-text { color: #b8a050 !important; }
.chat-phase-separator.chat-role-infectedFatherWolf { border-color: rgba(184, 160, 80, 0.25); background: rgba(184, 160, 80, 0.06); }
.chat-message-system.chat-role-infectedFatherWolf.chat-style-public-role-effect { border-left: 3px solid rgba(184, 160, 80, 0.5); background: rgba(184, 160, 80, 0.06); }

/* White Rabbit — silver */
.chat-phase-separator.chat-role-whiteRabbit .chat-phase-separator-label,
.chat-message-system.chat-role-whiteRabbit .chat-system-text { color: #b0b8c8 !important; }
.chat-phase-separator.chat-role-whiteRabbit { border-color: rgba(176, 184, 200, 0.25); background: rgba(176, 184, 200, 0.06); }

/* Puppeteer — dark teal */
.chat-phase-separator.chat-role-puppeteer .chat-phase-separator-label,
.chat-message-system.chat-role-puppeteer .chat-system-text { color: #5098a0 !important; }
.chat-phase-separator.chat-role-puppeteer { border-color: rgba(80, 152, 160, 0.25); background: rgba(80, 152, 160, 0.06); }

/* Dictator — imperial gold */
.chat-phase-separator.chat-role-dictator .chat-phase-separator-label,
.chat-message-system.chat-role-dictator .chat-system-text { color: #d4b050 !important; }
.chat-phase-separator.chat-role-dictator { border-color: rgba(212, 176, 80, 0.25); background: rgba(212, 176, 80, 0.06); }
.chat-message-system.chat-role-dictator:not([class*="tone-"]) { border-left: 3px solid rgba(212, 176, 80, 0.4); }

/* Stuttering Judge — dusty rose */
.chat-phase-separator.chat-role-stutteringJudge .chat-phase-separator-label,
.chat-message-system.chat-role-stutteringJudge .chat-system-text { color: #c08888 !important; }
.chat-phase-separator.chat-role-stutteringJudge { border-color: rgba(192, 136, 136, 0.25); background: rgba(192, 136, 136, 0.05); }

/* Angel — pale gold-white */
.chat-phase-separator.chat-role-angel .chat-phase-separator-label,
.chat-message-system.chat-role-angel .chat-system-text { color: #d8c888 !important; }
.chat-phase-separator.chat-role-angel { border-color: rgba(216, 200, 136, 0.25); background: rgba(216, 200, 136, 0.05); }

/* ── Classic Theme: Enhanced Chat Contrast ── */
body[data-theme="classic"] .chat-phase-separator {
  background: rgba(242, 211, 140, 0.08);
  border-color: rgba(242, 211, 140, 0.2);
  color: #f7dfae;
}

body[data-theme="classic"] .chat-message-system {
  border-left-color: rgba(242, 211, 140, 0.15);
}

body[data-theme="classic"] .chat-bubble {
  background: transparent;
  border: none;
}

body[data-theme="classic"] .chat-message-own .chat-bubble {
  background: transparent;
  border: none;
}

body[data-theme="classic"] .chat-elimination {
  background: rgba(0, 0, 0, 0.08);
  border-left-color: var(--hybrid-danger, #e56b62);
}

body[data-theme="classic"] .chat-message-banner.chat-banner-night {
  background: #0a0c18;
}

body[data-theme="classic"] .chat-inline-name {
  color: var(--chat-inline-name-ink, #67100c);
}

body[data-theme="classic"] .chat-vote-cast {
  border-left-color: rgba(242, 211, 140, 0.3);
  background: rgba(242, 211, 140, 0.04);
}

/* Dramatic system-message entrance reserved for important non-player events */
@keyframes chat-important-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide-up entrance for elimination messages — synced with death sound */
@keyframes chat-elim-rise {
  from {
    transform: translateY(18px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes chat-banner-glow {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Elimination messages animate only when explicitly revealed with the sound. */
.chat-elimination.sfx-reveal-active {
  animation: chat-elim-rise 50ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform;
}

/* Role reveal keeps the dramatic entrance; regular role info/prompt messages stay still. */
.chat-role-reveal {
  animation: chat-important-rise 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  will-change: transform, opacity;
}

.chat-message-banner {
  position: relative;
  overflow: hidden;
  animation: chat-important-rise 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  will-change: transform, opacity;
}

.chat-message-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.02) 100%);
  opacity: 0.3;
}

.chat-message-banner.chat-banner-night {
  box-shadow: inset 0 0 0 1px rgba(90, 116, 182, 0.14), 0 16px 28px rgba(8, 12, 28, 0.26);
}

.chat-message-banner.chat-banner-day {
  box-shadow: inset 0 0 0 1px rgba(242, 211, 140, 0.16), 0 14px 26px rgba(72, 48, 12, 0.16);
}

.chat-message-banner[class*="chat-banner-victory"] {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 30px rgba(0, 0, 0, 0.3);
}

.chat-phase-separator {
  position: relative;
  overflow: hidden;
  letter-spacing: 0.04em;
}

.chat-phase-separator::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
}

.chat-phase-zone {
  display: grid;
  gap: 0;
  margin: -4px 0 12px;
}

.chat-phase-zone:empty {
  display: none;
}

.chat-phase-zone > .chat-message-system.chat-message-role-prompt,
.chat-phase-zone > .chat-message-system.chat-message-role-info {
  margin: 0;
}

.chat-message-system.chat-message-role-prompt,
.chat-message-system.chat-message-role-info {
  padding-left: 14px;
  border-left-width: 4px;
}

.chat-message-system.chat-message-role-prompt {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.12) 100%),
    rgba(10, 14, 24, 0.48);
  border-left-width: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.chat-message-system.chat-message-role-info {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.08) 100%),
    rgba(12, 16, 26, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.chat-message-system.chat-message-role-prompt .chat-system-text,
.chat-message-system.chat-message-role-info .chat-system-text {
  letter-spacing: 0.01em;
  line-height: 1.45;
}

.chat-message-system.tone-danger,
.chat-message-system.tone-warning {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.chat-elimination {
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
}

.chat-role-reveal {
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
}

body[data-theme="classic"] .chat-message-system.chat-message-role-prompt,
body[data-theme="classic"] .chat-message-system.chat-message-role-info,
body[data-theme="classic"] .chat-elimination,
body[data-theme="classic"] .chat-role-reveal {
  backdrop-filter: blur(1px);
}

@media (prefers-reduced-motion: reduce) {
  .chat-message-banner,
  .chat-phase-separator,
  .chat-message-system.tone-danger,
  .chat-message-system.tone-warning,
  .chat-elimination.sfx-reveal-active,
  .chat-role-reveal {
    animation: none;
  }
}

/* --- SUBTLE & DISCREET ROLE THEME ENHANCEMENTS --- */
.chat-message-system.chat-role-infectedFatherWolf.chat-style-public-role-effect {
  border-left: 4px solid #bfff00 !important;
  background: linear-gradient(90deg, rgba(191, 255, 0, 0.08) 0%, transparent 100%) !important;
}
.chat-message-system.chat-role-infectedFatherWolf.chat-style-public-role-effect .chat-system-text {
  text-shadow: 0 0 6px rgba(191, 255, 0, 0.3);
  color: #eaff99 !important;
}
.chat-message-system.chat-role-infectedFatherWolf.chat-style-public-role-effect .chat-role-icon-small {
  filter: drop-shadow(0 0 4px rgba(191, 255, 0, 0.5));
}

.chat-message-system.chat-role-bearTamer.chat-style-public-role-effect {
  border-left: 4px solid #ff9900 !important;
  background: linear-gradient(90deg, rgba(255, 153, 0, 0.08) 0%, transparent 100%) !important;
}
.chat-message-system.chat-role-bearTamer.chat-style-public-role-effect .chat-system-text {
  text-shadow: 0 0 6px rgba(255, 153, 0, 0.3);
  color: #ffcc66 !important;
}
.chat-message-system.chat-role-bearTamer.chat-style-public-role-effect .chat-role-icon-small {
  filter: drop-shadow(0 0 4px rgba(255, 153, 0, 0.5));
}

.chat-message-system.chat-role-raven.chat-style-public-role-effect {
  border-left: 4px solid #8e44ad !important;
  background: linear-gradient(90deg, rgba(142, 68, 173, 0.08) 0%, transparent 100%) !important;
}
.chat-message-system.chat-role-raven.chat-style-public-role-effect .chat-system-text {
  text-shadow: 0 0 6px rgba(142, 68, 173, 0.3);
  color: #e8d0f1 !important;
}
.chat-message-system.chat-role-raven.chat-style-public-role-effect .chat-role-icon-small {
  filter: drop-shadow(0 0 4px rgba(142, 68, 173, 0.5));
}

.chat-message-system.chat-role-angel.chat-style-public-role-effect {
  border-left: 4px solid #4ddbff !important;
  background: linear-gradient(90deg, rgba(77, 219, 255, 0.08) 0%, transparent 100%) !important;
}
.chat-message-system.chat-role-angel.chat-style-public-role-effect .chat-system-text {
  text-shadow: 0 0 6px rgba(77, 219, 255, 0.4);
  color: #e6f7ff !important;
}
.chat-message-system.chat-role-angel.chat-style-public-role-effect .chat-role-icon-small {
  filter: drop-shadow(0 0 4px rgba(77, 219, 255, 0.5));
}

/* ── Classic Theme: Light-Background Colour Corrections ── */

/* Role badge in elimination messages: light gold is illegible on light bg */
body[data-theme="classic"] .chat-elimination-role {
  color: #3d1e0e;
  background: rgba(116, 60, 24, 0.12);
  border-color: rgba(116, 60, 24, 0.28);
}

/* Enhanced role messages use !important near-white colours, override them for classic */
body[data-theme="classic"] .chat-message-system.chat-role-raven.chat-style-public-role-effect .chat-system-text {
  color: #4a348a !important;
  text-shadow: none !important;
}
body[data-theme="classic"] .chat-message-system.chat-role-angel.chat-style-public-role-effect .chat-system-text {
  color: #1a6fa0 !important;
  text-shadow: none !important;
}
body[data-theme="classic"] .chat-message-system.chat-role-bearTamer.chat-style-public-role-effect .chat-system-text {
  color: #8a5800 !important;
  text-shadow: none !important;
}
body[data-theme="classic"] .chat-message-system.chat-role-infectedFatherWolf.chat-style-public-role-effect .chat-system-text {
  color: #4f7200 !important;
  text-shadow: none !important;
}

/* Basic phase-separator / system-text colours that are too light on a cream background */
body[data-theme="classic"] .chat-role-whiteWerewolf .chat-phase-separator-label,
body[data-theme="classic"] .chat-role-whiteWerewolf .chat-system-text { color: #3a7fa8 !important; }

body[data-theme="classic"] .chat-role-whiteRabbit .chat-phase-separator-label,
body[data-theme="classic"] .chat-role-whiteRabbit .chat-system-text { color: #5a6278 !important; }

body[data-theme="classic"] .chat-role-angel .chat-phase-separator-label,
body[data-theme="classic"] .chat-role-angel .chat-system-text { color: #8a7820 !important; }

body[data-theme="classic"] .chat-role-hacker .chat-phase-separator-label,
body[data-theme="classic"] .chat-role-hacker .chat-system-text { color: #287828 !important; }