/* Featured Decks — shared styles for index & detail pages */

/* ===== Index grid ===== */
.fd-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:14px; padding: 10px 0;
}
.fd-card {
  display:grid; grid-template-rows:auto 1fr; gap:8px;
  background:linear-gradient(180deg,#0e1726,#0c1220);
  border:1px solid #2a3b55; border-radius:14px; padding:10px;
  color:inherit; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.fd-card:hover { transform:translateY(-1px); border-color:#36527a; box-shadow:0 0 0 2px #66e0ff22, 0 0 28px #66e0ff22; }
.fd-thumb { position:relative; border-radius:10px; overflow:hidden; aspect-ratio:16/9; background:#0d1422; border:1px solid #26364f; }
.fd-thumb img { width:100%; height:100%; object-fit:cover; display:block; background:#0d1422; }
.fd-thumb-missing { display:grid; place-items:center; width:100%; height:100%; color:var(--muted) }
.fd-info { display:grid; gap:6px; }
.fd-title { margin:0; font-size:18px; }
.fd-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--muted); font-size:13px; }
.fd-heroes { display:flex; gap:6px; }
.fd-heroes img { width:52px; aspect-ratio:63/88; border-radius:8px; border:1px solid #29405f; background:#0d1422; }
.empty { color:var(--muted); text-align:center; padding:18px; }

/* ===== Detail header ===== */
.fd-head {
  display:grid; grid-template-columns: 1fr 2fr; gap:16px; margin:6px 0 12px;
}
@media (max-width: 900px){ .fd-head{ grid-template-columns:1fr; } }

.fd-heroImgs { display:flex; gap:8px; flex-wrap:wrap; }
.fd-heroImgs img {
  width:90px; aspect-ratio:63/88; border-radius:12px; border:1px solid #29405f; background:#0d1422;
}

.fd-deckTitle { margin:0; font-size:28px; }
.fd-byline { display:flex; flex-wrap:wrap; gap:10px; }
.fd-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.fd-tags .tag { background:#12233a; border:1px solid #23405e; border-radius:999px; padding:4px 8px; font-size:12px; color:#cfe4ff; }

.fd-viewToggle { display:flex; gap:8px; margin-top:10px; }

/* NEW: actions under the toggle */
.fd-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

/* ===== Sections ===== */
.fd-main { display:grid; gap:18px; }
.fd-section { background:linear-gradient(180deg,#0e1726,#0c1220); border:1px solid #2a3b55; border-radius:14px; padding:12px; }
.section-title { margin:0 0 8px; font-weight:700; color:var(--accent); border-left:3px solid var(--accent); padding-left:10px; }

/* ===== Gallery lanes (vertical categories, horizontal cards) ===== */
.fd-gallery .section-title { margin-top: 10px; }
.fd-lane {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 2px 12px;
  scroll-snap-type: x proximity;
}
.fd-lane .card {
  position: relative;
  flex: 0 0 auto;
  width: 120px;
  aspect-ratio: 63/88;
  border-radius: 12px;
  overflow: hidden;
  background:#0d1422;
  border:1px solid #26364f;
  cursor:pointer;
  scroll-snap-align: start;
  transition: transform .12s ease;
}
.fd-lane .card:hover { transform: scale(1.03); }
.fd-lane .card img { width:100%; height:100%; object-fit:contain; display:block; background:#0d1422; }

/* NEW: quantity badge on gallery tiles */
.fd-qty {
  position:absolute; right:6px; bottom:6px;
  background:#12233a; color:#e6f2ff; border:1px solid #23405e;
  border-radius: 999px; padding:2px 6px; font-size:12px;
  box-shadow: 0 4px 10px #0006;
}

/* ===== List view ===== */
.fd-lists { display:grid; gap:14px; }
.fd-ul { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.fd-ul li {
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  background:#0f1a2b; border:1px solid #2a3b55; border-radius:10px; padding:6px 8px;
}
.fd-ul .right { display:flex; gap:12px; align-items:center; color:#9fb3c8; }
.fd-ul .count { background:#12233a; border:1px solid #23405e; border-radius:999px; padding:2px 6px; font-size:12px; }

/* ===== Hover preview (shared) ===== */
.fd-hoverPreview {
  position: fixed; pointer-events: none;
  width: 260px; aspect-ratio:63/88; z-index: 25; display:none;
  border-radius:12px; overflow:hidden; box-shadow: 0 10px 40px #0008;
  border:1px solid #345; background:#0c1220;
}
.fd-hoverPreview img { width:100%; height:100%; object-fit:contain; display:block; }

/* ===== Write-up ===== */
.fd-writeup { background:linear-gradient(180deg,#0e1726,#0c1220); border:1px solid #2a3b55; border-radius:14px; padding:12px; }

/* Inline card references inside write-up */
.card-ref-ui {
  border-bottom: 1px dotted #6bd1ff;
  cursor: help;
  color: #cfe9ff;
  white-space: nowrap;
}
.card-ref-ui:hover { color: #ffffff; }