/*
 * Mobile-only layout corrections.
 * Keep these overrides separate from the desktop theme styles so the
 * full-size experience remains unchanged.
 */

.route-keepsake-tabs { display: none; }
.reader-era-mobile-break { display: none; }
.home-resource-menu { display: contents; }
.home-player-cluster { display: contents; }
.home-resource-menu-toggle { display: none; }
.mobile-profile-lantern { display: none; }

.profile-avatar {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.profile-avatar::after { content: none; }

.mobile-profile-lantern span {
  display: flex;
  align-items: center;
  color: #d8c19a;
  white-space: nowrap;
}

.mobile-profile-lantern span::after {
  width: 1px;
  height: 1.15em;
  margin-left: .75em;
  background: linear-gradient(transparent, rgba(225, 193, 137, .72), transparent);
  content: "";
}

/* 登入獎勵：月曆內容獨立捲動，領取區始終停在彈窗底部。 */
.login-calendar-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.login-calendar-days {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.login-calendar-footer {
  position: relative;
  z-index: 3;
  margin: 0 -8px -8px;
  padding: 14px 12px 8px;
  border-top: 1px solid rgba(215, 170, 94, .34);
  background: linear-gradient(180deg, rgba(16, 12, 9, .96), rgba(6, 7, 8, .99));
  box-shadow: 0 -12px 24px rgba(0, 0, 0, .42);
}

.login-calendar-footer button { justify-self: center; }

.login-reward-toast {
  position: fixed;
  z-index: 220;
  top: 50%;
  left: 50%;
  display: grid;
  min-width: min(290px, calc(100vw - 40px));
  padding: 18px 28px;
  border: 1px solid rgba(226, 181, 101, .72);
  background: radial-gradient(circle at 50% 0, rgba(167, 99, 38, .28), transparent 62%), rgba(12, 9, 7, .97);
  box-shadow: inset 0 0 0 3px rgba(229, 187, 112, .08), 0 18px 48px rgba(0, 0, 0, .72);
  color: #f2d49b;
  opacity: 0;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 10px)) scale(.96);
  transition: opacity .24s ease, transform .24s ease;
  gap: 7px;
}

