/* The personal character screen: living portrait, readable story and fate-first hierarchy. */
.character-visual{--character-aura:#bba16a;background:radial-gradient(ellipse at 51% 37%,color-mix(in srgb,var(--character-aura) 19%,transparent),transparent 54%),linear-gradient(150deg,#f5f0e4,#e8dec9 72%,#e3d6bf)}
.character-visual:after{z-index:3;background:linear-gradient(90deg,#f2eadc55,transparent 22%,transparent 78%,#eee4d1a6),linear-gradient(0deg,#eee6d8 3%,#eee6d8ad 22%,transparent 48%)}
.character-visual:after{background:linear-gradient(90deg,#f2eadc44,transparent 20%,transparent 82%,#eee4d188),linear-gradient(0deg,#eee6d8 1%,#eee6d866 14%,transparent 32%)}
.character-art-window{z-index:2;mask-image:linear-gradient(to bottom,black 0%,black 78%,transparent 95%)!important;-webkit-mask-image:linear-gradient(to bottom,black 0%,black 78%,transparent 95%)!important}
.character-art-window:has(.character-live-art){mask-image:linear-gradient(to bottom,black 0%,black 79%,transparent 96%)!important;-webkit-mask-image:linear-gradient(to bottom,black 0%,black 79%,transparent 96%)!important}
.character-reference-art.character-live-art{height:83%!important;top:2%!important;filter:drop-shadow(0 23px 23px #4a3d3650)!important}
.character-visual.has-mesh .character-reference-art.character-live-art{opacity:0!important}
.character-art-window.is-concept{animation:character-concept-breathe 6.4s ease-in-out infinite}
.character-motion{position:absolute;top:2%;left:4%;width:92%;height:81%;pointer-events:none;opacity:0;filter:drop-shadow(0 23px 24px #49352c65);transition:opacity .35s ease}
.character-visual.has-mesh .character-motion{opacity:1}
.character-motion canvas{display:block;width:100%;height:100%}
.character-orbit{z-index:1;inset:12% 10% 20%;border-color:color-mix(in srgb,var(--character-aura) 45%,transparent);box-shadow:0 0 0 14px color-mix(in srgb,var(--character-aura) 9%,transparent),inset 0 0 0 15px color-mix(in srgb,var(--character-aura) 6%,transparent),0 0 90px color-mix(in srgb,var(--character-aura) 26%,transparent);animation:character-orbit-turn 30s linear infinite}
.character-orbit:before{border-color:color-mix(in srgb,var(--character-aura) 35%,transparent)}
.character-energy{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.character-energy:before{content:"";position:absolute;left:18%;top:14%;width:64%;height:55%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--character-aura) 30%,transparent),transparent 67%);filter:blur(23px);animation:character-aura-breathe 5.8s ease-in-out infinite}
.character-energy:after{content:"";position:absolute;left:17%;right:17%;top:20%;height:52%;border-radius:50%;border:1px solid color-mix(in srgb,var(--character-aura) 43%,transparent);box-shadow:0 0 20px color-mix(in srgb,var(--character-aura) 24%,transparent);opacity:.55;animation:character-aura-breathe 7s ease-in-out infinite reverse}
.character-energy i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--character-aura);box-shadow:0 0 10px 3px color-mix(in srgb,var(--character-aura) 60%,transparent);opacity:0;animation:character-mote 5s linear infinite}
.character-energy i:nth-child(1){left:22%;top:72%;animation-delay:-.4s}.character-energy i:nth-child(2){left:75%;top:62%;animation-delay:-1.5s}.character-energy i:nth-child(3){left:33%;top:43%;animation-delay:-2.7s}.character-energy i:nth-child(4){left:70%;top:36%;animation-delay:-3.4s}.character-energy i:nth-child(5){left:16%;top:56%;animation-delay:-4.2s}.character-energy i:nth-child(6){left:86%;top:52%;animation-delay:-2s}
.character-visual-top{z-index:5;align-items:flex-start;gap:10px;margin:25px 28px}
.character-visual[data-identity] .character-visual-top{background:transparent;color:#345643}
.character-visual-top>div:first-of-type{padding:6px 13px 7px 2px;border-radius:0 5px 5px 0;background:linear-gradient(90deg,#f7f1e5d9,#f7f1e5a8);text-shadow:0 1px #fff9}
.character-visual-actions{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.character-illustration-tag{margin-left:0;background:#fbf4e5bb;color:#705a3b}
.character-motion-action{min-height:34px;border:1px solid #ad864e;background:#f9efd7e8;color:#654622;border-radius:4px;padding:5px 10px;font:600 12px/1.2 "Microsoft YaHei",sans-serif;box-shadow:0 3px 13px #76502e29;cursor:pointer;white-space:nowrap}
.character-motion-action span{margin-left:5px;color:#ad7b38}.character-motion-action:hover{background:#fff5da;transform:translateY(-1px)}
.character-visual.is-awakening .character-orbit{animation:character-orbit-burst 1.6s ease-out both}
.character-visual.is-awakening .character-energy:after{animation:character-ring-burst 1.5s ease-out both}
.character-visual.is-awakening .character-energy:before{animation:character-glow-burst 1.6s ease-out both}
.character-visual.is-awakening .character-motion,.character-visual.is-awakening .character-reference-art.character-live-art{animation:character-hero-cue 1.6s ease-in-out both}
.character-visual-footer{z-index:5;left:27px;right:27px;bottom:24px}
.character-visual-footer h2{margin:6px 0 10px;color:#342b20;text-shadow:0 1px #fff5df}
.character-kicker{font-size:12px;color:#765a31;font-weight:800}
.character-story{position:relative;max-width:660px;padding:12px 15px 13px 18px;border:1px solid #b99d6b;border-left:4px solid var(--character-aura);border-radius:3px;background:linear-gradient(120deg,#fffaf0f2,#f3ead7ec);box-shadow:0 8px 23px #72572c25}
.character-story:before{content:"“";position:absolute;right:12px;top:-16px;color:#b99b6266;font:62px/1 Georgia,serif;pointer-events:none}
.character-story-label{display:block;color:#8d6b36;font-size:11px;font-weight:800;letter-spacing:.11em}
.character-story p,.character-visual-footer .character-live-intro{margin:5px 0 0;max-height:112px;overflow:auto;font:600 16px/1.65 "Microsoft YaHei",sans-serif;color:#3d3529;white-space:pre-line;scrollbar-width:thin}
.character-identity-tags{margin-top:9px}.character-identity-tags span{background:#fff8e7bb;color:#5b462c;font-weight:600}
.character-stat-group{margin-top:12px;padding-top:14px;border-top:1px solid #d6b77155}
.character-stat-group .character-section-title{margin-bottom:11px}
.character-stats{gap:10px;margin:0}
.character-stats>div{--stat-accent:#d5b276;min-height:95px;padding:10px 12px 12px;border:1px solid color-mix(in srgb,var(--stat-accent) 38%,transparent);border-radius:6px;background:linear-gradient(150deg,color-mix(in srgb,var(--stat-accent) 13%,#1a2e33),#11242a 75%);box-shadow:inset 0 1px #fff2,0 8px 15px #051b2030}
.character-stats .stat-life{--stat-accent:#93bfa2}.character-stats .stat-attack{--stat-accent:#e4bd78}.character-stats .stat-defense{--stat-accent:#89b7c6}.character-stats .stat-speed{--stat-accent:#b6a3d3}
.character-stats dt{display:flex;align-items:center;gap:7px;font-size:12px;color:#d9ded1;font-weight:700}
.character-stats .stat-icon{display:grid;place-items:center;width:22px;height:22px;border:1px solid color-mix(in srgb,var(--stat-accent) 55%,transparent);border-radius:50%;color:var(--stat-accent);font:15px/1 Georgia,serif}
.character-stats dd{margin:5px 0 1px;font:700 clamp(23px,1.6vw,31px)/1.08 var(--display);color:#fff0c9;font-variant-numeric:tabular-nums;text-shadow:0 0 15px color-mix(in srgb,var(--stat-accent) 35%,transparent)}
.character-stats small{font-size:10px;letter-spacing:.06em;color:#aabbb5}
.character-stat-group .growth-entry{display:block;width:auto;min-height:35px;margin:10px 0 0 auto;padding:6px 14px;border:1px solid #b79b67;border-radius:4px;background:#dec58d15;color:#dfc891;font:700 12px/1.3 "Microsoft YaHei",sans-serif}
.character-stat-group .growth-entry:hover{background:#c9ab7030}
.character-pillar-title{margin:10px 0 8px}
.character-pillars{margin:0 0 16px}
.pillar-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;justify-content:stretch;margin:0}
.pillar-list span{flex:initial;max-width:none;border:0;border-radius:0;padding:0}
.pillar-list .pillar-card{display:block;position:relative;padding:10px 10px 11px;border:1px solid #c8ad715e;border-radius:5px;background:linear-gradient(150deg,#34484a77,#152b3188);box-shadow:inset 0 1px #f7e8c515;text-align:center}
.pillar-card>small{display:flex;align-items:center;justify-content:space-between;color:#dac494;font-size:11px;font-weight:700;letter-spacing:.1em}
.pillar-card>small i{font:10px Georgia,serif;color:#8b9e96}
.pillar-pair{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px}
.pillar-list .pillar-pair>span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 0;border:1px solid #c7a86e2f;background:#d4be8910;border-radius:3px}
.pillar-list .pillar-pair b{font:700 clamp(25px,1.8vw,34px)/1.15 var(--display);color:#ffe5a9}
.pillar-pair em{font-style:normal;font-size:9px;color:#a9b7ac}
.character-profile-note{display:flex;align-items:center;gap:8px;margin:8px 0 0;color:#c5c8ae;font-size:11px}
.character-profile-note span{padding:3px 9px;border:1px solid #bca47155;border-radius:99px;background:#bca47112}
.character-profile-note b{font-variant-numeric:tabular-nums;color:#e9ce93}
.character-fate-card{position:relative;align-items:flex-start;min-height:97px;margin:9px 0;padding:14px 17px;border-radius:5px}
.character-fate-card.origin{background:linear-gradient(115deg,#f7eed9,#e9dab9);border-color:#d2b77d;box-shadow:inset 0 0 0 3px #fffbebaa,0 9px 20px #091b1f27}
.character-fate-card.origin:after{content:"✦";position:absolute;right:16px;top:7px;font-size:27px;color:#bfa36e7d}
.character-fate-card.modifier{background:linear-gradient(120deg,#2d4141,#1d3438);border-color:#b99b63a3;color:#f2d9a3;box-shadow:inset 0 0 0 2px #d0b26e12}
.character-fate-card.modifier .character-fate-mark{color:#ead298;background:#d0b3781c;border-color:#c8ae78}
.character-fate-card.modifier small{color:#ceb985}.character-fate-card.modifier p{color:#d4d3c1}
.character-fate-card h3{font-size:22px;margin:3px 0 5px}.character-fate-card p{font-size:14px;line-height:1.65}.character-fate-card small{font-size:12px;font-weight:700}
.character-rule-note{margin:12px 0 14px;padding:9px 11px;background:#e2ca8820;border-left-color:#d8ba73}
.character-rule-note p{font-size:12px;line-height:1.65}.character-rule-note span{font-size:11px;color:#c3c9b8}
.character-growth-path{padding:10px 8px;background:#dabd7910;border-color:#c4a97066;border-radius:4px}
.character-growth-path b{font-size:17px}.character-growth-path i{color:#d9bd7f}
.character-tab-note{margin:10px 0;font-size:11px;color:#b7c2b3}
.birth-result .pillar-list{gap:5px;margin:12px 0}
.birth-result .pillar-card{padding:7px 4px;border-color:#bca474;background:#faf2e2}
.birth-result .pillar-card>small{font-size:10px;color:#7d633e}.birth-result .pillar-card>small i{display:none}
.birth-result .pillar-list .pillar-pair b{font-size:22px;color:#6e512e}
.birth-result .pillar-list .pillar-pair>span{background:#f1e3ca;border-color:#c0aa7a55}
.birth-result .pillar-pair em{font-size:8px;color:#8c7758}
.birth-result.is-noble .pillar-card{background:#294045;border-color:#c7a765}.birth-result.is-noble .pillar-card>small,.birth-result.is-noble .pillar-list .pillar-pair b{color:#efd59c}
@keyframes character-orbit-turn{to{transform:rotate(360deg)}}
@keyframes character-aura-breathe{0%,100%{opacity:.34;transform:scale(.94)}50%{opacity:.75;transform:scale(1.08)}}
@keyframes character-mote{0%{opacity:0;transform:translateY(14px) scale(.5)}22%{opacity:.75}72%{opacity:.55}100%{opacity:0;transform:translateY(-55px) scale(1.4)}}
@keyframes character-orbit-burst{0%{opacity:.5;transform:rotate(0) scale(1)}40%{opacity:1;transform:rotate(35deg) scale(1.13)}100%{opacity:.65;transform:rotate(65deg) scale(1)}}
@keyframes character-ring-burst{0%{opacity:.25;transform:scale(.7)}45%{opacity:1;transform:scale(1.17)}100%{opacity:0;transform:scale(1.48)}}
@keyframes character-glow-burst{0%,100%{opacity:.3;transform:scale(.9)}45%{opacity:1;transform:scale(1.32)}}
@keyframes character-hero-cue{0%,100%{transform:translateY(0) scale(1)}36%{transform:translateY(-14px) scale(1.03)}58%{transform:translateY(-8px) scale(1.04)}}
@keyframes character-concept-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
@media(max-width:1150px){.character-story p,.character-visual-footer .character-live-intro{font-size:13px}.character-stats{grid-template-columns:repeat(2,1fr)}.character-stats>div{min-height:78px}.character-motion-action{font-size:11px}}
@media(max-width:760px){.character-visual{min-height:540px}.character-art-window{height:100%}.character-reference-art.character-live-art{height:75%!important}.character-motion{height:71%}.character-visual-footer{left:18px;right:18px;bottom:17px}.character-visual-footer h2{font-size:32px}.character-story{padding:9px 11px 10px 13px}.character-story p,.character-visual-footer .character-live-intro{font-size:12px;line-height:1.58;max-height:100px}.character-visual-top{margin:20px 18px}.character-stats{grid-template-columns:repeat(2,1fr)}.pillar-list{gap:5px}.pillar-list .pillar-card{padding:7px 5px}.pillar-list .pillar-pair b{font-size:23px}.pillar-pair em{font-size:8px}}
@media(prefers-reduced-motion:reduce){.character-orbit,.character-energy:before,.character-energy:after,.character-energy i,.character-art-window.is-concept,.character-visual.is-awakening .character-orbit,.character-visual.is-awakening .character-energy:before,.character-visual.is-awakening .character-energy:after,.character-visual.is-awakening .character-motion,.character-visual.is-awakening .character-reference-art.character-live-art{animation:none!important}}
