@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../fonts/crimson-pro.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("../fonts/crimson-pro-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #0a090b;
  --bone: #ece3d0;
  --bone-dim: #a39a86;
  --ash: #6f675c;
  --ember: #e2621f;
  --amber: #f4a640;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--bone);
  font: 400 1.15rem/1.55 "Crimson Pro", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--amber); outline-offset: 4px; border-radius: 4px; }
::selection { background: rgba(226, 98, 31, .45); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Stage & atmosphere ---------- */
.stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  overflow: hidden;
}
.stage > * { grid-column: 1; }
.backdrop, .fog, .embers, .grain { position: absolute; inset: 0; pointer-events: none; }

.backdrop {
  z-index: -4;
  inset: -6%;
  background:
    radial-gradient(ellipse 55% 45% at 50% 42%, transparent, rgba(10, 9, 11, .55) 60%, var(--ink) 100%),
    url("../img/backdrop.webp") center / cover no-repeat;
  opacity: .9;
  animation: drift 60s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}

/* Heat rising from below, breathing slowly. */
.stage::after {
  content: "";
  position: absolute; left: -10%; right: -10%; bottom: -30%; height: 75%;
  z-index: -3;
  background: radial-gradient(ellipse 50% 50% at 50% 100%, rgba(226, 98, 31, .5), rgba(125, 40, 14, .18) 45%, transparent 72%);
  animation: breathe 7s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes breathe { from { opacity: .65; transform: scaleY(.94); } to { opacity: 1; transform: scaleY(1.04); } }

.fog { z-index: -2; mix-blend-mode: screen; opacity: .5; }
.fog-a {
  inset: -20% -40%;
  background:
    radial-gradient(ellipse 30% 22% at 30% 60%, rgba(150, 128, 110, .16), transparent 70%),
    radial-gradient(ellipse 26% 18% at 72% 38%, rgba(140, 120, 100, .12), transparent 70%);
  animation: fog-a 48s linear infinite alternate;
}
.fog-b {
  inset: -20% -40%;
  background:
    radial-gradient(ellipse 34% 20% at 60% 75%, rgba(166, 217, 122, .06), transparent 70%),
    radial-gradient(ellipse 28% 20% at 20% 30%, rgba(160, 140, 120, .1), transparent 70%);
  animation: fog-b 64s linear infinite alternate;
}
@keyframes fog-a { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(6%, -3%, 0); } }
@keyframes fog-b { from { transform: translate3d(5%, 2%, 0); } to { transform: translate3d(-7%, -2%, 0); } }

.embers { z-index: -1; width: 100%; height: 100%; }

