@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&family=Russo+One&subset=cyrillic");

/* ========================================================================== 
   CRDGAME — GAMES HUB
   version: 2026-09-16

   Rebuild basis:
   - geometry measured from the supplied VULKK /games audit at 3398px viewport;
   - CRDGAME colors, fonts, uCoz variables and informer markup are preserved;
   - donor proportions reproduced: 1200px editorial/accordion core,
     17vw / max 578px game banners, 3 large 16:9 highlights,
     1200px description, 1180px row of 4 latest cards.
   ========================================================================== */

:root {
  --crd-games-bg: #111;
  --crd-games-bg-deep: #080706;
  --crd-games-panel: #222;
  --crd-games-gold: #d7b06f;
  --crd-games-gold-2: #c9a261;
  --crd-games-gold-3: #dda54f;
  --crd-games-text: #ececd1;
  --crd-games-muted: #aaa69c;
  --crd-games-line: rgba(215,176,111,.20);
  --crd-games-head: "Russo One", Arial, sans-serif;
  --crd-games-body: "Open Sans", Arial, sans-serif;
  --crd-games-core: 1200px;
  --crd-games-latest: 1180px;
  --crd-games-highlights: 2480px;
}

/* =========================================================
   PAGE / uCOZ RESET
   ========================================================= */

html.crd-games-page-html,
html.crd-games-page-html body {
  margin: 0 !important;
  min-height: 100% !important;
  background: #111 !important;
}

html.crd-games-page-html body {
  overflow-x: hidden !important;
  color: var(--crd-games-text) !important;
  font-family: var(--crd-games-body) !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

html.crd-games-page-html body .crd-module-hero--generic,
html body:has(#crdGamesHub) .crd-module-hero--generic,
html body:has(#crdGamesHub) .crd-module-hero:has(.crd-module-hero__wrap),
html.crd-games-page-html body .crd-smart-hero-logo,
html.crd-games-page-html body .header-logo-center.crd-smart-hero-logo {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.crd-games-page-html body .wrapper.main_wrapper,
html.crd-games-page-html body .main_wrapper,
html.crd-games-page-html body #casing,
html.crd-games-page-html body #content,
html body:has(#crdGamesHub) .wrapper.main_wrapper,
html body:has(#crdGamesHub) .main_wrapper,
html body:has(#crdGamesHub) #casing,
html body:has(#crdGamesHub) #content {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.crd-games-page-html body #casing,
html body:has(#crdGamesHub) #casing,
html.crd-games-page-html body #content,
html body:has(#crdGamesHub) #content,
html body:has(#crdGamesHub) #content > section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html body #crdGamesHub,
html body #crdGamesHub * {
  box-sizing: border-box;
}

html body #crdGamesHub {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 88px !important;
  overflow: hidden !important;
  color: var(--crd-games-text) !important;
  background: #111 !important;
  font-family: var(--crd-games-body) !important;
}

html body #crdGamesHub a {
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: inherit;
  text-decoration: none;
}

html body #crdGamesHub h1,
html body #crdGamesHub h2,
html body #crdGamesHub h3,
html body #crdGamesHub p,
html body #crdGamesHub figure,
html body #crdGamesHub nav {
  margin-top: 0;
}

.crd-games-required-body {
  display: none !important;
}

/* =========================================================
   HERO — retained CRDGAME identity
   ========================================================= */

html body #crdGamesHub .crd-games-hero {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  isolation: isolate !important;
  width: 100% !important;
  min-height: 470px !important;
  margin: 115px 0 0 !important;
  padding: 28px 0 0 !important;
  overflow: hidden !important;
  background:
    url("https://crdgame.ru/file/HOME_PUBL_NEWS/assets/crdgame-publ-hub-hero.png") center 47% / cover no-repeat !important;
  border: 0 !important;
}

@media (max-width: 1180px) {
  html body #crdGamesHub .crd-games-hero {
    margin-top: 0 !important;
  }
}

html body #crdGamesHub .crd-games-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 23%, rgba(255,224,168,.09), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 38%);
}

html body #crdGamesHub .crd-games-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 175px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8,7,6,0) 0%,
    rgba(8,7,6,.10) 24%,
    rgba(8,7,6,.34) 50%,
    rgba(8,7,6,.72) 78%,
    #080706 100%
  );
}

html body #crdGamesHub .crd-games-hero__shade {
  display: none !important;
}

html body #crdGamesHub .crd-games-hero__inner {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: min(1180px, calc(100% - 80px)) !important;
  min-height: 320px !important;
  margin: 0 auto !important;
  padding: 0 0 58px !important;
  text-align: center !important;
}

