.letter-help {
  padding: 7px 12px; margin: 6px 0; background: #243e43; color: #e8f7df;
  border-radius: 9px; font-weight: 600; line-height: 1.4;
}
.word-answer { display: flex; justify-content: center; gap: 8px; margin: 6px 0; }
.word-answer input {
  font: inherit; text-transform: uppercase; min-width: 0; width: 280px;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; color: var(--text); background: var(--panel);
}
.word-answer input:focus-visible { outline: 3px solid var(--accent); }
.letter-board { display: flex; justify-content: center; gap: 12px; align-items: center; }
.letter-panel { width: 310px; min-width: 0; }
.letter-grid {
  display: grid; width: min(68%, 740px, calc(100dvh - 200px));
  aspect-ratio: 1; gap: 2px; background: #51636b; padding: 3px; border-radius: 7px;
  flex-shrink: 0;
}
.letter-grid button {
  padding: 0; min-width: 0; min-height: 0; border: 0; border-radius: 1px;
  aspect-ratio: 1; position: relative;
}
.letter-grid .letter-cell {
  display: grid; place-items: center; background: #f4f1e6; color: #172a33;
  font-size: clamp(12px, 2.2vw, 26px); font-weight: 700;
}
.letter-grid .letter-cell.word-active { background: #d1e6ce; }
.letter-grid .letter-cell.selected { background: #ffe0a0; box-shadow: inset 0 0 0 3px #9d5d10; }
.letter-grid .letter-cell.wrong { background: #ffc0ce; color: #7c1533; }
.letter-grid .letter-cell small { position: absolute; top: 1px; left: 3px; font-size: clamp(7px, 1vw, 12px); }
.letter-cell.given { color: #1b6556; }
.letter-grid .letter-clue {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #adc4ce; color: #112832; font-size: clamp(6px, .7vw, 10px); line-height: 1.06;
  overflow-wrap: anywhere; padding: 1px; font-weight: 600; overflow: hidden;
}
.letter-clue span {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 0;
}
.letter-clue strong { align-self: flex-end; flex-shrink: 0; line-height: .9; font-size: 12px; }
.letter-grid .letter-clue.active { background: #ffe0a0; box-shadow: inset 0 0 0 2px #9d5d10; }
.letter-block { background: #13242e; border-radius: 1px; }
.letter-keyboard { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 760px; margin: 8px auto 0; }
.letter-keyboard button { padding: 5px 0; min-width: 30px; font-size: 14px; }
.code-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; width: 100%; }
.code-table button { padding: 7px 3px; font-size: 14px; }
.code-table .selected { outline: 2px solid #ffe0a0; background: #4c5042; }
.code-table .given { color: var(--accent); }
@media (max-width: 600px) {
  .letter-board { flex-direction: column; gap: 7px; }
  .letter-grid { width: 100%; }
  .letter-panel { width: 100%; }
  .letter-grid .letter-clue { font-size: 6px; }
  .letter-help { font-size: 13px; }
  .code-table { width: 100%; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .code-table button { font-size: 10px; padding: 5px 1px; }
  .letter-keyboard { gap: 3px; }
  .letter-keyboard button { min-width: 25px; font-size: 12px; }
  .word-answer button { font-size: 12px; }
}