.login-reward-toast::before,
.login-reward-toast::after { color: #ad7842; content: "── ◆ ──"; font-size: 9px; letter-spacing: .12em; }
.login-reward-toast span { font-size: 12px; letter-spacing: .38em; text-indent: .38em; }
.login-reward-toast strong { color: #ffe3ad; font-size: 17px; font-weight: 500; letter-spacing: .12em; }
.login-reward-toast.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.login-reward-toast[hidden] { display: none; }

.home-exit-actions {
  width: min(320px, 100%);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
}

/* Desktop keepsake viewer uses the same full-screen, single-card tab model. */
@media (min-width: 901px) {
  .reader-era { text-align: left; }

  .profile-card {
    min-width: min(238px, 36vw);
    padding: 3px 10px 3px 3px;
    align-items: center;
    gap: 9px;
  }

  .profile-avatar {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }

  .profile-info { width: 145px; }

  .profile-card strong {
    margin-bottom: 2px;
    font-size: clamp(15px, 1.3vw, 19px);
  }

  .profile-card p {
    font-size: 10px;
  }

  .profile-progress {
    height: 3px;
    margin-top: 4px;
  }

  .mobile-profile-lantern {
    display: flex;
    min-width: 125px;
    height: 21px;
    margin-top: 4px;
    padding-top: 2px;
    align-items: center;
    border-top: 1px solid rgba(211, 167, 92, .34);
    color: #d8c19a;
    font-size: 9px;
    letter-spacing: .14em;
    gap: 5px;
  }

  .mobile-profile-lantern img {
    width: 17px;
    height: 17px;
    object-fit: contain;
  }

  .mobile-profile-lantern strong {
    margin-left: 10px;
    color: #e8b968;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    letter-spacing: 0;
  }

  .home-resources > .lantern-pill { display: none; }

  .route-keepsake-modal {
    height: 100dvh;
    padding: 0;
  }

  .route-keepsake-panel {
    display: grid;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    grid-template-rows: auto auto minmax(0, 1fr);
    padding: 20px clamp(28px, 5vw, 76px) 26px;
    overflow: hidden;
    border: 0;
  }

  .route-keepsake-heading {
    min-height: 34px;
    margin: 0 70px 5px;
    padding: 0;
  }

  .route-keepsake-tabs {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(560px, 56vw);
    min-height: 58px;
    margin: 0 auto 14px;
    padding: 0 8px 8px;
    grid-template-columns: repeat(2, 1fr);
    gap: 34px;
  }

  .route-keepsake-tabs::after {
    position: absolute;
    right: 8px;
    bottom: 4px;
    left: 8px;
    height: 3px;
    border-radius: 999px;
    background: rgba(91, 61, 35, .24);
    box-shadow: inset 0 1px 2px rgba(45, 27, 14, .2);
    content: "";
  }

  .route-keepsake-tabs button {
    position: relative;
    z-index: 1;
    padding: 10px 8px 13px;
    border: 0;
    background: transparent;
    color: rgba(91, 61, 39, .64);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .24em;
    text-indent: .24em;
    text-shadow: 0 1px rgba(255, 244, 215, .45);
    transition: color .22s ease, text-shadow .22s ease;
  }

  .route-keepsake-tabs button::after {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: -3px;
    left: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #8a552b, #d1a15b 48%, #8a552b);
    box-shadow: 0 0 7px rgba(169, 105, 43, .34);
    content: "";
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .22s ease, transform .26s ease;
  }

  .route-keepsake-tabs button[aria-selected="true"] {
    color: #76451f;
    text-shadow: 0 1px rgba(255, 241, 205, .62), 0 0 10px rgba(177, 112, 47, .2);
  }

  .route-keepsake-tabs button[aria-selected="true"]::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .route-keepsake-tabs button:focus-visible {
    outline: 1px solid rgba(132, 83, 40, .62);
    outline-offset: 3px;
  }

  .route-keepsake-list {
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  .route-keepsake-card {
    display: none;
    width: min(1180px, 100%);
    height: 100%;
    min-height: 0;
    margin: auto;
    padding: clamp(14px, 2vh, 24px);
    box-sizing: border-box;
    grid-template-columns: minmax(0, 52%) minmax(0, 48%);
  }

  .route-keepsake-card.is-tab-active { display: grid; }

  .route-keepsake-visual,
  .route-keepsake-card.is-ancient .route-keepsake-visual {
    min-height: 0;
    height: 100%;
    order: 1;
  }

  .route-keepsake-visual > img,
  .route-keepsake-card.is-ancient .route-keepsake-visual > img {
    width: 82%;
    height: 94%;
    margin: auto;
    object-fit: contain;
  }

  .route-keepsake-info,
  .route-keepsake-card.is-ancient .route-keepsake-info {
    min-height: 0;
    padding: clamp(24px, 4vw, 58px);
    overflow-y: auto;
    order: 2;
  }

  .route-keepsake-close {
    top: 18px;
    right: 22px;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  /* 首頁右上功能列：改為手機可單手操作的古風卷簽選單。 */
  .home-topbar {
    z-index: 3;
    overflow: visible;
  }

  .home-player-cluster {
    position: relative;
    display: flex;
    width: min(250px, 76vw);
    min-height: 70px;
    align-items: stretch;
    border: 0;
    border-radius: 30px 6px 6px 30px;
    background: linear-gradient(90deg, rgba(5, 5, 5, .76), rgba(13, 10, 8, .6) 78%, rgba(5, 5, 5, .42));
    box-shadow: 0 7px 18px rgba(0, 0, 0, .3);
  }

  .home-player-cluster::after {
    position: absolute;
    right: 8px;
    bottom: -3px;
    left: 62px;
    height: 4px;
    border-right: 1px solid rgba(205, 157, 82, .42);
    border-bottom: 1px solid rgba(205, 157, 82, .42);
    border-left: 1px solid rgba(205, 157, 82, .42);
    content: none;
    pointer-events: none;
  }

  .home-player-cluster .profile-card {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    padding: 4px 5px 4px 3px;
    border: 0;
    background: transparent;
    box-shadow: none;
    gap: 5px;
  }

  .home-player-cluster .profile-avatar {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  .home-player-cluster .profile-info {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
  }

  .home-topbar:has(.home-resource-menu.is-open) { z-index: 100; }

  .home-screen:has(.home-resource-menu.is-open) .home-actions,
  .home-screen:has(.home-resource-menu.is-open) .home-swipe-hint {
    pointer-events: none;
  }

  .home-resource-menu {
    position: relative;
    z-index: 32;
    display: flex;
    margin: 0;
    align-items: stretch;
    justify-content: flex-end;
  }

  .home-resource-menu::before {
    position: fixed;
    z-index: 39;
    inset: 0;
    display: none;
    background: rgba(2, 3, 4, .72);
    backdrop-filter: blur(4px);
    content: "";
  }

  .home-resource-menu.is-open::before { display: block; }

  .scene-title .scene-bg{
    background-image: url("./assets/images/enter/bg_loading_mobule.webp");
  }
  .mobile-profile-lantern {
    display: flex;
    min-width: 0;
    height: 20px;
    margin-top: 4px;
    padding-top: 3px;
    align-items: center;
    border-top: 0;
    color: #d8c19a;
    font-size: 9px;
    letter-spacing: .1em;
    gap: 3px;
  }

  .mobile-profile-lantern img { width: 17px; height: 17px; object-fit: contain; }
  .mobile-profile-lantern strong {
    margin-left: 8px;
    color: #e8b968;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    letter-spacing: 0;
  }

  .home-resource-menu-toggle {
    position: absolute;
    left: -3px;
    top: 54px;
    z-index: 2;
    display: grid;
    width: 68px;
    min-width: 68px;
    height: 100%;
    min-height: 64px;
    padding: 0;
    cursor: pointer;
    border: 0;
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: url("./assets/images/index/btn_menu.webp") center / contain no-repeat;
    box-shadow: none;
    color: transparent;
    font-family: inherit;
    font-size: 9px;
    letter-spacing: .18em;
    text-indent: .18em;
    place-items: center;
    touch-action: manipulation;
  }

  .home-resource-menu-toggle::after {
    content: none;
  }

  .home-resource-menu-toggle > span { visibility: hidden; }
  .home-resource-menu-toggle:active { filter: brightness(1.16); transform: scale(.96); }

  .home-resource-menu-icon { display: grid; width: 23px; gap: 4px; }
  .home-resource-menu-icon i {
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, #f3d499 18% 82%, transparent);
    box-shadow: 0 0 5px rgba(235, 184, 93, .42);
    transition: opacity .2s ease, transform .2s ease;
  }
  .home-resource-menu.is-open .home-resource-menu-icon i:first-child { transform: translateY(5px) rotate(45deg); }
  .home-resource-menu.is-open .home-resource-menu-icon i:nth-child(2) { opacity: 0; }
  .home-resource-menu.is-open .home-resource-menu-icon i:last-child { transform: translateY(-5px) rotate(-45deg); }

  .home-resource-menu .home-resources {
    position: fixed;
    z-index: 40;
    top: 50%;
    left: 50%;
    display: grid;
    width: min(310px, calc(100vw - 40px));
    padding: 48px 18px 16px;
    grid-template-columns: 1fr;
    gap: 7px;
    border: 1px solid rgba(211, 164, 88, .62);
    background: radial-gradient(circle at 82% 0, rgba(194, 124, 48, .2), transparent 42%), linear-gradient(145deg, rgba(35, 24, 15, .98), rgba(5, 7, 9, .98));
    box-shadow: inset 0 0 34px rgba(197, 125, 45, .1), 0 18px 42px rgba(0, 0, 0, .68);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-50% - 8px)) scale(.97);
    transform-origin: center;
    transition: opacity .2s ease, transform .2s ease;
  }

  .home-resource-menu .home-resources::before {
    position: absolute;
    top: 14px;
    right: 18px;
    left: 18px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(218, 174, 99, .34);
    color: #ebcc92;
    content: "行 囊 選 單";
    font-size: 12px;
    letter-spacing: .34em;
    text-align: center;
    text-indent: .34em;
  }

  .home-resource-menu.is-open .home-resources { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

  .home-resource-menu .home-resources .lantern-pill { display: none; }

  .home-resource-menu .home-resources .reward-button,
  .home-resource-menu .home-resources .music-toggle,
  .home-resource-menu .home-resources .home-exit-button {
    width: 100%;
    height: 46px;
    min-height: 46px;
    padding: 4px 10px;
    justify-content: flex-start;
    border: 0;
    border-bottom: 1px solid rgba(210, 164, 91, .2);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    gap: 9px;
  }

  .home-resource-menu .home-resources .home-exit-button { border-bottom: 0; }

  .home-resource-menu .home-resources .reward-button img,
  .home-resource-menu .home-resources .music-toggle img,
  .home-resource-menu .home-resources .home-exit-button img { width: 31px; height: 31px; flex: 0 0 31px; }

  .home-resource-menu .home-resources .reward-button span,
  .home-resource-menu .home-resources .music-label,
  .home-resource-menu .home-resources .home-exit-label { font-size: 12px; letter-spacing: .13em; }

  /* 大封舊事：收緊彈窗邊界，並讓內框包住最後一列狀態與提示。 */
  #story-menu.home-modal {
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    place-items: stretch;
  }

  #story-menu .story-map-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 16px 13px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }

  #story-menu .story-map-card::before {
    inset: 5px;
  }

  #story-menu .story-map-heading {
    padding-inline: 3px 38px;
  }

  #story-menu .story-map-heading h2 { margin-bottom: 3px; }

  #story-menu .story-map-progress {
    margin-top: 9px;
  }

  #story-menu .story-map-card .chapter-list {
    margin: 12vh 2px 9px;
    gap: 20px 6px;
  }

  #story-menu .chapter-node {
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
  }

  #story-menu .story-map-card .chapter-entry {
    padding: 0 3px 2px;
  }

  #story-menu .story-map-card .chapter-entry b {
    margin-top: 3px;
    font-size: clamp(14px, 4vw, 17px);
  }

  #story-menu .story-map-card .chapter-entry small {
    margin-top: 2px;
    line-height: 1.45;
  }

  #story-menu .chapter-status {
    min-height: 15px;
    margin-top: 4px;
    line-height: 1.4;
  }

  #story-menu .story-map-hint {
    margin: 0 10px 5px;
    font-size: 10px;
    line-height: 1.5;
  }

  /* 百藝一覽：標題、卡片與底部提示共用一個視窗高度，不再上下浪費空間。 */
  .taskgame-modal {
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    place-items: stretch;
  }

  .taskgame-panel {
    display: grid;
    width: 100%;
    height: 100%;
    max-height: none;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 18px 10px 10px;
    overflow: hidden;
  }

  .taskgame-panel::before { inset: 6px; }

  .taskgame-close {
    position: absolute;
    top: 10px;
    right: 10px;
    float: none;
    width: 44px;
    height: 44px;
    margin: 0;
  }

  .taskgame-header {
    margin: 0 48px 4px;
  }

  .taskgame-kicker {
    margin-bottom: 2px;
    font-size: 10px;
  }

  .taskgame-title { font-size: clamp(30px, 9vw, 42px); }

  .taskgame-rule {
    width: min(260px, 66vw);
    margin-top: 4px;
    font-size: 11px;
  }

  .taskgame-list {
    align-items: center;
    min-height: 0;
    margin-inline: -10px;
    padding: 4px calc((100% - min(320px, 78vw)) / 2) 8px;
    scroll-padding-inline: calc((100% - min(320px, 78vw)) / 2);
  }

  .taskgame-card {
    width: min(320px, 78vw);
    min-width: min(320px, 78vw);
    height: min(100%, 590px);
    min-height: 0;
    padding: 12px;
  }

  .taskgame-card-content {
    min-height: 100%;
    padding-bottom: 8px;
  }

  .taskgame-start {
    width: min(220px, 88%);
    min-height: 48px;
  }

  .taskgame-footer {
    min-height: 22px;
    margin-top: 0;
    font-size: 10px;
  }

  /* 投壺：縮短外框與戰況列，把高度還給遊戲場。 */
  .touhu-modal {
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  }

  .touhu-game {
    width: 100%;
    height: 100%;
    border-width: 1px;
  }

  .touhu-game::before { inset: 5px; }

  .touhu-close {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 34px;
    height: 34px;
    font-size: 21px;
  }

  .touhu-header {
    top: 7px;
    left: 14px;
    text-align: left;
  }

  .touhu-header p { font-size: 9px; }

  .touhu-header h2 {
    margin-top: 0;
    font-size: 25px;
  }

  .touhu-status {
    top: 54px;
    right: 8px;
    left: 8px;
    width: auto;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 4px 48px 4px 8px;
    border-block: 1px solid rgba(157, 116, 63, .32);
    background: rgba(8, 8, 7, .72);
    gap: 8px;
    font-size: clamp(9px, 2.7vw, 12px);
    letter-spacing: .03em;
    white-space: nowrap;
  }

  .touhu-status b { font-size: 14px; }

  .touhu-status span:last-child {
    position: absolute;
    right: 8px;
  }

  .touhu-field {
    top: 88px;
    right: 8px;
    bottom: 8px;
    left: 8px;
  }

  .touhu-wind {
    top: 10px;
    left: 8px;
    transform: scale(.8);
    transform-origin: left top;
  }

  .touhu-bottle-stage { top: 12%; }
  .touhu-arrow { top: 70%; }

  .touhu-arrow-stock {
    right: 2%;
    bottom: 54px;
    left: 2%;
    height: 58px;
    gap: clamp(5px, 3vw, 14px);
    padding-block: 4px;
  }

  .touhu-arrow-stock i { height: 49px; }

  .touhu-rule-note {
    display: none;
  }

  .touhu-hint {
    bottom: 18px;
    padding: 4px;
    background: rgba(8, 7, 6, .58);
    font-size: 10px;
  }

  /* 辭禮：人物與對話各自擁有明確區域，文字與按鈕維持觸控可用尺寸。 */
  .touhu-ritual,
  .touhu-round-result,
  .touhu-result {
    display: grid;
    grid-template: minmax(0, 45%) minmax(0, 55%) / 1fr;
    gap: 0;
    padding: 6px 6px 8px;
    background: linear-gradient(#030405c9, #050403e8), url("./assets/images/taskgame/touhu/background.webp") center / cover;
  }

  .touhu-ritual[hidden],
  .touhu-round-result[hidden],
  .touhu-result[hidden] { display: none; }

  .touhu-host-figure {
    position: relative;
    inset: auto;
    width: min(72vw, 300px);
    height: 100%;
    aspect-ratio: auto;
    justify-self: center;
    opacity: 1;
  }

  .touhu-host-image {
    inset: 3% 7% 1%;
    width: 86%;
    height: 96%;
    object-position: center top;
    transform: scale(1.24);
  }

  .touhu-host-figure figcaption {
    top: auto;
    right: 5%;
    bottom: 5%;
    left: auto;
    display: grid;
    width: auto;
    height: auto;
    min-width: 112px;
    padding: 6px 10px;
    border: 1px solid #9d7448;
    background: rgba(9, 10, 11, .9);
    writing-mode: horizontal-tb;
  }

  .touhu-host-figure figcaption b { font-size: 17px; }
  .touhu-host-figure figcaption span { font-size: 10px; }

  .touhu-dialogue-panel {
    width: min(100%, 430px);
    height: 100%;
    min-height: 0;
    max-height: none;
    justify-content: center;
    overflow-y: auto;
    padding: 9% 10% 10%;
    background: url("./assets/images/taskgame/touhu/dialog_mobile.webp") center / 100% 100% no-repeat;
    -webkit-overflow-scrolling: touch;
  }

  .touhu-ritual-role,
  .touhu-round-result p,
  .touhu-result p { font-size: 13px; }

  .touhu-ritual h3,
  .touhu-round-result h3 {
    margin: 6px 0 9px;
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1.45;
  }

  .touhu-host-line {
    margin-bottom: 8px;
    padding: 6px;
    font-size: 15px;
    line-height: 1.45;
  }

  .touhu-ritual button,
  .touhu-round-result button,
  .touhu-result button {
    min-width: min(220px, 82vw);
    min-height: 44px;
    padding: 9px 16px;
    font-size: 16px;
  }

  .touhu-ritual small {
    margin-top: 6px;
    font-size: 10px;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  /* 所有一般彈窗都以可視視窗為基準水平、垂直置中。 */
  :is(.passcode-modal, .home-modal, .still-prompt, .love-letter) {
    align-items: center;
    justify-items: center;
    place-items: center;
  }

  :is(.passcode-scroll, .home-modal-card, .login-calendar-card, .home-exit-card, .still-prompt-panel, .letter-sheet) {
    margin: auto;
    align-self: center;
    justify-self: center;
  }

  .still-prompt {
    position: fixed;
    z-index: 200;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .still-prompt-panel {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(470px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    transform: none;
  }

  .still-viewer {
    position: fixed;
    z-index: 190;
    inset: 0;
    width: 100vw;
    height: 100dvh;
  }

  /* 所有行動版捲軸共用同一套古風配色與寬度。 */
  * {
    scrollbar-width: thin;
    scrollbar-color: #9b7040 rgba(34, 22, 13, .28);
  }

  *::-webkit-scrollbar { width: 7px; height: 7px; }
  *::-webkit-scrollbar-track {
    border-left: 1px solid rgba(164, 119, 65, .16);
    background: rgba(34, 22, 13, .28);
  }
  *::-webkit-scrollbar-thumb {
    border: 1px solid rgba(239, 205, 142, .34);
    border-radius: 999px;
    background: linear-gradient(#bb8b4d, #76502d);
    box-shadow: inset 0 0 3px rgba(255, 225, 167, .25);
  }

  /* 命書返回鈕維持在所有內容與卷軸裝飾之上。 */
  .scroll-close {
    z-index: 80;
    pointer-events: auto;
    isolation: isolate;
    touch-action: manipulation;
  }

  .scroll-page::before,
  .scroll-page::after { pointer-events: none; }

  /* 照片標題以「前世 ·」為換行點，兩行置中。 */
  .reader-era {
    min-height: 2.8em;
    letter-spacing: .16em;
    line-height: 1.5;
    text-align: center;
  }

  .reader-era-mobile-break { display: none; }

  /* 信物改為滿版雙頁籤卡片，一次只顯示一張。 */
  .route-keepsake-modal {
    height: 100dvh;
    padding: 0;
  }

  .route-keepsake-panel {
    display: grid;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    grid-template-rows: auto auto minmax(0, 1fr);
    padding: max(12px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    overflow: hidden;
    border: 0;
  }

  .route-keepsake-heading {
    min-height: 28px;
    margin: 0 42px 5px;
    padding: 0;
  }

  .route-keepsake-close {
    position: fixed;
    z-index: 10;
    top: max(7px, env(safe-area-inset-top));
    right: max(7px, env(safe-area-inset-right));
    width: 34px;
    height: 34px;
    font-size: 21px;
  }

  .route-keepsake-tabs {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(430px, 92vw);
    min-height: 52px;
    margin: 0 auto 10px;
    padding: 0 6px 7px;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .route-keepsake-tabs::after {
    position: absolute;
    right: 6px;
    bottom: 4px;
    left: 6px;
    height: 3px;
    border-radius: 999px;
    background: rgba(91, 61, 35, .24);
    box-shadow: inset 0 1px 2px rgba(45, 27, 14, .2);
    content: "";
  }

  .route-keepsake-tabs button {
    position: relative;
    z-index: 1;
    padding: 9px 4px 11px;
    border: 0;
    background: transparent;
    color: rgba(91, 61, 39, .66);
    font-family: inherit;
    font-size: clamp(12px, 3.6vw, 15px);
    font-weight: 600;
    letter-spacing: .2em;
    text-indent: .2em;
    text-shadow: 0 1px rgba(255, 244, 215, .45);
    transition: color .22s ease, text-shadow .22s ease;
  }

  .route-keepsake-tabs button::after {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: -3px;
    left: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #8a552b, #d1a15b 48%, #8a552b);
    box-shadow: 0 0 7px rgba(169, 105, 43, .34);
    content: "";
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .22s ease, transform .26s ease;
  }

  .route-keepsake-tabs button[aria-selected="true"] {
    color: #76451f;
    text-shadow: 0 1px rgba(255, 241, 205, .62), 0 0 10px rgba(177, 112, 47, .2);
  }

  .route-keepsake-tabs button[aria-selected="true"]::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .route-keepsake-tabs button:focus-visible {
    outline: 1px solid rgba(132, 83, 40, .62);
    outline-offset: 3px;
  }

  .route-keepsake-list {
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  .route-keepsake-card {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 8px;
    border-radius: 0;
    grid-template: minmax(0, 58%) minmax(0, 42%) / 1fr;
    gap: 0;
  }

  .route-keepsake-card.is-tab-active { display: grid; }

  .route-keepsake-visual,
  .route-keepsake-card.is-ancient .route-keepsake-visual {
    min-height: 0;
    height: 100%;
    order: 1 !important;
  }

  .route-keepsake-visual > img,
  .route-keepsake-card.is-ancient .route-keepsake-visual > img {
    width: 76%;
    height: 94%;
    margin: auto;
    object-fit: contain;
  }

  .route-keepsake-info,
  .route-keepsake-card.is-ancient .route-keepsake-info {
    min-height: 0;
    padding: 9px 14px;
    overflow: hidden;
    order: 2 !important;
  }

  .route-keepsake-info h4 { margin-bottom: 4px; font-size: 14px; }
  .route-keepsake-info p { margin-bottom: 6px; font-size: 10px; line-height: 1.45; -webkit-line-clamp: 3; }
  .route-keepsake-info dl { grid-template-columns: repeat(2, 1fr); gap: 3px; }
  .route-keepsake-info dl > div { min-height: 25px; grid-template-columns: 56px 1fr; }
  .route-keepsake-info dt, .route-keepsake-info dd { padding: 2px 4px; font-size: 9px; }

  /* 情書以手機視窗置中，壓縮上下空白。 */
  .love-letter {
    padding: max(7px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
    place-items: center;
  }

  .letter-sheet {
    width: min(590px, 96vw);
    height: min(94dvh, 760px);
    min-height: 0;
    margin: auto;
    padding: 38px 18px 58px;
  }

  .letter-close { top: 10px; right: 10px; }
  .letter-kicker { top: 36px; right: 18px; }
  .letter-sheet h3 { top: 36px; right: 45px; }

  #letter-text {
    width: max-content;
    min-width: 100%;
    height: calc(100% - 8px);
    padding-right: 70px;
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.72;
  }

  .letter-closing { bottom: 16px; left: 22px; }
  .letter-pagination { bottom: 8px; }

  /* 故事畫面與對話區共用同一條固定分界線。 */
  .scene.dialogue-active { --mobile-dialogue-height: 40dvh; }

  .dialogue-active .scene-bg,
  .dialogue-active .story-items,
  .dialogue-active .character-stage {
    bottom: var(--mobile-dialogue-height);
    overflow: hidden;
  }

  .dialogue-active .scene-bg {
    background-size: contain;
    transform: none;
  }

  .story-items:not(:empty)::before { inset: 5% 3%; }

  .story-item,
  .story-item.is-small,
  .story-item.is-medium,
  .story-item.is-wide,
  .story-item.is-tall {
    top: 50%;
    width: min(88vw, 460px);
    max-width: 88vw;
    max-height: calc(60dvh - 34px);
    object-fit: contain;
  }

  .story-character {
    top: max(28px, 4dvh);
    bottom: auto;
    width: min(92vw, 430px);
    height: calc(60dvh - max(36px, 5dvh));
    max-height: none;
    object-fit: contain;
    object-position: center bottom;
  }

  .dialogue-panel {
    box-sizing: border-box;
    height: var(--mobile-dialogue-height);
    min-height: var(--mobile-dialogue-height);
    max-height: var(--mobile-dialogue-height);
    padding: 14px 58px max(22px, calc(12px + var(--safe-bottom))) 16px;
    overflow: hidden;
  }

  .speaker-row { margin-bottom: 4px; }
  #dialogue-text {
    min-height: 0;
    max-height: calc(var(--mobile-dialogue-height) - 82px);
    overflow-y: auto;
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.62;
    overscroll-behavior: contain;
  }
  .dialogue-actions {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(8px, var(--safe-bottom));
  }

  .dialogue-next {
    padding: 5px 3px;
    white-space: nowrap;
  }

  /* 投壺場台陰影貼齊台邊。 */
  .touhu-field::after {
    bottom: 0;
    height: min(34%, 250px);
    background-position: center bottom;
    background-size: 100% 100%;
  }

  /* 辭禮：全景人物大景＋底部電影字幕帶。 */
  .touhu-ritual,
  .touhu-round-result,
  .touhu-result {
    grid-template: minmax(0, 56%) minmax(0, 44%) / 1fr;
    background: linear-gradient(180deg, rgba(3, 4, 5, .16), rgba(3, 3, 3, .42) 48%, #030303 100%), url("./assets/images/taskgame/touhu/background.webp") center / cover;
  }

  .touhu-host-figure {
    width: min(86vw, 360px);
    overflow: visible;
    background: none;
    filter: none;
  }

  .touhu-host-image {
    inset: -2% 0 0;
    width: 100%;
    height: 105%;
    clip-path: none;
    object-position: center top;
    transform: scale(1.12);
    transform-origin: center top;
  }

  .touhu-host-figure figcaption {
    right: 4%;
    bottom: 2%;
    padding: 6px 10px;
    border: 0;
    border-left: 2px solid #bd8e4e;
    background: linear-gradient(90deg, rgba(5, 5, 5, .92), rgba(5, 5, 5, .52));
    box-shadow: 0 8px 28px #000;
  }

  .touhu-dialogue-panel {
    width: 100%;
    padding: 16px 18px max(14px, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid rgba(199, 155, 94, .72);
    background: linear-gradient(180deg, rgba(5, 5, 5, .72), rgba(3, 3, 3, .97) 28%);
    box-shadow: 0 -18px 45px rgba(0, 0, 0, .7), inset 0 1px rgba(255, 222, 159, .1);
  }

  /* 天燈：壓縮高度 HUD 與獎勵列，將點燃操作放在獎勵列上方。 */
  .skylantern-modal {
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  }

  .skylantern-game { width: 100%; height: 100%; }
  .skylantern-game::before { inset: 5px; }
  .skylantern-game::after { inset: 8px; }

  .skylantern-close {
    top: 7px;
    right: 7px;
    width: 34px;
    height: 34px;
    font-size: 21px;
  }

  .skylantern-hud {
    top: 7px;
    width: 132px;
    min-height: 36px;
    padding: 3px 12px 5px;
  }

  .skylantern-hud span { font-size: 9px; }
  .skylantern-hud strong { font-size: 19px; }
  .skylantern-sky { bottom: 78px; }
  .skylantern-moon { top: 42px; right: 24px; width: 58px; }
  .skylantern-altimeter { top: 58px; bottom: 46px; }
  .skylantern-shield-status { top: 50px; }

  .skylantern-rewards {
    right: 8px;
    bottom: 8px;
    left: 8px;
    height: 64px;
    padding: 4px 3px;
  }

  .skylantern-rewards span { min-width: 30px; gap: 0; font-size: 8px; }
  .skylantern-rewards i { width: 28px; }
  .skylantern-rewards small { font-size: 8px; }

  .skylantern-intro {
    justify-content: flex-end;
    padding: 0 8px 6px;
    background: linear-gradient(transparent 54%, rgba(2, 5, 9, .72));
  }

  .skylantern-intro p { margin-bottom: 2px; }
  .skylantern-intro small { display: none; }
  .skylantern-light { width: min(300px, 76vw); margin-bottom: 0; }

  /* 批奏摺：薄型 HUD，情報、奏摺、印匣各佔固定可用區。 */
  .memorial-modal { padding: 0; }
  .memorial-game { width: 100%; height: 100%; border: 0; }

  .memorial-close {
    top: 7px;
    right: 7px;
    width: 34px;
    height: 34px;
    font-size: 21px;
  }

  .memorial-header {
    height: 58px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: 5px 46px 5px 10px;
    gap: 8px;
  }

  .memorial-header > div:first-child { min-width: 64px; }
  .memorial-header p { display: none; }
  .memorial-header h2 { margin: 0; font-size: 20px; letter-spacing: .14em; text-align: left; }

  .memorial-hud {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    gap: 2px;
  }

  .memorial-hud span { font-size: 9px; }
  .memorial-hud b { font-size: 15px; }

  .memorial-desk {
    inset: 58px 0 0;
    display: block;
    padding: 102px 4px 104px;
  }

  .memorial-rules {
    position: absolute;
    z-index: 13;
    top: 4px;
    right: 5px;
    bottom: auto;
    left: 5px;
    display: grid;
    width: auto;
    height: 94px;
    grid-template-columns: minmax(0, 1.45fr) minmax(126px, .8fr);
    align-items: center;
    padding: 7px 8px;
    gap: 7px;
    overflow: visible;
  }

  .memorial-rules::before { inset: 3px; }
  .memorial-rules h3, .memorial-era-date { display: none; }

  .memorial-intel {
    height: 100%;
    margin: 0;
    padding: 5px 7px;
    overflow-y: auto;
  }

  .memorial-intel span { font-size: 11px; }
  .memorial-intel p { display: block; overflow: visible; font-size: 11px; line-height: 1.35; -webkit-line-clamp: unset; }

  .memorial-rules dl { display: grid; grid-template-columns: 1fr; gap: 1px; }
  .memorial-rules dl div { display: grid; grid-template-columns: 36px 1fr; padding: 1px 0; border: 0; }
  .memorial-rules dt { font-size: 10px; text-align: left; }
  .memorial-rules dd { display: block; margin: 0; font-size: 8px; line-height: 1.25; }
  .memorial-level { display: none; }

  .memorial-paper-wrap { width: 100%; height: 100%; padding: 0; align-items: center; }
  .memorial-conveyor { inset: 0 2px; }
  .memorial-conveyor::before { left: 0; }
  .memorial-conveyor::after { right: 0; }

  .memorial-paper {
    width: auto;
    height: min(55dvh, 480px);
    max-width: 92vw;
    padding: 55px 24px 24px;
  }

  .memorial-paper-top { margin-top: 2px; }
  .memorial-number { margin: 5px 0 1px; }
  .memorial-case-title { margin-bottom: 6px; padding-bottom: 5px; font-size: 20px; }
  .memorial-case-content { min-height: 44px; font-size: 14px; line-height: 1.42; }
  .memorial-request { margin-top: 5px; padding: 5px 7px; }
  .memorial-target { width: 118px; }
  .memorial-case-clock { right: 5%; bottom: 1%; left: 5%; }

  .memorial-stamp-rack {
    position: absolute;
    z-index: 14;
    right: 5px;
    bottom: 5px;
    left: 5px;
    display: block;
    width: auto;
    height: 96px;
    padding: 5px 7px;
    background: linear-gradient(180deg, rgba(15, 12, 8, .95), rgba(5, 6, 5, .99));
  }

  .memorial-stamp-rack h3, .memorial-stamp-rack > p { display: none; }
  .memorial-stamps { width: 100%; height: 100%; align-items: center; justify-content: space-around; gap: 8px; }
  .memorial-stamp { width: 76px; height: 82px; }
  .memorial-stamp b { padding: 5px 1px; font-size: 13px; }

  /* 批奏摺開場：人物大景＋下方電影式對話。 */
  .memorial-intro {
    display: grid;
    grid-template: minmax(0, 54%) minmax(0, 46%) / 1fr;
    gap: 0;
    padding: 0;
    background: linear-gradient(180deg, rgba(3, 4, 5, .1), rgba(3, 3, 3, .48) 52%, #020202), url("./assets/images/taskgame/memorial/background.webp") center / cover;
  }

  .memorial-intro::before { display: none; }

  .memorial-host {
    width: min(90vw, 380px);
    height: 100%;
    min-height: 0;
    margin: 0;
    justify-self: center;
    overflow: visible;
    background: none;
    box-shadow: none;
    transform: none;
  }

  .memorial-host::before { display: none; }

  .memorial-host img {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 105%;
    object-position: center top;
    transform: scale(1.08);
    transform-origin: center top;
  }

  .memorial-host figcaption {
    right: 4%;
    bottom: 2%;
    left: auto;
    min-width: 118px;
    padding: 6px 10px;
    border: 0;
    border-left: 2px solid #bd8e4e;
    background: linear-gradient(90deg, rgba(5, 5, 5, .92), rgba(5, 5, 5, .5));
  }

  .memorial-dialogue {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    justify-content: center;
    padding: 14px 16px max(12px, env(safe-area-inset-bottom));
    overflow-y: auto;
    border-top: 1px solid rgba(198, 154, 86, .72);
    background: linear-gradient(180deg, rgba(4, 4, 4, .72), rgba(2, 2, 2, .98) 26%);
    box-shadow: 0 -18px 45px rgba(0, 0, 0, .75);
    filter: none;
  }

  .memorial-dialogue blockquote { margin: 5px 0 8px; font-size: 16px; line-height: 1.45; }
  .memorial-brief { grid-template-columns: repeat(3, 1fr); width: 100%; margin-bottom: 8px; gap: 3px; }
  .memorial-brief span { padding: 5px 2px; font-size: 10px; }
  .memorial-dialogue button { min-height: 44px; padding: 9px 18px; font-size: 15px; }
  .memorial-dialogue small { margin-top: 5px; font-size: 9px; }
}

@media (max-width: 900px) and (orientation: portrait) and (max-height: 700px) {
  .taskgame-header { margin-bottom: 0; }
  .taskgame-rule, .taskgame-footer { display: none; }
  .taskgame-panel { grid-template-rows: auto minmax(0, 1fr); }
  .taskgame-card { width: min(280px, 72vw); min-width: min(280px, 72vw); }
  .taskgame-list { padding-inline: calc((100% - min(280px, 72vw)) / 2); }

  .touhu-status { top: 48px; }
  .touhu-field { top: 79px; }
  .touhu-ritual, .touhu-round-result, .touhu-result {
    grid-template-rows: minmax(0, 40%) minmax(0, 60%);
  }

  .skylantern-sky { bottom: 68px; }
  .skylantern-rewards { height: 56px; }
  .memorial-intro { grid-template-rows: minmax(0, 46%) minmax(0, 54%); }
  .memorial-paper { height: min(52dvh, 400px); }
}

/* 百藝一覽的關閉鈕與其他彈窗共用同一規格。 */
.taskgame-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 50%;
  clip-path: none;
  font-size: 24px;
}

@media (max-width: 900px) and (orientation: portrait) {
  /* 1. 百藝一覽：收緊標題節奏，並保留卡片頂部完整可見。 */
  .taskgame-panel { grid-template-rows: auto minmax(0, 1fr) auto; padding-top: 12px; }
  .taskgame-header { margin: 0 46px 1px; }
  .taskgame-kicker { margin: 0; font-size: 9px; line-height: 1.2; }
  .taskgame-title { margin: 1px 0; font-size: clamp(26px, 7.6vw, 34px); line-height: 1.12; }
  .taskgame-rule { margin-top: 1px; font-size: 10px; line-height: 1.2; }
  .taskgame-list { align-items: flex-start; padding-top: 12px; }
  .taskgame-card { height: calc(100% - 4px); align-self: start; }

  /* 2. 首頁功能卡縮短，不再進入左上玩家資訊區。 */
  .home-actions {
    top: 55%;
    padding-inline: calc((100% - min(260px, 60vw)) / 2);
    scroll-padding-inline: calc((100% - min(260px, 60vw)) / 2);
  }
  .home-action-button {
    width: min(260px, 60vw);
    min-width: min(260px, 60vw);
  }

  /* 3–4. 投壺標題、人物與遊戲場景。 */
  .touhu-header {
    top: 7px;
    right: 48px;
    left: 48px;
    display: grid;
    height: 36px;
    place-items: center;
    text-align: center;
  }
  .touhu-header p { display: none; }
  .touhu-header h2 { margin: 0; font-size: 25px; line-height: 1; }
  .touhu-field {
    background-image: url("./assets/images/taskgame/touhu/background.webp");
  }
  .touhu-host-figure {
    width: min(94vw, 410px);
    align-self: end;
  }
  .touhu-host-image {
    inset: auto 0 0;
    width: 100%;
    height: 108%;
    object-position: center bottom;
    transform: translateY(16%) scale(1.34);
    transform-origin: center bottom;
  }
  .touhu-host-figure figcaption { right: 2%; bottom: 3%; }
  .touhu-host-figure figcaption span { display: none; }

  /* 5. 玩家操控天燈縮小為原來的一半。 */
  .skylantern-player { width: 47px; height: 66px; }
  .skylantern-player i { width: 23px; height: 29px; }
  .skylantern-player::after { inset: -13px -17px; }

  /* 6. 批奏摺 HUD 改為單行，縮短印匣以增加奏摺區域。 */
  .memorial-header {
    height: 46px;
    display: block;
    padding: 5px 44px 4px 7px;
  }
  .memorial-header > div:first-child { display: none; }
  .memorial-hud {
    display: grid;
    height: 36px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 1px;
  }
  .memorial-hud span {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: center;
    font-size: clamp(8px, 2.25vw, 10px);
    letter-spacing: 0;
    white-space: nowrap;
    gap: 3px;
  }
  .memorial-hud b { font-size: clamp(12px, 3.4vw, 15px); }
  .memorial-desk { inset: 46px 0 0; padding-bottom: 78px; }
  .memorial-stamp-rack { height: 72px; padding: 3px 6px; }
  .memorial-stamps { gap: 4px; }
  .memorial-stamp { width: 62px; height: 65px; }
  .memorial-stamp b { padding: 3px 1px; font-size: 11px; }

  /* 7. 命書返回鈕、潑墨照片與照片下方標題間距。 */
  .scroll-close {
    transform: scale(.8);
    transform-origin: right top;
  }
  .scroll-close:hover,
  .scroll-close:focus-visible { transform: scale(.8) translateY(2px); }
  .route-portrait {
    -webkit-mask-image: var(--portrait-mask);
    -webkit-mask-mode: luminance;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
  }
  .ink-portrait.uses-photo-assets .ink-wash {
    z-index: 1;
    display: block;
    opacity: .48;
    mix-blend-mode: multiply;
  }
  .scroll-copy { margin-top: 14px; }
  .reader-era { margin-top: 8px; }

  /* 9. 移除捲動時會停在章節路徑中間的內陰影。 */
  #story-menu .story-map-card::before { box-shadow: none; }

  /* 10. 燈絮記憶標題區縮為手機舒適比例。 */
  .still-gallery { padding: 24px 15px 18px; }
  .still-header { padding: 0 32px 30px; }
  .still-header h2 { gap: 5px; font-size: clamp(20px, 6vw, 25px); letter-spacing: .2em; }
  .still-header h2::before,
  .still-header h2::after { max-width: 42px; }
  .still-header p { margin-top: 3px; font-size: 10px; line-height: 1.4; }
  .still-balance { bottom: 5px; font-size: 11px; }
  .still-grid { padding-top: 9px; }

  /* 11. 命書選擇標題區收緊。 */
  .scroll-select { padding-top: 42px; }
  .scroll-select header p { font-size: 10px; letter-spacing: .2em; }
  .scroll-select header h2 {
    margin: 5px 0 14px;
    font-size: clamp(25px, 8vw, 34px);
    line-height: 1.2;
  }

  /* 12. 選單改為玩家資訊左側的一體式入口。 */
  .home-resource-menu { order: -1; }
  .home-player-cluster { border-radius: 6px 30px 30px 6px; }
  .home-resource-menu-toggle {
    border-radius: 6px 0 0 6px;
    background-position: center;
  }
}

/* 行動版全站舒適度收尾：統一主要字級、行高、觸控高度與標題對齊。 */
@media (max-width: 900px) and (orientation: portrait) {
  :is(.home-modal-card, .login-calendar-card, .home-exit-card, .taskgame-panel,
      .route-keepsake-panel, .letter-sheet, .still-gallery) {
    box-sizing: border-box;
  }

  :is(.story-map-heading, .taskgame-header, .route-keepsake-heading,
      .scroll-select > header, .still-header, .home-exit-card) {
    text-align: center;
  }

  :is(.story-map-heading > p, .taskgame-rule, .route-keepsake-heading,
      .still-header p, #home-exit-copy, .login-calendar-footer p) {
    line-height: 1.55;
  }

  :is(.home-exit-choice, .login-calendar-footer button, .taskgame-start,
      .begin-route-button, .letter-pagination button, .route-keepsake-tabs button,
      .touhu-ritual button, .touhu-round-result button, .touhu-result button,
      .memorial-dialogue button) {
    min-height: 44px;
  }

  .login-calendar-card {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 18px 12px 10px;
  }

  .login-calendar-header {
    min-height: 64px;
    margin: 0 38px 8px 0;
    justify-content: center;
    gap: 8px;
  }

  .login-calendar-header img { width: 48px; height: 48px; }
  .login-calendar-header h2 {
    margin-top: 2px;
    padding-right: 0;
    font-size: clamp(18px, 5.3vw, 22px);
    line-height: 1.35;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  .login-calendar-header p { font-size: 10px; }
  .login-calendar-days { gap: 5px; padding-right: 2px; }
  .login-day { min-height: 56px; }

  .home-exit-card {
    width: calc(100vw - 28px);
    padding: 38px 20px 24px;
  }
  .home-exit-card h2 { margin: 6px 0 8px; font-size: clamp(22px, 6.5vw, 28px); }
  #home-exit-copy { margin: 8px auto 18px; font-size: 12px; }

  .story-map-heading h2 { font-size: clamp(27px, 8vw, 35px); }
  .story-map-heading > p:last-child { font-size: 10px; letter-spacing: .06em; }
  .story-map-progress { font-size: 10px; }

  .route-keepsake-heading { font-size: 11px; }
  .route-keepsake-info h4 { font-size: clamp(16px, 4.6vw, 19px); text-align: center; }
  .route-keepsake-info p { font-size: 12px; line-height: 1.65; }

  .letter-sheet { padding-inline: 22px; }
  .letter-kicker { font-size: 10px; }
  .letter-sheet h3 { font-size: clamp(22px, 7vw, 30px); text-align: center; }
  #letter-text { font-size: clamp(14px, 3.8vw, 16px); line-height: 1.85; }

  .scroll-copy blockquote,
  .reader-prologue { font-size: clamp(13px, 3.55vw, 15px); line-height: 1.75; }
  .reader-actions { justify-content: center; }

  .still-footer { font-size: 10px; line-height: 1.5; }
  .still-card h3 { font-size: clamp(12px, 3.4vw, 14px); }
  .still-card button { min-height: 38px; font-size: 13px; }

  .touhu-dialogue-panel,
  .memorial-dialogue { text-align: center; }
  .touhu-host-line,
  .memorial-dialogue blockquote { line-height: 1.6; }
}

/* 通關密令表單：使用 enter 素材的完整黑金版面，真實控件疊在對應的互動區。 */
#passcode-modal {
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: rgba(2, 2, 2, .84);
  backdrop-filter: blur(8px);
}

#passcode-modal .passcode-scroll {
  width: min(886px, 94vw, calc(50dvh * .97043));
  max-height: 92dvh;
  aspect-ratio: 886 / 913;
  padding: 0;
  overflow: visible;
  border: 0;
  background: url("./assets/images/enter/form_enter.webp") center / 100% 100% no-repeat;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .82), 0 0 30px rgba(163, 78, 29, .18);
  color: #d3a46d;
}

/* 2026-08-23：命書、登入獎勵與小遊戲的最終行動裝置修正。 */
.reader-era {
  position: relative;
  z-index: 4;
  width: 100%;
  white-space: nowrap;
}

@media (max-width: 900px) and (orientation: portrait) {
  /* 帶 alpha 的遮罩可同時支援 iOS WebKit 與標準 mask 實作。 */
  .route-portrait {
    -webkit-mask: var(--portrait-mask) center / 100% 100% no-repeat;
    mask: var(--portrait-mask) center / 100% 100% no-repeat;
  }

  .reader-era {
    min-height: 1.5em;
    margin-top: 12px;
    overflow: visible;
    font-size: clamp(8px, 2.35vw, 11px);
    letter-spacing: clamp(.02em, .45vw, .12em);
    line-height: 1.5;
    text-align: center;
  }

  .scroll-copy { margin-top: 16px; }

  /* 登入獎勵卡片以視窗中心為基準，左右保留完全相同的安全距離。 */
  .login-calendar-modal {
    place-items: center;
    padding: 10px;
    overflow: hidden;
  }

  .login-calendar-modal .login-calendar-card {
    width: calc(100vw - 20px);
    min-width: 0;
    max-width: calc(100vw - 20px);
    margin: 0;
    justify-self: center;
    overflow-x: hidden;
  }

  .login-calendar-days {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* 投壺續禮局：人物位於資訊列下方，腰部以下由電影式字幕帶自然遮住。 */
  .touhu-round-result {
    grid-template-rows: minmax(0, 61%) minmax(0, 39%);
    padding: 0;
  }

  .touhu-round-result .touhu-host-figure {
    z-index: 1;
    width: clamp(190px, 56vw, 255px);
    height: 100%;
    align-self: end;
    overflow: visible;
  }

  .touhu-round-result .touhu-host-image {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform: none;
  }

  .touhu-round-result .touhu-host-figure figcaption {
    right: -6%;
    bottom: 3%;
    min-width: 78px;
    padding: 3px 7px;
  }

  .touhu-round-result .touhu-host-figure figcaption b { font-size: 13px; }
  .touhu-round-result .touhu-host-figure figcaption span { display: none; }

  .touhu-round-result .touhu-dialogue-panel {
    z-index: 2;
    padding: 8px 14px max(8px, env(safe-area-inset-bottom));
  }

  .touhu-round-result .touhu-dialogue-panel > p {
    margin: 0 0 2px;
    font-size: 10px;
    line-height: 1.3;
  }

  .touhu-round-result .touhu-dialogue-panel h3 {
    margin: 2px 0 5px;
    font-size: clamp(13px, 3.6vw, 16px);
    line-height: 1.3;
  }

  .touhu-round-result .touhu-dialogue-panel button {
    min-height: 40px;
    padding-block: 6px;
  }

  /* 批奏摺開場：只顯示現代姓名並壓縮字幕帶。 */
  .memorial-intro {
    grid-template-rows: minmax(0, 61%) minmax(0, 39%);
  }

  .memorial-host figcaption {
    min-width: 84px;
    padding: 3px 7px;
  }

  .memorial-host figcaption b { font-size: 13px; }
  .memorial-host figcaption small { display: none; }

  .memorial-dialogue {
    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  }

  .memorial-dialogue blockquote {
    margin: 2px 0 5px;
    font-size: 14px;
    line-height: 1.4;
  }

  .memorial-brief { margin-bottom: 4px; }
  .memorial-brief span { padding: 3px 2px; }
  .memorial-dialogue button { min-height: 40px; padding-block: 6px; }
  .memorial-dialogue small { margin-top: 2px; }

  /* 批奏摺遊戲：奏摺鋪滿可用寬度，僅保留情報列與印匣所需的垂直空間。 */
  .memorial-desk {
    padding: 98px 0 60px;
  }

  .memorial-paper-wrap {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .memorial-paper {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: 42px 10px 12px;
  }

  .memorial-paper-top { gap: 4px; }
  .memorial-category,
  .memorial-tag {
    padding: 2px 4px;
    font-size: 9px;
    letter-spacing: .02em;
    white-space: nowrap;
  }

  .memorial-case-title {
    width: 100%;
    margin-bottom: 4px;
    padding-bottom: 4px;
    font-size: clamp(15px, 4.4vw, 20px);
    letter-spacing: .02em;
    line-height: 1.25;
  }

  .memorial-case-content {
    width: 100%;
    font-size: 13px;
  }

  .memorial-stamp-rack {
    right: 3px;
    bottom: 3px;
    left: 3px;
    height: 54px;
    padding: 2px 4px;
  }

  .memorial-stamps { gap: 3px; }
  .memorial-stamp { width: 50px; height: 49px; }
  .memorial-stamp b { padding: 2px 1px; font-size: 9px; }
}

@media (min-width: 901px) {
  .reader-era {
    overflow: visible;
    text-align: left;
  }
}

#passcode-modal .passcode-scroll::before,
#passcode-modal .passcode-scroll::after { content: none; }

#passcode-modal .passcode-kicker,
#passcode-modal .passcode-scroll h2,
#passcode-modal #passcode-instruction,
#passcode-modal #passcode-form > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#passcode-modal .passcode-close {
  z-index: 5;
  top: 12.2%;
  right: 5.7%;
  width: 10.4%;
  height: auto;
  cursor: pointer;
  aspect-ratio: 92 / 81;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline-offset: 3px;
  background: url("./assets/images/enter/btn_close.webp") center / contain no-repeat;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .64));
}

#passcode-modal .passcode-close:hover,
#passcode-modal .passcode-close:focus-visible {
  background-color: transparent;
  filter: brightness(1.15) drop-shadow(0 6px 10px rgba(0, 0, 0, .7));
  transform: scale(1.04);
}

#passcode-modal #passcode-form {
  position: absolute;
  inset: 0;
  margin: 0;
}

#passcode-modal .passcode-input-wrap {
  position: absolute;
  top: 57.45%;
  right: 11%;
  left: 11%;
  height: 12.15%;
}

#passcode-modal #passcode-input {
  width: 100%;
  height: 100%;
  padding: 0 13% 0 4%;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: #e8bb7c;
  caret-color: #efa960;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 3.4vw, 31px);
  letter-spacing: .34em;
  text-align: left;
  text-shadow: 0 0 10px rgba(229, 129, 54, .28);
  box-shadow: none;
}

#passcode-modal #passcode-input:focus {
  box-shadow: inset 0 0 18px rgba(217, 113, 43, .08), 0 0 12px rgba(210, 109, 41, .14);
}

