/* ==========================================
   SalmasFlix — Games · Connect Four
   Extracted from games.css in Phase 7.9 (2026-04-23).
   Originally at lines 2470-2564 of the monolith.

   Fixed-grid Connect Four board with image discs. All rules
   scoped to `.cf-*` classes.

   Note: board uses literal blue gradient (#1a3a6b, #0d2456)
   because that IS the Connect Four game — iconic blue frame
   is intrinsic to the product, not themed chrome.
   ========================================== */

@layer features {


.cf-board-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: clamp(4px, 1dvh, var(--spacing-md)) 0;
}

.cf-drop-arrows {
    display: grid;
    grid-template-columns: repeat(7, clamp(36px, 10vw, 48px));
    gap: clamp(2px, 0.5vw, 4px);
    padding: 0 10px;
    margin-bottom: 4px;
}

.cf-board {
    display: grid;
    grid-template-columns: repeat(7, clamp(36px, 10vw, 48px));
    grid-template-rows: repeat(6, clamp(36px, 10vw, 48px));
    gap: clamp(2px, 0.5vw, 4px);
    background: linear-gradient(145deg, #1a3a6b, #0d2456);
    border-radius: var(--radius-lg);
    padding: clamp(6px, 1.5vw, 10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    width: fit-content;
}

.cf-drop-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    transition: background 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s, filter 0.2s, opacity 0.2s, transform 0.2s;
    font-family: inherit;
    width: clamp(36px, 10vw, 48px);
    height: 28px;
}

.cf-drop-btn:hover {
    color: var(--secondary-alt);
    transform: scale(1.3);
}

.cf-cell {
    width: clamp(36px, 10vw, 48px);
    height: clamp(36px, 10vw, 48px);
    background: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cf-piece {
    width: clamp(28px, 8vw, 40px);
    height: clamp(28px, 8vw, 40px);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.cf-piece.cf-animate {
    animation: cf-drop 0.35s ease-in;
}

.cf-disc-empty {
    width: clamp(28px, 8vw, 40px);
    height: clamp(28px, 8vw, 40px);
    border-radius: 50%;
}

@keyframes cf-drop {
    0% {
        transform: translateY(-200px);
        opacity: 0.5;
    }

    70% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


} /* end @layer features */