/* /games and /games/<slug>, -16. Built from the home page's parts (the home page is the template, user 2026-10-12): the shared page hero
   (site-apex.css), the home Trending band and its Latest guides section header (home/trending.css), the home feature cards
   (home/features.css) and the home #01 card. The directory tiles are the Trending tile's class_recon_card frame at its own shape.
   Kit pieces from before stay for the controls: panel-15/16 genre chips (also used by home/genres.css), hud-14/15 switches,
   hud-12/13 fields and the nav-13 breadcrumb. */

/* The grunge page texture is the shared body.ax::before. */
.axg-page { padding-bottom: 8px; }
.axg-sec { padding-block: 24px; }
.axg-page > .axg-sec:first-child { padding-top: 32px; }
/* The Trending band sizes itself against its section (home: #trending). */
.axg-most { container-type: inline-size; }

/* Directory: the home Trending tile in a 4-column grid (user, 2026-10-12: "ENLARGE THEM", "almost match the trending games
   window sizes"), synced with the /scripts cards (-d0). The grid breaks out of the column like the Trending band (halfway to
   min(1560px, 100vw - 32px), centred; filters and search stay in the column). Tiles are as tall as the Trending tiles at the same
   width (home/trending.css --axtr-h fits, measured against the section), and never shorter than the old column / N / 1.4.
   N columns (4 / 3 at <=1100 / 2 at <=900 / 1 at <=480); neighbours share their slanted edge with a 6px seam, as Trending's
   do with 2px, so each grid column is one tile less its slant run and the tile hangs into the next column by --run.
   Frame: class_recon_card (236x211, baked text painted out), at one source px --u = the smaller of the height fit (h / 211) and
   the width fit ((w - 0.289 h) / 195). A tile narrower than the asset's shape stretches its plain middle row (100) vertically by
   --m, sheared along the 0.289 slant (Trending's method); a wider one stretches its plain middle columns (140-160: top border,
   art window, the info plate's divider and floor) sideways by --x. Slanted edges, the corner bracket and the chevron keep their
   size either way. .axg-card-ext and -cap rebuild the truncated top-right corner as in home/trending.css. */
@property --axg-h { syntax: "<length>"; inherits: true; initial-value: 0px; }
.axg-all { container-type: inline-size; }
.axg-grid { --n: 4; --g: 6px; --bw: calc((100cqw + min(1560px, 100vw - 32px)) / 2); --axg-t: calc(.4035 * (100cqw - 48px) / 4 + 204.7px);
  --axg-h: max(var(--axg-t), (100cqw - (var(--n) - 1) * 6px) / var(--n) / 1.4); --run: calc(.289 * var(--axg-h));
  display: grid; grid-template-columns: repeat(var(--n), calc((var(--bw) - var(--run) - (var(--n) - 1) * var(--g)) / var(--n))); gap: 6px var(--g);
  width: var(--bw); margin-left: calc((100cqw - var(--bw)) / 2); }
