@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Outfit:wght@100..900&display=swap";html::-webkit-scrollbar{display:none}body::-webkit-scrollbar{display:none}html,body{-ms-overflow-style:none;scrollbar-width:none}:root{--bg-sky:#e0f2fe;--bg-land:#fef08a;--color-primary:#8b5cf6;--color-secondary:#06b6d4;--color-success:#10b981;--color-warning:#f59e0b;--color-danger:#ef4444;--color-dark:#1e293b;--color-light:#fff;--color-cream:#fdfaf2;--font-fun:"Fredoka", system-ui, -apple-system, sans-serif;--font-body:"Outfit", system-ui, -apple-system, sans-serif;box-sizing:border-box}*,:before,:after{box-sizing:inherit}body{font-family:var(--font-body);min-height:100vh;color:var(--color-dark);-webkit-user-select:none;user-select:none;background:linear-gradient(#e2f1fc 0%,#fffde6 100%);flex-direction:column;justify-content:flex-start;align-items:center;margin:0;padding:0;font-size:19px;display:flex;overflow-x:hidden}#root{box-sizing:border-box;flex-direction:column;width:100%;max-width:1024px;min-height:100vh;margin:0 auto;padding:20px 14px;display:flex;position:relative}@media (width>=768px){#root{min-height:90vh;padding:24px}}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-grow{flex-grow:1}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.items-center{align-items:center}.items-stretch{align-items:stretch}.self-stretch{align-self:stretch}.grid{display:grid}.grid-cols-2{grid-template-columns:1fr}@media (width>=480px){.grid-cols-2{grid-template-columns:repeat(2,1fr)}}.gap-2{gap:12px}.gap-3{gap:18px}.gap-4{gap:24px}.gap-6{gap:32px}.w-full{width:100%}.w-3{width:12px}.max-w-md{max-width:500px}.max-w-xl{max-width:700px}.max-w-2xl{max-width:900px}.mx-auto{margin-left:auto;margin-right:auto}.block{display:block}.p-3{padding:16px}.p-4{padding:24px}.p-6{padding:36px}.pb-8{padding-bottom:36px}.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}.mb-4{margin-bottom:24px}.mb-6{margin-bottom:32px}.mb-8{margin-bottom:40px}.mt-2{margin-top:12px}.mt-4{margin-top:24px}.ml-2{margin-left:12px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-bold{font-weight:600}.font-medium{font-weight:500}.text-xs{font-size:.85rem}.text-sm{font-size:1.05rem}.text-base{font-size:1.2rem}.text-lg{font-size:1.35rem}.text-xl{font-size:1.6rem}.text-2xl{font-size:1.9rem}.text-3xl{font-size:2.3rem}.text-4xl{font-size:3rem}.text-5xl{font-size:4rem}.text-primary{color:var(--color-primary)}.text-success{color:#047857}.text-warning{color:#b45309}.text-danger{color:#b91c1c}.text-slate-800{color:#1e293b}.text-slate-700{color:#334155}.text-slate-600{color:#475569}.text-slate-500{color:#64748b}.text-slate-400{color:#94a3b8}.bg-white{background-color:#fff}.bg-purple-50{background-color:#faf5ff}.bg-emerald-50{background-color:#f0fdf4}.bg-amber-50{background-color:#fffbeb}.border-2{border:3px solid var(--color-dark)}.border-3{border:4px solid var(--color-dark)}.border-dashed{border-style:dashed!important}.border-b-2{border-bottom:2px solid}.border-b-4{border-bottom:4px solid}.border-t-4{border-top:4px solid}.border-l-4{border-left:4px solid}.border-r-4{border-right:4px solid}.border-slate-800{border-color:#1e293b!important}.border-slate-200{border-color:#e2e8f0!important}.border-slate-100{border-color:#f1f5f9!important}.rounded-xl{border-radius:18px}.rounded-2xl{border-radius:28px}.rounded-3xl{border-radius:36px}input[type=text]{border:4px solid var(--color-dark);font-family:var(--font-fun);background:var(--color-light);width:100%;color:var(--color-dark);border-radius:18px;outline:none;padding:14px 20px;font-size:1.3rem;transition:border-color .15s;box-shadow:inset 0 4px #0000000f}input[type=text]:focus{border-color:var(--color-primary)}input[type=range]{appearance:none;background:0 0;width:100%;margin:18px 0}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{cursor:pointer;border:3px solid var(--color-dark);background:#cbd5e1;border-radius:8px;width:100%;height:16px}input[type=range]::-webkit-slider-thumb{background:var(--color-primary);border:3px solid var(--color-dark);cursor:pointer;-webkit-appearance:none;width:32px;height:32px;box-shadow:0 4px 0 var(--color-dark);border-radius:50%;margin-top:-11px}select{border:4px solid var(--color-dark);font-family:var(--font-fun);background-color:var(--color-light);box-shadow:0 6px 0 var(--color-dark);cursor:pointer;border-radius:18px;outline:none;padding:12px 18px;font-size:1.15rem;font-weight:600;transition:transform .1s,box-shadow .1s}select:active{box-shadow:0 2px 0 var(--color-dark);transform:translateY(4px)}h1,h2,h3,h4,h5,h6{font-family:var(--font-fun);color:var(--color-dark);margin-top:0;font-weight:600}h1{font-size:2.5rem;line-height:1.2}@media (width>=768px){h1{font-size:3.5rem}}h2{font-size:1.8rem}@media (width>=768px){h2{font-size:2.2rem}}.chunky-card{background:var(--color-light);border:4px solid var(--color-dark);box-shadow:0 14px 0 var(--color-dark);border-radius:32px;padding:32px;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}@media (width<=480px){.chunky-card{padding:20px}}.welcome-card{flex-shrink:0!important;padding-bottom:56px!important;overflow:visible!important}.reset-btn-container{justify-content:center;width:100%;margin-top:56px;margin-bottom:8px;display:flex}.chunky-btn{font-family:var(--font-fun);border:4px solid var(--color-dark);cursor:pointer;min-width:56px;min-height:56px;box-shadow:0 6px 0 var(--color-dark);border-radius:22px;outline:none;justify-content:center;align-items:center;gap:10px;padding:10px 20px;font-size:1.15rem;font-weight:600;line-height:1.25;text-decoration:none;transition:all .15s ease-out;display:inline-flex;transform:translateY(0)}.chunky-btn:active{box-shadow:0 0px 0 var(--color-dark);transform:translateY(6px)}.chunky-btn-primary{background-color:var(--color-primary);color:var(--color-light)}.chunky-btn-primary:hover{background-color:#7c3aed}.chunky-btn-secondary{background-color:var(--color-secondary);color:var(--color-light)}.chunky-btn-secondary:hover{background-color:#0891b2}.chunky-btn-success{background-color:var(--color-success);color:var(--color-light)}.chunky-btn-success:hover{background-color:#059669}.chunky-btn-warning{background-color:var(--color-warning);color:var(--color-dark)}.chunky-btn-warning:hover{background-color:#d97706}.chunky-btn-danger{background-color:var(--color-danger);color:var(--color-light)}.chunky-btn-danger:hover{background-color:#dc2626}.chunky-btn-light{background-color:var(--color-light);color:var(--color-dark)}.chunky-btn-light:hover{background-color:#f1f5f9}.avatar-badge{border:4px solid var(--color-dark);width:90px;height:90px;box-shadow:0 6px 0 var(--color-dark);cursor:pointer;background-color:#fff;border-radius:50%;justify-content:center;align-items:center;font-size:3.2rem;transition:transform .2s,box-shadow .2s;display:flex}.avatar-badge:hover{box-shadow:0 8px 0 var(--color-dark);transform:scale(1.08)rotate(3deg)}.avatar-badge.active{box-shadow:0 10px 0 var(--color-dark);animation:2.5s ease-in-out infinite float;transform:scale(1.1)translateY(-4px)}.app-header{border:4px solid var(--color-dark);width:100%;box-shadow:0 6px 0 var(--color-dark);background:#fff6;border-radius:28px;justify-content:space-between;align-items:center;margin-bottom:16px;padding:16px 24px;display:flex}@media (width<=640px){.app-header{flex-direction:column;align-items:center;gap:12px;padding:12px}.app-header>div{flex-wrap:wrap;justify-content:center;gap:8px;width:100%}}.header-control{border:3px solid var(--color-dark);height:44px;font-family:var(--font-fun);background-color:var(--color-light);color:var(--color-dark);box-shadow:0 4px 0 var(--color-dark);cursor:pointer;border-radius:14px;outline:none;justify-content:center;align-items:center;padding:0 16px;font-size:.95rem;font-weight:600;transition:transform .1s,box-shadow .1s;display:inline-flex}@media (width<=480px){.header-control{height:38px;box-shadow:0 3px 0 var(--color-dark);border-radius:10px;padding:0 8px;font-size:.82rem}}.header-control:active{box-shadow:0 1px 0 var(--color-dark);transform:translateY(3px)}select.header-control{appearance:none;text-align-last:center;background-image:none;padding:0 12px}.text-truncate{white-space:nowrap;text-overflow:ellipsis;vertical-align:middle;max-width:140px;display:inline-block;overflow:hidden}@media (width<=640px){.text-truncate{max-width:80px}}.app-main{flex-direction:column;flex-grow:1;justify-content:flex-start;width:100%;margin-top:8px;display:flex}.user-grid{grid-template-columns:repeat(2,1fr);gap:24px;max-width:480px;margin:0 auto;display:grid}@media (width>=640px){.user-grid{grid-template-columns:repeat(4,1fr);max-width:100%}}.user-card{cursor:pointer;flex-direction:column;align-items:center;gap:14px;padding:24px 16px;display:flex}.user-card-name{font-family:var(--font-fun);font-size:1.35rem;font-weight:700}.hud-bar{border:4px solid var(--color-dark);width:100%;box-shadow:0 6px 0 var(--color-dark);background:#ffffffd9;border-radius:24px;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;padding:18px 24px;display:flex}@media (width<=640px){.hud-bar{text-align:center;flex-direction:column;gap:12px}}.hud-item{font-family:var(--font-fun);justify-content:center;align-items:center;gap:8px;font-size:1.35rem;display:flex}.progress-container{border:3px solid var(--color-dark);background-color:#cbd5e1;border-radius:9px;width:100%;height:18px;margin:12px 0 16px;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{background-color:var(--color-success);border-right:3px solid var(--color-dark);height:100%;transition:width .4s ease-out}.practice-grid{grid-template-columns:1fr;gap:32px;width:100%;display:grid}@media (width>=768px){.practice-grid{grid-template-columns:1.4fr 1fr}}.practice-question-text-container{flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:60px;display:flex}.practice-visualizer-container{justify-content:center;align-items:center;width:100%;height:auto;min-height:140px;padding:8px 0;display:flex}.groups-container{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;width:100%;margin:12px 0;display:flex}.group-box{background-color:#f5f3ff;border:3px solid #8b5cf6;border-radius:20px;justify-content:center;align-items:center;gap:6px;min-width:64px;min-height:64px;padding:12px;display:flex;box-shadow:0 4px #8b5cf6}.group-box.empty{background-color:#fff;width:76px;height:76px}.group-item-icon{font-size:2rem;line-height:1}.dashboard-grid{grid-template-columns:1fr;align-items:start;gap:32px;width:100%;display:grid}@media (width>=768px){.dashboard-grid{grid-template-columns:1fr 1.6fr}}.topics-list-wrapper{max-height:none;padding-right:0;overflow-y:visible}.topics-grid-container{grid-template-columns:repeat(2,1fr);gap:12px;width:100%;display:grid}@media (width>=540px){.topics-grid-container{grid-template-columns:repeat(3,1fr)}}@media (width>=900px){.topics-grid-container{grid-template-columns:repeat(4,1fr)}}.topic-tile-btn{text-align:center;min-width:0;min-height:100px;box-shadow:0 4px 0 var(--color-dark);border-radius:20px;flex-direction:column;justify-content:center;align-items:center;padding:12px 6px;display:flex}.topic-tile-btn.chunky-btn{justify-content:center;padding-left:6px}.topic-tile-btn span{margin-left:0}.topic-tile-label{margin-top:8px;font-size:1.1rem;font-weight:600;line-height:1.25;display:block}@media (width<=640px){.topic-tile-label{font-size:.85rem}.topic-tile-btn{border-radius:16px;min-height:80px;padding:8px 4px}}.folder-container{width:100%}.folder-header-btn{font-family:var(--font-fun);background-color:var(--color-light);border:3px solid var(--color-dark);box-shadow:0 6px 0 var(--color-dark);cursor:pointer;border-radius:20px;outline:none;justify-content:space-between;align-items:center;padding:14px 20px;font-size:1.15rem;font-weight:700;transition:all .15s ease-in-out;display:flex}.folder-header-btn:hover{box-shadow:0 8px 0 var(--color-dark);background-color:#f8fafc;transform:translateY(-2px)}.folder-header-btn.active{box-shadow:0 3px 0 var(--color-dark);background-color:#f1f5f9;transform:translateY(3px)}.folder-header-has-active{border-color:var(--color-primary);background-color:#faf5ff}.folder-header-has-active .folder-header-title{color:var(--color-primary)!important}@media (width<=640px){.folder-header-btn{border-radius:16px;padding:10px 16px;font-size:1rem}}.mascot-container{background:var(--color-cream);border:4px solid var(--color-dark);box-shadow:0 8px 0 var(--color-dark);border-radius:28px;flex-direction:row;align-items:center;gap:20px;padding:24px;display:flex}.mascot-avatar{font-size:4.5rem;animation:4s ease-in-out infinite wiggle-gentle}.mascot-bubble{background:var(--color-light);border:3px solid var(--color-dark);border-radius:20px;flex-grow:1;padding:16px 20px;font-size:1.15rem;font-weight:550;line-height:1.5;position:relative;box-shadow:0 4px #0000000d}.options-grid{grid-template-columns:1fr;gap:18px;margin-top:28px;display:grid}@media (width>=480px){.options-grid{grid-template-columns:repeat(2,1fr)}}.recent-games-scroll{max-height:320px;padding-right:8px;overflow-y:auto}.recent-games-scroll::-webkit-scrollbar{width:8px}.recent-games-scroll::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}.recent-games-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.shake{animation:.5s ease-in-out shake}.animate-bounce-slow{animation:3s ease-in-out infinite bounce-slow}@keyframes float{0%,to{transform:scale(1.1)translateY(-4px)}50%{transform:scale(1.1)translateY(-10px)}}@keyframes bounce-slow{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes wiggle-gentle{0%,to{transform:rotate(0)scale(1)}25%{transform:rotate(5deg)scale(1.05)}75%{transform:rotate(-5deg)scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-10px)}40%,80%{transform:translate(10px)}}.bilingual-en{color:var(--color-dark);white-space:pre-line}.bilingual-ms{color:#1d4ed8;white-space:pre-line;margin-top:6px;font-size:.95em;font-style:italic}.confetti-canvas{pointer-events:none;z-index:100;width:100%;height:100%;position:fixed;inset:0}.dashboard-tabs{display:none}.mobile-hide{display:flex!important}@media (width<=640px){body{font-size:16px;overflow-y:auto}body.practice-active{height:100dvh;overflow:hidden}#root{min-height:100vh;padding:16px 12px}body.practice-active #root{height:100%;padding:10px;overflow:hidden}.app-header{box-shadow:0 4px 0 var(--color-dark);border-width:3px;gap:8px;margin-bottom:10px;padding:10px 16px;flex-direction:row!important}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}.chunky-card{box-shadow:0 6px 0 var(--color-dark);border-width:3px;border-radius:24px;margin-bottom:16px;padding:20px}.chunky-btn{min-height:48px;box-shadow:0 4px 0 var(--color-dark);border-width:3px;border-radius:16px;padding:10px 18px;font-size:1.05rem}.chunky-btn:active{box-shadow:0 0px 0 var(--color-dark);transform:translateY(4px)}.practice-active .mb-8{margin-bottom:12px}.practice-active .mb-6{margin-bottom:10px}.practice-active .mb-4{margin-bottom:8px}.practice-active .mb-3{margin-bottom:6px}.practice-active .mb-2{margin-bottom:4px}.practice-active .mt-4{margin-top:10px}.practice-active .mt-2{margin-top:6px}.practice-active .gap-6{gap:12px}.practice-active .gap-4{gap:8px}.practice-active .gap-3{gap:6px}.practice-active .gap-2{gap:4px}.practice-active .p-6{padding:12px}.practice-active .p-4{padding:8px}.practice-active .p-3{padding:6px}.topics-grid-container{gap:8px!important}.topic-tile-btn{border-radius:16px!important;min-height:80px!important;padding:8px 4px!important}.topic-tile-label{margin-top:4px!important;font-size:.9rem!important;font-weight:600!important;line-height:1.15!important}.avatar-badge{width:70px;height:70px;box-shadow:0 4px 0 var(--color-dark);border-width:3px;font-size:2.6rem}.dashboard-tabs{border:3px solid var(--color-dark);background:#0000000d;border-radius:18px;width:100%;margin-bottom:16px;padding:4px;display:flex;box-shadow:inset 0 3px #0000000d}.dashboard-tab-btn{font-family:var(--font-fun);cursor:pointer;color:var(--color-dark);background:0 0;border:none;border-radius:12px;flex:1;padding:8px 12px;font-size:1rem;font-weight:600;transition:all .15s ease-out}.dashboard-tab-btn.active{background:var(--color-primary);color:#fff;border:3px solid var(--color-dark);box-shadow:0 4px 0 var(--color-dark);transform:translateY(-2px)}.mobile-hide{display:none!important}.settings-container{box-sizing:border-box;padding-bottom:24px;max-height:none!important;overflow-y:visible!important}.recent-games-scroll{max-height:160px}.hud-bar{border-width:3px;border-radius:16px;gap:6px;margin-bottom:10px;padding:8px 12px;flex-direction:row!important}.hud-item{font-size:.95rem}.progress-container{border-width:3px;height:16px;margin:8px 0 12px}.practice-grid{flex-direction:column;justify-content:flex-start;gap:8px;height:calc(100vh - 120px);display:flex;overflow:hidden}.practice-question-text-container{height:auto!important;min-height:48px!important}.practice-visualizer-container{padding:4px 0;height:auto!important;min-height:100px!important}.groups-container{gap:8px!important;margin:8px 0!important}.group-box{border-width:2.5px!important;border-radius:14px!important;min-width:48px!important;min-height:48px!important;padding:6px 10px!important;box-shadow:0 3px #8b5cf6!important}.group-box.empty{width:58px!important;height:58px!important}.group-item-icon{font-size:1.4rem!important}.mascot-container{box-shadow:0 4px 0 var(--color-dark);border-width:3px;border-radius:18px;gap:12px;padding:8px 12px}.mascot-avatar{font-size:2.5rem}.mascot-bubble{border-width:2px;border-radius:14px;padding:6px 12px;font-size:.9rem}.options-grid{gap:10px;margin-top:12px;grid-template-columns:repeat(2,1fr)!important}.counting-container{margin:6px auto;padding:6px}.counting-icon{width:38px!important;height:38px!important}svg[viewBox^="0 0 180 180"]{width:110px!important;height:110px!important}svg[viewBox^="0 0 240 44"]{width:160px!important;height:30px!important}svg[viewBox^="0 0 140 140"]{width:90px!important;height:90px!important}svg[viewBox^="0 0 180 150"]{width:120px!important;height:100px!important}svg[viewBox^="0 0 150 150"]{width:100px!important;height:100px!important}svg[viewBox^="0 0 280 60"]{width:200px!important;height:44px!important}}