/* 攻略互动块(5.6.0,guide_blocks.py → to_html 的 <div class="gdx" data-gdx>):网站正文页与后台预览共用。
   排版照可交互样机(Steven 1007「方向大体是对的」);颜色只走 theme.css 令牌,深浅两档自动成立。
   三兵种色:盾 = 蓝、矛 = 黄、射 = 红(hue 令牌);选中态 = 淡橙底(一屏一颗实心橙留给主按钮)。
   1008 起网站攻略正文页另加载 guides-3f.css 换成小程序 3F 一套(兵种色 盾蓝 / 矛橙 / 射绿、选中 = 冰蓝 → 靛紫);本文件的配色只剩站长后台编辑页的预览在用。 */
.gdx { margin: 12px 0 14px; padding: 12px 12px 13px; border-radius: 12px; background: var(--well-soft); border: 1px solid var(--hair);
  --gx-s: var(--hue-blue); --gx-l: var(--hue-yellow); --gx-m: var(--hue-red); font-size: 13px; line-height: 1.6; color: var(--text); }
.gdx[hidden] { display: none; }
.gdx table { min-width: 0; }
.gdx-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--dim); letter-spacing: .06em; margin-bottom: 8px; }
.gdx-h .n { margin-left: auto; font-weight: 700; letter-spacing: 0; color: var(--dim-lo); font-variant-numeric: tabular-nums; }
.gdx-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.gdx-chip { border: 1px solid var(--line-hi); background: var(--card); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; min-height: 0; width: auto; }
.gdx-chip.on { background: var(--ember-bg); border-color: var(--ember-line); color: var(--ember-text); }
.gdx-chip:focus-visible, .gdx-seg button:focus-visible, .gdx-pin:focus-visible, .gdx-node:focus-visible, .gdx-rh:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.gdx-seg { display: flex; background: var(--card); border: 1px solid var(--hair); border-radius: 9px; padding: 3px; gap: 2px; margin-bottom: 6px; }
.gdx-seg button { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 12.5px; padding: 5px 0; border-radius: 7px; color: var(--dim); cursor: pointer; white-space: nowrap; min-height: 0; width: auto; }
.gdx-seg button.on { background: var(--well-soft); color: var(--snow); font-weight: 700; box-shadow: inset 0 0 0 1px var(--line-hi); }
.gdx-num { font-variant-numeric: tabular-nums; }
.gdx-dim { color: var(--dim); font-size: 12px; }
.gdx .c-s { color: var(--gx-s); } .gdx .c-l { color: var(--gx-l); } .gdx .c-m { color: var(--gx-m); }
.gdx-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.gdx-row > .k { width: 4.4em; flex: none; color: var(--dim); font-size: 12px; font-weight: 700; }
.gdx-row > b { width: 5.4em; flex: none; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--snow); }
.gdx input[type=number] { width: 7em; min-height: 0; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line-hi); background: var(--card); color: var(--snow); font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
.gdx input[type=range] { flex: 1; min-width: 120px; min-height: 0; padding: 0; accent-color: var(--ember); }
/* 滑杆一行:标签 + 滑杆 + 数值不换行(数值贴右);不认 :has 的老浏览器退回可换行 */
.gdx-row:has(> input[type=range]) { flex-wrap: nowrap; }
.gdx-row:has(> input[type=range]) > input[type=range] { min-width: 0; width: auto; }

