/* HyHost — light Minecraft day world (Kenney CC0 + ServDW sky ideas) */
:root {
  --mc-sky-top: #4eb8ea;
  --mc-sky-mid: #87ceeb;
  --mc-sky-bot: #c8eef8;
  --mc-sun: #ffd54a;
  --mc-sun-glow: #ffb300;
  --mc-grass: #5dbd3a;
  --mc-dirt: #8b5a2b;
  --mc-stone: #8a8f99;
  --mc-block: 48px;
}

/* Keep decorative world behind UI even if app.css fails to load */
body.theme-mc-day {
  position: relative;
  isolation: isolate;
}

.mc-world {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      var(--mc-sky-top) 0%,
      var(--mc-sky-mid) 42%,
      var(--mc-sky-bot) 72%,
      #b7e39a 88%,
      #7bc45a 100%);
}

.shell {
  position: relative;
  z-index: 1;
}

.mc-world * {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* --- Sun (pixel glow, no rays) --- */
.mc-sun {
  position: absolute;
  top: 7%;
  right: 11%;
  width: 64px;
  height: 64px;
  background: var(--mc-sun);
  box-shadow:
    0 0 0 5px rgba(255, 213, 74, .5),
    0 0 0 12px rgba(255, 179, 0, .22),
    0 0 36px rgba(255, 179, 0, .55),
    0 0 72px rgba(255, 200, 60, .32);
  animation: mc-sun-pulse 5s ease-in-out infinite;
  z-index: 2;
}

@keyframes mc-sun-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.05); filter: brightness(1.1); }
}

/* --- Clouds --- */
.mc-cloud {
  position: absolute;
  height: auto;
  opacity: .92;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .08));
  z-index: 3;
  animation: mc-cloud-drift linear infinite;
}

.mc-cloud.c1 { top: 8%; left: -8%; width: 160px; animation-duration: 72s; }
.mc-cloud.c2 { top: 16%; left: 18%; width: 120px; animation-duration: 88s; animation-delay: -20s; opacity: .8; }
.mc-cloud.c3 { top: 6%; left: 48%; width: 180px; animation-duration: 96s; animation-delay: -40s; }
.mc-cloud.c4 { top: 20%; left: 72%; width: 110px; animation-duration: 80s; animation-delay: -10s; opacity: .85; }
.mc-cloud.c5 { top: 12%; left: 90%; width: 140px; animation-duration: 100s; animation-delay: -55s; }

@keyframes mc-cloud-drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 220px)); }
}

/* --- Ground strip --- */
.mc-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--mc-block) * 3.5);
  z-index: 4;
}

.mc-ground-row {
  display: flex;
  width: 200%;
  height: var(--mc-block);
  animation: mc-ground-scroll 40s linear infinite;
}

.mc-ground-row.dirt { animation-duration: 55s; }
.mc-ground-row.stone { animation-duration: 70s; height: calc(var(--mc-block) * 1.5); }

.mc-ground-row span {
  flex: 0 0 var(--mc-block);
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.mc-ground-row.grass span {
  background-image: url("/assets/ui/mc/blocks/grass.png");
}

.mc-ground-row.dirt span {
  background-image: url("/assets/ui/mc/blocks/dirt.png");
}

.mc-ground-row.stone span {
  background-image: url("/assets/ui/mc/blocks/stone.png");
}

@keyframes mc-ground-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* tufts / mushrooms as “flowers” on grass */
.mc-decor {
  position: absolute;
  bottom: calc(var(--mc-block) * 2.35);
  width: 36px;
  height: 36px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  z-index: 5;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .15));
}

