:root {
    --screen-w: 1080;
    --screen-h: 1920;
    /* 统一缩放系数：scale = container 实际宽度 / 1080；--upx = scale * 1px。
       全部 UI 组件尺寸/字号/内边距/间距均以「1080×1920 基准画布像素 × var(--upx)」度量，
       禁止 vw/vh/clamp(vw)，确保全端组件相对比例恒定，只有整体大小随屏幕变化。 */
    --upx: 1px;
    --stage-scale: 1;
    --ink: #0b1114;
    --cold: #3A4A52;
    --brown: #5A4632;
    --moon: #C8D4D0;
    --light: #E8C87A;
    --rust: #9E2B2B;
    --paper: #f2efe6;
    --shadow: rgba(0, 0, 0, 0.72);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 18%, rgba(58, 74, 82, 0.36), transparent 34%),
        linear-gradient(120deg, #050708 0%, #0b1114 55%, #16120f 100%);
    color: var(--moon);
    font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
    touch-action: none;
    user-select: none;
}

button {
    font: inherit;
    border: 0;
    color: var(--moon);
    cursor: pointer;
}

button:disabled {
    cursor: default;
    opacity: 0.46;
}

#game-shell {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 安全区只内缩舞台外边距，不单独缩放某个组件 */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 严格保持 9:16 基准舞台，contain + 纯黑 letterbox */
#game-container {
    position: relative;
    width: min(100vw, calc(100vh * 9 / 16));
    height: min(100vh, calc(100vw * 16 / 9));
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
    background: #050708;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.75), inset 0 0 40px rgba(200, 212, 208, 0.04);
}

#game-canvas,
#ui-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#game-canvas {
    display: block;
    background: #050708;
}

#ui-layer {
    pointer-events: none;
}

#ui-layer button,
#ui-layer .modal-panel,
#ui-layer .dialogue-box,
#ui-layer .screen-overlay,
#ui-layer .inventory-bar {
    pointer-events: auto;
}

/* 固定常驻的展开/收起按钮，始终可点击 */
#ui-layer .dialogue-fab,
#ui-layer .inventory-fab {
    pointer-events: auto;
}

.hidden {
    display: none !important;
}

.screen-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 7%;
    background:
        linear-gradient(rgba(5, 7, 8, 0.74), rgba(5, 7, 8, 0.88)),
        radial-gradient(circle at 58% 32%, rgba(232, 200, 122, 0.12), transparent 32%);
    z-index: 30;
}

.screen-overlay.active {
    display: flex;
}

.loading-card {
    width: 78%;
    max-width: calc(760 * var(--upx));
    min-height: calc(420 * var(--upx));
    padding: calc(64 * var(--upx)) calc(58 * var(--upx));
    border: 1px solid rgba(200, 212, 208, 0.24);
    background: linear-gradient(160deg, rgba(10, 16, 18, 0.92), rgba(48, 43, 34, 0.78));
    box-shadow: inset 0 0 44px rgba(0, 0, 0, 0.46), 0 26px 70px rgba(0, 0, 0, 0.58);
    text-align: center;
}

#start-screen.screen-overlay {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background:
        linear-gradient(180deg, rgba(3, 5, 6, 0.84) 0%, rgba(4, 7, 8, 0.36) 24%, rgba(5, 7, 8, 0.18) 48%, rgba(5, 7, 8, 0.88) 100%),
        radial-gradient(circle at 50% 61%, rgba(232, 200, 122, 0.16), transparent 21%),
        url("../assets/images/cover_main_menu.png") center / cover no-repeat,
        #050708;
}

#start-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(200, 212, 208, 0.035) 1px, transparent 1px),
        radial-gradient(ellipse at center, transparent 44%, rgba(0, 0, 0, 0.58) 100%);
    background-size: calc(54 * var(--upx)) 100%, auto;
    mix-blend-mode: screen;
    opacity: 0.42;
}

#start-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 13%, transparent 70%, rgba(0, 0, 0, 0.7)),
        radial-gradient(circle at 49% 47%, transparent 0%, transparent 35%, rgba(0, 0, 0, 0.4) 82%);
}

.start-card {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    box-shadow: inset 0 0 64px rgba(0, 0, 0, 0.62);
}

.loading-title,
.chapter-label,
.start-copy,
.loading-text {
    letter-spacing: 0.08em;
}

.loading-title {
    font-size: calc(40 * var(--upx));
    margin-bottom: calc(44 * var(--upx));
}

