/* Next Up, "party menu, ember": a dark brick wall, wine-red panels in gold frames, pixel type.
   The font files are self-hosted and unchanged, under the SIL Open Font License; the licences sit
   next to them. Patterns and ornaments are same-site SVG files, because the security policy blocks
   inline styles and data: addresses. Dark only for now: every colour is a token on :root, so a
   light theme can be added later by redefining them. */

/* Jacquard 24: the wordmark and the "Your party" heading only. */
@font-face {
  font-family: 'Jacquard 24';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Jacquard_24-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jacquard 24';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Jacquard_24.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jersey 15: the body text. */
@font-face {
  font-family: 'Jersey 15';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Jersey_15-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jersey 15';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Jersey_15.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Pixelify Sans: small labels, plates and headlines. One variable file, 400 to 700. */
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/Pixelify_Sans-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/Pixelify_Sans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --wall: #0d0b0c;
  /* The lightest pixel in the brick tile: the worst case for text that sits on the wall. */
  --brick-hi: #3b302b;
  --panel: #3a0f14;
  --inset: #250a0e;
  --gold: #d4a64a;
  --gold-bright: #f0c96a;
  --gold-dark: #8f6d2e;
  --text: #f3ece2;
  --muted: #c9b8a6;
  --ember: #e8743b;
  --line: #6e2a2a;
  --line-inset: #5c1c22;
  --shadow: #0b0909;
  --plate-1: #d4a64a;
  --plate-1-ink: #250a0e;
  --plate-2: #b8b0a2;
  --plate-2-ink: #1a1416;
  --plate-3: #b8733f;
  --plate-3-ink: #120806;
  --body: 'Jersey 15', 'Pixelify Sans', system-ui, sans-serif;
  --label: 'Pixelify Sans', 'Jersey 15', system-ui, sans-serif;
  --title: 'Jacquard 24', 'Pixelify Sans', system-ui, sans-serif;
  --frame-shadow: 0 0 0 2px var(--shadow), 5px 5px 0 2px var(--shadow), inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--gold-dark);
  --chip-shadow: 0 0 0 2px var(--shadow), 4px 4px 0 2px var(--shadow);
  --corners: url(/assets/corner.svg) left top / 10px 10px no-repeat, url(/assets/corner.svg) right top / 10px 10px no-repeat, url(/assets/corner.svg) left bottom / 10px 10px no-repeat, url(/assets/corner.svg) right bottom / 10px 10px no-repeat;
  --gutter: clamp(16px, 5vw, 48px);
  --target: 44px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* src/theme.js adds .js before the first paint, so these hold their place with nothing jumping. */
html:not(.js) [data-js] { display: none !important; }

/* No background on html, so the body's wall becomes the canvas and the torches' light can sit
   on the bricks, under every panel. */
html { -webkit-text-size-adjust: 100%; }

/* The pixel faces join "fi" and "fl" into one glyph that reads as a single letter, so "finished"
   reads as "anished". Ligatures are off for the whole page; form controls inherit it through
   font: inherit. */
html, body, button, input {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
}

body {
  margin: 0;
  background: var(--wall) url(/assets/brick.svg) 0 0 / 144px 72px repeat;
  color: var(--text);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
@media (min-width: 900px) { body { font-size: 21px; } }

h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 400; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
main { flex: 1 0 auto; }

*:focus:not(:focus-visible) { outline: none; }
*:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 2px; }
/* Places focus is moved to by the page, not ones a person tabs to. */
[tabindex="-1"]:focus { outline: none; }

.sr, .sep {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* A row label's colon is read out, but its column does the work on screen. */
.colon { display: none; }
/* The pixel faces draw ™ and ® full size, so they're set small and raised, as in print. */
.tm { font-size: .55em; line-height: 0; vertical-align: .7em; }

.skip {
  position: absolute;
  left: 8px;
  top: -80px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 16px;
  background: var(--inset);
  border: 2px solid var(--gold);
  color: var(--text);
}
.skip:focus { top: 8px; }

.icon { flex: none; display: inline-block; vertical-align: middle; }
.gem { color: var(--gold); }
.arrow { color: var(--gold); }
.chevron { color: var(--gold-bright); }

.wrap {
  width: 100%;
  max-width: 1248px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Frames, plates, chips ---------- */

/* A wine-red panel in a double gold frame with a hard shadow, and a gold diamond on each corner. */
.frame {
  position: relative;
  background: var(--panel);
  border: 3px solid var(--gold);
  border-radius: 3px;
  box-shadow: var(--frame-shadow);
}
.frame::before {
  content: '';
  position: absolute;
  inset: -7px;
  z-index: 2;
  pointer-events: none;
  background: var(--corners);
}

/* The hexagonal gold name plate that sits across a frame's top edge. */
.plate {
  position: absolute;
  top: -14px;
  left: 16px;
  z-index: 3;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 4px 16px;
  overflow: hidden;
  background: var(--gold);
  color: var(--inset);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  font-family: var(--label);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .5px;
  text-transform: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (min-width: 900px) { .plate { top: -15px; left: 20px; padding: 5px 18px; font-size: 18px; } }

/* ---------- Banner and top bar ---------- */

.sample {
  background: var(--inset);
  border-bottom: 2px solid var(--gold-dark);
  font-size: 17px;
  line-height: 1.4;
}
.sample .wrap { padding-top: 8px; padding-bottom: 8px; }
.sample strong { font-weight: 400; color: var(--gold-bright); }

.bar { overflow-x: clip; }
.bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 4px;
}
.brand { position: relative; display: flex; align-items: center; gap: 48px; min-width: 0; }
.brand .torch { display: none; }
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--target);
  color: var(--gold);
  text-decoration: none;
}
.wordmark-text {
  font-family: var(--title);
  font-size: 40px;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 3px 3px 0 var(--shadow);
}
.wordmark .sword { width: 84px; height: 11px; }
.bar-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.byline {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-size: 18px;
  line-height: 1.2;
  color: var(--muted);
  text-align: right;
  text-underline-offset: 3px;
}
@media (max-width: 599px) { .byline-long { display: none; } }
@media (min-width: 900px) {
  .bar .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding-top: 20px; }
  .brand { grid-column: 2; }
  .brand .torch { display: block; }
  .bar-right { grid-column: 3; justify-self: end; }
  .wordmark-text { font-size: 64px; text-shadow: 4px 4px 0 var(--shadow); }
  .wordmark .sword { width: 120px; height: 15px; }
}
@media (hover: hover) {
  .wordmark:hover { color: var(--gold-bright); }
  .byline:hover { color: var(--gold-bright); }
}

