/* ═══════════════════════════════════════════════════
   ASCENDANT PATH — Mixed Glass/Ink Design System
   Loads after all other stylesheets — wins by !important
═══════════════════════════════════════════════════ */

html { background: #0b0b0b; }
body { background: transparent !important; background-color: transparent !important; }

/* Override CSS variables at root so var() references pick up new values */
:root {
  --bg-void: transparent !important;
  --bg-deep: transparent !important;
  --bg-1: transparent !important;
  --bg-2: transparent !important;
  --bg: transparent !important;
  --bg-surface: transparent !important;
  --bg-card: rgba(5,5,10,0.78) !important;
  --bg-elevated: rgba(10,10,18,0.52) !important;
  --panel-bg: rgba(10,10,18,0.52) !important;
  --panel-border: rgba(200,169,106,0.16) !important;
  --border: rgba(200,169,106,0.16) !important;
  --border-soft: rgba(200,169,106,0.10) !important;
}

/* ── Glass panels ── */
.dashboard-panel {
  background: rgba(10,10,18,0.52) !important;
  border: 0.5px solid rgba(200,169,106,0.16) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.side-panel,
.sanctum-panel {
  background: rgba(10,10,18,0.52) !important;
  border: 0.5px solid rgba(200,169,106,0.16) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* ── Ink cards ── */
.info-block,
.resource-card,
.sanctum-meta-card,
.clock-forecast-card,
.notice-secondary-card {
  background: rgba(5,5,10,0.78) !important;
  border: 0.5px solid rgba(200,169,106,0.14) !important;
  border-top: 1px solid rgba(200,169,106,0.32) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* ── Notices ── */
.notice-featured {
  background: rgba(5,5,10,0.82) !important;
  border: 0.5px solid rgba(200,169,106,0.18) !important;
  border-top: 1px solid rgba(200,169,106,0.38) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.notice-secondary-card.warn    { border-top-color: rgba(200,169,106,0.50) !important; }
.notice-secondary-card.danger  { border-top-color: rgba(204,68,68,0.50) !important; }
.notice-secondary-card.info    { border-top-color: rgba(90,154,204,0.40) !important; }
.notice-secondary-card.success { border-top-color: rgba(0,168,107,0.50) !important; }

/* ── Nav — glass pill ── */
.dashboard-nav {
  background: rgba(10,10,18,0.52) !important;
  border: 0.5px solid rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.dashboard-nav a {
  background: rgba(255,255,255,0.03) !important;
  border: 0.5px solid rgba(255,255,255,0.06) !important;
}
.dashboard-nav a:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(200,169,106,0.22) !important;
}
.dashboard-nav a.active {
  background: rgba(200,169,106,0.11) !important;
  border: 0.5px solid rgba(200,169,106,0.32) !important;
  color: #c8a96a !important;
}

/* ── Ticker — ink wash ── */
#news-ticker-bar {
  background: rgba(5,5,10,0.88) !important;
  border-top: 0.5px solid rgba(200,169,106,0.28) !important;
  border-bottom: 0.5px solid rgba(200,169,106,0.28) !important;
}

/* ── Path cards — ink + left gold bar ── */
.path-card {
  background: rgba(5,5,10,0.82) !important;
  border: 0.5px solid rgba(200,169,106,0.16) !important;
  border-left: 2px solid rgba(200,169,106,0.45) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
.path-card:hover { background: rgba(200,169,106,0.06) !important; border-left-color: #c8a96a !important; }

/* ── State chips ── */
.state-chip {
  background: rgba(5,5,10,0.6) !important;
  border: 0.5px solid rgba(200,169,106,0.14) !important;
}
.state-chip.active  { background: rgba(0,168,107,0.09) !important; border-color: rgba(0,168,107,0.28) !important; }
.state-chip.warn    { background: rgba(200,169,106,0.08) !important; border-color: rgba(200,169,106,0.24) !important; }
.state-chip.info    { background: rgba(90,154,204,0.08) !important; border-color: rgba(90,154,204,0.22) !important; }
.state-chip.danger  { background: rgba(204,68,68,0.08) !important; border-color: rgba(204,68,68,0.22) !important; }

/* ── Celestial strip ── */
.celestial-strip-inner { background: rgba(5,5,10,0.75) !important; }
.celestial-strip-button {
  background: rgba(5,5,10,0.6) !important;
  border-color: rgba(200,169,106,0.24) !important;
}
.celestial-strip-button.secondary {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── Sanctum / liquid / vessel ── */
.sanctum-shell      { background: rgba(5,5,10,0.35) !important; border-color: rgba(200,169,106,0.16) !important; }
.liquid-chamber     { background: rgba(5,5,10,0.82) !important; border: 0.5px solid rgba(200,169,106,0.18) !important; }
.liquid-core        { background: rgba(3,5,12,0.90) !important; }
.vessel-base        { background: rgba(5,5,10,0.60) !important; border-color: rgba(200,169,106,0.14) !important; }
.path-emblem-wrap   { background: rgba(5,5,10,0.82) !important; border-color: rgba(200,169,106,0.14) !important; }

/* ── Clock ── */
.hex-phase-node          { background: rgba(5,5,10,0.70) !important; border-color: rgba(200,169,106,0.10) !important; }
.hex-phase-node.is-active{ background: rgba(10,10,20,0.92) !important; border-color: rgba(200,169,106,0.28) !important; }
.hex-core                { background: rgba(5,5,10,0.95) !important; border-color: rgba(200,169,106,0.20) !important; }
.imperial-hex-frame      { background: rgba(5,5,12,0.98) !important; }
.nature-force-seal       { background: rgba(5,5,10,0.70) !important; border-color: rgba(200,169,106,0.22) !important; }

/* ── Notif dropdown ── */
.notif-dropdown   { background: rgba(5,5,10,0.95) !important; border: 0.5px solid rgba(200,169,106,0.22) !important; backdrop-filter: blur(12px) !important; }
.notif-item:hover { background: rgba(200,169,106,0.05) !important; }

/* ── z-index ── */
.rune-layer, .cloud-layer { z-index: 1 !important; pointer-events: none !important; }
.lightning-flash           { z-index: 2 !important; pointer-events: none !important; }
.site-shell, nav, header, main, footer,
.dashboard-home-page, .site-header, #news-ticker-bar,
[class*="-panel"],[class*="-wrap"],[class*="-page"] {
  position: relative; z-index: 3;
}