@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter:wght@300;400;700;900&display=swap');

:root {
    --ibm-beige: #d7ccc8;
    --ibm-brown: #8d6e63;
    --ibm-dark: #4e342e;
    --power-black: #1a1a1a;
    --pc-green: #4caf50; /* Zamiast złota, kolor klasycznego fosforu */
}

body { font-family: 'Inter', sans-serif; background-color: #f5f2eb; color: #2d2422; }
code, pre, .font-mono { font-family: 'Fira Code', monospace; }

.gradient-header { background: linear-gradient(135deg, var(--power-black) 0%, var(--ibm-dark) 50%, var(--ibm-brown) 100%); }

.tab-btn {
    border-bottom: 4px solid transparent;
    transition: all 0.3s ease;
}
.tab-btn.active {
    border-bottom-color: var(--ibm-dark);
    color: var(--ibm-dark);
    background-color: #ffffff;
}

.tech-sidebar::-webkit-scrollbar { width: 6px; }
.tech-sidebar::-webkit-scrollbar-thumb { background: #bcaaa4; border-radius: 3px; }

.arch-menu-btn { transition: all 0.2s; border-left: 4px solid transparent; }
.arch-menu-btn.active-arch { border-left-color: var(--ibm-dark); background-color: #efebe4; color: var(--ibm-dark); font-weight: 700; }

.game-card { transition: transform 0.3s, box-shadow 0.3s; border-top: 4px solid var(--ibm-brown); }
.game-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(78, 52, 46, 0.15); }

.fade-in { animation: fadeIn 0.4s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }