/* 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;
  --schrift: 'Chakra Petch', system-ui, sans-serif;
  --pixel: 'Silkscreen', monospace;
  --step: 16px;          /* Höhe der Pixelkante zwischen Schichten */
  --spalte: 40rem;
  --inhalt: 72rem;
  --rand: max(16px, 4vw, (100% - var(--inhalt)) / 2); /* Inhalt mittig, Text darin linksbündig */
  /* gestufte Oberkante einer Schicht (96 × 16 Pixel, wiederholt) */
  --kante: 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");
}

* { 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 var(--schrift); }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
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 { font-family: var(--pixel); 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; text-wrap: balance; }
h3 { font-weight: 600; font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.35rem; }
p { margin: 0 0 1rem; }

/* gedämpfter Begleittext */
.pledges span, .status, figcaption, .intro, .promise p, .faction p, .doing li, .feature p:last-child, .heroes dd, .biomes p, .legal-body .muted { color: var(--text-leise); }
/* Spielszenen mit schwarzem Rahmen */
.setup-shot img, .wide-shot img, .biomes img { width: 100%; border: 4px solid #000; }
figcaption { font-size: 0.95rem; margin-top: 0.5rem; max-width: 46ch; }

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

/* ---------- Musik-Schalter (immer erreichbar, wird von js/seite.js eingefügt) ---------- */
.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 var(--schrift); color: var(--kern);
  background: rgba(31, 22, 18, 0.88); border: 2px solid var(--erz); border-radius: 0; cursor: pointer;
}
.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 { 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%; --d: -0.3s; }
.eq i:nth-child(3) { height: 65%; --d: -0.6s; }
.musik.aus .eq i { height: 20%; }
.musik.spielt .eq i { animation: eq 0.9s steps(4) var(--d, 0s) infinite; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* ---------- Kopf: auf einen Blick, worum es geht ---------- */
.hero {
  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, 1fr); grid-template-areas: "title" "lead" "device" "rest"; column-gap: clamp(2rem, 4vw, 4rem); }
.hero-title { grid-area: title; margin-bottom: 1rem; }
.eyebrow { color: var(--glut); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.95rem; margin-bottom: 0.6rem; text-wrap: balance; }
.hero h1 {
  font-size: min(clamp(2.7rem, 1rem + 7vw, 6.5rem), 17vh); 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.4rem; }
.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; }
.pledges span { line-height: 1.35; }
.status { margin: 0; }
.status strong { color: var(--kern); font-weight: 600; }

.device { grid-area: device; margin-bottom: 1.8rem; }
.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 { font-size: 0.9rem; margin: 0.7rem auto 0; text-align: center; }

/* zweispaltig ab Laptop/Tablet quer und auf Handys im Querformat */
@media (min-width: 861px), (min-width: 600px) and (orientation: landscape) {
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "title title" "lead device" "rest device"; grid-template-rows: auto auto 1fr; }
  .hero-title, .lead { margin-bottom: 1.6rem; }
  .device { align-self: center; margin-bottom: 0; }
}
@media (min-width: 1200px) { .hero-in { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); } }
@media (orientation: landscape) and (max-height: 500px) {
  .device { align-self: start; }
  .hero-title, .lead { margin-bottom: 1rem; }
  .lead { font-size: 1.05rem; }
}

