/* =========================
   Craft Workbench (craftTab)
   ========================= */
#craftTab{
    align-items: stretch;
    justify-content: stretch;
    flex-direction: column;
    height: 100%;
    font-size: 1em;
    color: #fff;
    text-align: left;
}

.craft-workbench{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 5px 20px;
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: 18px;
}

.cw-col{
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 10px 30px rgba(0,0,0,0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cw-col-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 14px 10px 14px;
    background: rgba(1, 50, 71, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 4vh;
}

.cw-title{
    font-weight: 900;
    letter-spacing: 0.06em;
    font-size: 18px;
}

.cw-subtitle{
    margin-top: 6px;
    opacity: 0.75;
    font-size: 13px;
}

.cw-filters{
    display: flex;
    gap: 0 8px;
}

.cw-filter{
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.25);
    color: #fff;
    border-radius: 10px;
    padding: 8px 10px;
    font-weight: 700;
}

.cw-filter:hover{
    background: rgba(2, 99, 138, 0.35);
}

.cw-list{
    padding: 10px;
    overflow: auto;
    min-height: 0;
}

/* =========================
   Grille d'objets (cases)
   ========================= */
.cw-grid{
    --cw-cell: 4vw;
    display: grid;
    grid-template-columns: repeat(5, var(--cw-cell));
    grid-auto-rows: var(--cw-cell);
    gap: 8px;
    justify-content: center;
    align-content: start;
    max-height: 75vh;
}

.cw-slot{
    position: relative;
    background: var(--slot-inner, rgba(255,255,255,.1));
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: visible;
}

.cw-slot:hover{ --slot-inner: rgba(255,255,255,.2); }

.cw-grid-item{
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 95%;
    height: 95%;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
}

.cw-grid-item img{
    width: 67%;
    height: 67%;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
    z-index: 3;
}

.cw-img-ph{
    width: 67%;
    height: 67%;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
}

/* Bordure statique par rareté */
.cw-grid-item.common      { border-color: var(--rarity-common); }
.cw-grid-item.uncommon    { border-color: var(--rarity-uncommon); }
.cw-grid-item.rare        { border-color: var(--rarity-rare); }
.cw-grid-item.epic        { border-color: var(--rarity-epic); }
.cw-grid-item.legendary   { border-color: var(--rarity-legendary); }
.cw-grid-item.unique      { border-color: var(--rarity-unique); }

/* ⭐ Unique: petite étoile dans le coin (comme l'inventaire) */
.cw-slot:has(.cw-grid-item.unique)::after{
    content: "★";
    position: absolute;
    width: 24px;
    height: 24px;
    left: -10px;
    top: -10px;
    display: block;
    line-height: 24px;
    text-align: center;
    color: gold;
    font-size: 20px;
    background: rgba(0,0,0,.7);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999;
}

/* Lv (coin bas droit) */
.cw-item-level{
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 900;
    user-select: none;
    z-index: 4;
    pointer-events: none;
}

/* Badge source I/E (coin haut droit) */
.cw-src-badge{
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 1000;
    background: rgba(0,0,0,.65);
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.9);
    z-index: 4;
    pointer-events: none;
}

.cw-src-badge.inventory{ box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.cw-src-badge.equipped{ box-shadow: 0 0 0 1px rgba(0,255,180,.18); }

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

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

/* Si l'empty est dans la grille, on le fait prendre toute la largeur */
.cw-grid .cw-empty{
    grid-column: 1 / -1;
}

.cw-empty{
    opacity: 0.75;
    padding: 12px;
    font-style: italic;
}

.cw-details-body{
    padding: 12px;
    overflow: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cw-card{
    position: relative;
    overflow: hidden;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.22);
    margin-bottom: 12px;
}

/* Couleur "thème" par rareté (utilisée par l'en-tête détails) */
.cw-card.common{    --cw-rarity-color: var(--rarity-common); }
.cw-card.uncommon{  --cw-rarity-color: var(--rarity-uncommon); }
.cw-card.rare{      --cw-rarity-color: var(--rarity-rare); }
.cw-card.epic{      --cw-rarity-color: var(--rarity-epic); }
.cw-card.legendary{ --cw-rarity-color: var(--rarity-legendary); }
.cw-card.unique{    --cw-rarity-color: var(--rarity-unique); }

.cw-card::before{
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0),
        color-mix(in srgb, var(--cw-rarity-color, rgba(47,226,255,0.65)) 75%, transparent),
        rgba(0,0,0,0)
    );
    opacity: 0.95;
    pointer-events: none;
}

