/* ============================================================
   TeclaRápida — Virtual Keyboard Styles
   Version: 2.0.0 — Premium Edition
   ============================================================
   Table of Contents:
   1. Keyboard Container & 3D Perspective
   2. Keyboard Rows
   3. Key Base Styling
   4. Key Width Classes
   5. Finger Color Assignments
   6. Key States (Active, Highlight, Correct, Error)
   7. Finger Indicator
   8. Keyboard Visibility
   9. Hand Guide
   10. Responsive
   11. Hands SVG Styles
   ============================================================ */


/* ============================================================
   1. KEYBOARD CONTAINER & 3D PERSPECTIVE
   ============================================================ */

/* --- Breathing aurora border animation --- */
@keyframes auroraBorder {
  0%   { opacity: 0.35; filter: hue-rotate(0deg)   blur(18px); }
  25%  { opacity: 0.50; filter: hue-rotate(30deg)  blur(22px); }
  50%  { opacity: 0.60; filter: hue-rotate(60deg)  blur(26px); }
  75%  { opacity: 0.50; filter: hue-rotate(30deg)  blur(22px); }
  100% { opacity: 0.35; filter: hue-rotate(0deg)   blur(18px); }
}

.keyboard-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
  perspective: 900px;
  perspective-origin: 50% 100%;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.keyboard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: var(--space-5) var(--space-5) var(--space-4);
  background:
    linear-gradient(
      175deg,
      rgba(22, 27, 48, 0.97) 0%,
      rgba(13, 16, 28, 0.99) 50%,
      rgba(8, 10, 20, 1) 100%
    );
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(99, 102, 241, 0.14);
  border-radius: var(--radius-xl);
  box-shadow:
    /* Inner top bevel */
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    /* Inner bottom depth */
    0 -3px 12px rgba(0, 0, 0, 0.50) inset,
    /* Ambient shadow */
    0 8px 20px rgba(0, 0, 0, 0.35),
    /* Deep drop shadow */
    0 20px 60px rgba(0, 0, 0, 0.55),
    /* Colored ambient glow */
    0 0 80px rgba(99, 102, 241, 0.06),
    0 0 120px rgba(6, 182, 212, 0.03);
  transform: rotateX(2deg);
  transform-origin: bottom center;
  position: relative;
  z-index: 1;
}

/* Subtle aurora glow behind the keyboard */
.keyboard::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-xl) + 2px);
  background:
    conic-gradient(
      from 180deg at 50% 50%,
      rgba(99, 102, 241, 0.20),
      rgba(6, 182, 212, 0.15),
      rgba(139, 92, 246, 0.18),
      rgba(236, 72, 153, 0.10),
      rgba(99, 102, 241, 0.20)
    );
  z-index: -1;
  opacity: 0.50;
  filter: blur(22px);
  pointer-events: none;
}

/* Top highlight edge — machined aluminium feel */
.keyboard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 20%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 80%,
    transparent 100%
  );
  border-radius: 1px;
  z-index: 2;
}


/* ============================================================
   2. KEYBOARD ROWS
   ============================================================ */
.keyboard-row {
  display: flex;
  gap: 4px;
  justify-content: center;
}


/* ============================================================
   3. KEY BASE STYLING
   ============================================================ */
.key {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-width: 44px;
  height: 46px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: var(--weight-medium);
  color: var(--color-kbd-key-text);
  background:
    linear-gradient(
      180deg,
      rgba(52, 56, 78, 0.95) 0%,
      rgba(40, 43, 62, 0.92) 45%,
      rgba(34, 37, 54, 0.90) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 3px solid rgba(0, 0, 0, 0.55);
  border-radius: 7px;
  cursor: pointer;
  transition:
    transform 80ms ease,
    background var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    color var(--duration-fast) ease,
    filter var(--duration-fast) ease;
  position: relative;
  box-shadow:
    /* Inner top edge highlight */
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    /* Inner side highlights */
    1px 0 0 rgba(255, 255, 255, 0.02) inset,
    -1px 0 0 rgba(255, 255, 255, 0.02) inset,
    /* Ambient shadow */
    0 2px 4px rgba(0, 0, 0, 0.30),
    /* Depth shadow */
    0 4px 8px rgba(0, 0, 0, 0.15);
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Top inner glow for 3D realism */
.key::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.10),
    transparent
  );
  border-radius: 1px;
  pointer-events: none;
}

