/* ggnomz reference aesthetic — calm dusk layers (Alto) + soft neon bloom (Interstella / LEGO) */

/* --- Design tokens (override per-page :root when loaded last) --- */
html[data-theme="dark"],
html:not([data-theme="light"]) {
  --bg: #140a2e;
  --bg-soft: #261845;
  --card: rgba(58, 38, 102, 0.52);
  --ink: #f8f4ff;
  --muted: #c4b8e8;
  --pink: #ff8fd4;
  --green: #d4ff7a;
  --blue: #9b8cff;
  --cyan: #6ee7ff;
  --radius: 20px;
  --bg-gradient:
    linear-gradient(180deg, #0f0822 0%, #2a1a52 38%, #5c3d8a 72%, #8a5c9e 100%);
  --header-bg: rgba(20, 10, 40, 0.72);
  --line: rgba(255, 255, 255, 0.12);
  --field-line: rgba(255, 255, 255, 0.18);
  --glow-pink: rgba(255, 143, 212, 0.45);
  --glow-lime: rgba(212, 255, 122, 0.35);
  --glow-violet: rgba(155, 140, 255, 0.4);
  --panel-fill: rgba(36, 22, 68, 0.55);
}

html[data-theme="light"] {
  --bg: #a094b8;
  --bg-soft: #9488ac;
  --card: rgba(188, 178, 208, 0.88);
  --ink: #1e1248;
  --muted: #4a4270;
  --pink: #e85eb8;
  --green: #4a7a00;
  --blue: #7560ff;
  --cyan: #3cb8d4;
  --radius: 20px;
  --bg-gradient: radial-gradient(
    ellipse 125% 95% at 50% -8%,
    #c8b8dc 0%,
    #b0a0c4 32%,
    #988cb0 58%,
    #807498 100%
  );
  --header-bg: rgba(168, 156, 192, 0.88);
  --line: rgba(90, 60, 160, 0.22);
  --field-line: rgba(90, 60, 160, 0.3);
  --glow-pink: rgba(232, 94, 184, 0.38);
  --glow-lime: rgba(181, 255, 60, 0.32);
  --glow-violet: rgba(117, 96, 255, 0.36);
  --panel-fill: rgba(178, 168, 200, 0.85);
}

/* --- Atmospheric sky (fixed, behind content) --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 50% 108%, var(--glow-pink), transparent 58%),
    radial-gradient(ellipse 45% 35% at 88% 12%, var(--glow-violet), transparent 52%),
    radial-gradient(ellipse 40% 30% at 8% 22%, var(--glow-lime), transparent 48%);
  opacity: 0.85;
}

html[data-theme="light"] body::before {
  opacity: 0.72;
}

/* Subtle star grain (Alto night sky) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 78% 8%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 44% 32%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 91% 62%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 22% 74%, rgba(255, 255, 255, 0.25), transparent);
  background-size: 100% 100%;
}

html[data-theme="light"] body::after {
  opacity: 0.4;
}

body {
  background: var(--bg-gradient) !important;
  background-attachment: fixed !important;
  line-height: 1.6;
}

/* Header shell: header-nav.css (loaded last) */

.brand-text {
  color: var(--ink) !important;
  text-shadow: 0 0 28px var(--glow-lime);
}

html[data-theme="light"] .brand-text {
  text-shadow: 0 2px 16px var(--glow-violet);
}

/* --- Panels & cards: frosted layers --- */
.panel,
.card:not([data-clip-slot]) {
  background: var(--panel-fill) !important;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid var(--line) !important;
  border-radius: calc(var(--radius) + 4px) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 20px 48px rgba(8, 4, 24, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="light"] .panel,
html[data-theme="light"] .card:not([data-clip-slot]) {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.95),
    0 16px 40px rgba(60, 40, 120, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Feed clip tiles: layered glass over dusk sky */
.card[data-clip-slot],
.card.card--feed-spotlight {
  border-radius: 22px !important;
  overflow: hidden;
  background: rgba(32, 18, 62, 0.72) !important;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

html[data-theme="light"] .card[data-clip-slot],
html[data-theme="light"] .card.card--feed-spotlight {
  background: rgba(192, 182, 214, 0.82) !important;
}

/* --- Buttons: calm pills with bloom --- */
.btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(8, 4, 24, 0.2) !important;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.1),
    0 12px 32px rgba(8, 4, 24, 0.26),
    0 0 28px var(--glow-violet) !important;
}

.btn-primary {
  background: linear-gradient(
    105deg,
    var(--blue) 0%,
    var(--pink) 52%,
    #ffb8a8 100%
  ) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(20, 8, 40, 0.35);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.14),
    0 10px 32px rgba(8, 4, 24, 0.28),
    0 0 32px var(--glow-pink) !important;
}

.btn-primary:hover:not(:disabled) {
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.12),
    0 14px 36px rgba(8, 4, 24, 0.3),
    0 0 44px var(--glow-pink),
    0 0 64px var(--glow-lime) !important;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: var(--line) !important;
}

