/* ============================================
   ASDF BUILD - Yggdrasil & Marketplace
   The World Tree - Vertical Medallion Layout
   ============================================ */

@import url('./design-tokens.css');

:root {
  /* Fire Palette */
  --bg-void: #0a0a0f;
  --bg-dark: #0c0c0c;
  --bg-charred: #1a0f05;
  --bg-burnt: #2d1810;
  --border-rust: #7c2d12;
  --border-orange: #9a3412;
  --accent-fire: #ea580c;
  --accent-bright: #fb923c;
  --accent-ember: #f97316;
  --text-cream: #ffedd5;
  --text-muted: #a8a29e;
  --green: #22c55e;
  --green-light: #4ade80;
  --purple: #a855f7;
  --blue: #3b82f6;
  --cyan: #22d3ee;
  --red: #ef4444;
  --gold: #fbbf24;
  --silver: #9ca3af;
  --bronze: #d97706;

  /* Tree Colors */
  --tree-trunk: #5d3a1a;
  --tree-branch: #8b5a2b;
  --tree-glow: rgba(234, 88, 12, 0.4);
  --tree-leaf: #22c55e;

  /* Nordic Colors */
  --nordic-gold: #d4af37;
  --nordic-silver: #c0c0c0;
  --nordic-bronze: #cd7f32;

  /* Typography */
  --font-display: 'Comic Neue', cursive;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --container-max: 1400px;
  --radius: 12px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  background: #020812;
}

body {
  font-family: var(--font-mono);
  background: transparent;
  color: var(--text-cream);
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-charred);
}
::-webkit-scrollbar-thumb {
  background: var(--border-rust);
  border-radius: var(--radius-xs);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-fire);
}

:focus-visible {
  outline: 2px solid var(--accent-fire);
  outline-offset: 2px;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ============================================
   NAVIGATION
   ============================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding: var(--space-md) var(--space-lg);
  background: rgba(10, 10, 15, 0.95);
  backdrop-filter: blur(var(--space-md));
  border-bottom: 2px solid var(--border-rust);
}

.nav-content {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--text-cream);
}

.nav-logo-icon {
  font-size: var(--text-xl);
}

.nav-logo-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  text-shadow: 2px 2px 0 var(--accent-fire);
}

.nav-tabs {
  display: flex;
  gap: var(--space-xs);
  background: var(--bg-charred);
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-rust);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-tab {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  white-space: nowrap;
  font-family: var(--font-mono);
  text-decoration: none;
}

.nav-tab:hover {
  color: var(--text-cream);
}
.nav-tab.active {
  background: var(--accent-fire);
  color: #fff;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  border: 2px solid var(--border-rust);
  border-radius: var(--radius);
  background: var(--bg-burnt);
  color: var(--text-cream);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  box-shadow: 4px 4px 0 var(--border-rust);
}

.btn:hover {
  background: var(--accent-fire);
  border-color: var(--accent-fire);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--border-rust);
}

.btn-primary {
  background: var(--accent-fire);
  border-color: var(--accent-bright);
}

.btn-sm {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-xs);
  box-shadow: 2px 2px 0 var(--border-rust);
}

/* ============================================
   VIEW SWITCHER
   ============================================ */

.view-switcher-container {
  margin-top: 70px;
  padding: var(--space-lg) 0;
  background: linear-gradient(180deg, var(--bg-charred) 0%, var(--bg-void) 100%);
  border-bottom: 2px solid var(--border-rust);
  position: sticky;
  top: 58px;
  z-index: var(--z-sticky);
}

.view-switcher {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}

.view-switch-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-mono);
  pointer-events: auto;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  background: var(--bg-burnt);
  border: 2px solid var(--border-rust);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--duration-normal) ease;
}

.view-switch-btn:hover {
  color: var(--text-cream);
  border-color: var(--accent-fire);
}

.view-switch-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-fire), var(--accent-ember));
  border-color: var(--accent-bright);
  box-shadow: 0 4px 20px rgba(234, 88, 12, 0.4);
}

.view-switch-icon {
  font-size: var(--text-lg);
}
.view-switch-label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.view-section {
  display: none;
  animation: fadeIn var(--duration-normal) ease;
}

.view-section.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================
   YGGDRASIL HERO
   ============================================ */

.yggdrasil-hero {
  padding: 25px 0 15px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(34, 197, 94, 0.08) 0%, transparent 60%);
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(34, 197, 94, 0.15);
  border: 2px solid var(--green);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.3);
  }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 72px);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg, var(--green) 0%, var(--green-light) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto var(--space-lg);
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.hero-stat {
  text-align: center;
}

.hero-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--accent-bright);
}

.hero-stat-value.green {
  color: var(--green);
}
.hero-stat-value.gold {
  color: var(--gold);
}

.hero-stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ============================================
   FILTER SECTION
   ============================================ */

.filter-section {
  padding: var(--space-sm) 0;
}

.filter-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.filter-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-right: var(--space-sm);
}

.filter-pill,
.skill-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  background: var(--bg-charred);
  border: 2px solid var(--border-rust);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.filter-pill:hover,
.skill-pill:hover {
  color: var(--text-cream);
  border-color: var(--accent-fire);
}

.filter-pill.active,
.skill-pill.active {
  color: #000;
  background: var(--accent-fire);
  border-color: var(--accent-fire);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.live {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2s infinite;
}

.status-dot.building {
  background: var(--accent-fire);
  box-shadow: 0 0 8px var(--accent-fire);
}

.status-dot.planned {
  background: var(--purple);
  box-shadow: 0 0 8px var(--purple);
}

/* ============================================
   YGGDRASIL WORLD TREE - RADIAL BRANCH DESIGN
   Majestic golden tree with projects at branch ends
   ============================================ */

.tree-section {
  padding: 20px 0;
  overflow: hidden;
  position: relative;
  min-height: 650px;
  /* Black background */
  background: #0a0a0a;
}

/* Yggdrasil Tree Silhouette - White/Green on black */
.tree-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 700'%3E%3Cdefs%3E%3ClinearGradient id='trunk' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%234ade80'/%3E%3Cstop offset='50%25' stop-color='%23ffffff'/%3E%3Cstop offset='100%25' stop-color='%23a78bfa'/%3E%3C/linearGradient%3E%3CradialGradient id='foliage' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%234ade80' stop-opacity='0.4'/%3E%3Cstop offset='50%25' stop-color='%2322c55e' stop-opacity='0.2'/%3E%3Cstop offset='100%25' stop-color='%234ade80' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='centerGlow' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='0.3'/%3E%3Cstop offset='50%25' stop-color='%23fb923c' stop-opacity='0.15'/%3E%3Cstop offset='100%25' stop-color='%23ea580c' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C!-- Canopy foliage mass --%3E%3Cellipse cx='400' cy='100' rx='380' ry='100' fill='url(%23foliage)'/%3E%3Cellipse cx='300' cy='120' rx='200' ry='100' fill='url(%23foliage)'/%3E%3Cellipse cx='500' cy='120' rx='200' ry='100' fill='url(%23foliage)'/%3E%3Cellipse cx='400' cy='80' rx='280' ry='80' fill='url(%23foliage)'/%3E%3C!-- Center glow --%3E%3Ccircle cx='400' cy='320' r='80' fill='url(%23centerGlow)'/%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- Main trunk --%3E%3Cpath d='M400,650 Q395,500 400,350 Q405,200 400,50' stroke='url(%23trunk)' stroke-width='25' opacity='0.3'/%3E%3Cpath d='M380,650 Q365,480 370,350 Q375,200 380,80' stroke='%23ffffff' stroke-width='8' opacity='0.15'/%3E%3Cpath d='M420,650 Q435,480 430,350 Q425,200 420,80' stroke='%23ffffff' stroke-width='8' opacity='0.15'/%3E%3C!-- Left canopy branches --%3E%3Cpath d='M400,280 Q320,220 200,140 Q100,80 0,40' stroke='%234ade80' stroke-width='10' opacity='0.25'/%3E%3Cpath d='M400,300 Q300,250 160,180 Q60,120 0,100' stroke='%2322c55e' stroke-width='7' opacity='0.2'/%3E%3Cpath d='M400,250 Q340,200 240,130 Q160,80 80,30' stroke='%234ade80' stroke-width='5' opacity='0.2'/%3E%3Cpath d='M400,320 Q280,280 140,240 Q40,210 0,200' stroke='%2322c55e' stroke-width='4' opacity='0.15'/%3E%3C!-- Right canopy branches --%3E%3Cpath d='M400,280 Q480,220 600,140 Q700,80 800,40' stroke='%234ade80' stroke-width='10' opacity='0.25'/%3E%3Cpath d='M400,300 Q500,250 640,180 Q740,120 800,100' stroke='%2322c55e' stroke-width='7' opacity='0.2'/%3E%3Cpath d='M400,250 Q460,200 560,130 Q640,80 720,30' stroke='%234ade80' stroke-width='5' opacity='0.2'/%3E%3Cpath d='M400,320 Q520,280 660,240 Q760,210 800,200' stroke='%2322c55e' stroke-width='4' opacity='0.15'/%3E%3C!-- Left roots --%3E%3Cpath d='M400,380 Q320,450 200,540 Q100,620 0,680' stroke='%23a78bfa' stroke-width='8' opacity='0.2'/%3E%3Cpath d='M400,400 Q280,480 140,580 Q40,650 0,700' stroke='%238b5cf6' stroke-width='6' opacity='0.15'/%3E%3Cpath d='M400,420 Q300,500 180,600 Q80,680 0,750' stroke='%23a78bfa' stroke-width='4' opacity='0.12'/%3E%3C!-- Right roots --%3E%3Cpath d='M400,380 Q480,450 600,540 Q700,620 800,680' stroke='%23a78bfa' stroke-width='8' opacity='0.2'/%3E%3Cpath d='M400,400 Q520,480 660,580 Q760,650 800,700' stroke='%238b5cf6' stroke-width='6' opacity='0.15'/%3E%3Cpath d='M400,420 Q500,500 620,600 Q720,680 800,750' stroke='%23a78bfa' stroke-width='4' opacity='0.12'/%3E%3C!-- Center root --%3E%3Cpath d='M400,380 Q400,500 400,650' stroke='%23a78bfa' stroke-width='6' opacity='0.15'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* Subtle glow in center */
.tree-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at center 45%, rgba(251, 146, 60, 0.1) 0%, transparent 30%),
    radial-gradient(ellipse at center, rgba(74, 222, 128, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 2;
}

.tree-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 600px;
  min-height: 600px;
  margin: 0 auto;
  padding: 0 20px;
  z-index: 10;
  pointer-events: auto;
}

/* Radial Tree Container */
.yggdrasil-radial {
  position: relative;
  width: 100%;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main SVG Tree */
.tree-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.tree-svg path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================
   CENTRAL CORE - Burn Engine
   ============================================ */

.tree-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  z-index: var(--z-elevated);
  cursor: pointer;
  transition: transform var(--duration-normal) ease;
}

.tree-core:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.tree-core .core-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  background: radial-gradient(
    circle,
    rgba(255, 107, 0, 0.6) 0%,
    rgba(255, 69, 0, 0.3) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: coreGlowPulse 3s ease-in-out infinite;
}

@keyframes coreGlowPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
}

.tree-core .core-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border: 3px solid #d4af37;
  border-radius: 50%;
  box-shadow:
    0 0 20px rgba(212, 175, 55, 0.5),
    inset 0 0 20px rgba(255, 107, 0, 0.3);
}

.tree-core .core-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: radial-gradient(circle at 30% 30%, #2a1a0a 0%, #1a0f05 100%);
  border: 2px solid #b8860b;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 30px rgba(255, 107, 0, 0.6),
    inset 0 0 15px rgba(255, 107, 0, 0.2);
}

.tree-core .core-icon {
  font-size: var(--text-2xl);
  filter: drop-shadow(0 0 8px rgba(255, 107, 0, 0.8));
}

.tree-core .core-label {
  font-size: 8px;
  font-weight: var(--font-bold);
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.tree-core .core-runes {
  position: absolute;
  width: 110px;
  height: 110px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: runesRotate 60s linear infinite;
}

.tree-core .core-runes span {
  position: absolute;
  font-size: 10px;
  color: #d4af37;
  text-shadow: 0 0 8px #d4af37;
  opacity: 0.7;
}

.tree-core .core-runes span:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.tree-core .core-runes span:nth-child(2) {
  top: 15%;
  right: 15%;
}
.tree-core .core-runes span:nth-child(3) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.tree-core .core-runes span:nth-child(4) {
  bottom: 15%;
  right: 15%;
}
.tree-core .core-runes span:nth-child(5) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.tree-core .core-runes span:nth-child(6) {
  bottom: 15%;
  left: 15%;
}
.tree-core .core-runes span:nth-child(7) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.tree-core .core-runes span:nth-child(8) {
  top: 15%;
  left: 15%;
}

@keyframes runesRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ============================================
   PROJECT NODES - At Branch Ends
   ============================================ */

.tree-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: var(--z-content);
  cursor: pointer;
  transition: transform var(--duration-normal) ease;
}

.tree-node:hover {
  transform: scale(1.15);
  z-index: var(--z-elevated);
}

.tree-node .node-glow {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(10px);
  animation: nodeGlow 4s ease-in-out infinite;
  z-index: -1;
}

.tree-node .node-glow.live {
  background: rgba(34, 197, 94, 0.5);
}
.tree-node .node-glow.building {
  background: rgba(234, 88, 12, 0.5);
}
.tree-node .node-glow.planned {
  background: rgba(168, 85, 247, 0.4);
}

@keyframes nodeGlow {
  0%,
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

.tree-node .node-medallion {
  width: 45px;
  height: 45px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(40, 40, 50, 0.95) 0%,
    rgba(20, 20, 30, 1) 100%
  );
  border: 2px solid #d4af37;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
  transition: all var(--duration-normal) ease;
}