html body #crdGamesHub .crd-games-hero__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
  transform: translateY(45px) !important;
}

html body #crdGamesHub .crd-games-hero__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 0 20px !important;
  border: 1px solid rgba(217,173,92,.42) !important;
  font-family: var(--crd-games-head) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease !important;
}

html body #crdGamesHub .crd-games-hero__btn--primary {
  color: #15100a !important;
  background: var(--crd-games-gold-2) !important;
  border-color: var(--crd-games-gold) !important;
}

html body #crdGamesHub .crd-games-hero__btn--ghost {
  color: #eadfcf !important;
  background: rgba(7,7,7,.28) !important;
  backdrop-filter: blur(2px) !important;
}

html body #crdGamesHub .crd-games-hero__btn:hover,
html body #crdGamesHub .crd-games-hero__btn:focus-visible {
  transform: translateY(-1px) !important;
  outline: 0 !important;
}

html body #crdGamesHub .crd-games-hero__btn--primary:hover,
html body #crdGamesHub .crd-games-hero__btn--primary:focus-visible {
  background: #e0bd75 !important;
}

html body #crdGamesHub .crd-games-hero__btn--ghost:hover,
html body #crdGamesHub .crd-games-hero__btn--ghost:focus-visible {
  color: #15100a !important;
  background: var(--crd-games-gold-2) !important;
  border-color: var(--crd-games-gold) !important;
}

/* =========================================================
   INTRO — donor measured core: 1200px / 32px / 20px
   ========================================================= */

html body #crdGamesHub .crd-games-intro {
  width: min(var(--crd-games-core), calc(100% - 80px)) !important;
  margin: 74px auto 52px !important;
  padding: 0 !important;
  text-align: center !important;
}

html body #crdGamesHub .crd-games-intro__lead {
  width: min(920px, 100%) !important;
  margin: 0 auto 64px !important;
  color: var(--crd-games-text) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1.618 !important;
  text-align: center !important;
}

html body #crdGamesHub .crd-games-intro h1,
html body #crdGamesHub .crd-games-intro h2,
html body #crdGamesHub .crd-games-catalog-intro h2 {
  margin: 0 !important;
  color: #dda54f !important;
  font-family: var(--crd-games-head) !important;
  font-weight: 400 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

html body #crdGamesHub .crd-games-intro h1 {
  margin-bottom: 14px !important;
  color: #eee5d6 !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  letter-spacing: .08em !important;
}

html body #crdGamesHub .crd-games-intro h2,
html body #crdGamesHub .crd-games-catalog-intro h2 {
  font-size: 32px !important;
  line-height: 1.2 !important;
}

html body #crdGamesHub .crd-games-intro__columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 54px !important;
  margin: 48px 0 0 !important;
  text-align: left !important;
}

html body #crdGamesHub .crd-games-intro__columns p {
  margin: 0 !important;
  color: var(--crd-games-text) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1.618 !important;
}

/* =========================================================
   DIRECTORY ACCORDIONS — 1200px donor core
   ========================================================= */

html body #crdGamesHub .crd-games-directory {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 82px !important;
  padding: 0 !important;
}

html body #crdGamesHub .crd-games-accordion {
  margin: 0 0 16px !important;
  padding: 0 !important;
  color: var(--crd-games-text) !important;
  background: transparent !important;
  border: 0 !important;
}

html body #crdGamesHub .crd-games-accordion > summary {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 93px !important;
  margin: 0 !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  padding-left: max(24px, calc((100% - var(--crd-games-core)) / 2)) !important;
  padding-right: max(24px, calc((100% - var(--crd-games-core)) / 2)) !important;
  overflow: hidden !important;
  color: var(--crd-games-text) !important;
  background-color: #181818 !important;
  background-repeat: no-repeat !important;
  background-size: auto, cover !important;
  border: 0 !important;
  box-shadow: inset 0 -1px rgba(255,255,255,.045) !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
}

html body #crdGamesHub .crd-games-accordion--current > summary {
  background-image:
    linear-gradient(90deg, rgba(24,24,24,.94) 0%, rgba(24,24,24,.82) 34%, rgba(17,17,17,.50) 68%, rgba(17,17,17,.58) 100%),
    url("/file/games-hub/hero/crimson-desert.webp") !important;
  background-position: 0 0, 50% 45% !important;
}

