:root{--ink:#20304a;--sub:#7d8a9c;--teal:#0eaa9b;--teal-deep:#087e79;--orange:#fb9868;--bg:#f7f8fc;--panel:#fff;--border:#e8edf2;--shadow:0 22px 65px rgba(35,57,93,.055);--gap:12px;--tile:96px;--tile-font:48px;--radius:26px}
*{box-sizing:border-box}
html{height:100%;overflow:hidden;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;min-width:320px;-webkit-tap-highlight-color:transparent;font-family:ui-rounded,"SF Pro Rounded","Avenir Next",Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}
button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #55c9bb;outline-offset:4px}button:disabled{opacity:.5;cursor:not-allowed}svg{display:block}[x-cloak]{display:none!important}

/* ---------- каркас: приложение всегда во весь экран, без скроллов ---------- */
.app-shell{height:100vh;height:100dvh;width:100%;display:grid;grid-template-rows:auto minmax(0,1fr);padding:0 14px;overscroll-behavior:none}
.app-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e8ecf2;min-height:0}
.app-main{min-height:0;display:flex;padding-bottom:14px}

.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}.brand-icon{position:relative;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,#13c6ae,#16a4a5);box-shadow:0 7px 15px #11b4a42e;display:grid;place-items:center;color:#fff;font-weight:900;font-size:26px;line-height:1}.brand-icon span:first-child{transform:translateY(-2px)}.brand-dot{position:absolute;width:9px;height:9px;bottom:9px;right:9px;border:2px solid white;background:#ffc16f;border-radius:50%}.brand-text strong{font-size:20px;font-weight:850;letter-spacing:-1px}.brand-period{color:#15bbaa}
.result-inline{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-width:0;overflow:hidden}.syllable-inline{font-size:32px;color:#167c79;font-weight:900;letter-spacing:1px;line-height:1;flex:0 0 auto}.syllable-inline.is-empty{color:#c8d2dc}
.header-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.sound-chip{display:flex;align-items:center;gap:7px;height:41px;padding:0 13px;border-radius:13px;border:1px solid #e6eaf0;background:#fff;color:#647489;font-size:11px;font-weight:800;letter-spacing:.2px;transition:.15s}.sound-chip:hover{border-color:#b9e3dc;color:#0e8d84}.chip-dot{width:8px;height:8px;border-radius:50%;background:#c3ccd6;box-shadow:0 0 0 3px #eef1f4;flex:0 0 auto}.sound-chip.is-on{color:#0e8d84;border-color:#c3e9e3;background:#f4fbfa}.sound-chip.is-on .chip-dot{background:#2bc4b0;box-shadow:0 0 0 3px #d8f3ee}.sound-chip.is-off{color:#b07a52;border-color:#f0ddcd;background:#fff8f2}.sound-chip.is-off .chip-dot{background:#f0a06a;box-shadow:0 0 0 3px #fbe6d6}
.header-menu{position:relative}.menu-button{height:41px;min-width:41px;padding:0;display:grid;place-items:center;border:1px solid #e6eaf0;background:#fff;border-radius:13px;color:#647489;transition:.15s}.menu-button:hover{border-color:#b9e3dc;color:#0e8d84}.menu-button[aria-expanded="true"]{background:#f4fbfa;border-color:#c3e9e3;color:#0e8d84}.burger{display:block;width:18px}.burger i{display:block;height:2px;border-radius:2px;background:currentColor}.burger i+i{margin-top:4px}
.menu-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:40;width:min(320px,calc(100vw - 24px));max-height:calc(100dvh - 96px);overflow:auto;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 26px 64px #1b2f4a26;padding:16px;display:flex;flex-direction:column;gap:13px}.menu-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.menu-label{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#8a99a8}.language-switch{display:flex;padding:4px;border-radius:14px;background:#ecf1f5;gap:3px}.language-switch button{border:0;background:transparent;border-radius:11px;color:#78889a;font-size:12px;font-weight:800;padding:9px 12px;transition:.15s}.language-switch button.active{background:#fff;color:var(--teal-deep);box-shadow:0 3px 11px #20304a15}.volume{width:140px;accent-color:var(--teal)}.connect-chip{display:flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:12px;border:1px solid #e6eaf0;background:#fff;color:#647489;font-size:11px;font-weight:800;letter-spacing:.2px;transition:.15s}.connect-chip:hover{border-color:#b9e3dc;color:#0e8d84}.connect-chip.is-on{color:#0e8d84;border-color:#c3e9e3;background:#f4fbfa}.connect-chip.is-on .chip-dot{background:#2bc4b0;box-shadow:0 0 0 3px #d8f3ee}.connect-chip.is-off{color:#b07a52;border-color:#f0ddcd;background:#fff8f2}.connect-chip.is-off .chip-dot{background:#f0a06a;box-shadow:0 0 0 3px #fbe6d6}
.menu-select{height:38px;max-width:190px;padding:0 10px;border-radius:12px;border:1px solid #e6eaf0;background:#fff;color:#647489;font-size:11px;font-weight:800;letter-spacing:.2px}.menu-select:hover{border-color:#b9e3dc;color:#0e8d84}.menu-check{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#6f868d;cursor:pointer}.menu-check input{width:17px;height:17px;accent-color:var(--teal)}
.menu-note{margin:0;display:flex;flex-direction:column;gap:3px;font-size:11px;line-height:1.5;color:#6f868d;background:#f6f8fa;border-radius:12px;padding:10px 12px}.menu-count{color:#93a3b0;font-size:10px}.menu-count b{color:#12998d}
.ghost-button{height:42px;border-radius:13px;padding:0 16px;font-size:12px;font-weight:800;display:flex;align-items:center;gap:8px;color:#628482;background:#fff;border:1px solid #d8e7e4}
.replay-button,.reset-button{height:41px;border-radius:13px;padding:0 13px;font-size:12px;font-weight:800;display:flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap}
.replay-button{background:#0bafa0;color:#fff;border:1px solid #0bafa0;box-shadow:0 8px 18px #0daf9e28}.replay-button:hover{background:#0a9d90;border-color:#0a9d90}.replay-button:disabled{background:#eef2f5;border-color:#e2e8ee;box-shadow:none;color:#a6b2bf}
.reset-button{background:#fff;color:#628482;border:1px solid #d8e7e4}.reset-button:hover{border-color:#b9e3dc;color:#0e8d84}
.replay-button svg,.reset-button svg{width:16px;height:16px;flex:0 0 auto}

/* ---------- доска букв: все буквы всегда в одном экране ---------- */
.alphabet-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px}
.alphabet-board{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:var(--gap);width:100%}
.letter-tile{flex:0 0 auto;width:var(--tile);height:var(--tile);border:1px solid #e9eef4;background:#f6f9fc;border-radius:20px;display:grid;place-items:center;min-width:0;font-size:var(--tile-font);line-height:1;font-weight:850;color:#3c4c66;box-shadow:0 4px 0 #e4ebf2;transition:background .16s,transform .12s,border-color .16s,color .16s;color-scheme:light;position:relative;z-index:1;touch-action:none}
.letter-tile:hover{background:#e9f6f4;border-color:#b4e6dd}.letter-tile:active{transform:translateY(3px);box-shadow:0 1px 0 #e4ebf2}.letter-tile.is-from{background:#c8f5ea;border:2px solid #1bb8a8;color:#048e81;box-shadow:0 5px 0 #a7e5d6}.letter-tile.is-to{background:#fff0dd;border:2px solid #ffa56d;color:#e77e42;box-shadow:0 5px 0 #ffdbb6}.letter-tile.is-hover{border:2px dashed #fa9b68;background:#fff4e8;transform:scale(1.04)}
/* Бухва, с которой нельзя составить слог, — приглушена. */
.letter-tile.is-blocked{opacity:.26;filter:saturate(.15)}
.letter-tile.is-shake{border-color:#ff9d71;background:#fff0dd;animation:shake .42s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.connection-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none}.connection-path{filter:drop-shadow(0 1px 2px #27ad9b42)}.line-tip{filter:drop-shadow(0 2px 3px #e7ad7842)}

/* ---------- окно подключения ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:50;background:#24384e7a;display:grid;place-items:center;padding:20px;backdrop-filter:blur(7px)}
.modal{background:white;border-radius:26px;padding:22px 26px;max-width:460px;width:100%;box-shadow:0 24px 80px #0b1a3247;position:relative;max-height:92dvh;overflow:auto}
.modal-close{position:absolute;top:14px;right:16px;border:0;background:#f3f6f8;border-radius:12px;height:33px;width:33px;color:#728192}.modal-emoji{font-size:28px}.modal h2{font-size:23px;margin:8px 0 8px}.modal p{font-size:14px;line-height:1.6;color:#627488}.modal p b,.modal p strong{color:#158f87}
.primary-button{border:0;background:#0eae9e;color:white;font-weight:800;padding:13px 18px;border-radius:14px;width:100%;margin-top:10px}
.modal-connect{max-width:560px}.modal-lead{font-size:13px!important;margin-top:0}.connect-form{display:flex;flex-direction:column;gap:9px;margin:12px 0 0}
.field{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:800;letter-spacing:.6px;color:#8a99a8;text-transform:uppercase}.field input,.field select{font:inherit;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:#20304a;border:1px solid #e4e9ef;background:#f9fbfc;border-radius:13px;padding:10px 12px;min-width:0;width:100%}
.field input:focus,.field select:focus{outline:3px solid #55c9bb;outline-offset:2px;background:#fff}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.voice-block{border:1px solid #e6ecf2;background:#fbfcfd;border-radius:18px;padding:10px 12px 11px;display:flex;flex-direction:column;gap:9px}
.voice-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.field-cap{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#8a99a8}
.link-button{border:1px solid #cfe7e3;background:#fff;color:#0e8d84;font-size:11px;font-weight:800;border-radius:11px;padding:7px 11px;transition:.15s}.link-button:hover{border-color:#8ed3c9;background:#f2fbf9}
.voice-select{font-size:13px;font-weight:600;color:#20304a;border:1px solid #e4e9ef;background:#f9fbfc;border-radius:13px;padding:9px 11px;width:100%;min-width:0}
.voice-select:focus{outline:3px solid #55c9bb;outline-offset:2px;background:#fff}
.voices-status{font-size:11px!important;line-height:1.5!important;color:#6f868d!important;margin:0!important}.voices-status.is-error{color:#bd5f36!important}.voices-status:empty{display:none}
.connect-status{font-size:12px!important;color:#bd5f36!important;background:#fff5ee;border-radius:12px;padding:11px 12px;margin:12px 0 0}.connect-status:empty{display:none}
.modal-actions{display:flex;gap:9px;align-items:center;margin-top:14px;flex-wrap:wrap}.modal-actions .primary-button{width:auto;margin-top:0;flex:1 1 auto}.modal-actions .ghost-button{background:#f6f8fa}.ghost-button.danger{color:#bd5f36;border-color:#f0ddd2;background:#fff7f2}

@media (max-width:760px){
  .app-shell{padding:0 10px}
  .alphabet-panel{padding:10px;border-radius:20px}
  .app-main{padding-bottom:10px}
  .modal{padding:22px 18px;border-radius:22px}
  .field-row{grid-template-columns:1fr}
}
@media (max-width:599px){
  .brand-text{display:none}
  .replay-button,.reset-button{width:38px;height:38px;padding:0;justify-content:center}
  .replay-button .btn-text,.reset-button .btn-text{display:none}
  .sound-chip{height:38px;padding:0 10px}.menu-button{height:38px;min-width:38px}
  .syllable-inline{font-size:26px}
  .letter-tile{border-radius:15px}
}
@media (max-width:380px){
  .syllable-inline{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}