.releases-page main a { color: #315fa8; }
.releases-page main a:hover { color: #244780; }
.releases-page .nav-parent.active { color: var(--coral-dark); }
.releases-page .nav-parent.active::after { content: ''; position: absolute; right: 0; bottom: 5px; left: 0; height: 2px; border-radius: 2px; background: var(--coral); }
.releases-page .active-subpage { background: var(--lavender); color: var(--coral-dark); }

.releases-hero {
  position: relative;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 84% 17%, rgba(255, 94, 103, .3), transparent 27%),
    radial-gradient(circle at 94% 92%, rgba(99, 216, 181, .2), transparent 32%),
    linear-gradient(135deg, #21072c, #4c1458 58%, #7a214e);
}
.releases-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .1;
  background-image: radial-gradient(circle, white 1px, transparent 1.5px), linear-gradient(115deg, transparent 46%, white 46.2%, transparent 46.5%);
  background-size: 40px 40px, 145px 145px;
  mask-image: linear-gradient(90deg, transparent 8%, black);
}
.hero-grid {
  position: relative;
  max-width: 1200px;
  min-height: 590px;
  margin: auto;
  padding: 70px 35px;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(350px, .78fr);
  align-items: center;
  gap: 64px;
}
.hero-copy { min-width: 0; }
.releases-hero h1 { max-width: 760px; }
.releases-hero p { max-width: 720px; color: #eadceb; }
.releases-hero strong { color: white; }
.releases-hero .hero-copy a { color: #8ce5ca; font-weight: 850; }

.release-console {
  position: relative;
  min-width: 0;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 23px;
  background: rgba(26, 4, 34, .53);
  box-shadow: 0 27px 58px rgba(13, 2, 18, .32);
  backdrop-filter: blur(12px);
}
.release-console::after { content: ''; position: absolute; top: -65px; right: -65px; width: 155px; height: 155px; border: 25px solid rgba(99,216,181,.08); border-radius: 50%; }
.release-console > * { position: relative; z-index: 1; }
.console-head { padding-bottom: 15px; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.12); color: #c8adca; font-size: 8px; font-weight: 850; letter-spacing: 1.5px; }
.console-head span:last-child { color: #8ce5ca; }
.console-head i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); animation: live-pulse 1.7s infinite; }
@keyframes live-pulse { 50% { opacity: .35; transform: scale(.75); } }
.console-list { padding: 17px 0; display: grid; gap: 10px; }
.console-game { min-height: 77px; padding: 12px; display: grid; grid-template-columns: 47px 1fr 24px; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.055); transition: transform .25s, background .25s; }
.console-game:hover { transform: translateX(-5px); background: rgba(255,255,255,.09); }
.game-glyph { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, var(--coral), #ff9a6f); color: white; font-size: 18px; font-weight: 900; }
.violet-game .game-glyph { background: linear-gradient(145deg, #7751a8, #a178cf); }
.mint-game .game-glyph { background: linear-gradient(145deg, #15937a, var(--mint)); }
.console-game small { display: block; margin-bottom: 4px; color: #ffb7aa; font-size: 7px; font-weight: 850; letter-spacing: 1.2px; }
.console-game strong { display: block; color: white; font-size: 14px; }
.console-game em { display: block; margin-top: 3px; color: #cdb9d1; font-size: 9px; font-style: normal; }
.console-game b { color: rgba(255,255,255,.3); font-size: 10px; }
.console-categories { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.console-categories span { padding: 10px 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #c4abc7; font-size: 7px; font-weight: 850; letter-spacing: .7px; text-align: center; }

.release-content { max-width: 1160px; margin: auto; padding: 62px 30px 82px; }
.section-intro, .slots-heading { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 16px; }
.section-intro h2, .slots-heading h2 { font-size: 32px; }
.date-stamp { padding-left: 25px; border-left: 1px solid var(--line); color: #a187a5; font-size: 8px; font-weight: 800; line-height: 1.6; letter-spacing: 1.3px; }
.date-stamp strong { color: var(--plum); font-size: 11px; }

.may-section { scroll-margin-top: 110px; }
.feature-pair { margin-top: 29px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.release-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 23px; background: white; box-shadow: 0 15px 38px rgba(53,19,68,.07); }
.card-visual { position: relative; aspect-ratio: 16 / 9; min-height: 220px; overflow: hidden; background: #210b2a; }
.game-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.75,.25,1), filter .65s ease; }
.game-card-visual::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(18,4,27,.62) 0%, rgba(18,4,27,.12) 42%, transparent 68%), linear-gradient(0deg, rgba(18,4,27,.42), transparent 45%); }
.game-card-logo { position: absolute; z-index: 2; top: 18px; left: 18px; width: clamp(110px, 23%, 150px); padding: 10px 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 13px; background: rgba(22,6,32,.72); box-shadow: 0 8px 22px rgba(12,2,20,.25); backdrop-filter: blur(8px); }
.game-card-logo img { display: block; width: 100%; height: auto; }
.game-card-type { position: absolute; z-index: 2; left: 19px; bottom: 16px; color: white; font-size: 8px; font-weight: 850; letter-spacing: 1.5px; text-shadow: 0 2px 8px rgba(0,0,0,.65); }
.release-card:hover .game-card-image { transform: scale(1.045); filter: saturate(1.08) brightness(1.04); }
.release-card-copy { flex: 1; padding: 30px; }
.card-kicker, .slot-type { color: var(--coral-dark); font-size: 8px; font-weight: 850; letter-spacing: 1.3px; }
.roulette-card .card-kicker { color: #7855a8; }
.release-card h3 { margin: 12px 0 20px; color: var(--plum); font-size: 26px; line-height: 1.25; }
.release-card p { font-size: 13.5px; }

.slots-section { scroll-margin-top: 110px; margin-top: 43px; padding: 39px; overflow: hidden; border: 1px solid #dfd3e3; border-radius: 25px; background: linear-gradient(145deg,#f7f0f8,#fff 45%); box-shadow: 0 16px 40px rgba(53,19,68,.06); }
.slots-intro { max-width: 930px; margin: 22px 0 30px 54px; padding-left: 18px; border-left: 3px solid #7751a8; font-size: 14px; }
.slot-stream { display: grid; gap: 12px; }
.slot-story { position: relative; padding: 26px; display: grid; grid-template-columns: 34px 64px minmax(0,1fr) 145px; align-items: start; gap: 17px; overflow: hidden; border: 1px solid #e5dbe8; border-radius: 17px; background: white; transition: transform .25s, box-shadow .25s; }
.slot-story:hover { transform: translateY(-3px); box-shadow: 0 13px 30px rgba(53,19,68,.08); }
.slot-index { display: flex; flex-direction: column; align-items: center; gap: 9px; color: #9a799b; font-size: 8px; font-weight: 850; }
.slot-index i { width: 1px; min-height: 75px; flex: 1; background: linear-gradient(#c5abc8,transparent); }
.slot-emblem { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 9px 18px rgba(53,19,68,.16); }
.slot-copy { min-width: 0; }
.slot-copy h3 { margin: 7px 0 14px; color: var(--plum); font-size: 23px; line-height: 1.25; }
.slot-copy p { margin: 10px 0; font-size: 13px; line-height: 1.75; }
.feature-tags { display: flex; flex-direction: column; gap: 7px; align-self: center; }
.feature-tags span { padding: 9px 8px; border: 1px solid #eadfe9; border-radius: 8px; background: #faf7fb; color: #896f8e; font-size: 7px; font-weight: 850; letter-spacing: .75px; text-align: center; }

.changes-section { scroll-margin-top: 110px; margin-top: 43px; }
.compact-intro { margin-bottom: 28px; }
.change-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.change-card { position: relative; min-width: 0; padding: 31px; overflow: hidden; border: 1px solid #cce8e1; border-radius: 22px; background: #effaf7; box-shadow: 0 14px 34px rgba(53,19,68,.06); }
.change-card::after { content: ''; position: absolute; right: -65px; bottom: -65px; width: 150px; height: 150px; border: 23px solid rgba(26,147,122,.06); border-radius: 50%; }
.change-card > * { position: relative; z-index: 1; }
.change-icon { width: 68px; height: 68px; margin-bottom: 20px; border-radius: 18px; box-shadow: 0 10px 20px rgba(53,19,68,.14); }
.change-card .card-kicker { color: #16836e; }
.change-card h3 { margin: 11px 0 20px; color: var(--plum); font-size: 26px; line-height: 1.25; }
.change-card p { font-size: 13.5px; }
.table-card { border-color: #ddd2e6; background: #f5f0f8; }
.table-card::after { border-color: rgba(119,81,168,.06); }
.table-card .card-kicker { color: #7751a8; }

.mini-game-icon { position: relative; display: block; flex: 0 0 auto; overflow: hidden; isolation: isolate; background: #260d31; }
.mini-game-art { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.75,.25,1), filter .45s ease; }
.mini-game-icon::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(0deg,rgba(20,4,27,.52),transparent 52%); }
.mini-game-brand { position: absolute; z-index: 2; right: 5px; bottom: 5px; width: 39px; padding: 3px 4px; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; background: rgba(20,4,27,.74); box-shadow: 0 3px 8px rgba(0,0,0,.24); }
.mini-game-brand img { display: block; width: 100%; height: auto; }
.slot-story:hover .mini-game-art, .change-card:hover .mini-game-art { transform: scale(1.09); filter: saturate(1.08) brightness(1.04); }

.relevance-section { scroll-margin-top: 110px; margin-top: 43px; padding: 42px; overflow: hidden; border-radius: 24px; color: white; background: radial-gradient(circle at 100% 0,rgba(255,94,103,.24),transparent 35%),linear-gradient(130deg,var(--plum-deep),#5c1d66); }
.relevance-heading { display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start; }
.relevance-heading .topic-label { color: #ffaaa5; }
.relevance-section h2, .relevance-section p, .relevance-section strong { color: white; }
.audience-strip { margin: 28px 0; display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; }
.audience-strip span { min-height: 67px; display: flex; align-items: center; justify-content: center; gap: 10px; border-right: 1px solid rgba(255,255,255,.13); color: #ead9eb; font-size: 8px; font-weight: 850; letter-spacing: 1.1px; }
.audience-strip span:last-child { border: 0; }
.audience-strip i { color: #8ce5ca; font-size: 19px; font-style: normal; }
.relevance-copy { max-width: 980px; margin-left: 54px; }
.relevance-copy p { color: #e8d8e9; }
.availability-note { margin-top: 25px; padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: rgba(255,255,255,.07); }
.availability-note > span { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: white; font-weight: 900; }
.availability-note p { margin: 0; font-size: 13px; }
.availability-note a { color: #8ce5ca !important; font-weight: 850; }

.releases-page .faq-section { scroll-margin-top: 110px; margin-top: 43px; }
.reveal { transition: opacity .55s ease, transform .55s ease; }
.js-ready .reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .release-console { width: 100%; max-width: 700px; }
  .slot-story { grid-template-columns: 34px 64px minmax(0,1fr); }
  .feature-tags { grid-column: 3; flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 780px) {
  .feature-pair, .change-pair { grid-template-columns: 1fr; }
  .slot-story { grid-template-columns: 30px 55px minmax(0,1fr); padding: 22px; gap: 13px; }
  .slot-emblem { width: 55px; height: 55px; border-radius: 15px; }
  .relevance-copy { margin-left: 0; }
}

@media (max-width: 620px) {
  .releases-page .nav-parent.active::after { display: none; }
  .hero-grid { min-height: 0; padding: 43px 21px 48px; }
  .releases-hero h1 { font-size: 38px; }
  .release-console { padding: 19px; border-radius: 19px; }
  .console-game { grid-template-columns: 43px 1fr 20px; }
  .game-glyph { width: 43px; height: 43px; }
  .release-content { padding: 42px 17px 58px; }
  .section-intro, .slots-heading { grid-template-columns: 34px 1fr; align-items: start; }
  .section-intro h2, .slots-heading h2 { font-size: 27px; }
  .date-stamp { grid-column: 2; padding: 0; border: 0; }
  .feature-pair { margin-top: 23px; }
  .card-visual { min-height: 185px; }
  .game-card-logo { top: 13px; left: 13px; padding: 8px 10px; border-radius: 10px; }
  .game-card-type { left: 14px; bottom: 12px; }
  .release-card-copy { padding: 25px 20px; }
  .release-card h3 { font-size: 23px; }
  .slots-section { margin-top: 31px; padding: 26px 18px; border-radius: 19px; }
  .slots-intro { margin: 20px 0 24px; padding-left: 15px; }
  .slot-story { padding: 20px 15px; grid-template-columns: 24px 47px minmax(0,1fr); gap: 10px; }
  .slot-emblem { width: 47px; height: 47px; border-radius: 13px; font-size: 11px; }
  .mini-game-brand { right: 3px; bottom: 3px; width: 30px; padding: 2px 3px; border-radius: 4px; }
  .slot-copy h3 { font-size: 21px; overflow-wrap: anywhere; }
  .slot-copy p { grid-column: 1 / -1; }
  .feature-tags { grid-column: 1 / -1; margin-left: 34px; }
  .feature-tags span { flex: 1 1 auto; }
  .changes-section { margin-top: 31px; }
  .change-card { padding: 26px 20px; border-radius: 19px; }
  .change-card h3 { font-size: 23px; }
  .relevance-section { margin-top: 31px; padding: 29px 20px; border-radius: 19px; }
  .audience-strip { grid-template-columns: 1fr; }
  .audience-strip span { min-height: 50px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); }
  .availability-note { padding: 16px; }
  .releases-page .faq-section { margin-top: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  .console-head i, .jackpot-ring, .roulette-wheel { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}