:root {
  --bg: #0a0e14;
  --bg-panel: #141b26;
  --bg-card: #1b2430;
  --bg-card-hover: #232f3e;
  --border: #2a3646;
  --text: #e6edf3;
  --text-dim: #8b97a7;
  --gold: #c8aa6e;
  --gold-bright: #f0e6d2;

  /* Cost tier colors */
  --cost-1: #9aa4af;
  --cost-2: #2ecc71;
  --cost-3: #3da9fc;
  --cost-4: #c061f7;
  --cost-5: #f5b942;

  /* Trait tier colors */
  --tier-bronze: #b07d4f;
  --tier-silver: #9fb4c8;
  --tier-gold: #f5cf5b;
  --tier-prismatic: #f08bd0;
}

* { box-sizing: border-box; }
/* Tắt ô sáng lóe khi chạm phần tử bấm được trên mobile (tap highlight). */
* { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #16202e 0%, var(--bg) 60%);
  color: var(--text);
  min-height: 100vh;
}

/* Top navigation bar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 21, 31, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.navbar-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Logo (left) */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  color: var(--gold-bright);
  white-space: nowrap;
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--gold), #8a6d3b);
  color: #1a1206;
  font-size: 1.15rem;
  box-shadow: 0 0 16px rgba(200, 170, 110, 0.35);
}
.brand-accent { color: var(--gold); }

.brand-tagline {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-muted, #9a9488);
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

/* Language switcher (top-right) */
.lang-switcher {
  position: relative;
  margin-left: auto;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.lang-btn:hover { background: var(--bg-card-hover); border-color: var(--gold); }
.lang-btn .lang-caret { font-size: 0.7rem; color: var(--text-dim); }

/* Flag icon (inline SVG) shown before the language name */
.lang-flag {
  display: inline-flex;
  flex: 0 0 auto;
  width: 22px;
  height: 15px;
}
.lang-flag .flag-svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.lang-flag .flag-code {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgba(15, 21, 31, 0.98);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  z-index: 60;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 7px;
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.lang-option:hover { color: var(--text); background: var(--bg-card-hover); }
.lang-option.active { color: var(--gold-bright); background: rgba(200, 170, 110, 0.12); }

.app-header {
  padding: 24px 28px 8px;
  text-align: center;
}
.app-header h1 {
  margin: 0;
  font-size: 1.9rem;
  letter-spacing: 0.5px;
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(200, 170, 110, 0.25);
}
.subtitle { margin: 6px 0 0; color: var(--text-dim); font-size: 0.95rem; }
.set-label {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.8rem;
}

/* Layout */
.layout {
  display: grid;
  /* Left 60% (board + picker), right 40% (suggestions, how-to). */
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 20px;
  align-items: start;
  max-width: 1440px;
  margin: 16px auto 48px;
  padding: 0 20px;
}

/* Picker */
.picker { min-width: 0; }
.picker-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
#search,
#pickerModalSearch {
  flex: 1 1 200px;
  padding: 9px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
}
#search:focus,
#pickerModalSearch:focus { outline: none; border-color: var(--gold); }

.cost-filters { display: flex; gap: 6px; }
.cost-filter {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.15s;
}
.cost-filter:hover { background: var(--bg-card-hover); color: var(--text); }
.cost-filter.active { border-color: var(--gold); color: var(--gold-bright); background: #20283400; }

/* Trait filter chips */
.trait-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  max-height: 132px;
  overflow-y: auto;
  padding: 2px 2px 4px;
}
.trait-filter {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 600; /* fixed weight in every state so the chip never changes width */
  cursor: pointer;
  white-space: nowrap;
  /* Only animate colors — never size — so active chips don't reflow the row. */
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.trait-filter:hover { background: var(--bg-card-hover); color: var(--text); }
.trait-filter.active {
  border-color: var(--gold);
  color: #1a1206;
  background: var(--gold);
}
/* Unique (1-champion) traits: dimmed, less prominent — but still selectable. */
.trait-filter.muted {
  opacity: 0.45;
  font-weight: 400;
  border-style: dashed;
}
.trait-filter.muted:hover { opacity: 0.8; }
.trait-filter.muted.active { opacity: 1; } /* full emphasis once chosen */

.unit-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cost-group.hidden { display: none; }
.cost-group-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  padding-bottom: 5px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--cost-color, var(--text-dim));
  border-bottom: 1px solid var(--border);
}
.cost-group-pips { letter-spacing: 1px; }

.unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}

