: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 { 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; align-items: center; gap: 31px; margin-left: auto; }
.main-nav a { color: rgb(179, 191, 204); font-size: 14px; transition: color 0.2s; }
.main-nav a:hover, .main-nav a.is-active { color: var(--white); }
.header-actions { display: flex; 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 { padding: 11px 17px; font-size: 13px; }
.menu-trigger { display: none; }
.mobile-nav { display: 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; color: rgb(202, 210, 220); font-size: 17px; line-height: 1.85; }
.game-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0px 31px; }
.game-tags span { padding: 6px 10px; border: 1px solid var(--line); color: rgb(197, 205, 214); font-size: 11px; }
.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; }
.scroll-cue span { 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; transition: 0.2s; }
.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 { min-width: 0px; transition: opacity 0.25s, transform 0.25s; }
.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 img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s; }
.game-card:hover .game-cover img { transform: scale(1.06); }
.game-cover::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(0deg, rgba(2, 8, 14, 0.65), transparent 48%); }
.cover-status { position: absolute; z-index: 1; left: 13px; top: 13px; padding: 5px 8px; background: var(--lime); color: rgb(21, 33, 19); font-size: 10px; font-weight: 800; }
.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-card-info > span { color: rgb(113, 128, 145); font-size: 11px; }
.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-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 { 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)), url("DON'T MAKE A SOUND/steam-assets/image-assets/11.jpg") center center / cover; }
.horizon-meta { position: absolute; display: flex; justify-content: space-between; align-self: auto; width: calc(100% - 66px); margin-top: auto; top: auto; }
.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: flex; align-items: end; gap: 20px; padding: 23px; background: rgb(245, 246, 242); border: 1px solid rgba(22, 39, 52, 0.14); }
.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 { color: rgb(114, 128, 140); font-size: 12px; }
.media-news { background: rgb(244, 243, 239); color: rgb(20, 32, 45); }
.media-news-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 72px; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 35px; }
.media-grid a { position: relative; overflow: hidden; aspect-ratio: 0.78 / 1; background: rgb(21, 35, 52); }
.media-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.media-grid a:hover img { transform: scale(1.06); }
.media-grid a::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(0deg, rgba(6, 15, 25, 0.8), transparent 46%); }
.media-grid span { position: absolute; z-index: 1; left: 14px; bottom: 12px; color: rgb(255, 255, 255); font-size: 11px; }
.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; 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 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-qr-thumb { width: 100px; height: 100px; object-fit: contain; border: 1px solid rgba(213, 193, 122, 0.18); border-radius: 4px; margin-top: 12px; cursor: pointer; transition: transform 0.2s, border-color 0.2s; }
.footer-qr-thumb:hover { transform: scale(1.05); border-color: rgba(213, 193, 122, 0.5); }
.footer-qr-hint { color: rgb(154, 168, 182); font-size: 11px; margin-top: 6px; }
.qr-lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(3, 7, 12, 0.92); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.qr-lightbox.is-open { opacity: 1; visibility: visible; }
.qr-lightbox img { max-width: 420px; max-height: 80vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.qr-lightbox-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; line-height: 1; }
.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 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)), 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 { 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); }
.media-grid a { border: 1px solid rgba(213, 193, 122, 0.13); }
.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; }
.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; }
  .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; }
  .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 { font-size: 14px; }
  .hero-actions { flex-direction: column; align-items: start; }
  .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-grid { gap: 12px; }
  .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-grid { gap: 8px; }
  .news-item { grid-template-columns: 1fr; gap: 6px; }
  .news-item span { display: none; }
  .footer-bottom { flex-direction: column; }
  .footer-main { padding-bottom: 38px; }
}