/* ===== LIBRARY HUB THEME — warm dark stone, lantern glow, Minecraft green ===== */

:root {
  --vault-void: #060504;
  --vault-deepslate: #0e0c0a;
  --vault-stone: #1a1612;
  --vault-panel: #221c18;
  --vault-amethyst: #7ec850;
  --vault-amethyst-deep: #4a7a28;
  --vault-portal: #62a336;
  --vault-soul: #7ec850;
  --vault-soul-muted: #4a7a28;
  --vault-emerald: #62a336;
  --vault-torch: #e5a348;
  --vault-text: #fdf6e3;
  --vault-muted: #b8a99a;
  --vault-border: rgba(229, 163, 72, 0.18);
}

body {
  background-color: var(--vault-void);
  color: var(--vault-text);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(229, 163, 72, 0.06), transparent 55%),
    radial-gradient(ellipse 90% 60% at 0% 40%, rgba(98, 163, 54, 0.05), transparent 50%),
    radial-gradient(ellipse 80% 50% at 100% 70%, rgba(98, 163, 54, 0.04), transparent 45%),
    linear-gradient(180deg, #060504 0%, #0e0c0a 40%, #12100e 100%);
}

/* Ambient drifting lights */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}

body::before {
  background: radial-gradient(circle at 30% 20%, rgba(229, 163, 72, 0.1), transparent 42%);
  animation: vault-drift-a 28s ease-in-out infinite alternate;
}

body::after {
  background: radial-gradient(circle at 70% 60%, rgba(98, 163, 54, 0.07), transparent 38%);
  animation: vault-drift-b 32s ease-in-out infinite alternate;
}

@keyframes vault-drift-a {
  from { transform: translate(0, 0); }
  to { transform: translate(3%, 2%); }
}

@keyframes vault-drift-b {
  from { transform: translate(0, 0); }
  to { transform: translate(-2%, -3%); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; opacity: 0.2; }
}

main { position: relative; z-index: 1; }

/* Header banner strip */
#apex-chrome .vault-header,
#apex-chrome #vault-header,
#apex-chrome .vault-header {
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.97) 0%, rgba(14, 12, 10, 0.98) 100%);
  border-bottom: 1px solid var(--vault-border);
  box-shadow: 0 1px 0 rgba(126, 200, 80, 0.06), 0 8px 24px rgba(0, 0, 0, 0.45);
}

.vault-announce {
  background: #0a0806;
  border-bottom: 1px solid rgba(98, 163, 54, 0.15);
  color: var(--vault-muted);
}

.vault-rail-link {
  color: rgba(244, 242, 234, 0.88);
}

.vault-rail-link:hover,
.vault-rail-link.is-active {
  color: #fff;
}

.vault-rail-link.is-active {
  color: var(--vault-soul);
}

/* Hero — cinematic hub frame */
.depth-banner--library {
  box-shadow: inset 0 -1px 0 rgba(98, 163, 54, 0.15);
}

.depth-banner--library::after {
  content: none;
}

.depth-banner--library::before {
  content: none;
}

