:root{--font: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--accent: #5b7cff;--accent-ink: color-mix(in srgb, var(--accent) 62%, #14143a);--bg-1: #eaf2ff;--bg-2: #fef0ff;--card: #ffffff;--ink: #2b2d42;--ink-soft: #6b6f8a;--good: #3ec46d;--good-ink: #1f7a44;--warn: #ff9f43;--bad: #ff6b6b;--r-sm: 14px;--r-md: 22px;--r-lg: 34px;--shadow: 0 10px 30px rgba(40, 50, 90, .16);--shadow-sm: 0 4px 14px rgba(40, 50, 90, .14)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--ink);background:var(--bg-1);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#root{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;overscroll-behavior:none}button{font-family:inherit;cursor:pointer;border:none;background:none}.app{min-height:100%;min-height:100dvh;background:radial-gradient(1200px 800px at 10% -10%,var(--bg-2),transparent 60%),radial-gradient(1000px 700px at 110% 10%,#e8fff3,transparent 55%),linear-gradient(180deg,var(--bg-1),#ffffff);display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.screen{flex:1;width:100%;max-width:820px;margin:0 auto;padding:18px clamp(16px,4vw,32px) 28px;display:flex;flex-direction:column;gap:clamp(16px,3vh,26px)}.stack{display:flex;flex-direction:column;gap:16px}.row{display:flex;gap:14px;align-items:center}.row--wrap{flex-wrap:wrap}.center{align-items:center;justify-content:center;text-align:center}.grow,.spacer{flex:1}.topbar{display:flex;align-items:center;gap:12px}.topbar h1{font-size:clamp(20px,3.4vw,28px);margin:0;font-weight:700}.icon-btn{width:56px;height:56px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-sm);font-size:26px;display:grid;place-items:center;transition:transform .12s ease}.icon-btn:active{transform:scale(.92)}.btn{font-weight:600;font-size:clamp(18px,2.6vw,22px);color:var(--ink);background:var(--card);border-radius:var(--r-md);padding:16px 22px;box-shadow:var(--shadow-sm);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;display:inline-flex;align-items:center;justify-content:center;gap:10px}.btn:active{transform:translateY(2px) scale(.98);box-shadow:var(--shadow-sm)}.btn:disabled{opacity:.45;filter:grayscale(.4)}.btn--accent{color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,white),var(--accent));box-shadow:0 8px color-mix(in srgb,var(--accent) 60%,black),var(--shadow)}.btn--accent:active{transform:translateY(6px);box-shadow:0 2px color-mix(in srgb,var(--accent) 60%,black)}.btn--good{color:#fff;background:linear-gradient(180deg,#54d684,var(--good));box-shadow:0 8px 0 var(--good-ink),var(--shadow)}.btn--good:active{transform:translateY(6px);box-shadow:0 2px 0 var(--good-ink)}.btn--big{font-size:clamp(22px,3.4vw,30px);padding:22px 28px;border-radius:var(--r-lg);width:100%}.btn--ghost{background:transparent;box-shadow:none;color:var(--ink-soft)}.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(18px,4vw,30px)}.title{font-size:clamp(26px,5vw,40px);font-weight:700;margin:0}.subtitle{font-size:clamp(16px,2.6vw,20px);color:var(--ink-soft);margin:0;font-weight:500}.avatar{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:44px;background:color-mix(in srgb,var(--accent) 18%,white);box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--accent) 45%,white)}.avatar--xl{width:124px;height:124px;font-size:66px}.avatar--sm{width:52px;height:52px;font-size:28px}.profile-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);transition:transform .12s ease}.profile-card:active{transform:scale(.96)}.profile-card .name{font-size:clamp(22px,4vw,30px);font-weight:700}.word-hero{font-weight:700;letter-spacing:.04em;font-size:clamp(64px,18vw,150px);line-height:1.02;text-transform:uppercase;color:var(--accent-ink);text-shadow:0 6px 0 color-mix(in srgb,var(--accent) 26%,white)}.word-hero .ch{display:inline-block;font:inherit;color:inherit;background:none;padding:0 .04em;border-radius:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.word-hero .ch:active{background:color-mix(in srgb,var(--accent) 16%,transparent)}.emoji-xl{font-size:clamp(70px,16vw,130px);line-height:1}.emoji-lg{font-size:clamp(44px,9vw,72px);line-height:1}.tile{--size: clamp(54px, 13vw, 84px);width:var(--size);height:var(--size);border-radius:var(--r-md);background:linear-gradient(180deg,#fff,#fff4fb);box-shadow:0 6px #e6c9dd,var(--shadow-sm);font-size:calc(var(--size) * .5);font-weight:700;text-transform:uppercase;display:grid;place-items:center;color:var(--accent-ink);transition:transform .1s ease,box-shadow .1s ease;touch-action:none}.tile:active{transform:translateY(3px);box-shadow:0 3px #e6c9dd}.tile--selected{box-shadow:0 0 0 4px var(--accent),0 6px #e6c9dd;transform:translateY(-2px) scale(1.04)}.tile--dragging{opacity:.35}.tile--ghost{position:fixed;z-index:50;pointer-events:none;margin:0;transform:translate(-50%,-50%) scale(1.12);box-shadow:0 14px 24px #00000038}.tile--used{opacity:0;pointer-events:none}.slot{--size: clamp(54px, 13vw, 84px);width:var(--size);height:var(--size);border-radius:var(--r-md);border:4px dashed color-mix(in srgb,var(--accent) 40%,#cfd6ff);background:color-mix(in srgb,var(--accent) 7%,white);display:grid;place-items:center;font-size:calc(var(--size) * .5);font-weight:700;text-transform:uppercase;color:var(--accent-ink);transition:transform .12s ease,background .12s ease,border-color .12s ease}.slot--over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,white);transform:scale(1.06)}.slot--filled{border-style:solid;background:#fff;box-shadow:var(--shadow-sm)}.slot--correct{border-color:var(--good);background:color-mix(in srgb,var(--good) 16%,white);color:var(--good-ink)}.tile-tray,.slot-row{display:flex;flex-wrap:wrap;gap:clamp(8px,2vw,14px);justify-content:center}.bubble{position:absolute;width:clamp(62px,16vw,96px);height:clamp(62px,16vw,96px);border-radius:50%;display:grid;place-items:center;font-size:clamp(26px,7vw,44px);font-weight:700;text-transform:uppercase;color:#fff;box-shadow:inset 0 -8px 12px #0000001f,inset 0 8px 14px #ffffff80,var(--shadow-sm);transition:transform .1s ease;touch-action:manipulation}.bubble:active{transform:scale(.9)}.pop-stage{position:relative;flex:1;min-height:46vh;border-radius:var(--r-lg);background:color-mix(in srgb,var(--accent) 8%,white);overflow:hidden}.sentence{font-size:clamp(26px,5.2vw,40px);font-weight:600;line-height:1.5;text-align:center}.sentence .blank{display:inline-flex;gap:8px;vertical-align:middle;margin:0 6px}.sent-word{cursor:pointer;border-radius:8px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.sent-word:active{background:color-mix(in srgb,var(--accent) 16%,transparent)}.pill{display:inline-flex;align-items:center;gap:8px;background:var(--card);border-radius:999px;padding:10px 18px;font-weight:600;font-size:clamp(16px,2.4vw,20px);box-shadow:var(--shadow-sm)}.star-count{color:#f4b400}.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:12px}.sticker{aspect-ratio:1;border-radius:var(--r-md);background:color-mix(in srgb,var(--accent) 10%,white);display:grid;place-items:center;font-size:40px;box-shadow:var(--shadow-sm)}.sticker--empty{opacity:.35;filter:grayscale(1);font-size:28px}.field{display:flex;flex-direction:column;gap:8px}.field label{font-weight:600;color:var(--ink-soft)}.input{font-family:inherit;font-size:20px;padding:14px 16px;border-radius:var(--r-md);border:2px solid #e3e6f5;background:#fff;color:var(--ink)}.input:focus{outline:none;border-color:var(--accent)}.chip-row{display:flex;flex-wrap:wrap;gap:10px}.chip{padding:12px 16px;border-radius:999px;background:var(--card);box-shadow:var(--shadow-sm);font-weight:600}.chip--on{background:var(--accent);color:#fff}.emoji-pick{font-size:30px;width:56px;height:56px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-sm);display:grid;place-items:center}.emoji-pick--on{box-shadow:0 0 0 4px var(--accent),var(--shadow-sm)}.celebrate-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:grid;place-items:center;background:#14183c47;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.celebrate-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:34px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:86vw}.muted{color:var(--ink-soft)}.hidden{display:none!important}.tap-area{-webkit-tap-highlight-color:transparent}@keyframes wiggle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.float{animation:floaty 3s ease-in-out infinite}.word-model{font-size:clamp(40px,11vw,86px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 32%,#b9bfe0)}.slot--wrong{animation:shake .4s;border-color:var(--bad)!important}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-9px)}40%,80%{transform:translate(9px)}}.game-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px;width:100%}.game-tile{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px 4px;min-height:86px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow);font-weight:700;font-size:clamp(11px,1.5vw,15px);line-height:1.15;text-align:center;color:var(--ink);transition:transform .12s ease}.game-tile:active{transform:scale(.95)}.game-tile .ge{font-size:clamp(26px,4vw,38px)}.game-tile--done{box-shadow:0 0 0 3px var(--good),var(--shadow)}.choices{display:grid;gap:14px}.choice{font-size:clamp(28px,6vw,44px);font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:22px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow);color:var(--accent-ink);transition:transform .12s ease}.choice:active{transform:scale(.96)}.choice--wrong{animation:shake .4s}.choice--right{background:color-mix(in srgb,var(--good) 18%,white);color:var(--good-ink)}.progress-letters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.progress-letters .pl{width:clamp(34px,9vw,50px);height:clamp(42px,11vw,60px);border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:clamp(22px,5vw,32px);text-transform:uppercase;background:#fff;box-shadow:var(--shadow-sm);color:var(--accent-ink)}.progress-letters .pl--todo{background:color-mix(in srgb,var(--accent) 9%,#eef);color:transparent}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}.word-grid button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-sm);font-weight:700;color:var(--ink)}.word-grid button.on{box-shadow:0 0 0 3px var(--accent),var(--shadow-sm)}.word-grid .we{font-size:30px}.section-title{font-size:clamp(18px,3vw,22px);font-weight:700;margin:0 0 6px}.modal-overlay{position:fixed;left:0;top:var(--vv-top, 0px);width:100%;height:var(--vvh, 100%);z-index:70;display:grid;place-items:center;padding:14px;background:#14183c6b;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow:auto}.modal-card{position:relative;width:100%;max-width:460px;max-height:calc(var(--vvh, 100dvh) - 24px);overflow:auto;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(18px,4vw,26px);display:flex;flex-direction:column;gap:14px}.modal-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:#eef0f7;color:var(--ink-soft);font-size:18px;font-weight:700;display:grid;place-items:center;z-index:2}.modal-close:active{transform:scale(.9)}.reader-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.reader-chip{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,white);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,white),var(--shadow-sm);font-weight:600}.reader-chip:active{transform:scale(.96)}.date-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;-webkit-overflow-scrolling:touch}.date-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:78px;padding:10px 12px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-sm);font-weight:600;font-size:13px;color:var(--ink-soft)}.date-chip .we{font-size:26px;line-height:1.1}.date-chip .we--empty{opacity:.3}.date-chip--on{box-shadow:0 0 0 3px var(--accent),var(--shadow-sm);color:var(--accent-ink)}.past-list{display:flex;flex-direction:column;gap:8px}.past-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-md);background:color-mix(in srgb,var(--accent) 6%,white)}.past-row .we{font-size:26px}.past-row .pw{font-weight:700;letter-spacing:.04em}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.05ms!important}}