/* ---------- Schichten mit gestufter Pixelkante ---------- */
.layer, .core { position: relative; padding: calc(3rem + var(--step)) var(--rand) 3.5rem; }
.layer::before, .core::before {
  content: ''; position: absolute; left: 0; right: 0; top: calc(1px - var(--step)); height: var(--step);
  background: inherit;
  -webkit-mask: var(--kante) repeat-x var(--kante-x, 0) 0 / 96px var(--step);
          mask: var(--kante) repeat-x var(--kante-x, 0) 0 / 96px var(--step);
}
.l1 { background: var(--basalt); }
.l2 { background: #271f1b; --kante-x: 40px; }
.l3 { background: var(--tiefe); --kante-x: 72px; }
.l4 { background: #211814; --kante-x: 24px; }
.l5 { background: var(--mantel); --kante-x: 56px; }
.l6 { background: #2a1610; --kante-x: 8px; }
.l7 { background: #34170d; --kante-x: 88px; }
.layer > * { max-width: var(--spalte); }
.layer > .wide, .layer > h2 { max-width: none; }
.layer > .wide-shot { max-width: 52rem; }

/* gleich breite Spalten; --n je Raster, auf schmalen Bildschirmen weniger */
.promise-grid, .feature-grid, .heroes, .biomes { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }

/* ---------- Ohne Haken ---------- */
.intro { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; }
.promise-grid { --n: 4; 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 { margin: 0; }

/* ---------- Fraktionen: zwei Seiten, durch eine Naht getrennt ---------- */
.factions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 2rem; max-width: 52rem; }
.faction { padding-right: 1.5rem; }
.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; }

/* ---------- 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; }
.doing { list-style: none; padding: 0; margin: 0; }
.doing li { padding-left: 1.4rem; position: relative; margin-bottom: 0.85rem; }
.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); }

/* ---------- Was schon drin ist ---------- */
.feature-grid { --n: 3; 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: var(--pixel); font-size: 2.1rem; line-height: 1; color: var(--glut); margin-bottom: 0.55rem; }
.feature p:last-child { margin: 0; }

/* ---------- Helden ---------- */
.heroes { --n: 2; 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 { display: block; margin-top: 0.2rem; font-size: 0.9rem; color: var(--glut); }
.heroes dd { margin: 0.35rem 0 0; }

/* ---------- Klimazonen ---------- */
.biomes { --n: 3; gap: 1.25rem; margin-top: 1.5rem; }
.biomes h3 { margin-top: 0.8rem; }
.biomes p { font-size: 0.95rem; }

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

/* ---------- Glut (Fuß) ---------- */
.core {
  --kante: 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");
  padding-top: calc(3.5rem + var(--step)); padding-bottom: 2.5rem; color: #fff3e2;
  background: linear-gradient(180deg, #5a200d 0%, #9a3a12 45%, #e0661f 100%);
}
.core::before { background: #5a200d; }
.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: 2rem; text-shadow: 0 0 18px rgba(255, 170, 80, 0.45); }
.core a { color: #fff; }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; font-size: 0.95rem; color: #ffe6cc; }
.foot .copy { margin-left: auto; }
.foot a, .legal-foot a { display: inline-block; padding: 0.6rem 0; } /* Tippfläche */

/* ---------- Unterseiten Rechtliches und 404 ---------- */
.legal-page { background: var(--basalt); }
.legal-head, .legal-body, .legal-foot { padding-left: var(--rand); padding-right: var(--rand); }
.legal-head { padding-top: 1.25rem; padding-bottom: 1.25rem; background: var(--kruste); }
.legal-head .home { font-family: var(--pixel); font-size: 1.5rem; color: var(--kern); text-decoration: none; }
.legal-body { padding-top: 2rem; padding-bottom: 3rem; }
.legal-body > * { max-width: calc(var(--spalte) + 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 .muted { 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-top: 1rem; padding-bottom: 2rem; background: var(--mantel); }

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width: 1100px) { .promise-grid { --n: 2; } }
@media (max-width: 860px) { .setup-split { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } }
@media (max-width: 699px) { .feature-grid { --n: 2; } }
@media (max-width: 640px) {
  .heroes, .biomes { --n: 1; }
  .biomes { max-width: 40rem; }
  .factions { grid-template-columns: 1fr; }
  .faction { padding: 0; }
  .faction + .faction { padding: 1.5rem 0 0; margin-top: 1.5rem; border-left: 0; border-top: 4px solid var(--kruste); }
}
/* Handy hochkant: kompaktere Karten und Abstände */
@media (max-width: 560px) {
  .promise-grid, .feature-grid { --n: 1; }
  .layer { padding-top: calc(2.25rem + var(--step)); padding-bottom: 2.5rem; }
  .promise { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; align-items: center; }
  .promise .ico { width: 32px; height: 32px; margin: 0; }
  .promise h3 { margin: 0; }
  .promise p { grid-column: 1 / -1; margin-top: 0.6rem; }
  .feature { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; }
  .feature .kick { font-size: 1.6rem; }
  .feature p:last-child { flex-basis: 100%; }
  .foot .copy { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) { .musik.spielt .eq i, .musik.wartet { animation: none; } }