:root { --ink: #07101b; --ink-soft: #0e1927; --paper: #f4f3ef; --line: rgba(230,235,241,.16); --muted: #99a4b4; --lime: #d9f36d; --white: #f8fbff; --orange: #e9894e; }
* { box-sizing: border-box; margin: 0px; padding: 0px; }
html { scroll-behavior: smooth; }
body { min-width: 320px; overflow-x: hidden; color: var(--white); background: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
body.trailer-open, body.image-preview-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
.shell { width: min(1240px, 100% - 64px); margin: 0px auto; }
.site-header { position: fixed; inset: 0px 0px auto; z-index: 30; height: 80px; border-bottom: 1px solid transparent; transition: 0.25s; }
.site-header.is-scrolled { background: rgba(7, 16, 27, 0.88); border-color: var(--line); backdrop-filter: blur(18px); }
.header-inner { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(217, 243, 109, 0.75); color: var(--lime); font-weight: 900; font-size: 12px; letter-spacing: 0.07em; }
.logo-filter-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand-logo-frame { display: grid; place-items: center; width: 52px; height: 52px; }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-copy { display: grid; gap: 2px; line-height: 1; }
.brand-copy strong { font-size: 15px; letter-spacing: 0.13em; }
.brand-copy small { color: rgb(150, 165, 181); font-size: 8px; letter-spacing: 0.15em; }
.main-nav { display: flex; flex: 0 1 430px; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; margin-left: auto; }
.main-nav a { color: rgb(179, 191, 204); font-size: 14px; white-space: nowrap; transition: color 0.2s; }
.main-nav a:hover, .main-nav a.is-active { color: var(--white); }
.header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; }
.search-trigger { position: relative; width: 34px; height: 34px; border: 0px; background: transparent; cursor: pointer; }
.search-trigger span { position: absolute; width: 13px; height: 13px; border: 1.5px solid var(--white); border-radius: 50%; left: 7px; top: 7px; }
.search-trigger span::after { content: ""; position: absolute; width: 7px; height: 1.5px; background: var(--white); transform: rotate(45deg); right: -5px; bottom: -3px; }
.header-cta, .button-primary { background: var(--lime); color: rgb(20, 32, 16); font-weight: 800; }
.header-cta { width: 74px; padding: 11px 0; text-align: center; font-size: 13px; }
.menu-trigger { display: none; }
.mobile-nav { display: none; }
.language-picker { position: relative; width: 76px; }
.language-switcher { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; height: 34px; padding: 0 9px; border: 1px solid rgba(213, 193, 122, 0.45); color: var(--white); background: rgba(7, 13, 20, 0.28); cursor: pointer; font-size: 12px; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.language-switcher i { width: 6px; height: 6px; margin-left: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; }
.language-switcher:hover, .language-switcher:focus-visible, .language-picker.is-open .language-switcher { border-color: var(--lime); color: var(--lime); background: rgba(213, 193, 122, 0.1); outline: none; }
.language-picker.is-open .language-switcher i { transform: translateY(2px) rotate(225deg); }
.language-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 2; display: grid; width: 100%; padding: 4px; border: 1px solid rgba(213, 193, 122, 0.36); background: rgba(7, 13, 20, 0.97); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); opacity: 0; visibility: hidden; transform: translateY(-5px); transition: opacity 0.18s, visibility 0.18s, transform 0.18s; }
.language-picker.is-open .language-menu { opacity: 1; visibility: visible; transform: none; }
.language-menu button { min-height: 30px; border: 0; padding: 0 7px; color: rgb(190, 201, 211); background: transparent; cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
.language-menu button:hover, .language-menu button:focus-visible, .language-menu button.is-active { color: rgb(23, 21, 15); background: var(--lime); outline: none; }
.hero { position: relative; min-height: 760px; height: 100vh; display: flex; align-items: center; isolation: isolate; overflow: hidden; }
.hero-background, .hero-shade { position: absolute; inset: 0px; }
.hero-background { z-index: -3; }
.hero-bg { position: absolute; inset: 0px; opacity: 0; transition: opacity 0.7s; }
.hero-bg.is-active { opacity: 1; }
.hero-bg img, .hero-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: saturate(0.82) contrast(1.12); transform: scale(1.035); }
.hero-shade { z-index: -2; background: linear-gradient(90deg, rgba(4, 11, 19, 0.97) 2%, rgba(4, 11, 19, 0.79) 43%, rgba(4, 11, 19, 0.35) 73%, rgba(4, 11, 19, 0.82) 100%), linear-gradient(0deg, rgb(7, 16, 27) 0%, transparent 25%); }
.hero-layout { display: grid; grid-template-columns: minmax(0px, 1fr) 255px; gap: 80px; align-items: end; padding: 144px 0px 110px; }
.hero-slides { position: relative; min-height: 485px; }
.hero-copy { max-width: 700px; }
.hero-slide { position: absolute; inset: 0px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.45s, transform 0.45s; }
.hero-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.kicker { display: flex; gap: 10px; align-items: center; color: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: 0.17em; }
.kicker span { width: 27px; height: 1px; background: var(--lime); }
.hero-title-art { width: min(510px, 90%); margin: 27px 0px 22px; filter: drop-shadow(rgba(0, 0, 0, 0.7) 0px 12px 21px); }
.ember-title-art { width: min(510px, 90%); margin: 27px 0px 22px; }
.hero-overline { margin: 25px 0px 10px; color: rgb(147, 163, 177); font-size: 10px; letter-spacing: 0.18em; }
.hero-slide h1 { font-size: 56px; line-height: 1.07; letter-spacing: -0.065em; }
.hero-summary { max-width: 555px; min-height: 94px; color: rgb(202, 210, 220); font-size: 17px; line-height: 1.85; }
.game-tags { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; min-height: 29px; margin: 25px 0px 31px; }
.game-tags span { width: 148px; padding: 6px 10px; border: 1px solid var(--line); color: rgb(197, 205, 214); font-size: 11px; text-align: center; white-space: nowrap; }
.game-tags span:last-child { width: 84px; }
.hero-actions { display: flex; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 0px 22px; font-size: 14px; font-weight: 700; transition: transform 0.2s, background 0.2s; }
.button:hover { transform: translateY(-3px); }
.button b, .text-action b, .all-link b, .footer-mail b { margin-left: 13px; font-size: 19px; font-weight: 400; }
.button-quiet { color: var(--white); border: 1px solid var(--line); background: rgba(7, 16, 27, 0.34); }
.hero-progress { display: flex; align-items: center; gap: 12px; margin-top: 67px; color: rgb(214, 220, 228); font-size: 12px; }
.hero-progress b { color: var(--lime); }
.hero-progress span { width: 105px; height: 1px; background: rgba(255, 255, 255, 0.3); position: relative; }
.hero-progress span::before { content: ""; position: absolute; left: 0px; width: 38%; height: 100%; background: var(--lime); }
.hero-progress em { color: rgb(145, 160, 173); font-style: normal; }
.hero-feature-note { align-self: end; width: 238px; margin-bottom: 92px; padding: 8px 0px 8px 21px; border-left: 1px solid rgba(217, 243, 109, 0.82); background: linear-gradient(90deg, rgba(7, 16, 27, 0.66), rgba(7, 16, 27, 0)); transition: opacity 0.3s, transform 0.3s; }
.hero-note-label { display: block; color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: 0.17em; }
.hero-feature-note strong { display: block; min-height: 47px; margin: 10px 0px 7px; color: rgb(244, 245, 243); font-size: 18px; line-height: 1.12; letter-spacing: 0.035em; }
.hero-feature-note p { min-height: 31px; max-width: 190px; color: rgb(183, 193, 202); font-size: 11px; line-height: 1.45; }
.hero-note-line { display: block; width: 100%; height: 1px; margin: 14px 0px 10px; background: linear-gradient(90deg, rgba(213, 193, 122, 0.64), rgba(255, 255, 255, 0.06)); }
.hero-feature-note em { color: rgb(135, 152, 168); font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: 0.13em; }
.hero-carousel { position: absolute; z-index: 2; right: 32px; bottom: 49px; }
.hero-carousel button { border: 0px; background: transparent; cursor: pointer; font-family: inherit; }
.hero-carousel-status { display: flex; align-items: center; gap: 13px; }
.hero-current-slide { display: flex; align-items: baseline; gap: 8px; padding: 0px; color: rgb(228, 214, 154); }
.hero-current-slide b { font-size: 12px; letter-spacing: 0.08em; }
.hero-current-slide span { font-size: 9px; letter-spacing: 0.1em; }
.hero-play-progress { position: relative; width: 78px; height: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.24); }
.hero-play-progress i { position: absolute; inset: 0px auto 0px 0px; width: 0px; background: rgb(228, 214, 154); }
.hero-play-progress i.is-playing { animation: 7s linear 0s 1 normal forwards running hero-progress-tick; }
.hero-slide-index { padding: 0px; color: rgb(137, 151, 164); font-size: 10px; transition: color 0.2s; }
.hero-slide-index:hover { color: rgb(228, 214, 154); }
.hero-slide-index.is-active { color: rgb(228, 214, 154); }
.hero-current-slide.is-active + .hero-play-progress + .hero-slide-index { color: rgb(137, 151, 164); }
@keyframes hero-progress-tick { 
  0% { width: 0px; }
  100% { width: 100%; }
}
.scroll-cue { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; color: rgb(162, 175, 189); font-size: 10px; letter-spacing: 0.16em; white-space: nowrap; }
.scroll-cue > span:first-child { width: 32px; height: 1px; background: rgb(162, 175, 189); }
.section { padding: 118px 0px; }
.games-section { background: var(--paper); color: rgb(17, 28, 40); }
.section-heading h1 { margin-top: 14px; font-size: 42px; line-height: 1.15; letter-spacing: -0.055em; }
.heading-row { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.heading-row > p { max-width: 355px; color: rgb(105, 117, 133); font-size: 14px; line-height: 1.8; }
.games-section .kicker, .upcoming-section .kicker, .media-news .kicker { color: rgb(83, 101, 124); }
.games-section .kicker span, .upcoming-section .kicker span, .media-news .kicker span { background: rgb(83, 101, 124); }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 45px 0px 26px; }
.filter-row button { padding: 9px 15px; border: 1px solid rgb(213, 219, 225); background: transparent; color: rgb(102, 115, 130); cursor: pointer; font-size: 12px; white-space: nowrap; transition: 0.2s; }
.filter-row button[data-filter="all"] { width: 90px; }
.filter-row button[data-filter="featured"] { width: 83px; }
.filter-row button[data-filter="upcoming"] { width: 110px; }
.filter-row button[data-filter="horror"] { width: 70px; }
.filter-row button[data-filter="narrative"] { width: 148px; }
.filter-row button:hover, .filter-row button.is-active { background: rgb(19, 35, 52); color: var(--white); border-color: rgb(19, 35, 52); }
@media (min-width: 901px) {
  .games-section .shell, .upcoming-section .shell, .media-news .shell { width: min(1580px, 100% - 96px); }
}
.game-library-layout { display: grid; grid-template-columns: minmax(0px, 1fr) 310px; gap: 32px; align-items: stretch; }
.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.game-card { position: relative; z-index: 0; min-width: 0px; transition: opacity 0.25s, transform 0.25s; }
.game-card:hover, .game-card:focus, .game-card:focus-within { z-index: 3; }
.game-card:focus-visible { outline: 1px solid var(--lime); outline-offset: 8px; }
.game-card.is-hidden { display: none; }
.game-cover, .future-art { position: relative; display: block; overflow: hidden; aspect-ratio: 1.55 / 1; background: rgb(20, 35, 52); }
.game-cover { width: 100%; padding: 0; border: 0; color: inherit; cursor: zoom-in; font: inherit; text-align: left; }
.game-cover:focus-visible, .weekly-preview:focus-visible { outline: 1px solid var(--lime); outline-offset: 4px; }
.game-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s; }
.game-cover:hover img, .game-cover:focus-visible img { transform: scale(1.06); }
.game-cover::after { content: ""; position: absolute; z-index: 1; inset: 0px; background: linear-gradient(0deg, rgba(2, 8, 14, 0.65), transparent 48%); pointer-events: none; transition: background 0.25s; }
.game-cover:hover::after, .game-cover:focus-visible::after { background: linear-gradient(0deg, rgba(2, 8, 14, 0.82), rgba(2, 8, 14, 0.2)); }
.cover-status { position: absolute; z-index: 2; left: 13px; top: 13px; padding: 5px 8px; background: var(--lime); color: rgb(21, 33, 19); font-size: 10px; font-weight: 800; }
.cover-preview-hint { display: none; }
.cover-arrow { position: absolute; z-index: 1; right: 14px; bottom: 11px; color: var(--white); font-size: 22px; }
.game-card-info { padding: 12px 0px 8px; }
.game-card-info p { color: rgb(120, 133, 149); font-size: 10px; }
.game-card-info h2 { margin: 5px 0px; font-size: 17px; line-height: 1.25; letter-spacing: -0.04em; }
.game-title-link { position: relative; display: inline-flex; max-width: 100%; padding: 0 0 4px; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; }
.game-title-link::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: currentColor; opacity: 0.9; transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease; }
.game-title-link:hover, .game-title-link:focus-visible { color: rgb(229, 215, 147); outline: none; text-shadow: 0 0 18px rgba(213, 193, 122, 0.3); }
.game-title-link:hover::after, .game-title-link:focus-visible::after { transform: scaleX(1); }
.game-title-link:focus-visible { outline: 1px solid rgba(229, 215, 147, 0.74); outline-offset: 4px; }
.game-card-info > span, .game-description-link { color: rgb(113, 128, 145); font-size: 11px; }
.game-description-link:hover, .game-description-link:focus-visible { color: rgb(166, 177, 187); }
.game-description-action { width: 100%; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; text-align: left; }
.game-description-action:hover, .game-description-action:focus-visible { color: rgb(166, 177, 187); outline: none; }
.game-description-wrap { position: relative; min-height: 2.9em; color: rgb(113, 128, 145); font-size: 11px; line-height: 1.45; }
.game-description { position: absolute; top: 0; right: 0; left: 0; z-index: 1; display: -webkit-box; max-height: 2.9em; overflow: hidden; line-height: inherit; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.game-description.is-measuring { display: block; max-height: none; overflow: visible; -webkit-line-clamp: unset; }
.game-card.has-overflow:hover .game-description, .game-card.has-overflow:focus .game-description, .game-card.has-overflow:focus-within .game-description { display: block; max-height: 260px; overflow: visible; -webkit-line-clamp: unset; }
.future-art { display: flex; align-items: end; justify-content: space-between; padding: 16px; background: linear-gradient(145deg, rgb(32, 47, 67), rgb(14, 24, 39)); }
.future-art::before { content: ""; position: absolute; width: 135px; height: 135px; right: -42px; top: -45px; border: 1px solid rgba(217, 243, 109, 0.32); border-radius: 50%; }
.future-art span { position: relative; z-index: 1; color: var(--lime); font-size: 32px; font-weight: 200; }
.future-art i { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.45); font-size: 23px; font-style: normal; }
.future-art-alt { background: linear-gradient(145deg, rgb(59, 41, 49), rgb(23, 21, 37)); }
.future-art-cool { background: linear-gradient(145deg, rgb(24, 47, 56), rgb(16, 35, 45)); }
.weekly-picks { display: flex; flex-direction: column; padding: 24px; background: rgb(20, 35, 51); color: var(--white); }
.weekly-heading { display: flex; justify-content: space-between; align-items: start; padding-bottom: 19px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.weekly-heading p { color: var(--lime); font-size: 9px; letter-spacing: 0.12em; }
.weekly-heading h2 { margin-top: 5px; font-size: 23px; }
.weekly-heading > span { color: rgb(135, 150, 165); font-size: 10px; }
.weekly-feature { display: grid; gap: 9px; padding: 21px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.weekly-preview { padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.weekly-feature img { width: 100%; height: 112px; object-fit: cover; border: 1px solid rgba(213, 193, 122, 0.18); }
.weekly-feature span, .weekly-feature em { color: rgb(155, 173, 185); font-size: 10px; }
.weekly-feature strong { color: var(--lime); font-size: 14px; }
.weekly-feature em { color: rgb(213, 220, 228); font-size: 11px; font-style: normal; }
.weekly-item { display: grid; grid-template-columns: 29px 70px minmax(0px, 1fr) auto; gap: 8px; align-items: center; flex: 1 1 0%; min-height: 78px; padding: 13px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.weekly-item img { width: 70px; height: 48px; object-fit: cover; border: 1px solid rgba(213, 193, 122, 0.18); }
.weekly-item b { color: rgb(122, 137, 151); font-size: 16px; font-weight: 400; }
.weekly-item div { display: grid; gap: 3px; min-width: 0; }
.weekly-item strong { font-size: 12px; line-height: 1.2; }
.weekly-item em { color: rgb(149, 166, 180); font-size: 9px; font-style: normal; line-height: 1.25; }
.weekly-item > span { color: rgb(143, 158, 172); font-size: 14px; }
.weekly-all { display: block; padding-top: 18px; color: var(--lime); font-size: 11px; font-weight: 700; }
.weekly-all b { margin-left: 8px; font-size: 14px; }
.featured-section { position: relative; min-height: 680px; display: flex; align-items: center; isolation: isolate; overflow: hidden; }
.featured-image, .featured-image img, .featured-overlay { position: absolute; inset: 0px; }
.featured-image { z-index: -3; }
.featured-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: saturate(0.75) contrast(1.1); }
.featured-overlay { z-index: -2; background: linear-gradient(90deg, rgba(5, 13, 22, 0.97), rgba(5, 13, 22, 0.74) 41%, rgba(5, 13, 22, 0.12) 88%), linear-gradient(0deg, rgba(5, 13, 22, 0.65), transparent 40%); }
.featured-content { padding: 100px 0px; }
.featured-number { margin: 30px 0px 10px; color: rgb(135, 147, 162); font-size: 10px; letter-spacing: 0.16em; }
.featured-content h1 { font-size: 62px; line-height: 1.03; letter-spacing: -0.065em; }
.featured-description { max-width: 470px; margin: 25px 0px; color: rgb(192, 202, 213); font-size: 15px; line-height: 1.9; }
.text-action, .all-link { display: inline-flex; align-items: center; color: var(--lime); font-size: 13px; font-weight: 700; }
.upcoming-section { background: rgb(223, 232, 232); color: rgb(20, 32, 45); }
.all-link { color: rgb(23, 47, 55); }
.horizon-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 18px; margin-top: 44px; }
.horizon-main { position: relative; min-height: 390px; display: flex; flex-direction: column; align-items: flex-start; justify-content: end; padding: 33px; color: var(--white); background: linear-gradient(135deg, rgba(9, 22, 34, 0.25), rgba(9, 22, 34, 0.85)), var(--horizon-image, url("DON'T MAKE A SOUND/steam-assets/image-assets/11.jpg")) center center / cover; }
.horizon-meta { position: absolute; top: 28px; right: 33px; left: 33px; display: flex; justify-content: space-between; }
.horizon-meta span { font-size: 11px; color: rgb(209, 218, 226); }
.horizon-main h2 { margin-top: auto; font-size: 40px; line-height: 1.05; letter-spacing: -0.055em; }
.horizon-main p { margin: 14px 0px 25px; color: rgb(208, 218, 226); font-size: 14px; }
.outline-button { border: 1px solid rgba(255, 255, 255, 0.5); padding: 9px 13px; font-size: 11px; }
.horizon-side { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.horizon-side article { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: stretch; gap: 20px; padding: 16px; background: rgb(245, 246, 242); border: 1px solid rgba(22, 39, 52, 0.14); }
.horizon-side article > img { width: 132px; height: 100%; min-height: 120px; object-fit: cover; }
.horizon-side article > div { display: grid; align-content: center; min-width: 0; }
.horizon-side article > span { color: rgb(110, 125, 134); font-size: 28px; font-weight: 300; }
.horizon-side small { color: rgb(113, 129, 139); font-size: 10px; }
.horizon-side h3 { margin: 5px 0px; font-size: 20px; }
.horizon-side p { display: -webkit-box; overflow: hidden; color: rgb(114, 128, 140); font-size: 12px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.media-news { background: rgb(244, 243, 239); color: rgb(20, 32, 45); }
.media-news-grid { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr); gap: 56px; }
.media-gallery { width: 100%; margin-top: 35px; }
.media-stack-stage { position: relative; isolation: isolate; width: 100%; aspect-ratio: 16 / 9; }
.media-stack-stage::before, .media-stack-stage::after { content: ""; position: absolute; border: 1px solid rgba(213, 193, 122, 0.15); background: linear-gradient(145deg, rgb(20, 33, 45), rgb(10, 20, 29)); box-shadow: 0 16px 28px rgba(0, 0, 0, 0.2); }
.media-stack-stage::before { z-index: -2; inset: 14px -28px -14px 28px; }
.media-stack-stage::after { z-index: -1; inset: 7px -14px -7px 14px; }
.media-stack-card { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; overflow: hidden; border: 1px solid rgba(213, 193, 122, 0.32); color: var(--white); background: rgb(9, 17, 25); cursor: pointer; opacity: 0; pointer-events: none; transform: translate(12px, 8px) scale(0.985); transition: opacity 0.3s ease, transform 0.42s cubic-bezier(.2, .75, .2, 1), box-shadow 0.35s ease; }
.media-stack-card.is-active { z-index: 2; opacity: 1; pointer-events: auto; transform: none; box-shadow: 0 20px 42px rgba(0, 0, 0, 0.34); }
.media-stack-card.is-active:hover img, .media-stack-card.is-active:focus-visible img { transform: scale(1.035); }
.media-stack-card:focus-visible { outline: 1px solid var(--lime); outline-offset: 5px; }
.media-stack-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.media-stack-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 12, 19, 0.86), transparent 54%); pointer-events: none; }
.media-stack-caption { position: absolute; z-index: 1; right: 18px; bottom: 15px; left: 18px; display: flex; align-items: end; justify-content: space-between; gap: 16px; text-align: left; }
.media-stack-caption b { font-size: 13px; letter-spacing: 0.02em; }
.media-stack-caption small { color: rgb(218, 200, 131); font-size: 10px; letter-spacing: 0.14em; white-space: nowrap; }
.media-gallery-controls { display: none; }
.news-list { margin-top: 30px; border-top: 1px solid rgb(213, 218, 222); }
.news-item { display: grid; grid-template-columns: 91px 1fr auto; gap: 15px; align-items: center; min-height: 87px; padding: 20px 0px; border-bottom: 1px solid rgb(213, 218, 222); }
.news-item time { color: rgb(113, 128, 146); font-size: 10px; font-weight: 700; }
.news-item h2 { font-size: 16px; line-height: 1.45; }
.news-item span { color: rgb(88, 107, 120); font-size: 11px; white-space: nowrap; }
.site-footer { padding: 65px 0px 23px; background: rgb(7, 16, 27); }
.footer-main { display: grid; grid-template-columns: .9fr 1.1fr .9fr 1.45fr; gap: 42px; align-items: start; padding-bottom: 44px; }
.footer-main > p { max-width: 380px; color: rgb(154, 168, 182); font-size: 13px; line-height: 1.7; }
.footer-brand { align-self: start; }
.footer-column { display: grid; align-content: start; gap: 12px; }
.footer-column > b { color: var(--lime); font-size: 10px; letter-spacing: .13em; }
.footer-column p, .footer-column address { color: rgb(154, 168, 182); font-size: 12px; font-style: normal; line-height: 1.7; }
.footer-company address { min-height: 61px; }
.footer-company strong { color: rgb(218, 225, 230); font-size: 11px; letter-spacing: .03em; line-height: 1.5; }
.footer-mail { color: var(--lime); font-size: 14px; font-weight: 700; }
.footer-mail span { margin-left: 10px; font-size: 17px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid var(--line); color: rgb(112, 128, 146); font-size: 10px; }
.footer-bottom a { color: rgb(197, 206, 215); }
.game-library-layout { align-items: start; }
.weekly-picks { align-self: start; }
.weekly-item { flex: 0 0 auto; }
.game-library-main, .game-library-aside { min-width: 0px; }
.game-library-heading { max-width: 680px; margin-bottom: 27px; }
.game-library-heading { min-height: 141px; }
.game-library-heading p:not(.kicker) { max-width: 560px; margin-top: 15px; color: rgb(148, 162, 176); font-size: 14px; line-height: 1.75; }
.game-library-main .filter-row { margin-top: 0px; }
.weekly-module-heading { margin: 0px 0px 27px; }
.weekly-module-heading h2 { margin-top: 12px; color: rgb(237, 241, 243); font-size: 32px; line-height: 1.12; letter-spacing: -0.045em; }
.weekly-module-heading p:not(.kicker) { margin-top: 13px; color: rgb(148, 162, 176); font-size: 13px; line-height: 1.65; }
.weekly-count { padding-bottom: 13px; color: rgb(159, 172, 186); font-size: 9px; font-weight: 700; letter-spacing: 0.13em; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.weekly-picks .weekly-feature { padding-top: 18px; }
.main-nav a.nav-link-pulse { color: rgb(234, 219, 154); text-shadow: rgba(213, 193, 122, 0.68) 0px 0px 18px; animation: 0.42s ease-out 0s 1 normal none running nav-link-glow; }
@keyframes nav-link-glow { 
  0% { text-shadow: rgba(213, 193, 122, 0) 0px 0px 0px; }
  45% { text-shadow: rgba(213, 193, 122, 0.86) 0px 0px 22px; }
  100% { text-shadow: rgba(213, 193, 122, 0) 0px 0px 0px; }
}
:root { --ink: #070d14; --ink-soft: #111b26; --paper: #0d161f; --line: rgba(213,193,122,.18); --muted: #9aa8b7; --lime: #d5c17a; --white: #f2f4f5; --orange: #b9855a; --account-panel-width: 500px; --account-panel-max-height: calc(100vh - 56px); --account-panel-padding: 38px; }
body { background: linear-gradient(rgb(7, 16, 26) 0%, rgb(11, 20, 30) 48%, rgb(7, 13, 20) 100%); }
body::before { opacity: 0.52; background-image: linear-gradient(rgba(213, 193, 122, 0.024) 1px, transparent 1px), linear-gradient(90deg, rgba(213, 193, 122, 0.024) 1px, transparent 1px); }
.site-header { background: linear-gradient(rgba(5, 11, 18, 0.78), rgba(5, 11, 18, 0.16)); }
.site-header.is-scrolled { background: rgba(7, 13, 20, 0.92); border-color: rgba(213, 193, 122, 0.16); }
.site-header .header-inner, .site-footer .footer-main, .site-footer .footer-bottom { width: calc(100% - 96px); max-width: none; }
.brand-mark { border-color: rgba(213, 193, 122, 0.78); color: var(--lime); box-shadow: rgba(213, 193, 122, 0.08) 0px 0px 22px; }
.main-nav a { color: rgb(155, 168, 181); }
.main-nav a:hover { color: rgb(155, 168, 181); }
.main-nav a.is-active { color: rgb(244, 240, 223); }
.header-cta, .button-primary { color: rgb(23, 21, 15); background: linear-gradient(135deg, rgb(228, 214, 154), rgb(197, 170, 98)); box-shadow: rgba(172, 139, 68, 0.18) 0px 10px 28px; }
.hero { min-height: 800px; }
.hero-background img, .hero-video { filter: saturate(0.62) contrast(1.09) brightness(0.72); }
.hero-video { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hero::before { content: ""; position: absolute; inset: 0px; z-index: -1; pointer-events: none; background: radial-gradient(at 74% 44%, rgba(213, 193, 122, 0.11), transparent 29%), linear-gradient(90deg, rgba(7, 13, 20, 0.1), transparent 68%); }
.hero-shade { background: linear-gradient(90deg, rgba(5, 10, 16, 0.98) 0%, rgba(5, 10, 16, 0.83) 40%, rgba(5, 10, 16, 0.28) 73%, rgba(5, 10, 16, 0.72) 100%), linear-gradient(0deg, rgb(7, 16, 26) 0%, transparent 28%); }
.hero-copy { text-shadow: rgba(0, 0, 0, 0.35) 0px 14px 35px; }
.hero-title-art { filter: drop-shadow(rgba(0, 0, 0, 0.8) 0px 16px 28px); }
.hero-summary { color: rgb(198, 206, 215); }
.game-tags span { border-color: rgba(213, 193, 122, 0.22); background: rgba(8, 15, 24, 0.28); color: rgb(195, 203, 210); }
.button-quiet { border-color: rgba(213, 193, 122, 0.28); background: rgba(8, 15, 24, 0.45); }
.button-quiet:hover { border-color: rgba(213, 193, 122, 0.72); }
.trailer-button { border: 0px; cursor: pointer; font-family: inherit; }
.play-symbol { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border: 1px solid rgba(20, 18, 12, 0.5); border-radius: 50%; font-size: 7px; }
.hero-feature-note { border-left-color: var(--lime); background: linear-gradient(90deg, rgba(6, 13, 21, 0.88), rgba(6, 13, 21, 0.12)); box-shadow: rgba(0, 0, 0, 0.14) -14px 0px 42px; }
.hero-carousel { padding: 7px 9px; background: rgba(6, 13, 21, 0.52); border: 1px solid rgba(213, 193, 122, 0.14); backdrop-filter: blur(9px); }
.hero-carousel div button.is-active { color: rgb(229, 215, 147); border-color: rgb(229, 215, 147); }
.section { border-top: 1px solid rgba(213, 193, 122, 0.09); }
.games-section, .upcoming-section, .media-news { color: rgb(237, 241, 243); background: rgb(13, 22, 31); }
.games-section .kicker, .upcoming-section .kicker, .media-news .kicker { color: rgb(201, 184, 117); }
.games-section .kicker span, .upcoming-section .kicker span, .media-news .kicker span { background: rgb(201, 184, 117); }
.heading-row > p, .section-heading p:not(.kicker) { color: rgb(148, 162, 176); }
.filter-row button { border-color: rgba(213, 193, 122, 0.19); color: rgb(170, 181, 192); background: rgba(255, 255, 255, 0.02); }
.filter-row button:hover, .filter-row button.is-active { color: rgb(25, 23, 15); border-color: rgb(213, 193, 122); background: linear-gradient(135deg, rgb(228, 214, 154), rgb(197, 170, 98)); }
.game-card-info p, .game-card-info > span { color: rgb(137, 153, 168); }
.game-card-info h2 { color: rgb(238, 242, 244); }
.future-art { background: linear-gradient(145deg, rgb(27, 42, 57), rgb(13, 22, 32)); border: 1px solid rgba(213, 193, 122, 0.13); }
.future-art-alt { background: linear-gradient(145deg, rgb(52, 40, 44), rgb(21, 23, 33)); }
.future-art-cool { background: linear-gradient(145deg, rgb(23, 49, 58), rgb(14, 29, 39)); }
.weekly-picks { background: linear-gradient(155deg, rgb(20, 34, 49), rgb(11, 21, 31)); border: 1px solid rgba(213, 193, 122, 0.18); box-shadow: rgba(0, 0, 0, 0.18) 0px 20px 48px; }
.weekly-heading h2 { color: rgb(242, 244, 245); }
.weekly-feature strong { color: rgb(227, 212, 142); }
.weekly-all { color: rgb(227, 212, 142); }
.upcoming-section { background: linear-gradient(rgb(16, 27, 37), rgb(12, 21, 30)); }
.all-link { color: rgb(222, 208, 145); }
.horizon-main { background: linear-gradient(135deg, rgba(8, 18, 28, 0.42), rgba(7, 15, 24, 0.88)), var(--horizon-image, url("DON'T MAKE A SOUND/steam-assets/image-assets/11.jpg")) center center / cover; border: 1px solid rgba(213, 193, 122, 0.17); }
.horizon-side article { background: rgb(20, 32, 43); border-color: rgba(213, 193, 122, 0.15); }
.horizon-side article > span { color: rgb(180, 166, 111); }
.horizon-side small, .horizon-side p { color: rgb(154, 168, 181); }
.horizon-side h3 { color: rgb(238, 242, 244); }
.media-news { min-height: 607px; background: linear-gradient(rgb(13, 22, 31), rgb(9, 17, 26)); }
.news-list { border-color: rgba(213, 193, 122, 0.17); }
.news-item { border-color: rgba(213, 193, 122, 0.15); }
.news-item time, .news-item span { color: rgb(187, 170, 112); }
.news-item h2 { color: rgb(237, 241, 243); }
.site-footer { border-top: 1px solid rgba(213, 193, 122, 0.17); background: rgb(7, 13, 20); }
.footer-bottom { border-color: rgba(213, 193, 122, 0.15); }
.trailer-modal { position: fixed; inset: 0px; z-index: 100; display: grid; place-items: center; padding: 48px; background: rgba(3, 7, 12, 0.9); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.trailer-modal.is-open { opacity: 1; visibility: visible; }
.trailer-player-wrap { width: min(1120px, 100%); transform: translateY(12px); transition: transform 0.25s; }
.trailer-modal.is-open .trailer-player-wrap { transform: none; }
.trailer-player { width: 100%; max-height: calc(-130px + 100vh); background: rgb(0, 0, 0); box-shadow: rgba(0, 0, 0, 0.52) 0px 28px 80px; }
.trailer-player-wrap p { margin-top: 12px; color: rgb(213, 193, 122); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; }
.trailer-close { position: absolute; top: 22px; right: 28px; width: 38px; height: 38px; border: 1px solid rgba(213, 193, 122, 0.38); color: rgb(255, 255, 255); background: rgba(7, 13, 20, 0.5); cursor: pointer; font-size: 26px; font-weight: 200; line-height: 1; }
.image-preview-modal { position: fixed; inset: 0; z-index: 105; display: grid; place-items: center; padding: 52px; background: rgba(3, 7, 12, 0.92); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.image-preview-modal.is-open { opacity: 1; visibility: visible; }
.image-preview-frame { display: grid; justify-items: center; gap: 12px; width: min(1400px, 100%); transform: translateY(12px); transition: transform 0.25s; }
.image-preview-modal.is-open .image-preview-frame { transform: none; }
.image-preview-frame img { width: auto; max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; background: rgb(7, 13, 20); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58); }
.image-preview-frame figcaption { color: rgb(229, 215, 147); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-align: center; }
.image-preview-close { position: absolute; top: 22px; right: 28px; width: 38px; height: 38px; border: 1px solid rgba(213, 193, 122, 0.38); color: var(--white); background: rgba(7, 13, 20, 0.5); cursor: pointer; font-size: 26px; font-weight: 200; line-height: 1; }
.game-toast { position: fixed; z-index: 130; top: 50%; left: 50%; min-width: 220px; padding: 17px 30px 16px; border: 1px solid rgba(213, 193, 122, 0.3); border-top: 2px solid rgba(213, 193, 122, 0.78); color: rgb(242, 244, 245); background: linear-gradient(135deg, rgba(20, 34, 49, 0.96), rgba(7, 13, 20, 0.96)); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), 0 0 24px rgba(213, 193, 122, 0.08); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; text-align: center; transform: translate(-50%, -42%); opacity: 0; pointer-events: none; transition: opacity 0.24s, transform 0.24s; }
.game-toast.is-visible { transform: translate(-50%, -50%); opacity: 1; }
.login-trigger { border: 0; cursor: pointer; font: inherit; }
.account-modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 28px; background: rgba(3, 7, 12, 0.86); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.account-modal.is-open { opacity: 1; visibility: visible; }
.account-panel { width: min(var(--account-panel-width), 100%); max-height: var(--account-panel-max-height); overflow-y: auto; padding: var(--account-panel-padding); border: 1px solid rgba(213, 193, 122, 0.34); background: linear-gradient(145deg, #111c27, #09111a); box-shadow: 0 28px 90px rgba(0, 0, 0, .55); transform: translateY(16px); transition: transform .25s; }
.account-modal.is-open .account-panel { transform: none; }
.account-panel h2 { margin: 13px 0 8px; font-size: clamp(30px, 5vw, 42px); letter-spacing: -.04em; }
.account-panel > p:not(.kicker):not(.login-signup), .login-signup { color: var(--muted); font-size: 14px; line-height: 1.7; }
.account-panel form { display: grid; gap: 17px; margin-top: 26px; }
.account-panel form > label { display: grid; gap: 8px; color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.account-panel input:not([type="checkbox"]) { width: 100%; border: 1px solid rgba(213, 193, 122, .24); background: rgba(3, 8, 13, .58); color: var(--white); padding: 13px 14px; outline: none; }
.account-panel input:not([type="checkbox"]):focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(213, 193, 122, .1); }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 12px; }
.login-options button, .login-signup button { border: 0; padding: 0; background: transparent; color: var(--lime); cursor: pointer; font: inherit; text-decoration: none; }
.login-options button:hover, .login-signup button:hover { color: var(--white); }
.account-panel form > label.check-option { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0; line-height: 1.5; text-transform: none; cursor: pointer; }
.check-option input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--lime); }
.login-submit { width: 100%; border: 0; cursor: pointer; padding: 14px 17px; }
.reset-step form { display: grid; gap: 17px; margin-top: 26px; }
.text-button { justify-self: start; border: 0; padding: 0; background: transparent; color: var(--lime); cursor: pointer; font: inherit; font-size: 12px; }
.text-button:hover { color: var(--white); }
.login-status { min-height: 20px; color: var(--lime); font-size: 12px; line-height: 1.5; }
.login-status.is-error { color: #e89b8b; }
.login-signup { margin-top: 18px; }
.login-close { position: absolute; top: 22px; right: 28px; width: 38px; height: 38px; border: 1px solid rgba(213, 193, 122, .38); color: var(--white); background: rgba(7, 13, 20, .5); cursor: pointer; font-size: 26px; line-height: 1; }
.trailer-close:hover { background: rgb(213, 193, 122); color: rgb(21, 19, 14); }
@media (max-width: 900px) {
  .shell { width: min(100% - 40px, 1240px); }
  .main-nav { display: none; }
  .header-actions { margin-left: auto; }
  .menu-trigger { display: grid; gap: 5px; width: 30px; border: 0px; background: transparent; cursor: pointer; }
  .menu-trigger i { display: block; height: 1px; background: rgb(255, 255, 255); }
  .mobile-nav.is-open { display: grid; gap: 15px; padding: 18px 0px 22px; background: rgba(7, 16, 27, 0.97); }
  .mobile-nav a { color: rgb(196, 207, 218); font-size: 14px; }
  .hero { height: auto; min-height: 760px; }
  .hero-layout { grid-template-columns: 1fr; gap: 25px; padding: 145px 0px 95px; }
  .hero-slides { min-height: 465px; }
  .hero-feature-note { display: none; }
  .hero-carousel { right: 20px; bottom: 40px; }
  .game-library-layout { grid-template-columns: 1fr; }
  .game-grid { grid-template-columns: repeat(2, 1fr); }
  .weekly-picks { display: block; }
  .weekly-feature { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  .weekly-item { align-self: center; }
  .weekly-all { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .media-news-grid { grid-template-columns: 1fr; gap: 65px; }
  .footer-main { grid-template-columns: 1fr; }
  .featured-content h1 { font-size: 52px; }
  .horizon-grid { grid-template-columns: 1fr; }
  .horizon-side { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .horizon-side article { min-height: 180px; }
  .heading-row { align-items: start; flex-direction: column; gap: 18px; }
}
@media (max-width: 560px) {
  .site-header .header-inner, .site-footer .footer-main, .site-footer .footer-bottom { width: calc(100% - 32px); }
  .shell { width: calc(100% - 32px); }
  .site-header, .header-inner { height: 67px; }
  .header-cta { display: none; }
  .header-inner { gap: 10px; }
  .header-actions { gap: 8px; }
  .language-picker { width: 64px; }
  .language-switcher { height: 32px; padding: 0 7px; font-size: 11px; }
  .image-preview-modal { padding: 22px; }
  .image-preview-close { top: 12px; right: 14px; }
  .image-preview-frame img { max-height: calc(100vh - 86px); }
  .hero { min-height: 720px; }
  .hero-layout { padding-top: 115px; }
  .hero-slides { min-height: 465px; }
  .hero-title-art { width: 100%; }
  .hero-slide h1 { font-size: 39px; }
  .hero-summary { min-height: 104px; font-size: 14px; }
  .game-tags { min-height: 66px; }
  .hero-actions { flex-direction: column; align-items: start; }
  .hero-actions .button-primary { width: 195px; }
  .hero-actions .button-quiet { width: 152px; }
  .hero-progress { display: none; }
  .hero-carousel { right: 16px; bottom: 24px; }
  .scroll-cue { display: none; }
  .section { padding: 80px 0px; }
  .section-heading h1 { font-size: 32px; }
  .game-library-heading { min-height: 167px; }
  .game-grid { gap: 12px; }
  .game-card:nth-child(-n + 4) .game-card-info { min-height: 119px; }
  .game-card:nth-child(n + 5) .game-card-info { min-height: 85px; }
  .game-card-info h2 { font-size: 16px; }
  .game-card-info > span { font-size: 11px; }
  .weekly-picks { display: block; }
  .weekly-feature { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  .featured-section { min-height: 590px; }
  .featured-content h1 { font-size: 42px; }
  .featured-description { font-size: 13px; }
  .horizon-main { min-height: 355px; padding: 24px; }
  .horizon-main h2 { font-size: 34px; }
  .horizon-side { grid-template-columns: 1fr; }
  .media-gallery { width: 100%; }
  .media-news { min-height: 923px; }
  .media-column .section-heading h1 { min-height: 74px; }
  .news-item { grid-template-columns: 1fr; gap: 6px; }
  .news-item { min-height: 107px; }
  .news-item span { display: none; }
  .footer-bottom { flex-direction: column; }
  .footer-main { padding-bottom: 38px; }
}