/* 手机竖屏排版：仅在「不强制横屏」时生效。
   js/orientation.js 会把本文件的 media 置为 not all 来整体停用，
   避免竖屏规则和强制横屏的旋转变换叠加。 */
@media (orientation: portrait) {
  #stage {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    aspect-ratio: auto;
    border-width: 0;
    border-radius: 0;
  }

  #title-screen {
    background-position: center;
  }

  #sprite {
    top: 3%;
    right: -6%;
    bottom: auto;
    height: 52%;
    max-width: 100%;
    object-position: right top;
  }

  #dialog {
    right: 12px;
    bottom: 12px;
    left: 12px;
    min-height: 176px;
    max-height: 30%;
    padding: 30px 20px 18px;
    overflow-y: auto;
    align-items: flex-start;
    border-radius: 18px;
    scrollbar-width: none;
  }

  #dialog::-webkit-scrollbar,
  #choices::-webkit-scrollbar,
  .ending-card::-webkit-scrollbar {
    display: none;
  }

  #namebox {
    left: 20px;
    min-width: 112px;
    padding: 7px 18px;
    font-size: 17px;
  }

  #textbox {
    font-size: clamp(18px, 5vw, 21px);
    line-height: 1.55;
  }

  #choices,
  #choices.choice-grid {
    right: 12px;
    bottom: calc(30% + 24px);
    left: 12px;
    max-height: 55%;
    overflow-y: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    scrollbar-width: none;
  }

  #choices > button,
  .choice-button {
    min-height: 48px;
    padding: 10px 18px;
    font-size: clamp(16px, 4.5vw, 19px);
  }

  #affection-bar {
    top: 12px;
    right: auto;
    left: 12px;
    width: 184px;
    min-height: 54px;
    padding: 8px 12px;
  }

  .affection-label,
  .affection-score {
    font-size: 14px;
  }

  .affection-score strong {
    font-size: 23px;
  }

  #title-screen::after {
    height: 52%;
    opacity: 1;
    background: linear-gradient(0deg, rgba(245, 211, 230, 0.96) 0%, rgba(236, 214, 239, 0.82) 48%, transparent 100%);
    filter: none;
  }

  .title-content {
    width: 100%;
    padding: 8% 5% 43%;
    justify-content: flex-end;
  }

  .title-subtitle {
    margin-bottom: 8px;
    gap: 5px;
  }

  .title-subtitle span {
    max-width: 100%;
    font-size: clamp(18px, 5vw, 23px);
  }

  .title-subtitle span:nth-child(3) {
    font-size: clamp(14px, 4vw, 19px);
  }

  #game-title {
    font-size: clamp(92px, 26vw, 118px);
    letter-spacing: -0.035em;
  }

  .title-sprite {
    top: 7%;
    right: -5%;
    bottom: auto;
    height: 47%;
    max-width: 92%;
    object-position: right top;
  }

  .kv-status,
  .kv-tag,
  .kv-slogan-unlock,
  .kv-cross-1,
  .kv-heart-2,
  .kv-star-2 {
    display: none;
  }

  .kv-affection {
    top: 27%;
    right: auto;
    left: 10px;
    width: 168px;
    padding: 7px 10px;
    font-size: 12px;
    --kv-r: -2deg;
  }

  .kv-slogan-ending {
    top: 24%;
    right: 8px;
    font-size: 17px;
  }

  .kv-slogan-max {
    top: 47%;
    right: auto;
    bottom: auto;
    left: 10px;
    font-size: 13px;
    --kv-r: -7deg;
  }

  .kv-shekong {
    top: 37%;
    right: 6%;
    bottom: auto;
    font-size: 24px;
  }

  .kv-bubble {
    top: 13%;
    right: auto;
    left: 4%;
    font-size: 12px;
  }

  .kv-cross-2 { top: 8%; right: 48%; }
  .kv-cross-3 { right: 4%; bottom: 5%; }
  .kv-heart-1 { top: 21%; left: 7%; font-size: 26px; }
  .kv-heart-3 { top: 36%; right: auto; left: 40%; font-size: 16px; }
  .kv-heart-4 { bottom: 22%; left: auto; right: 8%; font-size: 18px; }
  .kv-star-1 { top: 22%; left: 42%; font-size: 16px; }
  .kv-star-3 { top: 57%; right: 4%; font-size: 15px; }

  #start-button {
    bottom: 10.5%;
    min-width: min(82vw, 340px);
    min-height: 60px;
    padding: 12px 28px;
  }

  #start-button span {
    font-size: 22px;
  }

  #start-button small {
    font-size: 16px;
  }

  .history-button {
    top: 16px;
    left: 16px;
    min-width: 142px;
    min-height: 46px;
    padding: 9px 18px;
    font-size: 16px;
  }

  .copyright {
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: calc(100% - 24px);
    max-width: 370px;
    font-size: 15px;
  }

  #ending-screen {
    padding: 8px;
  }

  .ending-card {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 14px 12px;
    border-radius: 18px;
    scrollbar-width: none;
  }

  .ending-eyebrow {
    font-size: 14px;
  }

  #ending-title {
    font-size: clamp(42px, 12vw, 52px);
  }

  .ending-divider {
    margin: 6px 0;
  }

  .ending-stats div {
    padding: 6px;
  }

  .ending-stats dt,
  .ending-achievements h3,
  .ending-history h3,
  #ending-screen .ending-card > h3 {
    font-size: 16px;
  }

  .ending-stats dd {
    font-size: 24px;
  }

  .ending-achievements {
    margin-top: 5px;
    padding: 8px;
  }

  #ending-achievements li {
    padding: 4px 8px;
    font-size: 16px;
  }

  .ending-history {
    margin-top: 5px;
  }

  #ending-screen .history-table {
    table-layout: fixed;
    font-size: 16px;
  }

  #ending-screen .history-table th,
  #ending-screen .history-table td {
    padding: 4px 2px;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  #ending-screen .history-table th:nth-child(1),
  #ending-screen .history-table td:nth-child(1) {
    width: 32%;
  }

  #ending-screen .history-table th:nth-child(2),
  #ending-screen .history-table td:nth-child(2) {
    width: 32%;
  }

  .ending-actions {
    margin-top: 8px;
    gap: 8px;
  }

  .ending-actions button {
    min-width: 0;
    min-height: 44px;
    padding: 8px 16px;
    flex: 1;
    font-size: 16px;
  }
}

@media (max-height: 700px) and (orientation: portrait) {
  .ending-card {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #ending-title {
    font-size: 40px;
  }

  .ending-eyebrow,
  .ending-divider {
    margin-top: 2px;
    margin-bottom: 2px;
  }
}