/* ===== EDIT THESE TO CHANGE THE LOOK ===== */
:root {
  --bg: #070403;
  --surface: #110a07;
  --surface-2: #180d09;
  --border: #2b150d;
  --text: #f3e6dc;
  --muted: #a38c80;
  --ember-deep: #7a1f0b;    /* darkest coal red */
  --ember: #d9531c;         /* main smoldering orange */
  --ember-hot: #f27a2e;     /* brighter hot spots */
  --ember-glow: #f5a85a;    /* white-hot highlights, used sparingly */
  --radius: 16px;

  /* Lava texture used on the Eden logo and title, layered top to bottom:
     near-black crust plates, a dark red cooled rim around each plate, the molten glow */
  --lava-crust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='5' seed='3' stitchTiles='stitch' result='p'/%3E%3CfeColorMatrix in='p' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 22 0 0 0 -12.3' result='m'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16' numOctaves='4' seed='9' stitchTiles='stitch' result='t'/%3E%3CfeDiffuseLighting in='t' surfaceScale='4' diffuseConstant='1.1' lighting-color='%23ff8a4a' result='l'%3E%3CfeDistantLight azimuth='235' elevation='38'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='l' values='.12 0 0 0 .008 0 .045 0 0 .004 0 0 .035 0 .004 0 0 0 0 1' result='rock'/%3E%3CfeTurbulence type='turbulence' baseFrequency='.07' numOctaves='2' seed='21' stitchTiles='stitch' result='k'/%3E%3CfeColorMatrix in='k' values='0 0 0 0 .85 0 0 0 0 .28 0 0 0 0 .06 -30 0 0 0 1.6' result='cracks'/%3E%3CfeMerge result='crust'%3E%3CfeMergeNode in='rock'/%3E%3CfeMergeNode in='cracks'/%3E%3C/feMerge%3E%3CfeComposite in='crust' in2='m' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29'/%3E%3C/svg%3E");
  --lava-rim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .06 0 0 0 0 .02 7 0 0 0 -3.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)' opacity='.75'/%3E%3C/svg%3E");
  /* Same crust with fewer plates, so the small logo stays readable */
  --lava-crust-sparse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='5' seed='3' stitchTiles='stitch' result='p'/%3E%3CfeColorMatrix in='p' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 22 0 0 0 -13.6' result='m'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16' numOctaves='4' seed='9' stitchTiles='stitch' result='t'/%3E%3CfeDiffuseLighting in='t' surfaceScale='4' diffuseConstant='1.1' lighting-color='%23ff8a4a' result='l'%3E%3CfeDistantLight azimuth='235' elevation='38'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='l' values='.12 0 0 0 .008 0 .045 0 0 .004 0 0 .035 0 .004 0 0 0 0 1' result='rock'/%3E%3CfeTurbulence type='turbulence' baseFrequency='.07' numOctaves='2' seed='21' stitchTiles='stitch' result='k'/%3E%3CfeColorMatrix in='k' values='0 0 0 0 .85 0 0 0 0 .28 0 0 0 0 .06 -30 0 0 0 1.6' result='cracks'/%3E%3CfeMerge result='crust'%3E%3CfeMergeNode in='rock'/%3E%3CfeMergeNode in='cracks'/%3E%3C/feMerge%3E%3CfeComposite in='crust' in2='m' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23s%29'/%3E%3C/svg%3E");
  /* A second set of crust plates in different spots, layered onto each title letter */
  --lava-crust-extra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='x' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='5' seed='11' stitchTiles='stitch' result='p'/%3E%3CfeColorMatrix in='p' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 22 0 0 0 -12.1' result='m'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16' numOctaves='4' seed='14' stitchTiles='stitch' result='t'/%3E%3CfeDiffuseLighting in='t' surfaceScale='4' diffuseConstant='1.1' lighting-color='%23ff8a4a' result='l'%3E%3CfeDistantLight azimuth='235' elevation='38'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='l' values='.12 0 0 0 .008 0 .045 0 0 .004 0 0 .035 0 .004 0 0 0 0 1' result='rock'/%3E%3CfeTurbulence type='turbulence' baseFrequency='.07' numOctaves='2' seed='27' stitchTiles='stitch' result='k'/%3E%3CfeColorMatrix in='k' values='0 0 0 0 .85 0 0 0 0 .28 0 0 0 0 .06 -30 0 0 0 1.6' result='cracks'/%3E%3CfeMerge result='crust'%3E%3CfeMergeNode in='rock'/%3E%3CfeMergeNode in='cracks'/%3E%3C/feMerge%3E%3CfeComposite in='crust' in2='m' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23x%29'/%3E%3C/svg%3E");
  /* Streaks of brighter and deeper molten color that drift in opposite directions, so the lava looks like it is flowing */
  --lava-flow-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='fh' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .045' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.9 0 0 0 0 0.66 -9 0 0 0 1.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23fh%29' opacity='0.95'/%3E%3C/svg%3E");
  --lava-flow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='fd' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .05' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.25 0 0 0 0 0.06 -4 0 0 0 1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23fd%29' opacity='0.45'/%3E%3C/svg%3E");
  --lava-molten: linear-gradient(180deg, #fff1dc 0%, #ffd29a 25%, #f5a85a 50%, #f27a2e 75%, #d9531c 100%);
}