.tree-node:hover .node-medallion {
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.8);
  border-color: #ffd700;
}

.tree-node[data-status='live'] .node-medallion {
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}

.tree-node[data-status='building'] .node-medallion {
  box-shadow: 0 0 15px rgba(234, 88, 12, 0.5);
}

.tree-node[data-status='planned'] .node-medallion {
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
  opacity: 0.8;
}

.tree-node .node-icon {
  font-size: var(--text-lg);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.tree-node .node-label {
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  color: var(--text-cream);
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

/* ============================================
   NODE POSITIONS - Matching SVG branch ends
   ============================================ */

/* Top - Ecosystem */
.tree-node.top-center {
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
}
.tree-node.top-center:hover {
  transform: translateX(-50%) scale(1.15);
}

/* Upper Left - Community */
.tree-node.upper-left {
  top: 18%;
  left: 15%;
}

/* Upper Right - HolDEX */
.tree-node.upper-right {
  top: 18%;
  right: 15%;
}

/* Mid Left - Learn */
.tree-node.mid-left {
  top: 32%;
  left: 5%;
}

/* Mid Right - Oracle */
.tree-node.mid-right {
  top: 32%;
  right: 5%;
}

/* Lower Left - Burn Tracker */
.tree-node.lower-left {
  top: 75%;
  left: 8%;
}

/* Lower Right - RPC Monitor */
.tree-node.lower-right {
  top: 75%;
  right: 8%;
}

/* Bottom Left - Launcher */
.tree-node.bottom-left {
  top: 88%;
  left: 16%;
}

/* Bottom Center - Security */
.tree-node.bottom-center {
  top: 95%;
  left: 50%;
  transform: translateX(-50%);
}
.tree-node.bottom-center:hover {
  transform: translateX(-50%) scale(1.15);
}

/* Bottom Right - Games */
.tree-node.bottom-right {
  top: 88%;
  right: 16%;
}

/* ============================================
   LEGACY STYLES (kept for compatibility)
   ============================================ */

.level-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  white-space: nowrap;
  z-index: var(--z-content);
}

/* Realms Row */
.realms-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) 0;
  gap: var(--space-lg);
}

/* Individual Realm (Medallion Style - Norse Reference) */
.realm {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all var(--duration-normal) ease;
  z-index: var(--z-content);
}

.realm:hover {
  transform: scale(1.15);
}

.realm:hover .realm-medallion {
  box-shadow: 0 0 50px var(--realm-color, var(--accent-fire));
}

.realm:hover .realm-outer-ring {
  animation-duration: 8s;
}

/* Realm Glow Effect - Nebula style */
.realm-glow {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: realmPulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  filter: blur(15px);
}

.realm-glow.live {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.5) 0%, transparent 70%);
}

.realm-glow.building {
  background: radial-gradient(circle, rgba(234, 88, 12, 0.5) 0%, transparent 70%);
}

.realm-glow.planned {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%);
}

/* Realm-specific nebula colors */
.realm[data-realm='asgard'] .realm-glow {
  background: radial-gradient(circle, rgba(192, 192, 192, 0.5) 0%, transparent 70%);
}
.realm[data-realm='vanaheim'] .realm-glow {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, transparent 70%);
}
.realm[data-realm='alfheim'] .realm-glow {
  background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, transparent 70%);
}
.realm[data-realm='niflheim'] .realm-glow {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
}
.realm[data-realm='muspelheim'] .realm-glow {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.5) 0%, transparent 70%);
}
.realm[data-realm='jotunheim'] .realm-glow {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, transparent 70%);
}
.realm[data-realm='nidavellir'] .realm-glow {
  background: radial-gradient(circle, rgba(161, 98, 7, 0.4) 0%, transparent 70%);
}
.realm[data-realm='helheim'] .realm-glow {
  background: radial-gradient(circle, rgba(100, 116, 139, 0.4) 0%, transparent 70%);
}

@keyframes realmPulse {
  0%,
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* Realm Runes - Positioned in circle around medallion */
.realm-runes {
  position: absolute;
  width: 65px;
  height: 65px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: runesRotate 40s linear infinite;
  z-index: 3;
}

.realm-runes span {
  position: absolute;
  font-size: 8px;
  color: var(--nordic-gold);
  text-shadow: 0 0 6px var(--nordic-gold);
  opacity: 0.7;
}

/* Position runes in a circle (8 positions, 45° apart) */
.realm-runes span:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.realm-runes span:nth-child(2) {
  top: 14%;
  right: 14%;
}
.realm-runes span:nth-child(3) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.realm-runes span:nth-child(4) {
  bottom: 14%;
  right: 14%;
}
.realm-runes span:nth-child(5) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.realm-runes span:nth-child(6) {
  bottom: 14%;
  left: 14%;
}
.realm-runes span:nth-child(7) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.realm-runes span:nth-child(8) {
  top: 14%;
  left: 14%;
}

@keyframes runesRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Realm Medallion - Main circular element */
.realm-medallion {
  position: relative;
  width: 45px;
  height: 45px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(60, 60, 80, 0.9) 0%,
    rgba(30, 30, 50, 0.95) 50%,
    rgba(20, 20, 35, 1) 100%
  );
  border: 2px solid rgba(212, 175, 55, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: all var(--duration-normal) ease;
  box-shadow:
    0 0 15px rgba(0, 0, 0, 0.8),
    inset 0 0 15px rgba(0, 0, 0, 0.5),
    inset 0 2px 8px rgba(255, 255, 255, 0.1);
}

/* Inner decorative ring */
.realm-medallion::before {
  content: '';
  position: absolute;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, 0.3);
  animation: innerRingRotate 15s linear infinite reverse;
}

/* Realm-specific border colors */
.realm[data-realm='asgard'] .realm-medallion {
  border-color: rgba(192, 192, 192, 0.8);
  --realm-color: #c0c0c0;
}
.realm[data-realm='vanaheim'] .realm-medallion {
  border-color: rgba(236, 72, 153, 0.8);
  --realm-color: #ec4899;
}
.realm[data-realm='alfheim'] .realm-medallion {
  border-color: rgba(147, 51, 234, 0.8);
  --realm-color: #9333ea;
}
.realm[data-realm='niflheim'] .realm-medallion {
  border-color: rgba(59, 130, 246, 0.8);
  --realm-color: #3b82f6;
}
.realm[data-realm='midgard'] .realm-medallion {
  border-color: rgba(234, 88, 12, 0.9);
  --realm-color: #ea580c;
}
.realm[data-realm='muspelheim'] .realm-medallion {
  border-color: rgba(239, 68, 68, 0.8);
  --realm-color: #ef4444;
}
.realm[data-realm='jotunheim'] .realm-medallion {
  border-color: rgba(251, 191, 36, 0.8);
  --realm-color: #fbbf24;
}
.realm[data-realm='nidavellir'] .realm-medallion {
  border-color: rgba(161, 98, 7, 0.8);
  --realm-color: #a16207;
}
.realm[data-realm='helheim'] .realm-medallion {
  border-color: rgba(100, 116, 139, 0.8);
  --realm-color: #64748b;
}

.realm[data-status='live'] .realm-medallion {
  box-shadow:
    0 0 25px rgba(34, 197, 94, 0.4),
    inset 0 0 15px rgba(34, 197, 94, 0.1);
}

.realm[data-status='building'] .realm-medallion {
  box-shadow:
    0 0 25px rgba(234, 88, 12, 0.4),
    inset 0 0 15px rgba(234, 88, 12, 0.1);
}

.realm[data-status='planned'] .realm-medallion {
  box-shadow:
    0 0 25px rgba(168, 85, 247, 0.3),
    inset 0 0 15px rgba(168, 85, 247, 0.1);
  opacity: 0.85;
}

/* Realm Rune Icon (center) */
.realm-icon {
  font-size: var(--text-lg);
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Realm Name - Below medallion */
.realm-name {
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  color: var(--text-cream);
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  text-transform: uppercase;
  letter-spacing: var(--tracking-normal);
}

/* ============================================
   MIDGARD - CORE REALM (Burn Engine)
   The Heart of Yggdrasil
   ============================================ */

.tree-level.midgard {
  padding: 8px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.core-realm {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto;
  cursor: pointer;
  transition: all var(--duration-normal) ease;
}

.core-realm:hover {
  transform: scale(1.08);
}

.core-realm:hover .core-medallion {
  box-shadow:
    0 0 80px rgba(234, 88, 12, 0.8),
    0 0 120px rgba(234, 88, 12, 0.4),
    inset 0 0 40px rgba(234, 88, 12, 0.3);
}

/* Outer rotating ring with runes */
.core-outer-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(234, 88, 12, 0.6);
  border-radius: 50%;
  animation: outerRingRotate 25s linear infinite;
}

/* Runic markers on outer ring */
.core-outer-ring::before,
.core-outer-ring::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--accent-bright);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--accent-fire);
}

.core-outer-ring::before {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.core-outer-ring::after {
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes outerRingRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Inner rotating ring */
.core-inner-ring {
  position: absolute;
  width: 85%;
  height: 85%;
  top: 7.5%;
  left: 7.5%;
  border: 2px dashed rgba(251, 146, 60, 0.5);
  border-radius: 50%;
  animation: innerRingRotate 18s linear infinite reverse;
}

@keyframes innerRingRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Core glow - pulsing fire effect */
.core-glow {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(
    circle,
    rgba(234, 88, 12, 0.5) 0%,
    rgba(234, 88, 12, 0.2) 30%,
    transparent 60%
  );
  animation: coreGlow 3s ease-in-out infinite;
  pointer-events: none;
  filter: blur(10px);
}

@keyframes coreGlow {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Main medallion */
.core-medallion {
  position: absolute;
  width: 65%;
  height: 65%;
  top: 17.5%;
  left: 17.5%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(80, 40, 20, 0.95) 0%,
    rgba(40, 20, 10, 0.98) 50%,
    rgba(30, 15, 8, 1) 100%
  );
  border: 4px solid var(--accent-fire);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow:
    0 0 60px rgba(234, 88, 12, 0.6),
    0 0 100px rgba(234, 88, 12, 0.3),
    inset 0 0 30px rgba(234, 88, 12, 0.3),
    inset 0 2px 10px rgba(255, 200, 150, 0.2);
  z-index: 5;
}

/* Inner decorative border */
.core-medallion::before {
  content: '';
  position: absolute;
  width: 85%;
  height: 85%;
  border-radius: 50%;
  border: 1px solid rgba(251, 146, 60, 0.4);
}

.core-icon {
  font-size: 22px;
  animation: flicker 2s infinite;
  filter: drop-shadow(0 0 8px rgba(234, 88, 12, 0.8));
}

@keyframes flicker {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  25% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.85;
    transform: scale(1.02);
  }
  75% {
    opacity: 0.95;
  }
}

.core-name {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--font-bold);
  color: var(--accent-bright);
  text-align: center;
  text-shadow: 0 0 8px rgba(234, 88, 12, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Floating runes around core */
.core-runes {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  animation: coreRunesRotate 35s linear infinite;
}

@keyframes coreRunesRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.core-runes span {
  position: absolute;
  font-size: 10px;
  color: var(--nordic-gold);
  text-shadow: 0 0 10px var(--nordic-gold);
  opacity: 0.8;
}

.core-runes span:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.core-runes span:nth-child(2) {
  top: 14%;
  right: 14%;
}
.core-runes span:nth-child(3) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.core-runes span:nth-child(4) {
  bottom: 14%;
  right: 14%;
}
.core-runes span:nth-child(5) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.core-runes span:nth-child(6) {
  bottom: 14%;
  left: 14%;
}
.core-runes span:nth-child(7) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.core-runes span:nth-child(8) {
  top: 14%;
  left: 14%;
}

/* ============================================
   SVG BRANCHES - Cyan/Teal geometric style
   Inspired by second reference image
   ============================================ */

.tree-branches {
  position: relative;
  height: 25px;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  z-index: 8;
}

.tree-branches svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Golden organic branches - Main style */
.branch-golden {
  fill: none;
  stroke: url(#goldenBranchGradient);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.6));
  opacity: 0.9;
}

.branch-golden.thin {
  stroke-width: 1.2;
  opacity: 0.5;
}

.branch-golden.root {
  stroke: url(#goldenRootGradient);
  filter: drop-shadow(0 0 3px rgba(161, 98, 7, 0.5));
  opacity: 0.8;
}

.branch-golden.root.thin {
  stroke-width: 1.2;
  opacity: 0.45;
}

/* Legacy cyan branches (keep for compatibility) */
.branch-path {
  fill: none;
  stroke: url(#branchGradient);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.6));
  opacity: 0.9;
}

.branch-path.root {
  stroke: url(#rootGradient);
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}

/* Branch glow nodes */
.branch-node {
  fill: rgba(212, 175, 55, 0.8);
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.8));
}

.branch-node.root {
  fill: rgba(161, 98, 7, 0.8);
  filter: drop-shadow(0 0 6px rgba(161, 98, 7, 0.8));
}

/* ============================================
   TREE LEVELS - Norse Mythology Layout
   ============================================ */

/* Asgard - Top of the tree */
.tree-level.asgard {
  padding: 5px 0;
  display: flex;
  justify-content: center;
}

.tree-level.asgard .realm {
  transform: scale(1);
}

/* Upper Realms - Vanaheim, Alfheim, Niflheim */
.tree-level.upper-realms {
  padding: 3px 0;
}

/* Lower Realms - Muspelheim, Jotunheim */
.tree-level.lower-realms {
  padding: 3px 0;
}

/* Nidavellir/Svartalfheim - Dwarven forges */
.tree-level.nidavellir {
  padding: 3px 0;
}

/* Helheim - Bottom */
.tree-level.helheim {
  padding: 5px 0 10px;
  display: flex;
  justify-content: center;
}

.tree-level.helheim .realm {
  transform: scale(0.9);
  opacity: 0.85;
}

/* Realms Row Layouts */
.realms-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 0;
}

.realms-row.three-realms {
  justify-content: space-between;
  max-width: 380px;
  margin: 0 auto;
  padding: 0 20px;
}

.realms-row.two-realms {
  justify-content: center;
  gap: 100px;
  max-width: 350px;
  margin: 0 auto;
}

/* Root realm styling */
.realm.root .realm-medallion {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(50, 50, 70, 0.9) 0%,
    rgba(30, 30, 45, 0.95) 50%,
    rgba(20, 20, 30, 1) 100%
  );
}

/* Tree trunk positioning adjustments */
.yggdrasil-tree {
  position: relative;
  min-height: auto;
}

.yggdrasil-tree .tree-trunk {
  position: absolute;
  left: 50%;
  top: 40px;
  bottom: 40px;
}

/* Golden branch animation */
@keyframes goldenBranchPulse {
  0%,
  100% {
    stroke-opacity: 0.75;
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.4));
  }
  50% {
    stroke-opacity: 1;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.7));
  }
}

