@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&display=swap");

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

:root {
  --ink: #02030a;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.55);
  --faint: rgba(255, 255, 255, 0.38);
  --glass: rgba(107, 114, 128, 0.05);
  --glass-strong: rgba(255, 255, 255, 0.05);
  --edge: rgba(255, 255, 255, 0.2);
  --edge-soft: rgba(255, 255, 255, 0.1);
  --pink: #ff2d92;
  --pink-2: #d81b73;
  --discord: #5865f2;
  --font: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --snap: cubic-bezier(0.22, 1, 0.36, 1);
  --swift: cubic-bezier(0.4, 0, 0.2, 1);
}

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 45, 146, 0.20), rgba(0, 0, 0, 0) 40%),
    radial-gradient(circle at 80% 70%, rgba(216, 27, 115, 0.18), rgba(0, 0, 0, 0) 40%);
  background-attachment: fixed;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); background-clip: content-box; }

.shell { max-width: 1180px; margin: 0 auto; padding: 34px 22px 70px; }

.top { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: 34px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--pink), var(--pink-2));
  display: grid; place-items: center; font-weight: 800; letter-spacing: -.03em;
}
.brand-name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.brand-sub { font-size: 12px; color: var(--faint); }

.who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.who img { width: 30px; height: 30px; border-radius: 50%; }

.hero { margin-bottom: 30px; }
.hero h1 { margin: 0 0 8px; font-size: 38px; font-weight: 800; letter-spacing: -.035em; }
.hero p { margin: 0; color: var(--muted); max-width: 640px; line-height: 1.6; }

.rows { display: flex; flex-direction: column; gap: 9px; }

.row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 13px 15px; border-radius: 11px;
  background: rgba(255,255,255,.026); border: 1px solid var(--edge-soft);
  transition: background .18s var(--swift), border-color .18s var(--swift);
}
.row:hover { background: rgba(255,255,255,.055); border-color: var(--edge); }

.row-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--edge-soft);
}
.row-icon svg { width: 19px; height: 19px; color: var(--text); }

.row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-name { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.row-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.row-price {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 7px;
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
}
.row-price s { font-size: 12px; font-weight: 500; color: var(--faint); }

.row-static { cursor: default; }
.row-static:hover { background: rgba(255,255,255,.026); border-color: var(--edge-soft); }

.row-amount { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.amount-field {
  display: flex; align-items: center; gap: 3px; padding: 7px 11px; border-radius: 9px;
  background: rgba(0,0,0,.35); border: 1px solid var(--edge-soft);
}
.amount-field:focus-within { border-color: var(--pink); }
.amount-field i { font-style: normal; font-size: 14px; color: var(--faint); }
.amount-field input {
  width: 62px; border: none; outline: none; background: none; color: var(--text);
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
}
.amount-field input::-webkit-outer-spin-button,
.amount-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn.sm { padding: 8px 14px; font-size: 13px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: 11px; font-size: 14px; font-weight: 600;
  background: var(--glass-strong); border: 1px solid var(--edge-soft); color: var(--text);
  transition: background .2s var(--swift), border-color .2s var(--swift), opacity .2s var(--swift);
}
.btn:hover { border-color: var(--edge); background: rgba(255,255,255,.09); }
.btn.primary { background: linear-gradient(135deg, var(--pink), var(--pink-2)); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.discord { background: var(--discord); border-color: transparent; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; }

.note { margin-top: 26px; font-size: 12.5px; color: var(--faint); line-height: 1.6; }

.overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  background: rgba(2,3,10,.92); backdrop-filter: blur(14px);
}
.overlay-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 22px; border-bottom: 1px solid var(--edge-soft);
}
.overlay-title { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.counter { font-size: 13px; color: var(--muted); }
.counter b { color: var(--pink); }
.overlay-head .grow { flex: 1 1 auto; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 13px 22px; border-bottom: 1px solid var(--edge-soft); }
.chip {
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; color: var(--muted);
  background: var(--glass); border: 1px solid var(--edge-soft);
}
.chip.on { color: var(--text); border-color: var(--pink); background: rgba(255,45,146,.14); }
.search {
  flex: 1 1 220px; min-width: 180px; padding: 8px 13px; border-radius: 10px; font-size: 13px;
  background: rgba(0,0,0,.35); border: 1px solid var(--edge-soft); color: var(--text); outline: none;
}
.search:focus { border-color: var(--pink); }

/* grid-auto-rows must be explicit. As a flex child that also scrolls, this
   container gets a definite height, and auto rows then collapse to nothing. */
.grid {
  flex: 1 1 auto; overflow-y: auto; padding: 18px 22px 26px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  grid-auto-rows: min-content; gap: 13px; align-content: start;
}
.item {
  border-radius: 13px; overflow: hidden; background: var(--glass);
  border: 1px solid var(--edge-soft); cursor: pointer; position: relative;
  transition: border-color .18s var(--swift), transform .18s var(--swift);
}
.item:hover { border-color: var(--edge); transform: translateY(-2px); }
.item.picked { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink) inset; }
/* A definite height, not width + aspect-ratio: these are lazy images, so until
   one loads its intrinsic size is zero and the grid row collapses to nothing. */
.item img { width: 100%; height: 122px; object-fit: contain; display: block; background: rgba(255,255,255,.03); }
.item-name { padding: 8px 9px 10px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.item.picked .item-name { color: var(--text); }
.tick {
  position: absolute; top: 7px; right: 7px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--pink); color: #fff; display: none; place-items: center; font-size: 12px; font-weight: 700;
}
.item.picked .tick { display: grid; }

.overlay-foot {
  display: flex; align-items: center; gap: 12px; justify-content: flex-end;
  padding: 14px 22px; border-top: 1px solid var(--edge-soft);
}

.state { text-align: center; padding: 90px 20px; color: var(--muted); }
.state h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--text); margin: 0 0 10px; }
.state p { margin: 0 auto 18px; max-width: 460px; line-height: 1.6; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  padding: 12px 18px; border-radius: 12px; font-size: 13.5px; z-index: 60;
  background: rgba(20,10,20,.95); border: 1px solid var(--edge-soft);
}
.toast.err { border-color: rgba(255,90,90,.5); }

@media (max-width: 620px) {
  .hero h1 { font-size: 29px; }
  .shell { padding: 22px 15px 50px; }
}