/*
 * FlatUI pages: the kit's look on a web page rather than over a game (a games library, a catalog, a status board, a
 * game's own site). Optional: a page links themes.css, flatui.css, then this file, and puts "fui fui-page" on <body>
 * (page.js's startPage() does). A game over a canvas needs none of it and may delete page.css and page.js.
 *
 * A page is the same grammar as the menus: windows under the theme's title bar, bands of headline numbers, a filter
 * band, full-width rows, one accent per window. What a page adds: a calm backdrop where the game would be, a top bar,
 * a masthead, walls of cards with their art, a sortable table of any columns, an item's detail window, screenshots and
 * a viewer. The rules are the kit's (STYLE-GUIDE.md): the theme's tokens only, no blur or filters, animations on
 * opacity and transform only, hover only where a pointer hovers, no :has().
 *
 * FORK: the page tokens below (the column's width, the gutters, a card's corners) are the seams to change.
 */

:root {
  --fui-page-width: 76em; /* the column the page's content sits in */
  --fui-page-gutter: 1.4em; /* the page's side margin */
  --fui-card-radius: var(--fui-radius-sm); /* a card is a control: the whole of it opens something */
  --fui-stage: #0b0b0c; /* behind a picture in the viewer: dark in every theme, so media read as they were made */
}

/* ---- The page: the scope on <body>, a calm backdrop where the game would be ---- */
/* <html data-fui-page> (startPage() sets it; put it in the markup too, so the first paint is right) */
:root[data-fui-page] {
  background: var(--game-band);
}
.fui.fui-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--game-band);
  -webkit-user-select: text; /* the kit's menus are not for selecting; a page's words are */
  user-select: text;
}
/* The backdrop: the theme's accent washed over the band at the top. A fixed layer of its own, so scrolling never
   repaints it. */
.fui.fui-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 70% at 12% -10%, color-mix(in srgb, var(--game-accent) 20%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--game-titlebar) 10%, var(--game-band)), var(--game-band) 32em);
  pointer-events: none;
}
.fui.fui-page :is(button, .fui-tab, .fui-select, .fui-card-link) {
  -webkit-user-select: none;
  user-select: none;
}
.fui.fui-page a:not([class]) {
  color: var(--game-accent);
  text-underline-offset: .18em;
}
.fui .fui-skip {
  position: absolute;
  top: .5em;
  left: .5em;
  z-index: 30;
  padding: .6em 1em;
  border-radius: var(--fui-radius-sm);
  background: var(--game-accent-fill);
  color: var(--game-on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.fui .fui-skip:focus-visible {
  transform: none;
}

/* ---- The top bar: the brand, the nav links, the tools (a theme picker) ---- */
.fui .fui-page-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6em 1.4em;
  min-height: 4em;
  padding: .55em var(--fui-page-gutter);
  padding-top: max(.55em, env(safe-area-inset-top));
  background: var(--game-panel);
  border-bottom: 1px solid var(--game-line);
}
.fui .fui-page-brand {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  color: var(--game-text);
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
}
.fui .fui-page-brand > .fui-icon {
  width: 1.3em;
  height: 1.3em;
  color: var(--game-accent);
}
.fui .fui-page-brand > img {
  width: auto;
  height: 1.8em;
}
.fui .fui-page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25em;
}
.fui .fui-page-nav a {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 2.5em;
  padding: 0 .85em;
  border-radius: var(--fui-radius-sm);
  color: var(--game-muted);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--fui-fast), color var(--fui-fast);
}
.fui .fui-page-nav a[aria-current='page'] {
  background: var(--game-soft);
  color: var(--game-text);
}
.fui .fui-page-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
  margin-left: auto;
}
.fui .fui-theme-picker {
  display: inline-flex;
  gap: .4em;
}
.fui .fui-theme-picker .fui-select > .fui-icon:first-child {
  color: var(--game-muted);
}

