@import url('../phonics/style.css?v=d0e43dd5643c');
:root{--blue:#286946;--ink:#263e35;--muted:#61776d;--yellow:#edc45c}
body.alphablocks-app{background:#f5f7f0}
.brand-character{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:16px}.brand-en{letter-spacing:0}
.site-nav{display:flex;justify-content:center;gap:24px;margin:0 0 24px}.site-nav a{color:var(--muted);text-decoration:none;font-size:14px}.site-nav a:hover{text-decoration:underline}
.learning-card{border-color:#dde7dc;box-shadow:0 14px 45px #204b3009}.meaning{border-color:#dae6dc}.picture-cover{background:#f8fbf7}
.language-switch button[aria-pressed="true"]{background:var(--blue)}
/* One frame is one spoken unit. Multiple official characters share a frame for a letter team. */
body[data-track="alphablocks"] .letters{gap:8px;align-items:stretch}
body[data-track="alphablocks"] .letter.character-unit{flex:var(--character-count,1) 1 0;min-width:0;max-width:none;width:auto;height:auto;padding:5px 2px 10px;border:2px solid transparent;background:#fff;color:#284a39;border-radius:15px;box-shadow:none;font-size:inherit;line-height:1;gap:5px}
.character-line{display:flex;width:100%;height:140px;align-items:center;justify-content:center}
.character-line img{display:block;width:calc(100% / var(--character-count,1));height:100%;object-fit:contain;pointer-events:none}

body[data-track="alphablocks"] .letter.character-unit.letter-pair{border-color:#e2e9dd;background:#fff}
body[data-track="alphablocks"] .letter.character-unit.playing{border-color:#2c7750;background:#fff;color:#215e3d;box-shadow:0 3px 0 #bad6bd;transform:translateY(-3px)}
body[data-track="alphablocks"] .letter.character-unit.silent-letter{background:#f5f6f4;color:#8c968f;border-color:#ecf0e9}
.character-unit.silent-letter img{opacity:.35;filter:grayscale(.6)}
.letters.long-word .character-line{height:108px}
.alphabet-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.alphabet-letter,.alphabet-letter:nth-child(n){min-width:0;width:100%;min-height:0;padding:5px 3px 10px;background:#fff;border:1px solid #e3e9dd;border-radius:14px;color:#284a39}
.alphabet-letter .character-line{height:100px}
.character-credits{text-align:center;font-size:12px;margin:20px 0 0}.character-credits a{color:var(--muted);text-underline-offset:3px}
@media(max-width:760px){header{padding:16px}.brand-character{width:52px;height:52px}.brand strong{font-size:20px}.header-tools{gap:7px}.site-nav{margin-bottom:18px}.activity{padding-left:14px;padding-right:14px}.character-line{height:118px}.letters.long-word .character-line{height:96px}.alphabet-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.alphabet-letter .character-line{height:74px}.alphabet-panel{padding:14px}}
@media(prefers-reduced-motion:reduce){body[data-track="alphablocks"] .letter.character-unit.playing{transform:none}}

.alphablocks-app .primary{box-shadow:0 4px 0 #1b4d32}.alphablocks-app footer{color:var(--muted)}