/* ===== INDEX: MINECRAFT NIGHT THEME ===== */
/* Visual-only — structure/content unchanged */

:root {
  --night-sky: #080d2d;
  --night-midnight: #050817;
  --night-blue: #111b4a;
  --night-moon: #27336e;
  --night-purple: #271a4e;
  --night-horizon: #4a2f72;
  --night-terrain: #0f1c16;
  --night-grass: #18391e;
  --night-cave: #090b15;
  --night-stone: #191e3d;
  --night-torch: #e6a348;
  --night-lantern: #ffbf63;
  --night-water: #1668c7;
  --night-cherry: #b94c87;
  --night-green: #5a8f32;
  --night-text: #f3f4ef;
  --night-muted: #b5b8c5;
}

body.page-night {
  background-color: var(--night-midnight);
  color: var(--night-text);
  background-image:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(74, 47, 114, 0.12), transparent 55%),
    radial-gradient(ellipse 80% 50% at 20% 30%, rgba(17, 27, 74, 0.25), transparent 50%),
    linear-gradient(180deg, #050817 0%, #0c1018 45%, #11151b 100%);
}

body.page-night::before {
  content: "";
  position: fixed;
  inset: -15%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 75% 20%, rgba(39, 26, 78, 0.08), transparent 40%);
  animation: night-drift 30s ease-in-out infinite alternate;
  opacity: 0.6;
}

body.page-night::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 15% 80%, rgba(230, 163, 72, 0.03), transparent 35%);
  animation: night-drift 35s ease-in-out infinite alternate-reverse;
  opacity: 0.5;
}

@keyframes night-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(2%, -1%); }
}

/* Left accent rail — unique sidebar feel without DOM change */
body.page-night main {
  position: relative;
  z-index: 1;
}

body.page-night main::before {
  content: "";
  position: fixed;
  left: 0;
  top: calc(var(--nav-h) + var(--announce-h));
  bottom: 0;
  width: 3px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(74, 47, 114, 0.5) 0%,
    rgba(22, 104, 199, 0.35) 40%,
    rgba(90, 143, 50, 0.25) 100%
  );
  opacity: 0.7;
}

@media (max-width: 1023px) {
  body.page-night main::before { display: none; }
}

/* Navbar night */
body.page-night #vault-header {
  background: linear-gradient(180deg, #151618 0%, #10131b 100%);
  border-bottom: 1px solid rgba(39, 51, 110, 0.45);
  box-shadow: 0 1px 0 rgba(22, 104, 199, 0.08);
}

body.page-night .vault-brand-name {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--night-muted);
  margin-left: 0.35rem;
}

body.page-night .vault-rail-link {
  color: rgba(243, 244, 239, 0.88);
}

body.page-night .vault-rail-link.is-active {
  color: var(--night-green);
}

body.page-night .vault-rail-link:hover {
  color: #fff;
}

body.page-night .vault-announce {
  background: #0a0e1a;
  border-bottom: 1px solid rgba(22, 104, 199, 0.15);
  color: var(--night-muted);
}

/* Hero night */
body.page-night .depth-banner {
  background: var(--night-sky);
  box-shadow: inset 0 0 100px rgba(5, 8, 23, 0.15);
}

body.page-night .depth-banner--sunset {
  background: transparent;
  box-shadow: none;
}

body.page-night .depth-banner--sunset::before,
body.page-night .depth-banner--sunset::after {
  display: none;
}

body.page-night .depth-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(74, 47, 114, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(8, 13, 45, 0.15) 0%, transparent 35%, transparent 70%, rgba(9, 11, 21, 0.2) 100%);
}

body.page-night .depth-banner::after {
  background:
    linear-gradient(180deg, transparent 60%, rgba(9, 11, 21, 0.25) 100%),
    radial-gradient(ellipse 70% 35% at 50% 100%, rgba(22, 104, 199, 0.06), transparent 60%);
}

body.page-night .depth-fall-layer {
  filter: drop-shadow(0 0 12px rgba(22, 104, 199, 0.35));
}

/* Stars */
body.page-night .depth-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

