:root {
  color-scheme: dark;
  --night: #080c14;
  --panel: #111927;
  --raised: #172235;
  --paper: #eff4fc;
  --muted: #a2aec0;
  --line: rgba(219, 235, 255, .12);
  --aqua: #63e8db;
  --violet: #a991ff;
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(ellipse at 100% 0, rgba(102, 91, 172, .14), transparent 34%),
    radial-gradient(ellipse at 0 45%, rgba(34, 119, 125, .09), transparent 36%),
    var(--night);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(rgba(230, 241, 255, .17) .55px, transparent .55px);
  background-size: 5px 5px;
  content: "";
  opacity: .1;
  pointer-events: none;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
.wrap { width: min(1190px, calc(100% - 46px)); margin-inline: auto; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--aqua);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 13px currentColor; content: ""; }

.site-head { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid var(--line); background: rgba(8,12,20,.95); backdrop-filter: blur(16px); }
.site-nav { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 1.08rem; font-weight: 700; letter-spacing: -.065em; }
.brand img { width: 40px; height: 40px; border: 1px solid rgba(99,232,219,.5); border-radius: 50%; object-fit: cover; }
.brand em { color: var(--aqua); font-style: normal; }
.site-links { display: flex; align-items: center; gap: 23px; color: #bec8d7; font-size: .78rem; }
.site-links a, .footer-links a { transition: color .2s ease; }
.site-links a:hover, .site-links a[aria-current="page"], .footer-links a:hover { color: var(--aqua); }
.nav-action, .steam-button, .hero-button {
  display: inline-flex;
  min-height: 41px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(99,232,219,.58);
  background: var(--aqua);
  color: #081311;
  cursor: pointer;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .075em;
  padding: 0 14px;
  transition: transform .2s ease, background .2s ease;
}
.nav-action:hover, .steam-button:hover, .hero-button:hover { transform: translateY(-2px); background: #9bf5ec; }
.nav-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--line); background: transparent; cursor: pointer; }

