/* Diamond Slots Game Styles - 3x3 Grid */

/* 3x3 Reel Container */
.reel-container-3x3 {
    width: 150px;
    height: 450px; /* 3 symbols high */
    overflow: hidden;
    background: linear-gradient(to bottom, #1e1b4b, #0f172a);
    border-radius: 1rem;
    border: 3px solid #fbbf24;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.reel-3x3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: none;
}

.symbol {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}

.symbol i {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

/* Diamond symbol special effect */
.symbol .fa-gem {
    color: #a78bfa;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% {
        filter: drop-shadow(0 0 10px #a78bfa) brightness(1);
    }
    50% {
        filter: drop-shadow(0 0 20px #ec4899) brightness(1.5);
    }
}

/* Star symbol */
.symbol .fa-star {
    color: #fbbf24;
}

/* Crown symbol */
.symbol .fa-crown {
    color: #fbbf24;
}

/* Coins symbol */
.symbol .fa-coins {
    color: #fbbf24;
}

/* Clover symbol */
.symbol .fa-clover {
    color: #34d399;
}

/* Bell symbol */
.symbol .fa-bell {
    color: #f87171;
}

/* Spinning animation - downward motion */
.reel-3x3.spinning {
    animation: spin-3x3 0.1s linear infinite;
}

@keyframes spin-3x3 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(150px); /* Spin downward */
    }
}

/* Win Lines Overlay */
.win-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.win-line {
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 0 8px currentColor);
}

/* Horizontal lines - positioned to go through center of symbols */
/* Each symbol is 150px tall, grid is 450px total (3 symbols × 150px) */
.win-line-1 {
    /* Top row: center at 75px (150px / 2) */
    top: 75px;
    left: 10px;
    right: 10px;
    height: 6px;
    background: #fbbf24;
    box-shadow: 0 0 15px #fbbf24, 0 0 25px #fbbf24;
}

.win-line-2 {
    /* Middle row: center at 225px (150px + 150px/2) */
    top: 225px;
    left: 10px;
    right: 10px;
    height: 6px;
    background: #34d399;
    box-shadow: 0 0 15px #34d399, 0 0 25px #34d399;
}

.win-line-3 {
    /* Bottom row: center at 375px (300px + 150px/2) */
    top: 375px;
    left: 10px;
    right: 10px;
    height: 6px;
    background: #ec4899;
    box-shadow: 0 0 15px #ec4899, 0 0 25px #ec4899;
}

/* Diagonal lines - precise positioning */
.win-line-diagonal-1 {
    /* Diagonal from top-left (75px, 75px) to bottom-right (375px, 375px) */
    top: 75px;
    left: 10px;
    width: calc(100% - 20px);
    height: 6px;
    background: #a78bfa;
    transform-origin: top left;
    transform: rotate(18.43deg); /* atan(300/462) for precise angle */
    box-shadow: 0 0 15px #a78bfa, 0 0 25px #a78bfa;
}

.win-line-diagonal-2 {
    /* Diagonal from bottom-left (75px, 375px) to top-right (375px, 75px) */
    top: 375px;
    left: 10px;
    width: calc(100% - 20px);
    height: 6px;
    background: #f87171;
    transform-origin: top left;
    transform: rotate(-18.43deg); /* Negative angle for upward slope */
    box-shadow: 0 0 15px #f87171, 0 0 25px #f87171;
}

/* Active win line */
.win-line.active {
    opacity: 1;
    animation: pulse-line 0.8s ease-in-out infinite;
}

@keyframes pulse-line {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 8px currentColor);
        transform: scaleY(1);
    }
    50% {
        filter: brightness(1.8) drop-shadow(0 0 20px currentColor);
        transform: scaleY(1.5);
    }
}

/* Special pulsing for diagonal lines */
.win-line-diagonal-1.active,
.win-line-diagonal-2.active {
    animation: pulse-diagonal-line 0.8s ease-in-out infinite;
}

@keyframes pulse-diagonal-line {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 8px currentColor);
        height: 6px;
    }
    50% {
        filter: brightness(1.8) drop-shadow(0 0 20px currentColor);
        height: 8px;
    }
}

/* Win animation */
@keyframes win-flash {
    0%, 100% {
        background-color: rgba(251, 191, 36, 0.3);
        transform: scale(1);
    }
    50% {
        background-color: rgba(251, 191, 36, 0.6);
        transform: scale(1.02);
    }
}

.reel-container-3x3.winning {
    animation: win-flash 0.5s ease-in-out 3;
    border-color: #fbbf24;
    box-shadow: 0 0 30px #fbbf24;
}

/* Button animations */
#spin-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

#spin-button:not(:disabled):hover {
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}

/* Bet button active state */
.bet-button.active {
    background: linear-gradient(to right, #8b5cf6, #ec4899);
    border: 2px solid #fbbf24;
}

/* Win message animation */
@keyframes bounce-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#win-message:not(.hidden) {
    animation: bounce-in 0.5s ease-out;
}

/* Status message colors */
.status-win {
    color: #34d399;
    text-shadow: 0 0 10px #34d399;
}

.status-lose {
    color: #f87171;
}

.status-info {
    color: #60a5fa;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .reel-container-3x3 {
        width: 100px;
        height: 300px; /* 3 symbols × 100px */
    }
    
    .symbol {
        height: 100px;
        font-size: 2.5rem;
    }
    
    @keyframes spin-3x3 {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(100px); /* Spin downward on mobile */
        }
    }
    
    /* Adjust win lines for mobile - 100px symbols */
    .win-line-1 {
        top: 50px; /* Center of first symbol (100px / 2) */
    }
    
    .win-line-2 {
        top: 150px; /* Center of second symbol (100px + 100px/2) */
    }
    
    .win-line-3 {
        top: 250px; /* Center of third symbol (200px + 100px/2) */
    }
    
    .win-line-diagonal-1 {
        top: 50px;
        transform: rotate(18.43deg);
    }
    
    .win-line-diagonal-2 {
        top: 250px;
        transform: rotate(-18.43deg);
    }
}

/* Jackpot effect */
@keyframes jackpot {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.2) rotate(-5deg);
    }
    50% {
        transform: scale(1) rotate(5deg);
    }
    75% {
        transform: scale(1.2) rotate(-5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.jackpot-win {
    animation: jackpot 1s ease-in-out;
}

/* Coin animation for wins */
@keyframes coin-flip {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.coin-animation {
    animation: coin-flip 0.6s ease-in-out;
}

/* Glow effect for balance on win */
@keyframes balance-glow {
    0%, 100% {
        text-shadow: 0 0 5px #fbbf24;
    }
    50% {
        text-shadow: 0 0 20px #fbbf24, 0 0 30px #fbbf24;
    }
}

.balance-win {
    animation: balance-glow 1s ease-in-out 2;
}

/* Winning symbol highlight */
.symbol.winning-symbol {
    animation: symbol-glow 0.6s ease-in-out infinite;
    position: relative;
}

.symbol.winning-symbol::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, transparent 70%);
    pointer-events: none;
}

@keyframes symbol-glow {
    0%, 100% {
        background-color: rgba(251, 191, 36, 0.1);
        box-shadow: inset 0 0 10px rgba(251, 191, 36, 0.3);
    }
    50% {
        background-color: rgba(251, 191, 36, 0.3);
        box-shadow: inset 0 0 30px rgba(251, 191, 36, 0.6),
                    0 0 20px rgba(251, 191, 36, 0.5);
    }
}