.key:hover {
  background:
    linear-gradient(
      180deg,
      rgba(62, 66, 92, 0.98) 0%,
      rgba(48, 52, 74, 0.95) 45%,
      rgba(42, 45, 66, 0.92) 100%
    );
  border-color: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

/* Secondary label (e.g. shifted character) */
.key__secondary {
  font-size: 0.55rem;
  color: var(--color-text-muted);
  line-height: 1;
  margin-bottom: -1px;
  opacity: 0.7;
}

.key__primary {
  line-height: 1;
  font-size: 0.78rem;
}

/* Home row indicator dot — subtle glow */
.key--home::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
  pointer-events: none;
}


/* ============================================================
   4. KEY WIDTH CLASSES
   ============================================================ */

/* Base unit: ~44px on desktop; all widths relative */
.key--w-1     { min-width: 44px;  flex: 0 0 44px; }
.key--w-1-25  { min-width: 55px;  flex: 0 0 55px; }
.key--w-1-5   { min-width: 66px;  flex: 0 0 66px; }
.key--w-1-75  { min-width: 77px;  flex: 0 0 77px; }
.key--w-2     { min-width: 88px;  flex: 0 0 88px; }
.key--w-2-25  { min-width: 99px;  flex: 0 0 99px; }
.key--w-2-75  { min-width: 121px; flex: 0 0 121px; }
.key--w-6-25  { min-width: 275px; flex: 0 0 275px; }

/* Named aliases for clarity */
.key--wide       { min-width: 66px;  flex: 0 0 66px; }       /* Tab, Caps */
.key--extra-wide { min-width: 121px; flex: 0 0 121px; }      /* Shift */

