/* ============================================
   KEYBOARD.CSS — Clavier Soureth Compact Mobile
============================================ */

/* ============================================================
   1) CONTENEUR — Compact + Auto-fit
============================================================ */

#keyboard,
.soureth-keyboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
    gap: 4px;
    padding: 8px;
    margin-top: 12px;

    background: rgba(255,255,255,0.10);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.20);
    backdrop-filter: blur(10px);

    width: 100%;
    min-height: 140px;
    box-sizing: border-box;
}

/* ============================================================
   2) TOUCHES — Compact Premium
============================================================ */

.key-btn,
.delete-btn,
.enter-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    transition: 0.2s ease;
    user-select: none;
    font-family: "Nohadra", "Assyrian", sans-serif;

    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hover */
.key-btn:hover,
.delete-btn:hover,
.enter-btn:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.40);
    transform: translateY(-2px) scale(1.03);
}

/* Active */
.key-btn:active,
.delete-btn:active,
.enter-btn:active {
    transform: scale(0.90);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.35);
}

/* Delete */
.delete-btn {
    background: rgba(255,80,80,0.18);
    border-color: rgba(255,80,80,0.35);
    color: #ffcccc;
}

/* ============================================================
   3) TOUCHES SPÉCIALES — Compact
============================================================ */

/* Espace */
.key-btn.space {
    aspect-ratio: auto;
    grid-column: span 2;
    padding: 4px 0;
    min-width: 80px;
}

/* Voyelles */
.vowel-key {
    background: rgba(255,255,255,0.16);
}

/* Finales */
.final-key {
    background: rgba(255,255,255,0.14);
}

/* Entrée */
.enter-btn {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
}

/* ============================================================
   4) ULTRA COMPACT (petits écrans)
============================================================ */

@media (max-width: 480px) {

    #keyboard,
    .soureth-keyboard {
        grid-template-columns: repeat(auto-fit, minmax(24px, 1fr));
        gap: 3px;
        padding: 6px;
    }

    .key-btn,
    .delete-btn,
    .enter-btn {
        font-size: 16px;
        border-radius: 8px;
    }

    .key-btn.space {
        grid-column: span 2;
        padding: 3px 0;
    }
}