.branch-golden {
  animation: goldenBranchPulse 5s ease-in-out infinite;
}

.branch-golden:nth-child(2) {
  animation-delay: 0.3s;
}

.branch-golden:nth-child(3) {
  animation-delay: 0.6s;
}

.branch-golden:nth-child(4) {
  animation-delay: 0.9s;
}

.branch-golden:nth-child(5) {
  animation-delay: 1.2s;
}

/* Golden root animation */
@keyframes goldenRootPulse {
  0%,
  100% {
    stroke-opacity: 0.6;
    filter: drop-shadow(0 0 3px rgba(161, 98, 7, 0.3));
  }
  50% {
    stroke-opacity: 0.85;
    filter: drop-shadow(0 0 8px rgba(161, 98, 7, 0.5));
  }
}

.branch-golden.root {
  animation: goldenRootPulse 6s ease-in-out infinite;
}

/* Legacy cyan animation */
@keyframes branchPulse {
  0%,
  100% {
    stroke-opacity: 0.7;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.5));
  }
  50% {
    stroke-opacity: 1;
    filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.8));
  }
}

.branch-path {
  animation: branchPulse 4s ease-in-out infinite;
}

.branch-path:nth-child(2) {
  animation-delay: 0.5s;
}

.branch-path:nth-child(3) {
  animation-delay: 1s;
}

@keyframes rootPulse {
  0%,
  100% {
    stroke-opacity: 0.6;
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.4));
  }
  50% {
    stroke-opacity: 0.9;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.6));
  }
}

.branch-path.root {
  animation: rootPulse 5s ease-in-out infinite;
}

/* Realm hover lift effect */
.realm:hover {
  z-index: 20;
}

.realm:hover .realm-glow {
  animation-duration: 1.5s;
  filter: blur(15px);
}

/* ============================================
   PROPOSE CTA
   ============================================ */

.propose-cta {
  text-align: center;
  margin-top: 40px;
  padding: 30px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
  border: 2px dashed var(--green);
  border-radius: 20px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.propose-cta-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--green);
  margin-bottom: 8px;
}

.propose-cta-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 16px;
}

.propose-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--green);
  color: #000;
  font-weight: var(--font-bold);
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
}

.propose-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(34, 197, 94, 0.5);
}

/* ============================================
   LEGEND
   ============================================ */

.legend-section {
  padding: 30px 0;
  margin-top: 20px;
}

.legend-box {
  display: flex;
  justify-content: center;
}

.legend-items {
  display: flex;
  gap: 24px;
  padding: 16px 32px;
  background: var(--bg-charred);
  border: 2px solid var(--border-rust);
  border-radius: var(--radius);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Legend + Propose Row Layout */
.legend-propose-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.legend-propose-row .legend-box {
  flex: 0 0 auto;
}

.legend-propose-row .propose-card-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(74, 222, 128, 0.05));
  border: 2px dashed var(--green);
  border-radius: 50px;
  transition: all 0.3s ease;
}

.legend-propose-row .propose-card-mini:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(74, 222, 128, 0.1));
  border-color: var(--green-light);
  transform: translateY(-2px);
}

/* ============================================
   MARKETPLACE HERO
   ============================================ */

.marketplace-hero {
  padding: 60px 0 40px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(234, 88, 12, 0.08) 0%, transparent 60%);
}

/* Join Builder CTA */
.join-builder-cta {
  text-align: center;
  padding: 30px;
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.1), rgba(234, 88, 12, 0.05));
  border: 2px dashed var(--accent-fire);
  border-radius: 20px;
  max-width: 600px;
  margin: 0 auto 40px;
}

.join-builder-cta h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--accent-bright);
  margin-bottom: var(--space-sm);
}

.join-builder-cta p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.builder-link-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--accent-fire);
  color: #fff;
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) ease;
  box-shadow: 0 4px 20px rgba(234, 88, 12, 0.3);
}

.builder-link-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(234, 88, 12, 0.5);
}

/* ============================================
   BUILDERS GRID
   ============================================ */

.builders-section {
  padding: 40px 0;
}

.builders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.builder-card {
  background: var(--bg-charred);
  border: 2px solid var(--border-rust);
  border-radius: var(--radius);
  padding: var(--space-lg);
  transition: all var(--duration-normal) ease;
}

.builder-card:hover {
  border-color: var(--accent-fire);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.2);
}

.builder-card.hidden {
  display: none;
}

.builder-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.builder-avatar-wrapper {
  position: relative;
}

.builder-avatar {
  width: 60px;
  height: 60px;
  background: var(--bg-burnt);
  border: 2px solid var(--border-rust);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
}

.builder-status {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bg-charred);
}

.builder-status.online {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

.builder-status.away {
  background: var(--gold);
}
.builder-status.offline {
  background: var(--text-muted);
}

.builder-identity {
  flex: 1;
}

.builder-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-cream);
}

.builder-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.builder-badge {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
}

.builder-badge.core {
  background: rgba(251, 191, 36, 0.2);
  color: var(--gold);
  border: 1px solid var(--gold);
}

.builder-badge.community {
  background: rgba(168, 85, 247, 0.2);
  color: var(--purple);
  border: 1px solid var(--purple);
}

.builder-badge.infra {
  background: rgba(59, 130, 246, 0.2);
  color: var(--blue);
  border: 1px solid var(--blue);
}

.badge-icon {
  font-size: var(--text-xs);
}

.builder-bio {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-rust);
}

.builder-skills {
  margin-bottom: var(--space-lg);
}

.skills-title,
.projects-title,
.future-title,
.seeking-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--text-cream);
  margin-bottom: var(--space-md);
}

.skills-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.skill-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.skill-name {
  font-size: var(--text-xs);
  color: var(--text-muted);
  width: 120px;
  flex-shrink: 0;
}

.skill-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-burnt);
  border-radius: 3px;
  overflow: hidden;
}

.skill-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-fire), var(--accent-bright));
  border-radius: 3px;
  transition: width var(--duration-slow) ease;
}

.builder-projects {
  margin-bottom: var(--space-lg);
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.project-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-burnt);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.project-item .project-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.project-item.live .project-status {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

.project-item.building .project-status {
  background: var(--accent-fire);
}

.project-item.planned .project-status {
  background: var(--purple);
}

.project-name {
  color: var(--text-cream);
}

.builder-future {
  margin-bottom: 20px;
}

.future-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.future-list li {
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 16px;
  position: relative;
}

.future-list li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--accent-fire);
}

.builder-seeking {
  margin-bottom: 20px;
}

.seeking-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.seeking-tag {
  padding: 6px 12px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid var(--green);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--green);
}

.builder-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--border-rust);
  flex-wrap: wrap;
  gap: 12px;
}

.builder-links {
  display: flex;
  gap: 8px;
}

.builder-link {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  background: var(--bg-burnt);
  border: 1px solid var(--border-rust);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.2s ease;
}

.builder-link:hover {
  color: var(--text-cream);
  border-color: var(--accent-fire);
}

.builder-join-btn {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: var(--font-bold);
  color: #fff;
  background: var(--green);
  border: none;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.builder-join-btn:hover {
  background: var(--green-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* ============================================
   JOIN CTA
   ============================================ */

.join-section {
  padding: 60px 0;
}

.join-card {
  max-width: 600px;
  margin: 0 auto;
  padding: 48px;
  background: linear-gradient(135deg, var(--bg-burnt), rgba(234, 88, 12, 0.1));
  border: 3px solid var(--accent-fire);
  border-radius: 20px;
  text-align: center;
}

.join-icon {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-md);
}

.join-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-cream);
  margin-bottom: var(--space-md);
}

.join-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.join-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* ============================================
   MODALS
   ============================================ */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.modal.active {
  display: flex;
}

/* Modal z-index hierarchy - use calc() for relative stacking within modal layer */
#doc-modal {
  z-index: var(--z-modal);
}
#feature-modal {
  z-index: calc(var(--z-modal) + 10);
}
#component-modal {
  z-index: calc(var(--z-modal) + 20);
}
#deep-modal {
  z-index: calc(var(--z-modal) + 5);
}
#code-learning-modal {
  z-index: calc(var(--z-modal) + 25);
}

/* When component-modal is active, it should be on top */
#component-modal.active {
  z-index: calc(var(--z-modal) + 30);
}
#code-learning-modal.active {
  z-index: calc(var(--z-modal) + 35);
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-charred);
  border: 2px solid var(--border-rust);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  animation: modalSlide var(--duration-normal) ease;
}

.modal-content.modal-large {
  max-width: 900px;
}

@keyframes modalSlide {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  color: var(--text-muted);
  background: var(--bg-burnt);
  border: 1px solid var(--border-rust);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.modal-close:hover {
  color: var(--text-cream);
  border-color: var(--accent-fire);
}

.modal-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--border-rust);
}

.modal-icon {
  font-size: var(--text-4xl);
}

.modal-title-group {
  flex: 1;
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-cream);
  margin-bottom: var(--space-xs);
}

.modal-status {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.modal-status.live {
  background: rgba(34, 197, 94, 0.2);
  color: var(--green);
}

.modal-status.building {
  background: rgba(249, 115, 22, 0.2);
  color: var(--accent-bright);
}

.modal-status.planned {
  background: rgba(168, 85, 247, 0.2);
  color: var(--purple);
}

.modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

/* Doc Modal Sections */
.doc-section {
  margin-bottom: 24px;
}

.doc-section-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--accent-bright);
  margin-bottom: 12px;
}

.doc-description {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

.doc-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-burnt);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-cream);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.doc-features li:hover {
  border-color: var(--accent-fire);
  background: rgba(234, 88, 12, 0.1);
}

.doc-features li::before {
  content: '>';
  color: var(--green);
  font-weight: var(--font-bold);
}

.doc-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.doc-tech-tag {
  padding: 6px 12px;
  background: rgba(234, 88, 12, 0.15);
  border: 1px solid var(--accent-fire);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--accent-bright);
}

.doc-dependencies {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 2px solid var(--border-rust);
  margin-top: 24px;
}

.deep-learn-btn {
  background: linear-gradient(135deg, var(--green), var(--green-light));
  border-color: var(--green);
}

.deep-learn-btn:hover {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
}

.modal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.modal-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm, 6px);
  color: #fff;
  font-size: var(--text-sm, 14px);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.modal-link .link-icon {
  font-size: 1.1em;
}

.modal-link.timeline-link {
  background: rgba(0, 217, 255, 0.1);
  border-color: rgba(0, 217, 255, 0.2);
}

.modal-link.timeline-link:hover {
  background: rgba(0, 217, 255, 0.2);
  border-color: rgba(0, 217, 255, 0.4);
}

/* Feature Modal */
.feature-explanation {
  padding: 20px;
  background: var(--bg-burnt);
  border-radius: var(--radius);
}

.feature-what,
.feature-how,
.feature-why {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--font-bold);
  margin-bottom: 8px;
  margin-top: 16px;
}

.feature-what:first-child {
  margin-top: 0;
}

.feature-what {
  color: var(--cyan);
}
.feature-how {
  color: var(--accent-bright);
}
.feature-why {
  color: var(--green);
}

.feature-explanation p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

/* Deep Learn Modal */
.mini-yggdrasil {
  background: var(--bg-burnt);
  border: 2px solid var(--border-rust);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.mini-tree-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mini-tree-core {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, var(--bg-charred), rgba(234, 88, 12, 0.2));
  border: 2px solid var(--accent-fire);
  border-radius: var(--radius);
}

.mini-tree-core-icon {
  font-size: var(--text-3xl);
}

.mini-tree-core-info {
  flex: 1;
}

.mini-tree-core-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--accent-bright);
}

.mini-tree-core-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.mini-tree-branches {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
  border-left: 3px solid var(--tree-branch);
  margin-left: 24px;
}

.mini-tree-branch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-charred);
  border-radius: var(--radius-md);
  position: relative;
}

.mini-tree-branch::before {
  content: '';
  position: absolute;
  left: -27px;
  width: 24px;
  height: 3px;
  background: var(--tree-branch);
}

.mini-tree-branch-icon {
  font-size: var(--text-xl);
}

.mini-tree-branch-info {
  flex: 1;
}

.mini-tree-branch-name {
  font-size: 14px;
  font-weight: var(--font-semibold);
  color: var(--text-cream);
}

.mini-tree-branch-status {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}

.mini-tree-branch-status.completed {
  background: rgba(34, 197, 94, 0.2);
  color: var(--green);
}

.mini-tree-branch-status.in-progress {
  background: rgba(249, 115, 22, 0.2);
  color: var(--accent-bright);
}

.mini-tree-branch-status.planned {
  background: rgba(168, 85, 247, 0.2);
  color: var(--purple);
}

