/*
 * 横屏设备继续使用已经稳定的手机竖屏界面。
 * 外层使用 3:2 游戏海报，中央锁定 9:16 画布，不重排任何游戏内组件。
 */
.landscape-poster-brand {
  display: none;
}

/* 只有设备实际横放时才启用海报补画；竖屏（尤其手机）不进入这一层。 */
@media (orientation: landscape) {
  html,
  body {
    overflow: hidden;
  }

  body {
    --locked-portrait-width: min(520px, calc(100svh * 9 / 16));
    padding: 0;
    background:
      linear-gradient(90deg, rgba(3, 24, 44, 0.3), transparent 31% 69%, rgba(3, 24, 44, 0.08)),
      url("./assets/landscape-poster-v1.webp") center / cover no-repeat;
  }

  body::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(2, 23, 43, 0.46), rgba(2, 23, 43, 0.04) 29%, transparent 40% 72%, rgba(4, 25, 43, 0.08)),
      radial-gradient(ellipse at 18% 20%, rgba(17, 76, 119, 0.34), transparent 38%);
  }

  .app {
    z-index: 2;
    width: var(--locked-portrait-width);
    height: min(100svh, calc(100vw * 16 / 9), 900px);
    max-height: 900px;
    aspect-ratio: 9 / 16;
    border-radius: 22px;
    border: 1px solid rgba(225, 247, 255, 0.72);
    box-shadow:
      0 0 0 5px rgba(5, 32, 52, 0.28),
      0 24px 80px rgba(0, 12, 28, 0.62);
  }

  /* 英雄养成是完整功能页，进入 top layer 后仍须逐像素覆盖 9:16 游戏壳。 */
  .hero-dialog,
  .shop-dialog {
    box-sizing: border-box;
    width: var(--locked-portrait-width);
    height: min(100svh, calc(100vw * 16 / 9), 900px);
    max-height: 900px;
    border-radius: 22px;
  }

  /* 设置仍是居中的临时弹窗，与完整功能页保持明确层级差异。 */
  .settings-dialog {
    box-sizing: border-box;
    width: min(calc(100vw - 24px), calc(var(--locked-portrait-width) - 12px));
    height: calc(100svh - 24px);
    max-height: calc(100svh - 24px);
  }

  .hero-dialog form,
  .shop-dialog form,
  .settings-dialog form {
    height: 100%;
    max-height: 100%;
    scrollbar-width: none;
  }

  .hero-dialog form::-webkit-scrollbar,
  .shop-dialog form::-webkit-scrollbar,
  .settings-dialog form::-webkit-scrollbar {
    display: none;
  }

  .landscape-poster-brand {
    position: fixed;
    z-index: 1;
    top: clamp(42px, 8svh, 82px);
    left: clamp(24px, 4vw, 62px);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: max(190px, calc((100vw - var(--locked-portrait-width)) / 2 - clamp(64px, 8vw, 112px)));
    color: #fff9dc;
    pointer-events: none;
    font-kerning: normal;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
  }

  .landscape-poster-brand::before {
    width: min(170px, 54%);
    height: 2px;
    margin-bottom: 14px;
    content: "";
    background: linear-gradient(90deg, #fff2ae, rgba(255, 242, 174, 0));
    box-shadow: 0 0 14px rgba(255, 224, 115, 0.46);
  }

  .landscape-poster-brand small {
    max-width: 100%;
    margin-bottom: 7px;
    color: #d6f5ff;
    font-family: "Avenir Next", "Segoe UI", sans-serif;
    font-size: clamp(9px, 0.86vw, 13px);
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.45;
    text-shadow: 0 2px 4px rgba(0, 20, 42, 0.9);
  }

  .landscape-poster-title {
    display: grid;
    width: calc(100% + 16px);
    margin-left: -16px;
    padding: 10px 16px 13px;
    border-left: 3px solid #ffe28b;
    border-radius: 4px 14px 14px 4px;
    background: linear-gradient(90deg, rgba(2, 27, 52, 0.9) 0%, rgba(3, 35, 64, 0.72) 72%, rgba(3, 35, 64, 0.08) 100%);
    box-shadow:
      inset 0 1px rgba(255, 247, 208, 0.2),
      0 8px 22px rgba(0, 17, 36, 0.3);
  }

  .landscape-poster-brand strong {
    max-width: 100%;
    color: #ffedaa;
    -webkit-text-fill-color: #ffedaa;
    -webkit-text-stroke: 0;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: clamp(28px, 2.7vw, 42px);
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.18;
    white-space: nowrap;
    text-shadow:
      0 1px 0 #fff8dc,
      0 3px 0 #173b55,
      0 5px 12px rgba(0, 14, 31, 0.74);
  }

  .landscape-poster-brand span {
    margin-top: 3px;
    color: #fffdf4;
    font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(20px, 2.05vw, 34px);
    font-weight: 750;
    letter-spacing: 0.035em;
    line-height: 1.04;
    white-space: nowrap;
    text-shadow:
      0 1px 0 #ffffff,
      0 3px 0 #123750,
      0 5px 12px rgba(0, 14, 31, 0.72);
  }

  .landscape-poster-brand i {
    margin-top: 15px;
    padding: 8px 12px;
    border: 1px solid rgba(224, 246, 255, 0.54);
    border-radius: 999px;
    color: #e8f8ff;
    background: rgba(4, 38, 64, 0.48);
    font-family: "Avenir Next", "Segoe UI", sans-serif;
    font-size: clamp(8px, 0.72vw, 11px);
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1.35;
    text-shadow: 0 1px 3px rgba(0, 18, 38, 0.9);
  }

}

/* 手机被迫横放时不能把内部组件重排到 220px 宽：维持 360×640 后等比缩放。 */
@media (orientation: landscape) and (max-height: 519px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  body {
    --locked-portrait-width: 360px;
  }

  .app {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 360px;
    height: 640px;
    max-height: none;
    transform: translate(-50%, -50%) scale(var(--short-landscape-scale, 0.6));
    transform-origin: center;
  }

  .hero-dialog,
  .shop-dialog {
    width: 360px;
    height: 640px;
    max-height: none;
    transform: scale(var(--short-landscape-scale, 0.6));
  }

  .settings-dialog {
    width: 348px;
    height: 616px;
    max-height: none;
    transform: scale(var(--short-landscape-scale, 0.6));
  }

  .landscape-poster-brand {
    display: none;
  }
}

@media (min-width: 700px) and (max-width: 1100px) and (min-height: 520px) and (orientation: landscape) {
  .landscape-poster-brand {
    left: 22px;
    width: calc((100vw - var(--locked-portrait-width)) / 2 - 42px);
  }

  .landscape-poster-brand i {
    display: none;
  }
}