/* New Rocker's blackletter capitals are hard to read (N, K, L...), so capital letters A-Z come
   from Grenze instead: still sharp and angular, but clearly legible. Lowercase stays New Rocker. */
@font-face {
  font-family: "EdenCaps";
  src: url(https://fonts.gstatic.com/s/grenze/v18/O4ZOFGb7hR12Bxqt9ErXQpCpkHScylXT6HfiCQ.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0041-005A;
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Alegreya Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
/* Sharp, knife-edged blackletter for headings; the lava title and tagline keep their own fonts */
h1, h2, h3 { font-family: "EdenCaps", "New Rocker", Georgia, serif; font-weight: 400; line-height: 1.15; letter-spacing: .01em; }
.links a, .btn { font-family: "EdenCaps", "New Rocker", Georgia, serif; font-weight: 400; letter-spacing: .03em; }
/* Forged-metal headings: a warm ivory-to-bronze face with fine grain, and stacked shadows that
   extrude the letters downward like thick carved plates (filter shadows, since the face is a clipped background) */
h2, h3, .rule strong {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .1 0 0 0 0 .04 0 0 0 -1.6 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fff6ea 0%, #f7dfc0 38%, #e2ad78 60%, #b56a36 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 {
  filter:
    drop-shadow(0 1px 0 #7a3412) drop-shadow(0 1px 0 #642a0e) drop-shadow(0 1px 0 #4e200a)
    drop-shadow(0 1px 0 #3a1707) drop-shadow(0 2px 0 #260e04)
    drop-shadow(0 6px 8px rgba(0, 0, 0, .7)) drop-shadow(0 0 18px rgba(217, 83, 28, .18));
}
h3, .rule strong {
  filter: drop-shadow(0 1px 0 #6a2c0f) drop-shadow(0 1px 0 #4a1f09) drop-shadow(0 3px 4px rgba(0, 0, 0, .65));
}

/* ===== Background: nebula haze, magic sky canvas, coal bed glow, ash grain ===== */
#embers { position: fixed; inset: 0; z-index: -1; }
/* Two huge, very soft clouds of colored light that drift and slowly swap places */
.nebula { position: fixed; inset: -20%; z-index: -3; pointer-events: none; filter: blur(60px); }
.nebula::before, .nebula::after { content: ""; position: absolute; border-radius: 50%; }
.nebula::before {
  width: 55vmax; height: 40vmax; left: 5%; top: 10%;
  background: radial-gradient(closest-side, rgba(150, 28, 40, .32), rgba(90, 14, 50, .16) 55%, transparent);
  animation: drift-a 48s ease-in-out infinite alternate;
}
.nebula::after {
  width: 50vmax; height: 38vmax; right: 0; top: 35%;
  background: radial-gradient(closest-side, rgba(200, 95, 30, .22), rgba(110, 30, 70, .14) 55%, transparent);
  animation: drift-b 60s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate(18vw, 22vh) rotate(25deg) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-22vw, -18vh) rotate(-20deg) scale(.9); } }
.coals {
  position: fixed; left: 0; right: 0; bottom: 0; height: 55vh; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 60% at 18% 115%, rgba(217, 83, 28, .30), transparent 70%),
    radial-gradient(ellipse 40% 55% at 62% 120%, rgba(242, 122, 46, .22), transparent 70%),
    radial-gradient(ellipse 35% 45% at 88% 112%, rgba(122, 31, 11, .45), transparent 70%),
    radial-gradient(ellipse 60% 40% at 45% 130%, rgba(245, 168, 90, .14), transparent 70%);
  animation: breathe 7s ease-in-out infinite;
}
.ash {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes breathe {
  0%, 100% { opacity: .65; }
  30% { opacity: .9; }
  55% { opacity: .7; }
  75% { opacity: 1; }
}

/* ===== Smoldering glow, shared by every "hot" box ===== */
@keyframes smolder {
  0%, 100% { box-shadow: 0 0 0 1px rgba(217, 83, 28, .10), 0 0 14px rgba(217, 83, 28, .10), inset 0 0 18px rgba(122, 31, 11, .18); }
  18%      { box-shadow: 0 0 0 1px rgba(217, 83, 28, .18), 0 0 22px rgba(217, 83, 28, .18), inset 0 0 22px rgba(122, 31, 11, .25); }
  34%      { box-shadow: 0 0 0 1px rgba(217, 83, 28, .12), 0 0 16px rgba(217, 83, 28, .12), inset 0 0 18px rgba(122, 31, 11, .20); }
  62%      { box-shadow: 0 0 0 1px rgba(242, 122, 46, .24), 0 0 30px rgba(217, 83, 28, .24), inset 0 0 26px rgba(122, 31, 11, .30); }
  80%      { box-shadow: 0 0 0 1px rgba(217, 83, 28, .14), 0 0 18px rgba(217, 83, 28, .14), inset 0 0 20px rgba(122, 31, 11, .22); }
}
@keyframes crawl { to { --angle: 360deg; } }

.hot {
  position: relative;
  border: 1px solid rgba(122, 31, 11, .55);
  animation: smolder 5s ease-in-out infinite;
}
/* A slow hot spot crawls along the edge, like fire eating along a log */
.hot::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background:
    conic-gradient(from var(--angle), transparent 0 55%, rgba(217, 83, 28, .7) 68%, #ffe2bc 76%, var(--ember-hot) 80%, transparent 92%),
    linear-gradient(180deg, rgba(150, 40, 14, .6), rgba(217, 83, 28, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 3px rgba(242, 122, 46, .9)) drop-shadow(0 0 8px rgba(217, 83, 28, .6));
  animation: crawl 10s linear infinite;
  opacity: .85;
  transition: opacity .3s;
}
.hot:nth-child(2n)::before { animation-duration: 13s; animation-direction: reverse; }
.hot:nth-child(3n)::before { animation-duration: 16s; }
.hot:nth-child(2n) { animation-delay: -1.7s; animation-duration: 6s; }
.hot:nth-child(3n) { animation-delay: -3.1s; animation-duration: 7s; }
.hot:hover::before { opacity: 1; }
.hot:hover {
  box-shadow: 0 0 0 1px rgba(242, 122, 46, .35), 0 0 38px rgba(217, 83, 28, .35), inset 0 0 30px rgba(217, 83, 28, .15);
  animation-play-state: paused;
}

/* Neon boxes: the About cards, team cards and rules get a bright tube-like edge with a smooth, slow pulse */
@keyframes neon-box {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 176, 110, .55), 0 0 6px rgba(242, 122, 46, .65), 0 0 18px rgba(217, 83, 28, .45), 0 0 38px rgba(217, 83, 28, .22), inset 0 0 12px rgba(242, 122, 46, .2); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 196, 140, .8),  0 0 9px rgba(242, 122, 46, .85), 0 0 26px rgba(217, 83, 28, .6),  0 0 52px rgba(217, 83, 28, .3),  inset 0 0 18px rgba(242, 122, 46, .3); }
}
#about .card.hot, #team .card.hot, .rule.hot {
  border-color: rgba(242, 122, 46, .9);
  animation: neon-box 5s ease-in-out infinite;
}
.rule.hot:nth-child(2n) { animation-delay: -1.2s; }
.rule.hot:nth-child(3n), #about .card.hot:nth-child(2), #team .card.hot:nth-child(3) { animation-delay: -2.5s; }
#about .card.hot::before, #team .card.hot::before, .rule.hot::before {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(255, 200, 140, 1)) drop-shadow(0 0 10px rgba(242, 122, 46, .9));
}
#about .card.hot:hover, #team .card.hot:hover, .rule.hot:hover {
  animation-play-state: paused;
  box-shadow: 0 0 0 1px rgba(255, 210, 160, .95), 0 0 12px rgba(242, 122, 46, 1), 0 0 34px rgba(217, 83, 28, .75), 0 0 70px rgba(217, 83, 28, .4), inset 0 0 24px rgba(242, 122, 46, .35);
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ===== Nav ===== */
nav {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(14px);
  background: rgba(7, 4, 3, .72);
}
nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 83, 28, .6) 30%, rgba(245, 168, 90, .7) 50%, rgba(217, 83, 28, .6) 70%, transparent);
  box-shadow: 0 0 12px rgba(217, 83, 28, .5);
  animation: breathe 5s ease-in-out infinite;
}
nav .wrap { display: flex; align-items: center; justify-content: flex-end; height: 64px; }
.logo { font-family: "Space Grotesk"; font-weight: 700; font-size: 1.35rem; display: flex; gap: 8px; align-items: center; }
.logo {
  background: var(--lava-crust-sparse), var(--lava-molten);
  background-size: 180px 180px, 100% 140%;
  background-position: 70px 40px, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 3px rgba(242, 122, 46, .6)) drop-shadow(0 0 10px rgba(217, 83, 28, .45));
}
.logo span { color: var(--ember-hot); }
.links { display: flex; gap: 28px; align-items: center; }
.links a { color: var(--muted); font-size: .95rem; transition: color .2s, text-shadow .2s; }
.links a:hover { color: var(--ember-glow); text-shadow: 0 0 12px rgba(217, 83, 28, .7); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  transition: transform .2s, box-shadow .3s, background .2s;
}
@keyframes btn-smolder {
  0%, 100% { box-shadow: 0 0 14px rgba(217, 83, 28, .30), inset 0 1px 0 rgba(245, 168, 90, .35), inset 0 -6px 12px rgba(80, 15, 5, .5); }
  45%      { box-shadow: 0 0 24px rgba(217, 83, 28, .45), inset 0 1px 0 rgba(245, 168, 90, .45), inset 0 -6px 12px rgba(80, 15, 5, .4); }
  70%      { box-shadow: 0 0 18px rgba(217, 83, 28, .35), inset 0 1px 0 rgba(245, 168, 90, .35), inset 0 -6px 12px rgba(80, 15, 5, .5); }
}
/* Join buttons: a molten coal surface. Hot spots slowly drift, a gritty crust sits on top, and a heat shimmer sweeps across */
.btn-primary {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(255, 190, 120, .35);
  background:
    radial-gradient(circle at 22% 35%, rgba(255, 214, 150, .45), transparent 28%),
    radial-gradient(circle at 78% 65%, rgba(255, 180, 100, .35), transparent 32%),
    radial-gradient(circle at 55% 15%, rgba(255, 150, 70, .3), transparent 25%),
    radial-gradient(circle at 40% 85%, rgba(70, 12, 3, .55), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(70, 12, 3, .45), transparent 25%),
    linear-gradient(180deg, #e8732f 0%, var(--ember) 45%, #a3330e 100%);
  background-size: 220% 220%, 200% 200%, 240% 240%, 200% 200%, 220% 220%, 100% 100%;
  color: #fffaf4;
  /* Drop shadow that follows each letter: a solid dark copy set down-right, softened just beyond it */
  text-shadow:
    1px 1px 0 rgba(18, 3, 0, 1), 2px 2px 0 rgba(18, 3, 0, .95),
    3px 3px 3px rgba(10, 1, 0, .75), 0 0 2px rgba(18, 3, 0, .6);
  animation: btn-smolder 4s ease-in-out infinite, molten 9s ease-in-out infinite;
}
@keyframes molten {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 0%, 0% 100%, 100% 0%, 0 0; }
  50%      { background-position: 100% 60%, 0% 30%, 20% 100%, 80% 20%, 30% 90%, 0 0; }
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='.045 .09' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .08 0 0 0 0 .02 0 0 0 -2.2 1.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 228, 190, .35) 48%, rgba(255, 228, 190, .1) 55%, transparent 65%);
  transform: translateX(-120%);
  animation: shimmer 5s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
