/* ==========================================================
   虎牢关攻防战 · 游戏内样式 V7.2
   容器 .hulao-map ｜ 节点 .sg-city ｜ 坐标 city-* + data-city-* 双写
   ========================================================== */

/* === 1. 基础 === */
body{
  color:#2b2118;
  background:#f7f4ec;
  font-family:"Noto Sans SC",-apple-system,sans-serif;
  line-height:1.7;
}

/* === 2. 顶部状态栏 === */
.top-bar{
  position:relative;
  box-sizing:border-box;
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  max-width:920px;
  margin:10px auto 14px;
  padding:14px 18px;
  overflow:hidden;
  border:1px solid rgba(188,145,73,.48);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(70,43,24,.97),rgba(34,27,23,.98));
  color:#f4e3bd;
  font-size:14px;
  letter-spacing:.03em;
  box-shadow:0 5px 18px rgba(19,12,8,.22);
}
.top-bar::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:5px;
  height:100%;
  background:linear-gradient(#d8b468,#825524,#d8b468);
}
.top-bar span{
  white-space:nowrap;
}
.top-bar span:first-child{
  color:#ffe8b4;
  font-family:"Noto Serif SC","Songti SC","SimSun",serif;
  font-size:16px;
  font-weight:700;
}

/* === 3. 地图外壳 === */
.map-container{
  box-sizing:border-box;
  max-width:920px;
  margin:14px auto;
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid rgba(138,95,48,.5);
  border-radius:13px;
  background:#2e251e;
  box-shadow:0 6px 20px rgba(20,13,8,.24);
}
.map-container > summary{
  box-sizing:border-box;
  padding:11px 16px;
  cursor:pointer;
  border-bottom:1px solid rgba(198,158,91,.3);
  background:linear-gradient(90deg,#4a3423,#30251e);
  color:#f1d8a4;
  font-family:"Noto Serif SC","Songti SC","SimSun",serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  user-select:none;
}

/* === 4. 地图本体 === */
.hulao-map{
  position:relative;
  box-sizing:border-box;
  width:900px;
  height:650px;
  min-width:900px;
  margin:14px auto 10px;
  overflow:hidden;
  border:1px solid rgba(91,58,28,.72);
  border-radius:12px;
  background-image:url("https://miha.wiki/Zcq4QT.png");
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#c9b48a;
  box-shadow:inset 0 0 40px rgba(48,27,11,.35);
}

/* === 5. 节点通用（top/left 保留 0，坐标靠 transform 偏移） === */
.hulao-map .sg-city{
  position:absolute;
  top:0;
  left:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:26px;
  height:26px;
  border:2px solid rgba(255,247,219,.85);
  border-radius:50%;
  background:#77736b;
  color:#fff;
  font-size:0;
  cursor:pointer;
  box-shadow:0 0 0 3px rgba(54,35,19,.28),0 3px 7px rgba(39,23,12,.45);
}
.hulao-map .sg-city::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.78);
}

/* 节点名牌 */
.hulao-map .sg-city > span{
  position:absolute;
  top:100%;
  left:50%;
  z-index:6;
  padding:1px 5px;
  border:1px solid rgba(255,236,191,.15);
  border-radius:3px;
  background:rgba(42,29,18,.9);
  color:#fff0ce;
  font-family:"Noto Serif SC","Songti SC","SimSun",serif;
  font-size:11px;
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
  text-shadow:0 1px 2px #000;
  pointer-events:none;
  transform:translate(-50%,5px);
}

/* 悬停详情浮层（读 data-info） */
.hulao-map .sg-city:hover::after{
  content:attr(data-info);
  position:absolute;
  bottom:135%;
  left:50%;
  z-index:20;
  box-sizing:border-box;
  min-width:170px;
  max-width:300px;
  padding:8px 12px;
  border:1px solid rgba(241,203,107,.55);
  border-radius:6px;
  background:rgba(28,19,12,.96);
  color:#f4e3bd;
  font-size:12px;
  font-weight:400;
  line-height:1.65;
  text-align:left;
  white-space:pre-wrap;
  pointer-events:none;
  transform:translateX(-50%);
  box-shadow:0 5px 16px rgba(0,0,0,.5);
}