/* ---------- Torches ---------- */

.torch { position: relative; flex: none; display: block; width: 20px; height: 40px; }
.torch-art { position: relative; display: block; }
.flame-b { opacity: 0; }
.pool {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: -1;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(240, 201, 106, .21) 0 20%, rgba(232, 116, 59, .17) 20% 42%, rgba(232, 116, 59, .105) 42% 66%, rgba(232, 116, 59, .05) 66% 99%, transparent 100%);
}
.speck { position: absolute; width: 3px; height: 3px; background: var(--gold-bright); opacity: 0; }
.speck:nth-child(1) { left: 44%; top: 54%; }
.speck:nth-child(2) { left: 57%; top: 60%; }
.speck:nth-child(3) { left: 50%; top: 48%; }
@media (min-width: 900px) {
  .torch { width: 30px; height: 60px; }
  .torch-art { width: 30px; height: 60px; }
  .pool { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
}

/* ---------- Type ---------- */

.display {
  font-family: var(--label);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.display em { font-style: normal; color: var(--gold-bright); }
/* A game's name in a heading is set in the body face: the pixel display face draws 2 like 8 and 5 like S. */
/* Game names read in the body face wherever they show: the pixel face draws 2 like 8 and C like S. */
#results .display em, .hero-plate { font-family: var(--body); letter-spacing: .01em; }
.display--long { font-size: clamp(22px, 2.6vw, 30px); }

.lede { margin-top: 10px; max-width: 40em; color: var(--muted); }

.eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: .5px;
  color: var(--gold-bright);
}

.hint { margin-top: 10px; font-size: 18px; color: var(--muted); }
.loading { margin-top: 24px; font-size: 20px; }

/* ---------- Buttons and links ---------- */

/* A small framed button: dark inset, gold border, hard shadow. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--target);
  padding: 6px 16px;
  background: var(--inset);
  border: 2px solid var(--gold);
  border-radius: 2px;
  box-shadow: var(--chip-shadow);
  color: var(--gold-bright);
  font-family: var(--body);
  font-size: 21px;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 2px var(--shadow), 2px 2px 0 2px var(--shadow); }
@media (hover: hover) {
  .btn:hover { background: var(--panel); color: var(--text); }
}

/* Plain underlined text in the body face. */
.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--target);
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: var(--gold-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color .15s ease;
}
@media (hover: hover) {
  .btn--ghost:hover { color: var(--gold-bright); text-decoration-color: var(--gold-bright); }
}
.btn--frame {
  padding: 0 12px;
  background: var(--panel);
  border: 2px solid var(--gold);
  border-radius: 2px;
  box-shadow: var(--chip-shadow);
  text-decoration: none;
}
.btn--frame .share { color: var(--gold-bright); }

.quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--target);
  color: var(--text);
  font-size: 19px;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .quiet-link:hover { color: var(--gold-bright); }
}

summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] > summary .chevron { transform: rotate(180deg); }
.chevron { transition: transform .2s ease; }
.when-open { display: none; }
details[open] > summary .when-open { display: inline; }
details[open] > summary .when-closed { display: none; }

/* ---------- First screen ---------- */

.home-head { padding-top: 16px; }

/* Two stacks: the headline with search under it, and the tiles' panel. On a wide screen they sit side
   by side and each keeps its own height, so the search stays on the first screen and suggestions
   growing under it never stretch the tiles' panel. */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 36px; align-items: start; }
.home-lead { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.headline { padding: 16px 18px 12px; }
.headline .display { font-size: 28px; }
.headline .lede { font-size: 19px; }
.home-grid .pick { position: relative; display: flex; flex-direction: column; min-width: 0; }

.pick::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--panel);
  border: 3px solid var(--gold);
  border-radius: 3px;
  box-shadow: var(--frame-shadow);
}
.pick::after {
  content: '';
  position: absolute;
  inset: -7px;
  z-index: 2;
  pointer-events: none;
  background: var(--corners);
}
.pick-label {
  position: relative;
  z-index: 3;
  justify-self: start;
  width: fit-content;
  margin: -14px 0 10px 16px;
  padding: 4px 16px;
  background: var(--gold);
  color: var(--inset);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
.pick > .tiles { position: relative; margin: 6px 14px 16px; }
.more-tiles { position: relative; margin: 0 14px 6px; }
.more-tiles > summary { width: 100%; min-height: 56px; border-top: 2px dashed var(--line); padding-left: 4px; }
.more-tiles .tiles { margin: 6px 0 14px; }

.pick--thin { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 28px; max-width: 760px; }
/* Suggestions grow under the search box. Left to itself, the browser can anchor the scroll to a tile
   below them and push the box up out of sight while someone types, so these grids opt out. */
.home-grid, .pick--thin { overflow-anchor: none; }
.pick--thin .search { grid-row: 1; grid-column: 1; margin-bottom: 36px; }
.pick--thin .pick-label { grid-row: 2; grid-column: 1; }
.pick--thin > .tiles { grid-row: 3; grid-column: 1; }
.pick--thin::before, .pick--thin::after { position: static; inset: auto; align-self: stretch; grid-row: 2 / span 2; grid-column: 1; }
.pick--thin::after { margin: -7px; }

@media (min-width: 1000px) {
  .home-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; padding-top: 14px; }
  .home-lead { gap: 32px; }
  .headline { padding: 28px 30px; }
  .headline .display { font-size: 48px; line-height: 1.12; }
  .headline .lede { font-size: 23px; margin-top: 18px; }
  .home-lead .search { padding: 14px 16px; }
  .home-grid .pick-label { margin-left: 20px; padding: 5px 18px; font-size: 18px; }
  .home-grid .pick > .tiles { margin: 8px 20px 18px; }
  .home-grid .more-tiles { margin: 0 20px 6px; }
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }

.tile {
  display: flex;
  align-items: center;
  min-height: 52px;
  height: 100%;
  padding: 6px 10px;
  background: var(--inset);
  border: 2px solid var(--gold-dark);
  border-radius: 2px;
  box-shadow: var(--chip-shadow);
  color: var(--text);
  font-size: 20px;
  line-height: 1.15;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color .15s ease, color .15s ease;
}
@media (min-width: 560px) { .tile { min-height: 56px; } }
@media (hover: hover) {
  .tile:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
}
/* With art on, the game's header image sits in a strip above its name, inside the same tile. The
   strip never holds the name: while it loads it stays plain, and if it fails twice it shows the same
   dim question mark a card does. */
