:root {
  /* ===== COLOR & LAYOUT ===== */
  --hover-border:rgba(255,255,255,.5);
  --hover-shadow:rgba(255,255,255,.1);

  --radius:16px;
  --radius-sm:12px;
  --line-weak:1px solid rgba(255,255,255,.08);
  --line-mid:1px solid rgba(255,255,255,.16);
  --line-strong:1px solid rgba(255,255,255,.28);
  --shadow-soft:0 10px 24px rgba(0,0,0,.35);
  --shadow-deep:0 22px 60px rgba(0,0,0,.45);
  --maxw:1320px;

  /* ===== SPACING ===== */
  --gap:8px;
  --page-pad:16px;

  /* base card width for scroll rows */
  --card-w:210px;
}

html{height:100%;overflow-x:hidden}
body{
  min-height:100vh;
  color:var(--text-light);
  background:
    radial-gradient(900px 520px at 18% 22%, rgba(140,170,255,.05), transparent 60%),
    radial-gradient(800px 480px at 82% 78%, rgba(90,140,255,.05), transparent 55%),
    linear-gradient(180deg, rgba(23,26,33,1), rgba(23,26,33,.98));
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{image-rendering:-webkit-optimize-contrast}

/* ===== PAGE CONTAINER ===== */
.page{
  max-width:var(--maxw);
  margin:12px auto;
  padding:0 var(--page-pad) 30px;
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* ===== SECTION TITLES ===== */
.section-title{
  font-size:22px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--text-light);
  position:relative;
  margin-bottom:10px;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.section-title::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-8px;
  width:0;
  height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));
  box-shadow:0 0 10px rgba(0,188,212,.35);
  animation:titleLine .9s forwards ease;
}
@keyframes titleLine{
  to{
    left:0;
    width:100%;
  }
}

/* ===== HERO SECTION ===== */
.hero{
  position:relative;
  padding:8px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015)),
    var(--bg-light);
  border:var(--line-weak);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

.hero__viewport{
  position:relative;
  min-height:40vh;
  z-index:1;
}
.hero__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  border:var(--line-mid);
  color:#fff;
  background:linear-gradient(180deg,rgba(23,26,33,.85),rgba(23,26,33,.6));
  backdrop-filter:blur(6px) saturate(120%);
  cursor:pointer;
  z-index:10000;
  box-shadow:0 8px 18px rgba(0,0,0,.45);
  transition:transform .15s ease,border-color .2s ease;
}
.hero__nav:hover{
  transform:translateY(-50%) scale(1.05);
  border:var(--line-strong);
}
.hero__nav--prev{left:12px}
.hero__nav--next{right:12px}

.hero__dots{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  padding:10px 0 0;
  position:relative;
  z-index:2;
}
.hero__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.24);
  border:1px solid rgba(255,255,255,.2);
  transition:transform .15s ease,background .2s ease,border-color .2s ease;
  cursor:pointer; /* changed */
}
.hero__dot.is-active{
  background:#fff;
  border-color:#fff;
  transform:scale(1.18);
  box-shadow:0 0 8px rgba(255,255,255,.35);
}

.hero-card{
  position:absolute;
  inset:0;
  display:grid;
  gap:12px;
  grid-template-columns:1.15fr 1fr;
  padding:8px;
  opacity:0;
  pointer-events:none;
  transform:translateX(12px);
  transition:
    opacity .45s ease,
    transform .45s ease;
  cursor:pointer;
}

.hero-card.is-current{
  opacity:1;
  pointer-events:auto;
  z-index:1;
  transform:translateX(0);
}

.hero-card__media{
  position:relative;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:#101722;
  box-shadow:0 10px 20px rgba(0,0,0,.35);
  z-index:2;
}
.hero-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:16/9;
  transform:scale(1.02);
  transition:transform .5s ease;
}
.hero-card__media:hover img{
  transform:scale(1.08);
}
.hero-card__meta{
  position:relative;
  border-radius:var(--radius-sm);
  padding:12px 14px;
  background:
    radial-gradient(130% 160% at 18% -20%,rgba(255,255,255,.06),rgba(255,255,255,.015)60%),
    linear-gradient(180deg,rgba(33,46,70,.96),rgba(33,46,70,.88));
  border:var(--line-mid);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 22px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}
