/* Road to GTA 6 extras (loaded by site/challenge/roadtogta6/index.html only). No build step.
     .r2g6 .ntbox        box art that js/r2g6-boxes.js puts in each game card (floats left; small on phones)
     .r2g6 .ntbox-link   the small "on Collektory" link under a card's chips
     .r2g6 .ntbox-end    clears the float at the end of the card
     .ntck               the "Powered by Collektory" strip below the snippet
   Selectors only ever name these injected/own elements: nothing of the snippet's own is restyled. */

.r2g6 .ntbox {
  float: left;
  width: 60px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin: 0 12px 4px 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #1d1a29;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .9);
}
.r2g6 .ntbox--broken { display: none }
@media (min-width: 420px) { .r2g6 .ntbox { width: 72px } }

.r2g6 .ntbox-link {
  display: inline-block;
  margin-top: 6px;
  font-size: .74rem;
  font-weight: 600;
  color: #c4b5fd;
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 181, 253, .35);
}
.r2g6 .ntbox-link::before { content: '\25B8\00A0'; color: #8b5cf6 }
.r2g6 .ntbox-link:hover { color: #fff; border-bottom-color: #fff }
.r2g6 .ntbox-link:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; border-radius: 4px }
.r2g6 .ntbox-end { display: block; clear: both }

/* Powered by Collektory */
.ntck {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1040px;
  margin: 28px auto 8px;
  margin-inline: max(var(--gut, 16px), calc((100% - 1040px) / 2));
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(139, 92, 246, .35);
  background: linear-gradient(100deg, rgba(139, 92, 246, .16), rgba(20, 17, 30, .62) 60%);
}
.ntck__logo { flex: none; width: 44px; height: 44px; border-radius: 50% }
.ntck__text { flex: 1 1 160px; min-width: 0 }
.ntck__kicker { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c4b5fd }
.ntck__line { margin: 2px 0 0; font-size: 15px; line-height: 1.4 }
.ntck__line a { color: inherit }
.ntck .btn { flex: none }
@media (max-width: 420px) { .ntck .btn { width: 100% } }