.loading-track {
    width: 100%;
    height: calc(12 * var(--upx));
    border: 1px solid rgba(232, 200, 122, 0.34);
    background: rgba(0, 0, 0, 0.42);
    overflow: hidden;
}

.loading-track span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--rust), var(--light));
    transition: width 180ms ease;
}

.loading-text {
    margin-top: calc(24 * var(--upx));
    font-size: calc(24 * var(--upx));
    color: rgba(200, 212, 208, 0.72);
}

.menu-corner {
    position: absolute;
    top: calc(76 * var(--upx));
    z-index: 2;
    color: rgba(200, 212, 208, 0.72);
    font-size: calc(20 * var(--upx));
    letter-spacing: 0.12em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.86);
}

.menu-version {
    left: calc(74 * var(--upx));
}

.menu-sound {
    right: calc(74 * var(--upx));
    min-width: calc(108 * var(--upx));
    padding: calc(9 * var(--upx)) calc(12 * var(--upx));
    border: 1px solid rgba(200, 212, 208, 0.28);
    border-radius: 0;
    background: rgba(5, 7, 8, 0.42);
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.32), 0 10px 24px rgba(0, 0, 0, 0.36);
}

.menu-hint-toggle {
    right: calc(74 * var(--upx));
    top: calc(140 * var(--upx));
    min-width: calc(108 * var(--upx));
    padding: calc(9 * var(--upx)) calc(12 * var(--upx));
    border: 1px solid rgba(200, 212, 208, 0.28);
    border-radius: 0;
    background: rgba(5, 7, 8, 0.42);
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.32), 0 10px 24px rgba(0, 0, 0, 0.36);
}

.menu-title-block {
    position: absolute;
    left: calc(58 * var(--upx));
    right: calc(58 * var(--upx));
    top: calc(420 * var(--upx));
    z-index: 1;
    display: grid;
    justify-items: center;
}

.chapter-label {
    position: relative;
    margin: 0 0 calc(16 * var(--upx));
    padding: calc(5 * var(--upx)) calc(22 * var(--upx));
    color: rgba(232, 200, 122, 0.74);
    font-size: calc(24 * var(--upx));
    letter-spacing: 0.22em;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.82);
}

.chapter-label::before,
.chapter-label::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(42 * var(--upx));
    height: 1px;
    background: rgba(158, 43, 43, 0.58);
}

.chapter-label::before {
    right: 100%;
}

.chapter-label::after {
    left: 100%;
}

.start-card h1 {
    position: relative;
    max-width: 100%;
    margin: 0;
    color: rgba(242, 239, 230, 0.93);
    font-family: "STKaiti", "KaiTi", "FangSong", "Noto Serif SC", serif;
    font-size: calc(120 * var(--upx));
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1.08;
    white-space: nowrap;
    text-indent: 0.2em;
    text-shadow:
        0 2px 0 rgba(90, 70, 50, 0.74),
        0 0 18px rgba(158, 43, 43, 0.28),
        0 12px 30px rgba(0, 0, 0, 0.9);
}

.start-card h1::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: calc(-13 * var(--upx));
    height: calc(2 * var(--upx));
    background: linear-gradient(90deg, transparent, rgba(158, 43, 43, 0.72), rgba(232, 200, 122, 0.34), transparent);
    filter: blur(0.4px);
}

.start-copy {
    width: min(100%, calc(720 * var(--upx)));
    margin: calc(38 * var(--upx)) auto 0;
    color: rgba(200, 212, 208, 0.78);
    font-size: calc(27 * var(--upx));
    line-height: 1.72;
    letter-spacing: 0.1em;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.88);
}

.primary-btn,
.ghost-btn,
.modal-actions button,
.lock-actions button,
.top-controls button,
.nav-arrow {
    border: 1px solid rgba(232, 200, 122, 0.34);
    background: rgba(14, 18, 17, 0.82);
    box-shadow: inset 0 0 18px rgba(232, 200, 122, 0.05), 0 8px 18px rgba(0, 0, 0, 0.34);
}

.menu-actions {
    position: absolute;
    left: 50%;
    bottom: calc(216 * var(--upx));
    z-index: 2;
    width: min(68%, calc(520 * var(--upx)));
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(42 * var(--upx));
}

.primary-btn,
.ghost-btn {
    display: block;
    width: 100%;
    min-height: calc(86 * var(--upx));
    padding: 0 calc(22 * var(--upx));
    color: rgba(242, 239, 230, 0.9);
    font-size: calc(30 * var(--upx));
    letter-spacing: 0.22em;
    text-indent: 0.22em;
}

