/* Math Stars Game Widget — floating button + overlay */

/* Floating fox button */
#math-stars-btn{
  position:fixed;
  right:24px;
  bottom:94px;
  z-index:9998;
  width:44px;height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#FF6B35,#FFD700);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0.6;
  font-size:22px;
  box-shadow:0 2px 12px rgba(255,107,53,0.3);
  transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
  animation:ms-idle 3s ease-in-out infinite;
}
#math-stars-btn:hover{
  opacity:1;
  transform:scale(1.15) rotate(-8deg);
  box-shadow:0 4px 20px rgba(255,107,53,0.5);
  animation:none;
}
@keyframes ms-idle{
  0%,85%,100%{transform:rotate(0deg)}
  89%{transform:rotate(-6deg)}
  93%{transform:rotate(6deg)}
  96%{transform:rotate(-3deg)}
}

/* Overlay */
#math-stars-overlay{
  position:fixed;inset:0;
  z-index:10001;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:none;
  align-items:center;justify-content:center;
  opacity:0;
  transition:opacity .3s ease;
}
#math-stars-overlay.open{display:flex;opacity:1}

/* Modal */
#math-stars-modal{
  position:relative;
  width:min(900px,95vw);
  height:min(700px,90vh);
  background:#0D0D1A;
  border-radius:20px;
  border:1px solid rgba(255,215,0,0.2);
  overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,0.5);
  transform:scale(0.95);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
#math-stars-overlay.open #math-stars-modal{transform:scale(1)}

#math-stars-iframe{
  width:100%;height:100%;border:none;
  display:block;
}

/* Close button */
#math-stars-close{
  position:absolute;
  top:12px;right:12px;
  z-index:2;
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;font-size:18px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
  line-height:1;
}
#math-stars-close:hover{background:rgba(255,68,68,0.3)}

/* Accessibility: reduced motion */
@media(prefers-reduced-motion:reduce){
  #math-stars-btn,
  #math-stars-btn:hover,
  #math-stars-overlay,
  #math-stars-modal{
    animation:none!important;
    transition:none!important;
  }
}

/* Mobile */
@media(max-width:767px){
  #math-stars-btn{
    right:16px;
    bottom:86px;
  }
  #math-stars-modal{
    max-width:100vw;max-height:100vh;
    width:100vw;height:100vh;
    border-radius:0;
  }
}