/* Crawlable paging under a server-rendered list page; the shell removes it. */
.vai-games-ssr__pager { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; color: var(--vai-mkt-ink-2); }
.vai-games-ssr__pager a { color: var(--vai-mkt-accent, #16a34a); text-decoration: none; }

/* Server-rendered stand-in for the player on a game with no usable address:
   the cover, whole, in the player's own box. */
.vai-vgs-poster__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---- Game page: everything under the player (partials/game-details) ---- */
.vgd { display: grid; gap: 26px; margin-top: 18px; }
.vgd__h { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--vai-mkt-ink); letter-spacing: -.005em; }
.vgd__p { margin: 0; max-width: 70ch; font-size: 13.5px; line-height: 1.65; color: var(--vai-mkt-ink-2); }
.vgd__p + .vgd__p { margin-top: 10px; }

.vgd-flow { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--vai-mkt-border); border-radius: 12px; background: var(--vai-mkt-surface-2); }
.vgd-flow__goal { justify-self: center; text-align: center; padding: 8px 16px; border-radius: 10px; border: 1px solid #22c55e; background: color-mix(in srgb, #22c55e 12%, transparent); font-weight: 600; font-size: 13.5px; color: var(--vai-mkt-ink); max-width: 100%; }
.vgd-flow__goal span, .vgd-flow__end span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #16a34a; margin-bottom: 2px; }
.vgd-flow__loop { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; justify-content: center; }
.vgd-flow__step { flex: 1 1 120px; max-width: 190px; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--vai-mkt-surface); border: 1.5px solid var(--vgd-c, #60a5fa); }
.vgd-flow__step b { font-size: 13px; color: var(--vai-mkt-ink); }
.vgd-flow__step small { font-size: 11.5px; line-height: 1.4; color: var(--vai-mkt-muted); }
.vgd-flow__step--0 { --vgd-c: #a78bfa; } .vgd-flow__step--1 { --vgd-c: #60a5fa; } .vgd-flow__step--2 { --vgd-c: #f59e0b; }
.vgd-flow__step--3 { --vgd-c: #22c55e; } .vgd-flow__step--4 { --vgd-c: #f472b6; }
.vgd-flow__arrow { align-self: center; color: var(--vai-mkt-muted); font-size: 16px; }
.vgd-flow__back { justify-self: center; display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--vai-mkt-muted); border-top: 1.5px dashed var(--vai-mkt-border-2); padding-top: 8px; }
.vgd-flow__back span { font-size: 15px; }
.vgd-flow__ends { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.vgd-flow__end { flex: 1 1 200px; max-width: 320px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; color: var(--vai-mkt-ink); }
.vgd-flow__end--win { background: color-mix(in srgb, #22c55e 10%, transparent); border: 1px solid color-mix(in srgb, #22c55e 45%, transparent); }
.vgd-flow__end--lose { background: color-mix(in srgb, #f43f5e 10%, transparent); border: 1px dashed color-mix(in srgb, #f43f5e 60%, transparent); }
.vgd-flow__end--lose span { color: #e11d48; }
@media (max-width: 560px) {
    .vgd-flow__loop { flex-direction: column; align-items: stretch; }
    .vgd-flow__step { max-width: none; }
    .vgd-flow__arrow { transform: rotate(90deg); }
}

.vgd-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vgd-keys li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13px; color: var(--vai-mkt-ink-2); }
.vgd-keys__k { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.vgd kbd { font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--vai-mkt-ink); background: var(--vai-mkt-surface-3); border: 1px solid var(--vai-mkt-border-2); border-bottom-width: 2px; border-radius: 5px; padding: 4px 6px; }
.vgd-tips { margin: 0; padding-left: 18px; display: grid; gap: 6px; max-width: 70ch; font-size: 13.5px; line-height: 1.55; color: var(--vai-mkt-ink-2); }

.vgd-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border: 1px solid var(--vai-mkt-border); border-radius: 12px; overflow: hidden; }
/* Hairlines from each cell's own edges, so a short last row ends clean
   instead of showing the grid's fill through the empty tracks. */
.vgd-facts div { padding: 10px 12px; box-shadow: 1px 0 0 var(--vai-mkt-border), 0 1px 0 var(--vai-mkt-border); }
.vgd-facts dt { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vai-mkt-muted); }
.vgd-facts dd { margin: 3px 0 0; font-size: 13px; font-weight: 600; color: var(--vai-mkt-ink); font-variant-numeric: tabular-nums; }

.vgd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vgd-tags a { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--vai-mkt-border); color: var(--vai-mkt-ink-2); text-decoration: none; }
.vgd-tags a:hover { border-color: var(--vai-mkt-accent); color: var(--vai-mkt-ink); }

.vgd-faq { border-top: 1px solid var(--vai-mkt-border); padding: 10px 0; }
.vgd-faq:last-child { border-bottom: 1px solid var(--vai-mkt-border); }
.vgd-faq summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--vai-mkt-ink); }
.vgd-faq p { margin: 6px 0 0; font-size: 13px; color: var(--vai-mkt-ink-2); max-width: 70ch; }

.vgd-similar { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.vgd-similar__card { flex: 0 0 150px; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; border: 1px solid var(--vai-mkt-border); background: var(--vai-mkt-surface); text-decoration: none; }
.vgd-similar__card:hover { border-color: var(--vai-mkt-border-2); }
.vgd-similar__th { aspect-ratio: 4 / 3; background: var(--vai-mkt-surface-3); }
.vgd-similar__th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vgd-similar__card b { font-size: 12.5px; color: var(--vai-mkt-ink); padding: 7px 9px 1px; line-height: 1.3; }
.vgd-similar__card small { font-size: 11.5px; color: var(--vai-mkt-muted); padding: 0 9px 8px; }
.vai-mkt-d__fs {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px;
    background: rgba(9, 9, 11, .72); color: #fff;
    cursor: pointer;
}
.vai-mkt-d__fs svg { width: 16px; height: 16px; }
.vai-mkt-d__fs:hover { background: rgba(9, 9, 11, .9); }

/* ── Catalog tile ────────────────────────────────────────────────────
   Art on top, the game's name under it. The tile used to be artwork only
   with the name revealed on hover, which made 40,242 games read as one
   undifferentiated wall: nothing on the page said what anything was until
   you pointed at it.

   The blurred fill behind the cover stays, and for the same reason as
   before: covers arrive in two shapes -- 18,181 are 512x384 and 1,307 are
   16:9 -- so one tile aspect has to letterbox one of them, and cropping is
   destructive here because the game's name is painted into the artwork
   ("CUBES 2048.io" lost its ".io"). Contain keeps every pixel; the blur
   keeps the tile from going letterbox.

   The caption is one line, so no title can make a tile taller than its
   neighbours. OFF in list view, which exists to show the words in full. */
.vai-mkt__grid:not(.is-list-view) .vai-mkt-card--game {
    border: 0;
    background: transparent;
    overflow: visible;
}
.vai-mkt__grid:not(.is-list-view) .vai-mkt-card--game .vai-mkt-card__media {
    position: relative;
    /* 16:9, the shape the shelves above use and the one game covers are cut
       for — a grid in a different aspect read as a different page. */
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.vai-mkt__grid:not(.is-list-view) .vai-mkt-card--game .vai-mkt-card__media::before {
    content: "";
    position: absolute; inset: 0;
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    background: rgba(0, 0, 0, .28);
}
.vai-mkt__grid:not(.is-list-view) .vai-mkt-card--game .vai-mkt-card__img {
    position: relative; z-index: 1;
    object-fit: contain;
}
.vai-mkt__grid:not(.is-list-view) .vai-mkt-card--game .vai-mkt-card__body {
    padding: 8px 2px 0;
    gap: 2px;
}
.vai-mkt__grid:not(.is-list-view) .vai-mkt-card--game .vai-mkt-card__title {
    font-size: 13px;
    -webkit-line-clamp: 1;
}
/* The view counter was never how anyone picked a game; the category is
   said once, quietly, under the name. */
.vai-mkt__grid:not(.is-list-view) .vai-mkt-card--game .vai-mkt-card__meta { display: none; }
.vai-mkt__grid:not(.is-list-view) .vai-mkt-card--game .vai-mkt-card__pill {
    background: transparent;
    padding: 0;
    font-size: 11px;
    font-weight: 500;
}
.vai-mkt__grid:not(.is-list-view) .vai-mkt-card--game:hover { transform: none; box-shadow: none; }
.vai-mkt__grid:not(.is-list-view) .vai-mkt-card--game:hover .vai-mkt-card__media {
    box-shadow: 0 10px 24px -12px rgba(0,0,0,.55);
}
.vai-mkt__grid:not(.is-list-view) .vai-mkt-card--game .vai-mkt-card__play { z-index: 3; }

/* Two lists inside the dialog — order and category. A native select, not
   a popup of our own: a menu opened inside a dialog has to escape its own
   panel, and the browser's already does that correctly on every platform,
   phones included. */
.vai-vgs-select {
    width: 100%;
    height: 38px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--vai-mkt-border);
    border-radius: 10px;
    background-color: var(--vai-mkt-surface);
    color: var(--vai-mkt-ink);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    /* The chevron the shell's own controls carry, inlined so the select
       keeps its arrow after appearance:none takes the native one away. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 14px 14px;
}
.vai-vgs-select:focus { outline: 2px solid var(--vai-mkt-brand); outline-offset: 1px; }

/* ── Shelves ─────────────────────────────────────────────────────────
   The hub's landing surface. A catalog this size is not one list, it is a
   dozen small ones, and a flat feed made every game look equally likely.
   Each shelf is one tag, most populated first, scrolled sideways; "See all"
   hands the tag to the same filter the chips use. Shelves are the hub's
   only: search, a tag or a re-sort replaces them with the plain grid. */
.vai-mkt[data-market="games"] .vai-mkt__panel {
    border: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 4px;
}
.vai-vgs-shelf { margin-bottom: 8px; }
/* The heading is the link. "See all" parked in the far corner left a metre
   of empty bar between a section's name and the way into it; the name is
   already the thing you would click. */
.vai-vgs-shelf__head {
    display: flex; align-items: center; gap: 10px;
    margin: 34px 0 14px;
}
.vai-vgs-shelf__title {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
    font-size: 22px; font-weight: 700; letter-spacing: -.3px;
    color: var(--vai-mkt-ink);
    font-family: var(--vai-vgs-display);
}
.vai-vgs-shelf__title svg { width: 17px; height: 17px; opacity: .5; transition: transform .15s ease, opacity .15s ease; }
.vai-vgs-shelf__title:hover svg { opacity: 1; transform: translateX(2px); }
.vai-vgs-shelf__count { font-size: 12.5px; font-weight: 500; color: var(--vai-mkt-muted); }
.vai-vgs-shelf__nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.vai-vgs-shelf__arrow {
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--vai-mkt-border); border-radius: 50%;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink);
    cursor: pointer;
}
.vai-vgs-shelf__arrow:hover:not(:disabled) { border-color: var(--vai-mkt-border-2); }
.vai-vgs-shelf__arrow:disabled { opacity: .3; cursor: default; }
.vai-vgs-shelf__arrow svg { width: 15px; height: 15px; }
/* Arrows are a desktop affordance; a touch screen just swipes. */
@media (hover: none) { .vai-vgs-shelf__arrow { display: none; } }

/* A grid, not a flex row: every tile is a column of the same track, so a
   shelf lines up with the shelf above it and the row always ends on a
   whole tile instead of slicing one down the middle. */
.vai-vgs-shelf__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 18px) / 4);
    gap: 18px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Room for the lift on hover, which a clipped track would cut off. */
    padding-bottom: 4px;
}
.vai-vgs-shelf__track::-webkit-scrollbar { display: none; }
@media (max-width: 1080px) { .vai-vgs-shelf__track { grid-auto-columns: calc((100% - 2 * 18px) / 3); } }
@media (max-width: 760px)  { .vai-vgs-shelf__track { grid-auto-columns: 72%; gap: 12px; } }

