/* Character growth: factual achievement records, with persistent discovery states. */
.character-growth { --growth-gold: #e6c77c; --growth-soft: #b7b1a5; margin-top: 4px; background: radial-gradient(ellipse at 5% 20%, rgba(191, 154, 77, .12), transparent 50%), linear-gradient(145deg, #211e19, #151616 65%); border-color: rgba(215, 185, 118, .4); box-shadow: 0 18px 55px #0004; }
.character-growth > .panel-body { padding: 25px 28px 19px; }
.character-growth::before { background: linear-gradient(90deg, transparent, #eed59a, #ae8c4a, transparent); }
.character-growth .stage-card-head { justify-content: space-between; gap: 18px; }
.character-growth .stage-head-main { gap: 20px; }
.character-growth .stage-emblem { width: 65px; height: 65px; font-size: 31px; border-radius: 20px; transform: rotate(-4deg); border-color: #d8b97788; background: linear-gradient(135deg, #e4c7792e, #aa843519); box-shadow: inset 0 1px 1px #f8e8bc33, 0 8px 24px #0004; }
.character-growth .stage-emblem::before { inset: 5px; border: 1px solid #e6c77c33; border-radius: 15px; animation: none; }
.character-growth .stage-emblem small { position: absolute; right: -7px; bottom: -6px; display: grid; place-items: center; min-width: 26px; height: 23px; border-radius: 7px; border: 1px solid #ead09880; background: #dbc084; color: #252118; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.character-growth .stage-name { margin: 3px 0 6px; font-size: 30px; font-weight: 750; letter-spacing: .03em; }
.character-growth .stage-tagline { font-size: 13px; line-height: 1.6; color: #beb8ab; }
.growth-caption { display: block; margin: 0; color: #c9b78e; font-size: 11px; letter-spacing: .09em; }
.growth-record-total { flex: none; color: #b7b1a5; font-size: 12px; }
.growth-record-total strong { color: #e9d7ae; font-size: 20px; font-weight: 500; margin-right: 4px; }
.growth-journey { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 27px 0 22px; }
.growth-stop { position: relative; display: grid; justify-items: center; gap: 7px; padding: 0; border: 0; color: #a59f92; background: transparent; cursor: pointer; font-size: 11px; }
.growth-stop::before { content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 1px; background: #e4cc9230; }
.growth-stop:first-child::before { display: none; }
.growth-stop-node { z-index: 1; display: grid; place-items: center; height: 25px; width: 25px; border: 1px solid #b7ad9155; border-radius: 50%; color: #aaa18f; background: #22221f; font-size: 9px; font-weight: 700; }
.growth-stop.current { color: #f0dba7; font-weight: 700; }
.growth-stop.current .growth-stop-node { background: linear-gradient(145deg, #f3e0ab, #b89958); color: #302819; border-color: #f2dfaa; box-shadow: 0 0 0 4px #e4c87d14, 0 0 20px #d7b56833; }
.growth-stop.completed .growth-stop-node { color: #edd9aa; border-color: #dbc48c88; background: #51432c; }
.growth-stop:hover .growth-stop-node, .growth-stop[aria-expanded="true"] .growth-stop-node { outline: 2px solid #e0c58855; outline-offset: 3px; }
.growth-layout { display: grid; grid-template-columns: minmax(275px, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; }
.growth-radar-panel, .growth-stage-panel { min-width: 0; padding: 15px; border: 1px solid #dbc8901c; border-radius: 17px; background: radial-gradient(ellipse at center, #c6b0790c, #0000000c 70%); }
.growth-radar-panel { display: flex; flex-direction: column; }
.growth-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.growth-section-heading h3 { margin: 0; color: #e4d9c2; font-size: 14px; font-weight: 650; }
.growth-section-heading > span { color: #a9a395; font-size: 10px; }
.character-growth .stage-radar { width: 100%; margin: auto 0; gap: 0; }
.character-growth .stage-radar svg { display: block; width: 100%; height: auto; max-width: 360px; overflow: visible; }
.character-growth .stage-radar small { font-size: 11px; line-height: 1.5; letter-spacing: 0; color: #a9a395; }
.character-growth .radar-halo { fill: none; stroke: #cfb36d18; stroke-dasharray: 1 6; }
.character-growth .radar-ring { fill: none; stroke: #d9c59a24; stroke-width: 1; }
.character-growth .radar-ring.active { stroke: #e4ce982e; fill: #d5bd7b04; }
.character-growth .radar-axis { stroke: #ddcc9d38; stroke-width: 1; }
.character-growth .radar-dimension.unknown .radar-axis { stroke-dasharray: 3 5; }
.character-growth .radar-area { fill: #dfbf7036; stroke: none; }
.character-growth .radar-petal { fill: #dfbf7048; stroke: #e8cd8930; stroke-width: 1; }
.character-growth .radar-data-line { stroke: #e9cc88; stroke-width: 1.8; }
.character-growth .radar-point { fill: #efd7a0; stroke: #3b3322; stroke-width: 1.4; filter: drop-shadow(0 0 3px #e6c77c60); }
.character-growth .radar-dimension.unrecorded .radar-point { fill: #a99f87; }
.character-growth .radar-unknown { fill: #252520; stroke: #b4a78b99; stroke-dasharray: 2 2; stroke-width: 1; }
.character-growth .radar-label { fill: #e5ddca; font-size: 15px; font-weight: 550; }
.character-growth .radar-value { fill: #ddc489; font-size: 14px; }
.character-growth .radar-dimension.unknown .radar-value { fill: #a69f8e; font-size: 14px; }
.character-growth .radar-center { fill: #af9f78; }
.growth-stage-panel { display: flex; flex-direction: column; }
.growth-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.growth-progress-head h3, .growth-unlocated h3 { margin: 5px 0 0; font-size: 21px; font-weight: 650; color: #efe2c6; }
.growth-progress-count { display: flex; align-items: baseline; gap: 5px; margin: 0; white-space: nowrap; }
.growth-progress-count strong { color: #edd59c; font-size: 33px; line-height: 1; font-weight: 450; }
.growth-progress-count span { font-size: 11px; color: #bbb29f; }
.character-growth .stage-track { gap: 5px; margin: 19px 0 17px; }
.character-growth .stage-track i { height: 7px; background: #b6ab8c16; border: 1px solid #d6be7e15; }
.character-growth .stage-track i.lit { background: linear-gradient(90deg, #c6a35b, #ecdaa5); box-shadow: 0 0 13px #d7b55b30; }
.character-growth .stage-slots { gap: 8px; margin: 0; }
.character-growth .stage-slot { min-height: 116px; padding: 15px 10px 10px; gap: 8px; border-radius: 11px; }
.character-growth .stage-slot .slot-name { font-size: 13px; font-weight: 650; }
.character-growth .stage-slot .slot-state { font-size: 10px; letter-spacing: 0; }
.character-growth .stage-slot .slot-roman { font-size: 9px; }
.character-growth .stage-slot.done { background: linear-gradient(145deg, #e8d297, #b99a5d 65%, #8c713f); border-color: #f1dcaa99; box-shadow: inset 0 1px 0 #fff4d699, 0 6px 17px #0003; }
.character-growth .stage-slot.done::after { animation: none; opacity: .3; transform: none; }
.character-growth .stage-slot.done .slot-mark { background: #f4e4bd; color: #574120; border-color: #fff2ca; box-shadow: 0 1px 9px #61481e22; }
.character-growth .stage-slot.pending { border-color: #c0b59c47; background: linear-gradient(145deg, #beb09a09, #0002); box-shadow: inset 0 1px 7px #0003; }
.character-growth .stage-slot.unknown { border-color: #c0b59c40; background: #c8b99b04; }
.character-growth .stage-slot .slot-mark { width: 27px; height: 27px; }
.growth-slot-help { margin: auto 0 0; padding-top: 11px; font-size: 11px; color: #aca392; }
.character-growth .stage-slot-detail { margin: 15px 0 0; padding: 15px; }
.character-growth .stage-hint { margin-top: 12px; padding: 8px 11px; font-size: 11px; }
.character-growth .stage-skills { margin-top: 22px; padding-top: 19px; border-color: #ccb57c26; }
.growth-skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 9px; margin-top: 12px; }
.character-growth .growth-skill { min-width: 0; border-radius: 12px; border-color: #b5a78838; background: #bfb59a05; overflow: hidden; }
.character-growth .growth-skill > summary { height: 66px; padding: 10px 12px; gap: 10px; white-space: normal; }
.growth-skill-evidence { height: 152px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #a58e5a #ffffff08; padding-bottom: 8px; }
.character-growth .growth-skill-evidence p { font-size: 12px; line-height: 1.8; }
.growth-skill-evidence:focus-visible { outline: 1px solid #ebd29a; outline-offset: -3px; }
.growth-skill-icon { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border: 1px solid #b0a18450; border-radius: 10px; color: #b5a687; font-size: 21px; }
.growth-skill-copy { display: grid; gap: 4px; min-width: 0; }
.character-growth .growth-skill-copy > span { color: #d5cbb8; font-size: 14px; font-weight: 600; }
.character-growth .growth-skill-copy small { font-size: 10px; line-height: 1.3; color: #ada491; }
.growth-skill-toggle { margin-left: auto; flex: none; color: #ac9b75; font-size: 13px; font-weight: 400; }
.growth-skill[open] .growth-skill-toggle { transform: rotate(45deg); }
.character-growth .growth-skill.unlocked { border-color: #e5c78277; background: linear-gradient(120deg, #dbb76321, #bd9c5710); box-shadow: inset 0 1px 0 #dfc88d16; }
.growth-skill.unlocked .growth-skill-icon { border-color: #ecd28e88; color: #f7e6b9; background: linear-gradient(145deg, #cbae6429, #7c622e33); text-shadow: 0 0 12px #e4c46a55; }
.character-growth .growth-skill.unlocked .growth-skill-copy > span, .character-growth .growth-skill.unlocked small { color: #ecd39a; }
.character-growth .growth-skill.unknown { border-style: dashed; }
.character-growth .growth-skill.growing { border-color: #c3b18266; }
.character-growth .growth-skill.growing .growth-skill-copy small { color: #d6c397; }
.character-growth .skill-badge p { padding: 3px 12px 12px; overflow-wrap: anywhere; }
.character-growth .growth-extra-skills { margin-top: 11px; gap: 8px; }
.character-growth .growth-extra-skills .skill-badge { background: #cbb47f0c; border-color: #cfb77e55; border-radius: 10px; }
.character-growth .growth-extra-skills summary { font-size: 13px; }
.growth-unlocated { padding: 8px 0 0; }
.growth-unlocated > p { margin: 12px 0 20px; color: #bdb5a5; font-size: 13px; }
.growth-unlocated .button { font-size: 13px; }
.growth-empty-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 25px; }
.growth-empty-slots > span { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; border: 1px dashed #cdb77e3b; border-radius: 9px; color: #a59675; font-size: 10px; }
.growth-empty-slots b { font-size: 17px; font-weight: 400; color: #b4a486; }
.character-growth .stage-cross { margin-top: 18px; border-color: #c7ad704f; background: #cdb37906; }
.growth-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-top: 17px; padding-top: 14px; border-top: 1px solid #ccb57c1c; }
.character-growth .growth-rules { margin: 0; min-width: 0; }
.growth-rules > p { max-width: 500px; margin: 10px 0 0; }
.character-growth .stage-links { flex: none; gap: 8px 16px; margin: 0; }
.character-growth .stage-links button, .character-growth .stage-explanation > summary { font-size: 11px; color: #b7ae9b; }
.growth-tier-detail:empty { display: none; }
.growth-tier-detail { margin: -4px 0 20px; padding: 15px; border: 1px solid #c3ac734d; border-radius: 12px; background: #090b0b66; }
.growth-tier-detail h3 { margin: 0 0 8px; color: #e6d19e; font-size: 15px; }
.growth-tier-detail > p { margin: 0 0 10px; color: #b7ad99; font-size: 12px; }
.growth-tier-records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.growth-tier-record { min-width: 0; padding: 10px; border: 1px solid #bfb08a25; border-radius: 8px; }
.growth-tier-record strong { color: #ddd0b4; font-size: 12px; }
.growth-tier-record > small { display: block; margin-top: 3px; color: #b5a586; font-size: 10px; }
.growth-tier-record > p { margin: 7px 0 0; color: #bfb6a5; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.growth-tier-record.done { border-color: #cfb46c5c; background: #d4b46b0d; }
.growth-tier-record.unknown { border-style: dashed; }
.character-growth button:focus-visible, .character-growth summary:focus-visible { outline: 2px solid #ebd29a; outline-offset: 4px; }
@media (max-width: 1000px) and (min-width: 761px) {
  .growth-layout { grid-template-columns: minmax(250px, .95fr) minmax(0, 1.05fr); gap: 20px; }
  .character-growth .stage-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-growth .stage-slot { min-height: 88px; grid-template-columns: 27px minmax(0, 1fr); align-items: center; align-content: center; gap: 6px 9px; padding: 12px; }
  .character-growth .stage-slot .slot-mark { grid-row: span 2; }
  .character-growth .stage-slot .slot-state { grid-column: 2; }
}
@media (max-width: 760px) {
  .character-growth > .panel-body { padding: 23px 18px 18px; }
  .character-growth .stage-card-head { flex-wrap: nowrap; align-items: flex-start; }
  .character-growth .stage-head-main { gap: 17px; }
  .character-growth .stage-emblem { width: 54px; height: 58px; font-size: 27px; border-radius: 17px; }
  .character-growth .stage-name { font-size: 26px; }
  .character-growth .stage-tagline { font-size: 12px; }
  .growth-record-total { display: none; }
  .growth-journey { margin: 25px 0 21px; }
  .growth-stop { font-size: 10px; }
  .growth-layout { grid-template-columns: 1fr; gap: 20px; }
  .growth-radar-panel { padding: 13px 0 10px; }
  .growth-radar-panel > .growth-section-heading { padding: 0 14px; }
  .character-growth .stage-radar svg { width: 100%; max-width: 340px; }
  .growth-stage-panel { padding: 14px; }
  .character-growth .stage-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-growth .stage-slot { min-height: 84px; grid-template-columns: 27px minmax(0, 1fr); align-items: center; align-content: center; gap: 5px 10px; padding: 12px; }
  .character-growth .stage-slot .slot-mark { grid-row: span 2; }
  .character-growth .stage-slot .slot-state { grid-column: 2; }
  .character-growth .stage-slot .slot-name { font-size: 14px; }
  .growth-progress-head h3 { font-size: 20px; }
  .growth-progress-count strong { font-size: 30px; }
  .growth-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .character-growth .growth-skill > summary { gap: 8px; height: 66px; padding: 10px; }
  .growth-skill-icon { width: 25px; height: 29px; border-radius: 8px; font-size: 19px; }
  .growth-skill-toggle { display: none; }
  .growth-footer { flex-wrap: wrap; gap: 13px; }
  .character-growth .stage-links { gap: 8px 20px; }
  .growth-tier-records { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .character-growth *, .character-growth *::before, .character-growth *::after { animation: none !important; transition: none !important; }
}