* { box-sizing: border-box; }
body {
  margin: 0;
  color: #f3efe6;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  background: #1a1536;
}
body.booting { overflow: hidden; }

.sheet {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 1.2rem 1rem 2rem;
  text-shadow:
    0 2px 0 #140d0a,
    2px 0 0 #140d0a,
    -2px 0 0 #140d0a,
    0 -1px 0 #140d0a;
}
.topline { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; }
footer + .topline { margin: 1.6rem 0 0; }
h1 {
  font-family: Anton, sans-serif;
  font-weight: 400;
  font-size: clamp(5rem, 18vw, 8.5rem);
  line-height: 0.8;
  margin: 0.2rem 0;
  letter-spacing: -0.03em;
}
.s-mark { position: relative; display: inline-block; }
.stacked {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0.72em;
  height: 0.72em;
  transform: translate(-50%, 22%);
  background: url("assets/double-devil.png") 0 -0.72em / 5.76em 1.44em no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  animation: stacked-walk 1s steps(8) infinite;
}
.sub { font-weight: 700; letter-spacing: 0.04em; margin-top: 0; }

.polaroid, .pair img {
  width: 100%;
  border: 10px solid #fff;
  box-shadow: 8px 8px 0 #120e22;
}
.polaroid { display: block; margin: 0.4rem 0 1.3rem; }
.polaroid.a { transform: rotate(-2.5deg); margin: 1rem 0 1.4rem; }
.polaroid.b { transform: rotate(1.4deg); }

.rules { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.rules li {
  border-top: 2px solid rgba(243, 239, 230, 0.75);
  padding: 0.55rem 0;
  font-size: 0.95rem;
}
.rules b { margin-right: 0.6rem; }
.icon-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.shop-bounce {
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  background: transparent;
  animation: shop-bob 1.5s ease-in-out infinite;
}
.shop-bounce img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  animation: shop-pop 0.7s cubic-bezier(0.18, 1.55, 0.35, 1) both;
}
.icon-list li:nth-child(2) .shop-bounce { animation-delay: 0.12s; }
.icon-list li:nth-child(3) .shop-bounce { animation-delay: 0.24s; }
.icon-list li:nth-child(4) .shop-bounce { animation-delay: 0.36s; }
.icon-list li:nth-child(5) .shop-bounce { animation-delay: 0.48s; }
.icon-list li:nth-child(2) .shop-bounce img { animation-delay: 0.12s; }
.icon-list li:nth-child(3) .shop-bounce img { animation-delay: 0.24s; }
.icon-list li:nth-child(4) .shop-bounce img { animation-delay: 0.36s; }
.icon-list li:nth-child(5) .shop-bounce img { animation-delay: 0.48s; }

.pair { display: grid; gap: 0.8rem; }
.pair img:first-child { transform: rotate(1.5deg); }
.pair img:last-child { transform: rotate(-1deg); }

.blurb { font-size: 0.95rem; max-width: 36rem; margin: 0 0 2rem; }
.blurb.center { max-width: none; text-align: center; }

.stamps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.1rem;
  margin: 0.6rem 0 1.4rem;
}
.stamp {
  display: inline-block;
  margin: 0;
  padding: 0.9rem 1.1rem;
  background: #f4f7ff;
  color: #1a1536;
  text-decoration: none;
  text-shadow: none;
  font-family: Anton, sans-serif;
  font-size: 2.4rem;
  line-height: 0.85;
  letter-spacing: 0.02em;
  transform: rotate(-3deg);
}
.stamp.ios {
  transform: rotate(2.5deg);
  margin: 0;
}
.stamp span {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  margin-top: 0.35rem;
}

footer { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; font-size: 0.8rem; }
footer a { color: #f3efe6; }

.boot {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(5, 10, 26, 0.94);
  animation: boot-out 0.35s ease 4s forwards;
}
.stage {
  position: relative;
  width: 320px;
  height: 320px;
}
.orbit {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 320px;
  animation: spin 5s linear infinite;
}
.boot-quote {
  margin: 2.6rem 0 0;
  padding: 0 0.75rem;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  font-family: Anton, sans-serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 3.8vw, 2.15rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: #f3efe6;
}
.boot-quote span {
  display: inline-block;
  margin-right: 0.22em;
  opacity: 0;
  transform: scale(0.05);
  transform-origin: center bottom;
  animation: word-pop 0.62s cubic-bezier(0.18, 1.55, 0.35, 1) forwards;
}
.boot-quote span:last-child { margin-right: 0; }
.boot-quote span:nth-child(1) { animation-delay: 0.15s; }
.boot-quote span:nth-child(2) { animation-delay: 0.37s; }
.boot-quote span:nth-child(3) { animation-delay: 0.59s; }
.boot-quote span:nth-child(4) { animation-delay: 0.81s; }
.boot-quote span:nth-child(5) { animation-delay: 1.03s; }
.boot-quote span:nth-child(6) { animation-delay: 1.25s; }
.boot-quote span:nth-child(7) { animation-delay: 1.47s; }
.boot-quote span:nth-child(8) { animation-delay: 1.69s; }
.boot-quote span:nth-child(9) { animation-delay: 1.91s; }
.arm {
  position: absolute;
  inset: 0;
  transform: rotate(var(--a));
}
.ghost {
  position: absolute;
  left: 50%;
  top: 0;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  background: url("assets/ghost-sheet.png") 0 0 / 128px 32px no-repeat;
  image-rendering: pixelated;
  animation: ghost-frames 0.8s steps(4) infinite, upright 5s linear infinite;
}
.arm:nth-child(2) .ghost { animation-delay: -0.2s, 0s; }
.arm:nth-child(3) .ghost { animation-delay: -0.4s, 0s; }
.devil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  background: url("assets/devil-guy.png") 0 -32px / 128px 64px no-repeat;
  image-rendering: pixelated;
  z-index: 2;
  animation: devil-walk 0.5s steps(4) infinite;
}

@media (min-width: 700px) {
  .pair { grid-template-columns: 1fr 1fr; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes upright {
  from { transform: scale(3.2) rotate(calc(-1 * var(--a))); }
  to { transform: scale(3.2) rotate(calc(-360deg - var(--a))); }
}
@keyframes ghost-frames { to { background-position: -128px 0; } }
@keyframes devil-walk {
  from { transform: scale(5); background-position: 0 -32px; }
  to { transform: scale(5); background-position: -128px -32px; }
}
@keyframes boot-out {
  to { opacity: 0; visibility: hidden; }
}
@keyframes stacked-walk {
  to { background-position: -5.76em -0.72em; }
}
@keyframes word-pop {
  0% { opacity: 0; transform: scale(0.05) translateY(0.6em); }
  58% { opacity: 1; transform: scale(1.24) translateY(-0.1em); }
  78% { transform: scale(0.9) translateY(0.05em); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes shop-pop {
  0% { opacity: 0; transform: scale(0.12) translateY(8px); }
  62% { opacity: 1; transform: scale(1.22) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes shop-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .boot { display: none; }
  .stacked { animation: none; }
  .boot-quote span { animation: none; opacity: 1; transform: none; }
  .shop-bounce, .shop-bounce img { animation: none; }
}