/* ============================================================================
   BETTERSCUM — stylesheet
   Mobile-first. One accent colour (blood red #b91c1c). Sharp edges only.
   No image assets required: texture, grain and hazard stripes are CSS/SVG.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  --bg:          #0a0a0a;
  --bg-raise:    #101010;
  --bg-card:     #131313;
  --bg-card-hi:  #181818;
  --line:        #262626;
  --line-soft:   #1c1c1c;

  --text:        #e7e5e4;
  --text-dim:    #a3a3a3;
  --text-mute:   #737373;

  --accent:      #b91c1c;   /* blood red — CTAs, headings, highlights ONLY */
  --accent-hi:   #dc2626;
  --accent-low:  #7f1d1d;
  --accent-glow: rgba(185, 28, 28, .45);

  --warn:        #a16207;   /* zero-tolerance hazard accent */

  --font-display: 'Oswald', 'Arial Narrow', 'Haettenschweiler', 'Impact', system-ui, sans-serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

  --wrap:   1160px;
  --gutter: 20px;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 2. RESET ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  /* Faint diagonal weave + vignette. Costs nothing, kills the "flat div" look. */
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.011) 0 2px, transparent 2px 4px),
    radial-gradient(120% 80% at 50% 0%, rgba(185,28,28,.07) 0%, transparent 60%);
  background-attachment: fixed;
}

img, svg, iframe { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.05; }
p  { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }
a  { color: var(--accent-hi); text-decoration: none; }
a:hover { color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff;
  padding: 12px 20px; z-index: 200; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- 2b. SHARED KEYFRAMES ----------------------------------------- */
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn     { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes slowZoom   { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes stripeCrawl{ from { background-position: 0 0; } to { background-position: 28px 0; } }
@keyframes fieldShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
@keyframes emberRise {
  0%   { transform: translate(0, 0) scale(.4); opacity: 0; }
  10%  { opacity: 1; }
  70%  { opacity: .9; }
  100% { transform: translate(var(--dx, 16px), -320px) scale(.15); opacity: 0; }
}
@keyframes snowFall {
  0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: .85; }
  100% { transform: translate(var(--dx, 20px), 340px) scale(1); opacity: 0; }
}
@keyframes flicker {
  0%, 100% { filter: brightness(1); }
  20%      { filter: brightness(.85); }
  45%      { filter: brightness(1.16); }
  60%      { filter: brightness(.9); }
  80%      { filter: brightness(1.12); }
}

body { animation: pageFadeIn .45s ease both; }

/* ---------- 2c. AMBIENT EFFECTS ------------------------------------------ */
/* Markup generated server-side by render_embers() in includes/config.php,
   shape chosen by /admin/effects.php (Embers / Fire / Snow / None). Every
   span carries randomized --l/--dur/--del/--dx/--s custom properties; --fx-
   intensity comes from <body> (set by the admin panel's intensity scaler)
   and scales BOTH particle count (server-side) and per-particle size (here).
   Purely decorative — always aria-hidden, always killed under reduced motion. */
.fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.fx span {
  position: absolute;
  left: var(--l, 50%);
  border-radius: 50%;
  opacity: 0;
}

.fx-ember span {
  bottom: -12px;
  width: calc(var(--s, 3px) * var(--fx-intensity, 1));
  height: calc(var(--s, 3px) * var(--fx-intensity, 1));
  background: radial-gradient(circle, #fff2d6 0%, #ffb454 32%, #f97316 60%, rgba(249,115,22,0) 78%);
  box-shadow:
    0 0 8px 2px rgba(249,115,22,.85),
    0 0 18px 5px rgba(249,115,22,.4);
  animation: emberRise var(--dur, 7s) linear infinite;
  animation-delay: var(--del, 0s);
}

/* Fire — hotter, bigger, faster-rising embers with a warm base glow. */
.fx-fire span {
  bottom: -12px;
  width: calc(var(--s, 4px) * var(--fx-intensity, 1) * 1.3);
  height: calc(var(--s, 4px) * var(--fx-intensity, 1) * 1.3);
  background: radial-gradient(circle, #fff8e6 0%, #ffcf5c 25%, #ff5a1f 55%, rgba(255,60,0,0) 76%);
  box-shadow:
    0 0 12px 3px rgba(255,90,20,.9),
    0 0 26px 8px rgba(249,60,20,.5);
  animation: emberRise calc(var(--dur, 7s) * .68) linear infinite;
  animation-delay: var(--del, 0s);
}
.fx-fire::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 42%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,90,20,.4), transparent 72%);
  animation: flicker 2.4s ease-in-out infinite;
}

/* Snow — falls instead of rising, no glow, gentler pace. */
.fx-snow span {
  top: -12px;
  width: calc(var(--s, 3px) * var(--fx-intensity, 1));
  height: calc(var(--s, 3px) * var(--fx-intensity, 1));
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.75) 55%, rgba(255,255,255,0) 80%);
  box-shadow: 0 0 4px 1px rgba(255,255,255,.5);
  animation: snowFall var(--dur, 11s) linear infinite;
  animation-delay: var(--del, 0s);
}

