@import"https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700&family=Fredoka:wght@500;600;700&display=swap";@tailwind base;@tailwind components;@tailwind utilities;:root{--primary-color: #ff72d2;--secondary-color: #5dd8ff;--accent-yellow: #ffd66b;--accent-lilac: #c9b6ff;--accent-mint: #7cecc1;--text-color: #35234a;--text-muted: #5d4b6a;--background-color: #fdf5ff;--white: #ffffff}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;margin:0;padding:0}body{font-family:Fredoka,"Baloo 2",system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:var(--background-color);color:var(--text-color);line-height:1.5;overflow:hidden}.container{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(1.5rem,2vw,3rem);background:radial-gradient(circle at 20% 20%,rgba(255,182,222,.7),transparent 55%),radial-gradient(circle at 80% 30%,rgba(173,230,255,.65),transparent 50%),linear-gradient(135deg,#ffe2ff,#d9f3ff 80%);overflow-y:auto;-webkit-overflow-scrolling:touch}.container.level-2{background:radial-gradient(circle at 20% 20%,rgba(255,145,180,.75),transparent 55%),radial-gradient(circle at 80% 30%,rgba(255,226,148,.7),transparent 50%),linear-gradient(135deg,#ffb1c9,#ffe9a9 80%)}.container.level-3{background:radial-gradient(circle at 20% 20%,rgba(194,160,255,.75),transparent 55%),radial-gradient(circle at 80% 30%,rgba(126,214,255,.7),transparent 50%),linear-gradient(135deg,#cdb8ff,#95e4ff 80%)}.card{position:relative;background:var(--white);border-radius:2rem;padding:clamp(2rem,3vw,3.25rem);width:min(640px,95vw);text-align:center;box-shadow:0 25px 60px #3e235f2e;border:3px solid rgba(255,255,255,.75)}.start-card{display:flex;flex-direction:column;gap:1.75rem;background:linear-gradient(145deg,#ffffffe6,#fff7ffd9)}.start-header{display:flex;flex-direction:column;align-items:center;gap:.35rem;font-family:"Baloo 2",cursive;color:var(--text-muted)}.start-header span{font-size:1.05rem;letter-spacing:.05em}h1{font-size:clamp(2.8rem,5vw,3.6rem);font-weight:700;letter-spacing:.02em;color:var(--text-color);text-shadow:0 6px 0 rgba(255,114,210,.15)}.tagline{font-size:clamp(1.15rem,2vw,1.35rem);color:var(--text-muted);max-width:28rem;margin:0 auto;line-height:1.6}.tagline strong{color:var(--primary-color)}.level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;width:100%}.level-card{border:none;border-radius:1.5rem;padding:1.65rem 1.5rem;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:.65rem;color:var(--text-color);background:var(--white);box-shadow:0 12px 28px #3e235f1f;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}.level-card:after{content:"";position:absolute;inset:auto -25% -45% 55%;height:110%;transform:rotate(25deg);opacity:.2;background:#fff9}.level-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px #3e235f2e}.level-card strong{font-size:1.45rem;font-family:"Baloo 2",cursive}.level-card span{font-size:.95rem;color:var(--text-muted)}.level-1{background:linear-gradient(135deg,#ff72d22e,#ffd6f5e6)}.level-2{background:linear-gradient(135deg,#ffc67233,#ffecbfe6)}.level-3{background:linear-gradient(135deg,#9d89ff40,#daccfff2)}.level-cta{font-size:1.05rem;font-weight:600;color:var(--primary-color)}.game-card{display:flex;flex-direction:column;gap:1.75rem;align-items:stretch}.game-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;font-family:"Baloo 2",cursive}.game-progress-label{font-size:1.05rem;color:var(--text-muted);font-weight:600}.level-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem 1.1rem;border-radius:999px;background:#ff72d22e;color:var(--text-color);font-size:1rem}.level-chip.level-2{background:#ffc67238}.level-chip.level-3{background:#9d89ff40}.progress-container{width:100%;height:10px;background-color:#fffc;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px #3e235f14}.progress-bar{height:100%;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));border-radius:inherit;transition:width .45s cubic-bezier(.4,0,.2,1);box-shadow:0 3px 8px #ff72d240}.question-bubble{background:linear-gradient(140deg,#ff72d21f,#5dd8ff1f);border-radius:1.8rem;padding:1.75rem;font-size:clamp(2.4rem,4vw,3.1rem);font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:1rem;color:var(--text-color);min-height:140px;box-shadow:inset 0 0 0 2px #ffffffa6}.question-bubble .number-box{display:inline-flex;align-items:center;justify-content:center;width:clamp(3.5rem,6vw,4.2rem);height:clamp(3.5rem,6vw,4.2rem);border-radius:1.2rem;background:var(--white);border:3px solid rgba(255,114,210,.35);box-shadow:0 8px 20px #3e235f26;font-size:clamp(1.8rem,3vw,2.2rem)}.question-bubble .question-mark{border-style:dashed;border-width:3px;border-color:#5dd8ff80}.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem}.option{border:none;border-radius:1.4rem;background:var(--white)!important;color:var(--text-color)!important;padding:1.4rem 1.2rem;font-size:clamp(1.6rem,3vw,2rem);font-weight:700;cursor:pointer;box-shadow:0 14px 32px #3e235f29;transition:transform .18s ease,box-shadow .18s ease;outline:none;position:relative;overflow:hidden}.option:after{content:"";position:absolute;top:-80%;right:-40%;bottom:70%;left:70%;background:#ffb6de4d;transform:rotate(35deg);transition:opacity .2s ease;opacity:0}.option:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 18px 36px #3e235f38}.option:hover:after{opacity:1}.option:disabled{cursor:default;transform:none;box-shadow:0 12px 28px #3e235f1f}.option.correct{background:linear-gradient(135deg,#6fe7c0,#3ed59d)!important;color:#074231!important;box-shadow:0 18px 36px #44d6a561}.option.incorrect{background:linear-gradient(135deg,#ff9aa2,#ff5f7b)!important;color:var(--white)!important;box-shadow:0 18px 36px #ff6f8a66}.feedback{margin-top:.5rem;font-size:1.5rem;font-weight:700;padding:.75rem 1.5rem;border-radius:999px;display:inline-flex;align-items:center;gap:.5rem;background:#ff72d22e;color:var(--text-color);box-shadow:0 10px 24px #3e235f1f}.feedback.correct{background:#7cecc159;color:#0d5135}.feedback.incorrect{background:#ff9fa759;color:#6e1c2b}.success-card{display:flex;flex-direction:column;gap:1.5rem;align-items:center;background:linear-gradient(160deg,#fffffff2,#faf0ffe6)}.success-icon{font-size:clamp(3.5rem,6vw,4.5rem);display:inline-flex;align-items:center;justify-content:center;width:clamp(5rem,10vw,6.5rem);height:clamp(5rem,10vw,6.5rem);border-radius:1.75rem;background:linear-gradient(135deg,#ff72d233,#5dd8ff33);box-shadow:0 18px 36px #3e235f1f}.success-message{font-size:clamp(1.3rem,2.5vw,1.6rem);color:var(--text-muted);max-width:32rem}.stat-bubbles{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;width:100%}.stat-bubble{background:#fffc;border-radius:1.25rem;padding:1rem 1.4rem;min-width:140px;box-shadow:0 12px 28px #3e235f24;font-weight:600;color:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 2.4rem;border-radius:999px;font-weight:700;font-size:1.1rem;border:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 12px 30px #ff72d23d;color:var(--white);background:linear-gradient(135deg,var(--primary-color),#ff91e4)}.btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px #ff72d252}.btn-secondary{background:linear-gradient(135deg,var(--secondary-color),#79e6ff);box-shadow:0 12px 30px #5dd8ff3d}.btn-tertiary{background:linear-gradient(135deg,#b3a0ff,#9b8bff);box-shadow:0 12px 30px #9d89ff3d}.timestamp{margin-top:1rem;font-size:.85rem;color:#35234a8c}@supports (-webkit-touch-callout: none){.option{background:var(--white)!important;color:var(--text-color)!important}.option.correct{background:linear-gradient(135deg,#6fe7c0,#3ed59d)!important;color:#074231!important}.option.incorrect{background:linear-gradient(135deg,#ff9aa2,#ff5f7b)!important;color:var(--white)!important}}@media (max-width: 640px){.card{border-radius:1.5rem;padding:2rem 1.5rem}.question-bubble{padding:1.5rem;font-size:2.2rem;min-height:120px}.options{grid-template-columns:repeat(2,minmax(120px,1fr));gap:.75rem}.option{padding:1.2rem 1rem;font-size:1.6rem}.level-grid{grid-template-columns:1fr}}.floating-symbols-container{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:-1}.floating-symbol{position:absolute;font-size:clamp(6rem,16vw,12rem);opacity:.18;color:#ffffffa6;filter:drop-shadow(0 12px 24px rgba(62,35,95,.15));mix-blend-mode:screen;animation:float var(--duration) infinite ease-in-out;animation-delay:var(--delay);transform:translate(var(--start-x),var(--start-y))}@keyframes float{0%{transform:translate(var(--start-x),var(--start-y)) rotate(0)}25%{transform:translate(calc(var(--start-x) + 30%),calc(var(--start-y) - 30%)) rotate(90deg)}50%{transform:translate(calc(var(--start-x) + 60%),var(--start-y)) rotate(180deg)}75%{transform:translate(calc(var(--start-x) + 30%),calc(var(--start-y) + 30%)) rotate(270deg)}to{transform:translate(var(--start-x),var(--start-y)) rotate(360deg)}}.results-container{max-width:1200px;margin:0 auto;padding:2rem 1rem}.loading-container,.error-container{display:flex;justify-content:center;align-items:center;padding:2rem}.error-message{color:#dc2626;font-size:1.25rem}.stats-card{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:1.5rem;margin-bottom:2rem}.stats-title{font-size:1.5rem;font-weight:700;margin-bottom:1rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.stat-item{padding:1rem;border-radius:6px}.stat-item.blue{background-color:#eff6ff}.stat-item.green{background-color:#f0fdf4}.stat-item.yellow{background-color:#fefce8}.stat-item.purple{background-color:#f5f3ff}.stat-item.indigo{background-color:#eef2ff}.stat-item.pink{background-color:#fdf2f8}.stat-label{font-size:.875rem;color:#4b5563;margin-bottom:.5rem}.stat-value{font-size:1.25rem;font-weight:700}.level-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;margin-bottom:2rem}.level-card{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:1.5rem}.level-title{font-size:1.25rem;font-weight:700;margin-bottom:1rem}.level-stats-list{display:flex;flex-direction:column;gap:.5rem}.results-list{display:flex;flex-direction:column;gap:1rem}.result-item{padding:1rem;border-radius:8px}.result-item.passed{background-color:#f0fdf4}.result-item.failed{background-color:#fef2f2}.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.result-detail-label{font-size:.875rem;color:#4b5563;margin-bottom:.25rem}.result-detail-value{font-weight:500}#root{min-height:100vh;width:100%;margin:0;padding:0;text-align:center}.back-button{position:absolute;top:1rem;left:1rem;background:var(--white);border:none;font-size:1.5rem;cursor:pointer;color:var(--text-color);padding:.65rem;border-radius:999px;box-shadow:0 8px 20px #3e235f2e;transition:transform .2s ease,box-shadow .2s ease;display:inline-flex;align-items:center;justify-content:center}.back-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px #3e235f38}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}