.unit-card {
  position: relative;
  background: var(--bg-card);
  color: var(--text); /* <button> doesn't inherit color — set it so names aren't black */
  border: 1px solid var(--border);
  border-top: 3px solid var(--cost-color, var(--border));
  border-radius: 9px;
  padding: 6px 4px 7px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s, background 0.15s, box-shadow 0.15s;
  user-select: none;
}
.unit-card:hover { background: var(--bg-card-hover); transform: translateY(-2px); }
.unit-card.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(200, 170, 110, 0.35);
  background: #232c1c33;
}
.unit-card.selected::after {
  content: "✓";
  position: absolute;
  top: 4px; right: 6px;
  color: var(--gold-bright);
  font-weight: 700;
  font-size: 0.85rem;
}
.unit-card.hidden { display: none; }

.unit-portrait {
  width: 44px;
  height: 44px;
  border-radius: 7px;
  object-fit: cover;
  background: #0d141d;
  display: block;
  margin: 0 auto 5px;
  border: 1px solid var(--border);
}
.unit-portrait.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text-dim);
  font-size: 1.1rem;
}
.unit-name {
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unit-cost { font-size: 0.66rem; color: var(--cost-color, var(--text-dim)); }
.unit-traits { font-size: 0.6rem; color: var(--text-dim); margin-top: 2px; line-height: 1.2; }

/* Play-guide panels (single right column) */
.guide-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.guide-panel h2 { margin: 0 0 2px; font-size: 1.05rem; color: var(--gold); font-weight: 600; }
.play-guide-list {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.45;
}
.play-guide-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.02);
}
.play-guide-section h3 {
  margin: 0;
  color: var(--gold);
  font-size: 0.88rem;
  font-weight: 700;
}
.play-guide-steps {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.play-guide-step {
  color: var(--text);
}
.guide-units-inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 4px;
  vertical-align: middle;
}
.guide-unit-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 160px;
  padding: 2px 7px 2px 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  vertical-align: middle;
}
.guide-unit-chip > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guide-units-inline .comp-unit {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}
.guide-units-inline .comp-unit img,
.guide-units-inline .comp-unit-fallback {
  width: 30px;
  height: 30px;
}

/* Suggestion rows (Đầu/Cuối game) */
.suggest-line { margin-top: 10px; }
.suggest-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.suggest-line-label { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.see-more {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--gold);
  border-radius: 7px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
}
.see-more:hover { border-color: var(--gold); background: rgba(200, 170, 110, 0.12); }
.suggest-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.suggest-strip[hidden] { display: none; }
.strip-unit {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 50px;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text); /* button: keep name text light */
  cursor: pointer;
}
.strip-thumb { position: relative; }
.strip-unit .comp-unit { width: 46px; height: 46px; }
.strip-unit:hover .comp-unit { box-shadow: 0 0 0 2px var(--gold); }
.strip-name {
  width: 50px;
  font-size: 0.66rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strip-gain {
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%);
  padding: 0 6px;
  border-radius: 999px;
  background: #3ddc84;
  color: #0a0e14;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 15px;
  white-space: nowrap;
}

