/* =========================
   Variables globales
   ========================= */
:root{
    /* Sélection / loader-bordure */
    --spin-speed: 5s;         /* vitesse de rotation */
    --slot-inner: rgba(255,255,255,.1);

    /* Palette des raretés */
    --rarity-common:    #ffffff;
    --rarity-uncommon:  #00ff00;
    --rarity-rare:      #006eff;
    --rarity-epic:      #c300c3;
    --rarity-legendary: #ff0000;
    --rarity-unique:    #ffa500;
}

/* Map rareté → couleur réutilisable */
.inventory-item { --rarity-color: var(--rarity-common); }
.inventory-item.common    { --rarity-color: var(--rarity-common); }
.inventory-item.uncommon  { --rarity-color: var(--rarity-uncommon); }
.inventory-item.rare      { --rarity-color: var(--rarity-rare); }
.inventory-item.epic      { --rarity-color: var(--rarity-epic); }
.inventory-item.legendary { --rarity-color: var(--rarity-legendary); }
.inventory-item.unique    { --rarity-color: var(--rarity-unique); }

/* =========================
   Conteneur Inventaire
   ========================= */
#inventoryTab{
    position: relative;
    background: radial-gradient(circle at 50% 110%,
        rgba(1,50,71,1) 0%,
        rgba(0,0,0,1) 58%,
        rgba(0,0,0,1) 100%);
    color: #fff;
    padding: 0 20px;
    border-radius: 15px;
    z-index: 1000;
    display: flex;
    gap: 20px;
    user-select: none;
    height: 100vh;
    justify-content: space-between;
}
#inventoryTab h3{
    position: relative;
    padding: 10px 14px;
    margin: 0;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(2,39,54,.35);
    text-align: center;
    box-shadow:
        inset 0 1px rgba(255,255,255,.297),
        inset 0 -1px rgba(0,0,0,.45),
        0 12px 28px rgba(0,0,0,.35);
}

/* =========================
   Onglets de stats (fiche perso)
   ========================= */
.stats-tabs input[type="radio"]{
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.stats-tabs{
    position: relative;
    display: flex;
    justify-content: center;
    gap: 10%;
    padding: 10px 12px 0 12px;
    margin-bottom: 50px;
}
.stats-tab{
    position: relative;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    background: rgba(2,39,54,.35);
    user-select: none;
}
#tab-attaque:checked + .stats-tab,
#tab-defense:checked + .stats-tab,
#tab-divers:checked + .stats-tab{
    color:#fff;
    background:#02638a;
    box-shadow:
        inset 0 1px rgba(255,255,255,.15),
        inset 0 -2px rgba(0,0,0,.35),
        0 6px 12px rgba(0,0,0,.25);
}

/* Panneaux fiche perso */
.fiche_attaque,.fiche_defense,.fiche_divers{ display:none; }
#inventoryTab:has(#tab-attaque:checked) #fiche_perso .fiche_attaque{ display:block; }
#inventoryTab:has(#tab-defense:checked) #fiche_perso .fiche_defense{ display:block; }
#inventoryTab:has(#tab-divers:checked)  #fiche_perso .fiche_divers { display:block; }

#fiche_perso{
    margin: 0 12px 12px 12px;
    padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(2,14,20,.9), rgba(1,9,14,0));
}
#fiche_perso h3{ display:none; }
#fiche_perso p{
    margin:8px 0;
    padding:6px 0;
    display:grid;
    grid-template-columns:max-content 1fr max-content;
    align-items:baseline;
    column-gap:12px;
    font-size:15px;
    border-bottom:1px solid #013247a7;
}
#fiche_perso p strong{ grid-column:1; color:rgba(255,255,255,.85); }
#fiche_perso p span{
    grid-column:3; text-align:right; font-weight:600;
    color:#d9faff; text-shadow:0 0 8px rgba(39,214,255,.18);
    font-variant-numeric: tabular-nums;
}

/* =========================
   Détails des dégâts (menu dépliant)
   ========================= */
