/* Keyboard Container */
#keyboard-helper {
    position: relative;
    padding: 1.5vh;
    backdrop-filter: blur(10px);
    border-radius: 2vh;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    background: #dcdcdc;
    box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.15);
    width: 65vw;
    /* Match game-card width */
    max-width: 1200px;
    /* Margin removed; relying on flex justify-content */
    display: flex;
    justify-content: center;
}

/* Dark Mode Background Override */
html.dark-mode #keyboard-helper {
    background: rgba(10, 10, 10, 0.85);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.keys-grid {
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    gap: 0.4vw;
    /* Proportional gap */
    width: 100%;
}

/* ... (omitted) ... */



.key.is-next {
    animation: neon-pulse 0.8s infinite alternate;
    z-index: 10;
    border-width: 2px;
    border-color: #fff !important;
}

/* Modifier Hint (Shift/AltGr) */
.key.is-next-hint {
    animation: neon-pulse 0.8s infinite alternate;
    border-color: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

@keyframes neon-pulse {
    from {
        box-shadow: 0 0 5px currentColor, inset 0 0 5px currentColor;
        filter: brightness(1);
        transform: scale(1);
    }

    to {
        box-shadow: 0 0 25px currentColor, inset 0 0 15px currentColor;
        filter: brightness(1.8);
        transform: scale(1.1);
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* Ensure container visibility is handled by JS */
#keyboard-container {
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 100;
}

/* ISO Enter Key Styling */
.key.enter-top {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -1px;
    /* Overlap slightly */
    z-index: 2;
    /* Ensure on top of gap */
}

.key.enter-bottom {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -3px;
    /* Pull up to meet top part */
    height: 51px;
    /* Slightly taller to compensate overlap */
    z-index: 2;
}

.key.enter-top:after {
    /* Visual bridge if needed, but margin hack usually works better */
    content: '';
    position: absolute;
    bottom: -2px;
    left: -1px;
    right: -1px;
    height: 4px;
    background: inherit;
    z-index: 1;
}

/* Base Key Style */
.key {
    background: var(--button-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid currentColor;
    border-radius: 0.5vh;
    color: var(--text-main, #fff);
    height: 5.5vh;
    /* Strictly proportional height relative to screen height */
    position: relative;
    /* Essential for absolute positioning of children */
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    text-shadow: 0 0 2px currentColor;
    transition: all 0.1s ease;
    user-select: none;
    grid-column: span 2;
}

.key-label-simple {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.key-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Start completely centered */
    font-size: 1rem;
    line-height: 1;
}

/* If key has shift OR alt char, we might want to offset main char slightly? */
/* For now, valid to keep it centered or move it bottom-left if crowded. */
/* User requested "centered" specifically. */

/* When Shift/Alt keys are present, maybe move main slightly down-right if needed, but centering is safe for single letters */
/* CSS Cleaned up: Removed legacy corner-pushing rules that broke centering for 'E' */

/* Main Character: Centered */
.key-main {
    position: absolute;
    top: 50%;
    /* Strict center */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8vh;
    /* Proportional text size */
    line-height: 1;
    font-weight: 700;
}

/* On complex keys, keep main centered but ensure corners are clear */
.key:has(.key-shift) .key-main {
    font-size: 1.3vh;
    /* Push slightly down to clear top-left shift char */
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* Specific override for keys with BOTH Shift and Alt (3 symbols total) */
/* The corners are diagonally balanced, so Main char should be centered */
.key:has(.key-shift):has(.key-alt) .key-main {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.key-shift {
    position: absolute;
    top: 0.5vh;
    left: 0.5vh;
    font-size: 1.1vh;
    /* Small and crisp */
    font-weight: normal;
    opacity: 0.8;
}

.key-alt {
    position: absolute;
    bottom: 0.3vh;
    right: 0.3vh;
    font-size: 1.1vh;
    font-weight: normal;
    opacity: 0.8;
    text-align: right;
}

/* Ensure Alt chars are visible on dark keys */
/* .dark-mode .key-alt { color: #aaa; } */

/* Highlighting specific parts? For now highlight whole key */

/* Override Key Colors to stand out against background */
/* REMOVED .key { color: #fff } to allow distinct finger colors to drive border/box-shadow */

/* Text Colors - Explicitly handle Light/Dark mode */
.key-main,
.key-shift,
.key-alt,
.key-label-simple {
    color: #333;
    /* Default to Dark Grey (Light Mode) */
}

/* Dark Mode Override */
html.dark-mode .key-main,
html.dark-mode .key-shift,
html.dark-mode .key-alt,
html.dark-mode .key-label-simple {
    color: #fff;
    /* White in Dark Mode */
}

/* Finger Colors (Neon Palette) - This sets 'currentColor' for border/shadow/bg */
/* Finger Colors */
/* Light Mode - Darker/Saturated for visibility */
.finger-pinky {
    color: #C71585;
}

/* Medium Violet Red */
.finger-ring {
    color: #008B8B;
}

/* Dark Cyan */
.finger-middle {
    color: #DC143C;
}

/* Crimson */
.finger-index {
    color: #228B22;
}

/* Forest Green */
.finger-thumb {
    color: #FF8C00;
}

/* Dark Orange */

/* Dark Mode - Neon */
html.dark-mode .finger-pinky {
    color: #FF00FF;
}

html.dark-mode .finger-ring {
    color: #00FFFF;
}

html.dark-mode .finger-middle {
    color: #FF0000;
}

html.dark-mode .finger-index {
    color: #ADFF2F;
}

html.dark-mode .finger-thumb {
    color: #FFFF00;
}

/* Special Keys Width Overrides handled by JS style or specific classes if needed */
/* But JS sets grid-column style directly based on config */

/* States */

/* Next Key Hint (The one to press) */
.key.is-next {
    animation: neon-pulse 0.8s infinite alternate;
    z-index: 10;
    border-width: 2px;
    border-color: #fff !important;
}

/* Modifier Hint (Shift/AltGr) */
.key.is-next-hint {
    animation: neon-pulse 0.8s infinite alternate;
    border-color: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

/* Soft pulse removed, replaced by universal intense pulse */
@keyframes neon-pulse {
    from {
        box-shadow: 0 0 5px currentColor, inset 0 0 5px currentColor;
        filter: brightness(1);
        transform: scale(1);
    }

    to {
        box-shadow: 0 0 25px currentColor, inset 0 0 15px currentColor;
        filter: brightness(1.8);
        transform: scale(1.1);
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* Pressed State (User interaction) */
/* Pressed State (User interaction) */
.key.is-pressed {
    background: currentColor;
    /* Uses the neon color */
    box-shadow: 0 0 30px currentColor;
    transform: translateY(2px);
}

/* When pressed, ensure text is readable against the neon fill */
.key.is-pressed .key-main,
.key.is-pressed .key-shift,
.key.is-pressed .key-alt,
.key.is-pressed .key-label-simple {
    color: #000;
    /* Neon fill usually needs black text for contrast */
    text-shadow: none;
}

/* Error State */
.key.is-error {
    animation: error-flash 0.2s ease-in-out;
}

@keyframes error-flash {

    0%,
    100% {
        background: rgba(255, 255, 255, 0.05);
        color: currentColor;
    }

    50% {
        background: #fff;
        color: #000;
        box-shadow: 0 0 50px #fff;
    }
}

/* Hands / Fingers Hints (Optional - Placeholder for now) */
/* Can be implemented as overlay SVGs or simple side markers */
/* Keyboard Disclaimer */
.keyboard-disclaimer {
    position: absolute;
    bottom: -4vh;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    white-space: nowrap;
    margin-top: 1vh;
    text-align: center;
    font-size: 1.2vh;
    color: #555;
    opacity: 0.9;
    font-style: italic;
    pointer-events: none;
}

html.dark-mode .keyboard-disclaimer {
    color: #888;
    /* Revert to lighter color for dark mode */
}