/* 首页剧情：完整中轴线地图 */
#view-home {
    min-height: 100vh;
    overflow-x: hidden;
}

.home-story {
    --story-ink: #35261b;
    --story-muted: #69787a;
    --story-gold: #c69b42;
    position: relative;
    min-height: 100vh;
    padding: clamp(28px, 5vw, 64px) clamp(18px, 4vw, 56px) 70px;
    overflow: hidden;
    color: var(--story-ink);
    background:
        radial-gradient(circle at 50% 15%, rgba(255, 249, 229, .72), transparent 38%),
        linear-gradient(115deg, #e7d8b8, #f6ecd2 47%, #dfcfaa);
}

.story-paper-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .24;
    mix-blend-mode: multiply;
    background-image:
        repeating-linear-gradient(8deg, transparent 0 4px, rgba(76, 52, 25, .03) 5px 6px),
        radial-gradient(circle, rgba(74, 50, 24, .13) 0 1px, transparent 1.6px);
    background-size: auto, 19px 21px;
}

.story-heading {
    position: relative;
    z-index: 2;
    max-width: 1160px;
    margin: 0 auto clamp(24px, 4vw, 45px);
    text-align: center;
}

.story-heading h1 {
    margin: 0;
    color: #2f1d12;
    font: 900 clamp(42px, 7vw, 78px)/1.05 "STKaiti", "KaiTi", "楷体", serif;
    letter-spacing: .14em;
    text-shadow: 0 2px rgba(255, 250, 234, .7);
}

.story-heading p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 14px 0 0;
    font-size: clamp(15px, 2vw, 21px);
    letter-spacing: .2em;
}

.story-heading p::before,
.story-heading p::after {
    content: "";
    width: clamp(32px, 6vw, 72px);
    height: 1px;
    background: #8d693c;
}

.story-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(310px, .78fr) minmax(460px, 1.22fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
    width: min(1160px, 100%);
    margin: 0 auto;
}

.story-copy-card {
    position: sticky;
    top: 28px;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid rgba(113, 75, 35, .72);
    border-radius: 24px 18px 27px 20px;
    background: rgba(248, 239, 217, .72);
    box-shadow: inset 0 0 30px rgba(113, 73, 29, .06), 0 12px 34px rgba(69, 46, 24, .09);
}

.story-copy-card::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(123, 86, 43, .16);
    border-radius: inherit;
    pointer-events: none;
}

.story-seal {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 23px;
    border: 2px solid rgba(153, 54, 39, .75);
    color: rgba(153, 54, 39, .8);
    font-size: 22px;
    transform: rotate(-2deg);
}

.story-typewriter {
    min-height: 440px;
    font-size: clamp(16px, 1.55vw, 21px);
    line-height: 1.9;
    letter-spacing: .07em;
}

.story-typewriter p {
    margin: 0 0 15px;
    white-space: pre-line;
}

.story-typewriter p:last-child::after {
    content: "｜";
    color: #9d3c2c;
    animation: storyCaret 1s steps(1) infinite;
}

[data-story-state="WAIT_CLICK"] .story-typewriter p:last-child::after,
[data-story-state="SIGNAL_RECEIVED"] .story-typewriter p:last-child::after,
[data-story-state="PLAY_ANIMATION"] .story-typewriter p:last-child::after,
[data-story-state="SHOW_DIALOG"] .story-typewriter p:last-child::after {
    display: none;
}

@keyframes storyCaret { 50% { opacity: 0; } }

