/* ==========================================================================
   传承模拟器 —— 样式表 styles.css
   主题：魔兽世界无限（WoW Forever）金色羊皮纸
   配色取自原站 CSS 变量（--wow-classic-*）的「无限」色板。
   所有图片资源均为本地相对路径，页面不请求任何外部站点。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 主题变量
   -------------------------------------------------------------------------- */
:root {
    --paper: #f8efdc;
    --paper-light: #fbf4e2;
    --rule: #d6c8ae;
    --ink: #201a12;
    --ink-soft: #4d4539;
    --muted: #6d6558;
    --record-ink: #29231b;
    --archive-data-ink: #454137;
    --ledger-rule-strong: #a98955;
    --detail-muted: #575148;

    --accent: #a4772f;
    --accent-active: #c08014;
    --accent-deep: #7e5d24;
    --action-start: #91631f;
    --action-end: #73501c;

    --forest: #29411e;
    --recipe-green: #2e642b;
    --danger: #8e2f22;
    --danger-hover: #a83829;
    --gold: #ffd100;

    --font-ui: "Roboto Condensed", "Arial Narrow", "Microsoft YaHei", "PingFang SC", sans-serif;
    --font-display: "Cormorant Garamond", Georgia, "Songti SC", "SimSun", serif;
    --font-reading: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;

    --radius: 8px;
    --panel-gap: 20px;
    --sidebar-w: 300px;
    --header-divider: url(images/header-divider.webp);
    --emblem-ring: url(images/emblem-ring.webp);
    --points-box: url(images/points-box.webp);
    --icon-frame: url(images/icon-frame.webp);
    --icon-frame-yellow: url(images/icon-frame-yellow.webp);
    --tree-divider: url(images/divider-vertical.webp);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background-color: var(--paper);
    color: var(--ink);
    font: 500 15px/1.65 var(--font-reading);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
ol, ul, dl { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }

.page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 40px 20px 72px;
}

/* --------------------------------------------------------------------------
   2. 页头
   -------------------------------------------------------------------------- */
.page-eyebrow {
    margin-bottom: 8px;
    color: var(--accent-deep);
    font: 700 12px/1 var(--font-ui);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.page-title {
    font-size: clamp(38px, 6vw, 64px);
    line-height: 1.02;
    color: var(--ink);
}

.page-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 14px;
}

.page-stats li {
    padding: 5px 12px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-light);
    color: var(--accent-deep);
    font: 700 13px/1.3 var(--font-ui);
}

.page-desc {
    max-width: 76ch;
    color: var(--ink-soft);
    font-size: 15.5px;
}

/* --------------------------------------------------------------------------
   3. 通用区块
   -------------------------------------------------------------------------- */
.section { margin-top: 46px; }

.section-title {
    margin-bottom: 6px;
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.1;
    color: var(--ink);
}

.section-sub {
    max-width: 78ch;
    margin-bottom: 16px;
    color: var(--muted);
    font: 500 13.5px/1.6 var(--font-reading);
}

/* 如何获得专长 */
.how-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.how-step {
    padding: 16px 18px 18px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper-light);
}

.how-index {
    display: block;
    margin-bottom: 6px;
    color: var(--accent);
    font: 700 12px/1 var(--font-ui);
    letter-spacing: .14em;
}

.how-step h3 {
    margin-bottom: 5px;
    font-size: 19px;
    color: var(--ink);
}

.how-step p { color: var(--ink-soft); font-size: 14px; }

/* 关键事实 */
.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 20px;
    border-top: 1px solid var(--ledger-rule-strong);
}

.facts-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--rule);
}

.facts-row dt {
    color: var(--muted);
    font: 700 12.5px/1.5 var(--font-ui);
    letter-spacing: .04em;
}

.facts-row dd {
    margin: 0;
    color: var(--record-ink);
    font: 700 13.5px/1.5 var(--font-ui);
    text-align: right;
}

/* --------------------------------------------------------------------------
   4. 专长规划工作台
   -------------------------------------------------------------------------- */
.workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    align-items: start;
    gap: var(--panel-gap);
    margin-top: 12px;
}

.side {
    grid-area: 1 / 2;
    display: grid;
    gap: 12px;
    position: sticky;
    top: 16px;
}

.plan-strip {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper-light);
    overflow: hidden;
}

.build-points {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}

.build-points-value {
    color: var(--accent-deep);
    font: 600 46px/1 var(--font-ui);
    font-variant-numeric: tabular-nums;
}

