*{box-sizing:border-box;margin:0;padding:0}html,body{color:#2d3436;width:100%;min-height:100vh;font-family:Fredoka,Comic Sans MS,Segoe UI,sans-serif;overflow-x:hidden}body{background:linear-gradient(#87ceeb 0%,#a8d8ea 25%,#c7e9b4 55%,#d4eac8 75%,#e8f5e0 100%);position:relative}.cloud{opacity:.7;pointer-events:none;z-index:0;filter:drop-shadow(0 4px 8px #00000014);user-select:none;font-size:80px;position:fixed}.cloud-1{animation:35s linear infinite float-cloud;top:5%;left:-5%}.cloud-2{opacity:.5;font-size:60px;animation:45s linear infinite reverse float-cloud;top:15%;right:-5%}.cloud-3{opacity:.4;font-size:50px;animation:50s linear infinite float-cloud;top:35%;left:-8%}@keyframes float-cloud{0%{transform:translate(0)translateY(0)}25%{transform:translate(15vw)translateY(-10px)}50%{transform:translate(35vw)translateY(5px)}75%{transform:translate(60vw)translateY(-8px)}to{transform:translate(110vw)translateY(0)}}#portal{z-index:1;max-width:1100px;min-height:100vh;margin:0 auto;padding:20px 24px 60px;position:relative}#hero-section{justify-content:space-between;align-items:flex-start;margin-bottom:36px;padding-top:10px;display:flex;position:relative}#hero-center{text-align:center;flex:1;padding-top:20px}.app-title{color:#fff;text-shadow:2px 2px #ff8c42,-1px -1px #ff8c42,4px 4px #0000001a;letter-spacing:1px;margin-bottom:6px;font-size:42px;font-weight:700;animation:.8s cubic-bezier(.34,1.56,.64,1) both title-pop}@keyframes title-pop{0%{opacity:0;transform:scale(.5)translateY(-20px)}to{opacity:1;transform:scale(1)translateY(0)}}.app-subtitle{color:#ffffffe6;text-shadow:0 1px 3px #00000026;font-size:16px;font-weight:400;animation:.8s .2s both fade-up}@keyframes fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#kitten-container{z-index:10;flex-shrink:0;position:relative}#kitten{cursor:pointer;width:100px;height:100px;transition:transform .2s;display:block;overflow:visible}#kitten:hover{transform:scale(1.08)}#kitten .kitten-body,#kitten .kitten-head{transform-origin:100px 100px}#kitten .kitten-eyes{transform-origin:100px 85px}#kitten .kitten-ears .ear-left,#kitten .kitten-ears .ear-right{transform-origin:bottom}#kitten .kitten-mouth{transform-origin:100px 110px}.kitten-idle .kitten-body,.kitten-idle .kitten-head{animation:3s ease-in-out infinite kitten-breathe}@keyframes kitten-breathe{0%,to{transform:scale(1)translateY(0)}50%{transform:scale(1.02)translateY(-2px)}}.kitten-idle .kitten-eyes{animation:4.5s ease-in-out infinite kitten-blink}@keyframes kitten-blink{0%,96%,to{transform:scaleY(1)}98%{transform:scaleY(.1)}}.kitten-idle .kitten-pupil{animation:6s ease-in-out infinite pupil-look}@keyframes pupil-look{0%,30%{transform:translate(0)}35%,45%{transform:translate(-1.5px)}50%,80%{transform:translate(1px,-1px)}85%,to{transform:translate(0)}}.kitten-idle .kitten-tail{transform-origin:150px 140px;animation:4s ease-in-out infinite tail-wag}@keyframes tail-wag{0%,to{transform:rotate(0)}25%{transform:rotate(6deg)}75%{transform:rotate(-4deg)}}.kitten-idle .kitten-whiskers{animation:3s ease-in-out infinite whiskers-float}@keyframes whiskers-float{0%,to{transform:translate(0)}50%{transform:translate(.5px)}}.kitten-idle .ear-left{animation:7s ease-in-out infinite ear-twitch}@keyframes ear-twitch{0%,90%,to{transform:rotate(0)}92%{transform:rotate(-4deg)scale(1.03)}94%{transform:rotate(0)}96%{transform:rotate(-3deg)scale(1.02)}98%{transform:rotate(0)}}.kitten-speaking .mouth-smile{opacity:0;transition:opacity .15s}.kitten-speaking .mouth-o{animation:.5s ease-in-out infinite speak-o}.kitten-speaking .mouth-dash{animation:.5s ease-in-out infinite speak-dash}@keyframes speak-o{0%,45%{opacity:1}55%,to{opacity:0}}@keyframes speak-dash{0%,45%{opacity:0}55%,to{opacity:1}}.kitten-speaking .kitten-ears .ear-left,.kitten-speaking .kitten-ears .ear-right{animation:none;transform:none}.kitten-speaking .kitten-blush{animation:1.2s ease-in-out infinite blush-pulse}@keyframes blush-pulse{0%,to{opacity:.4}50%{opacity:.7}}#kitten-bubble{color:#2d3436;white-space:nowrap;z-index:20;background:#fff;border-radius:16px;padding:10px 18px;font-size:14px;font-weight:500;transition:opacity .3s,transform .3s;position:absolute;top:108px;left:-6px;box-shadow:0 4px 16px #0000001f}#kitten-bubble:after{content:"";border-bottom:8px solid #fff;border-left:8px solid #0000;border-right:8px solid #0000;width:0;height:0;position:absolute;top:-8px;left:28px}#kitten-bubble.hidden{opacity:0;pointer-events:none;transform:translateY(5px)}#top-bar{flex-shrink:0;align-items:center;gap:12px;padding-top:10px;display:flex}#score-tree{filter:drop-shadow(0 3px 6px #0000001a);width:70px;height:150px}#score-tree svg{width:100%;height:100%}#score-display{text-align:center;backdrop-filter:blur(10px);background:linear-gradient(#ffffff52,#ffffff2e);border:3px solid #ffffff73;border-radius:28px;grid-template-rows:auto auto auto;grid-template-columns:64px 1fr;align-items:center;column-gap:12px;width:250px;padding:18px 16px 14px;display:grid;position:relative;box-shadow:0 14px 36px #235b6e24}.star-icon{filter:drop-shadow(0 6px 8px #d68b0038);grid-area:1/1/3;place-items:center;width:62px;height:62px;margin:0;font-size:48px;line-height:1;animation:2s ease-in-out infinite star-twinkle;display:grid}@keyframes star-twinkle{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(1.15)rotate(5deg)}}#star-count{color:#fff;text-shadow:0 4px 12px #295b6e2e,0 2px #ffffff2e;grid-area:1/2;place-self:end start;font-size:44px;font-weight:700;line-height:.95;display:block}#star-label{color:#ffffffeb;text-shadow:0 2px 6px #295b6e29;grid-area:2/2;place-self:start;margin-top:0;font-size:17px;font-weight:800;display:block}#compendium-btn{color:#6b4f00;cursor:pointer;background:linear-gradient(#fff7cc 0%,#ffe994 100%);border:0;border-radius:999px;grid-area:3/1/auto/3;justify-content:center;align-items:center;gap:10px;width:100%;min-height:52px;margin-top:14px;padding:10px 12px;font-family:inherit;font-weight:900;transition:transform .18s,box-shadow .18s;display:inline-flex;box-shadow:0 10px 22px #6b4f0026,inset 0 -2px #6b4f0014}#compendium-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px #6b4f002e,inset 0 -2px #6b4f0014}#compendium-btn:disabled{opacity:.55;cursor:not-allowed}#learning-data-btn,#onboarding-guide-btn{color:#17637a94;cursor:pointer;background:#ffffff38;border:0;border-radius:50%;place-items:center;width:28px;height:28px;padding:0;font-family:inherit;transition:transform .18s,background .18s,color .18s,opacity .18s;display:grid;position:absolute;top:10px;box-shadow:inset 0 0 0 1px #ffffff47}#onboarding-guide-btn{right:48px}#learning-data-btn{right:14px}#learning-data-btn:hover,#onboarding-guide-btn:hover{color:#17637a;background:#ffffff80;transform:translateY(-1px)}#learning-data-btn svg,#onboarding-guide-btn svg{width:17px;height:17px}.compendium-icon{text-transform:uppercase;letter-spacing:.8px;font-size:17px}.compendium-book-icon{color:#8a6500;place-items:center;width:28px;height:28px;display:grid}.compendium-book-icon svg{width:100%;height:100%;display:block}#compendium-count{color:#fff;background:#ff8c42;border-radius:999px;place-items:center;min-width:30px;height:30px;font-size:18px;font-weight:900;display:inline-grid;box-shadow:inset 0 -2px #6b4f001f}#cards-container{animation:.6s .3s both fade-up}#cards-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;display:grid}.card{cursor:pointer;background:#fff;border:3px solid #0000;border-radius:24px;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;position:relative;overflow:hidden;box-shadow:0 6px 20px #00000014}.card:hover:not(.locked){transform:translateY(-8px)scale(1.03);box-shadow:0 16px 40px #00000026}.card:active:not(.locked){transform:translateY(-2px)scale(.98)}.card-header{justify-content:center;align-items:center;height:100px;font-size:56px;display:flex;position:relative;overflow:hidden}.card-header:after{content:"";background:#fff;border-radius:50% 50% 0 0;height:40px;position:absolute;bottom:-20px;left:0;right:0}.card:first-child .card-header{background:linear-gradient(135deg,#ff9a56 0%,#ff6b6b 100%)}.card:nth-child(2) .card-header{background:linear-gradient(135deg,#4ecdc4 0%,#44a08d 100%)}.card:nth-child(3) .card-header{background:linear-gradient(135deg,#a18cd1 0%,#fbc2eb 100%)}.card:nth-child(4) .card-header{background:linear-gradient(135deg,#f6d365 0%,#fda085 100%)}.card-body{z-index:1;padding:18px 22px 22px;position:relative}.card-cefr{text-transform:uppercase;letter-spacing:.5px;color:#666;background:#f0f0f0;border-radius:20px;margin-bottom:8px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-block}.card-name{color:#2d3436;margin-bottom:6px;font-size:24px;font-weight:700}.card-desc{color:#636e72;margin-bottom:18px;font-size:14px;line-height:1.5}.card-footer{justify-content:space-between;align-items:center;display:flex}.card-score{color:#f39c12;align-items:center;gap:4px;font-size:18px;font-weight:700;display:flex}.card-score:before{content:"⭐";font-size:16px}.card-play-btn{color:#fff;background:linear-gradient(135deg,#ff8c42 0%,#ff6b35 100%);border-radius:50px;align-items:center;gap:6px;padding:8px 18px;font-size:15px;font-weight:600;transition:box-shadow .2s,transform .2s;display:inline-flex;box-shadow:0 4px 12px #ff6c3559}.card:hover .card-play-btn{box-shadow:0 6px 18px #ff6c3573}.card-badge-done{color:#fff;background:linear-gradient(135deg,#7bc67e 0%,#5cb85c 100%);border-radius:50px;align-items:center;gap:4px;padding:8px 16px;font-size:14px;font-weight:600;display:inline-flex;box-shadow:0 4px 12px #5cb85c4d}.card.locked{opacity:.65;cursor:not-allowed;filter:grayscale(.7)}.card.locked .card-header{filter:grayscale(.7)}.card-lock{z-index:2;filter:drop-shadow(0 2px 4px #0003);font-size:24px;position:absolute;top:12px;right:12px}.card.completed{border-color:#f1c40f;box-shadow:0 6px 20px #f1c40f26}.card.completed .card-header:before{content:"✨";z-index:2;font-size:20px;animation:2s ease-in-out infinite sparkle;position:absolute;top:8px;right:12px}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)rotate(10deg)}}.card{opacity:0;animation:.5s cubic-bezier(.34,1.56,.64,1) forwards card-enter}.card:first-child{animation-delay:.1s}.card:nth-child(2){animation-delay:.2s}.card:nth-child(3){animation-delay:.3s}.card:nth-child(4){animation-delay:.4s}.card:nth-child(5){animation-delay:.5s}@keyframes card-enter{0%{opacity:0;transform:translateY(30px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}.card.entering{animation:.4s cubic-bezier(.55,0,1,.45) forwards card-exit}@keyframes card-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.15)}}.overlay{z-index:1000;color:#fff;backdrop-filter:blur(4px);background:#2d3436e0;flex-direction:column;justify-content:center;align-items:center;font-size:18px;display:flex;position:fixed;inset:0}.overlay.hidden{display:none}.spinner{border:5px solid #fff3;border-top-color:gold;border-radius:50%;width:50px;height:50px;margin-bottom:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#compendium-overlay{z-index:1100;backdrop-filter:blur(8px);background:#2d3436c2;place-items:center;padding:28px;display:grid;position:fixed;inset:0}#compendium-overlay.hidden{display:none}.compendium-panel{background:#fffaf0;border:3px solid #ffffffd9;border-radius:24px;flex-direction:column;width:min(980px,100%);max-height:min(760px,100vh - 56px);animation:.22s ease-out compendium-enter;display:flex;overflow:hidden;box-shadow:0 24px 80px #00000047}@keyframes compendium-enter{0%{opacity:0;transform:translateY(12px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.compendium-header{background:#ffe7b8;border-bottom:2px solid #6b4f001f;justify-content:space-between;align-items:center;padding:18px 22px;display:flex}.compendium-header h2{color:#573b00;font-size:24px}.compendium-close{color:#573b00;cursor:pointer;background:#fff;border:0;border-radius:50%;width:38px;height:38px;font-weight:800}.compendium-body{gap:22px;padding:22px;display:grid;overflow:auto}.compendium-empty{color:#2e6b38;background:#e9f8df;border-radius:16px;padding:18px;font-weight:700}.compendium-scene{gap:12px;display:grid}.compendium-scene-header{color:#2d3436;align-items:center;gap:10px;font-weight:800;display:flex}.compendium-scene-icon{font-size:24px}.compendium-scene-name{font-size:20px}.compendium-scene-progress{color:#17637a;background:#dff6ff;border-radius:999px;margin-left:auto;padding:4px 10px}.compendium-grid{grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:12px;display:grid}.compendium-item{color:#2d3436;background:#fff;border:2px solid #0000000f;border-radius:18px;align-content:center;justify-items:center;gap:8px;min-height:132px;padding:12px 8px;font-family:inherit;font-weight:700;display:grid;position:relative}.compendium-item.collected{cursor:pointer;transition:transform .18s,box-shadow .18s}.compendium-item.collected:hover{transform:translateY(-3px);box-shadow:0 10px 22px #0000001f}.compendium-item.missing{color:#7d8790;background:#f1f5f9}.compendium-item.missing .compendium-svg{filter:grayscale();opacity:.36}.compendium-svg svg{width:68px;height:68px;display:block}.compendium-word{overflow-wrap:anywhere;max-width:100%;font-size:14px}.compendium-example{color:#fff;z-index:1200;pointer-events:none;background:#263238;border-radius:14px;width:min(240px,72vw);padding:10px 12px;font-size:13px;line-height:1.35;position:fixed;box-shadow:0 10px 28px #00000038}.compendium-example:after{content:"";left:var(--example-arrow-left,50%);border-left:8px solid #0000;border-right:8px solid #0000;width:0;height:0;position:absolute;transform:translate(-50%)}.compendium-example.above:after{border-top:8px solid #263238;top:100%}.compendium-example.below:after{border-bottom:8px solid #263238;bottom:100%}.compendium-example strong,.compendium-example span{display:block}.compendium-example span{color:#dbeafe;margin-top:4px}#learning-data-overlay{z-index:1150;backdrop-filter:blur(8px);background:#2d3436c2;place-items:center;padding:28px;display:grid;position:fixed;inset:0}#learning-data-overlay.hidden{display:none}.learning-data-panel{background:#fffaf0;border:3px solid #ffffffd9;border-radius:24px;width:min(420px,100%);animation:.22s ease-out compendium-enter;overflow:hidden;box-shadow:0 24px 80px #00000047}.learning-data-header{background:#dff6ff;border-bottom:2px solid #17637a1f;justify-content:space-between;align-items:center;padding:18px 22px;display:flex}.learning-data-header h2{color:#17637a;font-size:24px}.learning-data-close{color:#17637a;cursor:pointer;background:#fff;border:0;border-radius:50%;width:38px;height:38px;font-weight:800}.learning-data-body{gap:16px;padding:22px;display:grid}.learning-data-note{color:#2d3436;font-size:15px;font-weight:600}.learning-data-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.learning-data-actions button{color:#573b00;cursor:pointer;background:#fff7cc;border:0;border-radius:14px;min-height:44px;font-family:inherit;font-weight:800}#learning-data-reset{color:#9b2c2c;background:#ffe1dc}#learning-data-status{color:#17637a;min-height:20px;font-size:13px;font-weight:700}#onboarding-overlay{z-index:1180;backdrop-filter:blur(8px);background:radial-gradient(circle at 20% 15%,#fff7cc8c,#0000 28%),radial-gradient(circle at 80% 80%,#dff6ff8c,#0000 30%),#2d3436bd;place-items:center;padding:28px;display:grid;position:fixed;inset:0}#onboarding-overlay.hidden{display:none}.onboarding-panel{background:#fffaf0;border:3px solid #ffffffe6;border-radius:24px;width:calc(100vw - 56px);max-width:560px;max-height:calc(100vh - 56px);animation:.24s ease-out onboarding-enter;overflow:auto;box-shadow:0 24px 80px #0000004d}@keyframes onboarding-enter{0%{opacity:0;transform:translateY(14px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.onboarding-content{gap:18px;padding:22px;display:grid}.onboarding-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.onboarding-kicker{color:#2e6b38;background:#e9f8df;border-radius:999px;align-items:center;min-height:30px;padding:5px 12px;font-size:13px;font-weight:800;display:inline-flex}.onboarding-close{color:#573b00;cursor:pointer;background:#fff;border:0;border-radius:50%;width:38px;height:38px;font-family:inherit;font-weight:900;box-shadow:0 3px 10px #0000001a}.onboarding-illustration{background:linear-gradient(#dff6ff 0%,#e9f8df 100%);border-radius:22px;place-items:center;min-height:154px;display:grid;position:relative;overflow:hidden}.onboarding-illustration:before,.onboarding-illustration:after{content:"";background:#ffffff8c;border-radius:50%;width:180px;height:68px;position:absolute;bottom:-28px}.onboarding-illustration:before{left:-24px}.onboarding-illustration:after{right:-30px}.onboarding-icon{z-index:1;background:#fff;border-radius:30px;place-items:center;width:94px;height:94px;font-size:54px;animation:2.8s ease-in-out infinite onboarding-float;display:grid;position:relative;box-shadow:0 14px 32px #0000001f}@keyframes onboarding-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.onboarding-sparkle{z-index:1;font-size:24px;animation:2s ease-in-out infinite sparkle;position:absolute}.onboarding-sparkle-1{top:28px;left:22%}.onboarding-sparkle-2{animation-delay:.5s;bottom:30px;right:22%}.onboarding-copy{text-align:center}.onboarding-copy h2{color:#2d3436;font-size:34px;line-height:1.05}.onboarding-subtitle{color:#17637a;margin-top:6px;font-size:20px;font-weight:800}.onboarding-body{color:#4f5b62;max-width:440px;margin:12px auto 0;font-size:16px;font-weight:600;line-height:1.65}.onboarding-dots{justify-content:center;gap:9px;display:flex}.onboarding-dot{cursor:pointer;background:#d1d5db;border:0;border-radius:999px;width:12px;height:12px;transition:width .18s,background .18s}.onboarding-dot.active{background:#ff8c42;width:30px}.onboarding-actions{justify-content:space-between;align-items:center;gap:14px;display:flex}.onboarding-nav{gap:10px;display:flex}.onboarding-actions button{cursor:pointer;border:0;border-radius:999px;min-height:44px;padding:10px 18px;font-family:inherit;font-weight:800}.onboarding-skip,.onboarding-back{color:#4f5b62;background:#fff;box-shadow:inset 0 0 0 2px #00000014}.onboarding-back:disabled{opacity:.45;cursor:not-allowed}.onboarding-next{color:#fff;background:linear-gradient(135deg,#ff8c42 0%,#ff6b35 100%);min-width:96px;box-shadow:0 6px 18px #ff6c3552}.onboarding-close:focus-visible,.onboarding-dot:focus-visible,.onboarding-actions button:focus-visible,#onboarding-guide-btn:focus-visible,#learning-data-btn:focus-visible,#compendium-btn:focus-visible{outline-offset:3px;outline:3px solid #17637a}@media (width<=768px){#hero-section{flex-direction:column;align-items:center;gap:16px}#kitten-container{order:2}#hero-center{order:1}#top-bar{order:3}.app-title{font-size:32px}.app-subtitle{font-size:14px}#cards-grid{grid-template-columns:1fr}}@media (width<=480px){#portal{padding:16px}.app-title{font-size:28px}.card-header{height:80px;font-size:44px}.card-body{padding:14px 18px 18px}.card-name{font-size:20px}#compendium-overlay,#learning-data-overlay,#onboarding-overlay{padding:12px}.onboarding-panel{width:calc(100vw - 24px);max-height:calc(100vh - 24px)}.compendium-body{padding:16px}.compendium-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.onboarding-content{padding:18px}.onboarding-illustration{min-height:128px}.onboarding-icon{border-radius:24px;width:80px;height:80px;font-size:46px}.onboarding-copy h2{font-size:28px}.onboarding-subtitle{font-size:17px}.onboarding-body{font-size:15px}.onboarding-actions{flex-direction:column-reverse;align-items:stretch}.onboarding-nav{grid-template-columns:1fr 1fr;display:grid}.onboarding-actions button{width:100%}}@media (prefers-reduced-motion:reduce){.compendium-panel,.compendium-item.collected,.onboarding-panel,.onboarding-icon,.onboarding-sparkle{transition:none;animation:none}}