/*
  The game's own face, before it opens. Composition, not invention: the
  colours and faces are the client's ground state from /app.css, and the print
  is the catalog's paper mount — amateur register, a slight tilt, a caption in
  the corner, because imperfection reads as a person took this.

  The values below are this screen's own tokens, declared once; nothing in the
  rules that follow is a literal.
*/
.splash {
  --splash-measure: 26rem;
  --mount-pad: 0.6rem;
  --mount-pad-foot: 2.2rem;
  --mount-tilt: -1.6deg;
  --mount-shadow: 0 0.2rem 1.4rem color-mix(in srgb, var(--ink) 18%, transparent);
  --wordmark: clamp(2.6rem, 11vw, 3.6rem);
  --small: 0.85rem;
  --lead: 1.1rem;
  --tracking: 0.08em;
  --mount-paper: color-mix(in srgb, var(--paper) 55%, #fff);
}

.splash main {
  width: min(100%, var(--splash-measure));
  margin: auto;
  padding: calc(var(--gap) * 2.5) var(--gap) calc(var(--gap) * 3);
  text-align: center;
}

.splash .kicker {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--small);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}

.splash h1 {
  margin: 0;
  font: 600 var(--wordmark)/1.1 var(--display);
  color: var(--ink);
}

.splash .print {
  margin: calc(var(--gap) * 2) auto;
  padding: var(--mount-pad) var(--mount-pad) var(--mount-pad-foot);
  background: var(--mount-paper);
  box-shadow: var(--mount-shadow);
  transform: rotate(var(--mount-tilt));
  position: relative;
}

.splash .print img {
  display: block;
  width: 100%;
  height: auto;
}

.splash .print figcaption {
  position: absolute;
  right: calc(var(--mount-pad) * 1.5);
  bottom: calc(var(--mount-pad) * 0.9);
  color: var(--ink-soft);
  font: italic var(--small) var(--display);
}

.splash .prose {
  margin: 0 0 var(--gap);
  font-size: var(--lead);
}

.splash .status {
  margin: calc(var(--gap) * 2) 0 0;
  padding-top: var(--gap);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: var(--small);
}

@media (prefers-reduced-motion: no-preference) {
  .splash main { animation: arrive calc(var(--pace) * 4) ease-out both; }
}

@keyframes arrive {
  from { opacity: 0; }
}