/* Extra info */
.info-block { margin-top: 10px; }
.info-label { font-size: 0.82rem; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.info-units { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.info-unit { display: flex; align-items: center; gap: 6px; }
.info-unit .comp-unit { width: 36px; height: 36px; }
.info-unit-name { font-size: 0.8rem; color: var(--text); white-space: nowrap; }
.carry-rank {
  font-weight: 800;
  color: var(--gold-bright);
  font-size: 0.85rem;
}
.similar-comps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px; /* room for the scrollbar */
}
.similar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.similar-row:hover { background: var(--bg-card-hover); }
.similar-row.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.similar-row .comp-info { flex: 1; min-width: 0; }
.comp-unit.match { box-shadow: 0 0 0 2px #3ddc84; }
.similar-metrics {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  text-align: center;
}
.similar-metrics .comp-score { min-width: 42px; padding: 2px 8px; font-size: 0.9rem; }
.similar-overlap {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.comp-diff { display: flex; flex-direction: column; gap: 12px; }
.diff-title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.diff-title .comp-score { font-size: 0.9rem; }
.diff-title .comp-tier { width: 22px; height: 22px; font-size: 0.8rem; }
.diff-group {
  border-radius: 9px;
  padding: 8px 10px;
  border: 1px solid var(--border);
}
.diff-group.remove { background: rgba(217, 83, 79, 0.10); border-color: rgba(217, 83, 79, 0.35); }
.diff-group.add { background: rgba(61, 220, 132, 0.10); border-color: rgba(61, 220, 132, 0.35); }
.diff-label { font-size: 0.82rem; font-weight: 700; margin-bottom: 7px; }
.diff-group.remove .diff-label { color: #ff9d9a; }
.diff-group.add .diff-label { color: #6ef0a6; }
.diff-units { display: flex; flex-wrap: wrap; gap: 10px; }
.diff-unit { width: 48px; text-align: center; }
.diff-unit-name {
  display: block;
  font-size: 0.62rem;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar */
.sidebar {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.board-panel, .traits-panel, .suggest-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
/* Board panels live at the top of the left column. */
.picker > .board-panel { position: relative; margin-bottom: 12px; cursor: pointer; transition: border-color 0.06s, box-shadow 0.06s; }
.picker > .board-panel.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.picker > .board-panel:not(.active) { opacity: 0.92; }
.picker > .board-panel:not(.active):hover { border-color: var(--gold); opacity: 1; }
.board-tools { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.board-tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.board-tools .top-comps-btn {
  align-self: flex-start;
  margin-right: 0;
  padding: 9px 18px;
  font-size: 0.95rem;
  border-color: var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-weight: 500;
}
.board-tools .top-comps-btn:hover {
  border-color: var(--gold);
  background: rgba(200, 170, 110, 0.12);
  color: var(--gold-bright);
}
.board-tools .teamcode { margin-top: 0; padding-top: 0; border-top: none; }
.board-tools .teamcode-msg { margin-top: 0; }
.board-head, .traits-panel h2, .suggest-panel h2 { margin: 0; }
.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.board-head h2, .traits-panel h2, .suggest-panel h2 {
  font-size: 1.05rem;
  color: var(--gold);
  font-weight: 600;
}
.panel-sub { margin: 4px 0 12px; color: var(--text-dim); font-size: 0.82rem; }
.panel-sub.warn { color: var(--cost-5); }
.board-count { color: var(--text-dim); font-size: 0.9rem; font-weight: 500; }
.board-count.full { color: var(--cost-5); }
.team-score {
  margin-left: auto;
  margin-right: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(61, 220, 132, 0.14);
  border: 1px solid rgba(61, 220, 132, 0.45);
  color: #6ef0a6;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.role-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.role-balance .rb-tank,
.role-balance .rb-dmg {
  padding: 3px 9px;
  border-radius: 999px;
}
.role-balance .rb-tank {
  background: rgba(59, 130, 246, 0.16);
  border: 1px solid rgba(59, 130, 246, 0.5);
  color: #7db1ff;
}
.role-balance .rb-dmg {
  background: rgba(229, 72, 77, 0.16);
  border: 1px solid rgba(229, 72, 77, 0.5);
  color: #f2888b;
}
/* Nút xóa đội: dấu × trơn, gọn (giống nút đóng popup). */
.clear-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
  transition: 0.15s;
}
.clear-btn:hover { color: #ff7b76; }
.board-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto; /* đẩy cụm nút sang phải, cùng hàng với "Ấn" */
}
.board-copy-code,
.board-move-btn,
.board-save {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: none;
}
.board-copy-code:hover,
.board-move-btn:hover,
.board-save:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(200, 170, 110, 0.12);
}
.board-save.saved {
  border-color: var(--gold);
  background: rgba(61, 220, 132, 0.18);
}
.top-comps-btn {
  margin-right: 8px;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid var(--gold);
  background: rgba(200, 170, 110, 0.12);
  color: var(--gold-bright);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.15s;
}
.top-comps-btn:hover { background: var(--gold); color: #1a1206; }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}
.modal-overlay[hidden] { display: none; }
.modal {
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: 1.05rem; color: var(--gold); }
.modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.modal-close:hover { color: var(--text); }
.picker-modal {
  max-width: 980px;
}
.picker-modal-body {
  overflow-y: auto;
  padding: 14px 16px 18px;
}
.picker-modal-body .picker-toolbar {
  margin-bottom: 12px;
}
.comps-list {
  overflow-y: auto;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.comp-tier {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0e14;
}
.comp-tier.tier-S { background: #ff5d5d; color: #fff; }
.comp-tier.tier-A { background: #f5b942; }
.comp-tier.tier-B { background: #3da9fc; }
.comp-tier.tier-C { background: #9aa4af; }
.comp-tier.tier-D { background: #6b7280; color: #e6edf3; }
.comp-info { flex: 1; min-width: 0; }
.comp-name {
  color: var(--text); /* <button> rows don't inherit color — keep names light */
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comp-units { display: flex; flex-wrap: wrap; gap: 4px; }
.comp-unit {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid var(--cost-color, var(--border));
  overflow: hidden;
}
.comp-unit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comp-unit-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; color: var(--text-dim); background: #0d141d;
}
.comp-score {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(61, 220, 132, 0.16);
  border: 1px solid rgba(61, 220, 132, 0.5);
  color: #6ef0a6;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.comp-pick {
  flex: 0 0 auto;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #1a1206;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s;
}
.comp-pick:hover { filter: brightness(1.1); }

#myTeamsList { min-height: 320px; }
.saved-team-slot {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(200, 170, 110, 0.14);
  border: 1px solid rgba(200, 170, 110, 0.5);
  color: var(--gold-bright);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.comp-row.empty-slot { border-style: dashed; opacity: 0.6; }
.saved-team-empty { color: var(--text-dim); font-size: 0.85rem; font-style: italic; }
.saved-team-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.saved-team-meta { color: var(--text-dim); font-size: 0.74rem; margin-top: 4px; }
.saved-team-del {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
}
.saved-team-del:hover { border-color: #d9534f; color: #ff7b76; }

/* Save-slot picker popup */
.save-slot-sub { margin: 0; padding: 4px 16px 0; color: var(--text-dim); font-size: 0.82rem; }
.save-slot-grid {
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.save-slot-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  text-align: left;
  transition: 0.12s;
}
.save-slot-card.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
  background: rgba(200, 170, 110, 0.12);
}
.save-slot-badge {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(200, 170, 110, 0.14);
  border: 1px solid rgba(200, 170, 110, 0.5);
  color: var(--gold-bright);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.save-slot-info { flex: 1; min-width: 0; }
.save-slot-name {
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.save-slot-card .comp-unit { width: 28px; height: 28px; }
.save-slot-empty {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-style: italic;
}
/* Nút lưu trực tiếp trên mỗi ô */
.save-slot-btn {
  flex: 0 0 auto;
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid var(--gold);
  background: rgba(200, 170, 110, 0.15);
  color: var(--gold-bright);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.12s;
}
.save-slot-btn:hover { background: rgba(200, 170, 110, 0.32); }
.save-slot-btn.overwrite {
  border-color: #d9843b;
  background: rgba(217, 132, 59, 0.14);
  color: #f0b884;
}
.save-slot-btn.overwrite:hover { background: rgba(217, 132, 59, 0.3); }
.save-slot-foot {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
}
.save-slot-foot .comp-pick:disabled { opacity: 0.4; cursor: not-allowed; }

.board-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 56px;
}
.board-chip {
  position: relative;
  width: 46px;
  cursor: pointer;
}
/* Bọc ảnh 46x46 để badge điểm / nút × / chấm role neo theo ảnh. */
.chip-img {
  position: relative;
  width: 46px;
  height: 46px;
}
/* Hàng số sao dưới mỗi tướng — hiển thị như nút để người dùng biết bấm được. */
.chip-stars {
  margin-top: 11px;
  padding: 2px 0 1px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.5px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
.chip-stars.star-2 { color: #cdd3da; }
.chip-stars.star-3 { color: #ffcf40; }
.chip-stars.star-4 { color: #b98bff; text-shadow: 0 0 4px rgba(185, 139, 255, 0.65); }
.chip-stars:hover {
  filter: brightness(1.3);
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
}
.board-chip img {
  width: 46px; height: 46px;
  border-radius: 7px;
  border: 2px solid var(--cost-color, var(--border));
  object-fit: cover;
  display: block;
}
.board-chip .remove {
  position: absolute;
  top: -5px; right: -5px;
  width: 16px; height: 16px;
  background: #d9534f;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  opacity: 0;
  transition: 0.12s;
}
.board-chip:hover .remove { opacity: 1; }
/* Unit on the board that isn't activating any trait. */
.board-chip.no-synergy img { border-color: #d9534f; border-style: dashed; opacity: 0.65; }
/* Unit activating the most traits (highest score = Σ active counts × cost). */
.board-chip.top-synergy img {
  border-color: #3ddc84;
  box-shadow: 0 0 10px rgba(61, 220, 132, 0.6);
}
/* Visible synergy-score badge on each unit. */
.chip-score {
  position: absolute;
  bottom: -7px; left: -7px;
  min-width: 22px; height: 22px;
  padding: 0 5px;
  box-sizing: border-box;
  background: #2a3646;
  color: var(--text);
  border: 1px solid var(--bg);
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.board-chip.top-synergy .chip-score { background: #3ddc84; color: #0a0e14; }
.board-chip.no-synergy .chip-score { background: #d9534f; color: #fff; }

.board-notice {
  margin: 10px 0 0;
  padding: 6px 10px;
  font-size: 0.8rem;
  color: #ffb4b1;
  background: rgba(217, 83, 79, 0.12);
  border: 1px solid rgba(217, 83, 79, 0.4);
  border-radius: 7px;
}

.board-slot.empty,
.board-add-slot {
  width: 46px;
  height: 46px;
  border-radius: 7px;
}
.board-slot.empty {
  border: 1px dashed var(--border);
  background: rgba(255, 255, 255, 0.02);
  opacity: 0.5;
}
.board-add-slot {
  border: 1px dashed var(--gold);
  background: rgba(200, 170, 110, 0.1);
  color: var(--gold-bright);
  cursor: pointer;
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.board-add-slot:hover {
  border-color: var(--gold-bright);
  background: rgba(200, 170, 110, 0.2);
  color: #fff;
}

/* Active-traits summary (concise, under the board) */
.active-summary-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.active-summary-label {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 0.8rem;
}
.active-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.empty-hint.sm { font-size: 0.8rem; margin: 0; }
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--bg-card);
  border: 1px solid var(--tier-color, var(--border));
  color: var(--text);
}
.active-chip strong { color: var(--tier-color, var(--text)); font-variant-numeric: tabular-nums; }

/* Emblems ("Ấn") row on each board */
.emblem-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.emblem-label { flex: 0 0 auto; color: var(--text-dim); font-size: 0.8rem; }
.emblem-list { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 1 auto; min-width: 0; }
.emblem-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  background: rgba(140, 110, 200, 0.14);
  border: 1px solid rgba(160, 130, 220, 0.55);
  color: #cdbcf0;
  cursor: pointer;
  transition: 0.15s;
}
.emblem-chip:hover { border-color: #d9534f; color: #ff9d9a; }
.emblem-chip .emblem-ico { color: #b69cf0; font-size: 0.7rem; }
.emblem-chip .emblem-x { color: var(--text-dim); font-weight: 700; }
.emblem-add {
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(160, 130, 220, 0.6);
  background: transparent;
  color: #b69cf0;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
}
.emblem-add:hover { background: rgba(140, 110, 200, 0.14); border-style: solid; }

/* Emblem picker popup */
.emblem-modal-sub { margin: 0; padding: 4px 16px 0; color: var(--text-dim); font-size: 0.82rem; }
.emblem-grid {
  overflow-y: auto;
  padding: 12px 16px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.emblem-pick {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: 0.12s;
}
.emblem-pick:hover { border-color: #a082dc; background: rgba(140, 110, 200, 0.12); }
.emblem-pick.has { border-color: rgba(160, 130, 220, 0.7); background: rgba(140, 110, 200, 0.16); }
.emblem-pick-count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(160, 130, 220, 0.85);
  color: #14101f;
  font-weight: 800;
  font-size: 0.78rem;
  text-align: center;
}

/* Paste-team-code row */
.teamcode {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.teamcode-top {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  gap: 10px;
}
.teamcode-top #teamCodeInput {
  padding: 12px 16px;
  font-size: 1rem;
  border-radius: 10px;
}
.teamcode-top #teamCodeBtn {
  padding: 12px 24px;
  font-size: 1rem;
  border-radius: 10px;
}
#teamCodeInput {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: ui-monospace, "Consolas", monospace;
}
#teamCodeInput:focus { outline: none; border-color: var(--gold); }
#teamCodeBtn {
  flex: 0 0 auto;
  padding: 8px 16px;
  background: var(--gold);
  color: #1a1206;
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}
#teamCodeBtn:hover { filter: brightness(1.1); }
.teamcode-msg {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  min-height: 1em;
}
.teamcode-msg.error { color: #ff7b76; }

.suggest-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.suggest-tab {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.suggest-tab:hover { background: var(--bg-card-hover); color: var(--text); }
.suggest-tab.active { border-color: var(--gold); background: var(--gold); color: #1a1206; }

.suggest-list { display: flex; flex-direction: column; gap: 8px; }
.suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--cost-color, var(--border));
  border-radius: 9px;
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.suggest-item:hover { background: var(--bg-card-hover); transform: translateX(2px); }
.suggest-portrait {
  width: 40px; height: 40px;
  border-radius: 7px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: #0d141d;
}
.suggest-portrait.fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--text-dim); font-size: 0.85rem;
}
.suggest-info { min-width: 0; flex: 1; }
.suggest-name {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest-cost { color: var(--cost-color, var(--text-dim)); font-size: 0.78rem; }
/* Icon vai trò ở panel "Top các tướng phù hợp nhất" — khung nhỏ, viền theo màu vai trò */
.suggest-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  margin-left: 8px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  flex: 0 0 auto;
}
.suggest-role.role-tank { border-color: #3b82f6; }
.suggest-role.role-damage { border-color: #e5484d; }
.suggest-role.role-fighter { border-color: #8a6bd0; }
.suggest-role .role-svg { display: block; }
/* Hàng vai trò trên mỗi tướng — icon trong khung nút, viền theo màu vai trò */
.chip-role-btn {
  height: 16px;
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  user-select: none;
}
.chip-role-btn.role-tank { border-color: #3b82f6; }
.chip-role-btn.role-damage { border-color: #e5484d; }
.chip-role-btn.role-fighter { border-color: #8a6bd0; }
.chip-role-btn .role-svg { display: block; }
/* Ô trống / nút "+" dùng chung cấu trúc chip để căn thẳng hàng. */
.slot-chip { width: 46px; }
.chip-role-btn.placeholder {
  background: none;
  border-color: var(--border);
  box-shadow: none;
  opacity: 0.45;
}
.chip-stars.placeholder {
  color: transparent;
  border-color: var(--border);
  background: none;
  cursor: default;
  opacity: 0.45;
}
.chip-stars.placeholder:hover { filter: none; }
.suggest-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.why-chip {
  font-size: 0.7rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: #0d141d;
  border: 1px solid var(--tier-color, var(--border));
  color: var(--tier-color, var(--text-dim));
  white-space: nowrap;
  font-weight: 600;
}

/* Suggestion score (same formula as the board). */
.suggest-score {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(61, 220, 132, 0.16);
  border: 1px solid rgba(61, 220, 132, 0.5);
  color: #6ef0a6;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.empty-hint { color: var(--text-dim); font-size: 0.88rem; margin: 6px 0; }

/* Traits */
.traits-list { display: flex; flex-direction: column; gap: 7px; }
.trait-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--bg-card);
  border-left: 4px solid var(--tier-color, var(--border));
}
.trait-row.inactive { opacity: 0.5; border-left-color: var(--border); }
.trait-tier-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
  background: var(--tier-color, var(--text-dim));
  box-shadow: 0 0 8px var(--tier-color, transparent);
}
.trait-name { flex: 1; font-weight: 600; font-size: 0.92rem; }
.trait-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.trait-count strong { color: var(--text); }

/* Tier color helpers */
.tier-bronze    { --tier-color: var(--tier-bronze); }
.tier-silver    { --tier-color: var(--tier-silver); }
.tier-gold      { --tier-color: var(--tier-gold); }
.tier-prismatic { --tier-color: var(--tier-prismatic); }

/* Cost helpers */
.c1 { --cost-color: var(--cost-1); }
.c2 { --cost-color: var(--cost-2); }
.c3 { --cost-color: var(--cost-3); }
.c4 { --cost-color: var(--cost-4); }
.c5 { --cost-color: var(--cost-5); }

/* Flash when board is full */
@keyframes flash-full { 0%,100%{ box-shadow:none; } 50%{ box-shadow:0 0 0 2px var(--cost-5); } }
.board-panel.flash { animation: flash-full 0.4s ease; }

/* Responsive */
@media (max-width: 880px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .unit-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }

  .brand-tagline { display: none; }
}