/* Culprit group ("cg-"): several neon-glass culprits shown together.
   Rule: all grey except the selected one. Hover = lift only (never lights a character).
   UI colours here are neutral on purpose; culprit colours live only in the character art.
   Light ground by default (#F7F5F0 / white). Add .cg--dark on the root for dark grounds. */

.cg {
  --cg-ink: #1D1D1F;          /* names */
  --cg-muted: #5E5E63;        /* types, caption (5.9:1 on #F7F5F0) */
  --cg-rule: #1D1D1F;         /* selected underline (non-colour cue) */
  --cg-focus: #C2410C;        /* focus ring */
  --cg-art: 168px;            /* character size in row / wrap layouts */
  --cg-fade: 0.25s;           /* lit/grey cross-fade */
  container-type: inline-size;
  font-family: Quicksand, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--cg-ink);
}
.cg--dark {
  --cg-ink: #EDEBE6;
  --cg-muted: #B9B6AE;        /* 9.3:1 on #111114 */
  --cg-rule: #EDEBE6;
  --cg-focus: #FFFFFF;
}

.cg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* default (and fallback without container queries): wrap, centred */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 4px;
}
.cg-list > li { display: flex; }

.cg-item {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: calc(var(--cg-art) + 8px);
  padding: 4px 4px 10px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.cg-item:focus-visible {
  outline: 3px solid var(--cg-focus);
  outline-offset: 2px;
}

/* The two images are pixel-aligned, so lit simply fades in over grey. */
.cg-art {
  position: relative;
  display: block;
  width: var(--cg-art);
  aspect-ratio: 1;
  transition: transform 0.2s ease;
}
.cg-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.cg-lit { opacity: 0; transition: opacity var(--cg-fade) ease; }
.cg-grey { opacity: 1; transition: opacity var(--cg-fade) ease; }
.cg-item[aria-pressed="true"] .cg-lit { opacity: 1; }
.cg-item[aria-pressed="true"] .cg-grey { opacity: 0; }

/* One gentle flicker after the fade (a single 40% dip; well under 3 flashes per second). */
.cg-item.cg-on .cg-lit { animation: cg-flicker 0.36s ease-in-out var(--cg-fade) 1; }
@keyframes cg-flicker {
  0%, 100% { opacity: 1; }
  45% { opacity: 0.6; }
}

/* Hover: lift only. */
@media (hover: hover) {
  .cg-item:hover .cg-art { transform: translateY(-6px); }
}

.cg-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.cg-type {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cg-muted);
}
/* Selected is shown by more than colour: lit art + bold name + underline. */
.cg-item[aria-pressed="true"] .cg-name {
  font-weight: 700;
  border-bottom-color: var(--cg-rule);
}

/* Live caption under the group */
.cg-live {
  margin: 18px auto 0;
  max-width: 44em;
  min-height: 3em;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cg-muted);
}
.cg-live b { color: var(--cg-ink); font-weight: 700; }

/* name + type wrapper: transparent except in the single-column layout */
.cg-text { display: contents; }

/* ---- Layouts (by the component's own width) ---------------------------------- */
/* Wide: all nine in one row */
@container (min-width: 1180px) {
  .cg-list { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
  .cg-list > li { justify-content: center; }
  .cg-list { --cg-art: min(160px, calc((100cqi - 32px) / 9 - 8px)); }
}
/* 900–1179: wrap (flex default above), slightly smaller art */
@container (min-width: 900px) and (max-width: 1179.98px) {
  .cg-list { --cg-art: 150px; }
}
/* 521–899: 3 x 3 */
@container (min-width: 521px) and (max-width: 899.98px) {
  .cg-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cg-list > li { justify-content: center; }
  .cg-list { --cg-art: min(180px, calc(100cqi / 3 - 24px)); }
}
/* up to 520: single column, art beside the text */
@container (max-width: 520px) {
  .cg-list { display: grid; grid-template-columns: 1fr; gap: 4px; }
  .cg-list { --cg-art: 92px; }
  .cg-item {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 4px 10px 4px 4px;
    text-align: left;
    min-height: 48px;
  }
  .cg-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .cg-name { font-size: 17px; }
  .cg-type { font-size: 14px; }
  .cg-live { text-align: left; }
}

/* Reduced motion: instant swap, no flicker, no lift */
@media (prefers-reduced-motion: reduce) {
  .cg-lit, .cg-grey, .cg-art { transition: none; }
  .cg-item.cg-on .cg-lit { animation: none; }
  .cg-item:hover .cg-art { transform: none; }
}

/* ---- Single character (always lit) -------------------------------------------- */
.cg-single {
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 320px;
  font-family: Quicksand, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
}
.cg-single img { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; }
.cg-single figcaption { display: flex; flex-direction: column; gap: 2px; }
.cg-single .cg-name { border: 0; padding: 0; font-size: 18px; font-weight: 700; color: var(--cg-ink, #1D1D1F); }
.cg-single .cg-type { font-size: 14px; color: var(--cg-muted, #5E5E63); }