:root {
  --bg:       #080808;
  --surface:  #101010;
  --surface2: #181818;
  --border:   #1e1e1e;
  --border2:  #2a2a2a;
  --text:     #e2e2e2;
  --text2:    #666666;
  --text3:    #2e2e2e;
}

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

/* Re-assert hidden — ID selectors outrank the UA stylesheet's [hidden] rule */
[hidden] { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

/* ── Upload Screen (homepage) ────────────────────────────────────────────── */

#upload-screen {
  height: 100vh;
  overflow-y: auto;
}

#home {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 48px 72px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* Compact paste area — decks are pasted, not composed here, so it stays small
   and fixed; the placeholder is the only explanation needed. */
#paste-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 460px;
}

#deck-input {
  width: 100%;
  height: 76px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  color: var(--text);
  font-family: 'SF Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  padding: 10px 12px;
  resize: none;
  outline: none;
  transition: border-color 0.15s;
}

#deck-input:focus { border-color: #3a3a3a; }
#deck-input::placeholder { color: #3a3a3a; }

#load-btn {
  background: #fff;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 10px 26px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.1px;
  transition: background 0.12s;
}

#load-btn:hover { background: #d8d8d8; }

/* ── Archidekt browse ─────────────────────────────────────────────────────── */

#archidekt-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

#archidekt-user {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.8rem;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.15s;
}
#archidekt-user:focus { border-color: #3a3a3a; }
#archidekt-user::placeholder { color: #3a3a3a; }

#archidekt-search {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
#archidekt-search:hover { border-color: #3a3a3a; background: #202020; }

#archidekt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#archidekt-tags:empty { display: none; }

.archidekt-tag {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--border2);
  border-radius: 20px;
  color: var(--text2);
  cursor: pointer;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 600;
  transition: color 0.12s, border-color 0.12s;
}
.archidekt-tag:hover { color: var(--text); border-color: #3a3a3a; }
.archidekt-tag-x { color: #444; font-size: 0.9rem; line-height: 1; }
.archidekt-tag-x:hover { color: #d95f5f; }

/* Deck picker modal */
#archidekt-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

#archidekt-box {
  background: #121212;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  width: min(1000px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

#archidekt-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #232323;
}
#archidekt-box-header h3 { margin: 0; font-size: 0.98rem; font-weight: 700; color: var(--text); }
#archidekt-box-close {
  background: none; border: none; color: #777;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
#archidekt-box-close:hover { color: #fff; }

#archidekt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  padding: 18px 20px;
  overflow-y: auto;
}

.archidekt-deck {
  border: 1px solid #262626;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #171717;
  transition: border-color 0.12s, transform 0.12s;
}
.archidekt-deck:hover { border-color: #444; transform: translateY(-2px); }
.archidekt-deck.selected { border-color: #7878dc; background: rgba(120,120,220,0.08); }
.archidekt-deck.already-pinned { opacity: 0.55; }

.archidekt-deck-art {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1d1d1d;
}
.archidekt-deck-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.archidekt-check {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.45);
}
.archidekt-deck.selected .archidekt-check {
  background: #7878dc;
  border-color: #9a9aee;
}
.archidekt-deck.selected .archidekt-check::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.archidekt-deck-info { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; }
.archidekt-deck-name {
  font-size: 0.82rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.archidekt-deck-meta { font-size: 0.7rem; color: var(--text2); }

#archidekt-box-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid #232323;
}
.archidekt-hint { font-size: 0.76rem; color: var(--text2); }

#archidekt-add-btn {
  background: #fff;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
#archidekt-add-btn:disabled { background: #262626; color: #5a5a5a; cursor: default; }
#archidekt-add-btn:not(:disabled):hover { background: #d8d8d8; }

/* Source badge on a pinned deck tile */
.deck-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cfcfcf;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* First-run: nothing saved AND no friends yet → center the paste panel like a
   landing page. Once either section has content, the page goes full-width. */
#home:has(#saved-spaces-inline:empty):has(#friends-inline:empty) {
  min-height: calc(100vh - 60px);
  justify-content: center;
  max-width: 640px;
}
#home:has(#saved-spaces-inline:empty):has(#friends-inline:empty) #paste-panel { width: 100%; max-width: none; }
#home:has(#saved-spaces-inline:empty):has(#friends-inline:empty) #deck-input { height: 150px; }

/* ── Table Screen ────────────────────────────────────────────────────────── */

#table-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#toolbar {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 14px;
  height: 40px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Card counter — centered in the toolbar regardless of what's on the left */
#card-count {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12.5px;
  font-weight: 600;
  color: #8a8a8a;
  letter-spacing: 0.2px;
  pointer-events: none;
  white-space: nowrap;
}

#toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

#card-search {
  position: fixed;
  top: 48px;
  left: 14px;
  z-index: 350;
}

/* Board search — top centre, under the toolbar */
#board-search {
  position: fixed;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 355;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(12, 12, 12, 0.92);
  border: 1px solid var(--border2);
  border-radius: 9px;
  padding: 4px 6px 4px 12px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
}

#board-search-input {
  width: 230px;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.8rem;
  padding: 5px 0;
}
#board-search-input::placeholder { color: #4a4a4a; }

#board-search-count {
  font-size: 0.72rem;
  color: var(--text2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#board-search-count:empty { display: none; }

#board-search-clear {
  background: none;
  border: none;
  color: #777;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 0 4px;
}
#board-search-clear:hover { color: #fff; }

/* Give the card panel room when it's open */
#table-screen.panel-open #board-search { transform: translateX(calc(-50% - 122px)); }

#card-search-input {
  font-size: 0.8rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 5px 10px;
  width: 160px;
  outline: none;
  transition: border-color 0.12s, width 0.15s;
  box-shadow: 0 3px 12px rgba(0,0,0,0.55);
}

#card-search-input:focus {
  border-color: #555;
  width: 200px;
}

#card-search-input::placeholder { color: var(--text2); }

#card-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: #161616;
  border: 1px solid #2e2e2e;
  border-radius: 7px;
  overflow: hidden;
  z-index: 10000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

.search-result-item {
  padding: 7px 12px;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s;
}

.search-result-item:hover,
.search-result-item.focused { background: #252525; }

#new-deck-btn {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, color 0.12s;
}

#new-deck-btn:hover { border-color: #444; color: var(--text); }