.hero-card__meta::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(
    135deg,
    rgba(120,160,255,.12),
    rgba(90,140,255,.10)45%,
    transparent70%
  ) border-box;
  mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0) border-box;
  mask-composite:exclude;
  -webkit-mask-composite:xor;
}
.hero-card__title{
  color:#f7fbff;
  font-weight:800;
  font-size:clamp(20px,3.5vw,28px);
  line-height:1.2;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.hero-card__text{
  color:var(--text-dark);
  line-height:1.6;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.hero-card__chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.hero-card__chips span{
  color:#e6f6ff;
  font-size:12px;
  padding:6px 10px;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.05));
  border:var(--line-mid);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-card__overlay{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:auto;
}

.hero-card.enter-right{animation:enterFromRight .5s ease both}
.hero-card.leave-left{animation:leaveToLeft .5s ease both}
.hero-card.enter-left{animation:enterFromLeft .5s ease both}
.hero-card.leave-right{animation:leaveToRight .5s ease both}

@keyframes enterFromRight{
  from{opacity:0;transform:translateX(4%)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes leaveToLeft{
  from{opacity:1;transform:translateX(0)}
  to{opacity:0;transform:translateX(-4%)}
}
@keyframes enterFromLeft{
  from{opacity:0;transform:translateX(-4%)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes leaveToRight{
  from{opacity:1;transform:translateX(0)}
  to{opacity:0;transform:translateX(4%)}
}

@media (max-width:980px){
  .hero__viewport{
    min-height:56vh;
  }

  .hero-card{
    grid-template-columns:1fr;
  }

  .hero-card__media{
    max-height:40vh;
  }

  .hero-card__meta{
    background:
      radial-gradient(140% 180% at 10% -20%,rgba(255,255,255,.08),rgba(255,255,255,.02)60%),
      linear-gradient(180deg,rgba(33,46,70,.97),rgba(33,46,70,.90));
  }
}

/* ===== GAME CATALOG BASE ===== */
.catalog{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.catalog__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* horizontal scroll row */
.h-scroll{
  display:flex;
  gap:var(--gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding-top:5px;
  padding-bottom:4px;
  scrollbar-color:rgba(255,255,255,.16) transparent;
}
.h-scroll::-webkit-scrollbar{height:8px}
.h-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16);
  border-radius:9999px;
}
.h-scroll::-webkit-scrollbar-track{background:transparent}

/* GAME CARD (shared) */
.card{
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  width:calc(var(--card-w)*0.74);
  min-width:calc(var(--card-w)*0.74);
  max-width:calc(var(--card-w)*0.74);
  flex:0 0 calc(var(--card-w)*0.74);
  text-decoration:none;
  color:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)),
    var(--bg-light);
  border:var(--line-weak);
  border-radius:var(--radius-sm);
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  transition:
    transform .16s ease,
    box-shadow .22s ease,
    border-color .2s ease,
    opacity .45s ease;
  opacity:1;
}
.card:hover{
  transform:translateY(-4px);
  border:1px solid var(--hover-border);
  box-shadow:0 16px 34px rgba(0,0,0,.45),
             0 0 0 4px var(--hover-shadow);
}
.card__img{
  width:100%;
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  background:#1a2434;
}
.card__img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform .25s ease,filter .25s ease;
  filter:saturate(1.02) contrast(1.02);
}
.card:hover .card__img img{
  transform:scale(1.07);
  filter:saturate(1.06) contrast(1.05);
}
.card__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  border-top:1px solid rgba(255,255,255,.10);
}
.card__title{
  font-size:13px;
  font-weight:700;
  color:var(--text-light);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.card__tag{
  font-size:11px;
  color:#dfeeff;
  padding:4px 8px;
  border-radius:8px;
  background:rgba(20,32,48,.96);
  border:1px solid rgba(130,180,230,.7);
  position:absolute;
  right:6px;
  bottom:6px;
  opacity:0;
  transform:translateY(3px);
  transition:opacity .18s ease, transform .18s ease;
}
.card.is-ready .card__tag{
  opacity:1;
  transform:translateY(0);
}

/* ===== POPULAR (Meşhurlar) ONLY ===== */
/* На больших экранах 7 карт, на меньших ~5; только этот блок */

.catalog--popular .h-scroll{
  display:flex;
  gap:var(--gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding-top:5px;
  padding-bottom:4px;
}

/* ≥1080px: 7 cards per viewport width */
@media (min-width:1080px){
  .catalog--popular .card{
    flex:0 0 calc((100% - 6*var(--gap))/7);
    width:calc((100% - 6*var(--gap))/7);
    min-width:calc((100% - 6*var(--gap))/7);
    max-width:calc((100% - 6*var(--gap))/7);
  }
}

/* <1080px: ~5 cards visible */
@media (max-width:1079px){
  .catalog--popular .card{
    flex:0 0 calc((100% - 4*var(--gap))/5);
    width:calc((100% - 4*var(--gap))/5);
    min-width:calc((100% - 4*var(--gap))/5);
    max-width:calc((100% - 4*var(--gap))/5);
  }
}

/* ===== STACKED CATEGORY ===== */
.catalog--stack .h-scroll{
  display:grid;
  overflow:visible;
  scroll-snap-type:none;
  padding-bottom:0;
  grid-template-columns:repeat(
    auto-fill,
    minmax(min(var(--card-w),100%),1fr)
  );
  gap:var(--gap);
}
.catalog--stack .card{
  width:100%;
  min-width:0;
  max-width:none;
  flex:auto;
}

/* ===== GRID CATEGORY (INDEPENDENT) ===== */

.catalog--grid{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.catalog--grid .cards-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:var(--gap);
  padding-top:5px;
  padding-bottom:10px;
}

/* GRID card */
.catalog--grid .grid-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),
    var(--bg-light);
  border:var(--line-weak);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  text-decoration:none;
  color:var(--text-light);
  opacity:0;
  transform:translateY(8px);
  transition:
    opacity .24s ease,
    transform .24s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}
.catalog--grid .grid-card.is-ready{
  opacity:1;
  transform:translateY(0);
}
.catalog--grid .grid-card:hover{
  transform:translateY(-2px);
  border-color:rgba(120,170,230,0.5);
  box-shadow:0 6px 14px rgba(0,0,0,0.35);
}

/* GRID image */
.catalog--grid .grid-card__img{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#101722;
}
.catalog--grid .grid-card__img img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.03);
  transition:transform .26s ease,filter .26s ease;
}
.catalog--grid .grid-card:hover .grid-card__img img{
  transform:scale(1.06);
  filter:saturate(1.05) contrast(1.05);
}

