/* =========================================
   Features Page Styles
   ========================================= */

/* Page wrapper */
.page-features {
  margin-bottom: 80px;
}

/* -----------------------------------------
   Hero banner
   ----------------------------------------- */
#featuresHero {
  position: relative;
  width: 100%;
  max-width: 900px;
  min-width: 500px;
  margin: 20px auto 0 auto;
}

#featuresHero .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;
}

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

/* Plates under hero with chains */
#featuresHero .plate {
  position: absolute;
  bottom: -16px;           /* match other horizontal plates */
  width: 92px;             /* horizontal plate size */
  height: 28px;
  background: #393e48;
  border: 1px solid #151515;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

#featuresHero .plate.left  { left: 8%;  transform: translateX(-50%); }
#featuresHero .plate.right { left: 92%; transform: translateX(-50%); }

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

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

#featuresHero .plate .bolt::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 18px;
  width: 13px;
  height: 170px;
  background-image: url("../../assets/images/chain.png");
  background-repeat: repeat-y;
  background-size: 13px auto;
  pointer-events: none;
  z-index: -1; /* keep hero chains under content */
}

/* -----------------------------------------
   Intro bar and blurb
   ----------------------------------------- */
#featuresIntro {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

#featuresIntro .introBar {
  position: relative;
  width: 75%;
  margin: -4px auto 8px auto;
  height: 34px;
  background: #252525;
  border: 1px solid #1d2630;
  border-radius: 20px;
  color: #a9c5ff;
  font-size: 32px;
  font-family: 'bronic', sans-serif;
  letter-spacing: 2px;
  display: grid;
  place-items: center;
  z-index: 0; /* keep intro chains behind tabs */
}

#featuresIntro .introBar .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);
}

#featuresIntro .introBar .plate.left  { left: 10%; transform: translateX(-50%); }
#featuresIntro .introBar .plate.right { left: 90%; transform: translateX(-50%); }

#featuresIntro .introBar .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%;
}

#featuresIntro .introBar .plate .bolt.one { left: 10px; }
#featuresIntro .introBar .plate .bolt.two { right: 10px; }

#featuresIntro .introBar .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;
  z-index: -1; /* push intro chains behind */
  pointer-events: none;
}

#featuresIntro .introBar .plate.left  .bolt.one::after { height: 213px; }
#featuresIntro .introBar .plate.left  .bolt.two::after { height: 146px; }
#featuresIntro .introBar .plate.right .bolt.one::after { height: 146px; }
#featuresIntro .introBar .plate.right .bolt.two::after { height: 192px; }

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

/* -----------------------------------------
   Connector bar between Intro and Tabs
   ----------------------------------------- */
#featuresConnector {
  width: 60%;
  margin: 0 auto;
  position: relative;
  height: 90px; /* room for bar and tabs */
  z-index: 4; /* ensure tabs/bar sit above intro chains */
}

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

#featuresConnector .introTabs {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  width: 95%;
  margin: 0 auto;
  grid-auto-rows: min-content;
  gap: 20px; /* slight gap from bar */
  z-index: 2; /* links above the connector bar */
}

/* -----------------------------------------
   Top-level tabs
   ----------------------------------------- */
.introTabs {
  width: 60%;
  margin: 6px auto 24px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  justify-items: center;
}

.feat_link {
  display: inline-block;
  width: 230px;
  padding: 0 18px;
  background: #252525;
  color: #e6eeff;
  font-family: 'bronic', sans-serif;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
  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: 0;
  transition: margin-top 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.feat_link::before,
.feat_link::after {
  content: "";
  position: absolute;
  bottom: calc(100% - 6px);
  width: 13px;
  height: 35px;
  background-image: url("../../assets/images/chain.png");
  background-repeat: repeat-y;
  background-size: 13px auto;
  background-position: top center;
  z-index: -1;
  transition: height 0.3s ease, background-position 0.3s ease;
  pointer-events: none;
}

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

.feat_link:not(.active):hover {
  margin-top: 15px;
  background: #a9a9a9;
  color: #252525;
}

.feat_link:not(.active):hover::before,
.feat_link:not(.active):hover::after {
  height: 50px;
  background-position: center 15px;
}

.feat_link.active {
  background: #cfcfcf;
  color: #151515;
  margin-top: 20px;
}

.feat_link.active::before,
.feat_link.active::after {
  height: 53px;
  background-position: center 30px;
}

/* -----------------------------------------
   Section header with plates (match Commands/Collections)
   ----------------------------------------- */
#featuresHeader {
  position: relative;
  width: 100%;
  max-width: 1000px;
  min-width: 500px;
  margin: 32px auto 0 auto;
  padding-top: 36px;
}

