*{
  box-sizing:border-box;
  -webkit-tap-highlight-color: transparent;
}

body{
  background:#05070d;
  color:#ffffff;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  margin:0;
  padding:0;
}

.container{
  max-width:900px;
  margin:auto;
  padding:16px;
}

/* LOGO */
.logo{
  text-align:center;
  margin-bottom:28px;
}

.logo-text{
  font-size:32px;
  color:#7cf;
  letter-spacing:2px;
  font-weight:700;
}

.logo-sub{
  font-size:13px;
  color:#777;
  margin-top:6px;
}

/* BLOCK */
.block{
  background:#0b0f1a;
  padding:18px;
  border-radius:12px;
}

/* QUESTIONS */
#qtext{
  font-size:15px;
  line-height:1.5;
}

/* ANSWERS */
.answers button{
  width:100%;
  margin:10px 0;
  padding:14px 12px;
  background:#111827;
  border:none;
  border-radius:10px;
  color:#7cf;
  font-size:15px;
  cursor:pointer;
  text-align:left;
}

.answers button:active{
  background:#1f2933;
}

/* RESULT */
.result{
  margin-top:14px;
  color:#9fefb8;
  font-size:14px;
  line-height:1.5;
  display:none;
}

/* NEXT */
.next{
  margin-top:20px;
  display:none;
}

.next button{
  width:100%;
  padding:14px;
  border:none;
  border-radius:30px;
  background:#7cf;
  color:#000;
  font-weight:600;
  font-size:15px;
}

/* FOOTER */
.footer{
  text-align:center;
  margin-top:50px;
  color:#666;
  font-size:12px;
  line-height:1.6;
}

.footer-link{
  color:#7cf;
  text-decoration:none;
  font-weight:600;
}

.footer-sep{
  margin:0 6px;
  color:#444;
}

/* SHARE */
.share-box{
  text-align:center;
  margin-top:22px;
}

.share-box button{
  width:100%;
  background:#25D366;
  color:white;
  border:none;
  padding:14px;
  border-radius:30px;
  font-size:15px;
  font-weight:600;
}

/* SMALL PHONES */
@media(max-width:360px){

  .logo-text{
    font-size:26px;
  }

  #qtext{
    font-size:14px;
  }

  .answers button{
    font-size:14px;
    padding:12px;
  }

  .next button{
    font-size:14px;
  }
/* --- ANSWER FEEDBACK COLORS --- */
.answers button{
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
  border:1px solid rgba(124,255,255,.12);
}

.answers button.is-correct{
  background: rgba(124,255,255,.12);
  border-color: rgba(124,255,255,.75);
  box-shadow: 0 0 0 2px rgba(124,255,255,.18), 0 0 24px rgba(124,255,255,.18);
  color:#7cf;
  transform: scale(1.01);
}

.answers button.is-wrong{
  background: rgba(255,80,80,.10);
  border-color: rgba(255,80,80,.75);
  box-shadow: 0 0 0 2px rgba(255,80,80,.16), 0 0 18px rgba(255,80,80,.12);
  color:#ff6b6b;
}

/* Disable state after answering */
.answers button.is-disabled{
  pointer-events:none;
  opacity:.75;
}

/* Physics-ish micro effects */
@keyframes pulseGlow{
  0%{ transform:scale(1); filter:brightness(1); }
  50%{ transform:scale(1.03); filter:brightness(1.15); }
  100%{ transform:scale(1); filter:brightness(1); }
}
@keyframes shake{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  50%{ transform:translateX(4px); }
  75%{ transform:translateX(-3px); }
  100%{ transform:translateX(0); }
}

.answers button.fx-correct{ animation:pulseGlow .35s ease; }
.answers button.fx-wrong{ animation:shake .28s ease; }

/* Result line color */
.result.ok{ color:#7cf; }
.result.bad{ color:#ff6b6b; }

.leaderboard{
  margin-top:40px;
  background:#0b0f1a;
  padding:18px;
  border-radius:12px;
}
.leaderboard h3{
  color:#7cf;
  text-align:center;
}
.leaderboard ol{
  padding-left:20px;
}
.leaderboard li{
  color:#ccc;
  margin:6px 0;
}
.login-box{
  background:#0b0f1a;
  padding:20px;
  border-radius:12px;
  text-align:center;
  margin-bottom:20px;
}
.login-box h3{
  color:#7cf;
}
.login-box input{
  width:100%;
  padding:12px;
  border-radius:8px;
  border:none;
  margin:12px 0;
  font-size:15px;
}
.login-box button{
  width:100%;
  background:#7cf;
  color:#000;
  padding:12px;
  border:none;
  border-radius:30px;
  font-weight:bold;
  cursor:pointer;
}

.logo{
  text-align:center;
  margin:40px 0 30px;
}

.logo-text{
  font-size:52px;
  font-weight:900;
  letter-spacing:8px;
  background:linear-gradient(90deg,#7cf,#9df,#7cf);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 25px rgba(124,255,255,.25);
}

.logo-tagline{
  margin-top:8px;
  font-size:18px;
  font-weight:600;
  color:#cfefff;
  letter-spacing:1.5px;
}

.logo-sub{
  margin-top:6px;
  font-size:13px;
  color:#9fb2c9;
  letter-spacing:.8px;
  opacity:.85;
}

/* mobile */
@media(max-width:600px){
  .logo-text{font-size:38px;letter-spacing:5px;}
  .logo-tagline{font-size:15px;}
  .logo-sub{font-size:12px;}
}
}