/* ============================================================
   KEYBOARD — Brahmi on-screen keyboard
   ============================================================ */

/* ── Section container ───────────────────────────────────── */
#keyboard-section {
    background:  var(--color-surface-alt);
    border-left: 2px solid var(--color-border);
    padding:     var(--space-4) var(--space-4);
    display:     flex;
    flex-direction: column;
    gap:         var(--space-2);
    overflow-y:  auto;
    overflow-x:  hidden;
}

/* ── Tab bar ─────────────────────────────────────────────── */
#keyboard-tabs {
    display:         flex;
    gap:             var(--space-2);
    overflow-x:      auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom:  2px;  /* keep focus ring visible */
}

#keyboard-tabs::-webkit-scrollbar { display: none; }

.kbd-tab {
    padding:        var(--space-1) var(--space-3);
    border-radius:  var(--radius-pill);
    border:         1px solid var(--color-border);
    background:     var(--color-surface);
    color:          var(--color-text-muted);
    font-size:      var(--fs-xs);
    font-weight:    var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space:    nowrap;
    transition:     background var(--transition-fast),
                    color      var(--transition-fast),
                    border-color var(--transition-fast);
    flex-shrink:    0;
}

.kbd-tab:hover {
    background:   var(--color-surface-alt);
    color:        var(--color-text);
    border-color: var(--color-border-strong);
}

.kbd-tab.is-active {
    background:   var(--color-primary);
    color:        #FFFDF8;
    border-color: var(--color-primary-dark);
}

/* ── Key grid ────────────────────────────────────────────── */
#keyboard-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap:                   var(--space-2);
}

/* ── Individual key ──────────────────────────────────────── */
.brahmi-key {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            1px;
    min-height:     54px;
    padding:        var(--space-1) var(--space-1);
    border-radius:  var(--radius-md);
    border:         1px solid var(--color-border);
    background:     var(--color-surface);
    color:          var(--color-text);
    box-shadow:     var(--shadow-key);
    transition:     background    var(--transition-fast),
                    color         var(--transition-fast),
                    border-color  var(--transition-fast),
                    box-shadow    var(--transition-fast),
                    transform     var(--transition-fast);
    cursor:         pointer;
    touch-action:   manipulation;
}

.brahmi-key:hover {
    background:   var(--color-surface-alt);
    border-color: var(--color-border-strong);
    box-shadow:   var(--shadow-md);
    transform:    translateY(-1px);
}

.brahmi-key.is-pressed,
.brahmi-key:active {
    background: var(--color-surface-deep);
    transform:  translateY(1px) scale(0.97);
    box-shadow: 0 1px 2px rgba(48, 40, 32, 0.10);
}

.brahmi-key:focus-visible {
    outline:        2px solid var(--color-gold);
    outline-offset: 2px;
}

/* Success flash */
.brahmi-key.key-success {
    background:   var(--color-gold-pale);
    border-color: var(--color-gold);
    box-shadow:   0 0 0 3px rgba(196, 154, 82, 0.25);
}

/* Hint highlight (level 1) */
.brahmi-key.is-hint {
    background:   var(--color-gold-pale);
    border-color: var(--color-gold);
    animation:    hint-pulse 1.4s ease-in-out infinite;
}

/* ── Key character & label ───────────────────────────────── */
.key-char {
    font-family: 'Noto Sans Brahmi', var(--font-brahmi), serif;
    font-size:   var(--brahmi-size-key);
    line-height: 1;
    color:       var(--color-text);
    transition:  color var(--transition-fast);
}

.key-label {
    font-size:      var(--fs-xs);
    color:          var(--color-text-muted);
    font-family:    var(--font-ui);
    letter-spacing: 0.04em;
    line-height:    1;
}

.brahmi-key:hover .key-label {
    color: var(--color-text-light);
}