* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #f5f5f5; background: #0d0f12; }
.container { width: min(1200px, 92vw); margin: 0 auto; }

:root { --gold: #c8a85e; }

/* Header */
.site-header { position: sticky; top: 0; backdrop-filter: blur(8px); background: rgba(13,15,18,0.75); border-bottom: 1px solid rgba(255,255,255,0.06); z-index: 50; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 6px 0; }
.header-left { display: flex; align-items: center; gap: 12px; }
.logo{width:2.5cm !important;height:2.5cm !important;object-fit:contain;border-radius:8px}
h1 { margin: 0; color: #fff; font-weight: 800; }
.home-btn.white { color: #fff !important; text-decoration: none; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); }
.home-btn.white:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.6); }

.header-bottom { display:flex; align-items:center; padding: 6px 0 10px 0; }
.search-wrap { display:flex; align-items:center; gap: 8px; margin-left: 0; }
#search { width: min(480px, 70vw); padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: #0a0c0f; color: #eaeaea; outline: none; }
.match-count { font-size: 12px; opacity: 0.8; }

.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 10px 0 14px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.filter-btn { padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: #0a0c0f; color: #eaeaea; cursor: pointer; }
.filter-btn[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px inset var(--gold); }
.filter-btn:hover { border-color: var(--gold); }

/* Grid & cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 22px 0 60px; }
.card { border: 1px solid rgba(255,255,255,0.09); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.card:hover { border-color: var(--gold); box-shadow: 0 0 0 1px inset rgba(200,168,94,0.25), 0 0 18px rgba(200,168,94,0.12); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--gold) !important; text-shadow: 0 0 10px rgba(200,168,94,0.12); }
.info { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold) !important; background: transparent !important; color: var(--gold) !important; cursor: pointer; display: grid; place-items: center; font-weight: 800; }
.info:hover { box-shadow: 0 0 0 1px inset var(--gold); }
.card-desc { margin: 0; color: #c9cdd6; font-size: 14px; line-height: 1.5; }
.pill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pill-list li { font-size: 12px; padding: 6px 10px; border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; color: #eaeaea; }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.link { font-size: 13px; text-decoration: none; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); color: #eaeaea; }
.link.website { border-color: var(--gold) !important; color: var(--gold) !important; }
.link.website:hover { background: rgba(200,168,94,0.12) !important; }

/* Footer */
.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 36px 0; border-top: 1px solid rgba(255,255,255,0.06); color: #a7acb6; }
.site-footer a { color: #c8a85e; text-decoration: none; }

/* Modal */
dialog#infoModal { border: none; padding: 0; background: transparent; }
.modal { width: min(760px, 92vw); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; background: #0d0f12; box-shadow: 0 12px 40px rgba(0,0,0,0.45); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, rgba(200,168,94,0.06), rgba(13,15,18,0)); }
.modal-header h3 { margin: 0; color: #f5f5f5; }
#modalBody { padding: 16px; color: #d5d9e3; }
.close { background: #0a0c0f; color: #fff; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 4px 10px; cursor: pointer; }

/* Scroll-to-top */
#scrollTopBtn {
  position: fixed; right: 18px; bottom: 18px;
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: #0a0c0f; color: #f5f5f5;
  cursor: pointer; display: none;
  align-items: center; justify-content: center;
  font-size: 18px; z-index: 1000;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
#scrollTopBtn.show { display: inline-flex; }
#scrollTopBtn:hover { border-color: var(--gold); box-shadow: 0 0 0 1px inset var(--gold), 0 6px 18px rgba(200,168,94,0.18); }


/* -- FORCE layout and theming -- */
.site-header .header-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:14px 0 6px 0!important;}
.site-header .header-left{display:flex!important;align-items:center!important;gap:12px!important;}
.site-header .home-btn.white{color:#fff!important;border:1px solid rgba(255,255,255,0.35)!important;text-decoration:none!important;padding:10px 14px!important;border-radius:999px!important}
.site-header .home-btn.white:hover{background:rgba(255,255,255,0.06)!important;border-color:rgba(255,255,255,0.6)!important}
img.logo{width:2.5cm !important;height:2.5cm !important;object-fit:contain;border-radius:8px}

/* Gold overrides with max specificity */
article.card h3.card-title{color:var(--gold)!important}
article.card button.info{border-color:var(--gold)!important;color:var(--gold)!important;background:transparent!important;font-weight:800!important}
article.card button.info:hover{box-shadow:0 0 0 1px inset var(--gold)!important}
article.card a.link.website{border-color:var(--gold)!important;color:var(--gold)!important}
article.card a.link.website:hover{background:rgba(200,168,94,0.12)!important}

/* Scroll-to-top visibility */
#scrollTopBtn{position:fixed;right:18px;bottom:18px;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,0.2);background:#0a0c0f;color:#f5f5f5;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:18px;z-index:2000;box-shadow:0 6px 16px rgba(0,0,0,.35)}
#scrollTopBtn.show{display:inline-flex}
#scrollTopBtn:hover{border-color:var(--gold)!important;box-shadow:0 0 0 1px inset var(--gold),0 6px 18px rgba(200,168,94,.18)}


/* ===== Mobile polish ===== */
@media (max-width: 720px){
  .header-row{ flex-wrap: wrap; gap: 10px; padding: 10px 0 4px 0; }
  .header-left{ gap: 8px; }
  .logo{width:2.5cm !important;height:2.5cm !important;object-fit:contain;border-radius:8px}
  .header-left h1{ font-size: 22px; line-height: 1.15; }
  .home-btn.white{ padding: 8px 12px; font-size: 14px; border-radius: 16px; }
  .header-bottom{ padding: 6px 0 8px 0; }
  #search{ width: 100%; }
  .filters{ display: flex; gap: 10px; padding: 10px 0 12px 0; overflow-x: auto; border-top: 1px solid rgba(255,255,255,0.06); }
  .filters::-webkit-scrollbar{ display: none; }
  .filter-btn{ flex: 0 0 auto; }
  .grid{ grid-template-columns: 1fr; gap: 12px; padding-top: 10px; }
  .card{ border-radius: 14px; }
  .card-title{ font-size: 17px; }
  .info{ width: 26px; height: 26px; }
  #scrollTopBtn{ right: 12px; bottom: 12px; width: 40px; height: 40px; }
}

/* Very small phones */
@media (max-width: 380px){
  .logo{width:2.5cm !important;height:2.5cm !important;object-fit:contain;border-radius:8px}
  .header-left h1{ font-size: 20px; }
  .home-btn.white{ font-size: 13px; padding: 7px 10px; }
}


/* Chain filter row */
.filters-chains{ padding-top: 0; margin-top: -6px; }
.filters-chains .filter-btn.chain[aria-pressed="true"]{ border-color: var(--gold); box-shadow: 0 0 0 1px inset var(--gold); }

@media (max-width: 720px){
  .filters-chains{ display: flex; gap: 10px; overflow-x: auto; }
  .filters-chains::-webkit-scrollbar{ display: none; }
  .filters-chains .filter-btn{ flex: 0 0 auto; }
}


/* Equal-size filter buttons */
.filters, .filters-chains{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filters .filter-btn,
.filters-chains .filter-btn{
  flex: 0 0 150px;         /* same width */
  text-align: center;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  height: 42px;
}

@media (max-width: 720px){
  .filters, .filters-chains{ overflow-x: auto; flex-wrap: nowrap; }
  .filters .filter-btn, .filters-chains .filter-btn{ flex: 0 0 140px; }
}

/* Disclaimer */
.disclaimer{ padding: 8px 0 4px 0; color: #aeb4be; font-size: 12px; }
.disclaimer p{ margin: 0; line-height: 1.5; }
.disclaimer strong{ color: var(--gold); }


/* Mobile fix: filter scroll full width, no cut-off */
@media (max-width: 720px){
  .filters, .filters-chains{
    display: flex;
    gap: 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
    padding-bottom: 6px;
    margin-bottom: 4px;
  }
  .filters .filter-btn, .filters-chains .filter-btn{
    flex: 0 0 auto;
    min-width: 120px;
  }
  .filters::-webkit-scrollbar, .filters-chains::-webkit-scrollbar{ display: none; }
}

/* Lower the blockchain filter row slightly */
.filters-chains{ margin-top: 8px !important; }


/* --- Mobile filter fix: prevent cutoff --- */
@media (max-width: 720px){
  .filters, .filters-chains{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding-bottom: 8px;
    margin-bottom: 6px;
  }
  .filters .filter-btn, .filters-chains .filter-btn{
    flex: 0 0 auto;
    min-width: 115px;
    max-width: 160px;
    text-align: center;
  }
  .filters::-webkit-scrollbar, .filters-chains::-webkit-scrollbar{ display: none; }
}

/* --- Adjust chain filter spacing to divider --- */
.filters-chains{
  margin-top: 4px !important;   /* smaller gap to divider */
  padding-top: 4px !important;
  border-top: 1px solid rgba(255,255,255,0.05);
}


/* === Mobile: wrap filter chips into multiple lines, no cut-off === */
@media (max-width: 720px){
  .filters, .filters-chains{
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 10px !important;
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
  }
  /* two columns layout by default */
  .filters .filter-btn, .filters-chains .filter-btn{
    flex: 1 1 calc(50% - 10px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 42px;
    justify-content: center;
  }
  /* extra small phones → single column */
  @media (max-width: 380px){
    .filters .filter-btn, .filters-chains .filter-btn{ flex: 1 1 100% !important; }
  }

  /* Push first category chip ("Alle") slightly to the right */
  .filters{ padding-left: 8px !important; }
  .filters-chains{ padding-left: 8px !important; }
}


/* --- Header scroll behavior: no sticky, scrolls away --- */
.site-header{
  position: relative !important;
  top: auto !important;
  backdrop-filter: none !important;
  background: #0d0f12 !important;
}


/* Footer disclaimer */
.footer-disclaimer{
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
  line-height: 1.5;
  color: #aeb4be;
}
.footer-disclaimer strong{ color: var(--gold); }


/* ==== Footer + Disclaimer layout cleanup ==== */
.site-footer.container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 16px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.site-footer .footer-nav a{ margin-left: 18px; }

/* Separate disclaimer bar below footer, same container width */
.footer-disclaimer{
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 10px;
  margin-top: 8px;
  margin-bottom: 28px;
  color: #aeb4be;
  font-size: 12px;
  line-height: 1.5;
  word-break: normal;
  overflow-wrap: anywhere;
}
.footer-disclaimer p{ margin: 0; }
.footer-disclaimer strong{ color: var(--gold); }

/* Mobile stacking */
@media (max-width: 720px){
  .site-footer.container{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .site-footer .footer-nav a{ margin-left: 0; margin-right: 16px; display: inline-block; }
  .footer-disclaimer{ font-size: 12px; margin-bottom: 20px; }
}


/* Adjust disclaimer position when above footer */
.footer-disclaimer{
  margin-top: 20px;
  margin-bottom: 12px;
}

.header-actions{display:flex;justify-content:flex-end;gap:1.5mm}