/* R12.13 — real user-approved graphical frame extracted from the supplied artwork.
   Top of frame is transparent. The game's own square artwork sits underneath.
   Never hardcode cover, title, edition, price or cart action into the skin. */
.card.bpx-skin-card {
  position:relative;isolation:isolate;display:block;min-height:0;height:auto;
  aspect-ratio:944 / 1428;overflow:hidden;padding:0;margin:0;
  container-type:inline-size;border:0;border-radius:7.2% / 4.75%;
  background:linear-gradient(180deg,#0c2836 0%,#0d3031 68%,#071924 100%);
  box-shadow:0 16px 40px #0008,0 0 0 1px #4eb6b488;
  --bpx-skin:url('/bearplayx-r12-preview/media/bearplayx-approved-frame.webp');
}
.card.bpx-skin-card::before {content:none;display:none;}
.card.bpx-skin-card::after {
  content:'';display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--bpx-skin) center / 100% 100% no-repeat;
  border:1px solid #5ab8c5;border-radius:inherit;
}
.card.bpx-skin-card .art.bpx-skin-cover {
  position:absolute;inset:0 0 auto 0;width:100%;height:74%;aspect-ratio:auto;
  min-height:0;overflow:hidden;z-index:0;border:0;border-radius:0;background:#12253b;
}
.card.bpx-skin-card .art.bpx-skin-cover::after {content:none;display:none;}
.card.bpx-skin-card .art.bpx-skin-cover img.bpx-skin-img {
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;border:0;
}
.card.bpx-skin-card .art .bpx-skin-release {
  position:absolute;z-index:3;top:5%;left:5%;padding:5px 9px;
  color:#fff;border-radius:999px;border:1px solid #f0fff28a;background:#0a283fce;
  font-size:3.1cqw;line-height:1.1;font-weight:850;
}
.card.bpx-skin-card .copy.bpx-skin-copy {
  position:absolute;inset:0;z-index:2;display:block;margin:0;padding:0;min-height:0;height:100%;
  background:transparent;border:0;box-shadow:none;pointer-events:none;
}
.card.bpx-skin-card .copy.bpx-skin-copy::before,
.card.bpx-skin-card .copy.bpx-skin-copy::after {content:none;display:none;}
.card.bpx-skin-card .bpx-skin-caption {
  position:absolute;left:6.0%;right:14.5%;top:69.75%;
  display:flex;flex-direction:column;gap:1.0cqw;min-width:0;max-height:13.7%;overflow:hidden;
}
.card.bpx-skin-card .bpx-skin-title {
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  margin:0;min-height:0;max-height:none;padding:0;overflow:hidden;overflow-wrap:anywhere;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:6.05cqw;line-height:1.10;font-weight:950;letter-spacing:-.042em;
  text-wrap:pretty;color:#fbfeff;text-shadow:0 1px 1px #00171e;
}
.card.bpx-skin-card .bpx-skin-edition {
  margin:0;padding:0;min-height:0;font-size:4.15cqw;line-height:1.11;font-weight:790;
  color:#c5d8e4;letter-spacing:-.024em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card.bpx-skin-card .bpx-skin-bottom {
  position:absolute;inset:0;display:block;margin:0;padding:0;z-index:2;
}
.card.bpx-skin-card .bpx-skin-price {
  position:absolute;left:3%;bottom:5.65%;width:44.35%;height:10.55%;
  display:flex;align-items:center;justify-content:center;padding:0 3.2%;margin:0;
  border:1.8px solid #2d806f;border-radius:999px;
  background:linear-gradient(180deg,#0b302b,#092329 70%,#09222a);
  box-shadow:inset 0 1px 1px #66b39b17;
  color:#ddffb9;font-size:6.25cqw;line-height:1.0;font-weight:970;letter-spacing:-.03em;
  white-space:normal;text-align:center;font-variant-numeric:tabular-nums;
}
.card.bpx-skin-card .bpx-skin-price.is-muted {font-size:3.25cqw;line-height:1.2;color:#e1f5e7;}
.card.bpx-skin-card button.bpx-skin-add {
  position:absolute;left:47.7%;bottom:5.65%;width:49.15%;height:10.55%;
  min-width:0;min-height:0;max-width:none;margin:0;padding:0 2%;
  display:flex;align-items:center;justify-content:center;gap:2.0%;
  border:1.7px solid #e4ffac;border-radius:999px;
  background:linear-gradient(180deg,#e0ff7d 0%,#b6ff68 35%,#75f45f 77%,#43d999 100%);
  box-shadow:inset 0 1px 1px #ffffffcc,0 3px 4px #061b2466;
  color:#092a19;font-size:5.2cqw;line-height:1.0;font-weight:950;
  letter-spacing:-.025em;white-space:nowrap;cursor:pointer;pointer-events:auto;
}
.card.bpx-skin-card button.bpx-skin-add:hover {filter:brightness(1.06);}
.card.bpx-skin-card button.bpx-skin-add:focus-visible {outline:3px solid #fff;outline-offset:3px;}
.card.bpx-skin-card button.bpx-skin-add.is-active {background:linear-gradient(180deg,#c7ffe4,#67dfa0);}
.card.bpx-skin-card .bpx-skin-add-label {display:inline-block;white-space:nowrap;}
.card.bpx-skin-card .bpx-skin-add svg {display:block;width:6.4cqw;height:6.4cqw;flex:none;stroke:currentColor;}
.cards.cards-carousel>.card.bpx-skin-card {flex:0 0 clamp(205px,23vw,322px);}
.cards.cards-full {grid-template-columns:repeat(4,minmax(0,1fr));column-gap:18px;row-gap:20px;}
@media(max-width:1220px) {.cards.cards-full {grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:800px) {.cards.cards-full {grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:16px;}}
@media(max-width:480px) {
 .cards.cards-carousel>.card.bpx-skin-card {flex-basis:min(63vw,270px);}
 .card.bpx-skin-card .bpx-skin-add svg {width:5.8cqw;height:5.8cqw;}
}
@media(prefers-reduced-motion:reduce) {.card.bpx-skin-card button.bpx-skin-add {transition:none;}}