/* Brand system shared with the Twitch kit (E:\Projets\stream-twitch\shared\brand.css):
   teal ink, parchment, gold gradients and a sky-cyan glow. */
@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/cinzel-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/cinzel-latin-700-normal.woff2') format('woff2');
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/cinzel-latin-900-normal.woff2') format('woff2');
  font-weight: 800 900;
  font-display: swap;
}
@font-face {
  font-family: 'Marcellus';
  src: url('/fonts/marcellus-latin-400-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('/fonts/lato-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('/fonts/lato-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --ink: #081a1f;
  --teal-950: #0a2328;
  --teal-900: #0f2f35;
  --teal-800: #15404a;
  --teal-700: #1a5560;
  --teal-600: #1f6b72;
  --teal-400: #2fa3a3;
  --sky: #7fdcec;
  --sky-soft: rgba(127, 220, 236, 0.55);
  --gold-100: #fff3d6;
  --gold-300: #f1d9a0;
  --gold-500: #d4a855;
  --gold-700: #8a6328;
  --parchment: #e9dcc0;
  --cream: #f7efdd;
  --muted: rgba(233, 220, 192, 0.72);
  --faint: rgba(233, 220, 192, 0.5);
  --line: rgba(241, 217, 160, 0.22);

  --alliance: #4a8fe0;
  --horde: #d8463c;
  --new: #6fe08a;
  --changed: var(--sky);

  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-serif: 'Marcellus', Georgia, serif;
  --font-sans: 'Lato', 'Segoe UI', system-ui, sans-serif;

  --gold-text: linear-gradient(180deg, #fffaf0 0%, #f6e3b3 38%, #d9ad5c 72%, #a87a35 100%);
  --gold-edge: linear-gradient(135deg, #fbe9bd 0%, #c79a48 30%, #f3dba6 52%, #8a6328 78%, #e6c47e 100%);
  --panel-bg: radial-gradient(120% 140% at 85% 0%, rgba(47, 163, 163, 0.18) 0%, transparent 55%),
    linear-gradient(160deg, #123a40 0%, #0c2a30 55%, #0a2328 100%);

  --radius: 10px;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Gold gradient text with a soft cast shadow. */
.gold-text {
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.55));
}

/* Thin ornamental divider with a diamond in the middle. */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(241, 217, 160, 0.7), transparent);
}
.divider > i {
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--gold-edge);
  box-shadow: 0 0 10px rgba(241, 217, 160, 0.6);
}

/* Gold-edged panel, same look as the Twitch panels. */
.panel {
  position: relative;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--panel-bg) padding-box, var(--gold-edge) border-box;
  box-shadow: var(--shadow), 0 0 32px rgba(127, 220, 236, 0.06);
}