/* Import Tailwind base styles (optional if using CDN, but good practice) */
/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities; */

/* Ensure body uses the font */
body {
    font-family: 'Assistant', sans-serif;
}

/* Base Tile Style */
.tile {
    width: 4rem; /* w-16 */
    height: 4rem; /* h-16 */
    border: 2px solid #d1d5db; /* border-gray-300 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.25rem; /* text-4xl */
    font-weight: bold;
    text-transform: uppercase; /* Although Hebrew doesn't have case, good practice */
    user-select: none;
    transition: transform 0.2s ease-in-out, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Tile with a letter typed in */
.tile.filled {
    border-color: #9ca3af; /* border-gray-400 */
    transform: scale(1.05); /* Slight pop effect */
}

/* Tile States after Guess */
.tile.correct {
    background-color: #6aaa64; /* Green */
    border-color: #6aaa64;
    color: white;
}

.tile.present {
    background-color: #c9b458; /* Yellow */
    border-color: #c9b458;
    color: white;
}

.tile.absent {
    background-color: #787c7e; /* Gray */
    border-color: #787c7e;
    color: white;
}

/* Animation for revealing tiles */
.tile.reveal {
    animation: flip 0.6s ease forwards;
}

@keyframes flip {
    0% {
        transform: rotateX(0deg);
        background-color: white; /* Start color */
        border-color: #9ca3af;
        color: black;
    }
    49.9% {
        transform: rotateX(90deg);
        background-color: white; /* Mid-flip color */
        border-color: #9ca3af;
        color: black;
    }
    50% {
        transform: rotateX(90deg);
        /* Color changes instantly at the halfway point */
    }
    100% {
        transform: rotateX(0deg);
        /* Final color is set by .correct, .present, .absent classes */
    }
}

/* Add slight delay for subsequent tiles in a row */
.tile.reveal:nth-child(2) { animation-delay: 0.1s; }
.tile.reveal:nth-child(3) { animation-delay: 0.2s; }
.tile.reveal:nth-child(4) { animation-delay: 0.3s; }

/* Animation for invalid guess shake */
.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Keyboard Styling */
#keyboard {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    margin-bottom: 0.1rem;
}

.keyboard-button[data-letter="backspace"],
.keyboard-button[data-letter="enter"] {
    /* Maintain relative size difference using clamp */
    width: clamp(2.25rem, 13.5vw, 4.5rem); /* 1.5x the standard button size */
}

.keyboard-button {
    /* Responsive sizing with clamp(MIN, PREFERRED, MAX) */
    /* PREFERRED uses viewport width (vw) for scaling */
    /* MIN/MAX use rem for fixed limits */
    width: clamp(1.5rem, 9vw, 3rem); /* Min 24px, scales with 9% viewport width, Max 48px */
    height: clamp(1.5rem, 9vw, 3rem);
    font-size: clamp(0.8rem, 3vw, 1.5rem); /* Min 12.8px, scales with 3% viewport width, Max 24px */
    margin: 0 clamp(0.05rem, 0.3vw, 0.1rem); /* Adjust margin slightly */

    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #9ca3af; /* gray-400 */
    border-radius: 0.25rem; /* rounded */
    background-color: #f9fafb; /* bg-gray-50 */
    color: #4b5563; /* text-gray-700 */
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s, transform 0.1s ease, width 0.1s ease, height 0.1s ease, font-size 0.1s ease; /* Added transitions for size */
}

.keyboard-button:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
}

.keyboard-button:active {
    transform: scale(0.95);
}

/* Keyboard Styles */
.keyboard-button.correct {
    background-color: #6aaa64; /* Green */
    border-color: #6aaa64;
    color: white;
}

.keyboard-button.present {
    background-color: #c9b458; /* Yellow */
    border-color: #c9b458;
    color: white;
}

.keyboard-button.absent {
    background-color: #787c7e; /* Gray */
    border-color: #787c7e;
    color: white;
    cursor: not-allowed;
}