/* Generated from manifest.json. Strategy: swap @ 768px. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; min-height: 100%;
  /* image-set() lets the browser pick WebP and fall back to JPEG.
     A separate @media rule below swaps in a smaller mobile-sized image
     on narrow viewports so phones don't download the desktop file. */
  background-image: url("/shared-assets/site-background.jpg");
  background-image: image-set(
    url("/shared-assets/site-background.webp") type("image/webp"),
    url("/shared-assets/site-background.jpg") type("image/jpeg")
  );
  background-color: #ffffff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ── Desktop (≥ 768px): full-bleed fixed frame, contain-scaled stage ── */
@media (min-width: 768px) {
  html, body { height: 100%; overflow: hidden; }
  .frame {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    overflow: hidden;
  }
  .stage-desktop {
    position: absolute; top: 0; left: 0;
    width: 1920px; height: 1080px;
    transform-origin: 0 0;
    will-change: transform;
  }
  .stage-mobile { display: none; }
}

/* ── Mobile (< 768px): body scrolls vertically, stage scales by width ── */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; overflow-y: auto; }
  .stage-desktop { display: none; }
  .frame {
    position: relative;
    width: 100vw;
    height: calc(100vw * 844 / 390);
  }
  .stage-mobile {
    position: absolute;
    top: 0; left: 0;
    width: 390px; height: 844px;
    transform-origin: 0 0;
    will-change: transform;
  }
  /* Mobile-sized background — ~32KB instead of ~400KB on phones. */
  html, body {
    background-image: url("/shared-assets/site-background-mobile.jpg");
    background-image: image-set(
      url("/shared-assets/site-background-mobile.webp") type("image/webp"),
      url("/shared-assets/site-background-mobile.jpg") type("image/jpeg")
    );
  }
}
.stage img.el, .stage div.el, .stage h1.el, .stage h2.el, .stage p.el, .stage span.el, .stage button.el, .stage a.el, .stage strong.el {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  user-select: none;
  -webkit-user-drag: none;
}
/* Link wrappers: scale + filter applied to the whole anchor so the hit area
   stays in sync with the visual. transform-origin: center keeps the icon
   anchored at its center while it grows. */
.stage a.link-wrap {
  display: block;
  line-height: 0;
  text-decoration: none;
  transition: transform .12s ease-out, filter .12s ease-out;
  transform-origin: center center;
}
.stage a.link-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}
.stage a.link-wrap.is-hover {
  transform: scale(1.08);
  filter: brightness(1.12) drop-shadow(0 0 10px rgba(255,255,255,.65));
}
.stage a.link-wrap:active { transform: scale(.95); }
.stage .el-el_1 { display: none; }

/* ── Desktop layout (1920×1080) ── */
.stage-desktop .el-el_1 {
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 1;
}

.stage-desktop .el-el_2 {
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 1;
}

/* ── Mobile layout (390×844) ── */
.stage-mobile .el-el_1 {
  left: 0px;
  top: 0px;
  width: 390px;
  height: 845px;
  z-index: 1;
}

.stage-mobile .el-el_2 {
  left: -328px;
  top: 121px;
  width: 1015px;
  height: 571px;
  z-index: 1;
}

.back-link {
  position: fixed;
  inset-block-start: 16px;
  inset-inline-start: 16px;
  z-index: 9999;
  display: inline-block;
  padding: 10px 18px;
  background: linear-gradient(180deg, #ffb340 0%, #ff7a00 100%);
  border: 3px solid #000;
  box-shadow: inset 0 0 0 2px #fff, 3px 3px 0 #000;
  color: #000;
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  text-shadow: 1px 1px 0 #fff;
  image-rendering: pixelated;
  transition: transform .1s ease-out, box-shadow .1s ease-out;
}
.back-link:hover {
  background: linear-gradient(180deg, #ffc960 0%, #ff8c20 100%);
  transform: translate(-2px, -2px);
  box-shadow: inset 0 0 0 2px #fff, 5px 5px 0 #000;
}
.back-link:active {
  transform: translate(2px, 2px);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 #000;
}
@media (max-width: 767px) {
  .back-link { padding: 8px 14px; font-size: 15px; inset-block-start: 12px; inset-inline-start: 12px; }
}