/* Global delivery counterpart for the reusable modal shell.
 * Keeps every AppNativeModal visible while a browser refreshes its scoped CSS.
 */
.app-native-modal-backdrop { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 8px 12px; background: var(--neon-dialog-backdrop); backdrop-filter: blur(3px); }
.app-native-modal:not(.app-native-modal--domain-content) { width: min(720px, calc(100vw - 24px)); max-height: min(960px, calc(100dvh - 16px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--neon-dialog-border); border-radius: 14px; background: var(--neon-dialog-bg); color: var(--neon-dialog-text); box-shadow: var(--neon-dialog-shadow); }
.app-native-modal--large { width: min(1080px, calc(100vw - 24px)); }
.app-native-modal--wide { width: min(1680px, calc(100vw - 24px)); }
.app-native-modal--compact-status { width: min(360px, calc(100vw - 32px)); }
.app-native-modal--compact-status .app-native-modal-body { min-height: 96px; display: grid; place-items: center; padding: 24px; }
.app-native-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 14px; border-bottom: 1px solid var(--neon-dialog-header-border); background: var(--neon-dialog-header-bg); }
.app-native-modal-heading { display: flex; min-width: 0; align-items: baseline; flex-wrap: wrap; gap: 7px; color: var(--neon-dialog-text); font-size: clamp(13px, 1.2vw, 18px); font-weight: 800; line-height: 1.15; }
.app-native-modal-heading h2 { margin: 0; color: inherit; font: inherit; }
.app-native-modal-actions { display: inline-flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
/* Shared deck and siege snapshot actions. */
.decks-native-modal-actions > :is(.decks-native-modal-speedtune, .decks-native-modal-deck-share, .decks-native-modal-preset) { white-space: nowrap; }
.decks-native-modal-speedtune { display: inline-flex; min-height: 34px; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid rgba(139, 92, 246, .68); border-radius: 9px; background: rgba(49, 46, 129, .34); color: #d8c8ff; font-size: 12px; font-weight: 800; text-decoration: none; box-shadow: 0 0 12px rgba(139, 92, 246, .13); }
.decks-native-modal-speedtune:hover, .decks-native-modal-speedtune:focus { border-color: #a78bfa; background: rgba(91, 33, 182, .4); color: #fff; }
.decks-native-modal-deck-share { display: inline-flex; min-height: 34px; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid rgba(87, 220, 153, .62); border-radius: 9px; background: rgba(20, 105, 66, .28); color: #a8f0c5; font-size: 12px; font-weight: 800; cursor: pointer; }
.decks-native-modal-deck-share:hover:not(:disabled), .decks-native-modal-deck-share:focus-visible { border-color: #9af0bf; background: rgba(34, 139, 84, .44); color: #fff; }
.decks-native-modal-deck-share:disabled { opacity: .55; cursor: not-allowed; }
.decks-native-modal-preset { display: inline-flex; min-height: 34px; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid var(--neon-panel-border); border-radius: 9px; background: var(--neon-surface-alt); color: var(--neon-text); font: inherit; font-size: 12px; font-weight: 800; box-shadow: var(--neon-panel-shadow); cursor: pointer; }
.decks-native-modal-preset:hover:not(:disabled), .decks-native-modal-preset:focus:not(:disabled) { border-color: var(--neon-accent); background: color-mix(in srgb, var(--neon-accent) 16%, var(--neon-surface-alt)); color: var(--neon-text); }
.decks-native-modal-preset:disabled { opacity: .55; cursor: not-allowed; }
.decks-native-modal-preset--opti { --decks-opti-accent: #ff3fb4; border-color: color-mix(in srgb, var(--decks-opti-accent) 65%, transparent); background: color-mix(in srgb, var(--decks-opti-accent) 14%, var(--neon-surface)); color: color-mix(in srgb, var(--decks-opti-accent) 38%, var(--neon-text)); box-shadow: 0 0 12px color-mix(in srgb, var(--decks-opti-accent) 13%, transparent); }
.decks-native-modal-preset--opti:hover:not(:disabled), .decks-native-modal-preset--opti:focus:not(:disabled) { border-color: var(--decks-opti-accent); background: color-mix(in srgb, var(--decks-opti-accent) 24%, var(--neon-surface)); color: var(--neon-text); }
.decks-native-modal-preset--opti:focus-visible { outline: 2px solid var(--decks-opti-accent); outline-offset: 2px; }
.app-native-modal-close { width: 34px; height: 34px; flex: 0 0 auto; display: inline-grid; place-items: center; border: 1px solid var(--neon-dialog-action-border); border-radius: 9px; background: var(--neon-dialog-action-bg); color: var(--neon-dialog-text); font-size: 18px; line-height: 1; }
.app-native-modal-body { min-height: 0; overflow: auto; padding: 7px 14px; }
.app-native-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--neon-dialog-header-border); }
/* Native selects retain enough line box for accents and descenders. This is
   intentionally on the shared modal shell: the same fix applies to every
   native dialog, including dynamically rendered Blazor content. */
.app-native-modal select { box-sizing: border-box; min-height: 2.5rem; height: 2.5rem; padding: .25rem 2.2rem .25rem .65rem; line-height: normal; vertical-align: middle; }
/* Equipment viewers use their own shells, but must retain the same delivery guarantee. */
.rune-viewer-backdrop, .artifact-viewer-backdrop { position: fixed; inset: 0; z-index: 11000; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); }
.rune-viewer-modal, .artifact-viewer-modal { width: min(1320px, calc(100vw - 48px)); max-height: min(92vh, 980px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(139, 92, 246, .72); border-radius: 14px; background: linear-gradient(145deg, #211040, #120521); color: #f4efff; box-shadow: 0 24px 70px rgba(0, 0, 0, .64); }
.rune-viewer-modal-body, .artifact-viewer-modal-body { overflow: auto; padding: 12px 14px 14px; }
.artifact-viewer-modal-body { scrollbar-gutter: stable both-edges; }
.rune-viewer-grid, .artifact-viewer-grid { display: grid; gap: 10px; align-items: start; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.artifact-viewer-grid--2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.artifact-viewer-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 14px; border-bottom: 1px solid var(--neon-dialog-header-border); background: var(--neon-dialog-header-bg); }
.artifact-viewer-modal-head h2 { margin: 0; color: var(--neon-dialog-text); font-size: 20px; font-weight: 800; line-height: 1.2; }
.artifact-viewer-modal-head p { margin: 4px 0 0; color: var(--neon-muted); font-size: 14px; line-height: 1.35; }
.artifact-viewer-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.artifact-viewer-action,
.artifact-viewer-close { min-height: 34px; padding: 0 11px; border: 1px solid var(--neon-dialog-action-border); border-radius: 7px; background: var(--neon-dialog-action-bg); color: var(--neon-dialog-text); font: inherit; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; }
.artifact-viewer-action:hover:not(:disabled),
.artifact-viewer-action:focus-visible,
.artifact-viewer-close:hover,
.artifact-viewer-close:focus-visible { border-color: var(--neon-accent); background: color-mix(in srgb, var(--neon-accent) 18%, var(--neon-dialog-action-bg)); color: #fff; outline: none; }
.artifact-viewer-action:disabled { opacity: .45; cursor: default; }
.artifact-viewer-close { width: 34px; padding: 0; display: inline-grid; place-items: center; border-color: var(--neon-accent); font-size: 20px; }
.artifact-viewer-close span { display: block; transform: translateY(-1px); }
.artifact-viewer-count { min-height: 34px; padding: 0 9px; border: 1px solid var(--neon-dialog-action-border); border-radius: 7px; background: var(--neon-dialog-action-bg); color: var(--neon-muted); display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; }
.artifact-viewer-count select { height: 26px; border: 1px solid color-mix(in srgb, var(--neon-accent) 55%, var(--neon-panel-border)); border-radius: 6px; background: var(--neon-surface); color: var(--neon-text); font: inherit; font-weight: 700; }
.artifact-viewer-count select:focus-visible { border-color: var(--neon-accent); outline: 2px solid color-mix(in srgb, var(--neon-accent) 32%, transparent); outline-offset: 1px; }

/* Ces composants peuvent être créés après l'hydratation Blazor. Leur style
 * doit donc aussi vivre dans la feuille globale : sans cela, une feuille CSS
 * isolée restée en cache les laisse dans le flux normal de la page. */
.deck-matchups-backdrop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; background: var(--neon-dialog-backdrop); backdrop-filter: blur(3px); }
.deck-matchups-modal { width: min(1180px, calc(100vw - 32px)); max-height: min(820px, calc(100vh - 40px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--neon-dialog-border); border-radius: 14px; background: var(--neon-dialog-bg); color: var(--neon-dialog-text); box-shadow: var(--neon-dialog-shadow); }
.deck-matchups-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--neon-dialog-header-border); background: var(--neon-dialog-header-bg); }
.deck-matchups-head p { margin: 0 0 2px; color: var(--neon-accent); font-size: 11px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; }
.deck-matchups-head h2 { margin: 0; color: var(--neon-dialog-text); font-size: clamp(18px, 1.8vw, 24px); font-weight: 900; }
.deck-matchups-close { width: 36px; height: 36px; border: 1px solid var(--neon-dialog-action-border); border-radius: 9px; background: var(--neon-dialog-action-bg); color: var(--neon-dialog-text); font-size: 17px; }
.deck-matchups-body { overflow: auto; padding: 15px 16px 18px; }
.deck-matchups-status { min-height: 150px; display: grid; place-items: center; color: var(--neon-muted); font-weight: 700; text-align: center; }
.deck-matchups-status.is-error { color: #ffb3b3; }
.deck-matchups-summary { margin: 0 0 12px; color: var(--neon-muted); font-size: 13px; font-weight: 700; }
.deck-matchups-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.deck-matchups-card { min-height: 88px; padding: 12px; border: 1px solid var(--neon-panel-border); border-radius: 11px; background: linear-gradient(145deg, color-mix(in srgb, var(--neon-surface-alt) 84%, transparent), var(--neon-surface)); }
.deck-matchups-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.deck-matchups-portraits { display: flex; min-width: 0; align-items: center; gap: 4px; }
.deck-matchups-portraits img { width: clamp(48px, 4vw, 62px); height: clamp(48px, 4vw, 62px); border: 2px solid var(--neon-surface); border-radius: 9px; background: var(--neon-surface-alt); object-fit: cover; }
.deck-matchups-score { display: grid; justify-items: end; gap: 4px; white-space: nowrap; }
.deck-matchups-score strong { color: #a8e75f; font-size: 18px; font-weight: 900; cursor: help; }
.deck-matchups-score span { color: #ffb26b; font-size: 14px; font-weight: 900; cursor: help; }

.app-monster-search-modal { display: grid; gap: .7rem; }
.app-monster-search-modal > label { color: var(--neon-muted); font-size: .8rem; font-weight: 800; }
.app-monster-search-modal > p { margin: 0; color: var(--neon-muted); }
.app-monster-search-modal__results { display: grid; max-height: 360px; overflow: auto; border: 1px solid var(--neon-panel-border); border-radius: 9px; }
.app-monster-search-modal__results button { display: flex; align-items: center; gap: .7rem; width: 100%; border: 0; border-bottom: 1px solid rgba(139, 92, 246, .18); padding: .55rem .7rem; background: transparent; color: var(--neon-text); text-align: left; cursor: pointer; }
.app-monster-search-modal__results button:last-child { border-bottom: 0; }
.app-monster-search-modal__results button:hover, .app-monster-search-modal__results button:focus-visible { background: rgba(6, 182, 212, .13); outline: none; }
.app-monster-search-modal__portrait { display: block; flex: 0 0 42px; width: 42px; height: 42px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--neon-accent) 42%, transparent); border-radius: 8px; background: var(--neon-surface); }
.app-monster-search-modal__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-monster-search-modal__results button > span:last-child { display: grid; min-width: 0; gap: .13rem; }
.app-monster-search-modal__results strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-monster-search-modal__results small { color: var(--neon-muted); }

/* The portrait component is scoped, while this picker is shared by pages that
 * can be refreshed independently during local development. Keep its frame
 * explicit here so a stale scoped bundle cannot let a native 100px image
 * escape the 40px suggestion thumbnail. */
.monster-picker-thumb { overflow: hidden; }
.monster-picker-thumb > .app-monster-portrait,
.app-monster-search-modal__portrait > .app-monster-portrait { display: block; width: 100%; height: 100%; object-fit: cover; }
.monster-picker-thumb > .app-monster-portrait--collaboration,
.app-monster-search-modal__portrait > .app-monster-portrait--collaboration { position: relative; overflow: hidden; border-radius: inherit; }
.monster-picker-thumb > .app-monster-portrait--collaboration img,
.app-monster-search-modal__portrait > .app-monster-portrait--collaboration img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) { .deck-matchups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .deck-matchups-backdrop { padding: 10px; } .deck-matchups-grid { grid-template-columns: 1fr; } .deck-matchups-card { min-height: 116px; } }
@media (max-width:720px) {
    .app-native-modal-backdrop { padding:10px; }
    .app-native-modal-head { position:relative; flex-shrink:0; align-items:flex-start; padding:10px 12px; }
    .app-native-modal-heading { flex-basis:100%; padding-right:42px; overflow-wrap:anywhere; }
    .app-native-modal-actions { flex:1 1 100%; flex-wrap:wrap; }
    .app-native-modal-actions:has(> .app-native-modal-close:only-child) { flex-basis:0; }
    .app-native-modal-close { position:absolute; top:10px; right:10px; }
    .app-native-modal-body { min-width:0; padding:10px 12px; overscroll-behavior:contain; }
    .app-native-modal-footer { flex-wrap:wrap; }
}

/* Preset confirmations must remain above the proposed-build dialog. */
.preset-confirmation .modal { z-index: 12010; }
body:has(.preset-confirmation .modal.show) > .modal-backdrop { z-index: 12000; }

:where(.app-native-modal--domain-content) { width:min(720px,calc(100vw - 24px)); max-height:calc(100dvh - 16px); display:flex; flex-direction:column; overflow:hidden; }
.app-native-modal--domain-content { border:1px solid var(--neon-dialog-border); border-radius:14px; background:var(--neon-dialog-bg); color:var(--neon-dialog-text); box-shadow:var(--neon-dialog-shadow); }
@media (max-width:480px) {
    .app-native-modal.decks-native-modal .app-native-modal-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; width:100%; }
    .app-native-modal.decks-native-modal .app-native-modal-actions > :not(.app-native-modal-close) { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:0; width:100%; height:auto; min-height:38px; padding:6px 8px; font-size:12px; line-height:1.2; white-space:normal; text-align:center; }
}