/* ============================================
   长征之路 · 红色闯关游戏 — 新8关样式
   ============================================ */
:root{--red:#C41E3A;--red-dark:#8B0000;--red-light:#E8505B;--gold:#D4A843;--gold-light:#F0D78C;--cream:#F5E6CC;--dark:#1a1a2e;--text:#2C1810;--bg:#FFF8F0;--card-bg:#FFFAF3;}
*{box-sizing:border-box;margin:0;padding:0}
#longmarch-app{font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;color:var(--text);background:var(--bg);min-height:100vh;overflow-x:hidden;position:relative}
.game-screen{display:none;width:100%;min-height:100vh}.game-screen.active{display:block;animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* 开始画面 */
.start-bg{min-height:100vh;background:linear-gradient(180deg,#8B0000 0%,#C41E3A 30%,#D4453E 50%,#E8A87C 80%,#FFF8F0 100%);display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
.red-curtain{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(139,0,0,0.9) 0%,rgba(139,0,0,0.3) 40%,transparent 100%);z-index:0}
.start-content{position:relative;z-index:1;padding:2rem 1.5rem;max-width:480px;width:100%}
.star-badge{color:var(--gold-light);font-size:.85rem;letter-spacing:3px;margin-bottom:1.5rem;text-shadow:0 0 10px rgba(212,168,67,0.5)}
.title-cn{display:block;font-size:3rem;font-weight:900;color:var(--gold-light);text-shadow:3px 3px 0 rgba(0,0,0,0.3),0 0 30px rgba(212,168,67,0.4);letter-spacing:8px;margin-bottom:.3rem}
.title-sub{display:block;font-size:1rem;color:rgba(255,255,255,0.85);letter-spacing:4px;font-weight:300}
.march-progress{margin:2rem 0;padding:0 1rem}
.progress-dots{display:flex;align-items:center;justify-content:center;margin-bottom:.4rem}
.progress-dots .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.3);flex-shrink:0}
.progress-dots .dot.active{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.progress-dots .line{flex:1;height:2px;background:rgba(255,255,255,0.2);max-width:25px;margin:0 2px}
.progress-labels{display:flex;justify-content:space-between;font-size:.65rem;color:rgba(255,255,255,0.6);padding:0 5px;max-width:450px;margin:0 auto}
.start-desc{color:rgba(255,255,255,0.8);font-size:.95rem;line-height:1.8;margin-bottom:2rem}
.btn-start{display:inline-block;padding:16px 64px;font-size:1.3rem;font-weight:900;color:var(--red-dark);background:linear-gradient(135deg,#F0D78C,#D4A843);border:none;border-radius:50px;cursor:pointer;letter-spacing:8px;box-shadow:0 8px 30px rgba(0,0,0,0.3);transition:all .3s;-webkit-tap-highlight-color:transparent}
.btn-start:active{transform:scale(.95);box-shadow:0 4px 15px rgba(0,0,0,0.3)}
.lives-info{margin-top:1.5rem;color:rgba(255,255,255,0.7);font-size:1rem}

/* 地图 */
.map-header{position:sticky;top:0;z-index:10;background:linear-gradient(135deg,var(--red-dark),var(--red));color:white;padding:.8rem 1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;box-shadow:0 2px 12px rgba(0,0,0,0.2)}
.map-stats{display:flex;gap:1rem;font-size:.9rem;font-weight:600}
.map-actions{display:flex;gap:.5rem}
.btn-share,.btn-leaderboard{padding:6px 14px;font-size:.8rem;background:rgba(255,255,255,0.2);color:white;border:1px solid rgba(255,255,255,0.3);border-radius:20px;cursor:pointer}
.map-canvas{padding:1rem;max-width:500px;margin:0 auto}
.level-node{display:flex;align-items:center;padding:1rem;margin-bottom:.5rem;background:var(--card-bg);border-radius:12px;cursor:pointer;border:2px solid transparent;transition:all .3s}
.level-node:hover,.level-node:active{border-color:var(--red);box-shadow:0 4px 16px rgba(196,30,58,0.15)}
.level-node.locked{opacity:.4;cursor:not-allowed;filter:grayscale(.8)}
.level-node.completed{border-color:var(--gold);background:linear-gradient(135deg,#FFF8F0,#FFF3CD)}
.level-node.current{border-color:var(--red);box-shadow:0 0 20px rgba(196,30,58,0.3);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 20px rgba(196,30,58,0.3)}50%{box-shadow:0 0 35px rgba(196,30,58,0.5)}}
.level-node-num{width:40px;height:40px;border-radius:50%;background:var(--red);color:white;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.1rem;flex-shrink:0;margin-right:.8rem}
.level-node.completed .level-node-num{background:var(--gold)}
.level-node-info{flex:1}.level-node-name{font-weight:700;margin-bottom:2px}.level-node-type{font-size:.75rem;color:#888}
.level-node-stars{color:var(--gold);font-size:.9rem}
.level-connector{width:3px;height:20px;background:linear-gradient(to bottom,var(--red),var(--gold));margin:0 auto;border-radius:2px}

/* 关卡通用 */
.level-screen{background:var(--bg);padding-bottom:2rem}
.level-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;padding:.6rem 1rem;background:linear-gradient(135deg,var(--red-dark),var(--red));color:white;gap:.8rem}
.btn-back{background:rgba(255,255,255,0.2);color:white;border:none;width:32px;height:32px;border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.level-name{flex:1;font-weight:700;font-size:.95rem}
.level-timer{font-weight:700;font-size:1rem}
.level-story{padding:1rem 1rem .5rem;font-size:.9rem;color:#555;line-height:1.6;max-width:500px;margin:0 auto;font-style:italic}

/* 弹窗 */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:200;display:flex;align-items:center;justify-content:center}
.modal-content{background:white;border-radius:20px;padding:2rem 1.5rem;max-width:380px;width:90%;max-height:80vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.modal-close{position:absolute;top:10px;right:15px;background:#eee;border:none;width:30px;height:30px;border-radius:50%;font-size:1rem;cursor:pointer}
.modal-content h2{color:var(--red);margin-bottom:1rem}
.btn-retry,.btn-next{padding:10px 24px;margin:.3rem;border:none;border-radius:25px;font-size:.95rem;font-weight:600;cursor:pointer}
.btn-retry{background:#eee;color:#555}
.btn-next{background:linear-gradient(135deg,var(--red),var(--red-dark));color:white}

/* ====== 第1关：选择题 ====== */
.quiz-container{max-width:450px;margin:0 auto;padding:0 1rem}
.quiz-progress{display:flex;gap:4px;margin-bottom:1rem}
.quiz-progress .dot{width:12px;height:4px;background:#ddd;border-radius:2px;flex:1}
.quiz-progress .dot.done{background:var(--gold)}.quiz-progress .dot.current{background:var(--red)}
.quiz-question{font-size:1.05rem;font-weight:600;margin-bottom:1rem;line-height:1.6;min-height:60px}
.quiz-options{display:flex;flex-direction:column;gap:10px}
.quiz-option{padding:14px 16px;background:white;border:2px solid #e0d5c5;border-radius:12px;cursor:pointer;font-size:.95rem;transition:all .2s;text-align:left;-webkit-tap-highlight-color:transparent}
.quiz-option:active{transform:scale(.98)}
.quiz-option.correct{border-color:#2d8a4e;background:#e6f7ee}
.quiz-option.wrong{border-color:var(--red);background:#fde8e8}
.quiz-feedback{text-align:center;font-size:.85rem;color:#888;margin-top:1rem;min-height:24px}

/* ====== 第2关：判断题 ====== */
.judge-container{max-width:450px;margin:0 auto;padding:0 1rem;text-align:center}
.judge-score{font-size:1.1rem;font-weight:700;color:var(--red);margin-bottom:1.5rem}
.judge-question{font-size:1.1rem;font-weight:600;margin-bottom:1.5rem;line-height:1.6;min-height:80px;padding:1rem;background:white;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.judge-buttons{display:flex;gap:1rem;justify-content:center;margin-bottom:1rem}
.btn-true,.btn-false{flex:1;padding:16px;font-size:1.2rem;font-weight:700;border:none;border-radius:16px;cursor:pointer;max-width:160px;-webkit-tap-highlight-color:transparent;transition:all .2s}
.btn-true{background:#2d8a4e;color:white}.btn-true:active{background:#1a6b35}
.btn-false{background:var(--red);color:white}.btn-false:active{background:var(--red-dark)}
.judge-feedback{font-size:.9rem;color:#888;min-height:24px}

/* ====== 第3关：排序题 ====== */
.sort-container{max-width:450px;margin:0 auto;padding:0 1rem}
.sort-instruction{text-align:center;color:#888;font-size:.85rem;margin-bottom:1rem}
.sort-list{display:flex;flex-direction:column;gap:8px;margin-bottom:1rem}
.sort-item{padding:14px 16px;background:white;border:2px solid #e0d5c5;border-radius:12px;cursor:grab;font-size:.95rem;display:flex;align-items:center;gap:.8rem;user-select:none;transition:all .2s}
.sort-item:active{cursor:grabbing;box-shadow:0 4px 16px rgba(0,0,0,0.1)}
.sort-item.dragging{opacity:.5;border-color:var(--red);background:#fff0f0}
.sort-handle{color:#ccc;font-size:1.2rem;cursor:grab}
.btn-sort-submit{display:block;margin:0 auto;padding:12px 32px;font-size:1rem;font-weight:700;background:linear-gradient(135deg,var(--red),var(--red-dark));color:white;border:none;border-radius:50px;cursor:pointer}
.sort-feedback{text-align:center;margin-top:.5rem;color:#888}

/* ====== 第4关：拼图 ====== */
.puzzle-container{max-width:400px;margin:0 auto;padding:0 1rem;text-align:center}
.puzzle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:1rem;aspect-ratio:1;touch-action:none}
.puzzle-tile{background:#ddd;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer;color:white;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,0.3);transition:transform .15s}
.puzzle-tile:active{transform:scale(.95)}
.puzzle-tile.empty{background:transparent!important;border:2px dashed #ccc;cursor:default}
.btn-puzzle-shuffle{padding:10px 24px;font-size:.9rem;background:#eee;border:none;border-radius:25px;cursor:pointer;margin-top:.5rem}

/* ====== 第5关：泸定桥躲避 ====== */
.bridge-container{max-width:400px;margin:0 auto;padding:1rem;text-align:center;touch-action:none}
.bridge-scene{height:320px;background:linear-gradient(180deg,rgba(135,206,235,0.3),rgba(74,144,217,0.5) 20%,rgba(74,144,217,0.8) 35%,rgba(44,95,45,0.9) 40%,rgba(26,58,26,1) 65%);border-radius:12px;position:relative;overflow:hidden}
.bridge-chain{position:absolute;left:5%;right:5%;height:5px;background:repeating-linear-gradient(90deg,#6B4226,#8B7355 4px,#6B4226 8px);border-radius:3px;box-shadow:0 0 8px rgba(139,115,85,0.6)}
.chain-top{top:30%}.chain-bottom{top:70%}
.bullet{position:absolute;font-size:1.5rem;z-index:8;pointer-events:none;animation:bulletFlash .3s}
@keyframes bulletFlash{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}
.soldier{position:absolute;font-size:2rem;top:35%;left:50%;transform:translate(-50%,-50%);transition:left .08s ease-out;z-index:10;filter:drop-shadow(0 4px 6px rgba(0,0,0,0.5))}
.bridge-progress-bar{position:absolute;bottom:35px;left:15px;right:15px;height:8px;background:rgba(255,255,255,0.3);border-radius:4px;overflow:hidden}
.progress-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .3s;width:0%}
.bridge-hits{position:absolute;top:8px;right:10px;background:rgba(0,0,0,0.5);color:white;padding:4px 12px;border-radius:20px;font-size:.8rem}
.bridge-keys{display:flex;justify-content:center;gap:2rem;margin-top:1rem}
.btn-dir{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--red-dark));color:white;border:none;font-size:1.5rem;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center}
.btn-dir:active{transform:scale(.9)}

/* ====== 第6关：爬雪山 ====== */
.runner-container{max-width:400px;margin:0 auto;padding:0 1rem;text-align:center}
.runner-ground{height:300px;background:linear-gradient(180deg,#B0C4DE,#C8D8E8 20%,#E8E8E8 50%,#F0F0F0 70%,#fff);border-radius:12px;position:relative;overflow:hidden;box-shadow:inset 0 0 50px rgba(255,255,255,0.5)}
.runner-ground::before{content:'🏔️🏔️🏔️';position:absolute;top:15%;left:0;right:0;font-size:2rem;text-align:center;opacity:.6;pointer-events:none}
.runner-player{position:absolute;bottom:25%;left:20%;font-size:2rem;transition:transform .3s;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3));z-index:5}
.runner-player.jumping{transform:translateY(-60px)}
.obstacle{position:absolute;font-size:1.5rem;right:-50px;animation:slideLeft 3s linear;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2))}
@keyframes slideLeft{from{right:-50px}to{right:105%}}
.runner-score{margin-top:.5rem;font-weight:600;color:#4682B4}
.btn-jump{display:block;margin:1rem auto 0;padding:16px 48px;font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,#4682B4,#2c5f8a);color:white;border:none;border-radius:50px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn-jump:active{transform:scale(.95)}

/* ====== 第7关：迷宫 ====== */
.maze-container{max-width:400px;margin:0 auto;padding:0 1rem;text-align:center}
.maze-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:1rem;aspect-ratio:1}
.maze-cell{border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;aspect-ratio:1}
.maze-cell.safe{background:#7eb87e;border:1px solid #5a9a5a}
.maze-cell.swamp{background:#8B6914;border:1px solid #6B4914}
.maze-cell.start{background:#C41E3A!important;color:white}
.maze-cell.end{background:#D4A843!important;color:white}
.maze-cell.player{background:#3B82F6!important;color:white;animation:playerPulse 1s infinite}
@keyframes playerPulse{0%,100%{box-shadow:0 0 0 rgba(59,130,246,0)}50%{box-shadow:0 0 15px rgba(59,130,246,0.6)}}
.maze-controls{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:.5rem}
.btn-maze{width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,var(--red),var(--red-dark));color:white;border:none;font-size:1.3rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn-maze:active{transform:scale(.9)}
.maze-steps{color:#888;font-weight:600}

/* ====== 第8关：大会师 ====== */
.photo-container{max-width:450px;margin:0 auto;padding:0 1rem;text-align:center}
.poster-preview{margin:1rem 0}.poster-preview canvas{max-width:100%;height:auto;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.2)}
.photo-actions{display:flex;flex-direction:column;gap:8px;margin-top:1rem}
.btn-photo,.btn-generate,.btn-share-poster{padding:14px 24px;font-size:1rem;font-weight:700;border:none;border-radius:50px;cursor:pointer}
.btn-photo{background:#3B82F6;color:white}
.btn-generate{background:linear-gradient(135deg,var(--red),var(--red-dark));color:white}
.btn-share-poster{background:linear-gradient(135deg,#07C160,#06AD56);color:white}
.btn-generate:disabled,.btn-share-poster:disabled{opacity:.5;cursor:not-allowed}

/* 通关画面 */
.victory-bg{min-height:100vh;background:linear-gradient(135deg,var(--red-dark),var(--red),#E8A87C);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;position:relative;overflow:hidden}
.confetti{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
.victory-title{font-size:2.5rem;color:var(--gold-light);text-shadow:3px 3px 0 rgba(0,0,0,0.3);margin-bottom:.5rem}
.victory-subtitle{color:rgba(255,255,255,0.8);font-size:1.1rem;margin-bottom:2rem}
.victory-stats{background:rgba(255,255,255,0.15);border-radius:16px;padding:1.5rem;margin-bottom:2rem;color:white;max-width:300px;width:100%}
.victory-stats .stat-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,0.2)}
.victory-actions{display:flex;flex-direction:column;gap:10px;max-width:280px;width:100%}

/* 排行榜 & 分享 */
.leaderboard-list{max-height:300px;overflow-y:auto}
.leaderboard-item{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid #f0e8d5;gap:.8rem}
.leaderboard-rank{width:28px;height:28px;border-radius:50%;background:var(--red);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0}
.leaderboard-rank.gold{background:var(--gold)}.leaderboard-rank.silver{background:#A9A9A9}.leaderboard-rank.bronze{background:#CD7F32}
.leaderboard-name{flex:1;font-weight:600}.leaderboard-score{color:var(--red);font-weight:700}
.share-link{background:#f5f5f5;padding:.8rem;border-radius:8px;font-size:.8rem;word-break:break-all;margin:1rem 0;color:#666}
.btn-copy{padding:10px 20px;background:#3B82F6;color:white;border:none;border-radius:20px;cursor:pointer;font-weight:600}
.helper-list{margin-top:1rem}.helper-item{padding:6px 0;font-size:.85rem;color:#666;border-bottom:1px solid #f0e8d5}

/* Toast */
.knowledge-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.85);color:var(--gold-light);padding:10px 20px;border-radius:25px;font-size:.85rem;z-index:300;pointer-events:none;opacity:0;transition:opacity .5s;max-width:90%;text-align:center}
.knowledge-toast.show{opacity:1}

/* 移动端适配 */
@media(max-width:575px){.title-cn{font-size:2.2rem;letter-spacing:4px}.map-stats{font-size:.8rem;gap:.5rem}.bridge-scene{height:260px}.runner-ground{height:260px}.maze-cell{font-size:.9rem}}

/* 排序按钮 */
.sort-arrows{display:flex;flex-direction:column;margin-left:auto;gap:2px}
.sort-arrows button{width:32px;height:32px;border:none;border-radius:8px;background:#f0e8d5;color:#666;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sort-arrows button:active{background:var(--red);color:white}
.sort-text{flex:1}
@media(max-width:575px){.sort-item{padding:10px 12px;font-size:.85rem}.sort-arrows button{width:36px;height:36px}}
.puzzle-tile{flex-direction:column;gap:2px;font-size:1.2rem}
.puzzle-tile span{pointer-events:none}

/* 防止双击缩放 */

.btn-jump,.btn-dir,.btn-start,.btn-maze,.puzzle-tile,.memory-card,.quiz-option,.sort-item,.runner-ground,.bridge-scene,.shooting-area,.river-scene{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.runner-ground,.bridge-scene{touch-action:none}