#deck-name {
  font-size: 0.8rem;
  color: #888;
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 3px 7px;
  width: 180px;
  outline: none;
  transition: border-color 0.12s, color 0.12s;
}

#deck-name:hover { border-color: var(--border2); color: var(--text); }
#deck-name:focus { border-color: #444; color: var(--text); }

#zoom-controls {
  position: fixed;
  top: 48px;
  right: 14px;
  z-index: 350;
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 4px 6px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.55);
}

.zoom-btn {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text2);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s, color 0.12s;
}

.zoom-btn:hover { border-color: #444; color: var(--text); }

#zoom-fit {
  width: auto;
  padding: 0 7px;
  font-size: 0.72rem;
  letter-spacing: 0.2px;
}

#zoom-label {
  font-size: 0.72rem;
  color: var(--text2);
  min-width: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

#save-btn, #export-btn {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, color 0.12s;
}

#save-btn:hover, #export-btn:hover { border-color: #444; color: var(--text); }

#analyse-split {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 350;
  display: flex;
  box-shadow: 0 4px 16px rgba(0,0,0,0.65);
  border-radius: 8px;
}

#analyse-deck-btn,
#analyse-arrow-btn {
  background: rgba(8, 8, 18, 0.82);
  border: 1px solid #3a3a5c;
  color: #8888cc;
  padding: 7px 20px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.2px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
#analyse-deck-btn  { border-radius: 8px 0 0 8px; border-right: none; }
#analyse-arrow-btn { border-radius: 0 8px 8px 0; padding: 7px 10px; }
#analyse-arrow-btn:hover {
  border-color: #5a5a8c;
  color: #b8b8ee;
  background: rgba(14, 14, 30, 0.9);
}

/* Mode picker popover above the split button */
.analyse-mode-menu {
  position: fixed;
  z-index: 400;
  background: #161616;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85);
}
.analyse-mode-menu button {
  background: none;
  border: none;
  color: #bbb;
  text-align: left;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.analyse-mode-menu button:hover  { background: #232323; color: #fff; }
.analyse-mode-menu button.active { color: #8888cc; }

/* ── Land analysis panel ─────────────────────────────────────────────────── */

#lands-panel {
  position: fixed;
  top: 48px;
  right: 14px;
  width: 330px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  z-index: 360;
  background: rgba(18, 18, 18, 0.96);
  border: 1px solid #2e2e2e;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

#lands-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid #262626;
  font-size: 0.9rem;
  font-weight: 700;
  color: #ddd;
  position: sticky;
  top: 0;
  background: rgba(18, 18, 18, 0.96);
  border-radius: 12px 12px 0 0;
}
#lands-panel-close {
  background: none;
  border: none;
  color: #888;
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
#lands-panel-close:hover { color: #fff; }

#lands-panel-body { padding: 12px 14px 16px; }

.lands-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #777;
  margin: 14px 0 8px;
}
.lands-section-title:first-child { margin-top: 0; }

.lands-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #ccc;
  padding: 3px 0;
}
.lands-stat-row .stat-value { color: #fff; font-weight: 600; }

/* Per-color row: dot, counts, dual bar (sources vs pips) */
.mana-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: center;
  margin: 7px 0;
}
.mana-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
}
.mana-dot.mana-W { background: #f2ecd0; }
.mana-dot.mana-U { background: #3a7bbf; }
.mana-dot.mana-B { background: #5a4a6a; }
.mana-dot.mana-R { background: #c94a2e; }
.mana-dot.mana-G { background: #3f7f4a; }
.mana-dot.mana-C { background: #9a9a9a; }

.mana-row-info  { font-size: 0.72rem; color: #aaa; display: flex; justify-content: space-between; }
.mana-row-info .warn { color: #e0a03a; font-weight: 700; }
.mana-bars      { margin-top: 3px; }
.mana-bar {
  height: 4px;
  border-radius: 2px;
  margin: 2px 0;
  background: #2a2a2a;
  overflow: hidden;
}
.mana-bar > div { height: 100%; border-radius: 2px; }
.mana-bar.sources > div { background: #6a9a6a; }
.mana-bar.pips    > div { background: #7878dc; }

.lands-rec {
  display: flex;
  gap: 8px;
  font-size: 0.78rem;
  color: #ccc;
  line-height: 1.45;
  padding: 6px 0;
  border-bottom: 1px solid #222;
}
.lands-rec:last-child { border-bottom: none; }
.lands-rec .rec-icon { flex: none; }
.lands-rec.good { color: #8aba8a; }

/* ── Compare panel ────────────────────────────────────────────────────────── */

.compare-verdict {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
  background: rgba(120, 120, 220, 0.08);
  border: 1px solid rgba(120, 120, 220, 0.3);
  border-radius: 8px;
  padding: 10px 12px;
}
.compare-verdict strong { color: #aaaaee; font-weight: 700; }

.compare-note {
  font-size: 0.76rem;
  color: var(--text2);
  line-height: 1.5;
  margin-top: 8px;
}

.compare-row {
  padding: 9px 0;
  border-bottom: 1px solid #1e1e1e;
}
.compare-row:last-child { border-bottom: none; }

.compare-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.compare-theme { font-size: 0.82rem; font-weight: 600; color: #ccc; }
.compare-row.is-yours .compare-theme { color: #aaaaee; }
.compare-pct { font-size: 0.68rem; color: var(--text2); white-space: nowrap; }

.compare-bar {
  height: 4px;
  background: #222;
  border-radius: 2px;
  overflow: hidden;
  margin: 6px 0 5px;
}
.compare-bar > div { height: 100%; background: #55557a; border-radius: 2px; }
.compare-row.is-yours .compare-bar > div { background: #7878dc; }

.compare-examples {
  font-size: 0.7rem;
  color: var(--text2);
  line-height: 1.45;
}

/* Card thumbnails inside the compare panel — 3 to a row at panel width */
.compare-thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 8px;
  margin: 8px 0 4px;
}

/* Compound selector: .combo-card-thumb sets width:80px later in this file,
   so a single .compare-thumb class would lose to it. */
.combo-card-thumb.compare-thumb {
  width: 100%;
}
/* Same reason: .combo-card-thumb img hard-codes 80×112 further down. */
.combo-card-thumb.compare-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 5px;
  display: block;
  background: #1a1a1a;
}
.compare-thumb .combo-thumb-name {
  font-size: 0.62rem;
  line-height: 1.25;
}

/* Play-rate badge on the art */
.compare-thumb-share {
  position: absolute;
  bottom: 22px;
  left: 3px;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cfcfcf;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 0.58rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.compare-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #ccc;
  padding: 4px 0;
}
.compare-card-row > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-card-pct {
  font-size: 0.7rem;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}
.compare-add {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid #3a3a5c;
  color: #8888cc;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.compare-add:hover:not(:disabled) { background: #23233a; color: #fff; }
.compare-add:disabled { cursor: default; color: #6a9a6a; border-color: #2a2a2a; }

.lands-note {
  margin-top: 12px;
  font-size: 0.68rem;
  color: #666;
  line-height: 1.5;
}

#analyse-deck-btn:hover {
  border-color: #5555aa;
  color: #aaaaee;
  background: rgba(20, 20, 50, 0.9);
}

/* ── Deck analysis confirmation modal ────────────────────────────────────── */

#analyse-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

#analyse-confirm-box {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 28px 32px 24px;
  max-width: 380px;
  width: 90vw;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#analyse-confirm-box h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

#analyse-confirm-box p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text2);
  line-height: 1.55;
}

#analyse-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

#analyse-confirm-actions button {
  padding: 6px 18px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid var(--border2);
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

#analyse-confirm-cancel {
  background: none;
  color: var(--text2);
}

#analyse-confirm-cancel:hover { border-color: #444; color: var(--text); }

/* Checkbox option row in the analyse dialog */
.analyse-confirm-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.45;
}
.analyse-confirm-option input {
  margin-top: 2px;
  accent-color: #7878dc;
  cursor: pointer;
  flex-shrink: 0;
}
.analyse-confirm-option em {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  color: var(--text2);
  margin-top: 3px;
  line-height: 1.45;
}

/* Warning about the layout being replaced */
.analyse-confirm-warn {
  background: rgba(217, 160, 60, 0.08);
  border: 1px solid rgba(217, 160, 60, 0.28);
  border-radius: 7px;
  padding: 9px 11px;
  color: #d0a860 !important;
}

/* Disabled during the 3s cooldown, then arms */
#analyse-confirm-go {
  background: #161616;
  border-color: #2a2a2a !important;
  color: #5a5a5a;
  cursor: default;
  min-width: 116px;
}

#analyse-confirm-go.armed {
  background: rgba(100, 100, 200, 0.15);
  border-color: #3a3a5c !important;
  color: #aaaaee;
  cursor: pointer;
}

#analyse-confirm-go.armed:hover {
  background: rgba(100, 100, 200, 0.25);
  border-color: #5555aa !important;
  color: #ccccff;
}

/* ── Delete confirmation (3s cooldown) ───────────────────────────────────── */

#delete-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#delete-confirm-box {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 28px 32px 24px;
  max-width: 400px;
  width: 90vw;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#delete-confirm-box h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

#delete-confirm-box p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text2);
  line-height: 1.55;
}
#delete-confirm-box p strong { color: var(--text); font-weight: 600; }

#delete-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

#delete-confirm-actions button {
  padding: 7px 18px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border2);
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

#delete-confirm-cancel {
  background: none;
  color: var(--text2);
}
#delete-confirm-cancel:hover { border-color: #444; color: var(--text); }

/* Disabled while counting down, then arms into a real destructive button */
#delete-confirm-go {
  background: #161616;
  border-color: #2a2a2a;
  color: #5a5a5a;
  cursor: default;
  min-width: 122px;
}

#delete-confirm-go.armed {
  background: rgba(217, 95, 95, 0.14);
  border-color: #6a2a2a;
  color: #ff8a8a;
  cursor: pointer;
}
#delete-confirm-go.armed:hover {
  background: rgba(217, 95, 95, 0.25);
  border-color: #a03a3a;
  color: #ffb0b0;
}

/* ── Saved spaces (upload screen) ────────────────────────────────────────── */

/* ── Auth Modal ───────────────────────────────────────────────────────────── */

#auth-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

#auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

#auth-modal-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 28px 32px;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 1;
}

#auth-modal-header h2 {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

#auth-modal-header p {
  font-size: 0.8rem;
  color: var(--text2);
}

#modal-auth-error {
  font-size: 0.78rem;
  color: #d95f5f;
  min-height: 1em;
}