html body #crdGamesHub .crd-games-accordion--library > summary {
  background-image:
    linear-gradient(90deg, rgba(24,24,24,.94) 0%, rgba(24,24,24,.80) 34%, rgba(17,17,17,.47) 68%, rgba(17,17,17,.56) 100%),
    url("/file/games-hub/hero/shadow-of-war.webp") !important;
  background-position: 0 0, 50% 65% !important;
}

html body #crdGamesHub .crd-games-accordion--future > summary {
  background-image:
    linear-gradient(90deg, rgba(24,24,24,.94) 0%, rgba(24,24,24,.80) 34%, rgba(17,17,17,.47) 68%, rgba(17,17,17,.56) 100%),
    url("/file/games-hub/hero/the-witcher-4.webp") !important;
  background-position: 0 0, 50% 35% !important;
}

html body #crdGamesHub .crd-games-accordion > summary::-webkit-details-marker {
  display: none !important;
}

html body #crdGamesHub .crd-games-accordion > summary::marker {
  content: "" !important;
}

html body #crdGamesHub .crd-games-accordion > summary::after,
html body #crdGamesHub .crd-games-accordion[open] > summary::after {
  content: none !important;
  display: none !important;
}

html body #crdGamesHub .crd-games-accordion__icon {
  position: relative !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--crd-games-gold) !important;
}

html body #crdGamesHub .crd-games-accordion__icon::before,
html body #crdGamesHub .crd-games-accordion__icon::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  width: 8px !important;
  height: 1px !important;
  background: currentColor !important;
  transform-origin: center !important;
}

html body #crdGamesHub .crd-games-accordion__icon::before {
  top: 8px !important;
  transform: translateX(-7px) rotate(42deg) !important;
}

html body #crdGamesHub .crd-games-accordion__icon::after {
  top: 8px !important;
  transform: translateX(-1px) rotate(-42deg) !important;
}

html body #crdGamesHub .crd-games-accordion[open] .crd-games-accordion__icon::before {
  transform: translateX(-7px) rotate(-42deg) !important;
}

html body #crdGamesHub .crd-games-accordion[open] .crd-games-accordion__icon::after {
  transform: translateX(-1px) rotate(42deg) !important;
}

html body #crdGamesHub .crd-games-accordion__copy {
  display: grid !important;
  grid-template-rows: auto auto !important;
  min-width: 0 !important;
}

html body #crdGamesHub .crd-games-accordion__copy strong {
  color: var(--crd-games-text) !important;
  font-family: var(--crd-games-body) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.618 !important;
  text-transform: uppercase !important;
}

html body #crdGamesHub .crd-games-accordion__copy small {
  color: var(--crd-games-muted) !important;
  font-family: var(--crd-games-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.618 !important;
  text-transform: uppercase !important;
  opacity: .5 !important;
}

html body #crdGamesHub .crd-games-accordion__panel {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: min(var(--crd-games-core), calc(100% - 80px)) !important;
  margin: 0 auto !important;
  padding: 20px 0 0 !important;
}

html body #crdGamesHub .crd-games-accordion:not([open]) > .crd-games-accordion__panel {
  display: none !important;
}

html body #crdGamesHub .crd-games-accordion__panel a,
html body #crdGamesHub .crd-games-accordion__panel .crd-games-accordion__static {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 80px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  color: #dda54f !important;
  background: transparent !important;
  border: 1px solid rgba(221,165,79,.42) !important;
  font-family: var(--crd-games-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease !important;
}

html body #crdGamesHub .crd-games-accordion__panel .crd-games-accordion__static {
  color: rgba(221,165,79,.72) !important;
  cursor: default !important;
}

html body #crdGamesHub .crd-games-accordion__panel a:hover,
html body #crdGamesHub .crd-games-accordion__panel a:focus-visible {
  color: #15100a !important;
  background: #dda54f !important;
  border-color: #dda54f !important;
  outline: 0 !important;
}

/* =========================================================
   CATALOG INTRO
   ========================================================= */

html body #crdGamesHub .crd-games-catalog-intro {
  width: min(var(--crd-games-core), calc(100% - 80px)) !important;
  margin: 82px auto 70px !important;
  padding: 0 !important;
  text-align: center !important;
  scroll-margin-top: 130px !important;
}