.menu-actions .primary-btn,
.menu-actions .ghost-btn {
    border-color: rgba(232, 200, 122, 0.42);
    background:
        linear-gradient(180deg, rgba(200, 212, 208, 0.08), rgba(0, 0, 0, 0.2)),
        linear-gradient(90deg, rgba(68, 54, 38, 0.88), rgba(16, 21, 22, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(232, 200, 122, 0.16),
        inset 0 -14px 24px rgba(0, 0, 0, 0.42),
        0 16px 34px rgba(0, 0, 0, 0.56);
}

.menu-actions .primary-btn {
    border-color: rgba(158, 43, 43, 0.7);
    background:
        linear-gradient(180deg, rgba(232, 200, 122, 0.14), rgba(0, 0, 0, 0.16)),
        linear-gradient(90deg, rgba(98, 67, 39, 0.94), rgba(77, 31, 26, 0.92));
}

.menu-legal {
    position: absolute;
    left: calc(44 * var(--upx));
    right: calc(44 * var(--upx));
    bottom: calc(92 * var(--upx));
    z-index: 2;
    margin: 0;
    color: rgba(200, 212, 208, 0.54);
    font-size: calc(16 * var(--upx));
    line-height: 1.62;
    letter-spacing: 0.04em;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.top-controls {
    position: absolute;
    right: 3.88%;
    top: 3.75%;
    display: flex;
    flex-direction: column;
    gap: calc(14 * var(--upx));
    z-index: 15;
}

.top-controls button {
    width: calc(150 * var(--upx));
    min-height: calc(58 * var(--upx));
    padding: calc(8 * var(--upx)) 0;
    border-radius: 999px;
    color: rgba(242, 239, 230, 0.9);
    font-size: calc(20 * var(--upx));
    background: rgba(9, 14, 16, 0.68);
    backdrop-filter: blur(5px);
}

.nav-arrow {
    position: absolute;
    top: 44.79%;
    width: 8.14%;
    height: 6.66%;
    border-radius: 999px;
    z-index: 14;
    color: rgba(232, 200, 122, 0.72);
    font-size: calc(86 * var(--upx));
    line-height: 1;
    background: rgba(5, 7, 8, 0.46);
}

/* 开场剧情·老式做旧风格「跳过」按钮：右下角常驻、半透明、兼容触摸 */
.intro-skip {
    position: absolute;
    right: 4%;
    bottom: 5.2%;
    z-index: 40;
    min-width: 18%;
    max-width: calc(240 * var(--upx));
    padding: calc(20 * var(--upx)) calc(28 * var(--upx));
    color: rgba(216, 204, 178, 0.86);
    font-size: calc(26 * var(--upx));
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    border: 1px solid rgba(158, 43, 43, 0.5);
    border-radius: 2px;
    background:
        linear-gradient(180deg, rgba(120, 104, 78, 0.32), rgba(0, 0, 0, 0.4)),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 5px),
        linear-gradient(90deg, rgba(52, 44, 32, 0.92), rgba(28, 24, 20, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(232, 200, 122, 0.12),
        inset 0 -8px 16px rgba(0, 0, 0, 0.46),
        0 8px 22px rgba(0, 0, 0, 0.5);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    opacity: 0.78;
    transition: opacity 200ms ease, transform 160ms ease;
}

.intro-skip:hover {
    opacity: 1;
}

.intro-skip:active {
    transform: scale(0.94);
}

.nav-left {
    left: 2.59%;
}

.nav-right {
    right: 2.59%;
}

.dialogue-box {
    position: absolute;
    left: 6%;
    /* 固定在屏幕中下部、底部道具栏(bottom 3.75% 高9.37%)之上，互不重叠 */
    bottom: 15.6%;
    width: 88%;
    max-height: 30%;
    padding: calc(24 * var(--upx)) calc(30 * var(--upx)) calc(46 * var(--upx));
    z-index: 16;
    border: 1px solid rgba(200, 212, 208, 0.22);
    background: linear-gradient(140deg, rgba(8, 12, 14, 0.9), rgba(40, 52, 58, 0.7));
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.42);
    transform-origin: bottom center;
    transition: transform 260ms ease, opacity 260ms ease;
    will-change: transform, opacity;
}

/* 收起：向下滑出并淡隐，完全不遮挡场景与道具栏 */
.dialogue-box.collapsed {
    transform: translateY(118%);
    opacity: 0;
    pointer-events: none;
}

.dialogue-box p {
    margin: 0;
    color: rgba(242, 239, 230, 0.94);
    /* 正文级字号：竖屏每行约 13~17 字、单屏 3~4 行 */
    font-size: calc(28 * var(--upx));
    line-height: 1.66;
    letter-spacing: 0.04em;
    word-break: break-word;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.dialogue-box.ghost p {
    color: var(--moon);
    /* 苏晚台词保留手写颤抖体 */
    font-family: "STKaiti", "KaiTi", "FangSong", "Noto Serif SC", serif;
    animation: ghostText 900ms steps(2, end) infinite;
}

/* 林夏内心独白：冷青灰字色 #C8D4D0，区别于普通旁白白色 */
.dialogue-box.monologue p {
    color: var(--moon);
    font-style: italic;
    letter-spacing: 0.06em;
}

/* 气音效果：透明度降低 + 1px 轻微抖动（⑧纸条后的崩溃前静） */
.dialogue-box.monologue-whisper p {
    color: var(--moon);
    font-style: italic;
    opacity: 0.7;
    animation: monologueWhisper 1400ms steps(2, end) infinite;
}

@keyframes monologueWhisper {
    0%, 100% { transform: translate(0, 0); opacity: 0.7; }
    50% { transform: translate(0, 1px); opacity: 0.78; }
}

/* 关键词静态标色：重要线索/数字用暗哑锈红，其余文字保持正常白色 */
.dialogue-box p .kw-rust {
    color: #9E2B2B;
    font-weight: 500;
}

/* 次要关键词标黄（可选用于数字/时间等） */
.dialogue-box p .kw-amber {
    color: rgba(232, 200, 122, 0.95);
    font-weight: 500;
}


/* “点击继续” 小提示 */
.dialogue-next {
    position: absolute;
    right: calc(30 * var(--upx));
    bottom: calc(12 * var(--upx));
    color: rgba(232, 200, 122, 0.78);
    font-size: calc(17 * var(--upx));
    letter-spacing: 0.08em;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.dialogue-next::after {
    content: "▼";
    margin-left: calc(6 * var(--upx));
    font-size: 0.82em;
    animation: dialogueBlink 1100ms ease-in-out infinite;
}

.dialogue-box.can-advance .dialogue-next {
    opacity: 1;
}

/* 固定常驻的展开/收起按钮：屏幕右下角、道具栏上方，位置恒定、始终可见可点。
   老式做旧小图标风格，克制不抢戏 */
.dialogue-fab {
    position: absolute;
    right: 6%;
    bottom: 14.6%;
    width: calc(52 * var(--upx));
    height: calc(52 * var(--upx));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 19;
    color: rgba(242, 239, 230, 0.82);
    font-size: calc(26 * var(--upx));
    line-height: 1;
    border: 1px solid rgba(200, 212, 208, 0.28);
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(200, 212, 208, 0.07), rgba(0, 0, 0, 0.24)),
        linear-gradient(90deg, rgba(58, 47, 33, 0.92), rgba(16, 21, 22, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(232, 200, 122, 0.12),
        0 6px 16px rgba(0, 0, 0, 0.5);
    opacity: 0.82;
    transition: transform 200ms ease, color 200ms ease, opacity 200ms ease;
}

.dialogue-fab:hover {
    opacity: 1;
}

.dialogue-fab:active {
    transform: scale(0.92);
}

.dialogue-fab-icon {
    display: block;
    pointer-events: none;
}

/* “有新内容” 红点/微光提示：仅在收起态有新旁白未读时显示 */
.dialogue-fab-dot {
    position: absolute;
    top: calc(-5 * var(--upx));
    right: calc(-5 * var(--upx));
    width: calc(15 * var(--upx));
    height: calc(15 * var(--upx));
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #c23a3a, #7d1d1d);
    box-shadow: 0 0 8px rgba(158, 43, 43, 0.85), 0 0 2px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    animation: fabDotGlow 1400ms ease-in-out infinite;
}

@keyframes fabDotGlow {
    0%, 100% { opacity: 0.5; transform: scale(0.86); box-shadow: 0 0 6px rgba(158, 43, 43, 0.6); }
    50% { opacity: 1; transform: scale(1.08); box-shadow: 0 0 12px rgba(158, 43, 43, 0.95); }
}

@keyframes dialogueBlink {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(2px); }
}

/* 文本框展开且与道具栏冲突时，临时下压道具栏，优先保证文本完整 */
.inventory-bar.dimmed {
    opacity: 0.32;
    transition: opacity 220ms ease, transform 220ms ease;
    transform: translateY(6%);
}

.inventory-bar {
    position: absolute;
    left: 5%;
    bottom: 3.75%;
    width: 90%;
    height: 9.37%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2.03%;
    padding: 1.25%;
    z-index: 18;
    border: 1px solid rgba(200, 212, 208, 0.18);
    background: linear-gradient(90deg, rgba(8, 11, 12, 0.88), rgba(37, 30, 23, 0.76));
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.62);
    transform-origin: right center;
    transition: transform 260ms ease, opacity 260ms ease;
    will-change: transform, opacity;
}

/* 道具栏水平收起：向右滑出屏幕并淡隐，不遮挡场景 */
.inventory-bar.collapsed-x {
    transform: translateX(108%);
    opacity: 0;
    pointer-events: none;
}

/* 道具栏收起/展开固定小按钮：屏幕右下角、与道具栏同高，位置恒定、始终可见可点。
   老式做旧小图标风格，水平方向箭头(‹收起 / ›展开) */
.inventory-fab {
    position: absolute;
    right: 0;
    bottom: 3.75%;
    width: calc(40 * var(--upx));
    height: 9.37%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 19;
    color: rgba(242, 239, 230, 0.82);
    font-size: calc(34 * var(--upx));
    line-height: 1;
    border: 1px solid rgba(200, 212, 208, 0.24);
    border-right: 0;
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(200, 212, 208, 0.07), rgba(0, 0, 0, 0.24)),
        linear-gradient(90deg, rgba(58, 47, 33, 0.92), rgba(16, 21, 22, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(232, 200, 122, 0.12),
        0 6px 16px rgba(0, 0, 0, 0.5);
    opacity: 0.82;
    transition: transform 200ms ease, color 200ms ease, opacity 200ms ease;
}

.inventory-fab:hover {
    opacity: 1;
}

.inventory-fab:active {
    transform: scale(0.92);
}

.inventory-fab-icon {
    display: block;
    pointer-events: none;
}

.inventory-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(200, 212, 208, 0.16);
    background: radial-gradient(circle at 50% 45%, rgba(232, 200, 122, 0.09), rgba(0, 0, 0, 0.42));
    overflow: hidden;
}

.inventory-slot.selected {
    border-color: rgba(232, 200, 122, 0.78);
    box-shadow: 0 0 22px rgba(232, 200, 122, 0.24);
}

.inventory-slot img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.58));
}

.inventory-slot.empty::after {
    content: "";
    width: 42%;
    height: 1px;
    background: rgba(200, 212, 208, 0.18);
}

.toast-layer {
    position: absolute;
    left: 50%;
    top: 68.75%;
    width: 86%;
    transform: translateX(-50%);
    z-index: 35;
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--upx));
    align-items: center;
    pointer-events: none;
}