/* Clickable branches */
.mini-tree-branch.clickable {
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.mini-tree-branch.clickable:hover {
  background: var(--bg-burnt);
  border-color: var(--accent-fire);
  transform: translateX(4px);
  box-shadow: 0 2px 10px rgba(234, 88, 12, 0.2);
}

.mini-tree-branch.clickable:hover .mini-tree-branch-name {
  color: var(--accent-bright);
}

.mini-tree-branch.clickable::after {
  content: '→';
  position: absolute;
  right: 12px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mini-tree-branch.clickable:hover::after {
  opacity: 1;
  color: var(--accent-fire);
}

/* ============================================
   COMPONENT MODAL STYLES
   ============================================ */

.modal-content.modal-medium {
  max-width: 600px;
}

.component-status {
  font-size: var(--text-xs);
  padding: 4px 12px;
  border-radius: var(--radius-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
}

.component-status.completed {
  background: rgba(34, 197, 94, 0.2);
  color: var(--green);
}

.component-status.in-progress {
  background: rgba(249, 115, 22, 0.2);
  color: var(--accent-bright);
}

.component-status.planned {
  background: rgba(168, 85, 247, 0.2);
  color: var(--purple);
}

.component-explanation {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.component-section {
  padding: 16px;
  background: var(--bg-charred);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent-fire);
}

.component-section.future {
  border-left-color: var(--purple);
  background: rgba(168, 85, 247, 0.1);
}

.component-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: var(--font-bold);
  color: var(--text-cream);
  margin-bottom: 8px;
}

.component-heading-icon {
  font-size: var(--text-base);
}

.component-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
}

.component-section.future .component-heading {
  color: var(--purple);
}

.component-section.future .component-text {
  color: rgba(168, 85, 247, 0.9);
  font-style: italic;
}

.deep-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.deep-section-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--accent-bright);
  margin-bottom: 12px;
}

.deep-architecture {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.7;
  padding: 16px;
  background: var(--bg-burnt);
  border-radius: var(--radius-md);
}

.deep-roadmap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roadmap-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-burnt);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--purple);
}

.roadmap-item-phase {
  font-size: 10px;
  font-weight: var(--font-bold);
  color: var(--purple);
  text-transform: uppercase;
}

.roadmap-item-text {
  font-size: var(--text-sm);
  color: var(--text-cream);
}

.deep-integrations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.integration-tag {
  padding: 8px 14px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid var(--blue);
  border-radius: var(--radius-full);
  font-size: 12px;
  color: var(--blue);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  padding: 40px 0;
  background: var(--bg-dark);
  border-top: 2px solid var(--border-rust);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--text-cream);
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--accent-fire);
}

.footer-note {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-rust);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   UTILITIES
   ============================================ */

.hidden {
  display: none !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
  .realm-medallion {
    width: 55px;
    height: 55px;
  }

  .realm-icon {
    font-size: 22px;
  }
  .realm-name {
    font-size: var(--text-xs);
  }

  .core-realm {
    width: 130px;
    height: 130px;
  }
}

@media (max-width: 768px) {
  .nav-tabs {
    display: none;
  }

  .view-switcher-container {
    margin-top: 60px;
  }

  .view-switcher {
    flex-direction: column;
    gap: 8px;
  }

  .view-switch-btn {
    width: 100%;
    justify-content: center;
  }

  /* Mobile: Stack realms vertically */
  .tree-trunk {
    display: none;
  }
  .tree-branches-svg {
    display: none;
  }

  .realms-row {
    flex-direction: column;
    gap: 16px;
    padding: 10px 0;
  }

  .realm {
    width: 100%;
    flex-direction: row;
    gap: 16px;
    padding: 16px;
    background: var(--bg-burnt);
    border: 2px solid var(--border-rust);
    border-radius: var(--radius);
  }

  .realm[data-status='live'] {
    border-color: var(--green);
  }

  .realm[data-status='building'] {
    border-color: var(--accent-fire);
  }

  .realm[data-status='planned'] {
    border-color: var(--purple);
  }

  .realm-glow {
    display: none;
  }

  .realm-medallion {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
  }

  .realm-icon {
    font-size: var(--text-2xl);
  }

  .realm-name {
    margin-top: 0;
    text-align: left;
  }

  .realm-rune {
    position: static;
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  .level-label {
    position: static;
    transform: none;
    margin-bottom: 10px;
    display: block;
    text-align: center;
  }

  .core-realm {
    width: 100%;
    height: auto;
    padding: 24px;
    background: var(--bg-burnt);
    border: 2px solid var(--accent-fire);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .core-outer-ring,
  .core-inner-ring,
  .core-glow,
  .core-runes {
    display: none;
  }

  .core-medallion {
    position: static;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
  }

  .core-icon {
    font-size: 28px;
  }

  .core-name {
    font-size: var(--text-base);
    text-align: left;
  }

  .builders-grid {
    grid-template-columns: 1fr;
  }

  .modal-content {
    padding: 20px;
  }

  .modal-actions {
    flex-direction: column;
    gap: 16px;
  }

  .legend-items {
    flex-direction: column;
    gap: 8px;
  }

  .join-card {
    padding: 32px 24px;
  }

  .join-actions {
    flex-direction: column;
  }
  .join-actions .btn {
    width: 100%;
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
  }
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .propose-cta,
  .join-builder-cta {
    margin: 20px;
  }
}

/* ============================================
   ANIMATIONS - Realm Hover Effects
   ============================================ */

.realm:hover .realm-rune {
  animation: runeGlow 0.5s ease;
}

@keyframes runeGlow {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 20px var(--nordic-gold);
  }
}

/* Connection line animation */
@keyframes branchGrow {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.branch-line {
  stroke-dasharray: 100;
  animation: branchGrow 1s ease forwards;
}

/* ============================================
   YGGDRASIL CANONICAL STRUCTURE
   Heart/Midgard/Trunk/Roots Layout
   ============================================ */

.yggdrasil-canonical {
  position: relative;
  width: 100%;
  height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 15;
  pointer-events: auto;
}

/* Tree SVG - Full size */
.yggdrasil-canonical .tree-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ============================================
   HEART - Burn Engine (Center Core)
   Orange incandescent with heartbeat pulsation
   ============================================ */

.tree-heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  z-index: 30;
  cursor: pointer;
}

.tree-heart:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.heart-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  background: radial-gradient(
    circle,
    rgba(251, 146, 60, 0.8) 0%,
    rgba(234, 88, 12, 0.4) 40%,
    rgba(154, 52, 18, 0.1) 70%,
    transparent 100%
  );
  border-radius: 50%;
  animation: heartbeatGlow 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heartbeatGlow {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  15% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0.9;
  }
  45% {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 1;
  }
}

.heart-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border: 4px solid rgba(251, 146, 60, 0.8);
  border-radius: 50%;
  box-shadow:
    0 0 30px rgba(234, 88, 12, 0.6),
    inset 0 0 20px rgba(251, 146, 60, 0.3);
  animation: heartbeatRing 1.5s ease-in-out infinite;
}

@keyframes heartbeatRing {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    border-color: rgba(251, 146, 60, 0.8);
  }
  15% {
    transform: translate(-50%, -50%) scale(1.05);
    border-color: rgba(255, 200, 100, 1);
  }
  45% {
    transform: translate(-50%, -50%) scale(1.03);
    border-color: rgba(255, 180, 80, 0.9);
  }
}

.heart-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at 35% 35%, #2a1a0a 0%, #1a0f05 50%, #0f0804 100%);
  border: 3px solid #fb923c;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 40px rgba(251, 146, 60, 0.7),
    inset 0 0 20px rgba(234, 88, 12, 0.4);
  animation: heartbeatCore 1.5s ease-in-out infinite;
}

@keyframes heartbeatCore {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      0 0 40px rgba(251, 146, 60, 0.7),
      inset 0 0 20px rgba(234, 88, 12, 0.4);
  }
  15% {
    transform: translate(-50%, -50%) scale(1.03);
    box-shadow:
      0 0 60px rgba(251, 146, 60, 0.9),
      inset 0 0 30px rgba(234, 88, 12, 0.6);
  }
  45% {
    transform: translate(-50%, -50%) scale(1.02);
    box-shadow:
      0 0 50px rgba(251, 146, 60, 0.8),
      inset 0 0 25px rgba(234, 88, 12, 0.5);
  }
}

.heart-icon {
  font-size: var(--text-3xl);
  filter: drop-shadow(0 0 12px rgba(251, 146, 60, 0.9));
  animation: heartbeatIcon 1.5s ease-in-out infinite;
}

@keyframes heartbeatIcon {
  0%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.1);
  }
  45% {
    transform: scale(1.08);
  }
}

.heart-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--font-bold);
  color: #fb923c;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
  text-shadow: 0 0 10px rgba(251, 146, 60, 0.8);
}

.heart-runes {
  position: absolute;
  width: 130px;
  height: 130px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: heartRunesRotate 40s linear infinite;
  pointer-events: none;
}

.heart-runes span {
  position: absolute;
  font-size: 12px;
  color: #fb923c;
  text-shadow: 0 0 8px #fb923c;
  opacity: 0.8;
}

.heart-runes span:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.heart-runes span:nth-child(2) {
  top: 15%;
  right: 10%;
}
.heart-runes span:nth-child(3) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.heart-runes span:nth-child(4) {
  bottom: 15%;
  right: 10%;
}
.heart-runes span:nth-child(5) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.heart-runes span:nth-child(6) {
  bottom: 15%;
  left: 10%;
}
.heart-runes span:nth-child(7) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.heart-runes span:nth-child(8) {
  top: 15%;
  left: 10%;
}

@keyframes heartRunesRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ============================================
   ZONE LABELS
   ============================================ */

.zone-label {
  position: absolute;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 2px;
  z-index: 5;
  padding: 6px 16px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

.zone-label.zone-midgard {
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.4);
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.zone-label.zone-trunk {
  top: 50%;
  right: -280px;
  left: auto;
  transform: translateY(-50%);
  flex-direction: row;
  color: #d4a574;
  background: rgba(212, 165, 116, 0.15);
  border: 1px solid rgba(212, 165, 116, 0.4);
  text-shadow: 0 0 10px rgba(212, 165, 116, 0.5);
}

.zone-label.zone-roots {
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.4);
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.5);
}

/* ============================================
   NODE POSITIONS - Canopy (Midgard/Live)
   Green leafy zone - Top of tree
   ============================================ */

.tree-node.canopy {
  z-index: 20;
  cursor: pointer;
}

.tree-node.trunk,
.tree-node.roots {
  cursor: pointer;
}

.tree-node.canopy .node-glow.midgard {
  background: rgba(74, 222, 128, 0.6);
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.4);
}

.tree-node.canopy .node-medallion {
  border-color: #4ade80;
  box-shadow:
    0 0 20px rgba(74, 222, 128, 0.5),
    inset 0 0 10px rgba(74, 222, 128, 0.2);
}

.tree-node.canopy:hover .node-medallion {
  border-color: #86efac;
  box-shadow:
    0 0 35px rgba(74, 222, 128, 0.7),
    inset 0 0 15px rgba(74, 222, 128, 0.3);
}

/* Midgard medallion styling */
.node-medallion.midgard {
  border-color: #4ade80;
  box-shadow:
    0 0 20px rgba(74, 222, 128, 0.5),
    inset 0 0 10px rgba(74, 222, 128, 0.2);
}

/* ============================================
   NODE RUNES - Viking symbols around projects
   ============================================ */

.node-runes {
  position: absolute;
  width: 70px;
  height: 70px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: nodeRunesRotate 30s linear infinite;
  z-index: 1;
}

.node-runes span {
  position: absolute;
  font-size: var(--text-xs);
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
  opacity: 0.9;
  animation: runeFlicker 3s ease-in-out infinite;
}

.node-runes span:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0s;
}
.node-runes span:nth-child(2) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  animation-delay: 0.75s;
}
.node-runes span:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 1.5s;
}
.node-runes span:nth-child(4) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation-delay: 2.25s;
}

/* Trunk runes - amber/brown color */
.node-runes.trunk span {
  color: #c4915c;
  text-shadow: 0 0 8px rgba(196, 145, 92, 0.8);
}

/* Roots runes - purple color */
.node-runes.roots span {
  color: #a78bfa;
  text-shadow: 0 0 8px rgba(167, 139, 250, 0.8);
}

@keyframes nodeRunesRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes runeFlicker {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 12px currentColor;
  }
}

/* Hover effect - runes glow brighter */
.tree-node:hover .node-runes {
  animation-duration: 15s;
}

.tree-node:hover .node-runes span {
  opacity: 1;
  text-shadow: 0 0 15px currentColor;
}

/* ============================================
   CANOPY POSITIONS - Matching Celtic branch endpoints
   ============================================ */

/* Top center - Ecosystem (branch ends at ~400,0) */
.tree-node.canopy.top {
  top: -1%;
  left: 50%;
  transform: translateX(-50%);
}
.tree-node.canopy.top:hover {
  transform: translateX(-50%) scale(1.15);
}

/* Left - Learn Platform (branch ends at ~15,30) */
.tree-node.canopy.left {
  top: 2%;
  left: 0%;
}

/* Right - Games Platform (branch ends at ~785,30) */
.tree-node.canopy.right {
  top: 2%;
  right: 0%;
}

/* Far left - Burn Tracker (branch ends at ~-25,45) */
.tree-node.canopy.far-left {
  top: 5%;
  left: -2%;
}

/* Far right - Launcher (branch ends at ~825,45) */
.tree-node.canopy.far-right {
  top: 5%;
  right: -2%;
}

/* ============================================
   NODE POSITIONS - Trunk (Building)
   Brown/amber wood zone - Middle of tree
   ============================================ */

.tree-node.trunk {
  z-index: 18;
}

.tree-node.trunk .node-glow.building,
.tree-node.trunk .node-glow.trunk {
  background: rgba(212, 165, 116, 0.5);
  box-shadow: 0 0 18px rgba(212, 165, 116, 0.4);
}

.tree-node.trunk .node-medallion {
  border-color: #d4a574;
  box-shadow:
    0 0 18px rgba(212, 165, 116, 0.5),
    inset 0 0 10px rgba(212, 165, 116, 0.2);
}

