/* ===================================================================
   Connect Four - shared tokens + board primitives.
   =================================================================== */

:root {
    --c4-red:    #d4213d;
    --c4-red-d:  #8a0e22;
    --c4-yellow: #f6c813;
    --c4-yellow-d: #a37500;
    --c4-board:  #0f3a6e;
    --c4-board-d:#072448;
}

.c4-token {
    width: 100%; height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 -6px 14px rgba(0,0,0,.35),
                inset 0 2px 4px rgba(255,255,255,.3);
}
.c4-token--red {
    background: radial-gradient(circle at 30% 30%, #ff6688 0%, var(--c4-red) 55%, var(--c4-red-d) 100%);
}
.c4-token--yellow {
    background: radial-gradient(circle at 30% 30%, #fff09e 0%, var(--c4-yellow) 55%, var(--c4-yellow-d) 100%);
}
.c4-token.is-fresh { animation: c4Drop .42s cubic-bezier(.5,1.6,.4,1); }
@keyframes c4Drop {
    from { transform: translateY(-220%); opacity: 0; }
    60%  { transform: translateY(8px); opacity: 1; }
    to   { transform: translateY(0); opacity: 1; }
}
.c4-token.is-winning {
    animation: c4Win 1.6s ease-in-out infinite alternate;
    outline: 3px solid #fff;
    outline-offset: -3px;
}
@keyframes c4Win {
    from { box-shadow: inset 0 -6px 14px rgba(0,0,0,.35),
                       inset 0 2px 4px rgba(255,255,255,.3),
                       0 0 12px rgba(255,255,255,.5); }
    to   { box-shadow: inset 0 -6px 14px rgba(0,0,0,.35),
                       inset 0 2px 4px rgba(255,255,255,.3),
                       0 0 30px rgba(255,255,255,.9); }
}

.c4-mini-slot {
    background: #0d2a4d;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}
.c4-mini-slot--red { background: var(--c4-red); }
.c4-mini-slot--yellow { background: var(--c4-yellow); }