* { box-sizing: border-box; }
body {
  margin: 0;
  height: 100vh;
  font-family: system-ui, Arial, sans-serif;
  background: #000 url('images/bg_space.jpg') center/cover no-repeat;
  color: #fff;
  overflow: hidden;
}

#container { position: absolute; inset: 0; }

/* Mission and buttons */
#missionBox {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.6); padding: 10px 18px; border-radius: 10px;
  z-index: 2;
}
#buttons {
  position: absolute; top: 70px; left: 50%; transform: translateX(-50%);
  display:flex; gap:12px; z-index: 2;
}
#confirmBtn, #endBtn {
  cursor:pointer; padding: 10px 16px; border-radius: 8px; border: none; font-weight: 700;
}
#confirmBtn { background:#ffcf33; color:#000; }
#endBtn { background:#ff5555; color:#fff; }

/* Info and quiz */
#infoBox {
  position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.7); padding: 12px 18px; border-radius: 10px;
  width: 70%; text-align:center; z-index:2;
}
.hidden { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.visible { opacity: 1; pointer-events: auto; transition: opacity .2s ease; }

#quizBox {
  position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.8); padding: 14px 18px; border-radius: 10px;
  width: 70%; text-align:center; z-index:2;
}
#quizOptions button {
  margin: 6px; padding: 8px 14px; border-radius: 8px; background:#2e9afe;
  color:#fff; border:none; cursor:pointer;
  transition: all 0.2s ease;
}
#quizOptions button:hover { background:#2080f0; }
#quizOptions button.selected { background:#2ecc71; } /* Green highlight */

/* Score box */
#scoreBox {
  position: absolute;
  top: 20px;
  right: 28px;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #ffffff;
  z-index: 2;
}

/* Scorecard */
#scoreCard {
  position: absolute; inset: 0; display:flex; align-items:center; justify-content:center;
  z-index: 3;
}
#scoreCard > div {
  background: rgba(0,0,0,0.9); padding: 26px 32px; border-radius: 12px; width: 560px;
  text-align: center;
}
#scoreCard button {
  margin: 12px 8px 0 8px; padding: 10px 18px; border-radius:8px; border:none;
  background:#2e9afe; color:#fff; cursor:pointer;
}