.hm-gallows { display: block; width: min(13rem, 60%); margin: 0 auto 0.5rem; color: var(--ink); }
.hm-gallows .hm-frame { color: var(--ink-soft); }
.hm-gallows .hm-part { color: var(--bad); }

/* A phrase wraps between its words only: each .hm-group (one word, --n
   letters) never breaks. A word too long for the row shrinks its slots and
   letters to fit (cqw is the width of .hm-word) instead of breaking. The
   board centres its children, and a size container with no width of its own
   collapses to nothing there, hence width: 100%. */
.hm-word { container-type: inline-size; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin: 0.75rem 0 1rem; }
.hm-group {
  --w: min(2rem, calc((100cqw - (var(--n) - 1) * 6px) / var(--n)));
  display: flex; flex-wrap: nowrap; gap: 6px;
}
.hm-slot {
  width: var(--w); height: 2.6rem; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--w) * 0.8); font-weight: 700; line-height: 1;
}
.hm-blank, .hm-letter { border-bottom: 3px solid var(--ink); }
.hm-letter { color: var(--ink); }

.hm-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 28rem; margin: 0 auto; }
.hm-key {
  width: 2.5rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 700; color: var(--ink-soft); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--radius); user-select: none;
}
button.hm-open { color: var(--ink); background: var(--card); border-color: var(--accent); box-shadow: var(--shadow); cursor: pointer; }
button.hm-open:hover { background: var(--paper-2); }
.hm-hit { color: var(--accent-ink); background: var(--good); border-color: var(--good); }
.hm-miss { color: var(--bad); background: transparent; text-decoration: line-through; opacity: 0.7; }

.hm-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 24rem; margin: 1rem auto 0; }
.hm-form label { display: flex; flex-direction: column; gap: 0.25rem; color: var(--ink-soft); }
.hm-input { font: inherit; padding: 0.5rem 0.75rem; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--card); color: var(--ink); }
.hm-go {
  font: inherit; font-weight: 700; padding: 0.5rem 1rem; border: 0; border-radius: var(--radius);
  color: var(--accent-ink); background: var(--accent); cursor: pointer;
}
.hm-go-quiet { color: var(--ink); background: var(--paper-2); border: 1px solid var(--edge); }
.hm-note { text-align: center; color: var(--ink-soft); margin: 0.75rem 0 0; }
.hm-config { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem; }
.hm-config label { display: block; padding: 0.15rem 0; }