.btn-primary:hover {
  transform: translateY(-2px);
  animation: molten 9s ease-in-out infinite;
  box-shadow: 0 0 36px rgba(242, 122, 46, .55), 0 0 70px rgba(217, 83, 28, .25), inset 0 1px 0 rgba(245, 168, 90, .55);
}
.btn-ghost { border: 1px solid rgba(122, 31, 11, .8); color: var(--text); }
.btn-ghost:hover { border-color: var(--ember); box-shadow: 0 0 18px rgba(217, 83, 28, .3); }
.links .btn { padding: 8px 18px; color: #fff3e8; }

/* ===== Hero ===== */
.hero { padding: 130px 0 120px; text-align: center; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: rgba(17, 10, 7, .8);
  padding: 6px 14px; border-radius: 999px; font-size: .85rem; color: var(--muted);
  margin-bottom: 28px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember-hot); box-shadow: 0 0 10px var(--ember); animation: flicker 2.6s infinite; }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  12% { opacity: .55; }
  20% { opacity: .9; }
  48% { opacity: .4; }
  60% { opacity: 1; }
  82% { opacity: .7; }
}
/* Lava title: flowing molten rock inside the letters, with dark crust plates on top (see .crusty).
   The title paints the flowing lava; each letter span paints its crust on top. */
