/* General Page Styling */
body {
    font-family: 'Arial Black', sans-serif;
    background-color: #FDE047; /* Bright Banana Yellow */
    color: #1E293B; /* Dark charcoal text for readability */
    text-align: center;
    padding: 20px;
    margin: 0;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 5px;
}

p {
    font-weight: bold;
    margin-bottom: 25px;
}

/* Guess Input Layout */
.input-container {
    margin-bottom: 30px;
}

input {
    padding: 12px;
    font-size: 16px;
    border: 3px solid #1E293B;
    border-radius: 8px;
    width: 250px;
    outline: none;
}

button {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    background-color: #1E293B;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-left: 5px;
}

button:hover {
    background-color: #475569;
}

button:disabled {
    background-color: #94A3B8;
    cursor: not-allowed;
}

/* The Guessing Grid Rows */
#gridContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 600px;
    margin: 0 auto;
}

.grid-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columns for 6 player traits */
    gap: 8px;
}

/* Individual Squares */
.grid-box {
    background-color: white;
    border: 3px solid #1E293B;
    border-radius: 6px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Stained glass colors applied at the end of the flip */
.correct {
    background-color: #22C55E !important; 
    color: white !important;
}

.partial {
    background-color: #EAB308 !important; 
    color: white !important;
}

.incorrect {
    background-color: #64748B !important; 
    color: white !important;
}
@keyframes flipBox {
    0% {
        transform: rotateX(0deg);
        background-color: white;
        color: #1E293B;
    }
    45% {
        transform: rotateX(90deg);
        background-color: white;
        color: #1E293B;
    }
    55% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

.flip-animation {
    animation: flipBox 0.6s ease forwards;
}
/* --- 3D FLIP ANIMATION EFFECTS --- */
.flip-animate {
    animation: flipSquare 0.6s ease-in-out forwards;
    backface-visibility: visible;
}

@keyframes flipSquare {
    0% {
        transform: rotateX(0deg);
        background-color: white;
        color: #1E293B;
    }
    45% {
        transform: rotateX(90deg);
        background-color: white;
        color: #1E293B;
    }
    55% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}
/* 3D Flip Animation Styles */
.grid-box {
    transform: rotateX(90deg); /* Start completely flat/hidden */
    transition: transform 0.4s ease;
    animation: flipIn 0.5s ease forwards;
}

@keyframes flipIn {
    0% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg); /* Flip completely open facing player */
    }
}
.hidden {
    display: none !important;
}