.page-collections {
  margin-bottom: 80px;
}

#collectionsHero {
  position: relative;
  width: 100%;
  max-width: 900px;
  min-width: 500px;
  margin: 20px auto 0 auto;
}

#collectionsHero .banner {
  background: #1f3c88;
  color: #fff;
  font-family: 'bronic', sans-serif;
  font-size: 80px;
  letter-spacing: 3px;
  text-align: center;
  padding: 12px 40px 22px 40px;
  border-radius: 55px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  text-shadow: -1px 0 1px #000, 0 1px 1px #000, 1px 0 1px #000, 0 -1px 1px #000;
  position: relative;
}

#collectionsHero .banner::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  width: 70%;
  height: 5px;
  background: #4d7fe7;
  border-radius: 3px;
  opacity: 0.9;
}

#whatBlock {
  position: relative;
  width: 100%;
  max-width: 900px;
  min-width: 500px;
  margin: 12px auto 0 auto;
}

#whatBlock .whatPill {
  width: 80%;
  margin: -14px auto 0 auto;
  height: 38px;
  border-radius: 22px;
  border: 1px solid #151515;
  background: #252525;
  display: grid;
  place-items: center;
  color: #4d7fe7;
  font-family: 'bronic', sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
  position: relative; /* anchor plates */
}

#whatBlock .whatIntro {
  width: 50%;
  margin: 20px auto 30px auto;
  color: #e6eeff;
  text-align: center;
  font-family: 'fr-bold', sans-serif;
  font-size: 18px;
  line-height: 22px;
}

#whatBlock .whatPill .plate {
  position: absolute;
  bottom: -16px;
  width: 92px;
  height: 28px;
  background: #393e48;
  border: 1px solid #151515;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

#whatBlock .whatPill .plate.left {
  left: 10%;
  transform: translateX(-50%);
}

#whatBlock .whatPill .plate.right {
  left: 90%;
  transform: translateX(-50%);
}

#whatBlock .whatPill .plate .bolt {
  position: absolute;
  top: 11px;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 40% 40%, #222 0 4px, #0f0f0f 5px 10px);
  border-radius: 50%;
}

#whatBlock .whatPill .plate .bolt.one { left: 10px; }
#whatBlock .whatPill .plate .bolt.two { right: 10px; }

#whatBlock .whatPill .plate .bolt::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 18px;
  width: 13px;
  background-image: url("../../assets/images/chain.png");
  background-repeat: repeat-y;
  background-size: 13px auto;
}

/* Outer chains longer and uneven; inner chains connect to long bar */
#whatBlock .whatPill .plate.left  .bolt.one::after { height: 213px; }
#whatBlock .whatPill .plate.left  .bolt.two::after { height: 168px; }
#whatBlock .whatPill .plate.right .bolt.one::after { height: 168px; }
#whatBlock .whatPill .plate.right .bolt.two::after { height: 192px; }

#whatBlock .whatConnector {
  width: 60%;
  margin: 0 auto;
  position: relative;
  height: 100px;
}

#whatBlock .whatConnector .bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: #252525;
  border: 1px solid #1d2630;
  border-radius: 8px;
  z-index: 1;
}

.collectTabs {
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
  justify-items: center;
  align-items: start;
  gap: 10px 52px;
  z-index: 0;
}

.collectTabs .collect_link:nth-child(1) { grid-column: 1; grid-row: 1; }
.collectTabs .collect_link:nth-child(2) { grid-column: 2; grid-row: 1; }
.collectTabs .collect_link:nth-child(3) { grid-column: 1; grid-row: 2; }

.collect_link {
  display: inline-block;
  min-width: 200px;
  padding: 0 18px;
  background: #252525;
  color: #e6eeff;
  font-family: 'bronic', sans-serif;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 2px;
  text-align: center;
  position: relative;
  cursor: pointer;
  border-radius: 18px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.28);
  margin-top: 10px;
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 3;
}

