* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Board hex sizing scales with viewport width; ~60px is the reference.
     Everything hex-related (cell, image, stars, trait chips, item chips,
     row gap, offset) derives from --hex-w so the board stays proportional. */
  --hex-w: clamp(42px, 5.5vw, 78px);
  --hex-h: calc(var(--hex-w) * 1.1333);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0e1525;
  color: #e0e0e0;
  min-height: 100vh;
}

/* === Board row: frame (traits + board + Find Boards) on top, controls
   (Copy/Clear | Calculate | Paste Team Code) below with matching columns. */
.board-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.board-frame,
.below-frame {
  display: grid;
  /* Wider side rails + larger frame max-width give the center column enough
     room to hold the 9-hex bench without overflowing into the side columns. */
  grid-template-columns: 180px minmax(0, 1fr) 200px;
  gap: 24px;
  width: 100%;
  max-width: calc(var(--hex-w) * 18);
  align-items: flex-start;
}
.board-frame {
  padding: 10px;
  background: #0a1224;
  border: 1px solid #1e2d4a;
  border-radius: 8px;
}
/* Match frame's horizontal padding so below-frame columns align with the
   frame's inner content rather than the outer border. */
.below-frame { padding: 0 10px; }
.below-left   { justify-self: start; width: 180px; }
.below-center { justify-self: center; }
.below-right  {
  justify-self: end;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.frame-find {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.traits-box {
  background: #111a2e;
  border: 1px solid #1e2d4a;
  border-radius: 6px;
  padding: 6px 8px;
  max-height: calc(var(--hex-h) * 4);
  overflow-y: auto;
}

/* Board column wraps strength, board, and below-board controls so they all
   share the board's horizontal center (not the page center). */
.board-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Copy + Clear now sit under the traits panel on the left. */
.board-controls-top {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
}

/* Calculate + Optimize sit side-by-side, score centered below both. */
.board-controls-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.board-controls-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.level-input {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #8a9ab5;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.level-input input {
  width: 42px;
  background: #0a1020;
  border: 1px solid #1e2d4a;
  color: #e0e0e0;
  font-size: 0.85rem;
  padding: 4px 6px;
  border-radius: 4px;
  font-family: monospace;
  text-align: center;
}
.level-input input:focus { outline: none; border-color: #c9a84c; }
.traits-box h3 {
  font-size: 0.7rem;
  color: #c9a84c;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

/* === Side panel (right of board): paste box + search === */
.side-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 190px;
  flex-shrink: 0;
}
.side-header {
  font-size: 0.7rem;
  color: #c9a84c;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
  margin-bottom: 2px;
}
.paste-box {
  background: #111a2e;
  border: 1px solid #1e2d4a;
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.paste-box .paste-input { flex: 1 1 0; min-width: 0; }
.paste-box .btn-load { flex-shrink: 0; }
.paste-box .paste-error { flex: 1 0 100%; }
.btn-copy {
  background: transparent; color: #888; border: 1px solid #333;
  padding: 8px 14px; font-size: 0.8rem; border-radius: 6px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.btn-copy:hover { color: #c9a84c; border-color: #c9a84c; }
.paste-input {
  background: #0a1020;
  border: 1px solid #1e2d4a;
  color: #e0e0e0;
  font-size: 0.72rem;
  padding: 5px 6px;
  border-radius: 3px;
  font-family: monospace;
  width: 100%;
}
.paste-input:focus { outline: none; border-color: #c9a84c; }
.btn-load {
  background: #1a2540;
  border: 1px solid #2a3a60;
  color: #e0e0e0;
  font-size: 0.78rem;
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-load:hover { background: #2a3a60; }
.paste-error {
  font-size: 0.68rem;
  color: #e76e5c;
  word-break: break-all;
}

/* === Board search ===================================================
   Lives in the 200px right column of .board-frame, so every interior
   element is sized to fit (~178px usable width). Anything wider triggers
   the ugly horizontal scroll. */
.search-box {
  background: #111a2e;
  border: 1px solid #1e2d4a;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.search-header {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  flex-shrink: 0;
}
.search-header .search-inputs { flex: 1 1 auto; min-width: 0; }
.search-header .btn-load {
  flex: 0 0 auto;
  padding: 0 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#search-results {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  scrollbar-gutter: stable;
}
#search-results::-webkit-scrollbar { width: 6px; }
#search-results::-webkit-scrollbar-track { background: transparent; }
#search-results::-webkit-scrollbar-thumb {
  background: #2a3a60;
  border-radius: 3px;
}
#search-results::-webkit-scrollbar-thumb:hover { background: #3a4a72; }

.search-inputs { display: flex; gap: 4px; min-width: 0; }
.search-inputs label {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  font-size: 0;
}
.search-inputs label::before {
  content: 'Score';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.62rem;
  color: #6a7a95;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  pointer-events: none;
}
.search-inputs input {
  background: #0a1020;
  border: 1px solid #1e2d4a;
  color: #f1f4fb;
  font-size: 0.85rem;
  padding: 5px 8px 5px 44px;
  border-radius: 4px;
  width: 100%;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.search-inputs input:hover { border-color: #2a3a60; }
.search-inputs input:focus { outline: none; border-color: #c9a84c; background: #0c1428; }

.search-empty {
  color: #7a8aa8;
  font-size: 0.72rem;
  font-style: italic;
  text-align: center;
  padding: 14px 4px;
}

.search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #1e2d4a;
  color: #e0e0e0;
  padding: 10px 6px;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 80ms ease;
  text-align: left;
  font: inherit;
  min-width: 0;
  overflow: hidden;
  flex-shrink: 0;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: #1a2747; }
.search-result:active { transform: translateY(1px); }

.search-units {
  display: flex;
  gap: 2px;
  min-width: 0;
  flex-shrink: 0;
}
.search-unit {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 3px;
  overflow: hidden;
  background: #0a1020;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px var(--cost-color, #555),
              inset 0 0 0 3px rgba(0, 0, 0, 0.55);
}
.search-unit.cost-1 { --cost-color: #8a8a8a; }
.search-unit.cost-2 { --cost-color: #1ead4a; }
.search-unit.cost-3 { --cost-color: #2194de; }
.search-unit.cost-4 { --cost-color: #a335ee; }
.search-unit.cost-5 { --cost-color: #d4a017; }
.search-unit img { width: 100%; height: 100%; object-fit: cover; display: block; }

.search-unit-tier {
  position: absolute;
  top: 1px; right: 1px;
  font-size: 0.58rem;
  font-weight: 700;
  color: #1a1200;
  background: #c9a84c;
  padding: 0 3px;
  line-height: 1.3;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.02em;
}
.search-score {
  color: #f1c85a;
  font-weight: 700;
  font-size: 0.82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  line-height: 1;
}

/* === Matrix on/off switch (Craftable | Radiant) === */
.matrix-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 8px;
  width: fit-content;
  user-select: none;
  cursor: pointer;
}
.matrix-switch input { display: none; }
.switch-label {
  font-size: 0.78rem;
  color: #8a9ab5;
  transition: color 0.15s;
}
.switch-track {
  position: relative;
  width: 36px;
  height: 18px;
  background: #1e2d4a;
  border-radius: 9px;
  transition: background 0.2s;
}
.switch-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #c9a84c;
  border-radius: 50%;
  transition: left 0.2s;
}
.matrix-switch input:checked ~ .switch-track { background: #3a2d4a; }
.matrix-switch input:checked ~ .switch-track .switch-thumb { left: 20px; }
.matrix-switch input:not(:checked) ~ .switch-left,
.matrix-switch input:checked ~ .switch-right {
  color: #e0e0e0;
  font-weight: 600;
}

/* === Pools row (units + items) === */
.pools-row {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 1400px;
  align-items: flex-start;
}
.pool-units { flex: 1 1 0; min-width: 560px; }
.pool-items { flex: 1 1 440px; min-width: 440px; max-width: 520px; }

/* Item subsection labels (Emblems, Artifacts, …) */
.item-group-label {
  font-size: 0.65rem;
  color: #c9a84c;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 8px 0 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid #1e2d4a;
}
.item-group-label:first-child { margin-top: 4px; }

.trait-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1px 0;
  font-size: 0.7rem;
  line-height: 1;
}
.trait-row.tier-inactive { opacity: 0.5; }

/* Block-style badge — count chip + icon */
.trait-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 18px;
  min-width: 42px;
  padding: 0 5px 0 3px;
  gap: 3px;
  border-radius: 2px;
  background: #2a2f3a;
  color: #fff;
  font-weight: 700;
  font-size: 0.66rem;
}
.trait-badge-icon {
  width: 12px; height: 12px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.trait-badge-count { line-height: 1; }

/* Tier colours — solo/unique traits fall through to bronze */
.trait-badge.tier-bronze    { background: #7d4a1f; color: #f3d2a8; }
.trait-badge.tier-silver    { background: #a8adb8; color: #1a1a1a; }
.trait-badge.tier-gold      { background: #c9a84c; color: #1a1200; }
.trait-badge.tier-prismatic {
  background: linear-gradient(135deg, #ff79c6, #bd93f9, #8be9fd, #50fa7b, #f1fa8c);
  color: #1a1a1a;
}
.trait-badge.tier-inactive  { background: #2a2f3a; color: #9aa3b8; }

.trait-name {
  flex: 1; min-width: 0;
  font-size: 0.7rem; color: #cfd3dc;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trait-row.tier-bronze    .trait-name { color: #d89868; }
.trait-row.tier-silver    .trait-name { color: #d8dde6; }
.trait-row.tier-gold      .trait-name { color: #f1c85a; }
.trait-row.tier-prismatic .trait-name { color: #f8b4e8; font-weight: 600; }
.trait-row.tier-inactive  .trait-name { color: #7a8294; }

.trait-empty { color: #555; font-size: 0.7rem; text-align: center; padding: 8px; font-style: italic; }

/* === Main === */
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem 1rem;
  gap: 0.4rem;
  overflow-y: auto;
}
/* === Site header / brand identity === */
.site-header {
  width: 100%;
  max-width: calc(var(--hex-w) * 18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #1e2d4a;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #c9a84c;
  letter-spacing: 1px;
  margin: 0;
}
.brand-tagline {
  font-size: 0.72rem;
  color: #8a97ad;
  letter-spacing: 0.3px;
}
.about-btn {
  flex: none;
  background: transparent;
  color: #c9a84c;
  border: 1px solid #c9a84c;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.about-btn:hover { background: #c9a84c; color: #1a1200; }

/* === About / landing modal === */
.about-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 20, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}
.about-overlay[hidden] { display: none; }
.about-modal {
  position: relative;
  background: #0a1224;
  border: 1px solid #1e2d4a;
  border-radius: 10px;
  max-width: 540px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px 26px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.about-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.about-mark { width: 44px; height: 44px; flex: none; }
.about-modal h2 { color: #c9a84c; font-size: 1.4rem; margin: 0; }
.about-modal p { color: #c8d0de; font-size: 0.92rem; line-height: 1.55; margin: 0 0 12px; }
.about-modal strong { color: #e8eef7; }
.about-howto {
  background: #111a2e;
  border: 1px solid #1e2d4a;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 4px 0 14px;
}
.about-howto h3 { color: #f1c85a; font-size: 0.95rem; margin: 0 0 8px; }
.about-howto ol { margin: 0; padding-left: 1.2rem; }
.about-howto li { color: #c8d0de; font-size: 0.88rem; line-height: 1.5; margin-bottom: 5px; }
.about-disclaimer { font-size: 0.74rem !important; color: #6f7d93 !important; margin-bottom: 0 !important; }
.about-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  color: #8a97ad;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.about-close:hover { color: #e8eef7; }

/* === Board === */
.board {
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--hex-w) * 0.18);
  /* Heavier top padding shifts the board lower in its column so it sits
     closer to the bench below — the bottom padding is just large enough to
     clear the item chips hanging below the last row. */
  padding: calc(var(--hex-w) * 0.55) calc(var(--hex-w) * 0.18) calc(var(--hex-w) * 0.15);
}
.hex-row { display: flex; gap: calc(var(--hex-w) * 0.067); }
/* Offset rows (2nd and 4th) shift right by a full hex-width + the row gap so
   their first hex sits directly under the second hex of the adjacent row. */
.hex-row.offset { margin-left: calc(var(--hex-w) + var(--hex-w) * 0.067); }

.hex-cell { position: relative; width: var(--hex-w); height: var(--hex-h); }

/* Click-to-select highlight. clip-path on .hex eats box-shadow, so we use
   filter: drop-shadow on the cell wrapper — it respects the clipped silhouette. */
.hex-cell.selected {
  filter: drop-shadow(0 0 4px #ffd54a) drop-shadow(0 0 10px rgba(255, 213, 74, 0.7));
}

/* Item gating while a unit is "armed" (selected). Disallowed items go inert;
   allowed items get a subtle highlight to read as click-to-equip targets. */
/* Custom hover tooltip for units and items — shared element, positioned by
   JS to follow the cursor. Replaces the lazy ~1.5s native title delay. */
#hover-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  background: #0a1224;
  border: 1px solid #2a3a60;
  color: #e8e8e8;
  font-size: 0.78rem;
  padding: 5px 9px;
  border-radius: 4px;
  /* `pre-line` keeps inline whitespace collapsed but honours \n in the
     data-tooltip string so multi-line tips (name / cost / traits) render. */
  white-space: pre-line;
  max-width: 280px;
  line-height: 1.35;
  box-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
#hover-tooltip .tt-title { font-weight: 700; color: #f0d27a; }
#hover-tooltip .tt-meta  { color: #9fb1c8; font-size: 0.72rem; }
#hover-tooltip[hidden] { display: none; }

.item-icon.disallowed,
.opt-chip.disallowed,
.recipe-matrix td[data-item-id].disallowed {
  opacity: 0.18;
  filter: grayscale(0.8);
  pointer-events: none;
  cursor: not-allowed;
}
.item-icon.armed,
.opt-chip.armed,
.recipe-matrix td[data-item-id].armed {
  outline: 1px solid rgba(255, 213, 74, 0.7);
  outline-offset: -1px;
  cursor: pointer;
}

.hex {
  width: var(--hex-w); height: var(--hex-h);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #1a2744;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
  flex-shrink: 0;
}
.hex:hover { background: #243556; }
.hex.drag-over { background: #2a4a2a; }

/* Unit fills the hex + cost border */
.hex.occupied .hex-img {
  position: absolute; inset: 3px;
  width: calc(100% - 6px); height: calc(100% - 6px);
  object-fit: cover;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hex.cost-1 { background: #888; }
.hex.cost-2 { background: #1ead4a; }
.hex.cost-3 { background: #2194de; }
.hex.cost-4 { background: #a335ee; }
.hex.cost-5 { background: #d4a017; }

/* Traits sit above the hex (sibling of .hex inside .hex-cell). */
.hex-cell .hex-traits {
  position: absolute; bottom: calc(100% - 12px); left: 50%; transform: translateX(-50%);
  display: flex; gap: 2px; z-index: 5; pointer-events: none;
}
.hex-cell .hex-trait {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--hex-w) * 0.27); height: calc(var(--hex-w) * 0.27);
  border-radius: 3px;
  background: rgba(0,0,0,0.75);
  box-shadow: 0 0 2px rgba(0,0,0,0.8);
}
.hex-cell .hex-trait img {
  width: 62%; height: 62%; object-fit: contain;
  filter: brightness(0) invert(1);
}
.hex-cell .hex-trait.tier-inactive  { background: #2a2f3a; opacity: 0.55; }
.hex-cell .hex-trait.tier-bronze    { background: #7d4a1f; }
.hex-cell .hex-trait.tier-silver    { background: #a8adb8; }
.hex-cell .hex-trait.tier-gold      { background: #c9a84c; }
.hex-cell .hex-trait.tier-prismatic {
  background: linear-gradient(135deg, #ff79c6, #bd93f9, #8be9fd, #50fa7b, #f1fa8c);
}
.hex-cell .hex-trait.tier-silver img,
.hex-cell .hex-trait.tier-gold img,
.hex-cell .hex-trait.tier-prismatic img {
  filter: brightness(0);
}

.hex .hex-stars {
  position: absolute; top: 28%; left: 50%; transform: translate(-50%, -50%);
  font-size: calc(var(--hex-w) * 0.18);
  color: #c9a84c;
  text-shadow: 0 0 4px #000, 0 0 4px #000, 0 0 2px #000;
  white-space: nowrap; pointer-events: none; z-index: 4;
  letter-spacing: 1px;
}

.hex-cell .hex-items {
  position: absolute; bottom: calc(var(--hex-w) * -0.1); left: 50%; transform: translateX(-50%);
  display: flex; gap: 2px; z-index: 10;
}
.hex-cell .hex-item {
  width: calc(var(--hex-w) * 0.3); height: calc(var(--hex-w) * 0.3);
  border-radius: 3px; overflow: hidden;
  border: 1px solid #000; background: rgba(0,0,0,0.8);
  cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 3px rgba(0,0,0,0.8);
  transition: border-color 0.1s, transform 0.1s;
}
.hex-cell.selected .hex-item:hover { border-color: #e74c3c; transform: scale(1.2); }
.hex-cell .hex-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* === Controls === */
.btn-calculate {
  background: #c9a84c; color: #0e1525; border: 1px solid #c9a84c;
  padding: 8px 24px; font-size: 0.95rem; font-weight: 700;
  border-radius: 6px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-calculate:hover:not(:disabled) { background: #dbb85c; border-color: #dbb85c; }
.btn-calculate:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-clear {
  background: transparent; color: #888; border: 1px solid #333;
  padding: 8px 14px; font-size: 0.8rem; border-radius: 6px; cursor: pointer;
}
.btn-clear:hover { color: #e74c3c; border-color: #e74c3c; }

.strength-value {
  font-size: 1.4rem;
  font-weight: 900;
  color: #c9a84c;
  transition: color 0.3s;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}

/* Confidence bar under the score — a single solid-colour bar. The colour
   is the confidence band (green/orange/red); there is no gradient or
   partial fill, the bar shows only the colour of what the confidence is. */
.score-confidence {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
}
/* "Board familiarity" head — same labeled-bar layout as the "Item
   familiarity" panel below it, sized to match so the two read as a pair. */
.score-confidence .feat-head {
  width: 280px;
  max-width: 90vw;
  margin-bottom: 0;
}
/* The one combined "Familiarity" headline — click to expand the breakdown. */
.fam-combined {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 280px;
  max-width: 90vw;
}
.fam-combined .conf-bar-compact { flex: 1; }
.fam-combined .feat-title { font-weight: 600; white-space: nowrap; }
/* Clearer expand affordance: the whole headline row is a hover-highlighted,
   pointer target. */
.fam-expandable {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 5px;
  margin: 0 -5px;
}
.fam-expandable:hover { background: rgba(255, 255, 255, 0.05); }
/* CSS-drawn caret (font-independent) — points down when collapsed, flips up
   when open. */
.fam-caret {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #9aa6bc;
  transition: transform 0.15s ease;
}
.fam-expandable:hover .fam-caret { border-top-color: #c9d2e4; }
.fam-combined.open .fam-caret { transform: rotate(180deg); }
/* Track (dark recessed) + a solid-colour fill. The fill colour is the
   confidence band; its width is the degree, so a fuller bar = a more
   confident board. A defined outline keeps the bar from blending into the
   dark page background. */
.conf-bar {
  box-sizing: border-box;
  width: 150px;
  height: 9px;
  border-radius: 5px;
  background: #05080f;
  border: 1px solid #46578a;
  overflow: hidden;
}
.conf-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.25s ease;
}
.conf-high .conf-bar-fill { background: #5fb84a; }
.conf-medium .conf-bar-fill { background: #e8a13a; }
.conf-low .conf-bar-fill { background: #e0443c; }
.conf-bar-warn {
  color: #e0443c;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
}
.conf-bar-compact {
  width: 100%;
  height: 5px;
  border-radius: 3px;
}

/* Feature-familiarity panel — the model-independent OOD view. A compact bar
   plus a verbose per-pair table (unit+item / unit+unit) sorted worst-first,
   showing raw observed counts and the cooccur shares that drive the score. */
.feature-confidence {
  margin-top: 10px;
  width: 280px;
  max-width: 90vw;
  font-size: 0.64rem;
  color: #aab6cc;
}
.feat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.feat-title {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.58rem;
  color: #8a9ab5;
  white-space: nowrap;
}
.feat-head .conf-bar-compact { flex: 1; }
.feat-ratio {
  font-variant-numeric: tabular-nums;
  color: #c9d2e4;
  white-space: nowrap;
}
/* The three component rows (Model / Units / Items) inside the expandable
   detail — a fixed-width label column so every bar starts at the same x and
   they read as one aligned group. */
.feature-confidence .feat-head { margin-bottom: 4px; }
.feature-confidence .feat-head:last-child { margin-bottom: 0; }
.feature-confidence .feat-title {
  width: 3.4rem;
  flex-shrink: 0;
  font-size: 0.58rem;
  color: #8a96ac;
}

/* === Optimize progress (under the score while Optimize is running) === */
.opt-progress {
  font-size: 0.7rem;
  color: #8a9ab5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 12px;
}
.opt-progress[hidden] { display: none; }
.opt-progress-dots { display: inline-flex; gap: 2px; margin-left: 4px; }
.opt-progress-dots span {
  display: inline-block;
  width: 4px; height: 4px;
  background: #c9a84c;
  border-radius: 50%;
  opacity: 0.3;
  animation: opt-dot-pulse 1.2s infinite;
}
.opt-progress-dots span:nth-child(2) { animation-delay: 0.2s; }
.opt-progress-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes opt-dot-pulse {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
  30%           { opacity: 1.0; transform: scale(1.0); }
}

/* === Just-changed pulse for hexes the optimizer touched === */
.hex-cell.just-changed {
  animation: hex-change-pulse 1.5s ease-out;
}
@keyframes hex-change-pulse {
  0%   { filter: drop-shadow(0 0 8px #ffd54a) drop-shadow(0 0 18px rgba(255, 213, 74, 0.95)); }
  40%  { filter: drop-shadow(0 0 6px #ffd54a) drop-shadow(0 0 12px rgba(255, 213, 74, 0.7)); }
  100% { filter: none; }
}

/* === Top-N optimizer candidates row === */
.opt-candidates {
  width: 100%;
  max-width: calc(var(--hex-w) * 18);
  margin: 8px auto 4px;
  padding: 8px 12px;
  background: #0a1224;
  border: 1px solid #1e2d4a;
  border-radius: 6px;
}
.opt-candidates[hidden] { display: none; }
.opt-candidates-label {
  font-size: 0.65rem;
  color: #c9a84c;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  font-weight: 700;
}
.opt-candidates-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-gutter: stable;
  padding-bottom: 2px;
}
.opt-candidates-row::-webkit-scrollbar { height: 6px; }
.opt-candidates-row::-webkit-scrollbar-track { background: transparent; }
.opt-candidates-row::-webkit-scrollbar-thumb { background: #2a3a60; border-radius: 3px; }
.opt-candidate {
  flex: 0 0 auto;
  background: #111a2e;
  border: 1px solid #1e2d4a;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  transition: border-color 0.15s, transform 80ms ease;
  min-width: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.opt-candidate:hover { border-color: #c9a84c; }
.opt-candidate:active { transform: translateY(1px); }
.opt-candidate.active { border-color: #c9a84c; background: #1a2540; }
.opt-candidate-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.68rem;
}
.opt-candidate-rank {
  color: #8a9ab5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.opt-candidate-score {
  color: #f1c85a;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.opt-candidate-units {
  display: flex;
  gap: 2px;
}
.opt-candidate-unit {
  width: 26px; height: 26px;
  border-radius: 3px;
  overflow: hidden;
  background: #0a1020;
  box-shadow: inset 0 0 0 1px var(--cost-color, #555);
  flex-shrink: 0;
}
.opt-candidate-unit.cost-1 { --cost-color: #8a8a8a; }
.opt-candidate-unit.cost-2 { --cost-color: #1ead4a; }
.opt-candidate-unit.cost-3 { --cost-color: #2194de; }
.opt-candidate-unit.cost-4 { --cost-color: #a335ee; }
.opt-candidate-unit.cost-5 { --cost-color: #d4a017; }
.opt-candidate-unit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opt-candidate-conf {
  margin-top: 5px;
}

/* === Sections === */
.section {
  width: 100%;
  background: #111a2e;
  border: 1px solid #1e2d4a;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.section > :last-child { flex: 1 1 auto; min-height: 0; }
.section-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; flex-wrap: wrap;
  padding-bottom: 6px;
  border-bottom: 1px solid #1e2d4a;
}
.section-header h2 { font-size: 0.85rem; color: #c9a84c; text-transform: uppercase; letter-spacing: 1px; }
.search-input {
  background: #0a1020; border: 1px solid #1e2d4a; color: #ddd;
  padding: 4px 10px; border-radius: 5px; font-size: 0.8rem; outline: none; width: 160px;
}
.search-input:focus { border-color: #c9a84c; }

/* === Unit grid === */
.cost-group {
  margin-bottom: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  border-left: 3px solid transparent;
}
.cost-group.cost-1 { background: rgba(136,136,136,0.14); border-left-color: #888; }
.cost-group.cost-2 { background: rgba(30,173,74,0.14);  border-left-color: #1ead4a; }
.cost-group.cost-3 { background: rgba(33,148,222,0.14); border-left-color: #2194de; }
.cost-group.cost-4 { background: rgba(163,53,238,0.14); border-left-color: #a335ee; }
.cost-group.cost-5 { background: rgba(212,160,23,0.14); border-left-color: #d4a017; }
.cost-grid { display: flex; flex-wrap: wrap; gap: 4px; }

.unit-btn {
  width: 54px; height: 54px;
  border: 2px solid #333; border-radius: 4px;
  background: #0a1020; cursor: grab; overflow: hidden; position: relative;
  transition: transform 0.1s;
}
.unit-btn:hover { transform: scale(1.12); z-index: 2; }
.unit-btn:active { cursor: grabbing; }
.unit-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unit-btn .fb {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 0.45rem; color: #888; text-align: center; padding: 1px; line-height: 1;
}
.unit-btn.cost-1 { border-color: #888; }
.unit-btn.cost-2 { border-color: #1ead4a; }
.unit-btn.cost-3 { border-color: #2194de; }
.unit-btn.cost-4 { border-color: #a335ee; }
.unit-btn.cost-5 { border-color: #d4a017; }

/* === Tabs === */
.tab-bar { display: flex; gap: 2px; }
.tab {
  padding: 4px 10px; font-size: 0.7rem;
  background: #0a1020; color: #888; border: 1px solid #1e2d4a;
  border-radius: 4px; cursor: pointer;
}
.tab.active { background: #1e2d4a; color: #c9a84c; border-color: #c9a84c; }
.tab-content[hidden] { display: none; }

/* === Recipe matrix === */
.recipe-matrix { overflow-x: auto; }
.recipe-matrix table { border-collapse: collapse; }
.recipe-matrix th, .recipe-matrix td {
  width: 44px; height: 44px; padding: 0; text-align: center; vertical-align: middle;
  border: 1px solid #1e2d4a;
}
.recipe-matrix th { background: #0a1020; }
.recipe-matrix th.axis-comp img { filter: brightness(0.8); opacity: 0.7; }
.unit-btn.dimmed { opacity: 0.28; filter: grayscale(0.6); }
.unit-btn.dimmed:hover { opacity: 0.55; filter: grayscale(0.2); }
.recipe-matrix th img, .recipe-matrix td img {
  width: 38px; height: 38px; object-fit: cover; display: block; margin: auto;
}
.recipe-matrix td { background: #111a2e; cursor: grab; transition: background 0.15s; }
.recipe-matrix td:hover { background: #1e3a5f; }
.recipe-matrix td:active { cursor: grabbing; }

/* === Item grid === */
.item-grid { display: flex; flex-wrap: wrap; gap: 3px; }
.item-icon {
  width: 44px; height: 44px;
  border: 1px solid #1e2d4a; border-radius: 4px;
  background: #0a1020; overflow: hidden; cursor: grab; transition: transform 0.1s;
}
.item-icon:hover { transform: scale(1.15); z-index: 2; }
.item-icon:active { cursor: grabbing; }
.item-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-icon .fb {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 0.4rem; color: #666; text-align: center; padding: 1px; line-height: 1;
}

/* === Context menu === */
.ctx-menu {
  position: fixed;
  background: #111a2e;
  border: 1px solid #1e2d4a;
  border-radius: 6px;
  padding: 4px 0;
  z-index: 200;
  min-width: 100px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.ctx-menu[hidden] { display: none; }
.ctx-menu button {
  display: block; width: 100%;
  background: none; border: none; color: #ddd;
  padding: 6px 14px; text-align: left; cursor: pointer;
  font-size: 0.8rem;
}
.ctx-menu button:hover { background: #1e2d4a; }
.ctx-menu .ctx-remove { color: #e74c3c; }
.ctx-menu .ctx-remove:hover { background: #3a1020; }

/* === Traits column (traits + item pool stacked) === */
.traits-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;   /* match the height of the center column */
}
.traits-column .traits-box { flex: 0 0 auto; }
.item-pool-box {
  flex: 1 1 auto;        /* fill remaining height under traits */
  background: #0e1628;
  border: 1px solid #1e2d4a;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  cursor: pointer;
}
/* Armed = clicking an item in the matrix/other-list pushes it into the pool
   instead of equipping a unit. Yellow ring matches the unit-selection accent. */
.item-pool-box.armed {
  outline: 2px solid #ffd54a;
  outline-offset: -2px;
  background: #131e36;
}
.item-pool-box h3 {
  margin: 0 0 8px 0;
  font-size: 0.85rem;
  color: #c9a84c;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* The chip container itself is just a flex-wrap row inside the pool box —
   no nested border / background. Empty-state hint sits centred when no
   chips exist. */
.opt-zone {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
}
.opt-zone:empty::before {
  content: attr(data-empty-text);
  color: #556;
  font-size: 0.8rem;
  align-self: center;
  margin: auto;
}
.opt-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 3px 6px 3px 3px;
  cursor: pointer;
  font-size: 0.75rem;
  color: #ddd;
  user-select: none;
}
.opt-chip:hover { background: rgba(231, 76, 60, 0.15); }
.opt-chip img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 3px;
}

/* === Bench: lives inside the board column, directly under the board, with
   a single dashed line as separator. Sits inside the same outer frame as
   traits / board / find-boards so it reads as part of the unified layout. === */
.bench-row {
  /* Sits inside .board-column directly under the board; dashed top line is
     the only separator. Hex size matches the board (no --hex-w override). */
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: calc(var(--hex-w) * 0.04);
  padding: 8px 0 0 0;
  margin-top: 4px;
  border-top: 1px dashed #3a4a6a;
  min-height: 0;
  justify-content: center;
  flex-wrap: nowrap;
}
.bench-row .hex-cell { position: relative; }
.bench-row.drag-over { border-top-color: #c9a84c; }
/* Find Boards panel — same trick as `.traits-column` on the left side:
   `align-self: stretch` makes the column match the board+bench row height,
   and `flex-basis: 0` on the inner growers means they don't contribute
   their full content height to grid sizing (otherwise N search-results
   would push the row taller than the bench). Min-height:0 cascade lets
   #search-results overflow into its scrollbar instead of the panel growing. */
.frame-find {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.frame-find .side-header { flex: 0 0 auto; }
.frame-find .search-box {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.frame-find .search-header { flex: 0 0 auto; }
.frame-find #search-results {
  flex: 1 1 0;
  min-height: 0;
}

/* === Responsive === */
/* Tablet — keep three columns but loosen fixed widths in the side rails. */
@media (max-width: 1024px) {
  .board-frame,
  .below-frame {
    grid-template-columns: 150px minmax(0, 1fr) 170px;
  }
  .below-left { width: 150px; }
  .below-right { width: 170px; }
  .pool-units { min-width: 0; }
  .pool-items { min-width: 0; max-width: none; }
}

/* Phone — fully vertical stack. Every section gets its own row at full
   width; the board hex grid is the only horizontally-laid element. */
@media (max-width: 768px) {
  :root {
    /* 7 hexes × 36 + 6 × 4px gap = 276px, fits a 360px iPhone SE viewport
       with margin to spare. The bench (9 hexes) wraps at this size. */
    --hex-w: clamp(34px, 10vw, 60px);
  }

  body { font-size: 14px; }
  .main { padding: 6px; gap: 8px; align-items: stretch; }
  .site-header { margin-bottom: 2px; padding-bottom: 6px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-name { font-size: 1.1rem; }
  .brand-tagline { font-size: 0.62rem; }
  .about-btn { padding: 5px 9px; font-size: 0.74rem; }
  .about-modal { padding: 18px 16px; }

  .board-row { gap: 8px; }

  /* Board frame: collapse to a vertical stack of cards. */
  .board-frame,
  .below-frame {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 8px;
    padding: 8px;
    align-items: stretch;
  }

  /* Traits and Item Pool stack vertically — each gets full width so labels
     and item chips have room to breathe. */
  .traits-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .traits-box,
  .item-pool-box {
    width: 100%;
    max-height: 160px;
  }

  .board-column { width: 100%; }
  .frame-find {
    align-self: stretch;
    width: 100%;
    /* On mobile the frame is stacked vertically and has no parent height
       to flex-grow into, so the desktop's `flex: 1 1 0; min-height: 0` on
       search-box and #search-results would collapse them to 0 px. Override
       to natural height with a bounded scroll on results. */
    height: auto;
  }
  .frame-find .search-box { flex: 0 0 auto; }
  .frame-find #search-results { flex: 0 0 auto; max-height: 320px; }

  /* Each below-frame row is full-width and centers its content. */
  .below-left,
  .below-center,
  .below-right {
    width: 100% !important;
    justify-self: stretch;
    display: flex;
    justify-content: center;
  }
  .board-controls-top {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .board-controls-top .btn-copy,
  .board-controls-top .btn-clear { flex: 1 1 0; }
  .board-controls-center { width: 100%; }
  .board-controls-buttons {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }
  .board-controls-buttons .btn-calculate { flex: 1 1 0; }
  .level-input { flex: 1 1 100%; justify-content: center; }
  .paste-box {
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }
  .paste-box .paste-input { flex: 1 1 0; min-width: 140px; }

  /* Bench wraps so 9 hexes never get clipped on narrow screens. */
  .bench-row {
    gap: 4px;
    padding: 6px;
    min-height: 0;
    flex-wrap: wrap;
  }

  /* Pools (Units / Items) stack and go full-width. */
  .pools-row {
    flex-direction: column;
    gap: 10px;
  }
  .pool-units,
  .pool-items {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  /* Recipe matrix is intrinsically wide — keep horizontal scroll. */
  .recipe-matrix { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Bigger tap targets. font-size 16px on inputs prevents iOS auto-zoom. */
  .btn-copy,
  .btn-clear,
  .btn-load,
  .btn-calculate,
  .tab {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 0.9rem;
  }
  .level-input input,
  .paste-input,
  .search-input,
  .search-inputs input {
    min-height: 38px;
    font-size: 16px;
  }
}

/* Tiny phone — drop hex floor and tighten spacing further. */
@media (max-width: 400px) {
  :root { --hex-w: clamp(30px, 8.5vw, 50px); }
  .main { padding: 4px; }
  .board-frame,
  .below-frame { padding: 6px; }
}