/* Compagnon D&D 5e — version 11.1 */
/* Stepper */
  .stepper { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 26px; }
  .step-pill {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    padding: 7px 13px;
    border: 1.5px solid var(--border-aged);
    border-radius: 20px;
    background: var(--card);
    color: var(--ink-soft);
    cursor: pointer;
    transition: all .15s;
    user-select: none;
  }
  .step-pill.active { background: var(--blood); color: #f7ecd8; border-color: var(--blood-dark); }
  .step-pill.done { border-color: var(--gold); color: var(--gold); }
  .step-pill.locked { opacity: .45; cursor: not-allowed; }

  .panel {
    background: var(--card);
    border: 1.5px solid var(--border-aged);
    border-radius: 10px;
    padding: 26px 28px;
    box-shadow: 0 2px 12px rgba(60,40,10,.08);
  }

  h2.panel-title {
    font-family: 'Cinzel', serif;
    font-size: 22px;
    color: var(--blood);
    border-bottom: 1px solid var(--border-aged);
    padding-bottom: 10px;
    margin-bottom: 6px;
  }
  .panel-sub { color: var(--ink-soft); font-style: italic; margin-bottom: 18px; font-size: 15px; }

  /* Cards grid */
  .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
  .choice-card {
    border: 1.5px solid var(--border-aged);
    border-radius: 8px;
    padding: 13px 15px;
    background: #fffdf6;
    cursor: pointer;
    transition: all .12s;
  }
  .choice-card:hover { border-color: var(--gold); transform: translateY(-1px); }
  .choice-card.selected { border-color: var(--blood); background: #fdf3ea; box-shadow: 0 0 0 1px var(--blood); }
  .choice-card h3 { font-family: 'Cinzel', serif; font-size: 15px; color: var(--ink); }
  .choice-card .tag { display: inline-block; font-size: 11px; color: var(--gold); font-style: italic; margin-bottom: 4px; }
  .choice-card p { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
  .choice-card .mini { font-size: 12px; color: var(--blood); margin-top: 6px; font-weight: 500; }
  /* Étiquette de classe parente : papier fantasy inspiré des fioles d'apothicaire. */
  .cards-grid.class-label-grid {
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:18px;
  }
  .choice-card.ui-class-label {
    position:relative; isolation:isolate; display:grid;
    grid-template-columns:78px minmax(0,1fr); gap:14px; align-items:center;
    min-height:162px; padding:18px 19px 35px 22px;
    overflow:hidden; border:0; border-left:0; border-radius:0;
    background:
      radial-gradient(circle at 14% 18%,rgba(255,255,255,.68),transparent 27%),
      radial-gradient(circle at 84% 74%,rgba(137,92,34,.10),transparent 34%),
      repeating-linear-gradient(102deg,rgba(92,63,28,.025) 0 1px,transparent 1px 6px),
      linear-gradient(145deg,#fff8df 0%,#f2dfb8 54%,#ead2a2 100%);
    color:#37291b; cursor:pointer;
    clip-path:polygon(10px 0,calc(100% - 13px) 0,100% 10px,calc(100% - 5px) 50%,100% calc(100% - 11px),calc(100% - 12px) 100%,9px 100%,0 calc(100% - 10px),5px 50%,0 9px);
    box-shadow:inset 0 0 22px rgba(103,66,24,.11);
    filter:drop-shadow(0 6px 6px rgba(43,29,16,.18));
    transition:transform .16s ease,filter .16s ease,background .16s ease;
  }
  .choice-card.ui-class-label::before {
    content:""; position:absolute; inset:5px; z-index:-1; pointer-events:none;
    border:1px solid rgba(128,85,31,.52);
    clip-path:polygon(7px 0,calc(100% - 8px) 0,100% 7px,calc(100% - 3px) 50%,100% calc(100% - 7px),calc(100% - 8px) 100%,7px 100%,0 calc(100% - 7px),3px 50%,0 7px);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
  }
  .choice-card.ui-class-label:hover,
  .choice-card.ui-class-label:focus-visible {
    border:0; border-left:0; outline:none;
    transform:translateY(-3px) rotate(-.15deg);
    filter:drop-shadow(0 10px 9px rgba(43,29,16,.27));
  }
  .choice-card.ui-class-label.selected {
    border:0; border-left:0;
    background:
      radial-gradient(circle at 14% 18%,rgba(255,255,255,.72),transparent 27%),
      radial-gradient(circle at 86% 78%,rgba(137,30,34,.12),transparent 36%),
      repeating-linear-gradient(102deg,rgba(92,63,28,.025) 0 1px,transparent 1px 6px),
      linear-gradient(145deg,#fff7dc 0%,#f4ddb2 52%,#eccb9a 100%);
    box-shadow:inset 0 0 0 2px rgba(139,26,26,.76),inset 0 0 24px rgba(103,66,24,.13);
    filter:drop-shadow(0 9px 8px rgba(100,24,26,.24));
  }
  .choice-card.ui-class-label.selected::after {
    content:"✓"; position:absolute; top:12px; right:13px; z-index:4;
    display:grid; place-items:center; width:30px; height:30px;
    border:2px solid #f7dfb2; border-radius:50%;
    background:#9d272b; color:#fff7df;
    box-shadow:0 2px 6px rgba(55,24,19,.32),inset 0 0 0 2px rgba(255,255,255,.14);
    font-family:'Cinzel',serif; font-size:14px; font-weight:900;
  }
  .ui-class-label-emblem {
    position:relative; width:78px; height:78px; padding:4px;
    border:1px solid rgba(115,74,28,.74); border-radius:50%;
    background:#5a3c21;
    box-shadow:0 3px 8px rgba(58,36,17,.28),inset 0 0 0 2px #e6c98f;
  }
  .ui-class-label-emblem::after {
    content:""; position:absolute; inset:-5px; border:1px dashed rgba(115,74,28,.46);
    border-radius:50%; pointer-events:none;
  }
  .ui-class-label-emblem img {
    display:block; width:100%; height:100%; border-radius:50%; object-fit:cover;
    filter:saturate(.88) contrast(1.05) sepia(.08);
  }
  .ui-class-label-copy { min-width:0; align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
  .ui-class-label-source {
    display:block; max-width:calc(100% - 32px); margin-bottom:2px; overflow:hidden;
    color:#8b6428; font-family:'Alegreya',serif; font-size:10px; font-style:italic;
    line-height:1.2; text-overflow:ellipsis; white-space:nowrap;
  }
  .ui-class-label-heading { display:flex; align-items:center; gap:7px; min-width:0; }
  .choice-card.ui-class-label h3 {
    min-width:0; margin:0; padding:0; overflow:hidden; color:#312416;
    font-family:'Cinzel',serif; font-size:19px; line-height:1.2;
    letter-spacing:.02em; text-overflow:ellipsis; text-transform:none; white-space:nowrap;
  }
  .ui-class-label-caster {
    flex:0 0 auto; padding:2px 6px; border:1px solid rgba(139,26,26,.42);
    border-radius:999px; color:#8b1a1a; background:rgba(255,247,222,.58);
    font-size:8px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  }
  .ui-class-label-facts {
    display:grid; grid-template-columns:minmax(74px,.7fr) minmax(0,1.3fr); gap:6px;
    margin:9px 0 7px;
  }
  .ui-class-label-facts span {
    min-width:0; padding:5px 7px; border-top:1px solid rgba(113,76,32,.28);
    border-bottom:1px solid rgba(113,76,32,.22); background:rgba(255,251,235,.38);
  }
  .ui-class-label-facts small {
    display:block; color:#8a6a3d; font-size:7px; font-weight:800;
    letter-spacing:.08em; line-height:1.2; text-transform:uppercase;
  }
  .ui-class-label-facts strong {
    display:block; overflow:hidden; color:#7f1d22; font-size:11px; line-height:1.35;
    text-overflow:ellipsis; white-space:nowrap;
  }
  .choice-card.ui-class-label .ui-class-label-features {
    display:block; margin:0; overflow:hidden; color:#68543a; font-size:11px;
    line-height:1.32; text-overflow:ellipsis; white-space:nowrap;
  }
  .ui-class-label-action {
    position:absolute; right:18px; bottom:10px; z-index:2; color:#8b1a1a;
    font-family:'Cinzel',serif; font-size:9px; font-weight:900;
    letter-spacing:.09em; text-transform:uppercase;
  }
  .ui-class-label-action::after { content:" →"; }
  .ui-class-label.selected .ui-class-label-action::after { content:""; }
  .ui-class-label.ui-size-small { grid-template-columns:62px minmax(0,1fr); min-height:134px; padding:14px 16px 31px 18px; }
  .ui-class-label.ui-size-small .ui-class-label-emblem { width:62px; height:62px; }
  .ui-class-label.ui-size-small h3 { font-size:16px; }
  .ui-class-label.ui-size-large { grid-template-columns:92px minmax(0,1fr); min-height:184px; padding:21px 23px 38px 25px; }
  .ui-class-label.ui-size-large .ui-class-label-emblem { width:92px; height:92px; }
  .ui-class-label.ui-size-large h3 { font-size:22px; }
  @media (max-width:520px) {
    .cards-grid.class-label-grid { grid-template-columns:1fr; gap:13px; }
    .choice-card.ui-class-label { grid-template-columns:66px minmax(0,1fr); min-height:142px; padding:15px 15px 32px 18px; }
    .ui-class-label-emblem { width:66px; height:66px; }
    .choice-card.ui-class-label h3 { font-size:17px; }
    .ui-class-label-facts { grid-template-columns:72px minmax(0,1fr); }
  }
  .of-crest > img { width:100%; height:100%; object-fit:cover; display:block; }

  /* Catalogue visuel des races */
  .race-heading-shell { position:relative; z-index:20; }
  .race-heading-row {
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    border-bottom:1px solid var(--border-aged); margin-bottom:6px;
  }
  .race-heading-row h2.panel-title {
    flex:1; border-bottom:0; margin-bottom:0;
  }
  .race-preferences-btn {
    flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
    border:1px solid var(--border-aged); border-radius:999px;
    background:#fffdf6; color:var(--ink-soft); padding:7px 12px;
    font-family:'Cinzel',serif; font-size:11px; font-weight:700; cursor:pointer;
  }
  .race-preferences-btn span { color:var(--gold); font-size:16px; line-height:1; }
  .race-preferences-btn:hover,
  .race-preferences-btn.active { border-color:var(--blood); color:var(--blood); background:#fdf3ea; }
  .race-preferences-panel {
    position:absolute; top:calc(100% + 8px); right:0; z-index:50;
    width:min(520px,calc(100vw - 56px)); margin:0; padding:13px 14px;
    border:1px solid var(--border-aged); border-radius:8px; background:#f8f5ec;
    box-shadow:0 12px 30px rgba(35,25,15,.22);
  }
  .race-preferences-panel::before {
    content:""; position:absolute; top:-7px; right:30px; width:12px; height:12px;
    border-left:1px solid var(--border-aged); border-top:1px solid var(--border-aged);
    background:#f8f5ec; transform:rotate(45deg);
  }
  .race-preferences-heading {
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    margin-bottom:10px;
  }
  .race-preferences-heading strong {
    display:block; color:var(--ink); font-family:'Cinzel',serif; font-size:13px;
  }
  .race-preferences-heading span { color:var(--ink-soft); font-size:11px; }
  .race-preferences-close {
    width:27px; height:27px; border:0; border-radius:50%;
    background:transparent; color:var(--ink-soft); font-size:20px; line-height:1; cursor:pointer;
  }
  .race-preferences-close:hover { background:#eee7d7; color:var(--blood); }
  .race-preferences-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .race-preference-option {
    display:flex; align-items:flex-start; gap:9px; padding:10px 11px;
    border:1px solid #d3c8ae; border-radius:7px; background:#fffdf6; cursor:pointer;
  }
  .race-preference-option.checked { border-color:var(--blood); background:#fdf3ea; }
  .race-preference-option input { margin-top:3px; accent-color:var(--blood); }
  .race-preference-option span { display:block; min-width:0; }
  .race-preference-option strong { display:block; color:var(--ink); font-size:13px; }
  .race-preference-option small { display:block; margin-top:2px; color:var(--ink-soft); font-size:11px; line-height:1.35; }
  .race-bonus-select-label {
    display:inline-flex; align-items:center; gap:6px; margin:4px 8px 4px 0;
    color:var(--blood); font-weight:700;
  }
  .race-bonus-select-label select { width:180px; }
  .race-bonus-help { margin:0 0 5px; }
  .race-bonus-warning { margin-bottom:4px; }
  .race-tabs {
    display:flex; gap:7px; overflow-x:auto; padding:2px 2px 8px;
    margin:0 0 13px; scrollbar-width:thin;
  }
  .race-tab {
    flex:0 0 auto; border:1px solid var(--border-aged); border-radius:999px;
    background:var(--card); color:var(--ink-soft); padding:8px 13px;
    font-family:'Cinzel',serif; font-size:11px; font-weight:700; cursor:pointer;
  }
  .race-tab:hover { border-color:var(--gold); color:var(--ink); }
  .race-tab.active { border-color:var(--blood); background:var(--blood); color:#fff; }
  .race-tab-intro {
    display:flex; justify-content:space-between; align-items:flex-end; gap:14px;
    margin-bottom:14px; padding:13px 15px; border-left:4px solid var(--gold);
    background:rgba(255,253,246,.88); border-radius:0 7px 7px 0;
  }
  .race-tab-intro h3 { margin:0 0 3px; font-family:'Cinzel',serif; font-size:17px; }
  .race-tab-intro p { margin:0; color:var(--ink-soft); font-size:12px; }
  .race-image-editor {
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    margin:0 0 15px; padding:11px 13px; border:1px dashed var(--gold);
    border-radius:7px; background:#fff9e9;
  }
  .race-image-editor strong { display:block; color:var(--ink); font-size:13px; }
  .race-image-editor span { color:var(--ink-soft); font-size:12px; }
  .race-image-progress {
    flex:0 0 auto; padding:5px 9px; border-radius:999px;
    background:var(--parchment-dark); color:var(--blood)!important;
    font-family:'Cinzel',serif; font-weight:700;
  }
  .race-image-editor-actions {
    display:flex; flex:0 0 auto; align-items:center; justify-content:flex-end;
    gap:7px; flex-wrap:wrap;
  }
  .race-image-lock {
    padding:6px 10px; border:1px solid #98a0a6; border-radius:999px;
    background:#2c3135; color:#fff!important; font-size:11px!important;
    font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  }
  .race-image-lock.unlocked { border-color:#d6a338; background:#fff4d6; color:#7b5710!important; }
  .race-lock-btn {
    border:1px solid var(--blood); border-radius:5px; background:#fff;
    color:var(--blood); padding:6px 9px; font-size:11px; font-weight:700; cursor:pointer;
  }
  .race-lock-btn:hover { background:var(--blood); color:#fff; }
  .race-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
  .race-catalog-section { margin-top:18px; }
  .race-catalog-section:first-of-type { margin-top:0; }
  .race-catalog-section-title {
    display:flex; align-items:center; gap:10px; margin:0 0 10px;
    color:var(--ink); font-family:'Cinzel',serif; font-size:14px;
  }
  .race-catalog-section-title::after {
    content:""; height:1px; flex:1; background:var(--border-aged);
  }
  .race-choice-card { padding:0; overflow:hidden; }
  .race-card-media {
    position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1/1;
    overflow:hidden; border-bottom:1px solid #d5dade; background:#fff;
  }
  .race-card-media > img { width:100%; height:100%; object-fit:cover; display:block; }
  .race-image-placeholder {
    width:72%; height:72%; border:1px dashed #d9dde0; border-radius:6px;
    background:linear-gradient(135deg,#fff,#f5f6f7); color:#a3abb1;
    display:grid; place-items:center; text-align:center; padding:12px;
    font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  }
  .race-image-edit-btn {
    position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
    border:1px solid rgba(255,255,255,.9); border-radius:5px;
    background:rgba(30,34,37,.88); color:#fff; padding:7px 9px;
    font-size:11px; font-weight:700; cursor:pointer; backdrop-filter:blur(3px);
  }
  .race-image-edit-btn:hover { background:var(--blood); }
  .race-image-edit-btn:disabled {
    border-color:rgba(255,255,255,.65); background:rgba(45,50,54,.78);
    color:#e2e4e5; cursor:not-allowed;
  }
  .race-image-remove-btn {
    position:absolute; top:8px; left:8px; z-index:2; width:28px; height:28px;
    border:1px solid rgba(255,255,255,.9); border-radius:50%;
    background:rgba(30,34,37,.82); color:#fff; cursor:pointer;
  }
  /* Carte de race parente : toute la sélection des races utilise cette structure. */
  .choice-card.ui-race-card {
    position:relative; display:flex; flex-direction:column; min-height:100%; padding:0;
    overflow:hidden; border:1px solid #817052; border-left:1px solid #817052;
    border-radius:11px; background:#fffaf0; color:var(--ink);
    box-shadow:0 7px 16px rgba(45,35,23,.12), inset 0 0 0 3px rgba(255,255,255,.72);
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
  }
  .choice-card.ui-race-card::before {
    content:""; position:absolute; inset:5px; z-index:3; border:1px solid rgba(151,113,48,.24);
    border-radius:7px; pointer-events:none;
  }
  .choice-card.ui-race-card:hover,
  .choice-card.ui-race-card:focus-visible {
    border-color:var(--gold); border-left-color:var(--gold);
    box-shadow:0 12px 24px rgba(45,35,23,.2),0 0 0 2px rgba(183,135,47,.2);
    transform:translateY(-4px); outline:none;
  }
  .choice-card.ui-race-card.selected {
    border-color:var(--blood); border-left-color:var(--blood); background:#fff8ed;
    box-shadow:0 12px 25px rgba(99,24,26,.2),0 0 0 2px var(--blood),inset 0 0 0 3px rgba(255,255,255,.72);
  }
  .choice-card.ui-race-card.selected::after {
    content:"✓"; top:12px; right:12px; z-index:6; width:28px; height:28px;
    border:2px solid #fff8ed; border-radius:50%; background:var(--blood);
    box-shadow:0 2px 8px rgba(35,20,18,.35); font-size:14px;
  }
  .ui-race-card-visual { position:relative; background:#2a2e31; }
  .ui-race-card .race-card-media { aspect-ratio:1/1; border-bottom:0; }
  .ui-race-card .race-card-media::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg,rgba(18,20,21,.06) 48%,rgba(18,20,21,.48) 100%);
  }
  .ui-race-card .race-image-edit-btn,
  .ui-race-card .race-image-remove-btn { z-index:5; }
  .ui-race-card-source {
    position:absolute; top:13px; left:13px; z-index:4; max-width:calc(100% - 58px);
    overflow:hidden; padding:5px 8px; border:1px solid rgba(255,255,255,.38);
    border-radius:4px; background:rgba(30,34,37,.84); color:#fff;
    font-size:9px; font-weight:800; letter-spacing:.05em; text-overflow:ellipsis;
    text-transform:uppercase; white-space:nowrap; backdrop-filter:blur(3px);
  }
  .ui-race-card-body {
    position:relative; display:flex; flex:1; flex-direction:column; padding:17px 17px 14px;
    background:
      radial-gradient(circle at 12% 8%,rgba(204,166,87,.14),transparent 34%),
      linear-gradient(180deg,#fffdf7 0%,#f8f0dd 100%);
  }
  .ui-race-card-heading { padding-bottom:9px; border-bottom:1px solid rgba(129,112,82,.3); }
  .ui-race-card-kicker {
    display:block; margin-bottom:2px; color:var(--blood); font-size:9px; font-weight:900;
    letter-spacing:.12em; text-transform:uppercase;
  }
  .choice-card.ui-race-card h3 {
    margin:0; padding:0 28px 0 0; color:var(--ink); font-family:'Cinzel',serif;
    font-size:19px; line-height:1.2; letter-spacing:.01em; text-transform:none;
  }
  .choice-card.ui-race-card .ui-race-card-description {
    display:-webkit-box; min-height:54px; margin:10px 0 12px; overflow:hidden;
    color:var(--ink-soft); font-size:13px; line-height:1.4;
    -webkit-box-orient:vertical; -webkit-line-clamp:3;
  }
  .ui-race-card-stats {
    display:grid; grid-template-columns:minmax(0,1fr) 80px; gap:7px; margin-top:auto;
  }
  .ui-race-card-stat {
    min-width:0; padding:8px 9px; border:1px solid rgba(129,112,82,.28);
    border-radius:5px; background:rgba(255,255,255,.68);
  }
  .ui-race-card-stat span {
    display:block; margin-bottom:3px; color:#7b858d; font-size:8px; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase;
  }
  .ui-race-card-stat strong {
    display:block; overflow:hidden; color:var(--blood); font-size:11px; line-height:1.25;
    text-overflow:ellipsis;
  }
  .ui-race-card-speed strong { white-space:nowrap; }
  .ui-race-card-footer {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    margin-top:11px; padding-top:10px; border-top:1px solid rgba(129,112,82,.3);
  }
  .ui-race-card-options { color:#727b81; font-size:10px; font-style:italic; }
  .ui-race-card-action {
    flex:0 0 auto; color:var(--blood); font-size:10px; font-weight:900;
    letter-spacing:.06em; text-transform:uppercase;
  }
  .ui-race-card-action::after { content:" →"; }
  .ui-race-card.selected .ui-race-card-action::after { content:""; }
  .ui-race-card.ui-size-small .ui-race-card-body { padding:13px; }
  .ui-race-card.ui-size-small .race-card-media { aspect-ratio:4/3; }
  .ui-race-card.ui-size-small h3 { font-size:16px; }
  .ui-race-card.ui-size-large .ui-race-card-body { padding:20px; }
  .ui-race-card.ui-size-large h3 { font-size:22px; }
  .ui-race-card.ui-size-large .ui-race-card-description { min-height:63px; font-size:14px; }
  .race-nested-note {
    margin-top:10px; padding:9px 11px; border-radius:6px;
    background:var(--parchment-dark); color:var(--ink-soft); font-size:12px;
  }
  .race-detail-selection {
    position:relative; isolation:isolate;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,270px); gap:24px;
    align-items:start; margin:15px 0;
    padding:clamp(42px,4vw,58px) clamp(62px,6vw,88px);
    border:0; border-radius:0; background:transparent;
  }
  .race-detail-selection::before {
    content:"";
    position:absolute; inset:0; z-index:0; box-sizing:border-box;
    border-style:solid;
    border-width:clamp(34px,3vw,46px) clamp(48px,4.5vw,70px);
    border-image-source:url("../assets/backgrounds/race-detail-parchment.png");
    border-image-slice:120 180 fill;
    border-image-width:1;
    filter:drop-shadow(0 7px 7px rgba(47,37,23,.22));
    pointer-events:none;
  }
  .race-detail-selection > * {
    position:relative;
    z-index:1;
  }
  .race-detail-portrait {
    order:2; align-self:center;
    position:relative; width:100%; aspect-ratio:1/1; overflow:hidden;
    border:1px solid rgba(118,87,43,.38); border-radius:6px; background:#fffaf0;
    box-shadow:0 3px 9px rgba(54,39,20,.16);
  }
  .race-detail-portrait > img { width:100%; height:100%; object-fit:cover; display:block; }
  .race-detail-portrait .race-image-placeholder { width:100%; height:100%; border:0; border-radius:0; }
  .race-detail-copy { order:1; min-width:0; }
  .race-detail-eyebrow {
    display:block; margin-bottom:3px; color:var(--blood);
    font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  }
  .race-detail-copy h4 {
    margin:0 0 5px; color:var(--ink); font-family:'Cinzel',serif;
    font-size:clamp(23px,2.2vw,31px); line-height:1.15;
  }
  .race-detail-source {
    margin:0 0 14px!important; color:var(--ink-soft)!important;
    font-size:12px!important; font-style:italic;
  }
  .race-lore-list { display:grid; gap:18px; }
  .race-lore-block { position:relative; }
  .race-lore-block > p {
    margin:0; color:var(--ink); font-size:15px; line-height:1.62;
  }
  .race-lore-placeholder { color:#8e979d!important; font-style:italic; }
  .race-lore-edit-btn {
    margin-top:7px; border:1px solid #c9ced2; border-radius:4px;
    background:#f8f9fa; color:var(--ink-soft); padding:5px 8px;
    font-size:10px; font-weight:700; cursor:pointer;
  }
  .race-lore-edit-btn:hover:not(:disabled) { border-color:var(--blood); color:var(--blood); }
  .race-lore-edit-btn:disabled { cursor:not-allowed; opacity:.66; }
  .race-lore-editor-panel {
    margin-top:9px; padding:10px; border:1px solid var(--gold);
    border-radius:6px; background:#fff9e9;
  }
  .race-lore-editor-panel textarea {
    width:100%; min-height:140px; resize:vertical; padding:9px 10px;
    border:1px solid #bfc6ca; border-radius:4px; background:#fff;
    color:var(--ink); font:14px/1.5 'Alegreya',Georgia,serif;
  }
  .race-lore-editor-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
  .race-missing-box {
    margin:18px 0 4px; padding:14px 16px; border:1px solid var(--border-aged);
    border-left:4px solid #9aa2a8; border-radius:6px; background:#fafafa;
  }
  .race-missing-box h3 { margin:0 0 5px; font-family:'Cinzel',serif; font-size:14px; }
  .race-missing-box p { margin:0 0 9px; color:var(--ink-soft); font-size:12px; }
  .race-missing-list { display:flex; flex-wrap:wrap; gap:6px; }
  .race-missing-list span {
    padding:5px 8px; border:1px dashed #bcc2c6; border-radius:999px;
    background:#fff; color:#626b72; font-size:11px;
  }

  @media (max-width:640px) {
    .race-heading-row { align-items:flex-start; }
    .race-heading-row h2.panel-title { min-width:0; }
    .race-preferences-btn { padding:7px 9px; }
    .race-preferences-panel {
      position:fixed; top:74px; left:10px; right:10px;
      width:auto; max-height:calc(100vh - 92px); overflow:auto;
    }
    .race-preferences-panel::before { display:none; }
    .race-preferences-grid { grid-template-columns:1fr; }
    .race-bonus-select-label { display:flex; margin-right:0; }
    .race-bonus-select-label select { flex:1; width:auto; }
  }

  /* Detail box */
  .detail-box {
    margin-top: 20px;
    border: 1px solid var(--border-aged);
    border-left: 4px solid var(--blood);
    background: #fffdf6;
    border-radius: 6px;
    padding: 16px 18px;
  }
  .detail-box h3 { font-family: 'Cinzel', serif; color: var(--blood); font-size: 17px; margin-bottom: 8px; }
  .detail-box ul { margin: 6px 0 6px 20px; font-size: 14px; }
  .detail-box li { margin-bottom: 4px; }
  .detail-box strong { color: var(--ink); }
  .mobile-selection-target { scroll-margin-top:72px; }

  /* Forms */
  label.field-label { display: block; font-family: 'Cinzel', serif; font-size: 13px; color: var(--ink-soft); margin: 14px 0 5px; }
  select, input[type="text"], textarea {
    width: 100%;
    padding: 9px 12px;
    font-family: 'Alegreya', serif;
    font-size: 15px;
    border: 1.5px solid var(--border-aged);
    border-radius: 6px;
    background: #fffdf6;
    color: var(--ink);
  }
  select:focus, input:focus, textarea:focus { outline: none; border-color: var(--blood); }
  textarea { resize: vertical; min-height: 70px; }

  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  @media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }
  .details-section {
    margin:18px 0; padding:0 16px 16px; border:1px solid var(--border-aged);
    border-radius:8px; background:#fffdf6;
  }
  .details-section summary {
    margin:0 -16px; padding:12px 16px; cursor:pointer; list-style:none;
    font-family:'Cinzel',serif; font-size:15px; font-weight:700; color:var(--blood);
  }
  .details-section summary::-webkit-details-marker { display:none; }
  .details-section summary::after { content:"＋"; float:right; color:var(--gold); }
  .details-section[open] summary { border-bottom:1px solid var(--border-aged); margin-bottom:2px; }
  .details-section[open] summary::after { content:"−"; }
  .details-section .note { margin:10px 0 0; }

  /* Formulaire-parchemin parent de l'onglet Détails. */
  .ui-parchment-form {
    position:relative; isolation:isolate; margin:30px 8px 24px; padding:52px 50px 58px;
    border:1px solid rgba(123,84,39,.42); border-radius:3px;
    background:
      radial-gradient(circle at 12% 9%,rgba(255,255,255,.72),transparent 24%),
      radial-gradient(circle at 88% 72%,rgba(155,104,42,.09),transparent 34%),
      repeating-linear-gradient(0deg,rgba(92,58,19,.018) 0,rgba(92,58,19,.018) 1px,transparent 1px,transparent 5px),
      linear-gradient(104deg,#f2dfb5 0%,#fff4d8 18%,#f8e8c4 51%,#fff0cf 82%,#e8cf9d 100%);
    color:#3f2d1c; box-shadow:0 18px 32px rgba(49,33,17,.22),inset 0 0 42px rgba(110,72,29,.13);
  }
  .ui-parchment-form::before {
    content:""; position:absolute; inset:14px; z-index:-1; pointer-events:none;
    border:1px solid rgba(125,85,37,.28); border-radius:46% 4px 42% 5px/5px 42% 4px 38%;
    box-shadow:inset 0 0 0 3px rgba(255,250,224,.18);
  }
  .ui-parchment-form::after {
    content:"✦"; position:absolute; right:35px; top:30px; z-index:-1;
    color:rgba(111,72,28,.08); font-family:'Cinzel',serif; font-size:116px; line-height:1;
    transform:rotate(14deg); pointer-events:none;
  }
  .ui-parchment-roll {
    position:absolute; left:-11px; right:-11px; height:24px; z-index:2; pointer-events:none;
    border:1px solid rgba(117,76,31,.40); border-radius:50%;
    background:linear-gradient(180deg,#f8e8c3,#d7b77b 46%,#f5dfb4 55%,#e3c58d);
    box-shadow:0 5px 9px rgba(52,35,17,.20),inset 0 2px 4px rgba(255,255,255,.48);
  }
  .ui-parchment-roll::before,
  .ui-parchment-roll::after {
    content:""; position:absolute; top:2px; width:22px; height:18px;
    border:1px solid rgba(103,66,27,.42); border-radius:50%; background:#caa566;
    box-shadow:inset 3px 0 5px rgba(75,45,14,.18);
  }
  .ui-parchment-roll::before { left:-3px; }
  .ui-parchment-roll::after { right:-3px; transform:scaleX(-1); }
  .ui-parchment-roll-top { top:-11px; }
  .ui-parchment-roll-bottom { bottom:-11px; transform:scaleY(-1); }
  .ui-parchment-form-header { position:relative; z-index:1; text-align:center; }
  .ui-parchment-form-eyebrow {
    display:block; color:#966b2b; font-family:'Alegreya',serif; font-size:12px;
    font-style:italic; letter-spacing:.13em; text-transform:uppercase;
  }
  .ui-parchment-form-header h3 {
    margin:3px 0 7px; color:#4a2f1b; font-family:'Cinzel',serif;
    font-size:clamp(24px,3vw,36px); line-height:1.12;
  }
  .ui-parchment-form-subtitle {
    max-width:720px; margin:0 auto; color:#765b3b; font-size:14px; font-style:italic; line-height:1.45;
  }
  .ui-parchment-form-content { position:relative; z-index:1; margin-top:28px; }
  .ui-parchment-form.ui-size-small { padding:42px 38px 48px; }
  .ui-parchment-form.ui-size-large { padding:62px 60px 68px; }

  .character-details-identity {
    display:grid; grid-template-columns:190px minmax(0,1fr); gap:30px; align-items:center;
    padding:20px 0 30px; border-bottom:1px solid rgba(119,78,31,.28);
  }
  .character-details-portrait-column { display:grid; justify-items:center; gap:9px; text-align:center; }
  .character-details-portrait-frame {
    position:relative; width:166px; aspect-ratio:1; overflow:hidden; padding:7px;
    border:1px solid rgba(112,69,24,.62); border-radius:48% 45% 47% 43%/44% 47% 43% 48%;
    background:linear-gradient(135deg,#684324,#b48443 34%,#f3dcaa 49%,#8b5a2b 68%,#4f331e);
    box-shadow:0 6px 14px rgba(58,37,18,.26),inset 0 0 0 3px rgba(255,240,199,.30);
    transform:rotate(-.7deg);
  }
  .character-details-portrait-frame::after {
    content:""; position:absolute; inset:7px; pointer-events:none;
    border:2px solid rgba(72,44,21,.52); border-radius:44% 47% 42% 48%;
    box-shadow:inset 0 0 13px rgba(43,26,11,.34);
  }
  .character-details-portrait-frame img,
  .character-details-portrait-placeholder {
    display:grid; width:100%; height:100%; place-items:center; object-fit:cover;
    border-radius:43% 46% 41% 47%; background:#f5e7c8;
  }
  .character-details-portrait-placeholder {
    color:#9b7b4c; font-family:'Cinzel',serif; font-size:54px; text-shadow:0 1px #fff8e2;
  }
  .character-details-portrait-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
  .character-details-portrait-import,
  .character-details-portrait-remove {
    min-height:34px!important; margin:0!important; padding:6px 10px!important; font-size:9px!important; cursor:pointer;
  }
  .character-details-portrait-import input { display:none; }
  .character-details-portrait-note { margin:0; color:#796144; font-size:10px; font-style:italic; line-height:1.35; }
  .character-details-primary { min-width:0; }
  .character-details-kicker {
    display:block; margin-bottom:4px; color:#8b1a1a; font-family:'Cinzel',serif;
    font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  }
  .character-details-primary-fields { align-items:end; }
  .character-details-primary-note { margin:11px 0 0; color:#765d3e; font-size:11px; font-style:italic; }

  .ui-parchment-section {
    display:block; margin:24px 0 0; padding:0; border:0; border-radius:0; background:transparent;
  }
  .ui-parchment-section + .ui-parchment-section { padding-top:23px; border-top:1px solid rgba(119,78,31,.26); }
  .ui-parchment-section-title,
  .ui-parchment-section summary {
    display:block; margin:0; padding:0 0 9px; border:0; border-bottom:1px solid rgba(117,74,27,.32);
    background:transparent; color:#4c311c; cursor:default; list-style:none;
  }
  .ui-parchment-section summary { cursor:pointer; }
  .ui-parchment-section summary::-webkit-details-marker { display:none; }
  .ui-parchment-section summary::after {
    content:"＋"; float:right; margin-top:1px; color:#8b1a1a; font-size:17px; line-height:1;
  }
  .ui-parchment-section[open] summary::after { content:"−"; }
  .ui-parchment-section-heading {
    display:inline-flex; align-items:center; gap:9px; color:#4c311c;
    font-family:'Cinzel',serif; font-size:16px; font-weight:800; letter-spacing:.02em;
  }
  .ui-parchment-section-mark {
    display:grid; width:27px; height:27px; place-items:center; flex:0 0 27px;
    border:1px solid rgba(123,76,29,.42); border-radius:50%; background:rgba(255,246,217,.45);
    color:#8b1a1a; font-size:14px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.24);
  }
  .ui-parchment-section-body { padding:14px 2px 0; }
  .ui-parchment-section-note { margin:0 0 6px; color:#765e41; font-size:11px; font-style:italic; }
  .ui-parchment-form label.field-label {
    margin:12px 0 5px; color:#5c4329; font-family:'Cinzel',serif;
    font-size:10px; font-weight:800; letter-spacing:.055em; text-transform:uppercase;
  }
  .ui-parchment-form select,
  .ui-parchment-form input[type="text"],
  .ui-parchment-form textarea {
    min-height:42px; padding:9px 11px; border:1px solid rgba(117,78,35,.42); border-radius:3px;
    background:rgba(255,250,230,.56); color:#3e2d1d; font-family:'Alegreya',serif; font-size:15px;
    box-shadow:inset 0 1px 3px rgba(85,53,21,.08),0 1px rgba(255,255,255,.35);
  }
  .ui-parchment-form select:focus,
  .ui-parchment-form input[type="text"]:focus,
  .ui-parchment-form textarea:focus {
    border-color:#8b1a1a; outline:2px solid rgba(139,26,26,.12); background:rgba(255,253,240,.82);
  }
  .ui-parchment-form textarea { min-height:92px; line-height:1.45; }
  .character-details-field-grid { column-gap:24px; }
  .character-details-text-grid { column-gap:24px; }
  .character-details-story { margin-top:4px; }
  .character-details-story textarea { min-height:150px; }
  .character-details-extra-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }
  .character-details-extra-grid > div:last-child { grid-column:1/-1; }

  @media (max-width:760px) {
    .ui-parchment-form { margin:26px 0 22px; padding:43px 26px 49px; }
    .ui-parchment-form::before { inset:10px; }
    .ui-parchment-form::after { right:16px; top:40px; font-size:80px; }
    .ui-parchment-roll { left:-6px; right:-6px; }
    .character-details-identity { grid-template-columns:1fr; gap:20px; }
    .character-details-portrait-column { max-width:280px; margin:0 auto; }
    .character-details-primary { width:100%; }
    .character-details-extra-grid { grid-template-columns:1fr; }
    .character-details-extra-grid > div:last-child { grid-column:auto; }
    .ui-parchment-form select,
    .ui-parchment-form input[type="text"],
    .ui-parchment-form textarea { font-size:16px; }
  }
  @media (max-width:420px) {
    .ui-parchment-form { padding:40px 18px 46px; }
    .ui-parchment-form-header h3 { font-size:23px; }
    .ui-parchment-form-subtitle { font-size:12px; }
    .ui-parchment-section-heading { gap:7px; font-size:13px; }
    .ui-parchment-section-mark { width:24px; height:24px; flex-basis:24px; }
  }

  /* Choix officiel du mode d'équipement et tirage de richesse. */
  .equipment-method-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0 22px; }
  .equipment-method-card {
    position:relative; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:13px; min-height:112px;
    padding:17px 19px; border:1px solid rgba(120,80,36,.38); border-radius:6px; cursor:pointer;
    background:linear-gradient(145deg,#fffaf0,#f2dfbc); color:#4d3825;
    box-shadow:0 5px 12px rgba(55,37,18,.10),inset 0 0 0 3px rgba(255,255,255,.25);
  }
  .equipment-method-card.selected { border-color:#8b1a1a; box-shadow:0 5px 14px rgba(91,29,26,.16),inset 4px 0 0 #8b1a1a; }
  .equipment-method-card input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
  .equipment-method-number {
    display:grid; width:46px; height:46px; place-items:center; border:1px solid #95672e; border-radius:50%;
    background:#5d3e21; color:#f7e5bc; font-family:'Cinzel',serif; font-size:16px; font-weight:800;
  }
  .equipment-method-card > span:last-child { display:grid; gap:5px; }
  .equipment-method-card strong { color:#392719; font-family:'Cinzel',serif; font-size:14px; }
  .equipment-method-card small { color:#715c43; font-size:11px; line-height:1.4; }
  .equipment-starting-kit {
    margin:0 0 20px; padding:18px; border-left:4px solid #a97934; border-radius:4px;
    background:rgba(255,250,238,.78);
  }
  .equipment-starting-kit > h3 { margin:0 0 4px; color:#4b321d; font-family:'Cinzel',serif; font-size:16px; }
  .equipment-starting-kit > p { margin:0 0 14px; color:#755f45; font-size:11px; }
  .equipment-fixed-item { margin:10px 0 6px; color:#4e3b28; font-size:13px; }
  .starting-wealth-panel {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,360px); gap:18px; margin:0 0 22px; padding:20px;
    border:1px solid rgba(124,84,38,.40); border-radius:7px;
    background:radial-gradient(circle at 90% 5%,rgba(160,104,37,.12),transparent 28%),linear-gradient(135deg,#fff9e8,#efd9b1);
  }
  .starting-wealth-copy { display:grid; align-content:center; gap:5px; }
  .starting-wealth-copy > span { color:#91672e; font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
  .starting-wealth-copy > strong { color:#822024; font-family:'Cinzel',serif; font-size:25px; }
  .starting-wealth-copy p { margin:3px 0; color:#604b34; font-size:12px; line-height:1.45; }
  .starting-wealth-copy small { color:#80694d; font-size:9px; font-style:italic; }
  .starting-wealth-result {
    display:grid; justify-items:center; align-content:center; gap:9px; min-height:170px; padding:15px;
    border:1px double #93662e; border-radius:6px; background:rgba(255,252,241,.66); text-align:center;
  }
  .starting-wealth-result > span { color:#765d3e; font-size:9px; font-weight:800; text-transform:uppercase; }
  .starting-wealth-result > strong { color:#8b1a1a; font-family:'Cinzel',serif; font-size:24px; }
  .starting-wealth-result > small { color:#7a674f; font-size:9px; }
  .starting-wealth-result .btn { min-height:36px; padding:7px 14px; font-size:10px; }
  .starting-wealth-dice { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
  .starting-wealth-dice b {
    display:grid; width:34px; height:34px; place-items:center; border:1px solid #8b1a1a; border-radius:7px;
    background:#fffaf0; color:#8b1a1a; font-family:'Cinzel',serif; font-size:15px;
  }

  /* Boutique et cartes d'objets structurées. */
  .equipment-shop {
    margin-top:24px; padding:22px; border:1px solid rgba(120,82,38,.42); border-radius:8px;
    background:
      radial-gradient(circle at 92% 5%,rgba(196,151,81,.15),transparent 25%),
      linear-gradient(135deg,#fffaf0,#f6ead0 58%,#fff7e7);
    box-shadow:0 10px 24px rgba(47,33,19,.12),inset 0 0 0 3px rgba(255,255,255,.30);
  }
  .equipment-shop-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
  .equipment-shop-heading > div:first-child { min-width:0; }
  .equipment-shop-kicker {
    display:block; color:#976c2f; font-family:'Alegreya',serif; font-size:10px;
    font-style:italic; letter-spacing:.12em; text-transform:uppercase;
  }
  .equipment-shop-heading h3 {
    margin:2px 0 5px; color:#332419; font-family:'Cinzel',serif; font-size:24px; line-height:1.15;
  }
  .equipment-shop-heading p { max-width:700px; margin:0; color:#6e5a43; font-size:12px; }
  .equipment-shop-wallet {
    flex:0 0 230px; display:grid; gap:2px; padding:12px 14px;
    border:1px solid rgba(128,87,38,.43); border-radius:6px;
    background:rgba(255,249,229,.76); text-align:right; box-shadow:inset 0 0 12px rgba(124,79,27,.08);
  }
  .equipment-shop-wallet span { color:#765b3a; font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
  .equipment-shop-wallet strong { color:#8b1a1a; font-family:'Cinzel',serif; font-size:22px; }
  .equipment-shop-wallet small { color:#6e5b43; font-size:9px; }
  .equipment-shop-rule-note {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:15px 0;
  }
  .equipment-shop-rule-note > div {
    display:grid; gap:2px; padding:9px 11px; border-left:3px solid #a97b39; background:rgba(255,251,237,.68);
  }
  .equipment-shop-rule-note strong { color:#4d3825; font-size:10px; text-transform:uppercase; }
  .equipment-shop-rule-note span { color:#715e46; font-size:10px; }
  .equipment-shop-roll-reminder {
    display:flex; align-items:center; gap:9px; margin:-4px 0 14px; padding:10px 12px;
    border:1px dashed #b17b28; border-radius:5px; background:#fff4d2; color:#6d5537; font-size:10px;
  }
  .equipment-shop-roll-reminder strong { color:#8b1a1a; font-family:'Cinzel',serif; font-size:10px; }
  .equipment-shop-toolbar {
    display:grid; grid-template-columns:minmax(220px,1fr) auto; align-items:end; gap:10px;
    padding:12px; border:1px solid rgba(126,87,43,.28); border-radius:6px; background:rgba(255,255,255,.34);
  }
  .equipment-shop-toolbar label.field-label { margin:0; }
  .equipment-shop-toolbar input[type="search"] {
    width:100%; min-height:42px; margin-top:5px; padding:9px 11px;
    border:1px solid rgba(118,78,34,.42); border-radius:4px; background:#fffaf0;
    color:#3d2b1d; font-family:'Alegreya',serif; font-size:15px;
  }
  .equipment-shop-toolbar input[type="search"]:focus { border-color:#8b1a1a; outline:2px solid rgba(139,26,26,.12); }
  .equipment-shop-toolbar .btn { min-height:42px; padding:8px 13px; font-size:10px; }
  .equipment-shop-tabs {
    display:flex; gap:7px; margin:14px -2px 0; padding:2px 2px 9px; overflow-x:auto; scrollbar-width:thin;
  }
  .equipment-shop-tabs button {
    flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:7px 10px;
    border:1px solid rgba(119,82,41,.32); border-radius:4px; background:#fffaf0; color:#65513a;
    font-family:'Cinzel',serif; font-size:9px; font-weight:800; cursor:pointer;
  }
  .equipment-shop-tabs button span {
    display:grid; min-width:20px; height:20px; place-items:center; padding:0 4px;
    border-radius:999px; background:#ead7b1; color:#694923; font-family:'Alegreya',serif; font-size:9px;
  }
  .equipment-shop-tabs button:hover,
  .equipment-shop-tabs button.active { border-color:#8b1a1a; background:#8b1a1a; color:#fff8e5; }
  .equipment-shop-tabs button.active span { background:#fff0cf; color:#8b1a1a; }
  .equipment-shop-results { margin:4px 0 12px; color:#725d44; font-size:10px; }
  .equipment-shop-results span { color:#8b1a1a; font-weight:800; }
  .equipment-shop-category { margin-top:18px; }
  .equipment-shop-category:first-child { margin-top:0; }
  .equipment-shop-category-heading {
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid rgba(120,80,35,.30);
  }
  .equipment-shop-category-heading h4 { margin:0; color:#49321e; font-family:'Cinzel',serif; font-size:15px; }
  .equipment-shop-category-heading p { margin:2px 0 0; color:#786247; font-size:10px; }
  .equipment-shop-category-heading > span {
    display:grid; min-width:27px; height:27px; place-items:center; border-radius:50%;
    background:#8b1a1a; color:#fff7e3; font-size:10px; font-weight:800;
  }
  .equipment-shop-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
  .ui-item-card {
    position:relative; isolation:isolate; display:flex; flex-direction:column; min-width:0; min-height:196px;
    padding:17px 16px 13px; overflow:hidden; border:1px solid rgba(120,80,37,.38); border-radius:5px;
    background:
      radial-gradient(circle at 92% 8%,rgba(151,96,35,.09),transparent 25%),
      repeating-linear-gradient(0deg,transparent 0,transparent 24px,rgba(104,69,30,.035) 25px),
      linear-gradient(105deg,#fff8e5,#f2dfba 54%,#fff2d6);
    color:#3e2b1c; box-shadow:0 5px 12px rgba(55,37,18,.13),inset 0 0 18px rgba(111,70,25,.07);
  }
  .ui-item-card::before {
    content:""; position:absolute; inset:5px; z-index:-1; pointer-events:none;
    border:1px solid rgba(126,83,35,.20); border-radius:3px;
  }
  .ui-item-card.selected { border-color:#8b1a1a; box-shadow:0 5px 14px rgba(91,29,26,.20),inset 0 0 0 2px rgba(139,26,26,.13); }
  .ui-item-card.selected::after {
    content:"✓"; position:absolute; right:11px; bottom:10px; display:grid; width:23px; height:23px;
    place-items:center; border-radius:50%; background:#8b1a1a; color:#fff8e5; font-size:11px; font-weight:900;
  }
  .ui-item-card-heading { display:flex; align-items:center; justify-content:space-between; gap:9px; }
  .ui-item-card-category { color:#8a6636; font-size:8px; font-style:italic; letter-spacing:.04em; }
  .ui-item-card-mastery {
    margin-left:auto; padding:3px 6px; border:1px solid; border-radius:999px;
    font-size:8px; font-weight:700; white-space:nowrap;
  }
  .ui-item-card-mastery.proficient { border-color:rgba(38,116,61,.35); background:rgba(227,246,230,.8); color:#26743d; }
  .ui-item-card-mastery.not-proficient { border-color:rgba(151,38,38,.35); background:rgba(252,230,230,.8); color:#972626; }
  .ui-item-card-price {
    flex:0 0 auto; padding:3px 6px; border:1px solid rgba(137,92,38,.30); border-radius:999px;
    background:rgba(255,249,229,.68); color:#8b1a1a; font-size:10px;
  }
  .ui-item-card h4 { margin:7px 0 5px; color:#372517; font-family:'Cinzel',serif; font-size:15px; line-height:1.2; }
  .ui-item-card > p { flex:1; margin:0; color:#67523b; font-size:11px; line-height:1.42; }
  .ui-item-card-tags { display:flex; flex-wrap:wrap; gap:4px; min-height:21px; margin-top:9px; }
  .ui-item-card-tags span,
  .ui-item-modal-tags span {
    padding:3px 6px; border:1px solid rgba(119,79,35,.23); border-radius:999px;
    background:rgba(255,251,237,.62); color:#74583a; font-size:8px;
  }
  .ui-item-card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding-top:9px; border-top:1px solid rgba(120,80,36,.20); }
  .ui-item-details-button {
    padding:5px 8px; border:0; border-bottom:1px solid #8b1a1a; background:transparent;
    color:#8b1a1a; font-family:'Cinzel',serif; font-size:9px; font-weight:800; cursor:pointer;
  }
  .ui-item-quantity { display:flex; align-items:center; gap:5px; margin-right:30px; }
  .ui-item-quantity button {
    display:grid; width:27px; height:27px; place-items:center; padding:0;
    border:1px solid rgba(115,76,32,.46); border-radius:4px; background:#fffaf0;
    color:#5d4226; font-size:15px; font-weight:800; cursor:pointer;
  }
  .ui-item-quantity button:last-child { border-color:#8b1a1a; background:#8b1a1a; color:#fff; }
  .ui-item-quantity button:disabled { opacity:.34; cursor:not-allowed; }
  .ui-item-quantity strong { min-width:20px; text-align:center; font-size:12px; }
  .ui-item-card.ui-size-small { min-height:174px; padding:13px; }
  .ui-item-card.ui-size-large { min-height:218px; padding:20px; }
  .ui-item-card.ui-size-large h4 { font-size:18px; }
  .equipment-shop-empty {
    display:grid; justify-items:center; gap:5px; padding:30px; border:1px dashed rgba(121,81,38,.42);
    border-radius:6px; color:#70593e; text-align:center;
  }
  .equipment-shop-empty[hidden] { display:none; }
  .equipment-shop-basket {
    display:grid; gap:3px; margin-top:18px; padding:11px 13px; border-left:4px solid #8b1a1a;
    background:rgba(255,249,231,.74); color:#5f4930;
  }
  .equipment-shop-basket strong { color:#8b1a1a; font-family:'Cinzel',serif; font-size:11px; }
  .equipment-shop-basket span { font-size:11px; }

  body.ui-item-modal-open { overflow:hidden; }
  .ui-item-modal-backdrop {
    position:fixed; inset:0; z-index:500; display:grid; place-items:center; padding:22px;
    background:rgba(19,18,16,.68); backdrop-filter:blur(3px);
  }
  .ui-item-modal {
    position:relative; width:min(700px,100%); max-height:min(780px,calc(100vh - 44px)); overflow:auto;
    border:1px solid #9d743c; border-radius:7px;
    background:
      radial-gradient(circle at 90% 6%,rgba(156,102,39,.13),transparent 30%),
      linear-gradient(112deg,#fff9e8,#efdcba 55%,#fff1d1);
    color:#3e2d1e; box-shadow:0 24px 60px rgba(0,0,0,.38),inset 0 0 0 4px rgba(255,255,255,.28);
  }
  .ui-item-modal-close {
    position:sticky; top:10px; float:right; z-index:3; display:grid; width:34px; height:34px;
    place-items:center; margin:10px 10px 0 0; padding:0; border:1px solid #8b1a1a; border-radius:50%;
    background:#8b1a1a; color:#fff; font-size:21px; line-height:1; cursor:pointer;
  }
  .ui-item-modal-header { padding:27px 30px 17px; border-bottom:1px solid rgba(120,79,34,.28); }
  .ui-item-modal-header > span { color:#90682f; font-size:9px; font-style:italic; letter-spacing:.08em; text-transform:uppercase; }
  .ui-item-modal-header h3 { margin:4px 52px 4px 0; color:#362316; font-family:'Cinzel',serif; font-size:25px; line-height:1.15; }
  .ui-item-modal-header strong { color:#8b1a1a; font-family:'Cinzel',serif; font-size:14px; }
  .ui-item-modal-body { display:grid; gap:16px; padding:20px 30px 24px; }
  .ui-item-modal-description { margin:0; color:#5f4932; font-size:14px; line-height:1.55; }
  .ui-item-modal-facts,
  .ui-item-modal-technical { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .ui-item-modal-facts > div,
  .ui-item-modal-technical > div {
    display:grid; gap:3px; padding:9px 10px; border:1px solid rgba(124,83,39,.25);
    border-radius:5px; background:rgba(255,251,237,.58);
  }
  .ui-item-modal-facts span,
  .ui-item-modal-technical span { color:#806644; font-size:8px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
  .ui-item-modal-facts strong,
  .ui-item-modal-technical strong { color:#3c2a1c; font-size:11px; }
  .ui-item-modal-vtt { padding:14px; border:1px solid rgba(95,126,90,.35); border-radius:6px; background:rgba(239,248,235,.64); }
  .ui-item-modal-section-heading { display:flex; align-items:flex-start; gap:9px; margin-bottom:11px; }
  .ui-item-modal-section-heading > span { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:#42633e; color:#fff; }
  .ui-item-modal-section-heading h4 { margin:0; color:#304b2c; font-family:'Cinzel',serif; font-size:13px; }
  .ui-item-modal-section-heading p { margin:2px 0 0; color:#5d7557; font-size:9px; }
  .ui-item-modal-tags { display:grid; gap:7px; }
  .ui-item-modal-tags > strong { color:#4f3823; font-family:'Cinzel',serif; font-size:11px; }
  .ui-item-modal-tags > div { display:flex; flex-wrap:wrap; gap:5px; }
  .ui-item-modal-footer {
    display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 30px;
    border-top:1px solid rgba(120,79,34,.28); background:rgba(217,190,141,.24); color:#735c40; font-size:9px;
  }

  @media (max-width:760px) {
    .equipment-method-picker { grid-template-columns:1fr; }
    .starting-wealth-panel { grid-template-columns:1fr; padding:16px 13px; }
    .equipment-shop { padding:16px 13px; }
    .equipment-shop-heading { flex-direction:column; }
    .equipment-shop-wallet { width:100%; flex-basis:auto; text-align:left; }
    .equipment-shop-rule-note { grid-template-columns:1fr; }
    .equipment-shop-toolbar { grid-template-columns:1fr; }
    .equipment-shop-toolbar input[type="search"] { font-size:16px; }
    .equipment-shop-toolbar .btn { width:100%; }
    .equipment-shop-grid { grid-template-columns:1fr; }
    .equipment-shop-roll-reminder { align-items:flex-start; flex-direction:column; }
    .ui-item-modal-backdrop { align-items:end; padding:0; }
    .ui-item-modal { width:100%; max-height:88vh; border-radius:13px 13px 0 0; }
    .ui-item-modal-header { padding:24px 20px 15px; }
    .ui-item-modal-body { padding:17px 20px 22px; }
    .ui-item-modal-facts { grid-template-columns:1fr 1fr; }
    .ui-item-modal-technical { grid-template-columns:1fr 1fr; }
    .ui-item-modal-footer { align-items:flex-start; flex-direction:column; padding:10px 20px; }
  }
  @media (max-width:420px) {
    .ui-item-modal-facts,
    .ui-item-modal-technical { grid-template-columns:1fr; }
    .ui-item-card { min-height:188px; }
  }

  /* Buttons */
  .btn {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 6px;
    border: 1.5px solid var(--blood-dark);
    background: var(--blood);
    color: #f7ecd8;
    cursor: pointer;
    transition: background .12s;
  }
  .btn:hover { background: var(--blood-dark); }
  .btn.secondary { background: transparent; color: var(--blood); }
  .btn.secondary:hover { background: #f5e8d8; }
  .btn:disabled { opacity: .4; cursor: not-allowed; }
  .btn-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 24px; }

  /* Étiquette parente des caractéristiques. */
  .abilities-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-top:14px; }
  .ability-slot.ui-ability-label {
    position:relative; isolation:isolate; min-height:230px; padding:18px 14px 16px;
    overflow:hidden; border:0; border-radius:0; text-align:center;
    background:
      radial-gradient(circle at 50% 8%,rgba(255,255,255,.72),transparent 30%),
      repeating-linear-gradient(96deg,rgba(104,70,28,.025) 0 1px,transparent 1px 6px),
      linear-gradient(165deg,#fff8df 0%,#f2dfb7 58%,#e8cea0 100%);
    color:#342618;
    clip-path:polygon(8px 0,calc(100% - 10px) 0,100% 9px,calc(100% - 4px) 50%,100% calc(100% - 9px),calc(100% - 9px) 100%,8px 100%,0 calc(100% - 8px),4px 50%,0 8px);
    box-shadow:inset 0 0 20px rgba(99,63,23,.11);
    filter:drop-shadow(0 5px 5px rgba(43,29,16,.17));
  }
  .ability-slot.ui-ability-label::before {
    content:""; position:absolute; inset:5px; z-index:-1; pointer-events:none;
    border:1px solid rgba(124,82,29,.50);
    clip-path:polygon(6px 0,calc(100% - 7px) 0,100% 6px,calc(100% - 3px) 50%,100% calc(100% - 6px),calc(100% - 7px) 100%,6px 100%,0 calc(100% - 6px),3px 50%,0 6px);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.23);
  }
  .ui-ability-label-kicker {
    display:block; margin-bottom:6px; color:#89652e; font-family:'Alegreya',serif;
    font-size:8px; font-style:italic; letter-spacing:.08em; text-transform:uppercase;
  }
  .ui-ability-label-heading { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; }
  .ui-ability-label-code {
    display:grid; place-items:center; width:29px; height:29px; flex:0 0 29px;
    border:1px solid #9c7131; border-radius:50%; background:#5b3b20; color:#f9e7bf;
    box-shadow:inset 0 0 0 2px rgba(239,207,148,.48); font-size:8px; font-weight:900;
    text-transform:uppercase;
  }
  .ability-slot.ui-ability-label h3 {
    min-width:0; margin:0; overflow:hidden; color:#332416; font-family:'Cinzel',serif;
    font-size:13px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap;
  }
  .ui-ability-label-control { margin:11px auto 7px; width:min(100%,102px); }
  .ui-ability-label-control select,
  .ui-ability-label-control input {
    width:100%!important; min-height:37px; margin:0!important; padding:5px 8px!important;
    border:1px solid rgba(115,76,32,.48); border-radius:4px; background:rgba(255,253,244,.76);
    color:#38291b; text-align:center; font-size:16px!important; font-weight:700;
  }
  .ui-ability-label-bonus {
    min-height:29px; color:#796142; font-size:9px; line-height:1.25;
  }
  .ui-ability-label-result {
    position:relative; display:grid; grid-template-columns:1fr auto; align-items:center;
    width:min(100%,116px); min-height:65px; margin:5px auto 0; padding:8px 12px;
    border:1px double #90652a; border-radius:50% 50% 44% 44%;
    background:rgba(255,249,228,.66); box-shadow:inset 0 0 0 3px rgba(255,255,255,.26);
  }
  .ui-ability-label-result > span {
    grid-column:1/-1; color:#8a6a3d; font-size:7px; font-weight:800;
    letter-spacing:.1em; line-height:1; text-transform:uppercase;
  }
  .ability-slot.ui-ability-label .ab-final {
    margin:0; color:#322217; font-family:'Cinzel',serif; font-size:29px; font-weight:800; line-height:1;
  }
  .ability-slot.ui-ability-label .ab-mod {
    display:inline-grid; place-items:center; min-width:36px; min-height:25px; margin:0;
    padding:2px 6px; border:1px solid rgba(139,26,26,.38); border-radius:999px;
    background:rgba(255,246,220,.62); color:#861e22; font-size:12px; font-style:normal; font-weight:800;
  }
  .ui-ability-label.ui-size-small { min-height:202px; padding:14px 11px; }
  .ui-ability-label.ui-size-large { min-height:254px; padding:21px 17px; }
  .ui-ability-label.ui-size-large h3 { font-size:15px; }
  @media (max-width:520px) {
    .ui-ability-label-heading { gap:4px; }
    .ui-ability-label-code { width:27px; height:27px; flex-basis:27px; }
    .ability-slot.ui-ability-label h3 { font-size:10.5px; letter-spacing:-.015em; }
  }

  .dice-tray {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    background: #f5edd8; border: 1px dashed var(--border-aged); border-radius: 8px;
    padding: 14px; margin: 12px 0;
  }
  .die-result {
    font-family: 'Cinzel', serif; font-size: 20px; font-weight: 700;
    width: 52px; height: 52px; border-radius: 8px;
    background: #fff; border: 2px solid var(--blood);
    display: flex; align-items: center; justify-content: center;
    color: var(--blood);
  }
  .die-detail { font-size: 11px; color: var(--ink-soft); text-align: center; margin-top: 3px; }

  .pill-toggle { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
  .pill-toggle button {
    font-family: 'Alegreya', serif; font-size: 14px;
    padding: 8px 16px; border-radius: 20px;
    border: 1.5px solid var(--border-aged);
    background: #fffdf6; color: var(--ink-soft); cursor: pointer;
  }
  .pill-toggle button.on { background: var(--blood); color: #f7ecd8; border-color: var(--blood-dark); }

  /* Checkbox lists */
  .check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-top: 8px; }
  .check-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; padding: 7px 10px;
    border: 1px solid var(--border-aged); border-radius: 6px;
    background: #fffdf6; cursor: pointer;
  }
  .check-item.checked { border-color: var(--blood); background: #fdf3ea; }
  .check-item.disabled { opacity: .45; cursor: not-allowed; }
  .check-item input { accent-color: var(--blood); }

  .radio-group { margin: 8px 0 14px; }
  .radio-opt {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 8px 11px; border: 1px solid var(--border-aged);
    border-radius: 6px; background: #fffdf6; margin-bottom: 6px;
    cursor: pointer; font-size: 14px;
  }
  .radio-opt.checked { border-color: var(--blood); background: #fdf3ea; }
  .radio-opt input { margin-top: 3px; accent-color: var(--blood); }

  .warn { color: var(--blood); font-size: 13px; font-style: italic; margin-top: 6px; }
  .ok { color: #2e6b30; font-size: 13px; font-style: italic; margin-top: 6px; }
  .note { font-size: 13px; color: var(--ink-soft); font-style: italic; }

  /* Composants UI parents */
  .ui-section-title {
    margin:18px 0 8px;
    color:var(--blood);
    font-family:'Cinzel',serif;
    font-size:16px;
  }
  .ui-section-count { color:var(--ink-soft); font-size:.85em; }

  .ui-status-badge {
    display:inline-flex; align-items:center; width:max-content;
    padding:4px 8px; border:1px solid currentColor; border-radius:999px;
    font-family:'Cinzel',serif; font-size:10px; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase;
  }
  .ui-status-todo { color:#6b7280; background:#f3f4f6; }
  .ui-status-doing { color:#8a5a00; background:#fff4cf; }
  .ui-status-done { color:#2f6f3e; background:#e5f4e8; }
  .ui-status-waiting { color:#8b1a1a; background:#f7e6e2; }
  .ui-status-idea { color:#5b4a91; background:#eee9fa; }

  .ui-spell-compact {
    display:grid;
    gap:5px;
    width:100%;
    margin-top:5px;
    color:var(--ink-soft);
    font-size:10px;
  }
  .ui-spell-compact-facts {
    display:flex;
    flex-wrap:wrap;
    gap:3px 10px;
  }
  .ui-spell-compact-facts > span {
    position:relative;
  }
  .ui-spell-compact-facts > span:not(:last-child)::after {
    content:"";
    position:absolute;
    top:50%;
    right:-6px;
    width:2px;
    height:2px;
    border-radius:50%;
    background:currentColor;
  }
  .ui-spell-selection-list {
    display:grid;
    gap:8px;
    margin-top:8px;
  }
  .ui-spell-selected-name {
    margin:0 0 3px;
    font-family:'Cinzel',serif;
    font-size:13px;
  }
  .ui-spell-card {
    margin:3px 0 8px;
    padding:12px 14px;
    border:1px solid var(--border-aged);
    border-radius:6px;
    background:#fffdf6;
    font-size:13px;
  }
  .ui-spell-name {
    margin:0 0 10px;
    color:var(--ink);
    font-family:'Cinzel',serif;
    font-size:17px;
  }
  .ui-spell-attributes {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
    gap:10px 18px;
    padding:10px 0 12px;
    border-top:1px solid var(--border-aged);
    border-bottom:2px solid var(--blood);
  }
  .ui-spell-attribute {
    display:grid;
    align-content:start;
    gap:2px;
    min-width:0;
  }
  .ui-spell-attribute-label {
    color:var(--ink-soft);
    font-family:'Cinzel',serif;
    font-size:9px;
    font-weight:800;
    letter-spacing:.025em;
    text-transform:uppercase;
  }
  .ui-spell-attribute strong {
    color:var(--ink);
    font-size:12px;
    font-weight:600;
    overflow-wrap:anywhere;
  }
  .ui-spell-effect { margin-top:11px; line-height:1.48; }
  .ui-spell-bonus { margin-top:7px; color:var(--blood); }
  .ui-spell-scaling {
    margin-top:8px;
    padding-top:7px;
    border-top:1px dashed var(--border-aged);
    color:var(--ink-soft);
    font-size:12px;
  }
  .ui-spell-footer {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px 12px;
    margin-top:11px;
  }
  .ui-spell-tags {
    display:inline-flex;
    flex-wrap:wrap;
    gap:4px;
  }
  .ui-spell-tag,
  .ui-spell-class-tag {
    display:inline-flex;
    align-items:center;
    min-height:20px;
    padding:2px 7px;
    border:1px solid #d4c8ac;
    border-radius:3px;
    background:#f4eddb;
    color:#514a3f;
    font-family:'Cinzel',serif;
    font-size:8px;
    font-weight:800;
    line-height:1.15;
    text-transform:uppercase;
  }
  .ui-spell-class-tag {
    border-color:#c7cdd1;
    background:#fff;
    color:var(--ink-soft);
  }
  .ui-spell-availability {
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px;
  }
  .ui-spell-availability > span:first-child {
    margin-right:2px;
    color:var(--ink-soft);
    font-size:10px;
  }
  .ui-spell-source {
    margin-left:auto;
    color:var(--ink-soft);
    font-size:10px;
    font-style:italic;
  }

  /* Variantes documentées dans l’atelier du kit UI */
  .ui-spell-card.ui-spell-emphasis {
    border-color:var(--blood);
    box-shadow:inset 4px 0 0 var(--blood),0 3px 10px rgba(80,20,20,.08);
  }
  .ui-spell-card.ui-spell-subtle { background:#f7f5ef; border-style:dashed; }
  .ui-spell-compact.ui-spell-emphasis { color:var(--blood); font-weight:700; }
  .ui-spell-compact.ui-spell-subtle { color:#7c858b; }
  .ui-choice-card.ui-choice-emphasis { border-width:2px; box-shadow:0 3px 10px rgba(80,20,20,.09); }
  .ui-choice-card.ui-choice-subtle { background:#f7f5ef; border-style:dashed; }
  .ui-choice-card.ui-choice-disabled { opacity:.5; cursor:not-allowed; filter:grayscale(.35); }
  .ui-choice-card.ui-choice-disabled:hover { border-color:var(--border-aged); transform:none; }

  .ui-section-title.ui-size-small { font-size:13px; }
  .ui-section-title.ui-size-large { font-size:19px; }
  .ui-status-badge.ui-size-small { padding:3px 6px; font-size:9px; }
  .ui-status-badge.ui-size-large { padding:6px 10px; font-size:12px; }
  .ui-choice-card.ui-size-small { padding:9px 11px; }
  .ui-choice-card.ui-size-small h3 { font-size:13px; }
  .ui-choice-card.ui-size-large { padding:18px 20px; }
  .ui-choice-card.ui-size-large h3 { font-size:18px; }
  .ui-spell-compact.ui-size-small { font-size:10px; }
  .ui-spell-compact.ui-size-large { font-size:13px; }
  .ui-spell-card.ui-size-small { padding:7px 9px; font-size:11px; }
  .ui-spell-card.ui-size-small .ui-spell-name { font-size:13px; }
  .ui-spell-card.ui-size-small .ui-spell-attributes { grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); }
  .ui-spell-card.ui-size-small .ui-spell-attribute strong,
  .ui-spell-card.ui-size-small .ui-spell-scaling { font-size:10px; }
  .ui-spell-card.ui-size-large { padding:15px 17px; font-size:15px; }
  .ui-spell-card.ui-size-large .ui-spell-name { font-size:18px; }
  .ui-spell-card.ui-size-large .ui-spell-attribute strong,
  .ui-spell-card.ui-size-large .ui-spell-scaling { font-size:13px; }

  /* Centre des maîtrises de l’étape Historique */
  .race-choice-deferred,
  .class-skill-choice-note {
    display:flex; align-items:flex-start; gap:8px; margin:12px 0;
    padding:10px 12px; border:1px dashed var(--gold); border-radius:7px;
    background:#fff8e5; font-size:12px;
  }
  .race-choice-deferred strong,
  .class-skill-choice-note strong { flex:0 0 auto; color:var(--gold); }
  .race-choice-deferred span,
  .class-skill-choice-note span { color:var(--ink-soft); }
  .choice-origin {
    margin-left:auto; color:var(--blood); font-size:9px; font-weight:700;
    text-transform:uppercase;
  }
  .check-item.requires-replacement {
    border-color:#c58a28; background:#fff5d9;
  }
  .check-item.replacement-resolved {
    border-color:#5f8e65; background:#eef7ef;
  }
  .class-background-duplicate-summary {
    display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:10px; padding:9px 10px;
    border-left:3px solid var(--gold); background:#fff8e5; font-size:11px;
  }
  .class-background-duplicate-summary strong { color:var(--blood); }
  .class-background-duplicate-summary span { color:var(--ink-soft); }
  /* Étiquette parente des historiques. */
  .cards-grid.background-label-grid {
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:17px;
  }
  .choice-card.ui-background-label {
    position:relative; isolation:isolate; display:flex; flex-direction:column;
    min-height:205px; padding:21px 18px 34px 25px; overflow:hidden;
    border:0; border-left:0; border-radius:0;
    background:
      radial-gradient(circle at 8% 12%,rgba(255,255,255,.72),transparent 26%),
      radial-gradient(circle at 90% 84%,rgba(133,86,28,.10),transparent 34%),
      repeating-linear-gradient(101deg,rgba(96,63,25,.026) 0 1px,transparent 1px 6px),
      linear-gradient(155deg,#fff8df 0%,#f2dfb9 57%,#e9cfa0 100%);
    color:#37291b; cursor:pointer;
    clip-path:polygon(12px 0,calc(100% - 9px) 0,100% 8px,calc(100% - 4px) 50%,100% calc(100% - 10px),calc(100% - 11px) 100%,9px 100%,0 calc(100% - 11px),5px 50%,0 11px);
    box-shadow:inset 0 0 23px rgba(103,66,24,.12);
    filter:drop-shadow(0 6px 6px rgba(43,29,16,.18));
    transition:transform .16s ease,filter .16s ease,background .16s ease;
  }
  .choice-card.ui-background-label::before {
    content:""; position:absolute; inset:5px; z-index:-1; pointer-events:none;
    border:1px solid rgba(126,83,30,.50);
    clip-path:polygon(8px 0,calc(100% - 7px) 0,100% 6px,calc(100% - 3px) 50%,100% calc(100% - 7px),calc(100% - 8px) 100%,7px 100%,0 calc(100% - 8px),3px 50%,0 8px);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.23);
  }
  .choice-card.ui-background-label:hover,
  .choice-card.ui-background-label:focus-visible {
    border:0; border-left:0; outline:none; transform:translateY(-3px) rotate(.12deg);
    filter:drop-shadow(0 10px 9px rgba(43,29,16,.26));
  }
  .choice-card.ui-background-label.selected {
    border:0; border-left:0;
    background:
      radial-gradient(circle at 8% 12%,rgba(255,255,255,.74),transparent 26%),
      radial-gradient(circle at 90% 84%,rgba(139,26,26,.12),transparent 35%),
      repeating-linear-gradient(101deg,rgba(96,63,25,.026) 0 1px,transparent 1px 6px),
      linear-gradient(155deg,#fff7dc 0%,#f4ddb3 55%,#eccb9b 100%);
    box-shadow:inset 0 0 0 2px rgba(139,26,26,.76),inset 0 0 23px rgba(103,66,24,.12);
    filter:drop-shadow(0 9px 8px rgba(100,24,26,.24));
  }
  .choice-card.ui-background-label.selected::after {
    content:"✓"; position:absolute; top:12px; right:13px; z-index:4;
    display:grid; place-items:center; width:29px; height:29px;
    border:2px solid #f7dfb2; border-radius:50%; background:#9d272b; color:#fff7df;
    box-shadow:0 2px 6px rgba(55,24,19,.32),inset 0 0 0 2px rgba(255,255,255,.14);
    font-family:'Cinzel',serif; font-size:13px; font-weight:900;
  }
  .ui-background-label-hole {
    position:absolute; top:17px; left:10px; width:8px; height:8px;
    border:1px solid rgba(91,59,26,.75); border-radius:50%; background:#6b4827;
    box-shadow:0 0 0 3px rgba(226,194,139,.62),inset 0 1px 2px rgba(25,15,7,.4);
  }
  .ui-background-label-source {
    display:block; max-width:calc(100% - 34px); margin-bottom:3px; overflow:hidden;
    color:#89642d; font-family:'Alegreya',serif; font-size:10px; font-style:italic;
    line-height:1.2; text-overflow:ellipsis; white-space:nowrap;
  }
  .choice-card.ui-background-label h3 {
    margin:0 0 7px; padding:0 30px 7px 0; overflow:hidden;
    border-bottom:1px solid rgba(119,79,31,.31); color:#322416;
    font-family:'Cinzel',serif; font-size:17px; line-height:1.22;
    letter-spacing:.01em; text-overflow:ellipsis; text-transform:none; white-space:nowrap;
  }
  .ui-background-label-variant {
    display:block; margin:-3px 0 6px; color:#862025; font-size:8px; font-weight:900;
    letter-spacing:.06em; text-transform:uppercase;
  }
  .ui-background-label-skills {
    display:block; margin-bottom:7px; padding:6px 8px;
    border-top:1px solid rgba(119,79,31,.22); border-bottom:1px solid rgba(119,79,31,.22);
    background:rgba(255,251,235,.38);
  }
  .ui-background-label-skills span {
    display:block; color:#8a6a3d; font-size:7px; font-weight:800;
    letter-spacing:.08em; text-transform:uppercase;
  }
  .ui-background-label-skills strong {
    display:block; overflow:hidden; color:#7f1d22; font-size:11px; line-height:1.35;
    text-overflow:ellipsis; white-space:nowrap;
  }
  .choice-card.ui-background-label .ui-background-label-feature {
    min-height:19px; margin:0 0 8px; overflow:hidden; color:#665039; font-size:11px;
    line-height:1.35; text-overflow:ellipsis; white-space:nowrap;
  }
  .ui-background-label-footer {
    display:flex; flex-wrap:wrap; gap:4px; margin-top:auto; padding-right:42px;
  }
  .ui-background-label-footer > span {
    padding:3px 6px; border:1px solid rgba(120,80,34,.24); border-radius:3px;
    background:rgba(255,251,235,.5); color:#6e583d; font-size:8px;
  }
  .ui-background-label-footer .ui-background-label-duplicate {
    border-color:rgba(139,26,26,.38); color:#8b1a1a; font-weight:800;
  }
  .ui-background-label-action {
    position:absolute; right:17px; bottom:10px; color:#8b1a1a;
    font-family:'Cinzel',serif; font-size:9px; font-weight:900;
    letter-spacing:.08em; text-transform:uppercase;
  }
  .ui-background-label-action::after { content:" →"; }
  .ui-background-label.selected .ui-background-label-action::after { content:""; }
  .ui-background-label.ui-size-small { min-height:181px; padding:17px 15px 31px 22px; }
  .ui-background-label.ui-size-small h3 { font-size:15px; }
  .ui-background-label.ui-size-large { min-height:229px; padding:24px 22px 38px 29px; }
  .ui-background-label.ui-size-large h3 { font-size:20px; }
  @media (max-width:520px) {
    .cards-grid.background-label-grid { grid-template-columns:1fr; gap:13px; }
    .choice-card.ui-background-label { min-height:188px; }
  }
  .background-structure { margin-top:18px; }
  .background-structure-heading {
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border-aged);
  }
  .background-structure-heading h3 { margin:5px 0 0; }
  .background-schema-badge {
    padding:5px 8px; border-radius:999px; background:#e5f4e8;
    color:#2f6f3e; font-size:9px; font-weight:800; text-transform:uppercase;
  }
  .background-structure-grid {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  }
  .background-structure-grid > div {
    display:grid; gap:3px; padding:9px 10px; border:1px solid #d8cfb5;
    border-radius:6px; background:#fffdf6;
  }
  .background-structure-grid strong {
    color:var(--blood); font-family:'Cinzel',serif; font-size:9px; text-transform:uppercase;
  }
  .background-structure-grid span { color:var(--ink-soft); font-size:12px; }
  .background-feature {
    display:grid; gap:3px; margin-top:9px; padding:10px 12px;
    border-left:3px solid var(--gold); background:#fff8e5;
  }
  .background-feature strong { font-family:'Cinzel',serif; font-size:12px; }
  .background-feature span { color:var(--ink-soft); font-size:12px; }
  .background-choice-hub {
    margin-top:16px; padding:16px; border:1.5px solid var(--blood);
    border-radius:9px; background:rgba(255,253,246,.96);
  }
  .background-choice-hub-heading {
    display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
    padding-bottom:12px; border-bottom:1px solid var(--border-aged);
  }
  .background-choice-hub-heading > div { display:flex; align-items:flex-start; gap:10px; }
  .background-choice-hub-heading > div > span {
    display:grid; width:30px; height:30px; place-items:center; border-radius:50%;
    background:var(--blood); color:#fff;
  }
  .background-choice-hub-heading h3 { margin:0; font-family:'Cinzel',serif; font-size:16px; }
  .background-choice-hub-heading p { margin:3px 0 0; color:var(--ink-soft); font-size:11px; }
  .background-choice-hub-heading > strong {
    padding:5px 8px; border-radius:999px; font-size:9px; text-transform:uppercase;
  }
  .background-choice-hub-heading > strong.complete { background:#e5f4e8; color:#2f6f3e; }
  .background-choice-hub-heading > strong.incomplete { background:#fff0c9; color:#815600; }
  .background-choice-group {
    margin-top:12px; padding:12px; border:1px solid #d8cfb5;
    border-radius:7px; background:#faf5e8;
  }
  .background-choice-group h4 { margin:0; font-family:'Cinzel',serif; font-size:12px; }
  .background-choice-group > p { margin:3px 0 9px; color:var(--ink-soft); font-size:11px; }
  .background-select-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .background-select-grid select { width:100%; margin-top:4px; }
  .background-duplicate-resolution { border-color:#c79086; background:#fff5f3; }
  .background-prior-duplicate {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-top:12px; padding:10px 12px; border:1px solid #c79086;
    border-radius:7px; background:#fff0ee;
  }
  .background-prior-duplicate div { display:grid; gap:2px; }
  .background-prior-duplicate strong { color:var(--blood); }
  .background-prior-duplicate span { color:var(--ink-soft); font-size:11px; }
  .background-choice-complete {
    margin:12px 0 0; padding:9px 11px; border-radius:6px;
    background:#e5f4e8; color:#2f6f3e; font-size:12px; font-weight:700;
  }
  .background-filter-panel {
    margin:16px 0 10px; padding:14px; border:1px solid #d8cfb5;
    border-radius:8px; background:rgba(255,253,246,.96);
  }
  .background-filter-heading {
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    margin-bottom:11px; padding-bottom:10px; border-bottom:1px solid var(--border-aged);
  }
  .background-filter-heading > div { display:grid; gap:2px; }
  .background-filter-heading strong { font-family:'Cinzel',serif; font-size:13px; }
  .background-filter-heading span { color:var(--ink-soft); font-size:11px; }
  .background-filter-heading .btn { padding:6px 10px; font-size:10px; }
  .background-filter-grid {
    display:grid; grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(135px,1fr));
    gap:10px;
  }
  .background-filter-grid .field-label { margin:0; }
  .background-filter-grid input,
  .background-filter-grid select { width:100%; margin-top:4px; }
  .background-filter-grid input[type="search"] { min-height:38px; }
  .background-filter-empty {
    display:grid; justify-items:center; gap:7px; margin:8px 0 18px; padding:24px;
    border:1px dashed var(--border-aged); border-radius:8px; background:#fffdf6;
    text-align:center;
  }
  .background-filter-empty strong { font-family:'Cinzel',serif; color:var(--blood); }
  .background-filter-empty span { color:var(--ink-soft); font-size:12px; }
  .background-filter-empty .btn { margin-top:5px; }
  .background-book-tabs {
    display:flex; gap:8px; margin:16px 0 10px; padding:4px 0 8px;
    overflow-x:auto; scrollbar-width:thin;
  }
  .background-book-tabs button {
    display:flex; align-items:center; gap:8px; flex:0 0 auto; min-height:38px;
    padding:8px 12px; border:1px solid var(--border-aged); border-radius:6px;
    background:#fff; color:var(--ink-soft); font-weight:800; cursor:pointer;
  }
  .background-book-tabs button span {
    min-width:22px; padding:2px 6px; border-radius:999px;
    background:#edf0f2; font-size:10px; text-align:center;
  }
  .background-book-tabs button.on { border-color:var(--blood); background:var(--blood); color:#fff; }
  .background-book-tabs button.on span { background:rgba(255,255,255,.2); }
  .background-book-heading {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin:0 0 14px; color:var(--ink-soft); font-size:11px;
  }
  .background-book-heading div { display:flex; align-items:baseline; gap:8px; }
  .background-book-heading strong { color:var(--ink); font-family:'Cinzel',serif; font-size:15px; }
  .background-variant {
    margin:-2px 0 7px; color:var(--blood); font-size:9px; font-weight:800;
    text-transform:uppercase; letter-spacing:.04em;
  }
  .background-grants {
    margin-top:12px; padding:11px 12px; border:1px solid #c8d7c3;
    border-radius:6px; background:#f3f8f1;
  }
  .background-grants > strong {
    display:block; margin-bottom:7px; color:#315b2d; font-size:9px;
    text-transform:uppercase; letter-spacing:.04em;
  }
  .background-grants > div { display:flex; flex-wrap:wrap; gap:6px; }
  .background-grants span {
    padding:4px 7px; border-radius:4px; background:#fff;
    color:#315b2d; font-size:10px; font-weight:700;
  }

  @media (max-width:1150px) {
    .background-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .background-filter-grid .background-search-field { grid-column:1/-1; }
  }

  @media (max-width:760px) {
    .ui-spell-attributes { grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); }
    .ui-spell-source { width:100%; margin-left:0; }
    .background-structure-grid,
    .background-select-grid { grid-template-columns:1fr; }
    .background-choice-hub-heading,
    .background-prior-duplicate,
    .background-filter-heading { align-items:stretch; flex-direction:column; }
    .background-filter-grid { grid-template-columns:1fr; }
    .background-filter-grid .background-search-field { grid-column:auto; }
    .background-book-heading { align-items:flex-start; flex-direction:column; }
    .race-choice-deferred,
    .class-skill-choice-note { flex-direction:column; }
  }
  @media (max-width:420px) {
    .ui-spell-attributes { grid-template-columns:1fr 1fr; gap:8px 12px; }
  }