/* GRID bottom meta */
.catalog--grid .grid-card__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 8px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  border-top:1px solid rgba(255,255,255,.10);
}
.catalog--grid .grid-card__title{
  font-size:12px;
  font-weight:700;
  color:var(--text-light);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* GRID tag: bottom-right inside image */
.catalog--grid .grid-card__img .grid-card__tag{
  position:absolute;
  right:6px;
  bottom:6px;
  padding:3px 7px;
  font-size:9px;
  border-radius:10px;
  color:#e5f2ff;
  background:rgba(13,23,38,.96);
  border:1px solid rgba(120,170,230,.85);
  opacity:0;
  transform:translateY(3px);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.catalog--grid .grid-card.is-ready .grid-card__img .grid-card__tag{
  opacity:1;
  transform:translateY(0);
}

/* GRID skeleton */
.catalog--grid .grid-skeleton{
  position:relative;
  border-radius:var(--radius-sm);
  background:var(--bg-light);
  border:var(--line-weak);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.catalog--grid .grid-skeleton__img{
  width:100%;
  aspect-ratio:4/5;
  background:#111722;
  position:relative;
  overflow:hidden;
}
.catalog--grid .grid-skeleton__meta{
  padding:7px 8px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.catalog--grid .grid-skeleton__line{
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  position:relative;
  overflow:hidden;
}
.catalog--grid .grid-skeleton__line--title{width:80%;}
.catalog--grid .grid-skeleton__line--sub{width:40%;}

/* GRID shimmer uses same keyframes */
.catalog--grid .grid-skeleton__img::before,
.catalog--grid .grid-skeleton__line::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.14),
    rgba(255,255,255,0)
  );
  background-size:180% 100%;
  animation:skeleton-shimmer 1s linear infinite;
  opacity:.7;
}

/* GRID responsive columns */
@media (max-width:1200px){
  .catalog--grid .cards-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
}
@media (max-width:992px){
  .catalog--grid .cards-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}
@media (max-width:480px){
  .catalog--grid .cards-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* ===== SKELETON FOR SCROLL CARDS ===== */
@keyframes skeleton-shimmer{
  0%{background-position:-40% 0;}
  100%{background-position:40% 0;}
}

.card-skeleton{
  width:calc(var(--card-w)*0.74);
  min-width:calc(var(--card-w)*0.74);
  max-width:calc(var(--card-w)*0.74);
  flex:0 0 calc(var(--card-w)*0.74);
  display:flex;
  flex-direction:column;
  border-radius:12px;
  background:var(--bg-light);
  border:var(--line-weak);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  overflow:hidden;
  position:relative;
}
.card-skeleton__img{
  width:100%;
  aspect-ratio:4/5;
  position:relative;
  overflow:hidden;
  background:#111722;
}
.card-skeleton__meta{
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.card-skeleton__line{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  position:relative;
  overflow:hidden;
}
.card-skeleton__line--title{width:80%;}
.card-skeleton__line--sub{width:55%;}

.card-skeleton__img::before,
.card-skeleton__line::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0.00),
    rgba(255,255,255,0.12),
    rgba(255,255,255,0.00)
  );
  background-size:180% 100%;
  animation:skeleton-shimmer 1s linear infinite;
  opacity:0.7;
}