.tile--art { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
.tile .tile-art { flex: none; aspect-ratio: 460 / 215; padding: 0; background-color: var(--panel); border-bottom: 2px solid var(--shadow); outline: 0; }
.tile .art:not(.has-img):not(.art--text) { background-color: var(--panel); background-size: 32px 32px; }
.tile-name { flex: 1 0 auto; display: flex; align-items: center; min-height: 46px; padding: 5px 10px; }
@media (min-width: 560px) { .tile-name { min-height: 50px; } }
@media (hover: hover) {
  .tile--art:hover .tile-art { border-bottom-color: var(--gold-bright); }
}

/* ---------- Search ---------- */

.search { scroll-margin-top: 12px; padding: 10px 12px; }
.search input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 6px 12px;
  background: var(--inset);
  border: 2px solid var(--muted);
  border-radius: 2px;
  color: var(--text);
  font: inherit;
  font-family: var(--body);
  font-size: 21px;
  -webkit-appearance: none;
  appearance: none;
}
/* The browser's own clear button is blue. A same-file mask keeps it in the palette, because the
   security policy blocks data: images. */
.search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  background: var(--gold-bright);
  -webkit-mask: url(/assets/clear.svg) center / 16px 16px no-repeat;
  mask: url(/assets/clear.svg) center / 16px 16px no-repeat;
  cursor: pointer;
}
.search input::placeholder { color: var(--muted); opacity: 1; }

.hits { margin-top: 10px; background: var(--inset); border: 2px solid var(--gold-dark); border-radius: 2px; }
.hits li + li { border-top: 2px dashed var(--line-inset); }
.hit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 16px;
  min-height: var(--target);
  padding: 8px 12px;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  .hit:hover { background: var(--panel); color: var(--gold-bright); }
}
.hit-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 20px;
}
.hit-note { font-size: 17px; color: var(--muted); }
/* With art on, a small capsule at the left of each suggestion. A fixed box, so nothing moves while
   images arrive or fail, and the row keeps its 44px target. */
.hit--thumb { flex-wrap: nowrap; justify-content: flex-start; gap: 12px; padding-left: 8px; }
.hit .hit-thumb { flex: none; width: 72px; height: 27px; aspect-ratio: 120 / 45; padding: 0; outline: 0; box-shadow: 0 0 0 1px var(--line-inset); }
.hit .art:not(.has-img):not(.art--text) { background-size: 18px 18px; }
.hit-text { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; }
@media (min-width: 600px) { .hit .hit-thumb { width: 80px; height: 30px; } }

.nomatch { margin-top: 12px; }
.nomatch strong { font-weight: 400; color: var(--gold-bright); overflow-wrap: anywhere; }
.nomatch .quiet-link { margin-top: 4px; }

/* ---------- How it works: the worked example ---------- */

.example {
  margin-top: 44px;
  padding: 28px 18px 20px;
  scroll-margin-top: 24px;
}
.example .eyebrow { color: var(--muted); font-family: var(--body); font-weight: 400; font-size: 19px; letter-spacing: 0; }
.example-title {
  margin-top: 6px;
  font-family: var(--label);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  text-wrap: balance;
}
.example-title em { font-family: var(--body); font-style: normal; letter-spacing: .01em; color: var(--gold-bright); }
.example-copy { margin-top: 8px; color: var(--muted); }
.example-card { margin-top: 16px; }
.example-card .card-name { font-size: 25px; }
.example-link { margin-top: 20px; }
@media (min-width: 1000px) {
  .example { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-auto-rows: min-content; column-gap: 40px; padding: 32px 30px 26px; }
  .example > * { grid-column: 1; }
  .example > .example-card { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .example-title { font-size: 30px; }
}
.note-label {
  font-family: var(--label);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .5px;
  color: var(--gold-bright);
}
.note-label:has(+ .new) { color: var(--ember); }
.note-label:has(+ .reason) { color: var(--muted); }
.note-label:not(:first-child) { border-top: 2px dashed var(--line-inset); padding-top: 8px; }
.note-label + .marks-row, .note-label + .new, .note-label + .reason { margin-top: -4px; border-top: 0; padding-top: 0; }

/* ---------- Results ---------- */

.results-view { padding-top: 4px; overflow-x: clip; }

.top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 26px;
}
.copy-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 0 1 auto; min-width: 0; }

.back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--target);
  padding-right: 8px;
  font-size: 20px;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.plain .back { margin-bottom: 16px; }
@media (hover: hover) {
  .back:hover { color: var(--gold-bright); }
}