.tree-node.trunk:hover .node-medallion {
  border-color: #e8c4a0;
  box-shadow:
    0 0 30px rgba(212, 165, 116, 0.7),
    inset 0 0 15px rgba(212, 165, 116, 0.3);
}

/* Trunk medallion styling */
.node-medallion.trunk {
  border-color: #d4a574;
  box-shadow:
    0 0 18px rgba(212, 165, 116, 0.5),
    inset 0 0 10px rgba(212, 165, 116, 0.2);
}

/* ============================================
   TRUNK POSITIONS - Matching Celtic branch endpoints
   ============================================ */

/* Left upper - HolDEX (branch ends at ~30,530) */
.tree-node.trunk.left {
  top: 64%;
  left: 1%;
}

/* Right upper - Oracle (branch ends at ~770,530) */
.tree-node.trunk.right {
  top: 64%;
  right: 1%;
}

/* Lower left - RPC Monitor (branch ends at ~-10,690) */
.tree-node.trunk.lower-left {
  top: 84%;
  left: -2%;
}

/* Lower right - Community (branch ends at ~810,690) */
.tree-node.trunk.lower-right {
  top: 84%;
  right: -2%;
}

/* ============================================
   NODE POSITIONS - Roots (Planned)
   Blue/purple underground zone - Bottom
   ============================================ */

.tree-node.roots {
  z-index: 16;
}

.tree-node.roots .node-glow.planned,
.tree-node.roots .node-glow.roots {
  background: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.4);
}

.tree-node.roots .node-medallion {
  border-color: #8b5cf6;
  box-shadow:
    0 0 18px rgba(139, 92, 246, 0.5),
    inset 0 0 10px rgba(139, 92, 246, 0.2);
  opacity: 0.9;
}

.tree-node.roots:hover .node-medallion {
  border-color: #a78bfa;
  box-shadow:
    0 0 30px rgba(139, 92, 246, 0.7),
    inset 0 0 15px rgba(139, 92, 246, 0.3);
  opacity: 1;
}

/* Roots medallion styling */
.node-medallion.roots {
  border-color: #8b5cf6;
  box-shadow:
    0 0 18px rgba(139, 92, 246, 0.5),
    inset 0 0 10px rgba(139, 92, 246, 0.2);
  opacity: 0.9;
}

/* ============================================
   ROOTS POSITIONS - Matching Celtic branch endpoints
   ============================================ */

/* Left root - Security (branch ends at ~60,720) */
.tree-node.roots.left {
  top: 88%;
  left: 5%;
}

/* Center root - Pipeline (branch ends at ~400,790) */
.tree-node.roots.center {
  top: 96%;
  left: 50%;
  transform: translateX(-50%);
}
.tree-node.roots.center:hover {
  transform: translateX(-50%) scale(1.15);
}

/* Right root - Ambassadors (branch ends at ~740,720) */
.tree-node.roots.right {
  top: 88%;
  right: 5%;
}

/* ============================================
   LEGEND LORE STYLING
   ============================================ */

.legend-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.legend-status {
  font-size: 12px;
  font-weight: var(--font-bold);
  color: var(--text-cream);
}

.legend-lore {
  font-size: 10px;
  font-style: italic;
  color: var(--text-muted);
  opacity: 0.8;
}

/* Status dots with lore colors */
.status-dot.midgard {
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
  animation: pulse 2s infinite;
}

.status-dot.trunk {
  background: #d4a574;
  box-shadow: 0 0 10px rgba(212, 165, 116, 0.6);
}

.status-dot.roots {
  background: #8b5cf6;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.6);
}

.status-dot.heart {
  background: #fb923c;
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.6);
  animation: heartbeatDot 1.5s ease-in-out infinite;
}

@keyframes heartbeatDot {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  15% {
    transform: scale(1.3);
    opacity: 1;
  }
  45% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* ============================================
   PROPOSE INLINE SECTION
   ============================================ */

.propose-inline {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  z-index: 20;
  position: relative;
}

.propose-card-mini {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 28px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(74, 222, 128, 0.05));
  border: 2px dashed var(--green);
  border-radius: var(--radius-full);
  transition: all 0.3s ease;
}

.propose-card-mini:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(74, 222, 128, 0.1));
  border-color: var(--green-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2);
}

.propose-bulb {
  font-size: var(--text-2xl);
  animation: bulbGlow 2s ease-in-out infinite;
}

@keyframes bulbGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.8));
  }
}

.propose-text {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--green);
}

.btn-propose {
  background: var(--green);
  border-color: var(--green-light);
  color: #000;
  font-weight: var(--font-bold);
}

.btn-propose:hover {
  background: var(--green-light);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
}

/* ============================================
   SIMPLE YGGDRASIL - Ellipse Node Style
   Clean vertical tree with pill-shaped nodes
   ============================================ */

/* Simple Heart - Center (aligned with Nordic Sun at y=300 in 600 viewbox) */
.tree-heart.simple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  cursor: pointer;
  pointer-events: auto;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tree-heart.simple .node-ellipse {
  position: relative;
  z-index: 2;
}

.tree-heart.simple .node-runes-simple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tree-heart.simple:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Nordic Sun Animations */
.nordic-sun .runic-rays {
  animation: nordicSunRotate 60s linear infinite;
  transform-origin: 400px 300px;
}

.ray-rune {
  animation: runeGlow 3s ease-in-out infinite;
}

.sun-ring-rune {
  animation: runeRingRotate 30s linear infinite reverse;
  transform-origin: 400px 300px;
}

.vegvisir-center {
  animation: vegvisirPulse 4s ease-in-out infinite;
  transform-origin: 400px 300px;
}

.branch-runes text {
  animation: branchRuneFloat 5s ease-in-out infinite;
}

.branch-runes text:nth-child(odd) {
  animation-delay: 0.5s;
}

.branch-runes text:nth-child(3n) {
  animation-delay: 1s;
}

@keyframes nordicSunRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes runeGlow {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes runeRingRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes vegvisirPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes branchRuneFloat {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-3px);
    opacity: 0.8;
  }
}

/* ============================================
   BURN PULSE SYSTEM - Live Activity Animation
   Intensity driven by API burn data
   ============================================ */

.burn-pulsing {
  --burn-pulse-duration: 1500ms;
  --burn-glow-opacity: 0.6;
  --burn-intensity: 0.5;
}

/* Heart glow effect */
.tree-heart.burn-pulsing {
  animation: burnPulseHeart var(--burn-pulse-duration) ease-in-out infinite;
  --heart-glow-size: 30px;
}

.tree-heart.burn-pulsing::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(251, 146, 60, calc(var(--burn-glow-opacity) * 0.4)) 0%,
    rgba(234, 88, 12, calc(var(--burn-glow-opacity) * 0.2)) 40%,
    transparent 70%
  );
  animation: burnGlowPulse var(--burn-pulse-duration) ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* SVG Nordic Sun pulse */
.nordic-sun.burn-pulsing,
.heart-layer.burn-pulsing {
  animation: burnPulseSvg var(--burn-pulse-duration) ease-in-out infinite;
  transform-origin: 400px 300px;
}

.sun-aura {
  transition: opacity 0.5s ease;
  opacity: var(--burn-glow-opacity, 0.7);
}

/* Keyframes */
@keyframes burnPulseHeart {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    filter: brightness(1.15);
  }
}

@keyframes burnPulseSvg {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 10px rgba(251, 146, 60, 0.3));
  }
  50% {
    transform: scale(1.02);
    filter: brightness(1.1)
      drop-shadow(0 0 20px rgba(251, 146, 60, calc(var(--burn-glow-opacity, 0.6))));
  }
}

@keyframes burnGlowPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.15);
    opacity: var(--burn-glow-opacity, 0.8);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .burn-pulsing,
  .tree-heart.burn-pulsing,
  .nordic-sun.burn-pulsing,
  .heart-layer.burn-pulsing {
    animation: none;
  }
  .tree-heart.burn-pulsing::before {
    animation: none;
  }
}

/* Branch phrases along paths */
.branch-phrases text {
  font-size: 8px;
  letter-spacing: 2px;
}

.branch-phrases textPath {
  animation: phraseGlow 4s ease-in-out infinite;
}

@keyframes phraseGlow {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

/* Decorative branch leaves */
.branch-leaves-decorative path {
  animation: leafFloat 6s ease-in-out infinite;
}

.branch-leaves-decorative path:nth-child(odd) {
  animation-delay: 0.5s;
  animation-duration: 5s;
}

.branch-leaves-decorative path:nth-child(3n) {
  animation-delay: 1s;
  animation-duration: 7s;
}

@keyframes leafFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-2px) rotate(5deg);
  }
}

/* Yggdrasil Leaves Animation */
.canopy-leaves {
  animation: leavesBreeze 8s ease-in-out infinite;
}

.canopy-leaves use:nth-child(odd) {
  animation: leafSway 4s ease-in-out infinite;
}

.canopy-leaves use:nth-child(even) {
  animation: leafSway 5s ease-in-out infinite reverse;
}

.canopy-leaves use:nth-child(3n) {
  animation-delay: 0.5s;
}

.canopy-leaves use:nth-child(5n) {
  animation-delay: 1s;
}

@keyframes leavesBreeze {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(2px);
  }
  75% {
    transform: translateX(-2px);
  }
}

@keyframes leafSway {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(3deg) scale(1.02);
  }
  75% {
    transform: rotate(-3deg) scale(0.98);
  }
}

/* Nordic phrases around sun */
.nordic-phrases text {
  animation: phraseRotate 45s linear infinite;
}

@keyframes phraseRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Ellipse Node Base */
.node-ellipse {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98));
  border: 3px solid;
  font-family: var(--font-display);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.node-ellipse .node-icon {
  font-size: var(--text-lg);
}

.node-ellipse .node-text {
  font-size: 12px;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Ellipse Colors by Zone */
.node-ellipse.heart {
  border-color: #fb923c;
  box-shadow:
    0 0 25px rgba(251, 146, 60, 0.6),
    inset 0 0 15px rgba(251, 146, 60, 0.2);
  animation: heartEllipsePulse 1.5s ease-in-out infinite;
}

.node-ellipse.heart .node-text {
  color: #fb923c;
  text-shadow: 0 0 10px rgba(251, 146, 60, 0.5);
}

@keyframes heartEllipsePulse {
  0%,
  100% {
    box-shadow:
      0 0 25px rgba(251, 146, 60, 0.6),
      inset 0 0 15px rgba(251, 146, 60, 0.2);
  }
  50% {
    box-shadow:
      0 0 40px rgba(251, 146, 60, 0.8),
      inset 0 0 20px rgba(251, 146, 60, 0.3);
  }
}

.node-ellipse.midgard {
  border-color: #4ade80;
  box-shadow:
    0 0 20px rgba(74, 222, 128, 0.5),
    inset 0 0 10px rgba(74, 222, 128, 0.15);
}

.node-ellipse.midgard .node-text {
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}

.node-ellipse.trunk {
  border-color: #d4a574;
  box-shadow:
    0 0 18px rgba(212, 165, 116, 0.5),
    inset 0 0 10px rgba(212, 165, 116, 0.15);
}

.node-ellipse.trunk .node-text {
  color: #d4a574;
  text-shadow: 0 0 8px rgba(212, 165, 116, 0.4);
}

.node-ellipse.roots {
  border-color: #8b5cf6;
  box-shadow:
    0 0 18px rgba(139, 92, 246, 0.5),
    inset 0 0 10px rgba(139, 92, 246, 0.15);
  opacity: 0.9;
}

.node-ellipse.roots .node-text {
  color: #8b5cf6;
  text-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
}

/* Simple Node Base */
.tree-node.simple {
  position: absolute;
  z-index: 20;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
}

.tree-node.simple:hover {
  transform: scale(1.1);
}

.tree-node.simple:hover .node-ellipse {
  box-shadow: 0 0 35px currentColor;
}

/* Orbiting Runes around nodes */
.node-runes-simple {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: runeOrbit 20s linear infinite;
}

.node-runes-simple span {
  position: absolute;
  font-size: var(--text-lg);
  font-weight: bold;
  color: #4ade80;
  text-shadow:
    0 0 12px rgba(74, 222, 128, 0.9),
    0 0 20px rgba(74, 222, 128, 0.5);
  animation: runeFlicker 3s ease-in-out infinite;
}

/* Position runes around the orbit */
.node-runes-simple span:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0s;
}

.node-runes-simple span:nth-child(2) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  animation-delay: 0.5s;
}

.node-runes-simple span:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 1s;
}

.node-runes-simple span:nth-child(4) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation-delay: 1.5s;
}

