/* =============================================================
   Neverrock — Shared Design Tokens + Navbar
   ============================================================= */

@font-face {
  font-family: "MinecraftTen";
  src: url("../assets/Clash Legacy Logo/fonts/MinecraftTen.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* Version 2: Now includes German umlauts (ä ö ü Ä Ö Ü ß).
     The ?v=2 cache-bust forces browsers to re-download the file
     instead of using a cached copy without umlauts.
     NUR NOCH für Akzente/Retro-Details — nicht mehr für Fließtext. */
  font-family: "Minecraft";
  src: url("../assets/Clash Legacy Logo/fonts/Minecraft.ttf?v=2") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------
   FLIESSTEXT: Manrope (SIL Open Font License)
   -------------------------------------------------------------
   Warum nicht mehr die Minecraft-Schrift für Fließtext?
   Deren x-Höhe liegt bei 31 % der em-Größe, bei normalen
   Textschriften sind es 52-55 %. Dadurch wirkte 22px-Text wie
   13px. Manrope liegt bei 54 % -> gleicher px-Wert, deutlich
   lesbarer, besonders auf dem Handy.

   Lokal gehostet (nicht über Google Fonts CDN): Das Einbinden
   per CDN überträgt Besucher-IPs an Google und gilt in
   Deutschland als DSGVO-Verstoß.

   Dateien sind auf Latin + Umlaute reduziert: 670 KB -> 42 KB.
   ------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  src: url("../assets/Fonts/webfonts/Manrope-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/Fonts/webfonts/Manrope-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/Fonts/webfonts/Manrope-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/Fonts/webfonts/Manrope-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/Fonts/webfonts/Manrope-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ---- BRAND ---- */
  --brand-nether-900: #2a0a0a;
  --brand-nether-800: #3d0f10;
  --brand-nether-700: #5a1516;
  --brand-nether-600: #7a1d1d;
  --brand-nether-500: #9b2a27;
  --brand-nether-400: #c0413a;
  --brand-nether-300: #e36b5a;

  --brand-spirit-50:  #f7f5f1;
  --brand-spirit-100: #e8e4dc;
  --brand-spirit-200: #cfc9bf;
  --brand-spirit-300: #a8a198;

  --mc-grass:   #5d9e3a;
  --mc-leaf:    #3b7a22;
  --mc-dirt:    #8b5a3c;
  --mc-stone:   #7f7f7f;
  --mc-cobble:  #5c5c5c;
  --mc-bedrock: #1d1d1d;
  --mc-gold:    #f5c242;
  --mc-gold-dk: #c79412;
  --mc-diamond: #49c2d6;
  --mc-emerald: #2ea44f;
  --mc-redstone:#e23b3b;
  --mc-lapis:   #3a5bb5;
  --mc-obsidian:#1a1126;
  --mc-lava:    #ff7a1a;

  --neutral-0:   #ffffff;
  --neutral-50:  #f4f2ee;
  --neutral-100: #e6e2dc;
  --neutral-200: #c7c2b9;
  --neutral-300: #9e998f;
  --neutral-400: #706b60;
  --neutral-500: #4a4740;
  --neutral-600: #2f2d28;
  --neutral-700: #1f1d1a;
  --neutral-800: #141311;
  --neutral-900: #09080a;

  --bg-1:   var(--neutral-800);
  --bg-2:   var(--neutral-700);
  --bg-3:   var(--neutral-600);
  --bg-inv: var(--brand-spirit-50);

  --fg-1: var(--brand-spirit-50);
  --fg-2: var(--brand-spirit-200);
  --fg-3: var(--brand-spirit-300);
  --fg-inv: var(--neutral-800);

  --accent:     var(--brand-nether-500);
  --accent-hi:  var(--brand-nether-400);
  --accent-lo:  var(--brand-nether-700);

  --success: var(--mc-emerald);
  --warning: var(--mc-gold);
  --danger:  var(--mc-redstone);
  --info:    var(--mc-diamond);

  --border-1: #0000001a;
  --border-2: #ffffff14;
  --border-pixel: var(--neutral-900);

  --font-display: "MinecraftTen", "Impact", "Arial Black", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pixel:   "Minecraft", ui-monospace, "Courier New", monospace;
  --font-mono:    ui-monospace, "SFMono-Regular", "Consolas", monospace;

  /* =============================================================
     SCHRIFTGRÖSSEN
     =============================================================
     ┌───────────────────────────────────────────────────────────┐
     │  ZU GROSS / ZU KLEIN?  Dann NUR --text-base ändern.       │
     │  Alle Fließtext-Größen rechnen sich daraus ab.            │
     │  Sinnvoller Bereich: 16px (kompakt) bis 19px (großzügig). │
     └───────────────────────────────────────────────────────────┘

     Die Überschriften-Tokens (xl bis 5xl) sind bewusst NICHT
     gekoppelt — die laufen in MinecraftTen und sollen sich beim
     Nachjustieren des Fließtextes nicht mitverändern.

     Untergrenze bleibt 16px: kleinere Schrift zwingt Handynutzer
     zum Zoomen und wird von Google als Mobile-Mangel gewertet. */

  --text-base: 17px;                                   /* ← Stellschraube */

  --text-min: 16px;                                    /* harte Untergrenze */
  --text-2xs: 16px;                                    /* Mikro-Labels */
  --text-xs:  16px;                                    /* kleine UI-Texte */
  --text-sm:  max(16px, calc(var(--text-base) - 1px)); /* kompakter Fließtext */
  --text-md:  var(--text-base);                        /* Fließtext (Standard) */
  --text-lg:  calc(var(--text-base) + 3px);            /* hervorgehobener Text */

  /* Navigation läuft in der Pixelschrift (Versalhöhe 44 % statt 72 %),
     braucht deshalb einen höheren px-Wert für dieselbe optische Größe. */
  --text-nav: 26px;

  --text-xl:  30px;       /* h4  — MinecraftTen */
  --text-2xl: 36px;       /* h3  — MinecraftTen */
  --text-3xl: 48px;       /* h2  — MinecraftTen */
  --text-4xl: 64px;       /* h1  — MinecraftTen */
  --text-5xl: 88px;       /* Display */

  --lh-tight: 1;
  --lh-snug:  1.15;
  /* 1.4 war für die Pixelschrift gerechnet. Manrope hat eine deutlich
     größere x-Höhe und braucht mehr Luft zwischen den Zeilen. */
  --lh-body:  1.55;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  --shadow-block-sm: 0 2px 0 0 rgba(0,0,0,0.55), inset 0 -2px 0 0 rgba(0,0,0,0.25), inset 0 2px 0 0 rgba(255,255,255,0.10);
  --shadow-block-md: 0 4px 0 0 rgba(0,0,0,0.55), inset 0 -3px 0 0 rgba(0,0,0,0.28), inset 0 2px 0 0 rgba(255,255,255,0.12);
  --shadow-block-lg: 0 6px 0 0 rgba(0,0,0,0.6),  inset 0 -4px 0 0 rgba(0,0,0,0.30), inset 0 3px 0 0 rgba(255,255,255,0.14);
  --shadow-ambient:  0 12px 32px -8px rgba(0,0,0,0.6);
  --shadow-press:    0 1px 0 0 rgba(0,0,0,0.5), inset 0 -1px 0 0 rgba(0,0,0,0.2);

  --ease-snap: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 80ms;
  --dur-base: 160ms;
  --dur-slow: 280ms;
}

/* =============================================================
   RESET + BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  /* Kantenglättung AN. Vorher stand hier font-smoothing:none — sinnvoll für
     die Pixelschrift, aber für Manrope fatal: Safari und iOS hätten den
     Fließtext hart aliasiert und ausgefranst dargestellt. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Pixel-Optik bleibt dort, wo sie hingehört: bei Bildern und der
   Pixelschrift — nicht mehr pauschal auf dem ganzen Dokument. */
img, .pixelated { image-rendering: pixelated; }

h1, .h1 { font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--lh-tight); color: var(--fg-1); text-shadow: 3px 3px 0 #000; margin: 0; }
h2, .h2 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--lh-snug); text-shadow: 2px 2px 0 #000; margin: 0; }
h3, .h3 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--lh-snug); text-shadow: 2px 2px 0 #000; margin: 0; }
h4, .h4 { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--lh-snug); margin: 0; }

