/* MathBlast Shared Styles — shared.css */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800;900&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --space:#0a0a1a;--deep:#0d0d2b;--yellow:#FFD93D;--orange:#FF6B35;
  --teal:#00E5CC;--pink:#FF4ECD;--green:#4EFF91;--blue:#4E9FFF;
  --purple:#A855F7;--red:#FF4444;--gold:#F59E0B;
  --white:#F0F4FF;--card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);--border2:rgba(255,255,255,.24);
}
html{scroll-behavior:smooth;}
body{font-family:'Nunito',sans-serif;background:var(--space);color:var(--white);overflow-x:hidden;min-height:100vh;}

/* Stars */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 20% 30%,rgba(26,5,51,.8) 0%,transparent 50%),
             radial-gradient(ellipse at 80% 70%,rgba(0,26,51,.8) 0%,transparent 50%),#0a0a1a;}
.star{position:fixed;background:#fff;border-radius:50%;animation:twinkle var(--d,3s) ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:var(--lo,.2)}50%{opacity:var(--hi,1)}}
.app{position:relative;z-index:1;min-height:100vh;}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.4rem;
  border-bottom:1px solid var(--border);background:rgba(10,10,26,.88);
  backdrop-filter:blur(20px);position:sticky;top:0;z-index:300;gap:.6rem;flex-wrap:wrap;}
.logo{font-family:'Fredoka One',cursive;font-size:1.38rem;color:var(--yellow);text-decoration:none;white-space:nowrap;}
.logo span{color:var(--teal);}
.nav-links{display:flex;gap:.3rem;flex-wrap:wrap;}
.nav-btn{background:var(--card);border:1px solid var(--border);color:var(--white);
  padding:.38rem .82rem;border-radius:50px;font-family:'Nunito',sans-serif;
  font-weight:700;font-size:.76rem;cursor:pointer;transition:all .2s;white-space:nowrap;text-decoration:none;display:inline-block;}