/* === 6. 节点状态 === */
.hulao-map .sg-city.status-capital,
.hulao-map .sg-city.data-status-capital{
  outline:3px double #f1cb6b;
  outline-offset:3px;
}
.hulao-map .sg-city.status-damaged,
.hulao-map .sg-city.data-status-damaged{
  border-style:dashed;
  filter:saturate(.6) brightness(.88);
}
.hulao-map .sg-city.status-breached,
.hulao-map .sg-city.data-status-breached{
  border:3px double #ff5a4a;
}
.hulao-map .sg-city.status-siege,
.hulao-map .sg-city.data-status-siege{
  filter:grayscale(.7) brightness(.8);
}
.hulao-map .sg-city.status-fire,
.hulao-map .sg-city.data-status-fire{
  animation:hl-flicker 1.1s infinite;
}
.hulao-map .sg-city.status-occupied,
.hulao-map .sg-city.data-status-occupied{
  animation:hl-pulse .9s infinite;
}
@keyframes hl-flicker{
  0%,100%{box-shadow:0 0 10px 2px #ff7a1f,0 3px 7px rgba(39,23,12,.45);}
  50%{box-shadow:0 0 18px 5px #ff3d0d,0 3px 7px rgba(39,23,12,.45);}
}
@keyframes hl-pulse{
  0%,100%{border-color:#ffef9e;}
  50%{border-color:#ff4d3d;}
}

/* === 7. 归属颜色（地图 + 图例共用，双写兼容） === */
.hulao-map .owner-attack,
.hulao-map .data-owner-attack,
.map-legend .owner-attack{
  background:#c1352f !important;
}
.hulao-map .owner-defense,
.hulao-map .data-owner-defense,
.map-legend .owner-defense{
  background:#3f6597 !important;
}
.hulao-map .owner-neutral,
.hulao-map .data-owner-neutral,
.map-legend .owner-neutral{
  background:#7d7468 !important;
}

/* === 8. 节点坐标（要调位置只改这一段） =====================
   V1.2 ｜ 1 单位 = 78px（核心→城门原距）
   ========================================================== */
.hulao-map .city-core,
.hulao-map .data-city-core{
  transform:translate(179px,266px) !important;
}
.hulao-map .city-wall,
.hulao-map .data-city-wall{
  transform:translate(294px,230px) !important;
}
.hulao-map .city-gate,
.hulao-map .data-city-gate{
  transform:translate(297px,301px) !important;
}
.hulao-map .city-moat,
.hulao-map .data-city-moat{
  transform:translate(407px,326px) !important;
}
.hulao-map .city-ferry,
.hulao-map .data-city-ferry{
  transform:translate(385px,500px) !important;
}
.hulao-map .city-camp,
.hulao-map .data-city-camp{
  transform:translate(778px,339px) !important;
}

/* === 9. 图例 === */
.map-legend{
  display:flex;
  flex-wrap:wrap;
  gap:7px 16px;
  box-sizing:border-box;
  width:900px;
  min-width:900px;
  margin:0 auto 13px;
  padding:9px 12px;
  border-top:1px solid rgba(222,190,132,.18);
  background:rgba(28,22,18,.75);
  color:#ddc8a6;
  font-size:12px;
}
.legend-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.color-box{
  display:inline-block;
  box-sizing:border-box;
  width:11px;
  height:11px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:50%;
}

/* === 10. 正文 === */
.text-content{
  box-sizing:border-box;
  max-width:920px;
  margin:16px auto;
  padding:24px 30px;
  border:1px solid rgba(142,96,47,.3);
  border-radius:12px;
  background:linear-gradient(#fffdf7,#fbf6e9);
  font-size:15.5px;
  line-height:1.95;
  box-shadow:0 3px 12px rgba(60,40,20,.08);
}
.text-content p{
  margin:15px 0;
  text-indent:2em;
}
/* 合卷 / 刻石提示行 */
.text-content p:last-child:not(:only-child){
  margin-top:22px;
  padding-top:14px;
  border-top:1px dashed rgba(142,96,47,.35);
  color:#7a5a30;
  font-family:"Noto Serif SC","Songti SC","SimSun",serif;
  font-size:13.5px;
  text-indent:0;
  text-align:right;
}

/* === 11. 后置状态栏 === */
.sg-panel{
  box-sizing:border-box;
  max-width:920px;
  margin:16px auto;
}
.sg-panel > details,
.sg-memory > details{
  margin:9px 0;
  overflow:hidden;
  border:1px solid rgba(142,96,47,.32);
  border-radius:10px;
  background:#fffdf7;
  box-shadow:0 2px 6px rgba(60,40,20,.06);
}
.sg-panel > details > summary,
.sg-memory > details > summary{
  padding:11px 16px;
  cursor:pointer;
  background:linear-gradient(90deg,rgba(156,108,50,.14),rgba(156,108,50,.05));
  color:#5d3a1c;
  font-family:"Noto Serif SC","Songti SC","SimSun",serif;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.08em;
  user-select:none;
}
.sg-panel > details[open] > summary,
.sg-memory > details[open] > summary{
  border-bottom:1px solid rgba(142,96,47,.22);
}
.sg-panel > details > p,
.sg-memory > details > p{
  margin:0;
  padding:8px 18px;
  font-size:13.5px;
  line-height:1.75;
}
.sg-panel > details > p + p{
  border-top:1px dotted rgba(142,96,47,.18);
}
.sg-panel > details > p:last-child,
.sg-memory > details > p:last-child{
  padding-bottom:13px;
}

/* 迷雾三档：提示词需输出 <span class="fog">未探明</span> / <span class="fog-partial">约见...</span> */
.fog{
  color:#6b5a44;
  font-style:italic;
  opacity:.85;
}
.fog-partial{
  color:#8a6a2f;
  font-style:italic;
}

/* === 12. 下一步行动 === */
details.sg-action{
  box-sizing:border-box;
  max-width:920px;
  margin:16px auto;
  padding:0 0 6px;
  border:1px solid rgba(142,96,47,.4);
  border-radius:10px;
  background:#fffaf0;
}
details.sg-action > summary{
  padding:11px 16px;
  cursor:pointer;
  border-bottom:1px solid rgba(142,96,47,.22);
  background:linear-gradient(90deg,rgba(193,53,47,.1),rgba(193,53,47,.03));
  color:#8a2c26;
  font-family:"Noto Serif SC","Songti SC","SimSun",serif;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.08em;
}
.sg-action .action-tip{
  margin:10px 16px 4px;
  padding:7px 12px;
  border-left:3px solid rgba(156,108,50,.5);
  border-radius:4px;
  background:rgba(156,108,50,.07);
  color:#6b4a22;
  font-size:12.5px;
}
.sg-action blockquote{
  margin:10px 16px 4px;
  padding:7px 12px;
  border-left:3px solid rgba(156,108,50,.5);
  border-radius:4px;
  background:rgba(156,108,50,.07);
  color:#6b4a22;
  font-size:12.5px;
}
.sg-action pre{
  margin:10px 16px !important;
  overflow:hidden;
  border:1px solid rgba(142,96,47,.3) !important;
  border-radius:8px !important;
  background:rgba(255,250,238,.8) !important;
}
.sg-action pre code{
  color:#3a2a18 !important;
  font-family:"Noto Serif SC","Songti SC",serif !important;
  font-size:13px !important;
  line-height:1.7 !important;
}
.sg-action pre .border-b{
  border-color:rgba(142,96,47,.18) !important;
  background:rgba(156,108,50,.06);
}
.sg-action pre .text-\[13px\]{
  color:#8a6a2f !important;
  font-weight:700 !important;
}

/* === 13. 虎牢战记 === */
.sg-memory{
  box-sizing:border-box;
  max-width:920px;
  margin:16px auto 26px;
}
.sg-memory > details{
  background:#faf6ea;
}
.sg-memory > details > summary{
  background:linear-gradient(90deg,rgba(70,43,24,.16),rgba(70,43,24,.04));
  color:#4a2d19;
}
.sg-memory > details > p:not(:first-of-type){
  border-top:none;
}
.sg-memory > details > p{
  padding:5px 20px;
  font-size:13px;
}

/* ==========================================================
   14. 战后总结
   ========================================================== */
.war-summary{
  box-sizing:border-box;
  max-width:880px;
  margin:24px auto;
  padding:24px 28px;
  border:1px solid rgba(142,96,47,.55);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,250,238,.99),rgba(238,227,203,.97));
  color:#2b2118;
  box-shadow:0 7px 24px rgba(32,21,12,.2);
}
.war-summary h2{
  margin:0 0 16px;
  padding-bottom:11px;
  border-bottom:2px solid rgba(132,88,39,.35);
  color:#4a2d19;
  font-family:"Noto Serif SC","Songti SC","SimSun",serif;
  font-size:26px;
  font-weight:700;
  letter-spacing:.2em;
  text-align:center;
}
.summary-verdict{
  margin:12px 0 20px;
  padding:11px 15px;
  border-left:5px solid #9b6a2f;
  border-radius:0 6px 6px 0;
  background:rgba(156,108,50,.13);
  font-size:15px;
  font-weight:700;
  letter-spacing:.04em;
}
.summary-section{
  margin:18px 0;
}
.summary-section h3{
  margin:0 0 9px;
  padding-left:10px;
  border-left:3px solid rgba(132,88,39,.5);
  color:#68411f;
  font-family:"Noto Serif SC","Songti SC","SimSun",serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:.1em;
}
.summary-section p{
  margin:7px 0;
  font-size:14px;
  line-height:1.8;
}
.summary-section ul{
  margin:9px 0 9px 22px;
  padding:0;
}
.summary-section li{
  margin:7px 0;
  font-size:14px;
  line-height:1.7;
}
.history-note{
  padding:14px 16px;
  border:1px solid rgba(132,88,39,.28);
  border-radius:8px;
  background:rgba(255,255,255,.5);
  color:#3a2a18;
  font-family:"Noto Serif SC","Songti SC","SimSun",serif;
  font-size:14.5px !important;
  line-height:2.05 !important;
  letter-spacing:.03em;
}

/* ==========================================================
   15. 风月平台 · 气泡与界面美化
   ========================================================== */

/* 聊天区背景与滚动条 */
.chat-container{
  background:
    radial-gradient(circle at 20% 15%,rgba(198,168,116,.07),transparent 45%),
    radial-gradient(circle at 80% 70%,rgba(155,58,50,.05),transparent 40%),
    linear-gradient(#f9f6ee,#f4efe2) !important;
  scrollbar-width:thin !important;
  scrollbar-color:#b9a480 transparent !important;
}
.chat-container::-webkit-scrollbar{
  width:9px;
}
.chat-container::-webkit-scrollbar-track{
  background:rgba(142,96,47,.06);
}
.chat-container::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:6px;
  background:#b9a480;
  background-clip:content-box;
}
.chat-container::-webkit-scrollbar-thumb:hover{
  background:#9b7f52;
  background-clip:content-box;
}

/* 气泡外壳 */
#customized-answer-content,
#customized-question-content{
  box-sizing:border-box;
  padding:18px 20px !important;
  border:1px solid rgba(142,96,47,.3) !important;
  border-radius:12px !important;
  color:#2b2118 !important;
  box-shadow:0 3px 12px rgba(60,40,20,.09) !important;
}
#customized-answer-content{
  background:linear-gradient(#fffdf7,#fbf6e9) !important;
}
#customized-question-content{
  border-color:rgba(63,101,151,.3) !important;
  background:linear-gradient(#fbfdfb,#eef2ec) !important;
}

/* 气泡顶部装饰线 */
#customized-answer-content > .MuiBox-root{
  height:3px !important;
  border-radius:2px !important;
  background:linear-gradient(90deg,transparent,#9b3a32 42%,#9b3a32 58%,transparent) !important;
}
#customized-question-content > .MuiBox-root{
  height:3px !important;
  border-radius:2px !important;
  background:linear-gradient(90deg,transparent,#3f6597 42%,#3f6597 58%,transparent) !important;
}

/* 平台正文排版 */
#customized-answer-content .markdown-body,
#customized-question-content .markdown-body{
  color:#2b2118 !important;
  font-size:15px !important;
  line-height:1.85 !important;
  letter-spacing:.01em;
}
#customized-question-content .markdown-body p{
  margin:4px 0 !important;
}

