:root {
  --black: #050505;
  --ink: #0b0b0b;
  --panel: #11100e;
  --paper: #f5ead2;
  --muted: #b7ab98;
  --red: #d81613;
  --red-bright: #ff2e25;
  --gold: #e3ac45;
  --line: rgba(227, 172, 69, .22);
  --max: 1240px;
  --shadow: 0 30px 90px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--paper);
  background: var(--black);
  font-family: "Oswald", system-ui, sans-serif;
  overflow-x: hidden;
}
body::selection { background: var(--red); color: white; }

.page-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.wrap { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }
a { color: inherit; text-decoration: none; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: .3s ease;
}
.site-header.scrolled {
  background: rgba(5,5,5,.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-shell {
  width: min(calc(100% - 40px), 1340px);
  height: 90px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; gap: 12px; align-items: center; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.brand img { width: 54px; height: 54px; object-fit: contain; }
.brand span { font-size: 1rem; }
.brand b { color: var(--red-bright); }
.main-nav { display: flex; gap: 30px; align-items: center; }
.main-nav > a:not(.nav-discord) { font-size: .9rem; text-transform: uppercase; letter-spacing: .12em; color: #ddd0bb; position: relative; }
.main-nav > a:not(.nav-discord)::after { content:""; position:absolute; left:0; bottom:-7px; width:0; height:1px; background:var(--gold); transition:.25s; }
.main-nav > a:not(.nav-discord):hover::after { width:100%; }
.nav-discord { border: 1px solid var(--gold); padding: 11px 18px; color: var(--paper); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; background: rgba(227,172,69,.07); transition:.25s; }
.nav-discord:hover { background: var(--gold); color: #090909; }

.menu-toggle { display:none; background:none; border:0; width:40px; height:40px; padding:8px; }
.menu-toggle span { display:block; height:2px; background:var(--paper); margin:6px 0; }

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 75% 38%, rgba(218, 18, 15, .33), transparent 25%),
    radial-gradient(circle at 72% 42%, rgba(227, 172, 69, .09), transparent 42%),
    linear-gradient(120deg, #050505 38%, #100807 100%);
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.25), transparent 55%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.018) 80px);
  pointer-events:none;
}
.hero-glow {
  position:absolute;
  width: 680px; height: 680px;
  border-radius:50%;
  right: 7vw; top: 50%; transform:translateY(-50%);
  background: radial-gradient(circle, rgba(255,32,22,.35), rgba(185,7,7,.15) 46%, transparent 69%);
  filter: blur(8px);
}
.hero-ridge { position:absolute; inset:auto -10% 0; height:24%; opacity:.32; filter: blur(.2px); }
.ridge-one { background: linear-gradient(145deg, transparent 0 45%, #150707 45.2% 47%, transparent 47.2%), linear-gradient(20deg, transparent 0 50%, #150707 50.2% 54%, transparent 54.2%); }
.ridge-two { bottom: -6%; opacity:.55; background: radial-gradient(80% 100% at 30% 100%, #080808 70%, transparent 71%); }
.hero-content { position:relative; z-index:2; display:grid; grid-template-columns: 1.12fr .88fr; gap:70px; align-items:center; padding: 145px 0 95px; }
.eyebrow { display:inline-block; color:var(--gold); letter-spacing:.24em; font-size:.78rem; font-weight:600; text-transform:uppercase; }
.hero h1, .section-heading h2, .banner-content h2, .final-card h2 {
  font-family: "Rye", Georgia, serif;
  font-weight: 400;
  margin: 16px 0 24px;
  line-height: 1.04;
  letter-spacing: -.025em;
}
.hero h1 { font-size: clamp(3.4rem, 6.2vw, 6.6rem); max-width: 840px; }
.hero h1 em { color:var(--red-bright); font-style:normal; text-shadow: 0 0 28px rgba(255,46,37,.18); }
.hero-copy > p { max-width:650px; font-family: Georgia, serif; color:#cbbba5; font-size:clamp(1.05rem,1.35vw,1.28rem); line-height:1.75; }
.hero-actions { display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.button { display:inline-flex; min-height:52px; padding:0 24px; align-items:center; justify-content:center; text-transform:uppercase; letter-spacing:.105em; font-weight:600; border:1px solid transparent; transition:.25s; }
.button-primary { background:var(--red); border-color:#f04c43; box-shadow:0 14px 35px rgba(216,22,19,.23); }
.button-primary:hover { background:var(--red-bright); transform:translateY(-2px); }
.button-ghost { border-color:rgba(245,234,210,.3); background:rgba(255,255,255,.025); }
.button-ghost:hover { border-color:var(--gold); color:var(--gold); }
.hero-meta { display:flex; gap:24px; margin-top:28px; color:#9f9587; font-size:.86rem; text-transform:uppercase; letter-spacing:.08em; flex-wrap:wrap; }
.hero-meta span { display:flex; align-items:center; gap:8px; }
.hero-meta i { width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px rgba(227,172,69,.55); }
.hero-mark { display:grid; place-items:center; }
.logo-frame { position:relative; width:min(100%, 520px); aspect-ratio:1; display:grid; place-items:center; }
.logo-frame::before { content:""; position:absolute; inset:7%; border:1px solid rgba(227,172,69,.25); border-radius:50%; box-shadow:0 0 80px rgba(216,22,19,.16) inset; }
.logo-frame::after { content:""; position:absolute; inset:0; border:1px solid rgba(227,172,69,.08); border-radius:50%; }
.logo-frame img { width:90%; position:relative; z-index:2; filter: drop-shadow(0 30px 45px rgba(0,0,0,.55)); }
.scroll-cue { position:absolute; z-index:3; left:50%; bottom:26px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; color:#8e8375; text-transform:uppercase; font-size:.72rem; letter-spacing:.22em; }
.scroll-cue b { color:var(--gold); font-size:1rem; }

.section { padding: 120px 0; }
.section-dark { background: linear-gradient(180deg, #090909, #0e0c0a); }
.split-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:start; }
.section-heading h2, .banner-content h2, .final-card h2 { font-size:clamp(2.5rem,4vw,4.5rem); }
.section-heading h2 { max-width:640px; }
.section-copy { border-left:1px solid var(--line); padding-left:42px; }
.section-copy p, .section-heading > p { color:#aa9d8d; font-family:Georgia,serif; line-height:1.8; font-size:1.03rem; }
.section-copy .lead { color:#eadcc5; font-size:1.25rem; margin-top:0; }
.centered { text-align:center; max-width:760px; margin:0 auto 55px; }
.centered h2 { margin-inline:auto; }
.centered p { max-width:640px; margin:0 auto; }

.feature-section { background: #080706; position:relative; overflow:hidden; }
.feature-section::before { content:""; position:absolute; width:640px; height:640px; right:-240px; top:-240px; border:1px solid rgba(227,172,69,.08); border-radius:50%; box-shadow:0 0 0 90px rgba(227,172,69,.018), 0 0 0 180px rgba(227,172,69,.012); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card { min-height:340px; position:relative; padding:38px; background:linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.feature-card::after { content:""; position:absolute; width:120px; height:3px; left:38px; bottom:0; background:linear-gradient(90deg,var(--red),transparent); }
.card-number { font-family:"Rye",serif; color:rgba(227,172,69,.42); font-size:3.2rem; }
.feature-card h3 { font-family:"Rye",serif; font-weight:400; font-size:1.55rem; margin:42px 0 14px; }
.feature-card p { color:#a99c8a; font-family:Georgia,serif; line-height:1.75; }

.banner-section { position:relative; min-height:600px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(100deg, rgba(6,6,6,.96), rgba(6,6,6,.56)), url("assets/red-horizon-logo.png") center 38% / 760px auto no-repeat; border-block:1px solid rgba(227,172,69,.13); }
.banner-section::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 76% 48%, rgba(216,22,19,.34), transparent 32%), linear-gradient(180deg, transparent, rgba(0,0,0,.45)); }
.banner-overlay { position:absolute; inset:0; background:repeating-linear-gradient(-9deg, transparent 0 23px, rgba(255,255,255,.012) 24px); }
.banner-content { position:relative; z-index:2; max-width:770px; margin-left:max(24px, calc((100vw - var(--max))/2)); margin-right:auto; }
.banner-content p { font-family:Georgia,serif; color:#c5b6a0; line-height:1.7; max-width:580px; font-size:1.08rem; }
.banner-content small { display:block; margin-top:16px; color:#81786c; }
.banner-content .button { margin-top:22px; }

.rules-section { background:#0d0c0a; }
.rules-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }
.rule-list { border-top:1px solid var(--line); }
.rule-list div { display:grid; grid-template-columns:64px 1fr; gap:16px; padding:23px 0; border-bottom:1px solid var(--line); align-items:center; }
.rule-list span { color:var(--red-bright); font-family:"Rye",serif; }
.rule-list strong { font-size:1.1rem; font-weight:500; letter-spacing:.025em; color:#dfd2bd; }

.final-cta { padding:70px 0 110px; background:#080706; }
.final-card { min-height:210px; display:grid; grid-template-columns:130px 1fr auto; gap:34px; align-items:center; padding:32px 40px; border:1px solid rgba(227,172,69,.22); background:linear-gradient(90deg,rgba(216,22,19,.08),rgba(227,172,69,.025)); box-shadow:var(--shadow); }
.final-card img { width:120px; }
.final-card h2 { font-size:clamp(2rem,3.4vw,3.7rem); margin:10px 0 0; }

footer { border-top:1px solid rgba(255,255,255,.07); padding:26px 0; background:#050505; }
.footer-inner { display:grid; grid-template-columns:auto 1fr auto; gap:35px; align-items:center; color:#766d63; font-size:.78rem; }
.footer-brand { display:flex; align-items:center; gap:10px; color:#d5c7b1; text-transform:uppercase; letter-spacing:.06em; }
.footer-brand img { width:42px; height:42px; object-fit:contain; }
.footer-brand div { display:grid; }
.footer-brand span { color:#756b60; font-size:.68rem; }
.footer-inner p { text-align:center; }
.footer-inner > a { color:#a99b87; }

.discord-toast { position:fixed; right:24px; bottom:24px; z-index:200; width:min(360px,calc(100vw - 48px)); padding:18px 20px; background:#15120f; border:1px solid rgba(227,172,69,.3); box-shadow:0 20px 60px rgba(0,0,0,.55); transform:translateY(130%); opacity:0; transition:.3s ease; display:grid; gap:4px; }
.discord-toast.show { transform:translateY(0); opacity:1; }
.discord-toast strong { color:var(--paper); }
.discord-toast span { color:#9d9285; font-size:.84rem; }


.discord-choice { position:fixed; inset:0; z-index:240; display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease; }
.discord-choice.open { opacity:1; visibility:visible; }
.discord-choice-backdrop { position:absolute; inset:0; border:0; background:rgba(0,0,0,.78); backdrop-filter:blur(7px); cursor:default; }
.discord-choice-card { position:relative; z-index:1; width:min(560px,100%); padding:34px; border:1px solid rgba(227,172,69,.30); background:linear-gradient(145deg,#17120e,#0b0a09 72%); box-shadow:0 28px 90px rgba(0,0,0,.72); text-align:center; overflow:hidden; }
.discord-choice-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% -5%,rgba(216,22,19,.25),transparent 42%); }
.discord-choice-card > * { position:relative; z-index:1; }
.discord-choice-card > img { width:92px; height:92px; object-fit:contain; margin:0 auto 10px; filter:drop-shadow(0 10px 22px rgba(0,0,0,.45)); }
.discord-choice-card h2 { margin:10px 0 12px; font-size:clamp(2rem,6vw,3rem); }
.discord-choice-card p { margin:0 auto; max-width:460px; color:#b8aa96; font-family:Georgia,serif; line-height:1.65; }
.discord-choice-actions { display:grid; gap:12px; margin-top:26px; }
.discord-choice-actions .button { width:100%; border-radius:0; cursor:pointer; font:inherit; }
.discord-choice-card small { display:block; margin-top:16px; color:#81786c; line-height:1.5; }
.discord-choice-close { position:absolute; top:12px; right:14px; z-index:3; width:38px; height:38px; border:0; background:transparent; color:#a99b87; font-size:28px; line-height:1; cursor:pointer; transition:.2s ease; }
.discord-choice-close:hover { color:var(--paper); transform:rotate(4deg) scale(1.05); }
body.discord-choice-open { overflow:hidden; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.reveal-delay { transition-delay:.12s; }
.reveal-delay-2 { transition-delay:.22s; }

@media (max-width: 980px) {
  .hero-content { grid-template-columns:1fr; gap:20px; text-align:center; padding-top:130px; }
  .hero-copy > p { margin-inline:auto; }
  .hero-actions, .hero-meta { justify-content:center; }
  .hero-mark { order:-1; }
  .logo-frame { width:min(76vw,390px); }
  .split-layout, .rules-layout { grid-template-columns:1fr; gap:42px; }
  .section-copy { border-left:0; border-top:1px solid var(--line); padding:32px 0 0; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:260px; }
  .feature-card h3 { margin-top:25px; }
  .final-card { grid-template-columns:90px 1fr; }
  .final-card img { width:90px; }
  .final-card .button { grid-column:1 / -1; }
}

@media (max-width: 760px) {
  .wrap { width:min(calc(100% - 32px),var(--max)); }
  .nav-shell { width:calc(100% - 28px); height:76px; }
  .brand span { display:none; }
  .brand img { width:48px; height:48px; }
  .menu-toggle { display:block; position:relative; z-index:3; }
  .main-nav { position:fixed; inset:0; background:rgba(5,5,5,.98); display:flex; flex-direction:column; justify-content:center; gap:27px; transform:translateX(100%); transition:.3s ease; }
  .main-nav.open { transform:none; }
  .main-nav > a:not(.nav-discord) { font-size:1.12rem; }
  .nav-discord { padding:14px 22px; }
  .hero h1 { font-size:clamp(3rem,14vw,4.7rem); }
  .hero-content { padding-bottom:110px; }
  .hero-meta { gap:12px 18px; }
  .section { padding:86px 0; }
  .section-heading h2, .banner-content h2 { font-size:clamp(2.3rem,10vw,3.5rem); }
  .feature-card { padding:30px; }
  .banner-section { min-height:560px; background-size:620px auto; background-position:70% 45%; }
  .banner-content { margin:0 24px; }
  .rule-list div { grid-template-columns:48px 1fr; }
  .final-card { grid-template-columns:1fr; text-align:center; justify-items:center; padding:34px 24px; }
  .final-card .button { grid-column:auto; width:100%; }
  .footer-inner { grid-template-columns:1fr; text-align:center; }
  .footer-brand { justify-content:center; }
  .footer-inner p { margin:0; }
}

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

/* Standalone rules and acceptance page */
.rules-preview {
  display:grid;
  grid-template-columns:100px 1fr auto;
  gap:24px;
  align-items:center;
  padding:30px;
  border:1px solid rgba(227,172,69,.22);
  background:linear-gradient(120deg,rgba(216,22,19,.08),rgba(255,255,255,.018));
}
.rules-preview-number {
  width:82px;
  height:82px;
  border:1px solid rgba(227,172,69,.34);
  display:grid;
  place-items:center;
  font-family:"Rye",serif;
  color:var(--red-bright);
  font-size:1.8rem;
}
.rules-preview strong { display:block; font-size:1.25rem; color:#eadcc5; }
.rules-preview p { margin:6px 0 0; color:#9e9282; font-family:Georgia,serif; line-height:1.6; }

.rules-page { background:#080706; }
.rules-page .site-header { position:fixed; }
.rules-page-nav a {
  color:#d9ccb8;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.86rem;
  transition:.2s ease;
}
.rules-page-nav a:hover { color:var(--gold); }
.rules-main { min-height:100vh; }
.rules-hero {
  position:relative;
  overflow:hidden;
  padding:170px 0 90px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 78% 43%,rgba(216,22,19,.29),transparent 29%),
    linear-gradient(115deg,#050505 40%,#130807 100%);
}
.rules-hero::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 89px,rgba(255,255,255,.015) 90px);
}
.rules-hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr 310px; gap:70px; align-items:center; }
.rules-title-block h1 {
  margin:16px 0 20px;
  font-family:"Rye",Georgia,serif;
  font-size:clamp(3.2rem,6vw,6rem);
  font-weight:400;
  line-height:1.03;
}
.rules-title-block h1 em { color:var(--red-bright); font-style:normal; }
.rules-title-block p { max-width:720px; margin:0; color:#c4b6a1; font:1.12rem/1.75 Georgia,serif; }
.rules-hero-logo { width:100%; max-width:300px; filter:drop-shadow(0 25px 55px rgba(0,0,0,.6)); }

.rules-content-section { padding:90px 0 75px; }
.rules-page-grid { display:grid; grid-template-columns:320px minmax(0,1fr); gap:34px; align-items:start; }
.rules-summary-card {
  position:sticky;
  top:120px;
  padding:28px;
  border:1px solid rgba(227,172,69,.22);
  background:linear-gradient(150deg,#16120e,#0b0a09);
  box-shadow:0 26px 70px rgba(0,0,0,.35);
}
.rules-summary-card h2 { margin:12px 0 16px; font:400 2rem/1.1 "Rye",serif; }
.rules-summary-card p { margin:0; color:#a99c8b; font:1rem/1.7 Georgia,serif; }
.rules-summary-card p strong { color:var(--paper); }
.rules-summary-points { display:grid; gap:10px; margin-top:24px; }
.rules-summary-points span { padding:11px 12px; border-left:2px solid var(--red); background:rgba(255,255,255,.025); color:#d9cbb5; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; }
.rules-groups { display:grid; gap:24px; }
.rule-group { border:1px solid rgba(255,255,255,.075); background:rgba(255,255,255,.018); }
.rule-group-heading { display:grid; grid-template-columns:82px 1fr; gap:22px; align-items:center; padding:26px 30px; border-bottom:1px solid rgba(255,255,255,.07); background:linear-gradient(90deg,rgba(216,22,19,.075),transparent 45%); }
.rule-group-heading > span { font:400 2.7rem/1 "Rye",serif; color:rgba(227,172,69,.45); }
.rule-group-heading small { color:var(--red-bright); letter-spacing:.2em; }
.rule-group-heading h2 { margin:4px 0 0; font:400 clamp(1.55rem,3vw,2.25rem)/1.1 "Rye",serif; }
.full-rule-list { list-style:none; margin:0; padding:0; counter-reset:rule; }
.full-rule-list li { position:relative; counter-increment:rule; padding:24px 30px 24px 78px; border-bottom:1px solid rgba(255,255,255,.055); }
.full-rule-list li:last-child { border-bottom:0; }
.full-rule-list li::before {
  content:counter(rule,decimal-leading-zero);
  position:absolute;
  left:30px;
  top:25px;
  color:var(--gold);
  font-family:"Rye",serif;
  font-size:.9rem;
}
.full-rule-list strong { display:block; color:#e8dcc8; font-size:1.08rem; letter-spacing:.02em; }
.full-rule-list p { margin:7px 0 0; color:#9f9486; font:0.98rem/1.65 Georgia,serif; }

.rules-accept-section { padding:20px 0 110px; }
.rules-accept-card {
  padding:42px;
  border:1px solid rgba(227,172,69,.32);
  background:linear-gradient(125deg,rgba(216,22,19,.1),rgba(227,172,69,.025) 45%,#0d0b09);
  box-shadow:var(--shadow);
}
.rules-accept-copy { max-width:760px; }
.rules-accept-copy h2 { margin:12px 0 14px; font:400 clamp(2rem,4vw,3.4rem)/1.05 "Rye",serif; }
.rules-accept-copy p { margin:0; color:#ad9f8d; font:1rem/1.7 Georgia,serif; }
.rules-consent {
  margin-top:30px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:22px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.26);
  cursor:pointer;
  color:#ddcfba;
  line-height:1.55;
}
.rules-consent input { position:absolute; opacity:0; pointer-events:none; }
.custom-check { flex:0 0 25px; width:25px; height:25px; border:1px solid rgba(227,172,69,.55); display:grid; place-items:center; transition:.2s; }
.custom-check::after { content:"✓"; opacity:0; transform:scale(.5); color:#090909; font-weight:700; transition:.18s; }
.rules-consent input:checked + .custom-check { background:var(--gold); border-color:var(--gold); }
.rules-consent input:checked + .custom-check::after { opacity:1; transform:scale(1); }
.rules-consent input:focus-visible + .custom-check { outline:2px solid var(--paper); outline-offset:3px; }
.join-unlock {
  display:none;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  margin-top:20px;
  padding:22px;
  border:1px solid rgba(227,172,69,.28);
  background:rgba(227,172,69,.055);
}
.join-unlock.visible { display:grid; animation:joinReveal .28s ease both; }
.join-unlock small { display:block; color:var(--gold); letter-spacing:.18em; }
.join-unlock strong { display:block; margin-top:4px; color:#eadfce; font-size:1.1rem; }
.join-server-button { min-width:190px; }
.join-note { margin:14px 0 0; color:#776f65; font-size:.82rem; }
@keyframes joinReveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

@media (max-width: 980px) {
  .rules-preview { grid-template-columns:82px 1fr; }
  .rules-preview .button { grid-column:1 / -1; }
  .rules-page-grid { grid-template-columns:1fr; }
  .rules-summary-card { position:static; }
  .rules-hero-inner { grid-template-columns:1fr 220px; }
}

@media (max-width: 680px) {
  .rules-page .nav-shell { height:76px; }
  .rules-page-nav a { font-size:.72rem; }
  .rules-hero { padding:130px 0 65px; }
  .rules-hero-inner { grid-template-columns:1fr; gap:30px; }
  .rules-hero-logo { width:180px; }
  .rules-content-section { padding-top:55px; }
  .rule-group-heading { grid-template-columns:54px 1fr; padding:22px 20px; }
  .rule-group-heading > span { font-size:2rem; }
  .full-rule-list li { padding:22px 20px 22px 58px; }
  .full-rule-list li::before { left:20px; top:23px; }
  .rules-accept-card { padding:28px 20px; }
  .join-unlock { grid-template-columns:1fr; }
  .join-server-button { width:100%; }
  .rules-preview { grid-template-columns:1fr; }
  .rules-preview-number { width:68px; height:68px; }
}

/* Discord desktop-app hand-off page */
.discord-launch-page {
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 28%, rgba(216,22,19,.22), transparent 34%),
    radial-gradient(circle at 50% 88%, rgba(227,172,69,.07), transparent 30%),
    #070605;
}
.discord-launch-main {
  position:relative;
  z-index:1;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:36px 20px;
}
.discord-launch-card {
  width:min(100%, 620px);
  text-align:center;
  padding:48px 44px 42px;
  border:1px solid rgba(227,172,69,.28);
  background:linear-gradient(145deg, rgba(25,18,14,.96), rgba(8,7,6,.98));
  box-shadow:0 34px 100px rgba(0,0,0,.52);
}
.discord-launch-logo {
  width:132px;
  height:132px;
  object-fit:contain;
  margin:0 auto 20px;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));
}
.discord-launch-card h1 {
  margin:14px 0 14px;
  font:400 clamp(2.3rem, 7vw, 4rem)/1.05 "Rye", Georgia, serif;
  color:#eee2cf;
}
.discord-launch-card > p {
  max-width:470px;
  margin:0 auto;
  color:#ad9f8d;
  font:1rem/1.7 Georgia, serif;
}
.discord-launch-spinner {
  width:38px;
  height:38px;
  margin:26px auto;
  border:2px solid rgba(227,172,69,.18);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:discordLaunchSpin .85s linear infinite;
}
.discord-launch-button {
  width:100%;
  max-width:340px;
  margin:0 auto;
}
.discord-launch-back {
  display:block;
  width:max-content;
  margin:20px auto 0;
  color:#a99c8b;
  font-size:.86rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  transition:.2s ease;
}
.discord-launch-back:hover { color:var(--gold); }
.discord-launch-card small {
  display:block;
  margin-top:24px;
  color:#6f675d;
  line-height:1.5;
}
.launch-dots { letter-spacing:.08em; }
@keyframes discordLaunchSpin { to { transform:rotate(360deg); } }

@media (max-width: 600px) {
  .discord-launch-card { padding:36px 22px 32px; }
  .discord-launch-logo { width:108px; height:108px; }
}