a { color: inherit; text-decoration: none; }

/* =============================================================
   SCHLAGWORTE IM FLIESSTEXT
   =============================================================
   <strong> hebt Kernbegriffe hervor: kräftigerer Schnitt plus eine
   Aufhellung von --fg-2 auf --fg-1. Bewusst OHNE Signalfarbe — sonst
   konkurrieren die Hervorhebungen mit Buttons und Links um Aufmerksamkeit.

   Faustregel beim Schreiben: höchstens 2-3 Begriffe pro Absatz.
   Hervorhebung wirkt durch Kontrast — ist die Hälfte des Satzes fett,
   hebt sich nichts mehr ab und der Absatz wirkt nur noch unruhig.
   ============================================================= */
strong, b {
  font-weight: 700;
  color: var(--fg-1);
}

/* =============================================================
   NAVBAR
   ============================================================= */
.nr-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  background: rgb(9,8,10);
  border-bottom: 2px solid var(--brand-nether-700);
}

/* Logo + Titel links */
.nr-nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}
.nr-nav-logo span.accent { color: #fff; }
.nr-nav-logo-img {
  height: 72px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-top: 14px;
  margin-right: -6px;
}
.nr-nav-title {
  font-family: var(--font-display);
  font-size: 28px;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.nr-nav-links {
  display: flex;
  gap: var(--space-5);
  list-style: none;
}

.nr-nav-links a {
  /* Pixelschrift ist hier richtig: kurze Labels in Großbuchstaben, die man
     scannt statt liest. Bei ganzen Sätzen wäre sie die falsche Wahl.
     ACHTUNG Größe: Die Versalhöhe der Minecraft-Schrift liegt bei 44 % der
     em-Größe (normale Schriften: ~72 %). 16px würden hier also winzig wirken.
     26px erzeugen dieselbe optische Höhe wie 16px in einer normalen Schrift. */
  font-family: var(--font-pixel);
  font-size: var(--text-nav);
  color: var(--fg-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-base) var(--ease-snap), border-color var(--dur-base) var(--ease-snap);
}
.nr-nav-links a:hover,
.nr-nav-links a.active {
  color: var(--fg-1);
  border-bottom-color: var(--brand-nether-400);
}

/* Social-Media Icon Bar */
.nr-nav-social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-left: var(--space-5);
  margin-left: var(--space-4);
  border-left: 2px solid var(--brand-nether-700);
}

.nr-nav-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: filter var(--dur-base) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
  flex-shrink: 0;
}
.nr-nav-social a:hover { transform: translateY(-2px); filter: brightness(1.25); }