.cw-card-bg{
    position: absolute;
    inset: -18px;
    background-size: cover;
    background-position: center;
    filter: blur(18px) saturate(1.1);
    opacity: 0.14;
    transform: scale(1.12);
    pointer-events: none;
}

.cw-card-bg.no-img{
    display: none;
}

.cw-card-head{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cw-card-icon{
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04),
        0 10px 22px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cw-card-icon::after{
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 14px;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cw-rarity-color, rgba(47,226,255,0.65)) 55%, transparent);
    opacity: 0.9;
}

.cw-card-icon img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}

.cw-card-icon-ph{
    width: 70%;
    height: 70%;
    border-radius: 12px;
    border: 1px dashed rgba(255,255,255,0.18);
    opacity: 0.55;
}

.cw-card-info{
    min-width: 0;
}

.cw-card-title{
    font-weight: 1000;
    font-size: 18px;
    letter-spacing: 0.02em;
    text-shadow: 0 0 10px rgba(0,0,0,0.35);
}

.cw-card-meta{
    margin-top: 6px;
    opacity: 0.85;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.08em;
}

.cw-card-rarity{
    color: var(--cw-rarity-color, rgba(255,255,255,0.85));
    text-shadow: 0 0 12px color-mix(in srgb, var(--cw-rarity-color, rgba(47,226,255,0.65)) 25%, transparent);
}

.cw-dot{
    margin: 0 8px;
    opacity: 0.6;
}

.cw-card-badges{
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.cw-card-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.22);
    font-weight: 1000;
    letter-spacing: 0.06em;
}

.cw-card-badge.t1{
    border-color: rgba(255, 201, 64, 0.40);
    box-shadow: 0 0 0 1px rgba(255, 201, 64, 0.15), 0 0 14px rgba(255, 201, 64, 0.12);
    color: #ffe6a3;
}

.cw-card-badge.lock{
    opacity: 0.9;
}

.cw-stats{
    display: flex;
    flex-direction: column;
    gap: 8px;

    --cw-stat-col-name: 320px;
    --cw-stat-col-tags: 320px;
    --cw-stat-col-val: 80px; /* pas utilisé pour le moment*/
}

.cw-stat-row{
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(240px, var(--cw-stat-col-name))
        minmax(160px, var(--cw-stat-col-tags))
        minmax(50px, 1fr)
        max-content;
    align-items: center;
    column-gap: 12px;
    row-gap: 0;

    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.cw-stat-row.required{
    opacity: 0.92;
}

.cw-stat-row.selected{
    border-color: rgba(47,226,255,.55);
    background:
        linear-gradient(90deg, rgba(47,226,255,.10), rgba(0,0,0,0) 55%) padding-box,
        rgba(0,0,0,0.18);
    box-shadow: inset 10px 0 12px rgb(2 99 138), 0px 3px 0 1px rgb(2 99 138) !important;
}

.cw-stat-name{
    min-width: 0;
    font-weight: 900;
    font-size: 20px; /* 25px -> 20px */
    line-height: 1.05;
}

.cw-stat-label{
    display: inline-flex;
    align-items: center;
    gap: var(--type-icon-gap, .45em);
    min-width: 0;
}

.cw-stat-tags-col{
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

#craftTab .cw-stat-name img{
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
}

#craftTab .tier-badge{
    margin-left: 38px;
    border: 1px solid rgba(47,226,255,.45);
    border-radius: 10px;
    padding: 4px 8px;
    color: #d9faff;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 42px;
    box-sizing: border-box;
}

