body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}*{box-sizing:border-box;margin:0;padding:0}.App{background-color:#fff9e6;color:#2c3e50;font-family:Comic Sans MS,Arial,sans-serif;letter-spacing:.05em;line-height:1.8}.home-container{margin:0 auto;max-width:1400px;padding:20px}.header{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;box-shadow:0 6px 20px #00000026;box-sizing:border-box;gap:10px;justify-content:space-between;margin-bottom:40px;overflow:visible;padding:20px 30px;width:100%}.header,.logo{align-items:center;display:flex}.logo{gap:15px}.logo-icon{animation:pulse 2s infinite;font-size:3rem}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.leaderboard-container{display:flex;flex-direction:column;gap:30px;margin-top:30px}.activity-leaderboard{background:#fff;border:2px solid #f0f0f0;border-radius:20px;box-shadow:0 8px 25px #667eea26;padding:30px;transition:all .3s ease}.activity-leaderboard:hover{box-shadow:0 12px 35px #667eea40;transform:translateY(-2px)}.activity-title{align-items:center;color:#667eea;display:flex;font-size:2rem;font-weight:700;gap:15px;justify-content:center;margin-bottom:25px;text-align:center}.activity-icon-large{animation:bounce 2s infinite;font-size:2.5rem}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.progress-section{padding:20px 0}.error-container,.loading-container,.no-activities{align-items:center;color:#667eea;display:flex;font-size:1.5rem;justify-content:center;min-height:400px}.spinner{animation:spin 1s linear infinite;border:4px solid #f3f3f3;border-radius:50%;border-top-color:#667eea;height:50px;margin-right:20px;width:50px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.activities-progress-grid{grid-gap:30px;display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(600px,1fr));margin-top:20px}.activity-progress-card{background:#fff;border:2px solid #f0f0f0;border-radius:20px;box-shadow:0 8px 25px #667eea26;padding:30px;transition:all .3s ease}.activity-progress-card:hover{box-shadow:0 12px 35px #667eea40;transform:translateY(-5px)}.activity-progress-header{align-items:center;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;margin-bottom:25px;padding-bottom:15px}.activity-title-section{align-items:center;display:flex;gap:15px}.activity-progress-icon{font-size:2.5rem}.activity-title-section h3{color:#2c3e50;font-size:1.8rem;font-weight:700}.trend-badge{align-items:center;border-radius:20px;color:#fff;display:flex;font-size:1rem;font-weight:700;gap:8px;padding:8px 16px;text-transform:capitalize}.activity-stats{grid-gap:20px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:15px;display:grid;gap:20px;grid-template-columns:repeat(3,1fr);margin-bottom:25px;padding:20px}.stat-item{align-items:center;display:flex;flex-direction:column;gap:8px}.stat-label{color:#6c757d;font-size:1rem;font-weight:500}.stat-value{color:#667eea;font-size:2rem;font-weight:700}.attempts-list{margin-bottom:25px}.attempts-list h4,.trend-chart h4{color:#2c3e50;font-size:1.4rem;font-weight:700;margin-bottom:15px}.attempts-table{display:flex;flex-direction:column;gap:8px}.attempts-header{background:#667eea;border-radius:10px;color:#fff;font-size:1.1rem;font-weight:700}.attempt-row,.attempts-header{grid-gap:15px;display:grid;gap:15px;grid-template-columns:2fr 1fr 1fr;padding:12px 15px}.attempt-row{align-items:center;background:#f8f9fa;border-radius:8px;transition:all .2s ease}.attempt-row:hover{background:#e9ecef;transform:translateX(5px)}.attempt-date{color:#2c3e50;font-size:1.1rem}.attempt-score{display:flex;justify-content:center}.score-badge{border-radius:20px;color:#fff;font-size:1.1rem;font-weight:700;padding:6px 14px}.attempt-duration{color:#6c757d;font-size:1.1rem;text-align:center}.trend-chart{background:#f8f9fa;border-radius:15px;margin-top:25px;padding:20px}.chart-bars{align-items:flex-end;background:#fff;border-radius:10px;display:flex;gap:15px;height:250px;justify-content:space-around;padding:20px 10px}.chart-bar-container{align-items:center;display:flex;flex:1 1;flex-direction:column;gap:10px}.chart-bar{align-items:flex-start;border-radius:8px 8px 0 0;display:flex;justify-content:center;min-height:30px;padding-top:8px;position:relative;transition:all .3s ease;width:100%}.chart-bar:hover{opacity:.8;transform:scaleY(1.05)}.bar-label{color:#fff;font-size:1rem;font-weight:700}.bar-date{color:#6c757d;font-size:.9rem;text-align:center;white-space:nowrap}.leaderboard-table{display:flex;flex-direction:column;gap:12px}.table-header{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 10px #667eea4d;color:#fff;font-size:1.15rem;font-weight:700}.table-header,.table-row{grid-gap:15px;border-radius:12px;display:grid;gap:15px;grid-template-columns:120px 1fr 150px 180px;padding:18px 25px}.table-row{background:linear-gradient(135deg,#f8f9fa,#fff);border:2px solid #0000;overflow:hidden;position:relative;transition:all .3s ease}.table-row:before{background:#667eea;content:"";height:100%;left:0;position:absolute;top:0;transform:scaleY(0);transition:transform .3s ease;width:4px}.table-row:hover:before{transform:scaleY(1)}.table-row:hover{background:linear-gradient(135deg,#e3e9ff,#f0f3ff);border-color:#667eea;box-shadow:0 6px 15px #667eea33;transform:translateX(5px)}.rank-first{background:linear-gradient(135deg,#fff9e6,#fffbf0);border-color:gold}.rank-first:before{background:gold}.rank-second{background:linear-gradient(135deg,#f5f5f5,#fafafa);border-color:silver}.rank-second:before{background:silver}.rank-third{background:linear-gradient(135deg,#fff0e6,#fff5ed);border-color:#cd7f32}.rank-third:before{background:#cd7f32}.table-cell{align-items:center;display:flex;font-size:1.15rem}.rank-cell{justify-content:center}.student-cell{font-weight:600}.date-cell,.score-cell{justify-content:center}.rank-badge{animation:rankPulse 2s infinite;display:inline-block;font-size:2rem;font-weight:700}@keyframes rankPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.student-name-badge{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 3px 8px #667eea4d;font-size:1.1rem;font-weight:600}.score-value,.student-name-badge{border-radius:25px;color:#fff;padding:8px 20px}.score-value{background:linear-gradient(135deg,#11998e,#38ef7d);box-shadow:0 3px 8px #11998e4d;font-size:1.15rem;font-weight:700}.date-badge{background:#f0f3ff;border-radius:20px;color:#667eea;font-size:1rem;font-weight:500;padding:6px 15px}.no-data-message{background:#fff;border:2px dashed #e0e0e0;border-radius:20px;box-shadow:0 8px 25px #0000001a;margin-top:30px;padding:50px;text-align:center}.no-data-message p{color:#6c757d;font-size:1.4rem;font-weight:500}.app-title{color:#fff;font-size:2.5rem;font-weight:700;text-shadow:2px 2px 4px #0003;white-space:nowrap}.header-left{flex-shrink:0;gap:16px}.header-left,.header-nav{align-items:center;display:flex}.header-nav{flex:1 1;gap:4px;padding:0 24px}.header-right{align-items:center;display:flex;flex-shrink:0;gap:10px;min-width:0}.nav-item-wrap{position:relative}.nav-item{align-items:center;background:#0000;border:none;border-radius:10px;color:#ffffffe0;cursor:pointer;display:inline-flex;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.1rem;font-weight:700;gap:6px;letter-spacing:.3px;padding:8px 16px;transition:background .18s ease,color .18s ease;white-space:nowrap}.nav-item:hover{background:#ffffff2e;color:#fff}.nav-item--user{background:#ffd70038;border:1.5px solid #ffd70073;color:gold}.nav-item--user:hover{background:#ffd70059;color:gold}.nav-chevron{font-size:.65rem;margin-left:2px;opacity:.8}.nav-dropdown{animation:nav-dropdown-in .16s ease;background:#fff;border-radius:14px;box-shadow:0 12px 40px #0000002e;left:0;min-width:210px;overflow:hidden;position:absolute;top:calc(100% + 8px);z-index:1000}.nav-dropdown--right{left:auto;right:0}@keyframes nav-dropdown-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.nav-dropdown-item{align-items:center;background:#0000;border:none;cursor:pointer;display:flex;font-family:Comic Sans MS,Arial,sans-serif;gap:12px;padding:11px 16px;text-align:left;transition:background .14s ease;width:100%}.nav-dropdown-item:not(:last-child){border-bottom:1px solid #f0f0f0}.nav-dropdown-item:hover{background:linear-gradient(135deg,#f0f3ff,#e8ecff)}.nav-dropdown-emoji{flex-shrink:0;font-size:1.3rem}.nav-dropdown-text{display:flex;flex-direction:column;gap:1px}.nav-dropdown-sub{color:#999;font-size:.75rem;font-weight:600;letter-spacing:.4px;text-transform:uppercase}.nav-dropdown-main{color:#2c3e50;font-size:.95rem;font-weight:700}.home-btn{font-size:1.1rem;padding:10px 24px}.user-auth-group{align-items:center;display:flex;gap:12px}.welcome-pill{background:gold;border-radius:30px;box-shadow:0 4px 15px #0003;box-sizing:border-box;color:#2c3e50;max-width:100%;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.dashboard-btn,.welcome-pill{font-family:Comic Sans MS,Arial,sans-serif;font-size:1rem;font-weight:700;padding:10px 20px;white-space:nowrap}.dashboard-btn{background:#fff3;border:2px solid #fff6;border-radius:30px;color:#fff;cursor:pointer;transition:all .3s ease}.dashboard-btn:hover{background:#667eeab3;border-color:#0000;transform:translateY(-1px)}.signout-btn{background:#fff3;border:2px solid #fff6;border-radius:30px;color:#fff;cursor:pointer;font-family:Comic Sans MS,Arial,sans-serif;font-size:1rem;font-weight:700;padding:10px 20px;transition:all .3s ease;white-space:nowrap}.signout-btn:hover{background:#e53935d9;border-color:#0000;transform:translateY(-1px)}.header-actions{align-items:center;display:flex;gap:15px}.welcome-text{display:none}.login-btn{background-color:gold;border:none;border-radius:30px;box-shadow:0 4px 15px #0003;color:#2c3e50;cursor:pointer;font-family:Comic Sans MS,Arial,sans-serif;font-size:1rem;font-weight:700;padding:10px 20px;transition:all .3s ease;white-space:nowrap}.login-btn:hover{background-color:orange;box-shadow:0 6px 20px #0000004d;transform:translateY(-3px)}@keyframes cloud-drift-1{0%,to{transform:translateX(0)}50%{transform:translateX(28px)}}@keyframes cloud-drift-2{0%,to{transform:translateX(0)}50%{transform:translateX(-22px)}}@keyframes cloud-drift-3{0%,to{transform:translateX(0)}50%{transform:translateX(18px)}}@keyframes sun-spin{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}to{transform:rotate(1turn) scale(1)}}@keyframes mascot-bounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.05)}}@keyframes banner-pop{0%{opacity:0;transform:scale(.7) rotate(-3deg)}70%{opacity:1;transform:scale(1.06) rotate(1deg)}to{transform:scale(1) rotate(-1deg)}}@keyframes ray-spin{0%{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(1turn)}}.hero-section{background:linear-gradient(180deg,#a8b8f0,#c7ceea 30%,#ddd6f3 60%,#f0ebff);border-radius:30px;box-shadow:0 12px 40px #667eea38;margin-bottom:50px;overflow:hidden;padding:70px 20px 160px;position:relative;text-align:center}.hero-section:before{animation:ray-spin 30s linear infinite;background:repeating-conic-gradient(#667eea0f 0deg 10deg,#0000 10deg 20deg);border-radius:50%;content:"";height:700px;left:50%;top:0;transform:translateX(-50%) rotate(0deg);width:700px;z-index:0}.hero-cloud,.hero-section:before{pointer-events:none;position:absolute}.hero-cloud{filter:drop-shadow(0 4px 8px rgba(118,75,162,.18));font-size:3.5rem;z-index:1}.hero-cloud-1{animation:cloud-drift-1 7s ease-in-out infinite;font-size:4rem;left:6%;top:12%}.hero-cloud-2{animation:cloud-drift-2 9s ease-in-out infinite;font-size:5rem;right:10%;top:6%}.hero-cloud-3{animation:cloud-drift-3 6s ease-in-out infinite;font-size:2.8rem;right:28%;top:22%}.hero-sun{animation:sun-spin 20s linear infinite;filter:drop-shadow(0 0 14px rgba(255,211,182,.85));font-size:3.8rem;left:18%;pointer-events:none;position:absolute;top:6%;z-index:1}.hero-content{position:relative;z-index:3}.hero-banner{animation:banner-pop .7s cubic-bezier(.34,1.56,.64,1) both;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:30px;box-shadow:0 4px 14px #667eea61;color:#fff;display:inline-block;font-size:1.1rem;font-weight:700;letter-spacing:.06em;margin-bottom:22px;padding:8px 28px;text-transform:uppercase}.hero-title{color:#2c3e50;font-size:3rem;font-weight:700;margin-bottom:20px;position:relative;text-shadow:0 2px 8px #667eea26;z-index:3}.hero-description{color:#34495e;font-size:1.4rem;line-height:2;margin:0 auto;max-width:720px;position:relative;z-index:3}.hero-mascots{bottom:80px;left:0;pointer-events:none;position:absolute;right:0;z-index:3}.hero-mascot{bottom:0;filter:drop-shadow(0 6px 10px rgba(118,75,162,.15));font-size:5rem;position:absolute}.hero-mascot-left{animation:mascot-bounce 3s ease-in-out infinite;left:5%}.hero-mascot-right{animation:mascot-bounce 3s ease-in-out .8s infinite;right:5%}.hero-hills{height:130px;left:0;pointer-events:none;right:0;z-index:2}.hero-hill,.hero-hills{bottom:0;position:absolute}.hero-hill{border-radius:50% 50% 0 0/60% 60% 0 0;left:-10%;width:120%}.hero-hill-back{background:#b5ead7;bottom:0;height:100px;opacity:.85}.hero-hill-front{background:#8dd5b8;bottom:0;height:80px}.section-title{color:#2c3e50;font-size:2.5rem;font-weight:700;margin-bottom:40px;text-align:center}.features-section{margin-bottom:60px}.features-grid{grid-gap:30px;display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:40px}.feature-card{background-color:#fff;border:3px solid #0000;border-radius:20px;box-shadow:0 6px 20px #0000001a;padding:35px;text-align:center;transition:all .3s ease}.feature-card:hover{border-color:#667eea;box-shadow:0 12px 30px #00000026;transform:translateY(-8px)}.feature-icon{display:block;font-size:4rem;margin-bottom:20px}.feature-card h4{color:#2c3e50;font-size:1.8rem;margin-bottom:15px}.feature-card p{color:#7f8c8d;font-size:1.3rem;line-height:1.8}@keyframes carousel-float{0%,to{transform:scale(1.08) translateY(0)}50%{transform:scale(1.08) translateY(-10px)}}@keyframes carousel-bounce-in{0%{opacity:.4;transform:scale(.85)}55%{transform:scale(1.13)}80%{transform:scale(1.04)}to{opacity:1;transform:scale(1.08)}}@keyframes icon-wiggle{0%,to{transform:rotate(0deg) scale(1)}15%{transform:rotate(-14deg) scale(1.15)}35%{transform:rotate(12deg) scale(1.2)}55%{transform:rotate(-8deg) scale(1.1)}75%{transform:rotate(5deg) scale(1.05)}}@keyframes rainbow-border{0%{border-color:#ff6b6b;box-shadow:0 0 0 4px #ff6b6b44,0 16px 40px #0000002e}17%{border-color:#ffa94d;box-shadow:0 0 0 4px #ffa94d44,0 16px 40px #0000002e}33%{border-color:#ffe066;box-shadow:0 0 0 4px #ffe06644,0 16px 40px #0000002e}50%{border-color:#69db7c;box-shadow:0 0 0 4px #69db7c44,0 16px 40px #0000002e}67%{border-color:#4dabf7;box-shadow:0 0 0 4px #4dabf744,0 16px 40px #0000002e}83%{border-color:#9775fa;box-shadow:0 0 0 4px #9775fa44,0 16px 40px #0000002e}to{border-color:#ff6b6b;box-shadow:0 0 0 4px #ff6b6b44,0 16px 40px #0000002e}}@keyframes arrow-pop{0%{transform:translateY(-50%) scale(1)}40%{transform:translateY(-50%) scale(1.35)}to{transform:translateY(-50%) scale(1)}}@keyframes caption-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes dot-pop{0%,to{transform:scale(1.3)}50%{transform:scale(1.7)}}.levels-section{background:#f9f7ff;padding:60px 40px;text-align:center}.levels-subtitle{color:#666;font-size:1.1rem;margin:-10px 0 36px}.levels-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(3,1fr);margin:0 auto;max-width:900px}.level-card{align-items:center;background:#b5ead7;background:var(--level-color,#b5ead7);border-radius:20px;box-shadow:0 4px 12px #00000014;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:32px 20px 24px;transition:transform .2s,box-shadow .2s}.level-card:hover{box-shadow:0 10px 24px #00000024;transform:translateY(-6px)}.level-card-emoji{font-size:2.4rem;margin-bottom:4px}.level-card-label{color:#333;font-size:1.6rem;font-weight:700;margin:0}.level-card-desc{color:#555;font-size:.9rem;margin:0}.level-card-arrow{color:#444;font-size:1.3rem;font-weight:700;margin-top:12px}@media (max-width:700px){.levels-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:440px){.levels-grid{grid-template-columns:1fr}}.level-hero-section{padding:80px 40px 60px;text-align:center}.level-hero-content{align-items:center;display:flex;flex-direction:column;gap:12px}.level-hero-emoji{font-size:4rem}.level-hero-title{color:#333;font-size:2.8rem;font-weight:800;margin:0}.level-hero-badge{background:#00000014;border-radius:24px;color:#444;display:inline-block;font-size:1rem;font-weight:600;padding:4px 18px}.level-hero-tagline{color:#555;font-size:1.1rem;margin:0}.level-activities-section{padding:60px 40px;text-align:center}.level-placeholder-text{color:#888;font-size:1rem;margin-top:8px}.activities-section{margin-bottom:60px}.carousel-wrapper{margin-top:40px;overflow:hidden;padding:20px 0 30px}.carousel-track,.carousel-wrapper{align-items:center;display:flex;justify-content:center;position:relative}.carousel-track{min-height:340px;width:100%}.card-pattern{border-radius:22px;inset:0;opacity:.18;overflow:hidden;pointer-events:none;position:absolute}.card-pattern-dots{background-image:radial-gradient(circle,#0000008c 2px,#0000 0);background-size:22px 22px}.card-pattern-stripes{background-image:repeating-linear-gradient(45deg,#00000073,#00000073 3px,#0000 0,#0000 18px)}.card-pattern-grid{background-image:repeating-linear-gradient(0deg,#00000059,#00000059 2px,#0000 0,#0000 22px),repeating-linear-gradient(90deg,#00000059,#00000059 2px,#0000 0,#0000 22px)}.card-pattern-circles{background-image:radial-gradient(circle at 50% 50%,#0000 28px,#0000004d 29px,#0000 30px),radial-gradient(circle at 50% 50%,#0000 52px,#00000040 53px,#0000 54px),radial-gradient(circle at 50% 50%,#0000 76px,#0003 77px,#0000 78px),radial-gradient(circle at 50% 50%,#0000 100px,#00000026 101px,#0000 102px);background-position:50%;background-size:200% 200%}.card-pattern-zigzag{background-image:repeating-linear-gradient(135deg,#0000,#0000 6px,#0006 0,#0006 8px,#0000 0,#0000 14px),repeating-linear-gradient(45deg,#0000,#0000 6px,#0006 0,#0006 8px,#0000 0,#0000 14px)}.card-pattern-stars{background-image:radial-gradient(circle at 20% 20%,#00000073 2px,#0000 3px),radial-gradient(circle at 60% 10%,#00000073 2px,#0000 3px),radial-gradient(circle at 80% 40%,#00000073 2px,#0000 3px),radial-gradient(circle at 35% 60%,#00000073 2px,#0000 3px),radial-gradient(circle at 70% 75%,#00000073 2px,#0000 3px),radial-gradient(circle at 10% 80%,#00000073 2px,#0000 3px),radial-gradient(circle at 50% 45%,#00000073 2px,#0000 3px),radial-gradient(circle at 90% 90%,#00000073 2px,#0000 3px);background-size:80px 80px}.carousel-card{align-items:center;background-color:#e8f0ff;background-color:var(--card-color,#e8f0ff);border:4px solid #0000;border-radius:24px;box-shadow:0 6px 20px #0000001a;cursor:pointer;display:flex;flex-direction:column;justify-content:center;min-height:280px;overflow:hidden;padding:36px 28px;position:absolute;text-align:center;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease,opacity .4s ease,filter .4s ease;-webkit-user-select:none;user-select:none;width:340px}.carousel-card-active{animation:carousel-bounce-in .5s cubic-bezier(.34,1.56,.64,1) both,carousel-float 3.2s ease-in-out .5s infinite,rainbow-border 3s linear .5s infinite;border:4px solid #0000;filter:none;opacity:1;position:relative;z-index:3}.carousel-card-adjacent{filter:brightness(.92);opacity:.55;z-index:2}.carousel-card:nth-child(n).carousel-card-adjacent:not(.carousel-card-active){cursor:pointer}.carousel-card-hidden{opacity:0;pointer-events:none;z-index:1}.carousel-card-icon{display:block;font-size:4.5rem;margin-bottom:18px;transition:transform .2s ease}.carousel-card-active:hover .carousel-card-icon{animation:icon-wiggle .6s ease forwards}.carousel-card-name{color:#2c3e50;font-size:1.6rem;font-weight:700;margin-bottom:12px}.activity-btn{animation:none;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:25px;box-shadow:0 4px 14px #667eea66;color:#fff;cursor:pointer;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.2rem;font-weight:700;margin-top:10px;padding:12px 32px;transition:transform .2s ease,box-shadow .2s ease}.activity-btn:hover{box-shadow:0 8px 22px #667eea8c;transform:scale(1.1) rotate(-2deg)}.activity-btn:active{transform:scale(.95)}.carousel-arrow{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;box-shadow:0 4px 14px #667eea59;color:#fff;cursor:pointer;display:flex;font-size:1.6rem;height:52px;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);transition:background .2s ease,box-shadow .2s ease;width:52px;z-index:10}.carousel-arrow:hover{background:linear-gradient(135deg,#764ba2,#f953c6);box-shadow:0 6px 20px #764ba280;transform:translateY(-50%) scale(1.15)}.carousel-arrow:active{animation:arrow-pop .3s ease forwards}.carousel-arrow-left{left:10px}.carousel-arrow-right{right:10px}.carousel-caption{animation:caption-in .4s ease both;margin-top:8px;padding:0 20px;text-align:center}.carousel-caption-title{color:#2c3e50;font-size:1.9rem;font-weight:700;margin-bottom:8px}.carousel-caption-desc{color:#34495e;font-size:1.2rem;line-height:1.7;margin:0 auto;max-width:520px}.carousel-dots{display:flex;gap:10px;justify-content:center;margin-top:20px}.carousel-dot{background:#ccb8f5;border:none;border-radius:50%;cursor:pointer;height:12px;padding:0;transition:background .2s ease,transform .2s ease;width:12px}.carousel-dot-active{animation:dot-pop .5s ease both;background:#667eea}.math-activity-grid{grid-gap:22px;display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-bottom:40px}.math-activity-tile{align-items:center;background-color:#e8f0ff;background-color:var(--tile-color,#e8f0ff);border:3px solid #0000;border-radius:20px;box-shadow:0 4px 14px #00000017;cursor:pointer;display:flex;flex-direction:column;overflow:hidden;padding:26px 18px 20px;position:relative;text-align:center;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.math-activity-tile:hover{border-color:#667eea;box-shadow:0 12px 30px #667eea38;transform:translateY(-8px) scale(1.02)}.math-tile-icon{font-size:3.2rem;margin-bottom:10px}.math-tile-name{color:#2c3e50;font-size:1.3rem;font-weight:700;margin-bottom:8px}.math-tile-desc{color:#34495e;flex:1 1;font-size:.95rem;line-height:1.6;margin-bottom:14px}.math-tile-play{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;color:#fff;display:inline-block;font-size:.95rem;font-weight:700;margin-top:auto;padding:7px 22px}.math-question-box{background:#f0ebff;border-radius:16px;box-shadow:inset 0 2px 8px #667eea1f;color:#2c3e50;font-size:2.4rem;font-weight:700;letter-spacing:.06em;margin:20px auto;max-width:420px;min-width:200px;padding:18px 28px;text-align:center}.math-choices{grid-gap:14px;display:grid;gap:14px;grid-template-columns:1fr 1fr;margin:0 auto 16px;max-width:420px}.math-choice-btn{background:#fff;border:3px solid #c7ceea;border-radius:14px;color:#2c3e50;cursor:pointer;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.5rem;font-weight:700;padding:16px 10px;transition:transform .15s ease,background .15s ease,border-color .15s ease}.math-choice-btn:hover:not(:disabled){background:#f0ebff;border-color:#667eea;transform:scale(1.05)}.math-choice-correct{background:#c8e6c9!important;border-color:#4caf50!important;color:#1b5e20!important}.math-choice-wrong{background:#ffcdd2!important;border-color:#ef5350!important;color:#b71c1c!important}.math-dot-grid{background:#f0ebff;border-radius:16px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:10px auto 20px;max-width:340px;padding:18px}.math-dot{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:inline-block;height:28px;width:28px}.math-shape-display{align-items:center;max-width:280px;min-height:130px}.math-fraction-visual,.math-shape-display{background:#f0ebff;border-radius:16px;display:flex;justify-content:center;margin:14px auto 20px;padding:18px}.math-fraction-visual{flex-wrap:wrap;gap:8px;max-width:400px}.math-fraction-box{background:#fff;border:3px solid #667eea;border-radius:8px;height:50px;transition:background .2s;width:50px}.math-fraction-box.shaded{background:linear-gradient(135deg,#667eea,#764ba2)}.math-blitz-timer{font-size:2.4rem;font-weight:700;letter-spacing:.04em;margin:8px 0 4px;text-align:center;transition:color .3s}.math-blitz-input{background:#fff;border:3px solid #c7ceea;border-radius:14px;color:#2c3e50;display:block;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.8rem;font-weight:700;margin:14px auto 0;max-width:240px;outline:none;padding:14px 18px;text-align:center;transition:border-color .2s;width:100%}.math-blitz-input:focus{border-color:#667eea}.math-blitz-ok{background:#c8e6c9!important;transition:background .3s}.math-blitz-bad{background:#ffcdd2!important;transition:background .3s}.math-oddeven-grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:14px auto 20px;max-width:380px}.math-oddeven-num{background:#fff;border:3px solid #c7ceea;border-radius:14px;color:#2c3e50;cursor:pointer;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.7rem;font-weight:700;height:76px;transition:transform .15s ease,background .15s ease,border-color .15s ease;width:76px}.math-oddeven-num:hover{background:#f0ebff;border-color:#667eea;transform:scale(1.06)}.math-oddeven-num.oe-selected{background:#ddd6f3;border-color:#764ba2}.math-oddeven-num.oe-correct{background:#c8e6c9;border-color:#4caf50;color:#1b5e20}.math-oddeven-num.oe-wrong{background:#ffcdd2;border-color:#ef5350;color:#b71c1c}.why-section{background-color:#fff;border-radius:25px;box-shadow:0 8px 25px #0000001a;margin-bottom:60px;padding:50px}.benefits-list{grid-gap:25px;display:grid;gap:25px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:30px}.benefit-item{align-items:center;background-color:#e8f5e9;border-radius:15px;display:flex;gap:20px;padding:20px;transition:all .3s ease}.benefit-item:hover{background-color:#c8e6c9;transform:translateX(10px)}.check-icon{align-items:center;background-color:#fff;border-radius:50%;color:#4caf50;display:flex;flex-shrink:0;font-size:2.5rem;font-weight:700;height:50px;justify-content:center;width:50px}.benefit-item p{color:#2c3e50;font-size:1.4rem;margin:0}.modal-overlay{align-items:center;background-color:#000000b3;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.modal-content{background-color:#fff;border-radius:25px;box-shadow:0 15px 50px #0000004d;max-width:500px;padding:50px;position:relative;width:90%}.close-btn{background:none;border:none;color:#7f8c8d;cursor:pointer;font-size:3rem;position:absolute;right:20px;top:15px;transition:all .3s ease}.close-btn:hover{color:#2c3e50;transform:rotate(90deg)}.modal-title{color:#2c3e50;font-size:2.5rem;margin-bottom:15px;text-align:center}.modal-description{color:#7f8c8d;font-size:1.3rem;margin-bottom:35px;text-align:center}.login-error{background-color:#ffebee;border:2px solid #ef5350;border-radius:10px;color:#c62828;font-size:1.2rem;margin-bottom:20px;padding:15px;text-align:center}.login-form{display:flex;flex-direction:column;gap:25px}.form-input{border:3px solid #bdc3c7;border-radius:12px;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.3rem;padding:15px 20px;transition:all .3s ease}.form-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.user-type-selector{display:flex;gap:20px;justify-content:center;margin:10px 0}.user-type-selector label{align-items:center;border-radius:10px;cursor:pointer;display:flex;font-size:1.3rem;gap:10px;padding:12px 20px;transition:all .3s ease}.user-type-selector label:hover{background-color:#f0f0f0}.user-type-selector input[type=radio]{cursor:pointer;height:20px;width:20px}.submit-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;color:#fff;cursor:pointer;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.5rem;font-weight:700;padding:18px;transition:all .3s ease}.submit-btn:hover{box-shadow:0 8px 20px #667eea66;transform:translateY(-3px)}.signup-link{color:#7f8c8d;font-size:1.2rem;text-align:center}.signup-link a{color:#667eea;font-weight:700;text-decoration:none}.signup-link a:hover{text-decoration:underline}.footer{background-color:#2c3e50;border-radius:15px;color:#fff;margin-top:60px;padding:30px;text-align:center}.footer p{font-size:1.2rem;margin:0}.spelling-container{background-color:#fff9e6;font-family:Comic Sans MS,Arial,sans-serif;margin:0 auto;max-width:900px;min-height:100vh;padding:30px}.setup-header{margin-bottom:40px;text-align:center}.setup-title{color:#2c3e50;font-size:3rem;font-weight:700;margin-bottom:15px}.setup-description{color:#7f8c8d;font-size:1.5rem;line-height:1.8}.error-message{background-color:#ffebee;border:3px solid #ef5350;border-radius:15px;color:#c62828;font-size:1.3rem;margin-bottom:25px;padding:20px;text-align:center}.setup-form{background-color:#fff;border-radius:25px;box-shadow:0 8px 25px #0000001a;padding:40px}.form-row{grid-gap:25px;display:grid;gap:25px;grid-template-columns:1fr 1fr;margin-bottom:25px}.form-group{display:flex;flex-direction:column;gap:10px}.form-group label{color:#2c3e50;font-size:1.4rem;font-weight:700}.form-input,.form-select{background-color:#fff;border:3px solid #bdc3c7;border-radius:12px;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.3rem;padding:15px 20px;transition:all .3s ease}.form-input:focus,.form-select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.checkbox-group{justify-content:center}.checkbox-label{align-items:center;background-color:#f0f0f0;border-radius:12px;cursor:pointer;display:flex;font-size:1.4rem;gap:12px;padding:15px;transition:all .3s ease}.checkbox-label:hover{background-color:#e0e0e0}.form-checkbox{cursor:pointer;height:25px;width:25px}.start-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:15px;color:#fff;cursor:pointer;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.6rem;font-weight:700;margin-top:30px;padding:20px;transition:all .3s ease;width:100%}.start-btn:hover:not(:disabled){box-shadow:0 8px 20px #667eea66;transform:translateY(-3px)}.start-btn:disabled{cursor:not-allowed;opacity:.6}.quiz-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;color:#fff;display:flex;justify-content:space-between;margin-bottom:30px;padding:20px}.quiz-title{font-size:2.5rem;margin:0}.score-timer-container{align-items:center;display:flex;gap:20px}.score-display,.timer-display{background-color:#fff3;border-radius:15px;font-size:2rem;font-weight:700;letter-spacing:.08em;min-width:150px;padding:15px 30px;text-align:center}.timer-display{background-color:#ffffff40;border:2px solid #ffffff4d;font-family:Courier New,monospace;font-size:2.2rem}.quiz-card{background-color:#fff;border-radius:25px;box-shadow:0 10px 30px #00000026;padding:50px;text-align:center}.word-counter{color:#7f8c8d;font-size:1.4rem;font-weight:700;margin-bottom:30px}.speaker-btn{align-items:center;background:linear-gradient(135deg,#ff6b6b,#ff8e53);border:none;border-radius:20px;color:#fff;cursor:pointer;display:inline-flex;font-family:Comic Sans MS,Arial,sans-serif;font-size:2rem;font-weight:700;gap:15px;margin-bottom:40px;padding:25px 50px;transition:all .3s ease}.speaker-btn:hover{box-shadow:0 10px 25px #ff6b6b66;transform:scale(1.05)}.speaker-btn:active{transform:scale(.98)}.answer-section{margin-bottom:35px}.answer-label{color:#2c3e50;display:block;font-size:1.6rem;font-weight:700;margin-bottom:15px}.answer-input{border:4px solid #bdc3c7;border-radius:15px;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.8rem;letter-spacing:.1em;padding:20px 25px;text-align:center;transition:all .3s ease;width:100%}.answer-input:focus{border-color:#667eea;box-shadow:0 0 0 4px #667eea33;outline:none}.hint-box{background-color:#fff9c4;border:3px solid #ffd54f;border-radius:12px;color:#f57c00;font-size:1.5rem;padding:18px 25px}.feedback,.hint-box{font-weight:700;margin-top:20px}.feedback{animation:fadeIn .3s ease;border-radius:15px;font-size:1.6rem;padding:20px}.feedback.correct{background-color:#c8e6c9;border:3px solid #4caf50;color:#2e7d32}.feedback.incorrect{background-color:#ffcdd2;border:3px solid #ef5350;color:#c62828}.button-group{display:flex;gap:20px;justify-content:center;margin-bottom:35px}.check-btn,.help-btn{border:none;border-radius:15px;cursor:pointer;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.5rem;font-weight:700;padding:18px 40px;transition:all .3s ease}.check-btn{background-color:#4caf50;color:#fff}.check-btn:hover{background-color:#45a049;box-shadow:0 6px 15px #4caf5066;transform:translateY(-3px)}.help-btn{background-color:#ff9800;color:#fff}.help-btn:hover{background-color:#f57c00;box-shadow:0 6px 15px #ff980066;transform:translateY(-3px)}.navigation-buttons{align-items:center;display:flex;gap:15px;justify-content:center}.nav-btn,.stop-btn{border:none;border-radius:12px;cursor:pointer;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.4rem;font-weight:700;padding:15px 30px;transition:all .3s ease}.nav-btn{background-color:#2196f3;color:#fff}.nav-btn:hover:not(:disabled){background-color:#1976d2;transform:translateY(-2px)}.nav-btn:disabled{background-color:#bdbdbd;cursor:not-allowed;opacity:.5}.stop-btn{background-color:#f44336;color:#fff}.stop-btn:hover{background-color:#d32f2f;transform:translateY(-2px)}.progress-bar{display:flex;gap:12px;justify-content:center;margin-top:30px;padding:20px}.progress-dot{background-color:#e0e0e0;border-radius:50%;height:18px;transition:all .3s ease;width:18px}.progress-dot.active{background-color:#2196f3;box-shadow:0 0 10px #2196f380;transform:scale(1.4)}.progress-dot.completed{background-color:#4caf50}.missing-letters-word-container{background:linear-gradient(135deg,#f8f9ff,#fff5f8);border:3px solid #6c63ff;border-radius:20px;box-shadow:0 8px 20px #6c63ff26;margin-bottom:25px;padding:25px;transition:transform .3s ease,box-shadow .3s ease}.missing-letters-word-container:hover{box-shadow:0 12px 30px #6c63ff40;transform:translateY(-5px)}.word-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.word-number{color:#6c63ff;font-family:Comic Sans MS,OpenDyslexic,Arial,sans-serif;font-size:1.3rem}.letter-boxes-container{background:#fff;border-radius:15px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px 0;padding:15px}.letter-box-wrapper{display:inline-block}.letter-input-box{background:#fff;border:3px solid #ff6b9d;border-radius:12px;color:#2d3436;font-family:Comic Sans MS,OpenDyslexic,Arial,sans-serif;font-size:2rem;font-weight:700;height:60px;text-align:center;text-transform:lowercase;transition:all .3s ease;width:50px}.letter-input-box:focus{background:#f0f0ff;border-color:#6c63ff;box-shadow:0 0 15px #6c63ff4d;outline:none;transform:scale(1.1)}.letter-display-box{align-items:center;background:linear-gradient(135deg,#a29bfe,#6c63ff);border:3px solid #a29bfe;border-radius:12px;box-shadow:0 4px 10px #6c63ff33;color:#fff;display:flex;font-family:Comic Sans MS,OpenDyslexic,Arial,sans-serif;font-size:2rem;font-weight:700;height:60px;justify-content:center;text-transform:lowercase;width:50px}.action-buttons{display:flex;gap:15px;justify-content:center;margin-top:20px}.feedback-message{animation:slideIn .3s ease;border-radius:12px;font-family:Comic Sans MS,OpenDyslexic,Arial,sans-serif;font-size:1.2rem;font-weight:600;margin-top:15px;padding:15px;text-align:center}.feedback-message.correct{background:linear-gradient(135deg,#d4edda,#c3e6cb);border:2px solid #28a745;color:#155724}.feedback-message.incorrect{background:linear-gradient(135deg,#f8d7da,#f5c6cb);border:2px solid #dc3545;color:#721c24}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.quiz-subtitle{color:#d3dbde;font-family:Comic Sans MS,OpenDyslexic,Arial,sans-serif;font-size:1.2rem;margin-top:10px}@media (max-width:768px){.header{border-radius:14px;flex-wrap:wrap;gap:6px;justify-content:space-between;margin-bottom:20px;overflow:visible;padding:12px 16px}.header-left{flex-shrink:0;gap:8px;justify-content:flex-start}.header-right{flex-shrink:0;justify-content:flex-end}.header-nav{flex-wrap:wrap;gap:2px;order:3;overflow:visible;padding:4px 0 0;width:100%}.nav-item-wrap{position:static}.nav-dropdown{left:12px;min-width:0;min-width:auto;position:fixed;right:12px;top:auto;width:auto;z-index:2000}.nav-item{flex-shrink:0;font-size:.85rem;padding:6px 10px;white-space:nowrap}.logo-icon{font-size:2rem}.app-title{font-size:1.5rem}.welcome-pill{font-size:.85rem;max-width:none;padding:8px 14px;text-align:center}.login-btn{font-size:.9rem;padding:8px 16px}.user-auth-group{flex-direction:column;gap:8px;width:100%}.signout-btn{font-size:.8rem;padding:6px 14px;width:auto}.hero-title{font-size:2.2rem}.hero-description{font-size:1.3rem}.section-title{font-size:2rem}.activities-grid,.features-grid{grid-template-columns:1fr}.modal-content{padding:30px}.form-row{grid-template-columns:1fr}.quiz-header{flex-direction:column;gap:15px}.score-timer-container{flex-direction:column;gap:10px}.quiz-card{padding:30px 20px}.button-group,.navigation-buttons{flex-direction:column}.speaker-btn{font-size:1.6rem;padding:20px 35px}.letter-display-box,.letter-input-box{font-size:1.5rem;height:50px;width:40px}.letter-boxes-container{gap:8px}.check-btn-inline,.help-btn-inline{font-size:1.8rem;height:50px;min-width:50px}.instructions-box{padding:20px}.instructions-title{font-size:1.7rem}.instructions-list{font-size:1.2rem}.validate-all-btn{font-size:1.4rem;padding:16px 35px}}.dropzone-section{margin-bottom:40px}.drop-boxes-container{flex-wrap:wrap;gap:15px;margin:30px 0}.drop-box,.drop-boxes-container{display:flex;justify-content:center}.drop-box{align-items:center;background-color:#f8f9fa;border:4px dashed #bdc3c7;border-radius:15px;color:#2c3e50;cursor:pointer;font-family:Comic Sans MS,Arial,sans-serif;font-size:2.5rem;font-weight:700;height:80px;letter-spacing:.05em;transition:all .3s ease;width:70px}.drop-box:hover{background-color:#e8eeff;border-color:#667eea;transform:scale(1.05)}.drop-box.filled{animation:dropIn .3s ease;background-color:#c8e6c9;border-color:#4caf50;border-style:solid}@keyframes dropIn{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.alphabet-section{background-color:#f0f4f8;border:3px solid #bdc3c7;border-radius:20px;margin:40px 0;padding:30px}.alphabet-label{color:#2c3e50;display:block;font-size:1.6rem;font-weight:700;margin-bottom:20px;text-align:center}.alphabet-container{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));margin:0 auto;max-width:800px}.letter-tile{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;box-shadow:0 4px 10px #00000026;color:#fff;cursor:grab;display:flex;font-family:Comic Sans MS,Arial,sans-serif;font-size:2rem;font-weight:700;height:60px;justify-content:center;letter-spacing:.05em;transition:all .3s ease;width:60px}.letter-tile:hover{box-shadow:0 8px 20px #667eea66;transform:translateY(-5px) scale(1.1)}.letter-tile:active{cursor:grabbing;transform:scale(.95)}@media (max-width:768px){.drop-box{font-size:2rem;height:65px;width:55px}.drop-boxes-container{gap:10px}.letter-tile{font-size:1.6rem;height:50px;width:50px}.alphabet-container{gap:8px;grid-template-columns:repeat(auto-fit,minmax(50px,1fr))}.alphabet-section{padding:20px}}@media (max-width:420px){.drop-box{border-radius:10px;border-width:3px;font-size:1.5rem;height:48px;width:40px}.drop-boxes-container{gap:6px;margin:15px 0}.letter-tile{border-radius:8px;font-size:1.2rem;height:38px;width:38px}.alphabet-container{gap:5px;grid-template-columns:repeat(auto-fit,minmax(38px,1fr));max-width:100%}.alphabet-section{margin:20px 0;padding:12px}.letter-display-box,.letter-input-box{border-radius:8px;border-width:2px;font-size:1.2rem;height:40px;width:32px}.letter-boxes-container{gap:5px;padding:10px}.missing-letters-word-container{margin-bottom:15px;padding:15px}.quiz-card{padding:16px 12px}.quiz-title{font-size:1.4rem}.speaker-btn{font-size:1.3rem;padding:14px 24px}.hint-box{font-size:1rem}.hint-box,.spelling-container{padding:10px}.setup-form{padding:16px}.navigation-buttons{gap:8px}.nav-btn,.stop-btn{font-size:1rem;padding:10px 16px}}@media (max-width:1024px) and (min-width:769px){.alphabet-container{grid-template-columns:repeat(13,1fr)}}.instructions-box{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:3px solid #2196f3;border-radius:20px;box-shadow:0 6px 20px #2196f333;margin-bottom:30px;padding:16px 30px}.instructions-toggle{align-items:center;background:none;border:none;color:#1976d2;cursor:pointer;display:flex;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.5rem;font-weight:700;justify-content:space-between;padding:6px 0;text-align:left;width:100%}.instructions-toggle:hover{color:#1565c0}.instructions-title{color:#1976d2;font-size:2rem;font-weight:700;margin-bottom:20px;text-align:center}.instructions-list{color:#1565c0;counter-reset:instruction-counter;font-size:1.4rem;line-height:2.2;list-style:none;padding-left:0}.instructions-list li{counter-increment:instruction-counter;margin-bottom:12px;padding-left:45px;position:relative}.instructions-list li:before{align-items:center;background-color:#2196f3;border-radius:50%;color:#fff;content:counter(instruction-counter);display:flex;font-size:1.3rem;font-weight:700;height:32px;justify-content:center;left:0;position:absolute;top:0;width:32px}.word-row{align-items:center;background-color:#f8f9fa;border:3px solid #dee2e6;border-radius:15px;display:flex;gap:15px;margin-bottom:20px;padding:20px 25px;transition:all .3s ease}.word-row:hover{background-color:#f0f4ff;border-color:#667eea;box-shadow:0 4px 15px #667eea26;transform:translateX(5px)}.word-number{color:#667eea;font-size:1.8rem;font-weight:700;min-width:40px;text-align:center}.speaker-btn-inline{align-items:center;background:linear-gradient(135deg,#ff6b6b,#ff8e53);border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:1.8rem;height:55px;justify-content:center;min-width:55px;padding:12px 18px;transition:all .3s ease}.speaker-btn-inline:hover{box-shadow:0 6px 15px #ff6b6b66;transform:scale(1.1)}.speaker-btn-inline:active{transform:scale(.95)}.answer-input-inline{border:3px solid #bdc3c7;border-radius:12px;flex:3 1;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.6rem;letter-spacing:.08em;min-width:300px;padding:15px 20px;transition:all .3s ease}.answer-input-inline:focus{border-color:#667eea;box-shadow:0 0 0 4px #667eea26;outline:none}.answer-input-incorrect{background-color:#fff5f5!important;border-color:#e53e3e!important;box-shadow:0 0 0 3px #e53e3e33!important}.hint-icon-container{align-items:center;cursor:help;display:flex;flex-shrink:0;position:relative}.hint-icon{align-items:center;background-color:#fff9c4;border:3px solid #ffd54f;border-radius:50%;display:flex;font-size:2rem;height:45px;justify-content:center;transition:all .3s ease;width:45px}.hint-icon-container:hover .hint-icon{background-color:#ffeb3b;box-shadow:0 4px 12px #ffeb3b80;transform:scale(1.15)}.hint-tooltip{background-color:#f57c00;border:2px solid #ff9800;border-radius:10px;bottom:120%;box-shadow:0 6px 20px #0000004d;color:#fff;font-size:1.3rem;font-weight:700;opacity:0;padding:12px 18px;transition:all .3s ease;visibility:hidden;white-space:nowrap;z-index:100}.hint-tooltip,.hint-tooltip:after{left:50%;position:absolute;transform:translateX(-50%)}.hint-tooltip:after{border:8px solid #0000;border-top-color:#f57c00;content:"";top:100%}.hint-icon-container:hover .hint-tooltip{bottom:130%;opacity:1;visibility:visible}.check-btn-inline,.help-btn-inline{align-items:center;border:none;border-radius:12px;cursor:pointer;display:flex;flex-shrink:0;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.5rem;font-weight:700;justify-content:center;padding:12px 20px;transition:all .3s ease;white-space:nowrap}.check-btn-inline{background-color:#4caf50;color:#fff}.check-btn-inline:hover{background-color:#45a049;box-shadow:0 6px 15px #4caf5066;transform:translateY(-2px) scale(1.1)}.help-btn-inline{background-color:#ff9800;color:#fff}.help-btn-inline:hover{background-color:#f57c00;box-shadow:0 6px 15px #ff980066;transform:translateY(-2px) scale(1.1)}.validate-all-container{border-top:3px solid #dee2e6;display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:35px;padding-top:30px}.error-popup,.error-popup-danger,.success-popup{animation:popupSlide .3s ease;border:3px solid;border-radius:15px;box-shadow:0 8px 25px #0000004d;font-size:1.5rem;font-weight:700;left:50%;padding:15px 25px;position:absolute;top:-15px;transform:translateX(-50%);white-space:nowrap;z-index:1000}@keyframes popupSlide{0%{opacity:0;transform:translateX(-50%) translateY(-20px) scale(.8)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}.success-popup{background-color:#c8e6c9;border-color:#4caf50;color:#2e7d32}.error-popup-danger{align-items:center;background-color:#ffcdd2;border-color:#ef5350;color:#c62828;display:flex;gap:14px}.popup-wrong{background:#ffebee;border-radius:6px;color:#c62828;font-size:1.5rem;padding:2px 8px;text-decoration:line-through}.popup-arrow{color:#555;font-size:1.4rem}.popup-correct{background:#e8f5e9;border-radius:6px;color:#2e7d32;font-size:1.5rem;font-weight:700;padding:2px 8px}.popup-close-btn{align-items:center;background:none;border:2px solid #c62828;border-radius:50%;color:#c62828;cursor:pointer;display:flex;flex-shrink:0;font-size:1.1rem;font-weight:700;height:32px;justify-content:center;line-height:1;padding:0;transition:background .2s,color .2s;width:32px}.popup-close-btn:hover{background:#c62828;color:#fff}.validate-all-btn{background:linear-gradient(135deg,#4caf50,#45a049);border:none;border-radius:15px;box-shadow:0 6px 20px #4caf504d;color:#fff;cursor:pointer;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.7rem;font-weight:700;padding:20px 45px;transition:all .3s ease}.validate-all-btn:hover{box-shadow:0 10px 30px #4caf5080;transform:translateY(-3px)}.validate-all-btn:active{transform:translateY(-1px)}.feedback-box{background-color:#e8f5e9;border:3px solid #4caf50;border-radius:15px;color:#2e7d32;font-size:1.5rem;font-weight:700;line-height:2;margin-top:30px;max-height:300px;overflow-y:auto;padding:25px;white-space:pre-line}@media (max-width:1200px){.word-row{flex-wrap:wrap;gap:12px}.answer-input-inline{flex-basis:100%;min-width:150px;order:3}.hint-icon-container{order:4}.check-btn-inline,.help-btn-inline{flex:1 1;order:5}}@media (max-width:768px){.word-row{gap:10px;padding:15px}.word-number{font-size:1.5rem;min-width:35px}.speaker-btn-inline{font-size:1.5rem;height:50px;min-width:50px}.answer-input-inline{font-size:1.4rem;padding:12px 15px}.hint-icon{font-size:1.7rem;height:40px;width:40px}.check-btn-inline,.help-btn-inline{font-size:1.8rem;height:50px;min-width:50px}.instructions-box{padding:20px}.instructions-title{font-size:1.7rem}.instructions-list{font-size:1.2rem}.validate-all-btn{font-size:1.4rem;padding:16px 35px}}.chat-container{background-color:#fff9e6;border-radius:20px;box-shadow:0 8px 25px #00000014;font-family:Comic Sans MS,Arial,sans-serif;margin:20px auto 40px;max-width:900px;padding:20px}.chat-intro{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:3px solid #64b5f6;border-radius:18px;margin-bottom:25px;padding:20px 25px}.chat-title{color:#1a237e;font-size:2.2rem;font-weight:700;margin-bottom:10px}.chat-description{color:#29434e;font-size:1.4rem;line-height:1.9;margin-bottom:10px}.chat-hint{color:#1565c0;font-size:1.3rem;font-weight:700}.chat-window{background-color:#fff;border:3px solid #e0e0e0;border-radius:18px;display:flex;flex-direction:column;gap:15px;padding:20px 18px}.chat-messages{max-height:380px;overflow-y:auto;padding-right:8px}.chat-empty{color:#7f8c8d;font-size:1.3rem;padding:40px 10px;text-align:center}.chat-bubble{border-radius:16px;font-size:1.3rem;letter-spacing:.05em;line-height:1.8;margin-bottom:12px;max-width:80%;padding:14px 16px}.chat-bubble-user{background:linear-gradient(135deg,#ffcc80,#ffb74d);border:2px solid #fb8c00;color:#2c3e50;margin-left:auto}.chat-bubble-assistant{background:#e8f5e9;border:2px solid #66bb6a;color:#1b5e20;margin-right:auto}.chat-bubble-role{align-items:center;display:flex;font-size:1.1rem;font-weight:700;gap:8px;margin-bottom:6px}.chat-speak-btn{background:none;border:none;border-radius:6px;cursor:pointer;font-size:1.3rem;line-height:1;padding:2px 4px;transition:transform .15s ease,background .15s ease}.chat-speak-btn:hover{background:#00000014;transform:scale(1.2)}.chat-speak-btn-active{animation:pulse-speak .8s ease-in-out infinite alternate}@keyframes pulse-speak{0%{transform:scale(1)}to{transform:scale(1.3)}}.chat-bubble-text{white-space:pre-wrap}.chat-error{background-color:#ffebee;border:2px solid #ef5350;border-radius:12px;color:#c62828;font-size:1.2rem;padding:10px 14px}.chat-input-area{display:flex;flex-direction:column;gap:10px;margin-top:8px}.chat-input-wrapper{margin-bottom:1rem;position:relative;width:100%}.chat-input{border:3px solid #bdc3c7;border-radius:14px;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.3rem;letter-spacing:.05em;line-height:1.8;min-height:80px;padding:12px 60px 12px 14px;resize:vertical;width:100%}.chat-mic-icon{align-items:center;background-color:#4a90e2;border:none;border-radius:50%;bottom:10px;box-shadow:0 2px 8px #00000026;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:45px;justify-content:center;position:absolute;right:10px;transition:all .3s ease;width:45px}.chat-mic-icon:hover{background-color:#357abd;box-shadow:0 4px 12px #0003;transform:scale(1.1)}.chat-mic-icon:active{transform:scale(.95)}.chat-actions{display:flex;gap:10px;justify-content:space-between}.chat-new-btn,.chat-send-btn{border:none;border-radius:14px;cursor:pointer;flex:1 1;font-family:Comic Sans MS,Arial,sans-serif;font-size:1.3rem;font-weight:700;padding:12px 15px;transition:all .2s ease}.chat-send-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.chat-send-btn:hover:not(:disabled){box-shadow:0 6px 15px #667eea66;transform:translateY(-2px)}.chat-send-btn:disabled{cursor:not-allowed;opacity:.6}.chat-new-btn{background-color:#ffeb3b;color:#37474f}.chat-new-btn:hover{background-color:#ffd600;transform:translateY(-2px)}@media (max-width:768px){.chat-container{padding:10px}.chat-bubble{max-width:100%}.chat-title{font-size:1.8rem}.chat-description,.chat-hint{font-size:1.2rem}}.test-credentials-note{background-color:#e8f4f8;border-left:4px solid #4a90a4;border-radius:4px;color:#2c5f6f;font-size:14px;line-height:1.6;margin:16px 0;padding:12px 16px}.test-credentials-note strong{color:#1a4452;font-weight:600}.test-credentials-note code{background-color:#d4e9f0;border-radius:3px;color:#1a4452;font-family:Courier New,monospace;font-size:13px;padding:2px 6px}.letter-sorting-grid{grid-gap:20px;box-sizing:border-box;display:grid;gap:20px;grid-template-columns:repeat(4,1fr);margin-top:30px;width:100%}.letter-sorting-bucket{background-color:#f8f9fa;border:4px dashed #667eea;border-radius:15px;box-sizing:border-box;min-height:150px;padding:20px;text-align:center}@media (max-width:768px){.letter-sorting-grid{gap:12px;grid-template-columns:repeat(2,1fr)}.letter-sorting-bucket{min-height:100px;padding:10px}}.mirror-compare{align-items:center;display:flex;flex-wrap:wrap;font-size:6rem;font-weight:700;gap:40px;justify-content:center;margin:40px 0}.mirror-letter{border-radius:20px;padding:30px 50px}.mirror-letter-left{background:#e3f2fd;border:4px solid #2196f3}.mirror-letter-right{background:#fce4ec;border:4px solid #e91e63}.mirror-vs{color:#7f8c8d;font-size:3rem}.mirror-btns{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:30px}.mirror-btn-same{background:linear-gradient(135deg,#4caf50,#45a049);font-size:1.6rem;padding:20px 40px}.mirror-btn-mirror{background:linear-gradient(135deg,#ff9800,#f57c00);font-size:1.6rem;padding:20px 40px}.mirror-btn-flip{background:linear-gradient(135deg,#9c27b0,#7b1fa2);font-size:1.6rem;padding:20px 40px}@media (max-width:768px){.mirror-compare{font-size:4rem;gap:20px;margin:20px 0}.mirror-letter{padding:15px 25px}.mirror-btn-mirror,.mirror-btn-same{font-size:1.2rem;padding:12px 24px}}.trace-canvas{align-items:center;border-radius:20px;cursor:crosshair;display:flex;height:min(400px,90vw);justify-content:center;margin:30px auto;overflow:hidden;position:relative;touch-action:none;width:min(400px,90vw)}.letter-sorting-bucket-active{background-color:#fff3e0;border-color:#ff9800;cursor:pointer}.letter-tile-selected{background:linear-gradient(135deg,#ff9800,#f57c00)!important;box-shadow:0 6px 20px #ff980080;color:#fff!important;transform:scale(1.15)}.sf-meta{align-items:center;color:#667eea;display:flex;font-size:1.2rem;font-weight:700;justify-content:space-between;margin-bottom:16px}.sf-hint{background:#fff9c4;border-radius:12px;color:#2c3e50;font-size:clamp(1.2rem,4vw,1.6rem);margin-bottom:20px;padding:12px 20px;text-align:center}.sf-dropzone{align-items:center;background:#f0f3ff;border:3px dashed #667eea;border-radius:16px;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;min-height:80px;padding:16px}.sf-placeholder{color:#aaa;font-size:1.2rem;font-style:italic}.sf-pool{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:20px 0}.sf-tile{border:none;border-radius:12px;cursor:pointer;font-family:Comic Sans MS,Arial,sans-serif;font-size:clamp(1.2rem,4vw,1.8rem);font-weight:700;padding:clamp(8px,2vw,14px) clamp(14px,3vw,22px);transition:transform .15s ease,box-shadow .15s ease}.sf-tile-pool{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 10px #667eea59;color:#fff}.sf-tile-pool:focus,.sf-tile-pool:hover{box-shadow:0 8px 18px #667eea73;transform:translateY(-3px)}.sf-tile-placed{background:linear-gradient(135deg,#11998e,#38ef7d);box-shadow:0 4px 10px #11998e4d;color:#fff}.sf-tile-placed:focus,.sf-tile-placed:hover{box-shadow:0 8px 18px #11998e66;transform:translateY(-3px)}.sf-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:24px}.sf-setup{margin:30px auto;max-width:600px;text-align:center}.sf-setup-form{gap:28px;margin-top:24px;text-align:left}.sf-setup-field,.sf-setup-form{display:flex;flex-direction:column}.sf-setup-field{gap:8px}.sf-setup-field label{color:#2c3e50;font-size:1.4rem;font-weight:700}.sf-slider-row{align-items:center;display:flex;gap:16px}.sf-slider{appearance:none;background:#ddd;border-radius:8px;flex:1 1;height:10px;outline:none}.sf-slider::-webkit-slider-thumb{appearance:none;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;cursor:pointer;height:28px;width:28px}.sf-slider-value{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;display:inline-flex;flex-shrink:0;font-size:1.4rem;font-weight:700;height:48px;justify-content:center;width:48px}.sf-age-group-label{color:#667eea;font-size:1rem;font-weight:600}.sf-answer{animation:fadeIn .3s ease;background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border:2px solid #66bb6a;border-radius:14px;color:#2e7d32;font-size:clamp(1.2rem,4vw,1.6rem);margin:16px 0;padding:16px 24px;text-align:center}.sc-sentence-box{align-items:center;background:linear-gradient(135deg,#f7f9ff,#eef3ff);border:2px solid #dce5ff;border-radius:18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:24px 0 18px;padding:22px 18px}.sc-blank,.sc-word{color:#2c3e50;font-size:clamp(1.4rem,4vw,2rem);font-weight:700}.sc-blank{border-bottom:4px solid #667eea;color:#667eea;min-width:120px;padding:6px 14px;text-align:center}.sc-blank-answer{background:#667eea14;border-radius:10px}.sc-inline-input{background:#fffffff2;border:none;border-bottom:4px solid #667eea;border-radius:10px 10px 0 0;box-shadow:inset 0 0 0 2px #667eea1f;color:#2c3e50;font-size:clamp(1.2rem,4vw,1.6rem);font-weight:700;min-width:120px;padding:8px 14px;text-align:center;width:min(220px,100%)}.sc-inline-input:focus{box-shadow:inset 0 0 0 2px #667eea47,0 0 0 4px #667eea1f;outline:none}.sc-choice-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:20px 0}.sc-choice-selected{background:linear-gradient(135deg,#ffb74d,#fb8c00);box-shadow:0 8px 18px #fb8c0059;color:#fff}.story-header{margin-bottom:20px;text-align:center}.story-title{color:#2c3e50;font-size:clamp(1.5rem,4vw,2rem);margin-bottom:8px}.story-prompt{color:#667eea;font-size:1.1rem;font-weight:600}.story-template{align-items:center;background:linear-gradient(135deg,#fffbea,#fff3cd);border:2px solid #f4d35e;border-radius:18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:24px 0;padding:20px}.story-segment{color:#2c3e50;font-size:clamp(1.3rem,4vw,1.9rem);font-weight:700}.story-slot{background:#fff;border:2px dashed #f59e0b;border-radius:12px;color:#b45309;cursor:default;font-size:clamp(1.1rem,4vw,1.5rem);font-weight:700;min-width:110px;padding:10px 16px}.story-slot-filled{background:linear-gradient(135deg,#fff3cd,#ffe082);border-style:solid;color:#7c4d00}.story-choice-section{margin-top:20px}.story-choice-label{color:#2c3e50;font-size:1.1rem;font-weight:700;margin-bottom:10px}.story-choice-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.story-choice-selected{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 8px 18px #d977064d;color:#fff}.story-finished-box{margin-top:24px}.story-finished-text{background:linear-gradient(135deg,#e8f5e9,#d1f2d8);border:2px solid #66bb6a;border-radius:16px;color:#2e7d32;font-size:clamp(1.2rem,4vw,1.6rem);font-weight:700;line-height:1.8;padding:18px 20px;text-align:center}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.word-display{color:#2c3e50;display:flex;flex-wrap:wrap;font-size:clamp(2.5rem,8vw,6rem);font-weight:700;gap:5px;justify-content:center;letter-spacing:.1em;margin:30px 0;text-align:center}.word-char{border-radius:10px;display:inline-block;min-width:clamp(40px,10vw,80px);padding:clamp(5px,2vw,10px) clamp(8px,3vw,20px);text-align:center}.word-char-blank{background:#fff9c4;border:3px solid #ffd54f}.game-letter-options{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-top:40px}.game-letter-tile{font-size:clamp(2rem,6vw,4rem);height:clamp(60px,18vw,100px);width:clamp(60px,18vw,100px)}.picture-assoc{margin:30px 0;text-align:center}.picture-assoc-image{font-size:clamp(5rem,20vw,10rem);margin-bottom:20px}.picture-assoc-word{color:#2c3e50;font-size:clamp(1.5rem,5vw,2.5rem);font-weight:700}.spot-diff-grid{grid-gap:10px;box-sizing:border-box;display:grid;gap:10px;grid-template-columns:repeat(6,1fr);margin:30px auto;max-width:500px;width:100%}.spot-diff-item{align-items:center;aspect-ratio:1;background:#e3f2fd;border:3px solid #2196f3;border-radius:12px;color:#2c3e50;cursor:pointer;display:flex;font-size:clamp(1.2rem,4vw,3rem);font-weight:700;justify-content:center;transition:all .3s ease}.spot-diff-item-found{background:linear-gradient(135deg,#4caf50,#45a049);border-color:#2e7d32;color:#fff}@media (max-width:480px){.spot-diff-grid{grid-template-columns:repeat(4,1fr);max-width:100%}}.speaker-center{margin:40px 0;text-align:center}.speaker-btn-large{font-size:clamp(1.5rem,5vw,3rem);padding:clamp(15px,4vw,30px) clamp(30px,8vw,60px)}
/*# sourceMappingURL=main.9e2b6c97.css.map*/