/* ================================================================
   CHARACTER — Section "Ajouter à votre héro / tous les super-items"
   Figma : 1575-7423 (section) · 1575-2449 (Pixel Boy variant)

   3 panneaux en flex-row :
     .ch-panel--char : 284px  · palette Cyan
     .ch-panel--inv  : flex-1 · palette Gris
     .ch-panel--desc : flex-1 · palette Gris

   Technique DOM-strip (≡ btn-pixel.css) :
     .ch-side  → flex-row [ .ch-outer | .ch-mid | .ch-istrip ]
     Blocs dans mid + istrip :
       .cb-bd (4px noir) · .cb-hl (2px light) · .cb-fi (flex fill)
       .cb-cr (flex cream, right-mid only)    · .cb-sh (6px shadow)
     Corps horizontal :
       .cb-bd (2px) · .cb-hl (2px) · .ch-center (flex-1) · .cb-hl · .cb-sh · .cb-bd

   Inner dark panel (Inventory + Description) — bevel INVERSÉ :
     .ch-ip-side → flex-row [ .ch-ip-outer | .ch-ip-mid | .ch-ip-istrip ]
     Blocs : .cib-bd (4px) · .cib-fi (flex) · .cib-cr (flex) · .cib-sh (6px)
     Corps : [2px bd][6px sh au DESSUS][2px bd] puis .ch-ip-center

   Palettes (scoped via CSS custom props sur .ch-panel) :
     Cyan : --cch-blk #1a0f26 · --cch-lit #f0fffd · --cch-fil #6ebeff · --cch-shd #3a8cfe
     Gris : --cch-blk #1a0f26 · --cch-lit #f1f1f1 · --cch-fil #6d686e · --cch-shd #3c383e
================================================================ */

/* ── Variables par défaut (palette Gris) ──────────────────────── */
.ch-panel {
  --cch-blk: #1a0f26;
  --cch-lit: #f1f1f1;
  --cch-fil: #6d686e;
  --cch-shd: #3c383e;
}

/* ================================================================
   SECTION
================================================================ */

.character {
  position:   relative;
  /* ── Thème courant (défaut : Pixel Boy / cyan) ── */
  --ch-bg:    #f0fffd;
  --ch-accent:#3a8cfe;
  --ch-fil:   #6ebeff;
  --ch-badge: #c2e4ff;   /* cyan-100 */
  background: var(--ch-bg);
  overflow:   hidden;
  transition:     background 0.35s ease;
}

/* ═══════════════════════════════════════════════════════════════
   SYSTÈME DE HEADING GÉNÉRIQUE — utilisé par toutes les sections
   Variables à déclarer sur la section parente :
     --ch-accent      : couleur des dots + <em>  (ex. #7b3dee)
     --heading-color  : couleur du texte         (défaut : #1a0f26)
                        → surcharger en blanc pour fonds sombres
   ════════════════════════════════════════════════════════════ */
.ch__suptitle,
.ch__title,
.ch__subtitle { text-align: center; }

.ch__suptitle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  font-family:     var(--font-body);
  font-size:       var(--text-sm);
  font-weight:     var(--fw-medium);
  color:           var(--heading-color, #1a0f26);
  letter-spacing:  2px;
}

.ch__suptitle::before,
.ch__suptitle::after {
  content:     '';
  display:     block;
  width:       4px;
  height:      4px;
  background:  var(--ch-accent);
  flex-shrink: 0;
  transition:  background 0.35s ease;
}

