/* ═══════════════════════════════════════════════════════════
   斯佩酱不玩赛马娘攻略组 · 全站共用主题（全屏适配版）
   新页面（赛道数据 / 相性计算）直接用；旧页面保留自身样式，
   只借用下面的尺寸变量，避免相互覆盖。
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink:#1c2030; --muted:#8a93a8; --sub:#5a6480;
  --line:#e3e8f1; --line2:#eef2f9; --bg:#eef1f6; --card:#fbfcff;
  --pink:#d94f7e; --pink2:#e8547c; --pink3:#fdf1f5;
  --orange:#f3b34e; --teal:#12a1a1;
  --acc:#c4457a; --accbg:#ffeff4;
  --spd:#3f6fd8; --spdbg:#eef4ff;
  --shell:1880px;
}

/* ── 页面外壳：全屏宽度 + 居中 ── */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body.pg{
  width:100%;max-width:var(--shell);margin:0 auto;background:#fff;color:var(--ink);
  font-size:15px;line-height:1.6;
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  box-shadow:0 0 0 1px var(--line),0 12px 40px rgba(31,45,74,.08);
  min-height:100vh;
}

/* ── 页头：赛马娘渐变 ── */
.pghead{
  background:linear-gradient(110deg,#d94f7e 0%,#ef8aa8 38%,#f3b34e 66%,#12a1a1 100%);
  color:#fff;border-radius:0 0 20px 20px;padding:18px 26px 14px;
  box-shadow:0 6px 18px rgba(31,45,74,.12);
}
.pghead h1{font-size:32px;letter-spacing:.5px;text-shadow:0 2px 0 rgba(0,0,0,.10)}
.pghead p{font-size:14px;margin-top:5px;opacity:.95}

.pgwrap{padding:16px 22px 32px}

/* ── 区块标题 ── */
.sec{margin-bottom:18px}
.sec h2{
  font-size:19px;border-left:7px solid var(--pink2);padding:3px 0 3px 11px;margin-bottom:10px;
  background:linear-gradient(90deg,var(--pink3),rgba(253,241,245,0));border-radius:0 8px 8px 0;
}
.sec h2 small{font-size:13px;font-weight:400;color:var(--muted)}

/* ── 卡片 / 表格 / 标签 ── */
.card{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:12px 15px}
.card>.t{font-size:14.5px;font-weight:700;color:#2f3b58;margin-bottom:7px}
table{width:100%;border-collapse:collapse;font-size:13.5px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
th{background:#f4f7fc;color:#3b4763;font-size:12.5px;padding:7px 10px;text-align:left;font-weight:700}
td{border-top:1px solid var(--line2);padding:7px 10px}
td.n{font-family:ui-monospace,Consolas,monospace;font-weight:700;color:#22304d}
.chip{display:inline-block;background:#f4f7fc;border:1px solid var(--line);border-radius:9px;padding:4px 12px;font-size:13.5px;margin:0 7px 7px 0}
.chip b{color:var(--acc)}
.tag{display:inline-block;font-size:11.5px;border-radius:6px;padding:1px 8px;background:#f2f6fc;border:1px solid #dfe8f5;color:#3b4763;margin:0 4px 4px 0}
.sub{font-size:12.5px;color:var(--muted)}
.note{border:1px solid #f0e3b6;background:#fffdf3;border-radius:12px;padding:9px 13px;font-size:12.8px;color:#8a6a1a;line-height:1.75}

/* ── 技能小牌 ── */
.sk{display:inline-flex;align-items:center;gap:6px;border:1px solid #dde3ef;border-radius:8px;
  padding:2px 10px 2px 3px;margin:0 5px 5px 0;font-size:13px;background:#fff;vertical-align:middle}
.sk.acc{background:var(--accbg);border-color:#f6cfe0}
.sk.spd{background:var(--spdbg);border-color:#cfdef7}
.sk .ico{width:21px;height:21px;border-radius:5px;display:block;flex:0 0 auto}
.sk img.ava2{width:23px;height:23px;border-radius:6px;object-fit:cover;flex:0 0 auto}
.sk .v{font-family:ui-monospace,Consolas,monospace;color:var(--muted);font-size:11.5px;margin-left:3px}

/* ── 大屏再加一档字号（全屏适配） ── */
@media (min-width:1700px){
  body.pg{font-size:15.5px}
  .pghead h1{font-size:35px}
  .pghead p{font-size:14.5px}
  .sec h2{font-size:20.5px}
  table{font-size:14px}
  .chip{font-size:14px}
}
@media (max-width:1240px){
  .pgwrap{padding:14px 14px 26px}
}

/* ═══════════════════════════════════════════════════════════
   手机适配（≤820px）
   ═══════════════════════════════════════════════════════════ */
@media (max-width:820px){
  /* 兜底：手机上不让任何元素把页面撑宽，需要横滚的区块自己带 overflow-x */
  html,body{overflow-x:hidden}
  .pghead h1,.pghead p,.sec h2,.card,.note,.sub{overflow-wrap:anywhere}
  body.pg{font-size:14.5px}
  .pghead{border-radius:0 0 14px 14px;padding:14px 16px 12px}
  .pghead h1{font-size:23px;letter-spacing:0}
  .pghead p{font-size:12.5px;margin-top:4px}
  .pgwrap{padding:12px 12px 26px}
  .sec{margin-bottom:14px}
  .sec h2{font-size:16.5px;border-left-width:5px;padding-left:9px}
  .sec h2 small{font-size:12px;display:block;margin-top:3px}
  .card{padding:11px 12px}

  /* 表格：整体横向滚动，不压扁 */
  .twrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{font-size:13px}
  th,td{padding:6px 8px;white-space:nowrap}

  /* 侧栏式布局一律堆叠 */
  .cols,.grid2{grid-template-columns:1fr !important}
  .row2,.row5,.g5,.tot,.mini,.hz,.cwgrid,.supgrid,.cards{grid-template-columns:1fr !important}
  .grid{grid-template-columns:repeat(2,1fr) !important}
  .row5,.g5{grid-template-columns:1fr 1fr !important}
  /* 表格整块横向滚动 */
  #seg,#segs,.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #seg table,#segs table{min-width:520px}
  /* 输入框不要撑破两列布局 */
  input,select,textarea{min-width:0;max-width:100%}

  /* 图：容器横向滚动，图保持可读尺寸 */
  .dgm{padding:8px 10px 4px}
  .dgm svg{min-width:760px}
  .big{font-size:30px}
  .chip{font-size:12.5px;padding:3px 9px}
  .sk{font-size:12.5px}
  .sk .v{font-size:11px}
}
@media (max-width:480px){
  .pghead h1{font-size:20px}
  .row5,.g5{grid-template-columns:1fr !important}
}