/* Board type Phonics (js/board-phonics.js): the Letter, Blend, word card and YouTube items. Sizes are board pixels (class TV). */
.ph-tools{display:inline-flex;align-items:center;gap:6px}
.ph-tools .pbadge{margin-right:2px}
.wb-phonics{background:#fff;border-radius:24px;box-shadow:0 6px 16px rgba(16,24,40,.12);color:#1B1F24;overflow:hidden}
.wb-phonics .ph-b{min-height:44px;min-width:44px;padding:0 14px;border:1px solid #C9D0C5;border-radius:12px;background:#fff;color:#1B1F24;font:700 18px/1 system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
.wb-phonics .ph-b[aria-pressed=true]{background:#E7F5FF;border-color:#1C7ED6;color:#1864AB}
.wb-phonics .ph-b.rec{background:#E03131;border-color:#E03131;color:#fff;animation:ph-pulse 1s ease-in-out infinite}
.wb-phonics .ph-b:disabled{opacity:.45;cursor:default}
.ph-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.ph-note{margin:6px 12px 0;font-size:15px;line-height:1.3;color:#5C6670;text-align:center}
.ph-h{margin:12px 0 6px;font-size:18px;font-weight:800;color:#3D4650;text-align:center}

/* Letter: the big letter from our own strokes, with numbered arrows */
.ph-letter{height:100%;display:flex;flex-direction:column;padding:12px 12px 14px;box-sizing:border-box}
.ph-top{flex-wrap:nowrap;gap:6px}
.ph-top .ph-b{padding:0 10px;white-space:nowrap}
.ph-seg{display:inline-flex}
.ph-seg .ph-b{min-width:46px;font-size:22px}
.ph-seg .ph-b:first-child{border-radius:12px 0 0 12px}
.ph-seg .ph-b:last-child{border-radius:0 12px 12px 0;margin-left:-1px}
.ph-ch{font-size:28px;min-width:56px;text-align:center}
.ph-big{flex:1;min-height:0;display:flex;justify-content:center;padding:4px 0}
.ph-svg{height:100%;max-width:100%;overflow:visible}
.ph-line{stroke:#D0D7DE;stroke-width:1}
.ph-line.dash{stroke-dasharray:3 3}
.ph-ink{fill:none;stroke:#1B1F24;stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.ph-ink-dot{fill:#1B1F24}
.ph-svg.arrows .ph-ink{stroke:#C9D3DD}
.ph-svg.arrows .ph-ink-dot{fill:#C9D3DD}
.ph-arrow{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ph-num text{font:800 9px/1 system-ui,sans-serif;text-anchor:middle;dominant-baseline:central}

/* Blend: tiles that slide together */
.ph-blend{height:100%;display:flex;flex-direction:column;padding:16px;box-sizing:border-box;overflow:auto}
.ph-tiles{display:flex;justify-content:center;align-items:center;gap:28px;min-height:132px;margin-bottom:12px;transition:gap .6s ease}
.ph-tiles.go{gap:0}
.ph-tile{display:grid;place-items:center;width:108px;height:120px;border-radius:18px;background:#FFF3BF;border:3px solid #F08C00;font:800 84px/1 system-ui,sans-serif;color:#1B1F24;transition:transform .2s,background .2s}
.ph-tiles.go .ph-tile{border-radius:0}
.ph-tiles.go .ph-tile:first-child{border-radius:18px 0 0 18px}
.ph-tiles.go .ph-tile:last-child{border-radius:0 18px 18px 0}
.ph-tile.on{background:#FFD43B;transform:translateY(-8px)}
.ph-empty{font-size:20px;font-weight:700;color:#8A94A0}
.ph-keys{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-top:12px}
.ph-k{min-height:44px;border:1px solid #C9D0C5;border-radius:10px;background:#F8F9FA;font:800 22px/1 system-ui,sans-serif;color:#1B1F24;cursor:pointer;touch-action:manipulation}
.ph-k:disabled{opacity:.4;cursor:default}
.ph-sug{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ph-s{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 14px;border:2px solid #74C0FC;border-radius:999px;background:#E7F5FF;font:800 22px/1 system-ui,sans-serif;color:#1B1F24;cursor:pointer}
.ph-s img{width:32px;height:32px;object-fit:contain}

/* a word card from a suggestion */
.ph-card{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;box-sizing:border-box;position:relative}
.ph-card img{width:70%;flex:1;min-height:0;object-fit:contain;pointer-events:none}
.ph-emo{font-size:96px;line-height:1}
.ph-card b{font-size:44px;font-weight:800}
.ph-card .ph-b{position:absolute;right:8px;bottom:8px;border-radius:50%;padding:0}

/* YouTube: a bar to drag by, then the video */
.ph-ybar{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 6px 0 16px;background:#1B1F24;color:#fff;font-weight:800;font-size:18px;cursor:move}
.ph-ybar .ph-b{background:transparent;border-color:transparent;color:#fff}
.ph-yt{display:block;width:100%;height:calc(100% - 52px);border:0;background:#000}
.ph-yin{padding:24px;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.ph-yin label{display:flex;flex-direction:column;gap:8px;font-size:20px;font-weight:800}
.ph-yt-in{font:500 20px/1.2 system-ui,sans-serif;padding:12px;border:2px solid #C9D0C5;border-radius:12px}

@keyframes ph-pulse{50%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.ph-tiles{transition:none}.wb-phonics .ph-b.rec{animation:none}}