/* ========================================
   Keyboard Test Module Styles
   Fitted to stay inside test-area card
   Max content width: ~1100px
   ======================================== */

.keyboard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  user-select: none;
  padding: 8px 0;
}

.keyboard-row {
  display: flex;
  gap: 3px;
  justify-content: center;
}

.key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 4px 5px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-light);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
  cursor: default;
  transition: all 0.08s ease;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* Size variants — proportional to 46px base */
.key-1_25 { min-width: 58px; }
.key-1_5 { min-width: 71px; }
.key-1_75 { min-width: 83px; }
.key-2 { min-width: 95px; }
.key-2_25 { min-width: 107px; }
.key-2_75 { min-width: 131px; }
.key-space { min-width: 296px; }

/* Gap between key groups */
.key-gap { margin-left: 10px; }
.key-gap-sm { margin-left: 6px; }

/* States */
.key.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
  transform: scale(0.96);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.5), inset 0 0 6px rgba(255,255,255,0.1);
}

.key.tested {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.key.tested.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}

/* Counter badge */
.key-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-sm);
  color: var(--accent-green);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Mobile — allow scroll only on small screens */
@media (max-width: 860px) {
  .keyboard-container {
    overflow-x: auto;
    min-width: 780px;
  }
  .test-area {
    overflow-x: auto;
  }
}

@media (max-width: 600px) {
  .key { min-width: 36px; height: 36px; font-size: 0.6rem; }
  .key-1_25 { min-width: 46px; }
  .key-1_5 { min-width: 56px; }
  .key-1_75 { min-width: 65px; }
  .key-2 { min-width: 74px; }
  .key-2_25 { min-width: 83px; }
  .key-2_75 { min-width: 101px; }
  .key-space { min-width: 230px; }
}