.key--space {
  min-width: 275px;
  flex: 1 0 275px;
  max-width: 340px;
  border-radius: 7px;
  background:
    linear-gradient(
      180deg,
      rgba(46, 50, 72, 0.95) 0%,
      rgba(36, 39, 58, 0.92) 40%,
      rgba(30, 33, 50, 0.88) 100%
    );
  border-bottom: 3px solid rgba(0, 0, 0, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    1px 0 0 rgba(255, 255, 255, 0.02) inset,
    -1px 0 0 rgba(255, 255, 255, 0.02) inset,
    0 3px 6px rgba(0, 0, 0, 0.30),
    0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Special keys styling */
.key--modifier {
  font-family: var(--font-ui);
  font-size: 0.63rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* ============================================================
   5. FINGER COLOR ASSIGNMENTS
   ============================================================
   Each finger gets a vivid background tint at 22-28% opacity
   so the keyboard is colourful yet elegant.
   ============================================================ */

.keyboard--finger-colors .key[data-finger="left-pinky"] {
  background: linear-gradient(180deg,
    rgba(239, 68, 68, 0.25) 0%,
    rgba(239, 68, 68, 0.14) 55%,
    rgba(239, 68, 68, 0.07) 100%);
  border-color: rgba(239, 68, 68, 0.18);
  box-shadow:
    0 1px 0 rgba(239, 68, 68, 0.08) inset,
    0 2px 4px rgba(0, 0, 0, 0.25);
}

.keyboard--finger-colors .key[data-finger="left-ring"] {
  background: linear-gradient(180deg,
    rgba(249, 115, 22, 0.25) 0%,
    rgba(249, 115, 22, 0.14) 55%,
    rgba(249, 115, 22, 0.07) 100%);
  border-color: rgba(249, 115, 22, 0.18);
  box-shadow:
    0 1px 0 rgba(249, 115, 22, 0.08) inset,
    0 2px 4px rgba(0, 0, 0, 0.25);
}

.keyboard--finger-colors .key[data-finger="left-middle"] {
  background: linear-gradient(180deg,
    rgba(234, 179, 8, 0.25) 0%,
    rgba(234, 179, 8, 0.14) 55%,
    rgba(234, 179, 8, 0.07) 100%);
  border-color: rgba(234, 179, 8, 0.18);
  box-shadow:
    0 1px 0 rgba(234, 179, 8, 0.08) inset,
    0 2px 4px rgba(0, 0, 0, 0.25);
}

.keyboard--finger-colors .key[data-finger="left-index"] {
  background: linear-gradient(180deg,
    rgba(34, 197, 94, 0.25) 0%,
    rgba(34, 197, 94, 0.14) 55%,
    rgba(34, 197, 94, 0.07) 100%);
  border-color: rgba(34, 197, 94, 0.18);
  box-shadow:
    0 1px 0 rgba(34, 197, 94, 0.08) inset,
    0 2px 4px rgba(0, 0, 0, 0.25);
}

.keyboard--finger-colors .key[data-finger="right-index"] {
  background: linear-gradient(180deg,
    rgba(6, 182, 212, 0.25) 0%,
    rgba(6, 182, 212, 0.14) 55%,
    rgba(6, 182, 212, 0.07) 100%);
  border-color: rgba(6, 182, 212, 0.18);
  box-shadow:
    0 1px 0 rgba(6, 182, 212, 0.08) inset,
    0 2px 4px rgba(0, 0, 0, 0.25);
}

.keyboard--finger-colors .key[data-finger="right-middle"] {
  background: linear-gradient(180deg,
    rgba(59, 130, 246, 0.25) 0%,
    rgba(59, 130, 246, 0.14) 55%,
    rgba(59, 130, 246, 0.07) 100%);
  border-color: rgba(59, 130, 246, 0.18);
  box-shadow:
    0 1px 0 rgba(59, 130, 246, 0.08) inset,
    0 2px 4px rgba(0, 0, 0, 0.25);
}

.keyboard--finger-colors .key[data-finger="right-ring"] {
  background: linear-gradient(180deg,
    rgba(139, 92, 246, 0.25) 0%,
    rgba(139, 92, 246, 0.14) 55%,
    rgba(139, 92, 246, 0.07) 100%);
  border-color: rgba(139, 92, 246, 0.18);
  box-shadow:
    0 1px 0 rgba(139, 92, 246, 0.08) inset,
    0 2px 4px rgba(0, 0, 0, 0.25);
}

.keyboard--finger-colors .key[data-finger="right-pinky"] {
  background: linear-gradient(180deg,
    rgba(236, 72, 153, 0.25) 0%,
    rgba(236, 72, 153, 0.14) 55%,
    rgba(236, 72, 153, 0.07) 100%);
  border-color: rgba(236, 72, 153, 0.18);
  box-shadow:
    0 1px 0 rgba(236, 72, 153, 0.08) inset,
    0 2px 4px rgba(0, 0, 0, 0.25);
}

.keyboard--finger-colors .key[data-finger="thumb"] {
  background: linear-gradient(180deg,
    rgba(148, 163, 184, 0.20) 0%,
    rgba(148, 163, 184, 0.11) 55%,
    rgba(148, 163, 184, 0.05) 100%);
  border-color: rgba(148, 163, 184, 0.14);
  box-shadow:
    0 1px 0 rgba(148, 163, 184, 0.06) inset,
    0 2px 4px rgba(0, 0, 0, 0.25);
}


/* ============================================================
   6. KEY STATES
   ============================================================ */

/* --- Active (key pressed) --- */
.key.key--pressed, .key--pressed {
  transform: translateY(2px) scale(0.96);
  border-bottom-width: 1px;
  box-shadow:
    0 0 0 rgba(255, 255, 255, 0) inset,
    0 1px 2px rgba(0, 0, 0, 0.20);
  background: rgba(20, 22, 38, 0.98) !important;
  color: #ffffff !important;
  transition: transform 40ms ease, background 40ms ease, box-shadow 40ms ease;
}

/* --- Highlight (next key to press) --- */
.key.key--highlight, .key.highlight, .key--highlight {
  animation: keyGlow 1.5s ease-in-out infinite;
  color: white;
  z-index: 2;
}

/* Finger-specific glow colours for highlight */
.key.highlight[data-finger="left-pinky"], .key.key--highlight[data-finger="left-pinky"] {
  box-shadow:
    0 0 14px rgba(239, 68, 68, 0.55),
    0 0 36px rgba(239, 68, 68, 0.22),
    0 0 2px rgba(239, 68, 68, 0.40) inset;
  border-color: rgba(239, 68, 68, 0.65);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.40) 0%, rgba(239, 68, 68, 0.22) 100%);
}
.key.highlight[data-finger="left-ring"], .key.key--highlight[data-finger="left-ring"] {
  box-shadow:
    0 0 14px rgba(249, 115, 22, 0.55),
    0 0 36px rgba(249, 115, 22, 0.22),
    0 0 2px rgba(249, 115, 22, 0.40) inset;
  border-color: rgba(249, 115, 22, 0.65);
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.40) 0%, rgba(249, 115, 22, 0.22) 100%);
}
.key.highlight[data-finger="left-middle"], .key.key--highlight[data-finger="left-middle"] {
  box-shadow:
    0 0 14px rgba(234, 179, 8, 0.55),
    0 0 36px rgba(234, 179, 8, 0.22),
    0 0 2px rgba(234, 179, 8, 0.40) inset;
  border-color: rgba(234, 179, 8, 0.65);
  background: linear-gradient(180deg, rgba(234, 179, 8, 0.40) 0%, rgba(234, 179, 8, 0.22) 100%);
}
.key.highlight[data-finger="left-index"], .key.key--highlight[data-finger="left-index"] {
  box-shadow:
    0 0 14px rgba(34, 197, 94, 0.55),
    0 0 36px rgba(34, 197, 94, 0.22),
    0 0 2px rgba(34, 197, 94, 0.40) inset;
  border-color: rgba(34, 197, 94, 0.65);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.40) 0%, rgba(34, 197, 94, 0.22) 100%);
}
.key.highlight[data-finger="right-index"], .key.key--highlight[data-finger="right-index"] {
  box-shadow:
    0 0 14px rgba(6, 182, 212, 0.55),
    0 0 36px rgba(6, 182, 212, 0.22),
    0 0 2px rgba(6, 182, 212, 0.40) inset;
  border-color: rgba(6, 182, 212, 0.65);
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.40) 0%, rgba(6, 182, 212, 0.22) 100%);
}
.key.highlight[data-finger="right-middle"], .key.key--highlight[data-finger="right-middle"] {
  box-shadow:
    0 0 14px rgba(59, 130, 246, 0.55),
    0 0 36px rgba(59, 130, 246, 0.22),
    0 0 2px rgba(59, 130, 246, 0.40) inset;
  border-color: rgba(59, 130, 246, 0.65);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.40) 0%, rgba(59, 130, 246, 0.22) 100%);
}
.key.highlight[data-finger="right-ring"], .key.key--highlight[data-finger="right-ring"] {
  box-shadow:
    0 0 14px rgba(139, 92, 246, 0.55),
    0 0 36px rgba(139, 92, 246, 0.22),
    0 0 2px rgba(139, 92, 246, 0.40) inset;
  border-color: rgba(139, 92, 246, 0.65);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.40) 0%, rgba(139, 92, 246, 0.22) 100%);
}
.key.highlight[data-finger="right-pinky"], .key.key--highlight[data-finger="right-pinky"] {
  box-shadow:
    0 0 14px rgba(236, 72, 153, 0.55),
    0 0 36px rgba(236, 72, 153, 0.22),
    0 0 2px rgba(236, 72, 153, 0.40) inset;
  border-color: rgba(236, 72, 153, 0.65);
  background: linear-gradient(180deg, rgba(236, 72, 153, 0.40) 0%, rgba(236, 72, 153, 0.22) 100%);
}
.key.highlight[data-finger="thumb"], .key.key--highlight[data-finger="thumb"] {
  box-shadow:
    0 0 14px rgba(148, 163, 184, 0.55),
    0 0 36px rgba(148, 163, 184, 0.22),
    0 0 2px rgba(148, 163, 184, 0.35) inset;
  border-color: rgba(148, 163, 184, 0.65);
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.35) 0%, rgba(148, 163, 184, 0.18) 100%);
}

