/* NYRELIX v0.3 visual-diversity pass.
   The production branch stays untouched while these art directions are reviewed. */

/* Give repeated cards distinct visual identities without adding external dependencies. */
.card-image,.dev-art,.platform-art,.review-art,.mini-bg{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* Hero side stories: three clearly different moods. */
.mini-bg-a{
  filter:none!important;
  background-image:
    linear-gradient(90deg,rgba(3,9,18,.92) 0%,rgba(4,19,34,.5) 58%,rgba(7,13,25,.16)),
    radial-gradient(circle at 76% 20%,rgba(39,212,255,.36),transparent 34%),
    url('assets/hero.jpg')!important;
  background-position:center,center,58% 48%!important;
  background-size:cover!important;
}
.mini-bg-b{
  filter:none!important;
  background-image:
    linear-gradient(90deg,rgba(16,7,8,.92),rgba(58,15,10,.42) 58%,rgba(8,8,15,.1)),
    radial-gradient(circle at 78% 28%,rgba(255,111,55,.58),transparent 28%),
    linear-gradient(128deg,transparent 0 48%,rgba(255,213,86,.18) 49% 51%,transparent 52%),
    url('assets/hero.jpg')!important;
  background-position:center,center,center,18% 64%!important;
  background-size:cover!important;
  background-blend-mode:normal,screen,screen,luminosity;
}
.mini-bg-c{
  filter:none!important;
  background-image:
    linear-gradient(90deg,rgba(6,9,15,.94),rgba(12,34,34,.5) 60%,rgba(13,8,20,.14)),
    radial-gradient(circle at 72% 20%,rgba(92,255,196,.28),transparent 30%),
    radial-gradient(circle at 82% 76%,rgba(159,66,255,.32),transparent 38%),
    url('assets/hero.jpg')!important;
  background-position:center,center,center,76% 24%!important;
  background-size:cover!important;
  background-blend-mode:normal,screen,screen,luminosity;
}

/* Upcoming releases: preserve Ashen Tides as the visual anchor, then diversify the rest. */
.img-a{filter:none!important;background-position:17% 48%!important}
.img-b{
  filter:none!important;
  background-image:
    radial-gradient(circle at 70% 28%,rgba(255,52,222,.95),transparent 12%),
    radial-gradient(circle at 30% 72%,rgba(15,226,255,.8),transparent 18%),
    linear-gradient(118deg,#080b23 0%,#17295d 38%,#8b166f 70%,#140817 100%)!important;
}
.img-c{
  filter:none!important;
  background-image:
    radial-gradient(circle at 64% 28%,rgba(180,211,224,.28),transparent 18%),
    linear-gradient(155deg,rgba(255,255,255,.08) 0 1px,transparent 1px 13px),
    linear-gradient(135deg,#091116 0%,#1d302d 46%,#405347 70%,#111719 100%)!important;
}
.img-d{
  filter:none!important;
  background-image:
    radial-gradient(circle at 66% 36%,rgba(194,105,255,.9),transparent 12%),
    radial-gradient(circle at 40% 68%,rgba(63,119,255,.55),transparent 24%),
    linear-gradient(160deg,#060816 0%,#201447 45%,#4f1769 72%,#090810 100%)!important;
}
.img-e{
  filter:none!important;
  background-image:
    linear-gradient(115deg,transparent 0 47%,rgba(255,181,73,.16) 48% 50%,transparent 51%),
    radial-gradient(circle at 76% 32%,rgba(255,132,57,.72),transparent 18%),
    linear-gradient(145deg,#0c0e13 0%,#292019 46%,#6e3118 73%,#111014 100%)!important;
}

/* Development radar: each project gets its own development-stage atmosphere. */
.dev-a{
  filter:none!important;
  background-image:
    radial-gradient(circle at 64% 24%,rgba(151,226,255,.34),transparent 22%),
    linear-gradient(158deg,#0b1320 0%,#16344a 40%,#295a58 70%,#0a1117 100%)!important;
}
.dev-b{
  filter:none!important;
  background-image:
    linear-gradient(130deg,rgba(78,255,209,.12) 0 2px,transparent 2px 20px),
    radial-gradient(circle at 28% 35%,rgba(74,255,198,.42),transparent 20%),
    linear-gradient(145deg,#061414,#102f28 50%,#153d46 75%,#070d13 100%)!important;
}
.dev-c{
  filter:none!important;
  background-image:
    radial-gradient(circle at 68% 30%,rgba(182,88,255,.58),transparent 18%),
    linear-gradient(120deg,rgba(255,255,255,.07) 0 1px,transparent 1px 15px),
    linear-gradient(150deg,#0a0a18,#22133d 48%,#44234d 78%,#0d0b13)!important;
}
.dev-d{
  filter:none!important;
  background-image:
    radial-gradient(circle at 70% 34%,rgba(255,195,76,.7),transparent 18%),
    linear-gradient(155deg,#151109,#403019 48%,#6f5120 72%,#12100d)!important;
}

/* Platform news: recognizable platform palettes without copying platform artwork. */
.pa{
  filter:none!important;
  background-image:
    radial-gradient(circle at 28% 34%,rgba(44,183,255,.5),transparent 18%),
    linear-gradient(145deg,#07111e,#153b66 55%,#0b1725)!important;
}
.pb{
  filter:none!important;
  background-image:
    radial-gradient(circle at 72% 34%,rgba(116,154,255,.52),transparent 18%),
    linear-gradient(145deg,#080d1c,#233c82 54%,#10172c)!important;
}
.pcx{
  filter:none!important;
  background-image:
    radial-gradient(circle at 70% 28%,rgba(102,255,142,.5),transparent 18%),
    linear-gradient(145deg,#07130b,#1d522d 55%,#0b1a10)!important;
}
.pd{
  filter:none!important;
  background-image:
    radial-gradient(circle at 30% 32%,rgba(255,97,116,.48),transparent 18%),
    linear-gradient(145deg,#17070a,#732437 55%,#210b10)!important;
}
.pe{
  filter:none!important;
  background-image:
    radial-gradient(circle at 72% 30%,rgba(70,219,255,.48),transparent 18%),
    linear-gradient(145deg,#07121b,#15537a 52%,#10152c)!important;
}

/* Reviews: distinct editorial artwork for each score card. */
.ra{
  filter:none!important;
  background-image:
    radial-gradient(circle at 66% 28%,rgba(65,239,190,.44),transparent 18%),
    linear-gradient(145deg,#08141a,#193f47 50%,#10212a)!important;
}
.rb{
  filter:none!important;
  background-image:
    radial-gradient(circle at 70% 30%,rgba(255,139,67,.6),transparent 18%),
    linear-gradient(145deg,#17100b,#55301a 52%,#1f1010)!important;
}
.rc{
  filter:none!important;
  background-image:
    radial-gradient(circle at 60% 28%,rgba(106,177,255,.52),transparent 18%),
    linear-gradient(145deg,#09101b,#173a5e 52%,#101827)!important;
}
.rd{
  filter:none!important;
  background-image:
    radial-gradient(circle at 67% 30%,rgba(232,74,255,.55),transparent 18%),
    linear-gradient(145deg,#120917,#52244e 50%,#211025)!important;
}

/* Add a subtle editorial texture so gradient placeholders feel intentional rather than empty. */
.card-image::after,.dev-art::after,.platform-art::after,.review-art::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent 55%,rgba(3,7,13,.58)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 22px);
  mix-blend-mode:screen;
  opacity:.42;
}

/* Slightly stronger card hierarchy on desktop. */
@media (min-width:761px){
  .release-card,.dev-card,.platform-card,.review-card,.mini-feature{
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  }
  .release-card:hover,.dev-card:hover,.platform-card:hover,.review-card:hover,.mini-feature:hover{
    transform:translateY(-3px);
    border-color:#2b4664;
    box-shadow:0 20px 48px rgba(0,0,0,.38);
  }
}

@media (max-width:760px){
  /* Keep the mobile carousel imagery clean and readable. */
  .card-image,.dev-art,.platform-art,.review-art{background-size:cover!important;background-position:center!important}
  .mini-feature{background:#07101a!important}
}