/* 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. */
.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. */
.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;
}
.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;
}
.vgs-shelf { margin-bottom: 30px; }
/* 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. */
.vgs-shelf__head {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 12px;
}
.vgs-shelf__title {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
    font-size: 19px; font-weight: 800; letter-spacing: -.02em;
    color: var(--vai-mkt-ink);
    font-family: inherit;
}
.vgs-shelf__title svg { width: 17px; height: 17px; opacity: .5; transition: transform .15s ease, opacity .15s ease; }
.vgs-shelf__title:hover svg { opacity: 1; transform: translateX(2px); }
.vgs-shelf__count { font-size: 12.5px; font-weight: 500; color: var(--vai-mkt-muted); }
.vgs-shelf__nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.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;
}
.vgs-shelf__arrow:hover:not(:disabled) { border-color: var(--vai-mkt-border-2); }
.vgs-shelf__arrow:disabled { opacity: .3; cursor: default; }
.vgs-shelf__arrow svg { width: 15px; height: 15px; }
/* Arrows are a desktop affordance; a touch screen just swipes. */
@media (hover: none) { .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. */
.vgs-shelf__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 7 * 12px) / 8);
    gap: 12px;
    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;
}
.vgs-shelf__track::-webkit-scrollbar { display: none; }
@media (max-width: 1500px) { .vgs-shelf__track { grid-auto-columns: calc((100% - 6 * 12px) / 7); } }
@media (max-width: 1280px) { .vgs-shelf__track { grid-auto-columns: calc((100% - 5 * 12px) / 6); } }
@media (max-width: 1080px) { .vgs-shelf__track { grid-auto-columns: calc((100% - 4 * 12px) / 5); } }
@media (max-width: 860px)  { .vgs-shelf__track { grid-auto-columns: calc((100% - 3 * 12px) / 4); } }
@media (max-width: 640px)  { .vgs-shelf__track { grid-auto-columns: calc((100% - 2 * 10px) / 3); gap: 10px; } }

.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;
}
.vgs-tile__art {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--vai-mkt-surface-3);
    background-size: cover;
    background-position: center;
}
.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);
}
.vgs-tile__art img {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .25s ease;
}
.vgs-tile:hover .vgs-tile__art { box-shadow: 0 10px 24px -12px rgba(0,0,0,.55); }
.vgs-tile:hover .vgs-tile__art img { transform: scale(1.04); }
.vgs-tile__name {
    font-size: 12.5px; font-weight: 600; line-height: 1.35;
    color: var(--vai-mkt-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── Hero ────────────────────────────────────────────────────────────
   The page used to open on a section heading, which told a visitor what
   the shelves were before it told them what this place is. The hero is
   one game, shown at the size a recommendation deserves, on its own
   artwork blown up behind it — the shape every game catalog opens with. */
.vgs-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    padding: 22px;
    margin-bottom: 30px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--vai-mkt-surface-2);
}
/* The featured game's own cover, blown up and blurred, is the backdrop. */
.vgs-hero__bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transform: scale(1.15);
    filter: blur(26px) saturate(1.3);
    opacity: .5;
}
.vgs-hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.3) 100%);
}
.vgs-hero__art {
    position: relative; z-index: 1;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}
.vgs-hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vgs-hero__side { position: relative; z-index: 1; min-width: 0; }
/* Literal white: this sits on artwork in both themes and must not follow
   the surface underneath it. */
.vgs-hero__eyebrow {
    font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: rgba(255,255,255,.72);
    margin-bottom: 7px;
}
.vgs-hero__name {
    margin: 0 0 8px;
    font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.025em;
    line-height: 1.1; color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.vgs-hero__meta { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.vgs-hero__pill {
    padding: 3px 10px; border-radius: 999px;
    background: rgba(255,255,255,.14); color: #fff;
    font-size: 11.5px; font-weight: 600;
}
.vgs-hero__plays { font-size: 12.5px; color: rgba(255,255,255,.75); }
.vgs-hero__play {
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; border-radius: 999px; cursor: pointer;
    padding: 11px 22px;
    background: var(--vai-mkt-brand); color: #fff;
    font-size: 14px; font-weight: 700; font-family: inherit;
}
.vgs-hero__play:hover { filter: brightness(1.08); }
.vgs-hero__play svg { width: 15px; height: 15px; }
@media (max-width: 860px) {
    .vgs-hero { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
}

/* Placeholder tiles, so a shelf keeps its height while its games load and
   the rows below it do not jump. */
.vgs-tile--ph { pointer-events: none; }
.vgs-tile--ph .vgs-tile__art { background: var(--vai-mkt-surface-3); }
.vgs-tile--ph .vgs-tile__art::before { display: none; }
.vgs-tile--ph .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(178px, 1fr));
    gap: 12px 12px;
}

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