/* ===== APPEAR ANIMATION ===== */
.card.appear{
  opacity:0 !important;
  transform:translateY(10px);
  transition:opacity .28s ease, transform .28s ease;
}
.card.appear.is-ready{
  opacity:1 !important;
  transform:translateY(0);
}

/* Mobile: 3 cards per row */
@media (max-width:768px){
  .catalog--grid .cards-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .catalog--popular .card{
    flex:0 0 calc((100% - 2*var(--gap))/3);
    width:calc((100% - 2*var(--gap))/3);
    min-width:calc((100% - 2*var(--gap))/3);
    max-width:calc((100% - 2*var(--gap))/3);
  }
}

.loading-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* HERO STATS */
.hero-card__stats {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.hero-card__stats .stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* POPULAR CARD STATS */
/* --- CARD METADATA --- */
.card__meta {
  padding: 10px 10px 12px;
  background: var(--panel-color);
  border-top: 1px solid rgba(79, 156, 249, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 75px; /* başlık + istatistikler için sabit yükseklik */
}

/* oyun ismi */
.card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color-strong);
  text-align: center;
  margin: 0;
  margin-bottom: 6px; /* isim ile istatistik arasında boşluk */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* --- STATLAR: HER ZAMAN AYRI SATIRDA --- */
.card__stats {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(79, 156, 249, 0.05);
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  padding: 4px 0 5px;
  font-size: 0.85rem;
  color: var(--muted-color);
}

/* ikonlar */
.card__stats .stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat--rate::before {
  color: gold;
  font-size: 1em;
}

.stat--downloads::before {
  color: var(--blue);
  font-size: 1em;
}

/* hover efekti */
.card:hover .card__stats {
  background: rgba(79, 156, 249, 0.15);
  color: #fff;
  transition: 0.25s ease-in-out;
}

.stat .icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 4px;

}

