.surprise-body {
  overflow: hidden;
  min-height: var(--viewport-height);
}

.surprise-page {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: calc(var(--viewport-height) - 4.5rem);
  background: #fff;
  color: var(--case-ink);
  overflow: hidden;
  isolation: isolate;
}

.surprise-page .pin--middle {
  display: none;
}

@media (max-width: 1024px) {
  .surprise-page {
    min-height: calc(var(--viewport-height) - var(--nav-top-height));
  }

  .space-game-wrap {
    height: calc(100dvh - var(--nav-top-height));
  }
}

.space-game-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(100svh - 4.5rem);
  display: flex;
  flex-direction: column;
}

.space-game {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.space-hud {
  position: absolute;
  inset: calc(var(--pin-pad) + 3.2rem) var(--page-pad-right) auto var(--page-pad-left);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  pointer-events: none;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(15, 17, 17, .62);
}

.space-score {
  font-weight: var(--type-ui-weight);
  color: var(--case-ink);
}

.space-hud-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.space-hearts {
  display: flex;
  gap: 8px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 17px;
  line-height: 1;
}

.space-heart {
  color: rgba(15, 17, 17, .14);
  transition: color .3s ease, transform .3s ease, opacity .3s ease;
}

.space-heart--full { color: var(--case-ink); }
.space-heart--lost { color: rgba(15, 17, 17, .1); transform: scale(.82); opacity: .45; }

.space-hint {
  text-align: right;
  max-width: 220px;
  line-height: 1.45;
}

.space-over {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: auto;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.space-over.is-visible {
  display: flex;
}

.space-over-card {
  width: min(100%, 380px);
  padding: clamp(32px, 6vw, 48px);
  text-align: center;
  border: 1px solid var(--rule-color);
  border-radius: 15px;
  background: rgba(255, 255, 255, .92);
}

.space-over-title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: clamp(36px, 6vw, 56px);
  line-height: .95;
  font-weight: 400;
  color: var(--case-ink);
}

.space-over-score {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(15, 17, 17, .62);
}

.space-over-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(15, 17, 17, .04);
  color: var(--case-ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--type-ui-weight);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 100px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .2s ease;
}

.space-over-btn:hover,
.space-over-btn:focus-visible {
  border-color: var(--link-hover-pink);
  color: var(--link-hover-pink);
  background: rgba(255, 75, 183, 0.08);
}

.space-start {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(255, 255, 255, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.space-start.is-visible {
  display: flex;
}

.space-start-label {
  font-family: var(--font-serif);
  font-size: clamp(56px, 12vw, 96px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: var(--case-serif-display-track);
  color: var(--case-ink);
  text-transform: uppercase;
  animation: spaceStartFade 2s ease-out both;
}

@keyframes spaceStartFade {
  0% { opacity: 0; transform: scale(1.08); }
  12% { opacity: 1; transform: scale(1); }
  78% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .space-start-label { animation: none; opacity: 1; }
}