.hero h1 {
  position: relative; isolation: isolate;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3.4rem, 12vw, 8rem);
  letter-spacing: -0.04em;
  background: var(--lava-flow-hot), var(--lava-flow-dark), var(--lava-molten);
  background-size: 400px 400px, 400px 400px, 100% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: flow 30s linear infinite, title-glow 6s ease-in-out infinite;
}
/* Each letter carries an extra layer of crust plates, placed differently per letter */
.hero h1 .crusty {
  background: var(--lava-crust-extra), var(--lava-crust), var(--lava-rim);
  background-size: 360px 360px, 360px 360px, 360px 360px;
  background-position: 30% 20%, 50% 0, 50% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 .crusty:nth-child(2) { background-position: 70% 60%, 10% 40%, 10% 40%; }
.hero h1 .crusty:nth-child(3) { background-position: 15% 85%, 80% 25%, 80% 25%; }
.hero h1 .crusty:nth-child(4) { background-position: 90% 5%, 35% 70%, 35% 70%; }
@keyframes flow {
  from { background-position: 0 0, 0 0, 0 20%; }
  to   { background-position: 800px 400px, -800px 400px, 0 20%; }
}
/* The glow pulses inside the letters only: the molten parts brighten and dim, nothing spills outside */
@keyframes title-glow {
  0%, 100% { filter: brightness(1.08) saturate(1.1); }
  50%      { filter: brightness(1.28) saturate(1.2); }
}
.hero p { font-family: Inter, system-ui, sans-serif; color: var(--muted); font-size: 1.2rem; max-width: 560px; margin: 22px auto 38px; }
.hero .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ===== Sections ===== */
section { padding: 90px 0; }
.eyebrow {
  color: var(--ember-hot); font-weight: 600; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
  text-shadow: 0 0 12px rgba(217, 83, 28, .6);
}
.section-title { font-size: clamp(2rem, 5vw, 2.8rem); margin: 10px 0 14px; }
.section-sub { color: var(--muted); max-width: 560px; margin-bottom: 48px; }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-radius: var(--radius);
  padding: 28px;
}
.card .icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 70%, rgba(217, 83, 28, .35), rgba(122, 31, 11, .15) 60%, transparent);
  border: 1px solid rgba(217, 83, 28, .35);
  box-shadow: 0 0 14px rgba(217, 83, 28, .2);
  font-size: 1.4rem; margin-bottom: 18px;
}
.card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .95rem; }