#craftTab .tier-badge .tier-text{
    font-weight: 900;
    letter-spacing: .06em;
    font-size: 12px;
}

#craftTab .tier-badge .tier-meter{
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

#craftTab .tier-badge .tier-meter-fill{
    display: block;
    height: 100%;
    width: 0%;
    background: currentColor;
}

#craftTab .tier-badge.t1{
    border-color: var(--tier1-gold, #FFC940) !important;
    color: var(--tier1-gold, #FFC940) !important;
    box-shadow:
        0 0 10px rgba(255,201,64,.25),
        inset 0 0 8px rgba(255,201,64,.12);
}

#craftTab .cw-stat-row .tier-badge{
    justify-self: end;
}

/* Ligne T1 (fond + glow or comme inventaire) */
.cw-stat-row.t1-stat{
    border-color: var(--tier1-gold, #FFC940) !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%) padding-box,
      radial-gradient(120% 140% at 50% 0%, rgba(255,201,64,.18), rgba(255,201,64,0) 55%) padding-box,
      rgba(0,0,0,0.18);
    box-shadow:
      inset 0 0 12px rgba(255,201,64,.16),
      0 0 0 1px rgba(255,201,64,.10);
}

.cw-stat-val{
    text-align: right;
    font-weight: 900;
    opacity: 0.9;
    font-size: 20px;
    /* white-space: nowrap; */
    font-variant-numeric: tabular-nums;
}

.cw-radio{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cw-req{
    opacity: 0.7;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid rgb(255 0 0);
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
    color: #ff0000;
    justify-self: end;
}

.cw-req--ghost{
    visibility: hidden;
}

.cw-actions{
    overflow: auto;
    min-height: 0;
    max-height: 85vh;
}

.cw-panel{
    margin: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.22);
}

.cw-panel-title{
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}

.cw-res{
    opacity: 0.85;
    font-size: 12px;
    margin: 6px 0;
}

.cw-row{
    display: flex;
    gap: 10px;
    align-items: center;
}

.cw-select{
    flex: 1;
    min-width: 0;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.25);
    color: #fff;
    padding: 10px;
    font-weight: 800;
}

.cw-btn{
    cursor: pointer;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(2, 99, 138, 0.45);
    color: #fff;
    padding: 10px 12px;
    font-weight: 900;
}

.cw-btn:disabled{
    opacity: 0.35;
    cursor: not-allowed;
}

.cw-btn:hover:not(:disabled){
    background: rgba(2, 99, 138, 0.65);
}

.cw-hint{
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.32);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    color: rgba(232,240,255,0.92);

    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.cw-hint:empty{
    display: none;
}

.cw-hint-icon{
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    opacity: 0.95;
}

.cw-hint-text{
    flex: 1 1 auto;
    opacity: 0.98;
}

/* Variantes */
.cw-hint--info{
    border-color: rgba(47,226,255,0.30);
    box-shadow: 0 0 0 1px rgba(47,226,255,0.08), 0 0 18px rgba(47,226,255,0.06);
}

.cw-hint--warn{
    border-color: rgba(255,176,32,0.34);
    box-shadow: 0 0 0 1px rgba(255,176,32,0.08), 0 0 18px rgba(255,176,32,0.05);
}

.cw-hint--error{
    border-color: rgba(255,90,90,0.34);
    box-shadow: 0 0 0 1px rgba(255,90,90,0.08), 0 0 18px rgba(255,90,90,0.05);
}

.cw-hint--ok{
    border-color: rgba(0,255,180,0.28);
    box-shadow: 0 0 0 1px rgba(0,255,180,0.06), 0 0 18px rgba(0,255,180,0.05);
}

