:root{
    --bg-primary:#0A2118;
    --bg-secondary: rgba(255,255,255,0.06);
    --surface:#123B29;
    --surface-elevated:#16452F;
    --border: rgba(255,255,255,0.10);
    --shadow: rgba(0,0,0,0.32);
    --hover-surface: rgba(255,255,255,0.09);

    --text-primary:#F4F1E9;
    --text-secondary: rgba(244,241,233,0.62);
    --text-muted: rgba(244,241,233,0.42);

    --accent-primary:#0FA36E;
    --accent-primary-hover:#34D399;
    --accent-secondary:#6EE7B7;
    --danger:#E8555F;
    --success:#3FBE8E;

    --rare:#5AA9E6;
    --legendary:#F4C95D;
    --legendary-glow:#FFE9B0;
    --tres-rare:#4FD1C5;
    --epique:#C77DFF;
    --mystere:#E8555F;
    --commun:#9CA69C;

    --stat-sante:#3FBE8E;
    --stat-bonheur:#FF9F6B;
    --stat-argent:#D4A24C;
    --stat-relations:#C77DFF;
    --stat-education:#5AA9E6;
    --stat-chance:#F4C95D;

    /* Alias historiques du menu : identiques à la palette ci-dessus, conservés
       pour ne pas casser les classes .home-* qui les référencent directement. */
    --home-bg-1:#0E2E20;
    --home-bg-2:#123B29;
    --home-bg-3:#0A2118;
    --home-green:#34D399;
    --home-green-deep:#0FA36E;
    --home-card-bg: rgba(255,255,255,0.06);
    --home-card-border: rgba(255,255,255,0.10);
    --home-text:#F4F1E9;
    --home-text-secondary: rgba(244,241,233,0.62);
    --home-text-muted: rgba(244,241,233,0.42);
    --home-shadow: rgba(0,0,0,0.32);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    min-height:100vh;
    font-family:'Inter', sans-serif;
    color:var(--text-primary);
    background:
      radial-gradient(circle at 18% -8%, rgba(52,211,153,0.18), transparent 50%),
      radial-gradient(circle at 100% 6%, rgba(15,163,110,0.14), transparent 45%),
      linear-gradient(165deg, var(--home-bg-2) 0%, var(--home-bg-1) 55%, var(--home-bg-3) 100%);
    background-attachment: fixed;
    padding:32px 16px 60px;
    display:flex;
    justify-content:center;
  }
  .app{ width:100%; max-width:460px; }
  .app *{ -webkit-tap-highlight-color: transparent; }
  ::selection{ background: var(--accent-primary); color:#fff; }

  /* Le menu principal utilise des cartes flottantes directement sur le fond :
     .card y reste transparent. Sur les autres écrans, .card garde son
     panneau (voir règle .card plus bas), désormais recoloré à l'identique. */
  body.home-bg .card{ background:transparent; border:none; box-shadow:none; padding:0; overflow:visible; }

  svg.icon{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; }
  .token-icon{ display:inline-block; vertical-align:-3px; flex-shrink:0; }

  .timeline{ display:flex; gap:5px; margin-bottom:16px; padding:0 2px; }
  .dot{ flex:1; height:4px; border-radius:3px; background:rgba(255,255,255,0.09); overflow:hidden; }
  .dot.done{ background:var(--accent-secondary); }
  .dot.current{ background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary)); }

  .card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:22px;
    padding:28px 24px 24px;
    box-shadow: 0 24px 60px var(--shadow);
    position:relative;
    overflow:hidden;
  }

  .brand{
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-bottom:20px;
    font-family:'Sora',sans-serif; font-weight:800; font-size:19px; letter-spacing:0;
  }
  .brand .t1{ color: var(--text-primary); }
  .brand .t2{ color: var(--accent-secondary); }

  /* ===== BOUTON PERMANENT DE RETOUR AU MENU ===== */
  .menu-back-btn{
    position:sticky; top:8px; z-index:500;
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin:0 auto 14px; padding:7px 14px; width:max-content;
    background:var(--bg-secondary); border:1.5px solid var(--border); border-radius:20px;
    color:var(--text-secondary); font-family:'Sora',sans-serif; font-weight:700; font-size:12px;
    cursor:pointer; transition: border-color .12s ease, color .12s ease, background .12s ease;
  }
  .menu-back-btn svg{ width:14px; height:14px; }
  .menu-back-btn:hover{ border-color:var(--accent-primary); color:var(--text-primary); background:var(--hover-surface); }

  .home{ text-align:left; padding:4px 0 4px; }
  .home-topbar{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; }
  .home-token-pill{
    display:flex; align-items:center; gap:5px; font-family:'Sora',sans-serif; font-weight:700; font-size:12px;
    color:var(--home-text); background:var(--home-card-bg); border:1px solid var(--home-card-border);
    padding:7px 13px; border-radius:20px; flex-shrink:0; white-space:nowrap;
  }
  .home-tagline{ font-size:13.5px; color:var(--home-text-secondary); line-height:1.55; margin:0 0 24px; }

  .home-hero{
    cursor:pointer; background: linear-gradient(150deg, var(--home-green-deep), var(--home-green) 70%, #6EE7B7);
    border-radius:26px; padding:26px 24px 24px; margin-bottom:14px;
    box-shadow: 0 18px 40px rgba(15,163,110,0.30);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .home-hero:hover{ transform:translateY(-2px); }
  .home-hero:active{ transform:scale(.985); }
  .home-hero-icon{ font-size:30px; display:block; margin-bottom:12px; }
  .home-hero-title{ font-family:'Sora',sans-serif; font-weight:800; font-size:21px; color:#052015; margin-bottom:6px; }
  .home-hero-desc{ font-size:13px; color:rgba(5,32,21,0.72); line-height:1.5; }

  .home-continue{
    display:flex; align-items:center; gap:12px; cursor:pointer;
    background:var(--home-card-bg); border:1.5px solid rgba(52,211,153,0.38); border-radius:20px;
    padding:16px 18px; margin-bottom:22px;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .home-continue:hover{ transform:translateX(2px); border-color:var(--home-green); background:rgba(255,255,255,0.09); }
  .home-continue-icon{ font-size:19px; flex-shrink:0; }
  .home-continue-body{ flex:1; min-width:0; }
  .home-continue-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:14px; color:var(--home-text); }
  .home-continue-desc{ font-size:11.5px; color:var(--home-text-muted); margin-top:2px; line-height:1.4; }
  .home-continue svg{ color:var(--home-text-muted); flex-shrink:0; }

  .home-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
  .home-card{
    cursor:pointer; text-align:center; background:var(--home-card-bg); border:1.5px solid var(--home-card-border);
    border-radius:20px; padding:22px 10px; box-shadow:0 10px 22px var(--home-shadow);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
  }
  .home-card:hover{ transform:translateY(-3px); border-color:var(--home-green); background:rgba(255,255,255,0.09); }
  .home-card-icon{ font-size:25px; display:block; margin-bottom:8px; }
  .home-card-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:13.5px; color:var(--home-text); }

  .home-bottom-list{ display:flex; flex-direction:column; gap:10px; }
  .home-bottom-item{
    display:flex; align-items:center; gap:12px; cursor:pointer;
    background:var(--home-card-bg); border:1.5px solid var(--home-card-border); border-radius:18px;
    padding:14px 16px; transition: transform .15s ease, border-color .15s ease, background .15s ease;
  }
  .home-bottom-item:hover{ transform:translateX(2px); border-color:rgba(52,211,153,0.35); background:rgba(255,255,255,0.09); }
  .home-bottom-icon{ font-size:17px; width:22px; text-align:center; flex-shrink:0; }
  .home-bottom-label{ font-family:'Sora',sans-serif; font-weight:700; font-size:13.5px; color:var(--home-text); flex:1; }
  .home-bottom-item svg{ color:var(--home-text-muted); flex-shrink:0; }

  @media (max-width:360px){
    .home-hero-title{ font-size:19px; }
    .home-card{ padding:18px 8px; }
  }

  .placeholder{ text-align:center; padding:26px 4px 6px; }
  .placeholder .p-emoji{ font-size:44px; display:block; margin-bottom:14px; }
  .placeholder .p-title{ font-family:'Sora',sans-serif; font-weight:800; font-size:20px; margin:0 0 8px; }
  .placeholder .p-sub{ font-size:14px; color:var(--text-secondary); margin:0 0 26px; }

  .identity-headline{
    font-family:'Sora',sans-serif; font-weight:800; font-size:22px; line-height:1.3;
    text-align:center; margin:6px 0 24px; color:var(--text-primary);
  }
  .identity-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .identity-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
  @media (max-width:400px){ .identity-grid.cols-3{ grid-template-columns:1fr 1fr; } }
  .identity-card{
    background:var(--bg-secondary); border:1.5px solid var(--border); border-radius:18px;
    padding:20px 8px; text-align:center; cursor:pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
  }
  .identity-card:hover{ transform:translateY(-3px); border-color:var(--accent-primary); background:var(--hover-surface); }
  .identity-card .emoji{ font-size:38px; display:block; margin-bottom:10px; }
  .identity-card .flag{ display:block; margin-bottom:8px; font-size:34px; line-height:1; }
  .flag-svg{ width:38px; height:25px; border-radius:3px; box-shadow:0 0 0 1px rgba(255,255,255,0.14); }
  .identity-card .lbl{ font-family:'Sora',sans-serif; font-weight:700; font-size:13.5px; color:var(--text-primary); }

  /* Bande de stats : passage d'une grille 6 colonnes (icône + barre
     minuscules) à des lignes lisibles affichant la valeur chiffrée.
     Le code couleur d'origine est conservé intégralement. */
  .stats-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:5px 8px; margin-bottom:14px; }
  .stat-chip{ background:var(--bg-secondary); border-radius:12px; padding:6px 8px; display:flex; align-items:center; gap:6px; }
  .stat-chip svg{ width:14px; height:14px; flex:0 0 auto; }
  .stat-chip .stat-ico{ display:flex; align-items:center; }
  .stat-chip .stat-body{ flex:1 1 auto; min-width:0; }
  /* Nom et valeur sur la MÊME ligne, juste au-dessus de la jauge : le nom
     devient lisible sans ajouter de ligne ni agrandir la carte. */
  .stat-chip .stat-head{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-bottom:3px; }
  .stat-chip .stat-name{ font-family:'Sora',sans-serif; font-weight:600; font-size:10.5px; color:var(--text-secondary); letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .stat-chip .stat-num{ font-family:'Sora',sans-serif; font-weight:800; font-size:11px; color:var(--text-primary); white-space:nowrap; flex:0 0 auto; }
  .stat-chip .stat-max{ font-weight:600; font-size:9px; color:var(--text-muted); }
  .stat-chip .bar{ height:5px; border-radius:4px; background:rgba(255,255,255,0.08); overflow:hidden; }
  .stat-chip .fill{ height:100%; border-radius:4px; transition:width .5s ease; }
  .fill.sante{ background:var(--stat-sante); } .stat-chip.sante svg{ color:var(--stat-sante); }
  .fill.relations{ background:var(--stat-relations); } .stat-chip.relations svg{ color:var(--stat-relations); }
  .stat-chip.argent{ grid-column:1 / -1; justify-content:flex-start; }
  .stat-chip.argent svg{ color:var(--stat-argent); }
  .stat-chip .money-val{ font-family:'Sora',sans-serif; font-weight:800; font-size:12.5px; color:var(--stat-argent); white-space:nowrap; }
  .fill.bonheur{ background:var(--stat-bonheur); } .stat-chip.bonheur svg{ color:var(--stat-bonheur); }
  .fill.education{ background:var(--stat-education); } .stat-chip.education svg{ color:var(--stat-education); }
  .fill.chance{ background:var(--stat-chance); } .stat-chip.chance svg{ color:var(--stat-chance); }

  /* En-tête compact de l'écran de jeu : âge + raccourcis sur une seule
     ligne (au lieu de 4 éléments empilés) pour limiter le défilement. */
  .stage-topbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
  .age-pill{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--bg-secondary); color:var(--text-secondary); font-family:'Sora',sans-serif; font-weight:700; font-size:12px;
    padding:7px 14px; border-radius:20px; border:1px solid var(--border);
  }
  .age-pill svg{ color:var(--accent-secondary); }
  .dash-links{ display:flex; gap:6px; flex-shrink:0; }
  .dash-link{
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; font-size:15px; cursor:pointer;
    background:var(--bg-secondary); border:1px solid rgba(52,211,153,0.3); border-radius:50%;
    transition: border-color .12s ease, background .12s ease;
  }
  .dash-link:hover{ border-color:var(--accent-secondary); background:var(--hover-surface); }

  .scene-emoji{ font-size:38px; text-align:center; display:block; margin-bottom:8px; }
  .narrative{ font-size:15px; line-height:1.5; text-align:center; color:var(--text-primary); margin:0 0 4px; }
  .prompt{
    font-family:'Sora',sans-serif; font-weight:700; font-size:15.5px; text-align:center;
    margin:10px 0 12px; color:var(--accent-secondary);
  }

  .options{ display:flex; flex-direction:column; gap:8px; }
  .opt{
    text-align:left; background:var(--bg-secondary); border:1.5px solid var(--border); border-radius:16px;
    padding:13px 16px; font-family:'Inter',sans-serif; font-weight:600; font-size:14px; color:var(--text-primary);
    cursor:pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease;
  }
  .opt:hover{ transform:translateX(2px); border-color:var(--accent-primary); background:var(--hover-surface); }
  .opt:disabled{ cursor:default; opacity:.4; transform:none; }

  /* Résumé compact du choix effectué, à la place de la liste d'options
     désactivées (gain d'espace vertical, voir collapseOptions() en JS). */
  .chosen-option{
    display:flex; align-items:center; gap:9px;
    background:var(--bg-secondary); border:1px solid rgba(52,211,153,0.3); border-radius:14px;
    padding:11px 14px; font-size:13.5px; color:var(--text-secondary);
  }
  .chosen-option .co-check{ color:var(--accent-secondary); font-weight:800; flex-shrink:0; }

  .consequence-block{ margin-top:12px; }
  .delta-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
  .delta-row{
    display:flex; align-items:center; gap:10px;
    background:var(--bg-secondary); border-radius:12px; padding:8px 12px;
    animation: deltaIn .35s ease both;
  }
  .delta-row:nth-child(1){ animation-delay:.03s; }
  .delta-row:nth-child(2){ animation-delay:.09s; }
  .delta-row:nth-child(3){ animation-delay:.15s; }
  .delta-row:nth-child(4){ animation-delay:.21s; }
  .delta-row:nth-child(5){ animation-delay:.27s; }
  @keyframes deltaIn{
    from{ opacity:0; transform:translateY(6px) scale(.97); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  .delta-emoji{ font-size:16px; width:22px; text-align:center; }
  .delta-label{ font-size:13.5px; color:var(--text-primary); flex:1; font-weight:500; }
  .delta-value{ font-family:'Sora',sans-serif; font-weight:800; font-size:14.5px; }
  .delta-value.up{ color:var(--success); }
  .delta-value.down{ color:var(--danger); }

  .consequence{
    padding:13px 16px; background:var(--bg-secondary);
    border-radius:16px; font-size:14px; line-height:1.5; color:var(--text-primary);
    border-left:3px solid var(--accent-primary);
  }

  .btn-primary{
    width:100%; margin-top:6px; font-family:'Sora',sans-serif; font-weight:700; font-size:14px;
    background:linear-gradient(135deg,var(--accent-primary),var(--accent-primary-hover)); color:#fff; border:none;
    padding:15px; border-radius:16px; cursor:pointer; letter-spacing:.02em;
    display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow: 0 10px 24px rgba(15,163,110,0.35);
  }
  .btn-primary:hover{ filter:brightness(1.08); }

  .btn-outline{
    width:100%; margin-top:12px; font-family:'Sora',sans-serif; font-weight:700; font-size:13.5px;
    background:transparent; border:1.5px solid var(--border); color:var(--text-secondary); padding:13px; border-radius:16px; cursor:pointer;
  }
  .btn-outline:hover{ border-color:var(--accent-secondary); color:var(--text-primary); }

  .death-wrap{ text-align:center; animation: deathFadeIn .6s ease both; }
  @keyframes deathFadeIn{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .death-halo{
    width:88px; height:88px; margin:0 auto 14px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:38px;
    background: radial-gradient(circle, rgba(244,201,93,0.22), rgba(244,201,93,0) 70%);
    box-shadow: 0 0 0 1px rgba(244,201,93,0.18) inset;
    animation: haloBreathe 3.5s ease-in-out infinite;
  }
  @keyframes haloBreathe{
    0%,100%{ box-shadow: 0 0 0 1px rgba(244,201,93,0.18) inset, 0 0 18px rgba(244,201,93,0.05); }
    50%{ box-shadow: 0 0 0 1px rgba(244,201,93,0.32) inset, 0 0 28px rgba(244,201,93,0.14); }
  }
  .age-hero{ font-family:'Sora',sans-serif; font-weight:800; font-size:40px; line-height:1; color:var(--text-primary); margin-bottom:2px; }
  .age-hero-label{ font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; }
  .epitaph{ font-family:'Sora',sans-serif; font-weight:800; font-size:20px; line-height:1.3; margin:0 0 12px; color:var(--legendary); }
  .cause-badge{
    display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-secondary);
    background:var(--bg-secondary); border:1px solid var(--border); border-radius:20px;
    padding:6px 14px; margin-bottom:22px;
  }

  .express-card{
    background:linear-gradient(135deg, rgba(244,201,93,0.12), rgba(15,163,110,0.16));
    border:1px solid rgba(244,201,93,0.28); border-radius:18px; padding:16px 14px; margin-bottom:22px;
  }
  .express-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:11px; color:var(--legendary); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }
  .express-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .express-item{ text-align:center; }
  .express-item .ex-emoji{ font-size:19px; display:block; margin-bottom:4px; }
  .express-item .ex-value{ font-family:'Sora',sans-serif; font-weight:800; font-size:14px; color:var(--text-primary); line-height:1.25; }
  .express-item .ex-label{ font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.02em; }

  .reward-card{ background:linear-gradient(135deg, rgba(15,163,110,0.20), rgba(110,231,183,0.12)); border:1px solid rgba(52,211,153,0.32); border-radius:18px; padding:14px 16px; margin-bottom:22px; }
  .reward-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:11px; color:var(--legendary); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
  .reward-row{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--text-secondary); padding:4px 0; }
  .reward-row .reward-val{ font-family:'Sora',sans-serif; font-weight:700; color:var(--success); }
  .reward-row.total{ border-top:1px solid var(--border); margin-top:6px; padding-top:9px; }
  .reward-row.total span:first-child{ font-family:'Sora',sans-serif; font-weight:700; color:var(--text-primary); font-size:13.5px; }
  .reward-row.total .reward-val{ color:var(--legendary); font-size:16px; }

  /* ===== BOUTIQUE ===== */
  .shop-tabs{ display:flex; gap:6px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:16px; padding:4px; margin-bottom:16px; }
  .shop-tab{
    flex:1; border:none; background:transparent; color:var(--text-secondary); font-family:'Sora',sans-serif; font-weight:700; font-size:12.5px;
    padding:10px 8px; border-radius:12px; cursor:pointer; transition: background .15s ease, color .15s ease;
  }
  .shop-tab.active{ background:var(--accent-primary); color:#fff; }
  .shop-balance{ font-size:14px; font-weight:700; color:var(--text-primary); margin:8px 0 16px; }
  .shop-sort{ margin-bottom:14px; }
  .shop-sort-select{
    width:100%; background:var(--bg-secondary); border:1.5px solid var(--border); border-radius:12px;
    color:var(--text-secondary); font-family:'Inter',sans-serif; font-size:12.5px; padding:9px 12px; -webkit-appearance:none;
  }
  .shop-card{ background:var(--bg-secondary); border:1.5px solid var(--border); border-radius:16px; padding:14px 16px; margin-bottom:10px; }
  .shop-card.owned{ border-color:rgba(79,209,197,0.4); }
  .shop-card-top{ display:flex; gap:12px; align-items:flex-start; margin-bottom:10px; }
  .shop-icon{ font-size:24px; width:34px; text-align:center; flex-shrink:0; }
  .shop-body{ flex:1; min-width:0; }
  .shop-name-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px; }
  .shop-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:14px; color:var(--text-primary); }
  .shop-badge{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:10px; }
  .shop-badge.owned{ background:var(--success); color:#0A0B1C; }
  .shop-badge.locked{ background:var(--text-muted); color:#0A0B1C; }
  .shop-desc{ font-size:12.5px; color:var(--text-secondary); line-height:1.45; }
  .btn-shop{
    width:100%; padding:11px; border-radius:12px; border:none; font-family:'Sora',sans-serif; font-weight:700; font-size:13px; cursor:pointer;
    background:var(--accent-primary); color:#fff;
  }
  .btn-shop:disabled{ background:rgba(255,255,255,0.06); color:var(--text-muted); cursor:default; }
  .btn-shop.bought{ background:rgba(79,209,197,0.15); color:var(--accent-secondary); }

  .modal-overlay{
    position:fixed; inset:0; background:rgba(10,11,28,0.72); z-index:1000;
    display:flex; align-items:flex-end; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .modal-overlay.show{ opacity:1; pointer-events:auto; }
  .modal-box{
    width:100%; max-width:428px; background:var(--bg-secondary); border:1px solid var(--border);
    border-radius:22px 22px 0 0; padding:22px 20px calc(20px + env(safe-area-inset-bottom,0px));
    transform:translateY(24px); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .modal-overlay.show .modal-box{ transform:translateY(0); }
  .modal-title{ font-family:'Sora',sans-serif; font-weight:800; font-size:16px; margin-bottom:12px; }
  .modal-item{ font-size:14px; margin-bottom:12px; }
  .modal-row{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-secondary); padding:5px 0; }
  .modal-actions{ display:flex; gap:10px; margin-top:16px; }
  .modal-actions .btn-outline, .modal-actions .btn-primary{ flex:1; }

  /* ===== HISTORIQUE DES VIES ===== */
  .history-stats{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px; }
  .history-stat{
    flex-shrink:0; min-width:84px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:14px;
    padding:10px 12px; text-align:center;
  }
  .history-stat b{ display:block; font-family:'Sora',sans-serif; font-weight:800; font-size:14px; color:var(--text-primary); }
  .history-stat span{ font-size:10px; color:var(--text-muted); }
  .history-search{
    width:100%; background:var(--bg-secondary); border:1.5px solid var(--border); border-radius:12px;
    color:var(--text-primary); font-family:'Inter',sans-serif; font-size:13px; padding:11px 14px; margin-bottom:12px;
  }
  .history-search::placeholder{ color:var(--text-muted); }
  .life-card{ cursor:pointer; }
  .life-fav{ font-size:16px; color:var(--text-muted); cursor:pointer; flex-shrink:0; }
  .life-fav.active{ color:var(--legendary); }

  /* ===== RECORDS ===== */
  .record-group-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin:18px 2px 8px; }
  .record-list{ background:var(--bg-secondary); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
  .record-row{ display:flex; justify-content:space-between; align-items:center; padding:11px 14px; font-size:13px; color:var(--text-secondary); border-bottom:1px solid var(--border); }
  .record-row:last-child{ border-bottom:none; }
  .record-row.locked{ color:var(--text-muted); }
  .record-empty{ font-size:11.5px; color:var(--text-muted); font-style:italic; }
  .record-value{ text-align:right; font-family:'Sora',sans-serif; font-weight:700; color:var(--text-primary); font-size:13px; line-height:1.3; }
  .record-value small{ font-family:'Inter',sans-serif; font-weight:400; color:var(--text-muted); font-size:10.5px; }

  .dash-link{
    display:inline-block; margin:8px 0 4px; font-family:'Sora',sans-serif; font-weight:700; font-size:11.5px;
    color:var(--accent-secondary); cursor:pointer; padding:6px 12px; border:1px solid rgba(79,209,197,0.3); border-radius:20px;
  }

  .cat-block{ margin-bottom:12px; border-bottom:1px solid var(--border); padding-bottom:12px; }
  .cat-block:last-of-type{ border-bottom:none; }
  .cat-summary{
    cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
    font-family:'Sora',sans-serif; font-weight:700; font-size:12.5px; color:var(--text-secondary);
    text-transform:uppercase; letter-spacing:.05em; padding:4px 0;
  }
  .cat-summary::-webkit-details-marker{ display:none; }
  .cat-summary .chev{ color:var(--text-muted); transition:transform .2s ease; flex-shrink:0; }
  .cat-block[open] .cat-summary .chev{ transform:rotate(90deg); }
  .cat-block .end-grid{ margin-top:12px; margin-bottom:0; }

  .section-label{
    font-family:'Sora',sans-serif; font-weight:700; font-size:11px; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.07em; margin:0 0 10px; text-align:left;
  }
  .end-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px; }
  .end-row{ display:flex; flex-direction:column; gap:2px; font-size:13px; padding:10px 12px; background:var(--bg-secondary); border-radius:12px; text-align:left; }
  .end-row b{ color:var(--text-muted); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; }

  .breve{ margin-top:4px; padding:16px 18px; background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-secondary); border-radius:16px; font-style:italic; font-size:13.5px; line-height:1.55; text-align:left; position:relative; }
  .breve::before{ content:"“"; font-family:'Sora',sans-serif; position:absolute; top:-6px; left:12px; font-size:34px; color:var(--legendary); opacity:.5; font-style:normal; }

  .footer-note{ text-align:center; margin-top:16px; font-size:11px; color: rgba(244,241,233,0.35); }

  /* ===== SUCCÈS DE FIN DE VIE (uniquement ceux réellement débloqués) ===== */
  .end-ach-list{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; text-align:left; }
  .end-ach-chip{
    display:flex; align-items:center; gap:6px; background:var(--bg-secondary);
    border:1.5px solid var(--ach-color, rgba(244,201,93,0.4)); border-radius:14px; padding:8px 12px;
  }
  .end-ach-icon{ font-size:16px; }
  .end-ach-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:12.5px; color:var(--text-primary); }
  .end-ach-empty{ text-align:left; color:var(--text-muted); font-size:13px; font-style:italic; padding:2px 2px 6px; }

  /* ===== PARTAGE DU RÉSUMÉ DE VIE (JPEG / PDF) ===== */
  .share-btn-row{ display:flex; gap:10px; margin-bottom:0; }
  .share-btn{ flex:1; margin-top:0; font-size:12.5px; padding:13px 8px; }
  .share-status{ text-align:center; font-size:11.5px; color:var(--text-muted); min-height:16px; margin-top:8px; }

  /* ===== SUCCÈS ===== */
  .ach-header{ text-align:center; padding:4px 4px 2px; margin-bottom:6px; }
  .ach-header .p-title{ font-family:'Sora',sans-serif; font-weight:800; font-size:20px; margin:10px 0 10px; }
  .ach-summary-track{ background:rgba(255,255,255,0.08); border-radius:14px; height:8px; overflow:hidden; margin:4px 0 8px; }
  .ach-summary-fill{ height:100%; border-radius:14px; background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary)); transition:width .5s ease; }
  .ach-summary-text{ font-size:12.5px; color:var(--text-secondary); margin-bottom:18px; }

  .ach-filters-row{ display:flex; align-items:center; gap:6px; }
  .ach-scroll-arrow{
    display:none; flex-shrink:0; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%; border:1.5px solid var(--border);
    background:var(--bg-secondary); color:var(--text-secondary); cursor:pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
  }
  .ach-scroll-arrow:hover{ border-color:var(--accent-primary); color:var(--text-primary); background:var(--hover-surface); }
  .ach-scroll-arrow svg{ width:15px; height:15px; }
  @media (hover:hover) and (pointer:fine){
    .ach-scroll-arrow{ display:flex; }
  }

  .ach-filters{ flex:1; min-width:0; display:flex; gap:8px; overflow-x:auto; padding:2px 2px 16px; margin:0 -2px; }
  .ach-filters::-webkit-scrollbar{ display:none; }
  .ach-filter-chip{
    flex-shrink:0; font-family:'Sora',sans-serif; font-weight:700; font-size:12px; white-space:nowrap;
    padding:8px 14px; border-radius:20px; border:1.5px solid var(--border); background:var(--bg-secondary); color:var(--text-secondary); cursor:pointer;
  }
  .ach-filter-chip.active{ background:var(--accent-primary); border-color:var(--accent-primary); color:#fff; }

  .ach-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
  .ach-card{ display:flex; gap:12px; align-items:flex-start; background:var(--bg-secondary); border:1.5px solid var(--border); border-radius:16px; padding:14px 16px; }
  .ach-card.unlocked{ border-color:var(--ach-color, var(--accent-primary)); }
  .ach-icon{ font-size:24px; width:34px; text-align:center; flex-shrink:0; }
  .ach-body{ flex:1; min-width:0; }
  .ach-name-row{ display:flex; align-items:center; gap:8px; margin-bottom:3px; flex-wrap:wrap; }
  .ach-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:14px; color:var(--text-primary); }
  .ach-rarity-badge{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:10px; color:#0A0B1C; background:var(--ach-color, var(--text-muted)); flex-shrink:0; }
  .ach-desc{ font-size:12.5px; color:var(--text-secondary); line-height:1.45; margin-bottom:6px; }
  .ach-meta{ font-size:11px; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:8px 14px; }
  .ach-reward{ font-weight:700; color:var(--legendary); }
  .ach-progress-track{ height:5px; border-radius:4px; background:rgba(255,255,255,0.08); overflow:hidden; margin-top:8px; }
  .ach-progress-fill{ height:100%; border-radius:4px; background:var(--ach-color, var(--accent-secondary)); }
  .ach-progress-text{ font-size:10.5px; color:var(--text-muted); margin-top:4px; }

  .ach-mystery{ justify-content:center; text-align:center; flex-direction:column; align-items:center; background:#102A1D; border-style:dashed; opacity:.85; padding:18px 16px; }
  .ach-mystery-icon{ font-size:24px; margin-bottom:6px; opacity:.55; }
  .ach-mystery-label{ font-family:'Sora',sans-serif; font-weight:700; font-size:12px; color:var(--text-muted); letter-spacing:.05em; text-transform:uppercase; }
  .ach-card.pending{ opacity:.65; }
  .ach-pending-tag{ color:var(--text-muted); font-style:italic; }

  .ach-empty{ text-align:center; padding:34px 10px; color:var(--text-muted); font-size:13.5px; line-height:1.5; }

  /* ===== NOTIFICATION DE SUCCÈS ===== */
  .ach-toast{
    position:fixed; left:50%; top:16px; transform:translate(-50%,-160%); z-index:999;
    width:calc(100% - 32px); max-width:428px;
    background:linear-gradient(135deg,#16452F,#0E2E20); border:1px solid rgba(244,201,93,0.4);
    border-radius:18px; padding:14px 16px; box-shadow:0 20px 50px rgba(0,0,0,0.5);
    display:flex; align-items:center; gap:12px; pointer-events:none;
    transition: transform .45s cubic-bezier(.34,1.56,.64,1);
  }
  .ach-toast.show{ transform:translate(-50%,0); }
  .ach-toast-icon{ font-size:26px; flex-shrink:0; }
  .ach-toast-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:10px; color:var(--legendary); text-transform:uppercase; letter-spacing:.07em; }
  .ach-toast-name{ font-family:'Sora',sans-serif; font-weight:800; font-size:14.5px; color:var(--text-primary); margin-top:1px; }
  .ach-toast-reward{ font-family:'Sora',sans-serif; font-weight:700; font-size:12px; color:var(--success); margin-top:2px; }