/* Virtual Keyboard Styles */

.keyboard-container {
  width: 100%;
  max-width: min(90vw, 1000px);
  margin: 0 auto;
  background-color: var(--bg-secondary);
  padding: clamp(0.25rem, 1vw, 0.75rem);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}

.virtual-keyboard {
  display: grid;
  gap: clamp(2px, 0.5vw, 8px);
  justify-content: center;
  max-width: 100%;
}

/* Keyboard rows */
.keyboard-row {
  display: flex;
  justify-content: center;
  gap: clamp(2px, 0.5vw, 8px);
}

.keyboard-row:nth-child(2) {
  padding-left: calc(var(--space-md) * 0.5);
}

.keyboard-row:nth-child(3) {
  padding-left: var(--space-lg);
}

.keyboard-row:nth-child(4) {
  padding-left: calc(var(--space-lg) * 1.5);
}

/* Individual keys */
.key {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: clamp(0.15rem, 0.6vw, 0.45rem);
  text-align: center;
  font-size: clamp(0.7rem, 1.5vw, 0.875rem);
  font-weight: 500;
  color: var(--text-primary);
  min-height: clamp(19.2px, 3vw, 28.8px); /* Reduced by 40% from original 32px, 5vw, 48px */
  min-width: clamp(32px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  user-select: none;
}

.key:hover {
  background-color: var(--bg-surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Special keys */
.key.space {
  min-width: clamp(120px, 30vw, 240px);
  flex: 1;
}

.key.tab {
  min-width: clamp(30px, 8vw, 48px);
}

.key.caps {
  min-width: clamp(36px, 9vw, 54px);
}

.key.shift {
  min-width: clamp(42px, 10vw, 60px);
}

.key.ctrl,
.key.alt {
  min-width: clamp(30px, 8vw, 48px);
}

.key.enter {
  min-width: clamp(48px, 12vw, 72px);
}

.key.backspace {
  min-width: clamp(42px, 10vw, 60px);
}

/* Key highlighting states */
.key.active {
  background-color: var(--color-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-dark);
}

.key.next {
  background-color: var(--color-secondary);
  color: white;
  animation: glow 1.5s infinite;
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px rgba(20, 184, 166, 0.3); }
  50% { box-shadow: 0 0 15px rgba(20, 184, 166, 0.6); }
}

.key.error {
  background-color: var(--color-error);
  color: white;
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* Finger guidance colors */
.key.finger-1 { border-top: 3px solid #ff6b6b; } /* Left pinky */
.key.finger-2 { border-top: 3px solid #4ecdc4; } /* Left ring */
.key.finger-3 { border-top: 3px solid #45b7d1; } /* Left middle */
.key.finger-4 { border-top: 3px solid #96ceb4; } /* Left index */
.key.finger-5 { border-top: 3px solid #feca57; } /* Left thumb */
.key.finger-6 { border-top: 3px solid #ff9ff3; } /* Right thumb */
.key.finger-7 { border-top: 3px solid #54a0ff; } /* Right index */
.key.finger-8 { border-top: 3px solid #5f27cd; } /* Right middle */
.key.finger-9 { border-top: 3px solid #00d2d3; } /* Right ring */
.key.finger-10 { border-top: 3px solid #ff6348; } /* Right pinky */

/* Finger guide legend */
.finger-guide {
  display: flex;
  justify-content: center;
  gap: clamp(0.25rem, 1vw, 0.75rem);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

.finger-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: clamp(0.6rem, 1.2vw, 0.75rem);
  color: var(--text-muted);
}

.finger-color {
  width: clamp(8px, 1.5vw, 16px);
  height: clamp(8px, 1.5vw, 16px);
  border-radius: 50%;
}

/* Language-specific keyboard layouts */
.keyboard-layout-ar,
.keyboard-layout-ur {
  direction: rtl;
}

.keyboard-layout-ar .key,
.keyboard-layout-ur .key {
  font-family: 'Noto Sans Arabic', sans-serif;
}

.keyboard-layout-hi .key {
  font-family: 'Noto Sans Devanagari', sans-serif;
}

.keyboard-layout-zh .key {
  font-family: 'Noto Sans SC', sans-serif;
}

.keyboard-layout-ja .key {
  font-family: 'Noto Sans JP', sans-serif;
}

.keyboard-layout-ko .key {
  font-family: 'Noto Sans KR', sans-serif;
}

/* Key labels for different layouts */
.key .key-main {
  font-size: var(--font-size-base);
}

.key .key-alt {
  font-size: var(--font-size-xs);
  position: absolute;
  top: 2px;
  right: 2px;
  opacity: 0.6;
}

/* Responsive keyboard */
@media (max-width: 768px) and (min-height: 600px) {
  .keyboard-container {
    padding: var(--space-sm);
  }
  
  .key {
    min-width: clamp(28px, 4vw, 36px);
    min-height: clamp(16.8px, 2.4vw, 21.6px); /* Reduced by 40% from original */
    font-size: clamp(0.6rem, 1.2vw, 0.75rem);
    padding: var(--space-xs);
  }
  
  .key.space {
    min-width: clamp(90px, 25vw, 150px); /* Reduced width to maintain proportions */
  }
  
  .key.tab,
  .key.caps,
  .key.shift,
  .key.enter,
  .key.backspace,
  .key.ctrl,
  .key.alt {
    min-width: clamp(24px, 6vw, 36px); /* Reduced by 40% from original */
  }
  
  .finger-guide {
    gap: var(--space-xs);
  }
  
  .finger-item {
    font-size: 0.6rem;
  }
}

@media (max-width: 480px) or (max-height: 600px) {
  .virtual-keyboard {
    gap: 2px;
  }
  
  .keyboard-row {
    gap: 2px;
  }
  
  .key {
    min-width: clamp(24px, 3.5vw, 32px);
    min-height: clamp(14.4px, 2.1vw, 19.2px); /* Reduced by 40% from original */
    font-size: clamp(0.5rem, 1vw, 0.7rem);
    padding: 1px;
  }
  
  .key.space {
    min-width: clamp(72px, 20vw, 108px); /* Reduced by 40% from original */
  }
  
  .key.tab,
  .key.caps,
  .key.shift,
  .key.enter,
  .key.backspace,
  .key.ctrl,
  .key.alt {
    min-width: clamp(21px, 5vw, 30px); /* Reduced by 40% from original */
  }
  
  .finger-guide {
    display: none; /* Hide on very small screens */
  }
}

/* Large screens optimization */
@media (min-width: 1200px) {
  .practice-main,
  .test-main {
    padding: var(--space-md) var(--space-lg);
    gap: var(--space-md);
  }
  
  .typing-container {
    padding: var(--space-xl);
  }
  
  .keyboard-container {
    padding: var(--space-xl);
  }
}

/* Very large screens */
@media (min-width: 1600px) {
  .typing-text,
  .typing-input {
    font-size: 1.5rem;
  }
  
  .key {
    min-height: 56px;
    min-width: 56px;
    font-size: 1rem;
  }
}

/* Portrait orientation on tablets */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
  .typing-text {
    min-height: clamp(120px, 18vh, 180px);
  }
  
  .typing-input {
    height: clamp(120px, 18vh, 180px);
  }
}

/* Landscape orientation optimization */
@media (orientation: landscape) and (max-height: 700px) {
  .practice-main,
  .test-main {
    min-height: calc(100vh - 60px);
    gap: 2px;
  }
  
  .mode-toggle,
  .practice-controls,
  .test-controls,
  .progress-info,
  .timer-display {
    margin-bottom: 2px;
  }
  
  .typing-text {
    min-height: clamp(60px, 12vh, 100px);
    padding: var(--space-sm);
  }
  
  .typing-input {
    height: clamp(60px, 12vh, 100px);
    padding: var(--space-sm);
  }
  
  .keyboard-container {
    padding: var(--space-sm);
  }
  
  .key {
    min-height: clamp(14.4px, 2.4vh, 21.6px); /* Reduced by 40% from original */
    min-width: clamp(24px, 4vw, 36px);
  }
}
/* Keyboard sound effects */
.key.pressed {
  transform: scale(0.95);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .key {
    transition: none;
  }
  
  .key.next {
    animation: none;
    box-shadow: 0 0 0 2px var(--color-secondary);
  }
  
  .key.error {
    animation: none;
    box-shadow: 0 0 0 2px var(--color-error);
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .key {
    border-width: 2px;
  }
  
  .key.active {
    border-width: 3px;
  }
}