#modal-auth-close {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 7px 0;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}

#modal-auth-close:hover { border-color: #3a3a3a; color: var(--text); }

/* ── User menu (fixed top-right, every screen) ───────────────────────────── */

#user-menu {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 800;
}

/* On the table screen, sit inside the 40px toolbar instead of floating over it. */
body:has(#table-screen:not([hidden])) #user-menu {
  top: 6px;
  right: 14px;
}

body:has(#table-screen:not([hidden])) #user-menu-btn {
  box-shadow: none;
}

#user-menu-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.55);
  transition: border-color 0.12s, background 0.12s;
}

#user-menu-btn:hover { border-color: #3a3a3a; background: var(--surface2); }

/* Signed-in state gets the app's accent treatment (matches Analyse Deck /
   confirm buttons) so it reads as "you're in" at a glance; icon stays white. */
#user-menu-btn.signed-in {
  background: rgba(100, 100, 200, 0.2);
  border-color: #3a3a5c;
}

#user-menu-btn.signed-in:hover {
  background: rgba(100, 100, 200, 0.32);
  border-color: #5555aa;
}

#user-menu-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: #161616;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}

#user-menu-hint {
  font-size: 0.76rem;
  color: var(--text2);
  margin-bottom: 12px;
  line-height: 1.4;
}

#user-menu-signed-in {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-fields {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 9px;
}

.auth-fields input {
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.82rem;
  padding: 8px 11px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}

.auth-fields input:focus { border-color: #3a3a3a; }
.auth-fields input::placeholder { color: var(--text3); }

.auth-btns {
  display: flex;
  gap: 8px;
}

#auth-signin-btn {
  background: #fff;
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 8px 0;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  flex: 1;
  transition: background 0.12s;
}

#auth-signin-btn:hover { background: #d8d8d8; }

#auth-signup-btn {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 8px 0;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  flex: 1;
  transition: border-color 0.12s, color 0.12s;
}

