/* /scripts and /scripts/<slug> (templates/site/scripts.html, script.html, _scripts.html). Owner: terminal -d0. Paths are relative to static/scripts/.
   Every part is a home page part: the section header and View all chevron (kit/home/guides), the guides card shape and frame,
   the genre-bar chips (.axg-genre: kit/panel-16, panel-15 active), the footer's Cyber Eden field (kit/foot/ASSET-0012) and .ax-btn.
   Hover is the site-wide spec (--ax-hover-*): the glow sits on the art so it follows its shape; cards grow and their row-mates step aside. */

/* Section header, as Trending games / Latest guides. */
.axs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.axs-htitle { position: relative; container-type: inline-size; flex: 0 1 560px; min-width: 0; margin: 0; }
.axs-htitle img { display: block; width: 100%; height: auto; }
.axs-htitle { transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease), scale .2s var(--ease), translate .25s var(--ease)); }
.axs-htitle:hover { z-index: 1; filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); scale: 1.03; }
.axs-htitle span { position: absolute; left: calc(100cqw * 90 / 713); top: calc(100cqw * 14 / 713); color: #fff; font: 400 calc(100cqw * 40 / 713)/1 var(--ax-font-display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.axs-more { flex: none; display: flex; transition: color .2s, filter .2s, transform .2s var(--ease), scale .2s var(--ease), translate .25s var(--ease); align-items: center; gap: 8px; color: var(--ax-red-2); font: 700 16px/1 var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.axs-more img { width: auto; height: 14px; transition: transform .2s var(--ease, ease), scale var(--ax-art-t, .5s ease), rotate var(--ax-art-t, .5s ease); }
.axs-more:hover, .axs-more: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))); scale: 1.06; }
.axs-more:hover img, .axs-more:focus-visible img { transform: translateX(3px); }

/* Search and the loadstring: the footer's field (ASSET-0012: hex dot left, slashes right, plain middle stretched; --k is one
   native pixel at 74px) with the red .ax-btn beside it, as the footer's join row. */
.axs-search { display: flex; align-items: center; gap: 4px; }
.axs-field { --k: calc(74px / 138); flex: 1 1 auto; display: flex; align-items: center; min-width: 0; height: 74px; margin-top: 7px; padding: 0 calc(var(--k) * 92) 7px calc(var(--k) * 104); border: 0 solid; border-image: url("../kit/foot/ASSET-0012.webp") 0 92 0 95 fill / 0 calc(var(--k) * 92) 0 calc(var(--k) * 95) stretch; color: #b4b4bb; }
.axs-field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: #fff; font: 700 17px/1 var(--ax-font-ui); }
.axs-field input::placeholder { color: #9a9aa0; opacity: 1; }
.axs-field input::-webkit-search-cancel-button { display: none; }
.axs-field:focus-within { filter: brightness(1.2); }
.axs-field code { flex: 1; min-width: 0; overflow-x: auto; color: #fff; font: 500 15px/1.4 Consolas, "SFMono-Regular", Menlo, monospace; white-space: nowrap; scrollbar-width: none; }
.axs-field code::-webkit-scrollbar { display: none; }
/* The button's art (nav-05 rows 8-69 of 77) spans the field's visible bar (ASSET-0012 red edges, rows 22-107 of 138), top and bottom aligned. */
.axs-field { transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease), scale .2s var(--ease), translate .25s var(--ease)); }
.axs-field:hover { filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); scale: 1.02; }
.axs-search .ax-btn { --fh: 74px; --bh: calc(var(--fh) * 85 / 138 * 77 / 61); flex: none; align-self: flex-start; height: var(--bh); margin-top: calc(7px + var(--fh) * 22 / 138 - var(--bh) * 8 / 77); font-size: calc(22px * 85 / 138 * 74 / 61 * 77 / 70); }
.axs-loader-meta { display: grid; gap: 12px; margin-top: 14px; }
.axs-loader-meta > p { max-width: 720px; color: #d0d0d0; font: 500 15px/1.6 var(--ax-font-body); }
.axs-code-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.axs-code-meta p { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ax-dim); font: 700 12px/1 var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; }

