/* Hangman — theme override on top of the shared arcade kit. */
:root { --accent: #4ECDC4; }

#stage {
  aspect-ratio: auto;
  max-height: none;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  padding: 52px 8px 8px;
  touch-action: manipulation;
  background: #0c0f1e;
}

.gallows-wrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 150px; }
.gallows { width: min(74vw, 250px); height: auto; }

.clue { text-align: center; font-size: 12px; letter-spacing: 2px; color: var(--text-dim); }
.clue b { color: var(--accent); letter-spacing: 0; font-size: 14px; }

.word {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 4px 4px;
}
.slot {
  width: clamp(20px, 6.6vw, 30px);
  font-family: 'Chakra Petch', 'Segoe UI', sans-serif;
  font-size: clamp(19px, 5.6vw, 28px);
  font-weight: 800;
  text-align: center;
  border-bottom: 3px solid #3a3f5a;
  color: var(--text);
  line-height: 1.25;
}
.slot.got { border-bottom-color: var(--accent); }
.slot.miss { color: #ff8578; border-bottom-color: #ff8578; }
.slot.space { border-bottom-color: transparent; }

.kb { display: flex; flex-direction: column; gap: 5px; align-items: center; padding-bottom: 6px; }
.kb-row { display: flex; gap: 4px; justify-content: center; width: 100%; }
.key {
  flex: 1 1 0;
  max-width: 40px;
  min-width: 0;
  height: 46px;
  border-radius: 6px;
  border: none;
  background: #3c4266;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, opacity 0.15s ease;
}
.key:active { transform: scale(0.92); }
.key.hit  { background: #2f8f7f; }
.key.miss { background: #23263c; color: #6b6f8c; }
.key:disabled { cursor: default; }