/* ---- The column, the masthead, sections, the footer ---- */
.fui .fui-page-main {
  max-width: var(--fui-page-width);
  margin: 0 auto;
  padding: 2.2em var(--fui-page-gutter) 3em;
  padding-left: max(var(--fui-page-gutter), env(safe-area-inset-left));
  padding-right: max(var(--fui-page-gutter), env(safe-area-inset-right));
}
.fui .fui-page-main > * + * {
  margin-top: 2em;
}
.fui .fui-masthead {
  display: flex;
  flex-direction: column;
  gap: .55em;
  max-width: 48em;
}
.fui .fui-masthead > .fui-eyebrow {
  color: var(--fui-accent-ink); /* over the accent's wash, the accent alone can fall under 4.5:1 */
}
.fui .fui-masthead h1 {
  font-size: clamp(1.9em, 1.2em + 2.4vw, 2.8em);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.fui .fui-lede {
  max-width: 42em;
  color: var(--game-muted);
  font-size: 1.1em;
  line-height: 1.55;
}
.fui .fui-masthead > .fui-button-row {
  margin-top: .5em;
}
.fui .fui-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4em 1em;
  margin-bottom: .9em;
}
.fui .fui-section-head > h2 {
  font-size: 1.35em;
  font-weight: 700;
}
.fui .fui-section-head > :last-child:not(:first-child):not(.fui-eyebrow) {
  margin-left: auto;
}
.fui .fui-page-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8em 1.6em;
  max-width: var(--fui-page-width);
  margin: 0 auto;
  padding: 1.4em var(--fui-page-gutter) max(2em, env(safe-area-inset-bottom));
  border-top: 1px solid var(--game-line);
  color: var(--game-muted);
  font-size: .87em;
}
/* A notice over the content: example data still in, a load that failed. Words and an icon carry it, not colour. */
.fui .fui-notice {
  display: flex;
  align-items: flex-start;
  gap: .7em;
  padding: .8em 1em;
  border: 1px solid color-mix(in srgb, var(--game-warn) 45%, var(--game-line));
  border-radius: var(--fui-radius-sm);
  background: color-mix(in srgb, var(--game-warn) 10%, var(--game-panel));
  color: var(--game-text);
  line-height: 1.5;
}
.fui .fui-notice > .fui-icon {
  margin-top: .1em;
  color: var(--game-warn);
}
/* A whole window waiting, failed or empty: the loader or the words in its middle, a way on under them. */
.fui .fui-page-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  padding: 3.5em 1em;
  color: var(--game-muted);
  text-align: center;
}

/* ---- A window on a page: the same shell as a dialog's, its big title bar for the big ones ---- */
.fui .fui-panel.fui-window.fui-large > .fui-panel-head {
  min-height: 4.1em;
  gap: .9em;
}
.fui .fui-panel.fui-window.fui-large > .fui-panel-head .fui-panel-title {
  font-size: 1.33em;
}
.fui .fui-panel.fui-window.fui-large > .fui-panel-head .fui-head-icon {
  width: 1.6em;
  height: 1.6em;
}
/* the bands of a page's window run its full width, their contents on the window's gutter */
.fui .fui-panel.fui-window,
.fui.fui-dialog.fui-detail-window {
  --fui-row-pad: var(--fui-gutter);
}
/* a body whose rows run the window's full width (a table): no padding of its own */
.fui .fui-panel-body.fui-flush {
  padding: 0;
}
.fui .fui-panel-head > .fui-head-extra {
  display: flex;
  align-items: center;
  gap: .5em;
  margin-left: auto;
}

/* The filter band's end: the view switch and the search kept together at the right (span.fui-toolbar-end), so a band
   with many filters wraps them as one, under the filters, rather than leaving one of them alone on a line. */
.fui .fui-toolbar-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55em .9em;
  margin-left: auto;
}
.fui .fui-toolbar-end > .fui-search {
  margin-left: 0;
}

/* ---- Art: a picture at a fixed shape, or a placeholder drawn in the theme ---- */
.fui .fui-art {
  container-type: inline-size;
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--game-soft);
}
.fui .fui-art[data-ratio='portrait'] {
  aspect-ratio: 2 / 3;
}
.fui .fui-art[data-ratio='landscape'] {
  aspect-ratio: 920 / 430;
}
.fui .fui-art[data-ratio='square'] {
  aspect-ratio: 1;
}
.fui .fui-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The placeholder: the theme's title-bar colour, a few soft shapes placed from the title, the title in the display
   face. So a list with missing art still looks made, and tells the themes apart as the windows do. */