/* Generic highlight fallback (no finger assigned) */
.key.highlight:not([data-finger]), .key.key--highlight:not([data-finger]) {
  box-shadow:
    0 0 14px rgba(99, 102, 241, 0.55),
    0 0 36px rgba(99, 102, 241, 0.22),
    0 0 2px rgba(99, 102, 241, 0.40) inset;
  border-color: rgba(99, 102, 241, 0.65);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.40) 0%, rgba(99, 102, 241, 0.22) 100%);
}

@keyframes keyGlow {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}

/* --- Correct (right key pressed) --- */
.key.key--correct, .key--correct {
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.50) 0%,
    rgba(16, 185, 129, 0.28) 100%
  ) !important;
  border-color: rgba(16, 185, 129, 0.60) !important;
  color: white !important;
  box-shadow:
    0 0 18px rgba(16, 185, 129, 0.40),
    0 0 40px rgba(16, 185, 129, 0.12),
    0 0 3px rgba(16, 185, 129, 0.50) inset !important;
  animation: keyCorrectFlash 350ms ease forwards;
}

@keyframes keyCorrectFlash {
  0%   { filter: brightness(1.8); transform: scale(1.04); }
  50%  { filter: brightness(1.2); }
  100% { filter: brightness(1);   transform: scale(1); }
}

