body{
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100vh;
  background:#051438;
  font-family:Arial,sans-serif;
  color:#fff;
  -webkit-user-select:none;
  user-select:none;
}
#gameContainer {
  position: relative;
  width: 800px;
  height: 600px;
  padding-top: 30px;  /* This also works, depending on how content is drawn */
}

#gameCanvas{
  display:block;
  border-radius:10px;
  box-shadow:0 0 20px rgba(0,0,0,.5);
}
#questionDiv{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.9);
  padding:20px;
  border-radius:10px;
  width:80%;
  z-index:10;
  text-align:center;
}
.option-btn{
  background:#ED2939;       /* Singapore red */
  color:#fff;
  padding:10px 20px;
  margin:8px;
  border:none;
  border-radius:5px;
  cursor:pointer;
  width:80%;
  font-size:16px;
  transition:background .3s;
}
.option-btn:hover{background:#C52232;}
h1{margin:0 0 5px;text-shadow:2px 2px 4px rgba(0,0,0,.5);}
#factDiv{
  position:absolute;
  color:#fff;
  font-size:14px;
  background:rgba(0,0,0,.7);
  padding:5px;
  border-radius:5px;
  display:none;
}
#gameStatus{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  font-size:18px;
  z-index:5;
}

/* --- on‑screen controls --- */
#controlButtons{
  display:flex;
  justify-content:center;
  gap:20px;
  width:800px;
  margin:10px 0;
}
.control-btn{
  background:#ED2939;
  color:#fff;
  border:none;
  border-radius:5px;
  width:80px;
  height:60px;
  font-size:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  touch-action:manipulation;
}
.control-btn:active{background:#A11B27;}