/* /become-a-booster (Batch 172, 31 Oct 2026) — loaded only by marketing/recruit.html, on top of landing.css.
   The overview hero shows all five games (img/art/booster-mix.jpg, scripts/build_booster_mix.py), the logo row
   stays on one line, the sixth tiles of the two game grids, and the rank art of the requirement cards. */

/* hero: the five-game mix, full width, faded under the copy */
.rc-hero.g-all .lp-hero-art { right: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: 50% 32%;
  object-fit: cover; object-position: 50% 32%;
  opacity: .66; filter: saturate(.95) contrast(1.04);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.75) 34%, #000 58%),
                      linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.75) 34%, #000 58%),
              linear-gradient(180deg, #000 70%, transparent 100%); }
.rc-hero.g-all::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,12,21,.72) 0%, rgba(11,12,21,.5) 40%, rgba(11,12,21,0) 64%); }
.rc-hero.g-all .lp-hero-in { z-index: 1; }
.rc-hero.g-all .lp-hero-copy h1, .rc-hero.g-all .lp-lead { text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.rc-logos { gap: 10px 16px; }
.rc-logos .glogo-md { height: 23px; } .rc-logos .glogo-lol.glogo-md { height: 28px; } .rc-logos .glogo-wow.glogo-md { height: 27px; }

/* pick your game — the sixth tile: one application for every game */
.rc-one { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 272px; padding: 24px; border-radius: 20px;
  color: var(--text); overflow: hidden; border: 1px solid rgba(var(--accent-rgb), .45);
  background: radial-gradient(80% 90% at 100% 0%, rgba(var(--accent-rgb), .28), transparent 60%),
              linear-gradient(160deg, #191a2c, #10111b); transition: transform .15s ease, border-color .15s ease; }
.rc-one:hover { text-decoration: none; transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .8); }
.rc-one h3 { margin: 4px 0 0; font: 700 22px/1.2 var(--font-display); letter-spacing: -.01em; }
.rc-one > span:not(.rc-one-logos):not(.rc-one-btn) { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.rc-one-logos { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-one-logos i { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 99px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border); }
.rc-one-logos .glogo { height: 14px; width: auto; }
.rc-one-btn { margin-top: auto; align-self: flex-start; }

/* requirement cards: real rank art per game; the shared rules as the sixth card */
.rc-req-vis .val-emblem { display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
.rc-req-vis .wow-mark { flex: none; }
.rc-req-every { align-content: start; background: linear-gradient(160deg, rgba(var(--accent-rgb), .10), var(--panel) 60%); }
.rc-req-every .lp-eyebrow { margin: 0; }
.rc-req-every .rc-req-list-all { grid-template-columns: 1fr; gap: 12px; }
.rc-req-every .rc-req-list li { padding: 0; background: none; border: 0; border-radius: 0; }
.rc-req-every .rc-req-list b { font: 600 14.5px/1.35 var(--font-body, inherit); letter-spacing: 0; }
.rc-req-every .rc-req-list p { font-size: 13px; }
.rc-credit { margin-top: 8px; margin-bottom: 28px; }

@media (max-width: 960px) {
  .rc-pay-chip { position: static; display: inline-flex; margin-bottom: 12px; }
  .rc-hero.g-all::after { background: linear-gradient(180deg, rgba(11,12,21,.55), rgba(11,12,21,.82)); }
  .rc-hero.g-all .lp-hero-art { opacity: .5; background-position: 62% 30%; object-position: 62% 30%; }
}
@media (max-width: 760px) {
  /* a phone sees the whole strip of five across the top instead of one slice */
  .rc-hero.g-all .lp-hero-art { background-size: 150% auto; background-position: 50% 0; opacity: .6; }
  .rc-hero.g-all .rc-mix { left: -25%; right: auto; width: 150%; height: auto; }
  .rc-hero.g-all::after { background: linear-gradient(180deg, rgba(11,12,21,.35) 0%, rgba(11,12,21,.8) 40%, rgba(11,12,21,.9) 100%); }
}
/* Batch 181: a kit game's own page — its pay rows have no logo column (the title took the 72-px column and wrapped) */
.rc-pay-rows li.rc-pay-nog { grid-template-columns: minmax(0, 1fr) auto; }
.rc-kitic { object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.rc-kitreq { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 12px; font: 800 18px/1 var(--font-display); color: var(--accent-hot); border: 1px solid var(--border); background: var(--bg); }