/* Filter chips: the home genre bar's chips (.axg-genre). Neighbours tuck 20px under each other across the art's transparent slanted ends,
   earlier chips stacked above later ones; the row grows the hovered chip 1.04 and steps the others 6px aside. */
.axs-chips { --ax-hover-scale: 1.04; --ax-hover-push: 6px; display: flex; flex-wrap: wrap; gap: 10px 6px; margin: 22px 0 28px; padding-left: 20px; }
.axs-chips .axg-genre { position: relative; margin-left: -20px; font-family: var(--ax-font-ui); font-weight: 700; transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease), scale .2s var(--ease), translate .25s var(--ease)), color .2s; }
@supports (z-index: calc(20 - sibling-index())) { .axs-chips .axg-genre { z-index: calc(40 - sibling-index()); } }
.axs-chips .axg-genre:hover, .axs-chips .axg-genre:focus-visible { color: #fff; filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); }
/* No focus box or tap flash on a click: the chip shows its art, and keyboard focus gets the same art glow as hover. */
.axs-chips .axg-genre { -webkit-tap-highlight-color: transparent; }
.axs-chips .axg-genre:is(:focus, :focus-visible) { outline: none; }
.axs-chips .axg-genre:hover, .axs-chips .axg-genre:focus-visible { z-index: 41; scale: var(--ax-hover-scale, 1.04); }
.axs-chips .axg-genre:is(:hover, :focus-visible) img { scale: 1.08; rotate: -4deg; }
@media (hover: hover) and (min-width: 761px) {
  .axs-chips .axg-genre:is(:hover, :focus-visible) ~ .axg-genre:not(.reveal-wait) { translate: var(--ax-hover-push, 6px) 0; }
  .axs-chips .axg-genre:not(.reveal-wait):has(~ .axg-genre:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push, 6px)) 0; }
}

/* Sort and the features fold use the shared dropdown kit (site-apex.css .ax-dd / .ax-dis); only placement is set here. */
.axs-sort { flex: none; }

/* The script page's game card: the art in the home guides card's shape (news_card_blank_template), its red frame on top, title and meta under it.
   The /scripts directory and the related row use the /games tiles instead (.axg-grid/.axg-card, site-apex-games.css), so both pages match exactly. */
.axs-card { display: flex; flex-direction: column; min-width: 0; font-family: var(--ax-font-ui); transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease, ease), scale .2s var(--ease, ease), translate .25s var(--ease, ease)); }
.axs-card[hidden] { display: none; }
.axs-card:hover, .axs-card:focus-visible { z-index: 1; scale: var(--ax-hover-scale, 1.06); }
.axs-card:is(:hover, :focus-visible) .axs-thumb { filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); }
.axs-card { -webkit-tap-highlight-color: transparent; }
.axs-card:is(:focus, :focus-visible) { outline: none; }
/* The card's ends keep their slant at any width: the shape and the frame are 9-sliced (76 | plain middle | 47 of 342), the ends scaled
   to the art's height (--u = 1/196 of it), the plain middle stretched into the extra width. */
