/* Reference-based Tacticool cutouts. Decorative only: never intercept controls. */
:root{--character-support:url('images/characters/support-lean.png');--character-account:url('images/characters/account-phone.png');--character-rewards:url('images/characters/rewards-present.png')}
.supporter-page .supporter-name-preview{position:relative;margin-top:250px;padding-top:23px;isolation:isolate}
.supporter-page .supporter-name-preview:before{content:'';position:absolute;right:12px;bottom:calc(100% - 17px);width:230px;height:258px;background:var(--character-support) center bottom/contain no-repeat;pointer-events:none;filter:drop-shadow(0 10px 15px #0003)}
.supporter-page .supporter-hero{align-items:center}
/* A character rests at the edge of the home support card. */
.home-premium.home-support-compact{grid-template-columns:145px minmax(0,1fr) 230px;overflow:visible;min-height:175px;padding-left:18px}
.home-support-compact .home-support-symbol{display:block;position:relative;align-self:end;width:145px;height:148px;margin:-26px 0 -16px;border:0;background:var(--character-support) center bottom/contain no-repeat;box-shadow:none;border-radius:0}
.home-support-compact .home-support-symbol>svg{display:none}
/* Reserve a dedicated illustration area, including at narrow widths. */
.market-how>header,.monthly-prize-guide>header,.battle-guide-intro,.connection-panel#youtube>header{position:relative;min-height:155px;padding-right:160px!important}
.market-how>header:after,.monthly-prize-guide>header:after,.battle-guide-intro:after,.connection-panel#youtube>header:after{content:'';position:absolute;right:8px;bottom:0;width:140px;height:155px;background:var(--character-rewards) center bottom/contain no-repeat;pointer-events:none}
.battle-guide-intro:after,.connection-panel#youtube>header:after{background-image:var(--character-account)}
.connection-panel#youtube>header{flex-wrap:wrap;align-content:center;gap:12px}
.connection-panel#youtube>header .connection-bonus{margin-left:0}
.market-how>header{margin-bottom:20px;border-bottom:1px solid #67502c55;padding-bottom:16px}
.monthly-prize-guide>header{margin-bottom:0;padding-bottom:16px;border-bottom:1px solid #67502c55}
.battle-guide-intro{display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid #344d6255;padding-bottom:18px}
/* Rewards and account help in Mission Center. */
.missions-aside .mission-wheel{position:relative;padding-top:145px}
.missions-aside .mission-wheel .wheel-graphic{display:none}
.missions-aside .mission-wheel:before{content:'';position:absolute;top:8px;right:18px;width:130px;height:145px;background:var(--character-rewards) center/contain no-repeat;pointer-events:none}
@media(max-width:1100px){.home-premium.home-support-compact{grid-template-columns:110px minmax(0,1fr) 200px;gap:18px}.home-support-compact .home-support-symbol{width:110px;height:130px}.supporter-page .supporter-name-preview:before{width:205px;height:230px}.supporter-page .supporter-name-preview{margin-top:220px}}
@media(max-width:760px){.home-premium.home-support-compact{grid-template-columns:minmax(0,1fr) 100px;padding:24px;gap:18px}.home-support-compact .home-support-symbol{grid-column:2;grid-row:1;align-self:end;width:100px;height:125px;margin:0 -8px -10px 0}.home-support-compact .home-premium-copy{grid-column:1;grid-row:1;min-width:0}.home-support-compact .home-premium-action{grid-column:1/-1;grid-row:2}.home-support-compact .home-premium-copy h2{font-size:23px}.home-support-compact .home-premium-copy p{font-size:11px}.supporter-page .supporter-name-preview{margin-top:155px}.supporter-page .supporter-name-preview:before{height:175px;width:155px;right:8px}.market-how>header,.monthly-prize-guide>header,.battle-guide-intro,.connection-panel#youtube>header{padding-right:115px!important;min-height:140px}.market-how>header:after,.monthly-prize-guide>header:after,.battle-guide-intro:after,.connection-panel#youtube>header:after{width:100px;height:130px;right:0}.connection-panel#youtube>header .connection-icon{display:none}.connection-panel#youtube>header h2{font-size:19px}.connection-panel#youtube>header p{font-size:12px}}
@media(max-width:380px){.home-premium.home-support-compact{grid-template-columns:minmax(0,1fr) 78px;padding:20px;gap:10px}.home-support-compact .home-support-symbol{width:84px;height:110px}.home-support-compact .home-premium-copy h2{font-size:21px}}
@media print{.supporter-name-preview:before,.home-support-symbol,.market-how>header:after,.monthly-prize-guide>header:after,.battle-guide-intro:after,.connection-panel#youtube>header:after,.mission-wheel:before{display:none!important}}

/* Keep illustrations within the content's natural height. */
.supporter-page .supporter-name-preview{margin-top:28px;padding-top:22px;padding-right:130px;min-height:105px}
.supporter-page .supporter-name-preview:before{right:0;bottom:0;width:115px;height:128px}
.supporter-page .supporter-hero{align-items:start}
.market-how>header,.monthly-prize-guide>header,.battle-guide-intro,.connection-panel#youtube>header{min-height:0;padding-right:105px!important}
.market-how>header:after,.monthly-prize-guide>header:after,.battle-guide-intro:after,.connection-panel#youtube>header:after{width:85px;height:94px;max-height:100%;right:4px;bottom:0}
.missions-aside .mission-wheel{padding-top:24px;text-align:left}
.missions-aside .mission-wheel:before{width:66px;height:74px;top:12px;right:10px}
.missions-aside .mission-wheel .eyebrow,.missions-aside .mission-wheel h3{padding-right:65px}
.missions-aside .mission-wheel p{margin-top:18px}
@media(max-width:760px){
 .supporter-page .supporter-name-preview{margin-top:24px;padding-right:100px;min-height:95px}
 .supporter-page .supporter-name-preview:before{width:90px;height:100px;right:0}
 .market-how>header,.monthly-prize-guide>header,.battle-guide-intro,.connection-panel#youtube>header{min-height:0;padding-right:85px!important}
 .market-how>header:after,.monthly-prize-guide>header:after,.battle-guide-intro:after,.connection-panel#youtube>header:after{width:70px;height:80px;max-height:100%}
}

/* Let hands and silhouettes cross the card edge instead of floating above it. */
.monthly-prize-guide,.market-how,.battle-guide-intro,.connection-panel#youtube{overflow:visible}
.monthly-prize-guide>header,.market-how>header,.battle-guide-intro,.connection-panel#youtube>header{isolation:isolate;padding-right:135px!important}
.monthly-prize-guide>header:after,.market-how>header:after,.battle-guide-intro:after,.connection-panel#youtube>header:after{width:115px;height:126px;max-height:none;bottom:-18px;right:12px;z-index:3;filter:drop-shadow(0 5px 3px #0005)}
.monthly-prize-guide>header{border-bottom:0}
.market-how>header:after{bottom:-30px}
.supporter-page .supporter-name-preview{border:1px solid #66505a;border-radius:12px;padding:22px 145px 22px 20px;background:linear-gradient(110deg,#251b20,#151519);overflow:visible;min-height:105px}
.supporter-page .supporter-name-preview:before{width:130px;height:144px;bottom:-12px;right:8px;z-index:2}
.missions-aside .mission-wheel{overflow:visible}
.missions-aside .mission-wheel:before{width:90px;height:100px;top:-28px;right:5px;z-index:2;filter:drop-shadow(0 5px 3px #0005)}
.missions-aside .mission-wheel .eyebrow,.missions-aside .mission-wheel h3{padding-right:80px}
.home-support-compact .home-support-symbol{z-index:2;transform:translateY(12px)}
@media(max-width:760px){
 .monthly-prize-guide>header,.market-how>header,.battle-guide-intro,.connection-panel#youtube>header{padding-right:98px!important}
 .monthly-prize-guide>header:after,.market-how>header:after,.battle-guide-intro:after,.connection-panel#youtube>header:after{width:85px;height:94px;bottom:-13px;right:3px}
 .market-how>header:after{bottom:-26px}
 .supporter-page .supporter-name-preview{padding:20px 108px 20px 14px}
 .supporter-page .supporter-name-preview:before{width:102px;height:113px;bottom:-10px;right:0}
}