/* 角色模拟器：在现有设定集纸张主题上增加高密度、可操作的三栏工作面 */
.builder-page [hidden] { display: none !important; }
.home-card--builder { --card-accent: #4d7175; }
.builder-hero { --builder-accent: #4d7175; }
.builder-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.builder-hero__chips span { padding: 6px 10px; color: #e7dac2; border: 1px solid rgba(215,184,115,.3); background: rgba(255,255,255,.06); font-size: 12px; }
.builder-main { padding: 26px 0 96px; }
.builder-toolbar { position: sticky; top: 0; z-index: 12; display: grid; grid-template-columns: auto minmax(180px, 1fr) 120px auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); background: rgba(245,238,223,.94); box-shadow: 0 8px 30px rgba(37,29,18,.11); backdrop-filter: blur(14px); }
.builder-toolbar--save { grid-template-columns: auto minmax(0,1fr) auto; }
.builder-toolbar--save .builder-actions { grid-column: 3; grid-row: 1; width: auto; justify-content: flex-end; }
.builder-toolbar--save .save-controls { grid-column: 1 / -1; grid-row: 2; }
.builder-mode-tabs { display: flex; gap: 4px; padding: 3px; background: #e8dcc5; }
.builder-mode, .builder-btn { border: 1px solid rgba(91,67,33,.2); padding: 9px 12px; color: #6b5a43; background: rgba(255,255,255,.58); font-size: 12px; font-weight: 800; transition: .18s ease; }
.builder-mode:hover, .builder-mode.active { color: #fff8ea; border-color: #4d7175; background: #4d7175; }
.builder-select-label { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; align-items: center; color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.builder-select-label select, .builder-select-label input, .career-selectors select, .equipment-slot select { min-width: 0; width: 100%; padding: 9px; color: var(--ink); border: 1px solid var(--line); background: rgba(255,255,255,.65); }
.target-level-control { grid-template-columns: auto 1fr; }
.target-level-control input { width: 70px; }
.builder-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }
.builder-btn:hover:not(:disabled) { color: #fff8ea; border-color: #6f5128; background: #6f5128; }
.builder-btn--primary { color: #fff8ea; border-color: #4d7175; background: #4d7175; }
.builder-btn--primary:hover:not(:disabled) { background: #36565a; }
.builder-btn--small { margin-top: 8px; padding: 6px 9px; font-size: 11px; }
.builder-btn:disabled { cursor: not-allowed; opacity: .38; }
.builder-file-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.builder-file-btn input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.save-controls { display: flex; grid-column: 1 / -1; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.save-status { min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.builder-notice { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; padding: 12px 15px; color: #5c4b34; border: 1px solid rgba(139,100,41,.28); border-left: 4px solid #b88a3b; background: rgba(238,225,202,.58); font-size: 13px; line-height: 1.65; }
.notice-mark { color: #b88a3b; }
.manual-base { display: grid; grid-template-columns: minmax(185px,1.35fr) repeat(8,minmax(65px,1fr)); gap: 8px; align-items: end; margin: 0 0 18px; padding: 13px; border: 1px solid rgba(77,113,117,.35); background: rgba(236,243,237,.68); }
.manual-base h3 { margin: 3px 0 1px; color: #405b51; font-size: 19px; }
.manual-base p { margin: 0; color: #738074; font-size: 10px; line-height: 1.45; }
.manual-base__intro { grid-column: 1 / span 2; }
.manual-base__fields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(8,minmax(65px,1fr)); gap: 8px; align-items: end; }
.creation-mode-choices { display: flex; justify-content: flex-end; gap: 4px; align-self: center; }
.creation-mode-choice { cursor: pointer; padding: 7px 10px; color: #5f715f; border: 1px solid rgba(77,113,117,.28); background: rgba(255,255,255,.6); font-size: 11px; font-weight: 800; }
.creation-mode-choice:hover, .creation-mode-choice.active { color: #fff8ea; border-color: #4d7175; background: #4d7175; }
.manual-base label { display: grid; gap: 4px; color: #657467; font-size: 10px; font-weight: 800; }
.manual-base input { width: 100%; min-width: 0; padding: 7px 5px; color: #3e4e43; border: 1px solid rgba(77,113,117,.3); background: rgba(255,255,255,.7); }
.quiz-creator { grid-column: 1 / -1; padding: 12px; border: 1px solid rgba(77,113,117,.25); background: rgba(255,255,255,.44); }
.quiz-creator__intro { display: flex; flex-wrap: wrap; gap: 9px 14px; align-items: center; }
.quiz-creator__intro strong { color: #405b51; font: 700 20px/1.2 "STKaiti","KaiTi",serif; }
.quiz-creator__intro p { flex: 1 1 380px; margin: 0; color: #6f7b6e; font-size: 11px; line-height: 1.6; }
.quiz-progress, .quiz-result__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #80602e; font-size: 11px; font-weight: 800; }
.quiz-question h4 { margin: 12px 0 10px; color: #4e4538; font-size: 17px; line-height: 1.5; }
.quiz-answers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.quiz-answer { cursor: pointer; min-height: 62px; padding: 10px; color: #66543b; text-align: left; border: 1px solid rgba(139,100,41,.28); background: rgba(255,252,245,.76); font-size: 12px; line-height: 1.5; }
.quiz-answer:hover, .quiz-answer:focus-visible { color: #fff8ea; border-color: #4d7175; background: #4d7175; }
.quiz-result__head strong { color: #405b51; font-size: 17px; }
.quiz-result p { margin: 8px 0 0; color: #5c6c5c; font-size: 11px; line-height: 1.7; }
.quiz-result__stats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.quiz-result__stats span { padding: 4px 7px; color: #66543b; border: 1px solid rgba(139,100,41,.2); background: rgba(240,228,207,.65); font-size: 10px; }
.quiz-result__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.builder-summary { display: grid; grid-template-columns: minmax(270px,1.3fr) minmax(260px,1fr) auto; gap: 20px; align-items: center; padding: 18px 22px; color: #f8edda; background: linear-gradient(115deg, #28231d, #3d3020 66%, #315256); border: 1px solid #806334; box-shadow: var(--shadow); }
.builder-summary__identity { display: flex; gap: 14px; align-items: center; min-width: 0; }
.builder-portrait { display: grid; place-items: center; flex: 0 0 74px; width: 74px; height: 74px; overflow: hidden; color: #efe0bd; border: 2px solid #c5a05a; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #aa7d4b, #4e3a28 65%, #1e1a15); font: 700 35px/1 "STKaiti", "KaiTi", serif; }
.builder-portrait img { width: 100%; height: 100%; object-fit: cover; }
.builder-kicker { color: #a78d62; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.builder-summary h2 { overflow: hidden; margin: 3px 0 3px; color: #fff5df; font-size: clamp(26px,3vw,38px); letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.builder-summary p { margin: 0; overflow: hidden; color: #d5c6ad; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.builder-summary__budgets { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.builder-summary__budgets div { display: grid; gap: 3px; padding: 10px; text-align: center; border: 1px solid rgba(215,184,115,.24); background: rgba(255,255,255,.055); }
.builder-summary__budgets span { color: #c4b59a; font-size: 11px; }
.builder-summary__budgets strong { color: #e7c878; font: 700 25px/1 Georgia,serif; }
.builder-summary__flags { display: flex; flex-direction: column; gap: 7px; align-items: end; }
.builder-badge { display: inline-block; padding: 5px 8px; color: #fff5df; border: 1px solid rgba(215,184,115,.45); background: rgba(215,184,115,.18); font-size: 11px; font-weight: 800; white-space: nowrap; }
.builder-badge--muted { color: #b9ad9a; border-color: rgba(255,255,255,.15); background: transparent; }
.save-hero-picker { display: grid; grid-template-columns: 175px 1fr; gap: 15px; align-items: center; margin-top: 18px; padding: 14px; border: 1px solid var(--line); background: rgba(255,252,245,.7); }
.save-hero-picker h3 { margin: 4px 0 0; font-size: 22px; }
.save-hero-list { display: flex; flex-wrap: wrap; gap: 6px; }
.save-hero-choice { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; color: #66543b; border: 1px solid var(--line); background: rgba(255,255,255,.58); font-size: 12px; }
.save-hero-choice:hover, .save-hero-choice.active { color: #fff8ea; border-color: #4d7175; background: #4d7175; }
.save-hero-choice small { opacity: .72; font-size: 10px; }
.builder-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(300px,.82fr) minmax(310px,.88fr); gap: 16px; margin-top: 18px; align-items: start; }
.builder-column { display: grid; gap: 16px; min-width: 0; }
.builder-panel { min-width: 0; padding: 16px; border: 1px solid var(--line); background: rgba(255,252,245,.82); box-shadow: 0 7px 20px rgba(48,35,18,.06); }
.builder-panel__head { display: flex; justify-content: space-between; gap: 10px; align-items: end; margin-bottom: 13px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.builder-panel__head h2 { margin: 3px 0 0; font-size: 24px; letter-spacing: .08em; }
.builder-panel__head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.builder-panel-reset { cursor: pointer; padding: 4px 7px; color: #80602e; border: 1px solid rgba(139,100,41,.3); background: rgba(255,255,255,.55); font-size: 10px; font-weight: 800; white-space: nowrap; }
.builder-panel-reset:hover:not(:disabled) { color: #fff8ea; border-color: #4d7175; background: #4d7175; }
.module-points { color: #8b6429; font-size: 10px; font-weight: 800; white-space: nowrap; }
.panel-value { color: #8b6429; font-size: 12px; font-weight: 800; }
.panel-hint { color: #9b8a73; font-size: 11px; }
.attribute-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.attribute-card { display: grid; gap: 5px; padding: 12px 7px 10px; text-align: center; border: 1px solid var(--attr-line); border-top: 3px solid var(--attr); background: rgba(255,255,255,.6); }
.attribute-card b { color: var(--attr); font: 700 16px/1 "STKaiti","KaiTi",serif; }
.attribute-card strong { color: #3c3329; font: 700 28px/1 Georgia,serif; }
.attribute-card small { color: #8d7b64; font-size: 10px; }
.stat-stepper { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.step-btn, .node-step { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; color: #fff8ea; border: 1px solid var(--attr,#8b6429); background: var(--attr,#8b6429); font-weight: 800; line-height: 1; }
.step-btn:disabled, .node-step:disabled { cursor: not-allowed; opacity: .27; }
.skill-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.skill-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; align-items: center; min-width: 0; padding: 8px 9px; border: 1px solid rgba(91,67,33,.17); border-left: 3px solid var(--attr); background: rgba(255,255,255,.52); }
.skill-card.is-locked { opacity: .7; }
.skill-card__name { overflow: hidden; color: #554839; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.skill-card__name small { margin-left: 4px; color: #98866e; font-size: 10px; }
.skill-card__value { display: flex; align-items: center; gap: 5px; }
.skill-card__value strong { min-width: 22px; color: var(--attr); text-align: right; font: 700 16px/1 Georgia,serif; }
.skill-card__value span { color: #98866e; font-size: 10px; }
.skill-card__bar { height: 3px; margin-top: 5px; overflow: hidden; background: #e5dccb; }
.skill-card__bar i { display: block; height: 100%; background: var(--attr); }
.proficiency-grid-builder { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.proficiency-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; align-items: center; padding: 9px; border: 1px solid rgba(91,67,33,.16); background: rgba(255,255,255,.52); }
.proficiency-card__name { color: #5b4d3b; font-size: 12px; }
.proficiency-card__name small { display: block; margin-top: 2px; color: #a08e74; font-size: 10px; }
.proficiency-card__value { display: flex; align-items: center; gap: 5px; }
.proficiency-card__value strong { min-width: 39px; color: #875f26; text-align: right; font: 700 16px/1 Georgia,serif; }
.proficiency-card__value span { color: #a08e74; font-size: 10px; }
.equipment-summary { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.equipment-summary span { padding: 4px 6px; color: #80602e; border: 1px solid rgba(139,100,41,.22); background: #f0e4cf; font-size: 10px; }
.weapon-category-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -2px 0 10px; padding: 5px 6px; border: 1px solid rgba(139,100,41,.16); background: rgba(238,225,202,.28); }
.weapon-category-filters__label { margin-right: 2px; color: #80602e; font-size: 10px; font-weight: 800; white-space: nowrap; }
.weapon-category-filter { padding: 3px 7px; color: #816b4a; border: 1px solid transparent; background: rgba(255,255,255,.5); font-size: 10px; white-space: nowrap; }
.weapon-category-filter:hover, .weapon-category-filter.active { color: #fff8ea; border-color: #4d7175; background: #4d7175; }
.equipment-rarity-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -4px 0 10px; padding: 5px 6px; border: 1px solid rgba(139,100,41,.16); background: rgba(238,225,202,.2); }
.equipment-rarity-filters__label { margin-right: 2px; color: #80602e; font-size: 10px; font-weight: 800; white-space: nowrap; }
.equipment-rarity-filter { cursor: pointer; padding: 3px 7px; color: #816b4a; border: 1px solid transparent; background: rgba(255,255,255,.5); font-size: 10px; white-space: nowrap; }
.equipment-rarity-filter:hover, .equipment-rarity-filter.active { color: #fff8ea; border-color: #8a6325; background: #8a6325; }
.equipment-loadout-visual { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin: 0 0 11px; padding: 7px; border: 1px solid rgba(77,113,117,.24); background: linear-gradient(145deg,rgba(49,82,86,.12),rgba(240,228,207,.72)); }
.loadout-visual__section { display: contents; }
.loadout-visual__section-label { grid-column: 1 / -1; margin: 1px 2px 0; color: #80602e; font-size: 10px; font-weight: 800; }
.loadout-slot { display: grid; grid-template-rows: 39px auto; gap: 3px; min-width: 0; cursor: pointer; padding: 4px; color: #6d5a40; border: 1px solid rgba(139,100,41,.24); background: rgba(255,255,255,.65); text-align: center; }
.loadout-slot:hover, .loadout-slot.is-selected { color: #fff8ea; border-color: #4d7175; background: #4d7175; }
.loadout-slot__image { display: grid; place-items: center; overflow: hidden; color: #9b8463; border: 1px solid rgba(139,100,41,.16); background: rgba(238,225,202,.55); font: 700 14px/1 "STKaiti","KaiTi",serif; }
.loadout-slot:hover .loadout-slot__image, .loadout-slot.is-selected .loadout-slot__image { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.12); }
.loadout-slot__image img { width: 100%; height: 100%; object-fit: contain; }
.loadout-slot__label, .loadout-slot__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loadout-slot__label { color: inherit; font-size: 9px; font-weight: 800; }
.loadout-slot__name { color: inherit; opacity: .82; font-size: 9px; }
.loadout-slot--empty .loadout-slot__name { color: #a18e73; }
.equipment-slots { display: grid; gap: 7px; }
.equipment-slot { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 7px; align-items: center; }
.equipment-slot > label { color: #8b6429; font-size: 11px; font-weight: 800; }
.equipment-slot select { padding: 7px; font-size: 12px; }
.equipment-slot option[disabled] { color: #98866e; }
.equipment-detail { min-height: 75px; margin-top: 12px; padding: 11px; border: 1px dashed rgba(139,100,41,.35); background: rgba(238,225,202,.38); }
.empty-detail { color: #9a886e; font-size: 12px; }
.inventory-panel { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(139,100,41,.2); }
.inventory-panel__head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; color: #9a886e; font-size: 11px; }
.inventory-panel__head strong { color: #66543b; font-size: 13px; }
.inventory-list { display: flex; flex-wrap: wrap; gap: 5px; max-height: 180px; overflow: auto; margin-top: 8px; padding-right: 3px; }
.inventory-item { display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; padding: 4px 6px; color: #806f59; border: 1px solid rgba(91,67,33,.15); background: rgba(255,255,255,.58); font-size: 10px; line-height: 1.2; }
.inventory-item b { overflow: hidden; color: #5c4e3e; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.inventory-item small { color: #8b6429; font-size: 9px; white-space: nowrap; }
.inventory-item.is-special { border-color: rgba(139,100,41,.42); background: rgba(244,229,183,.36); }
.item-detail-head { display: flex; gap: 10px; align-items: center; }
.item-detail-head img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--line); background: #eee1ca; }
.item-detail-head h3 { margin: 0 0 4px; font-size: 18px; }
.item-detail-head span { color: #9a886e; font-size: 11px; }
.item-detail-stats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.item-detail-stats span { padding: 3px 5px; color: #66543b; border: 1px solid rgba(91,67,33,.15); background: rgba(255,255,255,.55); font-size: 10px; }
.catalog-toggle { color: #8b6429; font-size: 11px; white-space: nowrap; }
.catalog-toggle input { accent-color: #4d7175; }
.effect-list { display: grid; gap: 7px; }
.effect-row { display: grid; grid-template-columns: 66px 1fr; gap: 8px; padding: 8px 9px; border-left: 3px solid #4d7175; background: rgba(232,220,197,.42); }
.effect-row b { color: #8b6429; font-size: 11px; }
.effect-row span { color: #5c4e3e; font-size: 11px; line-height: 1.55; }
.career-selectors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 13px; }
.career-selectors label { display: grid; gap: 5px; color: #8b6429; font-size: 11px; font-weight: 800; }
.career-trees { display: grid; grid-template-columns: 1fr; gap: 12px; }
.career-tree { min-width: 0; padding: 10px; border: 1px solid rgba(139,100,41,.22); background: #f0e5d2; }
.career-tree__head { display: flex; justify-content: space-between; gap: 5px; align-items: baseline; margin-bottom: 8px; }
.career-tree__head strong { color: #70532c; font: 700 20px/1.2 "STKaiti","KaiTi",serif; }
.career-tree__head span { color: #8b6429; font: 700 12px/1 Georgia,serif; }
.career-points { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-bottom: 8px; }
.career-points span { padding: 4px 2px; text-align: center; color: #886f4d; background: rgba(255,255,255,.48); font-size: 9px; }
.career-points b { display: block; margin-top: 2px; color: #6a4c24; font: 700 15px/1 Georgia,serif; }
.career-route-map { display: grid; gap: 5px; padding: 3px 2px 2px; }
.career-route-node { display: flex; justify-content: center; }
.career-flow-line { height: 13px; color: #9b6f31; text-align: center; font: 700 15px/13px Georgia,serif; }
.career-branch-caption { margin: 1px 0 2px; color: #9a805d; text-align: center; font-size: 10px; }
.career-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; position: relative; }
.career-paths::before { content: ""; position: absolute; top: -7px; left: 25%; right: 25%; border-top: 1px solid rgba(139,100,41,.55); }
.career-path { display: grid; gap: 4px; position: relative; padding: 6px 5px 7px; border: 1px solid rgba(139,100,41,.2); background: rgba(255,255,255,.28); }
.career-path::before { content: ""; position: absolute; top: -7px; left: 50%; width: 1px; height: 7px; background: rgba(139,100,41,.55); }
.career-path__label { color: #80602e; text-align: center; font-size: 10px; font-weight: 800; white-space: nowrap; }
.career-node { display: grid; gap: 3px; min-width: 0; padding: 7px 4px; text-align: center; border: 1px solid rgba(139,100,41,.28); background: rgba(255,255,255,.62); }
.career-route-node > .career-node { width: min(150px, 75%); }
.career-path > .career-node { width: 100%; }
.career-node small { overflow: hidden; color: #765934; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.career-node strong { color: #875f26; font: 700 15px/1 Georgia,serif; }
.career-node .node-step { justify-self: center; width: 21px; height: 20px; font-size: 12px; }
.career-node.is-blocked { opacity: .45; }
.career-node.is-active { border-color: #4d7175; box-shadow: inset 0 2px #4d7175; }
.advanced-career-card { margin-top: 12px; padding: 14px; text-align: center; border: 1px solid rgba(139,100,41,.42); background: #2e271e; }
.advanced-career-card__label { display: block; color: #d8b86c; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.advanced-career-card strong { display: block; margin: 6px 0; color: #fff1ce; font: 700 25px/1.2 "STKaiti","KaiTi",serif; }
.advanced-career-card p { margin: 0; color: #c9baa2; font-size: 11px; line-height: 1.55; }
.advanced-career-card.is-active { background: linear-gradient(125deg,#4b3820,#315256); }
.builder-rules { display: grid; gap: 7px; margin: 0; padding-left: 18px; color: #665844; font-size: 12px; line-height: 1.6; }
.raw-save-info { margin-top: 18px; padding: 16px; border: 1px solid var(--line); background: rgba(232,220,197,.36); }
.raw-save-info h2 { margin: 3px 0 12px; font-size: 23px; }
.raw-save-info__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.raw-save-info__grid div { padding: 9px; background: rgba(255,255,255,.5); }
.raw-save-info__grid span { display: block; color: #907e65; font-size: 10px; }
.raw-save-info__grid strong { display: block; margin-top: 3px; color: #624a28; font-size: 13px; word-break: break-all; }
.builder-tooltip { position: fixed; z-index: 100; width: min(320px,calc(100vw - 24px)); padding: 11px 13px; color: #4d402f; border: 1px solid rgba(139,100,41,.55); background: rgba(255,249,237,.98); box-shadow: 0 14px 36px rgba(35,25,13,.24); pointer-events: none; }
.builder-tooltip[hidden] { display: none; }
.builder-tooltip strong { display: block; margin-bottom: 5px; color: #8b6429; font: 700 18px/1.2 "STKaiti","KaiTi",serif; }
.builder-tooltip p { margin: 4px 0; font-size: 11px; line-height: 1.6; }
.builder-mobile-tabs { display: none; }

@media (max-width: 1180px) {
  .manual-base { grid-template-columns: minmax(180px,1.4fr) minmax(220px,1fr); }
  .manual-base__fields { grid-template-columns: repeat(4,1fr); }
  .builder-toolbar { grid-template-columns: auto 1fr 110px; }
  .builder-actions { grid-column: 1 / -1; justify-content: start; }
  .builder-grid { grid-template-columns: minmax(0,1fr) minmax(300px,.84fr); }
  .builder-column--careers { grid-column: 1 / -1; grid-template-columns: minmax(0,1fr) minmax(260px,.55fr); align-items: start; }
}
@media (max-width: 760px) {
  .builder-main { padding-top: 12px; }
  .manual-base { grid-template-columns: 1fr; }
  .manual-base__intro, .creation-mode-choices, .manual-base__fields, .quiz-creator { grid-column: 1 / -1; }
  .creation-mode-choices { justify-content: flex-start; }
  .manual-base__fields { grid-template-columns: repeat(4,1fr); }
  .builder-toolbar { position: relative; grid-template-columns: 1fr 1fr; }
  .builder-mode-tabs { grid-column: 1 / -1; }
  .builder-select-label { grid-template-columns: 1fr; gap: 4px; }
  .builder-select-label input { width: 100%; }
  .builder-actions { grid-column: 1 / -1; justify-content: stretch; }
  .builder-actions > * { flex: 1 1 auto; }
  .save-controls { grid-column: 1 / -1; align-items: flex-start; flex-direction: column; }
  .builder-summary { grid-template-columns: 1fr; }
  .builder-summary__flags { flex-direction: row; align-items: center; }
  .builder-grid { grid-template-columns: 1fr; }
  .builder-mobile-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 14px; padding: 4px; border: 1px solid var(--line); background: #e8dcc5; }
  .builder-mobile-tabs button { padding: 9px 6px; color: #765d38; border: 1px solid transparent; background: rgba(255,255,255,.55); font-size: 12px; font-weight: 800; }
  .builder-mobile-tabs button.active { color: #fff8ea; border-color: #4d7175; background: #4d7175; }
  body[data-mobile-section="stats"] .builder-column--equipment, body[data-mobile-section="stats"] .builder-column--careers,
  body[data-mobile-section="equipment"] .builder-column--stats, body[data-mobile-section="equipment"] .builder-column--careers,
  body[data-mobile-section="careers"] .builder-column--stats, body[data-mobile-section="careers"] .builder-column--equipment { display: none; }
  .builder-column--careers { grid-column: auto; grid-template-columns: 1fr; }
  .save-hero-picker { grid-template-columns: 1fr; }
  .raw-save-info__grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .attribute-grid, .proficiency-grid-builder { grid-template-columns: repeat(2,1fr); }
  .skill-grid { grid-template-columns: 1fr; }
  .quiz-answers { grid-template-columns: 1fr; }
  .manual-base__fields { grid-template-columns: repeat(2,1fr); }
  .career-trees { grid-template-columns: 1fr; }
  .career-paths { gap: 5px; }
  .career-path { padding-left: 3px; padding-right: 3px; }
  .career-path__label { font-size: 9px; letter-spacing: -.03em; }
  .builder-summary__budgets { gap: 4px; }
  .builder-summary__budgets strong { font-size: 21px; }
  .equipment-slot { grid-template-columns: 48px minmax(0,1fr); }
}

/* The save-mode toolbar has its own two-row contract at every breakpoint;
   keeping the file controls on a full-width row prevents the old narrow
   target-level column from turning the action buttons into a vertical stack. */
.builder-toolbar--save { grid-template-columns: auto minmax(0,1fr) auto; }
.builder-toolbar--save .builder-actions { grid-column: 3; grid-row: 1; width: auto; justify-content: flex-end; }
.builder-toolbar--save .save-controls { grid-column: 1 / -1; grid-row: 2; }

/* Game-like paper-doll loadout.  All nine slots share one 3×3 grid so every
   weapon and armor slot stays visible and equally easy to select. */
.equipment-slots { display: none !important; }
.equipment-loadout-visual { display: block; padding: 10px; }
.loadout-visual__caption { margin: 0 0 8px; color: #80602e; font-size: 10px; font-weight: 800; }
.loadout-stage { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(96px,1fr)); gap: 8px; align-items: stretch; }
.loadout-stage > .loadout-slot { min-height: 96px; }
.loadout-slot { grid-template-rows: 18px minmax(44px,1fr) auto; }
.loadout-slot__image img { max-width: 100%; max-height: 100%; }
.item-detail-empty { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.item-detail-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 4px; }
.item-detail-group { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(139,100,41,.18); }
.item-detail-group h4 { margin: 0 0 5px; color: #80602e; font-size: 11px; }
.item-detail-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.item-detail-stats span, .item-detail-lines span { display: block; padding: 4px 5px; color: #66543b; border: 1px solid rgba(91,67,33,.15); background: rgba(255,255,255,.55); font-size: 10px; line-height: 1.35; }
.item-detail-stats b, .item-detail-lines b { margin-right: 4px; color: #8b6429; font-weight: 800; }
.item-detail-lines { display: grid; gap: 5px; margin-top: 7px; }
.item-detail-group--artifact { border-top-color: rgba(139,100,41,.42); }
.item-detail-instance { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; color: #8b7760; font-size: 10px; }
.item-detail-instance span { padding: 3px 5px; border: 1px dashed rgba(139,100,41,.25); }
.item-detail-head__empty { display: grid; place-items: center; width: 48px; height: 48px; color: #9a886e; border: 1px solid var(--line); background: #eee1ca; font-size: 10px; }
.equipment-picker { margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(77,113,117,.3); }
.equipment-picker__head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.equipment-picker__head strong { color: #6a4c24; font-size: 13px; }
.equipment-picker__head span { flex: 1; color: #9a886e; font-size: 10px; }
.equipment-picker__search { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 7px; align-items: center; margin-bottom: 7px; color: #80602e; font-size: 10px; font-weight: 800; }
.equipment-picker__search input { min-width: 0; width: 100%; padding: 6px 7px; color: var(--ink); border: 1px solid var(--line); background: rgba(255,255,255,.7); font-size: 11px; }
.equipment-picker__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; max-height: 310px; overflow: auto; padding: 2px; }
.equipment-picker-card { display: grid; grid-template-rows: 42px auto auto; gap: 3px; min-width: 0; cursor: pointer; padding: 4px; color: #66543b; border: 1px solid rgba(139,100,41,.2); background: rgba(255,255,255,.7); text-align: left; }
.equipment-picker-card:hover, .equipment-picker-card:focus-visible { color: #fff8ea; border-color: #4d7175; background: #4d7175; }
.equipment-picker-card__image { display: grid; place-items: center; overflow: hidden; background: rgba(238,225,202,.55); }
.equipment-picker-card__image img { width: 100%; height: 100%; object-fit: contain; }
.equipment-picker-card__name, .equipment-picker-card__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipment-picker-card__name { font-size: 10px; font-weight: 800; }
.equipment-picker-card__meta { color: #9a886e; font-size: 9px; }
.equipment-picker-card:hover .equipment-picker-card__meta, .equipment-picker-card:focus-visible .equipment-picker-card__meta { color: rgba(255,248,234,.78); }

/* Symmetric career board.  The central node is a visual counterpart of the
   game's second-career junction; pseudo-lines keep the relationships legible
   without squeezing the labels into a vertical card stack. */
.career-trees { display: block; }
.career-board { display: grid; grid-template-columns: minmax(0,1fr) 132px minmax(0,1fr); gap: 8px; align-items: stretch; padding: 9px; border: 1px solid rgba(139,100,41,.34); background: linear-gradient(145deg,#f1e5cf,#e6d6b9); }
.career-board__lane { min-width: 0; }
.career-board__center { display: grid; align-content: center; gap: 6px; position: relative; }
.career-board__connector { display: block; height: 1px; background: rgba(139,100,41,.55); }
.career-center-node { position: relative; z-index: 1; display: grid; gap: 5px; min-height: 130px; align-content: center; padding: 9px 7px; color: #f8edda; text-align: center; border: 1px solid #6d542f; background: #30271c; box-shadow: 0 4px 12px rgba(48,35,18,.16); }
.career-center-node.is-active { background: linear-gradient(145deg,#4b3820,#315256); }
.career-center-node__label { color: #d8b86c; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.career-center-node strong { color: #fff1ce; font: 700 17px/1.2 "STKaiti","KaiTi",serif; }
.career-center-node p { margin: 0; color: #c9baa2; font-size: 10px; line-height: 1.4; }
.career-lane { min-width: 0; padding: 8px; border: 1px solid rgba(139,100,41,.24); background: rgba(255,255,255,.34); }
.career-lane__head { display: flex; justify-content: space-between; gap: 6px; align-items: end; padding-bottom: 6px; border-bottom: 1px solid rgba(139,100,41,.23); }
.career-lane__eyebrow { display: block; color: #9a805d; font-size: 9px; font-weight: 800; }
.career-lane__head strong { color: #70532c; font: 700 18px/1.2 "STKaiti","KaiTi",serif; }
.career-lane__meta { display: grid; gap: 2px; color: #8b6429; font-size: 9px; text-align: right; white-space: nowrap; }
.career-lane__level { width: min(160px,72%); margin: 7px auto 3px; }
.career-lane__level .career-node { background: rgba(244,231,207,.85); }
.career-lane__diagram { position: relative; display: grid; grid-template-rows: auto 8px auto 8px auto; gap: 2px; padding: 4px 2px; }
.career-lane__row { display: grid; grid-template-columns: minmax(0,1fr) 16px minmax(0,1fr); gap: 2px; align-items: center; }
.career-lane__row .career-node { min-width: 0; }
.career-lane__row .career-link { color: #9b6f31; font: 700 13px/1 Georgia,serif; text-align: center; }
.career-lane__spine { width: 1px; height: 8px; margin: 0 auto; background: rgba(139,100,41,.58); }
.career-lane__main { width: min(132px,78%); margin: 0 auto; }
.career-lane__points { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; margin-top: 5px; padding-top: 6px; color: #8b7760; border-top: 1px solid rgba(139,100,41,.17); font-size: 9px; }
.career-lane__points b { color: #6a4c24; font: 700 13px/1 Georgia,serif; }
.career-lane--two .career-lane__row--top, .career-lane--two .career-lane__row--bottom { direction: ltr; }
.career-lane--two .career-lane__row .career-link { direction: ltr; }
.career-node { position: relative; }
.career-node .node-step { margin-top: 2px; }

@media (max-width: 760px) {
  .builder-toolbar--save { grid-template-columns: 1fr; }
  .builder-toolbar--save .builder-actions { grid-column: 1; grid-row: auto; justify-content: stretch; }
  .builder-toolbar--save .builder-actions > * { flex: 1 1 auto; }
  .builder-toolbar--save .save-controls { grid-column: 1; grid-row: auto; }
  .loadout-stage { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(88px,1fr)); gap: 5px; }
  .equipment-picker__grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .career-board { grid-template-columns: 1fr; }
  .career-board__center { order: -1; grid-template-columns: 1fr minmax(150px, .8fr) 1fr; align-items: center; }
  .career-board__connector { width: 100%; }
}
@media (max-width: 480px) {
  .item-detail-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .equipment-picker__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .career-board { padding: 5px; }
  .career-lane__head strong { font-size: 16px; }
  .career-lane__meta { font-size: 8px; }
}

/* Keep the save toolbar explicit after the general responsive rules above.
   Hidden template controls must never leave the target-level field or action
   buttons in a narrow, vertically squeezed grid column. */
.builder-toolbar--save { grid-template-columns: auto minmax(150px, 1fr) auto; }
.builder-toolbar--save .target-level-control { grid-column: 2; grid-row: 1; }
.builder-toolbar--save .builder-actions { grid-column: 3; grid-row: 1; width: auto; justify-content: flex-end; }
.builder-toolbar--save .save-controls { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 1180px) and (min-width: 761px) {
  .builder-toolbar--save { grid-template-columns: auto minmax(150px, 1fr); }
  .builder-toolbar--save .target-level-control { grid-column: 2; grid-row: 1; }
  .builder-toolbar--save .builder-actions { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .builder-toolbar--save .save-controls { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 760px) {
  .builder-toolbar--save { grid-template-columns: 1fr; }
  .builder-toolbar--save .target-level-control { grid-column: 1; grid-row: auto; }
  .builder-toolbar--save .builder-actions { grid-column: 1; grid-row: auto; width: auto; justify-content: stretch; }
  .builder-toolbar--save .builder-actions > * { flex: 1 1 auto; }
  .builder-toolbar--save .save-controls { grid-column: 1; grid-row: auto; }
}