/* --- Error (wrong key pressed) --- */
.key.key--error, .key--error {
  background: linear-gradient(
    180deg,
    rgba(220, 60, 70, 0.55) 0%,
    rgba(202, 50, 60, 0.32) 100%
  ) !important;
  border-color: rgba(220, 60, 70, 0.60) !important;
  color: white !important;
  box-shadow:
    0 0 18px rgba(220, 60, 70, 0.40),
    0 0 40px rgba(220, 60, 70, 0.12),
    0 0 3px rgba(220, 60, 70, 0.50) inset !important;
  animation: keyErrorShake 350ms ease forwards;
}

@keyframes keyErrorShake {
  0%   { transform: translateX(0);    filter: brightness(1.6); }
  15%  { transform: translateX(-4px); }
  30%  { transform: translateX(4px);  }
  50%  { transform: translateX(-3px); filter: brightness(1.2); }
  70%  { transform: translateX(3px);  }
  85%  { transform: translateX(-1px); }
  100% { transform: translateX(0);    filter: brightness(1); }
}

/* --- Physical Key Active Glow --- */
.key.key--physical-active, .key--physical-active {
  box-shadow:
    0 0 18px var(--color-kbd-glow),
    0 0 4px var(--color-kbd-glow),
    0 0 2px var(--color-kbd-glow) inset !important;
  border-color: var(--color-kbd-glow) !important;
  background: rgba(14, 40, 56, 0.95) !important;
  transform: translateY(2px) scale(0.96);
  border-bottom-width: 1px;
}


/* ============================================================
   7. FINGER INDICATOR
   ============================================================ */
.finger-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.finger-indicator__hand {
  font-size: 1.5rem;
  opacity: 0.6;
  transition: opacity var(--duration-fast) ease;
}

.finger-indicator__hand.active {
  opacity: 1;
}

.finger-indicator__finger {
  font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all var(--duration-fast) ease;
}

