/* Card borders: one effect around the whole profile card. The canvas lies on top of the card and never catches the pointer. */
.has-fx-border{position:relative;isolation:isolate}
/* The canvas reaches --fx-bleed past the card (set by borders.js), so art around the card is never cut off.
   Hosts therefore must not clip: anything that has to stay inside the rounded card clips itself. */
:is(.pp,.hero-card,.reel-card,.studio-preview,.border-sample,.shop-border-card,.pop-card).has-fx-border>.fx-border{position:absolute;left:calc(var(--fx-bleed,0px) * -1);top:calc(var(--fx-bleed-top,var(--fx-bleed,0px)) * -1);width:calc(100% + 2 * var(--fx-bleed,0px));height:calc(100% + var(--fx-bleed,0px) + var(--fx-bleed-top,var(--fx-bleed,0px)));max-width:none;pointer-events:none;z-index:8}

/* studio: a small sample card per option */
.border-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.border-choice{display:grid;gap:7px;justify-items:start;text-align:left;padding:8px 8px 10px;border-radius:12px;border:1px solid #2b3550;background:#141b2c;color:#dfe5f4;cursor:pointer;font-size:12px;font-weight:700}
.border-choice:hover{border-color:#4a5a86}
.border-choice.active{border-color:#c8ff59;box-shadow:0 0 0 1px #c8ff59}
.border-choice.is-mythic{background:linear-gradient(160deg,#1b2a24,#141b2c 60%)}
.border-choice .opt-tag{justify-self:start}
.border-sample,.shop-border-card{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#2a2152 0 30%,#161d31 30%)}
.border-sample>i,.shop-border-card>i{position:absolute;left:14%;top:21%;width:26%;aspect-ratio:1;border-radius:50%;background:#2c3756;box-shadow:0 0 0 3px #161d31}
.border-sample>b,.shop-border-card>b{position:absolute;left:14%;height:6%;border-radius:4px;background:#2c3756}
.border-sample>b{top:52%;width:56%}.border-sample>b+b{top:63%;width:38%}
.opt-tag.is-mythic{background:linear-gradient(90deg,#1f6b3c,#b8306a);color:#fff3d6}

/* shop: the sample card sits in the art area */
.shop-art.has-scene>.shop-border-card{position:absolute;inset:8px auto 8px 50%;transform:translateX(-50%);width:auto;height:auto;aspect-ratio:4/5;border:0;box-shadow:none}
.shop-border-card>b{top:54%;width:56%}.shop-border-card>b+b{top:66%;width:38%}
.shop-rarity.is-mythic{background:linear-gradient(90deg,#5fe08b,#ff6fa5,#ffd76a);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.shop-item.is-mythic{box-shadow:0 0 0 1px #ff6fa555,0 0 22px #5fe08b22}
.studio2-stage.has-fx-border>.studio2-badge{z-index:9}

/* Room for the border around the card: the hosts no longer clip, so art that reaches past the card stays whole.
   What must stay inside the rounded card clips itself: the background scene and the banner. */
:is(.pp,.hero-card,.reel-card,.studio-preview,.border-sample,.shop-border-card,.pop-card).has-fx-border{overflow:visible}
.has-fx-border>.fx-background{border-radius:inherit}
.pp.has-fx-border .pp-banner{border-radius:15px 15px 0 0;overflow:hidden}
.hero-card.has-fx-border>.hero-card-banner{border-radius:19px 19px 0 0}
.reel-card.has-fx-border>.reel-banner{border-radius:18px 18px 0 0;overflow:hidden}
.studio-preview.has-fx-border>.studio-banner{border-radius:13px 13px 0 0;overflow:hidden}
/* the start page slider clips sideways for its fade; give the borders room above and below */
.hero-marquee:has(.has-fx-border){padding-top:26px;padding-bottom:30px;margin-top:-18px;margin-bottom:-16px}
.shop-art.has-scene>.shop-border-card{inset:15px auto 15px 50%}
.shop-art:has(.shop-border-card){overflow:visible}
.pp.has-fx-border{margin-top:calc(var(--fx-bleed-top,0px) * .8);margin-bottom:var(--fx-bleed,0px)}
.studio-preview.has-fx-border>.studio-content.has-fx-bg{clip-path:inset(-60px 0 0 0 round 0 0 13px 13px)}
.rail-preview.has-fx-border{margin:calc(var(--fx-bleed-top,0px) * .6) 0 var(--fx-bleed,0px)}
@media (min-width:731px){.people-reel:has(.has-fx-border){gap:34px 30px}}
.hero-marquee:has(.has-fx-border) .hero-lane{gap:30px;padding-right:30px}
.hero-card.has-fx-border{--fx-bleed-max:24px}