.hd-board { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.hd-row { display: grid; grid-template-columns: repeat(4, 64px); gap: 8px; }
.hd-cell {
  width: 64px; height: 76px; border-radius: 14px;
  border: 2px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; padding: 4px 2px;
}
.hd-cell.empty { color: var(--muted); font-size: 26px; opacity: .5; }
.hd-ch { font-size: 26px; font-weight: 800; line-height: 1; }
.hd-py { font-size: 11px; font-weight: 700; margin-top: 3px; letter-spacing: .3px; }
.hd-tone {
  position: absolute; right: 5px; bottom: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 10px; font-weight: 800; color: #fff;
  display: grid; place-items: center;
}
/* 字形 shape */
.shape-g { background: #c8f5e0; border-color: #2fd6a8; }
.shape-y { background: #fff0c2; border-color: #ffc83d; }
.shape-x { background: #ece8f5; border-color: #d9d2ec; }
/* 拼音 py */
.py-g { color: #1ba679; }
.py-y { color: #c79412; }
.py-x { color: #a89fc4; }
/* 声调 tone */
.tone-g { background: #2fd6a8; }
.tone-y { background: #ffc83d; color: var(--ink); }
.tone-x { background: #bdb3d6; }

.hd-input {
  min-height: var(--tap); width: min(220px, 60vw);
  border: 2px solid var(--line); border-radius: 14px;
  font-size: 20px; text-align: center; font-weight: 700; padding: 0 10px;
  background: var(--surface); color: var(--ink);
}
.hd-input:focus { border-color: var(--grape); outline: none; }

.help .g { color: #1ba679; font-weight: 800; }
.help .y { color: #c79412; font-weight: 800; }
.help .x { color: #8a7fb0; font-weight: 800; }