/* Platform colours — always visible */
.nr-nav-social a.social-yt      { color: #ff0000; }
.nr-nav-social a.social-reddit  { color: #ff4500; }
.nr-nav-social a.social-discord { color: #5865f2; }
.nr-nav-social a.social-ig      { color: #e1306c; }

.nr-nav-social svg {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}

/* Mobile nav */
.nr-nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.nr-nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--fg-1);
  transition: transform var(--dur-base) var(--ease-snap), opacity var(--dur-base);
}

@media (max-width: 700px) {
  /* --- Kopfleiste auf schmalen Bildschirmen ---
     Gemessen bei 375px nutzbarer Breite: Logo, Schriftzug, Menü-Knopf
     und Social-Icons brauchen zusammen rund 456px. Die Icons wurden
     dadurch aus der Leiste geschoben und waren auf allen fünf Seiten
     unsichtbar.

     Der Schriftzug "Neverrock.net" allein kostet etwa 180px. Er fällt
     hier weg, das Logo identifiziert die Seite auch ohne ihn. Damit
     bleiben rund 290px, die Icons sitzen wieder in der Leiste. */
  .nr-nav { height: 64px; padding: 0 12px; }
  .nr-nav-title { display: none; }
  .nr-nav-logo-img { height: 56px; margin-top: 10px; }

  .nr-nav-links {
    position: fixed;
    /* Muss zur verkleinerten Leistenhöhe darüber passen */
    top: 64px;
    left: 0; right: 0;
    background: rgba(9,8,10,0.97);
    border-bottom: 2px solid var(--brand-nether-700);
    flex-direction: column;
    gap: 0;
    padding: var(--space-4) 0;
    display: none;
  }
  .nr-nav-links.open { display: flex; }
  .nr-nav-links li { width: 100%; }
  .nr-nav-links a { display: block; padding: var(--space-3) var(--space-6); border-bottom: none; }

  /* Berührungsziele: 44px ist das empfohlene Mindestmaß. Der Knopf war
     32x24 und damit deutlich darunter. Die sichtbaren Balken bleiben
     gleich groß, nur die anfassbare Fläche wächst. */
  .nr-nav-burger {
    display: flex;
    width: 44px; height: 44px;
    justify-content: center;
  }

  .nr-nav-social {
    padding-left: 8px;
    margin-left: 0;
    border-left: none;
    gap: 10px;
  }
  .nr-nav-social a { width: 40px; height: 40px; }
  .nr-nav-social a { width: 28px; height: 28px; }
  .nr-nav-social svg { width: 18px; height: 18px; }
}

/* =============================================================
   UTILITY CLASSES
   ============================================================= */
.mc-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-md);
  padding: 12px 28px;
  background: var(--brand-nether-600);
  color: var(--fg-1);
  border: 2px solid #000;
  cursor: pointer;
  box-shadow: var(--shadow-block-md);
  transition: transform var(--dur-fast) var(--ease-snap), background var(--dur-fast);
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
}
.mc-btn:hover { background: var(--brand-nether-500); transform: translateY(-2px); }
.mc-btn:active { transform: translateY(2px); box-shadow: var(--shadow-press); }
.mc-btn.secondary {
  background: var(--bg-3);
  color: var(--fg-2);
}
.mc-btn.secondary:hover { background: var(--bg-2); color: var(--fg-1); }