/* ---------- 3. GRAIN OVERLAY -------------------------------------------- */
/* Inline SVG turbulence = film grain with zero network requests. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- 4. LAYOUT ---------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
}

section { position: relative; z-index: 2; }

.section        { padding: 64px 0; }
.section-tight  { padding: 44px 0; }
.section-alt    { background: var(--bg-raise); border-block: 1px solid var(--line-soft); }

/* ---------- 5. TYPOGRAPHY ------------------------------------------------ */
.eyebrow {
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin: 0 0 12px;
  font-weight: 600;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(1.9rem, 7vw, 3rem);
  color: #fff;
}

.section-title .accent { color: var(--accent-hi); }

.lede {
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 62ch;
}

.rule {
  width: 64px; height: 3px;
  background: var(--accent);
  margin: 0 0 24px;
}

/* ---------- 6. BUTTONS --------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 2px solid transparent;
  border-radius: 0;                 /* sharp edges, always */
  background: var(--btn-bg);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease), transform .12s var(--ease), color .18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  --btn-bg: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  --btn-bg: var(--accent-hi);
  border-color: var(--accent-hi);
  color: #fff;
  box-shadow: 0 0 24px -2px var(--accent-glow);
}

.btn-ghost {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255,255,255,.02);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 20px -6px var(--accent-glow);
}

