*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
}
body{
  background-color: #1a1a1a;
  color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container{
  max-width: 900px;
  width: 100%;
  text-align: center;
}
h1{
  margin-bottom:12px;
  color:#88ff88;
}
.info-bar{
  display: flex;
  gap: 40px;
  justify-content: center;
  font-size:22px;
  margin-bottom:10px;
}
.time-board{
  color:#ffdd77;
}
.time-warning{
  color:#ff5555;
}
.video-wrap{
  position: relative;
  width: 800px;
  height: 550px;
  border: 3px solid #444;
  border-radius: 8px;
  overflow: hidden;
  margin:0 auto;
}
#video{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scaleX(-1);
}
#gameCanvas{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
}
.modal-box{
  background:#222;
  padding:40px;
  border-radius:16px;
  border:2px solid #66ff66;
}
.modal-box h2{
  font-size:32px;
  margin-bottom:16px;
}
.modal-box p{
  margin-bottom:24px;
  font-size:18px;
}
.modal-box button{
  padding:10px 20px;
  margin:0 8px;
  font-size:17px;
  border:none;
  border-radius:8px;
  cursor:pointer;
}
.modal-box button:nth-child(1){
  background:#44aa44;
  color:white;
}
.modal-box button:nth-child(2){
  background:#aa4444;
  color:white;
}