/* Colour the indicator to match the current finger */
.finger-indicator--left-pinky  .finger-indicator__finger { color: var(--finger-left-pinky);  border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.12); }
.finger-indicator--left-ring   .finger-indicator__finger { color: var(--finger-left-ring);   border-color: rgba(249, 115, 22, 0.35); background: rgba(249, 115, 22, 0.12); }
.finger-indicator--left-middle .finger-indicator__finger { color: var(--finger-left-middle); border-color: rgba(234, 179, 8, 0.35); background: rgba(234, 179, 8, 0.12); }
.finger-indicator--left-index  .finger-indicator__finger { color: var(--finger-left-index);  border-color: rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.12); }
.finger-indicator--right-index .finger-indicator__finger { color: var(--finger-right-index); border-color: rgba(6, 182, 212, 0.35); background: rgba(6, 182, 212, 0.12); }
.finger-indicator--right-middle .finger-indicator__finger { color: var(--finger-right-middle); border-color: rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.12); }
.finger-indicator--right-ring  .finger-indicator__finger { color: var(--finger-right-ring);  border-color: rgba(139, 92, 246, 0.35); background: rgba(139, 92, 246, 0.12); }
.finger-indicator--right-pinky .finger-indicator__finger { color: var(--finger-right-pinky); border-color: rgba(236, 72, 153, 0.35); background: rgba(236, 72, 153, 0.12); }
.finger-indicator--thumb       .finger-indicator__finger { color: var(--finger-thumb);       border-color: rgba(148, 163, 184, 0.35); background: rgba(148, 163, 184, 0.12); }


/* ============================================================
   8. KEYBOARD VISIBILITY
   ============================================================ */
.keyboard--hidden {
  transform: rotateX(2deg) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--duration-normal) var(--ease-in-out),
    opacity var(--duration-normal) ease;
}

.keyboard--visible {
  transform: rotateX(2deg) translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition:
    transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) ease;
}


/* ============================================================
   9. HAND GUIDE
   ============================================================
   Optional overlay showing left/right hand zones
   ============================================================ */
.hand-guide {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-2);
}

.hand-guide__hand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.hand-guide__fingers {
  display: flex;
  gap: 3px;
}

.hand-guide__finger-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.75;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.05);
}

.hand-guide__finger-dot--left-pinky  { background: var(--finger-left-pinky); }
.hand-guide__finger-dot--left-ring   { background: var(--finger-left-ring); }
.hand-guide__finger-dot--left-middle { background: var(--finger-left-middle); }
.hand-guide__finger-dot--left-index  { background: var(--finger-left-index); }
.hand-guide__finger-dot--right-index { background: var(--finger-right-index); }
.hand-guide__finger-dot--right-middle{ background: var(--finger-right-middle); }
.hand-guide__finger-dot--right-ring  { background: var(--finger-right-ring); }
.hand-guide__finger-dot--right-pinky { background: var(--finger-right-pinky); }
.hand-guide__finger-dot--thumb       { background: var(--finger-thumb); }


/* ============================================================
   10. RESPONSIVE
   ============================================================ */

/* --- Mobile (default: < 768px) — compact keys --- */
@media (max-width: 767px) {
  .keyboard-container {
    padding: var(--space-2) 0;
    perspective: none;
    justify-content: center;
    align-items: center;
  }

  .keyboard {
    padding: var(--space-2);
    gap: 3px;
    border-radius: var(--radius-lg);
    transform: none;
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.45),
      0 0 30px rgba(99, 102, 241, 0.04);
  }

  .keyboard::after {
    opacity: 0.40;
    filter: blur(12px);
  }

  .keyboard-row {
    gap: 3px;
  }

  .key {
    min-width: 28px;
    height: 36px;
    font-size: 0.65rem;
    border-radius: 5px;
    border-bottom-width: 2px;
    padding: 2px 3px;
  }

  .key__secondary {
    display: none; /* Hide shifted chars on mobile */
  }

  .key--w-1     { min-width: 28px;  flex: 0 0 28px; }
  .key--w-1-25  { min-width: 35px;  flex: 0 0 35px; }
  .key--w-1-5   { min-width: 42px;  flex: 0 0 42px; }
  .key--w-1-75  { min-width: 49px;  flex: 0 0 49px; }
  .key--w-2     { min-width: 56px;  flex: 0 0 56px; }
  .key--w-2-25  { min-width: 63px;  flex: 0 0 63px; }
  .key--w-2-75  { min-width: 77px;  flex: 0 0 77px; }
  .key--w-6-25  { min-width: 140px; flex: 1 0 140px; }

  .key--wide       { min-width: 42px; flex: 0 0 42px; }
  .key--extra-wide { min-width: 63px; flex: 0 0 63px; }
  .key--space      { min-width: 140px; flex: 1 0 140px; max-width: 200px; }

  .finger-indicator {
    flex-wrap: wrap;
    font-size: var(--text-xs);
  }

  .hand-guide {
    display: none;
  }
}

