*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#c9a96e;--text:#ddd;--dim:#999;--danger:#d44;
  --bg:#1a1410;--panel:rgba(30,22,16,0.92);
  --accent:rgba(201,169,110,0.15);
}
html,body{width:100%;height:100%;overflow:hidden;touch-action:manipulation;-webkit-overflow-scrolling:touch}
body{
  font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  background:#1a1410;color:var(--text);font-size:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
body::before{content:'';position:fixed;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><filter id="n"><feTurbulence baseFrequency="0.65" numOctaves="3"/></filter><rect width="100%" height="100%" filter="url(#n)" opacity="0.03"/></svg>');pointer-events:none;z-index:0}

#bg-img{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:0.35;filter:brightness(0.65)}

#app{position:relative;z-index:1;width:100%;max-width:480px;height:100%;display:flex;flex-direction:column;overflow:hidden}

#top-bar{display:none;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--panel);border-bottom:1px solid rgba(201,169,110,0.15);font-size:13px;color:var(--dim);flex-shrink:0}
#top-bar .location{color:var(--gold)}
#top-bar .year{color:var(--gold);font-weight:bold;font-size:14px}
#top-bar .rank{font-size:12px;color:var(--dim)}
#top-bar .fortune-badge{padding:2px 10px;border-radius:10px;font-size:0.78em;font-weight:bold;background:rgba(201,169,110,0.12);color:var(--gold);border:1px solid rgba(201,169,110,0.25)}

#screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px;position:relative;overflow-y:auto}

.frame{width:100%;max-width:380px;animation:fadeIn 0.4s ease;display:none;flex-direction:column}
.frame.active{display:flex}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.frame-title{color:var(--gold);font-size:1.6em;text-align:center;letter-spacing:2px;margin-bottom:8px}
.frame-subtitle{color:var(--dim);font-size:0.85em;text-align:center;margin-bottom:24px}
.frame-body{color:var(--text);font-size:1.05em;line-height:1.9;text-align:center;margin-bottom:20px}
.frame-body p{margin-bottom:10px}
.frame-body .highlight{color:var(--gold);font-weight:bold}

.choice-list{display:flex;flex-direction:column;gap:10px;width:100%;margin-bottom:20px}
.choice-card{
  background:var(--panel);border:1px solid rgba(201,169,110,0.2);border-radius:10px;
  padding:16px;cursor:pointer;transition:all 0.2s;text-align:left;
}
.choice-card:active,.choice-card.selected{background:rgba(201,169,110,0.15);border-color:var(--gold);transform:scale(0.98)}
.choice-card h4{color:var(--gold);font-size:1em;margin-bottom:4px}
.choice-card .desc{color:var(--dim);font-size:0.8em;line-height:1.5}

.btn{
  display:block;width:100%;padding:14px;border:1px solid var(--gold);border-radius:10px;
  background:transparent;color:var(--gold);font-size:1.05em;text-align:center;
  cursor:pointer;transition:all 0.15s;letter-spacing:1px;margin-bottom:10px;
}
.btn:active{background:rgba(201,169,110,0.2);transform:scale(0.97)}
.btn.primary{background:var(--gold);color:#1a1410;font-weight:bold;border:none}
.btn.primary:active{background:#b8965a}
.btn.small{display:inline-block;width:auto;padding:8px 20px;font-size:0.85em;margin:4px}

.talent-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(201,169,110,0.1)}
.talent-info{flex:1}
.talent-name{color:var(--gold);font-size:0.95em}
.talent-desc{color:var(--dim);font-size:0.75em;margin-top:2px}
.talent-ctrls{display:flex;align-items:center;gap:12px}
.talent-ctrls button{width:36px;height:36px;border:1px solid var(--gold);border-radius:50%;background:transparent;color:var(--gold);font-size:1.2em;cursor:pointer;display:flex;align-items:center;justify-content:center}
.talent-ctrls button:active{background:rgba(201,169,110,0.3)}
.talent-ctrls span{font-size:1.1em;min-width:24px;text-align:center}

.pts-remain{text-align:center;color:var(--gold);font-size:0.9em;margin:10px 0 20px}

#bottom-ctrl{display:none;padding:10px 16px 20px;flex-shrink:0;text-align:center}
#hint-text{color:var(--dim);font-size:0.8em;margin-bottom:6px}

.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.action-btn{
  background:var(--panel);border:1px solid rgba(201,169,110,0.15);border-radius:10px;
  padding:12px;text-align:center;cursor:pointer;transition:all 0.15s;
}
.action-btn:active{background:rgba(201,169,110,0.15);transform:scale(0.96)}
.action-btn .act-name{color:var(--gold);font-size:0.9em;margin-bottom:2px}
.action-btn .act-desc{color:var(--dim);font-size:0.7em}
.action-btn.unavailable{opacity:0.4;pointer-events:none}

.stats-row{display:flex;justify-content:center;gap:12px;font-size:0.78em;color:var(--dim);margin:4px 0;flex-wrap:wrap}
.stats-row span{color:var(--gold);font-weight:bold}
.stats-divider{border-top:1px solid rgba(201,169,110,0.2);padding-top:6px;margin-top:2px;background:rgba(201,169,110,0.06)}
.stats-divider::before{content:'私财';font-size:0.65em;color:var(--gold);margin-right:8px;opacity:0.7;letter-spacing:1px}

.ending-frame h1{font-size:2em;color:var(--gold);text-align:center}
.ending-frame .sub{color:var(--dim);text-align:center;font-size:0.9em;margin:16px 0}

/* 认证覆盖层 */
#auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:9999;display:flex;align-items:center;justify-content:center}
#auth-panel{background:#1a1410;border:1px solid var(--gold);border-radius:16px;padding:30px;width:340px;max-width:90vw;text-align:center}
.auth-tab{flex:1;padding:10px;border:none;cursor:pointer;font-weight:bold;font-size:0.95em;font-family:inherit}
.auth-input{width:100%;padding:12px;margin-bottom:12px;background:rgba(30,22,16,0.8);border:1px solid var(--gold);color:var(--text);border-radius:8px;font-size:0.95em;font-family:inherit}
.auth-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 8px rgba(201,169,110,0.2)}
.auth-btn{width:100%;padding:12px;background:var(--gold);color:#1a1410;border:none;border-radius:8px;font-weight:bold;cursor:pointer;font-size:1em;margin-bottom:8px;font-family:inherit}
.auth-btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.auth-error{color:var(--danger);font-size:0.8em;margin-bottom:10px;min-height:20px}

/* 模式选择卡片 */
.mode-cards{display:flex;flex-direction:column;gap:14px;width:100%;max-width:380px}
.mode-card{
  background:var(--panel);border:1px solid rgba(201,169,110,0.2);border-radius:12px;
  padding:22px;cursor:pointer;transition:all 0.2s;text-align:center;
}
.mode-card:active{background:rgba(201,169,110,0.12);border-color:var(--gold);transform:scale(0.98)}
.mode-card .icon{font-size:2.5em;margin-bottom:8px}
.mode-card h3{color:var(--gold);font-size:1.2em;margin-bottom:6px}
.mode-card .desc{font-size:0.82em;color:var(--dim);line-height:1.5}
.mode-card.wu{border-left:3px solid #e94560}
.mode-card.chen{border-left:3px solid #27ae60}
.mode-card.jun{border-left:3px solid #9b59b6}
/* ==================== 新手引导 UI ==================== */
#tutorial-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;pointer-events:none}
#tutorial-overlay *{pointer-events:none}
.tutorial-mask{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  background:rgba(0,0,0,0.6);z-index:0;
}
.tutorial-highlight{
  position:fixed;z-index:1;display:none;
  border:3px solid var(--gold);
  border-radius:8px;
  box-shadow:0 0 18px rgba(201,169,110,0.5),0 0 40px rgba(201,169,110,0.2),inset 0 0 12px rgba(201,169,110,0.1);
  animation:tutorialPulse 1.5s ease-in-out infinite;
  pointer-events:none;
  background:rgba(201,169,110,0.05);
}
@keyframes tutorialPulse{
  0%,100%{box-shadow:0 0 18px rgba(201,169,110,0.5),0 0 40px rgba(201,169,110,0.2),inset 0 0 12px rgba(201,169,110,0.1)}
  50%{box-shadow:0 0 30px rgba(201,169,110,0.8),0 0 60px rgba(201,169,110,0.4),inset 0 0 20px rgba(201,169,110,0.2)}
}
.tutorial-tooltip{
  position:fixed;z-index:2;display:none;
  background:var(--panel);
  border:1px solid var(--gold);
  border-radius:8px;
  padding:10px 18px;
  max-width:280px;
  text-align:center;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
}
.tutorial-text{
  color:var(--gold);
  font-size:0.95em;
  font-weight:bold;
  line-height:1.5;
}
.tutorial-skip{
  color:var(--dim);
  font-size:0.65em;
  margin-top:6px;
  cursor:pointer;
  opacity:0.6;
  transition:opacity 0.2s;
}
.tutorial-skip:hover{opacity:1;}
.tutorial-arrow{
  display:block;width:12px;height:12px;
  background:var(--panel);
  border:1px solid var(--gold);
  position:absolute;left:50%;
  transform:translateX(-50%) rotate(45deg);
}
.arrow-up{
  top:-7px;
  border-right:none;border-bottom:none;
}
.arrow-down{
  bottom:-7px;
  border-left:none;border-top:none;
}
.tutorial-complete-panel{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:3;text-align:center;max-width:400px;width:90%;
  background:var(--panel);border:2px solid var(--gold);
  border-radius:12px;padding:32px 24px;
  box-shadow:0 8px 40px rgba(0,0,0,0.6),0 0 30px rgba(201,169,110,0.15);
}

/* ==================== 教程向导（新） ==================== */
.tutorial-wizard{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--text);
}
.tutorial-wizard .wizard-header{
  text-align:center;margin-bottom:10px;
}
.tutorial-wizard .wizard-header .step-dots{
  display:flex;gap:8px;justify-content:center;margin-bottom:12px;
}
.tutorial-wizard .wizard-header .step-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(201,169,110,0.25);
  transition:all 0.3s;
}
.tutorial-wizard .wizard-header .step-dot.active{
  background:var(--gold);
  border-color:var(--gold);
  box-shadow:0 0 8px rgba(201,169,110,0.5);
}
.tutorial-wizard .wizard-header .step-dot.done{
  background:rgba(201,169,110,0.4);
  border-color:var(--gold);
}
.tutorial-slide{
  width:100%;max-width:420px;
  background:var(--panel);
  border:2px solid rgba(201,169,110,0.3);
  border-radius:16px;
  padding:28px 24px 20px;
  text-align:center;
  animation:wizardFadeIn 0.4s ease;
  margin:0 16px;
}
@keyframes wizardFadeIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.tutorial-slide .slide-title{
  color:var(--gold);
  font-size:1.5em;
  letter-spacing:2px;
  margin-bottom:16px;
}
.tutorial-slide .slide-illustration{
  background:rgba(201,169,110,0.06);
  border:1px solid rgba(201,169,110,0.15);
  border-radius:10px;
  padding:16px 12px;
  margin-bottom:14px;
  min-height:100px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.tutorial-slide .slide-desc{
  color:var(--dim);
  font-size:0.9em;
  line-height:1.7;
  margin-bottom:8px;
}
.tutorial-slide .slide-btn{
  display:inline-block;
  padding:12px 40px;
  background:var(--gold);
  color:#1a1410;
  border:none;
  border-radius:10px;
  font-weight:bold;
  font-size:1em;
  cursor:pointer;
  letter-spacing:1px;
  transition:all 0.15s;
  font-family:inherit;
}
.tutorial-slide .slide-btn:active{
  background:#b8965a;transform:scale(0.97);
}
.tutorial-skip-link{
  color:var(--dim);
  font-size:0.72em;
  cursor:pointer;
  margin-top:16px;
  opacity:0.5;
  transition:opacity 0.2s;
  text-decoration:underline;
  background:none;border:none;
  font-family:inherit;
}
.tutorial-skip-link:hover{opacity:0.9;}

/* 教程示意图 - 势力卡片 */
.illus-faction-cards{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}
.illus-faction-card{
  background:rgba(30,22,16,0.9);
  border:1px solid rgba(201,169,110,0.3);
  border-radius:6px;padding:8px 12px;
  font-size:0.75em;color:var(--dim);
  min-width:60px;text-align:center;
}
.illus-faction-card .illus-name{color:var(--gold);font-weight:bold;margin-bottom:3px}
.illus-faction-card .illus-detail{font-size:0.75em}

/* 教程示意图 - 酒馆/武将 */
.illus-tavern-heroes{
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;
}
.illus-hero-mini{
  background:rgba(30,22,16,0.9);
  border:1px solid rgba(201,169,110,0.2);
  border-radius:6px;padding:6px 10px;
  font-size:0.72em;text-align:center;
}

/* 教程示意图 - 属性面板 */
.illus-stat-grid{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}
.illus-stat-item{
  background:rgba(201,169,110,0.08);
  border:1px solid rgba(201,169,110,0.15);
  border-radius:4px;padding:4px 10px;
  font-size:0.72em;min-width:50px;
}
.illus-stat-item span{color:var(--gold);font-weight:bold}

/* 教程示意图 - 行动卡片网格 */
.illus-action-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;
}
.illus-action-card{
  background:rgba(30,22,16,0.9);
  border:1px solid rgba(201,169,110,0.15);
  border-radius:6px;padding:8px;text-align:center;
}
.illus-action-card .act-name{color:var(--gold);font-size:0.78em;margin-bottom:2px}
.illus-action-card .act-desc{color:var(--dim);font-size:0.65em}

/* 教程示意图 - 事件对话框 */
.illus-event-dialog{
  background:rgba(30,22,16,0.95);
  border:2px solid rgba(201,169,110,0.4);
  border-radius:10px;padding:14px 16px;
  text-align:center;max-width:300px;margin:0 auto;
}
.illus-event-dialog .event-title{color:var(--gold);font-size:0.9em;margin-bottom:6px}
.illus-event-dialog .event-desc{color:var(--dim);font-size:0.72em;line-height:1.5;margin-bottom:8px}
.illus-event-choices{display:flex;gap:6px;justify-content:center}
.illus-event-choice{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:4px;padding:4px 10px;
  font-size:0.68em;color:var(--dim);
}

/* 教程示意图 - 战斗界面 */
.illus-battle-scene{
  background:rgba(30,22,16,0.95);
  border:2px solid rgba(201,169,110,0.3);
  border-radius:10px;padding:12px 14px;
  text-align:center;
}
.illus-battle-heroes{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:8px;
}
.illus-battle-hero{
  background:rgba(0,0,0,0.3);border-radius:8px;
  padding:8px 12px;font-size:0.7em;
  border:1px solid rgba(201,169,110,0.15);
  flex:1;text-align:center;
}
.illus-vs{color:#e74c3c;font-weight:bold;font-size:0.8em}
.illus-hp-bar{
  height:6px;background:rgba(0,0,0,0.3);
  border-radius:3px;overflow:hidden;margin-top:4px;
}
.illus-hp-fill{height:100%;background:var(--gold);border-radius:3px}

/* ==================== 武将系统 ==================== */
.hero-grid{
  display:flex;flex-direction:column;gap:8px;
  max-height:55vh;overflow-y:auto;padding-right:4px;
}
.hero-card{
  background:rgba(30,22,16,0.85);
  border-radius:8px;padding:10px 14px;
  transition:all 0.15s;
}
.hero-card:active{transform:scale(0.98)}
.hero-name{
  font-size:0.95em;font-weight:bold;
}
.hero-stats{
  display:flex;gap:10px;margin-top:4px;font-size:0.75em;color:var(--dim);flex-wrap:wrap;
}
.hero-stats span{padding:1px 6px;background:rgba(201,169,110,0.08);border-radius:3px}
.hero-quality{font-weight:bold}
.hero-bio{line-height:1.4}

/* ==================== 养成面板 ==================== */
.upgrade-panel{
  text-align:center;
}
.upgrade-panel .btn-group{
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0;
}
.progress-bar{
  background:rgba(255,255,255,0.1);height:8px;border-radius:4px;overflow:hidden;
}
.progress-fill{
  height:100%;background:var(--gold);border-radius:4px;transition:width 0.3s;
}

/* ==================== 战斗可视化 ==================== */

/* ---------- 通用战斗场景 ---------- */
.battle-scene{
  width:100%;max-width:420px;
  background:var(--panel);
  border:2px solid rgba(201,169,110,0.3);
  border-radius:12px;
  padding:18px 16px 14px;
  animation:battleIn 0.5s ease;
}
@keyframes battleIn{
  from{opacity:0;transform:scale(0.95)}
  to{opacity:1;transform:scale(1)}
}

/* ---------- 7.1 武将单挑 ---------- */
.duel-arena{
  display:flex;align-items:stretch;justify-content:space-between;
  position:relative;min-height:200px;gap:4px;
}
.duel-hero{
  flex:1;display:flex;flex-direction:column;align-items:center;
  background:rgba(0,0,0,0.25);border-radius:10px;
  padding:14px 8px 10px;position:relative;
  border:1px solid rgba(201,169,110,0.15);
  transition:all 0.25s;
}
.duel-hero.struck{
  animation:heroHit 0.3s ease;
  border-color:rgba(220,60,60,0.5);
}
@keyframes heroHit{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.duel-hero .hero-icon{
  font-size:2.2em;margin-bottom:4px;
}
.duel-hero .hero-name{
  font-weight:bold;font-size:0.95em;margin-bottom:2px;
}
.duel-hero .hero-attr{
  font-size:0.72em;color:var(--dim);margin-bottom:6px;
}

.duel-vs-badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  background:var(--gold);color:#1a1410;
  font-weight:bold;font-size:1em;display:flex;
  align-items:center;justify-content:center;
  z-index:2;border:2px solid rgba(26,20,16,0.8);
  box-shadow:0 0 16px rgba(201,169,110,0.4);
  animation:vsPulse 0.8s ease-in-out infinite alternate;
}
@keyframes vsPulse{
  from{box-shadow:0 0 12px rgba(201,169,110,0.3)}
  to{box-shadow:0 0 24px rgba(201,169,110,0.7)}
}

.duel-hp-container{
  width:100%;margin-top:6px;
}
.duel-hp-label{
  font-size:0.68em;color:var(--dim);margin-bottom:2px;text-align:center;
}
.duel-hp-bar{
  width:100%;height:8px;background:rgba(0,0,0,0.4);
  border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,0.1);
}
.duel-hp-fill{
  height:100%;border-radius:3px;transition:width 0.6s ease;
}
.duel-hp-fill.ally{background:linear-gradient(90deg,#2ecc71,#27ae60)}
.duel-hp-fill.enemy{background:linear-gradient(90deg,#e74c3c,#c0392b)}
.duel-hp-fill.ally.low{background:linear-gradient(90deg,#f39c12,#e67e22)}
.duel-hp-fill.enemy.low{background:linear-gradient(90deg,#e74c3c,#c0392b)}

.duel-combat-log{
  margin-top:14px;padding:10px 14px;
  background:rgba(0,0,0,0.3);border-radius:8px;
  min-height:48px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(201,169,110,0.1);
  position:relative;overflow:hidden;
}
.duel-combat-text{
  font-size:0.88em;text-align:center;line-height:1.5;
  color:var(--text);transition:all 0.3s;
}
.duel-combat-text.crit{
  color:#f39c12;font-size:1.1em;font-weight:bold;
  animation:textBoom 0.4s ease;
}
@keyframes textBoom{
  0%{transform:scale(1);opacity:1}
  50%{transform:scale(1.3);opacity:0.8}
  100%{transform:scale(1);opacity:1}
}
.duel-combat-text.dodge{
  color:var(--dim);font-style:italic;
}
.duel-combat-text.final{
  color:var(--gold);font-weight:bold;font-size:1.05em;
}

/* 飘字伤害 */
.duel-damage-float{
  position:absolute;font-weight:bold;font-size:1.2em;
  pointer-events:none;z-index:3;white-space:nowrap;
  animation:damageFloat 1.5s ease-out forwards;
}
.duel-damage-float.ally-dmg{color:#e74c3c}
.duel-damage-float.enemy-dmg{color:#f39c12}
@keyframes damageFloat{
  0%{opacity:1;transform:translateY(0)}
  60%{opacity:0.8;transform:translateY(-30px)}
  100%{opacity:0;transform:translateY(-50px)}
}

/* 单挑结果覆盖层 */
.duel-result-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.82);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:10px;z-index:5;
  animation:fadeIn 0.5s ease;
}
.duel-result-overlay .result-title{
  font-size:2em;font-weight:bold;letter-spacing:4px;margin-bottom:8px;
  animation:resultBounce 0.6s ease;
}
@keyframes resultBounce{
  0%{transform:scale(0.3);opacity:0}
  50%{transform:scale(1.15)}
  100%{transform:scale(1);opacity:1}
}
.duel-result-overlay .result-title.win{color:#f1c40f;text-shadow:0 0 20px rgba(241,196,15,0.5)}
.duel-result-overlay .result-title.lose{color:#e74c3c;text-shadow:0 0 20px rgba(231,76,60,0.5)}
.duel-result-overlay .result-comment{
  color:var(--dim);font-size:0.9em;max-width:280px;text-align:center;line-height:1.6;margin-bottom:16px;
}
.duel-result-overlay .result-effects{
  font-size:0.78em;color:var(--gold);margin-bottom:20px;line-height:1.6;
}

/* 品质颜色 */
.quality-common{color:#aaa}
.quality-rare{color:#3498db}
.quality-epic{color:#9b59b6}
.quality-legendary{color:#f1c40f}

/* ---------- 7.2 军团战斗 ---------- */
.field-troop-compare{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:16px;
}
.field-troop-side{
  flex:1;text-align:center;
}
.field-troop-side .side-label{
  font-size:0.75em;color:var(--dim);margin-bottom:4px;
}
.field-troop-side .side-count{
  font-size:1.3em;font-weight:bold;color:var(--gold);
}
.field-ratio-bar{
  width:100%;height:10px;background:rgba(0,0,0,0.3);
  border-radius:5px;overflow:hidden;margin-top:6px;
  display:flex;
}
.field-ratio-ally{
  height:100%;background:linear-gradient(90deg,#2ecc71,#27ae60);
  border-radius:5px 0 0 5px;transition:width 0.6s ease;
}
.field-ratio-enemy{
  height:100%;background:linear-gradient(90deg,#c0392b,#e74c3c);
  border-radius:0 5px 5px 0;transition:width 0.6s ease;
}

/* 战术选择 */
.field-tactics{
  display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;
}
.field-tactic-btn{
  flex:1;min-width:90px;
  background:rgba(30,22,16,0.9);border:1px solid rgba(201,169,110,0.25);
  border-radius:8px;padding:12px 8px;text-align:center;
  cursor:pointer;transition:all 0.15s;
}
.field-tactic-btn:active{background:rgba(201,169,110,0.18);border-color:var(--gold);transform:scale(0.96)}
.field-tactic-btn .tac-name{
  font-size:0.9em;font-weight:bold;color:var(--gold);margin-bottom:3px;
}
.field-tactic-btn .tac-desc{
  font-size:0.7em;color:var(--dim);line-height:1.4;
}
.field-tactic-btn .tac-meta{
  font-size:0.68em;color:var(--text);margin-top:4px;
}

/* 战场日志滚动 */
.field-battle-log{
  max-height:180px;overflow-y:auto;
  padding:8px;background:rgba(0,0,0,0.2);border-radius:8px;
  border:1px solid rgba(201,169,110,0.1);margin-bottom:12px;
}
.field-log-entry{
  font-size:0.82em;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.04);
  animation:logSlide 0.3s ease;
}
@keyframes logSlide{
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:translateX(0)}
}
.field-log-entry .log-highlight{color:var(--gold)}
.field-log-entry .log-danger{color:var(--danger)}
.field-log-entry .log-dim{color:var(--dim)}

/* 军团战斗结果 */
.field-battle-result{
  text-align:center;padding:12px;
  background:rgba(0,0,0,0.25);border-radius:8px;
  border:1px solid rgba(201,169,110,0.2);
}
.field-battle-result .result-heading{
  font-size:1.2em;font-weight:bold;margin-bottom:6px;
}
.field-battle-result .result-heading.win{color:#f1c40f}
.field-battle-result .result-heading.lose{color:#e74c3c}
.field-battle-result .result-summary{
  color:var(--dim);font-size:0.78em;line-height:1.5;
}

/* 战斗过程中的兵力显示 */
.field-troop-numbers{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:8px;gap:10px;
}
.field-troop-num{
  font-size:1.1em;font-weight:bold;transition:all 0.3s;
}
.field-troop-num.ally{color:#27ae60}
.field-troop-num.enemy{color:#e74c3c}
.field-troop-num .num-val{
  font-size:1.4em;
}

/* ========== 装备系统 ========== */
.equip-bonus-summary{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-bottom:12px;padding:8px 12px;
  background:rgba(0,0,0,0.25);border-radius:6px;
}
.equip-bonus-summary span{
  color:var(--gold);font-size:0.85em;font-weight:bold;
}
.equip-slots{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;
}
.equip-slot-card{
  flex:1 1 calc(50% - 4px);min-width:140px;
  background:rgba(0,0,0,0.3);border-radius:8px;padding:8px;
}
.equip-slot-label{
  font-size:0.75em;color:var(--dim);margin-bottom:4px;
}
.equip-slot-equipped{
  border:1px solid;border-radius:6px;padding:6px 8px;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  font-size:0.85em;
}
.equip-slot-equipped .btn.tiny{padding:2px 10px;font-size:0.7em;margin-left:auto;}
.equip-slot-empty{
  border:1px dashed #444;border-radius:6px;padding:10px;
  text-align:center;color:#555;font-size:0.85em;
}
.equip-section-title{
  color:var(--gold);font-size:0.9em;font-weight:bold;
  margin:10px 0 6px;
}
.equip-backpack{max-height:300px;overflow-y:auto;}
.equip-backpack-item{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:8px;margin-bottom:4px;
  background:rgba(0,0,0,0.2);border-radius:6px;
  font-size:0.8em;
}
.equip-backpack-item .equip-btn{margin-left:auto;}
.equip-empty-hint{
  text-align:center;color:#666;padding:20px;font-size:0.9em;
}
.equip-quality-tag{
  display:inline-block;padding:1px 6px;border-radius:3px;
  color:#000;font-size:0.7em;font-weight:bold;
}

/* 珍品阁 */
.equip-shop-list{max-height:420px;overflow-y:auto;}
.equip-card{
  background:rgba(0,0,0,0.25);border-radius:8px;padding:10px;
  margin-bottom:8px;
}
.equip-card-header{
  display:flex;align-items:center;gap:6px;margin-bottom:6px;
}
.equip-type-icon{font-size:1.1em;}
.equip-card-body{margin-bottom:6px;}
.equip-stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
.equip-stats span{font-size:0.78em;color:var(--gold);}
.equip-desc{font-size:0.75em;color:var(--dim);}
.equip-card-footer{
  display:flex;align-items:center;justify-content:space-between;
}
.equip-price{color:var(--gold);font-weight:bold;font-size:0.85em;}

/* 战斗缴获提示 */
.duel-loot-note{
  text-align:center;padding:8px 14px;margin-top:8px;
  background:rgba(255,152,0,0.2);border:1px solid #ff9800;
  border-radius:6px;color:#ff9800;font-size:0.85em;font-weight:bold;
}

/* ========== 战斗日志回放 ========== */
.replay-list{max-height:400px;overflow-y:auto;}
.replay-item{
  padding:10px 12px;margin-bottom:6px;
  background:rgba(0,0,0,0.25);border-radius:8px;
  cursor:pointer;transition:background 0.2s;
}
.replay-item:hover{background:rgba(255,255,255,0.08);}
.replay-meta{font-size:0.85em;color:var(--gold);margin-bottom:2px;}
.replay-detail{font-size:0.78em;color:var(--dim);}
.replay-win{color:#27ae60;font-weight:bold;}
.replay-lose{color:#e74c3c;font-weight:bold;}

/* 回放查看器 */
.replay-viewer{
  background:rgba(0,0,0,0.3);border-radius:8px;
  padding:12px;min-height:200px;
}
.replay-rounds{min-height:100px;margin-bottom:12px;}
.replay-round{
  padding:8px 12px;margin-bottom:6px;border-radius:6px;
  font-size:0.85em;line-height:1.4;
  animation:fadeIn 0.3s ease;
}
.replay-round.replay-ally{background:rgba(39,174,96,0.12);border-left:3px solid #27ae60;}
.replay-round.replay-enemy{background:rgba(231,76,60,0.12);border-left:3px solid #e74c3c;}
.replay-round.replay-crit{background:rgba(255,152,0,0.15);border-left:3px solid #ff9800;font-weight:bold;}
.replay-round.replay-dodge{background:rgba(100,100,255,0.12);border-left:3px solid #6496ff;font-style:italic;}
.replay-round-num{
  display:inline-block;margin-right:6px;
  color:var(--gold);font-weight:bold;font-size:0.8em;
}
.replay-controls{
  display:flex;justify-content:center;align-items:center;gap:6px;
}
.replay-controls .btn.small{padding:6px 14px;font-size:1em;}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}

/* 底部按钮区装备/战报按钮适配 */
.bottom-btn{
  padding:6px 10px;font-size:0.78em;min-width:48px;
  background:rgba(255,255,255,0.08);color:var(--dim);
  border:1px solid #333;border-radius:6px;
}
.bottom-btn:hover{background:rgba(255,255,255,0.15);color:var(--gold);}

/* ==================== 9.1 技能树样式 ==================== */
.skill-branch-section{
  margin-bottom:12px;
  border:1px solid rgba(201,169,110,0.12);
  border-radius:8px;
  overflow:hidden;
  background:rgba(30,22,16,0.4);
}
.skill-branch-header{
  background:rgba(201,169,110,0.08);
  padding:8px 12px;
  font-size:0.85em;
  font-weight:bold;
  color:var(--gold);
  border-bottom:1px solid rgba(201,169,110,0.1);
}
.skill-branch-nodes{
  display:flex;
  flex-direction:column;
  padding:6px;
  gap:4px;
}
.skill-node{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:6px;
  transition:all 0.2s;
}
.skill-node-learned{
  background:rgba(39,174,96,0.08);
  border:1px solid rgba(39,174,96,0.2);
}
.skill-node-available{
  background:rgba(201,169,110,0.06);
  border:1px solid rgba(201,169,110,0.2);
}
.skill-node-locked{
  background:rgba(100,100,100,0.08);
  border:1px solid rgba(100,100,100,0.12);
  opacity:0.6;
}
.skill-node-icon{
  font-size:1.2em;
  width:24px;
  text-align:center;
  flex-shrink:0;
}
.skill-node-learned .skill-node-icon{color:#5cb85c;}
.skill-node-available .skill-node-icon{color:var(--gold);}
.skill-node-locked .skill-node-icon{color:#555;}
.skill-node-info{
  flex:1;
  min-width:0;
}
.skill-node-name{
  font-weight:bold;
  font-size:0.82em;
  color:var(--text);
  margin-bottom:1px;
}
.skill-node-desc{
  font-size:0.72em;
  color:var(--dim);
  line-height:1.3;
}

/* ==================== 9.4 时代阶段样式 ==================== */
.era-timeline{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px 0;
}
.era-node{
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-radius:8px;
  transition:all 0.2s;
}
.era-active{
  background:rgba(201,169,110,0.1);
  border:1px solid rgba(201,169,110,0.35);
}
.era-past{
  background:rgba(100,100,100,0.06);
  border:1px solid rgba(100,100,100,0.15);
  opacity:0.65;
}
.era-future{
  background:rgba(100,100,100,0.04);
  border:1px solid rgba(100,100,100,0.08);
  opacity:0.45;
}
.era-dot{
  width:10px;height:10px;
  border-radius:50%;
  background:var(--gold);
  margin-top:5px;
  flex-shrink:0;
  box-shadow:0 0 8px rgba(201,169,110,0.4);
}
.era-dot-dim{
  background:#555;
  box-shadow:none;
}
.era-info{
  flex:1;
  min-width:0;
}
.era-name{
  font-weight:bold;
  font-size:0.9em;
  color:var(--text);
}
.era-active .era-name{color:var(--gold);font-size:1em;}
.era-years{
  font-size:0.75em;
  color:var(--dim);
  margin-bottom:4px;
}
.era-desc{
  font-size:0.78em;
  color:var(--dim);
  line-height:1.4;
  margin-bottom:3px;
}
.era-meta{
  font-size:0.7em;
  color:#777;
}
.era-active-tag{
  display:inline-block;
  margin-top:4px;
  padding:2px 10px;
  background:rgba(201,169,110,0.2);
  color:var(--gold);
  font-size:0.7em;
  font-weight:bold;
  border-radius:10px;
  border:1px solid rgba(201,169,110,0.3);
}


/* ==================== 留存系统样式 ==================== */

/* 任务标签页 */
.retention-tabs{
  display:flex;gap:0;margin-bottom:14px;border-radius:10px;
  overflow:hidden;border:1px solid rgba(201,169,110,0.2);
}
.retention-tab{
  flex:1;padding:10px 6px;border:none;cursor:pointer;
  background:rgba(30,22,16,0.6);color:var(--dim);
  font-size:0.82em;font-weight:bold;font-family:inherit;
  transition:all 0.2s;text-align:center;
}
.retention-tab.active{
  background:rgba(201,169,110,0.2);color:var(--gold);
  border-bottom:2px solid var(--gold);
}
.retention-tab:active{background:rgba(201,169,110,0.15)}

/* 签到面板 */
.signin-panel{
  background:var(--panel);border-radius:12px;
  padding:16px;border:1px solid rgba(201,169,110,0.12);
}
.signin-streak{
  text-align:center;color:var(--dim);font-size:0.85em;
  margin-bottom:14px;
}
.streak-num{
  color:var(--gold);font-size:1.2em;font-weight:bold;
}
.signin-calendar{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  margin-bottom:12px;
}
.signin-day{
  background:rgba(30,22,16,0.6);border:1px solid rgba(201,169,110,0.1);
  border-radius:8px;padding:8px 4px;text-align:center;
  font-size:0.7em;transition:all 0.2s;
}
.signin-day.checked{
  background:rgba(201,169,110,0.08);
  border-color:rgba(201,169,110,0.3);
  opacity:0.8;
}
.signin-day.today{
  background:rgba(201,169,110,0.15);
  border-color:var(--gold);
  box-shadow:0 0 10px rgba(201,169,110,0.2);
}
.signin-day-num{
  color:var(--gold);font-weight:bold;font-size:0.85em;
}
.signin-day-reward{
  color:var(--dim);font-size:0.75em;line-height:1.3;
  margin-top:2px;
}
.signin-check{
  color:#5cb85c;font-size:1em;font-weight:bold;
}
.signin-today{
  color:var(--gold);font-size:0.75em;font-weight:bold;
  margin-top:2px;animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1}50%{opacity:0.5}
}
.signin-makeup{
  text-align:center;color:var(--dim);font-size:0.78em;
  margin-bottom:8px;
}
.makeup-cost{
  color:var(--gold);font-weight:bold;
}

/* 任务列表 */
.retention-quests{
  display:flex;flex-direction:column;gap:10px;
}
.quest-section-title{
  color:var(--gold);font-size:0.85em;font-weight:bold;
  padding:0 4px;margin-bottom:2px;
}
.quest-empty{
  text-align:center;color:var(--dim);font-size:0.82em;
  padding:20px 0;
}
.quest-item{
  background:var(--panel);border:1px solid rgba(201,169,110,0.12);
  border-radius:10px;padding:12px 14px;transition:all 0.2s;
}
.quest-item.quest-ready{
  border-color:rgba(201,169,110,0.35);
  background:rgba(201,169,110,0.06);
}
.quest-item.quest-done{
  opacity:0.55;
}
.quest-monthly{
  border-left:3px solid var(--gold);
}
.quest-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:6px;
}
.quest-desc{
  color:var(--text);font-size:0.85em;font-weight:bold;
}
.quest-progress{
  color:var(--gold);font-size:0.78em;font-weight:bold;
}
.quest-bar{
  height:5px;background:rgba(201,169,110,0.1);
  border-radius:3px;margin-bottom:8px;overflow:hidden;
}
.quest-bar-fill{
  height:100%;background:var(--gold);border-radius:3px;
  transition:width 0.4s ease;
}
.quest-ready .quest-bar-fill{
  background:#5cb85c;
}
.quest-footer{
  display:flex;justify-content:space-between;align-items:center;
}
.quest-reward{
  color:var(--dim);font-size:0.72em;
}
.quest-claimed{
  color:#5cb85c;font-size:0.75em;font-weight:bold;
}
.quest-claim-btn{
  background:var(--gold)!important;color:#1a1410!important;
  border:none!important;font-size:0.75em!important;
  padding:5px 14px!important;
}

/* ==================== 13. 成就系统 ==================== */

.achieve-panel{
  max-width:520px;margin:0 auto;
}
.achieve-category-tabs{
  display:flex;gap:4px;margin-bottom:14px;justify-content:center;
}
.achieve-cat-tab{
  padding:6px 14px;border:1px solid rgba(201,169,110,0.2);
  background:transparent;color:var(--dim);border-radius:20px;
  cursor:pointer;font-size:0.78em;transition:all 0.2s;
}
.achieve-cat-tab.active{
  background:var(--gold);color:#1a1410;border-color:var(--gold);
  font-weight:bold;
}
.achieve-cat-tab:hover{ border-color:var(--gold);color:var(--gold); }
.achieve-cat-tab.active:hover{ color:#1a1410; }

.achieve-stats{
  text-align:center;margin-bottom:12px;color:var(--dim);font-size:0.8em;
}
.achieve-stats span{ color:var(--gold);font-weight:bold; }

.achieve-list{ max-height:420px;overflow-y:auto; }

.achieve-item{
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid rgba(201,169,110,0.1);
  border-radius:10px;padding:10px 12px;margin-bottom:6px;
  transition:all 0.2s;
}
.achieve-item.achieve-complete{
  border-color:rgba(92,184,92,0.3);
  background:rgba(92,184,92,0.04);
}
.achieve-item.achieve-claimed{
  opacity:0.5;
}

.achieve-icon{
  width:36px;height:36px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:1.1em;
  flex-shrink:0;
  background:rgba(201,169,110,0.12);color:var(--gold);
}
.achieve-complete .achieve-icon{
  background:rgba(92,184,92,0.15);color:#5cb85c;
}
.achieve-claimed .achieve-icon{
  background:rgba(201,169,110,0.06);color:var(--dim);
}

.achieve-info{ flex:1;min-width:0; }
.achieve-name{
  font-weight:bold;font-size:0.84em;color:var(--text);margin-bottom:2px;
}
.achieve-desc{
  font-size:0.7em;color:var(--dim);margin-bottom:4px;
}
.achieve-progress-bar{
  height:4px;background:rgba(201,169,110,0.1);
  border-radius:2px;overflow:hidden;margin-bottom:2px;
}
.achieve-progress-fill{
  height:100%;background:var(--gold);border-radius:2px;
  transition:width 0.3s ease;
}
.achieve-complete .achieve-progress-fill{ background:#5cb85c; }
.achieve-progress-text{
  font-size:0.68em;color:var(--dim);
}

.achieve-reward-btn{
  flex-shrink:0;
}
.achieve-reward-btn button{
  background:var(--gold);color:#1a1410;border:none;
  border-radius:14px;padding:4px 12px;font-size:0.72em;
  cursor:pointer;font-weight:bold;transition:all 0.2s;
}
.achieve-reward-btn button:hover{
  background:#d4b85c;
}
.achieve-claimed-tag{
  color:#5cb85c;font-size:0.72em;font-weight:bold;flex-shrink:0;
}
.achieve-locked-tag{
  color:var(--dim);font-size:0.72em;flex-shrink:0;
}

/* 成就弹窗通知 */
.achieve-toast{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:9999;animation:achieveToastIn 0.5s ease, achieveToastOut 0.5s 2s ease forwards;
}
@keyframes achieveToastIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(0.8);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}
}
@keyframes achieveToastOut{
  from{opacity:1;transform:translate(-50%,-50%) scale(1);}
  to{opacity:0;transform:translate(-50%,-50%) scale(0.8);}
}
.achieve-toast-inner{
  background:linear-gradient(135deg,#2a1f14,#3d2b1a);
  border:2px solid var(--gold);
  border-radius:14px;padding:18px 28px;text-align:center;
  box-shadow:0 8px 40px rgba(0,0,0,0.5);
}
.achieve-toast-title{
  color:var(--gold);font-size:0.85em;letter-spacing:2px;
  margin-bottom:6px;
}
.achieve-toast-name{
  color:var(--text);font-size:1.1em;font-weight:bold;
  margin-bottom:4px;
}
.achieve-toast-reward{
  color:#5cb85c;font-size:0.8em;margin-top:6px;
}

/* ==================== 14. 排行榜 ==================== */

.lb-panel{
  max-width:500px;margin:0 auto;
}
.lb-tabs{
  display:flex;gap:4px;margin-bottom:14px;justify-content:center;
}
.lb-tab{
  padding:7px 18px;border:1px solid rgba(201,169,110,0.2);
  background:transparent;color:var(--dim);border-radius:20px;
  cursor:pointer;font-size:0.8em;transition:all 0.2s;
  font-weight:bold;
}
.lb-tab.active{
  background:var(--gold);color:#1a1410;border-color:var(--gold);
}
.lb-tab:hover:not(.active){ border-color:var(--gold);color:var(--gold); }

.lb-refresh-info{
  text-align:center;color:var(--dim);font-size:0.72em;
  margin-bottom:10px;
}
.lb-refresh-info span{ color:var(--gold); }

.lb-my-rank{
  background:rgba(201,169,110,0.08);border:1px solid rgba(201,169,110,0.25);
  border-radius:10px;padding:10px 14px;margin-bottom:10px;
  display:flex;align-items:center;gap:10px;
}
.lb-my-rank-label{
  color:var(--dim);font-size:0.72em;
}
.lb-my-rank-num{
  color:var(--gold);font-size:1.4em;font-weight:bold;min-width:36px;text-align:center;
}
.lb-my-rank-info{ flex:1; }
.lb-my-rank-name{
  color:var(--text);font-weight:bold;font-size:0.85em;
}
.lb-my-rank-value{
  color:var(--gold);font-size:0.78em;
}

.lb-list{ max-height:380px;overflow-y:auto; }

.lb-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-bottom:1px solid rgba(201,169,110,0.06);
  transition:all 0.2s;
}
.lb-item:hover{ background:rgba(201,169,110,0.04); }
.lb-item.lb-player{ background:rgba(201,169,110,0.08); }

.lb-rank{
  width:32px;height:32px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-weight:bold;
  font-size:0.82em;flex-shrink:0;
  background:rgba(201,169,110,0.1);color:var(--dim);
}
.lb-item:nth-child(1) .lb-rank{ background:#c9a84c;color:#1a1410; }
.lb-item:nth-child(2) .lb-rank{ background:#b8b8b8;color:#1a1410; }
.lb-item:nth-child(3) .lb-rank{ background:#cd7f32;color:#1a1410; }

.lb-info{ flex:1;min-width:0; }
.lb-name{ color:var(--text);font-weight:bold;font-size:0.82em; }
.lb-detail{ color:var(--dim);font-size:0.7em; }
.lb-value{
  color:var(--gold);font-weight:bold;font-size:0.85em;flex-shrink:0;
}
.lb-player .lb-name{ color:var(--gold); }

.lb-empty{
  text-align:center;color:var(--dim);padding:30px 0;
  font-size:0.82em;
}

/* ==================== 16. 运营后台 ==================== */

/* 公告滚动条 */
.announcement-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; margin-top: 4px; margin-bottom: 8px;
  background: rgba(201,169,110,0.08); border: 1px solid rgba(201,169,110,0.2);
  border-radius: 6px; font-size: 0.75em;
}
.ann-icon { color: var(--gold); font-weight: bold; white-space: nowrap; flex-shrink: 0; }
.ann-text { color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-dots { display: flex; gap: 4px; flex-shrink: 0; }
.ann-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(201,169,110,0.25); transition: all 0.3s; }
.ann-dot.active { background: var(--gold); }

/* 管理面板 */
.admin-panel { max-width: 500px; margin: 0 auto; }

.admin-tabs {
  display: flex; gap: 2px; margin-bottom: 12px; justify-content: center;
  background: rgba(30,22,16,0.6); border-radius: 8px; padding: 3px;
}
.admin-tab {
  flex: 1; padding: 8px 4px; text-align: center; cursor: pointer;
  color: var(--dim); font-size: 0.78em; border-radius: 6px; transition: all 0.2s;
  font-weight: bold; border: 1px solid transparent;
}
.admin-tab.active {
  background: #9b59b6; color: #fff; border-color: #9b59b6;
}
.admin-tab:hover:not(.active) { color: #9b59b6; }

.admin-input {
  width: 100%; padding: 10px 12px; background: rgba(30,22,16,0.8);
  border: 1px solid rgba(201,169,110,0.25); color: var(--text);
  border-radius: 8px; font-size: 0.9em; font-family: inherit;
  outline: none;
}
.admin-input:focus { border-color: var(--gold); }

/* 玩家卡片 */
.admin-player-card {
  background: rgba(30,22,16,0.8); border: 1px solid rgba(201,169,110,0.15);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
  cursor: pointer; transition: all 0.2s;
}
.admin-player-card:hover { background: rgba(201,169,110,0.08); border-color: var(--gold); }
.apc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.apc-username { color: var(--gold); font-weight: bold; font-size: 0.95em; }
.apc-id { color: var(--dim); font-size: 0.72em; }
.apc-banned { color: var(--danger); font-size: 0.7em; padding: 2px 8px; border: 1px solid var(--danger); border-radius: 10px; }
.apc-info { display: flex; gap: 16px; color: var(--dim); font-size: 0.72em; }

/* 玩家详情 */
.admin-detail { padding: 8px 0; }
.admin-detail h3 { margin-bottom: 10px; }
.admin-detail h4 { margin-bottom: 8px; }
.admin-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.admin-info-grid > div { display: flex; justify-content: space-between; padding: 6px 10px; background: rgba(30,22,16,0.6); border-radius: 4px; font-size: 0.8em; }
.admin-info-grid > div > span:first-child { color: var(--dim); }
.admin-info-grid > div > span:last-child { color: var(--gold); }

.admin-saves { max-height: 400px; overflow-y: auto; }
.admin-save-item {
  background: rgba(30,22,16,0.7); border: 1px solid rgba(201,169,110,0.1);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 6px;
}
.asi-name { color: var(--gold); font-weight: bold; font-size: 0.85em; margin-bottom: 2px; }
.asi-time { color: var(--dim); font-size: 0.7em; margin-bottom: 4px; }
.asi-state { display: flex; gap: 10px; font-size: 0.78em; color: var(--text); margin-bottom: 2px; }
.asi-resources { display: flex; gap: 10px; font-size: 0.72em; color: var(--dim); flex-wrap: wrap; }
.asi-generals, .asi-equip { font-size: 0.72em; color: var(--dim); margin-top: 2px; }

/* 参数管理 */
.admin-param-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  padding: 8px 10px; background: rgba(30,22,16,0.7);
  border-radius: 6px;
}
.apr-label { color: var(--gold); font-size: 0.82em; flex: 1; min-width: 100px; }
.apr-input-wrap { flex: 1; }
.admin-param-input {
  width: 100%; padding: 6px 10px; background: rgba(0,0,0,0.3);
  border: 1px solid rgba(201,169,110,0.25); color: var(--text);
  border-radius: 4px; font-size: 0.85em; text-align: center; font-family: inherit;
  outline: none;
}
.admin-param-input:focus { border-color: var(--gold); }
.apr-updated { color: var(--dim); font-size: 0.65em; min-width: 120px; text-align: right; }

/* 公告管理 */
.admin-ann-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: rgba(30,22,16,0.7);
  border-radius: 6px; margin-bottom: 6px;
}
.aai-content { flex: 1; color: var(--text); font-size: 0.82em; }
.aai-meta { color: var(--dim); font-size: 0.65em; white-space: nowrap; }
.admin-del-btn {
  padding: 4px 10px; background: transparent; border: 1px solid var(--danger);
  color: var(--danger); border-radius: 4px; cursor: pointer; font-size: 0.72em;
  font-family: inherit;
}
.admin-del-btn:hover { background: rgba(212,68,68,0.15); }

/* 封禁管理 */
.admin-bans-list { max-height: 400px; overflow-y: auto; }
.admin-ban-item {
  background: rgba(30,22,16,0.7); border: 1px solid rgba(201,169,110,0.1);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 6px;
}
.abi-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.abi-username { color: var(--danger); font-weight: bold; font-size: 0.9em; }
.abi-id { color: var(--dim); font-size: 0.72em; }
.admin-unban-btn {
  margin-left: auto; padding: 4px 10px; background: transparent;
  border: 1px solid #5cb85c; color: #5cb85c; border-radius: 4px;
  cursor: pointer; font-size: 0.72em; font-family: inherit;
}
.admin-unban-btn:hover { background: rgba(92,184,92,0.15); }
.abi-reason { color: var(--dim); font-size: 0.78em; margin-bottom: 2px; }
.abi-time { color: var(--dim); font-size: 0.68em; }
.admin-exit-btn { border-color: #d44 !important; color: #d44 !important; }
.admin-exit-btn:active { background: rgba(212,68,68,0.15) !important; }

/* ==================== 17. 数据看板 ==================== */

.db-subtabs {
  display: flex; gap: 4px; margin: 12px 0;
  background: rgba(20,14,8,0.6); border-radius: 6px; padding: 3px;
}
.db-subtab {
  flex: 1; text-align: center; padding: 6px 4px; font-size: 0.78em;
  border-radius: 4px; cursor: pointer; color: var(--dim);
  transition: background 0.2s, color 0.2s;
}
.db-subtab:hover { color: var(--gold); background: rgba(201,168,76,0.08); }
.db-subtab.active { background: rgba(201,168,76,0.2); color: var(--gold); font-weight: bold; }

.db-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 12px 0;
}
.db-stat-card {
  background: rgba(20,14,8,0.7); border: 1px solid rgba(201,169,110,0.15);
  border-radius: 8px; padding: 10px 6px; text-align: center;
}
.db-stat-card:nth-child(4) { grid-column: span 1; }
.db-stat-card:nth-child(5) { grid-column: span 1; }
.db-stat-num { font-size: 1.4em; font-weight: bold; color: var(--gold); }
.db-stat-label { font-size: 0.68em; color: var(--dim); margin-top: 2px; }

.db-chart-section {
  background: rgba(20,14,8,0.6); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 10px; margin: 10px 0;
}
.db-chart-title {
  font-size: 0.82em; color: var(--gold); margin: 0 0 8px 0;
}
.db-chart-canvas {
  width: 100%; max-width: 460px; height: auto;
  display: block; margin: 0 auto; border-radius: 4px;
}

/* ==================== 18. 隐私政策 & 用户协议 ==================== */

.legal-page {
  max-width: 540px; overflow-y: auto; max-height: 75vh;
  padding: 16px; text-align: left;
}
.legal-content {
  font-size: 0.82em; line-height: 1.7; color: var(--text);
}
.legal-content h2 { font-size: 1.2em; color: var(--gold); text-align: center; margin: 0 0 16px 0; }
.legal-content h3 { font-size: 1.05em; color: var(--gold); margin: 16px 0 8px 0; border-bottom: 1px solid rgba(201,168,76,0.2); padding-bottom: 4px; }
.legal-content h4 { font-size: 0.95em; color: #e0c880; margin: 12px 0 6px 0; }
.legal-content p { margin: 4px 0 8px 0; color: var(--text); }
.legal-content ul { padding-left: 20px; margin: 6px 0; }
.legal-content li { color: var(--text); margin: 3px 0; font-size: 0.95em; }
.legal-content strong { color: #e0c880; }

/* 主界面隐私/协议链接样式 */
.legal-links {
  display: flex; justify-content: center; gap: 16px;
  margin-top: 10px; padding: 8px 0;
}
.legal-link {
  font-size: 0.68em; color: var(--dim); cursor: pointer; text-decoration: underline;
  transition: color 0.2s;
}
.legal-link:hover { color: var(--gold); }

/* ===== 社交系统样式 ===== */

/* 社交面板 */
.social-panel { max-width: 520px; margin: 0 auto; text-align: left; }
.social-tabs { display: flex; gap: 0; margin-bottom: 12px; border-bottom: 2px solid rgba(201,168,76,0.2); }
.social-tab {
  flex: 1; text-align: center; padding: 10px 0; cursor: pointer;
  color: var(--dim); font-size: 0.95em; font-weight: bold;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}
.social-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.social-tab:hover { color: #e0c880; }

/* 好友搜索 */
.friend-search { display: flex; gap: 8px; margin-bottom: 12px; }
.friend-search input {
  flex: 1; background: rgba(0,0,0,0.4); border: 1px solid rgba(201,168,76,0.25);
  color: var(--text); padding: 8px 12px; border-radius: 4px; font-size: 0.85em;
  outline: none; transition: border-color 0.2s;
}
.friend-search input:focus { border-color: var(--gold); }
.friend-search .btn { padding: 8px 14px; font-size: 0.85em; flex-shrink: 0; }

/* 搜索结果 */
.search-results { margin-bottom: 10px; }
.search-result-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: rgba(0,0,0,0.25); border-radius: 4px;
  margin-bottom: 4px; font-size: 0.85em;
}
.search-result-item .btn.small { padding: 4px 12px; font-size: 0.78em; }

/* 好友列表 */
.friend-list { max-height: 300px; overflow-y: auto; }
.friend-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: rgba(0,0,0,0.2); border-radius: 4px;
  margin-bottom: 4px; cursor: pointer; transition: background 0.2s;
}
.friend-item:hover { background: rgba(201,168,76,0.08); }
.friend-info { display: flex; align-items: center; gap: 10px; }
.friend-name { font-weight: bold; font-size: 0.9em; color: var(--text); }
.friend-online { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.friend-online.on { background: #5cb85c; box-shadow: 0 0 6px rgba(92,184,92,0.5); }
.friend-online.off { background: #555; }
.friend-actions { display: flex; gap: 6px; }
.friend-actions .btn.small { padding: 4px 10px; font-size: 0.75em; }
.friend-empty { text-align: center; color: var(--dim); padding: 30px 0; font-size: 0.9em; }

/* 聊天面板 */
.chat-panel { display: flex; flex-direction: column; height: 380px; }
.chat-header {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid rgba(201,168,76,0.15); margin-bottom: 8px;
}
.chat-header .friend-name { font-size: 1em; }
.chat-header .back-btn { cursor: pointer; color: var(--gold); font-size: 0.85em; }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 4px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.chat-msg {
  max-width: 75%; padding: 8px 12px; border-radius: 8px;
  font-size: 0.85em; line-height: 1.4; word-break: break-word;
}
.chat-msg.mine {
  align-self: flex-end; background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.2);
}
.chat-msg.theirs {
  align-self: flex-start; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}
.chat-msg .msg-time { font-size: 0.65em; color: var(--dim); margin-top: 2px; text-align: right; }
.chat-input-row {
  display: flex; gap: 6px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid rgba(201,168,76,0.15);
}
.chat-input-row input {
  flex: 1; background: rgba(0,0,0,0.4); border: 1px solid rgba(201,168,76,0.25);
  color: var(--text); padding: 8px 12px; border-radius: 4px; font-size: 0.85em;
  outline: none;
}
.chat-input-row input:focus { border-color: var(--gold); }
.chat-input-row .btn { padding: 8px 14px; font-size: 0.85em; }
.chat-empty { text-align: center; color: var(--dim); padding: 40px 0; font-size: 0.85em; }

/* 未读消息徽标 */
.unread-badge {
  display: inline-block; background: #d9534f; color: #fff; border-radius: 10px;
  padding: 1px 6px; font-size: 0.65em; font-weight: bold; min-width: 16px;
  text-align: center; vertical-align: super;
}

/* 联盟列表 */
.alliance-list { max-height: 300px; overflow-y: auto; }
.alliance-list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: rgba(0,0,0,0.2); border-radius: 4px;
  margin-bottom: 6px; cursor: pointer; transition: background 0.2s;
}
.alliance-list-item:hover { background: rgba(201,168,76,0.08); }
.al-name { font-weight: bold; color: var(--gold); font-size: 0.9em; }
.al-info { color: var(--dim); font-size: 0.75em; }
.al-meta { display: flex; gap: 12px; margin-top: 4px; font-size: 0.72em; color: var(--dim); }
.alliance-empty { text-align: center; color: var(--dim); padding: 30px 0; font-size: 0.9em; }

/* 联盟详情 */
.alliance-detail { }
.al-detail-header {
  text-align: center; margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
.al-detail-header .al-name { font-size: 1.2em; }
.al-detail-header .al-level { font-size: 0.8em; color: var(--dim); margin-top: 4px; }
.al-detail-header .al-exp { font-size: 0.72em; color: var(--dim); }
.al-leader { color: var(--dim); font-size: 0.85em; margin: 8px 0; }
.al-announcement {
  padding: 12px; background: rgba(0,0,0,0.25); border-radius: 4px;
  margin-bottom: 16px; font-size: 0.85em; color: var(--text);
}
.al-announcement .al-ann-title { color: var(--gold); font-weight: bold; margin-bottom: 4px; }
.al-members { margin-bottom: 16px; }
.al-members h4 { color: var(--gold); font-size: 0.9em; margin-bottom: 8px; }
.al-member-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: rgba(0,0,0,0.15); border-radius: 4px;
  margin-bottom: 3px; font-size: 0.82em;
}
.al-member-role { font-size: 0.72em; padding: 1px 6px; border-radius: 3px; }
.al-member-role.leader { background: rgba(201,168,76,0.2); color: var(--gold); }
.al-member-role.officer { background: rgba(92,184,92,0.2); color: #5cb85c; }

/* 联盟捐献 */
.al-donate { margin-top: 12px; }
.al-donate h4 { color: var(--gold); font-size: 0.9em; margin-bottom: 8px; }
.al-donate-options { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.al-donate-btn {
  flex: 1; min-width: 80px; padding: 10px 8px; text-align: center;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(201,168,76,0.2);
  border-radius: 6px; cursor: pointer; transition: all 0.2s;
  font-size: 0.8em;
}
.al-donate-btn:hover { border-color: var(--gold); background: rgba(201,168,76,0.08); }
.al-donate-btn .donate-amt { color: var(--gold); font-weight: bold; font-size: 1.1em; }
.al-donate-btn .donate-label { color: var(--dim); font-size: 0.78em; margin-top: 2px; }
.al-donate-btn .donate-exp { color: #5cb85c; font-size: 0.7em; }
.al-warehouse { margin-top: 12px; font-size: 0.8em; color: var(--dim); }

/* 联盟创建表单 */
.al-create-form { margin-top: 12px; }
.al-create-form input {
  width: 100%; background: rgba(0,0,0,0.4); border: 1px solid rgba(201,168,76,0.25);
  color: var(--text); padding: 8px 12px; border-radius: 4px; font-size: 0.85em;
  outline: none; margin-bottom: 8px; box-sizing: border-box;
}
.al-create-form input:focus { border-color: var(--gold); }
.al-create-form .btn { width: 100%; }
.al-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.al-actions .btn { flex: 1; min-width: 100px; font-size: 0.82em; }

/* 社交入口按钮 glow 效果 */
.social-btn-glow { position: relative; }
.social-btn-glow::after {
  content: ''; position: absolute; top: -2px; right: -2px;
  width: 10px; height: 10px; background: #d9534f; border-radius: 50%;
  display: none;
}
.social-btn-glow.has-unread::after { display: block; }