/*
 * PeakMC Halloween theme. Loaded after network.css; remove the <link> to
 * return to the standard blue theme. Pumpkin orange replaces the blue accent,
 * haunted purple replaces the navy panels, and the hero uses the banner art.
 */
:root {
  --bg: #0b0612;
  --bg-soft: #120a1c;
  --panel: rgba(25, 13, 36, .88);
  --panel-solid: #180d23;
  --panel-light: #22122f;
  --text: #fbf5ff;
  --muted: #bba7cc;
  --muted-dark: #7f6a93;
  --line: rgba(255, 138, 31, .16);
  --line-strong: rgba(255, 138, 31, .40);
  --blue: #ff7a18;
  --cyan: #ff9a3c;
  --blue-deep: #c2410c;
  --gold: #ffc14d;
  --green: #a3e635;
  --danger: #ff5f7a;
  --shadow: rgba(0, 0, 0, .5);
  --haunt-purple: #8b5cf6;
  --haunt-glow: #ff7a1866;
}

/* Background: blood-orange moon over a purple night, with drifting embers. */
.site-background {
  background:
    radial-gradient(circle at 50% 4%, #ff8a1f40 0, #ff6a0018 14%, transparent 32%),
    radial-gradient(circle at 12% 30%, #6d28d933 0, transparent 38%),
    radial-gradient(circle at 88% 26%, #9333ea2b 0, transparent 36%),
    linear-gradient(180deg, #120821 0, var(--bg) 70%);
}
.site-background:before {
  opacity: .14;
  background-image: linear-gradient(transparent 0 96%, #ff9a3c14 96% 100%), linear-gradient(90deg, transparent 0 96%, #a78bfa0f 96% 100%);
}
.mountain-back { opacity: .32; background: linear-gradient(135deg, #3b1d5a, #1c0f2c 53%, #0b0612); }
.mountain-front { opacity: .5; background: linear-gradient(155deg, #2a1240, #0e0718 63%); }
.snowline { opacity: .12; background: #ff8a1f; filter: blur(22px); }
.particle { width: 4px; height: 4px; background: #ffb067; box-shadow: 0 0 14px 4px var(--haunt-glow); animation: ember 9s ease-in-out infinite; }
@keyframes ember {
  0% { transform: translateY(0) translateX(0); opacity: .9; }
  50% { transform: translateY(-34px) translateX(12px); opacity: .35; }
  100% { transform: translateY(-64px) translateX(-6px); opacity: 0; }
}

/* Branding and hero. */
.brand img { filter: drop-shadow(0 0 15px var(--haunt-glow)); }
.brand > span > span { color: var(--cyan); }
.logo-lockup img.halloween-banner {
  display: block;
  width: min(100%, 520px);
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: 14px;
  -webkit-mask-image: radial-gradient(ellipse 80% 85% at 50% 50%, #000 65%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 85% at 50% 50%, #000 65%, transparent 100%);
  filter: drop-shadow(0 18px 30px #000b) drop-shadow(0 0 26px #ff7a1830);
}
.hero-tagline { color: var(--gold); text-shadow: 0 0 18px #ff7a1866; }

/* Navigation and buttons. */
.site-nav > a.active:after { box-shadow: 0 0 10px #ff9a3c99; }
.site-nav .store-link { border-color: #ff9a3c66; box-shadow: 0 8px 22px #ff7a1830; }
.button-primary { color: #1a0b02; background: linear-gradient(120deg, #ffb347, var(--blue) 55%, var(--blue-deep)); box-shadow: 0 10px 24px #ff7a1838; }
.button-primary:hover { box-shadow: 0 13px 29px #ff7a1858; }
.button-ghost:hover { background: #ff9a3c14; }
.cart-trigger b { background: var(--gold); color: #1a0b02; }

/* Panels and cards. */
.discord-mark { border-color: #a78bfa66; background: #7c3aed26; color: #c4b5fd; }
.overview-featured { background: radial-gradient(circle at 90% 10%, #ff7a1826, transparent 44%), var(--panel); }
.category-nav button.active, .server-card.active { background: #ff7a1814; }
.category-nav button:hover, .server-tree-toggle:hover, .server-tree-toggle.active,
.server-tree-child:hover, .server-tree-child.active { background: #ff7a1812; }
.gate-icon { background: #ff7a1818; box-shadow: 0 0 26px #ff7a1826; }
.server-card-icon, .account-avatar { border-color: #ff9a3c55; }
.account-avatar { background: #1d0f2b; }
.modal-product-art { background: radial-gradient(circle at 50% 42%, #ff7a1838, transparent 48%), #140a1f; }
.comparison-wrap .mode-heading th { border-bottom-color: #ff9a3c66; }
.announcement-modal-image-wrap, .announcement-modal-body img { background: #12091b; }
.hightrust-name { color: #ffb067; background-image: linear-gradient(110deg, #ff9a3c 15%, #fff1e0 34%, #ff6a00 50%, #ffb067 68%, #ff9a3c 85%); }

/* Login gate over the hero: lighter purple veil so the banner shows through. */
.store-gate { background: linear-gradient(180deg, #0b061299, #0b0612d9 70%); backdrop-filter: blur(4px); }
.store-gate-panel { background: linear-gradient(160deg, #1d0f2bf2, #12091bf2); box-shadow: 0 30px 70px #000a, 0 0 46px #ff7a1820; }
.account-identity { background: #160b21; }
.store-nav-card { background: linear-gradient(160deg, #1f1030, #12091b); }
.product-modal-panel > .drawer-close, .announcement-modal-panel > .drawer-close { background: #12091bdd; }

/* Scrollbars. */
html { scrollbar-color: #ff7a18 #12091b; }
html::-webkit-scrollbar-track, .product-modal-panel::-webkit-scrollbar-track, .drawer-panel::-webkit-scrollbar-track { background: #12091b; }
html::-webkit-scrollbar-thumb, .product-modal-panel::-webkit-scrollbar-thumb, .drawer-panel::-webkit-scrollbar-thumb {
  border-color: #12091b;
  background: linear-gradient(180deg, #ffb347, #c2410c);
  box-shadow: 0 0 12px #ff7a1866;
}
html::-webkit-scrollbar-thumb:hover, .product-modal-panel::-webkit-scrollbar-thumb:hover, .drawer-panel::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffd08a, #ea580c); }
.product-modal-panel, .drawer-panel { scrollbar-color: #ff7a18 #12091b; }

@media (max-width: 560px) {
  .logo-lockup img.halloween-banner { width: min(100%, 360px); border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .particle { animation: none; }
}