html[data-theme="light"] .btn-ghost {
  background: rgba(255, 255, 255, 0.65) !important;
}

/* --- Typography hierarchy --- */
h1,
h2,
h3 {
  letter-spacing: 0.02em !important;
  font-weight: 800 !important;
}

.lead,
.sub:not(.hero-welcome),
.brand-feed-kicker {
  color: var(--muted) !important;
  line-height: 1.65 !important;
}

/* --- Chips & inputs --- */
.chip {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .chip {
  background: rgba(117, 96, 255, 0.08) !important;
}

input[type="search"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea,
select {
  background: rgba(0, 0, 0, 0.2) !important;
  border-color: var(--field-line) !important;
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="url"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: rgba(255, 255, 255, 0.9) !important;
}

a.gamertag,
.social-link {
  color: var(--green) !important;
  text-shadow: 0 0 18px var(--glow-lime);
}

/* --- Nomnom spotlight: sunset lantern glow --- */
.nomnom-feed-spotlight .card.card--feed-spotlight {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    0 0 0 1px rgba(212, 255, 122, 0.15),
    0 8px 32px rgba(8, 4, 24, 0.35),
    0 0 48px var(--glow-pink),
    0 0 80px var(--glow-violet) !important;
}

html[data-theme="light"] .nomnom-feed-spotlight .card.card--feed-spotlight {
  box-shadow:
    0 0 0 1px rgba(127, 200, 0, 0.2),
    0 10px 36px rgba(80, 50, 140, 0.14),
    0 0 40px var(--glow-pink),
    0 0 56px var(--glow-violet) !important;
}

/* --- Featured player: Interstella lens bloom --- */
.featured-player-panel::before {
  opacity: 0.55 !important;
  filter: blur(24px) !important;
  background:
    radial-gradient(ellipse 90% 80% at 50% 40%, var(--glow-violet), transparent 60%),
    radial-gradient(ellipse 70% 60% at 20% 60%, var(--glow-pink), transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 35%, rgba(110, 231, 255, 0.35), transparent 50%) !important;
}

.featured-player-panel::after {
  opacity: 0.4 !important;
  filter: blur(14px) !important;
}

/* --- Hub tiles & creator cards hover --- */
a.tile,
main .grid .card {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease !important;
}

a.tile:hover,
main .grid .card:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 16px 40px rgba(8, 4, 24, 0.28),
    0 0 36px var(--glow-violet) !important;
}

/* --- Motion sky harmonize --- */
.motion-sticker {
  opacity: 0.14 !important;
  filter: drop-shadow(0 0 12px var(--glow-lime)) !important;
}

html[data-theme="light"] .motion-sticker {
  opacity: 0.22 !important;
}

html[data-theme="light"] .featured-player-panel::before {
  opacity: 0.7 !important;
}

html[data-theme="light"] .featured-player-panel::after {
  opacity: 0.48 !important;
}

.feed-arrow-deco {
  filter: drop-shadow(0 0 14px var(--glow-lime)) drop-shadow(0 4px 16px rgba(8, 4, 24, 0.25)) !important;
}

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