/* Home section: genres (templates/site/home/genres.html). Paths are relative to static/home/, so kit art is ../kit/... */
/* Genre strip: the user's pack bar 03_Hub_Category_Tabs/18_Wide_Status_Bar_Red_Accent as a 9-slice.
   Native slices: red cap + slashes 0-225, plain middle 225-589 (the only part that stretches), red stripes 589-779; shown at 92/107 scale. */
.ax-strip { --ax-hover-scale: 1.04; --ax-hover-push: 6px; position: relative; isolation: isolate; display: flex; align-items: center; min-width: 0; height: 92px; }
.ax-strip::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 0 solid transparent; border-image: url("../kit/home/genres/03-18_Wide_Status_Bar_Red_Accent.webp") 0 190 0 225 fill / 0 163px 0 193px stretch; }
/* Cyber Eden ASSET-0087 lens flare (reds shifted to the bar red), sitting on the bar's bottom red line (native row 90 = 77px at this scale). */
.ax-strip::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 77px; width: 219px; height: 63px; translate: -50% -50%; pointer-events: none;
  background: url("../kit/home/genres/CE-0087_Red_Lens_Flare.webp?v=2") center / 100% 100% no-repeat; }
/* The /games genre chips (.axg-genre from site-apex-games.css, same markup) on the bar's plain middle, clear of the red cap and the end stripes.
   A fixed chip count per width (extras display: none, so nothing hidden stays focusable); the wrap + clip is only a safety net if a long genre name
   would not fit, and its clip margin leaves room for the hover glow and push. kit/panel-16/15 have their faint alpha haze cleared, so the glow follows the chip shape. */
.ax-strip-list { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 60px 6px; min-width: 0; height: 52px; padding: 0 100px 0 136px; overflow: clip; overflow-clip-margin: 30px; }
/* The shown chips grow (equal share, never below their content) to fill the plain middle, so each chip art's plain middle stretches wider.
   The chip art's slanted ends carry about 20px of transparent edge between two chips, so each chip tucks 20px under the one before it
   (about 6px of visible gap at mid-height); earlier chips stack above later ones, so the pointer hits the chip whose art it is over. */
.ax-strip-list .axg-genre { position: relative; flex: 1 1 0; justify-content: center; min-width: max-content; }
.ax-strip-list .axg-genre + .axg-genre { margin-left: -20px; }
@supports (z-index: calc(20 - sibling-index())) { .ax-strip-list .axg-genre { z-index: calc(20 - sibling-index()); } }
.ax-strip-list .axg-genre:nth-child(n + 6) { display: none; }
/* Shared hover / light-up (site-wide spec), with the strip's smaller grow and push (vars above). */
.ax-strip-list .axg-genre { transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease), scale .2s var(--ease), translate .25s var(--ease)), color .2s; }
.ax-strip-list .axg-genre:hover, .ax-strip-list .axg-genre:focus-visible { color: #fff; filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); }
/* The chip's icon zooms and turns on hover (site-apex.css --ax-art-t); the chip and its text stay level. */
.ax-strip-list .axg-genre img { transition: scale var(--ax-art-t, .5s ease), rotate var(--ax-art-t, .5s ease); }
.ax-strip-list .axg-genre:hover, .ax-strip-list .axg-genre:focus-visible { z-index: 21; scale: var(--ax-hover-scale, 1.04); }
.ax-strip-list .axg-genre:is(:hover, :focus-visible) img { scale: 1.08; rotate: -4deg; }
/* No focus box or tap flash on a click; keyboard focus gets the same art glow as hover. */
.ax-strip-list .axg-genre { -webkit-tap-highlight-color: transparent; }
.ax-strip-list .axg-genre:is(:focus, :focus-visible) { outline: none; }
@media (hover: hover) and (min-width: 761px) {
  .ax-strip-list .axg-genre:is(:hover, :focus-visible) ~ .axg-genre:not(.reveal-wait) { translate: var(--ax-hover-push, 6px) 0; }
  .ax-strip-list .axg-genre:not(.reveal-wait):has(~ .axg-genre:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push, 6px)) 0; }
}

/* Chip counts: 5 from 1320px, 4 down to 1086px (less end padding), 3 down to 900px, 2 below that; phones show all of them, scrolling. */
@media (max-width: 1319px) {
  .ax-strip-list { padding: 0 90px 0 124px; }
  .ax-strip-list .axg-genre:nth-child(n + 5) { display: none; }
}
@media (max-width: 1085px) {
  .ax-strip-list .axg-genre:nth-child(n + 4) { display: none; }
}
@media (max-width: 899px) {
  .ax-strip-list .axg-genre:nth-child(n + 3) { display: none; }
}
/* Phone: the same bar at 72/107 scale; smaller chips scroll sideways inside it, so the page never scrolls sideways. */
@media (max-width: 760px) {
  .ax-strip { height: 72px; }
  .ax-strip::before { border-image-width: 0 128px 0 151px; }
  .ax-strip::after { top: 61px; width: 146px; height: 42px; }
  .ax-strip-list { flex-wrap: nowrap; align-self: stretch; height: auto; padding: 0 64px 0 96px; overflow: auto hidden; overflow-clip-margin: 0; scrollbar-width: none; }
  .ax-strip-list::-webkit-scrollbar { display: none; }
  .ax-strip-list .axg-genre:nth-child(n) { display: inline-flex; }
  .ax-strip-list .axg-genre + .axg-genre { margin-left: -16px; }
  .ax-strip-list .axg-genre { flex: none; gap: 7px; height: 40px; padding: 0 4px; border-width: 0 23px; border-image-width: 0 23px; font-size: 15px; }
  .ax-strip-list .axg-genre img { width: 22px; height: 22px; }
  .ax-strip-list .axg-genre b { font-size: 13px; }
}