/* The header panel: the game's art, what you do in it, the count and the series control. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 26px 18px 18px; }
.hero-side { display: contents; }
.hero-art { order: -1; margin: -21px -13px 2px; }
.hero-art .art { border: 2px solid var(--shadow); }
.hero-title { font-family: var(--body); font-weight: 400; font-size: 20px; line-height: 1.4; color: var(--muted); text-wrap: wrap; }
.hero-title.display--long { font-size: 20px; }
.hero-in bdi { color: var(--gold-bright); }
.verbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding-bottom: 4px; font-style: normal; }
.verb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  background: var(--inset);
  border: 2px solid var(--gold);
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--shadow), 3px 3px 0 2px var(--shadow);
  color: var(--gold-bright);
  font-size: 21px;
  line-height: 1.2;
}
.new-note { display: flex; gap: 10px; margin-top: 14px; max-width: 40em; font-size: 18px; line-height: 1.4; color: var(--muted); }
.new-note .gem { margin-top: 6px; color: var(--gold-dark); }
.new-note strong { font-weight: 400; color: var(--ember); }
.hero-copy .lede {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: none;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px dashed var(--line);
  color: var(--text);
}
.count-num {
  font-size: 88px;
  line-height: .9;
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--shadow);
}
.count-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.count-first { font-size: 23px; line-height: 1.3; color: var(--text); }
.count-second { font-size: 20px; line-height: 1.4; color: var(--muted); }

.hero--thin { display: block; padding: 26px 18px 20px; }
/* Page not found has no row above it, so it keeps its own distance from the bar. */
.results-view > .hero:first-child, .plain > .hero:first-child { margin-top: 28px; }
.hero--thin .display { font-size: clamp(26px, 3.4vw, 38px); }
.hero--thin .lede { max-width: 36em; }
.hero--thin .quiet-link { margin-top: 6px; }
.hero--thin .prose { margin-top: 12px; }

@media (min-width: 900px) {
  .hero { padding: 32px 30px 26px; }
  .hero--side { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px; align-items: center; }
  .hero-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    align-self: stretch;
    padding: 4px 0 4px 36px;
    border-left: 2px dashed var(--line);
  }
  .hero-art { order: 0; margin: 0 4px 22px 0; }
  .hero-art .art { border: 3px solid var(--gold); border-radius: 2px; box-shadow: 0 0 0 2px var(--shadow), 5px 5px 0 2px var(--shadow); }
  .hero-title { font-size: 22px; }
  .verbs { gap: 14px; margin-top: 14px; }
  .verb { gap: 10px; padding: 6px 14px; font-size: 25px; box-shadow: var(--chip-shadow); }
  .hero-copy .lede { flex-direction: row; align-items: center; gap: 24px; padding-top: 16px; }
  .count-num { flex: none; font-size: 112px; letter-spacing: 3px; text-shadow: 4px 4px 0 var(--shadow); }
  .count-first { font-size: 28px; line-height: 1.25; }
  .count-second { font-size: 22px; }
  .hero--thin { padding: 34px 30px 26px; }
}

/* ---------- Series control ---------- */

.series-row { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 2px dashed var(--line); }
.series-q { font-size: 20px; line-height: 1.35; color: var(--text); }
.series-names { font-size: 18px; line-height: 1.3; color: var(--muted); }
.series-choice { display: flex; flex-wrap: wrap; gap: 4px 16px; }
/* Two plain answers. The chosen one gains the pointing hand, a brighter colour and an underline,
   so the states stay apart in forced colours as well as colour. */
.choice {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  min-width: 96px;
  padding: 0 8px 0 0;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--body);
  font-size: 21px;
  cursor: pointer;
}
.choice-mark { flex: none; display: flex; align-items: center; width: 34px; }
.choice .hand { visibility: hidden; }
.choice[aria-pressed="true"] { color: var(--gold-bright); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.choice[aria-pressed="true"] .hand { visibility: visible; }
@media (hover: hover) { .choice:hover { color: var(--gold-bright); } }
.series-status { font-size: 18px; color: var(--muted); }
@media (min-width: 900px) {
  .series-row { padding-top: 0; border-top: 0; }
  .series-q { font-size: 22px; }
  .series-names { font-size: 20px; }
  .choice { min-width: 104px; font-size: 22px; }
}

/* ---------- Jump to the list, phones only ---------- */

/* A small framed button at the hero's foot, at the right. With the series control there it tucks
   in beside Yes and No, which sit at the left. */
.jump-list {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--target);
  height: var(--target);
  padding: 0;
  background: var(--inset);
  border: 2px solid var(--gold);
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--shadow), 3px 3px 0 2px var(--shadow);
  cursor: pointer;
}
.hero:has(.series-row) > .jump-list { margin-top: calc(-1 * var(--target) - 12px); }
.jump-list:active { transform: translate(2px, 2px); box-shadow: 0 0 0 2px var(--shadow), 1px 1px 0 2px var(--shadow); }
@media (hover: hover) { .jump-list:hover { background: var(--panel); } }
@media (min-width: 900px) { .jump-list { display: none; } }

