.speakgame {
  --speakgame-block-height: 96px;
  --speakgame-line-height: 22px;
  margin: 0;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e4e8f2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.speakgame__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.speakgame__progress {
  font-weight: 700;
  margin-bottom: 10px;
  color: #1c2c4d;
}


.speakgame__words {
  display: flex;
  flex: 1 1 auto;
  min-height: 80px;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f1f4ff, #e4eaff);
  border: 1px solid #d7def0;
}

.speakgame__word {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 16px;
  line-height: 1.4;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  border: none;
  box-shadow: none;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.speakgame__word[data-state="correct"] {
  background: #e6f7ec;
  border-color: #b7ebc6;
  color: #0f5132;
  box-shadow: 0 4px 12px rgba(16, 167, 94, 0.16);
}

.speakgame__word[data-state="wrong"] {
  background: #ffe9e6;
  border-color: #ffc0b8;
  color: #8a1c1c;
  box-shadow: 0 4px 12px rgba(255, 94, 94, 0.18);
}

.speakgame__toolbar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.speakgame__tool {
  padding: 6px;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbff, #eef3ff);
  border: 1px solid #cdd9f2;
  box-shadow: 0 10px 24px rgba(15, 37, 85, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.speakgame__tool--record {
  width: 52px;
  height: 52px;
  gap: 6px;
  border-color: #cbd7f2;
}

.speakgame__tool--record.is-recording {
  background: linear-gradient(135deg, #fff0f3, #ffe2e8);
  border-color: #ffb3c2;
  color: #7f1d1d;
  box-shadow: 0 0 0 3px rgba(255, 186, 201, 0.4), 0 12px 30px rgba(255, 143, 168, 0.28);
}

.speakgame__tool:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #a9bff5;
  box-shadow: 0 14px 26px rgba(15, 37, 85, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.speakgame__tool:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.speakgame__status {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f3f6fb;
  border: 1px solid #d9e3f5;
  color: #1e2746;
  min-height: 60px;
  display: flex;
  align-items: center;
}

.speakgame__status--success {
  background: #e6f7ec;
  border-color: #b7ebc6;
  color: #0f5132;
}

.speakgame__status--alert {
  background: #fff4e5;
  border-color: #ffd4a3;
  color: #7a3e00;
}

.speakgame__heard {
  flex: 1 1 auto;
  min-height: 72px;
  padding: 10px;
  border-radius: 10px;
  background: #0f1832;
  color: #e5ecff;
  border: 1px solid #1f2c55;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 15px;
  line-height: 1.4;
}

.speakgame__graph {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #dbe4f8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 12px 20px rgba(35, 77, 145, 0.12);
  background: radial-gradient(circle at 30% 30%, #ffffff, #f8fbff 55%, #eef3ff 100%);
  display: none;
}

.speakgame__tool--record .speakgame__icon {
  font-size: 22px;
}

.speakgame__tool--record.is-recording .speakgame__icon {
  display: none;
}

.speakgame__tool--record.is-recording .speakgame__graph {
  display: block;
}

.speakgame__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.speakgame__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .speakgame {
    padding: 6px;
  }
}