#fiche_perso .stat-expandable{ border-bottom: none; padding-bottom: 0; }
#fiche_perso .stat-expandable strong{
    display:flex;
    align-items:center;
    gap:10px;
}
#fiche_perso .stat-plus{
    width:20px;
    height:20px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.25);
    background: rgba(2,39,54,.45);
    color:#d9faff;
    font-weight:800;
    line-height:18px;
    cursor:pointer;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow: inset 0 1px rgba(255,255,255,.12), 0 6px 14px rgba(0,0,0,.35);
}
#fiche_perso .stat-plus:hover{ background: rgba(2,99,138,.65); }
#fiche_perso .stat-plus:active{ transform: translateY(1px); }

#fiche_perso .stat-details{
    margin: 0 0 8px 0;
    padding: 2px 0 10px 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .18s ease, opacity .18s ease;
    border-bottom: 1px solid #013247a7;
}
#fiche_perso .stat-details.open{
    max-height: min(420px, 55vh);
    opacity: 1;
    overflow: auto;
    scrollbar-gutter: stable;
}

#fiche_perso .stat-details-row{
    margin: 6px 0 0 0;
    display: grid;
    grid-template-columns: 44px 1fr max-content; /* colonne icône fixe */
    align-items: center;         
    column-gap: 12px;
    font-size: 13px;
}

#fiche_perso .stat-details-row img.dmg-icon{
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
    justify-self: center;
}

#fiche_perso strong img.inline-dmg-icon{
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: -4px;
    margin-left: 4px;
}

#fiche_perso .stat-details-row span.dmg-icon{
    width: 44px;
    display: grid;
    place-items: center;
}

#fiche_perso .stat-details-row .dmg-label{
    color: rgba(255,255,255,.78);
}
#fiche_perso .stat-details-row .dmg-value{
    text-align: right;
    font-weight: 600;
    color:#d9faff;
    text-shadow:0 0 8px rgba(39,214,255,.18);
    font-variant-numeric: tabular-nums;
}

/* Cache la valeur à droite sur certaines stats (ex: Bonus dégâts) */
#fiche_perso .stat-expandable.no-value > span {
    display: none;
}

#fiche_perso .stat-expandable strong{
    align-items: center;
}

/* Rendre les lignes "stat-details-row" cohérentes visuellement dans la fiche DEFENSE */
#fiche_perso .fiche_defense .defense-rows .stat-details-row{
    margin: 8px 0;
    padding: 6px 0;
    border-bottom: 1px solid #013247a7;
    font-size: 15px; /* comme tes <p> */
}


/* =========================
   Colonne gauche (équipement)
   ========================= */
#characterSheet{ min-width:20vw; max-width:20vw; text-align:center; }
#characterBackground{
    position:relative;
    width:100%;
    border-radius:10px;
    overflow:hidden;
    margin:20px 0;
}
#characterBackground #niveau_joueur{ padding:10px; }
#characterImage{ width:70%; height:70%; object-fit:cover; }
#equipmentSlots{
    margin-top:20px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    flex-direction:column;
}
.equipment-slot{
    width:70px; height:70px; padding:9px;
    background: rgba(255,255,255,.1);
    border:3px solid rgba(255,255,255,.2);
    border-radius:5px;
    position:relative;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; margin:0 3px; font-size:.8em;
    overflow: hidden;
}
.equipement_container,.weapon_container{
    display:flex; align-items:center; flex-direction:column;
}
.ligne_equipement{ display:flex; margin:20px 0; }

@media (max-width: 1920px)
{
    #equipmentSlots
    {
        flex-direction: row;
    }
    .ligne_equipement
    { 
        flex-direction: column;
        gap: 8px;
    }

    #characterImage {
        width: 45%;
        height: 45%;
    }

    #characterSheet h3
    {
        font-size: 0.8em;
    }
   
}
.tooltip{
    visibility:hidden; opacity:0; transition:opacity .3s ease;
    width:120px; background:rgba(0,0,0,.8); color:#fff; text-align:center;
    border-radius:5px; padding:5px; position:absolute; z-index:1;
    bottom:125%; left:50%; transform:translateX(-50%); font-size:.7em;
}
.equipment-slot:hover .tooltip{ visibility:visible; opacity:1; }
.equipment-slot:hover{ background: rgba(255,255,255,.2); }
.equipment-slot img{ width:100%; height:100%; object-fit:cover; border-radius:8px; z-index: 3;}
.equipment-slot.highlight{
    border:2px solid rgb(240,240,240);
    box-shadow:0 0 10px rgb(240,240,240);
}

