/*
 * Start screen: the approved artwork, shown unchanged and whole.
 *   landscape → assets/intro.webp         1671 × 941
 *   portrait  → assets/intro-mobile.webp   941 × 1672
 * Both have a transparent outside corner; the blue felt (assets/felt-blue.webp)
 * covers the whole viewport behind them.
 *
 * The three hotspots are invisible buttons placed over the painted buttons, in
 * percentages of each picture (measured from the image files), so they scale
 * and stay aligned with it at every size:
 *                  landscape (px)             portrait (px)
 *   PLAY           x 548–1112, y 515–665      x 172–764, y 636–815
 *   Free Placement x 570–1092, y 688–795      x 220–725, y 845–965
 *   Settings gear  x  70–192,  y 740–862      x  52–184, y 1454–1586
 */

.intro {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #0a3f95 url("../assets/felt-blue.webp") center / cover no-repeat;
}
.intro[hidden] { display: none; }

/* The artwork box: as large as fits inside the safe area, aspect kept. */
.intro-art {
  --avail-w: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
  --avail-h: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  position: relative;
  width: min(var(--avail-w), calc(var(--avail-h) * 1671 / 941));
  aspect-ratio: 1671 / 941;
}
.intro-art picture,
.intro-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ---- invisible hotspots over the painted buttons ---- */
.hotspot {
  position: absolute;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Keyboard users still see where focus is. */
.hotspot:focus { outline: none; }
.hotspot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(10, 40, 110, 0.6); }

.hs-play { left: 32.795%; top: 54.729%; width: 33.752%; height: 15.940%; border-radius: 999px; }
.hs-free { left: 34.111%; top: 73.114%; width: 31.239%; height: 11.371%; border-radius: 999px; }
.hs-gear { left: 4.189%;  top: 78.640%; width: 7.301%;  height: 12.965%; border-radius: 50%; }

/* ---- portrait screens: the vertical artwork ---- */
@media (orientation: portrait) {
  .intro-art {
    width: min(var(--avail-w), calc(var(--avail-h) * 941 / 1672));
    aspect-ratio: 941 / 1672;
  }
  .hs-play { left: 18.278%; top: 38.038%; width: 62.912%; height: 10.706%; }
  .hs-free { left: 23.379%; top: 50.538%; width: 53.666%; height: 7.177%; }
  .hs-gear { left: 5.526%;  top: 86.962%; width: 14.028%; height: 7.895%; }
}