/* ====================================================
   游戏攻略页样式
   移植自 5pk999 的 .game-intro 模块，适配 180cq 风格
   ==================================================== */

/* ============ 顶部小图标题（替代原 banner 大图模块） ============ */
.guide-page-title {
    font-family: "STXingkai", "华文行楷", serif;
    font-size: 40px;
    color: var(--color-gold-bright);
    text-shadow: 0 0 16px var(--color-fire), 0 0 30px var(--color-blood), 1px 1px 0 #000;
    letter-spacing: 6px;
    margin: 28px auto 8px;
    text-align: center;
    line-height: 1.2;
}
/* ============ 攻略主区（顶部间距压缩以便板块整体上移） ============ */
.guide-main {
    padding: 0 20px 80px;
}

/* ============ 攻略按钮导航（1:1 复刻 127.0.0.1_88 / 5pk999 的 .game-intro 模块） ============
   规则：
   - 外层 1280px；内层 1377×428 用 bg-yxjs.png 做大框架，scale(0.93) 缩放到 1280
   - 8 个 intro 按钮用 333×171，float:left + 与参考站一致的 padding-top/left 对齐到框架里
   - 每张 intro-*.png 是 333×342 的"双帧图"：上半 171 默认、下半 171 hover
   - hover / active 时 background-position: 0 -171px 切到下半帧，实现主显示 / 移上显示 双状态
*/
.guide-intro {
    width: 100%; max-width: 1280px;
    height: auto;
    margin: 0 auto 0;
    overflow: visible;
}
.guide-intro-inner {
    width: 1377px;
    height: 428px;
    padding: 62px 0 0 16px;
    box-sizing: border-box;
    background: url("../images/bg-yxjs.png") no-repeat 50% 50%;
    background-size: 100% 100%;
    transform: scale(0.93);
    transform-origin: top left;
    overflow: hidden;
    position: relative;
}
.guide-intro-item {
    display: block;
    float: left;
    width: 333px;
    height: 171px;
    margin: 0 3px 0 0;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: auto;
    text-indent: -9999px;
    overflow: hidden;
    color: transparent;
    outline: none;
    text-decoration: none;
    transition: background-position 0.18s ease-out;
    cursor: pointer;
}
.guide-intro-item:hover,
.guide-intro-item.active {
    background-position: 0 -171px;  /* 切换到 intro-*.png 的下半帧（hover / 选中态） */
}
.guide-intro-item.active {
    /* 选中时再加一圈淡淡的金色外描边，与内容区域联动 */
    box-shadow: 0 0 0 2px rgba(255, 217, 107, 0.55), 0 0 18px rgba(255, 107, 26, 0.45);
    position: relative;
    z-index: 2;
}

/* 8 个按钮各自的背景图（素材已经是 333×342 双帧 png） */
.item-bbjs { background-image: url('../images/intro-bbjs.png'); }.item-sjjy { background-image: url('../images/intro-sjjy.png'); }
.item-zjkf { background-image: url('../images/intro-zjkf.png'); }
.item-gwbl { background-image: url('../images/intro-gwbl.png'); }
.item-tswf { background-image: url('../images/intro-tswf.png'); }
.item-zbzs { background-image: url('../images/intro-zbzs.png'); }
.item-ycdt { background-image: url('../images/intro-ycdt.png'); }
.item-bssx { background-image: url('../images/intro-bssx.png'); }

/* ============ 攻略内容显示区（宽度与上方按钮模块内层 1377px 严格对齐，顶部紧贴上模块底部，同样 scale 缩到视口） ============ */
.guide-content-wrap {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 0 0 8px 8px;
    border-top: none;
    width: 1377px;
    padding: 28px 40px;
    min-height: 500px;
    box-sizing: border-box;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6);
    transform: scale(0.93);
    transform-origin: top left;
    position: relative;
    /* scale 不减少文档流占位（inner 428×0.93≈398 视觉高，但 DOM 占位仍 428）
       这里用负 margin-top = 内框高 428 × (1-0.93) ≈ 30  把内容块拉上去，贴着按钮底 */
    margin-top: calc(428px * (0.93 - 1));
}
.guide-pane { display: none; animation: fadeIn 0.4s; }
.guide-pane.active { display: block; }

