/* 🌟 彻底隐藏所有丑陋的滚动条，但保留滑动功能 */
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
    display: none;
}

* { box-sizing: border-box; }

body {
    background-color: #e4e7eb; 
    display: flex; justify-content: center; align-items: center; min-height: 100vh;
    margin: 0; padding: 20px 0; 
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden; 
}

#mobile-container {
    width: 100%; max-width: 375px; 
    height: 85dvh; max-height: 896px; 
    background: rgba(245, 245, 245, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); 
    border-radius: 40px; border: 6px solid #222; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4); 
    overflow: hidden; position: relative;
}

#bg-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99; }

.screen-view { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 60px); transition: opacity 0.3s ease; z-index: 5; opacity: 0; pointer-events: none; display: flex; flex-direction: column; }
.screen-view.active { opacity: 1; pointer-events: auto; }

#view-chat-list { background-color: #FFFFFF; background-image: url('./images/ocean.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
#chat-list-header { height: 65px; background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; padding: 0 20px; font-weight: bold; font-size: 20px; color: #333; flex-shrink: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
#chat-list-container { flex: 1; overflow-y: auto; padding: 15px 0; }
.chat-list-item { display: flex; align-items: center; padding: 12px 20px; cursor: pointer; transition: 0.2s; background-color: rgba(255, 255, 255, 0.75); margin: 0 15px 12px 15px; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.chat-list-item:active { background-color: rgba(255, 255, 255, 0.95); transform: scale(0.98); }
.chat-list-avatar { width: 50px; height: 50px; border-radius: 20px; background-color: #5d6d7e; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: bold; margin-right: 15px; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
.chat-list-info { flex: 1; }
.chat-list-name { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 4px; }
.chat-list-preview { font-size: 13px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

#view-chat-room { background-color: #B2C7D9; background-image: none; }
#chat-room-header { height: 65px; background-color: #B2C7D9; display: flex; align-items: center; padding: 0 15px; font-weight: bold; font-size: 18px; color: #333; flex-shrink: 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
#back-to-chat-list { font-size: 15px; cursor: pointer; color: #333; margin-right: 15px; user-select: none; }
#back-to-chat-list:active { color: #000; }
#chat-box { flex: 1; padding: 20px 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.date-divider { text-align: center; margin: 10px 0; }
.date-divider span { background-color: rgba(0,0,0,0.1); color: #fff; font-size: 11px; padding: 5px 12px; border-radius: 15px; }
.msg-row { display: flex; width: 100%; }
.msg-row.other { justify-content: flex-start; }
.msg-row.player { justify-content: flex-end; }
.avatar { width: 42px; height: 42px; background-color: #5d6d7e; border-radius: 16px; margin-right: 10px; display: flex; justify-content: center; align-items: center; font-size: 14px; color: #fff; font-weight: bold; }
.msg-row.player .avatar { display: none; }
.msg-content { max-width: 72%; display: flex; flex-direction: column; }
.msg-row.player .msg-content { align-items: flex-end; }
.sender-name { font-size: 12px; color: #555; margin-bottom: 5px; }
.msg-row.player .sender-name { display: none; }
.bubble-wrapper { display: flex; align-items: flex-end; }
.bubble { padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4; word-wrap: break-word; color: #000; }
.msg-row.other .bubble { background-color: #FFFFFF; border-top-left-radius: 4px; }
.msg-row.player .bubble { background-color: #FEE500; border-top-right-radius: 4px; }
.msg-meta { display: flex; flex-direction: column; justify-content: flex-end; font-size: 11px; margin: 0 6px; padding-bottom: 2px;}
.msg-row.player .msg-meta { align-items: flex-end; }
.msg-row.other .msg-meta { align-items: flex-start; }
.unread { color: #e6b905; font-size: 10px; font-weight: bold; margin-bottom: 2px; }
.time { color: #778899; font-size: 10px; }

#chat-footer { height: 70px; background-color: #FFFFFF; display: flex; align-items: center; padding: 0 15px; flex-shrink: 0; gap: 10px; }
#chat-btn { flex: 2; height: 44px; background-color: #F5F5F5; border: 1px solid #E0E0E0; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; cursor: pointer; user-select: none; transition: 0.2s; }
#chat-btn:active { background-color: #E8E8E8; }
#present-btn { flex: 1; height: 44px; background-color: #333; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; cursor: pointer; font-weight: bold; transition: 0.2s; }
#present-btn:active { transform: scale(0.95); }
#present-btn.disabled { background-color: #d3d3d3; color: #fff; cursor: not-allowed; transform: none; box-shadow: none; }

#inventory-drawer { position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: #fff; border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 -5px 20px rgba(0,0,0,0.15); display: flex; flex-direction: column; z-index: 50; transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1); transform: translateY(100%); }
#inventory-drawer.active { transform: translateY(0); display: flex !important; }
.drawer-header { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; font-weight: bold; color: #333; }
.close-drawer { color: #999; cursor: pointer; font-weight: normal; font-size: 14px; }
#inventory-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.inv-item { width: calc(50% - 5px); background: #f5f5f5; border-radius: 10px; padding: 10px; text-align: center; font-size: 13px; font-weight: bold; color: #444; cursor: pointer; border: 2px solid transparent; transition: 0.2s; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.inv-item img { width: 100%; height: 60px; object-fit: cover; border-radius: 6px; }
.inv-item:active { border-color: #FEE500; background: #fffde6; }

#view-diary { background-color: #f4ecd8; padding: 30px 20px; overflow-y: auto; color: #3a3a3a; box-shadow: inset 0 0 50px rgba(0,0,0,0.1); overscroll-behavior-x: none; }
#highlighter-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; opacity: 0.7; mix-blend-mode: multiply; }
.diary-content { position: relative; z-index: 1; font-family: 'Times New Roman', serif; line-height: 1.8; }
.diary-date { font-size: 20px; font-weight: bold; margin-bottom: 20px; border-bottom: 1px dashed #ccc; padding-bottom: 10px; }
.diary-text { font-size: 16px; margin-bottom: 15px; text-indent: 2em; }
.highlight-hint { display: inline-block; background-color: rgba(255, 235, 59, 0.5); padding: 0 4px; border-radius: 2px; cursor: pointer; transition: 0.2s;}
.highlight-hint:active { background-color: rgba(255, 152, 0, 0.8); }
.secret-clue.found { pointer-events: none; color: #000; }

#view-board { 
    background-color: #cda87c; 
    background-image: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.15) 0%, rgba(70, 40, 15, 0.8) 100%), repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 2px, transparent 2px, transparent 4px), repeating-linear-gradient(-45deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 2px, transparent 2px, transparent 4px);
    box-shadow: inset 0 0 60px rgba(50, 25, 0, 0.85); 
    padding: 20px; overflow: hidden; touch-action: none; 
}

/* --- 拍立得相片（增强做旧感与物理交互反馈） --- */
.polaroid { 
    width: 105px; padding: 8px 8px 24px 8px; background: #fcfaf5; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 2px 6px 15px rgba(0, 0, 0, 0.4); 
    position: absolute; cursor: grab; user-select: none; transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.polaroid:active { cursor: grabbing; box-shadow: 8px 20px 30px rgba(0, 0, 0, 0.7); transform: scale(1.05) !important; }
.polaroid-img { width: 100%; height: 80px; background-color: #d5d5d5; display: flex; justify-content: center; align-items: center; color: #888; font-size: 12px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); }
.polaroid.memory-fragment { background: #e8dcc5; filter: sepia(0.5) contrast(1.1); box-shadow: 0 8px 25px rgba(139, 69, 19, 0.3); }
.polaroid.memory-fragment .pin { display: none !important; }

/* ==========================================
   👇 底部导航栏 & 🗺️ 地图小红点 专属 CSS 👇
   ========================================== */
#bottom-nav { position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background-color: #f8f9fa; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid #e9ecef; z-index: 20; padding-bottom: calc(15px + env(safe-area-inset-bottom)); }

.hidden { 
    display: none !important; 
}
/* 🌟 正常状态下允许地图滚动 */
#view-map { overflow: auto; } 

.nav-item { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    font-size: 12px; 
    color: #adb5bd; 
    cursor: pointer; 
    transition: 0.2s; 
    height: 100%;
    /* 🌟 核心：设为相对定位，确保小红点能精准附着 */
    position: relative; 
}
.nav-item.active { color: #343a40; font-weight: bold; }
.nav-icon { font-size: 20px; margin-bottom: 4px; }

/* 🌟 升级版：带 NEW 字样的醒目红点 */
.nav-badge { 
    position: absolute; 
    top: 2px; 
    right: calc(50% - 32px); /* 根据文字宽度微调位置 */
    background-color: #ff3b30; 
    color: white;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(255, 59, 48, 0.6);
    pointer-events: none;
    animation: badgePulse 1.5s infinite;
    z-index: 10;
}
.nav-badge::after {
    content: 'NEW';
}
.nav-badge.hidden { display: none !important; }

/* 🌟 线索板里的新相片小红点 (升级为 NEW 药丸提示) */
.clue-new-dot {
    position: absolute;
    top: -8px;
    right: -15px; /* 向外侧稍微移一点，因为标签变宽了 */
    background-color: #ff3b30;
    color: white;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px; /* 变成胶囊形状 */
    border: 2px solid #ffffff; /* 保留白色描边，更有立体感 */
    z-index: 20;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    pointer-events: none;
    animation: badgePulse 1.5s infinite; /* 加上呼吸跳动特效更带感，如果不需要可以删掉这行 */
}

/* 用伪元素自动填充 NEW 文字 */
.clue-new-dot::after {
    content: 'NEW';
}

.clue-new-dot.hidden { display: none !important; }
/* ========================================== */

#view-diary-list { background-color: #f5f6fa; padding: 20px; overflow-y: auto; }
.diary-list-title { font-size: 20px; font-weight: bold; margin-bottom: 20px; color: #333; }
.diary-list-item { background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); display: flex; align-items: center; cursor: pointer; transition: 0.2s; }
.diary-list-item:active { transform: scale(0.98); background: #f8f9fa; }
.diary-list-avatar { width: 42px; height: 42px; border-radius: 50%; color: #fff; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 16px; margin-right: 15px; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
.diary-list-info { flex: 1; }
.diary-list-date { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 4px; }
.diary-list-author { font-size: 12px; color: #777; }

#diary-back-btn { position: relative; z-index: 10; padding: 0 0 15px 0; color: #555; font-size: 14px; font-weight: bold; cursor: pointer; display: inline-block;}
#diary-back-btn:active { color: #000; }

#image-viewer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: rgba(0,0,0,0.85); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
#image-viewer.show { opacity: 1; pointer-events: auto; backdrop-filter: blur(5px); }
#close-viewer-btn { position: absolute; top: max(25px, env(safe-area-inset-top)); left: 20px; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 28px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 9999; backdrop-filter: blur(4px); }
#close-viewer-btn:active { transform: scale(0.9); }
.viewer-polaroid { width: 85%; background: white; padding: 15px 15px 50px 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.5); position: relative; display: flex; flex-direction: column; align-items: center; }
#viewer-img { width: 100%; max-height: 60vh; object-fit: cover; background-color: #ddd; }
#viewer-title { position: absolute; bottom: 15px; color: #333; font-size: 20px; font-weight: bold; letter-spacing: 2px; }

.new-badge { background-color: #ff3b30; color: white; font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 10px; margin-left: 8px; vertical-align: middle; box-shadow: 0 2px 4px rgba(255,59,48,0.3); }

#success-flash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-out; }
#success-flash.flash { opacity: 0.8; transition: none; }
#toast-message { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); color: #fff; padding: 10px 20px; border-radius: 20px; font-size: 13px; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; white-space: nowrap; letter-spacing: 1px; }
#toast-message.show { opacity: 1; }
.chat-unread-dot { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; background-color: #ff3b30; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(255,59,48,0.3); z-index: 10; }

#save-prompt-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
#save-prompt-modal.show { opacity: 1; pointer-events: auto; }
.save-prompt-box { background: #fff; width: 80%; border-radius: 16px; padding: 25px 20px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.8); transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1); }
#save-prompt-modal.show .save-prompt-box { transform: translateY(0); }
.save-prompt-title { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 10px; }
.save-prompt-desc { font-size: 14px; color: #666; margin-bottom: 25px; }
.save-prompt-btns { display: flex; justify-content: space-between; gap: 12px; }
.save-prompt-btns button { flex: 1; padding: 12px 0; border: none; border-radius: 22px; font-size: 14px; font-weight: bold; cursor: pointer; transition: 0.2s; }
#btn-restart-game { background: #f0f0f0; color: #777; }
#btn-restart-game:active { background: #e0e0e0; }
#btn-continue-game { background: #333; color: #fff; }
#btn-continue-game:active { transform: scale(0.95); }

#bgm-control-group { position: absolute; top: 25px; right: 20px; z-index: 999; display: flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.4); padding: 6px 12px 6px 6px; border-radius: 25px; backdrop-filter: blur(5px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
#bgm-toggle { width: 32px; height: 32px; background: rgba(255, 255, 255, 0.2); color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 14px; cursor: pointer; user-select: none; transition: 0.3s; }
#bgm-toggle:active { transform: scale(0.9); }
#bgm-toggle.muted { opacity: 0.5; filter: grayscale(100%); }
#bgm-volume { width: 60px; height: 4px; -webkit-appearance: none; appearance: none; background: rgba(255, 255, 255, 0.3); border-radius: 2px; outline: none; }
#bgm-volume::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 0 5px rgba(0,0,0,0.5); }


/* ==========================================
   🗺️ 松州探索地图专属 CSS
   ========================================== */
.interactive-map-container {
    position: relative;
    /* 🌟 核心修改 1：把地图进一步放大到 1400px。
       这样等比例放大的高度绝对能撑满所有长条形手机屏幕，绝不留黑边！ */
    width: 1400px; 
    margin: 0; 
    
    /* 🌟 核心修改 2：删除了之前的 padding-bottom: 80px; 彻底消灭底部空隙 */
    
    /* 鼠标拖拽手势 */
    cursor: grab;
}

/* 🌟 当鼠标按住时，手势变成抓紧 */
.interactive-map-container:active {
    cursor: grabbing;
}

.base-map-img {
    width: 100%;
    height: auto;
    display: block;
    /* 🌟 核心：禁止图片被原生拖拽（防止跟我们要写的拖拽滚动逻辑冲突） */
    user-select: none;
    pointer-events: none; 
    -webkit-user-drag: none;
}

/* 交互坐标点整体容器 */
.map-pin {
    position: absolute;
    transform: translate(-50%, -50%); /* 确保坐标中心点对齐 */
    cursor: pointer;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 坐标中心实心点 */
.pin-dot {
    width: 12px;
    height: 12px;
    background: #e74c3c; /* 默认红色 */
    border-radius: 50%;
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 坐标呼吸圈动效 */
.pin-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    border: 2px solid #e74c3c;
    border-radius: 50%;
    animation: mapPulse 1.5s infinite;
    z-index: 1;
}

/* 坐标文字标签 */
.pin-label {
    margin-top: 5px;
    background: rgba(255, 255, 255, 0.85);
    color: #333;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none; /* 防止遮挡点击 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

@keyframes mapPulse {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

@media screen and (max-width: 768px) {
    html, body { width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; }
    body { padding: 0; display: block; background-color: #f4f5f7; background-image: none; }
    #mobile-container { width: 100%; max-width: 100%; height: 100%; max-height: none; position: absolute; top: 0; left: 0; border: none; border-radius: 0; box-shadow: none; margin: 0; background: #f4f5f7; backdrop-filter: none; -webkit-backdrop-filter: none; }
    #whisper-bg { display: none; }
    #bottom-nav { padding-bottom: env(safe-area-inset-bottom); height: calc(60px + env(safe-area-inset-bottom)); }
    #view-chat-list, #view-chat-room { padding-top: max(35px, env(safe-area-inset-top)); }
    #view-diary-list, #view-board, #view-map { padding-top: max(40px, env(safe-area-inset-top)); }
    #view-diary { padding-top: max(55px, env(safe-area-inset-top)); }
    #close-viewer-btn { top: max(35px, env(safe-area-inset-top)); }
    #bgm-control-group { top: max(20px, env(safe-area-inset-top)); right: 15px; }
}

#view-board::before { 
    content: "💡 记忆的碎片尚在漂泊，试着将它们连缀成完整的过往。\A（双击照片可放大查看线索）"; 
    white-space: pre-wrap;
    line-height: 1.8;
    position: absolute; 
    top: max(80px, calc(env(safe-area-inset-top) + 40px)); 
    left: 0; 
    width: 100%; 
    text-align: center; 
    color: rgba(255, 255, 255, 0.45); 
    font-size: 12px; 
    letter-spacing: 2px; 
    pointer-events: none; 
    z-index: 10; 
}