/* The player is the center of this page: a living portrait beside a personal fate scroll. */
.character-screen{
  background:radial-gradient(ellipse at 47% 14%,#31515a55,transparent 58%),#081a22;
}
.character-frame{
  grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);
  background:#0b202a;
  border-color:#b99357;
  box-shadow:inset 0 0 0 2px #ead1a335,inset 0 0 0 7px #102b34,0 22px 55px #010e17ab;
}
.character-frame:before{border-color:#a7854c;box-shadow:inset 0 0 0 1px #efd69a66,0 0 0 1px #e8c78630}
.character-visual{
  isolation:isolate;
  border-right:1px solid #b69b6366;
  color:#f7ebcb;
  background:
    radial-gradient(ellipse at 50% 47%,color-mix(in srgb,var(--character-aura) 22%,transparent),transparent 48%),
    linear-gradient(180deg,#0b1f2b88,#0b1f2b24 43%,#091923b8 86%,#091923),
    url('./scene-benming.webp') center / cover no-repeat,
    #102934;
}
.character-visual:before{
  content:"";position:absolute;z-index:0;inset:13% 9% 25%;pointer-events:none;
  background:radial-gradient(circle at center,#f3da9b39 0 11%,#cba7651c 24%,transparent 58%);
  border:1px solid #e7c78326;border-radius:50%;
  box-shadow:0 0 70px 18px color-mix(in srgb,var(--character-aura) 18%,transparent),inset 0 0 50px #d8b66816;
}
.character-visual:after{
  background:linear-gradient(90deg,#091a2888,transparent 15%,transparent 84%,#071a25aa),
    linear-gradient(0deg,#071922 0%,#071922bd 14%,transparent 44%,#081b2888 100%);
}
.character-art-window{z-index:2}
.character-reference-art.character-live-art{filter:drop-shadow(0 16px 25px #020d1cbb) drop-shadow(0 0 12px #f5d68f36)!important}
.character-orbit{z-index:1;box-shadow:0 0 0 15px #cfb16e0e,inset 0 0 0 12px #e8cb8620,0 0 70px color-mix(in srgb,var(--character-aura) 24%,transparent)}
.character-orbit span{color:#ebd29988;text-shadow:0 0 12px #f4d98f88}
.character-visual[data-identity] .character-visual-top{color:#f2dda9}
.character-visual-top>div:first-of-type{
  background:linear-gradient(90deg,#0d2835ea,#173342a8);
  border-bottom:1px solid #d8b77577;
  text-shadow:0 2px 8px #020e17;
}
.character-visual-top small{color:#cfb784}
.character-visual-top strong{color:#fff0c5}
.character-qian-seal{background:radial-gradient(circle,#2c4650,#091f29);box-shadow:0 0 0 5px #b398602e,0 0 22px #e7c37a55,inset 0 0 0 3px #f0d99922}
.character-illustration-tag{background:#0a2434b8;color:#e7cf9e;border-color:#dbbd8055}
.character-motion-action{background:linear-gradient(120deg,#cda963,#f3daa0);border-color:#f6dc9c;color:#2e261b;font-weight:800;box-shadow:0 5px 20px #05162488,0 0 18px #d4a96344}
.character-motion-action span{color:#6b441b}
.character-motion-action:hover{background:#ffe6a8}
.character-vertical-poem{color:#e4ca8f;text-shadow:0 2px 10px #08161f}
.character-vertical-poem span{color:#c6b68d}
.character-visual-footer{bottom:29px}
.character-kicker{color:#dabe7d;text-shadow:0 2px 6px #081822}
.character-visual-footer h2{color:#fff1cb;text-shadow:0 3px 14px #08151d,0 0 23px #c9a05d77}
.character-visual-footer h2 span{color:#e0b96c}
.character-story{
  border:1px solid #e0bd7980;border-left:3px solid #f3d392;
  background:linear-gradient(120deg,#0c2531f2,#18343edf);
  box-shadow:inset 0 1px #f7e5b226,0 9px 25px #03121eb3;
  backdrop-filter:blur(9px);
}
.character-story:before{color:#d8b7773d}
.character-story-label{color:#ebc987}
.character-story p,.character-visual-footer .character-live-intro{color:#f2e6cc;text-shadow:0 1px 4px #07161c}
.character-identity-tags span{background:#132e3bdc;color:#e9d2a2;border-color:#d1ad6a77}
.character-sheet{
  margin:11px 11px 11px 0;
  padding:26px clamp(20px,2.2vw,38px) 20px;
  background:radial-gradient(ellipse at 49% 0,#3856655c,transparent 45%),linear-gradient(148deg,#19323e,#102732 63%,#0c222d);
  border:1px solid #d7b77366;
  box-shadow:inset 0 0 0 3px #e8cb8d0a,inset 0 0 70px #02151e66;
}
.character-sheet:before{
  content:"";position:absolute;pointer-events:none;inset:9px;border:1px solid #d0ae6440;border-radius:2px;
  mask-image:linear-gradient(90deg,#000,transparent 18%,transparent 82%,#000),linear-gradient(0deg,#000,transparent 15%,transparent 85%,#000);
}
.character-sheet-heading{position:relative;align-items:flex-start;padding:2px 0 18px}
.character-sheet-heading .eyebrow{font-size:10px;letter-spacing:.28em;color:#d6ba7e;font-weight:800}
.character-sheet-heading h1{font-size:clamp(33px,2.6vw,48px);letter-spacing:.16em;color:#ffe3a2;text-shadow:0 0 24px #deb9774b;margin:6px 0 0}
.character-heading-caption{font:13px/1.5 var(--display);color:#aebeb6;margin:5px 0 0;letter-spacing:.1em}
.character-owner{display:flex;align-items:center;gap:11px;flex:none;padding:7px 11px 7px 8px;border:1px solid #c7a66873;border-radius:30px 3px 3px 30px;background:linear-gradient(90deg,#d7b87325,#152d38ab);box-shadow:inset 0 1px #f5e0aa24}
.character-owner-seal{display:grid;place-items:center;width:47px;height:47px;border-radius:50%;border:2px solid #ebcf8d;color:#ffebaf;background:radial-gradient(circle,#574927,#182f39 72%);box-shadow:0 0 0 3px #d8b56c33,0 0 15px #d0a95c77;font:25px/1 var(--display)}
.character-owner>span:last-child{display:grid;gap:1px;min-width:72px}
.character-owner small{font-size:9px;letter-spacing:.16em;color:#b2c3b5}
.character-owner strong{font:700 16px/1.3 var(--display);color:#f9e7bc;max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-owner .character-element-badge{padding:0;border:0;background:none;font:10px/1.3 "Microsoft YaHei",sans-serif;color:#dbb975}
.character-owner .character-element-badge{white-space:normal;max-width:126px}
.character-tabs{gap:6px;margin-bottom:20px;padding:5px;border:1px solid #c8aa6a5a;background:#071d2788;border-radius:3px}
.character-tabs button{min-height:42px;border:1px solid transparent;border-radius:2px;font-weight:700}
.character-tabs button[aria-selected=true]{border-color:#d8b77380;background:linear-gradient(130deg,#b8955755,#b895570d);box-shadow:inset 0 1px #f8dea956}
.character-tabs button[aria-selected=true]:after{left:15%;right:15%;bottom:1px}
.character-section-title{margin:19px 0 11px}
.character-section-title h3{font:700 20px/1.3 var(--display);color:#f3d8a1;letter-spacing:.08em}
.character-section-title h3:before{content:"✦";font:12px/1 Georgia,serif;margin-right:8px;color:#d4ac67}
.character-section-title>span{font-size:11px;color:#b5c2b7}
#characterFate .character-pillar-title{margin:4px 0 12px}
#characterFate .character-pillars{position:relative;margin-bottom:26px;padding:18px 17px 16px;border:1px solid #d3b6719c;border-radius:5px;background:radial-gradient(circle at 50% 12%,#bb965a31,transparent 45%),linear-gradient(145deg,#18303a,#0c212c);box-shadow:inset 0 0 0 3px #eacb8420,0 12px 24px #07141f7a}
#characterFate .character-pillars:before{content:"四 柱 盘";display:block;width:max-content;margin:-32px auto 12px;padding:4px 24px;color:#f5d594;background:#17313c;border:1px solid #d0ab6f8c;border-radius:2px;font:700 14px/1.2 var(--display);letter-spacing:.4em;box-shadow:0 4px 12px #091d26}
#characterFate .pillar-list{gap:10px}
#characterFate .pillar-list .pillar-card{padding:11px 9px 14px;min-height:113px;background:linear-gradient(145deg,#fff6df,#e7d8b7);border:1px solid #eed5a2;border-radius:5px;color:#4a3221;box-shadow:inset 0 0 0 3px #fffaf0,0 0 0 1px #a87d3c,0 7px 15px #06192378}
#characterFate .pillar-list .pillar-card:after{content:"";position:absolute;inset:5px;border:1px solid #c09a5d59;pointer-events:none;border-radius:2px}
#characterFate .pillar-list .pillar-card.is-day{background:linear-gradient(145deg,#fff1c9,#eed198);box-shadow:inset 0 0 0 3px #fff9e8,0 0 0 1px #e8c374,0 0 22px #e6bc6659,0 7px 15px #06192378}
#characterFate .pillar-card>small{position:relative;z-index:1;color:#8c5734;letter-spacing:.08em;font-size:11px}
#characterFate .pillar-card>small i{color:#a48353}
#characterFate .pillar-card.is-day>small:before{content:"主";display:inline-grid;place-items:center;width:17px;height:17px;margin-right:2px;border-radius:2px;background:#a33628;color:#fff4d9;font-size:10px}
#characterFate .pillar-pair{position:relative;z-index:1;gap:3px;margin-top:11px}
#characterFate .pillar-list .pillar-pair>span{border:0;background:none;padding:0}
#characterFate .pillar-list .pillar-pair b{font-size:clamp(29px,2.4vw,40px);color:#40291c;text-shadow:0 1px #fff7e7}
#characterFate .pillar-pair em{font-size:9px;color:#9b7954}
#characterFate .character-profile-note{display:flex;align-items:center;gap:10px;margin:18px 0 0;padding:12px 10px 0;border-top:1px solid #d8b77968;color:#e6d7b4;font-size:12px}
#characterFate .character-profile-note span{padding:0;border:0;background:none;border-radius:0}
#characterFate .character-strength-tier{font:700 19px/1.2 var(--display);color:#f4d494;white-space:nowrap}
#characterFate .character-strength-label{white-space:nowrap;color:#c5c7b3}
#characterFate .character-strength-meter{flex:1;min-width:35px;height:8px!important;border:1px solid #c2a2677a!important;border-radius:10px!important;background:#051a24!important;overflow:hidden}
#characterFate .character-strength-meter i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#887746,#f0d58b,#fff1b5);box-shadow:0 0 15px #f1cf80}
#characterFate .character-profile-note strong{font:700 27px/1 Georgia,serif;color:#ffe0a1;font-variant-numeric:tabular-nums}
.character-mapping-note{display:grid;gap:6px;margin:-12px 0 18px;padding:10px 14px;border-left:2px solid #e5c37b;background:#d1af7020;color:#e8dec7;font-size:12px;line-height:1.55}
.character-mapping-note strong{font:700 15px/1.35 var(--display);color:#f7d99d}
.character-mapping-note span{display:block}
.character-mapping-note b{color:#ffdda0;font-weight:700}
.character-mapping-note i{color:#d7b975;font-style:normal;padding:0 3px}
.character-mapping-note small{font-size:10px;color:#b8c6bd}
#characterFate .character-fate-card{gap:15px;min-height:105px;margin:10px 0;padding:17px 18px}
#characterFate .character-fate-card.origin{padding-right:106px;background:linear-gradient(100deg,#fff9e9,#efe0bc 75%,#d6c39d);border-color:#e7c888;box-shadow:inset 0 0 0 3px #fffbf0,0 11px 23px #0817218a}
#characterFate .character-fate-card.origin:after{content:"本\A 命\A 独\A 有";white-space:pre;display:grid;place-items:center;text-align:center;line-height:1.15;right:17px;top:50%;transform:translateY(-50%);width:65px;height:65px;border:3px double #d7aa53;border-radius:50%;background:radial-gradient(circle,#fff1b9,#dfba6e);color:#61401e;font:700 15px/1.15 var(--display);box-shadow:0 0 0 4px #e6c77a44,0 0 19px #eac47280}
#characterFate .character-fate-card.origin .character-fate-mark{background:#fff6d9;border-color:#c8a86e;color:#94682e}
#characterFate .character-fate-card h3{font-size:clamp(22px,1.8vw,28px);letter-spacing:.06em}
#characterFate .character-fate-card p{font-size:13px;line-height:1.75}
#characterFate .character-fate-card.modifier{background:linear-gradient(120deg,#2c444a,#15303b);border-color:#d1b47393;box-shadow:inset 0 0 0 2px #e7c88417,0 7px 18px #0717216b}
#characterFate .character-rule-note{border-left:0;border-top:1px solid #c9a96980;border-bottom:1px solid #c9a96980;background:linear-gradient(90deg,#c9a96919,#c9a96906);padding:10px 13px;margin:12px 0 17px}
#characterFate .character-rule-note svg{color:#e0bf7d;flex:none}
#characterFate .character-rule-note p{font:14px/1.55 var(--display);color:#f3ddb0}
#characterFate .character-rule-note span{font:11px/1.5 "Microsoft YaHei",sans-serif;color:#bdc8ba}
#characterFate .character-growth-path{display:grid;grid-template-columns:1fr 16px 1fr 16px 1fr;gap:6px;border:0;background:none;padding:3px 0 0}
#characterFate .character-growth-path span{position:relative;min-width:0;padding:12px 5px;border:1px solid #d3b67584;border-radius:3px;background:linear-gradient(145deg,#f7ecd1,#c6b484);color:#49331c;box-shadow:inset 0 0 0 3px #fff3d863,0 4px 12px #0518208c}
#characterFate .character-growth-path span:before{content:"✦";display:block;margin-bottom:4px;color:#9a6a34;font-size:12px}
#characterFate .character-growth-path b{font:700 17px/1.25 var(--display);color:#392b20}
#characterFate .character-growth-path small{font-size:10px;color:#655741;margin-top:3px}
#characterFate .character-growth-path i{color:#e3c680;text-shadow:0 0 10px #f3d692}
.character-sheet-footer{position:relative;z-index:1;margin-top:20px;padding-top:14px}
.character-sheet-footer p{color:#d9cbab}
@media(max-width:1100px){
  .character-frame{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .character-owner{gap:7px;padding:5px 7px}
  .character-owner-seal{width:37px;height:37px;font-size:20px}
  .character-owner strong{font-size:13px;max-width:80px}
  .character-heading-caption{font-size:11px}
  #characterFate .character-pillars{padding:16px 10px 13px}
  #characterFate .pillar-list{gap:6px}
  #characterFate .pillar-list .pillar-card{padding:10px 5px}
}
@media(max-width:760px){
  .character-frame{grid-template-columns:1fr}
  .character-visual{min-height:560px;border-right:0;border-bottom:1px solid #c7a86c77}
  .character-sheet{margin:0 9px 9px;padding:21px 18px 19px}
  .character-sheet-heading h1{font-size:32px}
  .character-owner-seal{width:34px;height:34px;font-size:18px}
  .character-owner strong{max-width:70px}
  #characterFate .pillar-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #characterFate .pillar-list .pillar-card{min-height:105px}
  #characterFate .pillar-list .pillar-pair b{font-size:34px}
  #characterFate .character-fate-card.origin{padding-right:17px;padding-bottom:72px}
  #characterFate .character-fate-card.origin:after{width:48px;height:48px;font-size:11px;top:auto;bottom:10px;right:15px;transform:none}
  #characterFate .character-growth-path{gap:4px;grid-template-columns:1fr 11px 1fr 11px 1fr}
  #characterFate .character-growth-path span{padding:9px 2px}
  #characterFate .character-growth-path b{font-size:14px}
  #characterFate .character-growth-path small{font-size:9px}
}
@media(max-width:390px){
  .character-heading-caption{display:none}
  .character-owner small{display:none}
  .character-owner-seal{width:30px;height:30px}
  .character-sheet-heading h1{font-size:27px}
  #characterFate .character-profile-note{gap:5px}
  #characterFate .character-strength-label{font-size:10px}
}