/* 头像 */
#customized-answer-avatar,
#customized-question-avatar{
  border:2px solid rgba(142,96,47,.4) !important;
  border-radius:50% !important;
  background:#fffdf7 !important;
  box-shadow:0 2px 6px rgba(60,40,20,.14) !important;
}
#customized-question-avatar{
  border-color:rgba(63,101,151,.4) !important;
}

/* 时间戳 */
#customized-answer-content-created-time,
#customized-question-content > .text-xs{
  color:#8a7a63 !important;
  font-size:11.5px !important;
  letter-spacing:.04em;
}

/* 模型与积分行 */
#customized-answer-content-model{
  gap:4px 12px !important;
  margin-top:7px !important;
  padding:6px 11px !important;
  border:1px solid rgba(142,96,47,.22) !important;
  border-radius:7px !important;
  background:rgba(251,246,233,.75) !important;
}
#customized-answer-content-model-name{
  color:#68411f !important;
  font-family:"Noto Serif SC","Songti SC",serif !important;
  font-size:12px !important;
  font-weight:700 !important;
}
#customized-answer-content-model-input-points,
#customized-answer-content-model-output-points,
#customized-answer-content-model-half-price{
  color:#8a6a2f !important;
  font-size:11.5px !important;
}

/* 气泡底部操作按钮 */
#customized-answer-content-model + .MuiStack-root,
#customized-question-content > .MuiStack-root{
  gap:2px !important;
  margin-top:5px !important;
  opacity:.7;
  transition:opacity .2s ease;
}
#customized-answer-content-model + .MuiStack-root:hover,
#customized-question-content > .MuiStack-root:hover{
  opacity:1;
}
#customized-answer-content-model + .MuiStack-root button,
#customized-question-content > .MuiStack-root button{
  color:#7a5a30 !important;
  font-size:12px !important;
}
#customized-answer-content-model + .MuiStack-root button:hover,
#customized-question-content > .MuiStack-root button:hover{
  background:rgba(156,108,50,.09) !important;
  color:#9b3a32 !important;
}