.signal-button,
.story-enter-btn {
    border: 0;
    color: #513923;
    cursor: pointer;
    font-family: "STKaiti", "KaiTi", "楷体", serif;
    letter-spacing: .14em;
    background: linear-gradient(#faf0d8, #e4d0aa);
    box-shadow:
        inset 0 0 0 2px #704d2b,
        inset 0 0 0 5px rgba(179, 132, 62, .5),
        3px 5px 12px rgba(60, 39, 18, .2);
    transition: transform .18s ease, color .3s ease, box-shadow .3s ease, opacity .55s ease;
}

.signal-button {
    display: block;
    min-width: min(100%, 260px);
    margin: 8px auto 0;
    padding: 16px 25px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(.98);
    font-size: 18px;
}

[data-story-state="WAIT_CLICK"] .signal-button {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

[data-story-state="SIGNAL_RECEIVED"] .signal-button,
[data-story-state="PLAY_ANIMATION"] .signal-button,
[data-story-state="SHOW_DIALOG"] .signal-button {
    opacity: .48;
    transform: scale(.97);
}

.signal-button:hover,
.story-enter-btn:hover {
    color: #8e5c17;
    box-shadow:
        inset 0 0 0 2px #714c28,
        inset 0 0 0 5px rgba(205, 159, 73, .66),
        0 0 18px rgba(198, 155, 66, .3);
}

.signal-button:active,
.story-enter-btn:active { transform: scale(.97); }

.story-map {
    position: relative;
    width: min(100%, 720px);
    margin: 0 auto;
    aspect-ratio: 2 / 3;
    isolation: isolate;
}

.story-map-base {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: saturate(.72) contrast(.96);
    user-select: none;
}

.zhengyangmen-signal {
    position: absolute;
    z-index: 2;
    left: 35%;
    top: 49%;
    width: 30%;
    aspect-ratio: 1.6;
    border-radius: 50%;
    opacity: .44;
    background: radial-gradient(circle, rgba(236, 190, 82, .42), rgba(191, 63, 39, .06) 38%, transparent 72%);
    animation: signalBreath 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes signalBreath { 50% { opacity: .25; transform: scale(.94); } }

.zhengyangmen-awake {
    position: absolute;
    z-index: 3;
    left: 40.5%;
    top: 51.3%;
    width: 19%;
    opacity: .12;
    mix-blend-mode: multiply;
    filter: saturate(.7) sepia(.16);
    transform: scale(.98);
    transition: opacity .8s ease, filter .8s ease, transform .8s ease;
    pointer-events: none;
}

[data-story-state="PLAY_ANIMATION"] .zhengyangmen-awake,
[data-story-state="SHOW_DIALOG"] .zhengyangmen-awake {
    opacity: .95;
    filter: saturate(1.35) drop-shadow(0 0 10px rgba(216, 159, 42, .72));
    transform: scale(1.02);
}

[data-story-state="PLAY_ANIMATION"] .zhengyangmen-signal,
[data-story-state="SHOW_DIALOG"] .zhengyangmen-signal {
    opacity: .78;
    background: radial-gradient(circle, rgba(246, 201, 91, .7), rgba(193, 65, 40, .14) 42%, transparent 72%);
}

.axis-signal-beam {
    position: absolute;
    z-index: 2;
    left: 49.6%;
    bottom: 17%;
    width: 2.4%;
    height: 33%;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-50%);
    pointer-events: none;
}

.axis-signal-beam span {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom;
    border-radius: 50% 50% 28% 28%;
    background: linear-gradient(to top, rgba(255, 216, 111, .18), #e6b94d 14%, #ffe08b 78%, rgba(255, 234, 167, .25));
    filter: blur(1px) drop-shadow(0 0 8px rgba(220, 169, 49, .75));
}

[data-story-state="PLAY_ANIMATION"] .axis-signal-beam,
[data-story-state="SHOW_DIALOG"] .axis-signal-beam { opacity: .9; }

[data-story-state="PLAY_ANIMATION"] .axis-signal-beam span,
[data-story-state="SHOW_DIALOG"] .axis-signal-beam span {
    transform: scaleY(1);
    transition: transform 1.2s cubic-bezier(.3, .05, .2, 1);
}

.story-tram {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 1%;
    width: 27%;
    transform: translateX(-50%);
    filter: grayscale(.82) sepia(.13) brightness(.76);
    transition: filter 1s ease;
}

.story-tram > img {
    display: block;
    width: 100%;
    filter: drop-shadow(0 6px 6px rgba(55, 42, 29, .28));
}

.tram-lamp {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 61%;
    width: 9%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #665d4e;
    transform: translate(-50%, -50%);
}

[data-story-state="PLAY_ANIMATION"] .story-tram,
[data-story-state="SHOW_DIALOG"] .story-tram {
    filter: grayscale(.08) sepia(.08) brightness(1.03);
    animation: tramIdle 2.4s ease-in-out infinite;
}

[data-story-state="PLAY_ANIMATION"] .tram-lamp,
[data-story-state="SHOW_DIALOG"] .tram-lamp {
    background: #ffd97d;
    box-shadow: 0 0 8px 3px rgba(255, 216, 122, .72), 0 0 24px 9px rgba(255, 194, 65, .34);
    transition: all .9s ease;
}

@keyframes tramIdle {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-3px); }
}

.tram-dialog {
    position: absolute;
    left: 72%;
    bottom: 82%;
    width: clamp(220px, 27vw, 330px);
    padding: 18px 22px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(.98);
    color: #443326;
    background: rgba(249, 239, 214, .97);
    border: solid #755537;
    border-width: 1px 2px 2px 1px;
    border-radius: 24px 19px 27px 18px;
    box-shadow: 4px 7px 20px rgba(51, 38, 23, .22), inset 0 0 18px rgba(112, 80, 38, .08);
    transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .3, 1);
}

.tram-dialog::after {
    content: "";
    position: absolute;
    left: 25px;
    bottom: -12px;
    width: 20px;
    height: 20px;
    background: inherit;
    border-right: 2px solid #755537;
    border-bottom: 2px solid #755537;
    transform: rotate(45deg);
}

.tram-dialog strong {
    display: block;
    margin-bottom: 5px;
    color: #8f3928;
    font-size: 19px;
}

.tram-dialog p {
    margin: 0;
    line-height: 1.7;
    white-space: pre-line;
}

[data-story-state="SHOW_DIALOG"] .tram-dialog {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.story-enter-btn {
    margin-top: 13px;
    padding: 9px 17px;
    font-size: 15px;
}

@media (max-width: 850px) {
    .home-story { padding-inline: 14px; }
    .story-heading h1 { font-size: clamp(38px, 12vw, 62px); }
    .story-layout { grid-template-columns: 1fr; gap: 24px; }
    .story-copy-card { position: relative; top: auto; width: min(680px, 100%); margin: 0 auto; }
    .story-typewriter { min-height: 340px; font-size: 16px; }
    .story-map { width: min(100%, 680px); }
}

@media (max-width: 520px) {
    .home-story { padding-top: 24px; }
    .story-heading { margin-bottom: 22px; }
    .story-heading p { gap: 9px; font-size: 13px; }
    .story-copy-card { padding: 25px 20px; border-radius: 18px; }
    .story-typewriter { min-height: 360px; font-size: 15px; line-height: 1.75; }
    .signal-button { font-size: 16px; }
    .tram-dialog { left: 42%; bottom: 83%; width: min(70vw, 270px); padding: 14px 16px; font-size: 13px; }
    .tram-dialog strong { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .home-story *,
    .home-story *::before,
    .home-story *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Journey wrapper 显示时的布局修复 */
#journey-wrapper {
    min-height: 100vh;
    padding-bottom: 40px;
}

/* 当home-story隐藏时，让#view-home不再占满视口 */
.home-story-hidden #view-home {
    min-height: auto !important;
}