body.s7-framework.s7-surface-catalog .l-main > .l-section {
padding-top: var(--s7-header-height) !important;
padding-inline: 0 !important;
}
body.s7-framework.s7-surface-catalog .l-main > .l-section > .l-section-h {
padding-top: 0 !important;
}
body.s7-framework.s7-surface-catalog .s7-catalog {
box-sizing: border-box;
display: grid;
gap: 18px;
margin-inline: auto;
max-width: none;
padding: 18px 0 var(--s7-space-12);
width: min(calc(100% - 2 * var(--s7-container-gutter)), var(--s7-container-max));
}
body.s7-framework.s7-surface-catalog .s7-catalog *,
body.s7-framework.s7-surface-catalog .s7-catalog *::before,
body.s7-framework.s7-surface-catalog .s7-catalog *::after { box-sizing: border-box; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-visually-hidden {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
body.s7-framework.s7-surface-catalog .s7-catalog :is(h1, h2, p, ul) { margin: 0; }
body.s7-framework.s7-surface-catalog .s7-catalog ul { list-style: none; padding: 0; }
body.s7-framework.s7-surface-catalog .s7-catalog :is(button, input, select) { font: inherit; }
body.s7-framework.s7-surface-catalog .s7-catalog :is(input, select) {
background: var(--s7-surface);
border: 1px solid var(--s7-border);
border-radius: var(--s7-radius-sm);
color: var(--s7-ink);
min-height: var(--s7-touch-min);
padding: 0 var(--s7-space-4);
}
body.s7-framework.s7-surface-catalog .s7-catalog input::placeholder { color: var(--s7-muted); opacity: 1; }
body.s7-framework.s7-surface-catalog .s7-catalog button {
background: var(--s7-surface-muted);
border: 1px solid var(--s7-border);
border-radius: var(--s7-radius-sm);
color: var(--s7-heading);
cursor: pointer;
min-height: var(--s7-touch-min);
padding: 0 var(--s7-space-4);
transition: background-color var(--s7-motion-fast) var(--s7-ease-out), border-color var(--s7-motion-fast) var(--s7-ease-out), color var(--s7-motion-fast) var(--s7-ease-out), transform 140ms var(--s7-ease-out);
}
body.s7-framework.s7-surface-catalog .s7-catalog :is(a, button, input, select):focus-visible {
outline: 3px solid var(--s7-focus);
outline-offset: 3px;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead {
background: linear-gradient(77deg, color-mix(in srgb, var(--s7-download-secondary) 72%, var(--s7-surface-elevated)) 0%, color-mix(in srgb, var(--s7-accent) 34%, var(--s7-surface-elevated)) 50%, color-mix(in srgb, var(--s7-surface-elevated) 76%, var(--s7-accent)) 100%);
border: 1px solid var(--s7-border);
border-radius: var(--s7-radius-lg);
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
isolation: isolate;
min-height: 172px;
overflow: hidden;
padding: clamp(24px, 3vw, 38px);
position: relative;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead::after {
background: linear-gradient(90deg, color-mix(in srgb, var(--s7-download-secondary) 48%, var(--s7-surface-elevated)) 0%, color-mix(in srgb, var(--s7-surface-elevated) 42%, transparent) 48%, transparent 72%);
content: "";
inset: 0;
position: absolute;
pointer-events: none;
z-index: 1;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-covers {
position: absolute;
inset: -54px -42px -54px 49%;
display: grid;
grid-template-columns: repeat(4, minmax(110px, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
overflow: hidden;
transform: rotate(-3deg) skewX(-9deg);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover {
min-width: 0;
overflow: hidden;
background: var(--s7-surface-muted);
border: 1px solid color-mix(in srgb, var(--s7-border) 64%, transparent);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover:nth-child(3n+1) { grid-row: span 2; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover img {
display: block;
height: 100%;
object-fit: cover;
object-position: center;
transform: skewX(9deg) scale(1.18);
width: 100%;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-copy { align-content: center; display: grid; gap: 8px; isolation: isolate; max-width: 600px; position:relative; width: 100%; z-index:2; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead h1 {
color: var(--s7-heading);
font-family: var(--s7-font-display);
font-size: clamp(1.85rem, 3vw, 2.55rem);
font-weight: 760;
letter-spacing: -.03em;
line-height: 1.05;
text-wrap: balance;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead p { color: var(--s7-ink); font-size: .94rem; line-height: 1.5; max-width: 48ch; text-wrap: pretty; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cta {
display:inline-flex;
width:max-content;
min-height:42px;
align-items:center;
gap:10px;
margin-top:5px;
padding:0 15px;
border:1px solid color-mix(in srgb,var(--s7-accent) 58%,var(--s7-border));
border-radius:10px;
background:color-mix(in srgb,var(--s7-surface-elevated) 70%,transparent);
color:var(--s7-heading);
font-weight:720;
text-decoration:none;
-webkit-backdrop-filter:blur(10px) saturate(1.15);
backdrop-filter:blur(10px) saturate(1.15);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__controls {
display:grid;
grid-template-columns:minmax(280px,1fr) auto;
align-items:center;
gap:10px;
padding:9px 10px;
border:1px solid var(--s7-border);
border-radius:var(--s7-radius-md);
background:var(--s7-surface-elevated);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__search {
background: var(--s7-surface-muted);
border: 1px solid var(--s7-border);
border-radius: var(--s7-radius-sm);
display: grid;
gap: 6px;
grid-template-columns: auto minmax(0, 1fr);
padding: 8px 10px;
width: 100%;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__search-icon { align-items: center; color: var(--s7-muted); display: inline-flex; justify-content: center; padding-left: var(--s7-space-2); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__search input { background: transparent; border: 0; min-width: 0; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres {
display: grid;
gap: var(--s7-space-4);
min-width: 0;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__header { align-items: center; display: flex; justify-content: space-between; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__header h2 { color: var(--s7-heading); font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 800; letter-spacing: -.015em; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__stage { position:relative; min-width:0; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow {
position:absolute;
top:50%;
z-index:3;
display:grid;
width:48px;
min-width:48px;
height:64px;
min-height:64px;
place-items:center;
padding:0;
border-color:color-mix(in srgb,var(--s7-border) 72%,transparent);
background:color-mix(in srgb,var(--s7-surface-elevated) 88%,transparent);
box-shadow:var(--s7-shadow-ambient);
opacity:0;
pointer-events:none;
transform:translateY(-50%);
transition:opacity 160ms var(--s7-ease-out),background-color 160ms var(--s7-ease-out),border-color 160ms var(--s7-ease-out);
-webkit-backdrop-filter:blur(12px) saturate(1.15);
backdrop-filter:blur(12px) saturate(1.15);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow--previous{left:8px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow--next{right:8px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres:is(:hover,:focus-within) .s7-catalog-genres__arrow:not([hidden]){opacity:1;pointer-events:auto}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow:disabled{opacity:.28!important;cursor:default;pointer-events:none}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__track {
display: grid;
gap: var(--s7-space-4);
grid-auto-columns: calc((100% - (var(--s7-space-4) * 3)) / 4);
grid-auto-flow: column;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding: 2px;
scroll-padding-inline: 3px;
scroll-snap-type: inline mandatory;
scrollbar-width: none;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__track::-webkit-scrollbar { display: none; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card { min-width: 0; scroll-snap-align: start; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card > a {
aspect-ratio: 16 / 9;
border: 1px solid transparent;
border-radius: var(--s7-radius-sm);
color: var(--s7-ink);
display: block;
overflow: hidden;
position: relative;
text-decoration: none;
transform: translateZ(0);
transition: border-color 180ms var(--s7-ease-out);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card__media,
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card__collage { inset: 0; overflow: hidden; position: absolute; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card__media::after{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,color-mix(in srgb,var(--s7-download-secondary) 18%,transparent),color-mix(in srgb,var(--s7-accent) 14%,transparent));content:"";pointer-events:none}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card__collage { transition: transform 260ms var(--s7-ease-out); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card__art {
display: block;
height: 100%;
inset: 0;
object-fit: cover;
position: absolute;
transform: none;
width: 100%;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card__art--base { filter: saturate(.9) contrast(1.05); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card__label {
align-items: center;
background: var(--s7-surface);
border-radius: 7px;
box-shadow: var(--s7-shadow-lift);
color: var(--s7-ink);
display: flex;
font-size: .84rem;
font-weight: 850;
gap: var(--s7-space-2);
inset: 50% auto auto 50%;
letter-spacing: .055em;
line-height: 1;
max-width: calc(100% - 24px);
padding: 11px 14px;
position: absolute;
text-align: center;
text-transform: uppercase;
transform: translate(-50%, -50%);
transition: transform 200ms var(--s7-ease-out);
white-space: nowrap;
z-index: 2;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination { display: flex; gap: 6px; justify-content: center; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination button {
background: transparent;
border: 0;
border-radius: 999px;
flex: 0 1 42px;
height: var(--s7-touch-min);
min-height: var(--s7-touch-min);
min-width: 14px;
padding: 0;
position: relative;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination button::before { background: color-mix(in srgb, var(--s7-border) 72%, transparent); border-radius: inherit; content: ""; height: 4px; inset: 50% 0 auto; position: absolute; transform: translateY(-50%); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination button[aria-current="true"] { flex-basis: 64px; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination button[aria-current="true"]::before { background: var(--s7-accent); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__toolbar {
align-items: center;
background: transparent;
border: 0;
border-radius: 0;
display: flex;
gap: var(--s7-space-2);
min-height: var(--s7-touch-min);
padding: 0;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__filter-open { align-items: center; display: none; gap: var(--s7-space-2); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__genre-filter { align-items: center; display: flex; gap: var(--s7-space-2); min-width: 0; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__genre-filter label { color: var(--s7-muted); font-size: var(--s7-label-size); font-weight: 700; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__genre-filter select { min-width: min(26vw, 250px); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__genre-filter button { color: var(--s7-muted); }
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-enhanced="true"] .s7-catalog__genre-apply { display: none; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__genre-reset { color: var(--s7-muted); }
body.s7-framework.s7-surface-catalog .s7-catalog [hidden] { display: none !important; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__sort { align-items: center; display: flex; gap: var(--s7-space-2); margin-inline-start: auto; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__sort label { color: var(--s7-muted); font-size: var(--s7-label-size); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__sort button { display: none; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__view { align-items: center; background: var(--s7-surface); border: 1px solid var(--s7-border); border-radius: var(--s7-radius-sm); display: inline-flex; padding: 3px; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__view a {
align-items: center;
border-radius: 8px;
color: var(--s7-muted);
display: inline-flex;
font-size: .85rem;
font-weight: 700;
justify-content: center;
min-height: 36px;
min-width: 40px;
padding-inline: 10px;
text-decoration: none;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__view a[aria-pressed="true"] { background: var(--s7-accent); color: var(--s7-accent-ink); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__layout {
display: grid;
min-width: 0;
}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"][data-s7-catalog-enhanced="true"] .s7-catalog__layout {
align-items: start;
gap: clamp(14px, 1.4vw, 20px);
grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__results { min-width: 0; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__status:empty,
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__state:empty { display: none; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__status,
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__state { color: var(--s7-muted); margin-bottom: var(--s7-space-4); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items {
display: grid;
gap: clamp(12px, 1.2vw, 18px);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card {
align-content: start;
background: var(--s7-surface-elevated);
border: 1px solid var(--s7-border);
border-radius: var(--s7-radius-sm);
box-shadow: none;
display: grid;
grid-template-rows: auto;
min-width: 0;
overflow: hidden;
position: relative;
transform: translateZ(0);
transition: background-color 180ms var(--s7-ease-out), border-color 180ms var(--s7-ease-out);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__link { color: var(--s7-heading); display: grid; height: 100%; text-decoration: none; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__media {
aspect-ratio: 460 / 215;
background: var(--s7-surface-muted);
display: block;
overflow: hidden;
position: relative;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__media :is(.s7-game-card__image, .s7-game-card__image-fallback) {
background: radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--s7-accent) 34%, transparent), transparent 42%), linear-gradient(145deg, color-mix(in srgb, var(--s7-surface-elevated) 76%, var(--s7-accent) 24%), var(--s7-surface-muted));
display: block;
height: 100%;
object-fit: cover;
transform: scale(1.001);
transition: opacity 160ms var(--s7-ease-out), transform 260ms var(--s7-ease-out);
width: 100%;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__image-fallback { position: relative; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__image-fallback::before {
position: absolute;
inset: 0;
background: url(//se7en.ws/?lang=en/wp-content/uploads/2026/02/se7en-logo.svg) center / min(34%, 82px) auto no-repeat;
content: "";
opacity: .42;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__video {
height: 100%;
inset: 0;
object-fit: cover;
pointer-events: none;
position: absolute;
width: 100%;
z-index: 1;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__preview-data { display: none; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__content {
align-content: start;
display: grid;
gap: 8px;
min-height: 82px;
padding: 13px 14px 30px;
position:relative;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__title {
display: -webkit-box;
font-family: var(--s7-font-display);
font-size: clamp(.98rem, 1.15vw, 1.08rem);
font-weight: 720;
line-height: 1.28;
overflow: hidden;
text-wrap: pretty;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__genres {
color: var(--s7-muted);
display: none;
font-size: .78rem;
line-height: 1.3;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__genres > span:not(:last-child)::after { content: ", "; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__description {
color: var(--s7-ink);
display: -webkit-box;
font-size: .84rem;
line-height: 1.45;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) :is(.s7-game-card__genres,.s7-game-card__description,.s7-game-card__visible-tags){display:none}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__visible-tags,
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__visible-tags > span,
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__tags > span {
background: var(--s7-surface-muted);
border: 1px solid color-mix(in srgb, var(--s7-border) 72%, transparent);
border-radius: 999px;
color: var(--s7-muted);
font-size: .68rem;
line-height: 1;
max-width: 100%;
overflow: hidden;
padding: 5px 7px;
text-overflow: ellipsis;
white-space: nowrap;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__release {
align-items: baseline;
color: var(--s7-muted);
display: flex;
flex-wrap: wrap;
font-size: .76rem;
gap: 4px;
line-height: 1.35;
margin-top: auto;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) .s7-game-card__release{
display:none;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__release-label { color: var(--s7-ink); font-weight: 650; }
body.s7-framework.s7-surface-catalog .s7-game-card-popover {
background: var(--s7-surface-elevated);
border: 1px solid var(--s7-border);
border-radius: var(--s7-radius-md);
box-shadow: var(--s7-shadow-lift);
color: var(--s7-ink);
display: grid;
gap: var(--s7-space-3);
max-height: min(420px, calc(100vh - 24px));
overflow: hidden;
padding: var(--s7-space-5);
pointer-events: none;
position: fixed;
z-index: 1002;
}
body.s7-framework.s7-surface-catalog .s7-game-card-popover__title { color: var(--s7-heading); font-family: var(--s7-font-display); font-size: 1.2rem; line-height: 1.2; }
body.s7-framework.s7-surface-catalog .s7-game-card-popover__release {
align-items:baseline;
color: var(--s7-muted);
display:flex;
flex-wrap:wrap;
font-size: .82rem;
font-weight:400;
gap:4px;
}
body.s7-framework.s7-surface-catalog .s7-game-card-popover__release-label{color:var(--s7-ink);font-weight:600}
body.s7-framework.s7-surface-catalog .s7-game-card-popover__release-value{font-weight:400}
body.s7-framework.s7-surface-catalog .s7-game-card-popover__summary {
display: -webkit-box;
font-size: .9rem;
line-height: 1.45;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
body.s7-framework.s7-surface-catalog .s7-game-card-popover__tags { display: flex; flex-wrap: wrap; gap: 5px; }
body.s7-framework.s7-surface-catalog .s7-game-card-popover__tags > span {
background: var(--s7-surface-muted);
border: 1px solid var(--s7-border);
border-radius: 999px;
color: var(--s7-muted);
font-size: .68rem;
line-height: 1;
max-width: 100%;
overflow: hidden;
padding: 5px 7px;
text-overflow: ellipsis;
white-space: nowrap;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items.s7-catalog__items--list { grid-template-columns: minmax(0, 1fr); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__link {
grid-template-columns: clamp(150px, 24%, 190px) minmax(0, 1fr);
min-height: 88px;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__media { aspect-ratio: auto; height: 100%; min-height: 88px; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__content {
align-content: center;
gap: 4px;
min-height: 0;
padding: 10px 14px;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__title {
display: block;
font-size: 1rem;
font-weight: 680;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__genres { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list :is(.s7-game-card__description, .s7-game-card__visible-tags) { display: none; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__release { margin-top: 0; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__release{position:static;opacity:1;pointer-events:auto}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card[data-s7-catalog-preview-active="true"] {
background: var(--s7-accent-soft);
border-color: color-mix(in srgb, var(--s7-accent) 52%, var(--s7-border));
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card:has(.s7-game-card__link:focus-visible) { outline: 3px solid var(--s7-focus); outline-offset: 3px; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview {
background: var(--s7-surface-elevated);
border: 1px solid var(--s7-border);
border-radius: var(--s7-radius-md);
color: var(--s7-ink);
display: grid;
gap: 12px;
max-height: calc(100dvh - var(--s7-header-height) - 32px);
overflow: auto;
padding: 14px;
position: sticky;
scrollbar-color: var(--s7-border) transparent;
scrollbar-width: thin;
top: calc(var(--s7-header-height) + 16px);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__header { display: grid; gap: 4px; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__header strong { color: var(--s7-heading); font-family: var(--s7-font-display); font-size: 1.12rem; line-height: 1.25; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__header time { color: var(--s7-muted); font-size: .78rem; line-height: 1.35; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__summary { color: var(--s7-ink); display: -webkit-box; font-size: .86rem; line-height: 1.5; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__media {
aspect-ratio: 16 / 9;
background: var(--s7-surface-muted);
border-radius: var(--s7-radius-sm);
overflow: hidden;
position: relative;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__media :is(img, video) { display: block; height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__media video { z-index: 1; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__screenshots { display: grid; gap: 8px; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__screenshots h2 { color: var(--s7-heading); font-size: .88rem; font-weight: 700; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__screenshots > div { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__screenshots img { aspect-ratio: 16 / 9; border-radius: 8px; display: block; object-fit: cover; width: 100%; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__more { display: flex; gap: var(--s7-space-3); justify-content: center; margin-top: var(--s7-space-8); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__more button {
background: var(--s7-surface-elevated);
border-color: var(--s7-border);
border-radius: var(--s7-radius-sm);
color: var(--s7-heading);
font-weight: 720;
min-height: 48px;
min-width: min(100%, 220px);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__fallback-nav { display: flex; gap: var(--s7-space-4); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-filter { background: transparent; border: 0; color: var(--s7-ink); max-width: 32rem; padding: 0; width: calc(100% - 2rem); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-filter::backdrop { background: var(--s7-backdrop); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-filter__surface { background: var(--s7-surface-elevated); border: 1px solid var(--s7-border); border-radius: var(--s7-radius-md); display: grid; gap: var(--s7-space-4); padding: var(--s7-space-6); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-filter__surface header,
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-filter__actions { align-items: center; display: flex; gap: var(--s7-space-3); justify-content: space-between; }
@media (hover: hover) and (pointer: fine) {
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card > a:hover { border-color: color-mix(in srgb, var(--s7-accent) 62%, transparent); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card > a:hover .s7-genre-card__collage { transform: scale(1.055); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card > a:hover .s7-genre-card__label { transform: translate(-50%, calc(-50% + 12px)); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow:hover{background:var(--s7-surface-elevated);border-color:color-mix(in srgb,var(--s7-accent) 52%,var(--s7-border));color:var(--s7-accent)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) .s7-game-card:hover { border-color: color-mix(in srgb, var(--s7-accent) 72%, var(--s7-border)); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) .s7-game-card:hover .s7-game-card__image { transform: scale(1.035); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card:hover { background: var(--s7-accent-soft); border-color: color-mix(in srgb, var(--s7-accent) 52%, var(--s7-border)); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__more button:hover { background: var(--s7-accent-soft); border-color: color-mix(in srgb, var(--s7-accent) 62%, var(--s7-border)); color: var(--s7-accent); }
body.s7-framework.s7-surface-catalog .s7-catalog button:hover { color: var(--s7-heading); }
}
body.s7-framework.s7-surface-catalog .s7-catalog button:active { transform: scale(.98); }
@media (max-width: 1440px) {
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__track { grid-auto-columns: calc((100% - (var(--s7-space-4) * 2)) / 3); }
}
@media (max-width: 1023px) {
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead { grid-template-columns:minmax(0,1fr) minmax(300px,.7fr); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-covers{inset-inline-start:55%}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"][data-s7-catalog-enhanced="true"] .s7-catalog__layout { grid-template-columns: minmax(0, 1fr) minmax(290px, 330px); }
}
@media (max-width: 899px) {
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__controls{grid-template-columns:minmax(0,1fr)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__toolbar{width:100%}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"][data-s7-catalog-enhanced="true"] .s7-catalog__layout { grid-template-columns: minmax(0, 1fr); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview { display: none; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__filter-open { display: inline-flex; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__genre-filter { display: none; }
}
@media (max-width: 767px) {
body.s7-framework.s7-surface-catalog .s7-catalog { width:calc(100% - 32px);gap: var(--s7-space-6); padding: var(--s7-space-6) 0 var(--s7-space-8); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead { grid-template-columns:minmax(0,1fr);min-height: 188px; padding: 18px; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead::after{background:linear-gradient(90deg,var(--s7-surface-elevated) 0%,color-mix(in srgb,var(--s7-surface-elevated) 92%,var(--s7-accent)) 58%,color-mix(in srgb,var(--s7-surface-elevated) 54%,transparent) 84%,transparent)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-copy { align-content: center; max-width: 78%; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-covers{inset:-38px -96px -38px 48%;grid-template-columns:repeat(3,minmax(92px,1fr));opacity:.78}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead h1 { font-size: clamp(1.65rem, 8vw, 2.1rem); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead p { font-size: .82rem; line-height: 1.4; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__search { grid-template-columns: auto minmax(0, 1fr); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow { display: none; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__track { grid-auto-columns: min(78vw, 320px); }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__toolbar { align-items: stretch; flex-wrap: wrap; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__random { display: none; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__latest { align-self: center; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__sort { margin-inline-start: 0; order: 3; width: 100%; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__sort select { flex: 1; min-width: 0; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__view { margin-inline-start: auto; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) { grid-template-columns: 1fr; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__link { grid-template-columns: 112px minmax(0, 1fr); min-height: 86px; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__media { min-height: 86px; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__content { padding: 9px 10px; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__title { font-size: .92rem; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__release-label { display: none; }
}
@media (hover: none), (pointer: coarse) {
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
body.s7-framework.s7-surface-catalog .s7-catalog :is(button, .s7-genre-card > a, .s7-genre-card__collage, .s7-genre-card__label, .s7-game-card, .s7-game-card__image, .s7-game-card__image-fallback, .s7-game-card__release) { transition-duration: .01ms; }
body.s7-framework.s7-surface-catalog .s7-catalog :is(.s7-genre-card__collage, .s7-game-card):hover { transform: none; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card > a:hover .s7-genre-card__collage { transform: none; }
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card > a:hover .s7-genre-card__label { transform: translate(-50%, -50%); }
} body.s7-framework.s7-surface-catalog #page-header{box-shadow:none}
body.s7-framework.s7-surface-catalog .s7-catalog{padding-top:clamp(16px,1.6vw,22px)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead{
min-height:184px;
grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
padding:clamp(24px,3vw,38px);
border-color:color-mix(in srgb,var(--s7-border) 82%,var(--s7-accent));
background:
radial-gradient(circle at 45% 20%,color-mix(in srgb,var(--s7-accent) 16%,transparent),transparent 42%),
linear-gradient(106deg,color-mix(in srgb,var(--s7-surface-elevated) 82%,var(--s7-brand-purple)) 0%,color-mix(in srgb,var(--s7-surface-elevated) 82%,var(--s7-accent)) 58%,var(--s7-surface-elevated) 100%);
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--s7-download-ink-light) 12%,transparent);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead::after{
background:linear-gradient(90deg,var(--s7-surface-elevated) 0%,color-mix(in srgb,var(--s7-surface-elevated) 96%,transparent) 37%,color-mix(in srgb,var(--s7-surface-elevated) 44%,transparent) 61%,transparent 77%);
}
html[data-s7-theme-resolved="dark"] body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead,
html[data-s7-theme="dark"] body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead{
background:radial-gradient(circle at 44% 16%,color-mix(in srgb,var(--s7-accent) 14%,transparent),transparent 42%),linear-gradient(106deg,color-mix(in srgb,var(--s7-surface-elevated) 72%,var(--s7-brand-purple)) 0%,color-mix(in srgb,var(--s7-surface-elevated) 72%,var(--s7-accent)) 56%,var(--s7-surface-muted) 100%);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-covers{
inset:-72px -8% -72px 48%;
display:flex;
grid-template:none;
gap:12px;
overflow:hidden;
transform:skewX(-12deg) translateX(0);
animation:s7-catalog-covers-drift 11s ease-in-out infinite alternate;
will-change:transform;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover{
width:clamp(142px,16vw,230px);
min-width:clamp(142px,16vw,230px);
height:136%;
align-self:center;
border-color:color-mix(in srgb,var(--s7-download-ink-light) 12%,transparent);
box-shadow:var(--s7-shadow-ambient);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover img{transform:skewX(12deg) scale(1.18)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-copy{gap:9px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead h1{font-size:clamp(1.8rem,2.7vw,2.42rem);font-weight:720}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres{
gap:12px;
padding:18px 50px 12px;
border:1px solid var(--s7-border);
border-radius:var(--s7-radius-lg);
background:var(--s7-surface-elevated);
box-shadow:none;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__stage{overflow:visible}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__track{gap:12px;grid-auto-columns:calc((100% - 36px)/4);padding:1px;scroll-behavior:auto}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow{
width:38px;min-width:38px;height:66px;min-height:66px;
border:0;border-radius:12px;background:transparent;box-shadow:none;
color:var(--s7-muted);opacity:1;pointer-events:auto;
-webkit-backdrop-filter:none;backdrop-filter:none;
transition:color 180ms var(--s7-ease-out),background-color 180ms var(--s7-ease-out),opacity 180ms var(--s7-ease-out);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow--previous{left:-43px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow--next{right:-43px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres:is(:hover,:focus-within) .s7-catalog-genres__arrow:not([hidden]){opacity:1}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow:disabled{visibility:visible;opacity:.24!important}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow:active{transform:translateY(-50%)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card>a{border-color:color-mix(in srgb,var(--s7-download-ink-light) 6%,transparent);border-radius:13px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card__media::after{
background:linear-gradient(180deg,color-mix(in srgb,var(--s7-download-ink-dark) 2%,transparent) 16%,color-mix(in srgb,var(--s7-download-ink-dark) 12%,transparent) 48%,color-mix(in srgb,var(--s7-download-ink-dark) 48%,transparent) 100%);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card__label{
background:color-mix(in srgb,var(--s7-download-ink-light) 94%,transparent);border:1px solid color-mix(in srgb,var(--s7-download-ink-light) 64%,transparent);box-shadow:var(--s7-shadow-ambient);
color:var(--s7-download-ink-dark);font-size:.78rem;font-weight:780;letter-spacing:.045em;padding:10px 13px;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination{gap:7px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination button{flex:0 0 34px;height:30px;min-height:30px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination button::before{height:5px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination button[aria-current="true"]{flex-basis:46px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__controls{
grid-template-columns:minmax(250px,1fr) auto;gap:14px;padding:12px;
border-radius:16px;background:var(--s7-surface-elevated);box-shadow:none;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__search{
min-height:50px;padding:0 13px;border-color:color-mix(in srgb,var(--s7-border) 88%,transparent);border-radius:12px;background:var(--s7-surface-muted);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__search input{height:48px;min-height:48px;padding:0 6px;box-shadow:none}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__toolbar{gap:7px;flex-wrap:nowrap}
body.s7-framework.s7-surface-catalog .s7-catalog :is(.s7-catalog__genre-filter select,.s7-catalog__sort select){min-height:42px;border-radius:10px;background:var(--s7-surface-muted)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__genre-filter label,
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__sort label{font-weight:560}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__view{border-radius:11px;background:var(--s7-surface-muted)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__view a{min-width:38px;padding:0}
.s7-catalog-view-icon{display:grid;width:17px;height:17px;place-content:center;color:currentColor}
.s7-catalog-view-icon--grid{grid-template-columns:repeat(2,5px);grid-template-rows:repeat(2,5px);gap:3px}
.s7-catalog-view-icon--grid i{display:block;width:5px;height:5px;border:1.5px solid currentColor;border-radius:2px}
.s7-catalog-view-icon--list{grid-template-rows:repeat(3,2px);gap:3px}
.s7-catalog-view-icon--list i{display:block;width:17px;height:2px;border-radius:999px;background:currentColor}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__status{width:max-content;max-width:100%;margin:0 auto 10px;text-align:center}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__status:not(:empty){padding:7px 12px;border:1px solid var(--s7-border);border-radius:999px;background:var(--s7-surface-elevated);font-size:.78rem}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__state{width:100%;margin:14px auto 0;text-align:center}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) .s7-game-card{
aspect-ratio:460/215;border-radius:15px;background:var(--s7-surface-muted);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) .s7-game-card__link{position:relative;display:block;aspect-ratio:460/215;overflow:hidden;border-radius:inherit}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) .s7-game-card__media{position:absolute;inset:0;aspect-ratio:auto;border-radius:inherit}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) .s7-game-card__media::after{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 42%,color-mix(in srgb,var(--s7-download-ink-dark) 20%,transparent) 62%,color-mix(in srgb,var(--s7-download-ink-dark) 82%,transparent) 100%);content:"";pointer-events:none}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) .s7-game-card__content{position:absolute;right:0;bottom:0;left:0;z-index:3;min-height:0;padding:42px 14px 13px;background:transparent}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) .s7-game-card__title{color:var(--s7-download-ink-light);font-size:.98rem;font-weight:650;line-height:1.25;text-shadow:0 2px 11px color-mix(in srgb,var(--s7-download-ink-dark) 72%,transparent)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-game-card__media :is(.s7-game-card__image,.s7-game-card__image-fallback){border-radius:inherit}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list{gap:9px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card{min-height:108px;border-radius:12px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__link{grid-template-columns:clamp(180px,26%,210px) minmax(0,1fr);min-height:108px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__media{min-height:108px;border-radius:11px 0 0 11px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__content{gap:5px;padding:13px 15px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__title{font-size:1.04rem;font-weight:650}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__release{font-weight:400}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__release-label{color:var(--s7-muted);font-weight:500}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__release-value{font-weight:400}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview{gap:11px;padding:16px;border-radius:16px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__header strong{font-size:1.22rem;font-weight:680}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__summary{-webkit-line-clamp:6}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__screenshots>div{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
@media (hover:hover) and (pointer:fine){
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card>a:hover .s7-genre-card__collage{transform:scale(1.025)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card>a:hover .s7-genre-card__label{transform:translate(-50%,-50%)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow:not(:disabled):hover{background:var(--s7-surface-muted);color:var(--s7-accent)}
}
@keyframes s7-catalog-covers-drift{from{transform:skewX(-12deg) translateX(-10px)}to{transform:skewX(-12deg) translateX(28px)}}
@media (max-width:899px){
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__toolbar{flex-wrap:wrap}
}
@media (max-width:767px){
body.s7-framework.s7-surface-catalog .s7-catalog{padding-top:16px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead{min-height:168px;padding:18px;background:linear-gradient(110deg,var(--s7-surface-elevated),color-mix(in srgb,var(--s7-surface-elevated) 78%,var(--s7-accent)))}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-covers{inset:-42px -120px -42px 53%;opacity:.72}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres{padding:15px 14px 10px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__track{grid-auto-columns:min(78vw,310px)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__controls{grid-template-columns:1fr;padding:8px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__link{grid-template-columns:124px minmax(0,1fr);min-height:92px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__media{min-height:92px}
}
@media (prefers-reduced-motion:reduce){
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-covers{animation:none;will-change:auto}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__track{scroll-behavior:auto}
} body.s7-framework.s7-surface-catalog .s7-catalog{gap:clamp(16px,1.6vw,22px)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead{
min-height:176px;
grid-template-columns:minmax(0,1fr) minmax(440px,1.06fr);
background:
radial-gradient(circle at 44% 12%,color-mix(in srgb,var(--s7-brand-accent) 13%,transparent),transparent 44%),
linear-gradient(105deg,color-mix(in srgb,var(--s7-surface-elevated) 84%,var(--s7-brand-purple)) 0%,color-mix(in srgb,var(--s7-surface-elevated) 88%,var(--s7-brand-accent)) 55%,var(--s7-surface-elevated) 100%);
border-color:var(--s7-border);
border-radius:18px;
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--s7-download-ink-light) 11%,transparent);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead::after{
background:linear-gradient(90deg,var(--s7-surface-elevated) 0%,color-mix(in srgb,var(--s7-surface-elevated) 97%,transparent) 39%,color-mix(in srgb,var(--s7-surface-elevated) 68%,transparent) 57%,transparent 76%);
}
html:not([data-s7-theme-resolved="dark"]):not([data-s7-theme="dark"]) body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead{
background:linear-gradient(105deg,color-mix(in srgb,var(--s7-surface-elevated) 95%,var(--s7-brand-purple)) 0%,color-mix(in srgb,var(--s7-surface-elevated) 96%,var(--s7-brand-accent)) 58%,var(--s7-surface-elevated) 100%);
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--s7-download-ink-light) 54%,transparent);
}
html:not([data-s7-theme-resolved="dark"]):not([data-s7-theme="dark"]) body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead::after{
background:linear-gradient(90deg,var(--s7-surface-elevated) 0%,color-mix(in srgb,var(--s7-surface-elevated) 98%,transparent) 40%,color-mix(in srgb,var(--s7-surface-elevated) 82%,transparent) 53%,color-mix(in srgb,var(--s7-surface-elevated) 36%,transparent) 66%,transparent 80%);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-copy{max-width:560px;gap:8px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead h1{font-size:clamp(1.78rem,2.55vw,2.35rem);font-weight:700}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead p{max-width:43ch;color:var(--s7-muted)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-covers{
position:absolute;inset:-30px -32px -30px 46%;display:block;overflow:hidden;
transform:skewX(-11deg);animation:none;will-change:auto;
-webkit-mask-image:linear-gradient(90deg,transparent 0,var(--s7-download-ink-dark) 12%,var(--s7-download-ink-dark) 100%);mask-image:linear-gradient(90deg,transparent 0,var(--s7-download-ink-dark) 12%,var(--s7-download-ink-dark) 100%);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover-track{
position:absolute;top:28px;left:0;display:flex;width:max-content;height:150px;align-items:center;gap:12px;
animation:s7-catalog-cover-ribbon 58s linear infinite;will-change:transform;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover{
width:236px;min-width:236px;height:116px;align-self:auto;overflow:hidden;border:1px solid color-mix(in srgb,var(--s7-download-ink-light) 13%,transparent);border-radius:14px;background:var(--s7-surface-muted);box-shadow:var(--s7-shadow-ambient);opacity:.86;transform:none;
-webkit-mask-image:linear-gradient(90deg,transparent 0,var(--s7-download-ink-dark) 9%,var(--s7-download-ink-dark) 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,var(--s7-download-ink-dark) 9%,var(--s7-download-ink-dark) 91%,transparent 100%);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover:is(.s7-catalog__hero-cover--1,.s7-catalog__hero-cover--5,.s7-catalog__hero-cover--7){transform:none}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover:is(.s7-catalog__hero-cover--2,.s7-catalog__hero-cover--4,.s7-catalog__hero-cover--8){transform:translateY(14px)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover:is(.s7-catalog__hero-cover--3,.s7-catalog__hero-cover--6){transform:translateY(-10px)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover img{transform:skewX(11deg) scale(1.1)}
html:not([data-s7-theme-resolved="dark"]):not([data-s7-theme="dark"]) body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-covers{
-webkit-mask-image:linear-gradient(90deg,transparent 0,var(--s7-download-ink-dark) 20%,var(--s7-download-ink-dark) 88%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,var(--s7-download-ink-dark) 20%,var(--s7-download-ink-dark) 88%,transparent 100%);
}
html:not([data-s7-theme-resolved="dark"]):not([data-s7-theme="dark"]) body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover{
box-shadow:none;
-webkit-mask-image:none;
mask-image:none;
}
@keyframes s7-catalog-cover-ribbon{to{transform:translateX(calc(-50% - 6px))}}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres{
gap:9px;margin-inline:48px;padding:16px 22px 8px;border-radius:18px;background:var(--s7-surface-elevated);overflow:visible;
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__header h2{font-weight:700}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__stage{overflow:visible}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__track{gap:12px;grid-auto-columns:calc((100% - 36px)/4);padding:1px;scroll-padding-inline:1px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow{
width:40px;min-width:40px;height:64px;min-height:64px;padding:0;border:1px solid color-mix(in srgb,var(--s7-border) 58%,transparent);border-radius:12px;background:color-mix(in srgb,var(--s7-surface-elevated) 72%,transparent);box-shadow:0 8px 22px color-mix(in srgb,var(--s7-download-ink-dark) 10%,transparent);color:var(--s7-muted);opacity:0;pointer-events:none;transform:translateY(-50%);-webkit-backdrop-filter:blur(14px) saturate(1.12);backdrop-filter:blur(14px) saturate(1.12);transition:opacity 180ms var(--s7-ease-out),color 180ms var(--s7-ease-out),background-color 180ms var(--s7-ease-out),border-color 180ms var(--s7-ease-out);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow--previous{left:-70px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow--next{right:-70px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres:is(:hover,:focus-within) .s7-catalog-genres__arrow:not([hidden]):not(:disabled){opacity:1;pointer-events:auto}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow:focus-visible{opacity:1;pointer-events:auto}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow:disabled{visibility:hidden;opacity:0!important;pointer-events:none}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow:active{transform:translateY(-50%)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card>a{border-color:color-mix(in srgb,var(--s7-border) 76%,transparent);border-radius:13px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card__media::after{background:linear-gradient(180deg,transparent 24%,color-mix(in srgb,var(--s7-download-ink-dark) 8%,transparent) 46%,color-mix(in srgb,var(--s7-download-ink-dark) 70%,transparent) 100%)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card__label{
inset:auto auto 12px 50%;max-width:calc(100% - 24px);padding:8px 12px;border:1px solid color-mix(in srgb,var(--s7-download-ink-light) 58%,transparent);border-radius:8px;background:color-mix(in srgb,var(--s7-download-ink-light) 74%,transparent);box-shadow:var(--s7-shadow-ambient);color:var(--s7-download-ink-dark);font-size:.76rem;font-weight:760;line-height:1.15;letter-spacing:.04em;white-space:normal;transform:translateX(-50%);-webkit-backdrop-filter:blur(10px) saturate(1.08);backdrop-filter:blur(10px) saturate(1.08);
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination{gap:2px;margin-top:-1px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination button,
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination button[aria-current="true"]{flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination button::before{inset:50% auto auto 50%;width:7px;height:7px;background:color-mix(in srgb,var(--s7-muted) 48%,transparent);transform:translate(-50%,-50%);transition:width 180ms var(--s7-ease-out),background-color 180ms var(--s7-ease-out)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination button[aria-current="true"]::before{width:18px;background:var(--s7-brand-accent)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__controls{grid-template-columns:minmax(280px,1fr) auto;gap:12px;padding:10px;border-radius:17px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__search{min-height:50px;padding:0 13px;border:1px solid var(--s7-border);border-radius:12px;background:var(--s7-surface-muted);transition:border-color 180ms var(--s7-ease-out),box-shadow 180ms var(--s7-ease-out),background-color 180ms var(--s7-ease-out)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__search input{height:48px;min-height:48px;padding:0 7px;outline:0!important}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__search:hover{border-color:color-mix(in srgb,var(--s7-border) 56%,var(--s7-brand-accent) 44%)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__search:focus-within{border-color:var(--s7-brand-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--s7-brand-accent) 66%,transparent);background:var(--s7-surface)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__toolbar{gap:12px}
body.s7-framework.s7-surface-catalog .s7-catalog :is(.s7-catalog__genre-filter,.s7-catalog__sort){gap:8px}
.s7-catalog-view-icon--list{width:20px;height:18px;grid-template-rows:repeat(3,4px);gap:2px;overflow:visible;place-content:center}
.s7-catalog-view-icon--list i{position:relative;display:block;width:20px;height:4px;overflow:visible;background:transparent!important}
.s7-catalog-view-icon--list i::before{position:absolute;top:0;left:0;width:4px;height:4px;border-radius:50%;background:currentColor;content:""}
.s7-catalog-view-icon--list i::after{position:absolute;top:1px;right:0;width:14px;height:2px;border-radius:999px;background:currentColor;content:""}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__status{clip-path:inset(50%);position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;white-space:nowrap}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__state{min-height:0;margin:12px 0 0;text-align:center}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__state:empty{display:none}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__results{position:relative}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__skeleton{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);margin-top:14px}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-skeleton-mode="overlay"] .s7-catalog__items{visibility:hidden}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-skeleton-mode="overlay"] .s7-catalog__skeleton{position:absolute;top:0;right:0;left:0;z-index:2;max-height:100%;margin-top:0;overflow:hidden;pointer-events:none}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__skeleton-card{position:relative;display:block;aspect-ratio:460/215;padding:0;overflow:hidden;border:1px solid var(--s7-border);border-radius:15px;background:var(--s7-surface-muted)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__skeleton-card::after{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--s7-download-ink-light) 28%,transparent) 48%,transparent 66%);content:"";transform:translateX(-100%);animation:s7-catalog-shimmer 1.25s ease-in-out infinite}
@keyframes s7-catalog-shimmer{to{transform:translateX(100%)}}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list{gap:10px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card{min-height:136px;border-radius:12px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__link{grid-template-columns:clamp(220px,30%,260px) minmax(0,1fr);min-height:136px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__media{min-height:136px;border-radius:0}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__content{display:grid;grid-template-rows:auto auto auto;align-content:center;gap:7px;padding:15px 18px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__title{font-size:1.08rem;font-weight:640}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__release{font-size:.78rem;font-weight:400}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__release-label{color:var(--s7-muted);font-weight:500}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card[data-s7-catalog-preview-active="true"]{border-color:color-mix(in srgb,var(--s7-brand-accent) 48%,var(--s7-border));background:color-mix(in srgb,var(--s7-surface-elevated) 90%,var(--s7-brand-accent));box-shadow:none}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"] .s7-catalog__skeleton{grid-template-columns:1fr;gap:10px}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"] .s7-catalog__skeleton-card{height:136px;aspect-ratio:auto;padding:0}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"] .s7-catalog__skeleton-card:nth-child(n+4){display:none}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"][data-s7-catalog-enhanced="true"] .s7-catalog__layout{gap:18px;grid-template-columns:minmax(0,1fr) minmax(360px,410px)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview{grid-auto-flow:row;grid-auto-rows:max-content;align-content:start;gap:12px;padding:16px;border-radius:16px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__header strong{font-size:1.22rem;font-weight:660}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__summary{-webkit-line-clamp:8}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__media{width:100%;isolation:isolate;contain:paint}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__screenshots{position:relative}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__screenshots>div{grid-template-columns:1fr;gap:8px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview__screenshots img{border-radius:10px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview[data-s7-catalog-preview-loading="true"]{min-height:min(520px,calc(100dvh - var(--s7-header-height) - 32px));overflow:hidden}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview[data-s7-catalog-preview-loading="true"]>*{display:none}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview[data-s7-catalog-preview-loading="true"]::before{display:block;aspect-ratio:16/9;border:1px solid var(--s7-border);border-radius:12px;background:var(--s7-surface-muted);content:""}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) .s7-game-card{border:0;isolation:isolate;line-height:0}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) .s7-game-card__link{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;line-height:normal}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items:not(.s7-catalog__items--list) .s7-game-card:has(.s7-game-card__image) .s7-game-card__title{display:none}
@media (hover:hover) and (pointer:fine){
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card>a:hover .s7-genre-card__label{transform:translateX(-50%)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow:not(:disabled):hover{border-color:color-mix(in srgb,var(--s7-brand-accent) 42%,var(--s7-border));background:color-mix(in srgb,var(--s7-surface-elevated) 90%,var(--s7-brand-accent));color:var(--s7-brand-accent)}
}
@media (max-width:1023px){
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-covers{inset-inline-start:52%}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__skeleton{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px) and (max-width:1023px){
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"][data-s7-catalog-enhanced="true"] .s7-catalog__layout{grid-template-columns:minmax(0,1fr) minmax(300px,340px)}
}
@media (max-width:767px){
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead{min-height:170px;grid-template-columns:1fr;padding:19px;background:linear-gradient(110deg,var(--s7-surface-elevated),color-mix(in srgb,var(--s7-surface-elevated) 78%,var(--s7-brand-accent)))}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-copy{max-width:72%}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-covers{inset:-25px -100px -25px 48%;opacity:.7}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover-track{top:24px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres{margin-inline:0;padding:14px 13px 7px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__track{grid-auto-columns:min(72vw,300px)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__controls{grid-template-columns:1fr;gap:10px;padding:9px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__skeleton{grid-template-columns:1fr}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"][data-s7-catalog-enhanced="true"] .s7-catalog__layout{grid-template-columns:minmax(0,1fr)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__link{grid-template-columns:132px minmax(0,1fr);min-height:104px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__items--list .s7-game-card__media{min-height:104px}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"] .s7-catalog__skeleton-card{height:104px;padding:0}
}
@media (prefers-reduced-motion:reduce){
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover-track{animation:none;will-change:auto}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__skeleton-card::after{animation:none}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination button::before{transition-duration:.01ms}
} body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead{
background:
radial-gradient(circle at 52% 0,color-mix(in srgb,var(--s7-brand-accent) 32%,transparent),transparent 46%),
linear-gradient(110deg,color-mix(in srgb,var(--s7-brand-purple) 76%,var(--s7-surface-elevated)) 0%,color-mix(in srgb,var(--s7-brand-purple) 48%,var(--s7-surface-elevated)) 48%,color-mix(in srgb,var(--s7-brand-accent) 54%,var(--s7-surface-elevated)) 100%)
}
html[data-s7-theme-resolved="dark"] body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead,
html[data-s7-theme="dark"] body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead{
background:
radial-gradient(circle at 52% 0,color-mix(in srgb,var(--s7-brand-accent) 32%,transparent),transparent 46%),
linear-gradient(110deg,color-mix(in srgb,var(--s7-brand-purple) 76%,var(--s7-surface-elevated)) 0%,color-mix(in srgb,var(--s7-brand-purple) 48%,var(--s7-surface-elevated)) 48%,color-mix(in srgb,var(--s7-brand-accent) 54%,var(--s7-surface-elevated)) 100%)
}
html:not([data-s7-theme-resolved="dark"]):not([data-s7-theme="dark"]) body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead{
background:
radial-gradient(circle at 52% 0,color-mix(in srgb,var(--s7-brand-accent) 34%,transparent),transparent 48%),
linear-gradient(110deg,color-mix(in srgb,var(--s7-brand-purple) 58%,var(--s7-surface-elevated)) 0%,color-mix(in srgb,var(--s7-brand-purple) 38%,var(--s7-surface-elevated)) 48%,color-mix(in srgb,var(--s7-brand-accent) 50%,var(--s7-surface-elevated)) 100%)
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead::after{
background:linear-gradient(90deg,color-mix(in srgb,var(--s7-surface-elevated) 76%,transparent) 0%,color-mix(in srgb,var(--s7-surface-elevated) 60%,transparent) 42%,color-mix(in srgb,var(--s7-surface-elevated) 18%,transparent) 66%,transparent 80%)
}
html:not([data-s7-theme-resolved="dark"]):not([data-s7-theme="dark"]) body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__masthead::after{
background:linear-gradient(90deg,color-mix(in srgb,var(--s7-surface-elevated) 58%,transparent) 0%,color-mix(in srgb,var(--s7-surface-elevated) 42%,transparent) 42%,color-mix(in srgb,var(--s7-surface-elevated) 12%,transparent) 68%,transparent 82%)
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover-track{
top:42px;animation:s7-catalog-cover-ribbon 58s linear infinite;will-change:transform
}
@media (max-width:767px){
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover-track{top:35px}
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres{
position:relative;width:100%;margin-inline:0;padding:16px 14px 12px;border:1px solid var(--s7-border);box-shadow:none
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-genre-card>a{aspect-ratio:2/1}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow--previous{left:-34px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__arrow--next{right:-34px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres__pagination{margin:0}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres:is(:hover,:focus-within,[data-s7-catalog-rail-active="true"]) .s7-catalog-genres__arrow:not([hidden]):not(:disabled){opacity:1;pointer-events:auto}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__skeleton-card{aspect-ratio:auto;background:transparent;border:0;border-radius:15px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__skeleton-card::after{display:none}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__skeleton-media{position:relative;display:block;aspect-ratio:460/215;overflow:hidden;border:1px solid var(--s7-border);border-radius:15px;background:var(--s7-surface-muted)}
body.s7-framework.s7-surface-catalog .s7-catalog :is(.s7-catalog__skeleton-media,.s7-catalog__skeleton-line)::after{
position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--s7-download-ink-light) 28%,transparent) 48%,transparent 66%);content:"";transform:translateX(-100%);animation:s7-catalog-shimmer 1.25s ease-in-out infinite
}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__skeleton-copy{display:none}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"] .s7-catalog__skeleton-card{display:grid;height:136px;grid-template-columns:clamp(220px,30%,260px) minmax(0,1fr);overflow:hidden;border:1px solid var(--s7-border);border-radius:12px;background:var(--s7-surface-elevated)}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"] .s7-catalog__skeleton-card:nth-child(-n+4){display:grid}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"] .s7-catalog__skeleton-card:nth-child(n+5){display:none}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"] .s7-catalog__skeleton-media{height:100%;aspect-ratio:auto;border:0;border-radius:0}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"] .s7-catalog__skeleton-copy{display:grid;align-content:center;gap:11px;padding:18px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__skeleton-line{position:relative;display:block;width:82%;height:10px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--s7-muted) 22%,transparent)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__skeleton-line--title{width:58%;height:14px}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__skeleton-line--short{width:38%}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview[data-s7-catalog-preview-loading="true"]::before{position:relative;overflow:hidden}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-preview[data-s7-catalog-preview-loading="true"]::after{position:relative;display:block;height:150px;overflow:hidden;border-radius:10px;background:linear-gradient(var(--s7-surface-muted) 0 0) 0 0/58% 16px no-repeat,linear-gradient(var(--s7-surface-muted) 0 0) 0 36px/100% 10px no-repeat,linear-gradient(var(--s7-surface-muted) 0 0) 0 58px/88% 10px no-repeat,linear-gradient(var(--s7-surface-muted) 0 0) 0 80px/68% 10px no-repeat;content:""}
@media (min-width:900px) and (max-width:1199px){
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__controls{grid-template-columns:minmax(0,1fr)}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__toolbar{width:100%}
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__sort{margin-inline-start:auto}
}
@media (max-width:767px){
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog-genres{padding:14px 13px 10px}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"] .s7-catalog__skeleton-card{height:104px;grid-template-columns:132px minmax(0,1fr)}
body.s7-framework.s7-surface-catalog .s7-catalog[data-s7-catalog-view="list"] .s7-catalog__skeleton-copy{gap:8px;padding:12px}
}
@media (prefers-reduced-motion:reduce){
body.s7-framework.s7-surface-catalog .s7-catalog .s7-catalog__hero-cover-track{animation:none;will-change:auto}
body.s7-framework.s7-surface-catalog .s7-catalog :is(.s7-catalog__skeleton-media,.s7-catalog__skeleton-line)::after{animation:none}
}