html body #crdGamesHub .crd-games-catalog-intro p {
  width: min(980px, 100%) !important;
  margin: 24px auto 0 !important;
  color: var(--crd-games-text) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1.62 !important;
}

/* =========================================================
   GAME SECTION — donor measured full-width banner geometry
   ========================================================= */

html body #crdGamesHub .crd-games-section {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 126px !important;
  padding: 0 !important;
  background: transparent !important;
  scroll-margin-top: 130px !important;
}

/* Each game keeps only its own hero image. No separate section background.
   The same source is reused by CSS inside the hero itself to create a
   reliable blurred lower edge without touching HTML or JS. */
html body #crdGamesHub #crimson-desert { --crd-games-cover-image: url("/file/games-hub/hero/crimson-desert.webp"); }
html body #crdGamesHub #the-witcher-4 { --crd-games-cover-image: url("/file/games-hub/hero/the-witcher-4.webp"); }
html body #crdGamesHub #gothic-1-remake { --crd-games-cover-image: url("/file/publ1/logo-section/Gothic_Remake.png"); }
html body #crdGamesHub #ac-black-flag { --crd-games-cover-image: url("/file/games-hub/hero/ac-black-flag-resynced.webp"); }
html body #crdGamesHub #shadow-of-war { --crd-games-cover-image: url("/file/games-hub/hero/shadow-of-war.webp"); }
html body #crdGamesHub #ac-shadows { --crd-games-cover-image: url("/file/games-hub/hero/ac-shadows.webp"); }
html body #crdGamesHub #space-marine-2 { --crd-games-cover-image: url("/file/games-hub/hero/WSM.png"); }
html body #crdGamesHub #ghost-of-tsushima { --crd-games-cover-image: url("/file/publ1/logo-section/GOFT.png"); }
html body #crdGamesHub #black-myth { --crd-games-cover-image: url("https://crdgame.ru/file/home/home2_0/home-slider/black2600.png"); }
html body #crdGamesHub #assassins-creed-odyssey { --crd-games-cover-image: url("https://crdgame.ru/file/publ1/ACO/img/3440.png"); }
html body #crdGamesHub #phantom-blade-zero { --crd-games-cover-image: url("https://crdgame.ru/file/publ1/pz/phantom_blade_ultrawide_3440x650_outpaint_sides.png"); }
html body #crdGamesHub #the-blood-of-dawnwalker { --crd-games-cover-image: url("https://crdgame.ru/file/publ1/blood/dawnwalker_ultrawide_3440x950_exact.png"); }

html body #crdGamesHub .crd-games-section + .crd-games-section {
  padding-top: 0 !important;
  border-top: 0 !important;
}

html body #crdGamesHub .crd-games-cover {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  height: 578px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #111 !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #crdGamesHub .crd-games-cover img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0 !important;
  transform: none !important;
  /* The sharp source itself dissolves at the bottom. This prevents the
     hard 1px/solid-color seam that appeared after the image finished loading. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0,0,0,.98) 62%, rgba(0,0,0,.80) 73%, rgba(0,0,0,.36) 88%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0,0,0,.98) 62%, rgba(0,0,0,.80) 73%, rgba(0,0,0,.36) 88%, transparent 100%) !important;
}

/* Real blurred continuation of the SAME hero image.
   It sits only inside the figure and is revealed where the sharp <img> fades.
   Unlike backdrop-filter this remains stable after lazy image loading. */
html body #crdGamesHub .crd-games-cover::before {
  content: "" !important;
  position: absolute !important;
  inset: -18px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image: var(--crd-games-cover-image) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  filter: blur(15px) brightness(.72) saturate(.92) !important;
  transform: scale(1.035) !important;
  transform-origin: center center !important;
}

/* One fade layer only: blurred picture -> page #111. */
html body #crdGamesHub .crd-games-cover::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    rgba(17,17,17,.08) 0%,
    rgba(17,17,17,.08) 46%,
    rgba(17,17,17,.20) 60%,
    rgba(17,17,17,.48) 76%,
    rgba(17,17,17,.82) 91%,
    #111 100%
  ) !important;
}

html body #crdGamesHub .crd-games-cover__copy {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 max(24px, 4vw) 128px !important;
  pointer-events: none !important;
  text-align: center !important;
}

html body #crdGamesHub .crd-games-kicker,
html body #crdGamesHub .crd-games-cover__copy .crd-games-kicker {
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: #dda54f !important;
  font-family: var(--crd-games-head) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