.toast {
    max-width: 100%;
    padding: calc(12 * var(--upx)) calc(22 * var(--upx));
    color: var(--light);
    background: rgba(5, 7, 8, 0.72);
    border: 1px solid rgba(232, 200, 122, 0.24);
    font-size: calc(26 * var(--upx));
    letter-spacing: 0.06em;
    animation: toastRise 900ms ease forwards;
}

.toast.error {
    color: rgba(158, 43, 43, 0.9);
    border-color: rgba(158, 43, 43, 0.38);
}

.modal-layer {
    position: absolute;
    inset: 0;
    z-index: 24;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6%;
    background: rgba(0, 0, 0, 0.72);
    pointer-events: auto;
}

.modal-panel {
    width: 88%;
    max-height: 76%;
    overflow: auto;
    padding: calc(42 * var(--upx));
    border: 1px solid rgba(200, 212, 208, 0.24);
    background:
        linear-gradient(145deg, rgba(12, 17, 18, 0.96), rgba(42, 35, 28, 0.94)),
        radial-gradient(circle at 50% 0, rgba(232, 200, 122, 0.14), transparent 40%);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.7), inset 0 0 34px rgba(0, 0, 0, 0.45);
}

.modal-panel h2,
.modal-panel h3 {
    margin: 0 0 calc(24 * var(--upx));
    color: var(--paper);
    font-weight: 500;
    letter-spacing: 0.12em;
}

