/* Caméléon de feu — shared finish for the website and administration.
   The saved accent and background colors remain editable in administration. */
:root {
  --flame: #f05a43;
  --orange: #ff9146;
  --yellow: #ffd35c;
  --gold: #f1ce76;
  --fire-gradient: linear-gradient(110deg, var(--flame), var(--orange) 36%, var(--accent, #ffb347) 64%, var(--gold));
  --bright-gradient: linear-gradient(110deg, var(--orange), var(--accent, #ffb347) 52%, var(--yellow), var(--gold));
}

body {
  background-image: radial-gradient(ellipse at 100% 0, #ed593509, transparent 42%);
}
.header {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom-color: color-mix(in srgb, var(--gold) 19%, var(--bg));
}
.header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--fire-gradient);
  pointer-events: none;
}
.brand img { filter: drop-shadow(0 0 12px #ff91461a); }
.hero { background: var(--bg); }
.hero-shade {
  background: linear-gradient(90deg, var(--bg) 9%, color-mix(in srgb, var(--bg) 95%, transparent) 25%, color-mix(in srgb, var(--bg) 50%, transparent) 49%, transparent 78%),
    linear-gradient(0deg, var(--bg), transparent 28%, transparent 80%, color-mix(in srgb, var(--bg) 38%, transparent));
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero h1 em, .final-cta h2 em {
    background: linear-gradient(105deg, #ff7857, var(--orange) 32%, var(--yellow) 70%, #ffe4a4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.button:not(.button-outline), .filter.active {
  background: var(--bright-gradient);
  color: #291407;
  border-color: color-mix(in srgb, var(--gold) 60%, var(--orange));
  box-shadow: 0 4px 22px #f05a4314;
}
.button:not(.button-outline):hover {
  box-shadow: 0 7px 28px #f05a432b;
  background: linear-gradient(110deg, #ffac64, var(--yellow) 65%, #ffe4a4);
}
.button-outline {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
}
.button-outline:hover { background: var(--bright-gradient); color: #291407; }
.live-dot { background: var(--yellow); box-shadow: 0 0 14px #ff914699; }
.caption-line, .rules-callout::before { background: var(--fire-gradient); }
.universe-strip { background: color-mix(in srgb, var(--panel) 65%, var(--bg)); }
.universe-strip a:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.universe-strip a .category-icon { color: var(--accent); }
.universe-strip a:nth-of-type(3n + 1) .category-icon { color: #ff8465; }
.universe-strip a:nth-of-type(3n + 2) .category-icon { color: var(--yellow); }
.universe-strip a:nth-of-type(3n) .category-icon { color: var(--gold); }
.games-section { background: color-mix(in srgb, var(--bg) 70%, var(--panel)); }
.game-card:hover { border-color: var(--orange); box-shadow: 0 12px 30px #08030233; }
.propose-card {
  border-color: color-mix(in srgb, var(--orange) 40%, var(--line));
  background: linear-gradient(130deg, #f05a430b, #ffd35c04 60%, transparent);
}
.rules-callout { background: var(--panel); border-color: var(--line); }
.announcement {
  background: linear-gradient(100deg, #f05a430a, #ff914612, #f1ce760a);
  color: #e6c6a2;
  border-bottom-color: color-mix(in srgb, var(--accent) 18%, var(--bg));
}
.final-cta {
  background: radial-gradient(ellipse at 15% 100%, #f05a431b, transparent 55%),
    radial-gradient(ellipse at 85% 0, #ffd35c12, transparent 60%), var(--panel);
  border-color: color-mix(in srgb, var(--gold) 28%, var(--line));
}
::-webkit-scrollbar-thumb { background: var(--fire-gradient); }

/* Administration: the same warm surfaces, with distinct status colors. */
.admin-sidebar { background: color-mix(in srgb, var(--bg) 75%, var(--panel)); }
.admin-brand img, .login-brand img { background: #29170e; box-shadow: 0 5px 18px #ff91461f; }
.btn.primary, .category-editor .btn.primary {
  background: var(--bright-gradient);
  color: #291407;
  border-color: var(--red);
}
.btn.primary:hover { box-shadow: 0 5px 22px #ff914626; color: #291407; }
.top-kicker, .login-head > span { color: var(--red); }
.admin-sidebar nav a:hover { background: var(--panel2); }
.panel-head > span { background: var(--bright-gradient); color: #291407; }
.admin-main input:not([type=checkbox]):not([type=color]),
.admin-main textarea, .admin-main select, .login-form input {
  background: color-mix(in srgb, var(--bg) 65%, var(--panel));
  border-color: var(--line);
}
.admin-main input:focus, .admin-main textarea:focus, .admin-main select:focus,
.login-form input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 2px #ff91461a;
}
.login-body {
  background: radial-gradient(circle at 75% 15%, #f05a431c, transparent 40%),
    radial-gradient(circle at 15% 85%, #f1ce7610, transparent 40%), var(--bg);
}
.login-card { background: var(--panel); border-color: var(--line); }
.login-brand { border-bottom-color: var(--line); }

@media (max-width: 760px) {
  .hero-shade {
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 44%, color-mix(in srgb, var(--bg) 25%, transparent) 60%, transparent 72%),
      linear-gradient(0deg, var(--bg), transparent 25%);
  }
}
@media (forced-colors: active) {
  .hero h1 em, .final-cta h2 em { color: CanvasText; background: none; }
  .button, .filter.active, .btn.primary { border: 1px solid ButtonText; }
}