/* ===== Rules ===== */
.rules { counter-reset: rule; display: grid; gap: 12px; margin-top: 36px; }
#about .grid { margin-top: 36px; }
.rule {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--surface); border-radius: 12px; padding: 18px 22px 18px 26px;
}
.rule::after {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--ember-deep), var(--ember-hot), var(--ember-deep));
  box-shadow: 0 0 12px var(--ember);
}
.rule > div::before {
  counter-increment: rule; content: counter(rule, decimal-leading-zero);
  font-family: "EdenCaps", "New Rocker", Georgia, serif; font-weight: 400; color: var(--ember-hot);
  text-shadow: 0 0 10px rgba(217, 83, 28, .8);
  position: absolute; left: 22px; top: 21px;
}
.rule > div { padding-left: 46px; }
.rule strong { display: block; font-family: "EdenCaps", "New Rocker", Georgia, serif; font-weight: 400; font-size: 1.2rem; letter-spacing: .01em; margin-bottom: 2px; }
.rule span { color: var(--muted); font-size: .93rem; }

/* ===== Team ===== */
.member { text-align: center; }
@keyframes coal {
  0%, 100% { box-shadow: 0 0 0 2px rgba(122, 31, 11, .9), 0 0 22px rgba(217, 83, 28, .35), inset 0 0 18px rgba(30, 6, 2, .9); }
  40%      { box-shadow: 0 0 0 2px rgba(217, 83, 28, .9), 0 0 34px rgba(217, 83, 28, .55), inset 0 0 14px rgba(30, 6, 2, .8); }
  65%      { box-shadow: 0 0 0 2px rgba(150, 40, 14, .9), 0 0 26px rgba(217, 83, 28, .4),  inset 0 0 18px rgba(30, 6, 2, .9); }
}
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 45%; }
.avatar {
  width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; font-family: "Space Grotesk"; font-weight: 700; font-size: 1.7rem;
  background: radial-gradient(circle at 50% 62%, #f0a050 0%, var(--ember) 30%, #8a2a0e 58%, #2a0904 85%);
  color: #fff1df; text-shadow: 0 0 12px rgba(255, 190, 120, .9);
  animation: coal 4.5s ease-in-out infinite;
}
.member:nth-child(2) .avatar { animation-delay: -2s; }
.role { color: var(--ember-hot); font-size: .85rem; font-weight: 600; text-shadow: 0 0 8px rgba(217, 83, 28, .5); }
.member .bio { margin-top: 12px; font-size: .92rem; line-height: 1.55; }

/* ===== FAQ ===== */
details {
  background: var(--surface); border-radius: 12px;
  padding: 18px 22px; margin-bottom: 12px;
}
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--ember-hot); font-size: 1.3rem; line-height: 1; text-shadow: 0 0 10px var(--ember); }
details[open] summary::after { content: "−"; }
details[open]::before { opacity: 1; }
details p { color: var(--muted); margin-top: 12px; }

