* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #08090c; color: #f7f4ef; font-family: Arial, sans-serif; }
body { display: grid; place-items: center; }
.app { width: min(1200px, 100%); padding: 12px; }
.player-shell { position: relative; width: 100%; aspect-ratio: 16/9; background: #11141a; overflow: hidden; border-radius: 8px; }
.video-layer, #image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-layer { z-index: 1; visibility: hidden; opacity: 0; pointer-events: none; }
.video-layer.is-active { z-index: 2; visibility: visible; opacity: 1; pointer-events: auto; }
#image { z-index: 2; display: none; }
.launch { position: absolute; z-index: 7; inset: 0; background: #000; }
.launch-poster { display: block; width: 100%; height: 100%; object-fit: contain; }
.launch-button { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); min-width: 180px; padding: 14px 22px; border: 1px solid rgba(255,255,255,.8); border-radius: 6px; background: rgba(10,10,12,.88); color: white; cursor: pointer; }
.launch-button:hover, .launch-button:focus { background: rgba(70,54,70,.94); }
.status-card { position: absolute; z-index: 5; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; background: #11141a; }
.status-card.error { background: #241113; }
.error-actions { display: flex; justify-content: center; gap: 12px; }
.start-button { position: absolute; z-index: 6; inset: 50% auto auto 50%; transform: translate(-50%, -50%); padding: 14px 22px; border: 0; border-radius: 6px; cursor: pointer; }
.choices { position: absolute; z-index: 4; left: 50%; bottom: 5%; transform: translateX(-50%); width: min(94%, 900px); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; pointer-events: none; }
.choices.visible { pointer-events: auto; }
.choice { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; padding: 12px 18px; min-width: 180px; border: 1px solid rgba(255,255,255,.65); background: rgba(10,10,12,.82); color: white; border-radius: 6px; cursor: pointer; }
.choices.visible .choice { opacity: 1; transform: translateY(0); }
.choice:hover, .choice:focus { background: rgba(70,54,70,.92); }
.choices.has-warning { display: grid; gap: 0; padding: 18px; border-radius: 12px; background: rgba(10,10,12,.88); }
.scene-warning { margin: 0 0 16px; text-align: center; line-height: 1.45; }
.supporting-line {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  color: #f0e4d1;
  line-height: 1.45;
  text-shadow: 0 1px 3px #000;
}
.choices.has-warning .choice { width: 100%; }
.choice.choice-history-seen {
  border-color: rgba(220, 185, 112, .95);
  box-shadow: inset 0 0 0 1px rgba(220, 185, 112, .45);
}
.choice.choice-history-seen::after {
  content: "Previously visited";
  display: block;
  margin-top: 4px;
  color: #dcc58f;
  font-size: .72rem;
}
.diagnostics { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #b8b4ad; font-size: .85rem; padding: 8px 2px 0; }
.transition-diagnostics { margin-top: 8px; padding: 10px; border: 1px solid #343840; border-radius: 6px; color: #b8b4ad; background: #101217; }
.transition-diagnostics h2 { margin: 0 0 8px; color: #f7f4ef; font-size: .9rem; }
.transition-diagnostics dl { display: grid; grid-template-columns: minmax(190px, 1fr) auto; gap: 3px 12px; margin: 0; font: .75rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.transition-diagnostics dt, .transition-diagnostics dd { margin: 0; }
.transition-diagnostics dd { color: #8bd5ff; text-align: right; }
.reset-history { border: 1px solid #666; background: transparent; color: #b8b4ad; border-radius: 4px; cursor: pointer; }
button { font: inherit; }
@media (max-width: 680px) {
  .app { padding: 0; }
  .player-shell { border-radius: 0; }
  .choices { bottom: 3%; gap: 8px; }
  .choice { min-width: min(100%, 260px); padding: 10px 12px; }
}

[hidden] { display: none !important; }