.transformationPanel{font-size:12px}.transformIntro,.transformActive,.transformSummon,.transformConfirm{display:flex;align-items:center;gap:8px;justify-content:space-between}.transformIntro h3{margin:2px 0 8px;font-size:21px;color:#eed8a9}.transformIntro small,.transformHelp,.transformNotice{color:#a5bcb2}.transformActive{padding:8px;background:#244237;border:1px solid #486858;border-radius:7px}.transformActive strong{margin-right:auto;color:#e9ddb9}.transformationPanel button{font-size:12px;padding:7px 9px;min-height:32px}.transformFilters{display:flex;gap:4px;flex-wrap:wrap;margin:10px 0}.transformFilters [aria-pressed=true]{background:#886539;border-color:#e0ba70}.transformLayout{display:grid;grid-template-columns:minmax(0,1fr) 166px;gap:10px}.transformCollection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-content:start;max-height:340px;overflow:auto}.transformCard{display:flex;align-items:center;flex-direction:column;border-color:color-mix(in srgb,var(--rarity) 35%,#233e33)!important;padding:4px!important;min-width:0;background:#152d26}.transformCard.selected{outline:2px solid var(--rarity);outline-offset:-2px;background:#324134}.transformCard small,.transformDetail>small{color:var(--rarity)}.transformCard b{font-size:11px;white-space:nowrap}.transformCard span:last-child{font-size:10px;color:#b5c7be}.transformCard.locked .transformPortrait{opacity:.5;filter:saturate(.45)}.transformPortrait{display:block;width:72px;height:72px;background-repeat:no-repeat;background-position:0 0;flex-shrink:0}.transformDetail{background:radial-gradient(ellipse at 50% 20%,#3a4b38,#142b24 70%);padding:9px;border:1px solid var(--rarity);border-radius:8px;text-align:center;align-self:start;position:sticky;top:0}.transformDetail canvas{width:138px;height:138px;max-width:100%}.transformDetail h4{color:var(--rarity);font-size:17px;margin:5px 0}.transformDetail p{line-height:1.6}.transformHelp{font-size:11px}.transformDetail button{width:100%;background:#6b5734}.transformSummon{margin-top:12px;border-top:1px solid #496452;padding-top:10px;flex-wrap:wrap}.transformSummon>div{display:flex;flex-direction:column;gap:3px;margin-right:auto}.transformSummon span{font-size:11px;color:#accaba}.transformConfirm{padding:10px;margin-top:8px;background:#4a3c27;border:1px solid #c99851;flex-wrap:wrap}.transformRates{margin-top:10px;color:#c0d0c5}.transformRates>div{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 15px}.transformRates p{display:flex;gap:5px;justify-content:space-between;margin:4px 0;font-size:11px}.transformRates small{font-size:10px}.transformNotice{min-height:20px;line-height:1.5;margin:8px 0 0}.milestoneHint{grid-column:1/-1!important;line-height:1.45;color:#c8dcb7!important;white-space:normal!important;font-size:10px!important;margin-top:4px}.attributeCard{height:auto!important}.rewardScene.transform .transformPortrait{width:88px;height:88px}.rewardScene.transform .rewardFace>small{color:var(--rarity)}.rewardScene.rarity4{--glow:#ffd26c}.rewardScene.rarity5{--glow:#ff837b}.rewardScene.transform .rewardCard{border-color:var(--rarity)}
@media(max-width:560px){.transformLayout{grid-template-columns:minmax(0,1fr) 118px;gap:6px}.transformCollection{grid-template-columns:repeat(2,minmax(0,1fr));max-height:300px}.transformDetail{padding:6px}.transformDetail canvas{height:104px;width:104px}.transformDetail h4{font-size:14px}.transformCard b{font-size:10px}.transformPortrait{width:60px;height:60px}.transformRates>div{grid-template-columns:1fr}.transformHelp{font-size:10px}.transformActive{flex-wrap:wrap}.transformActive button{margin-left:auto}.transformIntro h3{font-size:18px}}

.transformCollection{grid-auto-rows:108px}.transformCard{min-height:108px!important;justify-content:flex-start!important;overflow:hidden!important;gap:0!important}.transformCard .transformPortrait{width:56px;height:56px}.transformCard b{font-size:10px}.transformCard small{font-size:10px;line-height:13px}.transformCard span:last-child{line-height:12px}
.characterIdentity>.transformPortrait{width:32px;height:32px}

.rewardScene.transform .rewardFace{gap:3px}.rewardScene.transform .count10 .transformPortrait{width:62px;height:62px}.rewardScene.transform .count1 .transformPortrait{width:110px;height:110px}#rewardOverlay .transform.rarity0{--glow:#ccd8d3!important}#rewardOverlay .transform.rarity1{--glow:#7ce5a0!important}#rewardOverlay .transform.rarity2{--glow:#71bcff!important}#rewardOverlay .transform.rarity3{--glow:#ef91ff!important}#rewardOverlay .transform.rarity4{--glow:#ffcc69!important}#rewardOverlay .transform.rarity5{--glow:#ff8c86!important}.rewardScene.transform .rewardFace b{color:var(--rarity)}
@media(max-width:520px){.rewardScene.transform .count10 .transformPortrait{width:38px;height:38px;grid-column:1;grid-row:1 / span 3}.rewardScene.transform .count10 .rewardFace>span:last-child{grid-column:2}.rewardScene.transform .count10 .rewardFace>b{grid-column:2}}

@media(max-width:560px){.transformLayout{grid-template-columns:minmax(0,1fr)}.transformCollection{grid-template-columns:repeat(3,minmax(0,1fr));max-height:222px}.transformDetail{grid-row:1;position:static;display:grid;grid-template-columns:88px minmax(0,1fr);gap:2px 8px;text-align:left;align-items:center}.transformDetail canvas{grid-column:1;grid-row:1 / span 4;width:88px;height:96px}.transformDetail>small,.transformDetail>h4,.transformDetail>p:not(.transformHelp),.transformDetail>button{grid-column:2}.transformDetail>h4{margin:0}.transformDetail .transformHelp{grid-column:1 / -1;font-size:10px}.transformDetail button{width:auto}.transformRates>div{grid-template-columns:1fr}}