/* Phonics cards share the existing complete hint in every drama course. */
.hint-phonics-guide {
  flex: 0 0 100%; margin: 0; color: #b8e6df; font-size: 12px;
  line-height: 1.55; letter-spacing: .01em;
}
.hint-phonics-guide-note { display: block; color: #a6b7bf; font-size: 11px; }
.hint-word:has(.hint-phonics) { max-width: 300px; min-width: 94px; gap: 7px; }
.hint-phonics {
  display: grid; gap: 6px; margin-top: 1px; padding-top: 7px;
  border-top: 1px solid #ffffff1a; color: #c8e8e1; font-weight: 500;
}
.hint-sound-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 5px 4px; }
.hint-sound-group { display: inline-grid; justify-items: center; gap: 3px; min-width: 22px; }
.hint-grapheme {
  padding: 2px 5px; border-radius: 4px; background: #ffffff0c;
  color: #ecf6f4; font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px; line-height: 1.1; font-weight: 600;
}
.hint-sound { color: #b9d9d3; font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.hint-sound-group.is-special .hint-grapheme { color: #ffe09a; background: #d6a3451a; }
.hint-sound-group.is-stress .hint-grapheme { font-weight: 900; box-shadow: inset 0 -2px #54cab8; }
.hint-sound-group.is-silent .hint-grapheme { opacity: .62; }
.hint-sound-group.is-silent .hint-sound { font-size: 9px; opacity: .65; }
.hint-phonics-note { max-width: 260px; color: #c8b98f; font-size: 11px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.hint-whole-sound { color: #bad5d0; font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.stage.is-light-mode .hint-phonics-guide { color: #296b60; }
.stage.is-light-mode .hint-phonics-guide-note { color: #637477; }
.stage.is-light-mode .hint-word.hint-neutral .hint-phonics { color: #286557; border-top-color: #23645820; }
.stage.is-light-mode .hint-grapheme { color: #1d4a42; background: #2376660b; }
.stage.is-light-mode .hint-sound { color: #46665f; }
.stage.is-light-mode .hint-sound-group.is-special .hint-grapheme { color: #855600; background: #d9a32813; }
.stage.is-light-mode .hint-phonics-note { color: #765923; }
.stage.is-light-mode .hint-whole-sound { color: #46665f; }
.stage.is-light-mode .top-hint-panel .hint-topline {
  background: linear-gradient(180deg, #fffaf0 0%, #fffaf0f5 72%, #fffaf000);
}
@media (min-width: 761px) {
  .top-hint-panel, .stage.is-light-mode .top-hint-panel { max-height: min(640px, calc(100svh - 28px)); overflow: auto; }
}
@media (max-width: 760px) {
  .hint-word:has(.hint-phonics) { max-width: calc(50% - 4px); min-width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); }
  .hint-phonics-guide { font-size: 11px; }
  .hint-phonics-guide-note { font-size: 10px; }
  .hint-sound-groups { gap: 5px 3px; }
  .hint-sound-group { min-width: 20px; }
  .hint-grapheme { padding-inline: 4px; font-size: 12px; }
  .hint-sound { font-size: 10px; }
}