#auth-signup-btn:hover { border-color: #3a3a3a; color: var(--text); }

#auth-error {
  font-size: 0.78rem;
  color: #d95f5f;
  margin-top: 8px;
  min-height: 1em;
}

#auth-user-email {
  font-size: 0.8rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Profile identity — username + #tag with a copy button */
#profile-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#profile-name-tag {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#profile-tag-copy {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 5px;
  color: var(--text2);
  cursor: pointer;
  padding: 3px 8px;
  font-size: 0.8rem;
  flex-shrink: 0;
}
#profile-tag-copy:hover { color: #fff; border-color: #3a3a3a; }

#profile-username-row {
  display: flex;
  gap: 6px;
}
#profile-username-row input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8rem;
  padding: 6px 9px;
  outline: none;
}
#profile-username-row input:focus { border-color: #3a3a3a; }
#profile-username-row button {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text2);
  cursor: pointer;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
}
#profile-username-row button:hover { color: #fff; border-color: #3a3a3a; }

#auth-signout-btn {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 7px 0;
  font-size: 0.8rem;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.12s, color 0.12s;
}

#auth-signout-btn:hover { border-color: #3a3a3a; color: var(--text); }

/* ── Saved decks — big stacked-card gallery ──────────────────────────────── */

#saved-spaces-inline {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#saved-spaces-inline:empty { display: none; }

.saved-spaces-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.saved-spaces-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

#saved-spaces-search {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.8rem;
  padding: 8px 12px;
  width: 240px;
  outline: none;
  transition: border-color 0.15s;
}

#saved-spaces-search:focus { border-color: #3a3a3a; }
#saved-spaces-search::placeholder { color: #3a3a3a; }

#saved-spaces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 30px 26px;
  padding: 10px 6px 6px;
}

/* Each deck is a card-proportioned tile with two "under-cards" fanned behind
   it — reads as a physical stacked deck. Hover lifts the top card and fans
   the pile a little wider. */
.deck-tile {
  position: relative;
  cursor: pointer;
}
.deck-tile[hidden] { display: none; }

.deck-stack {
  position: relative;
  aspect-ratio: 63 / 88;
}

.deck-stack::before,
.deck-stack::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: #131313;
  border: 1px solid #262626;
  transition: transform 0.18s ease;
}
.deck-stack::before { transform: rotate(-3deg) translate(-5px, 4px); }
.deck-stack::after  { transform: rotate(2.2deg) translate(6px, 2px); }

.deck-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 11px;
  overflow: hidden;
  background: var(--surface2);
  border: 1px solid #2e2e2e;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.deck-tile:hover .deck-cover {
  transform: translateY(-7px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.75);
  border-color: #4a4a4a;
}
.deck-tile:hover .deck-stack::before { transform: rotate(-5deg) translate(-9px, 6px); }
.deck-tile:hover .deck-stack::after  { transform: rotate(3.8deg) translate(10px, 3px); }

.deck-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* No commander art → dark card back with a big initial */
.deck-cover-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  font-weight: 800;
  color: #2c2c2c;
  background:
    radial-gradient(ellipse at 50% 38%, #1d1d1d 0%, #121212 70%);
}

.deck-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 46px 13px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.92));
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.deck-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f0f0f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.deck-meta {
  font-size: 0.72rem;
  color: #9a9a9a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-del {
  position: absolute;
  top: -9px;
  right: -9px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid #3a2020;
  color: #d95f5f;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.deck-tile:hover .deck-del { opacity: 1; }
.deck-del:hover { background: #2a1616; color: #ff7a7a; }

/* ── Friends section ──────────────────────────────────────────────────────── */

#friends-inline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}
#friends-inline:empty { display: none; }

#friends-you-chip {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text2);
  cursor: pointer;
  padding: 7px 13px;
  font-size: 0.78rem;
  font-weight: 600;
  transition: color 0.12s, border-color 0.12s;
}
#friends-you-chip:hover { color: #fff; border-color: #3a3a3a; }

#friend-add-row {
  display: flex;
  gap: 8px;
}
#friend-add-input {
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.8rem;
  padding: 8px 12px;
  outline: none;
}
#friend-add-input:focus { border-color: #3a3a3a; }
#friend-add-input::placeholder { color: #3a3a3a; }
#friend-add-btn {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  padding: 8px 18px;
  font-size: 0.8rem;
  font-weight: 600;
}
#friend-add-btn:hover { border-color: #3a3a3a; background: #202020; }

#friend-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.friend-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.friend-chip:hover { border-color: #3a3a3a; background: var(--surface2); }

.friend-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #23233a;
  color: #9a9ade;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.friend-name { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.friend-tag  { font-size: 0.75rem; color: var(--text2); }

.friend-remove {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
}
.friend-chip:hover .friend-remove { opacity: 1; }
.friend-remove:hover { color: #d95f5f; }

#friend-decks-area {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#friend-decks-area:empty { display: none; }

#friend-decks-back {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text2);
  cursor: pointer;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
}
#friend-decks-back:hover { color: #fff; border-color: #3a3a3a; }

.friend-decks-empty {
  color: var(--text2);
  font-size: 0.85rem;
  padding: 8px 2px;
}

/* Inspect badge — toolbar marker while viewing a friend's deck */
#inspect-badge {
  background: rgba(120, 120, 220, 0.12);
  border: 1px solid rgba(120, 120, 220, 0.45);
  color: #9a9ade;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Shift floating panels left when card panel is open */
#table-screen.panel-open #zoom-controls {
  right: calc(244px + 14px);
}

#table-screen.panel-open #not-found-banner {
  padding-right: calc(244px + 14px);
}

/* ── Not-found Banner ────────────────────────────────────────────────────── */

#not-found-banner {
  background: #0e0e0e;
  border-bottom: 1px solid #1e1a10;
  padding: 7px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.75rem;
  color: #5a5040;
  flex-shrink: 0;
  line-height: 1.5;
}

#not-found-text { flex: 1; }

#not-found-close {
  background: none;
  border: none;
  color: #5a5040;
  font-size: 1rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Viewport & Table ────────────────────────────────────────────────────── */

#viewport {
  flex: 1;
  overflow: auto;
  cursor: grab;
  background-color: #060606;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

#viewport.panning { cursor: grabbing; }

#table-scaler {
  position: relative;
}

