/* ═══════════════════════════════════════════════════════════
   TFT Builder — Set 17 Space Gods
   ═══════════════════════════════════════════════════════════ */

.builder-section {
  max-width: 1620px;
  padding-bottom: 2rem;
}

/* ── Barre "objet sélectionné" ──────────────────────────── */
.item-select-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(124,58,237,.15);
  border: 1px solid rgba(124,58,237,.45);
  border-radius: var(--radius);
  padding: .45rem 1rem;
  margin-bottom: .65rem;
  font-size: .8rem;
  color: #c084fc;
  animation: fadeInDown .18s ease;
}
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:none; }
}
.item-select-bar button {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(124,58,237,.5);
  color: #c084fc;
  border-radius: 5px;
  padding: .2rem .65rem;
  font-size: .73rem;
  cursor: pointer;
  transition: background .12s;
  flex-shrink: 0;
}
.item-select-bar button:hover { background: rgba(124,58,237,.28); }

/* ─────────────────────────────────────────────────────────
   TOP SECTION (Traits | Board | Augments)
───────────────────────────────────────────────────────── */
.builder-top {
  display: grid;
  grid-template-columns: 210px 1fr 230px;
  gap: .75rem;
  align-items: start;
  margin-bottom: .75rem;
}

.builder-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem;
}
.panel-title {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: .65rem;
}

/* ── Trait tracker ─────────────────────────────────────── */
.builder-traits-panel { padding: .85rem .7rem; }

.trait-list {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  max-height: 440px;
  overflow-y: auto;
}
.trait-list::-webkit-scrollbar { width: 3px; }
.trait-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.trait-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .24rem .38rem;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: opacity .15s;
}
.trait-row.t-active  { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); }
.trait-row.t-inactive { opacity: .22; }