.build-points-value.is-zero { color: var(--recipe-green); }
.build-points-value.is-empty { color: var(--accent-deep); }

.build-points-meta { display: grid; gap: 3px; }

.build-points-label {
    color: var(--muted);
    font: 700 11.5px/1.2 var(--font-ui);
    letter-spacing: .06em;
}

.build-split {
    color: var(--ink);
    font: 600 13px/1.3 var(--font-ui);
    font-variant-numeric: tabular-nums;
}

.build-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 18px 16px;
}

.mode-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 1px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--paper);
}

.mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 40px;
    padding: 5px 10px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--muted);
    font: 700 14px/1 var(--font-ui);
    cursor: pointer;
}

.mode-btn:hover { background: rgba(255, 255, 255, .5); color: var(--ink); }

.mode-btn.is-active[data-mode="add"] { background: var(--forest); color: #fff; }
.mode-btn.is-active[data-mode="add"]:hover { background: var(--recipe-green); }
.mode-btn.is-active[data-mode="remove"] { background: var(--danger); color: #fff; }
.mode-btn.is-active[data-mode="remove"]:hover { background: var(--danger-hover); }

.mode-icon { font-weight: 800; }

.action-btn {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink-soft);
    font: 700 13px/1.3 var(--font-ui);
    cursor: pointer;
}

.action-btn:hover { color: var(--ink); border-color: var(--ledger-rule-strong); }

.action-btn.is-on {
    border-color: var(--accent);
    background: rgba(164, 119, 47, .14);
    color: var(--accent-deep);
}

.action-primary {
    border: 0;
    background: linear-gradient(180deg, var(--action-start), var(--action-end));
    color: #fff;
}

.action-primary:hover { color: #fff; filter: brightness(1.08); }

.build-note {
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    background: var(--paper-light);
    color: var(--ink-soft);
    font: 500 13px/1.55 var(--font-reading);
}

.build-note.is-warn {
    border-left-color: var(--danger);
    color: var(--danger);
}

.build-note[hidden] { display: none; }

/* --------------------------------------------------------------------------
   5. 移动端系别切换
   -------------------------------------------------------------------------- */
.mobile-tabs { display: none; }

.mobile-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    font: 700 14px/1 var(--font-ui);
    cursor: pointer;
}

.mobile-tab.is-active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.mobile-tab-emblem { display: block; width: 22px; height: 22px; }
.mobile-tab-points { color: var(--accent-deep); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   6. 天赋树
   -------------------------------------------------------------------------- */
.trees {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: #100d09;
    overflow: hidden;
}

.tree-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    container-type: inline-size;
}

/* 注意：容器查询单位 cqi 必须由「容器内部的后代」解析。
   若把 --cell 写在 .tree-panel 自身，cqi 会退回视口尺寸而非面板宽度，
   三列面板就会按整屏宽度算格子而溢出。故查询上下文由 .tree-panel 建立，
   --cell 声明在其余后代元素上，再向下继承。 */
.tree-bg,
.tree-header,
.tree-body {
    --cell: clamp(50px, 21cqi, 86px);
    --frame: calc(var(--cell) * .74);
}

.tree-body { padding-bottom: calc(var(--cell) * .5); }

.tree-panel + .tree-panel::before {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--tree-divider) 50% / 100% 100% no-repeat;
    pointer-events: none;
}

.tree-bg {
    position: absolute;
    z-index: -1;
    top: calc(var(--cell) * .1);
    left: 50%;
    width: calc(var(--cell) * 5.2);
    height: calc(var(--cell) * 8.4);
    transform: translateX(-50%);
    background: url(images/tree-background.jpg) no-repeat;
    background-size: 100% 100%;
    filter: brightness(62%);
    pointer-events: none;
}

.tree-header {
    position: relative;
    width: calc(var(--cell) * 4);
    height: calc(var(--cell) * 1.6);
    margin: 0 auto calc(var(--cell) * .1);
}

.tree-header::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(var(--cell) * .02);
    width: 88cqi;
    max-width: 100%;
    height: calc(var(--cell) * .6);
    transform: translateX(-50%);
    background: var(--header-divider) 50% / 100% 100% no-repeat;
    pointer-events: none;
}

.tree-emblem {
    position: absolute;
    top: calc(var(--cell) * .3);
    left: calc(var(--cell) * .45);
    width: calc(var(--cell) * .9);
    height: calc(var(--cell) * .9);
}

.tree-emblem::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--emblem-ring) 50% / 100% 100% no-repeat;
}