/* === Fond par rareté UNIQUEMENT si le slot n'est pas vide === */
.equipment-slot.common:has(img)::before    { background: var(--rarity-common)}
.equipment-slot.uncommon:has(img)::before  { background: var(--rarity-uncommon)}
.equipment-slot.rare:has(img)::before      { background: var(--rarity-rare)}
.equipment-slot.epic:has(img)::before      { background: var(--rarity-epic)}
.equipment-slot.legendary:has(img)::before { background: var(--rarity-legendary)}
.equipment-slot.unique:has(img)::before    { background: var(--rarity-unique)}

/* =========================
   Colonne centrale (grille)
   ========================= */
#inventoryContent{ min-width:20vw; }
#inventoryGrid{
    display:grid;
    grid-template-columns: repeat(5, 4vw);
    grid-auto-rows: 4vw;
    gap:8px;
    justify-content:center;
    margin-top:20px;
}

.inventory-slot { position: relative; overflow: visible; }
.inventory-item { position: relative; overflow: hidden; }

.inventory-slot{
    background: var(--slot-inner);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--inv-radius);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
}
.inventory-slot:hover{ --slot-inner: rgba(255,255,255,.2); }
.inventory-slot.selected-slot{
    outline:2px dashed rgba(255,255,255,.35);
    outline-offset:-3px;
}

/* =========================
   Items
   ========================= */
.inventory-item{
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    width:95%; height:95%;
    cursor:pointer; user-select:none;
    border:2px solid transparent; /* défini par rareté ci-dessous */
}

.inventory-item img{
    width:40px; height:40px; object-fit:cover; border-radius:5px; user-select:none;z-index: 3;
}

.inventory-item .t1-stars-badge{
    position: absolute;
    bottom: 7px;
    left: 7px;
    color: rgba(255, 255, 255, .95);
    font-size: 18px;
    line-height: 1;
    letter-spacing: 1px;
    text-shadow: 0 0 6px rgba(255, 255, 255, .35);
    pointer-events: none;
    z-index: 4;
}

.item-level{
    position:absolute; bottom:5px; right:5px;
    background:rgba(0,0,0,.7); color:#fff;
    padding:2px 5px; border-radius:3px;
    font-size:12px; font-weight:bold; user-select:none;
    z-index: 3;
}

.selected-item
{
    border:none!important
}

.selected-item::before
{   
    content: "";
    position: absolute;
    width: 50%;
    height: 300%;
    z-index: 1;
    animation: rotate var(--spin-speed, 1s) linear infinite;
}

.selected-item::after
{
    content: "";
    position: absolute;
    background: rgba(26, 31, 34, 1);
    width: 90%;
    height: 90%;
    z-index: 2;
}

@keyframes rotate { to { transform: rotate(1turn); } }

/* Bordure statique par rareté (quand non sélectionné) */
.inventory-item.common      { border-color: var(--rarity-common);}
.inventory-item.uncommon    { border-color: var(--rarity-uncommon)}
.inventory-item.rare        { border-color: var(--rarity-rare)}
.inventory-item.epic        { border-color: var(--rarity-epic)}
.inventory-item.legendary   { border-color: var(--rarity-legendary)}
.inventory-item.unique      { border-color: var(--rarity-unique); position:relative}

/* fond arrière rotatif par rareté (quand sélectionné) */
.selected-item.common::before    {  background-color:var(--rarity-common);}
.selected-item.uncommon::before  { background-color:var(--rarity-uncommon);}
.selected-item.rare::before      { background-color:var(--rarity-rare);}
.selected-item.epic::before      { background-color:var(--rarity-epic);}
.selected-item.legendary::before { background-color:var(--rarity-legendary);}
.selected-item.unique::before    { background-color:var(--rarity-unique);}