.btn-ghost.is-copied {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.btn-sm { padding: 10px 18px; font-size: .85rem; }
.btn-lg { padding: 18px 40px; font-size: 1.1rem; }
.btn-block { width: 100%; }

.btn-icon { width: 20px; height: 20px; flex: 0 0 auto; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.cta-row .btn { flex: 1 1 220px; }

@media (min-width: 700px) {
  .cta-row .btn { flex: 0 0 auto; }
}

/* ---------- 7. HEADER / NAV --------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,10,10,.92);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -18px #000;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.brand-mark {
  width: 10px; height: 26px;
  background: var(--accent);
  box-shadow: 4px 0 0 -1px var(--accent-low);
}

.brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}
.brand-accent { color: var(--accent-hi); }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  height: 2px;
  background: var(--text);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.primary-nav {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--bg-raise);
  border-bottom: 1px solid var(--line);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .32s var(--ease), opacity .22s var(--ease);
}
.primary-nav.is-open { max-height: 520px; opacity: 1; }

.primary-nav ul { list-style: none; }

.primary-nav a {
  display: block;
  padding: 15px var(--gutter);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-soft);
}
.primary-nav a:hover,
.primary-nav a.is-active { color: #fff; }
.primary-nav a.is-active { border-left: 3px solid var(--accent); }

.nav-cta-item { padding: 16px var(--gutter) 20px; }
.nav-cta-item .btn { width: 100%; }
.nav-cta-item a { border-bottom: 0; }

@media (min-width: 900px) {
  .header-inner { min-height: 72px; }
  .nav-toggle   { display: none; }
  .primary-nav  {
    position: static;
    display: block;
    max-height: none;
    opacity: 1;
    overflow: visible;
    background: none;
    border: 0;
  }
  .primary-nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .primary-nav a {
    padding: 8px 14px;
    border-bottom: 0;
    font-size: .92rem;
    position: relative;
  }
  .primary-nav a.is-active { border-left: 0; }
  .primary-nav a.is-active::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 0;
    height: 2px;
    background: var(--accent);
  }
  .nav-cta-item { padding: 0 0 0 12px; }
  .nav-cta-item .btn { width: auto; }
}

/* ---------- 8. HERO ------------------------------------------------------ */
.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
  padding: 72px 0 56px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}

/* Layered darkness: spotlight + horizon glow + scanlines. Slow continuous
   zoom on the whole layer gives the background a "camera is still rolling"
   feel without any JS. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 60% at 50% 12%, rgba(185,28,28,.18) 0%, transparent 62%),
    radial-gradient(140% 100% at 50% 120%, rgba(120,20,20,.14) 0%, transparent 55%),
    linear-gradient(180deg, rgba(10,10,10,.88) 0%, rgba(13,11,11,.82) 45%, #0a0a0a 100%),
    url('../assets/hero-bg.jpg') center 32% / cover no-repeat;
  z-index: 0;
  transform-origin: center;
  transition: opacity 1.4s ease;
  animation: slowZoom 26s ease-in-out infinite alternate,
             flicker 5.5s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
  opacity: .5;
  z-index: 1;
  pointer-events: none;
}

/* Hero background carousel — crossfades the still image (::before, above)
   with a muted looping video, toggled by js/main.js -> section 9. Falls
   back to the still image alone if JS never toggles the class (no-JS,
   reduced-motion, or the browser refusing autoplay). */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero.video-active::before { opacity: 0; }
.hero.video-active .hero-video { opacity: 1; }

.hero .wrap { z-index: 2; }
.hero .fx { z-index: 2; }

/* Staggered entrance — each hero element rises in slightly after the last. */
.hero-status,
.hero-title,
.hero-tagline,
.hero-sub,
.hero .cta-row,
.hero-meta,
.player-widget {
  animation: riseIn .7s var(--ease) both;
}
.hero-status   { animation-delay: .02s; }
.hero-title    { animation-delay: .1s; }
.hero-tagline  { animation-delay: .24s; }
.hero-sub      { animation-delay: .34s; }
.hero .cta-row { animation-delay: .44s; }
.hero-meta     { animation-delay: .54s; }
.player-widget { animation-delay: .64s; }

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.5);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 22px;
}
.status-dot {
  width: 8px; height: 8px;
  background: var(--accent-hi);
  box-shadow: 0 0 10px var(--accent-hi);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3.1rem, 17vw, 9.5rem);
  line-height: .86;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  color: #fff;
  text-shadow: 0 0 60px rgba(185,28,28,.35);
}
.hero-title .accent {
  color: var(--accent-hi);
  display: inline-block;
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1rem, 4.4vw, 1.7rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 10px;
  font-weight: 500;
}
.hero-tagline .sep { color: var(--accent); margin: 0 .35em; }

.hero-sub {
  color: var(--text-dim);
  max-width: 48ch;
  margin-bottom: 32px;
}

.hero .cta-row { margin-bottom: 36px; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.hero-meta strong { color: var(--text); font-weight: 600; }

@media (min-width: 900px) {
  .hero { padding: 96px 0 80px; }
  .hero-sub { font-size: 1.1rem; }
}

/* ---------- 9. PLAYER COUNT WIDGET -------------------------------------- */
.player-widget {
  margin-top: 40px;
  max-width: 420px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20,20,20,.94), rgba(10,10,10,.94));
  padding: 18px 20px;
  position: relative;
}
.player-widget::before {
  content: '';
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--accent);
}

.player-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}

.player-count {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  letter-spacing: .02em;
}
.player-count .slash,
.player-count .max { color: var(--text-mute); }

.player-bar {
  height: 6px;
  background: #1e1e1e;
  margin-top: 14px;
  overflow: hidden;
}
.player-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-low), var(--accent-hi));
  transition: width .6s var(--ease);
}