.mc-gold { color: var(--mc-gold); }
.mc-diamond { color: var(--mc-diamond); }
.c-emerald { color: var(--mc-emerald); }

.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }

/* Section padding */
.section-pad {
  padding: var(--space-8) var(--space-6);
}

/* Pixel separator */
.px-sep {
  width: 100%;
  height: 4px;
  background: var(--brand-nether-700);
  box-shadow: 0 2px 0 0 #000, inset 0 2px 0 0 rgba(255,255,255,0.08);
  border: none;
}

/* Footer */
.nr-footer {
  background: var(--brand-nether-900);
  border-top: 2px solid var(--brand-nether-700);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  color: var(--fg-3);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
}
.nr-footer strong {
  color: var(--fg-2);
  font-weight: 400;
}
.nr-footer a {
  color: var(--fg-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nr-footer a:hover,
.nr-footer a:focus-visible { color: var(--fg-1); }

/* Pflichthinweise zu Mojang/Microsoft und Supercell.
   Bewusst dieselbe Größe wie der übrige Fußzeilentext (16px) und
   nicht kleiner: Sie sollen unauffällig, aber ohne Mühe lesbar sein.
   Die weite Laufweite der Fußzeile wird hier zurückgenommen, sonst
   zerfallen die langen Großbuchstabenzeilen. */
.nr-footer-recht {
  margin: var(--space-4) auto 0;
  max-width: 78ch;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--neutral-300);
}
.nr-footer-recht + .nr-footer-recht { margin-top: var(--space-2); }

/* =============================================================
   FONT-SIZE FLOOR — design-system invariant
   -------------------------------------------------------------
   The typography scale above already guarantees that any element
   styled with the design tokens (var(--text-*)) is at least 16px.

   This rule provides a second layer of protection against legacy
   hardcoded values: it forces the html root to 16px, and any
   element that inherits its font-size will pick up at least that.
   It does NOT override an explicit author font-size — for that we
   use the runtime guard in shared.js, which scans for elements
   that compute below the floor and corrects them.

   Why no pure-CSS guard? CSS has no way to say "if the computed
   font-size is < 16px, raise it" — max() with !important would
   also block legitimate larger overrides. The JS guard in
   shared.js handles the edge cases.
   ============================================================= */
:root {
  font-size: max(16px, 100%);
}

/* =============================================================
   MOTTO IM FOOTER
   Frueher <em>. Manrope bringt gar keinen Kursivschnitt mit, der
   Browser haette die aufrechte Schrift rechnerisch geschraegt —
   das franst an den Rundungen sichtbar aus. Stattdessen jetzt
   ueber Sperrung und Farbe abgesetzt.
   ============================================================= */
.nr-motto {
  letter-spacing: 0.08em;
  color: var(--mc-gold);
}