/* ============================
#grid{ grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
=============
   Base / Reset léger
========================================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #0b0f14;
  color: #e8eef5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================
   Thème & variables
========================================= */
:root{
  --panel-width: 1700px;
  --icon: 44px;
  --pick-icon: 60px;
  --border: #2b3b4a;
  --bg1: #0b0f14;
  --bg2: #0f1520;
  --bg3: #101826;
  --txt: #e8eef5;
  --muted: #b9c3cf;
  --accent: #2a71ff;
  --accent-2: #1b55d6;
  --hint: rgba(232,238,245,.85);
  --shadow-1: 0 8px 24px rgba(0,0,0,.35);
  --inset-1: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* =========================================
   Accessibilité
========================================= */
.sr-only {
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* =========================================
   Header / Nav
========================================= */
header{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background: var(--bg2);
  position: sticky; top:0; z-index:20;
}
h1{ margin:0 0 8px 0; font-size:20px; }
nav button{
  margin-right:8px; padding:8px 12px;
  border:1px solid var(--border);
  background: var(--bg3);
  color: var(--txt);
  border-radius:12px;
  cursor:pointer;
  transition: transform .05s ease, filter .1s ease, background .15s ease, border-color .15s ease;
}
nav button:hover{ filter: brightness(1.05); }
nav button:active{ transform: translateY(1px); }
nav button.active{ background: #234567; border-color:#2f5577; color:#fff; }

/* =========================================
   Layout
========================================= */
main{ padding:16px; max-width:min(var(--panel-width),95vw); margin:0 auto; }
.row{ margin:12px 0; }
.hidden{ display:none !important; }

/* Toast / hint */
#toast{
  margin-top:8px; font-size:13px; min-height:34px;
  opacity:0; transition: opacity .2s ease;
}
#toast.show{ opacity:1; }
.hint{ opacity:.85; margin:8px 0 10px; font-size:16px; font-weight:500; text-align:center; color: var(--hint); }

/* =========================================
   Champs & focus
========================================= */
.field label{ display:block; font-size:12px; opacity:.85; margin:0 0 6px 2px; }
.field input, textarea{
  width:100%; padding:10px 12px;
  border-radius:10px; border:1px solid var(--border);
  background: var(--bg2); color: var(--txt); outline:none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.field input:focus, textarea:focus{
  border-color:#3e5a78;
  box-shadow:0 0 0 2px rgba(46,110,255,.15);
}
.field.narrow{ max-width:120px; margin-left:0; margin-right:auto; }
@media (max-width:640px){ .field.narrow{ max-width:100%; } }
#search{ max-width:220px; }

/* =========================================
   Panneau + zones scroll
========================================= */
.panel{
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--bg2);
  padding:10px;
}
.grid-wrap{
  border-radius:14px;background:#0f1824;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.35);
  padding:8px;overflow:hidden; /* clippe les coins */
}
.grid-scroll{
  max-height: 68vh;           /* ← suit le contenu, limite haute */
  min-height: 180px;          /* ← garde une zone visible quand il reste 1–2 lignes */
  overflow: auto;
  padding: 8px 12px 8px 8px;
  scrollbar-gutter: stable both-edges; /* évite le micro-shift dû à l’apparition/disparition de la barre */
  transition: max-height 140ms ease;   /* petit lissage visuel (optionnel) */
}

/* Scrollbar */
body::-webkit-scrollbar{ width:8px }
body::-webkit-scrollbar-track{ background:transparent }
body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:6px }
body::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.20) }
body{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.12) transparent }

