/* ============================================================
   TYPING KID — VIRTUAL KEYBOARD
   ============================================================ */

.keyboard-wrap {
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
}

.keyboard-lang-toggle {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
}
.kb-lang-btn {
  padding: 5px 16px;
  border-radius: var(--r-full);
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all var(--t-fast);
}
.kb-lang-btn.active {
  background: rgba(0,212,255,0.15);
  color: var(--cyan);
  border-color: rgba(0,212,255,0.4);
}

/* ─── Keyboard Board ─────────────────────────────────────── */
.keyboard-board {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(12px);
}

/* ─── Row ────────────────────────────────────────────────── */
.key-row {
  display: flex;
  justify-content: center;
  gap: 7px;
}

/* ─── Key Base ───────────────────────────────────────────── */
.key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 42px;
  height: 48px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', 'Noto Sans Khmer', sans-serif !important;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-bottom: 3px solid rgba(0,0,0,0.4);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast),
    transform var(--t-fast),
    box-shadow var(--t-fast);
  overflow: hidden;
}
.key:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.key:active {
  transform: translateY(1px);
  border-bottom-width: 1px;
}

/* ─── Khmer key shows Khmer char + Latin label ────────────── */
.key .key-khmer {
  font-family: 'Noto Sans Khmer', 'Kantumruy Pro', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
}
.key .key-latin {
  font-size: 0.58rem;
  color: var(--text-muted);
  line-height: 1;
  margin-top: 1px;
}

/* ─── Finger Color Coding ────────────────────────────────── */
.key[data-finger="lp"] { border-top: 2px solid var(--f-lp); }
.key[data-finger="lr"] { border-top: 2px solid var(--f-lr); }
.key[data-finger="lm"] { border-top: 2px solid var(--f-lm); }
.key[data-finger="li"] { border-top: 2px solid var(--f-li); }
.key[data-finger="ri"] { border-top: 2px solid var(--f-ri); }
.key[data-finger="rm"] { border-top: 2px solid var(--f-rm); }
.key[data-finger="rr"] { border-top: 2px solid var(--f-rr); }
.key[data-finger="rp"] { border-top: 2px solid var(--f-rp); }
.key[data-finger="th"] { border-top: 2px solid var(--f-th); }

/* ─── Key States ─────────────────────────────────────────── */
.key.next-key {
  background: rgba(255,215,0,0.18);
  border-color: var(--gold);
  border-bottom-color: rgba(150,120,0,0.8);
  color: var(--gold);
  animation: keyHighlight 1.2s ease-in-out infinite;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255,215,0,0.35);
}

.key.key-correct-state {
  background: rgba(0,255,136,0.2);
  border-color: var(--correct);
  border-bottom-color: rgba(0,120,60,0.8);
  color: var(--correct);
  box-shadow: 0 0 12px rgba(0,255,136,0.4);
}

.key.key-wrong-state {
  background: rgba(255,68,68,0.2);
  border-color: var(--wrong);
  border-bottom-color: rgba(120,0,0,0.8);
  color: var(--wrong);
  box-shadow: 0 0 12px rgba(255,68,68,0.4);
}

.key.home-marker::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
}

/* ─── Special Keys ───────────────────────────────────────── */
.key.key-space {
  min-width: 140px;
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
}
.key.key-space:hover { background: rgba(255,255,255,0.1); }
.key.key-back  { min-width: 60px; font-size: 1rem; }
.key.key-tab   { min-width: 56px; font-size: 0.7rem; }
.key.key-caps  { min-width: 64px; font-size: 0.65rem; }
.key.key-shift { min-width: 72px; font-size: 0.7rem; }
.key.key-enter { min-width: 68px; font-size: 0.7rem; }

