/* /Components/Pages/BuildPartage.razor.rz.scp.css */
/* « Un build t'a été partagé » : posé sur le décor Veillée de l'accueil (.accueil, .bouton-feu,
   .accueil__titre et .accueil__compte viennent d'app.css). Seuls le code, le bouton « Copier » et la
   phrase d'explication sont propres à cette page. */

.partage[b-likk9tswke] { gap: 20px; }

/* Le code en grand, par groupes de quatre, dans une plaque sombre : c'est ce qu'on vient chercher. */
.partage__code[b-likk9tswke] {
    margin: 4px 0 0;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    padding: 16px 28px;
    border-radius: var(--r-lg);
    background: rgba(4, 14, 42, .82);
    border: 1px solid rgba(111, 216, 255, .45);
    box-shadow: 0 0 34px rgba(1, 130, 249, .18), var(--hairline-top);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
    letter-spacing: .14em;
    color: var(--feu-haut);
    text-shadow: 0 0 18px rgba(1, 130, 249, .35);
}
.partage__code span[b-likk9tswke] { white-space: nowrap; }

.partage__actions[b-likk9tswke] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 18px;
}

/* Le second bouton : même forme que le bouton de feu, sans la flamme. */
.partage__copier[b-likk9tswke] {
    display: inline-flex;
    align-items: center;
    border-radius: var(--r-full);
    padding: 15px 30px;
    font-family: var(--font-veillee);
    font-weight: 800;
    font-size: 1.125rem;
    color: var(--cream);
    background: rgba(10, 26, 64, .78);
    border: 1px solid rgba(111, 216, 255, .45);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.partage__copier:hover[b-likk9tswke] { border-color: var(--feu-haut); color: var(--feu-haut); }
.partage__copier--fait[b-likk9tswke] { border-color: #4CD964; color: #8EE6A0; }

/* Des groupes insécables, qui passent à la ligne ENTIERS (jamais un mot seul). */
.partage__explication[b-likk9tswke] {
    margin: 0;
    max-width: 560px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 .3em;
    font-size: 1.0625rem;
    color: #B4C1E2;
}
.partage__explication span[b-likk9tswke] { white-space: nowrap; }

@media (max-width: 640px) {
    .partage[b-likk9tswke] { gap: 16px; }
    .partage__code[b-likk9tswke] { padding: 12px 18px; letter-spacing: .1em; }
    .partage__copier[b-likk9tswke] { font-size: 1.0625rem; padding: 14px 26px; }
    .partage__explication[b-likk9tswke] { font-size: .9375rem; }
}
/* /Components/Simulateur/ItemTooltip.razor.rz.scp.css */
/* Fiche d'objet: carte de resultat dans le picker (Compact) et infobulle pleine au survol. */

.tip[b-bhy0fb9hyu] {
    /* Alias du jeton global, pour que l'interdit ait la meme couleur sur tous les ecrans. */
    --tip-bad: var(--bad);
    --tip-bad-line: var(--bad-line);
    --tip-bad-fill: var(--bad-fill);

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--ink-850);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text);
    text-align: left;
}

.tip *[b-bhy0fb9hyu] {
    box-sizing: border-box;
}

.tip--full[b-bhy0fb9hyu] {
    /* Une infobulle plus large que ca sort de l'ecran des qu'elle s'ancre pres d'un bord. */
    width: 100%;
    max-width: min(22rem, 100%);
    box-shadow: var(--shadow-1);
}

.tip--compact[b-bhy0fb9hyu] {
    gap: 6px;
    padding: 10px;
    border-radius: var(--r-sm);
}

/* --- En-tete --- */

.tip__head[b-bhy0fb9hyu] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.tip__icon[b-bhy0fb9hyu] {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .03);
    object-fit: contain;
}

.tip--compact .tip__icon[b-bhy0fb9hyu] {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
}

.tip__icon--fallback[b-bhy0fb9hyu] {
    display: grid;
    place-items: center;
    background: var(--ink-800);
    color: var(--gold-400);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}

.tip__ident[b-bhy0fb9hyu] {
    flex: 1 1 auto;
    min-width: 0;
}

.tip__name[b-bhy0fb9hyu] {
    margin: 0;
    color: var(--cream);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.tip__meta[b-bhy0fb9hyu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 3px 0 0;
    color: var(--muted);
    font-size: .78rem;
}

.tip__level--over[b-bhy0fb9hyu] {
    padding: 0 7px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--tip-bad);
    font-weight: 700;
}

.tip__badges[b-bhy0fb9hyu] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0 0;
}

.tip__badge[b-bhy0fb9hyu] {
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--ink-800);
    color: var(--muted);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tip__badge--gold[b-bhy0fb9hyu] {
    border-color: var(--line-strong);
    background: rgba(1, 130, 249, .1);
    color: var(--gold-300);
}