@keyframes runeOrbit {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.node-runes-simple.trunk span {
  color: #d4a574;
  text-shadow:
    0 0 12px rgba(212, 165, 116, 0.9),
    0 0 20px rgba(212, 165, 116, 0.5);
}

.node-runes-simple.roots span {
  color: #8b5cf6;
  text-shadow:
    0 0 12px rgba(139, 92, 246, 0.9),
    0 0 20px rgba(139, 92, 246, 0.5);
}

/* BURN ENGINE - Powerful red-orange runes - MAJESTIC */
.node-runes-simple.heart {
  width: 180px;
  height: 180px;
  animation: runeOrbit 12s linear infinite;
}

.node-runes-simple.heart span {
  font-size: var(--text-3xl);
  font-weight: bold;
  color: #ef4444;
  text-shadow:
    0 0 20px rgba(239, 68, 68, 1),
    0 0 40px rgba(251, 146, 60, 0.9),
    0 0 60px rgba(234, 88, 12, 0.7),
    0 0 80px rgba(220, 38, 38, 0.5);
  animation: heartRuneFlicker 1.5s ease-in-out infinite;
}

@keyframes heartRuneFlicker {
  0%,
  100% {
    opacity: 0.9;
    transform: scale(1);
    text-shadow:
      0 0 20px rgba(239, 68, 68, 1),
      0 0 40px rgba(251, 146, 60, 0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
    text-shadow:
      0 0 30px rgba(239, 68, 68, 1),
      0 0 50px rgba(251, 146, 60, 1),
      0 0 70px rgba(220, 38, 38, 0.8);
  }
}

/* SVG Heart animations */
.heart-corona {
  animation: coronaPulse 3s ease-in-out infinite;
}

@keyframes coronaPulse {
  0%,
  100% {
    opacity: 0.2;
    transform-origin: center;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.05);
  }
}

.heart-ring-svg {
  animation: ringRotate 8s linear infinite;
  transform-origin: 400px 300px;
}

@keyframes ringRotate {
  from {
    transform: rotate(0deg);
    stroke-dasharray: 20 10;
  }
  to {
    transform: rotate(360deg);
    stroke-dasharray: 20 10;
  }
}

/* Burn Engine ellipse - red glow border */
.node-ellipse.heart {
  border-color: #ef4444;
  box-shadow:
    0 0 30px rgba(239, 68, 68, 0.7),
    0 0 60px rgba(251, 146, 60, 0.5),
    inset 0 0 20px rgba(251, 146, 60, 0.3);
  animation: heartEllipsePulse 1.5s ease-in-out infinite;
}

@keyframes heartEllipsePulse {
  0%,
  100% {
    box-shadow:
      0 0 30px rgba(239, 68, 68, 0.7),
      0 0 60px rgba(251, 146, 60, 0.5),
      inset 0 0 20px rgba(251, 146, 60, 0.3);
  }
  50% {
    box-shadow:
      0 0 50px rgba(239, 68, 68, 0.9),
      0 0 80px rgba(251, 146, 60, 0.7),
      inset 0 0 30px rgba(251, 146, 60, 0.4);
  }
}

/* Slow down rotation on hover */
.tree-node.simple:hover .node-runes-simple {
  animation-duration: 10s;
}

.tree-node.simple:hover .node-runes-simple span {
  text-shadow: 0 0 20px currentColor;
}

.tree-heart.simple:hover .node-runes-simple.heart {
  animation-duration: 8s;
}

/* ============================================
   SIMPLE NODE POSITIONS - Canopy (Top)
   ============================================ */

.tree-node.simple.canopy-left {
  top: 12%;
  left: 10%;
}

.tree-node.simple.canopy-right {
  top: 12%;
  right: 10%;
}

.tree-node.simple.canopy-far-left {
  top: 20%;
  left: 1%;
}

.tree-node.simple.canopy-far-right {
  top: 20%;
  right: 1%;
}

.tree-node.simple.canopy-mid-left {
  top: 28%;
  left: 8%;
}

.tree-node.simple.canopy-mid-right {
  top: 28%;
  right: 8%;
}

.tree-node.simple.canopy-top {
  top: 18%;
  left: 40%;
}

/* ============================================
   SIMPLE NODE POSITIONS - Trunk (Middle)
   ============================================ */

.tree-node.simple.trunk-left {
  top: 40%;
  left: 2%;
}

.tree-node.simple.trunk-right {
  top: 40%;
  right: 2%;
}

.tree-node.simple.trunk-lower-left {
  top: 53%;
  left: 1%;
}

.tree-node.simple.trunk-lower-right {
  top: 53%;
  right: 1%;
}

/* ============================================
   SIMPLE NODE POSITIONS - Roots (Bottom)
   ============================================ */

.tree-node.simple.roots-left {
  top: 75%;
  left: 4%;
}

.tree-node.simple.roots-center {
  top: 83%;
  left: 50%;
  transform: translateX(-50%);
}
.tree-node.simple.roots-center:hover {
  transform: translateX(-50%) scale(1.1);
}

.tree-node.simple.roots-right {
  top: 75%;
  right: 4%;
}

/* Zone Labels - centered positions */
.zone-label.zone-midgard {
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
}

.zone-label.zone-roots {
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================
   RESPONSIVE - Canonical Tree
   ============================================ */

@media (max-width: 900px) {
  .yggdrasil-canonical {
    height: 700px;
  }

  .tree-heart {
    width: 100px;
    height: 100px;
  }

  .heart-glow {
    width: 150px;
    height: 150px;
  }
  .heart-ring {
    width: 90px;
    height: 90px;
  }
  .heart-core {
    width: 75px;
    height: 75px;
  }
  .heart-icon {
    font-size: 26px;
  }
  .heart-runes {
    width: 110px;
    height: 110px;
  }

  .tree-node .node-medallion {
    width: 44px;
    height: 44px;
  }

  .tree-node .node-icon {
    font-size: var(--text-lg);
  }
  .tree-node .node-label {
    font-size: 9px;
  }

  .zone-label {
    font-size: var(--text-xs);
    padding: 4px 12px;
  }
}

@media (max-width: 768px) {
  .yggdrasil-canonical {
    height: auto;
    min-height: 600px;
    flex-direction: column;
    padding: 20px;
  }

  .yggdrasil-canonical .tree-svg {
    display: none;
  }

  .tree-heart {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-bottom: 20px;
  }

  .tree-heart.simple {
    position: relative;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-bottom: 20px;
  }

  .tree-heart:hover,
  .tree-heart.simple:hover {
    transform: scale(1.05) !important;
  }

  .zone-label {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 16px 0 8px;
    display: inline-block;
  }

  .tree-node {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100%;
    flex-direction: row;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-burnt);
    border-radius: var(--radius);
    margin-bottom: 8px;
  }

  .tree-node.simple {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: auto;
    display: inline-block;
    margin: 4px;
  }

  .tree-node:hover {
    transform: translateX(4px) !important;
  }

  .tree-node.simple:hover {
    transform: scale(1.05) !important;
  }

  .node-ellipse {
    padding: 8px 14px;
  }

  .node-ellipse .node-icon {
    font-size: 14px;
  }

  .node-ellipse .node-text {
    font-size: 10px;
  }

  .node-runes-simple {
    display: none;
  }

  .tree-node.canopy {
    border: 2px solid rgba(74, 222, 128, 0.4);
  }

  .tree-node.trunk {
    border: 2px solid rgba(212, 165, 116, 0.4);
  }

  .tree-node.roots {
    border: 2px solid rgba(139, 92, 246, 0.4);
  }

  .tree-node .node-glow {
    display: none;
  }

  .tree-node .node-label {
    margin-top: 0;
    text-align: left;
  }

  .propose-card-mini {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    border-radius: var(--radius-xl);
  }
}

/* ============================================
   ZONE LABEL DECORATIVE BRANCHES
   ============================================ */

.zone-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.zone-branch {
  width: 40px;
  height: 20px;
  opacity: 0.8;
}

.zone-branch-vertical {
  width: 20px;
  height: 50px;
  margin-right: 8px;
}

/* ============================================
   MAJESTIC SUN ANIMATIONS
   ============================================ */

.sun-aura {
  animation: sunAuraPulse 4s ease-in-out infinite;
}

.sun-body {
  animation: sunBodyGlow 3s ease-in-out infinite;
}

.sun-ring-outer {
  animation: sunRingPulse 2s ease-in-out infinite;
}

.sun-ring-inner {
  animation: sunRingRotate 10s linear infinite;
  transform-origin: 400px 300px;
}

.sun-core-bright {
  animation: sunCorePulse 2s ease-in-out infinite;
}

.corona-rays {
  animation: coronaRotate 20s linear infinite;
  transform-origin: 400px 300px;
}

.ray {
  animation: rayFlicker 1.5s ease-in-out infinite;
}

.ray-1,
.ray-5 {
  animation-delay: 0s;
}
.ray-2,
.ray-6 {
  animation-delay: 0.2s;
}
.ray-3,
.ray-7 {
  animation-delay: 0.4s;
}
.ray-4,
.ray-8 {
  animation-delay: 0.6s;
}

.ember {
  animation: emberFloat 3s ease-in-out infinite;
}

.ember-1 {
  animation-delay: 0s;
}
.ember-2 {
  animation-delay: 0.5s;
}
.ember-3 {
  animation-delay: 1s;
}
.ember-4 {
  animation-delay: 1.5s;
}

@keyframes sunAuraPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.08);
  }
}

@keyframes sunBodyGlow {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}

@keyframes sunRingPulse {
  0%,
  100% {
    opacity: 0.4;
    stroke-width: 2;
  }
  50% {
    opacity: 0.7;
    stroke-width: 3;
  }
}

@keyframes sunRingRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes sunCorePulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.09);
  }
}

@keyframes coronaRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rayFlicker {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes emberFloat {
  0%,
  100% {
    opacity: 0.6;
    transform: translate(0, 0) scale(1);
  }
  25% {
    opacity: 1;
    transform: translate(5px, -8px) scale(1.2);
  }
  50% {
    opacity: 0.8;
    transform: translate(-3px, -15px) scale(0.9);
  }
  75% {
    opacity: 0.5;
    transform: translate(2px, -5px) scale(1.1);
  }
}

/* ============================================
   CODE LEARNING BUTTON & MODAL
   ============================================ */

.code-learning-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-rust);
}

.btn-code-learning {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(234, 88, 12, 0.3));
  border: 2px solid var(--accent-fire);
  border-radius: var(--radius-lg);
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-code-learning:hover {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.3), rgba(234, 88, 12, 0.4));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(251, 146, 60, 0.3);
}

.btn-code-learning .btn-icon {
  font-size: 28px;
}

.btn-code-learning .btn-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--accent-fire);
}

.btn-code-learning .btn-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

/* Code Learning Modal Styles */
#code-learning-modal .modal-content {
  max-width: 900px;
}

.learning-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px;
  background: var(--bg-charred);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-rust);
}

.learning-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-body);
  font-size: 14px;
}

.learning-tab:hover {
  background: rgba(251, 146, 60, 0.1);
  color: var(--text-light);
}

.learning-tab.active {
  background: var(--accent-fire);
  color: white;
}

.learning-tab .tab-icon {
  font-size: var(--text-lg);
}

.learning-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

.learning-content.active {
  display: block;
}

.learning-section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--accent-fire);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-rust);
}

/* Concept Diagram Styles */
.concept-diagram {
  background: var(--bg-charred);
  border: 1px solid var(--border-rust);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.concept-explanation {
  background: rgba(251, 146, 60, 0.05);
  border-left: 3px solid var(--accent-fire);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
}

/* Code Examples Styles */
.code-examples {
  background: #1a1a1a;
  border: 1px solid var(--border-rust);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.code-examples pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #e2e8f0;
}

.code-examples .code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-charred);
  border-bottom: 1px solid var(--border-rust);
}

.code-examples .code-lang {
  font-size: 12px;
  color: var(--accent-fire);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
}

/* Tips List Styles */
.tips-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tip-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--bg-charred);
  border: 1px solid var(--border-rust);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.tip-item:hover {
  border-color: var(--accent-fire);
  transform: translateX(4px);
}

.tip-icon {
  font-size: var(--text-2xl);
  flex-shrink: 0;
}

.tip-content h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--text-light);
  margin-bottom: 4px;
}

.tip-content p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* README Styles */
.readme-content {
  background: var(--bg-charred);
  border: 1px solid var(--border-rust);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.readme-content h1,
.readme-content h2,
.readme-content h3 {
  font-family: var(--font-display);
  color: var(--accent-fire);
  margin-top: 24px;
  margin-bottom: 12px;
}

.readme-content h1:first-child,
.readme-content h2:first-child,
.readme-content h3:first-child {
  margin-top: 0;
}

.readme-content p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.readme-content code {
  background: rgba(251, 146, 60, 0.1);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-sm);
  color: var(--accent-fire);
}

.readme-content ul,
.readme-content ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.readme-content li {
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ============================================
   FLOATING VIKING SYMBOLS
   ============================================ */

.floating-viking-symbols {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.viking-symbol {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: var(--text-2xl);
  color: rgba(74, 222, 128, 0.12);
  font-family: serif;
  animation: floatViking 15s ease-in-out infinite;
  animation-delay: var(--delay);
  text-shadow: 0 0 15px rgba(74, 222, 128, 0.15);
}

@keyframes floatViking {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.12;
  }
  25% {
    transform: translate(20px, -30px) rotate(10deg);
    opacity: 0.2;
  }
  50% {
    transform: translate(-15px, -50px) rotate(-5deg);
    opacity: 0.15;
  }
  75% {
    transform: translate(25px, -20px) rotate(8deg);
    opacity: 0.18;
  }
}

/* Vary sizes for depth effect */
.viking-symbol:nth-child(odd) {
  font-size: 28px;
}

.viking-symbol:nth-child(3n) {
  font-size: var(--text-xl);
  animation-duration: 18s;
}

.viking-symbol:nth-child(4n) {
  font-size: var(--text-3xl);
  animation-duration: 12s;
}

/* ============================================
   RAGNAR EASTER EGG
   ============================================ */

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ragnar-easter-egg {
  opacity: 0.3;
  transition: all 0.5s ease;
  cursor: pointer;
}

.ragnar-easter-egg:hover {
  opacity: 1;
  transform: scale(1.2);
}

.ragnar-silhouette {
  width: 25px;
  height: 32px;
  color: var(--accent-fire);
  filter: drop-shadow(0 0 3px rgba(234, 88, 12, 0.5));
}

.ragnar-easter-egg:hover .ragnar-silhouette {
  color: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));
  animation: ragnarGlow 1s ease-in-out infinite;
}

@keyframes ragnarGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 1));
  }
}

/* ============================================
   VIEW 3: FIND YOUR PATH
   ============================================ */

.path-section {
  min-height: calc(100vh - 200px);
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.path-container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.path-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
}

.path-dots {
  display: flex;
  gap: 8px;
}

.path-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-rust);
  transition:
    background 0.3s,
    transform 0.3s;
}

.path-dot.active {
  background: var(--accent-fire);
  transform: scale(1.2);
}

.path-dot.done {
  background: var(--green);
}

.path-step-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.path-questions {
  position: relative;
}

.path-question {
  display: none;
  animation: fadeIn 0.4s ease;
}

