/* 卡牌详情 V1.8：三区构图，纯黑舞台与心约统一左上身份区。 */
.app:has(#detail:not([hidden]))>.pact-topbar{display:none!important}
.character-view{padding:0!important}
.detail-reference{position:relative;display:grid;grid-template-columns:27% 40% 33%;grid-template-rows:84px minmax(0,1fr);height:100%;background:#000}
.detail-reference:before{display:none}
.detail-reference:after{content:"D O C U M E N T";position:absolute;z-index:0;top:3%;right:5%;pointer-events:none;color:rgba(158,84,57,.15);font:400 clamp(18px,2vw,40px)/1 var(--sans);letter-spacing:.22em;white-space:nowrap}
.detail-reference-nav{grid-column:1/-1;grid-row:1;position:relative;z-index:8;display:block;min-width:0}
.detail-reference-nav .page-header__inner{min-height:84px;padding:8px var(--heart-header-right) 8px var(--heart-header-left);gap:var(--heart-header-gap)}
.detail-reference-home,.detail-reference-tools{display:flex;align-items:center;gap:var(--heart-header-gap)}
.detail-reference-home{flex:none;margin-right:var(--heart-header-gap)}
.detail-reference-home strong{font:600 var(--heart-header-title)/1 var(--serif);letter-spacing:.1em;color:#eee8dc;white-space:nowrap}
.detail-reference-nav button{width:52px;height:52px;min-width:44px;min-height:44px;display:grid;place-items:center;border:0;background:transparent;color:#e7e0d3;padding:0}
.detail-reference-nav .page-header__back{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:6px}
.detail-reference-nav .page-header__title strong{font:600 var(--heart-header-title)/1 var(--serif);letter-spacing:.1em;color:#eee8dc}
.detail-reference-home button{width:44px;height:44px;min-width:44px;min-height:44px}
.detail-reference-home button:first-child{border-radius:6px}
.detail-reference-home button:first-child .back-glyph{display:block;font:400 28px/1 var(--serif);transform:translateY(-3px)}
.detail-reference-home button[data-view="team"]{width:52px;height:52px;border:0;border-radius:0;background:transparent}
.detail-reference-nav button:hover,.detail-reference-nav button:focus-visible{color:#dfaa79;background:rgba(255,255,255,.05);outline:2px solid #e4bd88;outline-offset:2px}
.detail-reference-nav svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.detail-reference-home button[data-view="team"] svg,.detail-reference-team svg{width:36px;height:36px}
.detail-reference-home button[data-view="team"]:hover,.detail-reference-tools button:hover{color:#e7e0d3;background:transparent;outline:none}
.detail-reference-tools{margin-left:0;gap:var(--heart-header-gap)}
.detail-reference-nav .detail-reference-tools{margin-left:0!important}
.detail-reference-team{flex:0 0 52px}
.detail-reference-tools button{width:55px;height:55px}
.detail-reference-tools svg{width:43px;height:43px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.detail-reference .character-overview,.detail-reference .character-growth{position:relative;z-index:1;min-width:0;min-height:0;border:0;background:transparent;overflow:auto;scrollbar-width:thin;scrollbar-color:#796a5b transparent}
.detail-reference .character-overview{padding:clamp(18px,4vh,64px) clamp(16px,4vw,96px) clamp(16px,6vh,70px) max(4.8vw,env(safe-area-inset-left));display:flex;flex-direction:column;gap:0}
.detail-reference .affinity-mark{width:clamp(82px,8vw,150px);height:clamp(82px,8vw,150px);flex:none;margin-bottom:clamp(20px,5vh,64px);border:0;border-radius:50%;background:transparent;box-shadow:none}
.detail-reference .affinity-mark .stat-icon{--icon-size:clamp(42px,4vw,74px)}
.detail-reference .affinity-mark small{margin-top:0;color:#d3ac76;font:600 11px/1.2 var(--serif);letter-spacing:.07em}
.detail-reference .character-meta{margin:clamp(30px,5vh,62px) 0 0;min-width:0}
.detail-reference .character-stars{display:flex;gap:7px;margin-bottom:clamp(12px,2vh,28px);color:#f1dfad;letter-spacing:0}
.detail-reference .character-stars svg{width:clamp(18px,2vw,29px);height:clamp(18px,2vw,29px);fill:currentColor;filter:drop-shadow(0 0 7px rgba(242,203,136,.35))}
.detail-reference .character-meta h1{margin:0 0 3px;font:600 clamp(28px,2.45vw,56px)/1.25 var(--serif);color:#e8e3db;white-space:nowrap}
.detail-reference .character-meta p{font:500 clamp(15px,1.2vw,25px)/1.3 var(--serif);color:#c8beb3;white-space:nowrap}
.detail-reference-progress{margin-top:clamp(14px,3vh,36px);display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:10px;font:600 clamp(11px,1vw,16px)/1.2 var(--serif);color:#b89976}
.detail-reference-progress i{height:6px;position:relative;border:2px solid rgba(227,215,193,.28);font-style:normal}
.detail-reference-progress i b{position:absolute;inset:-2px auto -2px -2px;background:#d7aa73}
.detail-reference-progress strong{font:500 clamp(12px,1vw,18px)/1 var(--mono);color:#cec9c2}
.detail-reference .role-keywords{display:flex;gap:0;flex-wrap:wrap;margin-top:clamp(12px,2vh,25px);color:#e6ded1}
.detail-reference .role-keywords span{padding:4px 12px;background:rgba(14,15,16,.28);border-right:1px solid rgba(235,226,211,.15);font:600 clamp(11px,1vw,16px)/1.35 var(--serif);color:#dbd0c2}
.detail-reference .personal-stats{flex:none;margin-top:auto;padding:0;border:0;background:transparent;border-radius:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 20px;min-height:0}
.detail-reference .personal-stats .stats-title{grid-column:1/-1;padding:0 0 4px;min-height:36px;border-bottom:1px solid rgba(235,226,211,.16);font:600 clamp(15px,1.25vw,24px)/1.4 var(--serif);color:#af885d}
.detail-reference .personal-stats .stats-title i{font-size:.7em;color:#ba8d59}
.detail-reference .personal-stats>span:not(.stats-title){min-width:0;display:flex;align-items:center;gap:5px;border-bottom:1px solid rgba(235,226,211,.07);white-space:nowrap;font:500 clamp(11px,1vw,18px)/1.5 var(--serif);color:#a6815c}
.detail-reference .personal-stats .stat-icon{--icon-size:clamp(12px,1.25vw,21px)}
.detail-reference .personal-stats b{margin-left:auto;color:#c8c1b9;font:500 clamp(11px,1.2vw,20px)/1.4 var(--mono)}
.detail-reference .character-art{grid-column:2;grid-row:2;overflow:visible;min-width:0;min-height:0;border:0;background:transparent}
.detail-reference .character-art:before{display:none}
.detail-reference .character-art img{position:absolute;z-index:2;inset:4% 0 0;width:100%;height:96%;max-width:none;object-fit:contain;object-position:center bottom;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 68%,transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 68%,transparent 100%);filter:drop-shadow(0 25px 35px rgba(0,0,0,.3))}
.detail-reference .character-art .placeholder{position:absolute;inset:10% 0 0;display:grid;place-items:center;font:700 11vw/1 var(--serif);color:#9c786a}
.detail-reference .character-growth{grid-column:3;grid-row:2;padding:clamp(12px,4vh,52px) max(4.7vw,env(safe-area-inset-right)) clamp(18px,5vh,60px) 12px;display:flex;flex-direction:column;gap:0}
.detail-reference .growth-primary{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.detail-reference .growth-primary button{min-height:clamp(76px,8vw,135px);display:grid;grid-template-columns:minmax(0,1fr) 20%;overflow:hidden;border:0;border-radius:2px;background:#eae0d2;color:#25221f;text-align:left}
.detail-reference .growth-primary button>span{min-width:0;display:grid;align-content:center;gap:2px;padding:10px 14px}
.detail-reference .growth-primary small{color:#2e342f;font:600 clamp(16px,1.5vw,27px)/1.2 var(--serif);letter-spacing:0}
.detail-reference .growth-primary strong{margin:0;font:500 clamp(20px,2vw,37px)/1 var(--mono);color:#29312f}
.detail-reference .growth-primary strong i{font-size:.47em;color:#545a57}
.detail-reference .growth-primary em{font:400 clamp(10px,.8vw,15px)/1.15 var(--sans);color:#6d6b66}
.detail-reference .growth-primary button>b{height:100%;display:grid;place-items:center;border:0;background:#bc603a;color:#211714;font-size:0}
.detail-reference .growth-primary button>b::before,.detail-reference .growth-primary button>b::after{background:#211714}
.detail-reference .resonance-block{margin-top:clamp(20px,3vh,45px);display:grid;gap:0;min-width:0}
.detail-reference .resonance-heading{height:46px;min-height:46px;justify-content:flex-start;width:42%;padding:0 12px;border:0;background:#303a30;color:#d8ded1;font:600 clamp(13px,1.2vw,20px)/1.2 var(--serif);white-space:nowrap}
.detail-reference .resonance-heading small{display:none}
.detail-reference .skills-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:62%;margin:14px 10% 0 27%;min-width:0}
.detail-reference .skills-row button{position:relative;min-width:0;min-height:clamp(104px,7vw,145px);padding:8px;display:flex;flex-direction:column;justify-content:end;align-items:start;overflow:hidden;border:1px solid rgba(232,224,208,.16);border-radius:1px;background:radial-gradient(circle at 70% 25%,color-mix(in srgb,var(--character-role) 62%,transparent),transparent 50%),linear-gradient(145deg,#aaa290,#1f2021 58%,#121313);color:#f4e9d6;text-align:left}
.detail-reference .skills-row button:before{inset:5px;border:1px solid rgba(244,232,212,.35);pointer-events:none}
.detail-reference .skills-row button .skill-symbol{position:absolute;z-index:1;top:10%;left:50%;transform:translateX(-50%);margin:0;font:600 clamp(32px,4vw,70px)/1 var(--serif);color:#d4b889;text-shadow:0 4px 10px #141414}
.detail-reference .skills-row button small{position:relative;z-index:2;color:#d1b995;font:500 clamp(9px,.8vw,13px)/1.1 var(--serif);letter-spacing:0;white-space:nowrap}
.detail-reference .skills-row button strong{position:relative;z-index:2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 clamp(10px,.85vw,15px)/1.2 var(--serif);color:#f1e8d7}
.detail-reference .growth-footer-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:20px}
.detail-reference .growth-footer-actions button{min-width:0;min-height:clamp(70px,8vw,115px);padding:12px 16px;display:flex;align-items:flex-end;justify-content:space-between;border:0;border-radius:1px;background:#e7ddcf;color:#252825;text-align:left}
.detail-reference .growth-footer-actions button:last-child{background:#77706a;color:#e8e4dc}
.detail-reference .growth-footer-actions button span{font:600 clamp(17px,1.5vw,28px)/1.2 var(--serif)}
.detail-reference .growth-footer-actions button small{font:500 clamp(10px,.85vw,15px)/1 var(--mono);letter-spacing:0;color:inherit}
@media(max-width:1000px),(max-height:560px){
  .detail-reference{grid-template-columns:25% 34% 41%;grid-template-rows:52px minmax(0,1fr)}
  .detail-reference-nav .page-header__inner{min-height:52px;padding:4px var(--heart-header-right) 4px var(--heart-header-left);gap:var(--heart-header-gap)}
  .detail-reference-home button[data-view="team"]{width:44px;height:44px}
  .detail-reference-tools{gap:var(--heart-header-gap)}
  .detail-reference-nav button,.detail-reference-tools button{width:44px;height:44px}
  .detail-reference-team{flex-basis:44px}
  .detail-reference-nav svg{width:26px;height:26px}.detail-reference-tools svg{width:30px;height:30px}
  .detail-reference-tools{margin-left:0;gap:var(--heart-header-gap)}
  .detail-reference .character-overview{padding:8px 6px 8px max(10px,env(safe-area-inset-left))}
  .detail-reference .affinity-mark{display:grid;width:58px;height:58px;margin-bottom:4px}.detail-reference .affinity-mark .stat-icon{--icon-size:32px}.detail-reference .affinity-mark small{font-size:8px}
  .detail-reference .character-meta{margin:5px 0 0}.detail-reference .character-stars{gap:3px;margin-bottom:4px}.detail-reference .character-stars svg{width:14px;height:14px}
  .detail-reference .character-meta h1{font-size:20px}.detail-reference .character-meta p{font-size:11px}
  .detail-reference-progress{margin-top:5px;gap:4px;font-size:10px}.detail-reference-progress strong{font-size:10px}
  .detail-reference .role-keywords{margin-top:5px}.detail-reference .role-keywords span{padding:2px 5px;font-size:10px}
  .detail-reference .personal-stats{margin-top:auto;gap:1px 4px}.detail-reference .personal-stats .stats-title{min-height:26px;font-size:12px}
  .detail-reference .personal-stats>span:not(.stats-title){font-size:10px}.detail-reference .personal-stats .stat-icon{--icon-size:10px}.detail-reference .personal-stats b{font-size:10px}
  .detail-reference .character-art img{inset:0;width:100%;height:100%}
  .detail-reference .character-growth{padding:7px max(10px,env(safe-area-inset-right)) 8px 3px}
  .detail-reference .growth-primary{gap:4px}.detail-reference .growth-primary button{min-height:63px;grid-template-columns:minmax(0,1fr) 25%}.detail-reference .growth-primary button>span{padding:4px 6px}.detail-reference .growth-primary small{font-size:12px}.detail-reference .growth-primary strong{font-size:15px}.detail-reference .growth-primary em{font-size:9px}.detail-reference .growth-primary button>b::before,.detail-reference .growth-primary button>b::after{width:12px}
  .detail-reference .resonance-block{margin-top:9px}.detail-reference .resonance-heading{width:42%;height:34px;min-height:34px;padding:0 5px;font-size:11px}
  .detail-reference .skills-row{gap:3px;width:100%;margin:5px 0 0}.detail-reference .skills-row button{min-height:88px;padding:3px}.detail-reference .skills-row button .skill-symbol{font-size:30px}.detail-reference .skills-row button small{font-size:8px}.detail-reference .skills-row button strong{font-size:9px}
  .detail-reference .growth-footer-actions{gap:4px;padding-top:6px}.detail-reference .growth-footer-actions button{min-height:47px;padding:4px 6px}.detail-reference .growth-footer-actions button span{font-size:12px}.detail-reference .growth-footer-actions button small{font-size:9px}
}

/* V2.1：已确认的四维配色、培养按钮与技能卡。 */
.detail-reference .personal-stats .stats-title{color:#e8dfd1;border-color:rgba(219,196,159,.32)}
.detail-reference .personal-stats .stats-title i{color:#c9a475}
.detail-reference .personal-stats>span:not(.stats-title){color:#c9c0b4;border-color:rgba(228,216,197,.13)}
.detail-reference .personal-stats b{color:#f0ece7;font-weight:600}
.detail-reference .growth-primary{gap:12px}
.detail-reference .growth-primary button{position:relative;border:1px solid #75624b;border-radius:3px;background:linear-gradient(145deg,#211e1a,#171615);color:#f4ede2;box-shadow:inset 0 1px rgba(242,220,186,.13)}
.detail-reference .growth-primary button>span{padding-left:18px}
.detail-reference .growth-primary small{color:#ddc7a7}
.detail-reference .growth-primary strong{color:#f4ede2;font-weight:600}
.detail-reference .growth-primary strong i{color:#aaa196}
.detail-reference .growth-primary em{color:#aaa096}
.detail-reference .growth-primary button>b{margin:9px 9px 9px 0;height:auto;border:1px solid #ad8a60;border-radius:2px;background:#30281f;color:#eac89b}
.detail-reference .growth-primary button>b::before,.detail-reference .growth-primary button>b::after{background:#edc897}
.detail-reference .resonance-block{margin-top:30px}
.detail-reference .resonance-heading{width:100%;height:44px;min-height:44px;padding:0;border-bottom:1px solid rgba(219,196,159,.3);background:none;color:#e8dfd1;font-size:19px}
.detail-reference .skills-row{width:100%;margin:16px 0 0;gap:10px}
.detail-reference .skills-row button{min-height:0;aspect-ratio:1;padding:10px;justify-content:center;align-items:center;background:linear-gradient(150deg,#28241f,#171615 75%);border:1px solid #74614a;border-radius:50%;box-shadow:inset 0 1px rgba(236,210,171,.14);text-align:center}
.detail-reference .skills-row button:before{display:none;content:none}
.detail-reference .skills-row button .skill-symbol{position:static;top:auto;left:auto;transform:none;width:35px;height:35px;margin:0 0 6px;display:grid;place-items:center;color:#ddb990;text-shadow:none}
.detail-reference .skills-row button .skill-symbol svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.detail-reference .skills-row button small{font-size:12px;color:#cbb397;text-align:center}
.detail-reference .skills-row button strong{font-size:15px;color:#f1e8dc;text-align:center}
.detail-reference .growth-footer-actions{gap:12px}
.detail-reference .growth-footer-actions button{min-height:100px;padding:16px 17px;border:1px solid #8a7257;border-radius:3px;background:#2d251d;color:#efddc4;box-shadow:inset 0 1px rgba(239,217,180,.13)}
.detail-reference .growth-footer-actions button:last-child{background:#21201e;border-color:#72675b;color:#e4ddd3}
.detail-reference .growth-footer-actions button span{font-size:25px}
.detail-reference .growth-footer-actions button small{font-size:14px}
@media(max-width:1000px),(max-height:560px){
 .detail-reference .growth-primary{gap:5px}
 .detail-reference .growth-primary button>span{padding-left:6px}
 .detail-reference .growth-primary button>b{margin:4px 4px 4px 0}
 .detail-reference .resonance-block{margin-top:9px}
 .detail-reference .resonance-heading{height:30px;min-height:30px;font-size:11px}
 .detail-reference .skills-row{gap:4px;margin-top:5px}
 .detail-reference .skills-row button{min-height:0;padding:5px}
 .detail-reference .skills-row button .skill-symbol{width:21px;height:21px;margin-bottom:2px}
 .detail-reference .skills-row button .skill-symbol svg{width:20px;height:20px}
 .detail-reference .skills-row button small{font-size:8px}
 .detail-reference .skills-row button strong{font-size:9px}
 .detail-reference .growth-footer-actions{gap:4px}
 .detail-reference .growth-footer-actions button{min-height:47px;padding:5px}
 .detail-reference .growth-footer-actions button span{font-size:12px}
 .detail-reference .growth-footer-actions button small{font-size:9px}
}

/* V2.10 annotated detail cleanup: role is a tag, imprint follows the relationship panel reference. */
.detail-reference .role-keywords{margin-top:clamp(14px,2.5vh,28px);gap:8px}
.detail-reference .role-keywords .role-tag{display:inline-flex;align-items:center;padding:6px 14px;border:1px solid rgba(220,180,126,.5);border-radius:3px;background:rgba(220,180,126,.1);color:#e7c89c;font:600 clamp(11px,1vw,16px)/1.1 var(--serif)}
.detail-reference .heart-slot-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;margin:clamp(16px,2.4vh,30px) 0 0;padding:12px 14px;border:1px solid rgba(219,196,159,.34);border-radius:2px;background:linear-gradient(105deg,rgba(46,39,31,.88),rgba(16,16,15,.86));min-width:0}
.detail-reference .heart-slot-glyph{width:42px;height:42px;display:grid;place-items:center;color:#e4bd88;font:32px/1 var(--serif)}
.detail-reference .heart-slot-glyph .resource-icon{width:40px;height:40px;display:block;object-fit:contain;filter:drop-shadow(0 3px 7px rgba(0,0,0,.4))}
.detail-reference .heart-slot-card div{display:grid;gap:3px;min-width:0}
.detail-reference .heart-slot-card small{color:#dcb784;font:600 11px/1.2 var(--serif);letter-spacing:.08em}
.detail-reference .heart-slot-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f0e8dc;font:600 clamp(14px,1.05vw,18px)/1.2 var(--serif)}
.detail-reference .heart-slot-card span:not(.heart-slot-glyph){color:#aaa096;font:10px/1.25 var(--sans)}
.detail-reference .heart-slot-card button{min-width:64px;min-height:44px;padding:8px 12px;border:1px solid rgba(220,180,126,.5);border-radius:2px;background:rgba(220,180,126,.1);color:#e7c89c;font:600 12px/1 var(--serif)}
.detail-reference .heart-slot-card button:hover,.detail-reference .heart-slot-card button:focus-visible{background:rgba(220,180,126,.2);outline:2px solid #e4bd88;outline-offset:2px}
.detail-reference .personal-stats,.detail-reference-progress{display:none!important}
.detail-reference .detail-stat-grid{margin-top:auto;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(219,196,159,.3);border-bottom:1px solid rgba(219,196,159,.18)}
.detail-reference button.detail-stat-grid{appearance:none;text-align:left;background:transparent;color:inherit;cursor:pointer}
.detail-reference .detail-stat-heading{grid-column:1/-1;min-height:34px;display:flex;align-items:center;justify-content:space-between;padding:4px 8px;color:#e8dfd1;font:600 12px/1.2 var(--serif)}
.detail-reference .detail-stat-heading i{color:#c9a475;font:400 10px/1.2 var(--sans)}
.detail-reference .detail-stat-grid>span:not(.detail-stat-heading){min-height:44px;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:7px;padding:7px 8px;border-bottom:1px solid rgba(219,196,159,.12);color:#c7b79f}
.detail-reference .detail-stat-grid>span:nth-last-child(-n+2){border-bottom:0}
.detail-reference .detail-stat-grid svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}
.detail-reference .detail-stat-grid small{font:12px/1.2 var(--serif);color:#bdb3a6}
.detail-reference .detail-stat-grid b{font:600 15px/1 var(--mono);color:#f0ece7}

@media(max-width:1000px),(max-height:560px){.detail-reference .detail-stat-grid>span{min-height:31px;grid-template-columns:16px minmax(0,1fr) auto;gap:4px;padding:3px 4px}.detail-reference .detail-stat-grid svg{width:13px;height:13px}.detail-reference .detail-stat-grid small{font-size:9px}.detail-reference .detail-stat-grid b{font-size:10px}.detail-reference .role-keywords{margin-top:6px}.detail-reference .role-keywords .role-tag{padding:4px 8px;font-size:10px}.detail-reference .heart-slot-card{grid-template-columns:32px minmax(0,1fr) auto;gap:7px;margin-top:8px;padding:7px 8px}.detail-reference .heart-slot-glyph{width:30px;height:30px;font-size:23px}.detail-reference .heart-slot-glyph .resource-icon{width:29px;height:29px}.detail-reference .heart-slot-card small{font-size:9px}.detail-reference .heart-slot-card strong{font-size:11px}.detail-reference .heart-slot-card span:not(.heart-slot-glyph){font-size:8px}.detail-reference .heart-slot-card button{min-width:48px;min-height:36px;padding:5px 7px;font-size:10px}}