/* Shared sections */
.news-section, .catalog-section, .home-discovery, .license-section, .how-section, .site-footer, .game-detail, .faq-page { width: var(--page); margin: 0 auto; }
.news-section { padding: 118px 0 42px; }.catalog-section { padding: 158px 0 114px; }.catalog-section--direct { padding-top: 58px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 52px; }.section-heading h1, .license-intro h2, .how-heading h2 { margin: 0; color: #fff; font: 400 clamp(56px,6vw,92px)/.78 var(--display); letter-spacing: .005em; }.section-heading h1 em, .license-intro h2 em, .how-heading h2 em, .home-offer-panel h2 em, .genre-radar h3 em, .detail-story-heading h2 em, .faq-intro h1 em { color: transparent; -webkit-text-stroke: 1.5px var(--violet-bright); font-style: normal; }.section-heading > p { max-width: 360px; margin: 0 0 4px; color: #a9abb7; font: 500 19px/1.18 var(--body); }

/* Home discovery */
.home-discovery { display: grid; grid-template-columns: .86fr 1.14fr; gap: 12px; padding: 60px 0 118px; }.home-offer-panel, .genre-radar { min-height: 470px; position: relative; overflow: hidden; padding: 33px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(145deg, rgba(44,78,201,.2), rgba(16,16,26,.9) 58%); }.home-offer-panel::after { content: ""; width: 270px; height: 270px; position: absolute; right: -90px; bottom: -125px; border: 1px solid rgba(128,168,255,.38); border-radius: 50%; box-shadow: 0 0 0 26px rgba(55,121,255,.05), 0 0 72px rgba(55,121,255,.23); }.home-offer-panel h2 { margin: 0 0 21px; color: #fff; font: 400 clamp(55px,5vw,79px)/.77 var(--display); }.home-offer-panel > p:not(.eyebrow) { max-width: 340px; margin: 0; color: #b7bac9; font: 500 19px/1.18 var(--body); }.offer-route-link { min-width: 230px; display: grid; gap: 7px; position: absolute; z-index: 1; bottom: 32px; left: 33px; padding: 16px; border: 1px solid rgba(201,255,76,.52); color: #fff; background: rgba(9,12,18,.57); transition: transform .2s ease, background .2s ease; }.offer-route-link:hover { background: rgba(201,255,76,.08); transform: translateY(-4px); }.offer-route-link span { color: var(--acid); font: 500 8px/1 var(--mono); letter-spacing: .12em; }.offer-route-link strong { font: 400 43px/.8 var(--display); }.offer-route-link small { color: #c4c7d3; font: 500 13px/1 var(--body); }.offer-route-link i { position: absolute; top: 18px; right: 17px; color: var(--violet-bright); font: 400 25px/1 var(--display); font-style: normal; }
.genre-radar { background: radial-gradient(circle at 95% 7%, rgba(184,51,255,.3), transparent 33%), linear-gradient(135deg, rgba(18,23,50,.97), rgba(18,15,30,.94)); }.genre-radar h3 { margin: 0; color: #fff; font: 400 clamp(53px,5.2vw,84px)/.78 var(--display); }.genre-route-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 30px; }.genre-route-list a { min-height: 48px; display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.14); color: #c5c7d2; transition: padding .2s ease, color .2s ease; }.genre-route-list a:hover { padding-left: 8px; color: #fff; }.genre-route-list span { font: 600 14px/1 var(--body); text-transform: uppercase; letter-spacing: .02em; }.genre-route-list b { color: var(--violet-bright); font: 500 10px/1 var(--mono); }.genre-route-list i { color: var(--blue-bright); font: 500 19px/1 var(--display); font-style: normal; }.discovery-catalog-link { position: absolute; left: 33px; bottom: 32px; }

/* Licenses and purchase flow */
.license-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(40px,9vw,135px); padding: 110px 0 104px; border-top: 1px solid var(--line); }.license-intro { padding-top: 5px; }.license-intro h2 { margin-bottom: 24px; }.license-intro > p:not(.eyebrow) { max-width: 345px; margin: 0; color: #aeb1c0; font: 500 19px/1.22 var(--body); }.license-explainer { display: grid; gap: 9px; }.license-explainer-card { min-height: 220px; position: relative; overflow: hidden; padding: 27px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.022); }.license-explainer-card::after { content: ""; width: 145px; height: 145px; position: absolute; right: -50px; bottom: -65px; border-radius: 50%; border: 1px solid currentColor; opacity: .25; }.primary-license { color: var(--blue-bright); background: linear-gradient(115deg, rgba(55,121,255,.14), rgba(255,255,255,.02)); }.secondary-license { color: var(--violet-bright); background: linear-gradient(115deg, rgba(184,51,255,.15), rgba(255,255,255,.02)); }.license-explainer-card > span { display: block; color: currentColor; font: 500 9px/1 var(--mono); letter-spacing: .12em; }.license-explainer-card h3 { margin: 25px 0 9px; color: #fff; font: 400 42px/.78 var(--display); }.license-explainer-card p { max-width: 410px; margin: 0; color: #c7cad5; font: 500 17px/1.18 var(--body); }.license-explainer-card b { display: block; margin-top: 21px; color: currentColor; font: 500 9px/1 var(--mono); letter-spacing: .1em; }.how-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(42px,8vw,118px); padding: 104px 0 124px; border-top: 1px solid var(--line); }.how-heading h2 { margin-bottom: 0; }.how-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.how-steps li { min-height: 121px; display: grid; grid-template-columns: 44px minmax(0,1fr); grid-template-rows: auto auto; gap: 6px 15px; padding: 19px; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.02); }.how-steps span { grid-row: 1 / -1; color: var(--violet-bright); font: 500 10px/1 var(--mono); }.how-steps h3 { margin: 0; color: #fff; font: 400 34px/.85 var(--display); }.how-steps p { margin: 0; color: #aeb1bf; font: 500 16px/1.15 var(--body); }

/* Detail page */
.game-detail { min-height: calc(100vh - 240px); padding: 37px 0 114px; }.detail-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 27px; color: #8f92a3; font: 500 10px/1 var(--mono); letter-spacing: .07em; }.detail-breadcrumb a { color: var(--blue-bright); }.detail-hero-grid { display: grid; grid-template-columns: minmax(300px,.66fr) minmax(0,1.34fr); align-items: center; gap: clamp(33px,6vw,100px); padding-bottom: 86px; border-bottom: 1px solid var(--line); }.detail-cover { min-height: 540px; position: relative; overflow: hidden; border: 1px solid rgba(128,168,255,.38); background: #10111d; box-shadow: 18px 20px 0 rgba(76,31,120,.18), 0 32px 70px rgba(0,0,0,.45); }.detail-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 56%, rgba(5,5,12,.92)); }.detail-cover > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }.detail-cover-tags { position: absolute; z-index: 2; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 6px; }.detail-cover-tags span, .detail-cover-tags b, .detail-cover > small { padding: 6px 8px; border: 1px solid rgba(255,255,255,.24); color: #fff; background: rgba(5,5,10,.66); backdrop-filter: blur(8px); font: 500 8px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }.detail-cover-tags b { border-color: rgba(201,255,76,.7); color: var(--acid); }.detail-cover > small { position: absolute; z-index: 3; bottom: 15px; left: 15px; color: #e9e8f2; }.detail-identity h1 { max-width: 900px; margin: 0 0 19px; color: #fff; font: 400 clamp(64px,7.6vw,118px)/.77 var(--display); letter-spacing: -.015em; text-transform: uppercase; }.detail-synopsis { max-width: 690px; margin: 0; color: #c3c5d1; font: 500 clamp(19px,1.8vw,25px)/1.18 var(--body); }.detail-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: 32px 0 0; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.12); }.detail-facts > div { min-height: 86px; padding: 14px 15px; background: #11111a; }.detail-facts dt { margin-bottom: 9px; color: #8c8f9f; font: 500 8px/1 var(--mono); letter-spacing: .1em; }.detail-facts dd { margin: 0; color: #edf0fb; font: 600 16px/1.05 var(--body); letter-spacing: .015em; }.preorder-detail-note, .offer-detail-note { margin: 14px 0 0; color: var(--acid); font: 500 9px/1.2 var(--mono); letter-spacing: .06em; }.offer-detail-note { color: var(--violet-bright); }.detail-purchase { margin-top: 16px; padding: 18px; border: 1px solid rgba(225,156,255,.3); background: radial-gradient(circle at 100% 0%, rgba(184,51,255,.17), transparent 44%), linear-gradient(135deg, rgba(25,30,71,.72), rgba(17,17,26,.96)); }.detail-purchase-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 13px; }.detail-purchase-heading > span { color: #bec1d2; font: 500 9px/1 var(--mono); letter-spacing: .12em; }.detail-purchase-heading > strong { color: var(--acid); font: 700 19px/1 var(--body); }.detail-license-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.detail-license-card { min-height: 115px; position: relative; border: 1px solid rgba(255,255,255,.14); padding: 13px 34px 12px 13px; color: #fff; background: rgba(255,255,255,.03); text-align: left; transition: transform .2s ease, border-color .2s ease, background .2s ease; }.detail-license-card:hover { border-color: var(--violet-bright); background: rgba(184,51,255,.1); transform: translateY(-3px); }.detail-license-card span { color: #bdc0ce; font: 500 8px/1 var(--mono); letter-spacing: .08em; }.detail-license-card strong { display: block; margin-top: 8px; color: var(--acid); font: 700 27px/1 var(--body); }.detail-license-card p { margin: 7px 0 0; color: #b9bdca; font: 500 14px/1.1 var(--body); }.detail-license-card i { position: absolute; top: 50%; right: 13px; color: var(--violet-bright); font: 400 26px/1 var(--display); font-style: normal; transform: translateY(-50%); }.detail-story { display: grid; grid-template-columns: minmax(250px,.62fr) minmax(0,1.38fr); gap: clamp(34px,6vw,98px); padding: 101px 0 0; }.detail-story-heading h2 { margin: 0 0 22px; color: #fff; font: 400 clamp(54px,5vw,83px)/.78 var(--display); }.detail-story-heading > p:not(.eyebrow) { max-width: 320px; margin: 0; color: #a9abba; font: 500 18px/1.2 var(--body); }.detail-description { display: grid; gap: 10px; }.detail-text-block { min-height: 76px; padding: 21px 22px; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.025); }.detail-text-block h3 { margin: 0 0 11px; color: var(--blue-bright); font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }.detail-text-block p { margin: 0; color: #d2d3dc; font: 500 18px/1.26 var(--body); }.detail-state { min-height: 540px; display: grid; align-content: center; justify-items: start; padding-top: 0; }.detail-state h1 { margin: 0 0 20px; color: #fff; font: 400 clamp(68px,9vw,126px)/.77 var(--display); }.detail-state > p:not(.eyebrow) { max-width: 430px; margin: 0 0 28px; color: #b7b9c8; font: 500 19px/1.23 var(--body); }

/* FAQ and footer */
.faq-page { min-height: calc(100vh - 232px); display: grid; grid-template-columns: minmax(285px,.74fr) minmax(0,1.26fr); align-items: start; gap: clamp(34px,8vw,136px); padding: 94px 0 138px; }.faq-intro { position: sticky; top: 28px; }.faq-intro h1 { margin: 0 0 24px; color: #fff; font: 400 clamp(72px,7.8vw,126px)/.75 var(--display); letter-spacing: -.015em; }.faq-intro > p:not(.eyebrow) { max-width: 390px; margin: 0 0 31px; color: #b7b9c8; font: 500 20px/1.2 var(--body); }.faq-list { display: grid; gap: 8px; }.faq-item { border: 1px solid rgba(255,255,255,.13); background: linear-gradient(105deg, rgba(55,121,255,.09), transparent 42%), rgba(255,255,255,.022); transition: border-color .22s ease, background .22s ease; }.faq-item[open] { border-color: rgba(225,156,255,.58); background: linear-gradient(105deg, rgba(55,121,255,.16), rgba(184,51,255,.1)); }.faq-item summary { min-height: 82px; display: grid; grid-template-columns: 39px minmax(0,1fr) 32px; align-items: center; gap: 14px; padding: 19px 20px; color: #fff; cursor: pointer; list-style: none; }.faq-item summary::-webkit-details-marker { display: none; }.faq-item summary > span { color: var(--blue-bright); font: 500 9px/1 var(--mono); letter-spacing: .1em; }.faq-item summary strong { font: 600 23px/1 var(--body); letter-spacing: .01em; }.faq-item summary i { width: 29px; height: 29px; display: grid; place-items: center; justify-self: end; border: 1px solid rgba(255,255,255,.24); color: var(--violet-bright); font: 300 24px/1 var(--body); font-style: normal; transition: transform .24s ease, color .24s ease, border-color .24s ease; }.faq-item[open] summary i { border-color: var(--acid); color: var(--acid); transform: rotate(45deg); }.faq-item > div { padding: 0 69px 24px 73px; }.faq-item > div p { max-width: 670px; margin: 0; color: #c6c8d4; font: 500 18px/1.2 var(--body); }
.site-footer { min-height: 150px; display: grid; grid-template-columns: 1fr minmax(240px,.9fr) auto; align-items: center; gap: 33px; padding: 34px 0; border-top: 1px solid var(--line); }.footer-brand-with-image img { width: 45px; height: 45px; border-radius: 12px; object-fit: cover; }.footer-brand p { margin: 6px 0 0; color: var(--blue-bright); font: 500 8px/1 var(--mono); letter-spacing: .12em; }.site-footer > p { max-width: 310px; margin: 0; color: #a1a4b3; font: 500 16px/1.15 var(--body); }.site-footer > a { color: var(--acid); font: 600 13px/1 var(--body); text-transform: uppercase; }.site-footer > a span { margin-left: 7px; font-size: 18px; }

@media (max-width: 980px) {
  .home-discovery, .license-section, .how-section, .detail-hero-grid, .detail-story, .faq-page { grid-template-columns: 1fr; }.home-discovery { gap: 10px; }.license-section, .how-section { gap: 48px; }.detail-cover { max-width: 510px; min-height: min(125vw,710px); }.detail-story { gap: 40px; padding-top: 80px; }.faq-page { gap: 52px; padding-top: 75px; }.faq-intro { position: static; }.site-footer { grid-template-columns: 1fr auto; }.site-footer > p { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 620px) {
  .news-section { padding: 82px 0 28px; }.catalog-section { padding: 105px 0 82px; }.catalog-section--direct { padding-top: 42px; }.section-heading { display: block; margin-bottom: 35px; }.section-heading h1, .license-intro h2, .how-heading h2 { font-size: 62px; }.section-heading > p { margin-top: 19px; font-size: 17px; }.home-discovery { padding: 34px 0 80px; }.home-offer-panel, .genre-radar { min-height: 0; padding: 23px 19px; }.home-offer-panel { min-height: 380px; }.home-offer-panel h2, .genre-radar h3 { font-size: 48px; }.offer-route-link { left: 19px; bottom: 23px; }.genre-route-list { grid-template-columns: 1fr; gap: 0; margin-top: 23px; }.discovery-catalog-link { position: static; width: 100%; justify-content: space-between; margin-top: 23px; }.license-section, .how-section { padding: 80px 0; }.license-explainer-card { min-height: 195px; padding: 22px; }.license-explainer-card h3 { font-size: 38px; }.how-steps li { min-height: 110px; padding: 17px; }.game-detail { padding: 20px 0 82px; }.detail-breadcrumb { margin-bottom: 15px; }.detail-hero-grid { gap: 27px; padding-bottom: 68px; }.detail-cover { min-height: 124vw; width: 100%; max-width: none; }.detail-identity h1 { font-size: clamp(61px,18vw,92px); }.detail-synopsis { font-size: 20px; }.detail-facts { grid-template-columns: 1fr; }.detail-facts > div { min-height: 67px; display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 8px; padding: 12px; }.detail-facts dt { margin: 0; }.detail-license-grid { grid-template-columns: 1fr; }.detail-story { padding-top: 70px; }.detail-story-heading h2 { font-size: 59px; }.detail-text-block { padding: 18px 16px; }.detail-text-block p { font-size: 18px; }.faq-page { padding: 54px 0 88px; gap: 38px; }.faq-intro h1 { font-size: clamp(67px,18vw,101px); }.faq-intro > p:not(.eyebrow) { font-size: 19px; }.faq-item summary { min-height: 75px; grid-template-columns: 28px minmax(0,1fr) 29px; gap: 10px; padding: 16px 13px; }.faq-item summary strong { font-size: 20px; }.faq-item > div { padding: 0 18px 19px 51px; }.faq-item > div p { font-size: 17px; }.site-footer { min-height: 0; grid-template-columns: 1fr auto; padding: 27px 0 42px; }.footer-brand strong { font-size: 31px; }
}