/**
 * Codex Brainrot — page /wiki/tous-les-brainrots.
 *
 * PRINCIPES
 * ---------
 * 1. Les 293 fiches sont TOUTES dans le DOM : aucune pagination, aucun
 *    « voir plus ». La densite est donc le premier critere de design.
 * 2. Le rendu hors ecran est delegue a `content-visibility: auto` avec une
 *    taille intrinseque reservee : le navigateur ne peint que le visible,
 *    sans JS, et la barre de defilement ne saute pas.
 * 3. Les jetons proviennent de knowledge-ui.css (--kui-*) : le Codex n'ouvre
 *    pas un second theme.
 */

/* --------------------------------------------------------- Socle de page */

/* Le theme global applique `.content-grid { padding: 112px 0 100px }` alors
   que `body` porte deja 80px de decalage sous l'en-tete fixe (72px) : cela
   creait ~120px de vide au-dessus du fil d'Ariane. On neutralise UNIQUEMENT
   le haut, et uniquement sur cette page. Les marges laterales et la
   transformation restent gerees par sidebar.js : on n'y touche pas. */
.codex-page .codex-shell { padding-top: 22px; }

.codex-page .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.codex-page .codex-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; color: var(--kui-subtle); font-size: .78rem; font-weight: 800; }
.codex-page .codex-crumbs a { color: var(--kui-muted); }
.codex-page .codex-crumbs a:hover { color: var(--kui-green); }

/* ---------------------------------------------------------- Bandeau Codex */

