/* Новое оформление урока (взрослый вариант): светлый тёплый фон, чёрный текст, спокойные акценты */
#app.nlscr, .nlscr { --nb: #F4F1EC; --nk: #17181C; --nm: #6F6B66; --nl: #ECE7DF; --nl2: #E2DDD5; --nred: #C4553B; --nblue: #4B5BD6; --ngreen: #4E8C74; --nviolet: #8A5CD0; --ngold: #C98A1E; --nsand: #E8C9A6;
  background: var(--nb); color: var(--nk); min-height: 100dvh; display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; padding: 0 0 env(safe-area-inset-bottom); }
#app.nlscr.ndark { background: #121317; color: #FFFFFF; }
#app.nlscr { background: #F4F1EC; max-width: 440px; }
html:has(#app.nlscr), body:has(#app.nlscr) { background: #F4F1EC; } html:has(#app.ndark), body:has(#app.ndark) { background: #121317; }
.nhy { font-family: HySerif, 'Noto Serif Armenian', serif; font-weight: 800; }
.nhy.red { color: var(--nred); } .nhy.blue { color: var(--nblue); } .nhy.violet { color: var(--nviolet); }
.nlscr .mut { color: var(--nm); font-weight: 500; }
.nlscr button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* шапка */
.nhead { padding: 14px 22px 0; display: flex; flex-direction: column; gap: 14px; position: relative; }
.nbar { display: flex; align-items: center; gap: 12px; }
.nx { width: 44px; height: 44px; margin-left: -10px; display: flex; align-items: center; justify-content: center; color: inherit; flex-shrink: 0; }
.nx svg { width: 18px; height: 18px; }
.nprog { flex: 1; display: flex; gap: 3px; }
.nprog i { flex: 1; height: 4px; border-radius: 2px; background: var(--nl2); }
.nprog i.done { background: var(--nk); } .nprog i.cur { background: var(--nk); opacity: .45; }
.ndark .nprog i { background: rgba(255,255,255,.18); } .ndark .nprog i.done, .ndark .nprog i.cur { background: #FFFFFF; }
.ncount { font-size: 13px; font-weight: 700; color: var(--nm); }
.ndark .ncount { color: #A9ABB3; }
.ntitle { display: flex; flex-direction: column; gap: 6px; }
.ntitle h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 31px; }
.ntitle p { margin: 0; font-size: 15px; line-height: 21px; color: var(--nm); }
.ndark .ntitle p { color: #A9ABB3; }
.nmode { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--nred); }
.ndark .nmode { color: var(--nsand); }
.nbar .nb { font-size: 0 !important; width: auto; min-height: 36px; padding: 0 12px 0 30px; flex-shrink: 0; white-space: nowrap; }
.nbar .nb::after { content: 'голос вкл'; font-size: 13px; font-weight: 800; }
.nbar .nb.off::after { content: 'голос выкл'; }
.nlscr .nb { background: #E1EEE6; color: #2F6B54 !important; border: 1.5px solid #B9D6C6; opacity: 1; }
.nlscr .nb::before { left: 11px; width: 10px; height: 10px; margin-top: -5px; }
.nlscr .nb.off { background: #FFFFFF; color: var(--nm) !important; border-color: var(--nl2); opacity: 1; }
.ndark .nb { background: rgba(255,255,255,.08); color: #A9ABB3; border-color: transparent; }
.ntitle.nfin { padding: 22px 22px 0; }
.ntitle.nfin h1 { font-size: 30px; line-height: 35px; letter-spacing: -.8px; }

/* общие куски */
.ncard { background: #FFFFFF; border: 1px solid var(--nl); border-radius: 20px; }
.nfoot { margin-top: auto; padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.nfoot.white { background: #FFFFFF; border-top: 1px solid var(--nl); }
.flab { font-size: 13px; font-weight: 700; color: var(--nm); }
.nbtn { display: flex; align-items: center; justify-content: center; border: none; border-radius: 16px; min-height: 56px; background: var(--nk); color: #FFFFFF !important; font-weight: 800; font-size: 16px; width: 100%; }
.nbtn.off { background: var(--nl2); color: #8D8A85 !important; }
.nbtn.red { background: var(--nred); }
.nbtn.light { background: #FFFFFF; color: var(--nk) !important; }
.nlink { border: none; background: none; color: var(--nm) !important; font-weight: 700; min-height: 44px; }
.ncoach { display: flex; gap: 10px; align-items: center; background: #FFFFFF; border: 1px solid var(--nl); border-radius: 16px; padding: 10px 12px; font-size: 14px; font-weight: 600; line-height: 19px; color: #3A3835; }
.ncoach .av { width: 36px; height: 36px; border-radius: 18px; background: #FFE9D3; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ncoach .av svg { width: 30px; height: 30px; }
.nplay { width: 52px; height: 52px; border-radius: 26px; border: none; background: var(--nk); color: #FFFFFF !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .15s; }
.nplay svg { width: 24px; height: 24px; }
.nplay.red { background: var(--nred); } .nplay.green { background: var(--ngreen); } .nplay.blue { background: var(--nblue); }
.nplay.big { width: 64px; height: 64px; border-radius: 32px; } .nplay.big svg { width: 28px; height: 28px; }
.nplay:active { transform: scale(.94); }
.nplay.on { box-shadow: 0 0 0 6px rgba(23,24,28,.10); } .nplay.on .w1 { animation: nwave .9s infinite; } .nplay.on .w2 { animation: nwave .9s .18s infinite; }
@keyframes nwave { 0%,100% { opacity: 1 } 50% { opacity: .2 } }
.tick { width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #FFFFFF; }
.tick:not(:empty) { background: var(--nblue); } .tick svg { width: 14px; height: 14px; }
.nfb { border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.nfb b { font-size: 17px; font-weight: 800; } .nfb span { font-size: 14px; color: var(--nm); }
.nfb.ok b { color: var(--ngreen); } .nfb.bad b { color: var(--nred); }
.shake { animation: nshake .35s; } @keyframes nshake { 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }

/* 1. знакомство */
.ocards { margin: 22px 22px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ocard { height: 160px; border-radius: 20px; border: none; background: var(--nk); color: #8D8F99 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: transform .2s; }
.ocard svg { width: 38px; height: 38px; color: #5A5C66; } .ocard small { font-size: 12px; font-weight: 700; }
.ocard.open { background: #FFFFFF; border: 1px solid var(--nl); color: var(--nk) !important; }
.ocard.flip { animation: nflip .35s; }
.ocard { position: relative; }
.ocard.shut { animation: nbob 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ocard.shut { border: 1.5px solid transparent; }
.ocard.peach { background: #F6E6D8; color: #A8472F !important; border-color: #EDD3BE; }
.ocard.sage { background: #E1EEE6; color: #3F7A63 !important; border-color: #C9DFD2; }
.ocard.sky { background: #E3E8F8; color: #3E4DBE !important; border-color: #CCD4F1; }
.ocard .oq { width: 56px; height: 56px; border-radius: 28px; background: rgba(255,255,255,.75); display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; line-height: 1; animation: nq 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ocard.shut small { font-size: 13px; font-weight: 800; }
.ocard.hint::after { content: ''; position: absolute; inset: -6px; border-radius: 25px; border: 2px solid var(--nred); animation: nring 1.5s ease-out infinite; pointer-events: none; }
.ocard.shut:active { transform: scale(.95); }
@keyframes nbob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
@keyframes nq { 0%,100% { transform: scale(1) } 50% { transform: scale(1.12) } }
@keyframes nring { 0% { opacity: .95; transform: scale(.97) } 100% { opacity: 0; transform: scale(1.07) } }
.ocard.open .nhy { font-size: 60px; line-height: 1; color: var(--nred); } .ocard.open b { font-size: 16px; font-weight: 800; }
.ocard.sel { box-shadow: 0 0 0 3px var(--nred); }
@keyframes nflip { from { transform: rotateY(90deg) } to { transform: rotateY(0) } }
.oinfo { margin: 22px 22px 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.oinfo.empty { text-align: center; padding: 26px 18px; }
.oinfo .orow { display: flex; gap: 14px; align-items: center; } .oinfo .orow div { display: flex; flex-direction: column; gap: 3px; text-align: left; align-items: flex-start; }
.oinfo .big { font-size: 18px; font-weight: 800; } .oinfo .mut { font-size: 14px; line-height: 19px; }
.oinfo .sep { height: 1px; background: var(--nl); } .oex { font-size: 15px; font-weight: 600; } .oex .nhy { font-size: 20px; }

/* 2. письмо */
.tbox { margin: 18px 22px 0; height: min(52vh, 420px); position: relative; overflow: hidden; touch-action: none; transition: box-shadow .3s; }
.tbox.ok { box-shadow: 0 0 0 3px var(--ngreen); }
.tbox canvas { display: block; touch-action: none; }
.tpct { position: absolute; right: 14px; top: 12px; font-size: 13px; font-weight: 700; color: var(--nm); } .tpct.warn { color: var(--nred); }
.tbtns { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.nbtn.ghost { background: #FFFFFF; border: 1px solid var(--nl2); color: var(--nk) !important; } .nbtn.ghost.off { visibility: hidden; }
.tstep { position: absolute; left: 14px; top: 10px; display: flex; gap: 6px; }
.tstep i { font-style: normal; font-family: HySerif, serif; font-weight: 800; font-size: 15px; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--nb); color: #7E7870; }
.tstep i.cur { background: var(--nk); color: #FFFFFF; } .tstep i.done { background: #E6F0EC; color: var(--ngreen); }
.trow { margin: 14px 22px 0; display: flex; gap: 12px; align-items: center; font-size: 15px; font-weight: 600; }
.trow .nhy { font-size: 22px; }

/* 3. поиск на фото */
.fphoto { margin: 18px 22px 0; position: relative; border-radius: 20px; overflow: hidden; background: #2A2B30; }
.fphoto img { position: absolute; display: block; max-width: none; height: auto; }
.fbox { position: absolute; border: 2px solid transparent; background: transparent; border-radius: 10px; padding: 0; }
.fbox.hit { border: 3px solid var(--nblue); background: rgba(75,91,214,.18); }
.fbox.miss { border: 3px solid var(--nred); background: rgba(196,85,59,.18); }
.fphoto .ncredit { position: absolute; right: 8px; bottom: 6px; font-size: 10px; font-weight: 600; color: rgba(255,255,255,.85); text-decoration: none; }
.fmsg { margin: 10px 22px 0; min-height: 20px; font-size: 14px; font-weight: 600; color: var(--nred); }
.fmsg .nhy { font-size: 18px; }
.flist { margin: 8px 22px 0; display: flex; flex-direction: column; gap: 8px; }
.frow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; } .frow .nhy { font-size: 26px; width: 30px; } .frow b { flex: 1; font-size: 15px; font-weight: 800; }
.frow.ok { border-color: var(--nblue); }

/* 4. на слух */
.hplay { margin: 22px 22px 0; background: #E3E8F8; border: 1.5px solid #CCD4F1; border-radius: 22px; padding: 16px 18px; display: flex; align-items: center; gap: 16px; }
.wave { display: flex; align-items: center; gap: 3px; height: 40px; flex: 1; } .wave i { display: block; flex: 1; border-radius: 2px; background: var(--nk); }
.wave.light i { background: #8793E3; }
.hopts { margin: 16px 22px 0; display: flex; flex-direction: column; gap: 10px; }
.hopt { display: flex; align-items: center; gap: 16px; padding: 14px 16px; text-align: left; }
.hopt .nhy { font-size: 44px; line-height: 1; width: 44px; } .hopt .hw { flex: 1; display: flex; flex-direction: column; gap: 6px; } .hopt .hw .wave { height: 30px; } .hopt .hw .wave i { background: #CFC9BF; }
.hopt small { font-size: 13px; font-weight: 700; color: var(--nm); }
.hopt.ok { border: 2px solid var(--ngreen); box-shadow: 0 0 0 5px rgba(78,140,116,.14); } .hopt.ok .nhy { color: var(--ngreen); } .hopt.ok .wave i { background: var(--ngreen); } .hopt.ok .tick { background: var(--ngreen); }
.hopt.bad { border: 2px solid var(--nred); } .hopt.dim { opacity: .5; }

/* 5. соберите слово */
.bplay { margin: 22px 22px 0; background: #E3E8F8; border: 1.5px solid #CCD4F1; color: var(--nk); border-radius: 22px; padding: 16px 18px; display: flex; align-items: center; gap: 16px; }
.bplay div { display: flex; flex-direction: column; gap: 2px; } .bplay b { font-size: 20px; font-weight: 800; } .bplay span { font-size: 14px; color: var(--nm); }
.bslots { margin: 24px 22px 0; display: flex; gap: 10px; justify-content: center; }
.bslot { width: 62px; height: 76px; border-radius: 16px; border: 2px dashed #CFC9BF; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.bslot .nhy { font-size: 40px; } .bslot.fill { background: #FFFFFF; border: 2px solid var(--nblue); animation: npop .25s; }
.bslot.cur { background: #EEF0FC; border-color: var(--nblue); box-shadow: 0 0 0 5px rgba(75,91,214,.12); }
@keyframes npop { from { transform: scale(.8) } to { transform: scale(1) } }
.bhint { margin: 14px 22px 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--nm); } .bhint .nhy { font-size: 22px; color: var(--nk); }
.bkeys { display: flex; gap: 8px; } .bkey { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 66px; border-radius: 16px; border: 1px solid var(--nl2); background: #FFFFFF; } .bkey .nhy { font-size: 32px; }
.bkey:active { background: #EEF0FC; }

/* 6–7. карточки */
.cstage { position: relative; flex: 1; min-height: 310px; margin-top: 4px; overflow: hidden; }
.cback { position: absolute; left: 0; right: 0; margin: 0 auto; top: 22px; width: min(206px, calc(100% - 184px)); height: 250px; border-radius: 24px; }
.cback.b1 { background: #E7E2DA; transform: rotate(-4deg); } .cback.b2 { background: #EFEBE4; border: 1px solid var(--nl2); transform: rotate(3deg); }
.ccard { position: absolute; left: 0; right: 0; margin: 0 auto; top: 16px; width: min(214px, calc(100% - 176px)); height: 256px; border-radius: 24px; background: #FFFFFF; border: 1px solid var(--nl); box-shadow: 0 20px 34px rgba(23,24,28,.14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; touch-action: none; user-select: none; z-index: 2; cursor: grab; }
.ccard small { font-size: 14px; font-weight: 600; color: var(--nm); }
.ctag { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.iss .ctag { background: #F6E6D8; color: #A8472F; } .isw .ctag { background: #ECE4FA; color: #6A45B0; }
.isw .ccard { background: #F8F4FE; border-color: #E2D7F6; }
.cword { font-size: 40px; font-weight: 800; display: flex; align-items: baseline; } .cword .nhy { font-size: 44px; }
.nhy.huge { font-size: 116px; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .ccard.nudge, .cz .car { animation: none; } }
.cz { --p: 0; position: absolute; top: 46px; width: 104px; height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-weight: 800; z-index: 1; padding: 0 10px; transition: transform .12s, box-shadow .2s, background .2s, border-color .2s; }
.cz.left { left: 0; border-radius: 0 30px 30px 0; transform: translateX(calc(-22px + 22px * var(--p))); padding-left: 22px; }
.cz.right { right: 0; border-radius: 30px 0 0 30px; transform: translateX(calc(22px - 22px * var(--p))); padding-right: 22px; }
.cz .car { width: 30px; height: 30px; border-radius: 15px; background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; } .cz .car svg { width: 18px; height: 18px; }
.cz.left .car { animation: nsl 1.6s ease-in-out infinite; } .cz.right .car { animation: nsr 1.6s ease-in-out infinite; }
@keyframes nsl { 0%,100% { transform: translateX(0) } 50% { transform: translateX(-5px) } } @keyframes nsr { 0%,100% { transform: translateX(0) } 50% { transform: translateX(5px) } }
.cz .csp svg { width: 20px; height: 20px; }
.cz b { font-size: 17px; text-align: center; word-break: break-word; line-height: 20px; } .cz.snd b { font-size: 28px; line-height: 30px; }
.cz.snd.left, .cz.plate.left { background: #F6E6D8; border: 2px solid #EDD3BE; border-left: none; color: #8E3B27 !important; }
.cz.snd.right, .cz.plate.right { background: #E3E8F8; border: 2px solid #CCD4F1; border-right: none; color: #2F3C9E !important; }
.cz.hot { box-shadow: 0 10px 24px rgba(23,24,28,.16); }
.cz.left.hot { border-color: #C4553B; } .cz.right.hot { border-color: #4B5BD6; }
.cz.ok { background: #E3EFE9 !important; border-color: var(--ngreen) !important; color: #2F6B54 !important; --p: 1; }
.cz.bad { background: #F6E2DC !important; border-color: var(--nred) !important; color: #A8472F !important; --p: 1; }
.ccard.nudge { animation: nnudge 1.6s ease-in-out .5s 1; }
@keyframes nnudge { 0%,100% { transform: translateX(0) rotate(0) } 25% { transform: translateX(-26px) rotate(-3deg) } 60% { transform: translateX(26px) rotate(3deg) } }
.chint { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 22px 22px; text-align: center; font-size: 15px; font-weight: 600; color: var(--nm); min-height: 44px; }

/* 8. чтение */
.dboard { margin: 22px 22px 0; background: #FFFFFF; border: 1px solid var(--nl); border-radius: 20px; padding: 18px 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dtiles { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.dtile { width: 52px; height: 70px; border-radius: 12px; border: none; background: #F6E6D8; border: 1.5px solid #EDD3BE !important; color: #8E3B27 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dtile .nhy { font-size: 32px; } .dtile.open { background: #FFF6E8; color: var(--nk) !important; animation: nflip .3s; } .dtile.open b { font-size: 26px; font-weight: 800; line-height: 28px; } .dtile.open .nhy { font-size: 13px; color: var(--ngold); }
.dnote { font-size: 13px; font-weight: 700; color: var(--nm); }
.dfb { margin: 14px 22px 0; background: #FFFFFF; border: 1px solid var(--nl); }
.dopts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dopt { display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: 16px; border: 1px solid var(--nl2); background: #FFFFFF; font-weight: 800 !important; font-size: 17px; }

/* 9. скорость */
.stp { margin: 24px 22px 0; display: flex; align-items: center; justify-content: space-between; }
.sring { position: relative; width: 120px; height: 120px; } .sring svg { width: 120px; height: 120px; }
.sring span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .sring b { font-size: 34px; font-weight: 800; } .sring small { font-size: 12px; font-weight: 700; color: var(--nm); }
.sscore { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .sscore b { font-size: 40px; font-weight: 800; letter-spacing: -1px; } .sscore .acc { font-size: 13px; font-weight: 700; color: var(--nred); } .sscore .mut { font-size: 13px; color: var(--nm); }
.sready { margin: auto 22px 26px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; } .sready p { margin: 0 0 6px; color: var(--nm); font-size: 15px; line-height: 21px; } .sbig { font-size: 56px; font-weight: 800; }
.srep { margin: 22px 22px 0; min-height: 56px; border-radius: 16px; border: 1px solid var(--nl2); background: #FFFFFF; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; font-size: 16px; color: var(--nk) !important; transition: box-shadow .2s, transform .1s; }
.srep svg { width: 22px; height: 22px; } .srep:active { transform: scale(.98); }
.srep.on { box-shadow: 0 0 0 4px rgba(196,85,59,.18); border-color: var(--nred); } .srep.on .w1 { animation: nwave .9s infinite; } .srep.on .w2 { animation: nwave .9s .18s infinite; }
.shist { margin: 16px 22px 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-content: start; }
.shist span { height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .shist span.new { animation: npop .2s; } .shist .nhy { font-size: 20px; }
.shist .ok { background: #E3EFE9; color: var(--ngreen); } .shist .bad { background: #F6E2DC; color: var(--nred); }
.skeys { margin: auto 22px 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.skey { display: flex; align-items: center; justify-content: center; min-height: 84px; border-radius: 18px; border: 1px solid var(--nl); background: #FFFFFF; color: var(--nk) !important; touch-action: manipulation; } .skey .nhy { font-size: 38px; } .skey:active { background: var(--nk); color: #FFFFFF !important; }

/* итог */
.fstats { margin: 22px 22px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fstats .ncard { padding: 14px; display: flex; flex-direction: column; gap: 2px; } .fstats b { font-size: 24px; font-weight: 800; } .fstats span { font-size: 12px; font-weight: 600; color: var(--nm); }
.fconf { margin: 12px 22px 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .fconf .mut { font-size: 13px; font-weight: 700; }
.crow { display: flex; align-items: center; gap: 12px; } .crow .nhy { font-size: 26px; width: 30px; } .crow b { font-size: 13px; font-weight: 700; width: 70px; text-align: right; }
.cbar { flex: 1; height: 6px; border-radius: 3px; background: #EFEAE2; } .cbar i { display: block; height: 6px; border-radius: 3px; background: var(--nk); }
.fwords { margin: 12px 22px 0; display: flex; flex-wrap: wrap; gap: 6px; } .nwchip { background: #FFFFFF; border: 1px solid var(--nl); border-radius: 12px; padding: 6px 10px; font-size: 14px; font-weight: 600; } .nwchip .nhy { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .ocard.flip, .ocard.shut, .ocard .oq, .ocard.hint::after, .srep.on .w1, .srep.on .w2, .shist span.new, .dtile.open, .bslot.fill, .shake, .nplay.on .w1, .nplay.on .w2 { animation: none; } }

/* кнопки ответов внизу всегда тёмным текстом (style.css красит кнопки светлым) */
.nlscr .bkey, .nlscr .dopt, .nlscr .hopt, .nlscr .skey { color: var(--nk) !important; }
.nlscr .bkey { border: 1.5px solid #D6CFC4; } .nlscr .bkey .nhy { color: var(--nk); }
.nlscr .flab { color: var(--nk); font-weight: 800; }

.chint .sw svg { width: 18px; height: 18px; display: block; } .chint .sw { color: var(--nk); }

/* «совпадает ли»: звук сверху, буква на карточке */
.csnd { margin: 14px 22px 0; background: #E3E8F8; border: 1.5px solid #CCD4F1; border-radius: 20px; padding: 12px 16px; display: flex; align-items: center; gap: 14px; }
.csnd div { display: flex; flex-direction: column; gap: 2px; } .csnd b { font-size: 17px; font-weight: 800; } .csnd span { font-size: 13px; color: var(--nm); }
.iss .ccard { top: 10px; }
.cz.yn { gap: 6px; } .cz.yn b { font-size: 18px; } .cz .cyn svg { width: 34px; height: 34px; display: block; }
.cz.yn.left { background: #F6E2DC; border: 2px solid #EBC8BD; border-left: none; color: #A8472F !important; }
.cz.yn.right { background: #E1EEE6; border: 2px solid #C2DCCD; border-right: none; color: #2F6B54 !important; }
.cz.yn.left.hot { border-color: var(--nred); } .cz.yn.right.hot { border-color: var(--ngreen); }

/* трудная буква: живые слова */
.exhead { margin: 18px 22px 0; padding: 14px 16px; display: flex; align-items: center; gap: 16px; }
.exhead div { display: flex; flex-direction: column; gap: 2px; } .exhead .nhy { font-size: 34px; } .exhead span { font-size: 15px; font-weight: 700; color: var(--nm); }
.exlist { margin: 12px 22px 0; display: flex; flex-direction: column; gap: 10px; }
.exrow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; color: var(--nk) !important; }
.exrow .exw .nhy { font-size: 26px; } .exrow .exr { flex: 1; display: flex; flex-direction: column; gap: 2px; } .exrow .exr b { font-size: 17px; font-weight: 700; }
.exrow .exr small { font-size: 13px; color: var(--nm); } .exm { color: var(--nred); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.exrow .exs { width: 40px; height: 40px; border-radius: 20px; background: #F6E6D8; color: #A8472F; display: flex; align-items: center; justify-content: center; } .exrow .exs svg { width: 20px; height: 20px; }
.exrow.on { border-color: var(--nred); box-shadow: 0 0 0 3px rgba(196,85,59,.15); }
/* похожие буквы */
.twrow { margin: 22px 22px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.twc { position: relative; border-radius: 22px; padding: 22px 12px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.twc .nhy { font-size: 52px; line-height: 1; } .twc b { font-size: 20px; font-weight: 800; } .twc small { font-size: 13px; line-height: 17px; font-weight: 600; }
.twc.peach { background: #F6E6D8; border: 2px solid #EDD3BE; color: #8E3B27 !important; } .twc.sky { background: #E3E8F8; border: 2px solid #CCD4F1; color: #2F3C9E !important; }
.twc .twp { width: 40px; height: 40px; border-radius: 20px; background: rgba(255,255,255,.8); display: flex; align-items: center; justify-content: center; } .twc .twp svg { width: 20px; height: 20px; }
.twc.on { box-shadow: 0 10px 22px rgba(23,24,28,.14); transform: translateY(-2px); }

.ncredit.fcred { position: static; display: block; margin: 6px 22px 0; text-align: right; font-size: 11px; color: var(--nm) !important; background: none; padding: 0; text-shadow: none; }

.nlscr .exrow .exr b { color: var(--nk) !important; text-decoration: none; border: none; } .nlscr .exrow .exr b.exm { color: var(--nred) !important; text-decoration: underline; }
.nlscr .ocards.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nlscr .ocards.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .ocards.n4 .ocard { height: 140px; } .ocards.n4 .oq { width: 46px; height: 46px; font-size: 24px; } .ocards.n4 .ocard.open .nhy { font-size: 48px; }
.nlscr .airm { stroke: currentColor; stroke-width: 2.6; width: .75em; height: .5em; vertical-align: .55em; }
.hopts.n4 { gap: 8px; } .hopts.n4 .hopt { padding: 9px 14px; } .hopts.n4 .hopt .nhy { font-size: 36px; } .hopts.n4 .hopt .hw .wave { height: 22px; }

/* ---- похожие буквы ---- */
@font-face { font-family: HySerif; src: url(fonts/NotoSerifArmenian_600SemiBold.ttf); font-weight: 600; font-display: swap; }
.pcards { margin: 18px 22px 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.pcard { border-radius: 20px; padding: 16px 8px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pcard .nhy { font-size: 46px; line-height: 1.1; } .pcard b { font-size: 16px; font-weight: 800; }
.pcard.peach { background: #F6E6D8; border: 2px solid #EDD3BE; color: #8E3B27 !important; }
.pcard.sky { background: #E3E8F8; border: 2px solid #CCD4F1; color: #2F3C9E !important; }
.pcard.sage { background: #E1EEE6; border: 2px solid #C2DCCD; color: #2F6B54 !important; }
.pover { margin: 12px 22px 0; padding: 14px 16px; display: flex; align-items: center; gap: 16px; }
.pstack { position: relative; width: 96px; height: 96px; flex-shrink: 0; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--nl); }
.pstack .nhy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 74px; line-height: 1; mix-blend-mode: multiply; }
.pstack .pl0 { color: #E0745A; } .pstack .pl1 { color: #5B6BE0; } .pstack .pl2 { color: #4E9C7E; }
.ptip { display: flex; flex-direction: column; gap: 6px; } .ptip .mut { font-size: 12px; line-height: 16px; } .ptip b { font-size: 15px; line-height: 21px; font-weight: 700; }
.pcount { margin: 10px 22px 0; display: flex; gap: 4px; } .pcount i { flex: 1; height: 6px; border-radius: 3px; background: var(--nl2); } .pcount i.done { background: var(--ngreen); } .pcount i.cur { background: var(--nk); }
.cz.pz { color: var(--nk) !important; } .cz.pz .nhy { font-size: 38px; line-height: 1; } .cz.pz b { font-size: 14px; }
.cz.pz.left { background: #F6E6D8; border: 2px solid #EDD3BE; border-left: none; color: #8E3B27 !important; }
.cz.pz.right { background: #E3E8F8; border: 2px solid #CCD4F1; border-right: none; color: #2F3C9E !important; }
.p3 { margin: 0 22px 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.p3b { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; color: var(--nk) !important; } .p3b .nhy { font-size: 40px; line-height: 1.1; } .p3b b { font-size: 14px; }
.p3b.ok { border-color: var(--ngreen); background: #E3EFE9; } .p3b.bad { border-color: var(--nred); background: #F6E2DC; }
.chint.pwrong { display: block; text-align: left; color: var(--nk); background: #FFFFFF; border: 1px solid var(--nl); border-radius: 16px; margin: 0 22px 14px; padding: 12px 14px; font-size: 14px; line-height: 20px; }
.ptipbox { margin: 14px 22px 0; padding: 14px 16px; } .ptipbox p { margin: 0; font-size: 15px; line-height: 21px; font-weight: 600; } .ptipbox p + p { margin-top: 8px; }
.plist { margin: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.prow { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; text-align: left; color: var(--nk) !important; }
.prow .nhy { font-size: 28px; line-height: 1.15; } .prow small { font-size: 13px; color: var(--nm); font-weight: 600; }
.prow.lock { opacity: .55; } .pflag { position: absolute; right: 14px; top: 14px; font-style: normal; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: #F6E2DC; color: #A8472F; }
/* кнопка тренажёра на схеме */
.pairbtn { margin-top: 12px; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; border: none; background: rgba(255,255,255,.14); color: inherit; text-align: left; font: inherit; cursor: pointer; }
.pairbtn .pbl .hy { font-size: 24px; } .pairbtn b { display: block; font-weight: 800; font-size: 15px; } .pairbtn small { display: block; font-size: 12px; opacity: .85; } .pairbtn .pba { margin-left: auto; font-size: 22px; font-weight: 800; }
.ntitle h1 .nhy { font-weight: 800; } .ptip b .nhy, .ptipbox .nhy, .chint .nhy { font-weight: 800; }

/* дополнительные армянские шрифты (Noto, SIL OFL) — для разнообразия начертаний */
@font-face { font-family: LASerifC; src: url(fonts/NotoSerifArmenian-Cond700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: LASans; src: url(fonts/NotoSansArmenian-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: LASans5; src: url(fonts/NotoSansArmenian-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: LASansC; src: url(fonts/NotoSansArmenian-Cond700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
.ocard.open .nhy.ob { font-size: 46px; white-space: nowrap; } .ocards.n4 .ocard.open .nhy.ob { font-size: 32px; }
.ocard.open .nhy.ob.dg { font-size: 30px; } .ocards.n4 .ocard.open .nhy.ob.dg { font-size: 22px; }