/* Glutfront – Webseite. Idee: ein Schnitt durch Kaldera. Oben die Oberfläche mit dem Spiel,
   darunter Gesteinsschichten, die beim Scrollen tiefer, dunkler und wärmer werden, ganz unten die Glut. */

@font-face { font-family: 'Silkscreen'; src: url(/fonts/silkscreen-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url(/fonts/chakra-petch-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url(/fonts/chakra-petch-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root {
  /* Schichten von oben nach unten */
  --kruste: #3a332c;     /* erkaltete Kruste, direkt unter dem Moos */
  --basalt: #2c2622;
  --tiefe: #231c18;
  --mantel: #1f1612;
  --glut-dunkel: #4a1a0c;
  --glut: #ff8a2b;       /* glühendes Gestein */
  --kern: #ffd9a3;       /* weißglühend */
  --erz: #c0612f;        /* Erzbrocken */
  --text: #ece3d6;       /* Asche, hell */
  --text-leise: #b9ad9c;
  --step: 16px;          /* Höhe der Pixelkante zwischen Schichten */
  --spalte: 40rem;
  --inhalt: 72rem;
  --seite: max(16px, 4vw);
  --rand: max(var(--seite), calc((100% - var(--inhalt)) / 2)); /* Inhalt mittig, Text darin linksbündig */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--mantel); color: var(--text);
  font: 400 1.0625rem/1.6 'Chakra Petch', system-ui, sans-serif;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--kern); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--glut); outline-offset: 3px; }

h1, h2, h3 { font-family: 'Silkscreen', monospace; font-weight: 400; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); color: var(--kern); margin-bottom: 0.9rem; }
h3 { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--text); margin-bottom: 0.35rem; }
p { margin: 0 0 1rem; }

/* Pixel-Symbole (12 × 12) */
.ico { width: 28px; height: 28px; fill: var(--glut); flex: none; }

