/* 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 { 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; }
.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; }
.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, 1fr)); }
.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 { align-items: flex-start; padding: 10px 12px; } .app-native-modal-actions { flex-wrap: nowrap; } .app-native-modal-body { padding: 10px 12px; } }