.tip__badge--bad[b-bhy0fb9hyu] {
    border-color: var(--tip-bad-line);
    background: var(--tip-bad-fill);
    color: var(--tip-bad);
}

/* Objet propre au serveur. Vert — la couleur du gain sur ce site — parce que ce n'est ni une
   interdiction ni un etat du build : c'est une PROVENANCE, et elle ne doit pas se confondre avec
   le liseré doré de « porté ». */
.tip__badge--custom[b-bhy0fb9hyu] {
    border-color: rgba(52, 211, 153, .35);
    background: rgba(52, 211, 153, .1);
    color: var(--green-300);
}

/* --- Blocs --- */

.tip__block[b-bhy0fb9hyu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.tip--compact .tip__block[b-bhy0fb9hyu] {
    padding-top: 6px;
}

.tip__title[b-bhy0fb9hyu] {
    margin: 0;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tip__criteria[b-bhy0fb9hyu] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: .81rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tip__mark[b-bhy0fb9hyu] {
    flex: 0 0 auto;
    font-weight: 800;
}

.tip__criteria.is-met[b-bhy0fb9hyu] {
    color: var(--text);
}

.tip__criteria.is-met .tip__mark[b-bhy0fb9hyu] {
    color: var(--green-400);
}

.tip__criteria.is-unmet[b-bhy0fb9hyu],
.tip__criteria.is-unmet .tip__mark[b-bhy0fb9hyu] {
    color: var(--tip-bad);
}

/*
    Une condition que le simulateur ne sait pas juger. Elle se lit, elle ne se colore pas : ni
    vert (ce serait affirmer qu'elle passe), ni rouge (ce serait affirmer qu'elle bloque).
*/
.tip__criteria.is-unknown[b-bhy0fb9hyu],
.tip__criteria.is-unknown .tip__mark[b-bhy0fb9hyu] {
    color: var(--muted);
}

.tip__criteria.is-plain .tip__mark[b-bhy0fb9hyu] {
    color: var(--muted);
}

/* Le mot de liaison porte la structure de la condition : il ne doit pas se lire comme du texte. */
.tip__criteria-join[b-bhy0fb9hyu] {
    margin-right: 4px;
    color: var(--muted);
    font-style: italic;
}

.tip__criteria-note[b-bhy0fb9hyu] {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .74rem;
    line-height: 1.35;
}

/*
    L'objet interdit, vu de loin. C'est le signal que le joueur balaye dans une grille de fiches,
    donc il porte sur toute la carte et non sur une ligne.
*/
.tip--locked[b-bhy0fb9hyu] {
    border-color: var(--bad-line);
    box-shadow: var(--glow-bad);
}

.tip--locked .tip__name[b-bhy0fb9hyu] {
    color: var(--bad);
}

.tip__effects[b-bhy0fb9hyu],
.tip__deltas[b-bhy0fb9hyu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    font-size: .83rem;
    line-height: 1.4;
    list-style: none;
}

.tip__effects li[b-bhy0fb9hyu] {
    color: var(--cream);
}

/* Une plage se lit en retrait; un malus prime toujours sur elle, d'ou l'ordre des regles. */
.tip__effects li.is-range[b-bhy0fb9hyu] {
    color: var(--text);
}

.tip__effects li.is-malus[b-bhy0fb9hyu] {
    color: var(--tip-bad);
}

/*
    La teinte d'element sur les lignes de bonus. Elle REGROUPE — Force, Dommages Terre et
    Resistance Terre se lisent d'un bloc sur une piece Terre — et elle ne remplace jamais un
    libelle : chaque ligne porte deja son element ecrit. Les malus gardent le rouge, la regle du
    dessus l'emporte par ordre de declaration.
*/
.tip__effects li.is-el-0[b-bhy0fb9hyu] { color: #d7d2c4; }
.tip__effects li.is-el-1[b-bhy0fb9hyu] { color: #d99a4e; }
.tip__effects li.is-el-2[b-bhy0fb9hyu] { color: #e2603c; }
.tip__effects li.is-el-3[b-bhy0fb9hyu] { color: #5aa9e6; }
.tip__effects li.is-el-4[b-bhy0fb9hyu] { color: #5fc9a4; }

/* Carte de liste: on serre l'interligne plutot que de tronquer, les lignes de stats sont
   exactement ce sur quoi le joueur choisit. */
.tip--compact .tip__effects[b-bhy0fb9hyu] {
    gap: 0;
    font-size: .79rem;
    line-height: 1.32;
}

.tip__deltas li.is-up[b-bhy0fb9hyu] {
    color: var(--green-300);
}

.tip__deltas li.is-down[b-bhy0fb9hyu] {
    color: var(--tip-bad);
}

/*
    Les degats de l'arme. Ils sont en tete et en gras parce que c'est la ligne pour laquelle on
    ouvre une arme : les bonus de caracteristiques viennent apres, et se lisent deja comme le
    reste des pieces.
*/
.tip__effects--attack li[b-bhy0fb9hyu] {
    color: var(--gold-300);
    font-weight: 600;
}

/*
    Ce que la piece change sur UN sort. Le retrait la separe des bonus de caracteristiques : ces
    lignes ne s'additionnent a rien, elles ne valent que pour le sort qu'elles nomment.
*/
.tip__effects--spell[b-bhy0fb9hyu] {
    margin-top: 3px;
    padding-left: .55rem;
    border-left: 2px solid rgba(1, 130, 249, .35);
}

.tip__effects--spell li[b-bhy0fb9hyu] {
    color: var(--text);
    font-size: .78rem;
}

/* Le lien au compte n'est pas un bonus : il se lit comme une etiquette, pas comme une ligne. */
.tip__bindings[b-bhy0fb9hyu] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0;
}

.tip__binding[b-bhy0fb9hyu] {
    padding: .05rem .4rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: .7rem;
}

.tip__empty[b-bhy0fb9hyu] {
    margin: 0;
    color: var(--muted);
    font-size: .81rem;
    font-style: italic;
}

.tip__note[b-bhy0fb9hyu] {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: .69rem;
    line-height: 1.3;
}

.tip__set[b-bhy0fb9hyu] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--ink-800);
    color: var(--gold-300);
    font: inherit;
    font-size: .81rem;
    text-align: left;
}

button.tip__set[b-bhy0fb9hyu] {
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

button.tip__set:hover[b-bhy0fb9hyu] {
    border-color: var(--gold-500);
    background: rgba(1, 130, 249, .08);
}

.tip__set-count[b-bhy0fb9hyu] {
    color: var(--muted);
    white-space: nowrap;
}

.tip__block--origin[b-bhy0fb9hyu] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px 12px;
}

.tip__origin[b-bhy0fb9hyu] {
    color: var(--muted);
    font-size: .74rem;
}

/* --- Description --- */

.tip__desc[b-bhy0fb9hyu] {
    margin: 0;
    color: var(--muted);
    font-size: .79rem;
    font-style: italic;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.tip--full > .tip__desc[b-bhy0fb9hyu] {
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.tip__desc-fold[b-bhy0fb9hyu] {
    padding-top: 6px;
    border-top: 1px solid var(--line);
}

.tip__desc-fold > summary[b-bhy0fb9hyu] {
    color: var(--muted);
    cursor: pointer;
    font-size: .72rem;
    letter-spacing: .05em;
    list-style: none;
    text-transform: uppercase;
}

.tip__desc-fold > summary[b-bhy0fb9hyu]::-webkit-details-marker {
    display: none;
}

.tip__desc-fold > summary[b-bhy0fb9hyu]::before {
    content: "▸ ";
}

.tip__desc-fold[open] > summary[b-bhy0fb9hyu]::before {
    content: "▾ ";
}

.tip__desc-fold > .tip__desc[b-bhy0fb9hyu] {
    margin-top: 5px;
}

/* --- Actions --- */

.tip__actions[b-bhy0fb9hyu] {
    display: flex;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.tip__btn[b-bhy0fb9hyu] {
    flex: 1 1 auto;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: .81rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, filter .18s ease;
}

.tip__btn--gold[b-bhy0fb9hyu] {
    background: var(--grad-gold);
    color: var(--ink-900);
}

.tip__btn--gold:hover[b-bhy0fb9hyu] {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.tip__btn--ghost[b-bhy0fb9hyu] {
    border-color: var(--line-strong);
    background: transparent;
    color: var(--cream);
}

.tip__btn--ghost:hover[b-bhy0fb9hyu] {
    border-color: var(--gold-500);
    background: rgba(1, 130, 249, .08);
}

/* Avertissement, pas blocage: le bouton reste cliquable pour preparer un stuff futur. */
.tip__btn--warn[b-bhy0fb9hyu] {
    border-color: var(--tip-bad-line);
    background: var(--tip-bad-fill);
    color: var(--tip-bad);
    filter: none;
}

.tip__btn--warn:hover[b-bhy0fb9hyu] {
    border-color: var(--tip-bad);
    background: rgba(232, 145, 138, .16);
    filter: none;
}

.tip__btn:focus-visible[b-bhy0fb9hyu],
button.tip__set:focus-visible[b-bhy0fb9hyu] {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}

/* --- Adaptation mobile --- */

@media (max-width: 560px) {
    .tip[b-bhy0fb9hyu] {
        padding: 10px;
    }

    .tip__icon[b-bhy0fb9hyu] {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .tip__actions[b-bhy0fb9hyu] {
        flex-direction: column;
    }

    .tip__set[b-bhy0fb9hyu] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tip__btn[b-bhy0fb9hyu],
    button.tip__set[b-bhy0fb9hyu] {
        transition: none;
    }

    .tip__btn--gold:hover[b-bhy0fb9hyu] {
        transform: none;
    }
}