/* ============================================================
   《边境栈》沿边非设关地农食冻品走私普法探案 H5
   复古档案手绘动漫风 · 移动端竖屏优先
   ============================================================ */

/* ---------- 全局配色变量 ---------- */
:root {
    --paper: #e9dfcd;      /* 主牛皮纸 */
    --ink: #2c241c;        /* 深色文字 */
    --highlight: #b83227;  /* 高亮文字 */
    --mask: rgba(0, 0, 0, 0.72); /* 弹窗遮罩 */
}

/* ---------- 全局重置 ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* 禁止横向滚动 */
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    color: #f0e6d2;
    background: #10161f;
}
body { min-height: 100vh; }
body.locked { overflow: hidden; } /* 弹窗打开时锁定底层滚动 */
img { max-width: 100%; display: block; object-fit: contain; } /* 图片不变形，自动适配容器 */
button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; color: inherit; }

/* 按下缩小反馈动画（按下 0.94，松开恢复） */
.pressable { transition: transform .15s ease, filter .2s ease; }
.pressable:active { transform: scale(.94); }

/* ---------- 页面切换：0.6s 淡入淡出 ----------
   全部页面锁定 9:16 手机竖屏画框：手机上整屏铺满；电脑宽屏上居中竖幅，两侧由 body 深色衬底 */