.vault-rail-link.is-active {
  color: var(--vault-green-bright, #7ec850);
}

.action-amethyst,
.action-amethyst {
  background: linear-gradient(180deg, #7ec850 0%, var(--vault-amethyst-deep) 100%);
  border: 2px solid #3d6620;
  border-bottom-width: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.action-emerald,
.action-emerald {
  background: linear-gradient(180deg, #6fad42 0%, #4a7a28 100%);
  border-color: #3d6620;
  border-bottom-color: #2d4818;
}

.action-emerald-dl,
.action-emerald-dl {
  background: linear-gradient(180deg, #6fad42 0%, #4a7a28 100%);
}

/* Section surfaces */
.vault-section-platforms,
.vault-section-platforms {
  background: #0a0806 !important;
}

.vault-section,
.vault-section {
  background-color: #0e0c0a;
}

.vault-section:nth-of-type(even),
.vault-section:nth-of-type(even) {
  background-color: #12100e;
}

.vault-section-title,
.vault-section-title {
  color: var(--vault-text);
  text-shadow: 0 2px 12px rgba(229, 163, 72, 0.1);
}

.vault-section-lead,
.vault-section-lead {
  color: var(--vault-muted);
}

/* How it works — fix dark text on dark panel */
.section-how {
  background-color: #12100e !important;
  color: var(--vault-text);
}

.section-how .vault-section-title {
  color: var(--vault-text);
}

.section-how .how-card h3 {
  color: var(--vault-text);
  text-shadow: 0 1px 8px rgba(229, 163, 72, 0.1);
}

.section-how .how-card p {
  color: var(--vault-muted);
}

/* Play with friends — header text on dark section */
.section-friends {
  background-color: #1a1612 !important;
  color: var(--vault-text);
}

.section-friends .pf-title {
  color: var(--vault-text);
  text-shadow: 0 2px 12px rgba(229, 163, 72, 0.12);
}

.section-friends .pf-lead {
  color: var(--vault-muted);
}

/* Expand carousel — slide text on dark panels */
.section-expand {
  background: linear-gradient(180deg, #12100e 0%, #0a0806 100%) !important;
}

.section-expand .expand-lead {
  color: var(--vault-muted);
}

.expand-slide h3 {
  color: var(--vault-text);
}

.expand-slide p {
  color: var(--vault-muted);
}

.expand-slide a {
  color: var(--vault-emerald);
}

.expand-slide a:hover {
  color: var(--vault-soul);
}

/* Cards / panels */
.play-card,
.discover-main,
.modes-panel,
.expand-slide,
.platform-tile {
  background: var(--vault-panel) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-top-color: rgba(229, 163, 72, 0.22) !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 0 !important;
}

.play-card:hover,
.discover-thumb.is-active,
.expand-slide.is-active {
  border-color: rgba(126, 200, 80, 0.35) !important;
  transform: translateY(-2px);
}

/* How-it-works cards — borderless images */
.section-how .how-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.section-how .how-card::before {
  display: none;
}

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

.section-how .how-card:hover {
  border: none !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}

/* Block dividers */
.section-divider,
.mc-block-divider {
  background-color: #12100e !important;
  background-image:
    linear-gradient(135deg, rgba(229, 163, 72, 0.45) 25%, transparent 25%) -4px 0,
    linear-gradient(225deg, rgba(126, 200, 80, 0.35) 25%, transparent 25%) -4px 0,
    linear-gradient(45deg, rgba(99, 166, 54, 0.25) 25%, transparent 25%),
    linear-gradient(315deg, #1a1612 25%, #12100e 25%) !important;
}

/* Images — frame only */
.discover-main img,
.play-card img,
.modes-panel img,
.expand-slide img,
.platform-tile img {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Carousel controls */
[data-carousel-prev],
[data-carousel-next] {
  color: #fff;
  border-color: rgba(229, 163, 72, 0.35);
  background: rgba(26, 22, 18, 0.85);
}

[data-carousel-prev]:hover,
[data-carousel-next]:hover {
  border-color: var(--vault-soul);
  color: var(--vault-soul);
}

/* Social */
.social-strip a {
  background: var(--vault-stone);
  border: 1px solid var(--vault-border);
}

.social-strip a:hover {
  border-color: var(--vault-soul);
  box-shadow: 0 0 12px rgba(126, 200, 80, 0.15);
}

/* Footer */
.vault-footer,
.vault-footer {
  background: #0e0c0a;
  border-top: 1px solid rgba(229, 163, 72, 0.12);
}

.vault-legal-wrap {
  background: #0a0806;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.vault-legal-bar,
.vault-legal-bar {
  background: transparent;
}

.vault-footer .vault-footer-col a,
.vault-footer .vault-footer-guidelines a {
  color: #9bc848;
}

.vault-footer .vault-footer-col a:hover,
.vault-footer .vault-footer-guidelines a:hover {
  color: #b8e06a;
}

.vault-footer .vault-footer-guidelines span {
  color: #9bc848;
}

.vault-footer .vault-legal-links a,
.vault-footer .vault-privacy-link {
  color: #a6a6a6;
}

.vault-footer .vault-legal-links a:hover,
.vault-footer .vault-privacy-link:hover {
  color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0806; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3d6620, #2a221c);
  border: 2px solid #0a0806;
}

/* Sculk specks */
.depth-mote,
.depth-mote {
  background: radial-gradient(circle, rgba(126, 200, 80, 0.9) 0%, transparent 70%);
  box-shadow: 0 0 6px rgba(126, 200, 80, 0.35);
}

/* Links — main content only; footer keeps its own green/grey palette */
main a:not(.action-emerald):not(.action-emerald-dl):not(.vault-rail-link) {
  color: var(--vault-soul);
}

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

/* ===== INDEX EXTRA ATMOSPHERE (CSS-only, no image changes) ===== */

/* Subtle deepslate grain — behind page content, never over hero imagery */
html {
  background-color: var(--vault-void);
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.025;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255, 255, 255, 0.03) 3px,
      rgba(255, 255, 255, 0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.04) 3px,
      rgba(0, 0, 0, 0.04) 4px
    );
  mix-blend-mode: overlay;
}

body {
  position: relative;
  z-index: 2;
}

#apex-chrome {
  position: relative;
  z-index: 20;
}

main {
  position: relative;
  z-index: 10;
}

.depth-banner--library::before,
.depth-banner--library::after,
.depth-banner--library .depth-atmosphere::before,
.depth-banner--library .depth-atmosphere::after {
  display: none !important;
}

/* Third drifting ambient field (emerald) */
main::before {
  content: "";
  position: fixed;
  inset: -30%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 85% 25%, rgba(99, 166, 54, 0.06), transparent 40%);
  animation: vault-drift-c 35s ease-in-out infinite alternate;
  opacity: 0.5;
}

@keyframes vault-drift-c {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-2%, 4%) scale(1.05); }
}

/* Floating sculk specks behind content — not over hero */
main::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(126, 200, 80, 0.55), transparent),
    radial-gradient(1px 1px at 28% 62%, rgba(229, 163, 72, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 44% 34%, rgba(229, 163, 72, 0.35), transparent),
    radial-gradient(1px 1px at 58% 78%, rgba(126, 200, 80, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 72% 22%, rgba(229, 163, 72, 0.5), transparent),
    radial-gradient(1px 1px at 86% 55%, rgba(126, 200, 80, 0.35), transparent),
    radial-gradient(1px 1px at 6% 88%, rgba(229, 163, 72, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 92% 90%, rgba(229, 163, 72, 0.25), transparent);
  animation: vault-speck-drift 24s ease-in-out infinite alternate;
}

@keyframes vault-speck-drift {
  from { transform: translateY(0); opacity: 0.45; }
  to { transform: translateY(-12px); opacity: 0.6; }
}

/* Hero bottom fade into sections */
.depth-banner--library .depth-hub-inner {
  animation: none !important;
}

@keyframes vault-hero-copy-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vault-mote-float {
  from { transform: translateY(0); opacity: 0.25; }
  to { transform: translateY(18px); opacity: 0.5; }
}

/* Section scroll reveal */
.vault-section {
  position: relative;
  animation: vault-section-rise 0.65s ease both;
  animation-delay: calc(var(--vault-i, 0) * 0.06s);
}

.vault-section:nth-of-type(1) { --vault-i: 1; }
.vault-section:nth-of-type(2) { --vault-i: 2; }
.vault-section:nth-of-type(3) { --vault-i: 3; }
.vault-section:nth-of-type(4) { --vault-i: 4; }
.vault-section:nth-of-type(5) { --vault-i: 5; }
.vault-section:nth-of-type(6) { --vault-i: 6; }
.vault-section:nth-of-type(7) { --vault-i: 7; }
.vault-section:nth-of-type(8) { --vault-i: 8; }

@keyframes vault-section-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@supports (animation-timeline: view()) {
  .vault-section {
    animation: vault-section-reveal linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 22%;
  }

  @keyframes vault-section-reveal {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Sculk vein at section top edge */
.vault-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(126, 200, 80, 0.15) 20%,
    rgba(229, 163, 72, 0.25) 50%,
    rgba(126, 200, 80, 0.15) 80%,
    transparent 100%
  );
  pointer-events: none;
}

/* Section title accent line */
.vault-section-title {
  position: relative;
}

.vault-section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 0.65rem auto 0;
  background: linear-gradient(90deg, var(--vault-soul), var(--vault-amethyst), var(--vault-soul));
  background-size: 200% 100%;
  animation: vault-title-shimmer 4s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(229, 163, 72, 0.25);
}

@keyframes vault-title-shimmer {
  0%, 100% { background-position: 0% 50%; opacity: 0.7; }
  50% { background-position: 100% 50%; opacity: 1; }
}

/* Card corner crystal marks */
.play-card,
.platform-tile,
.discover-main-wrap,
.expand-slide {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.play-card::before,
.platform-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-top: 2px solid rgba(229, 163, 72, 0.45);
  border-left: 2px solid rgba(126, 200, 80, 0.35);
  pointer-events: none;
  z-index: 2;
  opacity: 0.6;
  transition: opacity 0.25s ease;
}

.play-card:hover::before,
.platform-tile:hover::before {
  opacity: 1;
}

.play-card:hover,
.platform-tile:hover {
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 20px rgba(229, 163, 72, 0.08) !important;
}

/* Discover stage ambient glow */
.discover-stage,
.modes-viewport,
.expand-viewport {
  position: relative;
}

.discover-stage::after,
.modes-viewport::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  z-index: 0;
  border: 1px solid rgba(229, 163, 72, 0.12);
  box-shadow:
    inset 0 0 40px rgba(98, 163, 54, 0.04),
    0 0 30px rgba(126, 200, 80, 0.03);
}

/* Platform tabs — clean active indicator */
.vault-platform-tab.is-active {
  background: rgba(34, 28, 24, 0.75);
  border-bottom-color: var(--vault-soul);
  box-shadow: none;
}

.vault-section-platforms .vault-platform-tab:focus-visible {
  outline: 2px solid rgba(229, 163, 72, 0.5);
  outline-offset: 2px;
}

/* Navbar subtle scan on announce bar */
.vault-announce::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 200, 80, 0.5), transparent);
  animation: vault-announce-scan 6s ease-in-out infinite;
}

