@font-face { font-family: "Rye"; src: url("fonts/rye.woff2") format("woff2"); font-display: swap; }

/* Shared shell for every page: dark ground, top nav, section labels, Discord button, footer */
:root {
  --void: #0b0910;
  --deep: #15101d;
  --panel: #18131f;
  --edge: #33284a;
  --text: #ece4d4;
  --muted: #a99d8e;
  --grass: #5fae3c;
  --grass-dark: #3f7f27;
  --dirt: #4a3a2c;
  --violet: #8b4dff;
  --violet-dark: #4c1d95;
  --violet-glow: rgba(162,89,255,.45);
  --thruster: #d4a84b;
  --cyan: #b57cff;
  --western: "Rye", Georgia, serif;
  --display: "Arial Black", "Segoe UI Black", Impact, "Helvetica Neue", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hud: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--void); color: var(--text); font: 16px/1.6 var(--body); }
img { max-width: 100%; }

.nav { position: relative; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-block: 14px;
  padding-left: max(16px, 4vw, env(safe-area-inset-left, 0px)); padding-right: max(16px, 4vw, env(safe-area-inset-right, 0px));
  background: rgba(11,9,16,.88); border-bottom: 1px solid var(--edge); }
.nav .home { margin-right: auto; font: 400 1.15rem/1 var(--western); text-transform: uppercase; letter-spacing: .05em; color: var(--text); text-decoration: none; }
.nav .home span { color: var(--violet); text-shadow: 0 0 12px var(--violet-glow); }
.nav a.link { font: 600 .74rem/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a.link:hover { color: var(--text); }
.nav a.link[aria-current="page"] { color: var(--text); border-color: var(--thruster); }
.nav a:focus-visible { outline: 2px solid var(--thruster); outline-offset: 4px; }

.wrap { max-width: 2400px; margin: 0 auto; padding-block: 8px 0;
  padding-left: max(16px, 4vw, env(safe-area-inset-left, 0px)); padding-right: max(16px, 4vw, env(safe-area-inset-right, 0px)); }
h2 { display: flex; align-items: center; gap: 12px; margin: 44px 0 18px; font: 600 .8rem/1 var(--hud); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
h2::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--edge) 0 8px, transparent 8px 12px); }

.btn { display: inline-block; padding: 14px 26px 16px; font: 800 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em;
  color: #f4ecdf; background: #7c3aed; text-decoration: none;
  box-shadow: inset 0 -5px 0 var(--violet-dark), inset 0 3px 0 #b78cff, 0 0 0 3px #0b0910, 0 0 24px var(--violet-glow); }
.btn:hover { background: var(--violet); }
.btn:focus-visible { outline: 3px solid var(--thruster); outline-offset: 4px; }

.cta { text-align: center; margin: 56px 0 0; padding: 36px 16px 40px; background: #140f1c; box-shadow: 0 0 0 2px var(--edge); }
.cta p { color: var(--muted); margin: 0 0 22px; }
footer { margin-top: 56px; padding-block: 22px 40px; border-top: 2px dashed var(--edge); color: var(--muted); font: .78rem/1.4 var(--hud); letter-spacing: .1em; text-align: center; }

.discords { display: grid; gap: 18px; margin-top: 56px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.dc { display: grid; gap: 8px; align-content: start; padding: 22px; background: #140f1c; box-shadow: 0 0 0 2px var(--edge); color: inherit; text-decoration: none; }
.dc .meta { font: 600 .7rem/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dc h3 { margin: 0; font: 900 1.25rem/1.1 var(--display); text-transform: uppercase; }
.dc p { margin: 0; color: var(--muted); }
.dc .go { margin-top: 6px; font: 600 .85rem/1 var(--hud); }
.dc.play { box-shadow: 0 0 0 2px var(--violet), 0 0 18px var(--violet-glow); }
.dc.play .go { color: #c9a5ff; }
.dc.mods .go { color: var(--thruster); }
.dc:hover h3 { text-decoration: underline; }
.dc:focus-visible { outline: 3px solid var(--thruster); outline-offset: 3px; }