.tree-emblem-art {
    position: absolute;
    inset: 18%;
    width: 64%;
    height: 64%;
    border-radius: 50%;
    object-fit: cover;
}

.tree-points {
    position: absolute;
    z-index: 1;
    top: 58%;
    left: 62%;
    display: grid;
    place-items: center;
    width: calc(var(--cell) * .38);
    height: calc(var(--cell) * .32);
    background: var(--points-box) 50% / 100% 100% no-repeat;
    color: var(--gold);
    font: 700 max(12px, calc(var(--cell) * .2)) / 1 var(--font-ui);
    font-variant-numeric: tabular-nums;
}

.tree-title {
    position: absolute;
    top: calc(var(--cell) * .8);
    left: calc(var(--cell) * 1.5);
    right: calc(var(--cell) * .4);
    transform: translateY(-50%);
    overflow: hidden;
    color: #fff;
    font-family: var(--font-display);
    font-size: max(16px, calc(var(--cell) * .3));
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .85);
}

.tree-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, var(--cell));
    grid-template-rows: repeat(var(--tier-rows, 4), var(--cell));
    justify-content: center;
}

.arrows-svg {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: calc(var(--cell) * 4);
    height: 100%;
    margin: 0 auto;
    pointer-events: none;
}

.arrow-shadow { fill: none; stroke: rgba(0, 0, 0, .75); stroke-width: 5; stroke-linecap: round; }
.arrow-line { fill: none; stroke: #48413d; stroke-width: 2.5; stroke-linecap: round; }
.arrow-head { fill: #48413d; stroke: rgba(0, 0, 0, .75); stroke-width: 1.5; stroke-linejoin: round; }
.arrow-group.is-active .arrow-line { stroke: var(--gold); }
.arrow-group.is-active .arrow-head { fill: var(--gold); }

/* 天赋格 */
.talent-cell {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.talent-btn {
    position: relative;
    width: var(--frame);
    height: var(--frame);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity .22s;
    user-select: none;
}

.talent-btn.is-locked { cursor: not-allowed; }
.talent-btn:focus-visible { outline: 3px solid var(--accent-active); outline-offset: 0; border-radius: 8px; }

.talent-frame {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.talent-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--icon-frame) center / 100% 100% no-repeat;
    filter: brightness(112%);
    transition: filter .15s;
}

.talent-frame.is-maxed::after { background: var(--icon-frame-yellow) center / 100% 100% no-repeat; }

.talent-icon {
    position: absolute;
    inset: 15%;
    width: 70%;
    height: 70%;
    object-fit: cover;
    display: block;
    transition: filter .15s;
}

.talent-icon-unknown {
    display: grid;
    place-items: center;
    border-radius: 4px;
    background: #16110d;
    color: #6b6259;
    font: 700 20px/1 var(--font-ui);
}

.talent-btn.is-locked .talent-icon-unknown { color: #4a443d; background: #100c09; }

.talent-btn.is-locked .talent-icon { filter: grayscale(1) contrast(30%) brightness(35%); }
.talent-btn.is-locked .talent-frame::after { filter: brightness(60%); opacity: .8; }
.talent-btn.is-available .talent-icon { filter: grayscale(1) brightness(85%); }
.talent-btn.is-invested .talent-icon { filter: none; }
.talent-btn.is-maxed .talent-icon { filter: none; }

.talent-btn.is-clickable:hover .talent-icon { filter: brightness(118%); }
.talent-btn.is-clickable:hover .talent-frame::after { filter: brightness(132%); }

.talent-rank {
    position: absolute;
    right: -2px;
    bottom: -2px;
    z-index: 2;
    min-width: 15px;
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(10, 8, 5, .9);
    color: #9a9186;
    font: 700 11px/15px var(--font-ui);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.talent-rank.is-on { color: var(--gold); }

.talent-cell.is-remove-mode .talent-btn.is-invested .talent-frame::after,
.talent-cell.is-remove-mode .talent-btn.is-maxed .talent-frame::after { filter: brightness(112%) hue-rotate(-18deg); }

/* 服务端预渲染的专长说明：对爬虫可见、对用户隐藏（悬浮用浮层显示） */
.talent-info {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   7. 天赋说明浮层
   -------------------------------------------------------------------------- */
.tooltip {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: min(340px, calc(100vw - 24px));
    max-height: 60vh;
    overflow: auto;
    padding: 12px 14px;
    border: 1px solid rgba(255, 209, 0, .35);
    border-radius: 8px;
    background: rgba(18, 14, 10, .97);
    color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s;
    pointer-events: none;
}

.tooltip.is-visible { opacity: 1; visibility: visible; }

.tt-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    color: #fff;
    font-size: 18px;
}

.tt-en {
    color: #9d9284;
    font: 600 11.5px/1 var(--font-ui);
    letter-spacing: .04em;
}

.tt-rank {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--gold);
    font: 700 12.5px/1.4 var(--font-ui);
}

.tt-req {
    padding: 1px 7px;
    border: 1px solid rgba(255, 209, 0, .3);
    border-radius: 999px;
    color: #d8cdb8;
    font-weight: 600;
}

.tt-ranks { display: grid; gap: 5px; }

.tt-ranks li {
    padding-left: 8px;
    border-left: 2px solid rgba(255, 255, 255, .14);
    color: #b8ad99;
    font: 500 12.5px/1.55 var(--font-reading);
}

/* 当前等级：金色实线标记 + 高亮文字 */
.tt-ranks li.is-current {
    border-left-color: rgba(255, 209, 0, .8);
    color: #fff;
}

/* 下一级：虚线标记 + 次级文字，与当前等级形成对照 */
.tt-ranks li.is-next {
    border-left-style: dashed;
    color: #9c9284;
}

.tt-hint {
    margin-top: 8px;
    color: #857c70;
    font: 500 11.5px/1.45 var(--font-ui);
}

.tt-locked { color: #9d9284; font-size: 13px; }

/* --------------------------------------------------------------------------
   8. 挑战清单
   -------------------------------------------------------------------------- */
.challenge-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-light);
    color: var(--ink-soft);
    font: 700 13px/1.3 var(--font-ui);
}

.chip b { color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.chip.is-all { border-color: var(--ledger-rule-strong); background: var(--paper); }

.clear-btn {
    margin-left: auto;
    min-height: 40px;
    padding: 6px 12px;
    border: 0;
    background: none;
    color: var(--accent-deep);
    font: 700 13.5px/1.3 var(--font-ui);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.clear-btn:disabled { color: var(--muted); text-decoration: none; cursor: default; }

.challenge-groups { display: grid; gap: 28px; }

.challenge-group { border-top: 1px solid var(--ledger-rule-strong); }

.band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font-size: 19px;
}

.band-count {
    color: var(--accent-deep);
    font: 700 13px/1 var(--font-ui);
    font-variant-numeric: tabular-nums;
}

.challenge-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0 28px;
}

.challenge-item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-height: 44px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font-size: 13.5px;
    cursor: pointer;
}

.challenge-item:hover { background: rgba(164, 119, 47, .06); }

.challenge-item input {
    width: 17px;
    height: 17px;
    margin: 3px 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.challenge-item.is-done span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--rule); }

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

