/* Dusty Rocket Arcade - full illustrated desktop hero, then games immediately. */
/* Large promo sections removed in HTML; these selectors are fallback only. */
.featured-section,.steam-spotlight{display:none!important}
.catalog-section{
  padding:22px var(--pad) 60px;
  scroll-margin-top:10px;
}
.catalog-section .section-heading.catalogue-head{
  min-height:0;max-width:none;padding:0;margin:0 0 14px;
  display:flex;align-items:end;gap:15px;justify-content:space-between;
}
.catalogue-head #catalog-title{font-size:clamp(25px,3vw,39px);line-height:1.05;margin:4px 0 0}
.catalogue-head #catalog-title br{display:none}
.catalogue-head #catalog-title em{font-style:normal}
.catalogue-head .eyebrow{font-size:10px;letter-spacing:1.4px}
.catalogue-head .section-subtitle{display:none}
.catalogue-head .catalog-heading-side{display:none}
.sidebar.catalog-filters-panel{
  display:block;margin:0 0 15px;padding:13px;
  box-shadow:4px 4px 0 #181e2130;
}
.sidebar.catalog-filters-panel>a.logo{display:none!important}
.catalog-filters-panel .search-strip{
  display:grid;grid-template-columns:minmax(0,1fr) 190px;
  min-height:0;align-items:end;gap:12px;
  margin:0 0 10px;padding:0;
}
.catalog-filters-panel .search-strip .search-field label{font-size:10px;margin-bottom:3px}
.catalog-filters-panel .search-strip .search{min-height:42px;height:42px}
.catalog-filters-panel .search-strip input{height:40px;min-height:40px}
.catalog-filters-panel .sort-wrap{min-height:0}
.catalog-filters-panel .sort-wrap label{font-size:10px}
.catalog-filters-panel .sort-wrap select{height:40px}
.catalog-filters-panel .side-caption{display:none!important}
.catalog-filters-panel .side-links{
  display:flex;flex-wrap:nowrap;overflow-x:auto;align-items:center;
  gap:6px;margin:5px 0 0;padding:2px 0;
  scrollbar-width:thin;
}
.catalog-filters-panel .side-links .side-link{
  flex:0 0 auto;width:auto;min-width:0;min-height:34px;height:34px;
  margin:0;padding:5px 10px;white-space:nowrap;
  font-size:11px;line-height:1.2;
  display:inline-flex;align-items:center;gap:6px;
}
.catalog-filters-panel .side-links .side-link .nav-ico,.catalog-filters-panel .side-links .side-link .cat-ico{font-size:12px}
.catalog-filters-panel .side-links .side-link .side-counter{font-size:10px}
.catalog-section .games-grid,#games-grid{margin-top:0}
@media (max-width:900px) and (min-width:661px){
 .catalog-section{padding-top:17px}
}
@media (max-width:660px){
 .topbar{height:66px;padding:8px 13px}
 .studio-brand img{width:36px;height:36px}
 .studio-brand strong{font-size:11px}
 .studio-brand small{font-size:7px}
 .hero{
   display:block;position:relative;
   height:264px;min-height:0;max-height:none;
   padding:0;
   background-size:cover,cover;
   background-position:center top,38% center;
 }
 .hero-copy{
   position:absolute;top:85px;left:13px;right:auto;
   width:47%;max-width:none;margin:0;padding:0;
   display:block;
 }
 .hero .hero-brand-heading{
   width:min(100%,160px);max-width:160px;
   margin:0 0 4px;padding:0;transform:none;
 }
 .hero .hero-tagline{
   display:block;font-size:clamp(14px,4vw,18px);
   line-height:1.08;width:max-content;max-width:100%;
   margin:0;padding:5px 6px 6px;
   box-shadow:3px 3px 0 #ff752f99;
 }
 .hero-features,.hero-features.hero-features-single{
   position:absolute;top:91px;right:13px;left:auto;bottom:auto;
   width:44%;max-width:171px;margin:0;display:block;
   grid-template-columns:initial;padding:0;
 }
 .hero-features .paper-card{width:100%;transform:rotate(-2deg);padding:4px 4px 0}
 .hero-features .paper-card img{height:96px;max-height:96px;aspect-ratio:auto;object-fit:cover}
 .hero-features .paper-label{font-size:7px;letter-spacing:.2px;top:-18px;padding:4px}
 .hero-features .paper-caption{padding:5px 5px 6px}
 .hero-features .paper-caption strong{font-size:12px;line-height:1.14}
 .hero-features .paper-caption small{font-size:7px}
 .hero-features .paper-caption b{font-size:12px}
 .quick-categories{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:6px 12px;gap:6px;
   height:58px;min-height:0;scrollbar-width:thin}
 .quick-categories .genre-chip{display:inline-flex;flex:0 0 auto;width:auto;min-width:0;height:42px;min-height:42px;
    padding:5px 10px;font-size:11px;gap:4px}
 .quick-categories .genre-chip .genre-ico{font-size:13px}
 .catalog-section{padding:18px 13px 45px;scroll-margin-top:4px}
 .catalog-section .section-heading.catalogue-head{margin:0 0 12px;min-height:0;gap:0}
 .catalogue-head #catalog-title{font-size:clamp(25px,6.5vw,30px);line-height:1.05}
 .catalogue-head .eyebrow{font-size:9px}
 .catalogue-head .section-subtitle,.catalogue-head .catalog-heading-side{display:none}
 .sidebar.catalog-filters-panel{padding:10px;margin-bottom:12px}
 .catalog-filters-panel .search-strip{
   display:grid;grid-template-columns:minmax(0,1fr);
   gap:7px;margin-bottom:8px;padding:0;
 }
 .catalog-filters-panel .search-strip .search{min-height:42px;height:42px}
 .catalog-filters-panel .sort-wrap{display:flex;justify-content:space-between;align-items:center;gap:8px}
 .catalog-filters-panel .sort-wrap label{display:flex;gap:5px;align-items:center}
 .catalog-filters-panel .sort-wrap select{width:auto;max-width:160px;height:34px}
 .catalog-filters-panel .side-links{margin:4px 0 0}
 .catalog-filters-panel .side-links .side-link{height:33px;min-height:33px;padding:4px 9px;font-size:11px}
}

.catalog-filters-panel .side-links {width:100%;max-width:100%;min-width:0}
@media (max-width:460px) {
  .catalog-filters-panel #result-count {display:none!important}
  .catalog-filters-panel .sort-wrap {justify-content:flex-start;min-width:0}
  .catalog-filters-panel .sort-wrap label {max-width:100%;min-width:0}
  .catalog-filters-panel .sort-wrap select {width:160px;max-width:calc(100% - 36px)}
}

/* Small screens use the compact hero, not the full-height desktop banner. */
@media (max-width:660px) {
  .hero-label, .hero .hero-actions, .hero .hero-note, .hero .hero-baseline { display:none!important; }
  .quick-categories { justify-content:flex-start!important; scroll-snap-type:x proximity; }
  .quick-categories .genre-chip { scroll-snap-align:start; }
  .hero-copy { top:82px; }
  .hero .hero-brand-heading { width:min(100%,160px); margin:0 0 4px; }
  .hero .hero-tagline { margin:0; }
}