/* ========================================================================
   VIER GEWINNT (Connect Four) - Classic Board Game
   ======================================================================== */

/* --- Background --- */
.vg-bg {
    background: radial-gradient(ellipse at center, #0f2040 0%, #0a1628 100%);
}

/* --- Content Container --- */
.vg-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* --- Turn Indicator --- */
.vg-turn-indicator {
    text-align: center;
    padding: 6px 20px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vg-turn-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #b0c4de;
}

.vg-win-text {
    color: #81c784;
    text-shadow: 0 0 10px rgba(129, 199, 132, 0.4);
}

.vg-lose-text {
    color: #e57373;
    text-shadow: 0 0 10px rgba(229, 115, 115, 0.4);
}

.vg-draw-text {
    color: #90caf9;
}

/* --- Drop Row (arrows above board) --- */
.vg-drop-row {
    display: grid;
    grid-template-columns: repeat(7, 72px);
    gap: 0;
}

.vg-drop-btn {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    border-radius: 6px 6px 0 0;
    transition: background 0.15s;
}

.vg-drop-btn.vg-drop-active {
    cursor: pointer;
}

.vg-drop-btn.vg-drop-active:hover {
    background: rgba(229, 57, 53, 0.25);
}

.vg-drop-arrow {
    color: #e53935;
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.vg-drop-btn.vg-drop-active:hover .vg-drop-arrow {
    opacity: 1;
}

/* --- Board --- */
.vg-board {
    display: grid;
    grid-template-columns: repeat(7, 72px);
    grid-template-rows: repeat(6, 72px);
    background: #1565c0;
    border-radius: 8px 8px 16px 16px;
    padding: 8px;
    gap: 0;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        0 2px 0 #0d47a1;
    border: 3px solid #0d47a1;
}

/* --- Cell --- */
.vg-cell {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

/* --- Disc Hole --- */
.vg-disc-hole {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #0a1628;
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.6),
        inset 0 -1px 2px rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s;
}

/* Hover effect on empty cells */
.vg-empty:hover .vg-disc-hole {
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.6),
        0 0 8px rgba(229, 57, 53, 0.3);
}

/* --- Disc --- */
.vg-disc {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Red disc (Player) */
.vg-red .vg-disc {
    background: radial-gradient(circle at 35% 35%, #ff6659, #e53935 50%, #b71c1c);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.15);
}

/* Yellow disc (Computer) */
.vg-yellow .vg-disc {
    background: radial-gradient(circle at 35% 35%, #fff176, #fdd835 50%, #f9a825);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

/* --- Win Cell Highlight --- */
.vg-win-cell .vg-disc {
    animation: vg-win-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes vg-win-pulse {
    0% {
        box-shadow:
            0 3px 6px rgba(0, 0, 0, 0.4),
            0 0 0 0 rgba(212, 175, 55, 0);
        transform: scale(1);
    }
    100% {
        box-shadow:
            0 3px 6px rgba(0, 0, 0, 0.4),
            0 0 16px 4px rgba(212, 175, 55, 0.6);
        transform: scale(1.08);
    }
}

/* --- Last Drop Indicator --- */
.vg-last-drop .vg-disc-hole {
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.6),
        0 0 6px rgba(212, 175, 55, 0.3);
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .vg-board {
        grid-template-columns: repeat(7, 52px);
        grid-template-rows: repeat(6, 52px);
        padding: 6px;
    }

    .vg-drop-row {
        grid-template-columns: repeat(7, 52px);
    }

    .vg-cell {
        width: 52px;
        height: 52px;
    }

    .vg-disc-hole {
        width: 42px;
        height: 42px;
    }

    .vg-disc {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 420px) {
    .vg-board {
        grid-template-columns: repeat(7, 44px);
        grid-template-rows: repeat(6, 44px);
        padding: 4px;
    }

    .vg-drop-row {
        grid-template-columns: repeat(7, 44px);
    }

    .vg-cell {
        width: 44px;
        height: 44px;
    }

    .vg-disc-hole {
        width: 36px;
        height: 36px;
    }

    .vg-disc {
        width: 30px;
        height: 30px;
    }
}