/* Étoile rendue par le slot si l'item est unique (pas coupée, pas de conflit) */
.inventory-slot:has(.inventory-item.unique)::after{
    content: "★";
    position: absolute;
    width: 24px;
    height: 24px;
    left: -10px;              
    top:  -10px;
    display: block;
    line-height: 24px;        /* centre le glyph dans le carré */
    text-align: center;
    color: gold;
    font-size: 20px;
    background: rgba(0,0,0,.7);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999;
    transform-origin: 12px 12px;
    transform: rotate(0turn);
}
.inventory-slot:has(.inventory-item.unique.selected-item)::after{
    transform-origin: 12px 12px;
    animation: rotateBackground var(--spin-speed, 1s) linear infinite;
}

/* =========================
   Nom de l'objet (pilule)
   ========================= */
.item-name{
    position:absolute; left:50%; transform:translateX(-50%);
    background:#ffffff; border:5px solid;
    padding:2px 10px; border-radius:5px;
    text-transform:uppercase; text-align:center; white-space:nowrap;
    z-index:1000; color:#000;
}
.item-name.common    { border-color: var(--rarity-common);    color:#000; font-size:10px; }
.item-name.uncommon  { border-color: var(--rarity-uncommon);  color:var(--rarity-uncommon);  font-size:10px; }
.item-name.rare      { border-color: var(--rarity-rare);      color:var(--rarity-rare);      font-size:10px; }
.item-name.epic      { border-color: var(--rarity-epic);      color:var(--rarity-epic);      font-size:15px; }
.item-name.legendary { border-color: var(--rarity-legendary); color:var(--rarity-legendary); font-size:20px; }
.item-name.unique{
    border-width:10px; border-color: var(--rarity-unique);
    color:var(--rarity-unique); font-size:25px; position:relative; width:fit-content;
}
.item-name.unique::before{
    content:"★";
    position:absolute; top:-26px; left:-20px;
    color:gold; font-size:60px; width:24px; height:24px;
    display:flex; align-items:center; justify-content:center;
}
.item-name.custom-background{ background:#000; color:#333; border-color:#ccc; }

/* =========================
   Loot au sol + auras
   ========================= */
.item{
    position:absolute; will-change:left,top; transform:none; pointer-events:none;
}
.item::after{
    content:"";
    position:absolute; top:50%; left:50%;
    width:100%; height:100%;
    border-radius:50%;
    transform:translate(-50%, -50%);
    opacity:.5; z-index:-1;
    animation: pulseScale 2s infinite;
}
@keyframes pulseScale{
    0%{ transform:translate(-50%,-50%) scale(1); }
    50%{ transform:translate(-50%,-50%) scale(1.2); }
    100%{ transform:translate(-50%,-50%) scale(1); }
}
.item.common::after{
    background: radial-gradient(circle, rgba(255,255,255,.6) 10%, rgba(198,198,198,.3) 50%, rgba(45,45,45,0) 100%);
    box-shadow: 0 0 15px 5px rgba(198,198,198,.5);
    filter: blur(10px);
}
.item.uncommon::after{
    background: radial-gradient(circle, rgba(0,255,34,.6) 10%, rgba(82,250,79,.3) 50%, rgba(97,255,115,0) 100%);
    box-shadow: 0 0 15px 5px rgba(82,250,79,.5);
    filter: blur(10px);
}
.item.rare::after{
    background: radial-gradient(circle, rgba(30,30,242,.6) 10%, rgba(111,79,255,.3) 50%, rgba(139,162,255,0) 100%);
    box-shadow: 0 0 15px 5px rgba(111,79,255,.5);
    filter: blur(10px);
}
.item.epic::after{
    background: radial-gradient(circle, rgba(249,26,190,.6) 10%, rgba(235,129,216,.3) 50%, rgba(255,144,231,0) 100%);
    box-shadow: 0 0 15px 5px rgba(235,129,216,.5);
    filter: blur(10px);
}
.item.legendary::after{
    background: radial-gradient(circle, rgba(255,0,0,.6) 10%, rgba(248,113,113,.3) 50%, rgba(255,144,144,0) 100%);
    box-shadow: 0 0 15px 5px rgba(248,113,113,.5);
    filter: blur(10px);
}
.item.unique::after{
    background: radial-gradient(circle, rgba(255,162,0,.751) 10%, rgba(248,196,113,.51) 50%, rgba(255,237,144,0) 100%);
    box-shadow: 0 0 15px 5px rgb(235,159,38);
    filter: blur(10px);
}
.item.no-aura::after{ display:none; }
.item-value{
    position:absolute; bottom:20px; text-align:center;
    color:gold; font-size:14px; font-weight:bold; text-shadow:1px 1px 2px #000;
}

/* =========================
   Armes actives & indicateurs
   ========================= */

.equipment-slot { --slot-rarity-color: var(--rarity-common); }
.equipment-slot.common    { --slot-rarity-color: var(--rarity-common); }
.equipment-slot.uncommon  { --slot-rarity-color: var(--rarity-uncommon); }
.equipment-slot.rare      { --slot-rarity-color: var(--rarity-rare); }
.equipment-slot.epic      { --slot-rarity-color: var(--rarity-epic); }
.equipment-slot.legendary { --slot-rarity-color: var(--rarity-legendary); }
.equipment-slot.unique    { --slot-rarity-color: var(--rarity-unique); }

/* Teinte par rareté quand rempli */
.equipment-slot.common:has(img)    { border-color: var(--rarity-common); }
.equipment-slot.uncommon:has(img)  { border-color: var(--rarity-uncommon); }
.equipment-slot.rare:has(img)     { border-color: var(--rarity-rare); }
.equipment-slot.epic:has(img)      { border-color: var(--rarity-epic); }
.equipment-slot.legendary:has(img) { border-color: var(--rarity-legendary); }
.equipment-slot.unique:has(img)    { border-color: var(--rarity-unique); }

.equipment-slot.active-weapon
{
    border: 3px solid transparent !important;
}

.equipment-slot.active-weapon::before
{   
    content: "";
    position: absolute;
    width: 50%;
    height: 300%;
    z-index: 1;
    animation: rotate var(--spin-speed, 1s) linear infinite;
}

.equipment-slot.active-weapon::after
{
    content: "";
    position: absolute;
    background: rgba(26, 31, 34, 1);
    width: 90%;
    height: 90%;
    z-index: 2;
}

/* =========================
   Drag & drop helpers
   ========================= */
.inventory-slot.drag-over-empty{
    outline:2px solid rgba(0,255,180,.9);
    outline-offset:-3px;
    box-shadow:0 0 10px rgba(0,255,180,.6);
}
.inventory-slot.drag-over-swap{
    outline:2px dashed rgba(255,255,255,.75);
    outline-offset:-3px;
    box-shadow:0 0 10px rgba(255,255,255,.35);
}

/* =========================
   Onglets de stockage (Inventaire)
   ========================= */
.storage-tabs input[type="radio"]{
    position:absolute;
    inline-size:1px; block-size:1px;
    overflow:hidden; clip:rect(0 0 0 0);
    white-space:nowrap;
}
.storage-tabs{ display:flex; gap:12px; }
.storage-tabs .stats-tab{ flex:1 1 0; text-align:center; }

#tab-loot:checked + .stats-tab,
#tab-craft:checked + .stats-tab,
#tab-quest:checked + .stats-tab{
    color:#fff; background:#02638a;
    box-shadow:
        inset 0 1px rgba(255,255,255,.15),
        inset 0 -2px rgba(0,0,0,.35),
        0 6px 12px rgba(0,0,0,.25);
}
.stock-panel{ display:none; }
#inventoryTab:has(#tab-loot:checked)  #inventoryContent .stock_loot  { display:block; }
#inventoryTab:has(#tab-craft:checked) #inventoryContent .stock_craft { display:block; }
#inventoryTab:has(#tab-quest:checked) #inventoryContent .stock_quest { display:block; }
.empty-stock{ opacity:.8; padding:12px 0 4px; font-style:italic; }

/* =========================
   Aide pour la barre d'interaction
   ========================= */
.interaction-hint{
    position:absolute; right:0; bottom:0; width:100vw;
    display:flex; align-items:center; justify-content:center;
    gap:10px; padding:12px;
    border-radius:10px;
    background:rgba(0,0,0,.35);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.35);
    color:#e9fbff; font-weight:700; letter-spacing:.02em;
    opacity:0; transform:translateY(6px);
    pointer-events:none; transition:opacity .15s ease, transform .15s ease;
    user-select:none;
}
.interaction-hint .keycap{
    display:inline-flex; min-width:1.8em; justify-content:center;
    padding:2px 8px; border-radius:6px;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.18);
    box-shadow:inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
    color:#fff; font-weight:800;
}

