@import "https://fonts.googleapis.com/css2?family=Fredoka+One&family=Inter:wght@400;600;800&display=swap";:root{--color-bg-dark:#0f172a;--color-bg-panel:#1e293bb3;--color-primary:#3b82f6;--color-secondary:#ec4899;--color-accent:#84cc16;--color-text-main:#f8fafc;--color-text-muted:#94a3b8;--color-gold:#fbbf24;--color-error:#ef4444;--font-heading:"Fredoka One",cursive,system-ui;--font-body:"Inter",system-ui,sans-serif;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:4rem;--shadow-glow:0 0 15px #3b82f680;--shadow-card:0 10px 15px -3px #00000080;--glass-border:1px solid #ffffff1a;--radius-lg:1rem;--radius-xl:1.5rem;--radius-full:9999px;--transition-fast:.2s cubic-bezier(.4,0,.2,1);--transition-bounce:.5s cubic-bezier(.68,-.55,.265,1.55)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--color-bg-dark);color:var(--color-text-main);background-image:radial-gradient(circle at 10% 20%,#3b82f626 0%,#0000 20%),radial-gradient(circle at 90% 80%,#ec489926 0%,#0000 20%);min-height:100vh;overflow-x:hidden}h1,h2,h3,h4{font-family:var(--font-heading);letter-spacing:.05em}button{font-family:var(--font-heading);cursor:pointer;border:none;outline:none}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--color-bg-dark)}::-webkit-scrollbar-thumb{background:var(--color-bg-panel);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.glass-panel{background:var(--color-bg-panel);-webkit-backdrop-filter:blur(12px);border:var(--glass-border);box-shadow:var(--shadow-card);border-radius:var(--radius-lg)}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;padding:var(--spacing-sm)var(--spacing-xl);border-radius:var(--radius-full);font-size:1.25rem;transition:transform .1s,box-shadow .1s;box-shadow:0 4px #0003}.btn-primary:active{transform:translateY(4px);box-shadow:0 0 #0000}.btn-primary:hover{filter:brightness(1.1)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}.shake-anim{animation:.5s cubic-bezier(.36,.07,.19,.97) both shake}.leaderboard{width:100%;max-width:500px;margin-top:2rem;padding:2rem;animation:.5s ease-out slideUp}.leaderboard h2{color:var(--color-gold);text-align:center;text-shadow:0 0 10px #fbbf2480;margin-bottom:1.5rem}.scores-list{flex-direction:column;gap:.5rem;display:flex}.score-row{border-radius:var(--radius-lg);font-family:var(--font-body);background:#ffffff0d;justify-content:space-between;padding:.75rem 1rem;font-weight:600;transition:transform .2s;display:flex}.score-row:hover{background:#ffffff1a;transform:scale(1.02)}.score-row.highlight{border:1px solid var(--color-primary);background:linear-gradient(90deg,#3b82f64d,#ec48994d)}.rank{color:var(--color-text-muted);width:30px}.name{text-align:left;flex:1;padding-left:1rem}.score-val{color:var(--color-accent);font-family:var(--font-heading)}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.main-menu{text-align:center;flex-direction:column;justify-content:center;align-items:center;height:80vh;display:flex}.title{background:linear-gradient(to right,var(--color-primary),var(--color-secondary),var(--color-accent));-webkit-text-fill-color:transparent;text-transform:uppercase;filter:drop-shadow(0 0 20px #3b82f666);-webkit-background-clip:text;margin-bottom:0;font-size:6rem}.subtitle{color:var(--color-text-muted);font-size:2rem;font-family:var(--font-heading);margin-bottom:3rem}.input-group{flex-direction:column;align-items:center;gap:.5rem;margin-bottom:2rem;display:flex}.name-input{border:2px solid var(--color-primary);border-radius:var(--radius-full);color:#fff;font-size:1.5rem;font-family:var(--font-heading);text-align:center;background:#ffffff1a;outline:none;width:300px;padding:1rem 2rem;transition:all .3s}.name-input:focus{box-shadow:0 0 15px var(--color-primary);background:#fff3}.error-msg{color:var(--color-error);font-family:var(--font-heading);font-size:1.2rem}.start-btn{text-transform:uppercase;letter-spacing:2px;padding:1rem 4rem;font-size:2rem;animation:2s infinite pulse}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #ec4899b3}70%{transform:scale(1.05);box-shadow:0 0 0 20px #ec489900}to{transform:scale(1);box-shadow:0 0 #ec489900}}.card{perspective:1000px;cursor:pointer;width:100px;height:140px;position:relative}.card-inner{text-align:center;width:100%;height:100%;transform-style:preserve-3d;border-radius:var(--radius-lg);transition:transform .6s cubic-bezier(.4,.2,.2,1);position:relative;box-shadow:0 4px 6px #0000001a}.card.flipped .card-inner{transform:rotateY(180deg)}.card.matched .card-inner{box-shadow:0 0 15px var(--color-accent),0 0 30px var(--color-accent);transform:rotateY(180deg)scale(.95)}.card-front,.card-back{backface-visibility:hidden;border-radius:var(--radius-lg);border:2px solid #ffffff1a;justify-content:center;align-items:center;width:100%;height:100%;font-size:3rem;display:flex;position:absolute}.card-front{background:linear-gradient(135deg,var(--color-primary),#1e293b);color:#ffffff80}.card-back{color:#000;background:linear-gradient(135deg,#fff,#f1f5f9);transform:rotateY(180deg)}.card:hover .card-inner{box-shadow:0 0 20px var(--color-primary)}.card-pattern{font-family:var(--font-heading);background:-webkit-linear-gradient(#eee,#333);-webkit-text-fill-color:transparent;opacity:.3;-webkit-background-clip:text;font-size:4rem}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.card.matched{animation:.4s ease-out pop}.game-board-container{width:100%;max-width:1200px;padding:var(--spacing-md);flex-direction:column;justify-content:center;align-items:center;margin:0 auto;display:flex}.game-info{gap:var(--spacing-xl);font-family:var(--font-heading);color:var(--color-gold);text-shadow:0 2px 4px #00000080;margin-bottom:2rem;padding:1rem 2rem;font-size:1.5rem;animation:.5s ease-out slideDown;display:flex}.card-grid{gap:var(--spacing-md);padding:var(--spacing-md);grid-template-columns:repeat(4,1fr);display:grid}@media (max-width:600px){.card-grid{grid-template-columns:repeat(3,1fr)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.math-modal-overlay{z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.math-modal{text-align:center;width:500px;max-width:90vw;padding:3rem;animation:.3s cubic-bezier(.175,.885,.32,1.275) popIn}.math-modal h2{color:var(--color-gold);margin-bottom:1rem;font-size:2.5rem}.problem{font-size:4rem;font-family:var(--font-heading);color:#fff;margin-bottom:2rem}.options-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.option-btn{color:var(--color-bg-dark);border-radius:var(--radius-lg);font-size:2rem;font-family:var(--font-heading);background:#fff;padding:1rem;transition:transform .1s}.option-btn:hover{background:var(--color-primary);color:#fff;transform:scale(1.05)}.option-btn:active{transform:scale(.95)}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.timer-container{border:2px solid var(--color-primary);border-radius:var(--radius-full);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172acc;padding:.5rem 1.5rem;transition:all .3s;position:absolute;top:1rem;right:2rem;box-shadow:0 0 15px #3b82f64d}.timer-text{font-family:var(--font-heading);color:var(--color-text-main);font-variant-numeric:tabular-nums;font-size:2rem}.timer-container.urgent{border-color:var(--color-error);animation:1s infinite pulse-red}.timer-container.urgent .timer-text{color:var(--color-error)}@keyframes pulse-red{0%{transform:scale(1);box-shadow:0 0 #ef4444b3}70%{transform:scale(1.05);box-shadow:0 0 0 10px #ef444400}to{transform:scale(1);box-shadow:0 0 #ef444400}}