.collect_link::before,
.collect_link::after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 13px;
  height: 20px;
  background-image: url("../../assets/images/chain.png");
  background-repeat: repeat-y;
  background-size: 13px auto;
  background-position: top center;
  transition: height 0.5s ease, background-position 0.5s ease;
  z-index: -1;
}

.collect_link::before { left: 20%; transform: translateX(-50%); }
.collect_link::after  { left: 80%; transform: translateX(-50%); }

.collect_link:hover:not(.active) {
  background: #4a4a4a;
}
.collect_link.active { 
  background: #cfcfcf; 
  color: #151515; 
  border-color: #000;
}

/* Category header with plates */
#collectionsHeader {
  position: relative;
  width: 100%;
  max-width: 1000px;
  min-width: 500px;
  margin: 42px auto 0 auto;
  padding-top: 36px; /* prevent margin-collapse; anchor plates to header top */
}

#collectionsHeader .collectionsHeaderPill {
  width: 100%;
  max-width: 1000px;
  min-width: 500px;
  margin: 0 auto 8px auto; /* top spacing now handled by parent padding */
  height: 48px;
  background: #252525;
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: #e6eeff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

#collectionsHeader .collectionsTitle {
  font-family: 'bronic', sans-serif;
  font-size: 38px;
  letter-spacing: 2px;
}

/* Bottom header plates: vertical at ends with single chains */
#collectionsHeader .plate {
  position: absolute;
  top: 33px;               /* 3px above header top */
  width: 22px;             /* slimmer plate so bolts breathe */
  height: 54px;            /* 3px taller above + below header */
  background: #393e48;
  border: 1px solid #151515;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

#collectionsHeader .plate.left  { left: -11px; }   /* revert to prior placement */
#collectionsHeader .plate.right { right: -11px; }  /* revert to prior placement */

#collectionsHeader .plate .bolt {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;              /* smaller bolt */
  height: 8px;
  background: radial-gradient(circle at 40% 40%, #222 0 3px, #0f0f0f 4px 8px);
  border-radius: 50%;
}

/* two bolts remain; space them more */
#collectionsHeader .plate .bolt.one { top: 35px; }
#collectionsHeader .plate .bolt.two { top: 11px; }  /* moved down by +3px */

/* header chains should come from under the plate, not the bolt */
#collectionsHeader .plate .bolt::after { content: none !important; }

/* single centered chain anchored to the bottom of each plate */
#collectionsHeader .plate::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;               /* start below the plate */
  width: calc(9px * 1.3);
  height: 230px;           /* hang alongside table with some gap left/right */
  background-image: url("../../assets/images/chain.png");
  background-repeat: repeat-y;
  background-size: calc(9px * 1.3) auto;
}

/* Sections */
#collectionsSections {
  width: 100%;
  max-width: 1100px;
  margin: 12px auto 80px auto;
}

.collectionsSection {
  width: 90%;
  max-width: 940px;   /* create side gutter so table sits inside chains */
  margin: 0 auto;
}

/* Quotes controls and pagination */
.quotesControls {
  width: 100%;
  margin: 0 auto 8px auto;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* align left */
  gap: 14px;
}

#quotesSearch, #objectivesSearch, #monstersSearch {
  width: 85%;            /* ~3x larger */
  max-width: 1260px;     /* triple former max */
  padding: 5px 10px;    /* larger padding */
  border: 1px solid #1d2630;
  border-radius: 10px;
  background: #1f1f1f;
  color: #e6eeff;
  outline: none;
  font-size: 18px;
}

#quotesSearch::placeholder, #objectivesSearch::placeholder, #monstersSearch::placeholder { color: #98a9c9; }

.searchWrap {
  position: relative;
  display: inline-block;
  flex: 1 1 auto;
}