/* --- Tablet (768px – 1023px) — medium keys --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .keyboard-container {
    max-width: 760px;
    perspective: 800px;
    justify-content: center;
    align-items: center;
  }

  .keyboard {
    padding: var(--space-3);
    gap: 4px;
  }

  .key {
    min-width: 34px;
    height: 40px;
    font-size: 0.70rem;
  }

  .key--w-1     { min-width: 34px;  flex: 0 0 34px; }
  .key--w-1-25  { min-width: 43px;  flex: 0 0 43px; }
  .key--w-1-5   { min-width: 51px;  flex: 0 0 51px; }
  .key--w-1-75  { min-width: 60px;  flex: 0 0 60px; }
  .key--w-2     { min-width: 68px;  flex: 0 0 68px; }
  .key--w-2-25  { min-width: 77px;  flex: 0 0 77px; }
  .key--w-2-75  { min-width: 94px;  flex: 0 0 94px; }
  .key--w-6-25  { min-width: 213px; flex: 0 0 213px; }

  .key--wide       { min-width: 51px;  flex: 0 0 51px; }
  .key--extra-wide { min-width: 94px;  flex: 0 0 94px; }
  .key--space      { min-width: 213px; flex: 1 0 213px; max-width: 280px; }
}

/* --- Desktop (≥1024px) — full-size keys --- */
@media (min-width: 1024px) {
  .keyboard-container {
    max-width: 920px;
  }

  .key {
    min-width: 44px;
    height: 46px;
    font-size: 0.78rem;
  }

  .key:hover {
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 6px 14px rgba(0, 0, 0, 0.40),
      0 0 20px rgba(99, 102, 241, 0.06);
    filter: brightness(1.08);
  }
}


/* ============================================================
   11. HANDS SVG STYLES
   ============================================================ */
.hands-container {
  width: 100%;
  max-width: 500px;
  margin: 1.5rem auto 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity var(--transition-normal);
}

.hands-svg {
  width: 100%;
  height: auto;
  max-height: 110px;
}

.hand-palm {
  fill: rgba(15, 23, 42, 0.6);
  stroke: rgba(99, 102, 241, 0.15);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.hand-finger {
  fill: none;
  stroke: rgba(148, 163, 184, 0.2);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke var(--transition-fast), filter var(--transition-fast);
}

/* Active finger highlights matching the design system colours */
.hand-finger.highlight {
  filter: drop-shadow(0 0 6px currentColor);
}

#finger-left-pinky.highlight  { stroke: var(--finger-left-pinky);  color: var(--finger-left-pinky); }
#finger-left-ring.highlight   { stroke: var(--finger-left-ring);   color: var(--finger-left-ring); }
#finger-left-middle.highlight { stroke: var(--finger-left-middle); color: var(--finger-left-middle); }
#finger-left-index.highlight  { stroke: var(--finger-left-index);  color: var(--finger-left-index); }
#finger-left-thumb.highlight  { stroke: var(--finger-thumb);       color: var(--finger-thumb); }

#finger-right-thumb.highlight  { stroke: var(--finger-thumb);        color: var(--finger-thumb); }
#finger-right-index.highlight  { stroke: var(--finger-right-index);  color: var(--finger-right-index); }
#finger-right-middle.highlight { stroke: var(--finger-right-middle); color: var(--finger-right-middle); }
#finger-right-ring.highlight   { stroke: var(--finger-right-ring);   color: var(--finger-right-ring); }
#finger-right-pinky.highlight  { stroke: var(--finger-right-pinky);  color: var(--finger-right-pinky); }