.view {
    display: none;
    width: min(100vw, 56.25vh); /* 56.25vh = 100vh × 9/16 */
    min-height: 100vh;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.view.view-active { display: block; animation: viewFade .6s ease; }
@keyframes viewFade { from { opacity: 0; } to { opacity: 1; } }

/* 场景背景层（图片缺失时自动透出底层渐变，保证可玩） */
.scene-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #16202e;
    z-index: 0;
}
.bg-opening { background-image: url('images/bg_start.png'), linear-gradient(180deg, #1c2836 0%, #0c141f 100%); }
.bg-map     { background-image: url('images/bg_map.png'),     linear-gradient(180deg, #22334a 0%, #101a28 100%); }

/* ============================================================
   全局常驻按钮：证据背包 / 人物档案
   ============================================================ */
.global-bar {
    position: fixed;
    top: 10px;
    /* 贴齐 9:16 竖屏画框右边：手机(窄屏)计算结果为 10px；电脑宽屏随居中竖幅右缘 */
    right: calc(50vw - min(50vw, 28.125vh) + 10px);
    z-index: 960; /* 高于弹窗遮罩(900)，任何弹窗内均可点击 */
    display: flex;
    align-items: center;
    gap: 8px;
}
.gbtn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffe9bd;
    background: rgba(12, 20, 34, .88);
    border: 1px solid rgba(255, 215, 140, .45);
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
/* 右上角圆形音乐开关：半透明悬浮，悬疑国风配色 */
.music-btn {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    color: #ffe9bd;
    background: rgba(12, 20, 34, .82);
    border: 1px solid rgba(255, 215, 140, .45);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45), inset 0 0 8px rgba(255, 215, 140, .12);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}
/* 关闭态：整体压暗，图标换成静音 */
.music-btn.is-muted {
    color: rgba(255, 233, 189, .5);
    border-color: rgba(255, 215, 140, .22);
    background: rgba(12, 20, 34, .62);
}

/* ============================================================
   页面1：开场页
   ============================================================ */
#view-opening.view-active { display: flex; }
.opening-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 64px 20px 44px;
}
.game-title {
    font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
    font-size: 46px;
    font-weight: 800;
    letter-spacing: 12px;
    text-indent: 12px; /* 抵消最后一字字距，保持视觉居中 */
    color: #fff;
    /* 白色文字 + 轻微黑色外描边 */
    text-shadow:
        1px 1px 0 #000, -1px -1px 0 #000,
        1px -1px 0 #000, -1px 1px 0 #000,
        0 4px 14px rgba(0, 0, 0, .75);
}
/* 开场页标题艺术字宽度（改这个数值即可调整标题图大小） */
.game-title-img {
    width: min(72vw, 320px);
    height: auto;
    animation: titleFade 1s ease-out both; /* 渐显；回开场页时重播 */
}
@keyframes titleFade { from { opacity: 0; } to { opacity: 1; } }

/* 开始调查按钮：旁白全部打完后才出现，渐显入场 */
#btn-start[hidden] { display: none; }   /* 覆盖 .btn-main 的 display:block */
#btn-start.rise-in { animation: titleFade .8s ease-out both; }
.narration {
    max-width: 400px;
    width: 100%;
    transform: translateY(-60px); /* 旁白文字块整体上移 */
    /* 半透明深色底，提升可读性 */
    background: rgba(8, 14, 26, .62);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.narration p {
    font-size: 14px;
    line-height: 1.9;
    color: #e9e2cf;
    text-align: justify;
    margin-bottom: 8px;
}
.narration p:last-child { margin-bottom: 0; }

/* 开场页旁白打字机：内容由 JS 逐字打出，末尾光标闪烁；每次回到开场页重新播放 */
.narr-caret {
    display: inline-block;
    width: 2px; height: 1em;
    margin-left: 2px;
    vertical-align: -0.12em;
    background: #e9e2cf;
    animation: caretBlink .8s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* 通用主按钮（btn_base.png 底图，缺失时透出红色渐变） */
.btn-main {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 13px 18px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 5px;
    text-indent: 5px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    border-radius: 12px;
    background-image: url('images/btn_base.png'), linear-gradient(180deg, #a33325 0%, #7c1f16 100%);
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 220, 160, .4);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.btn-main:hover { filter: brightness(1.15); } /* hover 亮度提升 */

/* ---------- 开场页 view-opening 全屏背景图 ---------- */
#view-opening .bg-opening {
    min-height: 100vh;
    background-image: url("images/bg_opening.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ---------- 主地图页 view-map 全屏背景图（与开场页同款） ---------- */
#view-map .bg-map {
    min-height: 100vh;
    background-image: url("images/bg_opening.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ============================================================
   页面2：客栈主地图
   ============================================================ */
#view-map.view-active { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 70px 18px 34px; }
.map-npc {
    position: absolute;
    left: 14px;
    bottom: 16px;
    width: 112px;
    border-radius: 12px;
    border: 3px solid rgba(255, 235, 190, .55);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
    z-index: 2;
}
/* 主地图提示文字：进入地图页时弹跳入场 */
@keyframes tipBounce {
    0%   { opacity: 0; transform: scale(.6); }
    55%  { opacity: 1; transform: scale(1.08); }
    75%  { transform: scale(.96); }
    100% { opacity: 1; transform: scale(1); }
}
.map-tip.bounce-once { animation: tipBounce .9s cubic-bezier(.34,1.56,.64,1) both; } /* 仅第一次进地图时由 JS 加此标记类 */
.map-tip {
    position: relative;
    z-index: 2;
    max-width: 340px;
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
    color: #efe6cf;
    background: rgba(8, 14, 24, .55);
    padding: 10px 16px;
    border-radius: 10px;
}
.scene-btns {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(80vw, 300px);
}
.scene-btn {
    padding: 14px 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 6px;
    text-indent: 6px;
    text-align: center;
    color: #ffe9bd;
    border-radius: 12px;
    border: 1px solid rgba(255, 220, 150, .45);
    background: rgba(20, 32, 50, .74);
    box-shadow: 0 0 10px rgba(255, 200, 110, .28); /* 微弱外发光 */
    transition: box-shadow .25s ease, transform .15s ease;
}
.scene-btn:hover { box-shadow: 0 0 22px rgba(255, 205, 120, .6); } /* hover 发光增强 */
.btn-reset {
    position: relative;
    z-index: 2;
    margin-top: 4px;
    padding: 6px 14px;
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(240, 230, 210, .65);
    border: 1px solid rgba(240, 230, 210, .25);
    border-radius: 16px;
    background: rgba(10, 16, 26, .5);
}

/* ============================================================
   页面3：场景搜证
   ============================================================ */
.scene-stage {
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #141d2a;
    overflow: hidden;
}
.btn-back {
    position: absolute;
    top: 14px;
    left: 12px;
    z-index: 5;
    padding: 7px 12px;
    font-size: 13px;
    letter-spacing: 1px;
    color: #ffe9bd;
    background: rgba(12, 20, 34, .8);
    border: 1px solid rgba(255, 215, 140, .4);
    border-radius: 18px;
}
.scene-empty-tip {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    z-index: 3;
    font-size: 13px;
    color: rgba(240, 230, 210, .75);
    background: rgba(8, 14, 24, .6);
    padding: 10px 16px;
    border-radius: 10px;
    white-space: nowrap;
}

/* ---------- 发光光点：呼吸闪烁 2s 循环，hover 放大 1.15 ---------- */
.lightpoint {
    position: absolute;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px; /* 以 x/y 为中心定位 */
    z-index: 4;
    cursor: pointer;
    transition: transform .2s ease;
}
.lightpoint:hover { transform: scale(1.15); }
.lp-core {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* light_point.png 缺失时透出发光渐变圆 */
    background-image: url('images/light_point.png'),
        radial-gradient(circle, rgba(255, 236, 170, .95) 0%, rgba(255, 186, 80, .55) 45%, rgba(255, 150, 40, 0) 72%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 0 16px rgba(255, 208, 100, .85), 0 0 34px rgba(255, 180, 60, .45);
    animation: breath 2s ease-in-out infinite; /* 呼吸闪烁：透明度 .4~1，缩放 1~1.08 */
}
@keyframes breath {
    0%, 100% { opacity: .4; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.08); }
}

/* ============================================================
   弹窗通用系统（遮罩 0.72 + 牛皮纸面板 + 上浮渐显）
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: var(--mask);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .3s ease;
}
.modal-overlay.show { opacity: 1; }
.modal-panel {
    position: relative;
    width: min(92vw, 430px, calc(56.25vh - 24px)); /* 不超过 9:16 画框宽度，居中落在竖幅内 */
    max-height: 84vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    padding: 22px 16px 18px;
    color: #3a2c1a;
    /* 旧牛皮纸纹理，modal_bg.png 缺失时透出纸色渐变 */
    background-image: url('images/modal_bg.png'), linear-gradient(165deg, #ecdcb0 0%, #d6bf8b 100%);
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(120, 90, 40, .35);
    transform: translateY(48px); /* 由下往上上浮 + 透明度渐显 */
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
}
.modal-overlay.show .modal-panel { transform: translateY(0); opacity: 1; }
.modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(58, 44, 26, .85);
    color: #f4e9c8;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 12px;
    color: #4a3416;
}
.modal-tip { font-size: 13px; line-height: 1.7; text-align: center; color: #6b5227; margin-bottom: 12px; }
.empty-tip { font-size: 13px; line-height: 1.8; text-align: center; color: #6b5227; padding: 18px 6px; }

/* ---------- 线索卡片（牛皮纸底图） ---------- */
.clue-card {
    position: relative;
    border-radius: 10px;
    padding: 15px 14px 12px;
    margin: 12px 0;
    background-image: url('images/card_clue_bg.png'), linear-gradient(160deg, #e3cf9d 0%, #c8ac72 100%);
    background-size: cover;
    background-position: center;
    border: 1px dashed rgba(90, 66, 28, .6);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.clue-tag {
    position: absolute;
    top: -9px;
    left: 10px;
    background: #8a2f22;
    color: #f7ead0;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 2px 8px;
    border-radius: 4px;
}
.clue-text { font-size: 14px; line-height: 1.7; font-weight: 600; color: #42311a; }

/* ---------- 人物故事块 ---------- */
.story-box {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(58, 44, 26, .08);
    border: 1px solid rgba(90, 66, 28, .35);
}
.story-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.story-head img {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;           /* 填满方框，不留底色缝 */
    object-position: 50% 18%;    /* 焦点偏上，保住人物面部 */
    border: 2px solid #7a5c2e;
    background: #caa96a;
}
.story-head b { color: #5a3d14; font-size: 15px; }
.story-text { font-size: 13.5px; line-height: 1.8; color: #4a3a20; }

/* ---------- 第二阶段弹窗：人物半身照片 + 故事 ---------- */
.story-box-alone { margin-top: 0; } /* 独立弹窗内故事框不需要顶部间距 */
.char-shot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.char-shot {
    display: block;
    width: auto;          /* 盒子贴住图片自然比例收缩，边框与照片边缘齐平无缝隙 */
    max-width: 100%;
    height: auto;
    max-height: 46vh;
    border-radius: 12px;
    border: 2px solid #7a5c2e;
    background: rgba(58, 44, 26, .1);
    box-shadow: 0 4px 14px rgba(40, 26, 10, .3);
}
.char-shot-missing { min-height: 120px; opacity: .35; } /* 照片缺失时的弱化兜底 */
.char-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.char-meta b { color: #5a3d14; font-size: 17px; letter-spacing: 2px; }
.char-meta span { font-size: 12px; color: #7a6238; }

/* ---------- 证据背包 / 人物档案 弹窗内部 ---------- */
.clue-list { display: flex; flex-direction: column; }
.bp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 网格自动排列，触摸可滚动查看 */
    gap: 10px;
}
.clue-mini {
    position: relative;
    border-radius: 10px;
    padding: 13px 10px 10px;
    background-image: url('images/card_clue_bg.png'), linear-gradient(160deg, #e3cf9d 0%, #c8ac72 100%);
    background-size: cover;
    background-position: center;
    border: 1px dashed rgba(90, 66, 28, .55);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .16);
    cursor: pointer;
    transition: transform .15s ease, filter .2s ease;
    overflow: hidden;
}
.clue-mini p {
    font-size: 12px;
    line-height: 1.6;
    font-weight: 600;
    color: #42311a;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clue-mini:hover { transform: translateY(-1px); }
.clue-mini:active { transform: scale(1.05); } /* 点击轻微放大 */
.clue-mini.locked { filter: grayscale(1); opacity: .55; pointer-events: none; cursor: default; } /* 未收集置灰不可点 */
.clue-card.big .clue-text { font-size: 15px; line-height: 1.9; }

.char-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.char-card {
    border-radius: 10px;
    padding: 10px;
    background-image: url('images/card_character_bg.png'), linear-gradient(170deg, #e8d6a6 0%, #cdb37c 100%);
    background-size: cover;
    background-position: center;
    border: 2px solid #7a5c2e;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
    transition: transform .2s ease;
}
.char-card:hover { transform: translateY(-1px); } /* hover 卡片上浮 1px */
.char-card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;           /* 铺满卡片图框，边框与图像无空隙 */
    object-position: 50% 18%;
    border-radius: 8px;
    background: #b99b60;
    margin-bottom: 6px;
}
.char-card b { display: block; text-align: center; font-size: 13.5px; color: #4a3416; margin-bottom: 2px; }
.char-role { display: block; text-align: center; font-size: 11.5px; color: #6b5227; margin-bottom: 6px; }
.story-btn {
    display: block;
    width: 100%;
    margin-top: 2px;
    padding: 7px 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #5a4318;
    background: rgba(90, 66, 28, .14);
    border: 1.5px solid rgba(90, 66, 28, .55);
    border-radius: 8px;
    transition: transform .15s ease, background .2s ease;
}
.story-btn:not([disabled]):hover { background: rgba(90, 66, 28, .24); }
.story-btn[disabled] { color: #9a8b6e; background: rgba(90, 66, 28, .05); border-color: rgba(90, 66, 28, .25); cursor: not-allowed; }
.story-fragment {
    font-size: 13px;
    line-height: 1.9;
    color: #4a3a20;
    background: rgba(58, 44, 26, .07);
    border-left: 3px solid var(--highlight);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.story-fragment:last-child { margin-bottom: 0; }

/* ============================================================
   小游戏弹窗
   ============================================================ */
.game-title-sm { font-size: 15px; font-weight: 800; text-align: center; color: #4a3416; margin-bottom: 8px; }

/* ---------- 证据碎纸旋转复位 ---------- */
.rotate-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.rotate-top .game-title-sm { flex: 1; text-align: left; margin-bottom: 0; }
.btn-preview {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #5a4318;
    background: rgba(90, 66, 28, .14);
    border: 1.5px solid rgba(90, 66, 28, .55);
    border-radius: 8px;
    white-space: nowrap;
}
.rotate-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 行 2 列 */
    gap: 10px;
}
.rotate-cell {
    aspect-ratio: 1079 / 1527; /* 跟随碎片图竖版比例，框贴合图片不留大白边 */
    max-height: 36vh; /* 矮屏保底，防止两行撑爆弹窗 */
    border-radius: 8px;
    background: rgba(58, 44, 26, .12);
    border: 2px solid rgba(90, 66, 28, .4);
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.rotate-cell:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, .22); } /* 碎片 hover 轻微上浮 */
.rotate-piece {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 图片不变形，完整落在框内 */
    transition: transform .45s ease; /* 旋转 90° 平滑过渡动画 */
}
.rotate-bottom { margin-top: 14px; text-align: center; }
.rotate-bottom .btn-plain { display: inline-block; min-width: 140px; }
.rotate-preview-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%; /* 预览整图保持原始比例，不拉伸变形 */
    max-height: 70vh;
    margin: 0 auto;
    border-radius: 8px;
}

/* ---------- 4 格拼图 ---------- */
.puzzle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    touch-action: none; /* 允许指针拖拽，屏蔽页面滚动 */
}
.puzzle-cell {
    position: relative;
    aspect-ratio: 1079 / 1527; /* 与碎片图竖版比例一致，cover 铺满不裁切不变形 */
    max-height: 36vh;
    border-radius: 8px;
    background: rgba(58, 44, 26, .14);
    border: 2px dashed rgba(90, 66, 28, .5);
}
.puzzle-cell.drop-hint { border-color: #8a2f22; background: rgba(138, 47, 34, .16); }
.puzzle-cell.sel { border-color: #1f6feb; background: rgba(31, 111, 235, .14); }
.puzzle-piece {
    position: absolute;
    inset: 2px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    touch-action: none;
    transition: transform .12s ease;
    cursor: grab;
}
.puzzle-tip { font-size: 12px; text-align: center; color: #6b5227; margin-top: 10px; }

/* ---------- 小游戏3/4：三选一图片甄别 ---------- */
.choice-row { display: flex; gap: 8px; }
.choice-item {
    position: relative;
    flex: 1;
    border: 2px solid #7a5c2e;
    border-radius: 10px;
    overflow: hidden;
    background: #b99b60;
    cursor: pointer;
    transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.choice-item img { width: 100%; aspect-ratio: 3 / 4; }
.choice-item.right { border-color: #2e7d32; box-shadow: 0 0 12px rgba(46, 125, 50, .55); }
.choice-item.wrong { border-color: #c62828; animation: shake .4s ease; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.choice-feedback { min-height: 24px; margin-top: 10px; text-align: center; font-size: 14px; font-weight: 800; letter-spacing: 1px; }
.choice-feedback.ok { color: #2e7d32; }
.choice-feedback.bad { color: #c62828; }

/* ============================================================
   页面6：圆桌推理 / 页面7：投票判定（旧纸张档案风）
   ============================================================ */
.paper-page {
    min-height: 100vh;
    padding: 76px 18px 44px;
    background-image: url('images/modal_bg.png'), linear-gradient(170deg, var(--paper) 0%, #d9cbb0 100%);
    background-size: cover;
    background-position: center;
    color: var(--ink);
}
.page-title { font-size: 24px; font-weight: 800; letter-spacing: 4px; text-align: center; color: var(--ink); margin-bottom: 8px; }
.page-title-light { font-size: 24px; font-weight: 800; letter-spacing: 4px; text-align: center; color: var(--paper); margin-bottom: 16px; }
.page-sub { font-size: 14px; text-align: center; color: #6b5a3e; margin-bottom: 16px; }
.hl { color: var(--highlight); font-weight: 700; }
.chain-box {
    background: rgba(44, 36, 28, .06);
    border: 1px dashed rgba(44, 36, 28, .4);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.chain-box p { font-size: 14px; line-height: 2.1; }

.vote-options-note {
    font-size: 12.5px;
    line-height: 1.9;
    background: rgba(44, 36, 28, .06);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 14px;
}
.vote-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.vote-row { display: flex; align-items: center; gap: 10px; }
.vote-row label { width: 72px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.vote-row select {
    flex: 1;
    min-width: 0;
    padding: 9px 10px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--ink);
    background: #f7efdc;
    border: 1.5px solid rgba(44, 36, 28, .45);
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(44, 36, 28, .12);
}

/* ---------- 页面7：走私法律小问答（逐题问答模式） ---------- */
.quiz-progress {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #6b5a3e;
    margin-bottom: 16px;
}
.quiz-card {
    background: rgba(44, 36, 28, .06);
    border: 1px dashed rgba(44, 36, 28, .4);
    border-radius: 12px;
    padding: 16px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.quiz-char {
    font-size: 14px;
    color: #6b5a3e;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(44, 36, 28, .18);
}
.quiz-char b {
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--highlight);
}
.quiz-question {
    font-size: 15px;
    line-height: 2;
    color: var(--ink);
}
.quiz-select {
    width: 100%;
    padding: 11px 12px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--ink);
    background: #f7efdc;
    border: 1.5px solid rgba(44, 36, 28, .45);
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(44, 36, 28, .12);
}
.btn-main[disabled] {
    filter: grayscale(.9);
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}
.btn-main[disabled]:hover { filter: grayscale(.9); }
/* 问答弹窗：对错结论、解析、结算 */
.quiz-verdict {
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 10px;
}
.quiz-verdict.is-right { color: #2e6b34; }
.quiz-verdict.is-wrong { color: var(--highlight); }
.quiz-explain {
    font-size: 13.5px;
    line-height: 2;
    color: #4a3a20;
    background: rgba(58, 44, 26, .08);
    border-left: 3px solid var(--highlight);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 16px;
    text-align: left;
}
.quiz-score {
    text-align: center;
    font-size: 15px;
    color: #4a3a20;
    margin-bottom: 12px;
}
.quiz-score .hl { font-size: 22px; }
.quiz-final-text {
    font-size: 13.5px;
    line-height: 2.1;
    color: #4a3a20;
    background: rgba(58, 44, 26, .08);
    border: 1px dashed rgba(44, 36, 28, .35);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
    text-align: left;
}

/* ---------- 页面6：圆桌推理 · 链条连连看 ---------- */
.match-board {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 24px;
}
#match-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 连线不挡点击 */
    z-index: 3;
    overflow: visible;
}
.match-line { fill: none; stroke-linecap: round; stroke-width: 3; }
.match-line.ok  { stroke: #a33325; opacity: .85; } /* 深棕红，与主按钮同色系 */
.match-line.bad { stroke: #d0342c; stroke-dasharray: 7 5; animation: lineFlash .28s ease-in-out 3; }
@keyframes lineFlash {
    0%, 100% { opacity: .15; }
    50%      { opacity: 1; }
}
.match-col { display: flex; flex-direction: column; gap: 8px; z-index: 1; min-width: 0; }
#match-left  { flex: 0 0 34%; justify-content: space-between; }
#match-right { flex: 1; }
/* 左侧：人物条目（圆形复古头像 + 名字），位置固定打乱不重排 */
.match-char {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(44, 36, 28, .06);
    border: 1px solid rgba(44, 36, 28, .28);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.match-char img {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 18%;
    border: 1.5px solid #b99b60; /* 浅棕细边框，复古档案质感 */
    background: #caa96a;
}
.match-char span { font-size: 13.5px; font-weight: 700; letter-spacing: 1px; color: var(--ink); }
.match-char.selected {
    background: rgba(163, 51, 37, .12);
    border-color: #a33325;
    box-shadow: 0 0 0 2px rgba(163, 51, 37, .22);
}
.match-char.locked { cursor: default; opacity: .85; }
.match-char.locked img { border-color: #a33325; }
/* 右侧：固定链条环节卡片 + 向下箭头 */
.match-step {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f4ead2;
    border: 1.5px solid rgba(44, 36, 28, .35);
    border-radius: 10px;
    padding: 9px 10px;
    box-shadow: 0 2px 6px rgba(44, 36, 28, .12);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.match-step-idx {
    flex: 0 0 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 800;
    color: #f7efdc;
    background: rgba(44, 36, 28, .55);
    border-radius: 50%;
}
.match-step p { font-size: 12.5px; line-height: 1.7; color: var(--ink); }
.match-step.locked { border-color: #a33325; background: #f7e3c8; cursor: default; }
.match-arrow {
    text-align: center;
    font-size: 15px;
    line-height: 1;
    padding: 1px 0;
    color: rgba(44, 36, 28, .55);
}

/* ---------- 人物亮相弹窗（两段式讯问 · 第一阶段） ---------- */
.intro-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.intro-bust {
    max-width: 62%;
    max-height: 38vh;
    object-fit: contain;          /* 立绘不变形，透明底 PNG 或回退证件照 */
    filter: drop-shadow(0 6px 14px rgba(40, 26, 10, .35));
}
.intro-meta { text-align: center; }
.intro-meta b { display: block; font-size: 21px; letter-spacing: 3px; color: var(--ink); }
.intro-meta span { font-size: 13px; color: #6b5a3e; }
/* 未集齐线索：亮相弹窗底部的引导提示（替代开始询问按钮） */
.intro-lock-hint {
    text-align: center;
    font-size: 13px;
    line-height: 1.8;
    color: #8a6a38;
    background: rgba(44, 36, 28, .07);
    border: 1px dashed rgba(44, 36, 28, .35);
    border-radius: 999px;
    padding: 8px 16px;
    margin: 0 auto;
    max-width: 320px;
}

/* ---------- 深挖可疑人员：线索卡按钮 + 推理提示弹窗（米色小档案，小于亮相卡） ---------- */
/* 深挖可疑人员：置于线索卡下方的红色小号胶囊按钮（次要但醒目） */
.btn-dig {
    display: block;
    margin: 20px auto 0;
    padding: 7px 26px;
    font-size: 13px;
    letter-spacing: 2px;
    color: #fff8ec;
    background: linear-gradient(180deg, #b8402c, #93301f);
    border: 1px solid rgba(255, 240, 220, .35);
    box-shadow: 0 2px 6px rgba(60, 20, 10, .35);
    border-radius: 999px;
    transition: filter .2s, transform .15s;
}
.btn-dig:hover { filter: brightness(1.1); }
.modal-panel.panel-sm { max-width: min(90vw, 392px, calc(56.25vh - 24px)); }
/* 推理框：暗色档案卡，左侧推理文案 + 右侧大幅缉私人员立绘（立绘压框边站立，暖光烘托） */
.reason-box {
    position: relative;                     /* 有定位，标签才能骑在方框上沿不被面板裁切 */
    display: flex;
    align-items: flex-end;
    gap: 2px;
    margin: 20px 0 4px;
    padding: 24px 8px 8px 16px;
    background:
        radial-gradient(120% 92% at 86% 100%, rgba(214, 92, 58, .26) 0%, rgba(214, 92, 58, 0) 62%),
        linear-gradient(160deg, rgba(30, 39, 52, .94), rgba(11, 16, 23, .97));
    border: 1px solid rgba(184, 50, 39, .48);
    border-radius: 14px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .55), 0 8px 20px rgba(0, 0, 0, .4);
    text-align: left;
}
.reason-box .clue-tag { background: #b83227; }   /* 推理标签用高亮红棕，区别于线索 */
/* 文案块不设定位，推理标签仍骑在方框左上角边缘 */
.reason-main {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;         /* 文案在立绘旁垂直居中，避免顶部留大片空档 */
    position: static;
}
.reason-text {
    font-size: 14px;
    line-height: 1.95;
    color: #f1e5ca;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    margin: 10px 0 2px;
}
/* 立绘容器：贴住方框右下角，底边轻微出血，让人物立得更稳 */
.reason-figure {
    position: relative;
    z-index: 1;
    flex: 0 0 50%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin: 0 -6px -8px 0;
    pointer-events: none;
}
/* 人物身后暖色聚光，暗底里托出立绘轮廓 */
.reason-figure::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: 118%;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 208, 138, .22) 0%, rgba(255, 172, 78, .08) 46%, rgba(255, 160, 60, 0) 71%);
}
.reason-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    max-height: 42vh;
    object-fit: contain;
    object-position: bottom right;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .62));
    /* 底边柔和淡出，与方框底色自然衔接 */
    -webkit-mask-image: linear-gradient(to bottom, #000 90%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 90%, rgba(0, 0, 0, 0) 100%);
}
@media (max-width: 360px) {
    .reason-box { padding: 22px 6px 8px 14px; }
    .reason-figure { flex-basis: 48%; }
    .reason-text { font-size: 13px; line-height: 1.9; }
}

/* ---------- 下半屏讯问独白界面（两段式讯问 · 第二阶段） ---------- */
.interrog-mask {
    position: fixed;
    inset: 0;
    z-index: 80;                  /* 低于右上角常驻按钮，不挡全局入口 */
    background: rgba(8, 12, 18, 0);
    opacity: 0;
    transition: background .35s ease, opacity .35s ease;
    cursor: pointer;              /* 点击任意位置继续 */
}
.interrog-mask.show {
    opacity: 1;
    background: rgba(8, 12, 18, .78);
}
.interrog-wrap {
    position: absolute;
    left: 50%;
    bottom: 4vh;
    transform: translateX(-50%);
    width: min(94%, 560px);
    animation: interrogUp .38s ease-out;
}
.interrog-box {
    position: relative;
    max-height: 52vh;
    overflow-y: auto;
    background: linear-gradient(160deg, #f2e6cc, #e6d5ae);
    border: 1.5px solid #8a6a38;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 0 0 4px rgba(122, 92, 46, .18);
    padding: 14px 16px 16px;
    cursor: default;
}
@keyframes interrogUp {
    from { transform: translate(-50%, 26px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
}
/* 立绘整体立在方框右上方：移出带 overflow 的方框，不再被裁剪，完整显示并放大 */
.interrog-bust {
    position: absolute;
    bottom: calc(100% - 14px);   /* 底部轻压方框顶缘 */
    right: 8px;
    width: 190px;
    max-height: 40vh;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4));
    z-index: 2;
}
.interrog-skip {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;                  /* 压过立绘，保证可点 */
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #f7efdc;
    background: rgba(58, 44, 26, .78);
    border: 1px solid #b99b60;
    border-radius: 999px;
    cursor: pointer;
}
.interrog-name {
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #6b5a3e;
    margin-bottom: 8px;
}
.interrog-lines {
    min-height: 96px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 96px;          /* 给右上立绘让位，文字不被遮挡 */
}
.interrog-line {
    font-size: 14.5px;
    line-height: 2;
    color: var(--ink);
    border-left: 3px solid rgba(163, 51, 37, .55);
    padding-left: 10px;
}
.interrog-hint {
    text-align: center;
    font-size: 12.5px;
    color: #a33325;
    opacity: 0;
    margin-top: 6px;
    transition: opacity .25s ease;
}
.interrog-hint.show { opacity: 1; animation: hintPulse 1.4s ease-in-out infinite; }
.interrog-hint .down { display: inline-block; animation: hintDown 1.4s ease-in-out infinite; }
@keyframes hintPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes hintDown  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes fadeUp    { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.interrog-end { margin-top: 12px; width: 100%; }
.interrog-end[hidden] { display: none; }   /* 覆盖 .btn-main 的 display:block，未播完独白前不显示 */

/* 地图页：圆桌推理入口 */
.reasoning-entry {
    position: relative;
    z-index: 2;
    width: min(80vw, 300px);
    padding: 12px 0;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 4px;
    text-indent: 4px;
    color: #4a3416;
    background-image: url('images/card_clue_bg.png'), linear-gradient(170deg, var(--paper) 0%, #d3bd8b 100%);
    background-size: cover;
    background-position: center;
    border: 1.5px solid rgba(90, 66, 28, .6);
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(255, 200, 110, .3);
    transition: box-shadow .25s ease, transform .15s ease;
}
.reasoning-entry:hover { box-shadow: 0 0 20px rgba(255, 205, 120, .6); }
/* 圆桌入口置灰态：三处搜证未全部完成时（仅视觉置灰，按钮仍可点击，点击弹 toast） */
.reasoning-entry.is-locked {
    opacity: .5;                 /* 降低透明度 */
    filter: grayscale(.9);       /* 去色置灰 */
    box-shadow: none;
    cursor: pointer;             /* 始终可点击 */
}
.reasoning-entry.is-locked:hover { box-shadow: none; } /* 置灰时 hover 不发光 */

/* ---------- 轻量 toast 提示 ---------- */
.game-toast {
    position: fixed;
    left: 50%;
    top: 42%;
    z-index: 9999;
    max-width: 80vw;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.5;
    text-align: center;
    color: #f6ead2;
    background: rgba(20, 14, 8, .88);
    border: 1px solid rgba(233, 223, 205, .35);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity .28s ease, transform .28s ease;
}
.game-toast.toast-show {
    opacity: 1;
    transform: translate(-50%, 0); /* 上浮 + 渐显 */
}

/* ============================================================
   页面8：结局 & 普法复盘（深色档案纹理）
   ============================================================ */
.ending-page {
    min-height: 100vh;
    padding: 76px 18px 44px;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 4px),
        linear-gradient(170deg, #1a222e 0%, #10161f 100%);
}
.ending-block {
    background: rgba(233, 223, 205, .07);
    border: 1px solid rgba(233, 223, 205, .16);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}
.ending-block h3 { font-size: 16px; letter-spacing: 2px; color: var(--paper); margin-bottom: 10px; }
.ending-block p { font-size: 13.5px; line-height: 2.1; color: #cfc6b4; margin-bottom: 10px; text-align: justify; }
.ending-block p:last-child { margin-bottom: 0; }
.ending-block b { color: var(--paper); }
.hl-dark { color: #ffb3a0; font-weight: 700; }
#view-ending .btn-main { margin-top: 4px; }

/* ---------- 通用弹窗内按钮组 ---------- */
.btn-row { display: flex; gap: 10px; margin-top: 14px; }
.btn-row .btn-main { flex: 1; max-width: none; }
.btn-plain {
    flex: 1;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    color: #5a4318;
    border-radius: 12px;
    border: 1.5px solid rgba(90, 66, 28, .55);
    background: rgba(255, 250, 235, .4);
}

/* ---------- 场景完毕弹窗按钮 ---------- */
.btn-block { width: 100%; max-width: none; margin-top: 6px; }

/* ============================================================
   移动端适配
   ============================================================ */
@media (max-width: 360px) {
    html, body { font-size: 15px; }
    .game-title { font-size: 38px; letter-spacing: 9px; text-indent: 9px; }
    .gbtn { padding: 6px 8px; font-size: 11.5px; }
    .map-npc { width: 92px; }
    .lightpoint { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
    .page-title, .page-title-light { font-size: 20px; }
    .page-sub { font-size: 13px; }
    .chain-box p, .vote-row label { font-size: 13px; }
    .match-char img { width: 34px; height: 34px; flex: 0 0 34px; }
    .match-char span { font-size: 12px; }
    .match-step p { font-size: 11.5px; }
    .interrog-bust { width: 136px; max-height: 30vh; }
    .interrog-lines { padding-right: 80px; min-height: 84px; }
    .interrog-line { font-size: 13.5px; }
    .vote-row select { font-size: 12.5px; padding: 8px; }
    .ending-block p { font-size: 12.5px; }
    .bp-grid, .char-grid { gap: 8px; }
}