.modal-panel h2 {
    font-size: calc(56 * var(--upx));
}

.modal-panel h3 {
    font-size: calc(36 * var(--upx));
}

.modal-panel p,
.modal-panel li,
.modal-panel label {
    color: rgba(200, 212, 208, 0.88);
    font-size: calc(28 * var(--upx));
    line-height: 1.72;
    letter-spacing: 0.04em;
}

.modal-panel img {
    display: block;
    width: min(64%, calc(520 * var(--upx)));
    max-height: 38%;
    object-fit: contain;
    margin: 0 auto calc(26 * var(--upx));
    filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.52));
}

.modal-actions,
.lock-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(16 * var(--upx));
    margin-top: calc(28 * var(--upx));
}

.modal-actions button,
.lock-actions button {
    min-height: calc(62 * var(--upx));
    padding: calc(10 * var(--upx)) calc(12 * var(--upx));
    color: rgba(242, 239, 230, 0.92);
    font-size: calc(24 * var(--upx));
}

.clue-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clue-list li {
    margin-bottom: calc(22 * var(--upx));
    padding-bottom: calc(18 * var(--upx));
    border-bottom: 1px solid rgba(200, 212, 208, 0.12);
}

.clue-list strong {
    display: block;
    margin-bottom: calc(6 * var(--upx));
    color: var(--light);
    font-weight: 500;
}

