/*
  MOSSY setup card alignment patch
  Purpose: Pages 2~6 setup card sits under "IMO, I'M IN KOREA!" title line.
  Scope: CSS only. No router/service/runtime changes.
*/

body[data-view="setup"] .phone{
  background-position: center top !important;
}

/* Keep the background visible but stop the card from floating into the title. */
body[data-view="setup"] #setupCard,
body[data-view="setup"] .setup-card,
body[data-view="setup"] .setupCard{
  position: absolute !important;
  left: 20px !important;
  right: 20px !important;
  top: 178px !important;       /* under the poster title/subtitle block */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 6 !important;

  background: rgba(0, 55, 22, 0.84) !important;
  -webkit-backdrop-filter: blur(5px) saturate(115%) !important;
  backdrop-filter: blur(5px) saturate(115%) !important;
  border: 1px solid rgba(88, 255, 34, 0.72) !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;

  max-height: calc(100% - 202px) !important;
  overflow: auto !important;
}

/* If the current build wraps the setup card, align the wrapper too. */
body[data-view="setup"] #setup,
body[data-view="setup"] .setup,
body[data-view="setup"] .setup-layer{
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* Keep the title area readable and visually separated from the card. */
body[data-view="setup"] .phone::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.02) 0%,
      rgba(0,0,0,0.00) 30%,
      rgba(0,0,0,0.20) 100%) !important;
}

/* Small viewport safety: if the device emulator is very short, move card slightly up. */
@media (max-height: 620px){
  body[data-view="setup"] #setupCard,
  body[data-view="setup"] .setup-card,
  body[data-view="setup"] .setupCard{
    top: 162px !important;
    max-height: calc(100% - 182px) !important;
  }
}

/* Very narrow device safety. */
@media (max-width: 380px){
  body[data-view="setup"] #setupCard,
  body[data-view="setup"] .setup-card,
  body[data-view="setup"] .setupCard{
    left: 18px !important;
    right: 18px !important;
  }
}