.fui .fui-art[data-placeholder] {
  background: linear-gradient(var(--fui-art-angle, 150deg), var(--game-titlebar), color-mix(in srgb, var(--game-titlebar) 50%, #000));
  color: var(--game-on-titlebar);
}
.fui .fui-art-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fui .fui-art-pattern > :nth-child(1) {
  fill: rgb(255 255 255 / .1);
}
.fui .fui-art-pattern > :nth-child(2) {
  fill: none;
  stroke: rgb(255 255 255 / .16);
  stroke-width: 1.2;
}
.fui .fui-art-pattern > :nth-child(3) {
  fill: rgb(0 0 0 / .14);
}
.fui .fui-art-title {
  position: absolute;
  inset: auto 0 0;
  padding: .55em .6em;
  font-family: var(--fui-display-font);
  font-size: clamp(.95em, 12cqi, 2.4em);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.fui .fui-art[data-ratio='landscape'] .fui-art-title,
.fui .fui-art[data-ratio='wide'] .fui-art-title {
  font-size: clamp(.95em, 8cqi, 2.6em);
}
/* a thumbnail (a list's row) is too small for words: its shapes alone */
@container (max-width: 8em) {
  .fui .fui-art-title {
    display: none;
  }
}
/* Key art drawn from a picture that is not key art (art({ band })): the picture fills the top, cropped; a band in the
   title-bar colour at the foot, under an edge of the accent, carries an overline and a name in the display face (a
   map's game). The placeholder's shapes stand in for a missing picture, without its title: the band has the words. */
.fui .fui-art[data-band] {
  display: flex;
  flex-direction: column;
}
.fui .fui-art-picture {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.fui .fui-art-picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fui .fui-art[data-band] .fui-art-title {
  display: none;
}
.fui .fui-art-band {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: .25em;
  min-height: 34%;
  padding: .6em .7em .7em;
  border-top: 3px solid var(--game-accent);
  background: linear-gradient(160deg, var(--game-titlebar), color-mix(in srgb, var(--game-titlebar) 62%, #000));
  color: var(--game-on-titlebar);
}
.fui .fui-art-band > small {
  font-size: clamp(.66em, 6.4cqi, .82em);
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}
.fui .fui-art-band > span {
  font-family: var(--fui-display-font);
  font-size: clamp(.98em, 11.5cqi, 1.8em);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.fui .fui-art[data-ratio='wide'] .fui-art-band,
.fui .fui-art[data-ratio='landscape'] .fui-art-band {
  min-height: 0;
}
.fui .fui-art[data-ratio='wide'] .fui-art-band > span,
.fui .fui-art[data-ratio='landscape'] .fui-art-band > span {
  font-size: clamp(.9em, 6cqi, 1.5em);
}

/* ---- Cards: a wall of things with their art (games, packs, items) ---- */
.fui .fui-cards {
  --fui-card-min: 15em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--fui-card-min), 100%), 1fr));
  gap: 1em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fui .fui-cards[data-art='portrait'] {
  --fui-card-min: 10.5em;
}
.fui .fui-cards[data-art='landscape'] {
  --fui-card-min: 17em;
}
.fui .fui-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--game-line);
  border-radius: var(--fui-card-radius);
  background: var(--game-soft);
  color: var(--game-text);
  transition: background-color var(--fui-fast), border-color var(--fui-fast);
}
.fui .fui-card > .fui-art {
  border-radius: calc(var(--fui-card-radius) - 1px) calc(var(--fui-card-radius) - 1px) 0 0;
  border-bottom: 1px solid var(--game-line);
}
.fui .fui-card > .fui-art > img,
.fui .fui-card > .fui-art > .fui-art-picture > img {
  transition: transform var(--fui-slow) var(--fui-ease);
}
.fui .fui-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .3em;
  min-width: 0;
  padding: .7em .8em .8em;
}
.fui .fui-card-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.03em;
  font-weight: 600;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
/* The card's title is its link (or button): stretched over the whole card, so all of it is one target, with the
   focus ring round the card. Actions inside the card sit above it. */
.fui .fui-card-link {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
}
.fui .fui-card-link::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: var(--fui-card-radius);
  transition: box-shadow var(--fui-fast);
}
.fui .fui-card-link:focus-visible::after {
  box-shadow: var(--fui-ring);
}
.fui .fui-card-sub {
  overflow: hidden;
  color: var(--game-muted);
  font-size: .85em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fui .fui-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3em 1em;
  margin-top: auto;
  padding-top: .35em;
}
.fui .fui-card-foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  padding: 0 .8em .8em;
}
.fui .fui-card-badge {
  position: absolute;
  top: .6em;
  left: .6em;
  z-index: 2;
  height: 1.9em;
  padding: 0 .6em;
  border-radius: 999px;
  font-size: .72em;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: var(--fui-shadow);
  pointer-events: none;
}
/* The current card (the one a detail window is open on, a chosen plan): the accent's tint and edge. */
.fui .fui-card[aria-current='true'] {
  border-color: var(--game-accent);
  background: var(--fui-tint);
}