.player-state {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 10px 0 0;
}

/* ---------- 10. FEATURE CARDS ------------------------------------------- */
.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  padding: 26px 22px;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 2px solid transparent;
  transition: border-color .2s var(--ease);
  pointer-events: none;
}
.card:hover {
  background: var(--bg-card-hi);
  border-color: var(--line);
  transform: translateY(-2px);
}
.card:hover::after { border-top-color: var(--accent); }

.card-icon {
  width: 40px; height: 40px;
  color: var(--accent-hi);
  margin-bottom: 16px;
  transition: filter .2s var(--ease);
}
.card-icon svg { width: 100%; height: 100%; }
.card:hover .card-icon { filter: drop-shadow(0 0 8px var(--accent-glow)); }

/* Small rotated "stamp" graphic overlapping a card's corner. */
.card { overflow: visible; }
.card-stamp {
  position: absolute;
  top: -12px; right: -10px;
  width: 46px; height: 46px;
  border: 2px solid #0c0c0c;
  outline: 1px solid var(--line);
  transform: rotate(8deg);
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.7);
  transition: transform .2s var(--ease);
}
.card:hover .card-stamp { transform: rotate(0deg) scale(1.06); }

.card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 8px;
}

.card-text {
  color: var(--text-dim);
  font-size: .95rem;
  margin: 0;
}

/* ---------- 11. ABOUT ---------------------------------------------------- */
.about-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
}

.about-body p { color: var(--text-dim); }
.about-body p:last-child { margin-bottom: 0; }

.pullquote {
  border-left: 3px solid var(--accent);
  padding: 22px 26px;
  background: linear-gradient(90deg, rgba(185,28,28,.09), transparent 70%);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4.6vw, 1.9rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  margin: 0;
}
.pullquote span { color: var(--accent-hi); display: block; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-top: 28px;
}
@media (min-width: 700px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }

.stat {
  background: var(--bg);
  padding: 20px 16px;
  text-align: center;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--accent-hi);
  line-height: 1;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 8px 0 0;
}

/* ---------- 12. PAGE HEAD (inner pages) --------------------------------- */
.page-head {
  position: relative;
  padding: 56px 0 44px;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  /* --head-img is set per-page as an inline custom property; pages that don't
     set it (e.g. apply.php) just get the plain gradient + scanlines below. */
  background:
    radial-gradient(80% 100% at 20% 0%, rgba(185,28,28,.16), transparent 60%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.72) 55%, rgba(10,10,10,.92) 100%),
    var(--head-img, none) center 60% / cover no-repeat;
  z-index: 0;
  transform-origin: center;
  animation: slowZoom 28s ease-in-out infinite alternate,
             flicker 4.8s ease-in-out infinite;
}
.page-head .wrap { z-index: 2; animation: riseIn .6s var(--ease) both; }

.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.3rem, 10vw, 4.6rem);
  line-height: .92;
  color: #fff;
  margin: 0 0 14px;
}
.page-title .accent { color: var(--accent-hi); }

@media (min-width: 900px) { .page-head { padding: 84px 0 68px; } }

/* Small bordered mark shown beside a page-head title (e.g. rules/apply). */
.page-icon-badge {
  width: 56px; height: 56px;
  border: 1px solid var(--line);
  margin-bottom: 16px;
  background: #0c0c0c;
}
@media (min-width: 700px) { .page-icon-badge { width: 68px; height: 68px; } }

/* Rotated "clan patch" treatment for the wordmark graphic — its native light
   card background is intentional here, like a velcro morale patch. */
.patch {
  display: inline-block;
  width: 220px;
  border: 3px solid #111;
  outline: 1px solid var(--line);
  outline-offset: 4px;
  transform: rotate(-3deg);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.7);
  margin: 8px 0 4px;
}
@media (min-width: 700px) { .patch { width: 260px; } }

/* ---------- 13. RULES ---------------------------------------------------- */
.rules-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) { .rules-grid { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } }

.rulebox { border: 1px solid var(--line); position: relative; }