#inventoryTab:has(#tab-loot:checked):has(.selected-item) .interaction-hint{
    opacity:1; transform:translateY(0);
    pointer-events:auto;
}

.interaction-hint-inner{
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:12px;
    width:100%;
    /*max-width:1100px;*/
    padding:4px 8px;
}

.interaction-hint .hint-section{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    font-size:20px;
    white-space:nowrap;
}

.interaction-hint .hint-label{
    opacity:1;
    font-weight:500;
    font-size:20px;
}

/* Pastilles de rareté */
.interaction-hint .rarity-dot{
    width:25px;
    height:25px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.6);
    box-shadow:0 0 0 1px rgba(255,255,255,.25),
               0 0 6px rgba(0,0,0,.7);
    cursor:pointer;
}

/* Couleurs basées sur tes variables existantes */
.interaction-hint .rarity-dot.common{
    background-color:var(--rarity-common);
}
.interaction-hint .rarity-dot.uncommon{
    background-color:var(--rarity-uncommon);
}
.interaction-hint .rarity-dot.rare{
    background-color:var(--rarity-rare);
}
.interaction-hint .rarity-dot.epic{
    background-color:var(--rarity-epic);
}
.interaction-hint .rarity-dot.legendary{
    background-color:var(--rarity-legendary);
}
.interaction-hint .rarity-dot.unique{
    background-color:var(--rarity-unique);
}