.pane-title {
    font-family: "STXingkai", "华文行楷", serif;
    color: var(--color-gold-bright);
    font-size: 36px;
    text-align: center;
    text-shadow: 0 0 12px var(--color-blood), 2px 2px 0 #000;
    letter-spacing: 6px;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--color-border);
}
.pane-content {
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.9;
}
.pane-content h3 {
    color: var(--color-fire);
    font-size: 22px;
    margin: 20px 0 14px;
    font-family: "STXingkai", "华文行楷", serif;
    letter-spacing: 3px;
}
.pane-content h4 {
    color: var(--color-gold-bright);
    font-size: 17px;
    margin: 18px 0 10px;
    padding-left: 12px;
    border-left: 3px solid var(--color-blood);
}
.pane-content p {
    margin: 10px 0;
    color: var(--color-text);
}
.pane-content ul {
    margin: 10px 0 10px 24px;
}
.pane-content ul li {
    list-style: disc;
    margin: 6px 0;
    color: var(--color-text);
}

.guide-table {
    width: 100%; border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
}
.guide-table th {
    background: linear-gradient(180deg, #2a1010 0%, #150505 100%);
    color: var(--color-gold-bright);
    padding: 12px 14px; text-align: left;
    border-bottom: 2px solid var(--color-blood);
    letter-spacing: 1px;
}
.guide-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}
.guide-table tr:hover td { background: rgba(139,0,0,0.15); }

.feature-block {
    margin: 18px 0; padding: 16px 20px;
    background: rgba(20,5,5,0.5);
    border-left: 3px solid var(--color-fire);
    border-radius: 4px;
}
.feature-block h4 {
    margin-top: 0 !important;
    color: var(--color-fire) !important;
    border-left: none !important;
    padding-left: 0 !important;
}
.feature-block p { margin-bottom: 0; }

.pane-tip {
    margin-top: 24px !important;
    padding: 12px 16px;
    background: rgba(201,169,97,0.1);
    border: 1px dashed var(--color-gold);
    border-radius: 4px;
    color: var(--color-text-dim) !important;
    font-size: 13px !important;
    line-height: 1.7;
}
.pane-tip a { color: var(--color-gold-bright); text-decoration: underline; }

.guide-footer-tip {
    text-align: center; color: var(--color-text-dim);
    margin-top: 40px; font-size: 13px; line-height: 1.8;
}

/* ============ 响应式 ============
   攻略 8 按钮模块是像素级对齐「bg-yxjs.png 大框架 + 333×171 双帧按钮」的固定布局，
   不再切换为 grid（grid 会彻底破坏按钮与外框空洞的像素对齐）。
   改为整体 transform 缩放到视口宽度，保证桌面 / 窄屏都能完整显示。
*/
@media (max-width: 1280px) {
    .guide-intro-inner {
        /* 1377 * 0.93 = 1280，视口 < 1280 再缩到 0.75 以便 1024 屏能完整显示 */
        transform: scale(0.75);
    }
    .guide-content-wrap { transform: scale(0.75); margin-top: calc(428px * (0.75 - 1)); }
}
@media (max-width: 1024px) {
    .guide-intro-inner { transform: scale(0.60); }
    .guide-content-wrap { transform: scale(0.60); padding: 24px 18px; margin-top: calc(428px * (0.60 - 1)); }
    .guide-page-title { font-size: 34px; }
    .pane-title { font-size: 28px; }
}
@media (max-width: 820px) {
    .guide-intro-inner { transform: scale(0.50); transform-origin: top center; }
    .guide-content-wrap { transform: scale(0.50); transform-origin: top center; margin-top: calc(428px * (0.50 - 1)); }
    .guide-page-title { font-size: 30px; letter-spacing: 4px; }
}
@media (max-width: 640px) {
    .guide-intro-inner { transform: scale(0.42); transform-origin: top center; }
    .guide-content-wrap { transform: scale(0.42); transform-origin: top center; margin-top: calc(428px * (0.42 - 1)); }
    /* 窄屏下按钮尺寸由 scale 控制，不再改 w/h（保持双帧图对齐） */
    .guide-page-title { font-size: 26px; letter-spacing: 4px; margin: 16px auto 4px; }
    .pane-title { font-size: 22px; }
    .pane-content { font-size: 14px; }
    .guide-table { font-size: 12px; }
    .guide-table th, .guide-table td { padding: 8px 6px; }
}
}