/* ---------- All, Solo, Co-op ---------- */

/* A framed row of three answers above the list, drawn like the series control's: the chosen one
   takes the pointing hand, the bright colour and an underline. */
.play-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 4px;
  width: fit-content;
  max-width: 100%;
  margin: 36px auto 0;
  padding: 0 6px 0 4px;
  background: var(--inset);
  border: 2px solid var(--gold-dark);
  border-radius: 2px;
  box-shadow: var(--chip-shadow);
}
.play-tab { min-width: 0; padding-right: 10px; }
.play-tab .choice-mark { width: 32px; }
.play-row + .party { margin-top: 28px; }
.play-empty { margin-top: 36px; text-align: center; font-size: 20px; line-height: 1.4; color: var(--text); }
@media (min-width: 900px) {
  .play-row { gap: 0 8px; margin-top: 44px; padding: 0 10px 0 6px; }
  .play-tab { font-size: 22px; }
  .play-row + .party { margin-top: 32px; }
}

/* ---------- Your party ---------- */

.party { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 40px; padding: 0 6px; }
.party-head { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.party-title {
  font-family: var(--title);
  font-size: 48px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--shadow);
}
.party-sub { font-size: 18px; line-height: 1.3; color: var(--muted); }
@media (min-width: 900px) {
  .party { gap: 56px; margin-top: 48px; }
  .party-title { font-size: 64px; text-shadow: 4px 4px 0 var(--shadow); }
  .party-sub { font-size: 20px; }
}

/* ---------- Cards ---------- */

.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 32px;
  margin-top: 36px;
}
@media (min-width: 880px) { #top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card { position: relative; display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 28px; }
.party-title { scroll-margin-top: 16px; }
.card-body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-width: 0; }

/* The first three: each in its own frame, with a rank plate across the top edge. */
#top .card {
  gap: 4px;
  padding: 30px 16px 6px;
  background: var(--panel);
  border: 3px solid var(--gold);
  border-radius: 3px;
  box-shadow: var(--frame-shadow);
}
#top .card::before {
  content: '';
  position: absolute;
  inset: -7px;
  z-index: 2;
  pointer-events: none;
  background: var(--corners);
}
@media (min-width: 600px) and (max-width: 879px) {
  #top .card { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); column-gap: 20px; align-items: start; }
  #top .card > .art { margin: 0; }
}

.rank {
  position: absolute;
  top: -20px;
  left: 16px;
  z-index: 3;
  margin: 0;
  padding: 5px 20px 4px;
  background: var(--plate-1);
  color: var(--plate-1-ink);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  font-family: var(--body);
  font-size: 32px;
  line-height: 1;
  letter-spacing: .5px;
}
.rank--2 { background: var(--plate-2); color: var(--plate-2-ink); }
.rank--3 { background: var(--plate-3); color: var(--plate-3-ink); }
.rank--n { background: var(--inset); color: var(--gold-bright); clip-path: none; border: 2px solid var(--gold); border-radius: 2px; }

/* A landscape block the size of a store header image. With no image, the card's own name sits in
   it. With one, the image covers a copy of the name, and if it fails the copy is there. A very
   long name grows the block rather than getting clipped, which is why only .has-img clips. */
.art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 460 / 215;
  padding: 12px 30px;
  background: var(--inset);
  outline: 2px dashed var(--line);
  outline-offset: -10px;
  text-align: center;
}
#top .card > .art { margin: -25px -11px 6px; border: 2px solid var(--shadow); }
/* With art off there's no block to hold a place for, so the name is a plain heading. */
.art--text, #top .card > .art--text { aspect-ratio: auto; margin: 0 0 6px; padding: 0; background: none; border: 0; outline: 0; text-align: left; justify-content: flex-start; }
.art.has-img { overflow: hidden; outline: 0; }
/* No image, or one that failed twice: a quiet placeholder, a dim pixel question mark on the inset.
   No name and no colour, so it can't be mistaken for the game's own art; the card names the game. */
