/* --- VARIABLES & CORE --- */
:root {
  --bg: #0b0e14;
  --sidebar-bg: #080a0f;
  --bg-dark: #0a0a0a;
  --bg-dim: #1a1a1a;
  --text-primary: #f0f0f0;
  --text-dim: #b0b0b0;
  --accent-cyan: #00f2ff;
  --text: #e0e0e0;
  --accent: #74b9ff;
  --term-accent: #a3c9ff;
  --visited: #a9d4ff;
  --sidebar-border: #1a1f29;
  --rainbow-gradient: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff, #ff0000);
  --font-header: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'Consolas', monospace;
  --quote-accent: #00f2ff;
  --quote-bg: rgba(0, 242, 255, 0.05);
  --code-border: rgba(116, 185, 255, 0.2);
  --color-human: transparent;
  --color-robotic: #d9d61bc3;
  --color-synthetic: #00f2ff8f;
  --color-mutation: #00ff00;
  --color-primal: #8c00fff7;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, .app-name, .portal-card h3 {
  font-family: var(--font-header) !important;
  text-transform: none !important;
  color: var(--accent) !important;
  letter-spacing: 0.5px;
}

h1 .term-definition, h2 .term-definition, h3 .term-definition, 
h4 .term-definition, .app-name .term-definition, .portal-card h3 .term-definition {
  font-family: var(--font-body) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-weight: 600 !important;
  display: inline-block;
}

strong, .term-definition {
  font-family: var(--font-body) !important;
  color: var(--term-accent) !important;
  font-weight: 600;
}

a { color: var(--accent) !important; text-decoration: none; transition: color 0.2s ease; }
a:visited { color: var(--visited) !important; }
a:hover { text-decoration: underline; }

/* --- SIDEBAR & NAVIGATION --- */
.sidebar {
  background-color: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  width: 300px !important;
  display: block !important;
  overflow-y: auto !important;
  padding: 0 0 80px 0 !important;
  transition: transform 0.25s ease-out !important;
}

.sidebar-nav > ul > li > ul { display: none; padding-left: 15px !important; }
.sidebar-nav li.active > ul, 
.sidebar-nav li:has(.active) > ul { display: block !important; }

.sidebar-nav a {
  color: var(--text-dim) !important;
  transition: color 0.2s ease !important;
}

.sidebar-nav li.active > a {
  color: var(--accent) !important;
  font-weight: bold !important;
  border-right: 2px solid var(--accent);
}

/* --- UI CONTROLS: FIXED POSITIONS --- */
.sidebar-toggle {
  background: transparent !important;
  border: 1px solid var(--accent) !important;
  border-radius: 10px !important;
  bottom: 15px !important; /* Lifted slightly for padding */
  left: 10px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  z-index: 1000 !important;
}

.sidebar-toggle span {
  position: static !important;
  margin: 0 !important;
  background-color: var(--accent) !important;
  height: 2px !important;
  width: 20px !important;
}

#theme-toggle {
  position: fixed !important;
  bottom: 15px !important;
  left: 64px !important;
  width: 226px !important; /* Locked width for a 300px sidebar */
  height: 44px !important;
  background-color: transparent !important; /* Fixes the solid white block */
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 10px !important;
  font-family: var(--font-mono) !important; /* Consolas */
  font-size: 0.85rem !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 999 !important;
}
#theme-toggle:hover {
  background-color: var(--accent) !important;
  color: var(--sidebar-bg) !important;
}

/* --- MARKDOWN ELEMENTS --- */
.markdown-section blockquote {
  background: var(--quote-bg) !important;
  border-left: 4px solid var(--quote-accent) !important;
  color: var(--text-dim) !important;
  margin: 2em 0 !important;
  padding: 10px 20px !important;
}

.markdown-section code {
  background-color: var(--bg-dim) !important;
  border: 1px solid var(--code-border) !important;
  border-radius: 6px !important;
  color: var(--accent) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.9em !important;
  padding: 2px 6px !important;
}

.markdown-section pre {
  background-color: var(--bg-dark) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 12px !important;
  font-family: var(--font-mono) !important;
  margin: 2em 0 !important;
  padding: 1.5em !important;
  transition: transform 0.3s ease !important;
}

.markdown-section pre code {
  background: transparent !important;
  border: none !important;
  color: var(--accent) !important;
  padding: 0 !important;
}

/* --- THEMES & ANIMATIONS --- */
@keyframes ecstatic-shift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--accent); }
  50% { box-shadow: 0 0 25px var(--accent); }
}