.vai-vgs-tile {
    scroll-snap-align: start;
    border: 0; padding: 0; background: transparent;
    text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0;
}
.vai-vgs-tile__art {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--vai-mkt-surface-3);
    background-size: cover;
    background-position: center;
}
.vai-vgs-tile__art::before {
    content: "";
    position: absolute; inset: 0;
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    background: rgba(0, 0, 0, .28);
}
.vai-vgs-tile__art img {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .25s ease;
}
.vai-vgs-tile:hover .vai-vgs-tile__art { box-shadow: 0 10px 24px -12px rgba(0,0,0,.55); }
.vai-vgs-tile:hover .vai-vgs-tile__art img { transform: scale(1.04); }
.vai-vgs-tile__name {
    margin-top: 4px;
    font-size: 15px; font-weight: 700; line-height: 1.35;
    color: var(--vai-mkt-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A white play disc over a dimmed cover, on hover — the card's one cue. */
.vai-vgs-tile__play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .18s ease; }
.vai-vgs-tile__play span { width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #0f1115; display: inline-flex; align-items: center; justify-content: center; }
.vai-vgs-tile__play svg { width: 20px; height: 20px; margin-left: 2px; }
.vai-vgs-tile:hover .vai-vgs-tile__play, .vai-vgs-tile:focus-visible .vai-vgs-tile__play { opacity: 1; }
@media (hover: none) { .vai-vgs-tile__play { display: none; } }
/* ── Store ───────────────────────────────────────────────────────────
   The hub as a game store (design 2 of the seven drawn for it): a banner
   for the most played game with the next three beside it, a Top 10 with
   big outlined ranks, the categories as coloured tiles, then shelves of
   large cards. Searching, filtering or re-sorting swaps all of it for the
   grid, as the shelves always did. */
.vai-mkt[data-market="games"] { --vai-vgs-display: 'Bricolage Grotesque', 'Inter', ui-sans-serif, system-ui, sans-serif; }
.vai-mkt[data-market="games"] .vai-mkt__topbar { border-bottom: 0; padding: 18px 28px 12px; gap: 12px; }
.vai-mkt[data-market="games"] .vai-mkt__title { font-family: var(--vai-vgs-display); font-size: 30px; font-weight: 800; letter-spacing: -.6px; }
.vai-mkt[data-market="games"] .vai-mkt__count { background: none; padding: 0; font-size: 13.5px; font-weight: 500; }
.vai-mkt[data-market="games"] .vai-mkt__search { width: min(380px, 34vw); }
.vai-mkt[data-market="games"] .vai-mkt__search-input { height: 44px; border-radius: 999px; padding-left: 38px; font-size: 14.5px; }
.vai-mkt[data-market="games"] .vai-mkt__search svg { left: 14px; }
.vai-mkt[data-market="games"] .vai-mkt__views { display: none; }
.vai-mkt[data-market="games"] .vai-mkt-fbtn { height: 44px; border-radius: 999px; padding: 0 16px; }
.vai-vgs-sortsel {
    height: 44px; padding: 0 36px 0 16px; border: 1px solid var(--vai-mkt-border); border-radius: 999px;
    background-color: var(--vai-mkt-surface); color: var(--vai-mkt-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; background-size: 14px 14px;
}
.vai-vgs-sortsel:focus { outline: 2px solid var(--vai-mkt-brand); outline-offset: 1px; }
.vai-mkt[data-market="games"] .vai-mkt__list { padding: 6px 28px 60px; }

.vai-vgs-store { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(260px, 1fr); gap: 16px; margin-bottom: 4px; }
/* Literal white and black in the banner: it sits on game art in both themes. */
.vai-vgs-banner { position: relative; isolation: isolate; min-height: 380px; border-radius: 22px; overflow: hidden; background: #0b0c10; color: #fff; }
.vai-vgs-banner__bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(30px) saturate(1.3); opacity: .55; z-index: -2; }
/* The whole cover, never cropped — names are painted into the art. */
.vai-vgs-banner__art { position: absolute; top: 0; right: 0; bottom: 0; width: 66%; z-index: -1; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.vai-vgs-banner__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vai-vgs-banner::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,9,12,.94) 0%, rgba(8,9,12,.7) 34%, rgba(8,9,12,0) 62%), linear-gradient(0deg, rgba(8,9,12,.5), transparent 40%); pointer-events: none; }
.vai-vgs-banner__in { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; padding: 32px; max-width: 470px; }
.vai-vgs-banner__eb { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fcd34d; }
.vai-vgs-banner__eb svg { width: 14px; height: 14px; }
.vai-vgs-banner__name { margin: 10px 0 8px; font-family: var(--vai-vgs-display); font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -1.2px; font-weight: 800; color: #fff; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.vai-vgs-banner__meta { margin: 0 0 20px; display: flex; gap: 8px; flex-wrap: wrap; color: rgba(255,255,255,.82); font-size: 14px; font-variant-numeric: tabular-nums; }
.vai-vgs-banner__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.vai-vgs-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.vai-vgs-btn svg { width: 15px; height: 15px; }
.vai-vgs-btn--white { background: #fff; color: #0f1115; }
.vai-vgs-btn--white:hover { background: #f1f1f1; }
.vai-vgs-btn--glass { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vai-vgs-btn--glass:hover { background: rgba(255,255,255,.24); }
.vai-vgs-banner__dots { position: absolute; right: 22px; bottom: 20px; display: flex; gap: 6px; }
.vai-vgs-banner__dots i { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.4); transition: width .2s ease; }
.vai-vgs-banner__dots i.is-on { width: 22px; background: #fff; }
.vai-vgs-next { border-radius: 22px; background: var(--vai-mkt-surface-2); border: 1px solid var(--vai-mkt-border); padding: 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vai-vgs-next__h { margin: 0 4px 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vai-mkt-muted); }
.vai-vgs-next__i { display: flex; gap: 12px; align-items: center; padding: 8px; border: 0; border-radius: 14px; background: none; text-align: left; cursor: pointer; color: var(--vai-mkt-ink); font: inherit; min-width: 0; }
.vai-vgs-next__i:hover, .vai-vgs-next__i.is-on { background: var(--vai-mkt-surface); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.vai-vgs-next__th { flex: none; width: 116px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #111 center / cover; position: relative; }
.vai-vgs-next__th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vai-vgs-next__t { min-width: 0; }
.vai-vgs-next__t b { display: block; font-size: 14.5px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vai-vgs-meta { display: block; color: var(--vai-mkt-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vai-vgs-sec { display: flex; align-items: baseline; gap: 10px; margin: 34px 0 14px; }
.vai-vgs-sec__t { margin: 0; font-family: var(--vai-vgs-display); font-size: 22px; font-weight: 700; letter-spacing: -.3px; color: var(--vai-mkt-ink); }
.vai-vgs-sec__n { color: var(--vai-mkt-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.vai-vgs-sec__all { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; color: var(--vai-mkt-ink-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.vai-vgs-sec__all:hover { color: var(--vai-mkt-brand); }
.vai-vgs-sec__all svg { width: 14px; height: 14px; }

.vai-vgs-top10 { display: grid; grid-auto-flow: column; grid-auto-columns: 262px; gap: 18px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px; }
.vai-vgs-top10::-webkit-scrollbar { display: none; }
.vai-vgs-rank { display: flex; align-items: flex-end; border: 0; padding: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--vai-mkt-ink); min-width: 0; }
.vai-vgs-rank__n { flex: none; width: 70px; margin-right: -18px; font-family: var(--vai-vgs-display); font-weight: 800; font-size: 112px; line-height: .78; letter-spacing: -6px; color: var(--vai-mkt-bg); -webkit-text-stroke: 2.5px var(--vai-mkt-border-2); }
.vai-vgs-rank__c { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.vai-vgs-rank__c .vai-vgs-tile__art { border-radius: 14px; box-shadow: 0 8px 22px -12px rgba(0,0,0,.45); }
.vai-vgs-rank__c b { display: block; margin: 9px 0 3px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vai-vgs-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vai-vgs-cat { position: relative; overflow: hidden; height: 104px; border: 0; border-radius: 18px; padding: 16px 18px; color: #fff; text-align: left; cursor: pointer; font: inherit; display: flex; flex-direction: column; justify-content: space-between; transition: transform .15s ease, filter .15s ease; }
.vai-vgs-cat:hover { transform: translateY(-2px); filter: brightness(1.06); }
.vai-vgs-cat b { font-family: var(--vai-vgs-display); font-size: 20px; letter-spacing: -.2px; }
.vai-vgs-cat .vai-vgs-cat__n { font-size: 13px; color: #fff; opacity: .88; font-variant-numeric: tabular-nums; }
.vai-vgs-cat svg { position: absolute; right: -8px; bottom: -12px; width: 92px; height: 92px; opacity: .22; }

@media (max-width: 1100px) {
    .vai-vgs-store { grid-template-columns: minmax(0, 1fr); }
    .vai-vgs-next { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
    .vai-vgs-next__h { display: none; }
    .vai-vgs-next__i { flex: 0 0 280px; }
    .vai-vgs-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    /* The dashboard's own menu button (.wix-mobnav) opens the same sidebar. */
    .vai-mkt[data-market="games"] .vai-mkt__nav { display: none !important; }
    .vai-mkt[data-market="games"] .vai-mkt__search { width: 100%; }
}
@media (max-width: 760px) {
    .vai-mkt[data-market="games"] .vai-mkt__list { padding: 6px 16px 48px; }
    .vai-mkt[data-market="games"] .vai-mkt__topbar { padding: 12px 16px 10px; }
    .vai-vgs-banner, .vai-vgs-banner__in { min-height: 320px; }
    .vai-vgs-banner__in { padding: 22px; }
    .vai-vgs-banner__art { width: 100%; -webkit-mask-image: none; mask-image: none; opacity: .55; }
    .vai-vgs-top10 { grid-auto-columns: 220px; }
    .vai-vgs-rank__n { font-size: 90px; width: 56px; }
}
@media (prefers-reduced-motion: reduce) { .vai-vgs-cat, .vai-vgs-banner__dots i { transition: none; } }

/* Placeholder tiles, so a shelf keeps its height while its games load and
   the rows below it do not jump. */
.vai-vgs-tile--ph { pointer-events: none; }
.vai-vgs-tile--ph .vai-vgs-tile__art { background: var(--vai-mkt-surface-3); }
.vai-vgs-tile--ph .vai-vgs-tile__art::before { display: none; }
.vai-vgs-tile--ph .vai-vgs-tile__name { height: 12px; border-radius: 4px; background: var(--vai-mkt-surface-3); }

.vai-mkt[data-market="games"] .vai-mkt__grid:not(.is-list-view) {
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    gap: 22px 18px;
}
.vai-mkt[data-market="games"] .vai-mkt__grid:not(.is-list-view) .vai-mkt-card--game .vai-mkt-card__media { border-radius: 16px; }
.vai-mkt[data-market="games"] .vai-mkt__grid:not(.is-list-view) .vai-mkt-card--game .vai-mkt-card__title { font-size: 15px; font-weight: 700; }
.vai-mkt[data-market="games"] .vai-mkt__grid:not(.is-list-view) .vai-mkt-card--game .vai-mkt-card__pill { font-size: 12.5px; color: var(--vai-mkt-muted); }

/* The grid under the shelves needs to say what it is, or it reads as one
   more unnamed shelf that happens to wrap. */
.vai-vgs-all {
    margin: 38px 0 14px;
    font-family: var(--vai-vgs-display);
    font-size: 22px; font-weight: 700; letter-spacing: -.3px;
    color: var(--vai-mkt-ink);
}