/* ---------- Écran de victoire ---------- */
  #victory{
    position:absolute; inset:0;
    display:none;
    align-items:center; justify-content:center;
    background:rgba(8,6,12,.72);
    z-index:10;
  }
  #victory.show{display:flex}
  #victory .card{
    background:var(--panel);
    border:1px solid var(--accent-dim);
    border-radius:12px;
    padding:32px 44px;
    text-align:center;
    max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); overflow:auto;
    box-shadow:0 0 40px rgba(224,168,60,.15), 0 12px 40px rgba(0,0,0,.6);
    animation:pop .3s ease-out;
  }
  @keyframes pop{from{transform:scale(.92); opacity:0} to{transform:scale(1); opacity:1}}
  #victory h2{
    color:var(--accent);
    font-size:1.5rem; letter-spacing:.12em; text-transform:uppercase;
    margin-bottom:10px;
  }
  #victory h2.ko{color:var(--danger)}
  #victory p{color:var(--ink-dim); margin-bottom:20px; line-height:1.6}
  #victory p b{color:var(--ink)}
  /* Bouton REJOUER : liseré rouge qui pulse façon battement de cœur */
  #btnVictoryNewMap{
    position:relative;
    border:2px solid var(--danger,#e0503c);
    color:#ffd9d2; font-weight:bold; letter-spacing:.04em;
    animation:heartbeat 1.6s ease-in-out infinite;
  }
  #btnVictoryNewMap:hover{
    background:#2a1418; border-color:#ff6a52;
    animation-duration:1s;   /* le cœur s'emballe au survol */
  }
  /* Sortie de niveau : on met en avant CONTINUER (Descendre), pas Quitter.
     Le bouton Continuer devient primaire (vert, pulsé) et le bouton
     « Sauvegarder et quitter » devient discret. */
  #btnDescend{
    order:-1;                                  /* toujours en premier (à gauche) */
    border:2px solid #2c7c48; color:#0c1810; font-weight:bold; letter-spacing:.03em;
    background:linear-gradient(180deg,#6fe090,#3fa860);
    box-shadow:0 0 14px rgba(95,208,128,.5);
    animation:pulseGo 1.8s ease-in-out infinite;
  }
  #btnDescend:hover{ background:linear-gradient(180deg,#8ff0a8,#4fc070); animation-duration:1.1s }
  @keyframes pulseGo{
    0%,100%{ box-shadow:0 0 10px rgba(95,208,128,.4); transform:scale(1) }
    50%    { box-shadow:0 0 20px rgba(95,208,128,.95); transform:scale(1.05) }
  }
  #btnVictoryNewMap.quiet{
    animation:none; border:1px solid var(--panel-edge); color:var(--ink-dim);
    background:var(--panel); font-weight:normal; box-shadow:none; letter-spacing:normal;
  }
  #btnVictoryNewMap.quiet:hover{ background:#241d2e; border-color:var(--accent-dim); color:var(--ink) }
  @media (prefers-reduced-motion: reduce){ #btnDescend{ animation:none } }
  @keyframes heartbeat{
    0%   { box-shadow:0 0 0 0 rgba(224,80,60,.0),   0 0 6px rgba(224,80,60,.4); }
    12%  { box-shadow:0 0 0 5px rgba(224,80,60,.0), 0 0 16px rgba(224,80,60,.95); transform:scale(1.05); }
    24%  { box-shadow:0 0 0 0 rgba(224,80,60,.0),   0 0 6px rgba(224,80,60,.4);  transform:scale(1); }
    36%  { box-shadow:0 0 0 5px rgba(224,80,60,.0), 0 0 16px rgba(224,80,60,.95); transform:scale(1.05); }
    50%  { box-shadow:0 0 0 0 rgba(224,80,60,.0),   0 0 6px rgba(224,80,60,.4);  transform:scale(1); }
    100% { box-shadow:0 0 0 0 rgba(224,80,60,.0),   0 0 6px rgba(224,80,60,.4); }
  }
  @media (prefers-reduced-motion: reduce){
    #victory .card{animation:none}
    #btnVictoryNewMap{animation:none}
  }
  /* ---------- Alerte : écrasement d'un score de pseudo ---------- */
  #scoreWarn{ position:fixed; inset:0; display:none; align-items:center; justify-content:center;
              background:rgba(8,6,12,.8); z-index:70 }
  #scoreWarn.show{ display:flex }
  #scoreWarn .card{ background:var(--panel); border:1px solid var(--danger, #d05a5a);
    border-radius:12px; padding:30px 40px; text-align:center; max-width:min(460px,92vw);
    box-shadow:0 12px 40px rgba(0,0,0,.6); animation:pop .3s ease-out }
  #scoreWarn h2{ color:var(--danger,#e07070); font-size:1.25rem; letter-spacing:.06em;
    text-transform:uppercase; margin-bottom:12px }
  #scoreWarn p{ color:var(--ink-dim); margin-bottom:16px; line-height:1.6 }
  #scoreWarn p b{ color:var(--ink) }
  .sw-detail{ background:#1a1420; border:1px solid var(--panel-edge); border-radius:8px;
    padding:10px 12px; margin-bottom:16px; color:var(--ink); font-weight:700 }
  #scoreWarn button{ background:#3a2430; border:1px solid #5a3644; color:#f0c0c8;
    border-radius:8px; padding:9px 18px; cursor:pointer; font-size:.9rem }
  #scoreWarn button.sw-danger{ background:var(--danger,#c0504a); border-color:transparent;
    color:#fff; font-weight:700 }
  #levelup{ position:absolute; inset:0; display:none; align-items:center; justify-content:center;
            background:rgba(8,6,12,.82); z-index:14 }
  #levelup.show{ display:flex }
  #levelup .card{ background:var(--panel); border:1px solid var(--accent-dim); border-radius:12px;
                  padding:24px 30px; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.6); animation:pop .3s ease-out;
                  max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); overflow:auto }
  #levelup h2{ color:var(--accent); font-size:1.3rem; letter-spacing:.08em; margin-bottom:6px }
  #levelup #luText{ color:var(--ink-dim); margin-bottom:16px }
  .lu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
  .lu-btn{ display:flex; flex-direction:column; gap:2px; align-items:center;
           background:#2a2436; border:1px solid var(--panel-edge); border-radius:10px;
           padding:12px 14px; cursor:pointer; color:var(--ink); min-width:150px }
  .lu-btn:hover{ border-color:var(--target); box-shadow:0 0 8px rgba(92,200,216,.4); transform:translateY(-1px) }
  .lu-btn b{ font-size:1rem }
  .lu-btn span{ color:var(--accent); font-size:.8rem }
  .lu-btn small{ color:var(--ink-dim); font-size:.7rem; line-height:1.3 }

  /* ---------- Boutique entre deux niveaux ---------- */
  #shop{ position:absolute; inset:0; display:none; align-items:center; justify-content:center;
         background:rgba(8,6,12,.82); z-index:14 }
  #shop.show{ display:flex }
  #shop .card{ background:var(--panel); border:1px solid var(--accent-dim); border-radius:12px;
               padding:24px 30px; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.6); animation:pop .3s ease-out;
               max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); overflow:auto }
  #shop h2{ color:var(--accent); font-size:1.3rem; letter-spacing:.08em; margin-bottom:6px }
  .shop-pts{ color:#ffd870; margin-bottom:4px; font-size:.95rem }
  .shop-sub{ color:var(--ink-dim); margin-bottom:14px; font-size:.8rem }
  .shop-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px }
  @media (max-width:700px){ .shop-grid{ grid-template-columns:1fr 1fr } }
  .shop-btn{ position:relative; display:flex; flex-direction:column; gap:3px; align-items:center;
             background:#2a2436; border:1px solid var(--panel-edge); border-radius:10px;
             padding:22px 14px 12px; cursor:pointer; color:var(--ink); min-width:150px }
  .shop-btn:hover{ border-color:var(--target); box-shadow:0 0 8px rgba(92,200,216,.4); transform:translateY(-1px) }
  .shop-btn b{ font-size:.95rem }
  .shop-btn small{ color:var(--ink-dim); font-size:.7rem; line-height:1.3 }
  .shop-btn:disabled{ opacity:.45; cursor:default; transform:none; box-shadow:none }
  .shop-btn.shop-btn-maxed{ border-color:#5a9e6f }

  /* ---------- Bonus permanents (méta-progression, js/75) ---------- */
  /* JAMAIS SOUS LE MENU DU HAUT (2026-09-04, demande Pixel) : la boutique
     couvrait tout l'écran (inset:0) et sa carte, centrée sur la hauteur
     entière, glissait derrière l'en-tête (z-index:70). Elle démarre donc au
     BAS de l'en-tête, dont on lit la hauteur mesurée `--hdr-h`
     (syncHeaderHeightVar, js/44) plutôt qu'une constante — l'en-tête passe à
     deux rangées sur écran étroit. */
  #metaShop{ position:fixed; top:var(--hdr-h, 80px); left:0; right:0; bottom:0;
             display:none; align-items:center; justify-content:center;
             background:rgba(8,6,12,.82); z-index:20 }
  #metaShop.show{ display:flex }
  #metaShop .card{ background:var(--panel); border:1px solid var(--accent-dim); border-radius:12px;
               padding:24px 30px; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.6); animation:pop .3s ease-out;
               max-width:min(760px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto }
  #metaShop h2{ color:var(--accent); font-size:1.3rem; letter-spacing:.08em; margin-bottom:6px }
  /* boutique du livre (js/75) : sous-section de #metaShop, sous la grille des
     4 bonus curatés d'origine */
  .meta-book-title{ color:var(--accent-dim,#8a7ab0); font-size:.95rem; letter-spacing:.05em;
    margin:18px 0 4px; text-align:left; border-top:1px solid var(--panel-edge); padding-top:14px }

  /* ---------- Mutateurs de run (js/76) ---------- */
  #mutatorPick{ position:fixed; inset:0; display:none; align-items:center; justify-content:center;
             background:rgba(8,6,12,.82); z-index:20 }
  #mutatorPick.show{ display:flex }
  #mutatorPick .card{ background:var(--panel); border:1px solid var(--accent-dim); border-radius:12px;
               padding:24px 30px; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.6); animation:pop .3s ease-out;
               max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); overflow:auto }
  #mutatorPick h2{ color:var(--accent); font-size:1.3rem; letter-spacing:.08em; margin-bottom:6px }
  .shop-btn .price{ color:#ffd870; font-size:.8rem; font-weight:bold }
  /* pastille indiquant le TYPE d'objet (Soin / Consommable / Équipement…) */
  .item-type{ display:inline-block; font-size:.62rem; font-weight:bold; line-height:1;
    padding:2px 6px; border-radius:999px; border:1px solid currentColor;
    letter-spacing:.03em; text-transform:uppercase; opacity:.95 }
  /* ÉTIQUETTE de magasin : type + prix, façon petit carton accroché en haut à droite */
  .price-tag{ position:absolute; top:-7px; right:-6px; z-index:2;
    display:inline-flex; align-items:center; gap:5px;
    font-size:.6rem; font-weight:bold; letter-spacing:.04em; line-height:1;
    color:#1a1420; background:var(--tagcol,#ffd870);
    padding:4px 9px 4px 16px; transform:rotate(3deg);
    border-radius:3px 5px 5px 3px;
    box-shadow:0 2px 4px rgba(0,0,0,.45);
    clip-path:polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%); }
  .price-tag::before{ content:""; position:absolute; left:5px; top:50%;
    width:4px; height:4px; margin-top:-2px; border-radius:50%;
    background:#1a1420; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
  .price-tag .pt-type{ text-transform:uppercase }
  /* PRIX DE DÉPART BARRÉ (retour Pixel : « avec le prix de départ barré »),
     affiché uniquement sur un article en Promotion (voir itemPriceTag/js/47) —
     juste avant le prix réduit, comme une étiquette de solde. */
  .price-tag .pt-price-old{ background:rgba(0,0,0,.16); color:rgba(255,255,255,.7);
    padding:1px 5px; border-radius:3px; white-space:nowrap;
    text-decoration:line-through; text-decoration-color:#ff5a48; text-decoration-thickness:1.5px }
  .price-tag .pt-price{ background:rgba(0,0,0,.22); color:#fff;
    padding:1px 5px; border-radius:3px; white-space:nowrap }
  .shop-btn.sold{ opacity:.55; pointer-events:none }
  /* étiquette VENDU : le corps de l'étiquette devient rouge (il fait office de
     contour, POINTE comprise), le libellé sombre est posé par-dessus avec la
     même découpe pointue → le rouge suit parfaitement la pointe */
  .shop-btn.sold .price-tag{ background:#e0503c }
  .shop-btn.sold .price-tag::after{ content:"VENDU"; position:absolute; inset:2px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(26,20,32,.94); color:#ff5a48; font-weight:bold;
    letter-spacing:.08em; font-size:.6rem;
    clip-path:polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%) }
  .shop-btn.broke{ opacity:.55 }
  .shop-btn.broke .price{ color:#e06050 }
  .shop-btn.broke .price-tag{ box-shadow:0 0 0 2px #e06050, 0 2px 4px rgba(0,0,0,.45) }
  /* comparaison à l'équipement actuellement porté (au SURVOL uniquement, pour
     ne pas alourdir la grille — repliée sinon, dépliée en douceur). max-height
     relevé à 110px (2026-08-11) : le comparatif est désormais une LISTE d'une
     ligne par bonus (.cmp-list, css/11) plutôt qu'un paragraphe compact — les
     objets à plusieurs bonus ont besoin de plus de place pour ne rien couper. */
  .shop-cmp{ max-height:0; opacity:0; overflow:hidden; margin-top:0; text-align:left;
    transition:max-height .15s ease, opacity .15s ease, margin-top .15s ease }
  .shop-btn:hover .shop-cmp, .shop-btn:focus-visible .shop-cmp{ max-height:110px; opacity:1; margin-top:4px }
  .shop-cmp .cmp-line{ font-size:.68rem }
  /* rappel discret de CE À QUOI on compare, avant la liste de deltas — sans
     quoi le survol n'affiche que des +/- flottants sans contexte visible */
  .shop-cmp-lbl{ display:block; font-size:.62rem; color:var(--ink-dim,#8a7ab0); margin-bottom:2px }
  /* BADGE Promotion / Pénurie (variation de prix aléatoire, retour Pixel) —
     posé en haut à GAUCHE pour ne jamais chevaucher le price-tag (haut droit) */
  .shop-badge{ position:absolute; top:-7px; left:-6px; z-index:2;
    display:inline-flex; align-items:center; font-size:.58rem; font-weight:bold;
    letter-spacing:.03em; line-height:1; padding:4px 8px; border-radius:999px;
    box-shadow:0 2px 4px rgba(0,0,0,.45); white-space:nowrap }
  /* PROMOTION (retour Pixel : « retire la partie en vert et l'emoji, déplace
     le badge à pointes jaune sous le prix ») — plus de pastille verte pleine :
     juste l'éclat DENTELÉ jaune (::before, en clip-path étoile), texte posé
     directement dessus, placé SOUS l'étiquette de prix (top-droite) au lieu
     du coin haut-gauche d'origine. */
  .shop-badge-promo{ background:none; box-shadow:none; color:#1a1408;
    top:24px; left:auto; right:-6px }
  .shop-badge-promo::before{
    content:""; position:absolute; z-index:-1;
    top:50%; left:50%; transform:translate(-50%,-50%);
    width:calc(100% + 14px); height:calc(100% + 14px);
    background:#ffd23f;
    clip-path:polygon(50% 0%,61% 20%,81% 12%,78% 34%,100% 40%,84% 55%,96% 75%,
      74% 72%,68% 92%,50% 78%,32% 92%,26% 72%,4% 75%,16% 55%,0% 40%,
      22% 34%,19% 12%,39% 20%);
  }
  /* PÉNURIE (retour Pixel : « pénurie ressemble à un panneau danger ») —
     pastille sombre cerclée de jaune, surmontée d'un petit triangle
     avertissement rayé noir/jaune (::before), façon panneau de chantier. */
  .shop-badge-penurie{ background:#1a1408; color:#ffe14a; border:1.5px solid #ffcc33;
    padding-top:9px; text-shadow:0 1px 2px rgba(0,0,0,.6) }
  .shop-badge-penurie::before{
    content:""; position:absolute; left:50%; top:-9px; transform:translateX(-50%);
    width:20px; height:15px;
    background:repeating-linear-gradient(135deg,#ffcc33 0 4px,#1a1408 4px 8px);
    clip-path:polygon(50% 0%,100% 100%,0% 100%);
    box-shadow:0 1px 2px rgba(0,0,0,.5);
  }
  /* VALEUR DE REVENTE MOYENNE (« coût théorique ») — toujours visible (pas
     seulement au survol comme .shop-cmp), sous la description */
  .shop-theo{ display:block; margin-top:4px; font-size:.62rem;
    color:var(--ink-dim,#8a7ab0); text-align:left }
  /* ---------- Vente directe en boutique (retour Pixel) ---------- */
  .shop-sell-title{ color:var(--accent-dim,#8a7ab0); font-size:.9rem; letter-spacing:.05em;
    margin:16px 0 8px; text-align:left; border-top:1px solid var(--panel-edge); padding-top:14px }
  .shop-sell-grid{ display:flex; flex-direction:column; gap:6px; text-align:left }
  .shop-sell-item{ display:flex; align-items:center; gap:10px;
    background:#2a2436; border:1px solid var(--panel-edge); border-radius:8px;
    padding:8px 12px }
  .shop-sell-item .shop-sell-icon{ font-size:1.1rem }
  .shop-sell-item .meta{ flex:1; font-size:.8rem }
  .shop-sell-item button{ padding:6px 12px; border-radius:8px; cursor:pointer;
    background:#3a3048; border:1px solid var(--panel-edge); color:#ffd870; font-size:.75rem }
  .shop-sell-item button:hover{ filter:brightness(1.15) }
  .shop-sell-empty{ color:var(--ink-dim); font-size:.8rem; text-align:center; padding:6px 0 }
  #shopMsg{ min-height:1.2em; color:var(--ink-dim); font-size:.8rem; margin-top:10px }
  #shopGo{ margin-top:12px; padding:10px 26px; border-radius:10px; cursor:pointer;
           background:linear-gradient(180deg,#5fd080,#3fa860); border:1px solid #2c7c48;
           color:#0c1810; font-weight:bold; font-size:.95rem }
  #shopGo:hover{ filter:brightness(1.1) }