/* ===== Call to action: a bed of coals ===== */
.cta {
  text-align: center; border-radius: 24px; padding: 80px 24px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 120%, rgba(217, 83, 28, .35), transparent 70%),
    radial-gradient(ellipse 40% 40% at 30% 115%, rgba(242, 122, 46, .2), transparent 70%),
    radial-gradient(ellipse 40% 40% at 72% 118%, rgba(122, 31, 11, .5), transparent 70%),
    var(--surface);
}
.cta h2 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 14px; }
.cta p { color: var(--muted); margin-bottom: 32px; }

footer { padding: 32px 0 100px; color: var(--muted); font-size: .9rem; position: relative; }   /* bottom room for the floating Join button */
footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 83, 28, .5), transparent);
}
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ===== Live chat (top of the page) ===== */
.chat {
  max-width: 640px; margin: 0 auto; text-align: left;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(24, 13, 9, .92), rgba(17, 10, 7, .92));
  backdrop-filter: blur(6px);
  border-color: rgba(242, 122, 46, .9);
  animation: neon-box 5s ease-in-out infinite;
}
.chat::before { opacity: 1; filter: drop-shadow(0 0 3px rgba(255, 200, 140, 1)) drop-shadow(0 0 10px rgba(242, 122, 46, .9)); }
.chat:hover { animation-play-state: running; }
.chat-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid rgba(122, 31, 11, .6);
  font-family: Inter, system-ui, sans-serif; font-size: .9rem;
}
.chat-head strong { font-family: "EdenCaps", "New Rocker", Georgia, serif; font-weight: 400; font-size: 1.1rem; color: var(--ember-glow); letter-spacing: .03em; }
.chat-head .dot.off { background: #6b5a52; box-shadow: none; animation: none; }
.chat-status { color: var(--muted); font-size: .8rem; }
.chat-me { margin-left: auto; color: var(--muted); font-size: .8rem; }
.chat-me b { color: var(--ember-hot); font-weight: 600; }
.chat-log {
  height: 260px; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px;
  font-family: Inter, system-ui, sans-serif; font-size: .92rem; line-height: 1.45;
  scrollbar-width: thin; scrollbar-color: rgba(217, 83, 28, .6) transparent;
}
.msg { display: flex; gap: 10px; align-items: flex-start; animation: msg-in .25s ease-out; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }
.msg .av {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #f0a050, var(--ember) 55%, #6a1c08);
  color: #fff3e8; font-size: .8rem; font-weight: 700; object-fit: cover;
}
.msg .body { min-width: 0; }
.msg .who { font-weight: 600; color: var(--ember-hot); margin-right: 6px; }
.msg .tag {
  font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px;
  padding: 1px 6px; border-radius: 4px; background: #5865f2; color: #fff; margin-right: 6px;
}
.msg .time { color: #6f5d54; font-size: .72rem; }
.msg .text { color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.msg.mine .who { color: var(--ember-glow); }
.msg.discord .av { background: #2b2d31; }
.chat-notice { text-align: center; color: var(--muted); font-size: .8rem; font-style: italic; }
.chat-form { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid rgba(122, 31, 11, .6); }
.chat-form input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: 999px;
  background: rgba(7, 4, 3, .8); border: 1px solid rgba(122, 31, 11, .9); color: var(--text);
  font: inherit; font-family: Inter, system-ui, sans-serif; font-size: .92rem; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.chat-form input:focus { border-color: var(--ember-hot); box-shadow: 0 0 14px rgba(217, 83, 28, .35); }
.chat-form .btn { padding: 10px 20px; }
.chat-form :disabled { opacity: .55; cursor: not-allowed; }

/* ===== Floating Join button, pinned to the bottom-right while you scroll ===== */
.float-join {
  position: fixed; right: 24px; bottom: 24px; z-index: 30;
  padding: 14px 22px; font-size: 1rem;
}
@media (max-width: 720px) {
  .float-join { right: 14px; bottom: 14px; padding: 13px; }
  .float-join span { display: none; }
  .chat-log { height: 230px; }
  .chat-me { display: none; }
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .links { gap: 18px; }
  .links a { font-size: .85rem; }
  .hero { padding: 90px 0 80px; }
  section { padding: 64px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== Multi-page bits ===== */
.links a.active { color: var(--ember-glow); text-shadow: 0 0 12px rgba(217, 83, 28, .7); }
.links a.active::after {
  content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ember-hot), transparent);
  box-shadow: 0 0 8px var(--ember);
}
section.page { padding-top: 70px; min-height: calc(100vh - 200px); }
@media (max-width: 720px) {
  nav .wrap { justify-content: center; }
  .links { gap: 14px; flex-wrap: wrap; justify-content: center; padding: 6px 0; }
  .links a { font-size: .8rem; }
  nav .wrap { height: auto; min-height: 56px; }
}

/* ===== Updates feed ===== */
.feed { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.feed-empty { color: var(--muted); }
.post {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); border-radius: 16px; padding: 20px 22px;
  border-color: rgba(242, 122, 46, .9); animation: neon-box 5s ease-in-out infinite;
}
.post::before { opacity: 1; filter: drop-shadow(0 0 3px rgba(255, 200, 140, 1)) drop-shadow(0 0 10px rgba(242, 122, 46, .9)); }
.post:nth-child(2n) { animation-delay: -2.5s; }
.post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.post-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.post-head b { color: var(--ember-glow); font-weight: 600; display: block; }
.post-head time { color: var(--muted); font-size: .85rem; }
.post-body { color: var(--text); line-height: 1.6; overflow-wrap: anywhere; }
.post-body h3, .post-body h4, .post-body h5 { margin: 14px 0 6px; }
.post-body h3 { font-size: 1.5rem; }
.post-body h4 { font-size: 1.25rem; }
.post-body h5 { font-size: 1.05rem; }
.post-body p { margin: 0 0 8px; }
.post-body ul { margin: 4px 0 10px 22px; }
.post-body blockquote { border-left: 3px solid rgba(217, 83, 28, .7); padding-left: 12px; color: var(--muted); margin: 8px 0; }
.post-body a { color: var(--ember-hot); text-decoration: underline; }
.post-body code { background: rgba(0, 0, 0, .4); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.post-body .emoji { width: 1.35em; height: 1.35em; vertical-align: -0.3em; object-fit: contain; }
.post-body .mention { color: #c9cdfb; background: rgba(88, 101, 242, .25); padding: 0 3px; border-radius: 3px; }
.post-embed {
  margin-top: 12px; border-left: 4px solid var(--ember-hot); background: rgba(0, 0, 0, .3);
  border-radius: 0 8px 8px 0; padding: 12px 16px;
}
.post-embed .e-title { font-weight: 700; color: #fff3e8; font-size: 1.1rem; margin-bottom: 6px; }
.post-embed .e-footer { color: var(--muted); font-size: .8rem; margin-top: 10px; }
.post-img { display: block; max-width: 100%; max-height: 420px; border-radius: 10px; margin-top: 12px; }

/* ===== Leaderboard ===== */
.board { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.rank-row {
  display: grid; grid-template-columns: 54px 52px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  background: var(--surface); border-radius: 14px; padding: 12px 18px;
}
.rank-row .place { font-family: "EdenCaps", "New Rocker", Georgia, serif; font-size: 1.6rem; color: var(--ember-hot); text-align: center; text-shadow: 0 0 10px rgba(217, 83, 28, .6); }
.rank-row img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(242, 122, 46, .7), 0 0 14px rgba(217, 83, 28, .5); }
.rank-row .name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row .bar { height: 8px; border-radius: 6px; background: rgba(60, 25, 15, .9); margin-top: 8px; overflow: hidden; }
.rank-row .bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #c2361b, #f27a2e, #f2b33d); box-shadow: 0 0 10px rgba(242, 122, 46, .7); }
.rank-row .xp { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.rank-row .lvl { text-align: right; }
.rank-row .lvl b { display: block; font-family: "EdenCaps", "New Rocker", Georgia, serif; font-weight: 400; font-size: 1.7rem; color: #f2b33d; line-height: 1; }
.rank-row .lvl small { color: var(--muted); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.rank-row.top { border-color: rgba(242, 122, 46, .9); animation: neon-box 5s ease-in-out infinite; }
.rank-row.top::before { opacity: 1; }
.board-note { color: var(--muted); font-size: .85rem; margin-top: 16px; }
@media (max-width: 720px) {
  .rank-row { grid-template-columns: 34px 42px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .rank-row img { width: 42px; height: 42px; }
  .rank-row .place { font-size: 1.2rem; }
}
.rank-row.top .place { font-family: system-ui, sans-serif; font-size: 2.1rem; text-shadow: none; }
@media (max-width: 720px) { .rank-row.top .place { font-size: 1.6rem; } }

/* Team: four across on desktop, two on tablets, one on phones */
.team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#team .card.hot:nth-child(4) { animation-delay: -3.7s; }
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

/* Chat messages fade out one by one; an empty chat shows a friendly prompt */
.msg.gone, .chat-notice.gone { opacity: 0; transform: translateY(-6px); transition: opacity 1.2s ease, transform 1.2s ease; }
.chat-log:empty::before {
  content: "Say hi or ask a question. Messages fade after 30 seconds."; margin: auto; text-align: center;
  color: var(--muted); font-size: .85rem; font-style: italic; opacity: .8;
}

/* The Discord logo on Join buttons gets the same dark edge as the text */
.btn-primary svg { filter: drop-shadow(2px 2px 0 rgba(18, 3, 0, .95)) drop-shadow(3px 3px 3px rgba(10, 1, 0, .7)); }

/* ===== Quality dropdown (top-left of the nav) ===== */
nav .wrap { justify-content: space-between; gap: 16px; }
.quality {
  display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .85rem;
  font-family: "EdenCaps", "New Rocker", Georgia, serif; letter-spacing: .03em; cursor: pointer;
}
.quality > span[aria-hidden] { color: var(--ember-hot); text-shadow: 0 0 8px rgba(217, 83, 28, .7); }
.quality select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: rgba(17, 10, 7, .85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f27a2e' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--text); border: 1px solid rgba(122, 31, 11, .9); border-radius: 999px;
  padding: 5px 28px 5px 12px; font: inherit; font-family: Inter, system-ui, sans-serif; font-size: .8rem;
  transition: border-color .2s, box-shadow .2s;
}
.quality select:hover, .quality select:focus { border-color: var(--ember-hot); box-shadow: 0 0 12px rgba(217, 83, 28, .35); outline: none; }
.quality option { background: #140b08; color: var(--text); }
@media (max-width: 720px) {
  nav .wrap { flex-direction: column; gap: 4px; padding-top: 6px; padding-bottom: 4px; }
  .quality-text { display: none; }
}

/* ===== Medium: steady glows instead of pulsing ones, no glass blur ===== */
html[data-quality="medium"] nav, html[data-quality="low"] nav { backdrop-filter: none; background: rgba(7, 4, 3, .92); }
html[data-quality="medium"] .chat, html[data-quality="low"] .chat { backdrop-filter: none; }
html[data-quality="medium"] .hot, html[data-quality="low"] .hot,
html[data-quality="medium"] .btn-primary, html[data-quality="low"] .btn-primary {
  animation: none !important;   /* wins over the more specific neon-card rules */
}
html[data-quality="medium"] .hot, html[data-quality="low"] .hot {
  box-shadow: 0 0 0 1px rgba(255, 176, 110, .5), 0 0 6px rgba(242, 122, 46, .6), 0 0 18px rgba(217, 83, 28, .4);
}
html[data-quality="medium"] .btn-primary, html[data-quality="low"] .btn-primary {
  box-shadow: 0 0 18px rgba(217, 83, 28, .4), inset 0 1px 0 rgba(245, 168, 90, .4), inset 0 -6px 12px rgba(80, 15, 5, .45);
}
html[data-quality="medium"] .nebula > *, html[data-quality="low"] .nebula > * { animation-play-state: paused; }

/* ===== Low: everything held still, lightest possible ===== */
html[data-quality="low"] .hot::before { animation: none !important; }
html[data-quality="low"] .btn-primary::after { animation: none; display: none; }
html[data-quality="low"] .hero h1 { animation: none; filter: brightness(1.18) saturate(1.1); }
html[data-quality="low"] nav::after, html[data-quality="low"] .coals, html[data-quality="low"] .coals * { animation: none; }
html[data-quality="low"] .nebula { filter: blur(40px); }