/* reversi.css */

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }

/* Hide scrollbar completely but keep functionality */
.hide-scroll::-webkit-scrollbar {
    display: none;
}
.hide-scroll {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Board Cells */
.reversi-cell {
    background-color: rgba(15, 23, 42, 0.6); /* Slate 900 semi */
    border: 1px solid rgba(51, 65, 85, 0.5); /* Slate 700 */
    border-radius: 4px;
    position: relative;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reversi-cell.valid-move {
    cursor: pointer;
}

.reversi-cell.valid-move::after {
    content: '';
    position: absolute;
    width: 30%;
    height: 30%;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    pointer-events: none;
    transition: all 0.2s;
}

.reversi-cell.valid-move:hover::after {
    background-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.2);
}

/* Disc (2D — плавна зміна кольору через transition: background).
   Простіша і надійніша схема, ніж 3D-flip — нема race з transition: transform. */
.disc-container {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    box-shadow:
        inset -3px -3px 8px rgba(0, 0, 0, 0.45),
        inset  2px  2px 6px rgba(255, 255, 255, 0.18),
        0 4px 8px rgba(0, 0, 0, 0.35);
    transition: background 0.4s ease, border-color 0.4s ease;
    will-change: background, transform;
}

/* Кольорові варіанти */
.disc-container.disc-p1 {
    background: radial-gradient(circle at 30% 30%, #60a5fa 0%, #2563eb 75%);
    border: 2px solid #1d4ed8;
}
.disc-container.disc-p2 {
    background: radial-gradient(circle at 30% 30%, #f87171 0%, #dc2626 75%);
    border: 2px solid #b91c1c;
}

/* Поява нового диска */
@keyframes reversiDropIn {
    0%   { transform: scale(2.2) translateY(-20px); opacity: 0; }
    60%  { transform: scale(0.9)  translateY(0);    opacity: 1; }
    100% { transform: scale(1)    translateY(0);    opacity: 1; }
}
.disc-container.drop-anim {
    animation: reversiDropIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Невелика пульсація при зміні кольору — щоб гравець бачив, що диск перевернули */
@keyframes reversiFlipPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.78); }
    100% { transform: scale(1); }
}
.disc-container.flip-anim {
    animation: reversiFlipPulse 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
}