.password-digits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(22 * var(--upx));
    margin: calc(30 * var(--upx)) 0;
}

.password-digit {
    display: grid;
    gap: calc(12 * var(--upx));
    justify-items: center;
}

.password-digit button {
    width: 100%;
    min-height: calc(58 * var(--upx));
    color: var(--light);
    border: 1px solid rgba(232, 200, 122, 0.26);
    background: rgba(5, 7, 8, 0.56);
}

.password-value {
    width: 100%;
    min-height: calc(110 * var(--upx));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--paper);
    font-size: calc(84 * var(--upx));
    border: 1px solid rgba(200, 212, 208, 0.2);
    background: rgba(0, 0, 0, 0.48);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.64);
    transition: color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

/* 密码逐位拨对：该位暖黄微亮 120ms（不直说哪几位对） */
.password-value.digit-correct {
    color: var(--light);
    border-color: rgba(232, 200, 122, 0.85);
    box-shadow: inset 0 0 30px rgba(232, 200, 122, 0.4), 0 0 20px rgba(232, 200, 122, 0.32);
}

/* 关键道具特写小弹窗：居中放大、轻微入场缩放 */
.modal-panel.clueup-panel {
    width: auto;
    min-width: 52%;
    max-width: 78%;
    text-align: center;
    animation: clueupPop 220ms ease-out;
}

.modal-panel.clueup-panel .clueup-img {
    width: min(56%, calc(460 * var(--upx)));
    max-height: 42%;
    animation: clueupSpin 220ms ease-out;
}