/* 配比条 */
.gdx-rbar { position: relative; height: 34px; margin: 12px 11px 6px; border-radius: 9px; display: flex; touch-action: none; user-select: none; }
.gdx-rseg { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: var(--bg); transition: width .18s ease; overflow: hidden; white-space: nowrap; }
.gdx-rseg:first-child { border-radius: 9px 0 0 9px; } .gdx-rseg:nth-child(3) { border-radius: 0 9px 9px 0; }
.gdx-rseg.s { background: var(--gx-s); } .gdx-rseg.l { background: var(--gx-l); } .gdx-rseg.m { background: var(--gx-m); }
.gdx-rh { position: absolute; top: -5px; width: 22px; height: 44px; margin-left: -11px; padding: 0; min-height: 0; border-radius: 8px; background: var(--card); border: 2px solid var(--snow); cursor: ew-resize; transition: left .18s ease; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.gdx-rh::after { content: ""; position: absolute; left: 7px; top: 13px; width: 4px; height: 14px; border-left: 1.5px solid var(--dim); border-right: 1.5px solid var(--dim); }
.gdx-rbar.drag .gdx-rseg, .gdx-rbar.drag .gdx-rh { transition: none; }
.gdx-rout { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; }
.gdx-rout > div { flex: 1 1 0; min-width: 0; padding: 6px 4px; border-radius: 9px; background: var(--card); border: 1px solid var(--hair); text-align: center; }
.gdx-rout b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--snow); }
.gdx-rout span { font-size: 11.5px; font-weight: 700; }

/* 加成合成 */
.gdx-eq { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding: 10px 6px; border-radius: 10px; background: var(--card); border: 1px solid var(--hair); font-variant-numeric: tabular-nums; }
.gdx-eq .t { padding: 2px 8px; border-radius: 7px; background: var(--well-soft); font-weight: 700; }
.gdx-eq .t.g { background: var(--ok-bg); color: var(--ok); }
.gdx-eq .res { font-size: 19px; font-weight: 800; color: var(--ember-text); }