.catalog--popular .card{
  position:relative;
}

/* нижняя часть карточки: фон = bg-light */
.catalog--popular .card__meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:4px;
  padding:8px 10px 9px;
  background:var(--bg-light);
  border-top:1px solid rgba(145,195,255,.40);
}

/* НАЗВАНИЕ ИГРЫ (верх полосы) */
.catalog--popular .card__title{
  font-size:13px;
  font-weight:700;
  color:#f4f7ff;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin:0;
}

/* длинная линия-разделитель с отступами от краёв */
.catalog--popular .card__title::after{
  content:"";
  display:block;
  width:86%;
  height:1px;
  margin:5px auto 3px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(190,215,255,.85),
    transparent
  );
  opacity:.9;
}

/* СТАТЫ (нижний ряд), выглядят как чипы */
.catalog--popular .card__stats{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:6px;
  margin-top:2px;
}

/* каждый стат — ПРОЗРАЧНЫЙ фон, только обводка */
.catalog--popular .card__stats .stat{
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:3px 6px;
  border-radius:999px;
  background:transparent;            /* главный момент */
  border:1px solid rgba(140,195,255,.98); /* ← стало базовым */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.65),
    0 4px 8px rgba(0,0,0,.45);
  font-size:10px;
  color:rgba(220,235,255,.96);
  text-shadow:0 1px 2px rgba(0,0,0,.85);
  min-width:0;
}

/* текст внутри чипа не вылезает */
.catalog--popular .card__stats .stat span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* иконка слева (если есть .icon) */
.catalog--popular .card__stats .stat .icon{
  width:14px;
  height:14px;
  flex:0 0 auto;
}

/* лёгкий акцент разным типам статов */
.catalog--popular .card__stats .stat--rate{
  border-color:rgba(255,215,120,.95);
}
.catalog--popular .card__stats .stat--downloads{
  border-color:rgba(0,188,212,.85);
}

/* hover-подсветка – теперь бордер чуть темнее/спокойнее */
.catalog--popular .card:hover .card__stats .stat{
  background:transparent;
  border-color:rgba(120,170,255,.75);
}

/* компактнее на маленьких экранах */
@media (max-width:560px){
  :root{
    --card-w:160px;
    --gap:6px;
  }
  .page{
    margin:8px auto;
    padding:0 10px 20px;
    gap:20px;
  }
  .section-title{
    font-size:19px;
  }
  .hero{
    padding:6px;
  }
  .hero__viewport{
    min-height:52vh;
  }
  .hero__nav{
    width:36px;
    height:36px;
  }
  .hero-card__meta{
    padding:10px;
  }
  .hero-card__title{
    font-size:clamp(16px,4.8vw,22px);
  }
  .hero-card__text{
    font-size:0.9rem;
    line-height:1.45;
  }
  .catalog--grid .cards-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .catalog--popular .card{
    flex:0 0 calc((100% - var(--gap))/2);
    width:calc((100% - var(--gap))/2);
    min-width:calc((100% - var(--gap))/2);
    max-width:calc((100% - var(--gap))/2);
  }
  .catalog--popular .card__title{
    font-size:12px;
  }
  .catalog--popular .card__stats .stat{
    font-size:9px;
    padding:3px 4px;
  }
}

@media (max-width:420px){
  :root{
    --card-w:145px;
  }
  .page{
    padding:0 8px 18px;
  }
  .hero__dots{
    gap:6px;
  }
  .hero__dot{
    width:7px;
    height:7px;
  }
  .catalog--popular .card__stats .stat{
    font-size:8px;
    padding:2px 3px;
    gap:2px;
  }
}

/* =====================================================
   RU PC PAGE REDESIGN (SCOPED)
   ===================================================== */