#featuresHeader .featuresHeaderPill {
  width: 95%;
  max-width: 1000px;
  min-width: 500px;
  margin: 0 auto 8px auto;
  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);
}

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

#featuresHeader .plate {
  position: absolute;
  bottom: -16px; /* sit just below the header pill */
  width: 92px;
  height: 28px;
  background: #393e48;
  border: 1px solid #151515;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 1;
}

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

#featuresHeader .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%;
}

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

/* header chains hang from bolts; disable old single-chain style */
#featuresHeader .plate::after { content: none !important; }

#featuresHeader .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;
  pointer-events: none;
  z-index: -1;
}

/* Inner chains are shorter to meet the connector bar; outers hang longer */
#featuresHeader .plate.left  .bolt.one::after { height: 220px; }
#featuresHeader .plate.left  .bolt.two::after { height: 145px; }
#featuresHeader .plate.right .bolt.one::after { height: 145px; }
#featuresHeader .plate.right .bolt.two::after { height: 200px; }

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

.featuresSection {
  width: 90%;
  max-width: 940px;
  margin: 0 auto;
}

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

.featuresSection .sectionBlurb {
  width: 60%;
  margin: 30px auto 40px auto;
  text-align: center;
  color: #e6eeff;
  font-family: 'fr-bold', sans-serif;
  font-size: 18px;
  line-height: 22px;
}

/* -----------------------------------------
   Sub tabs and sub header
   ----------------------------------------- */
.featuresSubConnector {
  width: 84%;
  margin: 0 auto;
  position: relative;
  height: 115px; /* room for bar and tabs */
  z-index: 3; /* above nearby chains */
}

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

.featuresSubConnector .subTabs {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  grid-auto-rows: min-content;
  gap: 0;
  z-index: 2; /* above the bar */
}

.subTabs {
  width: 82%;
  margin: 8px auto 10px auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 0px;
  justify-items: center;
}

.feat_sub_link {
  display: inline-block;
  width: 215px;
  padding: 0 18px;
  background: #252525;
  color: #e6eeff;
  font-family: 'bronic', sans-serif;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
  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: 0;
  transition: margin-top 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.feat_sub_link::before,
.feat_sub_link::after {
  content: "";
  position: absolute;
  bottom: calc(100% - 6px);
  width: 13px;
  height: 35px;
  background-image: url("../../assets/images/chain.png");
  background-repeat: repeat-y;
  background-size: 13px auto;
  background-position: top center;
  z-index: -1;
  transition: height 0.3s ease, background-position 0.3s ease;
  pointer-events: none;
}

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

.feat_sub_link:not(.active):hover {
  margin-top: 15px;
  background: #a9a9a9;
  color: #252525;
}

.feat_sub_link:not(.active):hover::before,
.feat_sub_link:not(.active):hover::after {
  height: 50px;
  background-position: center 15px;
}

.feat_sub_link.active {
  background: #cfcfcf;
  color: #151515;
  margin-top: 20px;
}

.feat_sub_link.active::before,
.feat_sub_link.active::after {
  height: 53px;
  background-position: center 30px;
}

.subHeader {
  position: relative;
  width: 85%;
  max-width: 940px; /* match section/table width so chains frame it */
  min-width: 500px;
  margin: 40px auto 0 auto;
  height: 38px;
  background: #252525;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #e6eeff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.subHeader .subTitle {
  font-family: 'bronic', sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
}

.subHeader .plate {
  position: absolute;
  top: -8px;
  width: 22px;
  height: 54px;
  background: #393e48;
  border: 1px solid #151515;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.subHeader .plate.left  { left: -11px; }
.subHeader .plate.right { right: -11px; }

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

.subHeader .plate .bolt.one { top: 35px; }
.subHeader .plate .bolt.two { top: 11px; }

/* Only single centered chain from plate bottom */
.subHeader .plate .bolt::after { content: none !important; }
.subHeader .plate::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  width: 13px;
  height: 230px;
  background-image: url("../../assets/images/chain.png");
  background-repeat: repeat-y;
  background-size: 13px auto;
  pointer-events: none;
  z-index: -1;
}

/* -----------------------------------------
   Table (same visual as Collections/Commands)
   ----------------------------------------- */
.panel {
  position: relative;
  margin: 18px auto 34px auto;
  padding-top: 5px;
}

.panel .note {
  font-family: 'fr-bold', sans-serif;
  font-size: 17px;
  color: #a9c5ff;
  text-align: center;
  width: 70%;
  margin: 30px auto 10px auto;
}

/* Split note: left-aligned format on the left, example on the right */
.panel .note.note-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  gap: 10px;
}
.panel .note.note-split .note-left { text-align: left; }
.panel .note.note-split .note-right { text-align: right; }

