@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@400;600;800&display=swap');

/* Global Font Definitions (Tailwind config handles usage) */

/* Key Shadows for Professional Look */
.home-shadow {
    box-shadow: 0 0 100px 5px rgba(236, 72, 153, 0.5), 0 0 50px 5px rgba(168, 85, 247, 0.5); /* Pink & Purple glow */
}

/* Custom Key Styling (Overriding DaisyUI/Tailwind defaults) */
.key {
    /* Base style for all keys */
    font-size: 1.25rem; /* text-xl */
    font-weight: 600;
    width: 2.5rem; /* Adjust for better spacing */
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2D3748; /* Darker key background */
    color: #E2E8F0; /* Light text */
    border: 2px solid #4A5568; /* Subtle border */
    box-shadow: 0 4px 0 #1A202C; /* 3D effect shadow */
    transition: all 0.05s ease;
    cursor: pointer;
    text-transform: uppercase;
}

.key:hover {
    background-color: #4A5568;
}

/* Correct Hit - Green Feedback */
.correct-hit {
    background-color: #10B981 !important; /* Tailwind Green-500 */
    color: #000 !important;
    border-color: #059669 !important; /* Darker Green border */
    box-shadow: 0 4px 0 #059669 !important;
}

/* Miss - Red Feedback */
.miss-hit {
    background-color: #EF4444 !important; /* Tailwind Red-500 */
    color: #000 !important;
    border-color: #DC2626 !important; /* Darker Red border */
    box-shadow: 0 4px 0 #DC2626 !important;
}

/* Currently Active Letter - Orange/Accent Glow */
.active-key {
    background-color: #FF8A00 !important; /* Custom Accent Orange */
    color: #FFF !important;
    border-color: #E67A00 !important;
    box-shadow: 0 0 15px 5px #FF8A00, 0 4px 0 #E67A00 !important; /* Glow effect + 3D */
    transform: translateY(-2px); /* Lift a bit */
}

/* Key Press Effect (Simulate press) */
.key:active {
    box-shadow: 0 0px 0 #1A202C;
    transform: translateY(4px);
}