/* Abecedarul silabelor: folosește variabilele de culoare ale site-ului (design.css / style.css) */
.syl-app{max-width:760px;margin:0 auto}
.syl-tabs,.syl-levels{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 14px}
.syl-tab,.syl-lvl,.syl-chip,.syl-hear,.syl-show{font:inherit;color:var(--ink);cursor:pointer}
.syl-tab{min-height:48px;padding:0 20px;border-radius:14px;border:2px solid var(--line);background:#fff;font-weight:800}
.syl-tab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.syl-lvl{min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--line);background:#fff;font-weight:700}
.syl-lvl[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft,#ffe8db)}
.syl-help,.syl-prog{text-align:center;margin:.6rem 0}
.syl-cons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0 4px}
.syl-chip{min-width:48px;min-height:48px;border-radius:14px;border:2px solid var(--line);background:#fff;font-size:1.3rem;font-weight:800}
.syl-chip[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft,#ffe8db)}
.syl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.syl-grid.four{grid-template-columns:repeat(2,1fr)}
.syl-tile{min-height:92px;border-radius:20px;border:2px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:2.3rem;font-weight:900;cursor:pointer;transition:transform .1s,border-color .1s}
.syl-tile:hover{border-color:var(--brand)}
.syl-tile:active{transform:scale(.97)}
.syl-tile.playing{border-color:var(--brand);background:var(--brand-soft,#ffe8db)}
.syl-tile.ok{border-color:#2b8a3e;background:#ebfbee}
.syl-tile.tried{opacity:.45;text-decoration:line-through}
.syl-q{display:flex;flex-direction:column;align-items:center;gap:10px;margin:8px 0}
.syl-hear{min-height:56px;padding:0 24px;border-radius:16px;border:2px solid var(--brand);background:var(--brand-soft,#ffe8db);font-size:1.15rem;font-weight:800}
.syl-show{min-height:44px;padding:0 16px;border-radius:12px;border:2px dashed var(--line);background:transparent;font-weight:700}
.syl-prompt{font-size:1.3rem;font-weight:800;text-align:center;margin:0}
.syl-fb{min-height:1.6em;text-align:center;font-weight:800;margin:6px 0}
.syl-live{min-height:1.4em;text-align:center;color:var(--muted)}
.syl-note{text-align:center;color:var(--muted);font-size:.9rem;margin-top:18px}
.syl-result{text-align:center;padding:28px 18px}
.syl-tile:focus-visible,.syl-chip:focus-visible,.syl-tab:focus-visible,.syl-hear:focus-visible{outline:3px solid var(--accent,#6854bf);outline-offset:2px}
@media(min-width:640px){.syl-grid{grid-template-columns:repeat(6,1fr)}.syl-grid.four{grid-template-columns:repeat(4,1fr)}}