/* The approved artwork supplies every visible element. No responsive rearrangement. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: #000;
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: #000;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.card {
  position: relative;
  width: 100%;
  max-width: 887px;
  aspect-ratio: 887 / 1774;
  margin: 0 auto;
  background: #000;
}

.card picture,
.card-artwork {
  display: block;
  width: 100%;
}

.card-artwork {
  height: auto;
  aspect-ratio: 887 / 1774;
}

/* Master image coordinates: left buttons x47..438, right x452..843.
   The slightly enlarged transparent areas do not touch each other.
   Percentage calculations stay attached to the full 887 × 1774 artwork. */
.hotspot {
  position: absolute;
  z-index: 1;
  display: block;
  width: calc(402 * 100% / 887);
  background: transparent;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.column-left {
  left: calc(42 * 100% / 887);
}

.column-right {
  left: calc(447 * 100% / 887);
}

.row-one {
  top: calc(1278 * 100% / 1774);
  height: calc(95 * 100% / 1774);
}

.row-two {
  top: calc(1375 * 100% / 1774);
  height: calc(92 * 100% / 1774);
}

.row-three {
  top: calc(1469 * 100% / 1774);
  height: calc(94 * 100% / 1774);
}

.row-four {
  top: calc(1565 * 100% / 1774);
  height: calc(99 * 100% / 1774);
}

/* Only keyboard focus receives an accessibility outline; the normal card is unchanged. */
.hotspot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}