* {
  box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  cursor: pointer;
  background-color: #F4F1EC;
  transition: background-color 0.6s ease;
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  padding: 32px 100px;
  pointer-events: none;
}

.site-nav a {
  pointer-events: auto;
  text-decoration: none;
  font-size: 2.00rem;
  color: #7A3DDF;
  cursor: pointer;
}

.site-nav a:hover {
  opacity: 0.7;
}

.nav-right {
  display: flex;
  gap: 32px;
}

#stage {
  position: fixed;
  inset: 0;
}

.layered-image {
  position: absolute;
  height: auto;
  max-width: 92vw; /* images are sized in fixed px for desktop; this keeps
                       them from overflowing a narrow phone screen */
  opacity: 0;
  animation: fade-in 0.6s ease forwards;
}

.layered-image.missing {
  min-width: 240px;
  min-height: 180px;
  outline: 2px dashed #999;
  background: repeating-linear-gradient(45deg, #eee, #eee 10px, #ddd 10px, #ddd 20px);
}

/* Freeform (non-slot) layers: default size unless img.width overrides it. */
.layered-image.free {
  width: 320px;
}

/* Only draggable in ?arrange=1 mode (see script.js). */
body.arrange-mode .layered-image.free {
  cursor: grab;
}

body.arrange-mode .layered-image.free:active {
  cursor: grabbing;
}

#copy-layout-btn {
  position: fixed;
  bottom: 24px;
  left: 32px;
  z-index: 200;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.85rem;
  color: #fff;
  background: #7A3DDF;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  cursor: pointer;
}

#layout-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  cursor: auto;
}

#layout-overlay:not([hidden]) {
  display: flex;
}

.layout-panel {
  background: #fff;
  color: #222;
  padding: 24px;
  border-radius: 6px;
  width: min(560px, 90vw);
}

.layout-panel p {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.4;
}

#layout-output {
  width: 100%;
  height: 220px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

#layout-close {
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 8px 14px;
  border: 1px solid #222;
  background: #fff;
  cursor: pointer;
}

#text-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.step-text {
  position: absolute;
  max-width: 40ch;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #222;
  opacity: 0;
  animation: fade-in 0.6s ease forwards;
}

#hint {
  position: fixed;
  bottom: 24px;
  right: 32px;
  font-size: 0.85rem;
  color: #7A3DDF;
  opacity: 0.7;
}

.step-text.end {
  font-size: 2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #1D57D9;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

/* Sources / About: plain readable text pages, not part of the click-to-advance stage. */
body.text-page {
  position: relative; /* makes this element (the actual scroll container, see below) the
                          containing block for .site-nav's absolute positioning */
  cursor: auto;
  overflow: auto;
  padding: 120px 100px 100px;
}

/* html keeps overflow:hidden (needed on the click-to-advance sequence pages),
   which means body — not the page/viewport — is the thing that actually
   scrolls here. So the nav sits at the top of body's own content instead of
   the viewport, and scrolls away with the rest of the content as body
   scrolls, instead of staying pinned like it does on the sequence pages. */
body.text-page .site-nav {
  position: absolute;
}

.text-content {
  max-width: 100%;
  margin: 0 auto;
  color: #1D57D9;
  font-size: 2.00rem;
  line-height: 1.25;
}

.text-content h1 {
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 2rem;
}

/* Entrance animation for About/Sources — the pages reached by clicking a nav
   link, as opposed to the click-to-advance sequence pages, which don't use
   this. Nav links fade in one at a time, then the heading, then the body
   text as a group. */
body.text-page .site-nav a {
  opacity: 0;
  animation: nav-fade-in 0.5s ease forwards;
}

body.text-page .site-nav > a {
  animation-delay: 0.1s;
}

body.text-page .nav-right a:nth-child(1) {
  animation-delay: 0.22s;
}

body.text-page .nav-right a:nth-child(2) {
  animation-delay: 0.34s;
}

body.text-page .text-content h1 {
  opacity: 0;
  animation: content-fade-in 0.6s ease 0.55s forwards;
}

body.text-page .text-content > *:not(h1) {
  opacity: 0;
  animation: content-fade-in 0.6s ease 0.85s forwards;
}

@keyframes nav-fade-in {
  to {
    opacity: 1;
  }
}

@keyframes content-fade-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.text-content p {
  margin-bottom: 0.5rem;
}

.source-list {
  padding-left: 1.2rem;
}

.source-list li {
  margin-bottom: 1rem;
}

/* Phones and small tablets: the desktop layout's padding and type sizes are
   tuned for a much wider screen, so scale them down here rather than let
   things overflow or crowd the edges. */
@media (max-width: 700px) {
  .site-nav {
    padding: 16px 20px;
  }

  .site-nav a {
    font-size: 1.1rem;
  }

  .nav-right {
    gap: 16px;
  }

  .layered-image.free {
    width: 260px;
  }

  body.text-page {
    padding: 90px 24px 60px;
  }

  .text-content {
    font-size: 1.05rem;
  }

  .text-content h1 {
    font-size: 1.6rem;
  }

  .step-text {
    font-size: 1.1rem;
    max-width: 80vw;
  }

  .step-text.end {
    font-size: 1.4rem;
    max-width: 80vw;
  }

  #hint {
    right: 16px;
    bottom: 16px;
  }
}