.mc-decor.d1 { left: 8%; background-image: url("/assets/ui/mc/tiles/mushroom_red.png"); animation: mc-bob 2.8s ease-in-out infinite; }
.mc-decor.d2 { left: 22%; background-image: url("/assets/ui/mc/sky/grass2.png"); width: 48px; height: 28px; }
.mc-decor.d3 { left: 38%; background-image: url("/assets/ui/mc/tiles/mushroom_brown.png"); animation: mc-bob 3.2s ease-in-out infinite .4s; }
.mc-decor.d4 { left: 55%; background-image: url("/assets/ui/mc/sky/grass3.png"); width: 52px; height: 30px; }
.mc-decor.d5 { left: 68%; background-image: url("/assets/ui/mc/tiles/mushroom_red.png"); animation: mc-bob 2.6s ease-in-out infinite .8s; }
.mc-decor.d6 { left: 82%; background-image: url("/assets/ui/mc/decor/bush.png"); width: 44px; height: 36px; }
.mc-decor.d7 { left: 14%; background-image: url("/assets/ui/mc/tiles/rock.png"); width: 28px; height: 24px; bottom: calc(var(--mc-block) * 2.2); }
.mc-decor.d8 { left: 91%; background-image: url("/assets/ui/mc/tiles/rock.png"); width: 32px; height: 26px; bottom: calc(var(--mc-block) * 2.15); }

/* CSS pixel flowers */
.mc-flower {
  position: absolute;
  bottom: calc(var(--mc-block) * 2.45);
  width: 8px;
  height: 8px;
  z-index: 5;
  --px: 4px;
  --petal: #ff6b9d;
  --center: #ffd54a;
  --stem: #2f8f2a;
}

.mc-flower::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--px);
  height: var(--px);
  background: var(--center);
  box-shadow:
    calc(var(--px) * -1) 0 var(--petal),
    var(--px) 0 var(--petal),
    0 calc(var(--px) * -1) var(--petal),
    0 var(--px) var(--petal),
    0 calc(var(--px) * 2) var(--stem),
    0 calc(var(--px) * 3) var(--stem);
}

.mc-flower.f1 { left: 18%; --petal: #ff6b9d; }
.mc-flower.f2 { left: 33%; --petal: #ffc107; animation: mc-bob 2.4s ease-in-out infinite .2s; }
.mc-flower.f3 { left: 47%; --petal: #7e57c2; }
.mc-flower.f4 { left: 61%; --petal: #42a5f5; animation: mc-bob 2.7s ease-in-out infinite .5s; }
.mc-flower.f5 { left: 76%; --petal: #ef5350; }
.mc-flower.f6 { left: 27%; --petal: #ffeb3b; }
.mc-flower.f7 { left: 88%; --petal: #ff6b9d; animation: mc-bob 3s ease-in-out infinite .3s; }

@keyframes mc-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* --- Bees --- */
.mc-bee {
  position: absolute;
  width: 28px;
  height: 28px;
  background: url("/assets/ui/mc/critters/bee_a.png") center / contain no-repeat;
  z-index: 6;
  animation:
    mc-bee-fly 14s linear infinite,
    mc-bee-flap .18s steps(1) infinite;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .2));
}

.mc-bee.b2 {
  animation-duration: 18s, .18s;
  animation-delay: -6s, 0s;
  width: 24px;
  height: 24px;
}

.mc-bee.b3 {
  animation-duration: 16s, .18s;
  animation-delay: -11s, .09s;
  width: 26px;
  height: 26px;
}

@keyframes mc-bee-flap {
  0% { background-image: url("/assets/ui/mc/critters/bee_a.png"); }
  50% { background-image: url("/assets/ui/mc/critters/bee_b.png"); }
}

@keyframes mc-bee-fly {
  0%   { left: -5%;  bottom: 28%; transform: translateY(0) scaleX(1); }
  20%  { left: 22%;  bottom: 36%; transform: translateY(-10px) scaleX(1); }
  40%  { left: 45%;  bottom: 30%; transform: translateY(6px) scaleX(1); }
  55%  { left: 58%;  bottom: 40%; transform: translateY(-8px) scaleX(-1); }
  75%  { left: 78%;  bottom: 32%; transform: translateY(4px) scaleX(-1); }
  100% { left: 105%; bottom: 38%; transform: translateY(-4px) scaleX(-1); }
}

@media (max-width: 720px) {
  :root { --mc-block: 36px; }
  .mc-sun { width: 52px; height: 52px; right: 6%; top: 5%; }
  .mc-cloud.c1, .mc-cloud.c3, .mc-cloud.c5 { width: 100px; }
  .mc-bee { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-sun,
  .mc-cloud, .mc-ground-row, .mc-bee, .mc-decor, .mc-flower {
    animation: none !important;
  }
}