.nav-btn:hover,.nav-btn.active{background:var(--yellow);color:#000;border-color:var(--yellow);}

/* Buttons */
.btn{font-family:'Nunito',sans-serif;font-weight:800;font-size:.92rem;
  padding:.72rem 1.55rem;border-radius:50px;border:none;cursor:pointer;
  transition:all .2s;display:inline-flex;align-items:center;gap:.4rem;justify-content:center;text-decoration:none;}
.btn-primary{background:var(--yellow);color:#000;box-shadow:0 0 22px rgba(255,217,61,.3);}
.btn-primary:hover{transform:translateY(-2px) scale(1.03);}
.btn-teal{background:var(--teal);color:#000;}.btn-teal:hover{transform:translateY(-2px) scale(1.03);}
.btn-pink{background:var(--pink);color:#fff;}.btn-pink:hover{transform:translateY(-2px) scale(1.03);}
.btn-green{background:var(--green);color:#000;}.btn-green:hover{transform:translateY(-2px) scale(1.03);}
.btn-blue{background:var(--blue);color:#fff;}.btn-blue:hover{transform:translateY(-2px) scale(1.03);}
.btn-purple{background:var(--purple);color:#fff;}.btn-purple:hover{transform:translateY(-2px) scale(1.03);}
.btn-orange{background:var(--orange);color:#fff;}.btn-orange:hover{transform:translateY(-2px) scale(1.03);}
.btn-gold{background:var(--gold);color:#000;}.btn-gold:hover{transform:translateY(-2px) scale(1.03);}
.btn-secondary{background:transparent;color:var(--white);border:2px solid var(--border);}
.btn-secondary:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px);}
.btn-sm{font-size:.74rem;padding:.42rem 1rem;}
.btn-lg{font-size:1.05rem;padding:.85rem 1.9rem;}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none!important;}

/* Layout */
.page{max-width:860px;margin:0 auto;padding:1.4rem;}
.section{padding:1rem 0;margin-bottom:1rem;}
.section-title{font-family:'Fredoka One',cursive;font-size:1.3rem;color:var(--yellow);margin-bottom:.85rem;text-align:center;}
.badge-label{display:inline-block;font-size:.65rem;font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;padding:.22rem .65rem;border-radius:50px;margin-bottom:.7rem;}
.badge-new{background:rgba(255,68,68,.2);border:1px solid var(--red);color:var(--red);}
.badge-trending{background:rgba(255,107,53,.2);border:1px solid var(--orange);color:var(--orange);}
.badge-hot{background:rgba(255,217,61,.15);border:1px solid var(--yellow);color:var(--yellow);}

/* Game screen */
.game-screen{max-width:700px;margin:0 auto;}
.game-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.2rem;gap:.6rem;flex-wrap:wrap;}
.game-title{font-family:'Fredoka One',cursive;font-size:1.45rem;}
.game-sub{font-size:.68rem;font-weight:700;color:rgba(240,244,255,.48);margin-top:.18rem;}
.stats-row{display:flex;gap:.45rem;flex-wrap:wrap;}
.stat-chip{background:var(--card);border:1px solid var(--border);border-radius:50px;
  padding:.28rem .78rem;font-weight:800;font-size:.82rem;display:flex;align-items:center;gap:.28rem;}
.sc-y{color:var(--yellow);}.sc-t{color:var(--teal);}.sc-g{color:var(--green);}
.sc-p{color:var(--pink);}.sc-o{color:var(--orange);}
.danger{color:var(--pink)!important;border-color:var(--pink)!important;animation:pulse .6s ease infinite;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* Question card */
.q-card{background:var(--card);border:2px solid var(--border);border-radius:20px;
  padding:1.8rem 1.2rem;text-align:center;margin-bottom:1rem;}
.q-label{font-size:.67rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:.65rem;}
.q-text{font-family:'Fredoka One',cursive;font-size:clamp(2rem,7vw,3.6rem);color:var(--white);}
.q-op{color:var(--orange);margin:0 .22em;}

/* Answer grid */
.ans-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:.9rem;}
.ans-btn{font-family:'Fredoka One',cursive;font-size:1.5rem;padding:.92rem;
  border-radius:15px;border:2px solid var(--border);background:var(--card);
  color:var(--white);cursor:pointer;transition:all .15s;width:100%;}
.ans-btn:hover:not(:disabled){border-color:var(--teal);transform:scale(1.04);background:rgba(0,229,204,.1);}
.ans-btn.correct{background:rgba(78,255,145,.2);border-color:var(--green);color:var(--green);animation:pop .3s ease;}
.ans-btn.wrong{background:rgba(255,78,205,.2);border-color:var(--pink);color:var(--pink);animation:shake .3s ease;}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* Feedback */
.feedback{text-align:center;font-family:'Fredoka One',cursive;font-size:1.15rem;min-height:1.9rem;}
.fb-g{color:var(--green);}.fb-b{color:var(--pink);}

/* Progress bar */
.prog-wrap{background:rgba(255,255,255,.07);border-radius:50px;height:5px;margin-bottom:1rem;overflow:hidden;}
.prog-bar{height:100%;border-radius:50px;background:linear-gradient(90deg,var(--teal),var(--green));transition:width .4s ease;}

/* Result screen */
.result-screen{max-width:480px;margin:2rem auto;padding:2rem 1.2rem;text-align:center;}
.result-em{font-size:4rem;margin-bottom:.65rem;animation:float 3s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.result-screen h2{font-family:'Fredoka One',cursive;font-size:2rem;margin-bottom:.24rem;}
.score-big{font-family:'Fredoka One',cursive;font-size:3.2rem;color:var(--yellow);}
.result-sub{color:rgba(240,244,255,.52);font-weight:600;margin:.32rem 0 1.2rem;}
.result-btns{display:flex;gap:.65rem;justify-content:center;flex-wrap:wrap;margin-top:1rem;}

/* Confetti */
.confetti-p{position:fixed;top:-10px;pointer-events:none;z-index:9999;border-radius:2px;animation:fall linear forwards;}
@keyframes fall{0%{transform:translateY(0) rotate(0deg);opacity:1;}100%{transform:translateY(110vh) rotate(720deg);opacity:0;}}

/* Toast */
.toast{position:fixed;bottom:1.8rem;left:50%;transform:translateX(-50%);
  background:#0f0f2a;border:2px solid var(--yellow);border-radius:50px;
  padding:.6rem 1.3rem;display:flex;align-items:center;gap:.5rem;
  font-weight:800;font-size:.84rem;z-index:9998;animation:tin .4s ease;white-space:nowrap;}
@keyframes tin{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* Footer */
.footer{text-align:center;padding:2rem 1.4rem;font-size:.75rem;color:rgba(240,244,255,.3);font-weight:600;border-top:1px solid var(--border);margin-top:2rem;}
.footer a{color:rgba(240,244,255,.5);text-decoration:none;}
.footer a:hover{color:var(--yellow);}

::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--deep);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}