/* ============================================================================
   三国群英谱 · 移动端适配层
   ----------------------------------------------------------------------------
   本文件在每页 </style> 之后引入，作用有二：
     1. 覆盖页面内联样式里不足的断点（原断点集中在 900–1080px，未覆盖手机）
     2. 补齐触摸设备需要的可点尺寸、惯性滚动、iOS 输入框缩放等问题
   断点：1024 / 760 / 560 / 400
   ========================================================================== */

/* ---------- 0. 基础：防溢出、防 iOS 字体膨胀、去点击高亮 ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
*{-webkit-tap-highlight-color:transparent}
img,svg,video{max-width:100%}
.blist,.chat-log,.cmp-scroll,.tl,.tabs,.sec-nav,.chips{-webkit-overflow-scrolling:touch}

/* ---------- 1. 页头：品牌一行 + 栏目横向滑动 ---------- */
@media (max-width:1024px){
  .header-inner{padding:11px 16px;gap:10px}
  .shell{padding:20px 16px 56px;gap:22px}
  .section-head h2{font-size:21px}
  .panel{padding:15px}
}

@media (max-width:760px){
  .header-inner{padding:9px 12px;gap:7px;align-items:center}
  .brand{gap:1px;min-width:0}
  .brand h1{font-size:17px;line-height:1.25}
  .header-stat{font-size:10.5px;line-height:1.5;white-space:normal}
  /* 栏目条：一行横向滚动，不再折成占半屏的多行 */
  .tabs{width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
        gap:6px;padding:2px 0 4px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{flex:none;padding:7px 13px;font-size:12.5px}

  .shell{padding:14px 12px 44px;gap:16px}
  section{scroll-margin-top:108px}
  .section-head{align-items:flex-start;gap:6px}
  .section-head h2{font-size:18.5px}
  .section-head p{font-size:12.5px;line-height:20px}
  .panel{padding:13px 12px;border-radius:9px;gap:11px}
  .subhead{font-size:14px}
  .note{font-size:11.5px;line-height:19px}

  .app-footer .footer-inner{padding:16px 12px;gap:8px}
  .footer-brand{font-size:13px}
  .footer-right{font-size:11.5px;white-space:normal}

  /* iOS 在字号 <16px 的输入框聚焦时会自动放大页面 */
  input[type=text],input[type=search],input:not([type]),textarea,select{font-size:16px}
}

/* ============================================================================
   2. 总览 index.html
   ========================================================================== */
@media (max-width:760px){
  .summary-hero{grid-template-columns:1fr;gap:12px;margin-top:10px}
  .hero-copy{padding:18px 16px;gap:8px;border-radius:9px}
  .hero-copy h2{font-size:20px;line-height:30px}
  .hero-copy p{font-size:12.5px;line-height:21px}
  .hero-note{font-size:11.5px}

  .metric-grid{gap:8px}
  .metric{padding:12px 11px}
  .metric .value{font-size:21px}
  .metric .label{font-size:11.5px}

  .legend{gap:9px}
  .legend span{font-size:11.5px}

  /* 势力构成：名称在上、数值并排、条形独占一行 */
  .part-list{gap:13px}
  .part-row{grid-template-columns:1fr auto auto;grid-template-rows:auto auto;
            gap:6px 8px;align-items:center}
  .part-label{grid-column:1;grid-row:1}
  .part-values{grid-column:2;grid-row:1}
  .part-density{grid-column:3;grid-row:1}
  .part-bar{grid-column:1/-1;grid-row:2;height:14px}
  .part-label strong{font-size:13px}
  .part-label span{font-size:11px}

  /* 分期带：横向比例图在手机上会被压成几条细缝，改为纵向列表 */
  .phase-band{flex-direction:column;height:auto;gap:2px;border-radius:8px;overflow:visible}
  .phase{flex:none !important;width:100%;min-height:42px;
         flex-direction:row;align-items:center;justify-content:space-between;
         gap:8px;padding:9px 12px;border-radius:6px}
  .phase strong{font-size:13px}
  .phase span{font-size:11px}
  .phase-scale{display:none}

  /* 帝王年谱：收窄标签列，坐标轴同步左移 */
  .chron-axis{margin-left:106px;height:18px}
  .chron-tick{font-size:9.5px}
  .chron-row{grid-template-columns:96px 1fr;gap:8px}
  .chron-name{font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
  .chron-group strong{font-size:12.5px}

  .event-row{gap:8px;padding:7px 0}
  .event-year{width:60px;font-size:12.5px}
  .event-text{font-size:12.5px;line-height:21px}

  .insight-toc{grid-template-columns:1fr}
  .ins-card .ins-title{font-size:12.5px;line-height:20px}
  .synthesis-body{padding:13px 14px}
  .synthesis-body p{font-size:12.5px;line-height:21px}
}

@media (max-width:400px){
  .chron-axis{margin-left:88px}
  .chron-row{grid-template-columns:78px 1fr;gap:6px}
  .chron-name{font-size:10.5px}
}

/* ============================================================================
   3. 人物名录 people.html
   ========================================================================== */
@media (max-width:760px){
  .toolbar{padding:12px}
  .search-row{gap:8px}
  .search-box{min-width:0;width:100%}
  .search-box input{padding:11px 12px 11px 34px}

  .chip-row{gap:6px}
  .chip-label{width:100%;font-size:11px;margin-bottom:1px}
  .chip{padding:7px 14px;font-size:12.5px}
  .stat-line{font-size:11.5px}
  .stat-line strong{font-size:14px}

  /* 699 人：手机上一列太长，用自适应两列 */
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px}
  .card-body{padding:11px;gap:5px}
  .card-namerow h3{font-size:17px}
  .zi-tag,.fict-tag{font-size:10px;padding:1px 6px}
  .card-meta{font-size:10.5px}
  .card-desc{font-size:11.5px;line-height:18px;
             display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .card-more{font-size:10.5px}
  .empty-tip{font-size:12.5px;padding:22px 10px}

  /* 人物详情：手机上改为整屏抽屉 */
  .modal-mask{padding:0;align-items:stretch}
  .modal{max-width:100%;border-radius:0;min-height:100%;display:flex;flex-direction:column}
  .modal-head{padding:16px 15px 4px}
  .modal-head h3{font-size:21px}
  .modal-zi{font-size:12px;margin-left:6px}
  .modal-close{width:40px;height:40px;font-size:18px}
  .modal-meta{padding:0 15px 12px;gap:6px 14px;font-size:11.5px}
  .modal-body{padding:14px 15px 26px;gap:12px}
  .modal-desc{font-size:12.5px;line-height:21px;padding:11px 12px}
  .modal-events h4{font-size:14px}
  .modal .event-year{width:56px}
}

/* 触摸设备上取消悬停位移，避免点击后卡片黏在浮起状态 */
@media (hover:none){
  .character-card:hover{transform:none;box-shadow:none}
  .character-card:active{transform:scale(.985)}
}

/* ============================================================================
   4. 时间轴 timeline.html
   ========================================================================== */
@media (max-width:760px){
  .toolbar{padding:12px;gap:9px}
  .search-box{min-width:0;width:100%}
  .search-box input{padding:11px 12px 11px 34px}
  .tb-row{gap:8px}
  .tb-label{width:auto;min-width:38px;font-size:11.5px}
  .tb-sep{display:none}
  .chip-btn{padding:7px 14px;font-size:12.5px}
  .btn-clear{padding:9px 14px}
  .stat-line{gap:6px 12px;font-size:11.5px}

  .phase-nav{padding:10px;gap:7px;border-radius:9px}
  .phase-nav a{padding:8px 13px;font-size:12.5px;gap:5px}

  .panel-head{padding:13px 13px 11px}
  .panel-title h3{font-size:19px}
  .panel-title .years{font-size:12.5px}
  .panel-intro{font-size:12.5px;line-height:21px}
  .panel-body{padding:14px 13px 16px;gap:16px}

  .battle-grid{grid-template-columns:1fr;gap:10px}
  .battle-card{padding:13px 14px}
  .bc-name{font-size:15px}
  .bc-year{font-size:14px}
  .bc-desc{font-size:12.5px;line-height:21px}
  .bc-k a{font-size:11.5px;padding:4px 10px}

  .pol-list{gap:8px}
  .pol-item{padding:10px 12px}
  .pol-top{gap:6px}
  .pol-y{min-width:0;font-size:12.5px}
  .pol-t{font-size:13.5px}
  .pol-tag{margin-left:0;font-size:10.5px}
  .pol-d{font-size:12.3px;line-height:21px}

  .rw-n{width:54px;font-size:12.5px}
  .rw-d{font-size:11.5px;line-height:19px}

  .ev-row{gap:8px;padding:8px 0}
  .ev-y{width:62px;font-size:12.5px}
  .ev-t{font-size:12.5px;line-height:21px}

  .res-row{gap:8px;padding:9px 0}
  .res-y{width:62px;font-size:12.5px}
  .res-t{font-size:13px}
  .res-d{font-size:12px;line-height:20px}
}

@media (max-width:400px){
  .ev-y,.res-y{width:54px;font-size:11.5px}
  .rw-n{width:46px}
}

/* ============================================================================
   5. 三国志 states.html
   ========================================================================== */
@media (max-width:760px){
  .state-tabs{gap:8px}
  .state-tabs button{padding:9px 15px;font-size:13.5px;gap:6px}
  .state-tabs button i{width:9px;height:9px}

  .hero-in{padding:14px 13px;gap:10px}
  .hero-name{font-size:21px}
  .hero-en{font-size:11px}
  .hero-years{font-size:13.5px;margin-left:0;width:100%}
  .hero-intro{font-size:12.8px;line-height:22px}
  .hero-stats{gap:8px}
  .hstat{min-width:calc(50% - 4px);flex:1;padding:8px 11px}
  .hstat b{font-size:13px}
  .hstat span{font-size:10.5px}

  /* 章内锚点：改为一行横向滚动，不再吸顶占用宝贵高度 */
  .sec-nav{position:static;flex-wrap:nowrap;overflow-x:auto;gap:6px;
           padding:2px 0 6px;margin-top:0;scrollbar-width:none}
  .sec-nav::-webkit-scrollbar{display:none}
  .sec-nav a{flex:none;padding:6px 13px;font-size:12px}

  .panel-head{padding:13px 13px 11px}
  .panel-head h3{font-size:18px}
  .panel-body{padding:13px 12px 16px;gap:16px}

  /* 地理条目：左右并排会挤成窄柱，改为上下 */
  .geo-list{gap:12px}
  .geo-item{flex-direction:column;gap:3px}
  .geo-k{width:auto;font-size:13px}
  .geo-v{font-size:12.8px;line-height:22px}

  /* 制度沿革：同上 */
  .ref-row{flex-direction:column;gap:4px;padding:11px 0}
  .ref-y{width:auto;font-size:12.5px}
  .ref-t{font-size:14px}
  .ref-d{font-size:12.5px;line-height:21px}

  .deb{padding:12px 13px}
  .deb-t{font-size:14px}
  .deb-b{font-size:12.5px;line-height:22px;text-align:left}

  .bib-h{font-size:14.5px}
  .bib-row{gap:9px}
  .bib-no{width:26px;font-size:11.5px}
  .bib-t{font-size:12.8px;line-height:20px}
  .bib-n{font-size:11.8px;line-height:19px}
  .bib-tip{font-size:11.5px;line-height:19px;padding:9px 11px}

  /* 对比表：手机宽度放不下四列，横向滚动 + 缩小字号 */
  .cmp-scroll{overflow-x:auto}
  table.cmp{min-width:620px;font-size:12px}
  table.cmp th,table.cmp td{padding:9px 11px;line-height:19px}
  table.cmp tbody th{width:96px;font-size:11.8px}
  table.cmp thead th{font-size:13px}
}

@media (max-width:400px){
  .hstat{min-width:100%}
}

/* ============================================================================
   6. 地图 map.html
   ========================================================================== */
@media (max-width:760px){
  .toolbar{padding:12px;gap:10px}
  .tb-label{width:auto;min-width:38px;font-size:11.5px}
  .tb-sep{display:none}
  .chip-btn{padding:7px 14px;font-size:12.5px}
  .locate-row{gap:7px}
  .lbtn{padding:8px 13px;font-size:12px}

  .map-wrap{grid-template-columns:1fr;gap:12px}
  .side{position:static;gap:12px}
  .map-card{border-radius:9px}
  .map-head{padding:11px 12px}
  .map-head h3{font-size:15px}
  .map-head .hint{font-size:11px}
  .map-stage{padding:6px}
  /* 地图本身已支持单指平移 / 双指捏合，去掉内边距把画幅让给手指 */
  .map-status{padding:8px 11px;gap:5px 11px;font-size:11.5px}
  .zoombar{gap:5px}
  .zbtn{min-width:38px;height:38px;font-size:16px;border-radius:8px}
  .zval{min-width:44px;font-size:12px}

  .panel-head{padding:12px 13px}
  .panel-head h3{font-size:15px}
  .panel-head p{font-size:11px}
  .panel-body{padding:12px 13px;gap:9px}
  .blist{max-height:270px}
  .bitem{padding:10px 0;font-size:12.5px;gap:8px}
  .bi-y{width:46px;font-size:11.5px}
  .detail{gap:6px}
  .legend{gap:6px}
  .lg-row{font-size:12.5px}
}

/* 触摸端隐藏悬停提示，避免高亮残留 */
@media (hover:none){
  .bat-dot:hover,.city-dot:hover{stroke-width:inherit}
  .lbtn:hover{border-color:var(--line);color:#5d544b}
}

/* ============================================================================
   7. 解谜 game.html
   ========================================================================== */
@media (max-width:760px){
  .game-wrap{grid-template-columns:1fr;gap:12px}
  .side{position:static;gap:12px}

  .chat{border-radius:9px}
  .chat-head{padding:11px 13px;gap:8px}
  .chat-head h3{font-size:15.5px}
  .chat-meta{font-size:11.5px}
  .chat-log{padding:12px 11px;height:min(48vh,380px);gap:10px}
  .msg{gap:8px}
  .msg .ava{width:26px;height:26px;font-size:11.5px}
  .bub{max-width:86%;padding:9px 12px;font-size:13px;line-height:21px;border-radius:10px}
  .bub .kv{font-size:11.5px;padding:1px 8px}

  .chat-input{padding:11px 12px;gap:9px}
  .quick{gap:6px}
  .qbtn{padding:7px 13px;font-size:12.5px}
  .input-row{gap:7px}
  .input-row input{padding:11px 12px}
  .input-row .btn{padding:11px 16px;font-size:13.5px}

  .panel-head{padding:12px 13px}
  .panel-head h3{font-size:15px}
  .panel-body{padding:12px 13px;gap:9px}
  .stat-row{font-size:12.5px}
  .stat-row b{font-size:14px}
  .hint-item{font-size:12px;line-height:19px;padding-left:9px}
  .card-init{padding:13px}
}

/* 屏幕键盘弹出后，输入行会顶在视口边缘，留出安全区 */
@supports (padding:env(safe-area-inset-bottom)){
  @media (max-width:760px){
    .app-footer .footer-inner,
    .chat-input{padding-bottom:calc(11px + env(safe-area-inset-bottom))}
  }
}

/* ============================================================================
   8. 论三国 insights.html
   ========================================================================== */
@media (max-width:760px){
  .tl{padding:13px 12px 11px;border-radius:9px}
  /* 时代轴是横向结构，手机上保留横滑而不是压缩 */
  .tl-line{min-width:680px;padding-top:22px}
  .tl-line::before{top:30px}
  .tl-nm{font-size:12px}
  .tl-sb{font-size:10px}
  .tl-dot{width:15px;height:15px}

  .filters{padding:12px;gap:10px;border-radius:9px}
  .frow{gap:8px}
  .flabel{width:100%;padding-top:0;font-size:12.5px}
  .chips{gap:6px}
  .cb{padding:7px 14px;font-size:12.5px}
  .fbar{gap:9px}
  .fcount{font-size:12px}
  .freset{padding:8px 14px}

  .q-grid{grid-template-columns:1fr;gap:10px}
  .q-body{padding:13px;gap:9px}
  .q-quote{font-size:13px;line-height:21px}
  .q-note{font-size:11.8px;line-height:19px}
  .q-who{font-size:12.5px}
  .q-role,.q-target,.q-src{font-size:11.5px}
  .q-std{font-size:9.5px;padding:1px 7px}

  .era-head{gap:9px}
  .era-head h2{font-size:17px}
  .era-head .sub{font-size:11.5px}
  .era-head .bar{height:22px}
  .era-desc{font-size:12.3px;line-height:20px}
  .era-sec{gap:11px}

  .synthesis-body{padding:13px 14px}
  .synthesis-body h4{font-size:13.5px}
  .synthesis-body p{font-size:12.5px;line-height:21px}
}

/* ============================================================================
   9. 横屏手机 / 小平板：把两侧留白再收一点
   ========================================================================== */
@media (max-width:1024px) and (orientation:landscape) and (max-height:520px){
  .header-inner{padding:7px 14px}
  .shell{padding-top:12px}
  .chat-log{height:min(62vh,300px)}
}


/* wx-gap-fallback */
@supports not ((gap: 1px) or (row-gap: 1px)){/* ---------- 1. 页头：品牌一行 + 栏目横向滑动 ---------- */
@media (max-width:1024px) > *:not(:last-child){margin-right:.shell{padding:20px;}}
@media (max-width:760px){@supports not ((gap: 1px) or (row-gap: 1px)){.header-inner > *:not(:last-child){margin-right:7px;}}}
@media (max-width:760px){@supports not ((gap: 1px) or (row-gap: 1px)){.brand > *:not(:last-child){margin-right:1px;}}}
@media (max-width:760px){@supports not ((gap: 1px) or (row-gap: 1px)){/* 栏目条：一行横向滚动，不再折成占半屏的多行 */
  .tabs > *:not(:last-child){margin-right:6px;}}}
@media (max-width:760px){@supports not ((gap: 1px) or (row-gap: 1px)){.shell > *:not(:last-child){margin-right:16px;}}}
@media (max-width:760px){@supports not ((gap: 1px) or (row-gap: 1px)){.section-head > *:not(:last-child){margin-right:6px;}}}
@media (max-width:760px){@supports not ((gap: 1px) or (row-gap: 1px)){.panel > *:not(:last-child){margin-right:11px;}}}
@media (max-width:760px){@supports not ((gap: 1px) or (row-gap: 1px)){.app-footer .footer-inner > *:not(:last-child){margin-right:8px;}}}
@supports not ((gap: 1px) or (row-gap: 1px)){/* ============================================================================
   2. 总览 index.html
   ========================================================================== */
@media (max-width:760px) > *:not(:last-child){margin-bottom:12px;}}
@media (max-width:400px){@supports not ((gap: 1px) or (row-gap: 1px)){.chron-row > *:not(:last-child){margin-right:6px;}}}
@supports not ((gap: 1px) or (row-gap: 1px)){/* ============================================================================
   3. 人物名录 people.html
   ========================================================================== */
@media (max-width:760px) > *:not(:last-child){margin-bottom:9px};}}
@supports not ((gap: 1px) or (row-gap: 1px)){/* ============================================================================
   4. 时间轴 timeline.html
   ========================================================================== */
@media (max-width:760px) > *:not(:last-child){margin-right:.search-box{min-width:0;}}
@supports not ((gap: 1px) or (row-gap: 1px)){/* ============================================================================
   5. 三国志 states.html
   ========================================================================== */
@media (max-width:760px) > *:not(:last-child){margin-bottom:6px};}}
@supports not ((gap: 1px) or (row-gap: 1px)){/* ============================================================================
   6. 地图 map.html
   ========================================================================== */
@media (max-width:760px) > *:not(:last-child){margin-right:.tb-label{width:auto;}}
@supports not ((gap: 1px) or (row-gap: 1px)){/* ============================================================================
   7. 解谜 game.html
   ========================================================================== */
@media (max-width:760px) > *:not(:last-child){margin-right:.side{position:static;}}
@supports not ((gap: 1px) or (row-gap: 1px)){/* ============================================================================
   8. 论三国 insights.html
   ========================================================================== */
@media (max-width:760px) > *:not(:last-child){margin-right:10px;}}