:root {
  --rules-bg: #120a06;
  --rules-surface: #21130c;
  --rules-ink: #fff6df;
  --rules-muted: #cdbca1;
  --rules-gold: #f4bc3d;
  --rules-orange: #f47a1f;
  --rules-line: rgba(244, 188, 61, 0.22);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  min-width: 0;
  margin: 0;
  color: var(--rules-ink);
  background:
    radial-gradient(circle at 84% 8%, rgba(244, 122, 31, 0.13), transparent 30rem),
    linear-gradient(145deg, #0d0704, var(--rules-bg) 46%, #190d07);
  font-family: var(--font-body, Manrope, system-ui, sans-serif);
}

a { color: var(--rules-gold); text-underline-offset: 0.2em; }
a:hover { color: #ffe09b; }
a:focus-visible { outline: 3px solid var(--rules-gold); outline-offset: 4px; border-radius: 2px; }

.rules-shell {
  width: min(calc(100% - clamp(28px, 8vw, 112px)), 1120px);
  margin-inline: auto;
  padding: clamp(40px, 6vw, 80px) 0 96px;
}

.rules-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 850;
}

.rules-hero {
  margin-top: 24px;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid var(--rules-line);
  border-left: 4px solid var(--rules-orange);
  background: linear-gradient(135deg, rgba(33, 19, 12, 0.96), rgba(12, 7, 4, 0.84));
}

.rules-eyebrow {
  margin: 0 0 16px;
  color: var(--rules-gold);
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.18em;
}

.rules-hero h1 {
  max-width: 13ch;
  margin: 0;
  font-family: var(--font-display, "Archivo Black", Impact, sans-serif);
  font-size: clamp(2.45rem, 7vw, 5.8rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.rules-lead {
  max-width: 68ch;
  margin: 24px 0 0;
  color: var(--rules-muted);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.7;
}

.rules-status {
  display: grid;
  gap: 8px;
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid rgba(244, 122, 31, 0.42);
  background: rgba(244, 122, 31, 0.08);
}

.rules-status strong { color: #ffb77f; }
.rules-status span { color: var(--rules-muted); line-height: 1.55; }

.rules-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 0;
}

.rules-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--rules-line);
  color: var(--rules-ink);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 850;
}

.rules-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(36px, 6vw, 80px);
  margin-top: 34px;
}

.rules-section {
  min-width: 0;
  padding: 32px 0;
  border-top: 1px solid var(--rules-line);
}

.rules-section--wide { grid-column: 1 / -1; }

.rules-section h2 {
  margin: 0 0 16px;
  font-family: var(--font-display, "Archivo Black", Impact, sans-serif);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.08;
}

.rules-section p,
.rules-section li {
  color: var(--rules-muted);
  line-height: 1.72;
}

.rules-section li + li { margin-top: 9px; }
.rules-section strong { color: var(--rules-ink); }
.rules-pending { color: #ffb77f !important; font-weight: 800; }

.rules-footer {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--rules-line);
  color: var(--rules-muted);
  line-height: 1.65;
}

@media (max-width: 760px) {
  .rules-grid { grid-template-columns: minmax(0, 1fr); }
  .rules-section--wide { grid-column: auto; }
  .rules-nav { display: grid; }
  .rules-nav a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}