* { 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; }
.signoff {
  margin: 1.6rem 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.signoff span {
  display: block;
  margin-top: 0.35rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
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; }
h2.sub { font-family: inherit; font-size: 1rem; margin-bottom: 1em; }

.polaroid, .pair img {
  width: 100%;
  border: 10px solid #fff;
  box-shadow: 8px 8px 0 #120e22;
}
.polaroid {
  display: block;
  margin: 0.4rem 0 1.3rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.polaroid.chase { position: relative; }
.polaroid.chase > img { display: block; width: 100%; }
.runner {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
  animation-name: frame-lap;
  animation-duration: 9s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.runner.pawn {
  width: 52px;
  height: 52px;
  animation-delay: -0.95s;
}
.runner.pawn i {
  display: block;
  width: 100%;
  height: 100%;
  background: url("assets/blue-pawn.png") center / contain no-repeat;
  image-rendering: pixelated;
  animation: pawn-hop 0.42s ease-in-out infinite;
}
.runner.devils {
  width: 112px;
  height: 112px;
  background: url("assets/double-devil.png") 0 -112px / 896px 224px no-repeat;
  animation-name: frame-lap, devil-steps, devil-face;
  animation-duration: 9s, 0.7s, 9s;
  animation-timing-function: linear, steps(8), linear;
  animation-iteration-count: infinite, infinite, infinite;
}
.polaroid.a { transform: rotate(-2.5deg); margin: 1rem 0 1.4rem; }
.polaroid.b { transform: rotate(1.4deg); }
.polaroid:active,
.polaroid.is-held {
  transform: rotate(-1deg) translateY(-8px);
  box-shadow: 12px 16px 0 #120e22;
}
.polaroid.a:active,
.polaroid.a.is-held { transform: rotate(-5deg) translateY(-8px); }
.polaroid.b:active,
.polaroid.b.is-held { transform: rotate(3.6deg) translateY(-8px); }

.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;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.shop-bounce.hop { animation: shop-hop 0.45s cubic-bezier(0.18, 1.55, 0.35, 1); }
.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;
}
.stamps.lead { margin: 1.8rem 0; }
.stamps.lead + .polaroid { margin-top: 0; }
p.sub:first-of-type { margin-bottom: 0; }
.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;
  text-align: center;
  transform: rotate(-3deg);
  box-shadow: 6px 6px 0 #120e22;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.stamp.ios {
  transform: rotate(2.5deg);
  margin: 0;
}
.stamp:active,
.stamp.is-held {
  transform: rotate(-3deg) translateY(4px);
  box-shadow: 2px 2px 0 #120e22;
}
.stamp.ios:active,
.stamp.ios.is-held { transform: rotate(2.5deg) translateY(4px); }
.stamp span {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  margin-top: 0.35rem;
  white-space: nowrap;
}
.store-mark {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0 auto 0.4rem;
}

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); }
}
@keyframes shop-hop {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-16px) scale(1.14); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes frame-lap {
  0% { left: -5px; top: -5px; }
  32% { left: calc(100% + 5px); top: -5px; }
  50% { left: calc(100% + 5px); top: calc(100% + 5px); }
  82% { left: -5px; top: calc(100% + 5px); }
  100% { left: -5px; top: -5px; }
}
@keyframes devil-steps { to { background-position: -896px -112px; } }
@keyframes devil-face {
  0%, 49.9% { transform: translate(-50%, -50%) scaleX(1); }
  50%, 99.9% { transform: translate(-50%, -50%) scaleX(-1); }
  100% { transform: translate(-50%, -50%) scaleX(1); }
}
@keyframes pawn-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@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; }
  .runner, .runner.pawn i, .runner.devils { animation: none; }
  .runner.pawn { left: 64%; top: -5px; }
  .runner.devils { left: 36%; top: -5px; }
  .polaroid,
  .polaroid.a,
  .polaroid.b,
  .stamp,
  .stamp.ios { transition: none; }
  .polaroid:active,
  .polaroid.is-held { transform: none; box-shadow: 8px 8px 0 #120e22; }
  .polaroid.a:active,
  .polaroid.a.is-held { transform: rotate(-2.5deg); }
  .polaroid.b:active,
  .polaroid.b.is-held { transform: rotate(1.4deg); }
  .stamp:active,
  .stamp.is-held { transform: rotate(-3deg); box-shadow: 6px 6px 0 #120e22; }
  .stamp.ios:active,
  .stamp.ios.is-held { transform: rotate(2.5deg); }
}