/* Hauteur contenue (~128px desktop) : le catalogue doit commencer vite. */
.codex-page .codex-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px 24px;
  align-items: center;
  overflow: hidden;
  min-height: 116px;
  border: 1px solid var(--kui-line);
  border-radius: var(--kui-radius-lg);
  padding: 13px 20px;
  background:
    radial-gradient(120% 180% at 82% 0%, rgba(119, 80, 248, .34), transparent 62%),
    radial-gradient(90% 160% at 8% 100%, rgba(110, 232, 92, .12), transparent 60%),
    linear-gradient(120deg, #151a33, #1a1f42 58%, #221a4d);
  box-shadow: var(--kui-shadow);
}
.codex-page .codex-hero-text { min-width: 0; }
.codex-page .codex-hero-title {
  margin: 0;
  color: var(--kui-text);
  font-size: clamp(1.35rem, 2.3vw, 1.95rem);
  text-wrap: balance;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  background: linear-gradient(92deg, #ffffff 34%, #b18bff 68%, #4ec8ff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.codex-page .codex-hero-title em {
  background: linear-gradient(92deg, #b18bff, #7750f8 46%, #4ec8ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-style: normal;
}
.codex-page .codex-hero-meta { margin: 6px 0 0; color: var(--kui-muted); font-size: .84rem; font-weight: 800; }
.codex-page .codex-hero-meta strong { color: var(--kui-green); font-weight: 900; }
.codex-page .codex-hero-lead { margin: 3px 0 0; max-width: 62ch; color: #c1c9db; font-size: .8rem; font-weight: 600; line-height: 1.4; }

.codex-page .codex-hero-art { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; }
.codex-page .codex-hero-art img { display: block; width: auto; height: 78px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.codex-page .codex-hero-art figcaption { max-width: 20ch; color: #cbb8ff; font-size: .72rem; font-style: italic; font-weight: 700; text-align: center; }

.codex-page .codex-hero-stats {
  display: grid;
  grid-auto-flow: column;
  gap: 18px;
  margin: 0;
  border: 1px solid rgba(118, 146, 255, .3);
  border-radius: var(--kui-radius);
  padding: 8px 16px;
  background: rgba(9, 11, 24, .5);
  text-align: center;
}
.codex-page .codex-hero-stats dt { order: 2; color: var(--kui-subtle); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.codex-page .codex-hero-stats dd { order: 1; margin: 0; color: var(--kui-text); font-size: 1.35rem; font-weight: 900; line-height: 1.05; }
.codex-page .codex-hero-stats div:nth-child(1) dd { color: #7ba7ff; }
.codex-page .codex-hero-stats div:nth-child(2) dd { color: #b18bff; }
.codex-page .codex-hero-stats div:nth-child(3) dd { color: var(--kui-green); }

/* ------------------------------------------- Barre de filtres, collante */

/* La page fait plusieurs milliers de pixels : filtrer depuis « Eternal » ne
   doit jamais demander de remonter. 72px = hauteur de l'en-tete fixe. */
.codex-page .codex-bar {
  position: sticky;
  top: 72px;
  z-index: 30;
  margin: 16px 0 0;
  border: 1px solid var(--kui-line);
  border-radius: var(--kui-radius-lg);
  padding: 12px;
  background: rgba(13, 15, 26, .92);
  backdrop-filter: blur(10px);
}

.codex-page .codex-pills { display: flex; flex-wrap: wrap; gap: 6px; }
/* styles.min.css applique `button { width: 100% }` : sans width/flex
   explicites chaque pastille prendrait une ligne entiere. */
.codex-page :is(.codex-pill, .codex-view, .codex-reset, .codex-card-fav, .codex-top) { width: auto; flex: 0 0 auto; cursor: pointer; }
.codex-page .codex-pill {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--kui-line);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--kui-muted);
  background: #111627;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.codex-page .codex-pill i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--dot, #cbd5e1); box-shadow: 0 0 6px var(--dot, #cbd5e1); }
.codex-page .codex-pill b { color: var(--kui-subtle); font-weight: 900; }
.codex-page .codex-pill:hover { color: var(--kui-text); border-color: rgba(118, 146, 255, .55); }
.codex-page .codex-pill.is-active { color: var(--kui-text); border-color: var(--dot, var(--kui-green)); background: color-mix(in srgb, var(--dot, #cbd5e1) 16%, #111627); }
.codex-page .codex-pill.is-active b { color: var(--kui-text); }
.codex-page .codex-pill[hidden] { display: none; }

.codex-page .codex-tools { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) auto auto; gap: 8px; margin-top: 10px; }
.codex-page .codex-field { position: relative; margin: 0; min-width: 0; }
.codex-page .codex-field-search svg { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; transform: translateY(-50%); fill: var(--kui-subtle); pointer-events: none; }
.codex-page .codex-tools :is(input, select) {
  width: 100%;
  min-height: 40px;
  height: 40px;
  border: 1px solid var(--kui-line);
  border-radius: var(--kui-radius);
  padding: 0 12px;
  color: var(--kui-text);
  background: #111627;
  font-size: .82rem;
  font-weight: 700;
}
.codex-page .codex-field-search input { padding-left: 36px; }
.codex-page .codex-tools select {
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--kui-subtle) 50%), linear-gradient(135deg, var(--kui-subtle) 50%, transparent 50%);
  background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.codex-page .codex-tools :is(input, select):focus { border-color: var(--kui-green); box-shadow: var(--kui-focus); outline: 0; }
.codex-page .codex-tools select:disabled { opacity: .45; }

.codex-page .codex-views { display: inline-flex; gap: 4px; border: 1px solid var(--kui-line); border-radius: var(--kui-radius); padding: 3px; background: #111627; }
.codex-page .codex-view { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; }
.codex-page .codex-view svg { width: 17px; height: 17px; fill: var(--kui-subtle); }
.codex-page .codex-view:hover svg { fill: var(--kui-text); }
.codex-page .codex-view.is-active { background: var(--kui-purple); }
.codex-page .codex-view.is-active svg { fill: #fff; }

.codex-page .codex-reset { min-height: 40px; border: 1px solid var(--kui-line); border-radius: var(--kui-radius); padding: 0 14px; color: var(--kui-muted); background: #111627; font-size: .78rem; font-weight: 900; white-space: nowrap; }
.codex-page .codex-reset:hover:not(:disabled) { color: var(--kui-green); border-color: var(--kui-green); }
.codex-page .codex-reset:disabled { opacity: .4; cursor: default; }

.codex-page .codex-resultbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; margin: 12px 0 10px; color: var(--kui-muted); font-size: .8rem; font-weight: 700; }
.codex-page .codex-resultbar strong { color: var(--kui-text); font-weight: 900; }
.codex-page .codex-source { color: var(--kui-subtle); font-size: .72rem; font-weight: 600; }

.codex-page .codex-empty { display: none; border: 1px dashed var(--kui-line); border-radius: var(--kui-radius); padding: 28px; color: var(--kui-muted); text-align: center; font-weight: 700; }
.codex-page .codex-empty.is-visible { display: block; }

/* ------------------------------------------------------ Sections rareté */

.codex-page .codex-sections { display: flex; flex-direction: column; gap: 18px; }

.codex-page .codex-rarity {
  /* Hors ecran, le navigateur saute la mise en page de la section entiere.
     La taille reservee evite tout saut de la barre de defilement. */
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
  /* Ancre : compense l'en-tete fixe + la barre collante. */
  scroll-margin-top: 196px;
}
.codex-page .codex-rarity[hidden] { display: none; }

/* Bandeau compact (~58px) : il y a dix categories, aucune ne merite un hero. */
.codex-page .codex-rarity-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  gap: 6px 12px;
  align-items: center;
  margin-bottom: 10px;
  overflow: hidden;
  min-height: 56px;
  border: 1px solid color-mix(in srgb, var(--rarity) 34%, transparent);
  border-left: 4px solid var(--rarity);
  border-radius: var(--kui-radius);
  padding: 9px 16px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rarity) 17%, #11142a), #11142a 62%);
}
.codex-page .codex-rarity-head h2 { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--kui-text); font-size: 1.02rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.codex-page .codex-rarity-head h2 i { width: 10px; height: 10px; border-radius: 50%; background: var(--rarity); box-shadow: 0 0 9px var(--rarity); }
.codex-page .codex-rarity-count { border: 1px solid color-mix(in srgb, var(--rarity) 40%, transparent); border-radius: 999px; padding: 3px 10px; color: var(--rarity); background: rgba(0, 0, 0, .3); font-size: .66rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.codex-page .codex-rarity-intro { margin: 0; overflow: hidden; color: var(--kui-muted); font-size: .78rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.codex-page .codex-rarity-tagline { margin: 0; color: color-mix(in srgb, var(--rarity) 72%, #ffffff); font-size: .78rem; font-style: italic; font-weight: 700; white-space: nowrap; }


/* ------------------------------------------- Selecteur de langue compact */

/* `.content-grid` est deja `position: relative` : la barre sort du flux et se
   pose au bout de la ligne du fil d'Ariane, sans rien pousser vers le bas. */
.codex-page .codex-shell > .wiki-language-bar {
  position: absolute;
  top: 18px;
  right: 0;
  z-index: 5;
  gap: 4px;
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
}
.codex-page .codex-shell > .wiki-language-bar .wiki-language-label { display: none; }
.codex-page .codex-shell > .wiki-language-bar .wiki-language-link {
  min-width: 34px;
  min-height: 26px;
  border-radius: 8px;
  color: var(--kui-muted);
  background: #111627;
  font-size: .68rem;
}
.codex-page .codex-shell > .wiki-language-bar .wiki-language-link.is-current {
  color: #06070f;
  border-color: var(--kui-green);
  background: var(--kui-green);
}
/* Le fil d'Ariane ne doit jamais passer sous les trois pastilles. */
.codex-page .codex-crumbs { padding-right: 130px; }

/* ------------------------------------ Raccourci au bout du bandeau rarete */

.codex-page .codex-rarity-go {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--rarity) 45%, transparent);
  border-radius: 50%;
  background: rgba(0, 0, 0, .28);
}
.codex-page .codex-rarity-go svg { width: 14px; height: 14px; fill: var(--rarity); }
.codex-page .codex-rarity-go:hover { background: var(--rarity); }
.codex-page .codex-rarity-go:hover svg { fill: #06070f; }

/* --------------------------------------------------------------- Grille */

/* auto-fill + minmax : la grille se termine naturellement, sans cellule
   fantome a droite, a toutes les largeurs. */
.codex-page .codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px; }

/* ---------------------------------------------------------- Carte (grille) */

.codex-page .codex-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 3px;
  overflow: hidden;
  border: 1px solid var(--kui-line);
  border-radius: var(--kui-radius);
  padding: 8px 10px 10px;
  background: var(--kui-panel);
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}
.codex-page .codex-card[hidden] { display: none; }
.codex-page .codex-card:hover { border-color: var(--rarity); background: var(--kui-panel-raised); transform: translateY(-2px); }
.codex-page .codex-card:has(.codex-card-link:focus-visible) { border-color: var(--rarity); box-shadow: var(--kui-focus); }

/* Hauteur d'image reservee par aspect-ratio : aucun decalage au chargement. */
.codex-page .codex-card-media {
  position: relative;
  display: flex;
  aspect-ratio: 4 / 3;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rarity) 20%, transparent), transparent 68%), #0c0f1e;
}
.codex-page .codex-card-media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.codex-page .codex-card-ph { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--kui-subtle); }
.codex-page .codex-card-ph svg { width: 26px; height: 26px; fill: currentcolor; opacity: .6; }
.codex-page .codex-card-ph em { font-size: .6rem; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

.codex-page .codex-card-badge {
  position: absolute;
  top: 13px; left: 15px;
  z-index: 1;
  max-width: calc(100% - 58px);
  overflow: hidden;
  border-radius: 6px;
  padding: 2px 7px;
  color: #06070f;
  background: var(--rarity);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.codex-page .codex-card-cta {
  position: absolute;
  right: 6px; bottom: 6px;
  border-radius: 999px;
  padding: 3px 9px;
  color: #fff;
  background: rgba(119, 80, 248, .92);
  font-size: .62rem;
  font-weight: 900;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
}
.codex-page .codex-card:hover .codex-card-cta { opacity: 1; transform: none; }

.codex-page .codex-card-name { margin: 6px 0 0; overflow: hidden; color: var(--kui-text); font-size: .8rem; font-weight: 900; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.codex-page .codex-card-link { color: inherit; }
/* Un seul lien par carte, mais toute la carte est cliquable. */
.codex-page .codex-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.codex-page .codex-card-link:focus-visible { outline: 0; }

.codex-page .codex-card-stat { display: flex; gap: 6px; align-items: baseline; margin: 0; overflow: hidden; color: var(--kui-subtle); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.codex-page .codex-card-stat b { overflow: hidden; color: var(--kui-text); font-weight: 900; text-overflow: ellipsis; }
.codex-page .codex-card-type { display: none; }

.codex-page .codex-card-fav {
  position: absolute;
  top: 12px; right: 14px;
  z-index: 2;
  display: inline-flex;
  width: 24px; height: 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 10, 22, .68);
}
.codex-page .codex-card-fav svg { width: 14px; height: 14px; fill: none; stroke: #dbe3f7; stroke-width: 1.8; }
.codex-page .codex-card-fav:hover svg { stroke: #ff6b7d; }
.codex-page .codex-card-fav.is-on svg { fill: #ff2d55; stroke: #ff2d55; }

/* ------------------------------------------------------------ Vue liste */

/* Vue tabulaire tres compacte : vignette, nom, rarete, type, gain, prix. */
.codex-page[data-codex-view="list"] .codex-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--kui-line);
  border-radius: var(--kui-radius);
  background: var(--kui-line);
}
.codex-page[data-codex-view="list"] .codex-card {
  /* Colonnes dans l'ordre du DOM : vignette, rarete, nom, gain, prix, type. */
  grid-template-columns: 34px 108px minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) auto;
  grid-template-rows: auto;
  gap: 14px;
  align-items: center;
  border: 0;
  border-radius: 0;
  padding: 5px 12px;
}
.codex-page[data-codex-view="list"] .codex-card:hover { transform: none; background: var(--kui-panel-raised); }
.codex-page[data-codex-view="list"] .codex-card-media { aspect-ratio: 1; width: 34px; border-radius: 7px; }
.codex-page[data-codex-view="list"] .codex-card-media img { padding: 1px; }
.codex-page[data-codex-view="list"] :is(.codex-card-cta, .codex-card-ph em) { display: none; }
.codex-page[data-codex-view="list"] .codex-card-ph svg { width: 15px; height: 15px; }
.codex-page[data-codex-view="list"] .codex-card-name { margin: 0; font-size: .78rem; }

/* Le badge quitte la vignette pour devenir une vraie colonne « Rareté ». */
.codex-page[data-codex-view="list"] .codex-card-badge {
  position: static;
  justify-self: start;
  max-width: none;
  color: var(--rarity);
  background: color-mix(in srgb, var(--rarity) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity) 40%, transparent);
}
.codex-page[data-codex-view="list"] .codex-card-type { display: block; margin: 0; overflow: hidden; color: var(--kui-muted); font-size: .7rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
/* Une carte sans type garde sa colonne : les colonnes restent alignees. */
.codex-page[data-codex-view="list"] .codex-card-fav { position: static; }

@media (max-width: 900px) {
  .codex-page[data-codex-view="list"] .codex-card { grid-template-columns: 34px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; }
  .codex-page[data-codex-view="list"] :is(.codex-card-badge, .codex-card-type) { display: none; }
}

/* ------------------------------------------------- Bouton retour en haut */

.codex-page .codex-top {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 40;
  display: inline-flex;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kui-line);
  border-radius: 50%;
  background: rgba(19, 23, 42, .94);
  box-shadow: var(--kui-shadow);
}
.codex-page .codex-top[hidden] { display: none; }
.codex-page .codex-top svg { width: 18px; height: 18px; fill: var(--kui-text); }
.codex-page .codex-top:hover { border-color: var(--kui-green); }

/* Bouton « Filtres » : injecte par le JS, visible uniquement en mobile. */
.codex-page .codex-drawer-toggle {
  display: none;
  min-height: 40px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--kui-line);
  border-radius: var(--kui-radius);
  padding: 0 14px;
  color: var(--kui-text);
  background: #111627;
  font-size: .78rem;
  font-weight: 900;
}
.codex-page .codex-drawer-toggle[aria-expanded="true"] { color: var(--kui-green); border-color: var(--kui-green); }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1280px) {
  .codex-page .codex-tools { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) auto; }
  .codex-page .codex-reset { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .codex-page .codex-hero { grid-template-columns: minmax(0, 1fr) auto; }
  .codex-page .codex-hero-art { display: none; }
  .codex-page .codex-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .codex-page .codex-rarity-intro { display: none; }
}

@media (max-width: 900px) {
  .codex-page .codex-tools { grid-template-columns: minmax(0, 1fr) auto auto; }
  .codex-page .codex-field-search { grid-column: 1 / -1; }
  .codex-page :is([data-codex-rarity], [data-codex-type], [data-codex-sort]) { min-width: 0; }
  .codex-page .codex-field:not(.codex-field-search) { grid-column: span 1; }
}

@media (max-width: 760px) {
  .codex-page .codex-shell { padding-top: 14px; }
  .codex-page .codex-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 14px 16px; }
  .codex-page .codex-hero-stats { grid-auto-flow: column; justify-content: space-between; padding: 8px 12px; }
  .codex-page .codex-hero-stats dd { font-size: 1.15rem; }
  .codex-page .codex-hero-lead { display: none; }

  /* Mobile : la barre reste collante mais ne mange qu'une ligne — les
     pastilles defilent horizontalement, les filtres secondaires passent dans
     le tiroir « Filtres ». */
  .codex-page .codex-bar { top: 64px; padding: 8px; border-radius: var(--kui-radius); }
  .codex-page .codex-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .codex-page .codex-pills::-webkit-scrollbar { display: none; }
  /* Replie : recherche + affichage + Filtres tiennent sur UNE ligne, pour que
     la barre collante ne mange que ~112px de hauteur d'ecran. */
  .codex-page .codex-tools { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
  .codex-page .codex-field-search { grid-column: 1; }
  .codex-page .codex-views { grid-column: 2; }
  .codex-page .codex-drawer-toggle { display: inline-flex; grid-column: 3; justify-content: center; }
  .codex-page .codex-tools:not(.is-collapsed) .codex-field-search { grid-column: 1 / -1; }
  .codex-page .codex-tools.is-collapsed .codex-field:not(.codex-field-search),
  .codex-page .codex-tools.is-collapsed .codex-reset { display: none; }
  .codex-page .codex-tools:not(.is-collapsed) .codex-field:not(.codex-field-search) { grid-column: 1 / -1; }
  .codex-page .codex-tools:not(.is-collapsed) .codex-reset { grid-column: 1 / -1; }

  .codex-page .codex-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .codex-page .codex-rarity { scroll-margin-top: 140px; }
  .codex-page .codex-rarity-head { grid-template-columns: auto auto; gap: 4px 10px; min-height: 0; padding: 8px 12px; }
  .codex-page .codex-rarity-tagline { display: none; }
  .codex-page .codex-rarity-go { display: none; }
  .codex-page .codex-crumbs { padding-right: 112px; }
  .codex-page .codex-shell > .wiki-language-bar { top: 10px; }
  .codex-page .codex-top { right: 12px; bottom: 74px; }
}

@media (max-width: 420px) {
  .codex-page .codex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .codex-page .codex-hero-title { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .codex-page :is(.codex-card, .codex-pill, .codex-card-cta) { transition: none; }
  .codex-page .codex-card:hover { transform: none; }
  .codex-page .codex-rarity { scroll-behavior: auto; }
}