html body #crdGamesHub .crd-games-cover__copy h2 {
  max-width: min(1500px, 92vw) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--crd-games-text) !important;
  font-family: var(--crd-games-head) !important;
  font-size: clamp(30px, 2.1vw, 40px) !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-wrap: balance !important;
  text-shadow: 0 3px 18px rgba(0,0,0,.72) !important;
}

html body #crdGamesHub .crd-games-section__body {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Fallback before JS moves title into figure. */
html body #crdGamesHub .crd-games-section__head {
  width: min(var(--crd-games-core), calc(100% - 80px)) !important;
  margin: 64px auto 52px !important;
  padding: 0 !important;
  text-align: center !important;
}

html body #crdGamesHub .crd-games-section__head > .crd-games-kicker {
  margin-bottom: 12px !important;
}

html body #crdGamesHub .crd-games-section__head > h2 {
  margin: 0 0 18px !important;
  color: var(--crd-games-text) !important;
  font-family: var(--crd-games-head) !important;
  font-size: clamp(30px, 2.1vw, 40px) !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
  text-transform: uppercase !important;
}

/* After JS relocation, header is the 1200px donor description block. */
html.crd-games-hub-ready body #crdGamesHub .crd-games-section__head {
  width: min(var(--crd-games-core), calc(100% - 80px)) !important;
  margin: 42px auto 50px !important;
}

html body #crdGamesHub .crd-games-section__head p {
  width: 100% !important;
  max-width: var(--crd-games-core) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: var(--crd-games-text) !important;
  font-family: var(--crd-games-body) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1.62 !important;
  text-align: center !important;
}

/* =========================================================
   HIGHLIGHTS / LATEST — VULKK layout geometry, CRDGAME colors
   Audit basis:
   - 3 equal highlights
   - 4 equal latest cards
   - <=767: both groups become one full-width column
   - 768..1024: 3 highlights + 4 latest stay in one row
   - 1025..1599: highlights use full available width
   - >=1600: highlights capped at 2500px with 190px inner gutters
   ========================================================= */

html body #crdGamesHub .crd-games-card {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #crdGamesHub .crd-games-highlights {
  position: relative !important;
  z-index: 6 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 2500px !important;
  margin: -90px auto 0 !important;
  padding: 0 20px !important;
}

html body #crdGamesHub .crd-games-highlights .crd-games-card.is-big {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  background: linear-gradient(180deg, var(--crd-games-panel) 75%, rgba(17,17,17,0) 100%) !important;
}

html body #crdGamesHub .crd-games-card__media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #070707 !important;
  border: 0 !important;
  text-decoration: none !important;
}

html body #crdGamesHub .crd-games-highlights .crd-games-card__media,
html body #crdGamesHub .crd-games-feed .crd-games-card__media {
  aspect-ratio: 16 / 9 !important;
}

html body #crdGamesHub .crd-games-card__media .news-image-wrap,
html body #crdGamesHub .crd-games-card__media .news-image-wrap.center,
html body #crdGamesHub .crd-games-card__media .news-image-wrap > a,
html body #crdGamesHub .crd-games-card__media .news-image-wrap > a.ulightbox {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
}

html body #crdGamesHub .crd-games-card__media img,
html body #crdGamesHub .crd-games-card__media .news-image-wrap img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0 !important;
  transform: none !important;
  transition: transform .30s ease, filter .30s ease !important;
}

html body #crdGamesHub .crd-games-card__media .news-image-caption {
  display: none !important;
}

html body #crdGamesHub .crd-games-card__media::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, transparent 72%, rgba(0,0,0,.20) 100%) !important;
}

html body #crdGamesHub .crd-games-card__category-badge {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 4 !important;
  display: block !important;
  max-width: 84% !important;
  padding: 7px 10px !important;
  color: #f3ede4 !important;
  background: rgba(7,8,9,.80) !important;
  font-family: var(--crd-games-body) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .055em !important;
  text-align: right !important;
  text-transform: uppercase !important;
  overflow-wrap: anywhere !important;
  pointer-events: none !important;
}

html body #crdGamesHub .crd-games-card:hover .crd-games-card__media img {
  transform: scale(1.025) !important;
  filter: brightness(1.05) contrast(1.03) !important;
}

html body #crdGamesHub .crd-games-card__body {
  min-width: 0 !important;
  padding: 0 !important;
}

html body #crdGamesHub .crd-games-highlights .crd-games-card__body {
  padding: 10px 0 0 !important;
}