#passcode-modal #passcode-input.is-invalid {
  box-shadow: inset 0 0 0 1px rgba(211, 81, 49, .72), inset 0 0 24px rgba(155, 35, 24, .12);
}

#passcode-modal .passcode-visibility {
  top: 50%;
  right: 2.4%;
  width: 8.5%;
  height: auto;
  aspect-ratio: 58 / 53;
  border-radius: 0;
  background: url("./assets/images/enter/btn_see_pwd.webp") center / contain no-repeat;
  color: transparent;
  transform: translateY(-50%);
}

#passcode-modal .passcode-visibility[aria-pressed="true"] {
  background-image: url("./assets/images/enter/btn_hide_pwd.webp");
}

#passcode-modal .passcode-visibility:hover,
#passcode-modal .passcode-visibility:focus-visible {
  background-color: transparent;
  filter: brightness(1.16);
}

#passcode-modal .passcode-eye { display: none; }

#passcode-modal .passcode-error {
  position: absolute;
  z-index: 3;
  top: 69.4%;
  right: 12%;
  left: 12%;
  min-height: 0;
  margin: 0;
  color: #e59a70;
  font-size: clamp(10px, 1.65vw, 13px);
  line-height: 1.35;
  letter-spacing: .06em;
  text-align: center;
  text-shadow: 0 2px 5px #000;
}

