/* Keep every screen inside the space below the shared PlayPuzzle header. */
body.ppgh-body > #root {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.ppgh-body > #root > .relative.overflow-hidden.bg-cream,
body.ppgh-body #root .min-h-dvh.relative.z-10 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

/* The generated banner is applied only to the opening screen's unique layout. */
#root .min-h-dvh.flex.flex-col.items-center.justify-center.bg-cream.px-6.py-10 {
  position: relative;
  isolation: isolate;
  align-items: flex-start;
  min-height: calc(100dvh - var(--ppgh-height, 64px));
  padding: clamp(40px, 7vw, 96px);
  background: #17154f url('/sequence-fixer/assets/images/sequence-fixer-banner.webp') center / cover no-repeat;
}

#root .min-h-dvh.flex.flex-col.items-center.justify-center.bg-cream.px-6.py-10::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(11 12 66 / 38%), transparent 62%);
}

#root .min-h-dvh.flex.flex-col.items-center.justify-center.bg-cream.px-6.py-10 > .text-8xl {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 26px;
  background: rgb(255 255 255 / 16%);
  font-size: 3.5rem;
  backdrop-filter: blur(10px);
}

#root .min-h-dvh.flex.flex-col.items-center.justify-center.bg-cream.px-6.py-10 h1 {
  max-width: 8ch;
  color: white;
  font-size: clamp(3.1rem, 7vw, 6.8rem);
  line-height: .9;
  text-align: left;
  text-shadow: 0 4px 24px rgb(8 8 55 / 36%);
}

#root .min-h-dvh.flex.flex-col.items-center.justify-center.bg-cream.px-6.py-10 > p {
  max-width: 34ch;
  color: #efedff;
  text-align: left;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
}

#root .min-h-dvh.flex.flex-col.items-center.justify-center.bg-cream.px-6.py-10 > button {
  background: #ffe16b;
  box-shadow: 0 8px 0 #d6a82f, 0 18px 35px rgb(11 12 66 / 25%);
}

@media (max-width: 700px) {
  #root .min-h-dvh.flex.flex-col.items-center.justify-center.bg-cream.px-6.py-10 {
    justify-content: flex-end;
    min-height: calc(100dvh - var(--ppgh-height, 56px));
    padding: 220px 24px 92px;
    background-position: 66% center;
  }
  #root .min-h-dvh.flex.flex-col.items-center.justify-center.bg-cream.px-6.py-10::before {
    background: linear-gradient(0deg, rgb(12 13 67 / 96%) 0%, rgb(12 13 67 / 68%) 50%, transparent 78%);
  }
  #root .min-h-dvh.flex.flex-col.items-center.justify-center.bg-cream.px-6.py-10 > .text-8xl { width: 64px; height: 64px; margin-bottom: 10px; font-size: 2.7rem; }
  #root .min-h-dvh.flex.flex-col.items-center.justify-center.bg-cream.px-6.py-10 h1 { font-size: clamp(2.8rem, 14vw, 4.5rem); }
  #root .min-h-dvh.flex.flex-col.items-center.justify-center.bg-cream.px-6.py-10 > p { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  #root *, #root *::before, #root *::after { animation: none !important; transition-duration: .01ms !important; }
}