.qsClear {
  position: absolute;
  right: 130px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: #985555;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.qsClear:hover { color: #e6eeff; }

.favOnlyLbl {
  color: #a9c5ff;
  font-family: 'fr-bold', sans-serif;
}

/* Sections without favorites pill: shift clear button further left */
#section-objectives .searchWrap .qsClear,
#section-monsters .searchWrap .qsClear {
  right: 153px;
}

/* Favorites-only pill button */
.favPill {
  display: inline-block;
  min-width: 170px;
  padding: 0 16px;
  height: 30px;
  line-height: 30px;
  background: #1f1f1f;
  color: #e6eeff;
  font-family: 'bronic', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;
  border: 1px solid #151515;
  border-radius: 18px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.28);
  cursor: pointer;
}

.favPill:hover { background: #4a4a4a; }
.favPill.active { background: #cfcfcf; color: #151515; }

.quotesPagination {
  width: 75%;
  margin: 8px auto 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-items: center;
  gap: 10px;
}

.quotesPagination[hidden] { display: none !important; }

.qpBtn {
  background: #393e48;
  color: #e6eeff;
  border: 1px solid #151515;
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: 'bronic', sans-serif;
}

.qpBtn:hover { background: #4a4a4a; }

.qpInfo {
  text-align: center;
  color: #a9c5ff;
  font-family: 'fr-bold', sans-serif;
}

.collectionsSection[hidden] {
  display: none !important;
}

/* Panel with small blue label */
.panel {
  position: relative;
  margin: 18px auto 34px auto;
  padding-top: 18px;
}

/* Remove side chains from panels/tables on this page */
.panel::before,
.panel::after {
  content: none !important;
  display: none !important;
}

.panelLabel {
  display: inline-block;
  background: #2f5eb6;
  color: #e6eeff;
  font-family: 'bronic', sans-serif;
  font-size: 18px;
  border: 1px solid #5080ea;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  padding: 6px 12px;
  margin-left: 20px;
}

.panelBody {
  color: #e6eeff;
  font-family: 'fr-bold', sans-serif;
  text-align: center;
  padding: 18px;
}

/* Table */
.collectionsTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 10px;
  font-size: 16px;
  color: #e6eeff;
}

.collectionsTable thead th {
  background: #2f3b52; /* cool blue‑slate header */
  color: #a9c5ff;
  text-align: left;
  padding: 10px 12px;
  font-family: 'fr-bold', sans-serif;
}

.collectionsTable thead th:first-child { border-top-left-radius: 10px; }
.collectionsTable thead th:last-child  { border-top-right-radius: 10px; }

.collectionsTable tbody td {
  background: #242b33; /* neutral blue‑gray (no brown cast) */
  padding: 8px 12px;
  border-top: 1px solid #00000055;
}

.collectionsTable tbody tr:nth-child(even) td { background: #29313c; }
.collectionsTable tbody tr:hover td         { background: #313b4c; }

.collectionsTable .empty {
  text-align: center;
  color: #98a9c9;
  font-family: 'fr-bold', sans-serif;
}


/* === Hover cascade for collections tabs ===
   - Active tab does not move on hover
   - Non-active hovered tab lowers
   - When the first (top-left) tab is hovered, also lower the bottom-left tab
     (extendable later if more rows/columns are added)
*/
.collectTabs .collect_link:hover:not(.active) {
  --drop: 15px; /* distance lowered */
}

/* JS controls cascade/drop; no CSS variable cascade here to avoid double effects */


/* --- Fixes for active + cascade --- */

/* Active tab stays locked even on hover */
.collect_link.active,
.collect_link.active:hover {
  --drop: 0 !important;
  margin-top: 10px !important; /* base margin without lowering */
  background: #cfcfcf;
  color: #151515;
  border-color: #000;
}

/* Cascade: make hovered tab and the one below drop the SAME distance */
.collectTabs .collect_link:hover:not(.active) {
  --drop: 15px;
}

/* Hover/active drop is driven by JS via --drop; keep only visual hover bg */