.shop-strip { overflow-x: auto; border-bottom: 1px solid var(--line); background: #0e1622; scrollbar-width: none; }
.shop-strip::-webkit-scrollbar { display: none; }
.shop-links { display: flex; min-width: max-content; align-items: center; gap: 3px; }
.shop-links a { display: block; border-bottom: 2px solid transparent; color: #adb9cb; font-size: .7rem; padding: 12px 15px 10px; }
.shop-links a:hover, .shop-links a[aria-current="page"] { border-color: var(--aqua); color: var(--paper); }
.shop-bar { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 13px; }
.shop-bar .shop-links { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.catalog-global-search { display: flex; flex: 0 1 294px; min-width: 198px; min-height: 33px; border: 1px solid var(--line); background: #101827; }
.catalog-global-search:focus-within { border-color: var(--aqua); outline: 2px solid rgba(99,232,219,.16); }
.catalog-global-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--paper); font: inherit; font-size: .7rem; padding: 0 10px; }
.catalog-global-search input::placeholder { color: #8491a3; }
.catalog-global-search button { width: 38px; flex: 0 0 auto; border: 0; background: var(--aqua); color: #081311; cursor: pointer; font-size: 1.15rem; font-weight: 700; }

.home-hero, .catalog-hero {
  position: relative;
  display: flex;
  min-height: 404px;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background-color: #111927;
  background-position: center 38%;
  background-size: cover;
}
.home-hero::before, .catalog-hero::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,10,16,.95) 0%, rgba(7,10,16,.77) 45%, rgba(7,10,16,.19) 100%), linear-gradient(0deg, rgba(7,10,16,.67), transparent 65%);
  content: "";
}
.hero-content, .catalog-hero-content { position: relative; z-index: 1; padding-block: 58px; }
.home-hero h1, .catalog-hero h1 { max-width: 760px; margin: 14px 0 14px; font-family: var(--font-heading); font-size: clamp(2.65rem, 6vw, 5rem); letter-spacing: -.075em; line-height: .99; }
.home-hero h1 span, .catalog-hero h1 span { color: var(--aqua); }
.home-hero p, .catalog-hero p { max-width: 610px; margin: 0 0 20px; color: #d1d9e5; font-size: .89rem; line-height: 1.8; }
.hero-label { color: #c6cddd; font-size: .66rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-button.secondary { border-color: rgba(236,244,255,.35); background: rgba(13,20,32,.6); color: var(--paper); }
.hero-button.secondary:hover { background: rgba(30,44,63,.88); }

.ticker { display: flex; min-height: 45px; overflow: hidden; align-items: center; border-bottom: 1px solid rgba(99,232,219,.17); background: rgba(99,232,219,.055); }
.ticker-label { flex: 0 0 auto; border-right: 1px solid rgba(99,232,219,.2); color: var(--aqua); font-size: .63rem; font-weight: 700; letter-spacing: .14em; padding: 0 16px; }
.ticker-window { overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-flex; min-width: max-content; animation: game-ticker 36s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { padding-right: 22px; color: #c2ccda; font-family: var(--font-heading); font-size: .7rem; }
.ticker-item::after { margin-left: 20px; color: var(--violet); content: "✳"; }
@keyframes game-ticker { to { transform: translateX(-50%); } }

.home-section, .catalog-intro { padding: 48px 0 20px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.section-heading h2 { margin: 8px 0 0; font-family: var(--font-heading); font-size: clamp(1.6rem, 3.7vw, 2.5rem); letter-spacing: -.07em; line-height: 1.03; }
.section-heading > p { max-width: 440px; margin: 0 0 2px; color: var(--muted); font-size: .76rem; line-height: 1.65; }
.browse-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 19px; }
.browse-pills button { border: 1px solid var(--line); border-radius: 22px; background: #111927; color: #ccd5e1; cursor: pointer; font-size: .68rem; padding: 8px 12px; }
.browse-pills button:hover, .browse-pills button[aria-pressed="true"] { border-color: var(--aqua); background: var(--aqua); color: #071313; }

.layout-shell { display: grid; grid-template-columns: 204px minmax(0, 1fr); gap: 28px; align-items: start; padding: 28px 0 79px; }
.toc { position: sticky; top: 128px; border: 1px solid var(--line); background: rgba(15,22,33,.92); padding: 15px 14px; }
.toc-heading { margin: 0 0 11px; color: #9cabc0; font-size: .6rem; font-weight: 700; letter-spacing: .17em; }
.toc-links { display: grid; gap: 2px; }
.toc-links a { border-left: 2px solid transparent; color: #bdc7d4; font-size: .72rem; line-height: 1.35; padding: 8px 8px; }
.toc-links a:hover, .toc-links a.is-active { border-color: var(--aqua); background: rgba(99,232,219,.065); color: #fff; }
.toc-separator { height: 1px; margin: 14px 0 10px; background: var(--line); }
.toc-list a { display: block; color: #aeb9c9; font-size: .68rem; padding: 6px 7px; }
.toc-list a:hover { color: var(--aqua); }
.toc-list a[aria-current="page"] { color: var(--aqua); }
.catalog-content { min-width: 0; }
.catalog-block { margin: 0 0 43px; scroll-margin-top: 125px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); margin: 0 0 13px; padding: 0 0 11px; }
.block-head h2 { margin: 0; font-family: var(--font-heading); font-size: 1.28rem; letter-spacing: -.045em; }
.block-head span { color: var(--muted); font-size: .66rem; }

.featured-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.featured-card { overflow: hidden; border: 1px solid var(--line); background: var(--panel); transition: transform .22s, border-color .22s; }
.featured-card:hover { transform: translateY(-3px); border-color: rgba(99,232,219,.5); }
.featured-art { position: relative; height: 137px; overflow: hidden; background: #171f2c; }
.featured-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.featured-card:hover .featured-art img { transform: scale(1.055); }
.featured-art::after { position: absolute; inset: 30% 0 0; background: linear-gradient(0deg, rgba(7,10,16,.83), transparent); content: ""; }
.featured-info { padding: 12px; }
.featured-info h3 { margin: 0 0 9px; font-family: var(--font-heading); font-size: .91rem; letter-spacing: -.035em; line-height: 1.25; }
.featured-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.featured-footer .rating-pill { font-size: .58rem; }
.featured-footer a { color: var(--aqua); font-size: .61rem; font-weight: 700; }

.game-list { display: grid; gap: 11px; }
.game-row { display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(105deg, rgba(20,30,44,.96), rgba(14,19,29,.97)); transition: border-color .2s, transform .2s; scroll-margin-top: 110px; }
.game-row:hover { transform: translateY(-2px); border-color: rgba(99,232,219,.43); }
.game-row[hidden] { display: none; }
.row-art { position: relative; min-height: 180px; overflow: hidden; background: #131c29; }
.row-art img { position: absolute; width: 100%; height: 100%; object-fit: cover; inset: 0; transition: transform .45s; }
.game-row:hover .row-art img { transform: scale(1.04); }
.row-copy { min-width: 0; padding: 15px 17px 13px; }
.row-copy h3 { margin: 7px 0 8px; font-family: var(--font-heading); font-size: 1.13rem; letter-spacing: -.045em; }
.row-copy p { max-width: 740px; margin: 0 0 12px; color: #abb7c8; font-size: .74rem; line-height: 1.68; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.genre-tag { border: 1px solid rgba(179,197,223,.14); background: rgba(169,145,255,.08); color: #c5b9ff; font-size: .58rem; padding: 4px 7px; }
.row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); margin-top: 11px; padding-top: 10px; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.steam-button { min-height: 31px; font-size: .6rem; padding-inline: 11px; }
.save-button { min-height: 31px; border: 1px solid var(--line); background: #0c111a; color: #d1dbea; cursor: pointer; font-size: .6rem; padding: 0 10px; }
.save-button:hover, .save-button[aria-pressed="true"] { border-color: var(--violet); color: #ded4ff; }
.rating { color: #d4dce8; font-size: .61rem; text-align: right; white-space: nowrap; }
.rating strong { color: #a2e28d; font-size: .72rem; }
.rating small { display: block; margin-top: 3px; color: #8996a8; font-size: .55rem; }
.rating-none { color: #b3bdcc; font-size: .63rem; }
.catalog-filter-empty { display: none; border: 1px dashed var(--line); color: var(--muted); font-size: .78rem; padding: 23px; text-align: center; }
.catalog-filter-empty.is-visible { display: block; }
.rating-note { margin: 10px 0 0; color: #778397; font-size: .59rem; line-height: 1.6; }
.catalog-footer { border-top: 1px solid var(--line); background: rgba(8,12,20,.82); padding: 25px 0; color: var(--muted); font-size: .68rem; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.steam-library-hero { background-image: linear-gradient(125deg, rgba(10,20,34,.9), rgba(19,37,57,.55)), url("../img/catalog/hero-worlds.jpg"); }
.steam-data-badge { display: inline-flex; border: 1px solid rgba(99,232,219,.31); background: rgba(8,16,23,.55); color: #c3eee9; font-size: .68rem; padding: 9px 12px; }
.steam-library-main { min-height: 65vh; padding-bottom: 62px; }
.steam-library-search { border: 1px solid var(--line); background: var(--panel); margin-top: 28px; padding: 16px; }
.steam-catalog-search { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(165px, 235px) auto; align-items: end; gap: 12px; }
.steam-catalog-search label { display: grid; gap: 7px; color: var(--muted); font-size: .59rem; font-weight: 700; letter-spacing: .12em; }
.steam-catalog-search input, .steam-catalog-search select { width: 100%; min-height: 41px; border: 1px solid var(--line); background: #0b111b; color: var(--paper); font: inherit; font-size: .75rem; padding: 0 11px; }
.steam-catalog-search input:focus, .steam-catalog-search select:focus { border-color: var(--aqua); outline: 2px solid rgba(99,232,219,.19); }
.steam-catalog-search .hero-button { min-height: 41px; }
.steam-results-section { padding-top: 38px; }
.steam-catalog-status { border-left: 2px solid var(--aqua); margin: 0 0 15px; background: rgba(99,232,219,.045); color: #bdcbd9; font-size: .72rem; line-height: 1.6; padding: 10px 13px; }
.steam-catalog-status.is-error { border-color: #ef9696; background: rgba(255,124,124,.07); color: #ffd7d7; }
.steam-catalog-status.is-empty { border-color: #a991ff; color: var(--muted); }
.steam-game-results { display: grid; gap: 11px; }
.steam-result-row .row-art img { object-fit: contain; background: #0d131d; }
.steam-result-row .row-copy h3 { margin-block: 6px 8px; }
.steam-inline-trailer { display: flex; max-width: 480px; align-items: center; gap: 11px; border: 1px solid var(--line); background: rgba(7,12,20,.53); margin-top: 10px; padding: 7px; transition: border-color .2s, background .2s; }
.steam-inline-trailer:hover { border-color: rgba(99,232,219,.58); background: rgba(99,232,219,.06); }
.steam-inline-trailer-art { position: relative; display: block; width: 107px; flex: 0 0 107px; overflow: hidden; aspect-ratio: 16 / 9; background: #0a111a; }
.steam-inline-trailer-art img { width: 100%; height: 100%; object-fit: cover; }
.steam-inline-trailer-art .trailer-play { width: 32px; height: 32px; font-size: .7rem; }
.steam-inline-trailer > span:last-child { display: grid; gap: 5px; }
.steam-inline-trailer strong, .steam-no-trailer { color: var(--aqua); font-size: .61rem; font-weight: 700; }
.steam-inline-trailer small { color: var(--muted); font-size: .62rem; line-height: 1.45; }
.steam-no-trailer { margin: 10px 0 0; color: #b5bfce; font-weight: 400; }
.steam-no-trailer a { color: var(--aqua); }
.steam-data-notice { color: #efca88 !important; font-size: .66rem !important; }
.steam-game-price { display: block; margin-top: 4px; color: var(--muted); font-size: .63rem; text-align: right; }
.steam-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 25px auto 19px; }
.page-button { display: inline-grid; min-width: 36px; min-height: 36px; place-items: center; border: 1px solid var(--line); background: #111927; color: #cad4e1; cursor: pointer; font-size: .72rem; }
.page-button:hover, .page-button.is-current { border-color: var(--aqua); background: var(--aqua); color: #081311; }
.page-button.is-current { font-weight: 800; }
.page-direction { min-width: 45px; }
.page-ellipsis { color: var(--muted); padding-inline: 3px; }
.steam-catalog-promo { display: flex; min-height: 67px; align-items: center; gap: 13px; border: 1px solid rgba(99,232,219,.27); background: linear-gradient(105deg,rgba(28,67,76,.39),rgba(20,30,45,.6)); margin: 0 0 20px; padding: 13px 16px; }
.steam-catalog-promo-mark { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--aqua); color: #091512; font-size: 1.3rem; font-weight: 700; }
.steam-catalog-promo > span:nth-child(2) { display: grid; gap: 4px; }
.steam-catalog-promo strong { font-family: var(--font-heading); font-size: .84rem; }
.steam-catalog-promo small { color: var(--muted); font-size: .66rem; line-height: 1.5; }
.steam-catalog-promo > .trailer-link { margin-left: auto; white-space: nowrap; }
.toast { position: fixed; z-index: 40; right: 20px; bottom: 20px; transform: translateY(12px); border: 1px solid rgba(99,232,219,.34); background: #13202b; color: var(--paper); font-size: .75rem; opacity: 0; padding: 12px 16px; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-visible { transform: translateY(0); opacity: 1; }

@media (max-width: 940px) {
  .site-nav { gap: 12px; }
  .site-links { gap: 12px; font-size: .7rem; }
  .nav-action { padding-inline: 9px; font-size: .6rem; }
  .layout-shell { grid-template-columns: 170px minmax(0,1fr); gap: 17px; }
  .game-row { grid-template-columns: minmax(175px, 220px) minmax(0,1fr); }
  .featured-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .wrap { width: min(100% - 32px, 520px); }
  .site-nav { min-height: 66px; gap: 9px; }
  .brand img { width: 36px; height: 36px; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-action { min-height: 36px; font-size: .55rem; }
  .site-links { position: absolute; top: 66px; right: 0; left: 0; display: none; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); background: #0c121d; padding: 8px 20px 14px; }
  .site-links.is-open { display: flex; flex-direction: column; }
  .site-links a { padding: 10px 0; }
  .home-hero, .catalog-hero { min-height: 393px; background-position: 57% center; }
  .home-hero::before, .catalog-hero::before { background: linear-gradient(90deg,rgba(7,10,16,.88),rgba(7,10,16,.36)),linear-gradient(0deg,rgba(7,10,16,.76),transparent); }
  .hero-content, .catalog-hero-content { padding-block: 48px; }
  .home-hero h1, .catalog-hero h1 { font-size: clamp(2.5rem,12vw,3.8rem); }
  .home-hero p, .catalog-hero p { font-size: .81rem; }
  .section-heading { align-items: start; flex-direction: column; gap: 10px; }
  .layout-shell { grid-template-columns: 1fr; gap: 14px; padding-top: 14px; }
  .toc { position: static; padding: 11px; }
  .toc-heading { margin-bottom: 7px; }
  .toc-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc-links a { padding: 7px; }
  .toc-separator, .toc-list, .toc-extra { display: none; }
  .catalog-block { margin-bottom: 31px; scroll-margin-top: 79px; }
  .featured-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .featured-art { height: 106px; }
  .featured-info { padding: 9px; }
  .featured-info h3 { min-height: 35px; font-size: .78rem; }
  .game-row { grid-template-columns: 1fr; }
  .row-art { min-height: 0; aspect-ratio: 2.1 / 1; }
  .row-copy { padding: 13px; }
  .row-copy p { font-size: .75rem; }
  .row-bottom { align-items: flex-end; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.brand img { object-fit: cover; }
.featured-art { display: block; }
.catalog-search { display: grid; max-width: 390px; gap: 7px; margin: -6px 0 16px; color: var(--muted); font-size: .59rem; font-weight: 700; letter-spacing: .12em; }
.catalog-search input { min-height: 39px; border: 1px solid var(--line); background: #101827; color: var(--paper); font: inherit; letter-spacing: 0; padding: 0 12px; }
.catalog-search input:focus { border-color: var(--aqua); outline: 2px solid rgba(99,232,219,.2); }
.release-status { color: #d5c68a !important; font-size: .66rem !important; }
.collection-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.collection-tile { position: relative; display: flex; min-height: 174px; flex-direction: column; justify-content: flex-end; overflow: hidden; grid-column: span 2; border: 1px solid var(--line); background: #121b28; isolation: isolate; padding: 15px; }
.collection-tile::before { position: absolute; z-index: -2; inset: 0; background-image: var(--tile-art); background-position: center; background-size: cover; content: ""; transition: transform .45s ease; }
.collection-tile::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(5,9,15,.95), rgba(5,9,15,.12)); content: ""; }
.collection-tile:hover::before { transform: scale(1.06); }
.collection-tile strong { margin-top: 8px; font-family: var(--font-heading); font-size: 1.18rem; letter-spacing: -.04em; }
.collection-tile > span:last-child { margin-top: 6px; color: var(--aqua); font-size: .64rem; }
.collection-tile:nth-child(4) { grid-column: 2 / span 2; }
.collection-tile:nth-child(5) { grid-column: 4 / span 2; }
.home-more { margin-top: 19px; text-align: center; }
.home-note { border-top: 1px solid var(--line); margin: 24px 0 52px; padding-top: 18px; }
.home-note p { max-width: 850px; color: var(--muted); font-size: .71rem; line-height: 1.75; }
.slide-controls { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.slide-controls > button { width: 34px; height: 34px; border: 1px solid rgba(236,244,255,.34); background: rgba(13,20,32,.6); cursor: pointer; }
#slide-dots { display: flex; gap: 6px; }
#slide-dots button { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #8490a0; cursor: pointer; padding: 0; }
#slide-dots button[aria-pressed="true"] { background: var(--aqua); box-shadow: 0 0 10px var(--aqua); }
.trailer-grid, .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trailer-card { overflow: hidden; border: 1px solid var(--line); background: var(--panel); transition: border-color .2s, transform .2s; }
.trailer-card:hover, .news-card:hover { transform: translateY(-3px); border-color: rgba(99,232,219,.46); }
.trailer-art, .news-art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #131c29; }
.trailer-art img, .news-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.trailer-card:hover img, .news-card:hover img { transform: scale(1.045); }
.trailer-play { position: absolute; top: 50%; left: 50%; display: grid; width: 47px; height: 47px; transform: translate(-50%,-50%); place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(6,10,16,.77); color: var(--aqua); font-size: 1rem; }
.trailer-copy, .news-copy { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.trailer-copy strong, .news-copy h3 { margin: 0; font-family: var(--font-heading); font-size: .94rem; letter-spacing: -.035em; }
.trailer-copy > span:nth-last-child(2), .news-copy p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.65; }
.trailer-link, .news-copy > a { color: var(--aqua); font-size: .62rem; font-weight: 700; }
.news-card { overflow: hidden; border: 1px solid var(--line); background: var(--panel); transition: border-color .2s, transform .2s; }
.news-art { aspect-ratio: 16 / 10; }
@media (max-width: 940px) {
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-tile { grid-column: auto; }
  .collection-tile:nth-child(5):last-child { grid-column: 1 / -1; margin-inline: 25%; }
}
@media (max-width: 680px) {
  .collection-grid { gap: 8px; }
  .collection-tile { min-height: 145px; padding: 11px; }
  .collection-tile strong { font-size: .97rem; }
  .trailer-grid, .news-grid { grid-template-columns: 1fr; }
  .collection-tile:nth-child(5):last-child { margin-inline: 25%; }
  .nav-action { white-space: nowrap; }
  .row-bottom { flex-wrap: wrap; }
  .rating { margin-left: auto; }
  .catalog-search { max-width: none; }
}

@media (max-width: 940px) {
  .site-nav { gap: 12px; }
  .site-links { gap: 10px; font-size: .65rem; }
  .shop-bar { gap: 8px; }
  .shop-links a { padding-inline: 10px; }
  .catalog-global-search { flex-basis: 245px; min-width: 180px; }
  .steam-catalog-search { grid-template-columns: minmax(180px, 1fr) minmax(150px, 205px) auto; gap: 9px; }
  .steam-catalog-search .hero-button { padding-inline: 10px; font-size: .59rem; }
}

@media (max-width: 680px) {
  .site-nav { gap: 8px; }
  .site-links { gap: 0; font-size: .78rem; }
  .shop-bar { align-items: stretch; flex-direction: column; gap: 0; }
  .shop-bar .catalog-global-search { width: 100%; min-height: 36px; flex: none; margin-top: 9px; order: -1; }
  .shop-bar .shop-links { width: 100%; flex: none; }
  .shop-links a { padding-inline: 11px; }
  .steam-catalog-search { grid-template-columns: 1fr; }
  .steam-catalog-search .hero-button { width: 100%; }
  .steam-result-row .row-art { aspect-ratio: 16 / 8; }
  .steam-inline-trailer { max-width: none; }
  .steam-catalog-promo { align-items: flex-start; flex-wrap: wrap; }
  .steam-catalog-promo > .trailer-link { margin-left: 52px; }
  .steam-game-price { text-align: left; }
  .steam-pagination { gap: 4px; }
  .page-button { min-width: 33px; min-height: 33px; }
}