.hf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
.hf-letter { --h: 40; aspect-ratio: 1; border: 0; border-radius: 18px; background: hsl(var(--h) 70% 72%); color: #142060; font-family: var(--font-display); font-size: 2rem; font-weight: 700; cursor: pointer; box-shadow: 0 5px 0 hsl(var(--h) 45% 50%); transition: transform 0.12s var(--ease-out); }
.hf-letter.is-ar { font-family: system-ui, "Segoe UI", sans-serif; font-size: 2.2rem; }
.hf-letter:active { transform: translateY(3px); box-shadow: 0 2px 0 hsl(var(--h) 45% 50%); }
.hf-letter.big { font-size: 3rem; }
.hf-letter.is-right { background: var(--emerald); }
.hf-letter.is-wrong { opacity: 0.4; }
.hf-big { text-align: center; }
.hf-top { display: flex; align-items: center; justify-content: center; gap: 22px; }
.hf-glyph { font-family: var(--font-display); font-size: clamp(5rem, 28vw, 8rem); line-height: 1; color: var(--gold-soft); }
.hf-glyph.is-ar { font-family: system-ui, "Segoe UI", sans-serif; }
.hf-pic { font-size: clamp(4rem, 22vw, 6rem); line-height: 1; }
.hf-word { font-size: 1.4rem; font-weight: 650; margin: 10px 0 14px; }
.hf-forms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; direction: rtl; }
.hf-forms div { padding: 8px 4px; border-radius: 14px; background: rgba(242, 234, 216, 0.06); display: grid; gap: 2px; }
.hf-forms b { font-family: system-ui, "Segoe UI", sans-serif; font-size: 2rem; color: var(--parchment); }
.hf-forms span { font-size: 0.75rem; color: var(--mist); }
.hf-q { font-size: 1.4rem; font-weight: 700; text-align: center; margin: 0 0 14px; }
.hf-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 320px; margin: 0 auto; }
.hf-stars { text-align: center; color: var(--gold); font-weight: 700; margin: 14px 0 0; }