.ch__title {
  font-family:    var(--font-heading);
  font-size:      var(--text-h2);
  font-weight:    var(--fw-regular);
  line-height:    var(--lh-heading);
  letter-spacing: var(--ls-h2);
  color:          var(--heading-color, #1a0f26);
  text-transform: uppercase;
}

.ch__title em {
  font-style: normal;
  color:      var(--ch-accent);
  transition: color 0.35s ease;
}

.ch__subtitle {
  font-family: var(--font-body);
  font-size:   var(--text-lg);
  font-weight: var(--fw-medium);
  color:       var(--heading-color, #1a0f26);
  line-height: 1.55;
  opacity:     0.85;
}

/* ── Conteneur des 3 panneaux — .container-gap-xs (sections.css) */
/* Scoped : étire les panneaux sur toute la hauteur du row */
.character .container-gap-xs {
  align-items: stretch;
  max-width:   1280px;
  min-height:  338px;
  align-self:  center;
}

/* ================================================================
   PANNEAU GÉNÉRIQUE — flex-row : side · body · side
================================================================ */

.ch-panel {
  display:     flex;
  align-items: stretch;
}

/* Cyan — panneau Character (284px fixe) */
.ch-panel--char {
  flex:       0 0 284px;
  width:      284px;
  --cch-lit:  #f0fffd;
  --cch-fil:  #6ebeff;
  --cch-shd:  #3a8cfe;
  --cch-ctr:  #c2e4ff;
}

/* Gris — Inventory (382px fixe) */
.ch-panel--inv {
  flex:      0 0 382px;
  width:     382px;
}

/* Gris — Description (fill) */
.ch-panel--desc {
  flex:      1;
  min-width: 0;
}

/* ── Bord latéral : flex-row de 3 strips ─────────────────────── */
.ch-side {
  display:        flex;
  flex-direction: row;
  align-items:    stretch;
  flex-shrink:    0;
}

/* outer : 2px · encoche coin (≡ .btn-pixel__outer) */
.ch-outer {
  flex-shrink: 0;
  width:       2px;
  height:      calc(100% - 8px); /* 2 × 4px step */
  background:  var(--cch-blk);
  align-self:  flex-start;
  margin-top:  4px;
}

/* mid : 2px · py-2px → marche supplémentaire */
.ch-mid {
  display:        flex;
  flex-direction: column;
  flex-shrink:    0;
  width:          2px;
  padding:        2px 0;
}

/* inner-strip : 2px · sans padding */
.ch-istrip {
  display:        flex;
  flex-direction: column;
  flex-shrink:    0;
  width:          2px;
}

/* ─────────────────────────────────────────────────────────────────
   Blocs couleur dans les strips latéraux (mid + istrip)
   ──────────────────────────────────────────────────────────────── */

/* cb-bd : bordure noire, 4px */
.ch-mid    > .cb-bd,
.ch-istrip > .cb-bd { flex-shrink: 0; width: 2px; height: 4px; background: var(--cch-blk); }

/* cb-hl : highlight clair, 2px (côté gauche, left-002/003) */
.ch-mid    > .cb-hl,
.ch-istrip > .cb-hl { flex-shrink: 0; width: 2px; height: 2px; background: var(--cch-lit); }

/* cb-fi : remplissage flex (fill) */
.ch-mid    > .cb-fi,
.ch-istrip > .cb-fi { flex: 1 0 0; min-height: 1px; width: 2px; background: var(--cch-fil); }

/* cb-cr : remplissage crème (right-002 only, sans corner beads) */
.ch-mid    > .cb-cr { flex: 1 0 0; min-height: 1px; width: 2px; background: var(--cch-lit); }

/* cb-sh : ombre 3D, 6px */
.ch-mid    > .cb-sh,
.ch-istrip > .cb-sh { flex-shrink: 0; width: 2px; height: 6px; background: var(--cch-shd); }

/* ── Corps du panneau (flex-col) ──────────────────────────────── */
.ch-body {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  min-width:      0;
}

/* Bandes horizontales dans le corps */
.ch-body > .cb-bd { flex-shrink: 0; height: 2px; background: var(--cch-blk); }
.ch-body > .cb-hl { flex-shrink: 0; height: 2px; background: var(--cch-lit); }
.ch-body > .cb-sh { flex-shrink: 0; height: 6px; background: var(--cch-shd); }

/* Zone centrale flex-1 (fond = fill) */
.ch-center {
  flex:           1 0 0;
  min-height:     1px;
  display:        flex;
  flex-direction: column;
  background:     var(--cch-fil);
}

/* ================================================================
   CONTENU — PANNEAU CHARACTER (cyan)
================================================================ */

.ch__char-content {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  flex:            1;
  padding:         8px 0 4px;
}

.ch__char-name {
  font-family:    var(--font-mono); /* VCR OSD Mono */
  font-size:      16px;
  font-weight:    400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height:    1;
  color:          #1a0f26;
  text-align:     center;
  white-space:    nowrap;
}

.ch__char-cta {
  display:         flex;
  flex:            1;
  align-items:     stretch;
  justify-content: center;
  width:           100%;
}

/* ================================================================
   CONTENU — PANNEAUX GRIS (Inventory + Description)
   flex-col : titre + inner dark panel
================================================================ */

.ch__gpanel-content {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  flex:           1;
  padding:        8px 0 4px;
}

.ch__gpanel-title {
  font-family:    var(--font-mono);
  font-size:      16px;
  font-weight:    400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height:    1;
  color:          #ffffff;
  padding-inline: 16px;
  white-space:    nowrap;
  text-align:     center;
}

/* Zone flex-1 autour du inner panel (étire le contenu) */
.ch__gpanel-area {
  flex:        1;
  display:     flex;
  align-items: stretch;
}

/* ================================================================
   INNER DARK PANEL (Inventory + Description)
   Bevel INVERSÉ : shadow en HAUT → aspect enfoncé / recessed
   --cip-blk #1a0f26 · --cip-fil (inv=#1a0f26, desc=#0d111c) · --cip-shd #3c383e
================================================================ */

.ch-inpanel {
  display:     flex;
  align-items: stretch;
  flex:        1;
  --cip-blk:   #1a0f26;
  --cip-fil:   #1a0f26;  /* Inventory : noir */
  --cip-shd:   #3c383e;
}

.ch-inpanel--desc {
  --cip-fil: #0d111c;  /* Description : bleu très sombre */
}

/* ── Bords du inner panel (sans highlight) ───────────────────── */
.ch-ip-side {
  display:        flex;
  flex-direction: row;
  align-items:    stretch;
  flex-shrink:    0;
}

.ch-ip-outer {
  flex-shrink: 0;
  width:       2px;
  height:      calc(100% - 8px);
  background:  var(--cip-blk);
  align-self:  flex-start;
  margin-top:  4px;
}

.ch-ip-mid {
  display:        flex;
  flex-direction: column;
  flex-shrink:    0;
  width:          2px;
  padding:        2px 0;
}

.ch-ip-istrip {
  display:        flex;
  flex-direction: column;
  flex-shrink:    0;
  width:          2px;
}

/* Blocs inner panel strips (pas de cb-hl / highlight) */
.ch-ip-mid    > .cib-bd,
.ch-ip-istrip > .cib-bd  { flex-shrink: 0; width: 2px; height: 4px; background: var(--cip-blk); }

/* cib-sep : séparateur 2px noir entre shadow et fill (bevel inversé) */
.ch-ip-mid    > .cib-sep,
.ch-ip-istrip > .cib-sep { flex-shrink: 0; width: 2px; height: 2px; background: var(--cip-blk); }

.ch-ip-mid    > .cib-fi,
.ch-ip-istrip > .cib-fi  { flex: 1 0 0; min-height: 1px; width: 2px; background: var(--cip-fil); }

/* right-mid sans corner bead */
.ch-ip-mid    > .cib-cr  { flex: 1 0 0; min-height: 1px; width: 2px; background: var(--cip-fil); }

.ch-ip-mid    > .cib-sh,
.ch-ip-istrip > .cib-sh  { flex-shrink: 0; width: 2px; height: 6px; background: var(--cip-shd); }

/* ── Corps du inner panel ─────────────────────────────────────── */
.ch-ip-body {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  min-width:      0;
}

/* BEVEL INVERSÉ : shadow au sommet → look "creusé" */
.ch-ip-body > .cib-bd  { flex-shrink: 0; height: 2px; background: var(--cip-blk); }
.ch-ip-body > .cib-sh  { flex-shrink: 0; height: 6px; background: var(--cip-shd); }
.ch-ip-body > .cib-sep { flex-shrink: 0; height: 2px; background: var(--cip-blk); }

/* Centre du inner panel */
.ch-ip-center {
  flex:       1 0 0;
  min-height: 1px;
  background: var(--cip-fil);
}

/* ================================================================
   INVENTORY — Grille 4×3
   4 cols × 88px + 3 gaps × 2px = 358px
   3 rows × 88px + 2 gaps × 2px = 268px
================================================================ */

.ch__inv-inner {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             8px;
  padding:         4px 0;
}

.ch__inv-grid {
  display:               grid;
  grid-template-columns: repeat(4, 88px);
  grid-template-rows:    repeat(3, 88px);
  gap:                   2px;
}

.ch__inv-item {
  position:    relative;
  box-sizing:  border-box;
  width:       88px;
  height:      88px;
  background:  var(--ch-bg);
  overflow:    visible;
  flex-shrink: 0;
  cursor:      pointer;
  transition:  background 0.35s ease;
}

/* Item sélectionné */
.ch__inv-item.is-active {
  border:  4px solid var(--ch-accent);
  cursor:  default;
  z-index: 1;
}

/* Coins pixels (6×6px, fond noir, positionnés aux 4 angles) */
.ch__inv-dot {
  position:       absolute;
  width:          6px;
  height:         6px;
  background:     #1a0f26;
  z-index:        3;
  pointer-events: none;
}
.ch__inv-dot.tl { top:    -2px; left:  -2px; }
.ch__inv-dot.tr { top:    -2px; right: -2px; }
.ch__inv-dot.bl { bottom: -2px; left:  -2px; }
.ch__inv-dot.br { bottom: -2px; right: -2px; }

/* Coins décalés en état actif (border 4px → dots à -6px) */
.ch__inv-item.is-active .ch__inv-dot.tl { top:    -6px; left:  -6px; }
.ch__inv-item.is-active .ch__inv-dot.tr { top:    -6px; right: -6px; }
.ch__inv-item.is-active .ch__inv-dot.bl { bottom: -6px; left:  -6px; }
.ch__inv-item.is-active .ch__inv-dot.br { bottom: -6px; right: -6px; }

.ch__inv-item img {
  display:          block;
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center;
}

/* ── Bloc services — contenu de .container-md ────────────────── */
.ch__services {
  display:         flex;
  flex-wrap:       wrap;
  gap:             4px;
  justify-content: center;
  width:           100%;
}

/* ── CTA (centré, sous les services) ─────────────────────────── */
.ch__cta {
  display:         flex;
  justify-content: center;
  width:           100%;
  margin-top:      16px;
}

/* ── Couleur du CTA synchronisée avec le thème personnage ──────
   --ch-bg / --ch-badge / --ch-accent sont définis sur .character
   et changent avec data-char → le bouton suit automatiquement    */
.character .ch__cta .btn-pixel {
  --bp-light: var(--ch-bg);
  --bp-gold:  var(--ch-badge);
  --bp-shade: var(--ch-accent);
}

/* ================================================================
   PORTRAIT FRAME (panneau Character)
   Bevel INVERSÉ Cyan : shadow en HAUT → aspect cadre enfoncé
   Left  : [outer][mid][istrip]
     mid/istrip : [4px bd][6px sh #3a8cfe][2px sep][flex fi #c2e4ff][4px bd]
   Body  : [2px bd][6px sh][2px sep][flex center #c2e4ff][2px bd]
   Right : [istrip][mid][outer] — mid=[4px bd][flex cr #c2e4ff][4px bd]
================================================================ */

.ch__portrait {
  display:     flex;
  align-items: stretch;
  flex:        1;
  width:       100%;
}

/* Outer : 2px, encoche coin (py-4px via margin-top) */
.ch__portrait-outer {
  flex-shrink: 0;
  width:       2px;
  height:      calc(100% - 8px);
  background:  #1a0f26;
  align-self:  flex-start;
  margin-top:  4px;
}

/* Mid : 2px, py-2px */
.ch__portrait-mid {
  display:        flex;
  flex-direction: column;
  flex-shrink:    0;
  width:          2px;
  padding:        2px 0;
}

/* Inner strip : 2px, sans padding */
.ch__portrait-istrip {
  display:        flex;
  flex-direction: column;
  flex-shrink:    0;
  width:          2px;
}

/* Blocs couleur dans les strips portrait */
.ch__portrait-mid    > .pf-bd,
.ch__portrait-istrip > .pf-bd  { flex-shrink: 0; width: 2px; height: 4px; background: #1a0f26; }
.ch__portrait-mid    > .pf-sh,
.ch__portrait-istrip > .pf-sh  { flex-shrink: 0; width: 2px; height: 6px; background: var(--cch-shd); }
.ch__portrait-mid    > .pf-sep,
.ch__portrait-istrip > .pf-sep { flex-shrink: 0; width: 2px; height: 2px; background: #1a0f26; }
.ch__portrait-mid    > .pf-fi,
.ch__portrait-istrip > .pf-fi  { flex: 1 0 0; min-height: 1px; width: 2px; background: var(--cch-ctr); }
/* right-mid : fill crème seul, sans shadow */
.ch__portrait-mid    > .pf-cr  { flex: 1 0 0; min-height: 1px; width: 2px; background: var(--cch-ctr); }

/* Corps du portrait */
.ch__portrait-body {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  min-width:      0;
}

.ch__portrait-body > .pf-bd  { flex-shrink: 0; height: 2px; background: #1a0f26; }
.ch__portrait-body > .pf-sh  { flex-shrink: 0; height: 6px; background: var(--cch-shd); }
.ch__portrait-body > .pf-sep { flex-shrink: 0; height: 2px; background: #1a0f26; }

/* Zone image — flex pour centrer l'image en hauteur */
.ch__portrait-center {
  flex:            1 0 0;
  min-height:      1px;
  background:      var(--cch-ctr);
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.ch__portrait-img {
  display:    block;
  width:      100%;
  height:     auto;
}

/* ================================================================
   BADGE PIXEL-ART (#c2e4ff)
   left strip (2px py-2px fill) + label + right strip (mirrored)
================================================================ */

.ch__badge {
  display:     flex;
  align-items: stretch;
}

.ch__badge-side {
  display:        flex;
  flex-direction: column;
  flex-shrink:    0;
  width:          2px;
  padding:        2px 0;
}

.ch__badge-fill {
  flex:       1 0 0;
  width:      2px;
  min-height: 1px;
  background: var(--ch-badge);
}

.ch__badge-label {
  box-sizing:     border-box;
  height:         24px;
  padding:        6px 4px 0;
  background:     var(--ch-badge);
  font-family:    var(--font-heading); /* Raw Pixel */
  font-size:      14px;
  font-weight:    400;
  text-transform: uppercase;
  color:          #0d111c;
  white-space:    nowrap;
  line-height:    1;
}

/* ================================================================
   DESCRIPTION — Contenu du inner panel (#0d111c)
   flex-col · justify-between · px-8 py-6
================================================================ */

.ch__desc-content {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  flex:            1;
  padding:         8px;
  gap:             16px;
}

.ch__desc-top {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.ch__desc-title {
  font-family:    var(--font-heading);
  font-size:      32px;
  font-weight:    var(--fw-bold);
  line-height:    1.2;
  color:          var(--ch-fil);
  text-transform: uppercase;
  transition:     color 0.35s ease;
}

.ch__desc-sub {
  font-family:    var(--font-heading);
  font-size:      24px;
  font-weight:    400;
  line-height:    1.3;
  color:          var(--ch-fil);
  text-transform: uppercase;
  transition:     color 0.35s ease;
}

.ch__desc-body {
  font-family: var(--font-body);
  font-size:   14px;
  font-weight: var(--fw-medium);
  color:       #ffffff;
  line-height: 1.55;
  opacity:     0.9;
}

/* ── Stats (Économie, Sérénité, …) ───────────────────────────── */
.ch__desc-stats {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

/* ================================================================
   STAT ITEM — Bevel blanc à deux marches (xleft py-8px + left py-4px)
   Côté gauche : xleft (4px py-8px) + left (4px py-4px)
   Centre      : bg-white px-4 py-8
   Côté droit  : left (4px py-4px) + xleft (4px py-8px)
================================================================ */

.ch__stat {
  display:     flex;
  align-items: stretch;
}

/* Outer step : 4px wide · py-8px */
.ch__stat-xstep {
  display:        flex;
  flex-direction: column;
  flex-shrink:    0;
  width:          4px;
  padding:        8px 0;
}

/* Inner step : 4px wide · py-4px */
.ch__stat-step {
  display:        flex;
  flex-direction: column;
  flex-shrink:    0;
  width:          4px;
  padding:        4px 0;
}

/* Fill block (shared) */
.ch__stat-xstep > span,
.ch__stat-step  > span {
  flex:       1 0 0;
  width:      4px;
  min-height: 1px;
  background: #ffffff;
}

/* Contenu central */
.ch__stat-inner {
  flex:            1;
  background:      #ffffff;
  padding:         8px 4px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  min-width:       0;
}

.ch__stat-name {
  font-family:    var(--font-heading);
  font-size:      18px;
  font-weight:    400;
  text-transform: uppercase;
  color:          #0d111c;
  white-space:    nowrap;
  line-height:    1;
}

.ch__stat-stars {
  display:  flex;
  gap:      8px;
  flex-shrink: 0;
}

/* ── Étoile pixel-art (SVG 20×20 inline) ─────────────────────── */
.ch__star {
  display:         block;
  flex-shrink:     0;
  width:           20px;
  height:          20px;
  image-rendering: pixelated;
}

/* Étoile vide : star-gray.png natif, pas de filtre */
.ch__star--empty {
  opacity: 0.6;
}

/* ================================================================
   RESPONSIVE
================================================================ */

/* ── Tablette ≤ 1100px ── */
@media (max-width: 1100px) {
  .ch { padding-block: 80px; }

  .ch-panel--char {
    flex:  0 0 220px;
    width: 220px;
  }

  .ch__inv-grid {
    grid-template-columns: repeat(3, 80px);
    grid-template-rows:    repeat(4, 80px);
  }

  .ch__inv-item { width: 80px; height: 80px; }
}

/* ── Mobile ≤ 768px ── */
@media (max-width: 768px) {
  .ch { padding-block: var(--space-8); gap: 48px; }

  .character .container-gap-xs {
    flex-direction: column;
    padding-inline: 16px;
  }

  .ch-panel--char { flex: none; width: 100%; }
  .ch-panel--inv,
  .ch-panel--desc { min-height: 280px; }

  .ch__char-content { padding: 24px; }

  .ch__inv-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows:    auto;
  }

  .ch__inv-item { width: auto; height: auto; aspect-ratio: 1; }

  .ch__desc-content { padding: 16px; }
  .ch__desc-title   { font-size: 24px; }
  .ch__desc-sub     { font-size: 18px; }
}

/* ================================================================
   THÈMES — remplacé via JS : section.dataset.char = 'pixel-boy' | 'ultra-color' | 'impacktor'
   Par défaut (pixel-boy) : cyan, défini dans .character et .ch-panel--char ci-dessus
================================================================ */

/* ── Ultra Color (orange / chaud) ── */
.character[data-char="ultra-color"] {
  --ch-bg:     #fff3da;
  --ch-accent: #fe9e3a;
  --ch-fil:    #ffc15b;
  --ch-badge:  #ffd793;  /* orange-100 */
}
.character[data-char="ultra-color"] .ch-panel--char {
  --cch-lit:   #fff3da;
  --cch-fil:   #ffc15b;
  --cch-shd:   #fe9e3a;
  --cch-ctr:   #ffd793;
}

/* ── Impacktor (violet / sombre) ── */
.character[data-char="impacktor"] {
  --ch-bg:     #e1e0ff;
  --ch-accent: #7b3dee;
  --ch-fil:    #b493ff;
  --ch-badge:  #d4c2ff;  /* purple-100 */
}
.character[data-char="impacktor"] .ch-panel--char {
  --cch-lit:   #e1d5ff;
  --cch-fil:   #b493ff;
  --cch-shd:   #7b3dee;
  --cch-ctr:   #e1d5ff;
}