/* 输入框 */
div:has(> #ai-chat-input){
  box-sizing:border-box;
  padding:6px !important;
  border:1px solid rgba(142,96,47,.35) !important;
  border-radius:11px !important;
  background:#fffdf7 !important;
  transition:border-color .2s ease,box-shadow .2s ease;
}
div:has(> #ai-chat-input):focus-within{
  border-color:rgba(155,58,50,.55) !important;
  box-shadow:0 0 0 3px rgba(155,58,50,.1) !important;
}
#ai-chat-input{
  background:transparent !important;
  color:#2b2118 !important;
  font-family:"Noto Sans SC",sans-serif !important;
  font-size:15px !important;
  line-height:1.7 !important;
}
#ai-chat-input::placeholder{
  color:#7a6a52 !important;
  font-size:13.5px !important;
}

/* 发送按钮 */
#ai-send-button{
  border-radius:9px !important;
  transition:background .2s ease,transform .12s ease;
}
#ai-send-button:hover{
  background:rgba(155,58,50,.1) !important;
}
#ai-send-button:active{
  transform:translateY(1px);
}
#ai-send-button svg{
  color:#9b3a32 !important;
  fill:#9b3a32 !important;
}
#ai-send-button span{
  color:#8a6a2f !important;
}

/* 底部功能栏 */
#ai-mod-button2{
  gap:7px !important;
  padding-bottom:8px !important;
}
#ai-mod-button2 > button{
  border:1px solid rgba(142,96,47,.4) !important;
  border-radius:8px !important;
  background:rgba(255,253,247,.92) !important;
  color:#68411f !important;
  font-family:"Noto Serif SC","Songti SC",serif !important;
  font-size:12.5px !important;
  letter-spacing:.04em;
  box-shadow:0 1px 3px rgba(60,40,20,.07) !important;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
