/* Абетка — game layout. Portrait: one column. Landscape tablet: picture left, actions right. */

.modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tab{border:0;cursor:pointer;border-radius:var(--r);min-height:var(--tap);padding:8px 10px;font-weight:900;font-size:18px;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s;text-align:left;line-height:1.1}
.tab .emoji{width:32px;height:32px;flex:none}
.tab[data-mode="abc"]{background:var(--berry);box-shadow:0 6px 0 var(--berry-d)}
.tab[data-mode="read"]{background:var(--orange);box-shadow:0 6px 0 var(--orange-d)}
.tab[data-mode="build"]{background:var(--grass);box-shadow:0 6px 0 var(--grass-d)}
.tab[data-mode="first"]{background:var(--ocean);box-shadow:0 6px 0 var(--ocean-d)}
.tab[aria-selected="true"]{transform:translateY(5px);box-shadow:none;outline:4px solid #fff}
@media (max-width:640px){.modes{grid-template-columns:repeat(2,minmax(0,1fr))} .tab{font-size:16px}}

.stage{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;min-height:360px}

.task{display:flex;align-items:center;justify-content:center;gap:12px;margin:0}
.task p{margin:0;font-weight:900;font-size:clamp(19px,2.6vw,24px);text-align:center;text-wrap:balance;min-width:0}
.task .round{width:52px;height:52px;background:var(--sun);box-shadow:0 4px 0 var(--sun-d)}

.play{display:grid;gap:16px;align-items:center;justify-items:center}
.side{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;width:100%}
@media (orientation:landscape) and (min-width:820px){
  .play{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}

.pic{border:0;cursor:pointer;padding:0;width:var(--pic);height:var(--pic);--pic:clamp(130px,min(30vh,40vw),230px);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%, #FFF7D6, #FFE48A);box-shadow:inset 0 -8px 0 rgba(0,0,0,.06)}
.pic .emoji{width:66%;height:66%}
.pic.pop{animation:pop .5s}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.12) rotate(-6deg)}100%{transform:scale(1)}}

/* letters */
.v{color:var(--vowel)} .c{color:var(--cons)} .s{color:var(--soft)}
.legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:15px;color:var(--muted);font-weight:800}
.legend b{display:inline-block;width:15px;height:15px;border-radius:4px;vertical-align:-2px;margin-right:5px}

.word{font-weight:900;font-size:clamp(36px,6vw,60px);letter-spacing:2px;text-align:center;min-height:1.25em;line-height:1.2}
.word .hl{text-decoration:underline;text-decoration-thickness:6px;text-underline-offset:9px;text-decoration-color:var(--sun)}
.word .q{color:#C3CCE0}

.bigletter{border:0;background:none;cursor:pointer;font-weight:900;font-size:clamp(90px,min(18vh,20vw),150px);line-height:1;padding:0 6px}
.bigletter small{font-size:.62em;margin-left:4px}

/* syllables with the school arc underneath */
.syls{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.syl{border:0;cursor:pointer;background:var(--chip);border-radius:20px;min-width:var(--tap);padding:8px 18px 24px;font-weight:900;font-size:clamp(32px,5.4vw,48px);position:relative;transition:transform .12s, background .2s;letter-spacing:2px;line-height:1.15}
.syl::after{content:"";position:absolute;left:14%;right:14%;bottom:9px;height:14px;border:4px solid var(--grape);border-top:0;border-radius:0 0 999px 999px;opacity:.5}
.syl.done{background:#FFF3C4}
.syl.done::after{border-color:var(--orange);opacity:1}
.syl.speaking{transform:scale(1.12)}

.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.arrows{display:flex;gap:12px;align-items:center}

/* alphabet grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px;width:100%}
.lt{border:0;cursor:pointer;min-height:60px;border-radius:16px;font-weight:900;font-size:24px;background:var(--chip);transition:transform .12s;padding:4px 2px;white-space:nowrap}
.lt.on{background:var(--sun);transform:scale(1.06)}

/* build mode */
.levels{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lvl{border:3px solid var(--line);cursor:pointer;background:var(--chip);border-radius:16px;min-height:56px;padding:4px 16px;font-weight:900;font-size:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.lvl small{font-weight:800;font-size:13px;color:var(--muted)}
.lvl.on{background:var(--sun);border-color:var(--sun)}
.lvl.on small{color:var(--ink)}
.slots{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.slot{min-width:92px;min-height:80px;border-radius:18px;border:4px dashed #C9D6F0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:clamp(32px,5vw,44px);padding:4px 12px;letter-spacing:2px}
.slot.full{border-style:solid;border-color:var(--grass);background:#E7FAEF}
.slot.next{border-color:var(--sun);background:#FFFBEA}
.ghost{color:#C3CCE0}

.opts{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.opt{border:0;cursor:pointer;border-radius:20px;min-width:84px;min-height:76px;padding:8px 20px;font-weight:900;font-size:clamp(32px,5vw,44px);color:#fff;transition:transform .1s, opacity .2s;letter-spacing:2px}
.opt:nth-child(5n+1){background:var(--berry);box-shadow:0 6px 0 var(--berry-d)}
.opt:nth-child(5n+2){background:var(--ocean);box-shadow:0 6px 0 var(--ocean-d)}
.opt:nth-child(5n+3){background:var(--orange);box-shadow:0 6px 0 var(--orange-d)}
.opt:nth-child(5n+4){background:var(--grape);box-shadow:0 6px 0 var(--grape-d)}
.opt:nth-child(5n){background:var(--grass);box-shadow:0 6px 0 var(--grass-d)}
.opt:active{transform:translateY(4px)}
.opt.used{opacity:.18;pointer-events:none}
.opt.hint{outline:6px solid var(--sun);outline-offset:3px}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}

.praise{font-weight:900;font-size:clamp(26px,4vw,36px);color:var(--grass);min-height:1.3em;text-align:center}

.confetti{position:absolute;top:-20px;width:12px;height:16px;border-radius:3px;pointer-events:none;animation:fall 1.6s ease-in forwards}
@keyframes fall{to{transform:translateY(560px) rotate(540deg);opacity:0}}
.btn .emoji{width:26px;height:26px}
.praise .emoji{width:34px;height:34px;vertical-align:-4px}
.pill .emoji{width:28px;height:28px;display:block}
.slot,.syl,.opt,.word{white-space:nowrap}