/* Keywords: a thing's genres, platforms, tags. Quiet pills in sentence case; .fui-tag stays the outlined caveat. */
.fui .fui-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: .35em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fui .fui-keywords > li {
  padding: .2em .6em;
  border-radius: 6px;
  background: var(--game-raised);
  border: 1px solid var(--game-line);
  color: var(--game-muted);
  font-size: .82em;
  line-height: 1.35;
  white-space: nowrap;
}
.fui .fui-card .fui-keywords > li {
  background: transparent;
  font-size: .76em;
}

/* ---- A table of any columns: the kit's filter band, headings and full-width rows, its columns from data ----
   page.js's dataTable() sets --fui-columns from the columns' widths. Rows run the full width of their window; on a
   narrow table the headings go and the columns move under each row's main cell, each with its label. */
.fui .fui-table {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fui .fui-table-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--fui-columns, minmax(0, 1fr));
  column-gap: 1.3em;
  align-items: center;
}
.fui .fui-table-head > [data-align='end'],
.fui .fui-table-row > [data-align='end'],
.fui .fui-table-cells > [data-align='end'] {
  justify-self: end;
  text-align: right;
}
.fui .fui-table-head > [data-align='center'],
.fui .fui-table-row > [data-align='center'],
.fui .fui-table-cells > [data-align='center'] {
  justify-self: center;
  text-align: center;
}
.fui .fui-table-head {
  display: grid;
  align-items: center;
}
.fui .fui-table-body > .fui-table-row {
  min-height: 3.6em;
  padding: .6em var(--fui-row-pad);
}
.fui .fui-table-cells {
  display: contents;
}
.fui .fui-table-main {
  display: flex;
  align-items: center;
  gap: .9em;
  min-width: 0;
}
.fui .fui-table-main > .fui-art {
  flex: none;
  width: 5.6em;
  border: 1px solid var(--game-line);
  border-radius: 6px;
}
.fui .fui-table-main > .fui-art[data-ratio='portrait'] {
  width: 3.2em;
}
.fui .fui-table-title {
  display: flex;
  flex-direction: column;
  gap: .15em;
  min-width: 0;
}
.fui .fui-table-title > :first-child {
  overflow: hidden;
  font-size: 1.05em;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fui .fui-table-title > small {
  overflow: hidden;
  color: var(--game-muted);
  font-size: .85em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A row that opens something: its main cell's link or button is stretched over the whole row. A cell with controls
   of its own (data-controls: a Play button) sits above it. */
.fui .fui-table-row .fui-card-link::after {
  border-radius: 0;
  inset: 0;
}
.fui .fui-table-row .fui-card-link:focus-visible::after {
  box-shadow: inset 0 0 0 2px var(--game-accent);
}
.fui .fui-table-row > *,
.fui .fui-table-cells > * {
  min-width: 0;
}
.fui .fui-table-row > [data-controls],
.fui .fui-table-cells > [data-controls] {
  position: relative;
  z-index: 2;
}
.fui .fui-table[data-art='wide'],
.fui .fui-table[data-art='landscape'] {
  --fui-table-indent: 6.5em; /* a narrow row's cells line up under its title, past the art */
}
.fui .fui-table[data-art='portrait'],
.fui .fui-table[data-art='square'] {
  --fui-table-indent: 4.1em;
}
.fui .fui-table-empty {
  padding: 1.6em var(--fui-row-pad);
  color: var(--game-muted);
  text-align: center;
}
@container (max-width: 40em) {
  .fui .fui-table-head {
    display: none;
  }
  .fui .fui-table-body > .fui-table-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .45em;
  }
  .fui .fui-table-cells {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3em 1.1em;
  }
  .fui .fui-table-main ~ .fui-table-cells {
    padding-left: var(--fui-table-indent, 0);
  }
  .fui .fui-table-cells > * {
    justify-self: auto;
    text-align: left;
  }
  .fui .fui-table-cells > [data-label]::before {
    content: attr(data-label);
    margin-right: .5em;
    color: var(--game-muted);
    font-size: .73em;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
}

/* ---- An item's detail: a hero (its backdrop and logo), the words beside its facts ----
   In a window (createDialog({ size: 'large', className: 'fui-detail-window' })) or on a page of its own. */
.fui.fui-dialog.fui-detail-window {
  max-height: min(60em, calc(100dvh - 2em));
}
.fui.fui-dialog.fui-detail-window > .fui-panel-body {
  padding: 0; /* the hero and the bands run edge to edge; the grid keeps the gutter */
}
.fui .fui-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(8em, 20vw, 13em); /* short: the media stage under it is what people look at */
  overflow: hidden;
  background: linear-gradient(150deg, var(--game-titlebar), color-mix(in srgb, var(--game-titlebar) 45%, #000));
  border-bottom: 1px solid var(--game-line);
  color: #fff;
}
.fui .fui-hero > .fui-art {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.fui .fui-hero .fui-art-title {
  display: none; /* the hero writes the title itself */
}
/* a dark scrim under the logo, so it reads over any picture */
.fui .fui-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / .62));
  pointer-events: none;
}
.fui .fui-hero-mark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .3em;
  padding: 1.2em var(--fui-gutter);
}
.fui .fui-hero-mark > img {
  display: block;
  width: auto;
  max-width: min(26em, 70%);
  max-height: 6.5em;
  object-fit: contain;
  object-position: left bottom;
}
.fui .fui-hero-mark > strong {
  font-family: var(--fui-display-font);
  font-size: clamp(1.7em, 1.1em + 2.6vw, 2.8em);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-shadow: 0 1px 3px rgb(0 0 0 / .45);
}
.fui .fui-hero-mark > span {
  color: rgb(255 255 255 / .86);
  font-size: 1.05em;
  text-shadow: 0 1px 2px rgb(0 0 0 / .5);
}
/* the overline over the title: what the entry is (hero({ eyebrow }): 'Map for Anarchy Arcade') */
.fui .fui-hero-mark > .fui-eyebrow {
  color: #fff;
  font-size: .78em;
}
.fui .fui-detail {
  container-type: inline-size;
}
.fui .fui-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(14em, 1fr);
  gap: 1.6em 2.2em;
  padding: 1.4em var(--fui-gutter) 1.6em;
}
.fui .fui-detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  min-width: 0;
}
@container (max-width: 44em) {
  .fui .fui-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.fui .fui-detail h3:not(.fui-card-title) { /* a section's heading, not a card's title */
  margin: 0 0 .6em;
  font-size: .73em;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--game-muted);
}
/* Prose: a description, an about page. A comfortable measure and leading. */
.fui .fui-prose {
  max-width: 44em;
  line-height: 1.6;
}
.fui .fui-prose p + p {
  margin-top: .8em;
}
.fui .fui-prose :is(ul, ol) {
  margin: .6em 0;
  padding-left: 1.3em;
}
/* A list of strong points, each with the accent's check. */
.fui .fui-features {
  display: flex;
  flex-direction: column;
  gap: .55em;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.45;
}
.fui .fui-features > li {
  display: flex;
  gap: .6em;
}
.fui .fui-features > li > .fui-icon {
  margin-top: .05em;
  color: var(--game-accent);
}
/* Facts: a label in capitals over its value (a <dl> of <div>s), two to a line where there is room. */
.fui .fui-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9.5em, 100%), 1fr));
  gap: .9em 1.2em;
  margin: 0;
}
.fui .fui-facts > div {
  display: flex;
  flex-direction: column;
  gap: .2em;
  min-width: 0;
}
.fui .fui-facts dt {
  font-size: .73em;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--game-muted);
}
.fui .fui-facts dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
/* .fui-large: the headline facts (a price, a date), their values big */
.fui .fui-facts.fui-large dd {
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.2;
}
.fui .fui-facts > .fui-wide {
  grid-column: 1 / -1;
}
.fui .fui-facts > .fui-wide dd {
  font-weight: 400;
  line-height: 1.5;
}
/* A fact's value that is a link (a map's game, when the game is in the list too) */
.fui .fui-facts dd a {
  color: var(--game-accent);
  text-decoration: underline;
  text-underline-offset: .18em;
}
/* A short note beside the actions it is about ("Needs Anarchy Arcade to play", by a Download): on its own line over
   them on a phone, where the buttons share the band. */
