/* --- Только уникальные стили --- */

/* Макет клавиатуры */
.keyboard {
  max-width: 950px;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.keyboard-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  justify-content: start;
}

.key {
  position: relative;
  height: 40px;
  width: 55px; /* было 48 → +7px */
  background: #fff;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-weight: bold;
  color: transparent;
}

/* Увеличенные ширины (примерно +15%) */
.key[data-width="1"]   { width: 55px; }    /* 48px → 55px */
.key[data-width="1.2"] { width: 66px; }    /* 58px → 66px */
.key[data-width="1.5"] { width: 82px; }    /* 72px → 82px */
.key[data-width="2"]   { width: 110px; }   /* 96px → 110px */
.key[data-width="2.5"] { width: 138px; }   /* 120px → 138px */
.key[data-width="6"]   { width: 330px; }   /* 288px → 330px */

/* Позиционирование символов */
.key .en, .key .ru {
  position: absolute;
  font-size: 16px;
  font-weight: bold;
}

.key .en {
  top: 2px;
  left: 4px;
  color: #c0392b;
}

.key .ru {
  bottom: 2px;
  right: 4px;
  color: #2980b9;
}

/* Цвета игроков */
.key.player1 {
  background: #3498db;
  color: white;
  border-color: #2980b9;
}
.key.player1 .en, .key.player1 .ru { color: white; }

.key.player2 {
  background: #e67e22;
  color: white;
  border-color: #d35400;
}
.key.player2 .en, .key.player2 .ru { color: white; }

.key:hover:not(.player1):not(.player2) {
  background: #f8f9fa;
  border-color: #adb5bd;
}

/* Сдвиг строк */
.keyboard-row:nth-child(2) { margin-left: 24px; }
.keyboard-row:nth-child(3) { margin-left: 48px; }
.keyboard-row:nth-child(4) { margin-left: 12px; }
.keyboard-row:nth-child(5) { margin-left: 48px; }
.keyboard-row:nth-child(6) { margin-left: 12px; }

/* Мини-клавиша для выпавшей */
.mini-key {
  position: relative;
  width: 70px;
  height: 60px;
  background: #fff;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-weight: bold;
  overflow: hidden;
  margin: 0 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.mini-key.single {
  font-size: 32px;
  color: #212529;
}

.mini-key .en, .mini-key .ru {
  position: absolute;
  font-size: 24px;
  font-weight: bold;
}

.mini-key .en {
  top: 2px;
  left: 4px;
  color: #c0392b;
}

.mini-key .ru {
  bottom: 2px;
  right: 4px;
  color: #2980b9;
}

/* Эффект вспышки */
.body-flash {
  animation: flash-red 0.4s ease-out;
}

@keyframes flash-red {
  0% { background-color: transparent; }
  50% { background-color: rgba(220, 53, 69, 0.2); }
  100% { background-color: transparent; }
}

/* Подсветка хода */
body.player1-turn {
  outline: 4px solid #3498db;
  outline-offset: -8px;
  transition: outline 0.3s;
}

body.player2-turn {
  outline: 4px solid #e67e22;
  outline-offset: -8px;
  transition: outline 0.3s;
}