/* Страница /builders-club — повтор роблоксовской витрины BC/TBC/OBC.
   Размеры внутри карточки — в cqw, чтобы карточка масштабировалась целиком. */
@font-face {
  font-family: 'BC Sans';
  font-weight: 200 900;
  font-display: swap;
  src: url(/static/fonts/source-sans-3-latin-wght.woff2) format('woff2');
}
.bcp { padding-top: 6px; padding-bottom: 24px; font-family: 'BC Sans', 'Source Sans Pro', Arial, sans-serif; }
.bcp-head { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 8px; }
.bcp-title {
  margin: 0; font: italic 900 44px/1.1 'BC Sans', Arial, sans-serif; letter-spacing: -0.5px;
  color: #1347b4;
  background: linear-gradient(#1f63d6, #0a2f8f); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(1px 2px 1px rgba(0,0,0,.35));
}
.bcp-title .bcp-prefix-tbc {
  background: linear-gradient(#fff36a, #f2b800); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(1px 0 0 #111) drop-shadow(-1px 0 0 #111) drop-shadow(0 1px 0 #111) drop-shadow(0 -1px 0 #111);
}
.bcp-icons { display: flex; gap: 2px; align-items: center; }
.bcp-icons img { width: 62px; height: auto; display: block; }

.bcp-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2.2%; margin-bottom: 4px; }
.bcp-col { text-align: center; }

.bcp-card {
  container-type: inline-size; position: relative; overflow: hidden; text-align: left;
  aspect-ratio: 305 / 223; border-radius: 9px; border: 3px solid; box-sizing: border-box;
}
.bcp-card.bcp-bc {
  border-color: #0b4fb3;
  background: radial-gradient(120% 90% at 30% 10%, #4cb3ff 0%, #2a96fb 40%, #1078e2 75%, #0a63c6 100%);
  box-shadow: inset 0 0 0 2px #58c0fd, 0 2px 3px rgba(0,0,0,.25);
}
.bcp-card.bcp-tbc {
  border-color: #b23a00;
  background: radial-gradient(120% 90% at 30% 10%, #ffa21e 0%, #fb8802 35%, #e2650a 70%, #b94102 100%);
  box-shadow: inset 0 0 0 2px #fabb29, 0 2px 3px rgba(0,0,0,.25);
}
.bcp-card.bcp-obc {
  border-color: #c99410;
  background: radial-gradient(110% 70% at 50% 110%, #5a3c04 0%, #2f2000 45%, #0a0700 80%, #030200 100%);
  box-shadow: inset 0 0 0 2px #f6dc6e, 0 2px 3px rgba(0,0,0,.3);
}
.bcp-art { position: absolute; z-index: 1; height: auto; pointer-events: none; }

.bcp-period, .bcp-price, .bcp-avg, .bcp-popular { position: absolute; z-index: 2; white-space: nowrap; }
.bcp-period {
  left: 4.5cqw; top: 3cqw; font-weight: 800; font-size: 14.5cqw; line-height: 1; letter-spacing: -0.03em;
  color: #ffe41f;
  text-shadow: 0.90cqw 0.00cqw 0 #3a2600, -0.90cqw 0.00cqw 0 #3a2600, 0.00cqw 0.90cqw 0 #3a2600, 0.00cqw -0.90cqw 0 #3a2600, 0.63cqw 0.63cqw 0 #3a2600, -0.63cqw 0.63cqw 0 #3a2600, 0.63cqw -0.63cqw 0 #3a2600, -0.63cqw -0.63cqw 0 #3a2600, .6cqw 1.3cqw 0 rgba(0,0,0,.45);
}
.bcp-price {
  left: 4cqw; top: 21cqw; font-weight: 900; font-size: 23cqw; line-height: 1; letter-spacing: -0.06em; color: #fff;
  text-shadow: 1.20cqw 0.00cqw 0 var(--bcp-ink), -1.20cqw 0.00cqw 0 var(--bcp-ink), 0.00cqw 1.20cqw 0 var(--bcp-ink), 0.00cqw -1.20cqw 0 var(--bcp-ink), 0.84cqw 0.84cqw 0 var(--bcp-ink), -0.84cqw 0.84cqw 0 var(--bcp-ink), 0.84cqw -0.84cqw 0 var(--bcp-ink), -0.84cqw -0.84cqw 0 var(--bcp-ink), 1cqw 1.8cqw 0 rgba(0,0,0,.45);
}
.bcp-card { --bcp-ink: #0b2350; }
.bcp-tbc { --bcp-ink: #3b1400; }
.bcp-obc { --bcp-ink: #000; }
.bcp-price .bcp-cur { font-size: .92em; }
.bcp-price sup { font-size: .42em; vertical-align: top; position: relative; top: .3em; margin-left: .06em; letter-spacing: 0; }
.bcp-avg {
  left: 1.2cqw; right: 1.2cqw; bottom: 1.2cqw; height: 10.6cqw; border-radius: 1.6cqw;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 8.4cqw; color: #fff; text-shadow: 0 .3cqw .3cqw rgba(0,0,0,.6);
  background: rgba(0, 32, 90, .78);
}
.bcp-tbc .bcp-avg { background: rgba(60, 18, 0, .78); }
.bcp-popular {
  left: 1.2cqw; right: 1.2cqw; bottom: 3cqw; height: 18cqw; border-radius: 2cqw; padding-left: 3cqw;
  display: flex; align-items: center;
  font-weight: 800; font-size: 16.5cqw; line-height: 1; letter-spacing: -0.03em; color: #22ff2e;
  text-shadow: 0.80cqw 0.00cqw 0 #000, -0.80cqw 0.00cqw 0 #000, 0.00cqw 0.80cqw 0 #000, 0.00cqw -0.80cqw 0 #000, 0.56cqw 0.56cqw 0 #000, -0.56cqw 0.56cqw 0 #000, 0.56cqw -0.56cqw 0 #000, -0.56cqw -0.56cqw 0 #000;
  background: linear-gradient(90deg, rgba(0,0,0,.65) 60%, rgba(0,0,0,0));
}

.bcp-upgrade {
  display: inline-block; width: 61%; margin: 3.5% 0 6px; padding: 4px 0 6px;
  border: 3px solid #0a6a2a; border-radius: 8px;
  background: linear-gradient(#3fe486 0%, #14c95f 45%, #04a83d 55%, #029432 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 2px 3px rgba(0,0,0,.3);
  font-weight: 800; font-size: clamp(16px, 2.6vw, 32px); line-height: 1.25; color: #fff !important;
  text-decoration: none !important; letter-spacing: -0.01em;
  text-shadow: 1px 0 0 #0a5524, -1px 0 0 #0a5524, 0 1px 0 #0a5524, 0 -1px 0 #0a5524,
    1px 1px 0 #0a5524, -1px 1px 0 #0a5524, 1px -1px 0 #0a5524, -1px -1px 0 #0a5524, 0 3px 1px rgba(0,0,0,.35);
}
.bcp-upgrade:hover { filter: brightness(1.07); }
.bcp-upgrade:active { transform: translateY(1px); }

@media (max-width: 767px) {
  .bcp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4%; }
  .bcp-title { font-size: 30px; }
  .bcp-icons img { width: 42px; }
}

/* Звезда Telegram вместо доллара. */
.bcp-star { width: .8em; height: .8em; vertical-align: -0.02em; margin-right: .04em; fill: #ffc21a;
  stroke: var(--bcp-ink, #0b2350); stroke-width: 1.6px; paint-order: stroke fill; }
.bcp-avg .bcp-star { width: 1em; height: 1em; margin: 0 0 0 .15em; vertical-align: -0.15em; stroke: none; }
.bcp-price .bcp-star { filter: drop-shadow(1cqw 1.8cqw 0 rgba(0,0,0,.45)); }
.bcp-col form { margin: 0; }
button.bcp-upgrade { cursor: pointer; font-family: inherit; }
.bcp-note { margin: -4px 0 10px; font-size: 15px; color: #393b3d; }