.rulebox-head {
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
}
.rulebox-head svg { width: 30px; height: 30px; flex: 0 0 auto; }

.rulebox-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}
.rulebox-sub {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 4px 0 0;
  opacity: .75;
}

.rulebox-body { padding: 8px 24px 24px; }

/* ---- Section A: permissive / aggressive, wrapped in the accent ---- */
.rulebox-allowed {
  border-color: var(--accent-low);
  background:
    linear-gradient(180deg, rgba(185,28,28,.1), rgba(185,28,28,.02) 40%, transparent 70%),
    var(--bg-card);
  box-shadow: 0 0 40px -22px var(--accent-glow);
}
.rulebox-allowed .rulebox-head {
  background: var(--accent);
  border-bottom-color: var(--accent);
  color: #fff;
}
.rulebox-allowed .rulebox-head svg { color: #fff; }
.rulebox-allowed .rulebox-title { color: #fff; }

.rulelist { list-style: none; }
.rulelist li {
  position: relative;
  padding: 16px 0 16px 34px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-dim);
}
.rulelist li:last-child { border-bottom: 0; padding-bottom: 4px; }
.rulelist strong {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.rulelist li::before {
  content: '';
  position: absolute;
  left: 0; top: 22px;
  width: 14px; height: 3px;
  background: var(--accent-hi);
}

/* ---- Section B: zero tolerance — colder, harder, hazard-striped ---- */
.rulebox-banned {
  border-color: #303030;
  background: #0c0c0c;
}
.rulebox-banned::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    -45deg, #1c1c1c 0 10px, #0c0c0c 10px 20px
  );
  border-bottom: 1px solid #303030;
  animation: stripeCrawl 2.2s linear infinite;
}
.rulebox-banned .rulebox-head {
  padding-top: 28px;
  background: #111;
  border-bottom-color: #303030;
}
.rulebox-banned .rulebox-head svg { color: var(--warn); }
.rulebox-banned .rulebox-title { color: #e5e5e5; }
.rulebox-banned .rulebox-sub  { color: var(--warn); opacity: 1; }

.banlist {
  list-style: none;
  counter-reset: ban;
}
.banlist li {
  counter-increment: ban;
  position: relative;
  padding: 16px 0 16px 46px;
  border-bottom: 1px solid #1a1a1a;
  color: var(--text-mute);
  font-size: .95rem;
}
.banlist li:last-child { border-bottom: 0; }
.banlist li::before {
  content: counter(ban, decimal-leading-zero);
  position: absolute;
  left: 0; top: 15px;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: #4a4a4a;
  border: 1px solid #262626;
  padding: 2px 6px;
  line-height: 1;
}
.banlist strong {
  display: block;
  color: #d4d4d4;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.verdict {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-hi);
  border: 1px solid var(--accent-low);
  padding: 3px 8px;
}

/* ---- Closing note ---- */
.closing-note {
  position: relative;
  margin-top: 24px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  padding: 28px 24px;
  overflow: hidden;
  isolation: isolate;
}
.closing-note::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(10,10,10,.93) 0%, rgba(19,19,19,.88) 55%, rgba(10,10,10,.95) 100%),
    url('../assets/closing-note-bg.jpg') center 38% / cover no-repeat;
}
.closing-note > * { position: relative; }
.closing-note h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.closing-note p { color: var(--text-dim); margin-bottom: .8em; }
.closing-note p:last-child { margin-bottom: 0; }
.closing-note .hard {
  color: #fff;
  font-family: var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (min-width: 700px) {
  .rulebox-body  { padding: 8px 32px 30px; }
  .rulebox-head  { padding: 26px 32px; }
  .closing-note  { padding: 34px 36px; }
}

/* ---------- 14. COMMUNITY / DISCORD ------------------------------------- */
.discord-layout {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .discord-layout { grid-template-columns: 350px 1fr; gap: 40px; align-items: start; }
}

.widget-frame {
  border: 1px solid var(--line);
  background: var(--bg-card);
  padding: 12px;
  position: relative;
}
.widget-frame::before {
  content: '';
  position: absolute;
  left: -1px; top: -1px; width: 3px; bottom: -1px;
  background: var(--accent);
}
.widget-frame iframe {
  width: 100%;
  height: 500px;
  border: 0;
  display: block;
  background: #1e1f22;
}

.trailer-frame {
  max-width: 900px;
  margin-inline: auto;
  border: 1px solid var(--line);
  background: #000;
  padding: 10px;
  position: relative;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}
.trailer-frame::before {
  content: '';
  position: absolute;
  left: -1px; top: -1px; width: 3px; bottom: -1px;
  background: var(--accent);
}
.trailer-frame video {
  width: 100%;
  display: block;
  background: #000;
}
.widget-caption {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 12px 2px 2px;
}

.channel-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}
.channel {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--line-soft);
  background: var(--bg-card);
  padding: 18px 20px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.channel:hover { border-color: var(--line); background: var(--bg-card-hi); }