/* ─── Responsive sizing ──────────────────────────────────── */
@media (max-width: 500px) {
  .key { min-width: 26px; height: 34px; font-size: 0.68rem; padding: 0 3px; border-radius: 5px; }
  .key-row { gap: 3px; }
  .keyboard-board { padding: 8px 6px; gap: 4px; }
  .key.key-space  { min-width: 90px; }
  .key.key-back   { min-width: 44px; }
  .key.key-shift  { min-width: 50px; }
  .key.key-enter  { min-width: 50px; }
  .key.key-caps   { min-width: 44px; }
  .key .key-khmer { font-size: 0.8rem; }
  .key .key-latin { font-size: 0.48rem; }
}
/* ─── Hands Placement Guide ────────────────────────────────── */
.hands-guide-wrap {
  display: flex;
  justify-content: center;
  gap: var(--sp-md);
  margin-bottom: 2px;
  user-select: none;
}

.hand-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hand-title {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hand-svg {
  width: 68px;
  height: 44px;
  overflow: visible;
}

.hand-palm {
  fill: rgba(255,255,255,0.05);
  stroke: rgba(255,255,255,0.12);
  stroke-width: 1.5;
}

.finger-pad {
  fill: rgba(255,255,255,0.08);
  stroke: rgba(255,255,255,0.18);
  stroke-width: 1.5;
  transition: all var(--t-fast);
}

/* Finger default colors */
.finger-pad[data-finger="lp"] { fill: rgba(255,107,107,0.3); stroke: var(--f-lp); }
.finger-pad[data-finger="lr"] { fill: rgba(255,160,107,0.3); stroke: var(--f-lr); }
.finger-pad[data-finger="lm"] { fill: rgba(255,215,107,0.3); stroke: var(--f-lm); }
.finger-pad[data-finger="li"] { fill: rgba(107,255,184,0.3); stroke: var(--f-li); }
.finger-pad[data-finger="ri"] { fill: rgba(107,212,255,0.3); stroke: var(--f-ri); }
.finger-pad[data-finger="rm"] { fill: rgba(107,143,255,0.3); stroke: var(--f-rm); }
.finger-pad[data-finger="rr"] { fill: rgba(160,107,255,0.3); stroke: var(--f-rr); }
.finger-pad[data-finger="rp"] { fill: rgba(255,107,218,0.3); stroke: var(--f-rp); }
.finger-pad[data-finger="th"] { fill: rgba(255,255,255,0.2); stroke: var(--f-th); }

/* Active finger pulse glow */
.finger-pad.active-finger {
  animation: fingerGlow 1s infinite alternate cubic-bezier(0.34,1.56,0.64,1);
  stroke-width: 3;
}
.finger-pad[data-finger="lp"].active-finger { fill: var(--f-lp); filter: drop-shadow(0 0 8px var(--f-lp)); }
.finger-pad[data-finger="lr"].active-finger { fill: var(--f-lr); filter: drop-shadow(0 0 8px var(--f-lr)); }
.finger-pad[data-finger="lm"].active-finger { fill: var(--f-lm); filter: drop-shadow(0 0 8px var(--f-lm)); }
.finger-pad[data-finger="li"].active-finger { fill: var(--f-li); filter: drop-shadow(0 0 8px var(--f-li)); }
.finger-pad[data-finger="ri"].active-finger { fill: var(--f-ri); filter: drop-shadow(0 0 8px var(--f-ri)); }
.finger-pad[data-finger="rm"].active-finger { fill: var(--f-rm); filter: drop-shadow(0 0 8px var(--f-rm)); }
.finger-pad[data-finger="rr"].active-finger { fill: var(--f-rr); filter: drop-shadow(0 0 8px var(--f-rr)); }
.finger-pad[data-finger="rp"].active-finger { fill: var(--f-rp); filter: drop-shadow(0 0 8px var(--f-rp)); }
.finger-pad[data-finger="th"].active-finger { fill: var(--gold); filter: drop-shadow(0 0 8px var(--gold)); }

@keyframes fingerGlow {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

@media (max-width: 500px) {
  .hand-svg { width: 70px; height: 55px; }
}