body.page-night .depth-stars::before,
body.page-night .depth-stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 8% 12%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1px 1px at 15% 28%, rgba(200, 210, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 22% 8%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 31% 18%, rgba(180, 190, 255, 0.6), transparent),
    radial-gradient(1px 1px at 38% 32%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1.5px 1.5px at 45% 6%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 52% 22%, rgba(200, 200, 255, 0.65), transparent),
    radial-gradient(1px 1px at 58% 14%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 65% 26%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 72% 10%, rgba(220, 210, 255, 0.75), transparent),
    radial-gradient(1px 1px at 78% 20%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 85% 8%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 92% 16%, rgba(200, 220, 255, 0.7), transparent),
    radial-gradient(1px 1px at 12% 42%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 88% 38%, rgba(255, 255, 255, 0.55), transparent);
  animation: star-twinkle 6s ease-in-out infinite alternate;
}

body.page-night .depth-stars::after {
  background-image:
    radial-gradient(1px 1px at 18% 52%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 42% 48%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 67% 44%, rgba(200, 210, 255, 0.5), transparent),
    radial-gradient(1px 1px at 91% 50%, rgba(255, 255, 255, 0.35), transparent);
  animation-delay: 3s;
  opacity: 0.7;
}

@keyframes star-twinkle {
  from { opacity: 0.65; }
  to { opacity: 1; }
}

@keyframes shooting-star {
  0% { transform: translate(0, 0); opacity: 0; }
  2% { opacity: 1; }
  8% { transform: translate(120px, 60px); opacity: 0; }
  100% { opacity: 0; }
}

body.page-night .depth-shooting-star {
  position: absolute;
  top: 8%;
  left: 20%;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent);
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  animation: shooting-star 12s ease-in-out infinite;
  animation-delay: 8s;
}

/* Hero text night */
body.page-night .depth-eyebrow {
  color: rgba(243, 244, 239, 0.92);
  text-shadow: 0 1px 6px rgba(5, 8, 23, 0.8);
}

body.page-night .depth-title {
  color: #fff;
  text-shadow:
    0.08em 0 #1a1f3d,
    0.08em 0.08em #1a1f3d,
    0 0.08em #1a1f3d,
    0.16em 0.16em 0 #0a0c18,
    0 0 20px rgba(39, 51, 110, 0.25);
}

body.page-night .depth-banner--sunset .depth-title {
  font-size: clamp(2.25rem, 6.2vw, 4.75rem);
  text-shadow:
    0.08em 0 #1a1f3d,
    0.08em 0.08em #1a1f3d,
    0 0.08em #1a1f3d,
    0.16em 0.16em 0 #0a0c18,
    0 0 28px rgba(39, 51, 110, 0.35);
}