#passcode-modal .passcode-submit {
  position: absolute;
  top: 74.05%;
  right: 0;
  left: 0;
  width: 100%;
  cursor: pointer;
  height: 12.82%;
  min-height: 0;
  padding: 0;
  border: 0;
  outline-offset: 3px;
  background: url("./assets/images/enter/btn_enter.webp") center / 100% 100% no-repeat;
  background-size: contain;
  color: transparent;
  font-size: 0;
  text-indent: 0;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .52));
}

#passcode-modal .passcode-submit:hover,
#passcode-modal .passcode-submit:focus-visible {
  background-image: url("./assets/images/enter/btn_enter.webp");
  filter: brightness(1.14) drop-shadow(0 8px 14px rgba(0, 0, 0, .62));
  transform: translateY(-1px);
}

@media (max-width: 560px) and (orientation: portrait) {
  #passcode-modal .passcode-scroll {
    width: min(96vw, calc(92dvh * .97043));
    max-height: 92dvh;
  }

  #passcode-modal #passcode-input {
    font-size: clamp(17px, 6vw, 24px);
    letter-spacing: .24em;
  }

  #passcode-modal .passcode-error { font-size: 10px; }
}

/* 信物彈窗標題固定單行；兩側飾線負責縮放，不擠壓標題文字。 */
.route-keepsake-heading span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.route-keepsake-heading i {
  min-width: 0;
  flex: 1 1 auto;
}

@media (max-width: 900px) and (orientation: portrait) {
  .route-keepsake-heading {
    gap: clamp(5px, 2vw, 10px);
    font-size: clamp(10px, 3vw, 12px);
    letter-spacing: clamp(.03em, .45vw, .1em);
  }
}