/* 
 * 🏛️ ATLAS-CIV-CLICKER | UI: FORSCHUNG ELITE COMPACT (Nova v4.0)
 * -----------------------------------------------------------------------------
 * MENSCH: Dieses Modul veredelt den Forschungsbaum. Es sorgt für maximale 
 * Übersicht (4-5 Forschungen pro Viewport) und klare Kosten-Transparenz.
 * 
 * KI: @ui-research @tech-tree @nova-v4-elite @compact-design @grid-layout
 * -----------------------------------------------------------------------------
 */

/* 📜 RESEARCH TREE CONTAINER */
#research-tree, .skill-tree-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 5px !important;
}

/* 💎 RESEARCH NODE: Die kompakte Wissens-Karte (Grid-Layout) */
.research-node-v3 {
    background: var(--color-glass-base) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border: 1px solid var(--color-glass-border) !important;
    border-radius: 14px !important;
    padding: 10px 15px !important;
    display: grid !important;
    grid-template-columns: 48px 1fr 110px !important; /* Icon | Info | Action */
    grid-template-areas: 
        "icon head action"
        "icon desc action"
        "req req req" !important;
    align-items: center !important;
    gap: 4px 15px !important;
    position: relative !important;
    transition: var(--transition-elite) !important;
    margin: 0 0 8px 0 !important;
    min-height: 80px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

.research-node-v3:hover {
    transform: translateX(4px) !important;
    border-color: rgba(250, 204, 21, 0.4) !important;
    background: rgba(30, 41, 59, 0.9) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important;
}

/* 🖼️ ICON AREA */
.node-icon-circle {
    grid-area: icon;
    width: 48px !important;
    height: 48px !important;
    background: rgba(0,0,0,0.4) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

.node-icon-circle .material-symbols-outlined {
    font-size: 1.6rem !important;
}

/* 📝 HEAD & INFO AREA */
.node-info-v3 {
    grid-area: head; /* Wir nutzen h3 direkt */
    display: contents !important; /* Flatten für Grid */
}

.node-info-v3 h3 {
    grid-area: head;
    font-family: 'Cinzel', serif !important;
    font-size: 1.05rem !important;
    color: #fff !important;
    margin: 0 !important;
    letter-spacing: 1px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.node-desc-v3 {
    grid-area: desc;
    font-size: 0.7rem !important;
    color: rgba(255,255,255,0.6) !important;
    line-height: 1.2 !important;
    margin-top: -2px !important;
}

.node-desc-v3 b, .node-desc-v3 strong {
    color: #60a5fa !important;
    font-weight: 800 !important;
}

/* 💰 ACTION ZONE */
.node-action-zone {
    grid-area: action;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    align-items: stretch !important;
}

/* 🪙 COSTS GRID */
.node-costs-v3 {
    grid-area: action; /* Wir legen es über den Button oder davor */
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: flex-end !important;
    margin-bottom: 30px !important; /* Platz für den Button unten */
}

.cost-pill-v3 {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.cost-pill-v3.insufficient {
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    background: rgba(239, 68, 68, 0.1) !important;
    animation: costPulse 2s infinite !important;
}

@keyframes costPulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* 🚀 ACTION BUTTON */
.node-btn-v3 {
    grid-area: action;
    align-self: end !important;
    padding: 6px 10px !important;
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}

/* 🎖️ LEVEL & TIMER */
.node-lvl-badge-v3 {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    font-size: 0.6rem !important;
    font-weight: 900 !important;
    color: var(--color-gold) !important;
    opacity: 0.8 !important;
}

.node-timer-v3 {
    position: absolute !important;
    top: 25px !important;
    right: 8px !important;
    font-size: 0.65rem !important;
    color: #60a5fa !important;
    font-weight: 800 !important;
}

/* 🛡️ REQUIREMENTS (Zweite Zeile falls nötig) */
.node-req-hint {
    grid-area: req;
    background: rgba(0,0,0,0.2) !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    margin-top: 5px !important;
}

.req-checklist {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.req-checklist div {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
}

/* 🎖️ MASTERY & STATUS */
.research-node-v3.mastery-mode {
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.2), inset 0 0 10px rgba(250, 204, 21, 0.1) !important;
}

.research-node-v3.locked {
    opacity: 0.6 !important;
    filter: grayscale(0.6) !important;
}

/* 📱 MOBILE FEINJUSTIERUNG */
@media (max-width: 480px) {
    .research-node-v3 {
        grid-template-columns: 44px 1fr 95px !important;
        padding: 8px 12px !important;
        gap: 2px 8px !important;
    }
    
    .node-info-v3 h3 { font-size: 0.9rem !important; }
    .node-btn-v3 { font-size: 0.6rem !important; padding: 5px !important; }
}

/* 🖥️ DESKTOP-GRID: Die kaiserliche Wissenschafts-Halle */
@media (min-width: 1024px) {
    .skill-tree-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)) !important;
        gap: 20px !important;
        padding: 20px 0 !important;
    }

    .research-node-v3 {
        margin-bottom: 0 !important;
        min-height: 110px !important;
    }
}

/* 🌟 PREMIUM EFFECTS FOR ACTIVE / MAXED RESEARCHES */
/* MENSCH: Pulsierender blauer Neon-Glow für Forschungen im Studium. KI: @ui-research @effects */
.research-node-v3.studying {
    border-color: rgba(96, 165, 250, 0.8) !important;
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.4), inset 0 0 10px rgba(96, 165, 250, 0.2) !important;
    animation: bluePulseGlow 2s infinite ease-in-out !important;
}

@keyframes bluePulseGlow {
    0% {
        box-shadow: 0 0 12px rgba(96, 165, 250, 0.3), inset 0 0 6px rgba(96, 165, 250, 0.1) !important;
        border-color: rgba(96, 165, 250, 0.6) !important;
    }
    50% {
        box-shadow: 0 0 25px rgba(96, 165, 250, 0.7), inset 0 0 15px rgba(96, 165, 250, 0.4) !important;
        border-color: rgba(96, 165, 250, 1) !important;
    }
    100% {
        box-shadow: 0 0 12px rgba(96, 165, 250, 0.3), inset 0 0 6px rgba(96, 165, 250, 0.1) !important;
        border-color: rgba(96, 165, 250, 0.6) !important;
    }
}

/* MENSCH: Veredelter smaragdgrüner/metallischer Look für maximierte Forschungen (Stufe 10 / Max). KI: @ui-research @effects */
.research-node-v3.max-level {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.45) 0%, rgba(20, 83, 45, 0.35) 50%, rgba(15, 23, 42, 0.9) 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 22px rgba(16, 185, 129, 0.4), inset 0 0 12px rgba(16, 185, 129, 0.2) !important;
}

.research-node-v3.max-level::after {
    content: "★ MEISTERSTUFE ★" !important;
    position: absolute !important;
    bottom: 5px !important;
    right: 8px !important;
    font-size: 0.55rem !important;
    font-weight: 900 !important;
    color: #34d399 !important;
    letter-spacing: 1px !important;
    opacity: 0.9 !important;
}