.cw-filter.active{
    background: rgba(2, 99, 138, 0.75);
    border-color: rgba(47,226,255,.55);
    box-shadow: 0 0 0 1px rgba(47,226,255,.25), 0 0 16px rgba(47,226,255,.10);
}

.cw-log{
    display: none;
    margin: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.35);
    max-height: clamp(120px, 18vh, 240px);
    min-height: clamp(120px, 18vh, 240px);
    overflow-y: auto;
    overflow-x: hidden;
    font-weight: 900;
}

.cw-log.visible{
    display: block;
}

.cw-log-entry{
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 4px 2px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 14px;
    line-height: 1.25;
}

.cw-log-entry:last-child{
    border-bottom: none;
}

.cw-log-time{
    min-width: 74px;
    opacity: 0.65;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.02em;
}

.cw-log-entry.ok{ color: rgba(255,255,255,0.92); }
.cw-log-entry.bad{ color: rgba(255,100,100,0.95); }
.cw-log-entry.info{ color:rgba(0,255,180,0.95); }

.cw-log-msg{
    flex: 1 1 auto;
    word-break: break-word;
}


.cw-log.ok{ box-shadow: 0 0 0 1px rgba(0,255,180,0.25); }
.cw-log.bad{ box-shadow: 0 0 0 1px rgba(255,80,80,0.25); }
.cw-log.info{ box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }

/* =========================
   Colonne de droite (#craftTab) - Ressources + actions
   ========================= */

#craftTab .cw-resources-panel{
    margin-top: 12px;
}

#craftTab .cw-res-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

#craftTab .cw-res-row:last-child{
    border-bottom: 0;
}

#craftTab .cw-res-label{
    font-weight: 950;
    font-size: 12px;
    letter-spacing: 0.2px;
    opacity: 0.9;
}

#craftTab .cw-res-chips{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

#craftTab .cw-chip{
    min-width: 22px;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.20);
    font-weight: 1000;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

#craftTab .cw-chip.empty{
    opacity: 0.35;
}

#craftTab .cw-chip.common{ color: var(--rarity-common); }
#craftTab .cw-chip.uncommon{ color: var(--rarity-uncommon); }
#craftTab .cw-chip.rare{ color: var(--rarity-rare); }
#craftTab .cw-chip.epic{ color: var(--rarity-epic); }
#craftTab .cw-chip.legendary{ color: var(--rarity-legendary); }
#craftTab .cw-chip.unique{ color: var(--rarity-unique); }

#craftTab .cw-action-buttons{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#craftTab .cw-action-btn{
    cursor: pointer;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.28);
    color: #fff;
    padding: 10px 12px;
    font-weight: 950;
    text-align: center;
}

#craftTab .cw-action-btn:hover:not(:disabled){
    background: rgba(2, 99, 138, 0.35);
}

#craftTab .cw-action-btn.active{
    background: rgba(2, 99, 138, 0.75);
    border-color: rgba(47,226,255,.55);
    box-shadow: 0 0 0 1px rgba(47,226,255,.25), 0 0 16px rgba(47,226,255,.10);
}

#craftTab .cw-action-btn:disabled{
    opacity: 0.35;
    cursor: not-allowed;
}

#craftTab .cw-action-content{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#craftTab .cw-action-controls{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#craftTab .cw-action-line{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-weight: 900;
    font-size: 12px;
    opacity: 0.95;
}

#craftTab .cw-action-key{
    opacity: 0.85;
}

#craftTab .cw-action-val{
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#craftTab .cw-action-footer{
    margin-top: 10px;
}

#craftTab .cw-action-footer .cw-btn{
    width: 100%;
    padding: 12px 14px;
}
/* =========================
   Craft Right Panel - Lisibilité
   ========================= */
#craftTab .cw-col.cw-actions{
    font-size: 15px;
}

#craftTab .cw-col.cw-actions .cw-panel-title{
    font-size: 16px;
}

