:root{
  --cn-accent:#913c75;
  --cn-bg:#1b1530;
  --cn-panel:#0f0d18;
}

/* Liens type choix */
.cn-choice{
  display:inline-block;
  margin:.4rem .4rem 0 0;
  padding:.6rem 1rem;
  border:2px solid var(--cn-accent);
  border-radius:.6rem;
  text-decoration:none;
}
.cn-choice:hover{ background:rgba(145,60,117,.12); }
.cn-choice-disabled{ opacity:.5; pointer-events:none; filter:saturate(.6); }

/* Panneau de stats (colonne gauche) */
.cn-stats{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(145,60,117,.35);
  border-radius:.8rem;
  padding:1rem;
}
.cn-stats-title{ font-weight:700; margin:.6rem 0 .4rem 0; }
.cn-stats-sub{   font-weight:700; margin:.8rem 0 .3rem 0; opacity:.95; }

/* ===== Items (stats, compétences, inventaire) : alignés à gauche avec icône ===== */
.cn-stat, .cn-skill, .cn-item{
  display:flex;
  justify-content:flex-start;   /* tout à gauche */
  align-items:center;
  gap:.5rem;                    /* espace entre icône et texte */
  padding:.35rem .6rem;
  border-radius:.6rem;
  margin:.25rem 0;
  background:rgba(0,0,0,.15);
}
.cn-item{ background:rgba(0,0,0,.10); }

.cn-icon{
  width:1.2em;                  /* colonne fixe pour les icônes */
  text-align:center;
  flex-shrink:0;
}

.cn-skill-empty,
.cn-item-empty{ opacity:.6; font-style:italic; }

.cn-stat strong, .cn-skill strong, .cn-item strong{
  font-variant-numeric:tabular-nums;
}

/* ===== Popup compétences ===== */
.cn-btn-pick{
  margin:.6rem 0; padding:.6rem 1rem;
  border:2px solid var(--cn-accent); border-radius:.6rem;
  background:transparent; cursor:pointer;
}
.cn-btn-pick:disabled{ opacity:.6; cursor:not-allowed; }
.cn-note{ margin:.3rem 0 .6rem 0; opacity:.85; }

.cn-modal[hidden]{ display:none; }
.cn-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9998; }
.cn-modal-dialog{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--cn-bg); color:#fff;
  border:1px solid rgba(145,60,117,.35); border-radius:.8rem;
  min-width:320px; max-width:640px; z-index:9999;
  box-shadow:0 10px 30px rgba(0,0,0,.45)
}
.cn-modal-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:.8rem 1rem; border-bottom:1px solid rgba(255,255,255,.08)
}
.cn-close{ background:transparent; border:none; color:#fff; font-size:1.2rem; cursor:pointer; }
.cn-modal-body{ padding:1rem; max-height:60vh; overflow:auto; background:var(--cn-panel); }
.cn-sel-skill{
  display:block; padding:.6rem .7rem; border-radius:.6rem; margin:.35rem 0;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06)
}
.cn-sel-skill input{ margin-right:.6rem; }
.cn-sel-skill small{ display:block; opacity:.75; }
.cn-err{ margin-top:.6rem; color:#ffb4b4; }

.cn-rolling{ margin-top:.8rem; padding:.6rem .8rem; border:1px dashed rgba(255,255,255,.2); border-radius:.6rem; display:none; }
.cn-rolling-title{ font-weight:600; margin-bottom:.4rem; }
.cn-roll-item{ display:flex; justify-content:space-between; align-items:center; padding:.3rem 0; }
.cn-roll-name{ opacity:.9; }
.cn-roll-val{ font-variant-numeric:tabular-nums; font-weight:700; }

/* ===== Liste Encyclopédie ===== */
.cn-lore-list{ margin:.4rem 0 0 1rem; }
.cn-lore-list li{ margin:.15rem 0; }

/* Animation quand une stat change */
.cn-flash-up {
  animation: cn-flash-green 0.8s ease;
}
.cn-flash-down {
  animation: cn-flash-red 0.8s ease;
}

@keyframes cn-flash-green {
  0%   { background-color: rgba(0, 255, 0, 0.25); }
  100% { background-color: transparent; }
}
@keyframes cn-flash-red {
  0%   { background-color: rgba(255, 0, 0, 0.25); }
  100% { background-color: transparent; }
}