.games-pc-page{
  --card-w:228px;
  --gap:10px;
  font-family:"Montserrat","Segoe UI",sans-serif;
  background:
    radial-gradient(1000px 560px at 14% 12%, rgba(44,243,200,.11), transparent 58%),
    radial-gradient(900px 500px at 86% 84%, rgba(36, 214, 243,.08), transparent 54%),
    linear-gradient(180deg, #050d16, #06111d 38%, #050d16);
}

.games-pc-page .page{
  max-width:1360px;
  margin:16px auto 0;
  padding:0 16px 64px;
  gap:22px;
}

.games-pc-page .pc-intro{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(114,212,255,.26);
  padding:24px 22px;
  background:
    linear-gradient(140deg, rgba(8,25,40,.94), rgba(8,19,32,.86)),
    radial-gradient(circle at 92% 4%, rgba(36, 214, 243,.2), transparent 36%);
  box-shadow:0 18px 32px rgba(0,0,0,.38);
}

.games-pc-page .pc-intro::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-50px;
  width:190px;
  height:190px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(44,243,200,.26), rgba(44,243,200,0));
  filter:blur(6px);
  pointer-events:none;
}

.games-pc-page .pc-intro__badge{
  display:inline-flex;
  padding:6px 11px;
  border-radius:999px;
  border:1px solid rgba(114,212,255,.34);
  background:rgba(7,22,35,.74);
  color:#bfefff;
  letter-spacing:.15em;
  font-size:.68rem;
  font-weight:700;
}

.games-pc-page .pc-intro__title{
  margin:10px 0 8px;
  font-size:clamp(1.6rem,3.3vw,2.4rem);
  line-height:1.15;
  color:#f0f8ff;
  letter-spacing:-.01em;
}

.games-pc-page .pc-intro__text{
  max-width:760px;
  margin:0;
  color:#a8bfd4;
  font-size:.97rem;
}