.vault-announce {
  position: relative;
  overflow: hidden;
}

@keyframes vault-announce-scan {
  0% { left: -60%; opacity: 0; }
  20% { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* Final CTA zone */
.final-cta {
  position: relative;
  background: linear-gradient(180deg, #12100e 0%, #0a0806 100%) !important;
  border-top: 1px solid var(--vault-border) !important;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(229, 163, 72, 0.08), transparent 65%);
}

/* Mobile / reduced motion */
@media (max-width: 768px) {
  main::after { opacity: 0.3; }
  html::before { opacity: 0.02; }
  .depth-banner--library .depth-atmosphere::before,
  .depth-banner--library .depth-atmosphere::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  main::before,
  main::after,
  .depth-banner--library::before,
  .depth-banner--library .depth-atmosphere::before,
  .depth-banner--library .depth-atmosphere::after,
  .vault-section,
  .vault-section-title::after,
  .vault-announce::after,
  .depth-banner--library .depth-hub-inner {
    animation: none !important;
  }

  .vault-section {
    opacity: 1;
    transform: none;
  }
}

/* ===== SUBPAGES — library hub theme handoff ===== */
body.ed-page,
body.store-download-page {
  background-color: var(--vault-void);
  color: var(--vault-text);
}

.ed-page .ed-main::before,
.ed-page .ed-main::after {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
}

.ed-page .ed-main::before {
  background: radial-gradient(circle at 25% 15%, rgba(229, 163, 72, 0.08), transparent 42%);
}

.ed-page .ed-main::after {
  background: radial-gradient(circle at 75% 55%, rgba(98, 163, 54, 0.06), transparent 38%);
}

.ed-page .ed-section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 0.65rem auto 0;
  background: linear-gradient(90deg, var(--vault-soul), var(--vault-amethyst), var(--vault-soul));
  box-shadow: 0 0 10px rgba(229, 163, 72, 0.2);
}

.ed-page .ed-card,
.ed-page .ed-faq-item,
.ed-page .ed-guide-card {
  border-color: rgba(229, 163, 72, 0.15);
}

.ed-page .ed-card:hover,
.ed-page .ed-guide-card:hover {
  border-color: rgba(126, 200, 80, 0.35);
}

.ed-page main a:not(.action-emerald):not(.action-emerald-dl):not(.vault-rail-link) {
  color: var(--vault-soul);
}

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