/* 兵种克制 */
.gdx-tri { position: relative; width: 100%; max-width: 300px; margin: 6px auto 0; aspect-ratio: 1 / .88; }
.gdx-tri svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gdx-node { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; min-height: 0; border-radius: 50%; border: 2px solid currentColor; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; font: inherit; font-size: 17px; font-weight: 800; line-height: 1.2; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.gdx-node small { font-size: 10px; font-weight: 700; color: var(--dim); }
.gdx-node.on { transform: scale(1.1); box-shadow: 0 0 0 5px var(--ice-bg); }
.gdx-node.fade { opacity: .45; }
.gdx-cap { text-align: center; font-size: 13.5px; font-weight: 700; min-height: 1.7em; margin-top: 4px; }
.gdx-cap .up { color: var(--ok); } .gdx-cap .dn { color: var(--danger); }
.gdx-arrow { stroke-width: 2.5; fill: none; transition: stroke .15s ease, opacity .15s ease; }
.gdx-arrow.base { stroke: var(--line-hi); } .gdx-arrow.win { stroke: var(--ok); } .gdx-arrow.lose { stroke: var(--danger); }
.gdx-arrow.off { opacity: .3; stroke-dasharray: 5 5; }
.gdx-ah-base { fill: var(--line-hi); } .gdx-ah-win { fill: var(--ok); } .gdx-ah-lose { fill: var(--danger); }

/* 兵种技能 */
.gdx-sk { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.gdx .gdx-sk li { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 7px 9px; border-radius: 9px; background: var(--card); border: 1px solid var(--hair); line-height: 1.5; transition: opacity .15s ease; }
.gdx-sk li .g { flex: none; min-width: 3.2em; font-size: 11.5px; font-weight: 800; padding: 1px 4px; border-radius: 6px; text-align: center; background: var(--ok-bg); color: var(--ok); white-space: nowrap; }
.gdx-sk li.off { opacity: .42; } .gdx-sk li.off .g { background: var(--well-soft); color: var(--dim); }

/* 宠物主动技能 */
.gdx-petv { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 4px; }
.gdx-petv b { font-size: 26px; font-weight: 800; color: var(--ember-text); font-variant-numeric: tabular-nums; }
.gdx-steps { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: 6px; }
.gdx-steps i { flex: 1; border-radius: 3px 3px 0 0; background: var(--line-hi); transition: background .15s ease; cursor: pointer; }
.gdx-steps i.on { background: var(--ember); }

/* 数据条 */
.gdx-bars { display: flex; flex-direction: column; gap: 6px; }
.gdx-bar { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; border-radius: 7px; padding: 2px 0; }
.gdx-bar .k { flex: none; width: 5.6em; }
.gdx-bar .tr { flex: 1; min-width: 0; height: 12px; border-radius: 6px; background: var(--card); border: 1px solid var(--hair); overflow: hidden; }
.gdx-bar .fl { display: block; height: 100%; background: var(--line-hi); border-radius: 6px; transition: background .15s ease; }
.gdx-bar .v { flex: none; width: 4.6em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.gdx-bar.on .fl { background: var(--ice); } .gdx-bar.on .k, .gdx-bar.on .v { color: var(--ice); }

/* 对战模拟 */
.gdx-sd { padding: 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--hair); margin-top: 8px; }
.gdx-sd-h { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 13.5px; color: var(--snow); }
.gdx-sd .gdx-row { margin: 6px 0; }
.gdx-vd { margin-top: 10px; padding: 11px 10px; border-radius: 10px; text-align: center; border: 1px solid var(--hair); background: var(--card); }
.gdx-vd b { display: block; font-size: 21px; font-weight: 800; color: var(--dim); }
.gdx-vd.win b { color: var(--ok); } .gdx-vd.lose b { color: var(--danger); }
.gdx-rem { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 6px; }
.gdx-rem .who { flex: none; width: 2.6em; font-weight: 700; color: var(--dim); }
.gdx-rem .k { flex: none; width: 1.4em; font-weight: 800; }
.gdx-rem .tr { position: relative; flex: 1; min-width: 0; height: 10px; border-radius: 5px; background: var(--well-soft); border: 1px solid var(--hair); overflow: hidden; }
.gdx-rem .fl { position: relative; display: block; height: 100%; transition: width .2s ease; }
/* 回放时这一步掉的那一截:同色淡一档,接在剩余条后面(只在中途的点有宽度) */
.gdx-rem .lo { position: absolute; top: 0; height: 100%; min-width: 4px; opacity: .45; }
.gdx-rem .lo[hidden] { display: none; }
.gdx-rem .lo.s { background: var(--gx-s); } .gdx-rem .lo.l { background: var(--gx-l); } .gdx-rem .lo.m { background: var(--gx-m); }
/* 「回合」左边的播放钮:冰蓝圆底 + 边框画的三角 / 两竖(放的时候) */
.gdx-play { flex: none; width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line-hi); background: var(--ice-bg); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.gdx-play i { width: 0; height: 0; margin-left: 2px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--ice); }
.gdx-play.on i { width: 9px; height: 10px; margin-left: 0; box-sizing: border-box; border-width: 0 3px; border-color: transparent var(--ice); }
.gdx-play:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.gdx-row.rounds > .k { width: auto; }
.gdx-rem .fl.s { background: var(--gx-s); } .gdx-rem .fl.l { background: var(--gx-l); } .gdx-rem .fl.m { background: var(--gx-m); }
.gdx-rem .v { flex: none; width: 5.2em; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.gdx-side-t { margin-top: 10px; font-size: 12px; font-weight: 800; color: var(--dim); }
.gdx-lnk { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: var(--ice-bg); border: 1px solid var(--line-hi); color: var(--ice); font-weight: 700; font-size: 13.5px; text-decoration: none; }

/* 翻页图 + 图上标注 */
.gdx-car { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; scrollbar-width: none; border-radius: 10px; }
.gdx-car::-webkit-scrollbar { display: none; }
.gdx-slide { flex: 0 0 100%; scroll-snap-align: center; position: relative; }
.gdx .gdx-slide img { display: block; width: 100%; height: auto; margin: 0; border-radius: 10px; border: 1px solid var(--hair); cursor: zoom-in; }
.gdx-pin { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; min-height: 0; border-radius: 50%; border: 2px solid var(--card); background: var(--ember); color: var(--on-ember); font: inherit; font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.gdx-tip { position: absolute; transform: translate(-50%, -100%); margin-top: -18px; padding: 4px 9px; border-radius: 8px; background: var(--snow); color: var(--bg); font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.gdx-car-f { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--snow); }
.gdx-dots { display: flex; gap: 5px; } .gdx-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-hi); cursor: pointer; } .gdx-dots i.on { background: var(--ember); width: 16px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .gdx * { transition: none !important; } }