/* ПРЕДЛОЖКА141 — компактный каталог-список */
.catalog-section { padding: 34rem 0 100rem; }

#catalog .catalog-toolbar {
  position: sticky;
  top: 92rem;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(330rem, 1.1fr) minmax(390rem, .9fr);
  gap: clamp(28rem,5vw,72rem);
  align-items: center;
  margin-bottom: 42rem;
  padding: clamp(24rem,3vw,38rem);
  overflow: hidden;
  border: 1rem solid rgba(229,64,43,.28);
  border-radius: 26rem 26rem 26rem 8rem;
  background:
    linear-gradient(110deg,rgba(37,7,6,.94),rgba(12,3,3,.94) 58%,rgba(23,5,5,.9)),
    rgba(13,5,5,.92);
  box-shadow: 0 24rem 70rem rgba(0,0,0,.42), inset 0 1rem rgba(255,255,255,.035);
  backdrop-filter: blur(24rem) saturate(135%);
  transition: grid-template-columns .42s var(--ease),gap .42s var(--ease),padding .42s var(--ease),border-radius .42s var(--ease),background .42s ease,box-shadow .42s ease;
}
#catalog .catalog-toolbar::before { position: absolute; inset: 0 auto 0 0; width: 3rem; background: linear-gradient(180deg,transparent,var(--red) 25% 75%,transparent); box-shadow: 0 0 22rem rgba(227,51,36,.7); content: ''; }
#catalog .catalog-toolbar::after { position: absolute; right: -60rem; bottom: -105rem; width: 280rem; height: 280rem; border: 1rem solid rgba(230,55,38,.08); border-radius: 50%; box-shadow: inset 0 0 0 34rem rgba(230,55,38,.018), inset 0 0 0 68rem rgba(230,55,38,.014); content: ''; pointer-events: none; }
.toolbar-title { position: relative; z-index: 1; min-width: 0; max-height: 150rem; overflow: hidden; transition: max-height .38s var(--ease),opacity .3s ease; }
.catalog-eyebrow { display: inline-flex; align-items: center; gap: 9rem; max-height: 20rem; margin-bottom: 12rem; overflow: hidden; color: #d98c7f; font-family: var(--font-accent); font-size: 9rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; transition: max-height .3s var(--ease),margin .3s var(--ease),opacity .25s ease; }
.catalog-eyebrow i { width: 24rem; height: 1rem; background: var(--red); box-shadow: 0 0 9rem rgba(227,51,36,.7); }
.toolbar-title h2 { margin: 0; font-size: clamp(34rem,4vw,52rem); line-height: .92; letter-spacing: -.045em; text-wrap: balance; transition: font-size .38s var(--ease); }
.toolbar-title p { max-height: 24rem; margin: 12rem 0 0; overflow: hidden; color: #aa9691; font-size: 12rem; transition: max-height .3s var(--ease),margin .3s var(--ease),opacity .25s ease; }
.controls { position: relative; z-index: 1; display: grid; gap: 12rem; justify-items: stretch; padding: 16rem; border: 1rem solid rgba(255,255,255,.06); border-radius: 16rem 16rem 16rem 5rem; background: rgba(0,0,0,.2); box-shadow: inset 0 1rem rgba(255,255,255,.02); transition: grid-template-columns .42s var(--ease),gap .42s var(--ease),padding .42s var(--ease); }
.search-wrap { position: relative; display: block; }
.search-wrap > span { position: absolute; top: 50%; left: 15rem; z-index: 1; color: #d26050; font-size: 22rem; line-height: 1; transform: translateY(-53%) rotate(-12deg); pointer-events: none; }
#catalog .search {
  width: 100%;
  min-height: 48rem;
  padding: 11rem 15rem 11rem 44rem;
  outline: none;
  border: 1rem solid rgba(211,55,38,.26);
  border-radius: 10rem 10rem 10rem 3rem;
  color: #fff;
  background: rgba(4,1,1,.56);
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
#catalog .search:focus { border-color: rgba(237,64,44,.7); background: rgba(0,0,0,.34); box-shadow: 0 0 0 4rem rgba(226,59,40,.09); }
.filters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7rem; }
.catalog-sort { display: grid; grid-template-columns: auto minmax(0,180rem); gap: 12rem; align-items: center; justify-content: end; color: #9f918d; font-size: 9rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.catalog-sort select { width: 100%; min-height: 38rem; padding: 7rem 34rem 7rem 11rem; border: 1rem solid rgba(255,255,255,.11); border-radius: 9rem 9rem 9rem 3rem; outline: none; color: #eee6e3; background: #120707; font: inherit; letter-spacing: .04em; text-transform: none; color-scheme: dark; cursor: pointer; }
.catalog-sort select:focus-visible { border-color: rgba(237,64,44,.72); box-shadow: 0 0 0 3rem rgba(226,59,40,.1); }
.filter-btn {
  min-height: 38rem;
  padding: 8rem 10rem;
  border: 1rem solid rgba(255,255,255,.11);
  border-radius: 9rem 9rem 9rem 3rem;
  color: #c8bdba;
  background: rgba(255,255,255,.025);
  font-size: 11rem;
  font-weight: 900;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.filter-btn:hover { transform: translateY(-2rem); border-color: rgba(226,59,40,.35); color: #fff; }
.filter-btn.active { border-color: rgba(237,64,44,.72); color: #fff; background: linear-gradient(135deg,rgba(213,40,27,.5),rgba(103,10,7,.32)); box-shadow: 0 8rem 20rem rgba(110,10,7,.22), inset 0 1rem rgba(255,255,255,.06); }
@media (min-width: 1081px) {
  #catalog .catalog-toolbar.is-compact { grid-template-columns: minmax(180rem,220rem) minmax(0,1fr); gap: 18rem; padding: 12rem 16rem; border-radius: 16rem 16rem 16rem 5rem; background: linear-gradient(110deg,rgba(30,6,5,.97),rgba(8,2,2,.97)); box-shadow: 0 14rem 42rem rgba(0,0,0,.5),inset 0 1rem rgba(255,255,255,.035); }
  #catalog .catalog-toolbar.is-compact .catalog-eyebrow,#catalog .catalog-toolbar.is-compact .toolbar-title p { max-height: 0; margin: 0; opacity: 0; }
  #catalog .catalog-toolbar.is-compact .toolbar-title h2 { font-size: 27rem; white-space: nowrap; }
  #catalog .catalog-toolbar.is-compact .controls { grid-template-columns: minmax(140rem,.7fr) minmax(400rem,1.8fr) minmax(140rem,.6fr); gap: 8rem; padding: 8rem; }
  #catalog .catalog-toolbar.is-compact .search-wrap,#catalog .catalog-toolbar.is-compact .filters,#catalog .catalog-toolbar.is-compact .catalog-sort { min-width: 0; }
  #catalog .catalog-toolbar.is-compact .filters { grid-template-columns: repeat(7,minmax(0,1fr)); }
  #catalog .catalog-toolbar.is-compact .catalog-sort { grid-template-columns: 1fr; gap: 0; }
  #catalog .catalog-toolbar.is-compact .catalog-sort > span { position: absolute; width: 1rem; height: 1rem; overflow: hidden; clip-path: inset(50%); }
  #catalog .catalog-toolbar.is-compact .search,#catalog .catalog-toolbar.is-compact .filter-btn,#catalog .catalog-toolbar.is-compact .catalog-sort select { min-height: 34rem; }
  #catalog .catalog-toolbar.is-compact .filter-btn { padding-inline: 6rem; font-size: 9rem; }
}
.favorite-star { margin-right: 7rem; color: #ffd066; filter: drop-shadow(0 0 7rem rgba(255,192,55,.5)); }
.game-card.is-favorite { box-shadow: inset 2rem 0 #d69b28; }
.library-state-chip { padding: 6rem 8rem; border: 1rem solid rgba(255,255,255,.1); border-radius: 8rem; font-size: 8rem; font-weight: 900; text-transform: uppercase; }
.library-state-chip.completed { color: #bff1d1; border-color: rgba(75,192,124,.25); background: rgba(75,192,124,.08); }
.library-state-chip.ignored { color: #d2aaa3; background: rgba(255,255,255,.035); }

.catalog-stream { display: grid; gap: 46rem; }
.catalog-group { display: grid; gap: 14rem; }
.group-head { display: flex; align-items: end; justify-content: space-between; gap: 18rem; padding: 0 4rem 2rem; }
.group-kicker { display: inline-flex; align-items: center; gap: 9rem; margin-bottom: 7rem; color: #ff765f; font-size: 10rem; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
.group-kicker::before { width: 22rem; height: 2rem; background: var(--red); box-shadow: 0 0 12rem rgba(226,59,40,.45); content: ''; }
.catalog-group[data-group='released'] .group-kicker { color: #67eda0; }
.catalog-group[data-group='released'] .group-kicker::before { background: var(--green); box-shadow: 0 0 12rem rgba(93,229,165,.35); }
.catalog-group[data-group='unknown'] .group-kicker { color: #aaa2ad; }
.catalog-group[data-group='unknown'] .group-kicker::before { background: #817982; box-shadow: none; }
.group-head h3 { margin: 0; font-size: clamp(26rem,3.4vw,38rem); line-height: 1; letter-spacing: -.05em; }
.group-head p { max-width: 620rem; margin: 7rem 0 0; color: var(--muted); font-size: 12rem; line-height: 1.5; }
.group-count { display: inline-grid; flex: 0 0 auto; min-width: 42rem; min-height: 34rem; place-items: center; padding: 7rem 11rem; border: 1rem solid rgba(255,255,255,.1); border-radius: 999rem; color: #ddd5d2; background: rgba(255,255,255,.025); font-size: 11rem; font-weight: 950; }

.section-grid { display: grid; gap: 1rem; overflow: hidden; border: 1rem solid rgba(211,55,38,.18); border-radius: 14rem; background: rgba(211,55,38,.16); box-shadow: 0 22rem 54rem rgba(0,0,0,.24); }
.game-card,
.game-card.featured {
  --lift: 0;
  position: relative;
  display: grid;
  grid-template-columns: 28rem 42rem 132rem minmax(180rem,1fr) 112rem minmax(150rem,auto) 116rem;
  gap: 16rem;
  align-items: center;
  width: 100%;
  min-height: 86rem;
  padding: 9rem 14rem;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  outline: none;
  color: #fff;
  background: linear-gradient(90deg,rgba(20,7,7,.96),rgba(9,4,4,.94));
  cursor: pointer;
  opacity: 1;
  transform: translateY(var(--lift));
  transition: opacity .5s var(--ease), transform .5s var(--ease), background .22s ease, box-shadow .22s ease;
}
.game-card::before { position: absolute; inset: 0 auto 0 0; width: 2rem; background: var(--red); opacity: 0; content: ''; transition: opacity .22s ease; }
.game-card.is-visible { opacity: 1; transform: translateY(var(--lift)); }
.game-card.tilt-ready { transition: opacity .5s var(--ease), transform .2s ease, background .22s ease, box-shadow .22s ease; }
.game-card:hover,
.game-card:focus-visible { --lift: 0; z-index: 1; background: linear-gradient(90deg,rgba(41,10,9,.98),rgba(15,5,5,.96)); box-shadow: inset 0 0 0 1rem rgba(237,64,44,.24); }
.game-card:hover::before,
.game-card:focus-visible::before { opacity: 1; }
.game-card:focus-visible { box-shadow: inset 0 0 0 2rem rgba(237,64,44,.58); }

.card-index { color: rgba(255,255,255,.28); font-family: var(--font-accent); font-size: 10rem; font-weight: 800; letter-spacing: .1em; }
.game-reputation { justify-self: center; min-width: 34rem; padding: 5rem 7rem; border: 1rem solid rgba(255,255,255,.1); border-radius: 999rem; color: #b9aaa6; background: rgba(5,2,2,.82); font-size: 10rem; font-weight: 950; text-align: center; }
.game-reputation.is-positive { border-color: rgba(75,200,127,.28); color: #9be5b9; }
.game-reputation.is-negative { border-color: rgba(240,75,52,.3); color: #ff9c8c; }
.card-visual { width: 132rem; height: 66rem; overflow: hidden; border-radius: 7rem; background: #160a0a; }
.card-visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, filter .4s ease; }
.game-card:hover .card-visual img { transform: scale(1.055); filter: saturate(1.08) contrast(1.04); }
.card-visual .cover-fallback { display: grid; width: 100%; height: 100%; place-items: center; padding: 8rem; }
.card-visual .cover-fallback img { object-fit: contain; opacity: .55; }
.card-bottom { min-width: 0; }
.card-title,
.featured .card-title { margin: 0; overflow: hidden; font-size: 15rem; line-height: 1.15; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.card-summary,
.featured .card-summary { display: -webkit-box; max-width: 680rem; margin: 6rem 0 0; overflow: hidden; color: #9f9591; font-size: 10rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-top { justify-self: start; }
.release-badge { display: inline-flex; padding: 5rem 7rem; border: 1rem solid rgba(255,110,89,.18); border-radius: 5rem; color: #ff6e59; background: rgba(226,59,40,.06); font-size: 8rem; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.release-badge.soon { border-color: rgba(245,161,45,.18); color: #f5a12d; background: rgba(245,161,45,.05); }
.release-badge.released { border-color: rgba(86,233,148,.18); color: #56e994; background: rgba(86,233,148,.05); }
.release-badge.unknown { border-color: rgba(157,150,159,.16); color: #9d969f; background: rgba(157,150,159,.04); }
.card-chips { display: grid; gap: 5rem; align-content: center; }
.date-chip,
.coop-badge { display: flex; align-items: center; gap: 7rem; color: #c2b8b4; font-size: 9rem; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.chip-label { color: rgba(255,255,255,.34); font-size: 7rem; letter-spacing: .12em; text-transform: uppercase; }
.coop-badge { color: #a99f9b; }
.coop-badge::before { color: #d55949; content: '●'; font-size: 6rem; }
.card-actions { justify-self: end; }
.card-open-hint { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12rem; color: #bdb3af; font-size: 9rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transition: color .2s ease; }
.card-open-hint b { display: grid; width: 30rem; height: 30rem; place-items: center; border: 1rem solid rgba(255,255,255,.1); border-radius: 50%; color: #fff; font-size: 13rem; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.game-card:hover .card-open-hint { color: #fff; }
.game-card:hover .card-open-hint b { transform: rotate(8deg); border-color: rgba(237,64,44,.5); background: rgba(226,59,40,.16); }
.steam-button { display: none; }
.message { border-radius: 16rem; background: rgba(13,5,5,.72); }

@media (max-width: 1080px) {
  #catalog .catalog-toolbar { grid-template-columns: 1fr; }
  #catalog .catalog-toolbar.is-compact { gap: 8rem; padding: 12rem 14rem; border-radius: 16rem 16rem 16rem 5rem; }
  #catalog .catalog-toolbar.is-compact .toolbar-title { max-height: 32rem; }
  #catalog .catalog-toolbar.is-compact .catalog-eyebrow,#catalog .catalog-toolbar.is-compact .toolbar-title p { max-height: 0; margin: 0; opacity: 0; }
  #catalog .catalog-toolbar.is-compact .toolbar-title h2 { font-size: 25rem; white-space: nowrap; }
  #catalog .catalog-toolbar.is-compact .controls { padding: 8rem; }
  .game-card, .game-card.featured { grid-template-columns: 38rem 118rem minmax(160rem,1fr) 104rem 140rem 34rem; gap: 12rem; }
  .card-index { display: none; }
  .card-visual { width: 118rem; height: 62rem; }
  .card-open-hint > span { display: none; }
}
@media (max-width: 820px) {
  #catalog .catalog-toolbar { grid-template-columns: 1fr; }
  .controls { justify-items: stretch; }
  #catalog .search { width: 100%; }
  .filters { justify-content: flex-start; }
  .game-card, .game-card.featured { grid-template-columns: 38rem 104rem minmax(0,1fr) 32rem; min-height: 82rem; padding: 8rem; }
  .card-index, .card-chips { display: none; }
  .game-reputation { grid-column: 1; grid-row: 1 / span 2; }
  .card-visual { grid-column: 2; grid-row: 1 / span 2; width: 104rem; height: 64rem; }
  .card-bottom { grid-column: 3; grid-row: 1 / span 2; padding-top: 15rem; }
  .card-top { position: absolute; top: 8rem; left: 164rem; }
  .release-badge { padding: 2rem 0; border: 0; background: transparent !important; }
  .card-actions { grid-column: 4; grid-row: 1 / span 2; }
}
@media (max-width: 720px) {
  .catalog-section { padding-top: 22rem; }
  #catalog .catalog-toolbar { top: 76rem; gap: 20rem; padding: 20rem 16rem; border-radius: 18rem 18rem 18rem 6rem; }
  #catalog .catalog-toolbar::after { opacity: .5; }
  .catalog-eyebrow { margin-bottom: 9rem; }
  .controls { padding: 10rem; }
  .filters { display: flex; width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2rem; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex: 0 0 auto; }
  .catalog-sort { grid-template-columns: auto minmax(0,1fr); justify-content: stretch; }
  .catalog-stream { gap: 36rem; }
  .group-head { align-items: flex-start; }
  .group-head p { display: none; }
  .section-grid { border-radius: 11rem; }
  .game-card, .game-card.featured { grid-template-columns: 34rem 88rem minmax(0,1fr) 28rem; gap: 8rem; min-height: 76rem; }
  .card-visual { width: 88rem; height: 58rem; }
  .card-top { left: 146rem; }
  .card-title, .featured .card-title { font-size: 13rem; }
  .card-summary, .featured .card-summary { margin-top: 4rem; font-size: 9rem; -webkit-line-clamp: 1; }
  .card-open-hint b { width: 28rem; height: 28rem; }
}

/* A fixed sentinel controls compact mode without measuring the resizing toolbar. */
.catalog-compact-sentinel { display: block; width: 1rem; height: 1rem; pointer-events: none; }
#catalog .catalog-toolbar { overflow-anchor: none; will-change: padding,grid-template-columns; }
@media (min-width: 1081px) { #catalog .catalog-toolbar.is-compact .filters { grid-template-columns: repeat(8,minmax(0,1fr)); } }