.phrase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }.phrase-grid label, .phrase-choices label { cursor: pointer; }.phrase-grid input, .phrase-choices input { position: absolute; opacity: 0; }.phrase-grid span { min-height: 64px; display: grid; place-items: center; padding: 11px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 14px; font-weight: 700; }.phrase-grid input:checked + span, .phrase-choices input:checked + span { color: #8b6100; background: #fff4d6; border-color: #d9a52c; box-shadow: inset 0 0 0 1px #d9a52c; }.phrase-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }.phrase-choices span { min-height: 96px; display: flex; flex-direction: column; justify-content: center; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }.phrase-choices strong { font-size: 15px; }.phrase-choices small { margin-top: 7px; color: var(--muted); font-size: 11px; }
@media (max-width: 650px) { .phrase-grid, .phrase-choices { grid-template-columns: 1fr; }.phrase-grid span { min-height: 55px; }.phrase-choices span { min-height: 78px; } }