/* Phonics (K): big, picture-first tap targets. */
.topics.ph-topics { grid-template-columns: 1fr 1fr; }
.ph-prob { white-space: normal; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ph-big { display: inline-flex; flex-direction: column; align-items: center; }
.ph-emoji { font-size: 5rem; line-height: 1.1; }
.ph-word { font-size: 1.4rem; font-weight: 700; }
.ph-pair { display: flex; gap: 24px; justify-content: center; }
.ph-pair .ph-emoji { font-size: 4rem; }
.ph-ear { font-size: 4.5rem; }
.ph-letter { font-size: 2.6rem; font-weight: 800; letter-spacing: .05em; }
.ph-letter.huge { font-size: 5rem; }
.ph-pic { font-size: 4rem; line-height: 1; }
.ph-yn { font-size: 1.8rem; font-weight: 800; }
.ph-cvc { display: flex; gap: 10px; justify-content: center; }
.ph-tile { width: 76px; height: 86px; font-size: 3rem; font-weight: 800; background: #fff3bf; color: var(--ink); border: 3px solid #fab005; }
.ph-tile.vowel { background: #ffe3e3; border-color: #ff6b6b; color: #c92a2a; }
.ph-tile.heard { box-shadow: 0 0 0 4px #51cf66; }
.ph-blend { background: #9775fa; font-size: 1.3rem; min-height: 56px; }
.ph-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.ph-go { min-height: 76px; font-size: 1.35rem; background: #51cf66; }
.ph-browse { width: 100%; background: #4dabf7; margin-top: 4px; }
.ph-letterbig { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 160px; margin: 8px 0; }
.ph-hint { font-size: 1.3rem; font-weight: 700; }
.ph-abc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ph-key { min-height: 64px; font-size: 1.7rem; font-weight: 800; background: #ffcc33; color: var(--ink); padding: 4px; }
.r1 { background: #ff6b6b; } .r2 { background: #4dabf7; } .r3 { background: #9775fa; } .r4 { background: #51cf66; }