#craftTab .cw-col.cw-actions .cw-res-label{
    font-size: 14px;
}

#craftTab .cw-col.cw-actions .cw-chip{
    font-size: 16px;
    padding: 7px 10px;
    min-width: 26px;
    text-align: center;
}

#craftTab .cw-col.cw-actions .cw-action-btn{
    font-size: 15px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#craftTab .cw-col.cw-actions .cw-action-line{
    font-size: 20px;
}

#craftTab .cw-col.cw-actions .cw-action-footer .cw-btn{
    font-size: 16px;
    padding: 14px 16px;
}

/* Résultats colorés (rareté) */
#craftTab .cw-rarity{
    font-weight: 1000;
    letter-spacing: 0.02em;
}

#craftTab .cw-rarity.common{ color: var(--rarity-common); }
#craftTab .cw-rarity.uncommon{ color: var(--rarity-uncommon); }
#craftTab .cw-rarity.rare{ color: var(--rarity-rare); }
#craftTab .cw-rarity.epic{ color: var(--rarity-epic); }
#craftTab .cw-rarity.legendary{ color: var(--rarity-legendary); }
#craftTab .cw-rarity.unique{ color: var(--rarity-unique); }

#craftTab .cw-arrow{
    opacity: 0.85;
    padding: 0 6px;
}

#craftTab .cw-muted{
    opacity: 0.85;
    font-weight: 900;
}


#craftTab .cw-possibilities{
    text-decoration: underline dotted rgba(255,255,255,0.55);
    text-underline-offset: 4px;
    cursor: help;
}


/* =========================
   Possibilités (ouvrir la fenêtre)
   ========================= */
#craftTab .cw-poss{
    color: rgba(47, 226, 255, 0.95);
    text-decoration: underline dotted rgba(47, 226, 255, 0.55);
    text-underline-offset: 3px;
    cursor: pointer;
}

#craftTab .cw-poss:hover{
    filter: drop-shadow(0 0 6px rgba(47, 226, 255, 0.35));
}

/* =========================
   Tags de stats (principal + secondaires)
   ========================= */

/* Container tags (commun craft + fenêtre) */
#craftTab .cw-stat-tags,
.cw-tooltip .cw-stat-tags{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    font-weight: 900;
}

/* Pills (commun craft + fenêtre) */
#craftTab .cw-tag-main,
#craftTab .cw-tag-sec,
.cw-tooltip .cw-tag-main,
.cw-tooltip .cw-tag-sec{
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.28);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

#craftTab .cw-tag-main,
.cw-tooltip .cw-tag-main{
    font-weight: 1000;
}

#craftTab .cw-tag-sec,
.cw-tooltip .cw-tag-sec{
    opacity: 0.85;
    font-weight: 900;
}

/* Couleurs du tag principal (commun craft + fenêtre) */
#craftTab .cw-tag-main.attack,
.cw-tooltip .cw-tag-main.attack{
    border-color: rgba(255, 90, 90, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 90, 90, 0.10);
}

#craftTab .cw-tag-main.defense,
.cw-tooltip .cw-tag-main.defense{
    border-color: rgba(90, 200, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(90, 200, 255, 0.10);
}

#craftTab .cw-tag-main.utility,
.cw-tooltip .cw-tag-main.utility{
    border-color: rgba(0, 255, 180, 0.55);
    box-shadow: 0 0 0 1px rgba(0, 255, 180, 0.10);
}

/* Spécifique CraftTab */
#craftTab .cw-stat-tags{
    flex-wrap: wrap;
    margin-left: 0px;
    font-size: 13px;
    opacity: 0.95;
}

#craftTab .cw-tag-main,
#craftTab .cw-tag-sec{
    padding: 4px 8px;
}

#craftTab .cw-stat-inline{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

#craftTab .cw-stat-inline-name{
    font-weight: 1000;
    letter-spacing: 0.02em;
}

#craftTab .cw-action-val .cw-stat-tags{
    margin-left: 8px;
    font-size: 0.65em;
}

