:root {
    --color-deep-blue: #020826;
    --color-galaxy-purple: #47407A;
    --color-matrix-green: #00E8C4;
    --color-gold-dust: #E6D0AA;
    --color-soft-light: #A0B9C9;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--color-deep-blue);
    color: var(--color-soft-light);
    margin: 0; padding: 20px;
    display: flex; flex-direction: column; align-items: center;
}

#instructions {
    max-width: 600px; margin-bottom: 20px;
    background: rgba(7, 40, 90, 0.8);
    padding: 15px; border-radius: 8px; text-align: center;
}

#main { display: flex; gap: 40px; max-width: 900px; width: 100%; }

#left-panel { flex: 1; }

#leaderboard {
    background: rgba(7, 40, 90, 0.8);
    padding: 20px; border-radius: 8px;
    border: 1px solid var(--color-galaxy-purple);
}

#status-box span { font-weight: bold; color: var(--color-matrix-green); }

#game-result-area { margin-top: 25px; min-height: 40px; text-align: center; }
#result-text.win { color: var(--color-matrix-green); text-shadow: 0 0 15px var(--color-matrix-green); }
#result-text.lose { color: #ff8888; text-shadow: 0 0 10px #ff0000; }

.ttt-board {
    display: grid; grid-template-columns: repeat(3, 100px);
    gap: 10px; margin: 20px auto;
}

.cell {
    width: 100px; height: 100px;
    background: var(--color-galaxy-purple);
    border-radius: 10px; display: flex;
    justify-content: center; align-items: center;
    font-size: 50px; font-weight: bold; cursor: pointer;
    transition: all 0.3s ease;
}

.cell.X { color: var(--color-matrix-green); }
.cell.O { color: var(--color-gold-dust); }

/* Podświetlenie zwycięskiej linii */
.cell.winner-cell {
    background-color: var(--color-matrix-green) !important;
    color: var(--color-deep-blue) !important;
    transform: scale(1.1);
    box-shadow: 0 0 20px var(--color-matrix-green);
    z-index: 10;
}

.cell.oldest {
    animation: pulseWarning 1.5s infinite;
    border: 2px solid #ff4444;
}

.cell.disappearing {
    animation: flashOut 0.4s ease-out;
}

@keyframes pulseWarning {
    0%, 100% { opacity: 1; filter: brightness(1.3); }
    50% { opacity: 0.4; }
}

@keyframes flashOut {
    0% { background: #fff; transform: scale(1.1); }
    100% { background: transparent; transform: scale(0); }
}

#resetBtn {
    padding: 12px 25px; font-weight: bold; cursor: pointer;
    background: var(--color-matrix-green); color: var(--color-deep-blue);
    border: none; border-radius: 8px; width: 100%; transition: 0.3s;
}

#resetBtn:hover { filter: brightness(1.2); }

.back-to-main-btn {
    align-self: flex-start; margin-bottom: 20px;
    color: var(--color-matrix-green); text-decoration: none; font-weight: bold;
}