.interaction-hint .rarity-dot.disabled{
    opacity:.1;
    cursor:default;
    box-shadow:none;
}

/* Boutons de type (icônes Cockpit/Coque/Propulsion/Scanner/Arme) */
.interaction-hint .type-pill
{
    width:50px;
    height:50px;
    border-radius:999px;
    padding:3px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.45);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:
        inset 0 1px rgba(255,255,255,.09),
        0 3px 9px rgba(0,0,0,.4);
    cursor:pointer;
}

.interaction-hint .type-pill img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    pointer-events:none;
}

.interaction-hint .type-pill.disabled{
    opacity:.1;
    cursor:default;
    box-shadow:none;
}

.interaction-hint .all-pill,
.interaction-hint .main-pill{
    display:flex;
    align-items:center;
    gap:6px;
    height:35px;
    padding:0 12px;
    border-radius:999px;
    background:none;
    border:none;
    box-shadow: none;
    color:red;
    font-weight:700;
    font-size: 20px;
    cursor:pointer;
    white-space:nowrap;
}
.interaction-hint .all-pill .keycap{ font-size: 20px;}
.interaction-hint .all-pill.disabled{
    opacity:.35;
    cursor:default;
    box-shadow:none;
    filter:grayscale(.3);
}

.interaction-hint .main-pill
{
    color:white;
}

.interaction-hint .main-pill.disabled{
    opacity:.35;
    cursor:default;
    box-shadow:none;
    filter:grayscale(.3);
}


/* Cadenas sur l’item */
.inventory-item .lock-badge{
    position:absolute;
    left:6px;
    bottom:6px;
    z-index: 4;
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.6));
    pointer-events: none;
}

/* léger feedback si suppression refusée (optionnel) */
.inventory-slot.deny{
    outline:2px solid rgba(255,80,80,.9);
    outline-offset:-3px;
    transition: outline-color .18s ease;
}