.axs-thumb { --u: calc(100cqh / 196); position: relative; display: block; aspect-ratio: 342 / 196; container-type: size; transition: var(--ax-hover-t, filter .2s); }
.axs-art { position: absolute; inset: 0; isolation: isolate; overflow: hidden; mask: url("../kit/home/guides/news_card_blank_template.webp?v=2") 0 0 / 100% 100% no-repeat; }
@supports (-webkit-mask-box-image: none) {
  .axs-art { mask: none; -webkit-mask-box-image: url("../kit/home/guides/news_card_blank_template.webp?v=2") 0 47 0 76 / 0 calc(47 * var(--u)) 0 calc(76 * var(--u)) stretch; }
}
.axs-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.axs-icon { position: absolute; left: 50%; top: 50%; height: 62%; width: auto; aspect-ratio: 1; object-fit: cover; translate: -50% -50%; }
.axs-icon.is-mark { object-fit: contain; }
/* Hover: the picture zooms and turns inside the card's shape (site-apex.css --ax-art-*); the frame, marks and text stay still. */
.axs-bg, .axs-icon, .axs-chips .axg-genre img { transition: scale var(--ax-art-t, .5s ease), rotate var(--ax-art-t, .5s ease); }
.axs-card:is(:hover, :focus-visible) :is(.axs-bg, .axs-icon) { scale: var(--ax-art-zoom, 1.1); rotate: var(--ax-art-turn, -3deg); }
.axs-more:is(:hover, :focus-visible) img { scale: var(--ax-art-zoom, 1.1); rotate: var(--ax-art-turn, -3deg); }
.axs-vote:not(:disabled):is(:hover, :focus-visible) { scale: 1.04; }
/* The Search and Copy buttons push the field beside them aside as they grow. */
.axs-search .axs-field:has(~ .ax-btn:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push, 14px)) 0; }
.axs-frame { position: absolute; inset: 0; border: 0 solid; border-image: url("../kit/home/guides/news_card_blank_template_frame.webp?v=2") 0 47 0 76 / 0 calc(47 * var(--u)) 0 calc(76 * var(--u)) stretch; pointer-events: none; }
.axs-body { display: grid; gap: 6px; padding: 12px 2px 0; }
.axs-title { display: -webkit-box; margin: 0; overflow: hidden; color: #fff; font: 700 18px/1.2 var(--ax-font-title); letter-spacing: 0; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.axs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; color: #8f8f97; font: 700 13px/1 var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; }
.axs-meta > * + *::before { content: "\00b7"; margin: 0 7px; color: #6a6a72; }
.axs-empty { padding: 30px 0; color: var(--ax-muted); font: 500 16px var(--ax-font-body); text-align: center; }
/* Inline marks 12% larger, centred and without moving the line (as the feature cards, home/features.css). */
.axs-empty .inline-wordmark { height: calc(max(2em, 36px) * 1.12); margin-block: calc(max(2em, 36px) * -.06); vertical-align: calc(-.62em - max(2em, 36px) * .06); }
.axs-empty .inline-discord { height: calc(max(1.6em, 34px) * 1.12); margin-block: calc(max(1.6em, 34px) * -.06); vertical-align: calc(-.48em - max(1.6em, 34px) * .06); }
.axs-foot { display: grid; justify-items: center; gap: 12px; margin-top: 26px; }
.axs-foot [hidden] { display: none; }
.axs-foot small { color: var(--ax-dim); font: 700 13px/16px var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; }

/* Script page: crumbs and the facts on genre-bar chips beside the game card. */
.axs-intro { display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: center; gap: 20px 40px; }
.axs-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: var(--ax-dim); font: 700 14px/1.2 var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; }
.axs-crumbs a { display: inline-block; color: #c9c9cc; transition: color .2s, filter .2s, transform .2s var(--ease), scale .2s var(--ease), translate .25s var(--ease); }
.axs-crumbs a:hover, .axs-crumbs a:focus-visible { color: #fff; filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); scale: 1.08; }
.axs-crumbs [aria-current] { color: #fff; }
.axs-facts { display: flex; flex-wrap: wrap; gap: 10px 6px; margin: 0; padding-left: 20px; }
.axs-fact { position: relative; display: grid; align-content: center; gap: 5px; min-width: 120px; height: 52px; margin-left: -20px; padding: 0 8px 0 18px; border: solid transparent; border-width: 0 29px; border-image: url("../kit/panel-16.webp?v=2") 0 36 fill / 0 29px stretch; }
@supports (z-index: calc(20 - sibling-index())) { .axs-fact { z-index: calc(20 - sibling-index()); } }
.axs-fact, .axs-tags li { transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease), scale .2s var(--ease), translate .25s var(--ease)); }
.axs-fact:hover, .axs-tags li:hover { z-index: 21; filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); scale: 1.04; }
@media (hover: hover) {
  .axs-fact:hover ~ .axs-fact:not(.reveal-wait), .axs-tags li:hover ~ li { translate: 6px 0; }
  .axs-fact:not(.reveal-wait):has(~ .axs-fact:hover), .axs-tags li:has(~ li:hover) { translate: -6px 0; }
}
.axs-fact dt { color: #8f8f97; font: 700 11px/1 var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; }
.axs-fact dd { margin: 0; color: #fff; font: 400 17px/1 var(--ax-font-display); letter-spacing: .03em; white-space: nowrap; }
.axs-card.is-game .axs-title { font-size: 21px; }
.axs-feats { padding-block: 22px; }

/* Tags and the vote button: the same chip art, smaller (34px tall). */
.axs-tags { display: flex; flex-wrap: wrap; gap: 6px 2px; margin: 0; padding: 0 0 0 12px; list-style: none; }
.axs-tags li, .axs-vote { display: inline-flex; align-items: center; gap: 8px; height: 34px; margin-left: -12px; padding: 0 4px; border: solid transparent; border-width: 0 19px; border-image: url("../kit/panel-16.webp?v=2") 0 36 fill / 0 19px stretch; background: none; color: #d8d8dc; font: 700 12px/1 var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; }
.axs-vote { margin-left: 0; cursor: pointer; font-weight: 700; transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease), scale .2s var(--ease), translate .25s var(--ease)), color .2s; }
.axs-vote b { color: #fff; }
.axs-vote:not(:disabled):hover, .axs-vote:not(:disabled):focus-visible { color: #fff; filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); }
.axs-vote { -webkit-tap-highlight-color: transparent; }
.axs-vote:is(:focus, :focus-visible) { outline: none; }
.axs-vote:disabled { cursor: not-allowed; opacity: .7; }

/* Script tiles (the /games tiles, site-apex-games.css): Online and Hot sit side by side in the art's top-left corner, as the user asked,
   and zoom and turn with the art on hover. */
.axs-tiles .axg-marks { justify-content: flex-start; gap: 14px; }
.axs-tiles .axg-marks .mark-hot { margin-left: 0; }
.axs-tiles .axg-marks img { transition: scale var(--ax-art-t, .5s ease), rotate var(--ax-art-t, .5s ease); }
.axs-tiles .axg-card:is(:hover, :focus-visible) .axg-marks img { scale: var(--ax-art-zoom, 1.1); rotate: var(--ax-art-turn, -3deg); }
.axs-featsec .axs-chips { margin: 0 0 16px; }
.axs-more-feats { margin-top: 16px; }
.axs-more-feats .axs-featlist { margin-top: 0; }
/* The related row keeps to one full row of three at three columns. */
@media (min-width: 901px) and (max-width: 1100px) {
  .axg-grid.is-row > .axg-card:nth-child(n + 4) { display: none; }
}
@media (max-width: 1100px) {
  .axs-intro { grid-template-columns: 1fr; }
  .axs-intro .axs-card { max-width: 460px; }
}
/* Phone: the field and the button stack, the chips scroll sideways in one row like the home genre bar's. */
@media (max-width: 760px) {
  .axs-search { flex-wrap: wrap; }
  .axs-field { flex-basis: 100%; }
  .axs-search .ax-btn { margin-top: 0; }
  .axs-field input { font-size: 16px; }
  .axs-field code { font-size: 13px; }
  .axs-chips { flex-wrap: nowrap; margin: 16px 0 20px; padding-left: 16px; overflow: auto hidden; scrollbar-width: none; }
  .axs-chips::-webkit-scrollbar { display: none; }
  .axs-chips .axg-genre { flex: none; gap: 7px; height: 40px; margin-left: -16px; padding: 0 4px; border-width: 0 23px; border-image-width: 0 23px; font-size: 15px; }
  .axs-chips .axg-genre img { width: 22px; height: 22px; }
  .axs-chips .axg-genre b { font-size: 13px; }
  .axs-head { flex-wrap: wrap; gap: 10px; }
  .axs-htitle { flex-basis: 100%; }
  .axs-head .axs-sort, .axs-head .axs-more { margin-left: auto; }
  .axs-meta { font-size: 12px; }
  .axs-intro .axs-card { max-width: none; }
}