.axg-card { position: relative; container-type: size; display: block; width: calc(100% + var(--run)); height: var(--axg-h); color: #fff; }
.axg-card[hidden] { display: none; }
.axg-card > * { --u: min(100cqh / 211, (100cqw - .289 * 100cqh) / 195); --m: calc(100cqh - 211 * var(--u)); --s: calc(.289 * var(--m)); --x: calc(100cqw - .289 * 100cqh - 195 * var(--u)); }
.axg-card-fx { position: absolute; inset: 0; }
.axg-card-fx i { position: absolute; width: calc(236 * var(--u) + var(--x)); }
.axg-card-fx .axg-card-ext { left: calc(var(--s) + 228 * var(--u) + var(--x)); top: calc(10 * var(--u)); width: calc(22.5 * var(--u)); height: calc(9 * var(--u)); border-image: url("kit/home/trending/class_recon_card.webp?v=2") 10 16 192 219 fill / 0; }
.axg-card-fx .axg-card-cap { left: calc(var(--s) + 224 * var(--u) + var(--x)); top: calc(10 * var(--u)); width: calc(12 * var(--u)); height: calc(91 * var(--u) + 1px); border-image: url("kit/home/trending/class_recon_card.webp?v=2") 101 0 109 224 fill / 0; transform: skewX(-16.12deg); transform-origin: 0 100%; }
.axg-card-top, .axg-card-mid, .axg-card-bot { border: solid transparent; border-width: 0 calc(76 * var(--u)) 0 calc(140 * var(--u)); }
.axg-card-top { left: var(--s); top: 0; height: calc(100 * var(--u)); border-image: url("kit/home/trending/class_recon_card.webp?v=2") 0 76 111 140 fill / 0 calc(76 * var(--u)) 0 calc(140 * var(--u)) / 0 stretch; }
.axg-card-mid { left: var(--s); top: calc(100 * var(--u) - 1px); height: calc(var(--m) + 2px); border-image: url("kit/home/trending/class_recon_card.webp?v=2") 100 76 110 140 fill / 0 calc(76 * var(--u)) 0 calc(140 * var(--u)) / 0 stretch; transform: skewX(-16.12deg); transform-origin: 0 0; }
.axg-card-bot { left: 0; bottom: 0; height: calc(111 * var(--u)); border-image: url("kit/home/trending/class_recon_card.webp?v=2") 100 76 0 140 fill / 0 calc(76 * var(--u)) 0 calc(140 * var(--u)) / 0 stretch; }
/* The art window (source 37..249 x 18..149 plus both stretches) clips on its wrapper, so the picture can turn inside it on hover. */
.axg-card-art { position: absolute; left: calc(37 * var(--u)); top: calc(18 * var(--u)); width: calc(212 * var(--u) + var(--s) + var(--x)); height: calc(131 * var(--u) + var(--m)); overflow: hidden; clip-path: polygon(calc(37 * var(--u) + var(--s)) 0, 100% 0, calc(100% - 38 * var(--u) - var(--s)) 100%, 0 100%); }
.axg-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale var(--ax-art-t), rotate var(--ax-art-t); }
.axg-card-info { position: absolute; left: calc(44 * var(--u)); bottom: calc(7 * var(--u)); width: calc(130 * var(--u) + var(--x)); height: calc(51 * var(--u)); display: grid; align-content: center; gap: calc(4 * var(--u)); }
.axg-card-info strong { display: -webkit-box; overflow: hidden; color: #fff; font: 700 max(12px, calc(15 * var(--u)))/1.1 var(--ax-font-title); letter-spacing: 0; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.axg-card-info small { overflow: hidden; color: #cfcfd2; font: 700 max(10px, calc(11 * var(--u)))/1 var(--ax-font); letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
/* Status marks sit on the art window's top edge, inside its slant. */
.axg-marks { position: absolute; z-index: 1; top: calc(24 * var(--u)); left: calc(78 * var(--u) + var(--s)); right: calc(14 * var(--u)); display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; pointer-events: none; }
.axg-marks .mark-online { width: auto; height: max(14px, calc(18 * var(--u))); max-width: 54%; object-fit: contain; }
.axg-marks .mark-hot { width: auto; height: max(14px, calc(18 * var(--u))); max-width: 42%; margin-left: auto; object-fit: contain; }
.axg-marks .mark-offline { padding: 4px 7px; background: rgba(10, 10, 12, .88); color: #d6d6da; font: 700 11px/1 var(--ax-font); letter-spacing: .04em; text-transform: uppercase; }
/* Shared hover (site-apex.css vars): the tile lights up along its frame (a drop-shadow of its painted pixels), lifts and grows over its
   neighbours, and the tiles either side of it in the row shift away. scale and translate compose with the lift and the reveal. */
.axg-card { transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease), scale .2s var(--ease), translate .25s var(--ease)); }
.axg-card:hover, .axg-card:focus-visible { z-index: 1; filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); transform: var(--ax-hover-lift); }
.axg-card:hover, .axg-card:focus-visible { scale: var(--ax-hover-scale, 1.06); }
.axg-card:is(:hover, :focus-visible) .axg-card-art img { scale: var(--ax-art-zoom); rotate: var(--ax-art-turn); }
.axg-card:is(:hover, :focus-visible) + .axg-card:not(.reveal-wait) { translate: var(--ax-hover-push, 14px) 0; }
.axg-card:not(.reveal-wait):has(+ .axg-card:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push, 14px)) 0; }
.axg-empty { padding: 40px 0; color: #a9a9ae; font: 500 16px/1.6 var(--ax-body); text-align: center; }
.axg-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
.axg-foot small { color: #8b8b90; font: 700 13px/1 var(--ax-font); letter-spacing: .04em; text-transform: uppercase; }
.axg-foot .ax-btn[hidden] { display: none; }

/* Filters: genres on the panel-16 slanted bar (panel-15 when active), Online and Hot as the hud-14/15 switches.
   home/genres.css builds its genre strip on these chips. */
.axg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-bottom: 14px; }
.axg-genre { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px; border: solid transparent; border-width: 0 29px; border-image: url("kit/panel-16.webp?v=2") 0 36 fill / 0 29px stretch; background: none; color: #d0d0d4; font: 700 18px/1 var(--ax-font); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .2s, transform .2s; }
.axg-genre img { width: 28px; height: 28px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
/* Genre icons zoom and turn inside their own square on hover (--ax-art-*). */
.axg-filters > .axg-genre .axg-genre-icon { display: block; flex: none; width: 28px; height: 28px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.axg-filters > .axg-genre .axg-genre-icon img { display: block; box-shadow: none; transition: scale var(--ax-art-t), rotate var(--ax-art-t); }
.axg-genre b { color: #8b8b90; font-weight: 700; font-size: 16px; }
.axg-genre:hover { color: #fff; }
.axg-genre.is-active { border-image-source: url("kit/panel-15.webp?v=2"); color: #fff; }
.axg-genre.is-active b { color: #d0d0d4; }
.axg-switch { display: inline-flex; align-items: center; gap: 12px; height: 52px; margin-left: 8px; padding: 0; border: 0; background: none; color: #d0d0d4; font: 700 18px/1 var(--ax-font); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: color .2s; }
.axg-switch i { width: 62px; height: 31px; background: url("kit/hud-15.webp") center / contain no-repeat; }
.axg-switch:hover, .axg-switch.is-active { color: #fff; }
.axg-switch.is-active i { background-image: url("kit/hud-14.webp"); }
/* The directory's chips take the shared hover like the home genre strip: glow along the bar, lift, grow, and the chips either side
   shift away (only the direct neighbours, since the row wraps). */
.axg-filters > .axg-genre, .axg-filters > .axg-switch { position: relative; transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease), scale .2s var(--ease), translate .25s var(--ease)), color .2s; }
.axg-filters > :is(.axg-genre, .axg-switch):is(:hover, :focus-visible) { z-index: 1; color: #fff; filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); transform: var(--ax-hover-lift); }
.axg-filters > :is(.axg-genre, .axg-switch):is(:hover, :focus-visible) { scale: var(--ax-hover-scale, 1.04); }
.axg-filters > :is(.axg-genre, .axg-switch):is(:hover, :focus-visible) + * { translate: var(--ax-hover-push, 6px) 0; }
.axg-filters > :has(+ :is(.axg-genre, .axg-switch):is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push, 6px)) 0; }
/* No white box on the filters (user): the global :focus-visible outline (site-polish.css) and the mobile tap flash drew a rectangle
   round the chip art. A click or tap shows only the chip art and its active state; keyboard focus keeps the red glow above. */
.axg-filters > :is(.axg-genre, .axg-switch) { -webkit-tap-highlight-color: transparent; }
.axg-filters > :is(.axg-genre, .axg-switch):is(:focus, :focus-visible) { outline: none; }

/* Search on the hud-13 field, the shared red button, then the sort (the shared dropdown kit, site-apex.css).
   hud-13 has a slash near its left end: the left slice keeps it in the cap, so the stretched middle stays clean behind the text. */
.axg-search { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; }
/* A button beside a field shows the field's art height (user): hud-13's art is rows 3-57 of 60 (52.2px of the 58px field), nav-06's
   is rows 7-70 of 76, so the button is 63px tall (52.2px of art); both centre on the row, within 0.4px. The width stays the shared one. */
.axg-search .ax-btn, .axg-get-row .ax-btn { height: 63px; }
.axg-field, .axg-code { height: 58px; border: solid transparent; border-width: 0 35px 0 102px; border-image: url("kit/hud-13.webp") 0 40 0 118 fill / 0 35px 0 102px stretch; }
.axg-field { position: relative; display: flex; flex: 0 1 520px; align-items: center; min-width: 0; }
.axg-field svg { position: absolute; left: -72px; width: 17px; height: 17px; color: #a9a9ae; }
.axg-field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: #fff; font: 700 18px/1 var(--ax-font); }
.axg-field input::placeholder { color: #7d7d83; }
.axg-field:focus-within { filter: brightness(1.25); }
.axg-field { transition: var(--ax-hover-t); }
.axg-field:is(:hover, :focus-within) { z-index: 1; filter: var(--ax-hover-fx); transform: var(--ax-hover-lift); scale: var(--ax-hover-scale); }
.axg-sort { flex: none; }

/* Game page: the nav-13 breadcrumb above the shared page hero.
   nav-13 is drawn with text placeholders, so it is shown in three parts: the home cap, a clean stretch of its bar, and the red end. */
.axg-crumbs { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; margin-top: 18px; margin-bottom: 10px; padding: 0 116px 0 112px; background: url("kit/nav-13.webp") 82.85% 0 / 272.08% 100% no-repeat; color: #d0d0d4; font: 700 16px/1 var(--ax-font); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.axg-crumbs::before, .axg-crumbs::after { content: ""; position: absolute; top: 0; bottom: 0; background: url("kit/nav-13.webp") 0 0 / auto 100% no-repeat; pointer-events: none; }
.axg-crumbs::before { left: 0; width: 111px; }
.axg-crumbs::after { right: 0; width: 109px; background-position: 100% 0; }
.axg-crumbs-home { position: absolute; z-index: 1; left: 50px; top: 8px; width: 36px; height: 36px; }
.axg-crumbs a:not(.axg-crumbs-home) { display: inline-block; transition: color .2s, var(--ax-hover-t); }
.axg-crumbs a:not(.axg-crumbs-home):is(:hover, :focus-visible) { color: #fff; filter: var(--ax-hover-fx); transform: var(--ax-hover-lift); scale: var(--ax-hover-scale); }
.axg-crumbs svg { width: 12px; height: 12px; color: #8b8b90; stroke-width: 2.4; }
.axg-crumbs span { min-width: 0; overflow: hidden; color: #fff; text-overflow: ellipsis; }

/* Game hero: the shared page hero, a little taller for the lede and both buttons; long names step down. */
/* Game names keep the sizes they had on the old clamp(250px, 23vw, 330px) panel, so long names still fit beside the card. */
.axg-hero h1 { font-size: max(32px, calc(100 * clamp(250px, 23vw, 330px) / 564)); overflow-wrap: anywhere; }
.axg-hero.is-long h1 { font-size: max(26px, calc(72 * clamp(250px, 23vw, 330px) / 564)); }
.axg-hero .ax-page-hero-lede { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* Loader on the hud-13 field across the column, so the whole line shows, with the shared buttons under it. */
.axg-get-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.axg-code { display: flex; flex: 1 1 100%; align-items: center; min-width: 0; overflow: hidden; color: #e4e4e7; font: 500 16px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: nowrap; }
:is(.axg-search, .axg-get-row) > .ax-btn:is(:hover, :focus-visible) + .ax-btn { translate: var(--ax-hover-push) 0; }
:is(.axg-search, .axg-get-row) > .ax-btn:has(+ .ax-btn:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push)) 0; }
.axg-field:is(:hover, :focus-within) + .ax-btn { translate: var(--ax-hover-push) 0; }
.axg-field:has(+ .ax-btn:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push)) 0; }
.axg-search > .ax-btn:is(:hover, :focus-visible) + .axg-sort { translate: var(--ax-hover-push) 0; }
.axg-search > .ax-btn:has(+ .axg-sort:is(:hover, :focus-within)) { translate: calc(-1 * var(--ax-hover-push)) 0; }
.axg-filters > .axg-genre:is(:hover, :focus-visible) .axg-genre-icon img { scale: var(--ax-art-zoom); rotate: var(--ax-art-turn); }

/* Feature cards are the home ones (home/features.css). */
.axg-feats { padding-block: 8px 24px; }
.axg-note { padding: 6px 0 40px; color: #8b8b90; font: 500 13px/1.6 var(--ax-body); }
/* Genre pages: the chips are links (the current genre active). */
a.axg-genre { text-decoration: none; -webkit-tap-highlight-color: transparent; }
a.axg-genre:is(:focus, :focus-visible) { outline: none; }
/* Card-mark legend under the /games filters: the same mark art as the cards, each with its meaning. */
.axg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin: 4px 0 18px; color: #a9a9ae; font: 600 15px/1.2 var(--ax-body); }
.axg-legend > span { display: inline-flex; align-items: center; gap: 10px; }
.axg-legend .mark-online, .axg-legend .mark-hot { width: auto; height: 20px; }
.axg-legend .mark-offline { padding: 4px 7px; background: rgba(10, 10, 12, .88); color: #d6d6da; font: 700 11px/1 var(--ax-font); letter-spacing: .04em; text-transform: uppercase; }
/* Game page status row under the loader: the staff script switch as Working or Updating. */
.axg-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 16px 0 0; color: #b4b4b9; font: 500 16px/1.4 var(--ax-body); }
.axg-status span { color: #8b8b90; font: 700 14px/1 var(--ax-font); letter-spacing: .04em; text-transform: uppercase; }
.axg-status b { padding: 6px 12px; border: 1px solid #5a5a60; color: #d6d6da; font: 700 15px/1 var(--ax-font); letter-spacing: .04em; text-transform: uppercase; }
.axg-status.is-on b { border-color: var(--ax-red); color: #fff; box-shadow: 0 0 12px rgba(236, 20, 34, .45); }
/* Game page FAQ: the home section header over the shared disclosures (site-apex.css). */
.axg-faq-list { display: grid; gap: 10px; }

@media (max-width: 1100px) {
  .axg-grid { --n: 3; }
}
@media (max-width: 900px) {
  .axg-grid { --n: 2; --axg-t: calc(.75 * (100cqw - 16px) / 2 + 98px); }
}
@media (max-width: 480px) {
  .axg-grid { --n: 1; }
}
@media (max-width: 760px) {
  .axg-grid { --axg-t: calc(.632 * (100cqw - 10px) / 2 + 119px); }
  .axg-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 6px; }
  .axg-filters::-webkit-scrollbar { display: none; }
  .axg-genre, .axg-switch { flex: none; }
  .axg-field { flex: 1 1 100%; }
  .axg-sort { flex: 1 1 0; }
  .axg-crumbs { height: 40px; padding: 0 90px 0 86px; font-size: 15px; }
  .axg-crumbs::before { width: 86px; }
  .axg-crumbs::after { width: 84px; }
  .axg-crumbs-home { left: 38px; top: 6px; width: 28px; height: 28px; }
  .axg-crumbs span, .axg-crumbs a + svg + a + svg { display: none; }
  .axg-hero h1 { font-size: clamp(20px, 6.4vw, 30px); }
  .axg-hero.is-long h1 { font-size: clamp(16px, 4.8vw, 24px); }
  /* The loader wraps inside the field on phones (the field stretches down), so the whole line still shows. */
  .axg-code { height: auto; min-height: 58px; padding-block: 10px; border-width: 0 24px 0 70px; border-image-width: 0 24px 0 70px; font-size: 13px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
  .axg-hero .ax-page-hero-lede { display: block; }
}