/* Import Cinzel font for golden buttons */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&display=swap');

.button-area {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 338px;
}

.golden-button {
    width: 200px;
    height: 50px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(145deg, #b8860b, #cd853f, #daa520, #cd853f, #b8860b);
    box-shadow: 
        0 8px 15px rgba(184, 134, 11, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4);
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 900;
    color: #660018;
    cursor: pointer;
    transition: all 0.3s ease;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    margin: 0;
}

.golden-button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        left: -50%;
    }
    50% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}

/* Login button: positioned above the logo in the background image */
.golden-button:nth-child(1) {
    top: 133px; /* Moved up 30px from previous position */
}

/* Join with code button: positioned below the logo in the background image */
.golden-button:nth-child(2) {
    top: 378px; /* Moved down 15px from previous position */
}

/* Rules & Game Play button: positioned below Join button */
.golden-button:nth-child(3) {
    top: 443px; /* Moved down 15px from previous position */
}

.golden-button:hover {
    background: linear-gradient(145deg, #cd853f, #daa520, #e8b04b, #daa520, #cd853f);
    box-shadow: 
        0 12px 20px rgba(184, 134, 11, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    transform: translateX(-50%) translateY(-2px);
}

.golden-button:active {
    transform: translateX(-50%) translateY(0);
    box-shadow: 
        0 5px 10px rgba(184, 134, 11, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.5);
}