/* ── style-splash.css — Proxacle splash page ───────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #F5F0E8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* clip any overhang from the larger image */
}

/* ── Poster — shrinks to the image so absolute zones map exactly to it ──────── */
#poster {
  position: relative;
  line-height: 0; /* removes the gap that sits under inline images */
}

#poster-img {
  display: block;
  max-height: 125vh;
  max-width: 125vw;
  object-fit: contain;
}

/* ── Invisible clickable zones — no visible border, subtle hover tint ────────── */
.zone {
  position: absolute;
  display: block;
  border-radius: 4px;
  transition: background 0.2s ease;
  text-decoration: none;
  cursor: pointer;
}

#zone-top {
  top:    28%;
  left:    8%;
  width:  84%;
  height: 37%;
}

#zone-top:hover {
  background: rgba(201, 168, 76, 0.15);
}

#zone-bottom {
  top:    67%;
  left:    8%;
  width:  84%;
  height: 22%;
}

#zone-bottom:hover {
  background: rgba(59, 130, 246, 0.15);
}