:root{--bg: #fef6e4;--bg-accent: #ffd6e0;--ink: #2b2140;--ink-soft: #6b5f85;--card: #fff;--brand: #7c5cff;--brand-strong: #5b3ce0;--accent: #ff8a5c;--ok: #1f9d6b;--warn: #c2410c;--radius: 20px;--radius-lg: 32px;--shadow: 0 10px 30px rgb(43 33 64 / 12%);--shadow-soft: 0 4px 12px rgb(43 33 64 / 8%);font-family:"Baloo 2",Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}button,input,select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.emoji{display:inline-block;width:1em;height:1em;vertical-align:-.125em}[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 rgb(255 255 255 / 70%)}.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}.hint-narrow{display:none}.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(11,minmax(0,1fr));gap:clamp(.4rem,1.2vw,.75rem);width:100%}.character-grid{display:flex;flex-direction:column;gap:clamp(.4rem,1.2vw,.75rem)}.tile{position:relative;aspect-ratio:1;border:none;border-radius:25%;font:inherit;font-size:clamp(1.1rem,3vw,1.6rem);font-weight:800;color:#fff;cursor:pointer;box-shadow:var(--shadow-soft);-webkit-tap-highlight-color:transparent;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}@media(hover:hover){.tile:hover{transform:translateY(-3px) scale(1.04);filter:brightness(1.05)}}.tile:active{transform:scale(.94)}.tile.is-pressed{animation:tile-press .24s ease}@keyframes tile-press{50%{transform:scale(.88)}}.tile:focus-visible,.mode-tab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.tile:focus:not(:focus-visible){outline:none}.word-tiles{--word-tile: clamp(2.4rem, 8.8vw, 4rem);--word-gap: clamp(.15rem, .8vw, .4rem);display:flex;flex-wrap:wrap;align-items:center;place-content:flex-start flex-start;width:100%;gap:var(--word-gap);min-height:calc(var(--word-tile) * 2 + var(--word-gap))}.word-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem}.word-action{display:inline-flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;font:inherit;font-size:1.6rem;line-height:1;padding:0;border:none;border-radius:50%;color:var(--brand-strong);background:#7c5cff1f;cursor:pointer;transition:transform .15s ease,background .15s ease,opacity .15s ease}.word-action:disabled{opacity:.4;cursor:default}.word-action svg{display:block;width:1.5rem;height:1.5rem}.word-action:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.word-action:hover:not(:disabled){background:#7c5cff33;transform:translateY(-2px)}.word-action:active:not(:disabled){transform:scale(.94)}.word-action-primary{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-strong));box-shadow:0 8px 18px #5b3ce059}.word-action-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--brand),var(--brand-strong));filter:brightness(1.05)}.word-tile{display:grid;place-items:center;flex:0 0 auto;width:var(--word-tile);height:var(--word-tile);border:1px solid #e9e3f8;border-radius:12px;background:#f5f2fc;font-size:clamp(1.2rem,4vw,2rem);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(.7rem,2vw,1rem);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 rgb(43 33 64 / 15%))}.guess-emoji{padding:0;border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease}.guess-emoji:active{transform:scale(.92)}.guess-emoji:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:16px}.train-tiles{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(.15rem,.8vw,.4rem)}.train-tile{display:grid;place-items:center;width:clamp(2.4rem,8.8vw,4rem);height:clamp(2.4rem,8.8vw,4rem);border:1px solid #e9e3f8;border-radius:12px;background:#f5f2fc;color:var(--brand-strong);font-size:clamp(1.2rem,4vw,2rem);font-weight:800;text-transform:uppercase;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}.train-tile.is-target{border-color:transparent;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{border-color:transparent;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-wrong{border-color:transparent;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{border-color:transparent;background:linear-gradient(135deg,#34d17f,var(--ok));color:#fff}@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}.word-tiles.is-recognized .word-tile{border-color:transparent;background:linear-gradient(135deg,#34d17f,var(--ok));color:#fff}.word-suggestions{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:.4rem;min-height:2rem;overflow:hidden}.word-suggestion{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;gap:.35rem;font:inherit;font-weight:800;font-size:clamp(.75rem,2vw,.95rem);padding:.25rem .6rem;border:none;border-radius:999px;color:var(--brand-strong);background:#7c5cff1f;cursor:pointer;animation:pop .25s ease}.word-suggestion-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.word-suggestion:hover{background:#7c5cff38;transform:translateY(-2px)}.word-suggestion:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.word-suggestion-emoji{font-size:1.3em;line-height:1}.word-nudge{max-width:100%;margin:0;overflow:hidden;color:var(--ink-soft);font-size:1rem;text-align:center;text-overflow:ellipsis;white-space:nowrap}.app-footer{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;color:var(--ink-soft);font-size:.95rem}.footer-bar{display:flex;align-items:center;justify-content:center;gap:.75rem}.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)}.setting-note{margin:0;font-size:.85rem;font-weight:500;line-height:1.35;text-align:left;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)}.footer-legal{color:var(--ink-soft);font-weight:700;font-size:.9rem;text-decoration:none}.footer-legal:hover{color:var(--brand-strong);text-decoration:underline}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-title{display:none}.app-header{flex-direction:column;align-items:stretch}.header-right{align-items:stretch;width:100%}.tab-hint,.hint-wide{display:none}.hint-narrow{display:inline}.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;gap:.6rem}.stage{flex:none;height:clamp(190px,32vh,300px);min-height:0;container-type:normal;padding:.5rem;overflow:hidden auto;justify-content:center;justify-content:safe center}.stage.is-words{position:relative;height:calc(clamp(190px,32vh,300px) - 6.45rem);justify-content:flex-start}.word-tiles{padding:.35rem .3rem;max-height:calc(var(--word-tile) * 2 + var(--word-gap) + .7rem);overflow:hidden auto}.letter-upper{font-size:min(16vh,40vw)}.letter-lower{font-size:min(6vh,15vw)}.word-emoji{font-size:min(11vh,28vw)}.train-display{gap:clamp(.5rem,1.5vh,.9rem)}.tile-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:.125rem;width:calc(100% + 1.8rem);margin-inline:-.9rem}.tile{font-size:clamp(1.1rem,5vw,1.5rem)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}