.art:not(.has-img):not(.art--text) { background: var(--inset) url(/assets/unknown.svg) center / 48px 48px no-repeat; image-rendering: pixelated; }
/* The name copy inside an image block never shows: while loading the block stays plain, and the card names the game. */
.art:not(.art--text) .art-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#rest .art:not(.has-img):not(.art--text) { background-size: 30px 30px; }
.art-name {
  font-family: var(--body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--gold-bright);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-name {
  font-family: var(--body);
  font-size: 27px;
  line-height: 1.1;
  color: var(--text);
  overflow-wrap: anywhere;
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  padding: 1px 7px;
  border: 2px solid var(--muted);
  border-radius: 2px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text);
}
.tag--flag { border-color: var(--gold); color: var(--gold-bright); }
.tag--series { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--inset); }

/* What carries over, what's new and why: rows in a dark inset box, each label in its own column. */
.card-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--inset);
  border: 1px solid var(--line-inset);
  border-radius: 2px;
}
.marks-row, .new, .reason { display: flex; gap: 10px; font-size: 20px; line-height: 1.25; color: var(--text); }
.new, .reason, .new--none { padding-top: 8px; border-top: 2px dashed var(--line-inset); }
.card-box > :first-child { padding-top: 0; border-top: 0; }
.row-label {
  flex: none;
  width: 88px;
  font-family: var(--label);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .5px;
}
.row-text { display: flex; gap: 8px; min-width: 0; }
.marks-label { color: var(--gold-bright); }
.new-label { color: var(--ember); }
.reason-label { color: var(--muted); }
/* The reason line stacks: its label on top, then the sentence across the box's full width. */
.reason { flex-direction: column; gap: 2px; font-size: 19px; line-height: 1.3; }
.reason .row-label { width: auto; }
.marks { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mark { display: flex; align-items: center; gap: 8px; }
.is-gone { color: var(--muted); }
.is-gone .dash { color: var(--muted); }
.flame { margin-top: 3px; }
.new--none { font-size: 18px; color: var(--muted); }

.store {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 8px;
  min-height: var(--target);
  margin-top: auto;
  padding: 0 2px 0 8px;
  color: var(--text);
  font-size: 20px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .store:hover { color: var(--gold-bright); }
  /* A glint runs along the frame once on hover, where there's a pointer. */
  @media (prefers-reduced-motion: no-preference) {
    #top .card::after {
      content: '';
      position: absolute;
      inset: -3px;
      z-index: 2;
      pointer-events: none;
      border: 3px solid transparent;
      border-radius: 3px;
      background: linear-gradient(115deg, transparent 44%, rgba(255, 244, 214, .85) 50%, transparent 56%) border-box;
      background-size: 300% 100%;
      background-position: 100% 0;
      -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      opacity: 0;
    }
    #top .card:hover::after { animation: glint .8s ease-out 1; }
  }
}
@keyframes glint {
  from { opacity: 1; background-position: 100% 0; }
  to { opacity: 1; background-position: 0 0; }
}

/* ---------- Reserve: the rest of the list, as compact rows ---------- */

.reserve { margin-top: 40px; padding: 20px 16px 6px; }
@media (min-width: 900px) { .reserve { padding: 24px 26px 8px; } }
.more > summary {
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-height: var(--target);
  margin-bottom: 4px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--text);
  font-size: 21px;
  text-align: left;
}
.more > summary .chevron { margin: 0 18px 0 2px; }
.more > summary:active { transform: none; box-shadow: none; }
@media (hover: hover) {
  .more > summary:hover { background: none; color: var(--gold-bright); }
}

