/* EduQuest — app chrome & shared styles */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:#140D28;
  background-image:radial-gradient(900px 600px at 12% 4%, rgba(123,92,255,0.20), transparent 60%),
                   radial-gradient(800px 500px at 88% 30%, rgba(69,198,240,0.13), transparent 60%);
  background-attachment:fixed;
  font-family:Nunito, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#phone{
  width:402px;height:874px;position:relative;overflow:hidden;flex:none;
  background:#241A3F;border-radius:48px;
  box-shadow:0 40px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
  transform-origin:center center;
}
#screen{position:absolute;inset:0}
.scr{position:absolute;inset:0;overflow:hidden;animation:eqFadeIn 180ms ease}

/* status bar + home indicator overlays */
#statusbar{
  position:absolute;top:0;left:0;right:0;height:50px;z-index:60;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;padding:14px 30px 0;
}
#statusbar .sb-time{font:590 16px -apple-system, 'SF Pro', system-ui;letter-spacing:0.2px}
#homeind{
  position:absolute;bottom:0;left:0;right:0;height:24px;z-index:60;pointer-events:none;
  display:flex;justify-content:center;align-items:flex-end;padding-bottom:8px;
}
#homeind div{width:139px;height:5px;border-radius:100px}

/* animations (from design helmet) */
@keyframes eqFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes eqPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.18);opacity:.2}}
@keyframes eqTwinkle{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
@keyframes eqBob{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-7px) rotate(2.5deg)}}
@keyframes eqSheen{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes eqFadeIn{from{opacity:0}to{opacity:1}}
@keyframes eqPopIn{0%{transform:scale(0.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes eqWobble{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes eqRise{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes eqRays{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.float{animation:eqFloat 4s ease-in-out infinite}
.bob{animation:eqBob 3.6s ease-in-out infinite}
.pop{animation:eqPopIn 320ms cubic-bezier(.34,1.4,.64,1)}
.rise{animation:eqRise 260ms ease}
.wobble{animation:eqWobble 240ms ease}
.rays{animation:eqRays 20s linear infinite}

/* buttons */
.press{cursor:pointer;transition:transform 90ms ease;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.press:active{transform:translateY(3px)}

/* answer states */
.ans{transition:background 140ms ease, color 140ms ease, box-shadow 140ms ease}
.ans.good{background:#3DBE6E !important;color:#fff !important;box-shadow:0 6px 0 #2A9455 !important}
.ans.warm{background:#FFF3D6 !important;color:#8A5A0A !important;box-shadow:0 6px 0 #E8D0A8 !important;animation:eqWobble 240ms ease}

/* toast */
#toast{
  position:absolute;left:20px;right:20px;bottom:120px;z-index:80;height:52px;border-radius:18px;
  background:#241A3F;box-shadow:0 10px 24px -8px rgba(0,0,0,0.6), 0 0 0 1.5px rgba(255,255,255,0.10) inset;
  display:flex;align-items:center;gap:10px;padding:0 16px;pointer-events:none;
  opacity:0;transform:translateY(12px);transition:opacity 200ms ease, transform 200ms ease;
}
#toast.on{opacity:1;transform:translateY(0)}
#toast span{font:800 13.5px Nunito;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* calm mode: parent setting halves motion / removes flourish */
.calm .scr, .calm .scr *{animation:none !important}
.calm .press{transition:none}

/* scrollable regions inside fixed layouts */
.vscroll{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.vscroll::-webkit-scrollbar{display:none}

/* sparkles overlay on celebration screens */
.spark{position:absolute;pointer-events:none;animation:eqTwinkle 1.6s ease-in-out infinite}

/* real-phone fit */
@media (max-width:500px){
  #phone{border-radius:0;box-shadow:none}
}

/* app (PWA) mode */
html,body{touch-action:manipulation;overscroll-behavior:none}
#stage{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
body.standalone-touch #statusbar{display:none}