/* ============================================================
   一张主图 + 手机竖屏时上下两条黑边里的两张配图。
   电脑（横屏）上配图不显示，布局和之前完全一样。
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: #050507;
  color: #f4f1ea;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* 横屏 / 电脑：只有中间那张图 */
.app {
  display: grid;
  place-items: center;
  min-height: 100svh;
}

.side { display: none; }

/* 主图：整张图就是可点击区域 */
.hit {
  display: block;
  line-height: 0;
  max-width: 100vw;
  max-height: 100svh;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.hit:active { transform: scale(0.995); }
.hit:focus { outline: none; }
.hit:focus-visible {
  outline: 2px solid #ff6ec7;
  outline-offset: -2px;
}

.pic {
  display: block;
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100svh;
  object-fit: contain;
  /* 图没加载出来时，替代文字是浅色，看得见 */
  color: #f4f1ea;
  font-size: 14px;
  line-height: 1.6;
}

/* 竖屏：主图按 100vw 宽铺开，上下剩下的正好是两条黑边，
   配图用 fixed 精确贴在这两条黑边里（宽度=100vw，高度=剩余高度一半） */
@media (max-aspect-ratio: 1 / 1) {
  .side {
    position: fixed;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc((100svh - 56.25vw) / 2);
    padding: 8px 0;
    overflow: hidden;
    pointer-events: none;
  }
  .side--top { top: 0; }
  .side--bottom { bottom: 0; }
  .side img {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 100%;
    object-fit: contain;
  }
}