/* =========================================
   Grille monstres
========================================= */
.monster-grid{
  width:100%;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap:6px 8px; align-content:start; box-sizing:border-box;
  contain: layout paint;
}
.card{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:4px 3px;
  border:1px solid transparent; border-radius:9px;
  background: var(--bg3); cursor:pointer;
  transition: border-color .12s ease, transform .06s ease;
}
.card:hover{ border-color:#33506e; }
.card:active{ transform: translateY(1px); }
.card img{
  width: var(--icon); height: var(--icon);
  border-radius:7px; object-fit:cover; background: var(--bg1);
}
.name{
  width: var(--icon); max-width: var(--icon);
  font-size:10.5px; line-height:1.25; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* =========================================
   Sélection
========================================= */
.picks-title{ margin-bottom:6px; opacity:.9; }
#picks, .picks{
  display:flex; flex-wrap:wrap; gap:10px;
  min-height:58px; margin-top:6px; width:100%;
}
.pick{
  position:relative; display:flex; flex-direction:column; align-items:center;
  width:86px; padding:8px 6px 6px;
  border:1px solid var(--border); border-radius:10px; background: var(--bg3);
}
.pick img{
  width: var(--pick-icon); height: var(--pick-icon);
  border-radius:7px; object-fit:cover; background: var(--bg1);
}
.pick .pname{
  font-size:10px; line-height:11px; margin-top:4px; text-align:center;
  max-width:76px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pick .close{
  position:absolute; top:4px; right:4px; width:18px; height:18px;
  border:none; border-radius:50%;
  background: var(--bg2); color:#cfd8e3; opacity:.6; cursor:pointer;
  line-height:18px; font-size:12px; z-index:10;
  transition: opacity .1s ease, transform .06s ease, filter .1s ease;
}
.pick .close:hover{ opacity:.9; filter: brightness(1.05); }
.pick .close:active{ transform: translateY(1px); }

/* =========================================
   Zone notes + bouton
========================================= */
textarea{ min-height:100px; border-radius:12px; }
.btn-primary{
  appearance:none; border:none;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#fff; padding:10px 16px; border-radius:12px; cursor:pointer; font-weight:600;
  box-shadow: 0 4px 12px rgba(42,113,255,.25);
  transition: filter .08s ease, transform .06s ease, opacity .12s ease;
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-primary:active{ transform: translateY(1px); }
.btn-primary[disabled]{ opacity:.6; cursor:default; }
.btn-spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  display:none; vertical-align:middle; margin-left:8px;
}
.btn-primary.sending .btn-spinner{ display:inline-block; animation: spin .8s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-primary.sending .btn-spinner{ animation: none; }
}

/* Pour le picker : le spinner est juste à côté du bouton */
.btn-primary.sending + .btn-spinner{
  display:inline-block;
  animation: spin .8s linear infinite;
}

/* =========================================
   Listes Stats / Handled
========================================= */
.def-list{ display:flex; flex-direction:column; gap:12px; width:100%; margin:12px auto 0; max-width:940px; }
.def-row{ display:flex; align-items:center; gap:10px; width:100%; }
.def-item{
  flex:1; display:flex; align-items:center; justify-content:space-between; gap:20px;
  border:1px solid var(--border); background: var(--bg2);
  border-radius:12px; padding:14px 16px; box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.def-trio{ display:flex; gap:16px; align-items:center; }
.def-pick{ width:110px; padding:8px 6px 6px; }
.def-pick img{ width:60px; height:60px; border-radius:10px; }
.def-pick .pname{ font-size:12px; line-height:13px; margin-top:6px; max-width:100px; }
.def-count{
  min-width:48px; text-align:center; font-weight:800; font-size:16px; color:#fff;
  background:#234567; border:1px solid #2f5577; border-radius:10px; padding:10px 14px;
  box-shadow: var(--inset-1);
}
.btn-ghost{
  appearance:none; border:1px solid var(--border);
  background: var(--bg3); color: var(--txt);
  padding:6px 10px; border-radius:10px; cursor:pointer; font-size:12px; white-space:nowrap;
  transition: filter .08s ease, border-color .12s ease, transform .06s ease;
}
.btn-ghost:hover{ border-color:#3a4c60; filter: brightness(1.05); }
.btn-ghost:active{ transform: translateY(1px); }

/* =========================================
   Skeletons (optionnel)
========================================= */
.skeleton{ position:relative; overflow:hidden; }
.skeleton::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%); animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after{ animation: none; }
}

/* =========================================
   Responsive / adaptatifs
========================================= */
@media (max-height:900px){
  .grid-scroll{ max-height:58vh; }
  :root{ --icon:40px; }
  .monster-grid{ grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap:6px 7px; }
  .card img{ width: var(--icon); height: var(--icon); }
  .name{ font-size:10px; }
}
@media (max-width:1280px){
  main{ max-width:94vw; }
  .grid-scroll{ max-height:60vh; }
  .monster-grid{ grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
}

/* =========================================
   Duo / Duo horizontal SW|COLLAB
========================================= */
.duo {
  position: relative;
  width: var(--icon);
  height: var(--icon);
}
.duo img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 7px; object-fit: cover;
}
.duo img.top { transform: translate(20%, -20%) scale(0.8); box-shadow: 0 0 0 1px rgba(0,0,0,.5); border-radius: 7px; }
.duo img.base { filter: brightness(.95); }
.name .alt { opacity:.8; }

.duo-hsplit{
  position:relative;
  width: var(--icon);
  height: var(--icon);
}
.duo-hsplit img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  border-radius:7px;
}
.duo-hsplit .left{  clip-path: inset(0 50% 0 0); }
.duo-hsplit .right{ clip-path: inset(0 0 0 50%); }
.duo-hsplit::after{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:1px; background:rgba(255,255,255,.9);
}

/* Taille 60px pour les grosses cartes (déf/offs) */
.def-pick .duo-hsplit{ width:60px; height:60px; }
.def-pick .duo-hsplit img{ border-radius:10px; }

/* =========================================
   MODALE Offs (version alignée à ton HTML)
   - HTML attendu : .modal > .modal__dialog > .modal__header/.modal__body
========================================= */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:999}
.modal[aria-hidden="false"]{display:flex}
.modal__dialog{
  background:#111;border:1px solid #333;border-radius:14px;
  max-width:780px;width:92%;box-shadow:0 10px 40px rgba(0,0,0,.5);
  max-height:90vh;            /* ⬅️ ne dépasse jamais l’écran */
  display:flex;               /* ⬅️ permet au body de prendre le reste */
  flex-direction:column;
}
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #2a2a2a}
.modal__body{padding:16px; overflow:auto}   /* ⬅️ scroll interne */
.modal__close{background:transparent;border:0;color:#aaa;font-size:24px;cursor:pointer}

/* La modale du picker peut être plus large que la modale "Voir offs" */
.modal--picker .modal__dialog{ max-width: 980px; }

.btn{padding:8px 14px;border-radius:10px;border:1px solid #444;background:#1b1b1b;cursor:pointer}
.btn--primary{background:#2a5bd7;border-color:#2a5bd7}
.btn--ghost{background:transparent;border-color:#555}
.badge{margin-left:8px;padding:2px 8px;border-radius:999px;background:#1f6b3a;border:1px solid #2a8b4d;color:#cfe}

.offsList{
  display:grid;gap:8px;margin:10px 0 12px;
  max-height:56vh;overflow:auto;padding-right:6px;scrollbar-gutter:stable;
}
.offsItem{border:1px solid #2a2a2a;border-radius:12px;padding:10px}
.offsItem h5{margin:0 0 2px;font-size:15px}
.offsItem .meta{font-size:12px;color:#aaa}
.offsForm label{display:block;margin:8px 0}
.offsForm input,.offsForm textarea{width:100%;padding:8px;border-radius:8px;border:1px solid #333;background:#0f0f0f;color:#eee}

.picker-grid{
  border-radius:12px; background:#0f1824; padding:8px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.35);
  max-height:52vh; overflow:auto;
}

/* Picks du PICKER : une seule ligne + scroll horizontal */
.off-picks{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  align-items:center;
  min-height:58px;
  margin:8px 0;
  overflow:auto;            /* scroll horizontal si besoin */
  padding-bottom:4px;       /* un peu d’air pour la scrollbar */
}
.off-picks .pick{
  width:86px;
  padding:8px 6px 6px;
  flex-direction:column;     /* nom sous l’image */
  gap:0;
}
.off-picks .pick img{
  width: var(--pick-icon);   /* 60px */
  height: var(--pick-icon);
  border-radius:7px;
}
.off-picks .pick .pname{
  font-size:10px; line-height:11px;
  margin-top:4px; text-align:center;
  max-width:76px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Chaque offense listée = 3 icônes alignées sur une ligne */
.off-trio{
  display:flex;
  gap:12px;
  align-items:center;
}

/* Afficher le spinner quand le bouton a .sending et que le spinner est son frère immédiat */
.btn-primary.sending + .btn-spinner{
  display:inline-block;
  animation: spin .8s linear infinite;
}

/* Barre d’actions du picker */
.picker-actions{
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 12px 0;
  margin-top: 10px;
  border-top: 1px solid #223244; /* séparation visuelle */
  background: linear-gradient(180deg, rgba(15,21,32,0), rgba(15,21,32,.95) 35%, #101826 100%);
}

/* Champ recherche du picker un peu plus court */
.picker .field input{ max-width: 100px; }

.monster-grid .card { cursor: pointer; }

/* Picker — forcer la sélection en horizontal */
.modal--picker .picks{ 
  display:flex !important; 
  flex-direction:row !important; 
  gap:8px; 
  flex-wrap:nowrap; 
  overflow-x:auto;          /* au cas où la place manque */
}
.modal--picker .picks .pick{ 
  flex:0 0 auto;            /* chaque vignette garde sa largeur */
  width:auto;               
}
.modal--picker .picks .pick .pname{
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis;   /* nom tronqué proprement */
}

/* === Offenses modal layout === */
.off-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px;
  border-radius:16px;
  background:#111419;            /* adapte si besoin à ton thème */
  border:1px solid rgba(255,255,255,0.06);
}

.off-mons{
  display:flex;
  gap:16px;
}

.off-mon{
  width:72px;                    /* même largeur que l’icône pour caler le texte */
  display:flex;
  flex-direction:column;
  align-items:center;
}

.off-mon img{
  width:72px;
  height:72px;
  border-radius:12px;
  display:block;
}

.off-mon-name{
  margin-top:6px;
  font-size:12px;
  line-height:1.2;
  text-align:center;
  color:#cfd8dc;                 /* lisible en dark */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:72px;
}

/* pousse la zone actions (Supprimer) complètement à droite */
.off-actions{ margin-left:auto; }
.off-actions .btn-delete{ white-space:nowrap; }

/* Uniformiser la taille des vignettes collab (duo) dans les sélections */

/* 1) Sélections générales (cartes .pick : picker, "Ta sélection", etc.) */
.pick .duo-hsplit{
  width: var(--pick-icon);    /* 60px comme tes .pick img */
  height: var(--pick-icon);
}
.pick .duo-hsplit img{        /* même arrondi que tes images */
  border-radius: 7px;
}

/* 2) Offenses modal — nos blocs .off-mon (72px dans ta modale) */
.off-mon .duo-hsplit{
  width: 72px;
  height: 72px;
}
.off-mon .duo-hsplit img{
  border-radius: 12px;
}

/* Empêche les lettres basses d’être rognées partout */
.pick .pname,
.def-pick .pname,
.off-mon-name{
  line-height: 1.25;
  padding-bottom: 0.15em;
}

/* Picker Offense : layout colonne + zone liste scrollable */
.modal--picker .picker { display:flex; flex-direction:column; max-height:70vh; }
.modal--picker .picker-grid { flex:1; min-height:280px; max-height:60vh; overflow:auto; }
.modal--picker .picker-actions { position:sticky; bottom:0; padding:8px 0; background:inherit; }

/* ===== Overrides anti-"sauts" & visibilité ===== */

/* Défense : la fenêtre suit le contenu sans à-coups */
.grid-scroll{
  max-height: 68vh;        /* limite haute */
  min-height: 80px;       /* garde une zone visible quand il reste peu d’items */
  scrollbar-gutter: stable both-edges; /* évite le micro-shift lié à la scrollbar */
}

/* Offense (modale) : grille toujours visible et scroll propre */
.modal--picker .picker{
  max-height: 70vh;        /* la modale ne déborde pas l’écran */
}
.modal--picker .picker-grid{
  flex: 1;
  min-height: 100px;       /* empêche l’effondrement (liste "invisible") */
  max-height: 60vh;        /* scrolle dans la grille si besoin */
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

/* Zone des picks toujours visible (défense + modale) */
#picks, .picks{
  display:flex; flex-wrap:wrap; gap:10px;
  min-height:58px; margin-top:6px; width:100%;
}

/* === MODALE OFFENSE : même comportement que Défense === */
.modal--picker .modal__body{
  display:flex;               /* le body devient flex-col */
  flex-direction:column;
  overflow:visible;           /* on laisse scroller la grille interne, pas le body */
}

.modal--picker .picker{
  flex:1;                     /* le bloc interne prend la hauteur dispo */
  display:flex;
  flex-direction:column;
  min-height:40vh;            /* assure une vraie zone visible */
  max-height:70vh;            /* ne déborde pas l’écran */
}

/* Zone des picks bien visible */
#picks, .picks{
  display:flex; flex-wrap:wrap; gap:10px;
  min-height:58px; margin-top:6px; width:100%;
}

/* === OFFENSE : modale ancrée en haut, liste stable === */

/* 1) La modale du picker s’aligne en haut (plus de saut de recentrage) */
.modal.modal--picker{
  align-items: flex-start;   /* au lieu de center */
  justify-content: center;   /* reste centré horizontalement */
}
.modal--picker .modal__dialog{
  margin-top: 6vh;           /* “padding” visuel depuis le haut */
}

/* 2) Le body ne scrolle pas, c’est la grille qui scrolle */
.modal--picker .modal__body{
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* important : pas de scroll sur le body */
}

/* 3) Conteneur interne du picker : hauteur bornée mais pas “figée” */
.modal--picker .picker{
  display: flex;
  flex-direction: column;
  max-height: 70vh;          /* ne déborde pas l’écran */
  /* pas de height fixe ⇒ la liste peut “se rapprocher” de l’input */
}

/* 4) La liste scrolle en elle-même, sans modifier la hauteur du reste */
.modal--picker .picker-grid{
  flex: 1;
  min-height: 100px;         /* visible même avec peu de résultats */
  max-height: 60vh;          /* scrolle si long */
  overflow: auto;
  scrollbar-gutter: stable both-edges; /* pas de micro-shift quand la barre apparaît */
  min-width: 0;              /* par sécurité en flex */
}

/* 5) Zone de sélection toujours visible */
#picks, .picks{
  display:flex; flex-wrap:wrap; gap:10px;
  min-height:58px; margin-top:6px; width:100%;
}

/* ====== Loader à points (grille) ====== */
.grid-loading{
  display:flex; align-items:center; justify-content:center;
  min-height: 150px; text-align:center; color: var(--hint);
  opacity:.9; padding: 16px;
}
.grid-loading .dots{ display:inline-block; width: 1.6em; text-align:left; }

/* Picker Offense : la barre sous la grille, plus de superposition */
.modal--picker .picker-actions{
  position: static;          /* ⬅️ plus de sticky */
  bottom: auto;
  background: transparent;   /* pas de voile par-dessus la grille */
  border-top: 1px solid #223244;
  padding: 12px 0 0;
}

/* La grille occupe l'espace, la barre reste en bas de la colonne */
.modal--picker .picker{ 
  display:flex; 
  flex-direction:column; 
  max-height:70vh; 
}
.modal--picker .picker-grid{
  flex: 1 1 auto;            /* ⬅️ prend tout l’espace disponible */
  min-height: 80px;
  max-height: 60vh;
  overflow: auto;
}

/* === OFFENSE : rangée de sélection sans scroll, cartes visibles === */
.modal--picker .picks{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px;

  /* la hauteur mini couvre une carte entière + un peu d'air */
  min-height: calc(var(--icon) + 14px);
  max-height: none;

  overflow: visible;           /* ⬅️ pas de scrollbar */
  padding: 6px 6px 2px 6px;    /* petit cadre propre */
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg2);
}

/* cartes dans la zone de sélection : mêmes dimensions, pas de marge parasite */
.modal--picker .picks .card{ margin:0; }

/* ——— Picker Offense : sélection comme en Défense (pas de cadre, pas de scroll) ——— */
.modal--picker .picks{
  display:flex;
  flex-wrap:wrap;                 /* plusieurs lignes si besoin */
  gap:10px;                       /* même espacement que Défense */
  min-height:58px;                /* comme ta page Défense */
  padding:0;
  border:none;
  background:transparent;         /* ← plus de “boîte” visible */
  overflow:visible;               /* ← pas de scrollbar dans la sélection */
}

/* ——— Grille du picker : hauteur mini ≈ 1 ligne ; scrolle à l’intérieur ——— */
:root{ --row-h: 76px; }           /* une ligne ≈ 75–76 px */

.modal--picker .picker-grid{
  flex: 1 1 auto;
  min-height: var(--row-h);  /* force l’override des anciennes règles */
  max-height: 60vh;
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

/* Sélection : un petit espace dessous pour ne pas coller la recherche */
.modal--picker .picks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  min-height:58px;
  margin: 6px 0 8px;   /* ← espace sous la sélection */
  width:100%;
}

/* --- Offenses picker : fixes de layout --- */

/* Hauteur assurée pour la ligne de sélection 
   (icône 60px + nom + marges = ~86px) */
.modal--picker .picks {
  min-height: calc(var(--pick-icon, 60px) + 26px) !important;
  align-items: center;
  gap: 10px;
  margin: 8px 0 6px;
  overflow-x: auto; /* une ligne, scroll horizontal si besoin */
  padding-bottom: 4px;
}

/* Évite que le champ "Recherche" soit contraint par d'anciens max-width */
.modal--picker .field { width: 100%; }
.modal--picker .field input {
  width: 100%;
  max-width: none
  display: block;
}

/* Grille un peu rapprochée et bouton sans grand "vide" */
.modal--picker .picker-grid { 
  padding: 6px 6px 8px; 
  margin-bottom: 6px;      /* rapproche du bouton */
}
.modal--picker .picker-actions{
  margin-top: 6px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* === Offense picker: prevent overlap between selected cards and the search row === */
.modal--picker .picks{
  min-height: calc(var(--pick-icon, 60px) + 26px) !important; /* ~86px */
  align-items: center;
  gap: 10px;
  margin: 8px 0 6px;           /* space under the picks row */
  overflow: visible;           /* no vertical scroll here */
}

/* Make sure the search field spans the full line in the modal */
.modal--picker .field{ width:100%; }
.modal--picker .field input{
  width:100%;
  max-width: 300px !important;
}

/* === Offense picker: freeze the search row, scroll only the grid === */

/* Anchor the picker near the top to avoid vertical re-centering jumps */
.modal.modal--picker{ align-items: flex-start; justify-content: center; }
.modal--picker .modal__dialog{ margin-top: 6vh; }

/* Body = flex column; no scroll here */
.modal--picker .modal__body{
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* grid will scroll, not the body */
}

/* Picker column: flexible height inside the dialog */
.modal--picker .picker{
  display: flex;
  flex-direction: column;
  max-height: 70vh;                 /* don’t overflow the viewport */
}

/* Picker grid should not fill the whole column when results are short */
.modal--picker .picker-grid{
  flex: 0 1 auto !important;  /* stop stretching */
  min-height: 86px;           /* ~one row */
  max-height: 60vh;           /* cap height, then scroll */
  overflow: auto;
}

/* Optional: keep the action bar non-sticky so it doesn’t overlay the grid */
.modal--picker .picker-actions{
  position: static;
  background: transparent;
  padding-top: 12px;
  border-top: 1px solid #223244;
}

/* Faster large grids */
.card{ contain: content; }
.monster-grid{ content-visibility: auto; contain-intrinsic-size: 1200px 800px; }