.faq-card {
    padding: 14px 16px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper-light);
}

.faq-card h3 {
    margin-bottom: 7px;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.35;
}

.faq-card p { color: var(--ink-soft); font-size: 13.5px; }

/* --------------------------------------------------------------------------
   10. 页脚
   -------------------------------------------------------------------------- */
.page-foot {
    margin-top: 52px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font: 500 12.5px/1.7 var(--font-reading);
}

.noscript-note {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--paper-light);
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   11. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .workbench { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
    .side { display: contents; position: static; }
    .plan-strip { order: 1; }
    .mobile-tabs {
        order: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
        margin-bottom: 12px;
        padding: 3px;
        border: 1px solid var(--rule);
        border-radius: var(--radius);
        background: var(--paper-light);
    }
    .trees { order: 3; grid-template-columns: minmax(0, 1fr); }
    .tree-bg,
    .tree-header,
    .tree-body { --cell: clamp(56px, 19cqi, 92px); }
    .tree-panel.is-tabbed-out { display: none; }
    .tree-panel + .tree-panel::before { display: none; }
    .tree-panel + .tree-panel { border-top: 1px solid rgba(214, 200, 174, .25); }
    .tree-panel.is-tabbed-out + .tree-panel::before { display: none; }
}

@media (min-width: 1081px) {
    .tree-panel.is-tabbed-out { display: block; }
}

@media (max-width: 640px) {
    .page { padding: 26px 14px 56px; }
    .section { margin-top: 34px; }
    .tree-bg,
    .tree-header,
    .tree-body { --cell: clamp(52px, 21cqi, 74px); }
    .challenge-items { grid-template-columns: minmax(0, 1fr); }
    .build-points-value { font-size: 38px; }
    .clear-btn { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}