.grain {
  z-index: -1;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Content ---------- */
.content {
  align-self: center;
  justify-self: center;
  width: min(40rem, 100% - 3rem);
  padding: max(4rem, env(safe-area-inset-top)) 0 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.content > * { animation: rise 1.4s var(--ease) both; }
.content > :nth-child(2) { animation-delay: .35s; }
.content > :nth-child(3) { animation-delay: .5s; }
.content > :nth-child(4) { animation-delay: .7s; }
.content > :nth-child(n+5) { animation-delay: .9s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.logo { position: relative; margin: 0; width: min(620px, 100%); }
.logo::before {
  content: "";
  position: absolute; inset: -30% -12%;
  z-index: -1;
  background: radial-gradient(ellipse 50% 45% at 50% 55%, rgba(226, 98, 31, .34), rgba(226, 98, 31, .08) 55%, transparent 75%);
  animation: smoulder 5.5s ease-in-out infinite alternate;
}
@keyframes smoulder { from { opacity: .55; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
.logo img { width: 100%; }

.tagline {
  margin: 1.8rem 0 0;
  font: 600 clamp(.95rem, 2.4vw, 1.1rem)/1.3 "Cinzel", serif;
  letter-spacing: .32em;
  text-transform: uppercase;
  padding-left: .32em;
  color: var(--bone);
  text-shadow: 0 0 22px rgba(226, 98, 31, .55);
}
.platforms {
  margin: .5rem 0 2.6rem;
  font-style: italic;
  color: var(--bone-dim);
  font-size: 1.1rem;
}

/* ---------- Discord ---------- */
.discord {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1.05rem 1.9rem 1.05rem 1.6rem;
  border-radius: 999px;
  font: 700 .85rem/1 "Cinzel", serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1b0c04;
  background: linear-gradient(180deg, #f8b95a, var(--ember) 90%);
  box-shadow: 0 0 28px rgba(226, 98, 31, .38), 0 12px 36px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .18);
  transition: filter .2s, box-shadow .35s var(--ease), transform .2s var(--ease);
}
.discord svg { width: 1.5rem; height: auto; }
.discord:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 0 44px rgba(226, 98, 31, .6), 0 16px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.discord:active { transform: translateY(0) scale(.985); }
.fine { margin: 1.1rem 0 0; font-size: 1rem; color: var(--ash); text-wrap: balance; }

/* ---------- Footer & privacy ---------- */
.footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1.4rem;
  padding: 1.2rem 1rem max(1.4rem, env(safe-area-inset-bottom));
  font-size: .9rem;
  letter-spacing: .04em;
  color: var(--ash);
}
.footer a { text-decoration: none; }
.footer a:hover { color: var(--bone); }

/* Hidden until the footer link targets it; works without JavaScript. */
.privacy { display: none; max-width: 42rem; margin: 0 auto; padding: 1rem 1.5rem 4rem; color: var(--bone-dim); }
.privacy:target { display: block; }
.privacy-title { font: 600 .8rem/1 "Cinzel", serif; letter-spacing: .2em; text-transform: uppercase; color: var(--bone); text-align: center; margin: 1rem 0 1.5rem; }
.privacy h2:not(.privacy-title) { font: 600 .95rem/1.3 "Cinzel", serif; letter-spacing: .06em; color: var(--amber); margin: 1.6rem 0 .3rem; }
.privacy p { margin: 0 0 .6rem; font-size: 1.05rem; }
.privacy a { color: var(--amber); }
.privacy .muted { color: var(--ash); }
.privacy-close { display: block; width: max-content; margin: 2rem auto 0; font: 600 .75rem/1 "Cinzel", serif; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }

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

/* ---------- Legal pages (terms) ---------- */
.legal-page { background: var(--ink); }
.skip { position: absolute; left: 1rem; top: -3rem; z-index: 10; padding: .5rem .9rem; border-radius: 6px; background: var(--ember); color: #1b0c04; font: 700 .75rem/1 "Cinzel", serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 1rem; }

.legal-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: max(3.2rem, env(safe-area-inset-top)) 1.5rem 2.6rem;
  text-align: center;
  border-bottom: 1px solid rgba(236, 227, 208, .07);
}
.legal-glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 80% at 50% 125%, rgba(226, 98, 31, .55), rgba(125, 40, 14, .16) 50%, transparent 76%),
    linear-gradient(180deg, var(--ink), rgba(10, 9, 11, .55) 35%, rgba(10, 9, 11, .7) 80%, var(--ink)),
    url("../img/backdrop.webp") center 40% / cover no-repeat;
  animation: glow-pulse 7s ease-in-out infinite alternate;
}
@keyframes glow-pulse { from { opacity: .6; } to { opacity: .9; } }
.legal-head .grain { position: absolute; inset: 0; pointer-events: none; }
.legal-logo { display: block; width: min(300px, 70%); margin-bottom: 1.6rem; transition: filter .3s var(--ease); }
.legal-logo:hover { filter: drop-shadow(0 0 18px rgba(226, 98, 31, .45)); }
.legal-title {
  margin: 0;
  font: 600 clamp(1.25rem, 3.6vw, 1.7rem)/1.2 "Cinzel", serif;
  letter-spacing: .24em; padding-left: .24em;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(226, 98, 31, .5);
}
.legal-meta { margin: .6rem 0 0; font-style: italic; color: var(--bone-dim); }

.legal-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  width: min(64rem, 100% - 3rem);
  margin: 0 auto;
  padding: 2.5rem 0 3rem;
}
@media (min-width: 60rem) {
  .legal-wrap { grid-template-columns: 13.5rem minmax(0, 1fr); gap: 3.5rem; }
  .legal-toc { position: sticky; top: 2rem; align-self: start; max-height: calc(100svh - 4rem); overflow: auto; }
}

.legal-toc-title { margin: 0 0 .8rem; font: 600 .72rem/1 "Cinzel", serif; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; columns: 2; column-gap: 1.5rem; }
@media (min-width: 60rem) { .legal-toc ol { columns: 1; } }
.legal-toc li { counter-increment: toc; break-inside: avoid; }
.legal-toc a {
  display: flex; gap: .6rem; padding: .28rem 0;
  color: var(--bone-dim); text-decoration: none; font-size: 1rem; line-height: 1.3;
  transition: color .2s;
}
.legal-toc a::before { content: counter(toc); min-width: 1.3rem; font: 600 .72rem/1.8 "Cinzel", serif; color: var(--ash); }
.legal-toc a:hover { color: var(--amber); }

.legal-body { max-width: 42rem; color: var(--bone-dim); }
.legal-body section { scroll-margin-top: 1.5rem; padding-top: .4rem; }
.legal-body h2 {
  display: flex; align-items: baseline; gap: .8rem;
  margin: 2.2rem 0 .7rem;
  font: 600 1.02rem/1.3 "Cinzel", serif; letter-spacing: .06em;
  color: var(--bone);
}
.legal-body h3 {
  margin: 1.5rem 0 .6rem;
  font: 600 .95rem/1.4 "Cinzel", serif; letter-spacing: .04em;
  color: var(--bone);
}
.legal-body h2 span { font-size: .78rem; color: var(--ember); min-width: 1.4rem; }
.legal-body p { margin: 0 0 .8rem; font-size: 1.1rem; }
.legal-body a { color: var(--amber); text-underline-offset: 3px; }
.legal-body a:hover { color: var(--bone); }
.legal-strong { color: var(--bone); font-weight: 600; }

.legal-summary {
  position: relative;
  padding: 1.5rem 1.6rem 1.2rem;
  border: 1px solid rgba(226, 98, 31, .35);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(226, 98, 31, .09), rgba(226, 98, 31, .02));
  box-shadow: 0 0 40px rgba(226, 98, 31, .08), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.legal-summary h2 { margin: 0 0 .8rem; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); }
.legal-summary ul { margin: 0 0 .9rem; padding: 0; list-style: none; }
.legal-summary li { position: relative; padding: .22rem 0 .22rem 1.3rem; color: var(--bone); font-size: 1.1rem; }
.legal-summary li::before {
  content: ""; position: absolute; left: .1rem; top: .85rem;
  width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--ember); box-shadow: 0 0 10px var(--ember);
}
.legal-summary p { margin: 0; font-size: .95rem; font-style: italic; color: var(--ash); }

.legal-top { display: inline-block; margin-top: 2.5rem; font: 600 .72rem/1 "Cinzel", serif; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.legal-footer { border-top: 1px solid rgba(236, 227, 208, .07); }
.legal-footer a[aria-current="page"] { color: var(--bone); }

@media print {
  .legal-glow, .grain, .legal-toc, .legal-top, .skip { display: none !important; }
  .legal-page, .legal-head { background: #fff; }
  .legal-page *, .legal-summary li { color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
  .legal-summary { border-color: #999; background: none; }
  .legal-logo img { filter: invert(1) grayscale(1); }
  .legal-wrap { display: block; width: 100%; padding: 1rem 0; }
}