@keyframes rainbow-shift {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body.ecstatic *:is(h1, h2, h3, a, strong, blockquote, .term-definition) *:is(a, strong, code, .term-definition) {
  animation: none !important;
  filter: none !important;
}

body.dim {
  --bg: #141d16;
  --sidebar-bg: #121a14;
  --text: #c3f7d0;
  --text-dim: #8bbf99;
  --accent: #61ff8c;
  --term-accent: #a7ffbe;
  --sidebar-border: #1f3429;
  --bg-dim: #122117;
  --code-border: rgba(0, 255, 0, 0.18);
  --quote-accent: #6bff6f;
  --quote-bg: rgba(107, 255, 111, 0.08);
}

body.ecstatic {
  --quote-accent: #ff00ff;
  --quote-bg: rgba(255, 0, 255, 0.05);
}

body.ecstatic .app-name-link img,
body.ecstatic a, 
body.ecstatic strong,
body.ecstatic .term-definition, 
body.ecstatic h1, 
body.ecstatic h2, 
body.ecstatic h3, 
body.ecstatic table th,
body.ecstatic .sidebar-toggle,
body.ecstatic #theme-toggle,
body.ecstatic .github-corner svg,
body.ecstatic .markdown-section code { 
  animation: ecstatic-shift 15s linear infinite !important;
}

body.ecstatic .markdown-section pre { animation: glow-pulse 4s ease-in-out infinite !important; }

/*  --- DECORATION BAR --- */
section.main::before {
  background: var(--rainbow-gradient);
  content: "";
  height: 4px;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

/* --- TABLES --- */
table tr:nth-child(2n) { background-color: var(--sidebar-bg) !important; }
table td, table th { border: 1px solid var(--sidebar-border) !important; color: var(--text) !important; }
table td { vertical-align: middle; }
table th {
  background-color: var(--bg-dark) !important;
  color: var(--accent) !important;
  font-family: var(--font-header);
  font-size: 1rem !important; 
}

/* --- SPECIAL COMPONENTS --- */
.wiki-stub {
  background: var(--bg);
  border-radius: 12px;
  display: flex;
  margin: 30px 0;
  overflow: hidden;
  padding: 3px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wiki-stub::before {
  background: var(--accent);
  content: '';
  height: 400%;
  left: -150%;
  position: absolute;
  top: -150%;
  width: 400%;
  z-index: 0;
}

body.ecstatic .wiki-stub::before {
  background: var(--rainbow-gradient);
  background-size: 25% 25%;
  animation: rainbow-shift 15s linear infinite;
}

.stub-inner {
  background: var(--bg-dark);
  border-radius: 9px;
  display: flex;
  align-items: center;
  padding: 20px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.stub-icon, .badge-icon {
  width: 48px !important;
  height: 48px !important;
  margin-right: 20px !important;
  flex-shrink: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 48px;
  line-height: 1 !important;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.stub-content, .badge-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.badge-entry {
  display: flex;
  align-items: center;
  margin: 15px 0;
  padding: 12px;
  background: var(--bg-dim);
  border: 1px solid var(--sidebar-border);
  border-radius: 10px;
  transition: border-color 0.3s ease;
}

.badge-entry:hover {
  border-color: var(--accent);
}

.badge-info h4 { margin: 0 !important; color: var(--accent); }
.badge-info p { margin: 4px 0 0 0 !important; font-size: 0.9rem; color: var(--text-dim); }

/* --- ICON STACK --- */
.icon-stack {
  display: inline-block;
  height: 32px;
  margin: 2px 5px;
  position: relative;
  vertical-align: middle;
  width: 32px;
}

.icon-stack span {
  background-color: transparent;
  background-blend-mode: normal;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  image-rendering: pixelated;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.icon-stack .base { background-image: url('assets/icons/powers/templates/bg.png'); filter: brightness(0.7); z-index: 0; }
.icon-stack .inner { background-blend-mode: normal; z-index: 2; }

.inner.primal, .inner.mutation, .inner.synthetic, .inner.robotic {
  background-blend-mode: multiply !important;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.robotic { background-color: var(--color-robotic) !important; }
.synthetic { background-color: var(--color-synthetic) !important; }
.mutation { background-color: var(--color-mutation) !important; }
.primal { background-color: var(--color-primal) !important; }

/* --- PORTAL GRID LAYOUT --- */
.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 2em 0;
}

.portal-card {
  background: var(--bg-dark);
  border: 1px solid var(--sidebar-border);
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.portal-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
}

.portal-card h3 {
  margin-top: 0 !important;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 10px;
}

.portal-card ul {
  list-style: none;
  padding-left: 0;
  margin-top: 15px;
}

.portal-card li {
  margin: 8px 0;
  font-size: 0.9rem;
}

/* --- DIVIDER PIPE SPACING --- */
.nav-tray span, 
.wiki-stub span, 
.portal-card span {
  margin: 0 10px;
  color: var(--accent);
  font-weight: bold;
  font-family: var(--font-mono);
}

/* --- GITHUB CORNER: ACCENT SYNC --- */
.github-corner svg {
  fill: var(--accent) !important;
  color: var(--bg) !important;
  transition: fill 0.3s ease, color 0.3s ease !important;
}

/* --- STUB LINK ARCHITECTURE --- */
.stub-link {
  color: var(--text-dim) !important;
  text-decoration: line-through !important;
  cursor: not-allowed !important;
  opacity: 0.6;
  position: relative;
}

.stub-link::after {
  content: " [STUB]";
  font-family: var(--font-mono);
  font-size: 0.65rem;
  vertical-align: super;
  color: var(--accent);
  opacity: 0.8;
  text-decoration: none !important;
  display: inline-block;
  margin-left: 4px;
}

.stub-link:visited {
  color: var(--text-dim) !important;
}

/* Ensure the Ecstatic theme doesn't make stubs look "active" */
body.ecstatic .stub-link {
  animation: none !important;
  filter: grayscale(1) !important;
}