/* ════════════════════════════════════════
   Math Quiz Plugin — math-quiz.css v1.0
   All rules scoped to .mq-app
   ════════════════════════════════════════ */

.mq-app *{box-sizing:border-box;margin:0;padding:0;}

.mq-app{
  font-family:'Nunito',sans-serif;
  background-color:#f0f4ff;
  background-image:
    linear-gradient(rgba(100,130,255,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,130,255,.11) 1px,transparent 1px);
  background-size:40px 40px;
  min-height:580px;
  display:flex;align-items:flex-start;justify-content:center;
  padding:32px 16px 56px;
  position:relative;overflow:hidden;
  border-radius:20px;
  color:#0a0a1a;
}

/* Floating math symbols */
.mq-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.mq-sym{
  position:absolute;
  font-family:'JetBrains Mono',monospace;font-weight:800;
  color:#2563eb;user-select:none;
  animation:mqFloat linear infinite;
}
@keyframes mqFloat{
  0%  {transform:translateY(110%) rotate(0deg);}
  100%{transform:translateY(-30%) rotate(20deg);}
}

/* ── Screens ── */
.mq-screen{display:none;width:100%;max-width:560px;flex-direction:column;align-items:center;gap:0;position:relative;z-index:1;}
.mq-screen.mq-active{display:flex;animation:mqUp .42s cubic-bezier(.22,1,.36,1);}
@keyframes mqUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}

/* ════ HOME ════ */
#mq-home{gap:16px;}

.mq-header{
  width:100%;text-align:center;
  background:#2563eb;border-radius:24px;
  padding:30px 24px 26px;position:relative;overflow:hidden;
  box-shadow:0 6px 0 #1d4ed8,0 10px 28px rgba(37,99,235,.32);
}
.mq-header::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.07);}
.mq-header::after{content:'∑ π √';position:absolute;bottom:8px;right:16px;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:22px;color:rgba(255,255,255,.12);letter-spacing:5px;}

.mq-badge{display:inline-block;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.28);border-radius:20px;padding:4px 14px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:12px;}
.mq-title{font-family:'Fredoka One',cursive;font-size:clamp(34px,8vw,56px);color:#fff;line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.18);margin-bottom:4px;}
.mq-sub  {font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,.72);}

