#connect4-container {
    width: min(90vw, 522px);
    margin: 2rem auto;
    padding: 1rem;
    background: #1e1e1e;
    border-radius: 12px;
    border: 1px solid #333;
}


#board {
    display: grid;
    border: 6px solid #c62828;
    grid-template-columns: repeat(7, 60px);
    grid-template-rows: repeat(6, 60px);
    gap: 6px;
    background: #da4444;
    padding: 10px;
    border-radius: 12px;
    margin-bottom: 1rem;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    caret-color: transparent;
}

/* Merge both .cell blocks into one */
.cell {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #1e1e1e; /* empty space */
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative; /* required for overlay */
}

.piece {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;

    /* Base texture */
    background: radial-gradient(circle at 45% 45%,
        rgba(255,255,255,0.25),
        rgba(76, 76, 76, 0.4)
    );

    /* SHARP outer bevel */
    box-shadow:
        inset 0 0 0 4px rgba(255, 218, 218, 0.3),   /* hard inner edge */
        inset 0 0 12px rgba(0,0,0,0.5),   /* deep shadow */
        0 4px 8px rgba(0,0,0,0.6);        /* drop shadow */
}


.piece.red {
    background-color: #ffffff;
}

.piece.yellow {
    background-color: #2b2b2b;
}

.piece.winning-piece {
    animation: winPulse 1s infinite alternate;
    background-color: #ffed4d !important; /* bright blue */
}

@keyframes winPulse {
    from { box-shadow: 0 0 10px 2px rgba(255, 211, 77, 0.712); }
    to   { box-shadow: 0 0 20px 6px rgb(255, 211, 77); }
}


/* Old heatmap class (no longer used for coloring) */
.heatmap {
    border: 3px dashed white;
    opacity: 0.7;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* NEW: Phantom overlay for AI vision */
.heatmap-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0.6;
    pointer-events: none;
    border: 2px dashed white;
}