html body #crdGamesHub .crd-games-card__meta,
html body #crdGamesHub .crd-games-card__desc,
html body #crdGamesHub .crd-games-card__description,
html body #crdGamesHub .crd-games-card__excerpt {
  display: none !important;
}

html body #crdGamesHub .crd-games-card h3 {
  margin: 0 !important;
  color: #dda54f !important;
  font-family: var(--crd-games-body) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

html body #crdGamesHub .crd-games-highlights .crd-games-card h3 {
  min-height: 4.4em !important;
}

html body #crdGamesHub .crd-games-card h3 a {
  color: inherit !important;
  text-decoration: none !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  transition: color .18s ease !important;
}

html body #crdGamesHub .crd-games-card h3 a:hover,
html body #crdGamesHub .crd-games-card h3 a:focus-visible {
  color: #f0bd6e !important;
  outline: 0 !important;
}

.crd-games-card__media .ulightbox,
.crd-games-card__media .news-image-wrap a {
  pointer-events: none;
}

html body #crdGamesHub .crd-games-feed,
html body #crdGamesHub .crd-games-latest {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 40px 20px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

html body #crdGamesHub .crd-games-feed .crd-games-card.is-small {
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
}

html body #crdGamesHub .crd-games-feed .crd-games-card__media {
  margin: 0 0 11px !important;
}

html body #crdGamesHub .crd-games-feed .crd-games-card__body {
  padding: 0 !important;
}

html body #crdGamesHub .crd-games-feed .crd-games-card h3 {
  min-height: 3.6em !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

html body #crdGamesHub .crd-games-feed .crd-games-card__category-badge {
  max-width: 90% !important;
  padding: 5px 7px !important;
  font-size: 7px !important;
}

html body #crdGamesHub .crd-games-overflow,
html body #crdGamesHub .crd-games-feed-more {
  display: none !important;
}

html body #crdGamesHub .crd-games-empty {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  padding: 34px 0 !important;
  color: rgba(236,236,209,.56) !important;
  text-align: center !important;
}

@media (min-width: 1600px) {
  html body #crdGamesHub .crd-games-highlights {
    padding-left: 170px !important;
    padding-right: 170px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  html body #crdGamesHub .crd-games-highlights {
    margin-top: -28px !important;
  }
}

@media (max-width: 767px) {
  html body #crdGamesHub .crd-games-highlights {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-top: -28px !important;
    padding: 0 20px !important;
  }

  html body #crdGamesHub .crd-games-highlights .crd-games-card h3 {
    min-height: 0 !important;
    padding-bottom: .75em !important;
  }

  html body #crdGamesHub .crd-games-feed,
  html body #crdGamesHub .crd-games-latest {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 0 20px !important;
  }

  html body #crdGamesHub .crd-games-feed .crd-games-card h3 {
    min-height: 0 !important;
  }
}

/* =========================================================
   BLACK MYTH franchise cards
   ========================================================= */

html body #crdGamesHub #black-myth .crd-black-myth-games {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: min(900px, calc(100% - 80px)) !important;
  margin: -14px auto 52px !important;
  padding: 0 !important;
}

html body #crdGamesHub #black-myth .crd-black-myth-game {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 20px 22px !important;
  text-align: left !important;
  background: linear-gradient(180deg, rgba(21,17,12,.68), rgba(8,7,6,.84)) !important;
  border: 1px solid rgba(174,137,84,.15) !important;
  box-shadow: none !important;
}

html body #crdGamesHub #black-myth .crd-black-myth-game__label {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--crd-games-gold-2) !important;
  font-family: var(--crd-games-head) !important;
  font-size: 8px !important;
  line-height: 1.2 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

html body #crdGamesHub #black-myth .crd-black-myth-game h3 {
  margin: 0 0 8px !important;
  color: #fff0d8 !important;
  font-family: var(--crd-games-head) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

html body #crdGamesHub #black-myth .crd-black-myth-game p {
  margin: 0 !important;
  color: rgba(239,231,216,.66) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

html body #crdGamesHub #black-myth .crd-black-myth-game__links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 15px !important;
}

html body #crdGamesHub #black-myth .crd-black-myth-game__links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  color: #d9ad5c !important;
  background: rgba(201,162,97,.025) !important;
  border: 1px solid rgba(201,162,97,.23) !important;
  font-family: var(--crd-games-head) !important;
  font-size: 8px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body #crdGamesHub #black-myth .crd-black-myth-game__links a:hover,