.channel-tag {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--accent-hi);
  flex: 0 0 auto;
  padding-top: 2px;
}
.channel h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 4px;
}
.channel p { margin: 0; color: var(--text-dim); font-size: .93rem; }

/* ---------- 15. FORMS ---------------------------------------------------- */
.form-layout {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .form-layout { grid-template-columns: 1fr 330px; gap: 44px; align-items: start; }
}

.form-card {
  border: 1px solid var(--line);
  background: var(--bg-card);
  padding: 26px 22px;
}
@media (min-width: 700px) { .form-card { padding: 34px 34px 38px; } }

.field { margin-bottom: 22px; }

.field label {
  display: block;
  font-family: var(--font-display);
  font-size: .88rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}
.field .req { color: var(--accent-hi); }

.field .hint {
  display: block;
  font-size: .8rem;
  color: var(--text-mute);
  margin-top: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  padding: 13px 14px;
  background: #0b0b0b;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #0e0b0b;
  box-shadow: 0 0 0 1px var(--accent), 0 0 22px -8px var(--accent-glow);
}

.field input::placeholder,
.field textarea::placeholder { color: #4d4d4d; }

.field.has-error input,
.field.has-error textarea { border-color: var(--accent-hi); animation: fieldShake .4s ease; }

.field-error {
  display: block;
  color: var(--accent-hi);
  font-size: .84rem;
  margin-top: 7px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}

/* Checkbox */
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  border: 1px solid var(--line);
  padding: 16px;
  background: #0b0b0b;
  transition: border-color .16s var(--ease);
}
.check:hover { border-color: #333; }
.check input {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--accent);
}
.check span {
  font-size: .93rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.check strong { color: var(--text); }
.field.has-error .check { border-color: var(--accent-hi); animation: fieldShake .4s ease; }

/* Honeypot — visually gone, still focusable-free for bots to trip on. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Alerts */
.alert {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: rgba(185,28,28,.07);
  padding: 18px 20px;
  margin-bottom: 26px;
}
.alert h2, .alert h3 {
  font-family: var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.alert p:last-child { margin-bottom: 0; }
.alert ul { margin: 8px 0 0 18px; color: var(--text-dim); }

.alert-success {
  border-left-color: #15803d;
  background: rgba(21,128,61,.09);
}
.alert-success h2 { color: #fff; }

/* Account status badge — used on account.php. */
.pill {
  display: inline-block;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
}
.pill-pending  { color: #d6a419; border-color: #6b5215; }
.pill-approved { color: #4ade80; border-color: #15803d; }
.pill-denied   { color: var(--accent-hi); border-color: var(--accent-low); }

.success-panel { text-align: center; padding: 44px 24px; }
.success-icon {
  width: 62px; height: 62px;
  margin: 0 auto 20px;
  color: var(--accent-hi);
}
.success-panel h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.3rem);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
}

/* Sidebar panel */
.side-panel {
  border: 1px solid var(--line-soft);
  background: var(--bg-card);
  padding: 24px 22px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.side-panel:hover { border-color: var(--line); transform: translateY(-2px); }
.side-panel + .side-panel { margin-top: 16px; }
.side-panel h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
}
.side-panel p, .side-panel li { color: var(--text-dim); font-size: .92rem; }
.side-panel ol, .side-panel ul { margin-left: 18px; }
.side-panel li { margin-bottom: 8px; }

/* ---------- 16. FOOTER --------------------------------------------------- */
.footer-cta {
  position: relative;
  padding: 64px 0;
  text-align: center;
  border-top: 1px solid var(--line-soft);
  overflow: hidden;
}
.footer-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 100% at 50% 100%, rgba(185,28,28,.16), transparent 65%),
    linear-gradient(180deg, rgba(16,16,16,.94) 0%, rgba(16,16,16,.82) 50%, rgba(16,16,16,.96) 100%),
    url('../assets/footer-bg.jpg') center 55% / cover no-repeat;
  transform-origin: center;
  animation: slowZoom 32s ease-in-out infinite alternate,
             flicker 6.2s ease-in-out infinite;
}
.footer-cta .wrap { position: relative; z-index: 1; }
.footer-cta .lede { margin-inline: auto; margin-bottom: 28px; }
.footer-cta .cta-row { justify-content: center; }

.site-footer {
  border-top: 1px solid var(--line-soft);
  background: #070707;
  padding: 48px 0 0;
  position: relative;
  z-index: 2;
}

.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  padding-bottom: 40px;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
}

