/* ---------- the world behind the page (js/scene.js) ---------- */
.world { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.world > div { position: absolute; left: 0; right: 0; }

/* Day by default; night with the dark theme. The day sky is the season's (js/scene.js), in the
   game's flat bands toward white; it turns with the season */
@property --season-sky { syntax: "<color>"; inherits: true; initial-value: #78a7ff; }
.world.seasons { transition: --season-sky 20s ease; }
.world {
  --sky: var(--season-sky); --sky-2: color-mix(in srgb, var(--season-sky) 90%, #fff);
  --sky-3: color-mix(in srgb, var(--season-sky) 80%, #fff); --sky-4: color-mix(in srgb, var(--season-sky) 68%, #fff);
  --sky-5: color-mix(in srgb, var(--season-sky) 58%, #fff); --horizon: color-mix(in srgb, var(--season-sky) 50%, #fff);
  --isle-0: url("../assets/scene-day-0.png"); --isle-1: url("../assets/scene-day-1.png");
  --isle-2: url("../assets/scene-day-2.png"); --ground: url("../assets/scene-day-ground.png");
  --far: url("../assets/world/far-day.png"); --near: url("../assets/world/near-day.png");
  --orb: url("../assets/world/sun.png"); --cloud-alpha: 0.85;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .world {
    --sky: #01010a; --sky-2: #03040f; --sky-3: #060816; --sky-4: #0a0d1e; --sky-5: #0d1126; --horizon: #10142c;
    --isle-0: url("../assets/scene-night-0.png"); --isle-1: url("../assets/scene-night-1.png");
    --isle-2: url("../assets/scene-night-2.png"); --ground: url("../assets/scene-night-ground.png");
    --far: url("../assets/world/far-night.png"); --near: url("../assets/world/near-night.png");
    --orb: url("../assets/world/moon.png"); --cloud-alpha: 0.16;
  }
}
:root[data-theme="dark"] .world {
  --sky: #01010a; --sky-2: #03040f; --sky-3: #060816; --sky-4: #0a0d1e; --sky-5: #0d1126; --horizon: #10142c;
  --isle-0: url("../assets/scene-night-0.png"); --isle-1: url("../assets/scene-night-1.png");
  --isle-2: url("../assets/scene-night-2.png"); --ground: url("../assets/scene-night-ground.png");
  --far: url("../assets/world/far-night.png"); --near: url("../assets/world/near-night.png");
  --orb: url("../assets/world/moon.png"); --cloud-alpha: 0.16;
}

/* The sky in flat bands, like the game's low-resolution sky gradient */
.w-sky {
  inset: 0;
  background: linear-gradient(var(--sky) 0 30%, var(--sky-2) 30% 42%, var(--sky-3) 42% 52%,
    var(--sky-4) 52% 60%, var(--sky-5) 60% 67%, var(--horizon) 67%);
}
/* Square pixel stars at night (js/scene.js scatters them) */
.w-stars { top: 0; width: 2px; height: 2px; display: none; }
:root[data-theme-now="dark"] .w-stars { display: block; }

/* The game's own sun and moon textures, blown up with hard pixels */
.world > .w-sun {
  left: auto; right: 8%; top: 4vh; width: 384px; height: 384px;
  background: var(--orb) center / contain no-repeat; image-rendering: pixelated;
  filter: drop-shadow(0 0 32px rgba(255, 236, 140, 0.55));
}
:root[data-theme-now="dark"] .world > .w-sun { mix-blend-mode: screen; filter: drop-shadow(0 0 18px rgba(200, 210, 255, 0.35)); }

/* Sky islands (js/scene.js): a tall strip that rises as the page scrolls; in front of the sun, behind the clouds */
.world > .w-skyisles { top: 0; height: 0; will-change: translate; }
.w-skyisle {
  position: absolute; background: var(--day) center / contain no-repeat; image-rendering: pixelated;
}
:root[data-theme-now="dark"] .w-skyisle { background-image: var(--night); }
.w-skyisle.left { left: 3vw; }
.w-skyisle.right { right: 3vw; }
@media (min-width: 1100px) { body.has-sidebar .w-skyisle.left { left: calc(200px + 3vw); } }

/* Block-built ranges: far snowy mountains (8 px blocks), nearer hills with trees (12 px blocks).
   Not shown at the moment: js/scene.js would need el("w-far", world) and el("w-near", world) back */
.w-far, .w-near { background-repeat: repeat-x; background-position: 0 100%; image-rendering: pixelated; }
.w-far {
  bottom: calc(var(--ground-h, 32px) + 24px); height: var(--far-h, 240px);
  background-image: var(--far); background-size: var(--far-w, 512px) var(--far-h, 240px);
}
.w-near {
  bottom: calc(var(--ground-h, 32px) - 6px); height: var(--near-h, 240px);
  background-image: var(--near); background-size: var(--near-w, 1152px) var(--near-h, 240px);
}

/* Minecraft's flat blocky clouds from the game's cloud map: big ones high up, thinning out lower
   down, and a sparser, smaller, farther layer below them. Both fade out at the bottom.
   (".world >" so the general "right: 0" above doesn't win: one extra strip to the right lets
   them slide left while scrolling without showing an end, js/scene.js) */
.world > .w-clouds, .world > .w-clouds-far {
  image-rendering: pixelated; will-change: translate;
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent);
}
.world > .w-clouds {
  top: 2vh; right: calc(-1 * var(--clouds-w, 2048px)); height: var(--clouds-h, 576px); opacity: var(--cloud-alpha);
  background: url("../assets/world/clouds.png") repeat-x 0 0 / var(--clouds-w, 2048px) var(--clouds-h, 576px);
}
.world > .w-clouds-far {
  top: 30vh; right: calc(-1 * var(--clouds-far-w, 1024px)); height: var(--clouds-far-h, 256px);
  opacity: calc(var(--cloud-alpha) * 0.75);
  background: url("../assets/world/clouds-far.png") repeat-x 0 0 / var(--clouds-far-w, 1024px) var(--clouds-far-h, 256px);
}

/* A shooting star (js/scene.js, night only): a square head with a fading pixel trail */
.world > .w-shoot {
  right: auto; width: 4px; height: 4px; background: #fff;
  box-shadow:
    4px -2px 0 0px rgba(255, 255, 255, 0.92),
    8px -4px 0 0px rgba(255, 255, 255, 0.85),
    12px -6px 0 0px rgba(255, 255, 255, 0.77),
    16px -8px 0 -1px rgba(255, 255, 255, 0.69),
    20px -10px 0 -1px rgba(255, 255, 255, 0.62),
    24px -12px 0 -1px rgba(255, 255, 255, 0.54),
    28px -14px 0 -1px rgba(255, 255, 255, 0.46),
    32px -16px 0 -2px rgba(255, 255, 255, 0.38),
    36px -18px 0 -2px rgba(255, 255, 255, 0.31),
    40px -20px 0 -2px rgba(255, 255, 255, 0.23),
    44px -22px 0 -2px rgba(255, 255, 255, 0.15),
    48px -24px 0 -3px rgba(255, 255, 255, 0.08);
  animation: w-shoot var(--t, 1s) linear forwards;
}
@keyframes w-shoot {
  0% { translate: 0 0; opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { translate: -36vw 18vw; opacity: 0; }
}

/* The spawn build in three depth layers, once at the bottom left; its base grass row sits on the ground strip */
.w-isle {
  --k: 0.5; /* drawn at half size (8 px blocks, still whole pixels), so its four towers fit the left of the window */
  bottom: calc(var(--ground-h, 32px) - var(--tile, 16px) * var(--k)); height: calc(var(--isle-h, 544px) * var(--k));
  background-repeat: no-repeat; background-position: 2vw 100%;
  background-size: calc(var(--isle-w, 1232px) * var(--k)) calc(var(--isle-h, 544px) * var(--k));
  image-rendering: pixelated;
}
.w-isle-0 { background-image: var(--isle-0); }
.w-isle-1 { background-image: var(--isle-1); }
.w-isle-2 { background-image: var(--isle-2); }
@media (min-width: 1100px) { body.has-sidebar .w-isle { background-position: calc(200px + 2vw) 100%; } }

/* Season overlays (js/scene.js): just the grass and leaves of a later season, laid over the picture
   with the same size and place, faded in as the season turns */
.w-tint {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background-image: var(--day); background-repeat: inherit; background-position: inherit; background-size: inherit;
  image-rendering: pixelated;
}
:root[data-theme-now="dark"] .w-tint { background-image: var(--night); }
.w-tint.on { opacity: 1; }
.w-tint.fade { transition: opacity 20s ease; }
@media (prefers-reduced-motion: reduce) { .w-tint.fade, .world.seasons { transition: none; } }

/* The grass everybody walks on */
.w-ground {
  bottom: 0; height: var(--ground-h, 32px);
  background: var(--ground) repeat-x 0 0 / var(--tile, 16px) var(--ground-h, 32px);
  image-rendering: pixelated;
  box-shadow: 0 -2px 0 rgba(40, 80, 40, 0.25);
}


/* ---------- liquid glass panels over the world ---------- */
body { background: transparent; }
main > section, .team > .member, .rules-body > .rule-intro, .rules-body > .rule,
.menu-cards > .menu-card, .foot > p {
  position: relative;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22));
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.2),
    0 12px 32px rgba(40, 30, 90, 0.16);
  border-radius: 24px;
}
/* A soft sheen across the top of each panel */
main > section::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 45%; border-radius: 24px 24px 0 0; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
}
main > section, main > section.hero, main > section.block { padding: 28px 32px; margin: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.6); }
main > section.hero { margin-top: 28px; }
.foot > p { display: inline-block; padding: 12px 20px; border-radius: 16px; line-height: 1.7; }
.foot .visits { display: block; margin-top: 1.7em; }
@media (max-width: 560px) { main > section, main > section.hero, main > section.block { padding: 22px 18px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(main > section, .team > .member, .rules-body > .rule-intro, .rules-body > .rule, .menu-cards > .menu-card, .foot > p) {
    background: linear-gradient(140deg, rgba(28, 34, 64, 0.62), rgba(14, 18, 40, 0.42));
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 32px rgba(0, 0, 0, 0.35);
  }
  :root:not([data-theme="light"]) main > section::before { background: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)); }
}
:root[data-theme="dark"] :is(main > section, .team > .member, .rules-body > .rule-intro, .rules-body > .rule, .menu-cards > .menu-card, .foot > p) {
  background: linear-gradient(140deg, rgba(28, 34, 64, 0.62), rgba(14, 18, 40, 0.42));
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 32px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] main > section::before { background: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)); }

