/* Syllable Clap. Layout only; colours come from classes, never from inline styles. Every dynamic text has a fixed height. */
.sy-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.sy-levels{margin-top:4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sy-level-name{display:block;font-size:.8em;opacity:.8}

/* The guide corner: Hece on the left, the status sentence beside it. */
.sy-guide-row{display:flex;align-items:center;gap:12px}
.sy-guide{flex:0 0 64px;width:64px;min-width:0}
.sy-guide-row .kg-status{margin:0;flex:1 1 auto;min-width:0}

/* The board holds the picture and word, the question, the clap counter and the answer buttons. */
.sy-board{display:grid;gap:12px;box-sizing:border-box;width:100%;max-width:420px;margin:0 auto;padding:14px;border-radius:18px;background:rgba(255,255,255,.06);justify-items:center}
.sy-card{display:grid;justify-items:center;gap:6px;width:100%}
.sy-pic{width:150px;max-width:60vw;aspect-ratio:1/1}
.sy-pic svg{display:block;width:100%;height:100%}
.sy-word{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin:0;min-height:1.7em;font-size:1.6rem;font-weight:700;line-height:1.2;text-align:center}
.sy-question{margin:0;min-height:1.4em;font-size:1rem;font-weight:700}

/* Syllable parts: each lights in turn on a right answer, with a small clap. */
.sy-sep{opacity:.7}
.sy-part{display:inline-flex;align-items:center;gap:2px;padding:.1em .35em;border-radius:10px;background:rgba(255,255,255,.12);opacity:.5;transition:opacity .2s ease,background-color .2s ease}
.sy-part.is-lit{opacity:1;background:#ffd54f;color:#1d2246}
.sy-part.is-ghost{opacity:.35;border:2px dashed rgba(255,255,255,.5)}
.sy-part-clap{display:none;width:.95em;height:.95em}
.sy-part.is-lit .sy-part-clap{display:inline-block}
.sy-part-clap svg,.sy-clap-svg,.sy-option-clap svg{display:block;width:100%;height:100%}
.sy-vowel{padding:0 .08em;border-radius:6px;background:#ffd54f;color:#1d2246}

/* The practice clap: one button and one dot per possible syllable. The dots are practice only. */
.sy-clapzone{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;width:100%}
.sy-clap{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:.4em 1.1em;border:0;border-radius:999px;background:#4dd0e1;color:#1d2246;font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation}
.sy-clap:focus-visible{outline:4px solid #ffd54f;outline-offset:2px}
.sy-clap-icon{display:inline-flex;width:28px;height:28px}
.sy-dots{display:flex;gap:8px}
.sy-dot{display:block;width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:3px solid rgba(255,255,255,.6);background:transparent;transition:background-color .2s ease,transform .2s ease}
.sy-dot.is-on{background:#ffd54f;border-color:#ffd54f;transform:scale(1.15)}

/* The answer buttons: a number with a clap. Four in a row when there is room, never below 44 px. */
.sy-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:10px;width:100%}
.sy-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;margin:0;padding:.4em .3em;border:0;border-radius:16px;background:rgba(255,255,255,.12);color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;transition:background-color .15s ease}
.sy-option:focus-visible{outline:4px solid #ffd54f;outline-offset:2px}
.sy-option:disabled{cursor:default}
.sy-count{font-size:1.7rem;font-weight:800;line-height:1}
.sy-option-clap{display:inline-flex;width:20px;height:20px}
.sy-option.sy-right{background:#7ee8b0;color:#1d2246}
.sy-option.sy-bad{background:#ff8a65;color:#1d2246}
.sy-option.sy-shake{animation:sy-shake .4s ease}

.sy-actions{justify-content:center}
.sy-actions svg{width:24px;height:24px;flex:0 0 auto}
#sy-next[hidden]{display:none}
.sy-win{margin-top:4px}
.sy-win[hidden]{display:none!important}
.sy-win:focus{outline:none}
.sy-win-words{overflow-wrap:anywhere}
.sy-win-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sy-howto{margin-top:28px}
.sy-steps{display:grid;gap:8px;padding-left:1.2em}

@keyframes sy-shake{
 0%,100%{transform:translateX(0)}
 25%{transform:translateX(-5px)}
 50%{transform:translateX(5px)}
 75%{transform:translateX(-3px)}
}

@media (max-width:520px){
 .sy-board{gap:10px;padding:10px}
 .sy-word{font-size:1.35rem}
 .sy-options{grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:8px}
}
@media (max-width:359px){
 .sy-count{font-size:1.4rem}
 .sy-levels{gap:6px}
}

@media (prefers-reduced-motion:reduce){
 .sy-option,.sy-option.sy-shake,.sy-part,.sy-dot{transition:none;animation:none}
}