.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px}.app--game{height:100vh;height:100dvh;max-height:100dvh;overflow:hidden;padding:12px;min-height:0}.app--game .top-bar{flex-shrink:0;padding:0 4px 8px}.app--game .game{flex:1;min-height:0;gap:8px}.app--game .game-main{flex:1;min-height:0;overflow:hidden;gap:clamp(16px,4vh,36px);padding:0;justify-content:center;position:relative}.app--game .syllable-display{flex-shrink:0;padding:18px 24px}.app--game .interaction{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:100%}.app--game .image-choice{--cell-max: clamp(80px, 22vh, 180px);grid-template-columns:repeat(3,minmax(0,var(--cell-max)));gap:14px;width:auto;justify-content:center;max-height:100%}.app--game .choice-emoji{font-size:clamp(40px,14vh,100px)}.app--game .feedback{position:absolute;top:8px;left:50%;transform:translate(-50%);z-index:10;font-size:16px;padding:6px 18px;pointer-events:none;white-space:nowrap;animation:none}.next-btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:clamp(20px,4vh,40px) clamp(36px,7vw,80px);border-radius:28px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;font-weight:800;font-size:clamp(28px,5vw,56px);letter-spacing:1px;box-shadow:0 12px 32px #e84a8259;transition:transform .15s,box-shadow .15s,filter .15s;min-height:clamp(90px,22vh,180px);min-width:clamp(200px,36vw,360px);cursor:pointer}.next-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 44px #e84a8273;filter:brightness(1.05)}.next-btn:active{transform:translateY(0) scale(.98)}.next-btn-arrow{font-size:1.3em;line-height:1}.next-btn-label{line-height:1}.top-bar{width:100%;max-width:900px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 4px 16px}.brand{font-size:22px;font-weight:800;color:var(--primary-dark);background:none;padding:4px 8px;border-radius:12px;transition:background .15s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.brand:hover{background:#ffffff80}.brand-icon{font-size:1em}.top-bar-actions{display:flex;align-items:center;gap:12px}.icon-btn{width:44px;height:44px;border-radius:999px;background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .15s,background .15s}.icon-btn:hover{background:#fff;transform:rotate(20deg)}.icon-btn--active{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff}.case-switch{display:inline-flex;background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:4px;box-shadow:var(--shadow);gap:2px}.case-option{border-radius:999px;padding:8px 18px;font-weight:800;font-size:18px;color:var(--text-soft);transition:background .15s,color .15s,transform .1s;min-width:56px}.case-option:hover{color:var(--text)}.case-option:active{transform:scale(.95)}.case-option.active{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:var(--shadow)}.btn{border-radius:999px;padding:14px 28px;font-weight:700;font-size:18px;transition:transform .15s,box-shadow .15s,background .15s;display:inline-flex;align-items:center;gap:8px}.btn:hover:not(:disabled){transform:translateY(-2px)}.btn:active:not(:disabled){transform:translateY(0)}.btn--primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:var(--shadow)}.btn--primary:hover:not(:disabled){box-shadow:var(--shadow-lg)}.btn--ghost{background:#ffffffb3;color:var(--text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.btn--ghost:hover:not(:disabled){background:#fff}.btn--big{padding:18px 48px;font-size:22px}.btn--small{padding:8px 16px;font-size:14px}.level-select{text-align:center;max-width:900px;width:100%;margin-top:16px;animation:float-up .5s ease-out}.title{font-size:clamp(36px,6vw,56px);margin:0 0 8px;color:var(--primary-dark);text-shadow:2px 4px 0 rgba(255,210,63,.4)}.subtitle{font-size:20px;color:var(--text-soft);margin:0 0 40px}.level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;padding:0 12px}.level-card{background:var(--card);border-radius:var(--radius);padding:32px 20px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;align-items:center;gap:8px;border:4px solid transparent}.level-card:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--shadow-lg)}.level-card--1{border-color:var(--green)}.level-card--2{border-color:var(--blue)}.level-card--3{border-color:var(--purple)}.level-emoji{font-size:64px;line-height:1}.level-name{font-size:26px;font-weight:800;color:var(--text)}.level-desc{font-size:16px;color:var(--text-soft)}.level-count{margin-top:8px;font-size:14px;font-weight:700;background:var(--accent);color:var(--text);padding:4px 12px;border-radius:999px}.game{width:100%;max-width:900px;display:flex;flex-direction:column;flex:1;gap:16px}.top-stats{display:flex;align-items:center;gap:12px;flex:1;min-width:0;max-width:420px}.top-progress{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.progress-text{font-size:13px;color:var(--text-soft);font-weight:700;white-space:nowrap}.progress-bar{flex:1;height:8px;background:#fff9;border-radius:999px;overflow:hidden;min-width:60px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--green) 0%,var(--accent) 100%);border-radius:999px;transition:width .4s ease}.score{font-size:16px;font-weight:800;background:var(--card);padding:4px 12px;border-radius:999px;box-shadow:var(--shadow);white-space:nowrap}.brand-arrow{font-size:1em;margin-right:2px}.game-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px 0}.syllable-display{background:var(--card);border-radius:var(--radius);padding:48px 40px;box-shadow:var(--shadow);min-width:320px;display:flex;align-items:center;justify-content:center}.syllables{display:flex;align-items:baseline;gap:4px;font-size:clamp(72px,15vw,124px);font-weight:900;letter-spacing:2px;color:var(--primary-dark);line-height:1}.syllable{display:inline-block}.syllable--new{animation:pop-in .4s ease-out}.dash{color:var(--accent);margin:0 4px}.full-word{animation:bounce .6s ease-out;background:linear-gradient(135deg,var(--primary) 0%,var(--purple) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.diphthong{display:inline-block;position:relative}.diphthong--true:after,.diphthong--mixed:after{content:"";position:absolute;left:4%;right:4%;bottom:-.18em;height:.09em;border-radius:999px;pointer-events:none}.diphthong--true:after{background:var(--blue)}.diphthong--mixed:after{background:repeating-linear-gradient(to right,var(--purple) 0,var(--purple) .18em,transparent .18em,transparent .36em)}.hint{font-size:20px;color:var(--text-soft);font-weight:600;text-align:center}.image-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;animation:float-up .4s ease-out}.choice{background:var(--card);border-radius:var(--radius);aspect-ratio:1;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,background .2s;border:4px solid transparent}.choice:hover:not(:disabled){transform:translateY(-6px) rotate(-2deg);box-shadow:var(--shadow-lg);border-color:var(--accent)}.choice-emoji{font-size:clamp(60px,14vw,120px);line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.choice-image{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.choice--correct{background:linear-gradient(135deg,#b9f6ca,#69f0ae);border-color:var(--green-dark);animation:pulse-glow 1s ease-out infinite}.choice--wrong{background:linear-gradient(135deg,#ffcdd2,#ef9a9a);border-color:var(--red);animation:shake .4s ease-out}.choice--reveal{background:linear-gradient(135deg,#b9f6ca,#69f0ae);border-color:var(--green-dark);opacity:.85}.choice--dim{opacity:.45}.feedback{font-size:24px;font-weight:800;padding:12px 28px;border-radius:999px;animation:float-up .3s ease-out}.feedback--correct{background:var(--green);color:#fff}.feedback--wrong{background:var(--red);color:#fff}.game-footer{display:flex;justify-content:center;padding:16px 0 24px}.finish{margin-top:60px;text-align:center;background:var(--card);padding:48px 32px;border-radius:var(--radius);box-shadow:var(--shadow-lg);max-width:480px;width:100%;animation:float-up .5s ease-out}.finish-emoji{font-size:96px;animation:bounce 1s ease-out infinite}.finish h2{font-size:36px;margin:12px 0 8px;color:var(--primary-dark)}.finish p{font-size:20px;color:var(--text-soft);margin:0 0 28px}.finish-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.settings{width:100%;max-width:700px;display:flex;flex-direction:column;gap:16px;animation:float-up .4s ease-out}.settings-title{text-align:center;margin:8px 0 16px}.setting-card{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}.setting-name{margin:0;font-size:22px;color:var(--text)}.setting-desc{margin:0;font-size:15px;color:var(--text-soft);line-height:1.5}.case-switch--lg{align-self:flex-start}.lang-switch{display:flex;gap:12px;flex-wrap:wrap}.lang-option{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:16px;background:#0000000a;font-size:16px;font-weight:700;color:var(--text);transition:background .15s,transform .1s}.lang-option:hover{background:#00000014}.lang-option:active{transform:scale(.97)}.lang-option.active{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:var(--shadow)}.lang-flag{font-size:22px;line-height:1}.lang-name{white-space:nowrap}.case-switch--lg .case-option{flex-direction:column;padding:12px 24px;gap:4px}.case-label{font-size:11px;font-weight:600;letter-spacing:1px;opacity:.85}.toggle{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;padding:6px 18px 6px 6px;border-radius:999px;background:#0000000a;font-weight:700;font-size:16px;color:var(--text-soft);transition:background .2s,color .2s}.toggle--on{background:#6bcf7f2e;color:var(--green-dark)}.toggle-track{width:52px;height:30px;background:#d1d1dc;border-radius:999px;position:relative;transition:background .2s}.toggle--on .toggle-track{background:var(--green)}.toggle-thumb{position:absolute;top:3px;left:3px;width:24px;height:24px;background:#fff;border-radius:50%;box-shadow:0 2px 4px #0003;transition:left .2s}.toggle--on .toggle-thumb{left:25px}.setting-card--preview .preview-row{display:flex;flex-wrap:wrap;gap:16px 28px;font-size:32px;font-weight:900;color:var(--primary-dark);align-items:baseline}.preview-word{display:inline-block}.settings-actions{display:flex;justify-content:center;padding:12px 0 24px}@media (max-width: 1024px){.syllable-display{padding:32px 28px}.syllables{font-size:clamp(58px,10.4vw,104px)}.choice-emoji{font-size:clamp(56px,12vw,110px)}.choice{border-radius:20px}.game-main{gap:16px}}@media (max-height: 900px) and (orientation: landscape) and (min-width: 700px){.app--game{padding:8px 12px}.app--game .top-bar{padding:0 0 6px}.app--game .syllable-display{padding:16px 24px}.app--game .syllables{font-size:clamp(48px,7.8vw,78px);letter-spacing:1px}.app--game .hint{font-size:14px}.app--game .image-choice{--cell-max: clamp(80px, 22vh, 150px);gap:12px}.app--game .choice-emoji{font-size:clamp(44px,11vh,80px)}.app--game .feedback{font-size:14px;padding:4px 16px}.app--game .next-btn{padding:clamp(14px,3vh,28px) clamp(28px,6vw,56px);font-size:clamp(22px,4vw,40px);min-height:clamp(70px,18vh,130px);min-width:clamp(180px,30vw,280px);border-radius:22px}}@media (max-width: 600px){.app{padding:12px}.top-bar{padding:4px 0 10px;gap:8px}.brand{font-size:18px;padding:4px;gap:0}.brand-text{display:none}.top-bar-actions{gap:8px}.case-option{padding:6px 12px;font-size:14px;min-width:42px}.icon-btn{width:38px;height:38px;font-size:18px}.top-stats{gap:8px;max-width:none}.top-progress{gap:6px}.progress-text{font-size:11px}.progress-bar{height:6px}.score{font-size:13px;padding:3px 10px}.syllable-display{padding:28px 16px;min-width:0;width:100%}.syllables{font-size:clamp(40px,11vw,72px);letter-spacing:1px}.hint{font-size:16px}.app--game .image-choice{--cell-max: clamp(90px, 28vw, 160px);gap:10px}.feedback{font-size:18px;padding:8px 20px}.level-grid{grid-template-columns:1fr}.level-card{padding:24px 16px}.level-emoji{font-size:48px}.level-name{font-size:22px}.setting-card{padding:16px}.setting-card--preview .preview-row{font-size:24px}.diphthong--true:after,.diphthong--mixed:after{bottom:-.16em;height:.08em}.btn--big{padding:14px 32px;font-size:18px}}@media (max-height: 500px) and (orientation: landscape){.app{padding:8px 12px}.app--game{padding:4px 10px}.top-bar{padding:0 0 6px}.app--game .top-bar{padding:0 0 4px}.brand{font-size:16px;gap:0}.brand-text{display:none}.case-option{padding:4px 10px;font-size:13px;min-width:38px}.icon-btn{width:34px;height:34px;font-size:16px}.app--game .game{gap:4px}.top-stats{gap:6px;max-width:320px}.top-progress{gap:6px}.progress-text{font-size:10px}.progress-bar{height:5px}.score{font-size:12px;padding:2px 8px}.app--game .game-main{gap:6px;padding:0}.app--game .syllable-display{padding:6px 16px;gap:2px}.app--game .syllables{font-size:clamp(26px,5.5vh,44px);letter-spacing:0}.app--game .hint{font-size:11px}.app--game .image-choice{--cell-max: clamp(60px, 19vh, 110px);gap:8px}.choice{border-radius:14px;border-width:3px}.app--game .choice-emoji{font-size:clamp(28px,12vh,60px)}.app--game .feedback{font-size:12px;padding:3px 12px}.app--game .next-btn{padding:8px 22px;font-size:18px;min-height:60px;min-width:140px;border-radius:16px;gap:10px}}:root{--bg-1: #fff8e1;--bg-2: #ffecf2;--primary: #ff6b9d;--primary-dark: #e84a82;--accent: #ffd23f;--green: #6bcf7f;--green-dark: #46a85d;--red: #ff6b6b;--blue: #4dabf7;--purple: #9775fa;--text: #2d2d3f;--text-soft: #6b6b80;--card: #ffffff;--shadow: 0 8px 24px rgba(45, 45, 63, .12);--shadow-lg: 0 16px 40px rgba(45, 45, 63, .18);--radius: 24px;--radius-sm: 16px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Comic Sans MS", "Chalkboard SE", sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;font-family:var(--font);color:var(--text)}body{background:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 100%);background-attachment:fixed;overflow-x:hidden}button{font-family:inherit;cursor:pointer;border:none;background:none}button:disabled{cursor:default}@media (prefers-reduced-motion: no-preference){@keyframes pop-in{0%{transform:scale(.4) rotate(-8deg);opacity:0}60%{transform:scale(1.15) rotate(2deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 #6bcf7f99}50%{box-shadow:0 0 0 18px #6bcf7f00}}@keyframes float-up{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(80px) rotate(360deg);opacity:0}}}