/* ========== 通用遮罩 ========== */
.overlay-screen{
  position:fixed;inset:0;z-index:150;
  background:linear-gradient(rgba(5,0,0,0.96),rgba(0,0,0,0.98));
  display:flex;flex-direction:column;animation:fadeIn 0.3s;
}
.overlay-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 26px;border-bottom:1.5px solid #4a1515;
  background:rgba(15,5,5,0.9);flex-shrink:0;
}
.overlay-title{font-size:22px;color:#c88;letter-spacing:8px;font-weight:bold}
.overlay-close{
  padding:8px 20px;background:rgba(40,15,15,0.9);border:1.5px solid #6a2020;
  color:#c88;cursor:pointer;font-family:inherit;font-size:14px;letter-spacing:3px;
  transition:all 0.2s;
}
.overlay-close:hover{background:rgba(80,25,25,1);border-color:#c22;color:#fff}
.overlay-body{flex:1;overflow:hidden;position:relative}

/* ========== 剧情树:工具栏 ========== */
.tree-toolbar{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;gap:10px;padding:12px 20px;
  background:linear-gradient(to bottom,rgba(15,5,5,0.95),rgba(15,5,5,0.6));
  flex-wrap:wrap;align-items:center;
}
.tree-search{
  flex:1;min-width:200px;padding:8px 14px;
  background:rgba(20,10,10,0.9);border:1.5px solid #533;color:#e8d8d8;
  font-family:inherit;font-size:14px;letter-spacing:1px;
}
.tree-search:focus{outline:none;border-color:#c22;box-shadow:0 0 10px rgba(194,34,34,0.3)}
.tree-stat{padding:8px 14px;background:rgba(20,10,10,0.85);border:1px solid #422;color:#c88;font-size:12px;letter-spacing:2px}
.tree-btn{
  padding:8px 14px;background:rgba(20,10,10,0.9);border:1.5px solid #533;
  color:#c88;cursor:pointer;font-family:inherit;font-size:13px;letter-spacing:2px;transition:all 0.2s;
}
.tree-btn:hover{background:rgba(60,20,20,1);border-color:#c22;color:#fff}
.tree-btn.danger{border-color:#741;color:#e86}
.tree-btn.danger:hover{background:rgba(80,30,10,1);border-color:#f66;color:#fff}

.tree-legend{
  position:absolute;bottom:14px;left:20px;z-index:10;
  background:rgba(10,5,5,0.88);border:1px solid #422;padding:8px 14px;
  font-size:11px;color:#998;letter-spacing:1px;line-height:1.8;
}
.tree-legend .lg-item{display:inline-block;margin-right:14px}
.tree-legend .lg-dot{display:inline-block;width:10px;height:10px;vertical-align:middle;margin-right:4px;border:1.5px solid}
.tree-legend .lg-lit{background:rgba(255,200,80,0.25);border-color:#fd6}
.tree-legend .lg-unlit{background:transparent;border-color:#555;border-style:dashed}
.tree-legend .lg-survive{background:rgba(0,200,100,0.3);border-color:#4f8}
.tree-legend .lg-death{background:rgba(200,30,30,0.3);border-color:#f44}
.tree-legend .lg-current{background:rgba(255,180,50,0.5);border-color:#fe8;box-shadow:0 0 6px rgba(255,200,80,0.8)}

.tree-hint{
  position:absolute;bottom:14px;right:20px;z-index:10;
  background:rgba(10,5,5,0.88);border:1px solid #422;padding:8px 14px;
  font-size:11px;color:#886;letter-spacing:1px;
}

/* ========== 剧情树:拖拽画布 ========== */
.tree-canvas{
  position:absolute;inset:0;top:70px;
  overflow:hidden;cursor:grab;
  background:
    radial-gradient(ellipse at 50% 30%,rgba(60,10,10,0.2),transparent 60%),
    repeating-linear-gradient(0deg,transparent 0,transparent 49px,rgba(80,20,20,0.08) 49px,rgba(80,20,20,0.08) 50px),
    repeating-linear-gradient(90deg,transparent 0,transparent 49px,rgba(80,20,20,0.08) 49px,rgba(80,20,20,0.08) 50px),
    #050202;
}
.tree-canvas.dragging{cursor:grabbing}
.tree-canvas-inner{
  position:absolute;top:0;left:0;
  transform-origin:0 0;
  will-change:transform;
  transition:none;
}

/* SVG 连线层 */
.tree-svg{
  position:absolute;top:0;left:0;
  pointer-events:none;
  overflow:visible;
}
.tree-link{
  fill:none;stroke:#5a3030;stroke-width:2;
  transition:stroke 0.2s,stroke-width 0.2s;
}
.tree-link.lit{stroke:#a86830;stroke-width:2.5}
.tree-link.on-path{stroke:#fd6;stroke-width:3;filter:drop-shadow(0 0 4px rgba(255,220,100,0.6))}
.tree-link-label{
  fill:#b98;font-size:12px;font-family:'SimHei','Microsoft YaHei UI',sans-serif;
  letter-spacing:1px;paint-order:stroke;
  stroke:#0a0505;stroke-width:3px;stroke-linejoin:round;
}
.tree-link-label.lit{fill:#fd8}
.tree-link-label.on-path{fill:#ffe;font-weight:bold}

/* 节点矩形 */
.tn-box{
  position:absolute;
  background:rgba(15,8,8,0.9);border:1.5px dashed #555;
  padding:10px 14px;cursor:default;
  color:#776;font-size:13px;letter-spacing:1px;
  box-sizing:border-box;
  transition:all 0.25s,transform 0.15s;
  user-select:none;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
}
.tn-box.lit{
  background:linear-gradient(135deg,rgba(40,25,5,0.92),rgba(25,15,5,0.92));
  border:1.5px solid #fd6;
  color:#ffe;
  box-shadow:0 0 12px rgba(255,200,80,0.35),0 2px 8px rgba(0,0,0,0.5);
}
.tn-box.lit:hover{
  background:linear-gradient(135deg,rgba(80,50,10,0.95),rgba(50,30,10,0.95));
  border-color:#ffd;
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 0 22px rgba(255,220,100,0.6),0 4px 12px rgba(0,0,0,0.6);
  cursor:pointer;
}
.tn-box.current{
  background:linear-gradient(135deg,rgba(100,60,10,0.95),rgba(60,35,5,0.95));
  border:2.5px solid #fe8;
  color:#fff;
  animation:currentPulse 1.6s ease-in-out infinite;
  z-index:5;
}
@keyframes currentPulse{
  0%,100%{box-shadow:0 0 15px rgba(255,200,80,0.6),0 2px 8px rgba(0,0,0,0.5)}
  50%{box-shadow:0 0 30px rgba(255,220,100,1),0 0 50px rgba(255,180,50,0.5),0 2px 8px rgba(0,0,0,0.5)}
}

.tn-box.on-path{
  border-color:#fec;
}
.tn-box.short-branch{
  border-style:dashed;
}

/* 结局节点 */
.tn-box.ending-survive{
  background:linear-gradient(135deg,rgba(5,50,25,0.95),rgba(5,30,15,0.95));
  border:2px solid #4f8;
  color:#afa;
  box-shadow:0 0 18px rgba(80,255,136,0.4),0 2px 8px rgba(0,0,0,0.5);
}
.tn-box.ending-survive.lit{color:#cfd;box-shadow:0 0 22px rgba(80,255,136,0.6),0 2px 8px rgba(0,0,0,0.5)}
.tn-box.ending-survive:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 30px rgba(80,255,136,0.8),0 4px 12px rgba(0,0,0,0.6);cursor:pointer}
.tn-box.ending-death{
  background:linear-gradient(135deg,rgba(50,5,5,0.95),rgba(30,5,5,0.95));
  border:2px solid #f44;
  color:#faa;
  box-shadow:0 0 18px rgba(255,50,50,0.4),0 2px 8px rgba(0,0,0,0.5);
}
.tn-box.ending-death.lit{color:#fcc;box-shadow:0 0 22px rgba(255,50,50,0.6),0 2px 8px rgba(0,0,0,0.5)}
.tn-box.ending-death:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 30px rgba(255,50,50,0.8),0 4px 12px rgba(0,0,0,0.6);cursor:pointer}

.tn-box.ending-survive.unlit,
.tn-box.ending-death.unlit{
  background:rgba(15,10,10,0.85);
  border-style:dashed;
  color:#665;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
}

/* 节点内部结构 */
.tn-icon-tag{
  display:inline-block;margin-right:6px;font-size:14px;vertical-align:middle;
}
.tn-title-row{
  display:flex;align-items:center;font-weight:bold;font-size:13px;
  margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tn-desc{
  font-size:11px;color:inherit;opacity:0.75;line-height:1.4;
  max-height:34px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.tn-badge{
  position:absolute;top:-8px;right:-8px;
  background:#c22;color:#fff;font-size:10px;padding:2px 6px;border-radius:8px;
  letter-spacing:1px;font-weight:bold;box-shadow:0 0 8px rgba(194,34,34,0.6);
}
.tn-badge.survive{background:#084;box-shadow:0 0 8px rgba(0,170,80,0.6)}

.tn-box.match{
  border-color:#fff!important;
  box-shadow:0 0 18px rgba(255,255,255,0.5),0 0 30px rgba(255,220,100,0.4)!important;
  transform:scale(1.05);
  z-index:4;
}

/* 搜索无匹配 */
.tn-box.dim{opacity:0.15}

/* 缩放指示 */
.zoom-display{
  position:absolute;top:76px;right:20px;z-index:10;
  background:rgba(10,5,5,0.9);border:1px solid #422;
  padding:6px 12px;font-size:12px;color:#c88;letter-spacing:1px;
}

/* ========== 图鉴 ========== */
.gallery-filters{
  display:flex;gap:10px;padding:16px 22px;border-bottom:1px solid #4a1515;
  background:rgba(15,5,5,0.85);flex-wrap:wrap;
}
.gallery-filter{
  padding:8px 18px;background:rgba(25,10,10,0.85);border:1.5px solid #533;
  color:#c88;cursor:pointer;font-family:inherit;font-size:13px;letter-spacing:2px;transition:all 0.2s;
}
.gallery-filter:hover{background:rgba(60,20,20,0.95);color:#fff}
.gallery-filter.active{background:rgba(100,30,30,0.95);border-color:#c22;color:#fff;box-shadow:0 0 12px rgba(194,34,34,0.4)}

.gallery-grid{
  padding:20px 22px;overflow-y:auto;max-height:100%;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
}
.gallery-card{
  position:relative;padding:16px 18px;
  background:rgba(15,8,8,0.9);border:1.5px solid #533;
  cursor:pointer;transition:all 0.25s;min-height:140px;
}
.gallery-card.survive{border-color:#4a8;background:linear-gradient(135deg,rgba(5,30,15,0.9),rgba(5,20,10,0.9))}
.gallery-card.survive:hover{border-color:#4f8;box-shadow:0 0 22px rgba(80,255,136,0.4);transform:translateY(-3px)}
.gallery-card.death{border-color:#a44;background:linear-gradient(135deg,rgba(35,5,5,0.9),rgba(20,5,5,0.9))}
.gallery-card.death:hover{border-color:#f44;box-shadow:0 0 22px rgba(255,50,50,0.4);transform:translateY(-3px)}
.gallery-card.locked{cursor:default;opacity:0.55}
.gallery-card.locked .gc-title{color:#665;letter-spacing:6px}
.gc-icon{font-size:26px;margin-right:8px;vertical-align:middle}
.gc-tag{font-size:11px;color:#ca8;letter-spacing:2px;vertical-align:middle}
.gallery-card.survive .gc-tag{color:#8fc}
.gallery-card.death .gc-tag{color:#faa}
.gc-title{font-size:18px;color:#e8d8d8;margin:10px 0 8px;letter-spacing:2px;font-weight:bold}
.gc-preview{font-size:12px;color:#998;line-height:1.6;max-height:48px;overflow:hidden}
.gc-meta{margin-top:10px;padding-top:8px;border-top:1px dotted #422;font-size:11px;color:#775;letter-spacing:1px}

.gc-detail-overlay{
  position:fixed;inset:0;z-index:400;background:rgba(0,0,0,0.9);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn 0.3s;
}
.gc-detail-panel{
  max-width:620px;width:100%;max-height:85vh;overflow-y:auto;
  padding:32px 36px;background:rgba(10,5,5,0.96);border:2px solid;animation:frameAppear 0.4s;
}
.gc-detail-panel.survive{border-color:#4f8;box-shadow:0 0 40px rgba(80,255,136,0.3)}
.gc-detail-panel.death{border-color:#f44;box-shadow:0 0 40px rgba(255,50,50,0.3)}
.gc-detail-title{font-size:24px;letter-spacing:6px;text-align:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #422}
.gc-detail-panel.survive .gc-detail-title{color:#afa}
.gc-detail-panel.death .gc-detail-title{color:#faa}
.gc-detail-text{font-size:14px;line-height:2;color:#d8d0d0;white-space:pre-wrap;letter-spacing:1px;margin-bottom:18px}
.gc-detail-path{background:rgba(30,15,15,0.6);padding:14px 16px;border-left:3px solid #c22;font-size:12px;color:#ca8;line-height:1.8}
.gc-detail-path-title{font-weight:bold;color:#e8c8c8;margin-bottom:8px;letter-spacing:2px}
.gc-detail-close{
  display:block;margin:20px auto 0;padding:10px 30px;
  background:rgba(40,15,15,0.9);border:1.5px solid #6a2020;color:#c88;
  cursor:pointer;font-family:inherit;font-size:14px;letter-spacing:3px;
}
.gc-detail-close:hover{background:rgba(80,25,25,1);color:#fff}

/* ========== 成就 ========== */
.ach-summary{
  padding:24px;text-align:center;
  background:linear-gradient(to bottom,rgba(40,25,5,0.4),rgba(15,5,5,0.4));
  border-bottom:1px solid #4a1515;
}
.ach-progress-num{
  font-size:44px;color:#fd6;font-weight:bold;letter-spacing:4px;
  text-shadow:0 0 20px rgba(255,200,80,0.5);
}
.ach-progress-text{font-size:13px;color:#998;letter-spacing:4px;margin-top:6px}
.ach-grid{
  padding:20px 22px;overflow-y:auto;max-height:calc(100% - 140px);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;
}
.ach-card{
  display:flex;gap:14px;padding:14px 16px;
  background:rgba(15,8,8,0.9);border:1.5px solid #533;transition:all 0.2s;
}
.ach-card.unlocked{
  background:linear-gradient(135deg,rgba(40,30,5,0.9),rgba(20,15,5,0.9));
  border-color:#c96;box-shadow:0 0 14px rgba(255,200,80,0.2);
}
.ach-card.locked{opacity:0.5}
.ach-icon{font-size:34px;flex-shrink:0;display:flex;align-items:center}
.ach-card.locked .ach-icon{filter:grayscale(1) brightness(0.6)}
.ach-info{flex:1;min-width:0}
.ach-name{font-size:16px;color:#e8d8d8;font-weight:bold;margin-bottom:4px;letter-spacing:1px}
.ach-card.unlocked .ach-name{color:#ffe}
.ach-desc{font-size:12px;color:#998;line-height:1.5}
.ach-date{font-size:11px;color:#775;margin-top:4px;letter-spacing:1px}

.empty-state{text-align:center;padding:40px;color:#665;font-size:14px;letter-spacing:3px}

/* 手机端 */
@media (max-width:640px){
  .overlay-header{padding:12px 16px}
  .overlay-title{font-size:17px;letter-spacing:4px}
  .tree-toolbar{padding:8px 12px;gap:6px}
  .tree-search{min-width:140px;font-size:12px}
  .tree-stat,.tree-btn{padding:6px 10px;font-size:11px}
  .tree-legend{font-size:10px;padding:6px 10px;bottom:8px;left:8px}
  .tree-legend .lg-item{margin-right:8px}
  .tree-hint{display:none}
  .gallery-grid{grid-template-columns:1fr;gap:12px;padding:14px}
  .ach-grid{grid-template-columns:1fr;gap:10px;padding:14px}
  .gc-detail-panel{padding:22px 20px}
  .gc-detail-title{font-size:18px;letter-spacing:4px}
  .ach-progress-num{font-size:34px}
}