#table {
  position: absolute;
  top: 0;
  left: 0;
  width: 3000px;
  height: 2000px;
  transform-origin: 0 0;
}

/* ── Label overlay (fixed over viewport, never scales with zoom) ─────────── */

#label-layer {
  position: fixed;
  pointer-events: none;
  overflow: hidden;
  z-index: 50;
}

/* ── Text Labels ─────────────────────────────────────────────────────────── */

.table-label {
  position: absolute;
  /* left/top point to the label's table-space center; this offsets visually to match */
  transform: translate(-50%, -50%);
  color: #ffffff;
  background: rgba(8, 8, 8, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  padding: 8px 18px;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  pointer-events: all;
  letter-spacing: -0.5px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.table-label.dragging { cursor: grabbing; }

.table-label.selected {
  border-color: rgba(160, 160, 255, 0.8);
  box-shadow: 0 0 0 2px rgba(120, 120, 220, 0.55);
}

/* ── Label Input Popup ───────────────────────────────────────────────────── */

.label-popup {
  position: fixed;
  z-index: 2000;
  background: #161616;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  gap: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85);
}

.label-popup input {
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 5px;
  color: #e2e2e2;
  font-size: 0.8rem;
  padding: 5px 9px;
  outline: none;
  width: 200px;
  font-family: inherit;
}

.label-popup input:focus { border-color: #444; }

.label-popup button {
  background: #fff;
  color: #000;
  border: none;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.label-popup button:hover { background: #d8d8d8; }

/* ── Frame create/edit popup ─────────────────────────────────────────────── */

.frame-popup {
  flex-direction: column;
  gap: 8px;
  width: 300px;
  padding: 10px;
}
.frame-popup input { width: 100%; box-sizing: border-box; }

.frame-style-row { display: flex; gap: 8px; align-items: center; }
.frame-popup .frame-style-btn {
  width: 38px;
  height: 34px;
  padding: 0;
  font-size: 16px;
  background: #101010;
  color: #555;
  border: 1.5px solid #2a2a2a;
  border-radius: 7px;
}
.frame-popup .frame-style-btn.style-cornerstone:hover,
.frame-popup .frame-style-btn.style-cornerstone.active {
  color: rgba(240, 150, 210, 0.95);
  border-color: rgba(232, 120, 200, 0.6);
  background: rgba(232, 120, 200, 0.08);
}
.frame-popup .frame-style-btn.style-engine:hover,
.frame-popup .frame-style-btn.style-engine.active {
  color: rgba(150, 190, 255, 0.95);
  border-color: rgba(120, 170, 255, 0.55);
  background: rgba(120, 170, 255, 0.08);
}

.frame-popup .frame-delete-btn {
  margin-left: auto;
  background: #1a1a1a;
  color: #d95f5f;
  border: 1px solid #3a2020;
}
.frame-popup .frame-delete-btn:hover { background: #241414; }

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 170px;
  height: 237px;
  border-radius: 9px;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  background: #111;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.5),
    0 4px 14px rgba(0,0,0,0.7);
}

.card:hover {
  box-shadow:
    0 2px 6px rgba(0,0,0,0.6),
    0 8px 24px rgba(0,0,0,0.85);
}

.card.dragging {
  cursor: grabbing;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.7),
    0 16px 40px rgba(0,0,0,1);
  transition: none;
}

.card.selected {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 3px;
}

/* ── Board search + hover focus dimming ──────────────────────────────────── */

#table.searching .card.search-miss,
#table.hover-focus .card:not(.focus-self):not(.focus-linked) {
  opacity: 0.16;
  filter: saturate(0.3);
}

#table.searching .card.search-hit {
  outline: 3px solid rgba(120, 220, 150, 0.9);
  outline-offset: 3px;
  z-index: 5;
}

#table.hover-focus .card.focus-linked {
  outline: 3px solid rgba(160, 160, 255, 0.9);
  outline-offset: 3px;
}
#table.hover-focus .card.focus-self {
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
}

/* Frames and notes recede too, so the lit cards carry the picture */
#table.searching .table-frame,
#table.hover-focus .table-frame { opacity: 0.35; }

.card { transition: opacity 0.12s, filter 0.12s; }

/* Ghost card — translucent stand-in for a card that lives elsewhere on the
   board; placed by single-card analyse so the original never gets moved. */
.card.ghost-card {
  opacity: 0.5;
  filter: saturate(0.55);
  outline: 2px dashed rgba(150, 190, 255, 0.65);
  outline-offset: 2px;
}
.card.ghost-card:hover { opacity: 0.8; }
.card.ghost-card.selected {
  opacity: 0.85;
  outline: 2px solid rgba(255, 255, 255, 0.75);
}

/* Commander ring — box-shadow so it stacks with outline (selected/missing) */
.card.commander {
  box-shadow:
    0 0 0 3px rgba(220, 175, 30, 0.9),
    0 1px 3px rgba(0,0,0,0.5),
    0 4px 14px rgba(0,0,0,0.7);
}

.card.commander:hover {
  box-shadow:
    0 0 0 3px rgba(220, 175, 30, 0.9),
    0 2px 6px rgba(0,0,0,0.6),
    0 8px 24px rgba(0,0,0,0.85);
}

.card.commander.dragging {
  box-shadow:
    0 0 0 3px rgba(220, 175, 30, 0.9),
    0 4px 12px rgba(0,0,0,0.7),
    0 16px 40px rgba(0,0,0,1);
}

/* Hub badge — a card in 2+ combo/synergy groups at once. It can only physically
   sit in one frame, so this is what keeps the others it belongs to from just
   disappearing. Click opens the card panel to see every combo it's part of. */
.hub-badge {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #7878dc;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 0 2px #0a0a0a;
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.12s;
}

.hub-badge:hover { background: #9090ee; }

/* Marquee selection rectangle */
#marquee {
  position: fixed;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  pointer-events: none;
  z-index: 200;
}

/* ── Progress Overlay ────────────────────────────────────────────────────── */

#progress-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}

/* ── Board import dialog ─────────────────────────────────────────────────── */

.board-import-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
}

.board-import-box {
  background: #161616;
  border: 1px solid #2e2e2e;
  border-radius: 12px;
  padding: 28px 32px 24px;
  min-width: 280px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.9);
}

.board-import-box h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e2e2;
}