/* ---------- Musik-Schalter (immer erreichbar) ---------- */
.musik {
  position: fixed; top: 12px; right: 12px; z-index: 20;
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.8rem; min-height: 40px;
  font: 600 0.95rem/1 'Chakra Petch', sans-serif; color: var(--kern);
  background: rgba(31, 22, 18, 0.88); border: 2px solid var(--erz); border-radius: 0; cursor: pointer;
}
.musik[hidden] { display: none; }
.musik:hover { color: #fff; border-color: var(--glut); }
.musik.aus { color: var(--text-leise); border-color: #5a4c40; }
.musik.wartet { animation: ruf 1.8s ease-in-out infinite; }
@keyframes ruf { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 43, 0); } 50% { box-shadow: 0 0 0 4px rgba(255, 138, 43, 0.35); } }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 13px; height: 14px; }
.eq i { width: 3px; height: 45%; background: currentColor; }
.eq i:nth-child(2) { height: 85%; }
.eq i:nth-child(3) { height: 65%; }
.musik.aus .eq i { height: 20%; }
.musik.spielt .eq i { animation: eq 0.9s steps(4) infinite; }
.musik.spielt .eq i:nth-child(2) { animation-delay: -0.3s; }
.musik.spielt .eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* ---------- Kopf: auf einen Blick, worum es geht ---------- */
.hero {
  position: relative;
  padding: clamp(3.5rem, 8vh, 5.5rem) var(--rand) calc(3rem + var(--step));
  background: radial-gradient(60rem 32rem at 80% 60%, rgba(255, 138, 43, 0.16), transparent 70%), var(--kruste);
}
.hero-in {
  display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
  grid-template-areas: "title title" "lead device" "rest device";
  grid-template-rows: auto auto 1fr; column-gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
.hero-title { grid-area: title; margin-bottom: 1.6rem; }
.eyebrow { color: var(--glut); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.95rem; margin-bottom: 0.6rem; }
.hero h1 {
  font-size: clamp(2.7rem, 1rem + 7vw, 6.5rem); color: var(--kern); letter-spacing: 0.02em;
  /* harte Pixel-Schatten wie bei einem glühenden Block */
  text-shadow: 0.06em 0.06em 0 var(--glut), 0.12em 0.12em 0 var(--glut-dunkel);
}
.lead { grid-area: lead; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.45; max-width: 30ch; margin-bottom: 1.6rem; }
.hero-rest { grid-area: rest; }
.pledges { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 0.9rem; }
.pledges li { display: flex; gap: 0.9rem; align-items: center; }
.pledges strong { display: block; font-weight: 600; font-size: 1.1rem; line-height: 1.25; color: var(--text); }
.pledges span { color: var(--text-leise); line-height: 1.35; }
.status { color: var(--text-leise); margin: 0; }
.status strong { color: var(--kern); font-weight: 600; }

.device { grid-area: device; margin: 0; align-self: center; }
.device-frame {
  background: #0e0b09; border-radius: clamp(14px, 2.2vw, 28px);
  padding: clamp(6px, 1vw, 12px) clamp(10px, 1.8vw, 22px);
  box-shadow: inset 0 0 0 2px #3d342d, 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 90px rgba(255, 138, 43, 0.14);
}
.device-frame img { width: 100%; border-radius: clamp(4px, 0.8vw, 10px); }
.device figcaption { color: var(--text-leise); font-size: 0.9rem; margin-top: 0.7rem; text-align: center; }

@media (max-width: 860px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lead" "device" "rest"; grid-template-rows: none; }
  .hero-title { margin-bottom: 1rem; }
  .lead { margin-bottom: 1.4rem; }
  .device { margin-bottom: 1.8rem; }
}

/* ---------- Schichten mit gestufter Pixelkante ---------- */
.layer { position: relative; padding: calc(3rem + var(--step)) var(--rand) 3.5rem; }
.layer::before {
  content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * var(--step) + 1px); height: var(--step);
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M0 16V8h8V4h8v4h8V0h8v6h8V2h8v8h8V4h8v4h8V0h8v6h8V2h8v14z'/%3E%3C/svg%3E") repeat-x 0 0 / 96px 16px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M0 16V8h8V4h8v4h8V0h8v6h8V2h8v8h8V4h8v4h8V0h8v6h8V2h8v14z'/%3E%3C/svg%3E") repeat-x 0 0 / 96px 16px;
}
.layer.l1 { background: var(--basalt); }
.layer.l2 { background: #271f1b; }
.layer.l3 { background: var(--tiefe); }
.layer.l4 { background: #211814; }
.layer.l5 { background: var(--mantel); }
.layer.l6 { background: #2a1610; }
.layer.l7 { background: #34170d; }
.layer > * { max-width: var(--spalte); }
.layer > .wide, .layer > h2 { max-width: none; }
.layer > .wide-shot { max-width: 52rem; }
.layer.l2::before { -webkit-mask-position: 40px 0; mask-position: 40px 0; }
.layer.l3::before { -webkit-mask-position: 72px 0; mask-position: 72px 0; }
.layer.l4::before { -webkit-mask-position: 24px 0; mask-position: 24px 0; }
.layer.l5::before { -webkit-mask-position: 56px 0; mask-position: 56px 0; }
.layer.l6::before { -webkit-mask-position: 8px 0; mask-position: 8px 0; }
.layer.l7::before { -webkit-mask-position: 88px 0; mask-position: 88px 0; }

/* ---------- Ohne Haken ---------- */
.intro { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; color: var(--text-leise); }
.promise-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.75rem; }
.promise { background: rgba(0, 0, 0, 0.2); border: 2px solid #4a3f36; padding: 1.3rem 1.25rem 1.2rem; }
.promise .ico { width: 36px; height: 36px; margin-bottom: 0.9rem; }
.promise h3 { margin-bottom: 0.45rem; }
.promise p { color: var(--text-leise); margin: 0; }
@media (max-width: 1000px) { .promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .promise-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Fraktionen: zwei Seiten, durch eine Naht getrennt ---------- */
.factions { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 2rem; max-width: 52rem; }
.faction { padding: 0 1.5rem 0 0; }
.faction + .faction { padding: 0 0 0 1.5rem; border-left: 4px solid var(--kruste); }
.faction .motto { color: var(--erz); font-weight: 600; margin-bottom: 0.5rem; }
.faction.mk .motto { color: #7fb4c9; }
.faction p { color: var(--text-leise); }
@media (max-width: 640px) {
  .factions { grid-template-columns: 1fr; }
  .faction { padding: 0; }
  .faction + .faction { padding: 1.5rem 0 0; border-left: 0; border-top: 4px solid var(--kruste); margin-top: 1.5rem; }
}

/* ---------- Spielaufbau ---------- */
.setup-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; margin-top: 1.5rem; }
.setup-shot { margin: 0; }
.setup-shot img { width: 100%; border: 4px solid #000; }
.doing { list-style: none; padding: 0; margin: 0; }
.doing li { padding-left: 1.4rem; position: relative; margin-bottom: 0.85rem; color: var(--text-leise); }
.doing li strong { color: var(--text); font-weight: 600; }
.doing li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; background: var(--erz); }
figcaption { color: var(--text-leise); font-size: 0.95rem; margin-top: 0.5rem; max-width: 46ch; }
@media (max-width: 860px) { .setup-split { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } }

/* ---------- Was schon drin ist ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 2.25rem; margin: 1.75rem 0 2.75rem; }
.feature { border-top: 4px solid var(--erz); padding-top: 0.9rem; }
.feature .kick { font-family: 'Silkscreen', monospace; font-size: 2.1rem; line-height: 1; color: var(--glut); margin-bottom: 0.55rem; }
.feature p:last-child { color: var(--text-leise); margin: 0; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
.wide-shot { margin: 0; max-width: 52rem; }
.wide-shot img { width: 100%; border: 4px solid #000; }

/* ---------- Helden ---------- */
.heroes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2rem; margin: 1.5rem 0 1rem; max-width: 52rem; }
.heroes dt { font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.heroes dt small { font-family: 'Chakra Petch', sans-serif; font-size: 0.9rem; color: var(--glut); font-weight: 600; display: block; margin-top: 0.2rem; }
.heroes dd { margin: 0.35rem 0 0; color: var(--text-leise); }
@media (max-width: 640px) { .heroes { grid-template-columns: 1fr; } }

/* ---------- Klimazonen ---------- */
.biomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.biomes figure { margin: 0; }
.biomes img { width: 100%; border: 4px solid #000; }
.biomes h3 { margin-top: 0.8rem; }
.biomes p { color: var(--text-leise); font-size: 0.95rem; }
@media (max-width: 820px) { .biomes { grid-template-columns: 1fr; max-width: 40rem; } }

/* ---------- Von Fans für Fans ---------- */
.fans { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); line-height: 1.5; }

/* ---------- Glut (Fuß) ---------- */
.core {
  position: relative; padding: calc(3.5rem + var(--step)) var(--rand) 2.5rem;
  background: linear-gradient(180deg, #5a200d 0%, #9a3a12 45%, #e0661f 100%);
  color: #fff3e2;
}
.core::before {
  content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * var(--step) + 1px); height: var(--step);
  background: #5a200d;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M0 16V6h8V2h8v8h8V4h8v4h8V0h8v8h8V4h8v4h8V2h8v6h8V0h8v16z'/%3E%3C/svg%3E") repeat-x 0 0 / 96px 16px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M0 16V6h8V2h8v8h8V4h8v4h8V0h8v8h8V4h8v4h8V2h8v6h8V0h8v16z'/%3E%3C/svg%3E") repeat-x 0 0 / 96px 16px;
}
.core .rumor { font-weight: 600; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.4; max-width: 32ch; color: var(--kern); margin-bottom: 2.5rem; text-shadow: 0 0 18px rgba(255, 170, 80, 0.45); }
.core a { color: #fff; }
.foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.95rem; color: #ffe6cc; }
.foot .copy { margin-left: auto; }
@media (max-width: 520px) { .foot .copy { margin-left: 0; width: 100%; } }

/* ---------- Unterseite Rechtliches ---------- */
.legal-page { background: var(--basalt); }
.legal-head { padding: 1.25rem var(--seite); background: var(--kruste); }
.legal-head .home { font-family: 'Silkscreen', monospace; font-size: 1.5rem; color: var(--kern); text-decoration: none; }
.legal-body { padding: 2rem var(--seite) 3rem; max-width: calc(var(--spalte) + 2 * var(--seite) + 4rem); }
.legal-body h2 { margin-bottom: 1.5rem; }
.legal-body h3 { color: var(--glut); margin: 2.2rem 0 0.8rem; font-size: 1.35rem; scroll-margin-top: 1rem; }
.legal-body p { color: var(--text); }
.legal-body .muted { color: var(--text-leise); font-size: 0.9rem; }
.legal-body .todo { color: #ff6a50; font-weight: 600; }
.legal-body details { margin-top: 1rem; }
.legal-body summary { cursor: pointer; color: var(--kern); }
.legal-body pre { white-space: pre-wrap; font-size: 0.75rem; line-height: 1.45; background: var(--mantel); padding: 1rem; overflow-x: auto; }
.legal-foot { padding: 1.5rem var(--seite) 2.5rem; background: var(--mantel); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .musik.spielt .eq i, .musik.wartet { animation: none; }
}