html body #crdGamesHub #black-myth .crd-black-myth-game__links a:focus-visible {
  color: #15100a !important;
  background: var(--crd-games-gold-2) !important;
  border-color: var(--crd-games-gold) !important;
  outline: 0 !important;
}

/* =========================================================
   SECTION BUTTON — donor-like large outlined action
   ========================================================= */

html body #crdGamesHub .crd-games-more {
  width: 100% !important;
  margin: 58px 0 0 !important;
  text-align: center !important;
}

html body #crdGamesHub .crd-games-more a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 68px !important;
  padding: 12px 28px !important;
  color: #dda54f !important;
  background: transparent !important;
  border: 1px solid rgba(221,165,79,.62) !important;
  font-family: var(--crd-games-body) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease !important;
}

html body #crdGamesHub .crd-games-more a:hover,
html body #crdGamesHub .crd-games-more a:focus-visible {
  color: #15100a !important;
  background: #dda54f !important;
  border-color: #dda54f !important;
  outline: 0 !important;
}



/* =========================================================
   RESPONSIVE — donor breakpoints, CRDGAME content preserved
   ========================================================= */

@media (max-width: 1300px) {
  html body #crdGamesHub .crd-games-intro,
  html body #crdGamesHub .crd-games-catalog-intro,
  html body #crdGamesHub .crd-games-section__head {
    width: calc(100% - 48px) !important;
  }
}

@media (max-width: 1024px) {
  html body #crdGamesHub .crd-games-hero {
    min-height: 430px !important;
  }

  html body #crdGamesHub .crd-games-intro {
    margin-top: 58px !important;
  }

  html body #crdGamesHub .crd-games-intro__lead,
  html body #crdGamesHub .crd-games-intro__columns p,
  html body #crdGamesHub .crd-games-catalog-intro p,
  html body #crdGamesHub .crd-games-section__head p {
    font-size: 17px !important;
  }

  html body #crdGamesHub .crd-games-directory {
    margin-bottom: 66px !important;
  }

  html body #crdGamesHub .crd-games-accordion__panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body #crdGamesHub .crd-games-section {
    margin-bottom: 100px !important;
  }
}

@media (max-width: 760px) {
  html body #crdGamesHub .crd-games-intro__columns {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
}