/* Step cards */
.mq-card{
  width:100%;background:#fff;
  border:3px solid #0a0a1a;border-radius:20px;
  padding:18px 18px 16px;
  box-shadow:5px 5px 0 #0a0a1a;
}
.mq-step-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.mq-step-num{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'Fredoka One',cursive;font-size:16px;color:#fff;flex-shrink:0;}
.mq-sn1{background:#ec4899;}
.mq-sn2{background:#f97316;}
.mq-sn3{background:#8b5cf6;}
.mq-step-lbl{font-weight:900;font-size:14px;color:#0a0a1a;}
.mq-pills{display:flex;flex-wrap:wrap;gap:8px;}

.mq-pill{
  padding:9px 16px;border-radius:50px;font-weight:800;font-size:13px;cursor:pointer;
  border:2.5px solid #e2e8f0;background:#f8faff;color:#64748b;
  transition:all .18s;font-family:'Nunito',sans-serif;white-space:nowrap;
}
.mq-pill:hover{border-color:#94a3b8;color:#0a0a1a;}
.mq-st {border-color:#ec4899!important;background:#fdf2f8!important;color:#ec4899!important;box-shadow:3px 3px 0 #ec4899!important;}
.mq-sr {border-color:#f97316!important;background:#fff7ed!important;color:#f97316!important;box-shadow:3px 3px 0 #f97316!important;}
.mq-sc {border-color:#8b5cf6!important;background:#f5f3ff!important;color:#8b5cf6!important;box-shadow:3px 3px 0 #8b5cf6!important;}

.mq-start{
  width:100%;padding:17px;
  background:#10b981;border:3px solid #0a0a1a;border-radius:16px;
  color:#fff;font-family:'Fredoka One',cursive;font-size:21px;
  cursor:pointer;transition:all .16s;
  box-shadow:5px 5px 0 #047857;letter-spacing:.5px;
}
.mq-start:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:7px 7px 0 #047857;}
.mq-start:active:not(:disabled){transform:translate(2px,2px);box-shadow:3px 3px 0 #047857;}
.mq-start:disabled{opacity:.38;cursor:not-allowed;background:#94a3b8;box-shadow:5px 5px 0 #475569;}

/* ════ QUIZ ════ */
#mq-quiz{gap:13px;}

.mq-qbar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.mq-back{
  background:#fff;border:2.5px solid #0a0a1a;border-radius:11px;
  padding:8px 14px;font-weight:800;font-size:12px;color:#0a0a1a;
  cursor:pointer;box-shadow:3px 3px 0 #0a0a1a;transition:all .15s;font-family:'Nunito',sans-serif;
}
.mq-back:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #0a0a1a;}
.mq-back:active{transform:translate(1px,1px);box-shadow:2px 2px 0 #0a0a1a;}

.mq-cnt{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;color:#64748b;text-align:center;}
.mq-cnt b{color:#0a0a1a;font-size:15px;}

.mq-tbadge{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 13px;border-radius:20px;border:2px solid;}
.mq-tsq  {color:#f97316;border-color:#f97316;background:#fff7ed;}
.mq-tcb  {color:#06b6d4;border-color:#06b6d4;background:#ecfeff;}
.mq-tboth{color:#8b5cf6;border-color:#8b5cf6;background:#f5f3ff;}

/* Dots */
.mq-dots{display:flex;gap:5px;width:100%;}
.mq-dot{flex:1;height:7px;border-radius:99px;background:#e2e8f0;transition:all .3s;min-width:4px;}
.mq-dok {background:#10b981;}
.mq-derr{background:#ef4444;}
.mq-dcur{background:#2563eb;transform:scaleY(1.55);}

/* Question card */
.mq-qcard{
  width:100%;border-radius:22px;border:3px solid #0a0a1a;
  padding:36px 24px 30px;text-align:center;position:relative;overflow:hidden;
}
.mq-qcard.mq-sq{background:linear-gradient(145deg,#fff7ed,#fed7aa);box-shadow:6px 6px 0 #b45309;}
.mq-qcard.mq-cb{background:linear-gradient(145deg,#ecfeff,#a5f3fc);box-shadow:6px 6px 0 #0e7490;}
.mq-qcard::before{content:'';position:absolute;top:-50%;left:-30%;width:160%;height:180%;background:radial-gradient(ellipse at 40% 25%,rgba(255,255,255,.28),transparent 60%);pointer-events:none;}
.mq-qcard::after{content:attr(data-formula);position:absolute;bottom:8px;right:14px;font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.18;font-weight:700;color:#0a0a1a;letter-spacing:1px;}

/* Timer ring */
.mq-tring{position:absolute;top:13px;right:13px;width:54px;height:54px;opacity:0;transition:opacity .3s;}
.mq-tring.mq-vis{opacity:1;}
.mq-tsvg{transform:rotate(-90deg);}
.mq-tbg {fill:none;stroke:rgba(0,0,0,.1);stroke-width:4;}
.mq-tarc{fill:none;stroke:#2563eb;stroke-width:4;stroke-linecap:round;stroke-dasharray:138;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;}
.mq-tarc.mq-warn  {stroke:#f97316;}
.mq-tarc.mq-danger{stroke:#ef4444;animation:mqPulse .5s ease-in-out infinite alternate;}
@keyframes mqPulse{from{stroke:#ef4444;}to{stroke:#ff8080;}}
.mq-tnum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:15px;color:#0a0a1a;}
.mq-tnum.mq-warn  {color:#f97316;}
.mq-tnum.mq-danger{color:#ef4444;}

.mq-qtag  {font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(0,0,0,.42);margin-bottom:16px;}
.mq-bignum{font-family:'Fredoka One',cursive;font-size:clamp(54px,13vw,86px);line-height:1;color:#0a0a1a;text-shadow:3px 3px 0 rgba(0,0,0,.1);margin-bottom:8px;}
.mq-bignum sup{font-size:44%;vertical-align:super;font-family:'JetBrains Mono',monospace;font-weight:800;}
.mq-expand{font-family:'JetBrains Mono',monospace;font-size:13px;color:rgba(0,0,0,.48);}

/* Input */
.mq-inrow{display:flex;gap:9px;width:100%;}
.mq-inp{
  flex:1;background:#fff;border:3px solid #0a0a1a;border-radius:14px;
  padding:14px 16px;font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:800;
  color:#0a0a1a;text-align:center;outline:none;
  transition:border-color .18s,box-shadow .18s;
  box-shadow:4px 4px 0 #0a0a1a;-moz-appearance:textfield;
}
.mq-inp::placeholder{color:#cbd5e1;font-size:14px;font-weight:700;}
.mq-inp::-webkit-outer-spin-button,.mq-inp::-webkit-inner-spin-button{-webkit-appearance:none;}
.mq-inp:focus{border-color:#2563eb;box-shadow:4px 4px 0 #2563eb;}
.mq-inp.mq-ok{border-color:#10b981;box-shadow:4px 4px 0 #10b981;background:#f0fdf4;}
.mq-inp.mq-er{border-color:#ef4444;box-shadow:4px 4px 0 #ef4444;background:#fff1f2;}

.mq-chk{
  padding:0 20px;background:#2563eb;border:3px solid #0a0a1a;border-radius:14px;
  font-family:'Fredoka One',cursive;font-size:16px;color:#fff;
  cursor:pointer;transition:all .15s;white-space:nowrap;
  box-shadow:4px 4px 0 #0a0a1a;
}
.mq-chk:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:5px 5px 0 #0a0a1a;}
.mq-chk:active:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 #0a0a1a;}
.mq-chk:disabled{opacity:.35;cursor:not-allowed;}

/* Feedback */
.mq-fb{
  width:100%;padding:12px 16px;border-radius:13px;border:2.5px solid transparent;
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;
  text-align:center;opacity:0;transform:translateY(7px);transition:all .26s;
  min-height:46px;display:flex;align-items:center;justify-content:center;
}
.mq-fb.mq-show{opacity:1;transform:translateY(0);}
.mq-fb.mq-ok{background:#f0fdf4;border-color:#10b981;color:#166534;}
.mq-fb.mq-er{background:#fff1f2;border-color:#ef4444;color:#991b1b;}

/* Auto progress bar */
.mq-atrack{width:100%;height:6px;background:#e2e8f0;border-radius:99px;overflow:hidden;opacity:0;transition:opacity .3s;}
.mq-atrack.mq-show{opacity:1;}
.mq-afill{height:100%;border-radius:99px;width:100%;}
.mq-afill.mq-gf{background:linear-gradient(90deg,#10b981,#06b6d4);}
.mq-afill.mq-rf{background:linear-gradient(90deg,#ef4444,#f97316);}

.mq-next{
  width:100%;padding:13px;
  background:#fff;border:3px solid #0a0a1a;border-radius:13px;
  font-family:'Fredoka One',cursive;font-size:17px;color:#0a0a1a;
  cursor:pointer;box-shadow:4px 4px 0 #0a0a1a;transition:all .15s;
  opacity:0;pointer-events:none;
}
.mq-next.mq-show{opacity:1;pointer-events:all;}
.mq-next:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #0a0a1a;}
.mq-next:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #0a0a1a;}

/* ════ RESULT ════ */
#mq-res{gap:14px;}

.mq-podium{
  width:100%;border-radius:22px;border:3px solid #0a0a1a;
  padding:38px 24px 34px;text-align:center;position:relative;overflow:hidden;
}
.mq-g5p{background:linear-gradient(145deg,#d1fae5,#6ee7b7);box-shadow:6px 6px 0 #065f46;}
.mq-g5 {background:linear-gradient(145deg,#dbeafe,#93c5fd);box-shadow:6px 6px 0 #1e3a8a;}
.mq-g4 {background:linear-gradient(145deg,#fef3c7,#fde68a);box-shadow:6px 6px 0 #78350f;}
.mq-g3 {background:linear-gradient(145deg,#ffedd5,#fdba74);box-shadow:6px 6px 0 #7c2d12;}
.mq-g2 {background:linear-gradient(145deg,#fee2e2,#fca5a5);box-shadow:6px 6px 0 #7f1d1d;}
.mq-podium::before{content:'';position:absolute;top:-40%;left:-30%;width:160%;height:180%;background:radial-gradient(ellipse at 40% 25%,rgba(255,255,255,.25),transparent 60%);pointer-events:none;}
.mq-podium::after{content:attr(data-dec);position:absolute;bottom:10px;right:16px;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:20px;opacity:.12;letter-spacing:4px;color:#0a0a1a;}

.mq-remoji{font-size:38px;margin-bottom:4px;}
.mq-rgrade{font-family:'Fredoka One',cursive;font-size:84px;line-height:1;color:#0a0a1a;text-shadow:4px 4px 0 rgba(0,0,0,.12);margin-bottom:4px;}
.mq-rtitle{font-family:'Fredoka One',cursive;font-size:26px;color:#0a0a1a;margin-bottom:5px;}
.mq-rsub  {font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(0,0,0,.52);}

.mq-srow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;}
.mq-sbox{background:#fff;border:2.5px solid #0a0a1a;border-radius:14px;padding:14px 8px;text-align:center;box-shadow:4px 4px 0 #0a0a1a;}
.mq-sbox .mq-sv{font-family:'Fredoka One',cursive;font-size:30px;color:#0a0a1a;}
.mq-sbox .mq-sl{font-family:'JetBrains Mono',monospace;font-size:10px;color:#64748b;text-transform:uppercase;letter-spacing:1.5px;margin-top:3px;}

.mq-brow{display:flex;gap:10px;width:100%;}
.mq-rb{flex:1;padding:14px;border-radius:14px;border:3px solid #0a0a1a;font-family:'Fredoka One',cursive;font-size:16px;cursor:pointer;transition:all .15s;}
.mq-rb.mq-pri{background:#2563eb;color:#fff;box-shadow:4px 4px 0 #0a0a1a;}
.mq-rb.mq-sec{background:#fff;color:#0a0a1a;box-shadow:4px 4px 0 #0a0a1a;}
.mq-rb:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #0a0a1a;}
.mq-rb:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #0a0a1a;}

/* Animations */
@keyframes mqShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.mq-shake{animation:mqShake .36s ease;}
@keyframes mqPop{0%{transform:scale(.85) translateY(12px);opacity:0;}60%{transform:scale(1.04);}100%{transform:scale(1) translateY(0);opacity:1;}}
.mq-pop{animation:mqPop .42s cubic-bezier(.34,1.5,.64,1) forwards;}