.fui .fui-foot-note {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--game-muted);
  font-size: .87em;
  line-height: 1.35;
}
.fui .fui-foot-note > .fui-icon {
  flex: none;
}
/* A small print note in a well: an IP notice, an AI disclosure. */
.fui .fui-note {
  display: flex;
  gap: .65em;
  padding: .75em .9em;
  border-radius: var(--fui-radius-sm);
  background: var(--game-band);
  border: 1px solid var(--game-line);
  color: var(--game-muted);
  font-size: .87em;
  line-height: 1.5;
}
.fui .fui-note > .fui-icon {
  margin-top: .05em;
}
.fui .fui-note strong {
  color: var(--game-text);
  font-weight: 600;
}
/* Credits, grouped by role. */
.fui .fui-credits {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .45em 1em;
  margin: 0;
  font-size: .92em;
}
.fui .fui-credits dt {
  color: var(--game-muted);
}
.fui .fui-credits dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.fui .fui-credits small {
  display: block;
  color: var(--game-muted);
}

/* ---- The media stage: one picture or clip large, the carousel of them all right under it (mediaStage()) ---- */
.fui .fui-media {
  display: flex;
  flex-direction: column;
  gap: .55em;
  min-width: 0;
}
.fui .fui-media-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--game-line);
  border-radius: var(--fui-radius-sm);
  background: var(--fui-stage);
}
.fui .fui-media-stage > * {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.fui .fui-media-stage :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fui .fui-media-zoom {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
}
.fui .fui-media-facade {
  cursor: pointer;
}
.fui .fui-media-stage .fui-art {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.fui .fui-media-zoom:focus-visible {
  box-shadow: inset 0 0 0 2px var(--game-accent); /* inside: the stage clips what is outside it */
}
/* the round play mark: big on a clip's poster, small on its thumbnail */
.fui .fui-media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 3.6em;
  height: 3.6em;
  border-radius: 50%;
  background: rgb(0 0 0 / .62);
  color: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.fui .fui-media-play > .fui-icon {
  width: 1.5em;
  height: 1.5em;
  margin-left: .15em;
}
.fui .fui-media-thumb .fui-media-play {
  width: 1.9em;
  height: 1.9em;
}
.fui .fui-media-thumb .fui-media-play > .fui-icon {
  width: .95em;
  height: .95em;
}
.fui .fui-media-carousel {
  display: flex;
  align-items: center;
  gap: .3em;
}
.fui .fui-media-strip {
  display: flex;
  flex: 1;
  gap: .5em;
  min-width: 0;
  margin: 0;
  padding: .3em;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--fui-track) transparent;
}
.fui .fui-media-strip > li {
  flex: none;
  width: 8.5em;
  scroll-snap-align: start;
}
.fui .fui-media-thumb {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: var(--game-soft);
  overflow: hidden;
  opacity: .72;
  cursor: pointer;
  transition: opacity var(--fui-fast), border-color var(--fui-fast), box-shadow var(--fui-fast);
}
.fui .fui-media-thumb[aria-current='true'] {
  border-color: var(--game-accent);
  opacity: 1;
}
.fui .fui-media-thumb:focus-visible {
  box-shadow: var(--fui-ring);
  opacity: 1;
}
.fui .fui-media-thumb > .fui-art {
  background: transparent;
}
.fui .fui-media-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2em 1em;
  min-height: 1.4em;
  color: var(--game-muted);
  font-size: .87em;
  line-height: 1.45;
}
.fui .fui-media-caption > .fui-eyebrow {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* ---- Screenshots: 16:9 thumbnails, each a button that opens the viewer ---- */
.fui .fui-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11em, 100%), 1fr));
  gap: .6em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fui .fui-shot {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--game-line);
  border-radius: 6px;
  background: var(--game-soft);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--fui-fast), box-shadow var(--fui-fast);
}
.fui .fui-shot:focus-visible {
  box-shadow: var(--fui-ring);
}
.fui .fui-shot > .fui-art {
  background: transparent;
}
/* The viewer: one picture at a time on a dark stage, its caption and where it is in the set under it. */
.fui.fui-dialog.fui-viewer {
  --fui-dialog-width: 78em;
  max-height: calc(100dvh - 2em);
}
.fui.fui-viewer > .fui-panel-body {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.fui .fui-viewer-stage {
  flex: none;
  display: grid;
  place-items: center;
  min-height: 12em;
  background: var(--fui-stage);
}
.fui .fui-viewer-stage > img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 2em - 14em); /* the window less its title bar, caption and footer */
  object-fit: contain;
}
.fui .fui-viewer-caption {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3em 1em;
  padding: .8em var(--fui-gutter);
  line-height: 1.45;
}
.fui .fui-viewer-caption > .fui-eyebrow {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* ---- Hover: only where a real pointer hovers, so a tap on a phone leaves no sticky highlight ---- */
@media (hover: hover) {
  .fui .fui-page-nav a:hover {
    background: var(--game-soft);
    color: var(--game-text);
  }
  .fui.fui-page a:not([class]):hover {
    text-decoration-thickness: 2px;
  }
  .fui .fui-card:hover {
    background: color-mix(in srgb, var(--game-text) 6%, var(--game-soft));
    border-color: var(--fui-strong-line);
  }
  .fui .fui-card:hover .fui-card-title {
    color: var(--game-accent);
  }
  .fui .fui-card:hover > .fui-art > img,
  .fui .fui-card:hover > .fui-art > .fui-art-picture > img {
    transform: scale(1.035);
  }
  .fui .fui-card[aria-current='true']:hover {
    background: var(--fui-tint);
    border-color: var(--game-accent);
  }
  .fui .fui-table-body > .fui-table-row:hover .fui-table-title > :first-child {
    color: var(--game-accent);
  }
  .fui .fui-shot:hover {
    border-color: var(--game-accent);
  }
  .fui .fui-media-thumb:hover {
    opacity: 1;
  }
}

/* ---- Phones ---- */
@media (max-width: 40em) {
  :root {
    --fui-page-gutter: .75em;
  }
  .fui .fui-page-bar {
    gap: .4em .8em;
  }
  .fui .fui-page-nav {
    order: 3;
    width: 100%;
    margin: 0 -.85em;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .fui .fui-page-main {
    padding-top: 1.4em;
  }
  .fui .fui-page-main > * + * {
    margin-top: 1.4em;
  }
  .fui .fui-cards {
    gap: .7em;
  }
  /* a filter band on a phone: its label and the view switch on one line, the search under them, then the filters */
  .fui .fui-panel.fui-window .fui-toolbar-end {
    display: contents;
  }
  .fui .fui-panel.fui-window .fui-toolbar > .fui-choice,
  .fui .fui-panel.fui-window .fui-toolbar-end > .fui-choice {
    order: 1;
    margin-left: auto;
  }
  .fui .fui-panel.fui-window .fui-toolbar > .fui-search,
  .fui .fui-panel.fui-window .fui-toolbar-end > .fui-search {
    order: 2;
    flex: 1 1 100%;
    margin-left: 0;
  }
  .fui .fui-panel.fui-window .fui-toolbar .fui-select {
    order: 3; /* a descendant: filters may sit in a display: contents wrapper */
    flex: 1 1 auto;
  }
  /* the theme picker keeps to its palette and the mode, so the bar stays one line */
  .fui .fui-theme-picker .fui-select-value {
    display: none;
  }
  .fui .fui-cards[data-art='portrait'] {
    --fui-card-min: 8.6em;
  }
  .fui .fui-panel.fui-window {
    border-radius: var(--fui-radius-sm);
  }
  .fui .fui-panel.fui-window.fui-large > .fui-panel-head {
    min-height: 3.4em;
  }
  .fui .fui-panel.fui-window.fui-large > .fui-panel-head .fui-panel-title {
    font-size: 1.13em;
  }
  .fui .fui-panel-foot > .fui-foot-note {
    order: -1;
    flex: 1 1 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fui .fui-card > .fui-art > img,
  .fui .fui-card > .fui-art > .fui-art-picture > img {
    transition: none;
  }
}