.games-pc-page .pc-intro__chips{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.games-pc-page .pc-intro__chips span{
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(114,212,255,.24);
  background:rgba(7,24,38,.8);
  font-size:.75rem;
  color:#d7ebff;
  font-weight:600;
}

.games-pc-page .section-title{
  font-size:1.6rem;
  margin-bottom:8px;
}

.games-pc-page .hero{
  border-radius:18px;
  padding:10px;
  border:1px solid rgba(114,212,255,.25);
  background:
    linear-gradient(175deg, rgba(11,34,56,.84), rgba(8,20,34,.9)),
    radial-gradient(circle at 88% 8%, rgba(114,212,255,.16), transparent 42%);
  box-shadow:0 18px 40px rgba(0,0,0,.44);
}

.games-pc-page .hero__viewport{
  min-height:clamp(360px,50vh,560px);
}

.games-pc-page .hero__nav{
  width:46px;
  height:46px;
  border:1px solid rgba(114,212,255,.45);
  background:rgba(8,25,40,.78);
  color:#d6efff;
}

.games-pc-page .hero__nav:hover{
  border-color:rgba(44,243,200,.75);
  box-shadow:0 8px 22px rgba(0,0,0,.5), 0 0 0 3px rgba(44,243,200,.18);
}

.games-pc-page .hero__dot{
  width:9px;
  height:9px;
  background:rgba(179,211,237,.33);
  border:1px solid rgba(179,211,237,.4);
}

.games-pc-page .hero__dot.is-active{
  background:var(--primary-color);
  border-color:var(--primary-color);
  box-shadow:0 0 12px rgba(44,243,200,.6);
}

.games-pc-page .hero-card{
  grid-template-columns:minmax(0,1.22fr) minmax(0,.88fr);
  gap:14px;
  padding:10px;
}

.games-pc-page .hero-card__media{
  border-radius:16px;
  border:1px solid rgba(114,212,255,.2);
  box-shadow:0 14px 28px rgba(0,0,0,.42);
}

.games-pc-page .hero-card__meta{
  border-radius:16px;
  border:1px solid rgba(114,212,255,.25);
  background:
    linear-gradient(175deg, rgba(10,30,48,.95), rgba(8,22,36,.93)),
    radial-gradient(circle at 86% -8%, rgba(36, 214, 243,.15), transparent 46%);
  box-shadow:0 12px 22px rgba(0,0,0,.34);
  padding:14px 15px;
  gap:10px;
}

.games-pc-page .hero-card__title{
  font-size:clamp(1.35rem,2.6vw,2rem);
}

.games-pc-page .hero-card__text{
  color:#9db4c8;
  font-size:.95rem;
  line-height:1.58;
}

.games-pc-page .hero-card__chips span{
  border-radius:999px;
  border:1px solid rgba(114,212,255,.3);
  background:rgba(10,30,48,.68);
  font-size:.72rem;
}

.games-pc-page .hero-card__stats{
  margin-top:2px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

.games-pc-page .hero-card__stats .stat{
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(114,212,255,.24);
  background:rgba(8,26,42,.62);
  padding:5px 7px;
  font-size:.78rem;
  color:#d7ecff;
}

.games-pc-page .catalog--popular .h-scroll{
  gap:var(--gap);
}

.games-pc-page .catalog--popular .card{
  border-radius:14px;
  border:1px solid rgba(114,212,255,.24);
  background:
    linear-gradient(175deg, rgba(10,30,48,.88), rgba(7,19,33,.9)),
    radial-gradient(circle at 90% 8%, rgba(114,212,255,.12), transparent 36%);
  box-shadow:0 12px 24px rgba(0,0,0,.36);
}

.games-pc-page .catalog--popular .card:hover{
  border-color:rgba(114,212,255,.56);
  box-shadow:0 16px 30px rgba(0,0,0,.46);
}

.games-pc-page .catalog--popular .card__meta{
  background:rgba(8,23,37,.9);
  border-top:1px solid rgba(114,212,255,.22);
}

.games-pc-page .catalog--popular .card__title{
  font-size:.8rem;
}

.games-pc-page .catalog--popular .card__title::after{
  width:78%;
  margin-top:4px;
  margin-bottom:2px;
}

.games-pc-page .catalog--popular .card__stats .stat{
  border-radius:999px;
  border:1px solid rgba(114,212,255,.42);
  background:rgba(6,20,32,.72);
  color:#daeeff;
  font-size:.62rem;
  padding:3px 5px;
}

.games-pc-page .catalog--popular .card__stats .stat .icon{
  width:12px;
  height:12px;
}

.games-pc-page .catalog--grid .cards-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}

.games-pc-page .catalog--grid .grid-card{
  border-radius:14px;
  border:1px solid rgba(114,212,255,.24);
  background:
    linear-gradient(176deg, rgba(9,26,42,.9), rgba(7,18,31,.95)),
    radial-gradient(circle at 85% 8%, rgba(114,212,255,.1), transparent 36%);
}

.games-pc-page .catalog--grid .grid-card:hover{
  border-color:rgba(114,212,255,.5);
  box-shadow:0 8px 18px rgba(0,0,0,.34);
}

.games-pc-page .catalog--grid .grid-card__meta{
  padding:8px 9px;
  border-top:1px solid rgba(114,212,255,.18);
}

.games-pc-page .catalog--grid .grid-card__title{
  font-size:.73rem;
  color:#ecf7ff;
}

.games-pc-page .catalog--grid .grid-card__img .grid-card__tag{
  border-radius:999px;
  border-color:rgba(114,212,255,.7);
  background:rgba(6,20,32,.86);
  font-size:.58rem;
}

.games-pc-page .catalog--grid .grid-skeleton{
  border-radius:14px;
  border:1px solid rgba(114,212,255,.2);
  background:rgba(9,25,40,.82);
}

@media (max-width:1200px){
  .games-pc-page .catalog--grid .cards-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}

@media (max-width:980px){
  .games-pc-page .hero-card{
    grid-template-columns:1fr;
  }

  .games-pc-page .hero__viewport{
    min-height:60vh;
  }

  .games-pc-page .hero-card__media{
    max-height:42vh;
  }

  .games-pc-page .catalog--grid .cards-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (max-width:768px){
  .games-pc-page{
    --card-w:180px;
    --gap:8px;
  }

  .games-pc-page .page{
    padding:0 12px 44px;
    gap:18px;
  }

  .games-pc-page .pc-intro{
    padding:16px 14px;
    border-radius:14px;
  }

  .games-pc-page .pc-intro__title{
    font-size:1.5rem;
  }

  .games-pc-page .section-title{
    font-size:1.3rem;
  }

  .games-pc-page .hero{
    border-radius:14px;
    padding:8px;
  }

  .games-pc-page .hero__nav{
    width:38px;
    height:38px;
  }

  .games-pc-page .hero-card{
    padding:8px;
    gap:10px;
  }

  .games-pc-page .catalog--grid .cards-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
}

@media (max-width:520px){
  .games-pc-page{
    --card-w:160px;
    --gap:6px;
  }

  .games-pc-page .page{
    padding:0 10px 34px;
  }

  .games-pc-page .pc-intro__text{
    font-size:.9rem;
  }

  .games-pc-page .pc-intro__chips span{
    font-size:.68rem;
    padding:4px 8px;
  }

  .games-pc-page .hero__viewport{
    min-height:56vh;
  }

  .games-pc-page .hero-card__stats{
    grid-template-columns:1fr;
  }

  .games-pc-page .catalog--grid .cards-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* =====================================================
   RU PROGRAMS PAGE REDESIGN (SCOPED)
   ===================================================== */
.games-programs-page{
  background:
    radial-gradient(980px 520px at 15% 10%, rgba(76,206,255,.12), transparent 58%),
    radial-gradient(860px 500px at 90% 84%, rgba(71,255,188,.10), transparent 54%),
    linear-gradient(180deg, #06101a, #071723 42%, #06111b);
}

.games-programs-page .pc-intro{
  border-color:rgba(89,230,221,.3);
  background:
    linear-gradient(140deg, rgba(8,29,44,.95), rgba(7,21,35,.9)),
    radial-gradient(circle at 95% 4%, rgba(71,255,188,.2), transparent 36%);
}

.games-programs-page .pc-intro__badge{
  border-color:rgba(89,230,221,.5);
  color:#c9fff3;
}

.games-programs-page .pc-intro__chips span{
  border-color:rgba(89,230,221,.34);
  color:#dffef7;
}

.games-programs-page .section-title::after{
  background:linear-gradient(90deg, #4ce7ff, #47ffbc);
  box-shadow:0 0 12px rgba(76,231,255,.44);
}

.games-programs-page .hero{
  border-color:rgba(89,230,221,.28);
  background:
    linear-gradient(175deg, rgba(10,33,52,.88), rgba(7,21,35,.92)),
    radial-gradient(circle at 90% 8%, rgba(89,230,221,.16), transparent 42%);
}

.games-programs-page .hero__nav{
  border-color:rgba(89,230,221,.5);
}

.games-programs-page .hero__dot.is-active{
  background:#47ffbc;
  border-color:#47ffbc;
  box-shadow:0 0 12px rgba(71,255,188,.55);
}

.games-programs-page .hero-card__meta{
  border-color:rgba(89,230,221,.3);
  background:
    linear-gradient(175deg, rgba(8,28,44,.95), rgba(7,20,33,.92)),
    radial-gradient(circle at 86% -8%, rgba(76,231,255,.18), transparent 48%);
}

.games-programs-page .catalog--popular .card,
.games-programs-page .catalog--grid .grid-card{
  border-color:rgba(89,230,221,.26);
  background:
    linear-gradient(176deg, rgba(8,28,44,.9), rgba(7,18,31,.95)),
    radial-gradient(circle at 88% 8%, rgba(89,230,221,.11), transparent 38%);
}

.games-programs-page .catalog--popular .card:hover,
.games-programs-page .catalog--grid .grid-card:hover{
  border-color:rgba(89,230,221,.58);
}

.games-programs-page .catalog--popular .card__stats .stat,
.games-programs-page .catalog--grid .grid-card__img .grid-card__tag{
  border-color:rgba(89,230,221,.6);
  color:#dffff8;
}