#ai-mod-button2 > button:hover{
  border-color:rgba(155,58,50,.5) !important;
  background:#fbf6e9 !important;
  color:#8a2c26 !important;
}
#ai-mod-button2 > button svg{
  color:#8a6a2f !important;
}
#ai-mod-button2 > button:hover svg{
  color:#9b3a32 !important;
}

/* 顶部设置按钮 */
#header-setting-button:hover{
  background:rgba(156,108,50,.12) !important;
}
#header-setting-button svg{
  color:#7a5a30 !important;
}
#header-setting-button:hover svg{
  color:#9b3a32 !important;
}

/* 评分星星 */
svg.fy-rating-filled{
  color:#c8873a !important;
  fill:#c8873a !important;
}
svg.fy-rating-empty{
  color:#cdbfa5 !important;
  fill:#cdbfa5 !important;
}

/* 评论输入框 */
textarea[placeholder="发表评论"]{
  color:#2b2118 !important;
  font-size:14px !important;
  line-height:1.75 !important;
}
textarea[placeholder="发表评论"]::placeholder{
  color:#8a7a63 !important;
}
div:has(> textarea[placeholder="发表评论"]){
  border-color:rgba(142,96,47,.35) !important;
  background:#fffdf7 !important;
}

/* === 16. 手机端：地图横滑，不做缩放 === */
@media (max-width:940px){
  .map-container{
    max-width:100%;
    border-radius:0;
  }
  .top-bar{
    gap:6px 12px;
    font-size:12.5px;
  }
  .top-bar span:first-child{
    font-size:14.5px;
  }
  .text-content{
    padding:18px 16px;
    font-size:15px;
  }
  .war-summary{
    padding:18px 16px;
  }
  .war-summary h2{
    font-size:22px;
  }
  .hulao-map .sg-city:hover::after{
    display:none;
  }
  #customized-answer-content,
  #customized-question-content{
    padding:14px 15px !important;
  }
  #customized-answer-content .markdown-body,
  #customized-question-content .markdown-body{
    font-size:14.5px !important;
  }
  #ai-mod-button2 > button{
    font-size:12px !important;
  }
}

/* === 17. 减少动效偏好 === */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