/* Hero button */
body.page-night .action-amethyst {
  background: linear-gradient(180deg, #1a2238 0%, #111827 100%);
  border: 2px solid #3d3568;
  border-bottom-width: 4px;
  border-bottom-color: #2a2448;
  color: var(--night-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.page-night .depth-banner--sunset .action-amethyst {
  padding: 1rem 2.5rem;
  font-size: clamp(0.875rem, 1.25vw, 1.0625rem);
}

body.page-night .action-amethyst:hover {
  border-color: #5a4f8a;
  background: linear-gradient(180deg, #222b45 0%, #151c30 100%);
}

body.page-night .action-emerald,
body.page-night .action-emerald-dl {
  background: linear-gradient(180deg, #6a9e3a 0%, #3d6620 100%);
  border-color: #2d4818;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 0 #1a3010;
}

/* Fireflies / particles */
body.page-night .depth-mote {
  border-radius: 50%;
  animation: firefly-drift linear infinite;
}

body.page-night .depth-mote:nth-child(1) {
  background: rgba(255, 191, 99, 0.75);
  box-shadow: 0 0 6px rgba(230, 163, 72, 0.4);
  width: 4px;
  height: 4px;
}

body.page-night .depth-mote:nth-child(2) {
  background: rgba(185, 76, 135, 0.65);
  width: 3px;
  height: 3px;
}

body.page-night .depth-mote:nth-child(3) {
  background: rgba(53, 200, 220, 0.5);
  width: 3px;
  height: 3px;
}

body.page-night .depth-mote:nth-child(4) {
  background: rgba(255, 191, 99, 0.6);
  width: 2px;
  height: 2px;
}

@keyframes firefly-drift {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.6; }
  100% { transform: translateY(40vh); opacity: 0; }
}

/* Sections */
body.page-night .vault-section-platforms {
  background: #0c1018 !important;
}

body.page-night .vault-section:nth-of-type(odd) {
  background-color: #0d1116 !important;
}

body.page-night .vault-section:nth-of-type(even) {
  background-color: #11151b !important;
}

body.page-night .section-how {
  background-color: #0c1018 !important;
}

body.page-night .section-how .how-card h3 {
  color: var(--night-text);
}

body.page-night .section-how .how-card p {
  color: var(--night-muted);
}

body.page-night .section-discover {
  background: #090b11 !important;
}

body.page-night .section-friends {
  background-color: #11151b !important;
}

body.page-night .section-friends .pf-title {
  color: var(--night-text);
}

body.page-night .section-friends .pf-lead {
  color: var(--night-muted);
}

body.page-night .section-modes {
  background: #080a12 !important;
}

body.page-night .section-expand {
  background: linear-gradient(180deg, #122e19 0%, #0f2415 100%) !important;
}

body.page-night .section-expand .vault-section-title {
  color: #fff;
}

body.page-night .section-expand .expand-lead {
  color: rgba(243, 244, 239, 0.75);
}

body.page-night .expand-slide {
  background: #1a2e1c !important;
  color: var(--night-text);
}

body.page-night .expand-slide.is-active {
  background: #1e3520 !important;
}

body.page-night .expand-slide p {
  color: var(--night-muted);
}

body.page-night .expand-slide a {
  color: var(--night-green);
}

body.page-night .section-faq-about {
  background: #090b11 !important;
}

/* Cards */
body.page-night .play-card,
body.page-night .discover-main,
body.page-night .platform-tile,
body.page-night .expand-slide {
  background: #15171d !important;
  border: 1px solid rgba(39, 51, 110, 0.25) !important;
  border-top-color: rgba(39, 51, 110, 0.4) !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

body.page-night .section-how .how-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.page-night .section-how .how-card img {
  border: none !important;
  box-shadow: none !important;
}

/* Section titles */
body.page-night .vault-section-title {
  color: var(--night-text);
  text-shadow: 0 2px 12px rgba(39, 51, 110, 0.2);
}

body.page-night .vault-section-title::after {
  background: linear-gradient(90deg, var(--night-water), var(--night-horizon), var(--night-water));
  box-shadow: 0 0 8px rgba(22, 104, 199, 0.2);
}

body.page-night .vault-section-lead,
body.page-night .discover-lead {
  color: var(--night-muted);
}

/* Links in main only */
body.page-night main a:not(.action-emerald):not(.action-emerald-dl):not(.vault-rail-link) {
  color: #6aad4a;
}

body.page-night main a:not(.action-emerald):not(.action-emerald-dl):not(.vault-rail-link):hover {
  color: var(--night-lantern);
}

/* Footer night */
body.page-night .vault-footer {
  background: #0a0c12;
  border-top: 1px solid rgba(39, 51, 110, 0.2);
}

body.page-night .vault-legal-wrap {
  background: #0d1018;
}

body.page-night .vault-footer .vault-footer-col a,
body.page-night .vault-footer .vault-footer-guidelines a {
  color: var(--night-green);
}

/* Scrollbar */
body.page-night ::-webkit-scrollbar-track {
  background: #090b11;
}

body.page-night ::-webkit-scrollbar-thumb {
  background: #303a5a;
}

body.page-night ::-webkit-scrollbar-thumb:hover {
  background: #465485;
}

@media (prefers-reduced-motion: reduce) {
  body.page-night::before,
  body.page-night::after,
  body.page-night .depth-stars::before,
  body.page-night .depth-stars::after,
  body.page-night .depth-shooting-star,
  body.page-night .depth-mote {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  body.page-night .depth-stars::before,
  body.page-night .depth-stars::after {
    opacity: 0.5;
  }
}