.panelBody {
  background: #2b2b2b;
  border: 1px solid #151515;
  border-radius: 10px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.45);
  color: #98a9c9;
  font-family: 'fr-bold', sans-serif;
  font-size: 16px;
  text-align: center;
  padding: 5px;
  width: 65%;
  margin: 10px auto;
}

.collectionsTable {
  width: 75%; /* restore previous Features table width */
  border-collapse: separate;
  border-spacing: 0;
  margin: 10px auto; /* center tables */
  font-size: 16px;
  color: #e6eeff;
}

.collectionsTable thead th {
  background: #2f3b52; /* match Collections 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; /* match Collections body */
  padding: 8px 12px;
  border-top: 1px solid #00000055;
}

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

/* -----------------------------------------
   Power Spawning guide (enhanced)
   ----------------------------------------- */
#psGuide {
  width: 80%;
  max-width: 925px; /* fit inside chains */
  min-width: 500px;
  margin: 10px auto 20px auto;
  position: relative;
  padding-left: 20px; /* space for chain + badges to overlap */
}

.psStep {
  position: relative;
  background: #2b2b2b;
  border: 1px solid #151515;
  border-radius: 10px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.45);
  color: #e6eeff;
  font-family: 'fr-bold', sans-serif;
  text-align: center;
  padding: 16px 14px 18px 14px;
  margin: 14px auto;
}

.psStep::before,
.psStep::after {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  height: 3px;
  background: #3a3f49;
}
.psStep::before { top: 6px; }
.psStep::after  { bottom: 6px; }

.psTitle {
  font-family: 'bronic', sans-serif;
  font-size: 36px;
  letter-spacing: 2px;
  color: #e6eeff;
  margin: 6px 0 10px 0;
}

.psQuote {
  font-family: 'fr-bold', sans-serif;
  color: #a9c5ff;
  background: rgba(77, 127, 231, 0.12);
  border: 1px solid #4d7fe733;
  border-radius: 8px;
  padding: 10px 12px;
  display: inline-block;
  margin-top: 8px;
}

/* Number badges and chain timeline */
#psGuide::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 13px;
  background-image: url("../../assets/images/chain.png");
  background-repeat: repeat-y;
  background-size: 13px auto;
  opacity: 0.95;
}
.psNum {
  position: absolute;
  left: -34px;
  top: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #6ec08b 0, #2d6a47 100%);
  border: 2px solid #183c22;
  color: #e6eeff;
  font-family: 'bronic', sans-serif;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.45);
}
.psHead {
  font-family: 'bronic', sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  color: #e6eeff;
  margin: 2px 0 8px 0;
}
.psList { list-style: none; margin: 6px auto 2px auto; padding: 0; width: 85%; text-align: left; color: #cfe1ff; }
.psList li { position: relative; padding-left: 16px; margin: 6px 0; }
.psList li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #4d7fe7;
}

/* -----------------------------------------
   Power Spawning generator
   ----------------------------------------- */
#psGenerator {
  width: 80%;
  max-width: 925px;
  min-width: 500px;
  margin: 16px auto 28px auto;
}

.psGenTitle {
  /* Style like a table header */
  font-family: 'fr-bold', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: #a9c5ff;
  background: #2f3b52;
  padding: 10px 12px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-left: 1px solid #00000055;
  border-right: 1px solid #00000055;
  margin: 6px 0 0 0;
  text-align: left;
}

.psGenIntro {
  font-family: 'fr-bold', sans-serif;
  color: #a9c5ff;
  text-align: center;
  margin: 4px auto 10px auto;
}

