/* Picture cards for pages outside Scripts/Keys (executor pages, guide, About).
   Same design as the cards on /scripts and /keys: artwork behind, dark fade at the bottom,
   type badge, title, short description, tag and a "Get" button. The worker fills any
   element marked data-cards="games" / "executors" with these cards. */
.site-page .rfs-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 25px; margin: 18px 0 4px;
  /* as wide as the Scripts grid (1200px), centred on the page even inside the narrower text column */
  width: min(1200px, calc(100vw - 40px)); position: relative; left: 50%; transform: translateX(-50%);
}
.site-page .rfs-cards > a.script-card,
.site-page .rfs-cards > a.key-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 320px; padding: 16px 20px 20px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg, rgba(26,34,56,.95), rgba(15,21,37,.95));
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  color: #fff; font-weight: 400; text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-page .rfs-cards > a.script-card:hover,
.site-page .rfs-cards > a.key-card:hover {
  transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,.3);
  border-color: rgba(255,70,85,.3); text-decoration: none;
}
/* artwork, then the dark fade that keeps the text readable */
.site-page .rfs-cards > a > .card-art { position: absolute; inset: 0; z-index: 0; display: block; margin: 0; }
.site-page .rfs-cards .card-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.site-page .rfs-cards > a::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(to top, rgba(9,11,22,.97) 0%, rgba(9,11,22,.92) 48%, rgba(9,11,22,.6) 70%, rgba(9,11,22,0) 92%);
}
.site-page .rfs-cards > a > *:not(.card-art) { position: relative; z-index: 1; }
.site-page .rfs-cards > a > .card-type-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; color: #fff;
  background: rgba(9,11,22,.72); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.site-page .rfs-cards > a.key-card > .card-type-badge { background: rgba(255,70,85,.9); border-color: transparent; }
.site-page .rfs-cards .script-header, .site-page .rfs-cards .key-header { margin-top: auto; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 15px; }
.site-page .rfs-cards > a .script-name, .site-page .rfs-cards > a .key-name {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: 1.1rem; line-height: 1.18; font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.site-page .rfs-cards .script-icon, .site-page .rfs-cards .key-icon { color: #ff4655; font-size: 1.05rem; }
.site-page .rfs-cards > a .script-description, .site-page .rfs-cards > a .key-description {
  margin: 0 0 10px; font-size: .74rem; line-height: 1.4; font-weight: 500;
  color: rgba(255,255,255,.86); text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.site-page .rfs-cards .script-features, .site-page .rfs-cards .key-features { display: flex; flex-wrap: wrap; gap: 8px; }
.site-page .rfs-cards .game-tag {
  white-space: nowrap; background: rgba(255,70,85,.15); color: #ff8e8e;
  padding: 4px 12px; border-radius: 12px; font-size: .8rem; font-weight: 600;
  border: 1px solid rgba(255,70,85,.3);
}
.site-page .rfs-cards .view-counter {
  display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.site-page .rfs-cards .view-counter i { font-size: .7rem; opacity: .6; }
.site-page .rfs-cards .hot-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 4px;
  background: rgba(255,70,85,.1); color: #ff8e8e; border: 1px solid rgba(255,70,85,.2);
  border-radius: 6px; font-size: .68rem; font-weight: 700; padding: 2px 6px; text-shadow: none;
}
.site-page .rfs-cards .hot-badge i { opacity: 1; }
.site-page .rfs-cards .card-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  font-size: .85rem; font-weight: 700; color: #fff; background: #ff4655;
  box-shadow: 0 4px 14px rgba(255,70,85,.28); transition: filter .2s ease;
}
.site-page .rfs-cards .card-cta i { font-size: .75rem; transition: transform .2s ease; }
.site-page .rfs-cards > a:hover .card-cta { filter: brightness(1.08); }
.site-page .rfs-cards > a:hover .card-cta i { transform: translateX(3px); }
/* A section that holds cards has no box of its own: the cards sit straight on the page,
   like the grids on /scripts and /keys. */
.site-page .exe-section:has(> .rfs-cards) { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }

@media (max-width: 640px) {
    .site-page .rfs-cards { grid-template-columns: 1fr; gap: 20px; width: 100%; left: 0; transform: none; }
}