/* Myquiz-like screens + smooth transitions */
.screen{
  display:none;
  opacity:0;
  transform: translate3d(0,10px,0);
  transition: opacity .22s ease, transform .22s ease;
}
.screen.active{
  display:block;
  opacity:1;
  transform: translate3d(0,0,0);
}

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width:560px){
  .grid-2{grid-template-columns:1fr;}
}

.choice{
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(15,40,70,0.12);
  background: rgba(255,255,255,0.78);
  cursor:pointer;
  user-select:none;
  font-weight:900;
  transition: transform .08s ease, box-shadow .18s ease, outline-color .2s ease;
}
.choice:active{transform: scale(0.99);}
.choice.good{outline: 3px solid rgba(0,184,255,0.35);}
.choice.bad{outline: 3px solid rgba(255,61,107,0.35);}
.choice.disabled{opacity:0.70; cursor:default;}

.timer{
  height:10px;border-radius:999px;
  background:rgba(15,40,70,0.10);
  overflow:hidden;
  border:1px solid rgba(15,40,70,0.08);
}
.timer > div{
  height:100%;
  width:100%;
  background: linear-gradient(90deg, rgba(0,184,255,0.90), rgba(107,92,255,0.90));
  transform-origin:left center;
  transform: scaleX(1);
  transition: transform .1s linear;
}

.table{
  width:100%;
  border-collapse:collapse;
}
.table td,.table th{
  padding:10px 8px;
  border-bottom:1px solid rgba(15,40,70,0.10);
  text-align:left;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(15,40,70,0.10);
  background: rgba(255,255,255,0.65);
}