/* =========================
   Petites animations utilitaires
   ========================= */
@keyframes fadeOut{
    from{ opacity:1; transform:scale(1); }
    to  { opacity:0; transform:scale(.8); }
}
.equipment-slot img.unequip-animation{ animation: fadeOut .3s ease forwards; }

/* ===== Craft dans l'onglet stock_craft ===== */

.stock_craft {
    gap: 12px; /* si parent en flex/grid, ça espace */
}

.stock_craft .craft-wrapper {
    flex: 1 1 0;           /* si parent en flex */
    min-width: 280px;
}

/* Grille interne des morceaux */
.stock_craft .craft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 5px;
}

.craft-grid .piece .piece-img {
    width: 28px;
    height: 28px;
    display: block;
    margin: 0 auto;
    object-fit: contain;           /* propre sur PNG */
    image-rendering: crisp-edges;  /* utile si petits PNG pixel-art */
}

/* --- Slots Craft : image + aura coloré --- */
.stock_craft .craft-slot {
    min-height: 52px;
    background: var(--slot-inner);
    border: none;                 /* plus de cadre */
    border-radius: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.stock_craft .craft-slot .piece {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
}

.stock_craft .craft-slot .piece-img {
    width: 42px;
    height: 42px;
    /* Glow : 3 couches, teintées via --glow-color (définie par rareté) */
    filter:
        drop-shadow(0 0 6px var(--glow-color))
        drop-shadow(0 0 14px var(--glow-color))
        drop-shadow(0 0 28px var(--glow-color));
}

/* Libellé & compteur */
.stock_craft .craft-slot .slot-label {
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 12px;
    opacity: 0;
}

.stock_craft .craft-slot .slot-count {
    position: absolute;
    right: 8px;
    bottom: 6px;
    font-weight: 800;
    text-shadow: 0 0 4px #000;
}

/* Couleurs du glow par rareté : s’appuie sur tes variables */
.stock_craft .craft-slot.common    { --glow-color: var(--rarity-common); }
.stock_craft .craft-slot.uncommon  { --glow-color: var(--rarity-uncommon); }
.stock_craft .craft-slot.rare      { --glow-color: var(--rarity-rare); }
.stock_craft .craft-slot.epic      { --glow-color: var(--rarity-epic); }
.stock_craft .craft-slot.legendary { --glow-color: var(--rarity-legendary); }
.stock_craft .craft-slot.unique    { --glow-color: var(--rarity-unique); }

/* État vide : icône + glow fortement atténués */
.stock_craft .craft-slot.empty .piece-img {
    opacity: .38; /* dim l’icône ET son glow */
    filter:
        drop-shadow(0 0 2px var(--glow-color))
        drop-shadow(0 0 6px var(--glow-color));
}

.stock_craft .inventory-slot.craft-slot {
    border: 0 !important;
    box-shadow: none !important;
}

/* ====== Titre "Morceaux d'équipement" ====== */
.stock_craft .craft-section {
    margin-top: 4px;
}

.stock_craft .craft-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 10px;
    padding: 20px;

    font-size: 20px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;

    color: #e9edf2; /* neutre clair, lisible sur fond sombre */
    text-shadow:
        0 1px 0 rgba(0,0,0,.7),
        0 0 8px rgba(255,255,255,.08);
}

/* Pastille brillante à gauche (icône neutre façon “halo”) */
.stock_craft .craft-title::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #ffffff 35%, rgba(255,255,255,.55) 55%, rgba(255,255,255,0) 70%),
        radial-gradient(50% 50% at 50% 50%, rgba(150,200,255,.35), rgba(150,200,255,0) 70%);
    filter:
        drop-shadow(0 0 6px rgba(160,200,255,.45))
        drop-shadow(0 0 14px rgba(160,200,255,.25));
}

/* Ligne de séparation qui part du titre vers la droite */
.stock_craft .craft-title::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    margin-left: 6px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgb(255 255 255), rgba(255, 255, 255, 0));
}