/* ---------- Minecraft-style chat (js/chat.js) ---------- */
.mc-chat {
  position: fixed; z-index: 35; left: 8px; bottom: calc(var(--stage-ground, 0px) + 24px);
  width: min(640px, calc(100vw - 16px));
  font: 15.5px/1.35 var(--font-mono); color: #fff; text-shadow: 2px 2px 0 #3f3f3f;
  pointer-events: none;
}
@media (min-width: 1100px) { body.has-sidebar .mc-chat { left: 208px; } }
.mc-log { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 4px; }
.mc-line { padding: 1px 6px; background: rgba(0, 0, 0, 0.5); white-space: pre-wrap; transition: opacity 1s; }
.mc-line.old { opacity: 0; }
.mc-chat.open .mc-line.old { opacity: 1; }
.mc-chat:not(.open) .mc-line.old { display: none; }
.mc-line.gold { color: #ffaa00; } .mc-line.green { color: #55ff55; }
.mc-line.red { color: #ff5555; } .mc-line.gray { color: #aaaaaa; }
.mc-line.yellow { color: #ffff55; }
.mc-suggest { display: flex; flex-direction: column; align-items: flex-start; }
.mc-opt { padding: 0 6px; background: rgba(0, 0, 0, 0.8); color: #aaaaaa; cursor: pointer; pointer-events: auto; }
.mc-opt.on { color: #ffff55; }
.mc-opt span { color: #777; }
.mc-input {
  display: none; width: 100%; box-sizing: border-box; padding: 4px 6px; border: 0; outline: none;
  font: inherit; color: #fff; text-shadow: inherit; background: rgba(0, 0, 0, 0.55); caret-color: #fff;
}
.mc-chat.open .mc-input { display: block; pointer-events: auto; }
/* The keys, under the chat until it opens; only where there is a keyboard (touch has the T button) */
.key-hints { display: none; gap: 14px; width: max-content; padding: 3px 8px; font-size: 13.5px; color: #e0e0e0; background: rgba(0, 0, 0, 0.5); }
@media (hover: hover) and (pointer: fine) { .key-hints { display: flex; } }
.mc-chat.open .key-hints { display: none; }
.key-hints kbd {
  display: inline-block; min-width: 1.4em; padding: 0 5px; margin: 0 2px; text-align: center;
  font: inherit; color: #fff; background: rgba(0, 0, 0, 0.55); border: 2px solid #6b6b6b; border-bottom-width: 4px;
}
/* Touch screens have no T key: a small chat button */
.mc-chat-btn {
  display: none; position: fixed; z-index: 34; left: 10px; bottom: calc(var(--stage-ground, 0px) + 100px);
  width: 40px; height: 40px; border: 2px solid #fff; border-radius: 8px;
  font: 19.5px var(--font-mono); color: #fff; background: rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 0 #3f3f3f;
}
@media (hover: none) and (pointer: coarse) { .mc-chat-btn { display: block; } }
/* Back to the top (js/main.js): bottom right, a glass button like the top bar's */
.to-top {
  position: fixed; z-index: 36; right: 16px; bottom: calc(var(--stage-ground, 0px) + 100px);
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  color: var(--accent); background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 20px rgba(0, 0, 0, 0.3);
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity 0.2s, translate 0.2s, visibility 0.2s, border-color 0.15s;
}
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.to-top.show { opacity: 1; visibility: visible; translate: 0 0; }
.to-top:hover { border-color: var(--teal-500); translate: 0 -2px; }
.to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mc-chat.open ~ .mc-chat-btn { display: none; }

/* Phones: solid-looking panels instead of live blur (much lighter to draw) */
@media (max-width: 760px) {
  main > section, .team > .member, .rules-body > .rule-intro, .rules-body > .rule, .menu-cards > .menu-card, .foot > p {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(255, 255, 255, 0.86);
  }
  :root[data-theme-now="dark"] :is(main > section, .team > .member, .rules-body > .rule-intro, .rules-body > .rule, .menu-cards > .menu-card, .foot > p) {
    background: rgba(20, 24, 50, 0.9);
  }
}
@media (max-width: 560px) { .world > .w-sun { width: 192px; height: 192px; } }