.psGenCmdMono { font-family: Consolas, Monaco, 'Courier New', monospace; color: #cfe1ff; }

.psGenPanel {
  /* Style like a table body */
  border-left: 1px solid #00000055;
  border-right: 1px solid #00000055;
  border-bottom: 1px solid #00000055;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 0 0 6px 0;
}

.psGenRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-top: 1px solid #00000055;
}
.psGenRow:first-child { border-top: none; }
.psGenRow { background: #242b33; }
.psGenRow:nth-child(even) { background: #29313c; }
.psGenRow:hover { background: #313b4c; }

.psGenLabel { color: #e6eeff; font-family: 'fr-bold', sans-serif; font-size: 16px; }
.psGenCost { color: #a9c5ff; margin-left: 8px; font-size: 14px; }

.psGenControls { display: flex; align-items: center; gap: 6px; }

.psGenInput {
  width: 72px;
  text-align: center; /* center numbers in inputs */
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #1d2630;
  background: #1e1e1e;
  color: #e6eeff;
  outline: none;
  /* Hide native spinners across browsers */
  -moz-appearance: textfield;
  appearance: textfield;
}
.psGenInput:focus { border-color: #4d7fe7; box-shadow: 0 0 0 2px rgba(77,127,231,0.2); }
.psGenInput::-webkit-outer-spin-button,
.psGenInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.psGenBtn {
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid #1d2630;
  background: #393e48;
  color: #e6eeff;
  font-family: 'fr-bold', sans-serif;
  cursor: pointer;
}
.psGenBtn:hover { background: #434a57; }
.psGenBtn.psGenClear { min-width: 56px; background: #454b56; }
.psGenBtn.psGenClear:hover { background: #4d5562; }

.psGenSummary { margin: 14px auto 6px auto; }
.psGenTotal {
  font-family: 'fr-bold', sans-serif;
  color: #e6eeff;
  text-align: center;
  margin-bottom: 8px;
}

.psGenCommand {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.psGenCommandText {
  flex: 1 1 auto;
  background: #2b2b2b;
  border: 1px solid #151515;
  border-radius: 8px;
  color: #cfe1ff;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 16px;
  padding: 10px 12px;
  white-space: nowrap;
  overflow-x: auto;
}
.psGenCopy {
  flex: 0 0 auto;
  background: #4d7fe7;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font-family: 'fr-bold', sans-serif;
  font-size: 16px;
  cursor: pointer;
}
.psGenCopy:hover { background: #6c97f1; }
.psGenCopy.copied { background: #3aa76d; }

/* Command generator as table-like component */
.psGenTitle {
  font-family: 'fr-bold', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: #a9c5ff;
  background: #2f3b52;
  padding: 10px 12px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-left: 1px solid #00000055;
  border-right: 1px solid #00000055;
  margin: 6px auto 0 auto;
  text-align: left;
}

.psGenPanel {
  border-left: 1px solid #00000055;
  border-right: 1px solid #00000055;
  border-bottom: 1px solid #00000055;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 0;               /* remove bottom gap */
  overflow: hidden;         /* clip to rounded corners */
  background: #242b33;      /* fill tiny curved area */
}

/* -----------------------------------------
   Interacting: action selectors
   ----------------------------------------- */
.interactTabs {
  width: 76%;
  margin: 30px auto 10px auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}
.interact_link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;                 /* fill grid cell so 4 fit per row */
  min-height: 20px;
  padding: 6px 12px;
  background: linear-gradient(180deg, rgba(37,37,37,0.94) 0%, rgba(52,58,68,0.92) 100%);
  border: 1px solid #1d2630;
  border-radius: 25px;
  color: #a9c5ff;
  text-decoration: none;
  font-family: 'fr-bold', sans-serif;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.2s ease, color 0.2s ease, transform 0.06s ease;
  cursor: pointer;
}
.interact_link:hover {
  background: linear-gradient(180deg, rgba(45,51,62,0.98) 0%, rgba(60,67,80,0.96) 100%);
  color: #e6eeff;
}
.interact_link:active { transform: translateY(1px); }
.interact_link:focus { outline: 2px solid #4d7fe7; outline-offset: 2px; }
.interact_link.active {
  background: linear-gradient(180deg, rgba(45,51,62,0.98) 0%, rgba(60,67,80,0.96) 100%);
}