@media (max-width: 767px) {
  html body #crdGamesHub {
    padding-bottom: 64px !important;
  }

  html body #crdGamesHub .crd-games-hero {
    min-height: 370px !important;
    padding-top: 18px !important;
    background-position: 50% center !important;
  }

  html body #crdGamesHub .crd-games-hero::after {
    height: 126px !important;
  }

  html body #crdGamesHub .crd-games-hero__inner {
    width: calc(100% - 28px) !important;
    min-height: 250px !important;
    padding-bottom: 42px !important;
  }

  html body #crdGamesHub .crd-games-hero__actions {
    gap: 8px !important;
  }

  html body #crdGamesHub .crd-games-hero__btn {
    min-height: 39px !important;
    padding: 0 14px !important;
    font-size: 8px !important;
  }

  html body #crdGamesHub .crd-games-intro,
  html body #crdGamesHub .crd-games-catalog-intro,
  html body #crdGamesHub .crd-games-section__head {
    width: calc(100% - 28px) !important;
  }

  html body #crdGamesHub .crd-games-intro {
    margin: 42px auto 36px !important;
  }

  html body #crdGamesHub .crd-games-intro__lead {
    margin-bottom: 46px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  html body #crdGamesHub .crd-games-intro h1 {
    font-size: 15px !important;
  }

  html body #crdGamesHub .crd-games-intro h2,
  html body #crdGamesHub .crd-games-catalog-intro h2 {
    font-size: 24px !important;
    line-height: 1.18 !important;
  }

  html body #crdGamesHub .crd-games-intro__columns {
    margin-top: 30px !important;
  }

  html body #crdGamesHub .crd-games-intro__columns p,
  html body #crdGamesHub .crd-games-catalog-intro p,
  html body #crdGamesHub .crd-games-section__head p {
    font-size: 14px !important;
    line-height: 1.58 !important;
  }

  /* VULKK keeps the accordion title/subtitle sizes on mobile. */
  html body #crdGamesHub .crd-games-directory {
    margin-bottom: 54px !important;
  }

  html body #crdGamesHub .crd-games-accordion {
    margin-bottom: 20px !important;
  }

  html body #crdGamesHub .crd-games-accordion > summary {
    min-height: 93px !important;
    padding: 20px !important;
    gap: 10px !important;
  }

  html body #crdGamesHub .crd-games-accordion__icon {
    flex-basis: 20px !important;
    width: 20px !important;
  }

  html body #crdGamesHub .crd-games-accordion__copy strong {
    font-size: 20px !important;
    line-height: 1.618 !important;
  }

  html body #crdGamesHub .crd-games-accordion__copy small {
    margin-top: 0 !important;
    font-size: 12px !important;
    line-height: 1.618 !important;
    text-transform: uppercase !important;
    opacity: .5 !important;
  }

  html body #crdGamesHub .crd-games-accordion__panel {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: calc(100% - 28px) !important;
    padding-top: 12px !important;
  }

  html body #crdGamesHub .crd-games-accordion__panel a,
  html body #crdGamesHub .crd-games-accordion__panel .crd-games-accordion__static {
    min-height: 50px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  html body #crdGamesHub .crd-games-catalog-intro {
    margin: 58px auto 50px !important;
  }

  html body #crdGamesHub .crd-games-catalog-intro p {
    margin-top: 20px !important;
  }

  html body #crdGamesHub .crd-games-section {
    margin-bottom: 74px !important;
  }

  /* Exact donor breakpoint: 250px mobile game banner. */
  html body #crdGamesHub .crd-games-cover {
    height: 250px !important;
  }

  html body #crdGamesHub .crd-games-cover__copy {
    padding: 0 14px 58px !important;
  }
  html body #crdGamesHub .crd-games-cover img {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0,0,0,.96) 58%, rgba(0,0,0,.70) 72%, rgba(0,0,0,.30) 87%, transparent 100%) !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0,0,0,.96) 58%, rgba(0,0,0,.70) 72%, rgba(0,0,0,.30) 87%, transparent 100%) !important;
  }

  html body #crdGamesHub .crd-games-cover::before {
    inset: -12px !important;
    filter: blur(10px) brightness(.72) saturate(.92) !important;
  }

  html body #crdGamesHub .crd-games-cover::after {
    background: linear-gradient(180deg, rgba(17,17,17,.06) 0%, rgba(17,17,17,.06) 40%, rgba(17,17,17,.24) 58%, rgba(17,17,17,.56) 77%, rgba(17,17,17,.86) 92%, #111 100%) !important;
  }


  html body #crdGamesHub .crd-games-cover__copy .crd-games-kicker {
    margin-bottom: 7px !important;
    font-size: 8px !important;
    letter-spacing: .13em !important;
  }

  html body #crdGamesHub .crd-games-cover__copy h2 {
    max-width: 94vw !important;
    font-size: 25px !important;
    line-height: 1.12 !important;
  }

  html.crd-games-hub-ready body #crdGamesHub .crd-games-section__head {
    margin: 40px auto !important;
  }

  html body #crdGamesHub #black-myth .crd-black-myth-games {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: calc(100% - 28px) !important;
    margin: 0 auto 30px !important;
  }

  html body #crdGamesHub #black-myth .crd-black-myth-game {
    padding: 17px 18px !important;
  }

  html body #crdGamesHub .crd-games-more {
    margin-top: 32px !important;
  }

  html body #crdGamesHub .crd-games-more a {
    min-height: 48px !important;
    max-width: calc(100% - 28px) !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
  }
}

/* Games navigation uses plain labels, without disclosure arrows. */
body.crd-games-page-body .crd-vk-toc__item--child .crd-vk-toc__link::before { display:none!important; }
body.crd-games-page-body .crd-vk-toc__item--child .crd-vk-toc__link { padding-left:0!important; }

/* Shared profile label style, preserving the existing top-right anchor. */
html body #crdGamesHub .crd-games-card__category-badge{
 font:300 17px/27.506px "Exo 2",system,sans-serif!important;
 color:#ece2d1!important;background:rgba(17,17,17,.66)!important;
 padding:4px 10px 6px!important;letter-spacing:normal!important;border:0!important;
 box-sizing:border-box!important;width:max-content!important;max-width:100%!important;
 white-space:normal!important;overflow-wrap:anywhere!important;text-overflow:clip!important;
}
html body #crdGamesHub .crd-games-feed .crd-games-card__category-badge{
 font-size:13px!important;line-height:21px!important;padding:3px 7px 4px!important;
}