/* GAFFERMODE V1.5 — flicker-free dedicated navigation tour.
   tour-guard stays active for the entire guided tour, including the single
   animation frame in which app.js swaps one tour step for the next. */
body.tour-active,
body.tour-guard{
  overflow:hidden;
  min-height:100vh;
  background:radial-gradient(circle at 50% 12%,#214b35 0,#0a1912 38%,#06100c 100%);
}

/* Never expose the live game UI while the tour is active or transitioning. */
body.tour-active #app,
body.tour-guard #app{
  visibility:hidden!important;
}

/* The tour card is appended directly to body, so it remains visible even
   while the live app is hidden. */
body.tour-active .tour-card,
body.tour-guard .tour-card{
  visibility:visible!important;
  top:50%;
  bottom:auto;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(680px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  overflow:auto;
  border-color:#6e7f57;
  box-shadow:0 36px 110px rgba(0,0,0,.76);
}

/* Highlighting the hidden underlying interface is unnecessary. */
body.tour-active .tour-target,
body.tour-guard .tour-target{
  outline:none!important;
  box-shadow:none!important;
}

@media(max-width:620px){
  body.tour-active .tour-card,
  body.tour-guard .tour-card{
    top:50%;
    bottom:auto;
    width:calc(100vw - 24px);
    max-height:calc(100vh - 32px);
    padding:18px;
  }
}