/* 📁 centering_keyboard_hint.css */

/* 🎹 Keyboard visual hint (fixed bottom-right) */
#keyboard-hint {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 200;
  opacity: 0.7;
  user-select: none;
  margin-bottom: 64px;
}

#keyboard-hint .key-row {
  display: flex;
  justify-content: center;
}

#keyboard-hint .key {
  width: 36px;
  height: 36px;
  margin: 2px;
  background: #f3f3f3;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px white;
  font-size: 18px;
}

#keyboard-hint .key.rotate {
  font-size: 22px;
  background: #f8f9fa;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

#keyboard-hint .key.rotate:hover {
  background: #e9ecef;
}

#keyboard-hint .key.empty {
  background: transparent;
  border: none;
  box-shadow: none;
}

#keyboard-hint .key.active {
  background-color: deeppink;
  color: white;
  border-color: deeppink;
}