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

: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: var(--bg-void);
}

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

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-charred); }
::-webkit-scrollbar-thumb { background: var(--border-rust); border-radius: 4px; }
::-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 24px;
}

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

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 12px 24px;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(12px);
    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: 10px;
    text-decoration: none;
    color: var(--text-cream);
}

.nav-logo-icon { font-size: 24px; }

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

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

.nav-tab {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s 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: 8px;
    padding: 12px 24px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    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 0.2s 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: 8px 16px;
    font-size: 12px;
    box-shadow: 2px 2px 0 var(--border-rust);
}

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

.view-switcher-container {
    margin-top: 70px;
    padding: 20px 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: 50;
}

.view-switcher {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.view-switch-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-family: var(--font-mono);
    pointer-events: auto;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-burnt);
    border: 2px solid var(--border-rust);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.3s 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: 20px; }
.view-switch-label {
    font-family: var(--font-display);
    font-size: 18px;
}

.view-section {
    display: none;
    animation: fadeIn 0.4s 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: 8px;
    padding: 8px 20px;
    background: rgba(34, 197, 94, 0.15);
    border: 2px solid var(--green);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.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: 700;
    margin-bottom: 12px;
    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: 15px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 24px;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

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

.hero-stat-value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--accent-bright);
}

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

.hero-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.filter-section { padding: 8px 0; }

.filter-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-right: 8px;
}

.filter-pill,
.skill-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-charred);
    border: 2px solid var(--border-rust);
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.2s 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;
    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: 20;
    cursor: pointer;
    transition: transform 0.3s 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: 24px;
    filter: drop-shadow(0 0 8px rgba(255, 107, 0, 0.8));
}

.tree-core .core-label {
    font-size: 8px;
    font-weight: 700;
    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: 15;
    cursor: pointer;
    transition: transform 0.3s ease;
}

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

.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 0.3s 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: 20px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.tree-node .node-label {
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    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: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    z-index: 10;
}

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

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

.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 0.4s 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: 18px;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

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

/* ============================================
   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 0.4s 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: 700;
    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: 20px;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 8px;
}

.propose-cta-desc {
    font-size: 13px;
    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: 700;
    font-size: 14px;
    text-decoration: none;
    border-radius: 100px;
    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: 20px;
    font-weight: 700;
    color: var(--accent-bright);
    margin-bottom: 8px;
}

.join-builder-cta p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.builder-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--accent-fire);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border-radius: 100px;
    transition: all 0.3s 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: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.builder-card {
    background: var(--bg-charred);
    border: 2px solid var(--border-rust);
    border-radius: var(--radius);
    padding: 24px;
    transition: all 0.3s 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: 16px;
    margin-bottom: 16px;
}

.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: 28px;
}

.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: 20px;
    font-weight: 700;
    color: var(--text-cream);
}

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

.builder-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    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: 12px; }

.builder-bio {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-rust);
}

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

.skills-title,
.projects-title,
.future-title,
.seeking-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-cream);
    margin-bottom: 12px;
}

.skills-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.skill-name {
    font-size: 12px;
    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 0.5s ease;
}

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

.projects-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-burnt);
    border-radius: 6px;
    font-size: 13px;
}

.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: 100px;
    font-size: 11px;
    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: 600;
    color: var(--text-muted);
    background: var(--bg-burnt);
    border: 1px solid var(--border-rust);
    border-radius: 6px;
    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: 700;
    color: #fff;
    background: var(--green);
    border: none;
    border-radius: 6px;
    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: 48px;
    margin-bottom: 16px;
}

.join-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-cream);
    margin-bottom: 12px;
}

.join-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

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

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

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal.active { display: flex; }

/* Modal z-index hierarchy - doc-modal on top when opened from feature tree */
#doc-modal { z-index: 1000; }
#feature-modal { z-index: 1010; }
#component-modal { z-index: 1020; }
#deep-modal { z-index: 1005; }
#code-learning-modal { z-index: 1025; }

/* When component-modal is active, it should be on top */
#component-modal.active { z-index: 1030; }
#code-learning-modal.active { z-index: 1035; }

.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: 20px;
    padding: 32px;
    animation: modalSlide 0.3s 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: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-muted);
    background: var(--bg-burnt);
    border: 1px solid var(--border-rust);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

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

.modal-icon { font-size: 48px; }

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

.modal-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-cream);
    margin-bottom: 4px;
}

.modal-status {
    display: inline-block;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
}

.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: 16px;
    font-weight: 700;
    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: 6px;
    font-size: 13px;
    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: 700;
}

.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: 6px;
    font-size: 12px;
    color: var(--accent-bright);
}

.doc-dependencies {
    font-size: 13px;
    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;
    gap: 8px;
}

/* 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: 700;
    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: 13px;
    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: 32px; }

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

.mini-tree-core-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    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: 8px;
    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: 20px; }

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

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

.mini-tree-branch-status {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
}

.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: 11px;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 600;
    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: 8px;
    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: 700;
    color: var(--text-cream);
    margin-bottom: 8px;
}

.component-heading-icon {
    font-size: 16px;
}

.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: 16px;
    font-weight: 700;
    color: var(--accent-bright);
    margin-bottom: 12px;
}

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

.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: 8px;
    border-left: 3px solid var(--purple);
}

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

.roadmap-item-text {
    font-size: 13px;
    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: 100px;
    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: 16px;
    color: var(--text-cream);
}

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

.footer-links a {
    font-size: 13px;
    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: 11px; }

    .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: 24px; }

    .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: 16px;
        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: 32px;
    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: 700;
    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: 700;
    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: 11px;
    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: 700;
    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: 100px;
    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: 24px;
    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: 16px;
    font-weight: 700;
    color: var(--green);
}

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

.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; }
}

/* 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: 18px;
}

.node-ellipse .node-text {
    font-size: 12px;
    font-weight: 700;
    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: 18px;
    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: 32px;
    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: 40px;
        height: 40px;
    }

    .tree-node .node-icon { font-size: 18px; }
    .tree-node .node-label { font-size: 9px; }

    .zone-label { font-size: 11px; 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: 16px;
    }
}

/* ============================================
   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: 12px;
    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: 18px;
    font-weight: 600;
    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: 12px;
    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: 8px;
    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: 18px;
}

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

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

.learning-section-title {
    font-family: var(--font-display);
    font-size: 20px;
    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: 12px;
    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: 12px;
    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: 600;
    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: 12px;
    transition: all 0.3s ease;
}

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

.tip-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.tip-content h4 {
    font-family: var(--font-display);
    font-size: 16px;
    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: 12px;
    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: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    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: 24px;
    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: 20px;
    animation-duration: 18s;
}

.viking-symbol:nth-child(4n) {
    font-size: 32px;
    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));
    }
}