.path-question.active {
  display: block;
}

.path-question-text {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: var(--font-light);
  color: var(--text-cream);
  margin-bottom: 32px;
}

.path-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.path-option {
  padding: 20px 24px;
  background: rgba(26, 15, 5, 0.6);
  border: 1px solid var(--border-rust);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.path-option:hover {
  border-color: var(--accent-fire);
  transform: translateX(8px);
  background: rgba(234, 88, 12, 0.1);
}

.path-option-text {
  font-size: var(--text-base);
  color: var(--text-cream);
  transition: color 0.3s;
}

.path-option:hover .path-option-text {
  color: var(--accent-fire);
}

/* Path Result */
.path-result {
  display: none;
  animation: fadeIn 0.5s ease;
}

.path-result.show {
  display: block;
}

.path-result-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 32px;
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-4xl);
  background: rgba(234, 88, 12, 0.2);
  color: var(--accent-fire);
  animation: pulse 2s ease infinite;
}

.path-result-title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: var(--font-light);
  margin-bottom: 12px;
}

.path-result-title span {
  color: var(--accent-fire);
}

.path-result-desc {
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin-bottom: 32px;
}

.path-result-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   VIEW 4: YOUR JOURNEY
   ============================================ */

.journey-section {
  padding: 80px 0;
}

.journey-header {
  text-align: center;
  margin-bottom: 48px;
}

.journey-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: var(--font-light);
  color: var(--text-cream);
  margin-bottom: 8px;
}

.journey-subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
}

/* Track Selector */
.journey-tracks {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.journey-track {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: rgba(26, 15, 5, 0.6);
  border: 1px solid var(--border-rust);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 0.3s ease;
}

.journey-track:hover {
  border-color: var(--accent-fire);
  transform: translateY(-2px);
}

.journey-track.active {
  background: rgba(234, 88, 12, 0.15);
  border-color: var(--accent-fire);
}

.journey-track-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  background: rgba(26, 15, 5, 0.8);
  color: var(--text-muted);
  transition: all 0.3s;
}

.journey-track.active .journey-track-icon {
  background: rgba(234, 88, 12, 0.2);
  color: var(--accent-fire);
}

.journey-track-info {
  text-align: left;
}

.journey-track-name {
  display: block;
  font-size: 15px;
  font-weight: var(--font-medium);
  color: var(--text-muted);
  transition: color 0.3s;
}

.journey-track.active .journey-track-name {
  color: var(--text-cream);
}

.journey-track-modules {
  font-size: 12px;
  color: var(--text-muted);
}

/* Journey Content */
.journey-content {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}

@media (max-width: 900px) {
  .journey-content {
    grid-template-columns: 1fr;
  }
}

.journey-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Progress Card */
.journey-progress-card {
  padding: 32px;
  background: rgba(26, 15, 5, 0.6);
  border: 1px solid var(--border-rust);
  border-radius: var(--radius-2xl);
}

.journey-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.journey-progress-track {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-cream);
  margin-bottom: 4px;
}

.journey-progress-desc {
  font-size: 14px;
  color: var(--text-muted);
}

.journey-progress-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  background: rgba(234, 88, 12, 0.2);
  color: var(--accent-fire);
}

.journey-progress-bar-container {
  margin-bottom: 24px;
}

.journey-progress-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 8px;
}

.journey-progress-bar {
  height: 8px;
  background: rgba(26, 15, 5, 0.8);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.journey-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-fire);
  border-radius: var(--radius-xs);
  transition: width 0.5s ease;
}

.journey-levels {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--text-sm);
}

.journey-level {
  color: var(--text-muted);
  transition: color 0.3s;
}

.journey-level.active {
  color: var(--accent-fire);
}

.journey-level-arrow {
  color: var(--border-rust);
}

/* Curriculum */
.journey-curriculum {
  padding: 32px;
  background: rgba(26, 15, 5, 0.6);
  border: 1px solid var(--border-rust);
  border-radius: var(--radius-2xl);
}

.journey-curriculum-title {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--text-cream);
  margin-bottom: 24px;
}

.journey-modules {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.journey-module {
  display: flex;
  align-items: center;
  padding: 16px;
  background: rgba(26, 15, 5, 0.4);
  border: 1px solid var(--border-rust);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.journey-module.unlocked {
  cursor: pointer;
}

.journey-module.unlocked:hover {
  border-color: var(--accent-fire);
}

.journey-module.locked {
  opacity: 0.5;
}

.journey-module-num {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--font-semibold);
  background: rgba(26, 15, 5, 0.8);
  color: var(--text-muted);
  margin-right: 16px;
}

.journey-module.unlocked .journey-module-num {
  background: rgba(234, 88, 12, 0.2);
  color: var(--accent-fire);
}

.journey-module-info {
  flex: 1;
}

.journey-module-name {
  display: block;
  font-size: 15px;
  font-weight: var(--font-medium);
  color: var(--text-cream);
}

.journey-module-lessons {
  font-size: 12px;
  color: var(--text-muted);
}

.journey-module-action {
  font-size: 14px;
  color: var(--accent-fire);
}

.journey-module-lock {
  font-size: var(--text-base);
}

/* Sidebar */
.journey-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.journey-stats {
  padding: 24px;
  background: rgba(26, 15, 5, 0.6);
  border: 1px solid var(--border-rust);
  border-radius: var(--radius-2xl);
}

.journey-stats-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.journey-stat {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.journey-stat-label {
  color: var(--text-muted);
}

.journey-stat-value {
  font-family: var(--font-mono);
  color: var(--text-cream);
}

.journey-cta {
  padding: 24px;
  background: rgba(234, 88, 12, 0.1);
  border: 1px solid rgba(234, 88, 12, 0.3);
  border-radius: var(--radius-2xl);
  text-align: center;
}

.journey-cta-text {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.journey-cta-btn {
  width: 100%;
}

/* Fade animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   SECTION BACKGROUNDS - Thematic Designs
   ============================================ */

/* BUILDERS - Old-World Blacksmith Forge */
#view-marketplace {
  position: relative;
  background:
    /* Central forge fire glow */
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(255, 100, 20, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 50% 85%, rgba(255, 60, 0, 0.15) 0%, transparent 40%),
    /* Anvil shadow area */
    radial-gradient(ellipse 30% 20% at 50% 70%, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
    /* Stone wall texture */
    repeating-linear-gradient(
        90deg,
        rgba(60, 45, 35, 0.15) 0px,
        transparent 2px,
        transparent 30px,
        rgba(60, 45, 35, 0.1) 32px
      ),
    repeating-linear-gradient(
      0deg,
      rgba(50, 35, 25, 0.12) 0px,
      transparent 2px,
      transparent 25px,
      rgba(50, 35, 25, 0.08) 27px
    ),
    /* Warm forge interior */
    linear-gradient(
        180deg,
        #0a0604 0%,
        #120a06 15%,
        #1a0f08 35%,
        #2a1510 55%,
        #1f1008 75%,
        #150a04 100%
      );
}

#view-marketplace::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Floating embers from forge */
    radial-gradient(circle at 30% 75%, rgba(255, 120, 40, 0.12) 0%, transparent 15%),
    radial-gradient(circle at 70% 80%, rgba(255, 80, 20, 0.1) 0%, transparent 12%),
    radial-gradient(circle at 45% 90%, rgba(255, 150, 50, 0.15) 0%, transparent 20%),
    radial-gradient(circle at 55% 85%, rgba(255, 60, 10, 0.08) 0%, transparent 10%),
    /* Smoke wisps */
    radial-gradient(ellipse 20% 40% at 40% 30%, rgba(80, 70, 60, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 25% 35% at 60% 25%, rgba(70, 60, 50, 0.05) 0%, transparent 50%),
    /* Sparks */ radial-gradient(circle at 35% 65%, rgba(255, 200, 100, 0.08) 0%, transparent 3%),
    radial-gradient(circle at 65% 70%, rgba(255, 180, 80, 0.06) 0%, transparent 2%);
  pointer-events: none;
  animation: forgeGlow 6s ease-in-out infinite;
}

#view-marketplace::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Vignette - dark corners like inside a forge */ radial-gradient(
    ellipse 80% 70% at 50% 50%,
    transparent 40%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
}

@keyframes forgeGlow {
  0%,
  100% {
    opacity: 0.6;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* YOUR JOURNEY - Clean, Learning-Focused */
#view-journey {
  position: relative;
  background:
    /* Subtle gradient for focus */ linear-gradient(
    180deg,
    #050508 0%,
    #0a0a10 20%,
    #0c0c14 50%,
    #0a0a0f 100%
  );
}

#view-journey::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Very subtle texture for depth */
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(96, 165, 250, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(34, 197, 94, 0.02) 0%, transparent 40%);
  pointer-events: none;
}

/* Override cards in journey for better readability */
#view-journey .journey-curriculum,
#view-journey .journey-stats,
#view-journey .journey-cta {
  background: rgba(15, 15, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

/* FIND YOUR PATH - Ancient Treasure Map */
#view-path {
  position: relative;
  overflow: hidden;
  background:
    /* Aged parchment base */ linear-gradient(
    180deg,
    #1a1408 0%,
    #1f180c 20%,
    #241c10 50%,
    #1a1408 80%,
    #14100a 100%
  );
}

#view-path::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Compass rose center glow */
    radial-gradient(ellipse 30% 25% at 50% 50%, rgba(212, 175, 55, 0.12) 0%, transparent 60%),
    /* Corner decorations - like old map ornaments */
    radial-gradient(circle at 5% 5%, rgba(139, 90, 43, 0.2) 0%, transparent 15%),
    radial-gradient(circle at 95% 5%, rgba(139, 90, 43, 0.2) 0%, transparent 15%),
    radial-gradient(circle at 5% 95%, rgba(139, 90, 43, 0.2) 0%, transparent 15%),
    radial-gradient(circle at 95% 95%, rgba(139, 90, 43, 0.2) 0%, transparent 15%),
    /* Aged paper stains */
    radial-gradient(ellipse 40% 30% at 25% 30%, rgba(101, 67, 33, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 35% 25% at 75% 70%, rgba(101, 67, 33, 0.12) 0%, transparent 50%),
    /* Subtle path lines */
    repeating-linear-gradient(
        45deg,
        transparent 0px,
        transparent 40px,
        rgba(139, 90, 43, 0.03) 40px,
        rgba(139, 90, 43, 0.03) 41px
      ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 40px,
      rgba(139, 90, 43, 0.03) 40px,
      rgba(139, 90, 43, 0.03) 41px
    );
  pointer-events: none;
}

#view-path::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Burnt edges effect */
    linear-gradient(
      to right,
      rgba(10, 8, 4, 0.4) 0%,
      transparent 5%,
      transparent 95%,
      rgba(10, 8, 4, 0.4) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(10, 8, 4, 0.3) 0%,
      transparent 8%,
      transparent 92%,
      rgba(10, 8, 4, 0.3) 100%
    ),
    /* Paper texture noise */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.8;
}

/* Treasure map style for path options */
#view-path .path-option {
  position: relative;
  background: rgba(26, 20, 10, 0.8);
  border: 2px solid rgba(139, 90, 43, 0.4);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

#view-path .path-option:hover {
  border-color: rgba(212, 175, 55, 0.7);
  background: rgba(40, 30, 15, 0.9);
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(212, 175, 55, 0.2);
}

#view-path .path-option.selected {
  border-color: rgba(212, 175, 55, 0.9);
  background: rgba(50, 40, 20, 0.9);
  box-shadow:
    inset 0 0 30px rgba(212, 175, 55, 0.1),
    0 0 20px rgba(212, 175, 55, 0.3);
}

/* ============================================
   INTRO POSITIONED TOOLTIPS
   3-step guided tour pointing to real elements
   ============================================ */

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-max);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.intro-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.intro-overlay.closing {
  opacity: 0;
}

/* Semi-transparent backdrop */
.intro-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}

/* Spotlight cutout over target element */
.intro-spotlight {
  position: fixed;
  background: transparent;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(251, 146, 60, 0.4);
  border: 2px solid var(--accent-fire);
  z-index: 1;
  transition: all 0.4s ease;
}

/* Tooltip container */
.intro-tooltip {
  position: fixed;
  z-index: 2;
  background: linear-gradient(135deg, rgba(26, 15, 5, 0.98) 0%, rgba(45, 24, 16, 0.98) 100%);
  border: 2px solid var(--border-rust);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(234, 88, 12, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* Tooltip arrow */
.intro-tooltip-arrow {
  position: absolute;
  width: 16px;
  height: 16px;
  background: inherit;
  border: 2px solid var(--border-rust);
  transform: rotate(45deg);
}

/* Arrow positions based on tooltip position */
.intro-tooltip[data-position='bottom'] .intro-tooltip-arrow {
  top: -9px;
  left: 50%;
  margin-left: -8px;
  border-right: none;
  border-bottom: none;
}

.intro-tooltip[data-position='top'] .intro-tooltip-arrow {
  bottom: -9px;
  left: 50%;
  margin-left: -8px;
  border-left: none;
  border-top: none;
}

.intro-tooltip[data-position='left'] .intro-tooltip-arrow {
  right: -9px;
  top: 50%;
  margin-top: -8px;
  border-left: none;
  border-bottom: none;
}

.intro-tooltip[data-position='right'] .intro-tooltip-arrow {
  left: -9px;
  top: 50%;
  margin-top: -8px;
  border-right: none;
  border-top: none;
}

/* Skip button */
.intro-tooltip .intro-skip {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition: all 0.2s ease;
}

.intro-tooltip .intro-skip:hover {
  color: var(--text-cream);
  background: rgba(255, 255, 255, 0.1);
}

/* Content */
.intro-tooltip-content {
  text-align: center;
  margin-bottom: 16px;
}

.intro-tooltip-icon {
  font-size: var(--text-3xl);
  margin-bottom: 12px;
  filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.5));
}

.intro-tooltip-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-cream);
  margin-bottom: 8px;
}

