/* Reset + base */
* { box-sizing: border-box; }
html,body {
  margin:0; padding:0; height:100%; width:100%;
  background:#000; font-family: Arial, sans-serif; color:#fff;
}

/* START SCREEN */
#start-screen {
  position: fixed; inset:0;
  background: rgba(0,0,0,0.95);
  display:flex; justify-content:center; align-items:center;
  z-index:1000;
}

.start-box {
  width: 88%;
  max-width: 700px;
  background: #111;
  padding: 28px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.7);
}

.start-box h2 { margin: 0 0 12px; font-size: 22px; }
.start-box p { line-height:1.4; margin: 0 0 14px; color:#ddd; }
.brand { margin: 10px 0 6px; color:#ff6b6b; letter-spacing:1px; font-weight:700; }

#start-btn {
  margin-top: 8px;
  padding: 12px 22px;
  font-size:16px;
  background:#ff3b3b; color:#fff; border:none; border-radius:8px; cursor:pointer;
}
#start-btn:hover { filter:brightness(1.05); }

/* SUPPORT line inside the box */
.support-box {
  margin-top:16px;
  font-size:14px;
  color:#ccc;
}
.support-box a { color:#ffd27f; text-decoration:none; }
.support-box a:hover { text-decoration:underline; }

/* GAME CONTAINER */
#game-container {
  position: relative;
  width: 100vw; height: 100vh;
  display:flex; justify-content:center; align-items:center;
}

/* VIDEO — giữ tỉ lệ, chiếm ~80% */
#video-player {
  width: 80vw;
  max-width: 1400px;
  height: auto;
  max-height: 80vh;
  background:#000;
  object-fit: contain;
  border-radius:6px;
  outline: 3px solid rgba(255,255,255,0.04);
}

/* Text overlay (appears after video ends) */
#text-overlay {
  position: absolute;
  top: 5%;
  left: 0; right: 0;
  text-align:center;
  font-size: 22px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
  pointer-events: none;
}

/* Choices (buttons) */
#choices-container {
  position: absolute;
  bottom: 6%;
  left: 0; right: 0;
  text-align:center;
  pointer-events: auto;
}
.choice-button {
  display:inline-block;
  margin: 8px;
  padding: 10px 18px;
  font-size: 18px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
}
.choice-button:hover { background: rgba(255,255,255,0.22); }