/* =========================
   Indicateur limite de tags principaux (panneau Détails)
   ========================= */

#craftTab .cw-taglimit{
    margin-top: auto;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);

    /* reste visible en bas même quand ça scroll */
    position: sticky;
    bottom: 10px;
    z-index: 5;
    backdrop-filter: blur(7px);
}

#craftTab .cw-taglimit-title{
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    opacity: 0.70;
    margin-bottom: 8px;
}

#craftTab .cw-taglimit-list{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#craftTab .cw-taglimit-item{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.26);
}

#craftTab .cw-taglimit-count{
    font-weight: 1000;
    font-size: 12px;
    opacity: 0.92;
}

#craftTab .cw-taglimit-meter{
    width: 52px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    overflow: hidden;
}

#craftTab .cw-taglimit-fill{
    display: block;
    height: 100%;
    width: calc(var(--p, 0) * 1%);
    background: rgba(255,255,255,0.35);
}

#craftTab .cw-taglimit-item.full{
    box-shadow: 0 0 12px rgba(255,255,255,0.08);
}

#craftTab .cw-taglimit-item.over{
    border-color: rgba(255, 80, 80, 0.55);
}

#craftTab .cw-taglimit-item.over .cw-taglimit-fill{
    background: rgba(255, 80, 80, 0.50);
}


/* =========================
   Fenêtre plein écran "Possibilités"
   ========================= */

body.cw-tooltip-open{
    overflow: hidden;
}

.cw-tooltip{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 38px;
    background: rgba(0, 0, 0, 0.58);
    z-index: 99999;
    backdrop-filter: blur(10px);
}

.cw-tooltip.visible{
    display: flex;
}

.cw-tooltip-modal{
    width: min(1200px, 94vw);
    background: rgba(0, 0, 0, 0.90);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.70), 0 0 26px rgba(0,255,180,0.10);
    padding: 14px 14px 18px 14px;
    color: rgba(245, 250, 255, 0.92);
    max-height: 92vh;
    overflow: auto;
    transform-origin: top center;
}

.cw-tooltip-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cw-tooltip-title{
    font-size: 13px;
    font-weight: 1000;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(245, 250, 255, 0.92);
    opacity: 0.95;
}

.cw-tooltip-close{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.85);
    font-weight: 1000;
    cursor: pointer;
}

.cw-tooltip-close:hover{
    background: rgba(255,255,255,0.08);
}

/* Contenu HTML: pas de scroll, on fitte via colonnes + scale */
.cw-tooltip.is-html .cw-tooltip-list{
    white-space: normal;
}

.cw-tooltip-list{
    /* conteneur du grid (pas de scroll) */
    overflow: hidden;
}

/* Grid multi-colonnes des possibilités */
.cw-tooltip .cw-poss-tip{
    --cw-poss-cols: 1;
    --cw-poss-font: 14px;

    display: grid;
    grid-template-columns: repeat(var(--cw-poss-cols), minmax(340px, 1fr));
    gap: 12px;
}

/* Chaque ligne */
.cw-tooltip .cw-poss-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
}

.cw-tooltip .cw-poss-left{
    font-size: var(--cw-poss-font);
    font-weight: 1000;
    letter-spacing: 0.03em;
    color: rgba(245, 250, 255, 0.92);
    opacity: 1;
    flex: 1 1 auto;
}

.cw-tooltip .cw-poss-right{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Tags: jamais de wrap */
.cw-tooltip .cw-stat-tags{
    flex-wrap: nowrap !important;
    white-space: nowrap;
    margin-left: 0;
    font-size: 0.85em;
    gap: 8px;
    opacity: 1;
}

.cw-tooltip .cw-tag-main,
.cw-tooltip .cw-tag-sec{
    padding: 6px 10px;
}

.cw-tooltip .cw-poss-empty{
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    font-weight: 900;
    opacity: 0.85;
}