@keyframes clueupPop {
    0% { opacity: 0; transform: scale(0.6); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes clueupSpin {
    0% { transform: scale(0) rotate(-12deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* 首次获得道具/接触交互物的介绍弹窗：克制淡入，居中显示 */
.modal-panel.intro-panel {
    text-align: center;
    animation: introFade 260ms ease-out;
}

.modal-panel.intro-panel p {
    text-align: left;
}

@keyframes introFade {
    0% { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 线索精绘特写弹窗：暗色背景上放大展示高清线索图，玩家观察画面自主读取 */
.modal-panel.clue-detail-panel {
    width: auto;
    min-width: 60%;
    max-width: 88%;
    text-align: center;
    background:
        linear-gradient(150deg, rgba(8, 11, 12, 0.98), rgba(20, 17, 14, 0.97)),
        radial-gradient(circle at 50% 0, rgba(232, 200, 122, 0.10), transparent 42%);
    animation: introFade 240ms ease-out;
}

.modal-panel.clue-detail-panel .clue-detail-img {
    display: block;
    margin: 0 auto;
    width: auto;
    max-width: 100%;
    max-height: 56vh;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.6));
}

/* 道具详情里的线索精绘图同样放大可读 */
.modal-panel .clue-detail-img {
    display: block;
    margin: 0 auto calc(20 * var(--upx));
    width: auto;
    max-width: 100%;
    max-height: 50vh;
    object-fit: contain;
}

/* 线索册回看缩略图：可点击放大 */
.clue-list li.has-image {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(10 * var(--upx));
}

.clue-list .clue-list-thumb {
    width: calc(220 * var(--upx));
    max-width: 60%;
    height: auto;
    border: 1px solid rgba(200, 212, 208, 0.28);
    border-radius: calc(6 * var(--upx));
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    transition: transform 160ms ease, border-color 160ms ease;
}

.clue-list .clue-list-thumb:hover {
    transform: scale(1.04);
    border-color: rgba(232, 200, 122, 0.6);
}

.seat-options {
    display: grid;
    gap: calc(16 * var(--upx));
    margin-top: calc(22 * var(--upx));
}

.seat-options button {
    min-height: calc(64 * var(--upx));
    color: rgba(242, 239, 230, 0.9);
    border: 1px solid rgba(200, 212, 208, 0.18);
    background: rgba(8, 12, 14, 0.72);
}

#orientation-warning {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 10%;
    color: var(--moon);
    background: #050708;
    text-align: center;
    font-size: calc(34 * var(--upx));
    line-height: 1.8;
    letter-spacing: 0.1em;
}

@media (orientation: landscape) and (max-height: 720px) {
    #orientation-warning {
        display: flex;
    }
}

@keyframes toastRise {
    0% {
        opacity: 0;
        transform: translateY(26px);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-52px);
    }
}

@keyframes ghostText {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(1px, -1px);
    }
}

/* ─── 陈伯 AI 对话 UI：AVG 对话框（本轮重构）──────────────────────────────── */
/*
 * 形态：经典解谜/AVG 对话框
 *   - 画面底部横向对话框区域：说话人名字 + 打字机台词
 *   - 操作按钮行："开口说话"（弹输入框）+ "不再说了"（离开出口）
 *   - 输入区：默认隐藏，点"开口说话"后滑出，发送后立即收起
 * 风格：与全章冷青灰 + 暗褐色调一致，--upx 等比缩放
 */

/* ── 整体容器：叠在游戏画面底部 ── */
.chenbo-avg-ui {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    animation: avgSlideIn 0.32s ease-out both;
}

.chenbo-avg-ui.hidden {
    display: none;
}

@keyframes avgSlideIn {
    from { opacity: 0; transform: translateY(calc(32 * var(--upx, 1px))); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 对话框主体 ── */
.chenbo-avg-dialog {
    position: relative;
    min-height: calc(220 * var(--upx, 1px));
    padding: calc(28 * var(--upx, 1px)) calc(36 * var(--upx, 1px)) calc(44 * var(--upx, 1px));
    background:
        linear-gradient(160deg, rgba(8, 13, 16, 0.96), rgba(30, 40, 46, 0.94)),
        linear-gradient(180deg, rgba(200, 212, 208, 0.04), transparent);
    border-top: calc(1.5 * var(--upx, 1px)) solid rgba(200, 212, 208, 0.28);
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 calc(-8 * var(--upx, 1px)) calc(32 * var(--upx, 1px)) rgba(0, 0, 0, 0.55);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 说话人名字标签 */
.chenbo-avg-speaker {
    display: inline-block;
    margin-bottom: calc(14 * var(--upx, 1px));
    padding: calc(4 * var(--upx, 1px)) calc(18 * var(--upx, 1px)) calc(4 * var(--upx, 1px)) calc(14 * var(--upx, 1px));
    color: rgba(232, 200, 122, 0.92);
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: calc(26 * var(--upx, 1px));
    font-weight: 500;
    letter-spacing: calc(4 * var(--upx, 1px));
    border-left: calc(3 * var(--upx, 1px)) solid rgba(158, 43, 43, 0.72);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

/* 台词文字区 */
.chenbo-avg-line {
    color: rgba(242, 239, 230, 0.94);
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: calc(30 * var(--upx, 1px));
    line-height: 1.72;
    letter-spacing: 0.04em;
    word-break: break-word;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
    min-height: calc(52 * var(--upx, 1px));
}

/* 玩家台词：冷青灰色，斜体 */
.chenbo-avg-line--player {
    color: var(--moon);
    font-style: italic;
}

/* "▼ 点击继续" 提示 */
.chenbo-avg-tap-hint {
    position: absolute;
    right: calc(28 * var(--upx, 1px));
    bottom: calc(14 * var(--upx, 1px));
    color: rgba(232, 200, 122, 0.72);
    font-size: calc(20 * var(--upx, 1px));
    pointer-events: none;
    animation: avgTapBlink 1100ms ease-in-out infinite;
}

@keyframes avgTapBlink {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50%       { opacity: 1;   transform: translateY(calc(3 * var(--upx, 1px))); }
}

/* ── 操作按钮行 ── */
.chenbo-avg-actions {
    display: flex;
    gap: calc(20 * var(--upx, 1px));
    padding: calc(16 * var(--upx, 1px)) calc(36 * var(--upx, 1px));
    background: rgba(6, 10, 12, 0.92);
    border-top: calc(1 * var(--upx, 1px)) solid rgba(200, 212, 208, 0.10);
}

.chenbo-avg-btn {
    flex: 1;
    min-height: calc(72 * var(--upx, 1px));
    padding: calc(12 * var(--upx, 1px)) calc(16 * var(--upx, 1px));
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: calc(26 * var(--upx, 1px));
    letter-spacing: 0.12em;
    border-radius: 0;
    transition: background 0.15s, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.chenbo-avg-btn--talk {
    color: rgba(242, 239, 230, 0.92);
    border: calc(1 * var(--upx, 1px)) solid rgba(232, 200, 122, 0.32);
    background:
        linear-gradient(180deg, rgba(90, 70, 50, 0.6), rgba(50, 40, 28, 0.8));
}

.chenbo-avg-btn--talk:hover,
.chenbo-avg-btn--talk:active {
    background:
        linear-gradient(180deg, rgba(120, 95, 68, 0.72), rgba(70, 55, 38, 0.88));
}

.chenbo-avg-btn--leave {
    color: rgba(200, 212, 208, 0.72);
    border: calc(1 * var(--upx, 1px)) solid rgba(200, 212, 208, 0.18);
    background: rgba(14, 20, 22, 0.72);
}

.chenbo-avg-btn--leave:hover,
.chenbo-avg-btn--leave:active {
    background: rgba(30, 40, 44, 0.82);
    color: rgba(200, 212, 208, 0.9);
}

.chenbo-avg-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

/* ── 输入区（默认隐藏，点"开口说话"后滑出）── */
.chenbo-avg-input-area {
    display: flex;
    gap: calc(12 * var(--upx, 1px));
    padding: calc(14 * var(--upx, 1px)) calc(36 * var(--upx, 1px));
    background: rgba(8, 12, 14, 0.96);
    border-top: calc(1 * var(--upx, 1px)) solid rgba(200, 212, 208, 0.14);
    animation: avgInputSlide 0.22s ease-out both;
}

.chenbo-avg-input-area.hidden {
    display: none;
}

@keyframes avgInputSlide {
    from { opacity: 0; transform: translateY(calc(12 * var(--upx, 1px))); }
    to   { opacity: 1; transform: translateY(0); }
}

.chenbo-avg-input {
    flex: 1;
    background: rgba(58, 74, 82, 0.45);
    border: calc(1 * var(--upx, 1px)) solid rgba(200, 212, 208, 0.28);
    border-radius: calc(4 * var(--upx, 1px));
    color: #e8ddd0;
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: calc(26 * var(--upx, 1px));
    padding: calc(10 * var(--upx, 1px)) calc(16 * var(--upx, 1px));
    outline: none;
    transition: border-color 0.15s;
    min-width: 0;
    -webkit-appearance: none;
}

.chenbo-avg-input::placeholder {
    color: rgba(200, 212, 208, 0.35);
}

.chenbo-avg-input:focus {
    border-color: rgba(232, 200, 122, 0.5);
    background: rgba(58, 74, 82, 0.65);
}

.chenbo-avg-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chenbo-avg-send {
    background: rgba(90, 70, 50, 0.82);
    border: calc(1 * var(--upx, 1px)) solid rgba(232, 200, 122, 0.28);
    border-radius: calc(4 * var(--upx, 1px));
    color: #e8ddd0;
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: calc(26 * var(--upx, 1px));
    padding: calc(10 * var(--upx, 1px)) calc(24 * var(--upx, 1px));
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.chenbo-avg-send:hover,
.chenbo-avg-send:active {
    background: rgba(120, 95, 68, 0.92);
}

.chenbo-avg-send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── "呼唤陈伯"按钮（走廊夜景专用，Jump后才出现）── */
#chenbo-test-trigger {
    position: absolute;
    right: calc(28 * var(--upx, 1px));
    bottom: calc(210 * var(--upx, 1px));
    z-index: 18;
    background: rgba(58, 74, 82, 0.82);
    border: calc(1.5 * var(--upx, 1px)) solid rgba(200, 212, 208, 0.35);
    border-radius: calc(8 * var(--upx, 1px));
    color: #C8D4D0;
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: calc(22 * var(--upx, 1px));
    padding: calc(10 * var(--upx, 1px)) calc(18 * var(--upx, 1px));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

#chenbo-test-trigger:hover,
#chenbo-test-trigger:active {
    background: rgba(90, 70, 50, 0.82);
}

#chenbo-test-trigger.hidden {
    display: none;
}