.footer-brand { font-size: 1.5rem; display: inline-block; margin-bottom: 12px; }

.footer-note {
  color: var(--text-mute);
  font-size: .9rem;
  max-width: 42ch;
}

.footer-ip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  padding: 8px 12px;
  margin: 0;
}
.footer-ip-label {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  color: var(--text-mute);
}
.footer-ip code {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--accent-hi);
}

.footer-heading {
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 14px;
}

.footer-list { list-style: none; }
.footer-list li { margin-bottom: 9px; }
.footer-list a { color: var(--text-dim); font-size: .93rem; }
.footer-list a:hover { color: var(--accent-hi); }

.footer-bottom {
  border-top: 1px solid var(--line-soft);
  padding-block: 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-bottom p { margin: 0; color: var(--text-mute); font-size: .8rem; }
.footer-admin-link {
  display: inline-block;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer-admin-link:hover { color: var(--accent-hi); }
.footer-tag {
  font-family: var(--font-display);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #333 !important;
}
@media (min-width: 700px) { .footer-bottom { flex-direction: row; align-items: center; } }

/* ---------- 17. TOAST ---------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 130%);
  z-index: 300;
  background: var(--accent);
  color: #fff;
  padding: 13px 22px;
  font-family: var(--font-display);
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 14px 40px -12px #000, 0 0 30px -8px var(--accent-glow);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
  opacity: 0;
  pointer-events: none;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* ---------- 18. SCROLL REVEAL ------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Staggered wave when siblings reveal together instead of all at once. */
.grid-3 > .reveal:nth-child(1) { transition-delay: .02s; }
.grid-3 > .reveal:nth-child(2) { transition-delay: .08s; }
.grid-3 > .reveal:nth-child(3) { transition-delay: .14s; }
.grid-3 > .reveal:nth-child(4) { transition-delay: .2s; }
.grid-3 > .reveal:nth-child(5) { transition-delay: .26s; }
.grid-3 > .reveal:nth-child(6) { transition-delay: .32s; }

.channel-list > .reveal:nth-child(1) { transition-delay: .04s; }
.channel-list > .reveal:nth-child(2) { transition-delay: .12s; }
.channel-list > .reveal:nth-child(3) { transition-delay: .2s; }
.channel-list > .reveal:nth-child(4) { transition-delay: .28s; }

.rules-grid > .reveal:nth-child(2) { transition-delay: .12s; }

/* ---------- 19b. COUNT-UP NUMBERS ---------------------------------------- */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* ---------- 19. MOTION / PRINT ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .fx { display: none; }
  .hero-video { display: none; }
}

@media print {
  .grain, .site-header, .footer-cta, .toast { display: none !important; }
  body { background: #fff; color: #000; }
}