:root{--bg: #fef6e4;--bg-accent: #ffd6e0;--ink: #2b2140;--ink-soft: #6b5f85;--card: #ffffff;--brand: #7c5cff;--brand-strong: #5b3ce0;--accent: #ff8a5c;--ok: #1f9d6b;--warn: #c2410c;--radius: 20px;--radius-lg: 32px;--shadow: 0 10px 30px rgba(43, 33, 64, .12);--shadow-soft: 0 4px 12px rgba(43, 33, 64, .08);font-family:"Baloo 2",Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;min-height:100%}body{color:var(--ink);background:radial-gradient(circle at 15% 15%,var(--bg-accent) 0%,transparent 45%),radial-gradient(circle at 85% 20%,#cdeafe 0%,transparent 40%),radial-gradient(circle at 50% 100%,#d8f5e3 0%,transparent 55%),var(--bg);background-attachment:fixed}#app{max-width:1080px;margin:0 auto;padding:clamp(1rem,3vw,2.5rem);display:flex;flex-direction:column;gap:1.25rem;height:100dvh}.app-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}.app-title{margin:0;font-size:clamp(1.8rem,5vw,2.75rem);font-weight:800;letter-spacing:.02em;color:var(--brand-strong);text-shadow:2px 2px 0 rgba(255,255,255,.7)}.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}.tab-hint{color:var(--ink-soft);font-size:.85rem}.mode-tabs{display:flex;gap:.5rem;background:#ffffffb3;padding:.35rem;border-radius:999px;box-shadow:var(--shadow-soft)}.mode-tab{border:none;background:transparent;color:var(--ink-soft);font:inherit;font-weight:700;padding:.55rem 1.25rem;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}.mode-tab:hover{color:var(--ink)}.mode-tab[aria-selected=true]{background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:#fff;box-shadow:0 6px 16px #5b3ce059}.app-main{flex:1;min-height:0;display:flex;flex-direction:column;gap:1.25rem}.app-main:focus,.app-main:focus-visible{outline:none}.hint-area{min-height:1.6em}.word-hint{margin:0;text-align:center;color:var(--ink-soft);font-size:1rem}.stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1rem;overflow:hidden;container-type:size}.letter-display{display:flex;align-items:baseline;justify-content:center;gap:clamp(.5rem,3vw,1.5rem);line-height:1}.letter-upper{font-size:min(80cqh,62cqw);font-weight:800;color:var(--brand-strong);animation:pop .35s ease}.letter-lower{font-size:min(28cqh,24cqw);font-weight:700;color:var(--accent);animation:pop .35s ease .05s both}.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:clamp(.4rem,1.2vw,.75rem)}.character-grid{display:flex;flex-direction:column;gap:clamp(.4rem,1.2vw,.75rem)}.tile-grid.digit-grid{grid-template-columns:repeat(10,minmax(0,1fr));width:100%;max-width:640px}.tile{position:relative;aspect-ratio:1;border:none;border-radius:var(--radius);font:inherit;font-size:clamp(1.1rem,3vw,1.6rem);font-weight:800;color:#fff;cursor:pointer;box-shadow:var(--shadow-soft);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}.tile:hover{transform:translateY(-3px) scale(1.04);filter:brightness(1.05)}.tile:active{transform:translateY(0) scale(.96);box-shadow:0 2px 6px #2b214033}.tile.is-active{transform:translateY(-3px) scale(1.08);box-shadow:0 0 0 4px #fff,0 0 0 8px var(--brand),var(--shadow);z-index:1}.tile.is-pressed{animation:tile-press .4s ease}@keyframes tile-press{0%{transform:scale(1)}30%{transform:scale(.8)}65%{transform:scale(1.15);box-shadow:0 0 0 6px #fff,0 0 0 12px #7c5cff99}to{transform:scale(1)}}.tile:focus-visible,.mode-tab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.word-tiles{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(.4rem,1.5vw,.9rem);min-height:4rem}.word-tiles:empty:after{content:"Pisz na klawiaturze…";color:var(--ink-soft);font-size:1.1rem}.word-actions{display:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin-top:clamp(.6rem,2vh,1rem)}.word-action{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-weight:800;font-size:1rem;padding:.6rem 1.1rem;border:none;border-radius:999px;color:var(--brand-strong);background:#7c5cff1f;cursor:pointer}.word-action:hover{background:#7c5cff33}.word-action-primary{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-strong));box-shadow:0 8px 18px #5b3ce059}.word-action-primary:hover{background:linear-gradient(135deg,var(--brand),var(--brand-strong));filter:brightness(1.05)}.word-action kbd{color:var(--ink);background:#fff;border-radius:6px;padding:.05rem .4rem;box-shadow:0 2px #2b214026}.word-action:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.word-tile{display:grid;place-items:center;width:clamp(3rem,11vw,5rem);height:clamp(3rem,11vw,5rem);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-soft);font-size:clamp(1.5rem,5vw,2.5rem);font-weight:800;text-transform:uppercase;color:var(--brand-strong);transition:transform .2s ease,background .2s ease,color .2s ease}.word-tile.word-space{width:clamp(1rem,3vw,1.5rem);background:transparent;box-shadow:none}.train-display{display:flex;flex-direction:column;align-items:center;gap:clamp(1rem,3vh,1.75rem)}.word-emoji{font-size:min(28cqh,30cqw);line-height:1;filter:drop-shadow(0 6px 12px rgba(43,33,64,.15))}.train-tiles{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(.4rem,1.5vw,.9rem)}.train-tile{display:grid;place-items:center;width:clamp(3rem,11vw,5rem);height:clamp(3rem,11vw,5rem);border-radius:var(--radius);font-size:clamp(1.5rem,5vw,2.5rem);font-weight:800;text-transform:uppercase;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}.train-tile.is-done{background:linear-gradient(135deg,#34d17f,var(--ok));color:#fff;box-shadow:0 6px 14px #1f9d6b59}.train-tile.is-target{background:linear-gradient(135deg,var(--accent),#ff6b6b);color:transparent;box-shadow:0 8px 18px #2b214040;animation:train-pulse 1.3s ease-in-out infinite}.train-tile.is-done.is-pop{animation:train-pop .4s ease}.train-tile.is-next{background:linear-gradient(135deg,var(--accent),#ff6b6b);color:#fff;box-shadow:0 8px 18px #2b214040;animation:train-pulse 1.3s ease-in-out infinite}.train-tile.is-blank{background:transparent;border:3px dashed #d9d2ee;color:transparent}.train-tile.is-wrong{background:linear-gradient(135deg,#ff5a5a,#d90429);color:#fff;box-shadow:0 8px 18px #d9042966;animation:train-shake .4s ease}.train-tiles.is-success{animation:train-success .6s ease}.train-tiles.is-success .train-tile{box-shadow:0 0 0 5px #1f9d6b40,0 6px 14px #1f9d6b59}.train-next{display:inline-flex;align-items:center;gap:.6rem;font:inherit;font-weight:800;font-size:clamp(1rem,2.5vw,1.25rem);padding:.8rem 1.6rem;border:none;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-strong));cursor:pointer;box-shadow:0 10px 22px #5b3ce059;animation:pop .3s ease}.train-next kbd{color:var(--ink);background:#fff;border-radius:8px;padding:.15rem .6rem;box-shadow:0 3px #2b214040}.train-next:hover{transform:translateY(-2px)}.train-next:focus-visible{outline:3px solid var(--ink);outline-offset:3px}@keyframes train-pop{0%{transform:scale(1)}45%{transform:scale(1.28)}to{transform:scale(1)}}@keyframes train-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes train-success{0%{transform:scale(1)}40%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes train-pulse{0%,to{transform:scale(1.04)}50%{transform:scale(1.12)}}.word-tile.is-highlight{background:linear-gradient(135deg,var(--accent),#ff6b6b);color:#fff;transform:scale(1.12)}.word-tile.is-unsupported{color:var(--ink-soft);background:#f1eef8}.app-footer{display:flex;flex-direction:column;gap:.4rem;text-align:center;color:var(--ink-soft);font-size:.95rem}.settings{display:flex;flex-direction:column;align-items:center;gap:.5rem}.settings-toggle{display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-weight:700;font-size:.9rem;padding:.4rem 1rem;border:none;border-radius:999px;background:#7c5cff1f;color:var(--brand-strong);cursor:pointer}.settings-toggle .cog{flex-shrink:0}.settings-toggle:hover{background:#7c5cff33}.settings-toggle:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.settings-panel{display:flex;flex-direction:column;gap:.6rem;width:min(440px,100%);padding:1rem 1.25rem;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);animation:pop .2s ease}.setting{display:grid;grid-template-columns:7rem 1fr 3rem;align-items:center;gap:.75rem;font-size:.95rem;font-weight:700;color:var(--ink)}.setting input[type=range]{width:100%;accent-color:var(--brand)}.setting output{text-align:right;color:var(--ink-soft);font-variant-numeric:tabular-nums}.settings-heading{margin:0;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}.settings-divider{width:100%;border:none;border-top:1px solid #ece7f7;margin:.15rem 0}.setting-row{grid-template-columns:1fr auto}.setting-row input[type=checkbox]{width:1.3rem;height:1.3rem;accent-color:var(--brand);cursor:pointer}.setting-row select{font:inherit;font-weight:700;padding:.35rem .6rem;border:2px solid #d9d2ee;border-radius:10px;background:#fff;color:var(--brand-strong);cursor:pointer}.setting-row select:focus-visible,.setting-row input[type=checkbox]:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.voice-status{margin:0;font-weight:700}.voice-status[data-status=ready]{color:var(--ok)}.voice-status[data-status=downloading]{color:var(--brand-strong)}.voice-status[data-status=error]{color:var(--warn)}kbd{font-family:inherit;font-weight:700;background:#fff;border-radius:6px;padding:.05rem .4rem;box-shadow:0 2px #2b214026}@keyframes pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@media(max-width:640px){#app{height:auto;min-height:100dvh;padding:.9rem .9rem 1.4rem;gap:.9rem}.app-header{flex-direction:column;align-items:stretch}.header-right{align-items:stretch;width:100%}.tab-hint{display:none}.mode-tabs{width:100%;gap:.25rem;padding:.25rem}.mode-tab{flex:1 1 0;min-width:0;padding:.5rem .3rem;font-size:.78rem;line-height:1.1}.app-main{flex:none}.stage{flex:none;min-height:clamp(120px,18vh,200px);container-type:normal;padding:.75rem}.letter-upper{font-size:min(16vh,40vw)}.letter-lower{font-size:min(6vh,15vw)}.word-emoji{font-size:min(14vh,36vw)}.tile-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:.4rem}.tile-grid.digit-grid{gap:.3rem}.tile{font-size:clamp(1.1rem,5vw,1.5rem)}.word-actions{display:flex}.word-action kbd{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}