:root {
  --bg: #ffffff;
  --shell-bg: #faf2f6;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: light;
}

/* ===== Default mobile flow (<768px) ===== */
.pc-bg { display: none; }
.pc-hs { display: none; }
.pc-stage { width: 100%; }
.pc-stage-inner { width: 100%; }

.phone-scroll {
  width: 100%;
  margin: 0 auto;
  background: #fff;
}

/* ===== Mobile blocks ===== */
.block {
  position: relative;
  display: block;
  font-size: 0;
  line-height: 0;
}
.block picture,
.block img {
  display: block;
  width: 100%;
  height: auto;
}
.block img {
  user-select: none;
  -webkit-user-drag: none;
}

/* ===== Tap hotspots inside phone-scroll blocks ===== */
.hotspot {
  position: absolute;
  display: block;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  z-index: 2;
  min-width: 44px;
  min-height: 44px;
  transition: background-color .15s ease;
  -webkit-tap-highlight-color: rgba(255, 77, 142, 0.25);
}
.hotspot:hover,
.hotspot:focus-visible {
  background-color: rgba(255, 77, 142, 0.12);
  outline: none;
}
.hotspot:focus-visible {
  outline: 3px solid rgba(255, 77, 142, 0.6);
  outline-offset: 2px;
}
.hotspot:active {
  background-color: rgba(255, 77, 142, 0.2);
}

/* ===== Tablet portrait (480-980px) ===== */
@media (min-width: 480px) and (max-width: 980px) {
  body { background: var(--shell-bg); }
  .phone-scroll {
    max-width: 420px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    margin: 24px auto;
    overflow: hidden;
  }
}

/* ===== PC layout (>=981px) =====
   1440x716 design is scaled to FIT entirely within the viewport (contain),
   so no content is ever cropped at any viewport size.
   --pc-scale = min(VW/1440, VH/716) is set by JS.
   The letterbox/pillarbox gap is filled with #ebeef2 to match the PC frame's
   edge color, making the gap visually blend with the design.
   Everything inside .pc-stage-inner is positioned in DESIGN PIXELS (1440x716);
   the transform scales the whole stage uniformly. */
@media (min-width: 981px) {
  html, body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    /* Match PC frame's dominant edge color (top/bottom/right of design)
       so the letterbox gap blends with the design seamlessly. */
    background: #ebeef2;
  }

  .pc-stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #ebeef2;
  }

  .pc-stage-inner {
    position: absolute;
    width: 1440px;
    height: 716px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--pc-scale, 1));
    transform-origin: center center;
  }

  /* Show PC frame backdrop in design pixel size */
  .pc-bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 1440px;
    height: 716px;
    z-index: 0;
  }
  .pc-bg img {
    display: block;
    width: 1440px;
    height: 716px;
  }

  /* PC hotspots: positioned in design pixels (left/top/width/height in px) */
  .pc-hs {
    display: block;
    position: absolute;
    background: transparent;
    cursor: pointer;
    border-radius: 999px;
    z-index: 3;
    transition: background-color .15s ease;
    -webkit-tap-highlight-color: rgba(255, 77, 142, 0.25);
  }
  .pc-hs:hover,
  .pc-hs:focus-visible {
    background-color: rgba(255, 77, 142, 0.12);
    outline: none;
  }
  .pc-hs:focus-visible {
    outline: 3px solid rgba(255, 77, 142, 0.6);
    outline-offset: 2px;
  }

  /* Phone scroll overlay positioned at design's phone slot:
     PC artboard phone area: x=926, y=0, w=390, h=716 (design px) */
  .phone-scroll {
    position: absolute;
    left: 926px;
    top: 0;
    width: 390px;
    height: 716px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
    background: #fff;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
    margin: 0;
    max-width: none;
    border-radius: 0;
    overscroll-behavior: contain;
  }

  /* Custom scrollbar for the phone area */
  .phone-scroll::-webkit-scrollbar { width: 6px; }
  .phone-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); }
  .phone-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
  }
  .phone-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.4); }
  .phone-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.04);
  }
}

/* ===== Reduce motion ===== */
@media (prefers-reduced-motion: reduce) {
  .hotspot,
  .pc-hs { transition: none; }
}