.board-import-box p {
  margin: 0 0 18px;
  font-size: 0.78rem;
  color: #888;
}

.board-import-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 7px;
  margin-bottom: 6px;
  background: #0e0e0e;
  border: 1px solid #222;
  cursor: pointer;
  user-select: none;
}

.board-import-option:hover { border-color: #3a3a3a; }

.board-import-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #c8a96e;
  cursor: pointer;
  flex-shrink: 0;
}

.board-import-option-label {
  flex: 1;
}

.board-import-option-name {
  font-size: 0.85rem;
  color: #d4d4d4;
  font-weight: 500;
}

.board-import-option-count {
  font-size: 0.73rem;
  color: #666;
  margin-top: 1px;
}

.board-import-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}

.board-import-actions button {
  border: none;
  border-radius: 6px;
  padding: 7px 18px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.board-import-actions .btn-cancel {
  background: transparent;
  color: #888;
  border: 1px solid #2e2e2e;
}

.board-import-actions .btn-cancel:hover { border-color: #555; color: #bbb; }

.board-import-actions .btn-import {
  background: #fff;
  color: #000;
}

.board-import-actions .btn-import:hover { background: #d8d8d8; }

.progress-box {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 32px 48px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text2);
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border2);
  border-top-color: #888;
  border-radius: 50%;
  margin: 0 auto 14px;
  animation: spin 0.65s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Zoom Modal ──────────────────────────────────────────────────────────── */

#modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
}

#modal-img {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 80px rgba(0, 0, 0, 1);
}

/* ── Panel tab (right-edge toggle) ──────────────────────────────────────── */

/* ── Help ─────────────────────────────────────────────────────────────────── */

#help-btn {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 400;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  transition: background 0.12s;
}
#help-btn:hover { background: #d8d8d8; }
#table-screen.panel-open #help-btn { right: 260px; }

#help-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 3200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

#help-box {
  position: relative;
  background: #121212;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  width: min(760px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 26px 30px 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.85);
}

#help-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none; border: none;
  color: #777; font-size: 24px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
#help-close:hover { color: #fff; }

#help-stage {
  background: #0b0b0b;
  border: 1px solid #232323;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
#help-stage svg { display: block; width: 100%; height: auto; }

#help-title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}
#help-body {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text2);
  min-height: 44px;
}

#help-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.help-arrow {
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  color: var(--text);
  width: 40px;
  height: 34px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.help-arrow:hover:not(:disabled) { border-color: #555; color: #fff; }
.help-arrow:disabled { opacity: 0.3; cursor: default; }

#help-dots { display: flex; gap: 7px; }
.help-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2e2e2e;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
}
.help-dot:hover { background: #4a4a4a; }
.help-dot.active { background: #fff; transform: scale(1.25); }

/* ── Deck fingerprint panel (left) ───────────────────────────────────────── */

#fingerprint-panel {
  position: fixed;
  left: 0;
  top: 40px;
  bottom: 0;
  width: 330px;
  z-index: 300;
  background: rgba(16, 16, 16, 0.97);
  border-right: 1px solid var(--border2);
  display: flex;
  flex-direction: column;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

#fingerprint-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 11px;
  border-bottom: 1px solid #232323;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
#fingerprint-close {
  background: none; border: none; color: #888;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
}
#fingerprint-close:hover { color: #fff; }

#fingerprint-body {
  padding: 14px 16px 26px;
  overflow-y: auto;
  flex: 1;
}

#fingerprint-tab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 299;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-left: none;
  border-radius: 0 6px 6px 0;
  color: var(--text2);
  width: 20px;
  height: 56px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: left 0.18s, color 0.12s;
}
#fingerprint-tab:hover { color: var(--text); }
#table-screen.fp-open #fingerprint-tab { left: 330px; }

.fp-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #7a7a7a;
  margin: 20px 0 6px;
}
.fp-section-title:first-child { margin-top: 0; }

.fp-note {
  font-size: 0.72rem;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 8px;
}
.fp-foot { margin-top: 20px; color: #5a5a5a; }

.fp-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }

.fp-chip {
  display: flex;
  align-items: baseline;
  gap: 5px;
  background: #191919;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  color: #bbb;
  padding: 5px 11px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.fp-chip strong { color: #fff; font-size: 0.82rem; font-weight: 700; }
.fp-chip:hover:not(:disabled) { border-color: #4a4a4a; background: #212121; color: #fff; }
.fp-chip:disabled { opacity: 0.4; cursor: default; }
.fp-chip.active {
  border-color: rgba(120, 220, 150, 0.8);
  background: rgba(120, 220, 150, 0.12);
  color: #fff;
}
.fp-chip.warn strong { color: #d9a83a; }

.fp-engine {
  border: 1px solid #232323;
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #141414;
}
.fp-engine-name { font-size: 0.82rem; font-weight: 700; color: var(--text); }

.fp-verdict {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text2);
  margin-top: 4px;
}
.fp-verdict.good { color: #7dc98a; }
.fp-verdict.warn { color: #d9a83a; }
.fp-verdict.bad  { color: #e07a7a; }

.fp-linchpin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: #ccc;
  padding: 6px 9px;
  border: 1px solid #232323;
  border-radius: 7px;
  margin-bottom: 5px;
  cursor: pointer;
}
.fp-linchpin:hover { border-color: #4a4a4a; background: #1a1a1a; color: #fff; }
.fp-linchpin-count { font-size: 0.68rem; color: #d9a83a; white-space: nowrap; }

.fp-curve { margin: 6px 0; }
.fp-curve-row {
  display: grid;
  grid-template-columns: 74px 1fr 30px;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  color: #bbb;
  padding: 4px 0;
  cursor: pointer;
}
.fp-curve-row:hover { color: #fff; }
.fp-curve-bar { height: 5px; background: #222; border-radius: 3px; overflow: hidden; }
.fp-curve-bar > div { height: 100%; background: #6a6a9a; border-radius: 3px; }
.fp-curve-val { text-align: right; color: var(--text2); font-variant-numeric: tabular-nums; }

#panel-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 299;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-right: none;
  border-radius: 6px 0 0 6px;
  color: var(--text2);
  width: 20px;
  height: 56px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  box-shadow: -3px 0 10px rgba(0,0,0,0.45);
  transition: color 0.12s, border-color 0.12s, right 0.18s;
}

#panel-tab:hover { color: var(--text); border-color: #444; }

#table-screen.panel-open #panel-tab {
  right: 244px;
}

/* ── Card Panel ──────────────────────────────────────────────────────────── */

#card-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 244px;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: row;
  z-index: 300;
}

#panel-icons {
  width: 60px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 4px;
  flex-shrink: 0;
}

.panel-icon-btn {
  width: 50px;
  height: auto;
  padding: 6px 4px;
  border-radius: 6px;
  background: none;
  border: 1px solid transparent;
  color: var(--text2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.panel-icon-btn span {
  font-size: 0.6rem;
  letter-spacing: 0.2px;
  color: inherit;
}

.panel-icon-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

.panel-icon-btn.active {
  background: var(--surface2);
  border-color: var(--border2);
  color: var(--text);
}

#panel-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

#panel-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 6px;
}

#panel-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-close {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.12s;
}

#panel-close:hover { color: var(--text); }

#panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel-card-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.panel-card-img {
  width: 100%;
  border-radius: 7px;
  display: block;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}

.panel-card-img:active { cursor: grabbing; }

/* ── Search panel elements ───────────────────────────────────────────────── */

.panel-search-field {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 5px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 6px 9px;
  outline: none;
  transition: border-color 0.12s;
}

.panel-search-field:focus { border-color: #555; }
.panel-search-field::placeholder { color: var(--text2); }

.panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.panel-tag {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.1s, color 0.1s;
}

.panel-tag:hover { border-color: #444; color: var(--text); }

.panel-search-results {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel-card-name {
  font-size: 0.7rem;
  color: var(--text2);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.panel-status {
  font-size: 0.75rem;
  color: var(--text2);
  text-align: center;
  padding: 24px 0;
}

/* ── Newly-added cards (blue border, fades after 10s) ────────────────────── */

.card.newly-added {
  outline: 2px solid rgba(80, 140, 255, 0.8);
  outline-offset: 3px;
}

/* ── Missing combo piece (red border, persistent) ────────────────────────── */

.card.missing-card {
  outline: 2px solid rgba(210, 60, 60, 0.85);
  outline-offset: 3px;
}

/* ── Toast notification ──────────────────────────────────────────────────── */

#synergy-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(8, 8, 18, 0.82);
  border: 1px solid rgba(100, 100, 200, 0.35);
  color: rgba(140, 140, 220, 0.85);
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, color 0.15s;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

#synergy-toggle:hover {
  border-color: rgba(120, 120, 220, 0.65);
  color: rgba(180, 180, 255, 0.95);
}

#synergy-toggle input {
  accent-color: #7878dc;
  cursor: pointer;
  margin: 0;
}

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 7px;
  padding: 9px 20px;
  font-size: 0.78rem;
  color: var(--text2);
  z-index: 600;
  pointer-events: none;
  transition: opacity 0.5s;
  white-space: nowrap;
}

.toast.toast-hide { opacity: 0; }

/* ── Frames (table-space, scale with zoom) ───────────────────────────────── */

.table-frame {
  position: absolute;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  cursor: grab;
  user-select: none;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}

.table-frame.selected {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.055);
}

.table-frame.dragging { cursor: grabbing; }

/* Combo classification (deck analysis) — Spellbook's own produces data tells
   us whether a combo is an outright win, an infinite engine, or plain value. */
.table-frame.combo-win {
  border-color: rgba(255, 195, 90, 0.55);
  background: rgba(255, 195, 90, 0.05);
}
.table-frame.combo-win .frame-title { color: rgba(255, 205, 120, 0.92); }

.table-frame.combo-infinite {
  border-color: rgba(120, 170, 255, 0.5);
  background: rgba(120, 170, 255, 0.045);
}
.table-frame.combo-infinite .frame-title { color: rgba(150, 190, 255, 0.88); }

/* Partial combo (deck analysis) — leftover pieces of a combo whose other
   cards live in another frame; the connector line shows what completes it. */
.table-frame.partial-frame { border-style: dashed; }
.table-frame.partial-frame .frame-title { font-style: italic; }

/* Cornerstone card — a card pulled out of its combo/synergy frame because it
   belongs to 2+ groups at once; matches the pink used for its connector lines. */
.table-frame.cornerstone-frame {
  border-color: rgba(232, 120, 200, 0.55);
  background: rgba(232, 120, 200, 0.05);
}
.table-frame.cornerstone-frame .frame-title { color: rgba(240, 150, 210, 0.92); }


.frame-title {
  position: absolute;
  top: 14px;
  left: 18px;
  right: 18px;
  font-size: 24px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  white-space: normal;
  line-height: 1.2;
  word-break: break-word;
  pointer-events: none;
  letter-spacing: -0.4px;
}

.frame-body-text {
  display: none;
  position: absolute;
  top: 54px;
  left: 14px;
  right: 14px;
  bottom: 14px;
  font-size: 24px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
  overflow-y: auto;
  pointer-events: none;
  user-select: none;
}
.frame-body-text[contenteditable="true"] {
  pointer-events: auto;
  user-select: text;
  cursor: text;
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
}

/* ── Frame connection ports ──────────────────────────────────────────────── */

.frame-port {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(110, 110, 220, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.75);
  cursor: crosshair;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, box-shadow 0.12s;
  pointer-events: auto;
  z-index: 20;
  box-sizing: border-box;
}
.table-frame:hover .frame-port { opacity: 1; }
.frame-port:hover,
.frame-port.port-snap {
  background: rgba(160, 160, 255, 1);
  box-shadow: 0 0 14px rgba(160, 160, 255, 0.8);
  opacity: 1;
}
.frame-port[data-side="top"]    { top: -14px;    left: calc(50% - 14px); }
.frame-port[data-side="bottom"] { bottom: -14px; left: calc(50% - 14px); }
.frame-port[data-side="left"]   { left: -14px;   top: calc(50% - 14px);  }
.frame-port[data-side="right"]  { right: -14px;  top: calc(50% - 14px);  }

/* ── Text notes (text-mode frames) ───────────────────────────────────────── */
/* No frame chrome — a note is just text sitting on the table. Bounds only
   become visible (dashed) on hover/selection so it can still be grabbed,
   resized and deleted. Placed after the .table-frame rules so it wins. */

.table-frame.mode-text {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.16);
  background: transparent;
}
.table-frame.mode-text:hover,
.table-frame.mode-text.selected {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.02);
}
.table-frame.mode-text .frame-port { display: none; }
.table-frame.mode-text .frame-body-text {
  top: 16px;
  left: 16px;
  right: 16px;
  bottom: 16px;
}

/* ×-delete — the only button a text note has; appears while editing (dblclick) */
.frame-delete-x {
  display: none;
  position: absolute;
  top: -14px;
  right: -14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #d95f5f;
  border: 1px solid #3a2020;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 25;
  padding: 0;
}
.table-frame.mode-text.editing .frame-delete-x { display: flex; }
.frame-delete-x:hover { background: #2a1616; color: #ff7a7a; }

/* ── Connection lines (SVG) ─────────────────────────────────────────────── */

.conn-line {
  fill: none;
  stroke: rgba(160, 160, 255, 0.55);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Synergy links share the connection look — a single 1:1 link is visually
   identical to a hand-drawn one; heavier links override width/stroke inline. */
.synergy-line {
  fill: none;
  stroke: rgba(160, 160, 255, 0.55);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Hover focus: the hovered card's links brighten, everything else recedes */
.synergy-line.line-focus {
  stroke: rgba(190, 190, 255, 0.95);
  stroke-width: 3.5;
}
.synergy-line.line-dim { stroke: rgba(160, 160, 255, 0.1); }

/* Invisible grab area so synergy lines can be right-clicked away.
   pointer-events must be re-enabled here: the SVG layer itself is none. */
.synergy-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 18;
  cursor: pointer;
  pointer-events: stroke;
}
.conn-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 18;
  cursor: pointer;
  pointer-events: stroke;
}
.conn-preview {
  fill: none;
  stroke: rgba(160, 160, 255, 0.45);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 5;
  pointer-events: none;
}
.conn-label-text {
  font-size: 24px;
  font-weight: 600;
  fill: rgba(220, 220, 255, 0.9);
  pointer-events: none;
  letter-spacing: 0.2px;
}
.conn-label-bg {
  fill: rgba(18, 18, 36, 0.8);
  rx: 5;
  ry: 5;
}

/* ── Connection label inline editor ─────────────────────────────────────── */

.conn-label-popup {
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 6px;
}

.conn-label-input {
  background: rgba(22, 22, 40, 0.95);
  color: rgba(220, 220, 255, 0.95);
  border: 1px solid rgba(120, 120, 220, 0.7);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  outline: none;
  min-width: 100px;
  text-align: center;
}

/* The × sits inline next to the input here, not floating on a corner */
.conn-label-popup .conn-delete-x {
  display: flex;
  position: static;
  width: 26px;
  height: 26px;
  flex: none;
}

/* ── Frame floating button ───────────────────────────────────────────────── */

#frame-btn {
  position: fixed;
  z-index: 350;
  transform: translateX(-50%);
  pointer-events: all;
}

#frame-btn-inner {
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.65);
  transition: border-color 0.12s, color 0.12s;
  white-space: nowrap;
}

#frame-btn-inner:hover { border-color: #444; color: var(--text); }

/* ── Card context menu ───────────────────────────────────────────────────── */

.card-menu {
  position: fixed;
  z-index: 400;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 7px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.85);
  min-width: 130px;
}

