/* Blockgröße & Schicht-Höhen (in Blöcken) zentral steuern */
:root{
  --block: 64px;         /* 48–96px sieht meist gut aus */
  --grass-h: 2;          /* dünne Grasnarbe */
  --dirt-h: 8;
  --stone-h: 36;
  --deepslate-h: 20;
  --bedrock-h: 6;

  /* Erz-Dichte (0–1) => via opacity gesteuert */
  --ore-coal: .20;
  --ore-iron: .14;
  --ore-redstone: .10;
}

/* Fixierter, hinterer Canvas */
.mc-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  /* optional: leichter Parallax-Feeling */
  will-change: transform;
}

/* Basis für jede Gesteinsschicht */
.mc-layer{
  flex: 0 0 auto;
  background-repeat: repeat;
  background-size: auto var(--block);
  image-rendering: pixelated;
}

/* Reihenfolge entspricht HTML – von oben nach unten */
.mc-grass{
  height: calc(var(--grass-h) * var(--block));
  background-image: url("../mc-textures/grass_top.png");
}
.mc-dirt{
  height: calc(var(--dirt-h) * var(--block));
  background-image: url("../mc-textures/dirt.png");
}
.mc-stone{
  height: calc(var(--stone-h) * var(--block));
  background-image: url("../mc-textures/stone.png");
}
.mc-deepslate{
  height: calc(var(--deepslate-h) * var(--block));
  background-image: url("../mc-textures/deepslate.png");
}
.mc-bedrock{
  height: calc(var(--bedrock-h) * var(--block));
  background-image: url("../mc-textures/bedrock.png");
}

/* Erz-Overlays: volle Höhe, transparent & gemischt für Varianz */
.mc-ore{
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-size: auto var(--block);
  image-rendering: pixelated;
  mix-blend-mode: normal;           /* bei Bedarf: multiply/overlay testen */
  pointer-events: none;
}
.mc-ore--coal{
  background-image: url("../mc-textures/coal_ore.png");
  opacity: var(--ore-coal);
  background-position: 0 0;
}
.mc-ore--iron{
  background-image: url("../mc-textures/iron_ore.png");
  opacity: var(--ore-iron);
  background-position: 32px 48px;   /* kleine Versätze für Abwechslung */
}
.mc-ore--redstone{
  background-image: url("../mc-textures/redstone_ore.png");
  opacity: var(--ore-redstone);
  background-position: 16px 24px;
}

/* Responsiv: kleinere Blöcke auf schmalen Screens */
@media (max-width: 900px){
  :root{ --block: 48px; }
}
@media (max-width: 600px){
  :root{ --block: 40px; }
}

/* Safeguard: sorge dafür, dass Seitenhintergründe transparent sind */
html, body{
  background: transparent;
}
.site, .site-content, .content-area{
  background: transparent;
}

:root{
  /* bestehende Variablen bleiben */
  --sky-h: 18;                 /* Höhe in Block-Einheiten */
  --cloud-speed: 140s;         /* je größer, desto langsamer */
  --cloud-opacity: .55;
  --sun-size: calc(var(--block) * 3.5);
  --moon-size: calc(var(--block) * 2.8);
}

/* ---------------- SKY ---------------- */
.mc-sky{
  position: relative;
  height: calc(var(--sky-h) * var(--block));
  background: linear-gradient(#8fd0ff 0%, #bfe7ff 70%, #e9f6ff 100%); /* Tag */
  image-rendering: pixelated;
  overflow: hidden;
}

/* Nachtmodus automatisch nach System-Theme */
@media (prefers-color-scheme: dark){
  .mc-sky{
    background: linear-gradient(#0b1b3a 0%, #152c59 70%, #1b376e 100%);
  }
}

/* Sonne/Mond als pixelige Kreise via radial-gradient */
.mc-sun, .mc-moon{
  position: absolute;
  top: calc(var(--block) * 2);
  left: calc(50% - var(--sun-size) / 2);
  pointer-events: none;
}

.mc-sun{
  width: var(--sun-size);
  height: var(--sun-size);
  background:
    radial-gradient(circle at 50% 50%,
      #ffe27a 0 55%, #ffcf4a 56% 100%);
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--block) * .6) #ffd66b80;
}

/* Mond wird im Dark-Mode sichtbar, am Tag ausgeblendet */
.mc-moon{
  width: var(--moon-size);
  height: var(--moon-size);
  left: calc(20% - var(--moon-size)/2);
  background:
    radial-gradient(circle at 50% 50%,
      #dfe7ff 0 55%, #b8c3e8 56% 100%);
  border-radius: 50%;
  filter: brightness(.95);
  opacity: 0;
}
@media (prefers-color-scheme: dark){
  .mc-sun{ opacity: 0; }
  .mc-moon{ opacity: 1; top: calc(var(--block) * 3); }
}

/* Wolken: schlanke Pixel-„Klötzchen“, die langsam nach rechts driften */
.mc-clouds{
  position: absolute; inset: 0;
  background-repeat: repeat-x;
  background-size: auto calc(var(--block) * 2);
  opacity: var(--cloud-opacity);
  animation: mc-clouds-move var(--cloud-speed) linear infinite;
  pointer-events: none;

  /* rein CSS, keine Datei nötig: gestapelte „Pixel-Wolken“ */
  background-image:
    /* Schicht 1 */
    radial-gradient(#ffffff 60%, #ffffff00 61%),
    radial-gradient(#ffffff 60%, #ffffff00 61%),
    radial-gradient(#ffffff 60%, #ffffff00 61%),
    /* Schicht 2 (kleiner) */
    radial-gradient(#ffffff 60%, #ffffff00 61%),
    radial-gradient(#ffffff 60%, #ffffff00 61%);
  background-position:
     0    calc(var(--block)*.5),
     220px calc(var(--block)*1.1),
     480px calc(var(--block)*.8),
     100px calc(var(--block)*1.6),
     360px calc(var(--block)*1.35);
  background-size:
     calc(var(--block)*1.2) calc(var(--block)*1.2),
     calc(var(--block)*1.0) calc(var(--block)*1.0),
     calc(var(--block)*1.4) calc(var(--block)*1.4),
     calc(var(--block)*.9)  calc(var(--block)*.9),
     calc(var(--block)*1.1) calc(var(--block)*1.1);
  image-rendering: pixelated;
}

@keyframes mc-clouds-move{
  from{ background-position:
     0    calc(var(--block)*.5),
     220px calc(var(--block)*1.1),
     480px calc(var(--block)*.8),
     100px calc(var(--block)*1.6),
     360px calc(var(--block)*1.35); }
  to{ background-position:
     1000px calc(var(--block)*.5),
     1220px calc(var(--block)*1.1),
     1280px calc(var(--block)*.8),
     1100px calc(var(--block)*1.6),
     1360px calc(var(--block)*1.35); }
}

/* Sterne erscheinen nachts */
.mc-stars{
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(#ffffff 1px, #ffffff00 2px),
    radial-gradient(#a8c7ff 1px, #ffffff00 2px);
  background-repeat: repeat;
  background-size: 120px 120px, 160px 160px;
  background-position: 0 0, 80px 40px;
  opacity: 0;
}
@media (prefers-color-scheme: dark){
  .mc-stars{ opacity: .6; }
}

/* Responsiv: bei kleinen Screens etwas weniger Himmel */
@media (max-width: 600px){
  :root{ --sky-h: 14; }
}