/* ==========================================================
   慈航市市政大厅 · 全站自适应样式 v2
   各页面在 <head> 末尾引入；只补充响应式规则，不改动原有配色与气质。
   目标：手机竖屏 / 平板 / 笔记本 / 大屏显示器 皆可舒适阅读，
        页面内元素对齐、无横向溢出、触屏可点按。
   ========================================================== */

/* —— 基础安全网：系统字号不放大、整页无横向溢出 —— */
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
.wrap{width:100%;margin-left:auto;margin-right:auto}
/* 表单控件不把 flex 父级撑破（input 默认 min-content 很宽，是窄屏溢出的常见根因） */
input,select,textarea{min-width:0;max-width:100%}

/* —— 签头通用：标题/副题可折行，不被长串撑破 —— */
.redhead .ttl,.redhead>div{min-width:0}
.redhead h1,.redhead .ttl h1{overflow-wrap:anywhere}

/* —— 顶部签头：窄屏自动折行、左右对齐 —— */
@media (max-width:760px){
  .redhead{flex-wrap:wrap;gap:14px}
  .redhead .ttl{flex:1 1 200px}
  .redhead .ttl h1{font-size:21px;line-height:1.35;letter-spacing:1px;word-break:break-word}
  .redhead .ttl p{font-size:12.5px;line-height:1.65}
  .redhead .seal{width:56px;height:56px;flex:0 0 56px;font-size:14px}
  .redhead .clock,.redhead .back{margin-left:auto}
}

@media (max-width:560px){
  body{padding:18px 13px 46px}
  .redhead{padding:16px 15px;gap:12px;border-radius:12px}
  .redhead h1,.redhead .ttl h1{font-size:18px;letter-spacing:.5px}
  .redhead p,.redhead .ttl p{font-size:11.5px;letter-spacing:.4px}
  .redhead .seal{width:50px;height:50px;flex:0 0 50px;font-size:12.5px}
  .redhead .catwrap,.redhead .bosswrap,.redhead .mailwrap{margin-left:0}
  .redhead .clock,
  .redhead .back{flex:1 1 100%;margin-left:0;padding-top:11px;
    border-top:1px dashed var(--line,#232b36)}
  .redhead .clock{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;text-align:left}
  .redhead .clock .t{font-size:19px}
  .redhead .clock .status{margin-top:0;justify-content:flex-start}
  .redhead .back{justify-content:flex-start;gap:7px}
  .redhead .back a{font-size:12.5px;padding:7px 12px}

  /* 卡片与表格密度收紧 */
  .card{border-radius:12px;padding:16px 15px}
  .foot{font-size:11.5px;line-height:1.8}
  .ticker .track{font-size:12px}
}

/* —— 表格：小屏可横向滑动，不再撑破页面 —— */
@media (max-width:700px){
  .tablecard,.tblwrap,.tablewrap,.card:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .tablecard table,.tblwrap table,.tablewrap table{min-width:100%}
  table{font-size:12.5px}
  thead th,tbody td{padding:9px 10px}
  th,td{padding:9px 10px}
}

/* —— 弹窗：再矮的屏幕也能完整看到、内部滚动 —— */
.mask{padding:16px}
.mask .modal,.mask .modalbox{
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* —— 极窄屏（老手机 / 320px 级）：宽网格并为一列 —— */
@media (max-width:380px){
  body{padding:16px 10px 42px}
  .cards,.invgrid,.shopgrid,.bag,.sysgrid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .legend{grid-template-columns:1fr}
  .stat .v,.sv{font-size:21px}
  .row{flex-wrap:wrap}
  .row>div{flex:1 1 100%}
  .btns{flex-wrap:wrap}
  .btns button{flex:1 1 100%}
}

/* —— 触屏设备：输入字号 ≥16px（防 iOS 聚焦自动放大）、点按目标加高 —— */
@media (pointer:coarse){
  input,select,textarea{font-size:16px}
  button{min-height:40px}
  .chip,.sbtn,.tbtn,.abtn,.buybtn{min-height:38px}
  a.pbtn,a.bossgo,a.mailgo{min-height:36px}
  .frow,.reqrow{min-height:44px}
}

/* —— 会话输入（好友私信）：窄屏改为上下两行 —— */
@media (max-width:480px){
  .chatform{flex-wrap:wrap}
  .chatform textarea{flex:1 1 100%}
  .chatform .sendwrap{flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between}
}

/* —— 超宽屏（≥1600px）：留白稍宽，阅读行长不变 —— */
@media (min-width:1600px){
  body{padding-top:36px;padding-bottom:72px}
  .card{padding:22px 26px}
}