.card-menu-item {
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.78rem;
  font-family: inherit;
  padding: 7px 12px;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.1s;
}

.card-menu-item:hover { background: var(--surface2); }

.card-menu-item.destructive { color: #d95f5f; }
.card-menu-item.destructive:hover { background: rgba(200, 60, 60, 0.12); }

/* ── Panel "View Combo" button ───────────────────────────────────────────── */

.panel-combo-btn {
  width: 100%;
  background: none;
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}

.panel-combo-btn:hover { border-color: #444; color: var(--text); }

/* ── Combo detail popup ──────────────────────────────────────────────────── */

#combo-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

#combo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
}

#combo-box {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  width: min(560px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
}

#combo-box-header {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#combo-box-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#combo-box-close {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.12s;
}

#combo-box-close:hover { color: var(--text); }

#combo-list {
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.combo-entry {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.combo-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.combo-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* "2/3 in deck · 1 missing" — how close this combo is */
.combo-own-status {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text2);
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid #2a2a2a;
}
.combo-own-status.complete { color: #7dc98a; border-color: rgba(125, 201, 138, 0.35); background: rgba(125, 201, 138, 0.08); }
.combo-own-status.close    { color: #d9a83a; border-color: rgba(217, 168, 58, 0.35);  background: rgba(217, 168, 58, 0.08); }

.combo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.combo-tag {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.72rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
}

.combo-zone {
  font-size: 0.6rem;
  color: var(--text2);
  background: #0a0a0a;
  border-radius: 3px;
  padding: 1px 4px;
  white-space: nowrap;
  text-align: center;
}

/* Card image thumbnails in the Requires section */
.combo-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.combo-card-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 80px;
}

/* Owned vs missing at a glance */
.combo-card-thumb.owned img   { outline: 2px solid rgba(125, 201, 138, 0.85); outline-offset: 1px; }
.combo-card-thumb.missing img { opacity: 0.45; filter: saturate(0.4); }

/* ✓ when owned, clickable + when missing */
.combo-own-mark {
  position: absolute;
  top: -6px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid;
  z-index: 2;
}
.combo-card-thumb.owned .combo-own-mark {
  background: rgba(20, 40, 26, 0.95);
  border-color: rgba(125, 201, 138, 0.7);
  color: #7dc98a;
}
.combo-card-thumb.missing .combo-own-mark {
  background: rgba(40, 30, 12, 0.95);
  border-color: rgba(217, 168, 58, 0.7);
  color: #e0b552;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
}
.combo-card-thumb.missing .combo-own-mark:hover {
  background: rgba(217, 168, 58, 0.35);
  color: #fff;
  transform: scale(1.15);
}

.combo-card-thumb img {
  width: 80px;
  height: 112px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
}

.combo-card-thumb.source-card img {
  outline: 2px solid rgba(80, 140, 255, 0.7);
  outline-offset: 2px;
}

.combo-thumb-name {
  font-size: 0.62rem;
  color: var(--text2);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.combo-steps {
  font-size: 0.74rem;
  color: var(--text2);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}