#rest { display: block; margin-top: 0; }
@media (min-width: 880px) { #rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; row-gap: 0; } }
#rest .card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  grid-template-areas: "art rank rank" "art name name" "box box box" "tags tags store";
  align-items: center;
  gap: 6px 14px;
  padding: 12px 0 2px;
  border-top: 2px dashed var(--line);
}
#rest .card:has(> .art--text) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "rank name name" "box box box" "tags tags store"; }
#rest .card-body { display: contents; }
#rest .rank {
  position: static;
  grid-area: rank;
  align-self: end;
  justify-self: start;
  width: 62px;
  padding: 3px 0 1px;
  font-size: 29px;
  text-align: center;
}
#rest .art {
  grid-area: art;
  margin: 0 0 0 2px;
  padding: 0 8px;
  border: 2px solid var(--gold);
  border-radius: 2px;
  outline: 0;
  box-shadow: 0 0 0 2px var(--shadow), 3px 3px 0 2px var(--shadow);
}
#rest .art-name { font-size: 14px; line-height: 1.15; }
#rest .art--text { grid-area: name; margin: 0; padding: 0; border: 0; box-shadow: none; }
#rest .card-name { grid-area: name; align-self: start; font-size: 24px; }
#rest .card-box { grid-area: box; gap: 6px; padding: 8px 10px; }
#rest .marks-row, #rest .new, #rest .reason { font-size: 19px; }
#rest .tags { grid-area: tags; gap: 5px; }
#rest .tag { padding: 0 6px; }
#rest .store { grid-area: store; align-self: center; margin: 0; padding-left: 6px; font-size: 19px; white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .is-moved { animation: settle .35s ease both; }
  @keyframes settle {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- Notes and the panel ---------- */

.ai-note { margin: 28px 4px 0; max-width: 46em; font-size: 17px; line-height: 1.4; color: var(--muted); }
.ai-note + .ai-note { margin-top: 10px; }

.copy-status { font-size: 18px; color: var(--muted); overflow-wrap: anywhere; min-width: 0; text-align: right; }

.panel { margin-top: 36px; padding: 6px 18px; }
.panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  color: var(--gold-bright);
  font-size: 21px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .panel > summary:hover { color: var(--text); }
}
.panel-body { max-width: 46em; padding: 4px 0 18px; font-size: 19px; line-height: 1.4; color: var(--muted); }
.panel-body p + p { margin-top: 10px; }
.panel-body strong { font-weight: 400; color: var(--text); }
.panel-body p + .panel-head { margin-top: 20px; }
.panel-head {
  font-family: var(--label);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .5px;
  color: var(--gold-bright);
}
.panel-head + p { margin-top: 4px; }

/* ---------- Plain pages ---------- */

.plain { padding-top: 16px; }
.plain > .display { margin-bottom: 26px; }
.prose { max-width: 46em; line-height: 1.4; }
.prose.frame { padding: 22px 20px; }

/* ---------- Privacy, as an overlay ---------- */

.privacy-dialog {
  width: min(760px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  margin: auto;
  padding: 20px 20px 24px;
  border: 2px solid var(--gold);
  background: var(--wall);
  color: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.privacy-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.privacy-dialog-head {
  position: sticky;
  top: -20px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -20px -20px 14px;
  padding: 14px 20px;
  background: inherit;
}
.privacy-dialog .prose { max-width: none; }
.prose p + p, .prose ul + p, .prose h2 + p { margin-top: 12px; }
.prose h2 {
  margin-top: 28px;
  font-family: var(--label);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gold-bright);
}
.prose ul { margin-top: 10px; }
.prose li { position: relative; padding-left: 20px; }
.prose li + li { margin-top: 4px; }
.prose li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .55em;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}
.prose .new-note { display: block; margin-top: 0; }
.prose .new-note strong { color: var(--gold-bright); }

/* ---------- Footer ---------- */

.foot {
  flex: none;
  margin-top: 56px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--muted);
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding-top: 12px;
  padding-bottom: 16px;
}
.foot-note { flex: 1 1 280px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--muted);
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .foot-links a:hover { color: var(--gold-bright); }
}

/* ---------- Motion ---------- */

/* Torches flicker, their light breathes and specks drift; the chosen answer's hand bobs. All of
   it only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .flame-a { animation: flick-a .6s steps(1) infinite; }
  .flame-b { animation: flick-b .6s steps(1) infinite; }
  .pool { animation: pool-flick 1.8s steps(1) infinite; }
  .torch--r .pool { animation-delay: -.4s; }
  .speck { animation: drift 6.5s linear infinite; }
  .speck:nth-child(2) { animation-delay: -2.4s; }
  .speck:nth-child(3) { animation-delay: -4.6s; }
  .choice[aria-pressed="true"] .hand { animation: bob .9s steps(1) infinite; }
}
@keyframes flick-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes flick-b { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes pool-flick {
  0% { opacity: 1; transform: scale(1); }
  25% { opacity: .8; transform: scale(.97); }
  50% { opacity: .95; transform: scale(1.02); }
  75% { opacity: .76; transform: scale(.98); }
}
@keyframes drift {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: .8; }
  80% { opacity: .5; }
  100% { transform: translate(9px, -40px); opacity: 0; }
}
@keyframes bob { 0% { transform: translateX(0); } 50% { transform: translateX(-3px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}