:root {
  --ink: #3a2e22;
  --cork: #e3c48d;
  --focus: #3fc5ff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  color: var(--ink);
}

.stage {
  --board-w: min(100vw, calc(100vh * 2235 / 1515));
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--cork);
  background-image: url("assets/cork-texture.jpg");
  background-size: 340px 340px;
  background-repeat: repeat;
}

/* ---------- corkboard scene ---------- */
/* .stage's tiled texture is a genuinely seamless photo, so it just
   repeats across the whole viewport with no compositing needed. the
   corkboard itself has no background of its own - it's purely an
   invisible aspect-locked coordinate box (matching the reference
   artwork's proportions) so the pinned stickers keep their correct
   relative positions and scale as one rigid layout at any size */

.corkboard {
  position: relative;
  width: var(--board-w);
  aspect-ratio: 2235 / 1515;
}

.sticker {
  position: absolute;
  display: block;
  margin: 0;
}

.sticker img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(43, 30, 10, 0.35));
}

.sticker-tape {
  left: 17.85%;
  top: 14.52%;
  width: 16.91%;
}

.sticker-madison {
  left: 31.14%;
  top: 26.14%;
  width: 41.61%;
}

.sticker-star {
  left: 48.19%;
  top: 39.21%;
  width: 8.99%;
}

.sticker-guestcheck {
  left: 32.44%;
  top: 41.25%;
  width: 17.63%;
}

.sticker-polaroid {
  left: 57.49%;
  top: 40.79%;
  width: 14.59%;
}

.sticker-camera {
  left: 61.03%;
  top: 64.49%;
  width: 19.69%;
}

.sticker-money {
  left: 22.91%;
  top: 64.55%;
  width: 11.86%;
}

.sticker-bouquet {
  left: 50.87%;
  top: 63.56%;
  width: 9.4%;
}

.sticker-star-outline {
  left: 73.24%;
  top: 19.93%;
  width: 6.85%;
}

.sticker-cd {
  left: 74.63%;
  top: 33.47%;
  width: 14.99%;
}

.sticker-star-pink {
  left: 25.91%;
  top: 29.11%;
  width: 4.83%;
}

.sticker-cherry-coke {
  left: 79.6%;
  top: 56.37%;
  width: 6.4%;
}

.sticker-star-holo {
  left: 19.55%;
  top: 54.19%;
  width: 5.91%;
}

.sticker-ribbon {
  left: 24.74%;
  top: 38.02%;
  width: 6.26%;
}

/* ---------- linked stickers ---------- */

.sticker-link {
  cursor: pointer;
  text-decoration: none;
  z-index: 2;
  transition: transform 0.2s ease;
}

.sticker-link:hover,
.sticker-link:focus-visible {
  transform: scale(1.06) translateY(-4px);
  z-index: 10;
}

.sticker-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 6px;
  border-radius: 6px;
}

.sticker-link:hover img,
.sticker-link:focus-visible img {
  filter: drop-shadow(0 16px 22px rgba(43, 30, 10, 0.45));
}

.sticker-tag {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #fff;
  color: var(--ink);
  font-family: "Kalam", cursive;
  font-weight: 700;
  font-size: clamp(0.65rem, 1.1vw, 0.95rem);
  padding: 0.25em 0.7em;
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sticker-link:hover .sticker-tag,
.sticker-link:focus-visible .sticker-tag {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

@media (hover: none) {
  .sticker-tag {
    display: none;
  }
}