/* Finition des contrôles de la fiche quand le bundle scoped précédent est
   toujours présent dans le cache du navigateur de développement. */
.decks-native-modal .decks-native-equipment {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 3px;
    margin-top: 13px;
    padding: 0 2px;
}

.decks-native-modal .decks-native-gear-button {
    display: inline-flex;
    width: 100%;
    height: auto;
    min-width: 0;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(139, 92, 246, .36);
    border-radius: 7px;
    background: rgba(10, 1, 24, .56);
    color: inherit;
    cursor: pointer;
}

.decks-native-modal .decks-native-gear-button img {
    width: min(78%, 30px);
    height: min(78%, 30px);
    max-width: 30px;
    max-height: 30px;
}

.decks-native-modal .decks-native-gear-button:hover,
.decks-native-modal .decks-native-gear-button:focus-visible {
    border-color: var(--neon-accent);
    background: rgba(4, 70, 90, .78);
    box-shadow: 0 0 10px rgba(6, 182, 212, .32);
    outline: none;
}

.decks-native-modal .decks-native-stats-mode {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--neon-panel-border);
    border-radius: 7px;
    background: color-mix(in srgb, var(--neon-surface) 82%, transparent);
}

.decks-native-modal .decks-native-stats-mode button {
    min-width: 0;
    padding: 6px 8px;
    border: 0;
    border-right: 1px solid var(--neon-panel-border);
    background: transparent;
    color: var(--neon-muted);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.decks-native-modal .decks-native-stats-mode button:last-child { border-right: 0; }
.decks-native-modal .decks-native-stats-mode button.is-active { background: linear-gradient(135deg, color-mix(in srgb, var(--neon-accent) 48%, var(--neon-surface-alt)), color-mix(in srgb, var(--neon-accent-strong) 46%, var(--neon-surface))); color: #fff; }

/* Les badges sont calculés dans le composant ; ces dimensions globales
   préservent leur ancrage si le navigateur conserve une version scoped plus
   ancienne pendant un redéploiement local. */
.decks-native-page.blazor-page-content-width {
    width: min(100%, var(--blazor-page-content-max-width));
    box-sizing: border-box;
    margin-inline: auto;
}

.decks-native-page .decks-native-card-speedtune-tick {
    position: absolute;
    right: -3px;
    bottom: -3px;
    z-index: 2;
    display: grid;
    width: 1.3rem;
    height: 1.3rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .56rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 .1rem .3rem color-mix(in srgb, currentColor 48%, transparent);
}

.decks-native-modal .decks-native-speedtune-tick {
    position: absolute;
    top: 9px;
    right: 10px;
    z-index: 1;
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 .15rem .5rem color-mix(in srgb, currentColor 48%, transparent);
}

/* La feuille scoped peut être conservée par le serveur interactif pendant un
   redémarrage local. Ces règles globales gardent la grille de la fiche deck
   complète et compacte dans tous les appelants de la modale partagée. */
.decks-native-modal .decks-native-build-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    margin-top: 9px;
}

.decks-native-modal .decks-native-build-metrics > span {
    grid-column: span 2;
    display: grid;
    min-width: 0;
    gap: 3px;
    justify-items: center;
    padding: 7px;
    border: 1px solid rgba(139, 92, 246, .2);
    border-radius: 8px;
    background: rgba(10, 1, 24, .52);
    color: #fff;
    font-weight: 800;
    text-align: center;
}

.decks-native-modal .decks-native-build-metrics b {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb3a7;
    font-size: 9px;
    text-transform: uppercase;
}

.decks-native-modal .decks-native-build-metrics strong {
    overflow: hidden;
    color: #f0b84b;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decks-native-modal .decks-native-build-metrics > .decks-native-detail {
    grid-column: span 3 !important;
    container-type: inline-size;
}

.decks-native-modal .decks-native-build-metrics .decks-native-detail strong {
    width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: clamp(12px, 7cqi, 18px);
    letter-spacing: -.25px;
    line-height: 1.2;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
}

.decks-native-modal .decks-native-build-metrics > .decks-native-artifact-attribute {
    grid-column: 1 / span 3 !important;
}

.decks-native-modal .decks-native-build-metrics > .decks-native-artifact-type {
    grid-column: 4 / span 3 !important;
}

.decks-native-modal .decks-native-artifact-effects {
    display: grid;
    width: 100%;
    gap: 2px;
    text-align: left;
}

.decks-native-modal .decks-native-artifact-effects small {
    overflow: hidden;
    padding-bottom: 2px;
    color: #e9e5ff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decks-native-modal .decks-native-artifact-effects small:not(:last-child) {
    border-bottom: 1px solid rgba(139, 92, 246, .14);
}

.decks-native-modal .decks-native-artifact-effects small.is-max-proc {
    color: rgb(255, 195, 50);
    font-weight: 900;
}

/* Les repères de la tuile sont superposés au portrait, comme dans la vue
   historique : alerte en haut, lead en bas à gauche, tick en bas à droite. */
.decks-native-page .decks-native-monster {
    position: relative;
    display: grid;
    min-width: 0;
    place-items: center;
}

.decks-native-page .decks-native-artifact-warning {
    position: absolute;
    top: 0;
    z-index: 3;
    display: inline-flex;
    color: #ff4d5f;
    font-size: 11px;
    line-height: 1;
}

.decks-native-page .decks-native-artifact-warning.is-attribute { left: 0; }
.decks-native-page .decks-native-artifact-warning.is-type { right: 0; }

.decks-native-page .decks-native-monster > i {
    position: absolute;
    bottom: -2px;
    left: -2px;
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: #1a4a7a;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}