body { 
    font-family: 'Inter', sans-serif; 
    background-color: #0b0f1a; 
    /* background: linear-gradient(rgba(0, 0, 0, 0.014), rgba(0, 0, 0, 0.088)), url('./images/vikea.jpg');
    background-size: cover;
    background-position: center !important; */
    color: #94a3b8; 
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.content-wrapper { flex: 1; }
.mono { font-family: 'Fira Code', monospace; }

/* Navigation & Page Transitions */
.page { display: none; opacity: 0; }
.page.active { 
    display: block; 
    animation: fadeIn 0.5s ease forwards; 
}

.nav-link { transition: color 0.2s ease; cursor: pointer; }
.nav-link:hover { color: #06b6d4; }
.nav-link.active { color: #06b6d4; font-weight: 600; }
.tab-btn.active {
    background-color: #a855f7;
}

/* Card Styles */
.glow-card { 
    transition: all 0.3s ease; 
    border: 1px solid rgba(30, 41, 59, 0.8); 
    background: rgba(15, 23, 42, 0.4);
    cursor: pointer;
}

/* Category Hover Colors */
[data-category="movement"]:hover { background: rgba(6, 182, 212, 0.08); border-color: #06b6d4; box-shadow: 0 0 20px rgba(6, 182, 212, 0.1); }
.dot-movement { background-color: #06b6d4; box-shadow: 0 0 8px #06b6d4; }

[data-category="items"]:hover { background: rgba(245, 158, 11, 0.08); border-color: #f59e0b; box-shadow: 0 0 20px rgba(245, 158, 11, 0.1); }
.dot-logistics { background-color: #f59e0b; box-shadow: 0 0 8px #f59e0b; }

[data-category="combat"]:hover { background: rgba(239, 68, 68, 0.08); border-color: #ef4444; box-shadow: 0 0 20px rgba(239, 68, 68, 0.1); }
.dot-combat { background-color: #ef4444; box-shadow: 0 0 8px #ef4444; }

[data-category="utility"]:hover { background: rgba(168, 85, 247, 0.08); border-color: #a855f7; box-shadow: 0 0 20px rgba(168, 85, 247, 0.1); }
.dot-utility { background-color: #a855f7; box-shadow: 0 0 8px #a855f7; }

.tab-active { background: rgba(6, 182, 212, 0.1); border-color: #06b6d4; color: #fff; }
.copy-feedback { pointer-events: none; transition: opacity 0.5s; opacity: 0; }

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(15px); } 
    to { opacity: 1; transform: translateY(0); } 
}

footer {
    border-top: 1px solid #1e293b;
    padding: 2.5rem 0;
    text-align: center;
    background: #0b0f1a;
    margin-top: 4rem;
}

#logo {
    height: 32px;
    width: 32px;
}

a {
    color: #5aa5b2;
    text-decoration: none;
}