/* styles.css */

/* 
   Tailwind handles most styling.
   We add specific overrides for the physical keyboard feel.
*/

/* Base glassmorphism for modern feel */
body {
    background-color: #0f172a;
    /* Slate 900 fallback */
}


/* Key Styling */
.key {
    background-color: #1e293b;
    /* Slate 800 */
    border-radius: 6px;
    border: 1px solid #334155;
    /* Slate 700 */
    color: #cbd5e1;
    /* Slate 300 */
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;

    /* 3D Keycap Effect */
    box-shadow:
        0 4px 0 #0f172a,
        /* Deep shadow for height */
        0 5px 5px rgba(0, 0, 0, 0.2);
    /* Soft shadow for depth */

    transition: all 0.05s ease;
    user-select: none;
    height: 48px;
    /* Standard unit height */
}

/* Specific heights matching tailwind classes approximately */
/* Numpad tall keys */
.key[data-code="NumpadAdd"],
.key[data-code="NumpadEnter"] {
    /* Height is set in utility classes but we insure flex center works */
}


/* Active State (Currently Pressed) */
.key.pressed {
    transform: translateY(4px);
    /* Push down */
    box-shadow: 0 0 0 #0f172a;
    /* Remove height shadow */
    background-color: #3b82f6;
    /* Blue 500 */
    color: white;
    border-color: #2563eb;
}

/* Tested State (Prior Success) */
.key.tested {
    background-color: #10b981;
    /* Emerald 500 */
    color: white;
    border-color: #059669;
    /* Keep the height for visual consistency, but color indicates success */
    box-shadow:
        0 4px 0 #064e3b,
        0 5px 5px rgba(0, 0, 0, 0.2);
}

/* Pressed AND Tested (Re-pressing a known good key) */
.key.tested.pressed {
    transform: translateY(4px);
    box-shadow: 0 0 0 #064e3b;
    background-color: #059669;
    /* Darker Emerald */
}

/* Utility to ensure text doesn't overflow on small keys */
.key {
    overflow: hidden;
    white-space: nowrap;
}