.trait-type-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.type-origin .trait-type-dot { background: #818cf8; }
.type-class  .trait-type-dot { background: #34d399; }

.trait-name { flex:1; font-size:.68rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.trait-badge {
  font-size:.58rem; font-weight:800; padding:1px 4px;
  border-radius:3px; min-width:18px; text-align:center; flex-shrink:0;
}
.tier-0 .trait-badge { background:#1e2233; color:var(--text-muted); }
.tier-1 .trait-badge { background:#cd7f32; color:#000; }
.tier-2 .trait-badge { background:#a8a9ad; color:#000; }
.tier-3 .trait-badge { background:#ffd700; color:#000; }
.tier-4 .trait-badge { background:linear-gradient(135deg,#b45ff7,#ff6ad5); color:#fff; }

.trait-pips { display:flex; gap:2px; align-items:center; }
.pip { width:6px; height:6px; border-radius:50%; background:#1e2233; border:1px solid #2e3548; }
.pip.pip-on { border-color:transparent; }
.tier-1 .pip.pip-on { background:#cd7f32; }
.tier-2 .pip.pip-on { background:#a8a9ad; }
.tier-3 .pip.pip-on { background:#ffd700; }
.tier-4 .pip.pip-on { background:#b45ff7; }

/* ── Plateau ────────────────────────────────────────────── */
.builder-center { display:flex; flex-direction:column; gap:.55rem; }

.board-topbar {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:.45rem .85rem;
}
.unit-count-label { font-size:.78rem; font-weight:600; color:var(--text-muted); white-space:nowrap; overflow:hidden; }
.unit-count-label strong { color:var(--text); }
.board-actions { display:flex; gap:.4rem; }
.btn-sm { font-size:.72rem; padding:.28rem .7rem; }

.board {
  background:#07090e;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.1rem .75rem .9rem;
  display:flex; flex-direction:column;
  gap:3px;
  user-select:none;
}
.board.mode-item-select { cursor:crosshair; }

.board-hint { color:var(--text-muted); font-size:.68rem; text-align:center; margin:0; }

.board-row { display:flex; justify-content:center; gap:3px; }
.board-row-offset { margin-left:43px; }

/* Wrapper hex */
.hex-wrapper { display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }

/* Hex cell */
.hex-cell {
  width: 78px; height: 88px;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background: #151922;
  cursor: pointer;
  position: relative;
  transition: transform .12s;
  flex-shrink: 0;
  overflow: hidden;
}
.hex-cell:hover    { transform:scale(1.07); }
.hex-cell.drag-over { transform:scale(1.1); background:#1e2b4a; }
.hex-cell.dragging  { opacity:.3; }
.hex-cell.highlight-item { outline:2px solid #c084fc; outline-offset:2px; }

.hex-cell.occupied.cost-1 { filter:drop-shadow(0 0 4px rgba(158,158,158,.55)); }
.hex-cell.occupied.cost-2 { filter:drop-shadow(0 0 4px rgba(76,175,80,.6));   }
.hex-cell.occupied.cost-3 { filter:drop-shadow(0 0 5px rgba(33,150,243,.65)); }
.hex-cell.occupied.cost-4 { filter:drop-shadow(0 0 5px rgba(156,39,176,.7));  }
.hex-cell.occupied.cost-5 { filter:drop-shadow(0 0 7px rgba(245,166,35,.8));  }
.hex-cell.occupied.cost-1:hover { filter:drop-shadow(0 0 8px rgba(158,158,158,.9)); }
.hex-cell.occupied.cost-2:hover { filter:drop-shadow(0 0 8px rgba(76,175,80,.9));   }
.hex-cell.occupied.cost-3:hover { filter:drop-shadow(0 0 9px rgba(33,150,243,.9));  }
.hex-cell.occupied.cost-4:hover { filter:drop-shadow(0 0 9px rgba(156,39,176,.9));  }
.hex-cell.occupied.cost-5:hover { filter:drop-shadow(0 0 11px rgba(245,166,35,1)); }

.hex-empty-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#1a1f2e; font-size:1.4rem; pointer-events:none; }
.hex-portrait-wrap { position:absolute; inset:0; }
.hex-portrait { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.hex-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; color:#fff; background:#1e2233; }
.hex-gradient { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.1) 55%,transparent 100%); pointer-events:none; }
.hex-footer { position:absolute; bottom:5px; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:1px; pointer-events:none; }
.hex-name { font-size:.44rem; font-weight:700; color:#fff; text-shadow:0 1px 3px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70px; text-align:center; }
.hex-stars { display:flex; gap:1px; pointer-events:all; }
.hex-star { font-size:.62rem; cursor:pointer; line-height:1; transition:transform .1s; }
.hex-star:hover { transform:scale(1.4); }
.hex-star.s-on  { color:#ffd700; }
.hex-star.s-off { color:rgba(255,255,255,.2); }
.hex-cost-badge { position:absolute; top:15px; left:50%; transform:translateX(-50%); font-size:.46rem; font-weight:900; padding:1px 4px; border-radius:3px; line-height:1.5; }
.cost-1 .hex-cost-badge { background:#9e9e9e; color:#000; }
.cost-2 .hex-cost-badge { background:#4caf50; color:#000; }
.cost-3 .hex-cost-badge { background:#2196f3; color:#fff; }
.cost-4 .hex-cost-badge { background:#9c27b0; color:#fff; }
.cost-5 .hex-cost-badge { background:#f5a623; color:#000; }

/* Slots items sous le hex */
.hex-item-row { display:flex; gap:2px; justify-content:center; }
.item-slot { width:21px; height:21px; border-radius:3px; border:1px solid #2a3045; display:flex; align-items:center; justify-content:center; font-size:.43rem; font-weight:800; cursor:pointer; transition:transform .1s; overflow:hidden; color:#fff; line-height:1; text-align:center; }
.item-slot.item-empty { background:#0e1018; color:#1e2435; }
.item-slot.item-empty:hover { border-color:#7c3aed; color:#7c3aed; }
.item-slot.item-occupied { border-color:transparent; }
.item-slot.item-occupied:hover { transform:scale(1.2); filter:brightness(1.25); }

/* ─────────────────────────────────────────────────────────
   BOTTOM SECTION (Pool + Objets)
───────────────────────────────────────────────────────── */
.builder-bottom {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}

/* Barre de contrôle */
.bottom-controls {
  display:flex; align-items:center;
  gap:.75rem;
  padding:.6rem .9rem;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}

/* Onglets principaux */
.bottom-tabs { display:flex; gap:.3rem; flex-shrink:0; }
.btab {
  padding:.3rem .85rem; border-radius:6px;
  border:1px solid transparent;
  background:transparent; color:var(--text-muted);
  font-size:.78rem; font-weight:700; cursor:pointer;
  transition:all .12s;
}
.btab:hover:not(:disabled) { color:var(--text); border-color:var(--border); }
.btab.btab-active { background:var(--accent); color:#fff; }
.btab:disabled { opacity:.35; cursor:not-allowed; }

/* Contrôles recherche + coût */
.pool-controls { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-left:auto; }

.unit-search {
  background:#0d0f17; border:1px solid var(--border); border-radius:5px;
  color:var(--text); padding:.32rem .6rem; font-size:.76rem; outline:none;
  transition:border-color .15s; width:180px;
}
.unit-search:focus { border-color:var(--accent); }
.unit-search::placeholder { color:var(--text-muted); }

.cost-filters { display:flex; gap:.22rem; }
.cost-filter {
  padding:.22rem .48rem; border-radius:4px; border:1px solid var(--border);
  background:transparent; color:var(--text-muted); font-size:.68rem; font-weight:700;
  cursor:pointer; transition:all .12s;
}
.cost-filter:hover { border-color:var(--accent); color:var(--text); }
.cost-filter.cf-active { border-color:transparent; color:#fff; }
.cost-filter[data-cost="0"].cf-active { background:var(--accent); }
.cost-filter[data-cost="1"].cf-active { background:#9e9e9e; color:#000; }
.cost-filter[data-cost="2"].cf-active { background:#4caf50; color:#000; }
.cost-filter[data-cost="3"].cf-active { background:#2196f3; }
.cost-filter[data-cost="4"].cf-active { background:#9c27b0; }
.cost-filter[data-cost="5"].cf-active { background:#f5a623; color:#000; }

/* Trait pills */
.trait-pills-row {
  padding:.4rem .9rem .35rem;
  border-bottom:1px solid var(--border);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.trait-pills-row::-webkit-scrollbar { height:3px; }
.trait-pills-row::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.trait-pills { display:flex; gap:.25rem; flex-wrap:nowrap; width:max-content; }

.trait-pill {
  padding:.18rem .52rem; border-radius:20px;
  border:1px solid var(--border); background:transparent;
  color:var(--text-muted); font-size:.63rem; font-weight:600;
  cursor:pointer; transition:all .12s; white-space:nowrap; flex-shrink:0;
}
.trait-pill:hover { border-color:var(--accent); color:var(--text); }
.trait-pill.tp-active { background:var(--accent); border-color:transparent; color:#fff; }

/* Corps bas */
.bottom-body {
  display:grid;
  grid-template-columns: 1fr 360px;
  min-height:280px;
}

/* ── Pool unités (rangées par coût) ─────────────────────── */
.pool-section {
  padding:.65rem .8rem;
  border-right:1px solid var(--border);
  overflow-y:auto;
  max-height:380px;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.pool-section::-webkit-scrollbar { width:4px; }
.pool-section::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* Rangée d'un coût */
.cost-row {
  display:flex;
  align-items:center;
  gap:.5rem;
}

.cost-row-label {
  font-size:.62rem; font-weight:900;
  width:28px; flex-shrink:0; text-align:center;
  border-radius:4px; padding:3px 2px; line-height:1.2;
}
.c1 { background:#9e9e9e; color:#000; }
.c2 { background:#4caf50; color:#000; }
.c3 { background:#2196f3; color:#fff; }
.c4 { background:#9c27b0; color:#fff; }
.c5 { background:#f5a623; color:#000; }

.cost-row-units {
  display:flex; gap:.3rem;
  overflow-x:auto;
  flex:1;
  padding-bottom:3px;
}
.cost-row-units::-webkit-scrollbar { height:3px; }
.cost-row-units::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* Tuile champion dans pool */
.pool-champ {
  display:flex; flex-direction:column; align-items:center;
  gap:3px; cursor:grab; flex-shrink:0;
  transition:transform .1s, opacity .1s;
  user-select:none;
  width:60px;
}
.pool-champ:hover  { transform:translateY(-3px); }
.pool-champ:active { cursor:grabbing; opacity:.75; }

.pool-champ-img-wrap {
  width:60px; height:60px;
  border-radius:6px;
  overflow:hidden;
  position:relative;
  border:2px solid transparent;
  flex-shrink:0;
  background:#1a1d2a;
}
.cost-1-champ .pool-champ-img-wrap { border-color:#9e9e9e; }
.cost-2-champ .pool-champ-img-wrap { border-color:#4caf50; }
.cost-3-champ .pool-champ-img-wrap { border-color:#2196f3; }
.cost-4-champ .pool-champ-img-wrap { border-color:#9c27b0; }
.cost-5-champ .pool-champ-img-wrap { border-color:#f5a623; }

.pool-champ:hover .pool-champ-img-wrap {
  box-shadow:0 0 10px rgba(255,255,255,.18);
  filter:brightness(1.1);
}

.pool-champ-img {
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
}
.pool-champ-fb {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:800; color:#fff;
}

.pool-champ-name {
  font-size:.52rem; font-weight:600; color:var(--text-muted);
  text-align:center; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:62px;
}

/* ── Panel Objets ───────────────────────────────────────── */
.items-panel {
  padding:.65rem .75rem;
  display:flex; flex-direction:column; gap:.5rem;
  overflow-y:auto; max-height:380px;
}
.items-panel::-webkit-scrollbar { width:4px; }
.items-panel::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.items-panel-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.4rem; }
.item-tabs { display:flex; gap:.2rem; }
.item-tab { padding:.15rem .45rem; border-radius:4px; border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:.6rem; font-weight:700; cursor:pointer; transition:all .12s; }
.item-tab:hover { border-color:var(--accent); color:var(--text); }
.item-tab.it-active { background:var(--accent); border-color:transparent; color:#fff; }

/* Grille objets */
.item-grid { display:flex; flex-direction:column; gap:.4rem; }

/* Groupe de catégorie (Normal) */
.item-cat-group {}
.item-cat-label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted); margin-bottom:.3rem; }
.item-cat-row { display:flex; flex-wrap:wrap; gap:.28rem; margin-bottom:.1rem; }

/* Grille plate (autres onglets) */
.item-flat-grid { display:flex; flex-wrap:wrap; gap:.28rem; }

/* Tuile objet */
.item-card {
  width:38px; height:38px;
  border-radius:5px;
  border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:.43rem; font-weight:800; color:#fff;
  cursor:pointer;
  transition:transform .1s, border-color .1s, box-shadow .1s;
  flex-shrink:0; text-align:center; line-height:1.15;
  padding:2px; overflow:hidden; user-select:none;
  position:relative;
}
.item-card:hover { transform:scale(1.15); border-color:rgba(255,255,255,.4); box-shadow:0 0 8px rgba(0,0,0,.5); z-index:1; }
.item-card.ic-selected { border-color:#c084fc; box-shadow:0 0 10px rgba(192,132,252,.6); transform:scale(1.08); }

/* Image de l'objet (charge depuis CommunityDragon) */
.item-card-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:4px;
  z-index:2;
}
/* Texte de repli (masqué quand l'image charge) */
.item-abbr {
  position:relative; z-index:1;
  pointer-events:none;
}

/* Tooltip objet */
.item-tooltip { position:fixed; z-index:9999; background:#1a1d2a; border:1px solid var(--border); border-radius:6px; padding:.38rem .6rem; font-size:.72rem; color:var(--text); pointer-events:none; box-shadow:0 4px 20px rgba(0,0,0,.5); white-space:nowrap; display:none; }

/* Tooltip champion (pool hover) */
.champ-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: #1a1d2a;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: .45rem .6rem;
  min-width: 140px;
  max-width: 200px;
  box-shadow: 0 6px 24px rgba(0,0,0,.55);
  display: none;
  animation: fadeInDown .1s ease;
}
.ct-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .3rem;
}
.ct-name { font-size: .78rem; font-weight: 700; color: var(--text); flex: 1; }
.ct-cost {
  font-size: .58rem; font-weight: 900;
  padding: 2px 5px; border-radius: 3px;
  flex-shrink: 0; line-height: 1.4;
}
.ct-traits { display: flex; flex-wrap: wrap; gap: 3px; }
.ct-trait {
  font-size: .6rem; font-weight: 600;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────── */
@media (max-width: 1300px) {
  .builder-top { grid-template-columns: 185px 1fr 210px; }
  .hex-cell { width:70px; height:79px; }
  .board-row-offset { margin-left:39px; }
}
@media (max-width: 1060px) {
  .builder-top { grid-template-columns: 1fr; }
  .builder-traits-panel  { order:2; }
  .builder-center        { order:1; }
  .hex-cell { width:62px; height:70px; }
  .board-row-offset { margin-left:34px; }
  .bottom-body { grid-template-columns: 1fr; }
  .items-panel { border-top:1px solid var(--border); border-left:none; max-height:none; }
  .pool-section { max-height:280px; }
}
@media (max-width: 600px) {
  .hex-cell { width:50px; height:56px; }
  .board-row-offset { margin-left:28px; }
  .hex-name, .hex-cost-badge { display:none; }
  .item-slot { width:16px; height:16px; font-size:.38rem; }
  .bottom-controls { flex-direction:column; align-items:stretch; }
  .pool-controls { margin-left:0; }
  .unit-search { width:100%; }
}