.intro-tooltip-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 280px;
}

/* Footer with dots and CTA */
.intro-tooltip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(124, 45, 18, 0.3);
}

.intro-tooltip .intro-dots {
  display: flex;
  gap: 8px;
}

.intro-tooltip .intro-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-rust);
  transition: all 0.3s ease;
}

.intro-tooltip .intro-dot.active {
  background: var(--accent-fire);
  transform: scale(1.2);
}

.intro-tooltip .intro-dot.done {
  background: var(--green);
}

.intro-tooltip .intro-cta {
  background: linear-gradient(135deg, var(--accent-fire) 0%, var(--border-orange) 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
}

.intro-tooltip .intro-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.4);
}

/* Slide animations */
.intro-tooltip.slide-out-left {
  transform: translateX(-100px);
  opacity: 0;
}

.intro-tooltip.slide-out-right {
  transform: translateX(100px);
  opacity: 0;
}

.intro-tooltip.slide-in-left {
  transform: translateX(-50px);
  opacity: 0;
}

.intro-tooltip.slide-in-right {
  transform: translateX(50px);
  opacity: 0;
}

/* Highlighted target element - needs to be above all modals during intro */
.intro-highlighted {
  position: relative;
  z-index: var(--z-max) !important;
  animation: introHighlightPulse 1.3s ease-in-out infinite; /* fib[6] * 100ms */
}

@keyframes introHighlightPulse {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 10px rgba(251, 146, 60, 0.5));
  }
  50% {
    filter: brightness(1.15) drop-shadow(0 0 20px rgba(251, 146, 60, 0.8));
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .intro-tooltip {
    max-width: 90vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .intro-tooltip[data-position='left'],
  .intro-tooltip[data-position='right'] {
    /* Force bottom position on mobile */
    top: auto !important;
    bottom: 20px !important;
  }

  .intro-tooltip-arrow {
    display: none;
  }

  .intro-spotlight {
    /* Simplified spotlight on mobile */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .intro-overlay,
  .intro-tooltip,
  .intro-spotlight,
  .intro-highlighted {
    transition: none;
    animation: none;
  }
}

/* ============================================
   PROJECT PANEL - Slide-in from left
   Shows GitHub data, skills, and builders
   ============================================ */

.project-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    visibility var(--duration-normal) var(--ease-out);
}

.project-panel-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.project-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 400px;
  max-width: 90vw;
  height: 100vh;
  background: linear-gradient(180deg, rgba(26, 15, 5, 0.98) 0%, rgba(15, 10, 5, 0.99) 100%);
  border-right: 2px solid var(--border-rust);
  z-index: calc(var(--z-overlay) + 1);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--duration-normal) var(--ease-in-out);
  box-shadow: 4px 0 40px rgba(0, 0, 0, 0.5);
}

.project-panel.active {
  transform: translateX(0);
}

/* Panel Header */
.project-panel-header {
  padding: 20px;
  border-bottom: 1px solid rgba(124, 45, 18, 0.3);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.project-panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(124, 45, 18, 0.3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--text-xl);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-panel-close:hover {
  background: rgba(234, 88, 12, 0.2);
  color: var(--text-cream);
  border-color: var(--accent-fire);
}

.project-panel-title-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-panel-icon {
  font-size: 28px;
  filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.4));
}

.project-panel-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--font-bold);
  color: var(--text-cream);
  margin: 0;
}

.project-panel-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: fit-content;
}

.project-panel-status.status-live {
  background: rgba(74, 222, 128, 0.15);
  color: var(--green-light);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.project-panel-status.status-building {
  background: rgba(251, 191, 36, 0.15);
  color: var(--gold);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.project-panel-status.status-planned {
  background: rgba(168, 85, 247, 0.15);
  color: var(--purple);
  border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Panel Content */
.project-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.project-panel-content.loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-panel-content.loading::after {
  content: '';
  width: 40px;
  height: 40px;
  border: 3px solid rgba(234, 88, 12, 0.2);
  border-top-color: var(--accent-fire);
  border-radius: 50%;
  animation: panelSpin 0.8s linear infinite;
}

@keyframes panelSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Panel Sections */
.panel-section {
  margin-bottom: 24px;
}

.panel-section-title {
  font-size: 12px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(124, 45, 18, 0.2);
}

/* Progress Bar */
.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(124, 45, 18, 0.3);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--accent-fire);
  border-radius: var(--radius-xs);
  transition: width 0.5s ease;
}

.progress-percentage {
  font-size: 14px;
  font-weight: var(--font-semibold);
  color: var(--text-cream);
  min-width: 40px;
}

/* GitHub Stats */
.github-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.github-stat {
  text-align: center;
  padding: 12px 8px;
  background: rgba(124, 45, 18, 0.1);
  border-radius: var(--radius-md);
  border: 1px solid rgba(124, 45, 18, 0.2);
}

.github-stat .stat-icon {
  display: block;
  font-size: var(--text-base);
  margin-bottom: 4px;
}

.github-stat .stat-value {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-cream);
}

.github-stat .stat-label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Skills Grid */
.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-tag {
  padding: 6px 12px;
  background: rgba(234, 88, 12, 0.1);
  border: 1px solid rgba(234, 88, 12, 0.3);
  border-radius: 20px;
  font-size: 12px;
  color: var(--accent-bright);
}

/* Commits List */
.commits-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.commit-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  border: 1px solid rgba(124, 45, 18, 0.15);
}

.commit-sha {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--cyan);
  background: rgba(34, 211, 238, 0.1);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

.commit-message {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.commit-time {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Builders Grid */
.builders-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.builder-badge {
  position: relative;
  display: block;
  text-decoration: none;
}

.builder-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(124, 45, 18, 0.4);
  transition: all 0.2s ease;
}

.builder-badge:hover .builder-avatar {
  border-color: var(--accent-fire);
  transform: scale(1.1);
}

.builder-commits {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: var(--accent-fire);
  color: white;
  font-size: 10px;
  font-weight: var(--font-semibold);
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

/* Empty State */
.empty-state {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-style: italic;
  opacity: 0.7;
}

/* Error State */
.panel-error {
  text-align: center;
  padding: 40px 20px;
}

.panel-error .error-icon {
  font-size: var(--text-5xl);
  display: block;
  margin-bottom: 16px;
  color: var(--accent-fire);
}

.panel-error p {
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* Panel Footer */
.project-panel-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(124, 45, 18, 0.3);
  display: flex;
  gap: 12px;
}

.panel-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border: none;
}

.panel-btn-primary {
  background: linear-gradient(135deg, var(--accent-fire) 0%, var(--border-orange) 100%);
  color: white;
}

.panel-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.4);
}

.panel-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(124, 45, 18, 0.4);
  color: var(--text-cream);
}

.panel-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-fire);
}

/* Mobile */
@media (max-width: 768px) {
  .project-panel {
    width: 100%;
    max-width: 100%;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .project-panel,
  .project-panel-backdrop {
    transition: none;
  }
  .progress-bar-fill {
    transition: none;
  }
}

/* ============================================
   FACTORY PANEL - Slide-in from right
   Shows track modules and recommendations
   ============================================ */

.factory-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    visibility var(--duration-normal) var(--ease-out);
}

.factory-panel-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.factory-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 90vw;
  height: 100vh;
  background: linear-gradient(180deg, rgba(15, 20, 30, 0.98) 0%, rgba(10, 15, 25, 0.99) 100%);
  border-left: 2px solid rgba(59, 130, 246, 0.3);
  z-index: calc(var(--z-overlay) + 1);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-in-out);
  box-shadow: -4px 0 40px rgba(0, 0, 0, 0.5);
}

.factory-panel.active {
  transform: translateX(0);
}

/* Panel Header */
.factory-panel-header {
  padding: 24px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
  position: relative;
}

.factory-panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--text-xl);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.factory-panel-close:hover {
  background: rgba(59, 130, 246, 0.2);
  color: var(--text-cream);
  border-color: var(--blue);
}

.factory-panel-badge {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(234, 88, 12, 0.1);
  border: 2px solid rgba(234, 88, 12, 0.3);
}

.factory-panel-badge .track-icon {
  font-size: var(--text-3xl);
}

.factory-panel-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-cream);
  margin: 0 0 4px;
}

.factory-panel-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* Panel Content */
.factory-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Modules List */
.modules-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.module-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.module-item:hover:not(.locked) {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateX(4px);
}

.module-item.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.module-icon {
  font-size: var(--text-xl);
  width: 32px;
  text-align: center;
}

.module-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.module-name {
  font-size: 14px;
  font-weight: var(--font-semibold);
  color: var(--text-cream);
}

.module-duration {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.module-status {
  font-size: 14px;
  color: var(--blue);
}

.module-item.locked .module-status {
  color: var(--text-muted);
}

/* Recommended Projects */
.recommended-projects {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recommended-project {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(124, 45, 18, 0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.recommended-project:hover {
  background: rgba(234, 88, 12, 0.1);
  border-color: rgba(234, 88, 12, 0.4);
}

.recommended-project .project-icon {
  font-size: var(--text-2xl);
}

.recommended-project .project-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recommended-project .project-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-cream);
}

.recommended-project .project-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.recommended-project .project-status.status-live {
  color: var(--green-light);
}

.recommended-project .project-status.status-building {
  color: var(--gold);
}

.recommended-project .project-status.status-planned {
  color: var(--purple);
}

/* Track Progress */
.track-progress {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.progress-ring-container {
  position: relative;
  width: 80px;
  height: 80px;
}

.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring-bg {
  stroke: rgba(59, 130, 246, 0.15);
}

.progress-ring-fill {
  stroke: var(--blue);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.progress-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--text-cream);
}

.progress-stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.progress-stat {
  display: flex;
  flex-direction: column;
}

.progress-stat .stat-value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-cream);
}

.progress-stat .stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Panel Footer */
.factory-panel-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(59, 130, 246, 0.2);
  display: flex;
  gap: 12px;
}

.factory-panel .panel-btn-primary {
  background: linear-gradient(135deg, var(--blue) 0%, #1d4ed8 100%);
}

.factory-panel .panel-btn-primary:hover {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.factory-panel .panel-btn-secondary {
  border-color: rgba(59, 130, 246, 0.3);
}

.factory-panel .panel-btn-secondary:hover {
  border-color: var(--blue);
  background: rgba(59, 130, 246, 0.1);
}

/* Mobile */
@media (max-width: 768px) {
  .factory-panel {
    width: 100%;
    max-width: 100%;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .factory-panel,
  .factory-panel-backdrop {
    transition: none;
  }
  .progress-ring-fill {
    transition: none;
  }
  .module-item {
    transition: none;
  }
}

/* ============================================
   RENDERER SYSTEM
   Progressive enhancement styles
   ============================================ */

/* SVG Renderer */
.tree-container svg.svg-renderer {
  will-change: transform;
  transform: translateZ(0);
}

.tree-container svg.svg-renderer.reduced-motion * {
  animation: none !important;
  transition: none !important;
}

.tree-container svg.svg-renderer.paused * {
  animation-play-state: paused !important;
}

/* Three.js Renderer Canvas */
.tree-container canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

/* Node interactions */
.tree-node.hovered,
.realm.hovered {
  filter: brightness(1.2);
}

.tree-node.selected,
.realm.selected {
  filter: brightness(1.3) drop-shadow(0 0 8px var(--accent-fire));
}

.tree-node.filtered-out,
.realm.filtered-out {
  opacity: 0.3;
  pointer-events: none;
}

.tree-node.focusing,
.realm.focusing {
  animation: focusPulse 0.6s ease-out;
}

@keyframes focusPulse {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.5) drop-shadow(0 0 12px var(--accent-fire));
  }
  100% {
    filter: brightness(1.2);
  }
}

/* Renderer loading state */
.tree-container.renderer-loading {
  position: relative;
}

.tree-container.renderer-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(234, 88, 12, 0.2);
  border-top-color: var(--accent-fire);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Renderer switch transition */
.tree-container.switching-renderer {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Renderer info overlay (debug) */
.renderer-info {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--radius-xs);
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  pointer-events: none;
  z-index: 100;
}

/* Performance mode indicator */
.renderer-info.three::before {
  content: '3D';
  color: var(--green);
  margin-right: 4px;
}

.renderer-info.svg::before {
  content: '2D';
  color: var(--blue);
  margin-right: 4px;
}

/* Global reduced motion for renderer */
@media (prefers-reduced-motion: reduce) {
  .tree-container canvas,
  .tree-container svg {
    animation: none !important;
  }

  .tree-node,
  .realm,
  .tree-heart,
  .nordic-sun {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }

  .burn-pulsing {
    animation: none !important;
  }

  @keyframes focusPulse {
    0%,
    100% {
      filter: brightness(1.2);
    }
  }
}

/* ============================================
   DEMO MODE - Coming Soon Overlays
   MVP: Yggdrasil works, DB/wallet features locked
   ============================================ */

.demo-feature {
  position: relative;
}

.demo-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(2px);
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
}

.demo-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(234, 179, 8, 0.1));
  border: 1px solid rgba(234, 179, 8, 0.4);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: #eab308;
  letter-spacing: 0.5px;
  white-space: nowrap;
  z-index: 11;
  pointer-events: none;
}

/* Wallet status demo mode */
.lb-wallet-status.demo-feature {
  cursor: not-allowed;
}

.lb-wallet-status.demo-feature .lb-wallet-text {
  opacity: 0.5;
}

/* Action buttons demo mode */
.lb-action-btn.demo-feature {
  cursor: not-allowed;
}

.lb-action-btn.demo-feature:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Dashboard section demo banner */
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.1), rgba(234, 179, 8, 0.05));
  border: 1px solid rgba(234, 179, 8, 0.2);
  border-radius: var(--radius-lg);
}

.demo-banner-icon {
  font-size: var(--text-xl);
}

.demo-banner-text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: #eab308;
}

.demo-banner-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 8px;
}