/* My Skyblock > My Builds (NX-BLUEPRINT v1, Claude, 15 Oct 2026). Blueprint-blue 3D cards that lean towards the pointer, the
   picture drawn from where the Blueprint Table stood. Scoped to .bd so nothing leaks into the header or other sections. */
.cc .bd { --bd: 96, 165, 250; display: grid; gap: 40px; width: min(1100px, 100%); margin: 0 auto; }
.cc .bd svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cc .bd-grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; perspective: 1100px; }
.cc .bd-card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%; position: relative; animation: ccIn .5s var(--cc-ease, ease) both; animation-delay: calc(var(--i) * 45ms); }
.cc .bd-in { position: relative; display: grid; overflow: hidden; border-radius: 22px; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  background: linear-gradient(180deg, rgba(var(--bd), .09), rgba(255,255,255,.012) 46%), #0a0b10;
  box-shadow: inset 0 0 0 1.5px rgba(var(--bd), .18), 0 18px 40px -18px rgba(0,0,0,.8), 0 0 0 rgba(var(--bd), 0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; will-change: transform; }
.cc .bd-card:hover .bd-in { transition: transform .08s linear, box-shadow .35s;
  box-shadow: inset 0 0 0 1.5px rgba(var(--bd), .5), 0 26px 50px -18px rgba(0,0,0,.85), 0 0 34px -6px rgba(var(--bd), .35); }
.cc .bd-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.13), transparent 45%); }
.cc .bd-card:hover .bd-shine { opacity: 1; }

.cc .bd-pic { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0c12; transform: translateZ(18px); }
.cc .bd-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.cc .bd-card:hover .bd-pic img { transform: scale(1.04); }
.cc .bd-pic::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(0deg, #0a0b10, transparent); pointer-events: none; }
.cc .bd-wait { background: #10264a; }
.cc .bd-grid { position: absolute; inset: 0; opacity: .55;
  background-image: linear-gradient(rgba(170,205,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(170,205,255,.22) 1px, transparent 1px),
    linear-gradient(rgba(170,205,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(170,205,255,.1) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px; }
.cc .bd-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #dbeafe; font: 700 12px var(--cc-mono, monospace); letter-spacing: .1em; text-transform: uppercase; }
.cc .bd-spin { width: 16px; height: 16px; border: 2px solid rgba(219,234,254,.25); border-top-color: #dbeafe; border-radius: 50%; animation: bdSpin .8s linear infinite; }
@keyframes bdSpin { to { transform: rotate(360deg); } }

.cc .bd-body { position: relative; display: grid; gap: 6px; padding: 4px 18px 18px; transform: translateZ(26px); }
.cc .bd-body h3 { margin: 0; overflow: hidden; color: #fff; font: 800 18px/1.25 Outfit, Inter, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.cc .bd-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; color: #c7d2fe; font: 600 12.5px Inter, sans-serif; }
.cc .bd-meta span { display: inline-flex; align-items: center; gap: 6px; }
.cc .bd-meta svg { width: 13px; height: 13px; color: rgb(var(--bd)); }
.cc .bd-when { margin: 0; color: #71717a; font: 600 12px Inter, sans-serif; }
.cc .bd-acts { display: flex; gap: 8px; margin-top: 8px; }
.cc .bd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 42px; height: 40px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.05); color: #e4e4e7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font: 700 13.5px Inter, sans-serif; transition: background .2s, box-shadow .2s, transform .15s; }
.cc .bd-btn:hover { background: rgba(255,255,255,.09); }
.cc .bd-btn:active { transform: scale(.96); }
.cc .bd-btn.go { flex: 1; background: rgb(var(--bd)); color: #06142b; box-shadow: none; }
.cc .bd-btn.go:hover { background: #93c5fd; }
.cc .bd-btn.bad:hover { color: #fca5a5; box-shadow: inset 0 0 0 1px rgba(248,113,113,.5); background: rgba(248,113,113,.08); }
.cc .bd-btn:disabled { opacity: .5; cursor: progress; }

.cc .bd-how { display: flex; align-items: center; justify-content: center; gap: 34px; padding-top: 6px; }
.cc .bd-recipe { display: grid; grid-template-columns: repeat(3, 76px); gap: 5px; flex: none; }
.cc .bd-recipe span { display: grid; place-items: center; height: 46px; border-radius: 10px; background: #16161a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); color: #e4e4e7; font: 700 11.5px Inter, sans-serif; }
.cc .bd-recipe .b { color: #93c5fd; }
.cc .bd-recipe .l { color: #d6b98c; }
.cc .bd-recipe .s { color: #c08b5c; }
.cc .bd-recipe .e { background: #0e0e11; }
.cc .bd-how-tx { max-width: 470px; }
.cc .bd-how-tx h3 { margin: 0 0 8px; color: var(--cc-dim, #8a8a94); font: 700 11px var(--cc-mono, monospace); letter-spacing: .16em; text-transform: uppercase; }
.cc .bd-how-tx p { margin: 0 0 8px; color: #a1a1aa; font: 500 14px/1.6 Inter, sans-serif; }
.cc .bd-how-tx b { color: #e4e4e7; }

.cc .bd-code { margin-left: 8px; padding: 2px 9px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(var(--bd), .12); color: #bfdbfe; font: 600 11.5px Inter, sans-serif; }
.cc .bd-code b { font: 700 12px var(--cc-mono, monospace); letter-spacing: .08em; color: #fff; }
.cc .bd-code:hover { background: rgba(var(--bd), .22); }

/* Link to the Blueprint Store (its own page since 16 Oct 2026) */
.cc .bd-storelink { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 22px; text-decoration: none; color: inherit;
  background: radial-gradient(120% 140% at 0% 0%, rgba(56,189,248,.16), transparent 60%), #0a0d16; box-shadow: inset 0 0 0 1.5px rgba(var(--bd), .22);
  transition: box-shadow .3s, transform .3s cubic-bezier(.2,.8,.2,1); }
.cc .bd-storelink:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(var(--bd), .5), 0 0 34px -8px rgba(var(--bd), .4); }
.cc .bd-sl-ic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; color: #06142b; background: rgb(var(--bd)); }
.cc .bd-sl-ic svg { width: 24px; height: 24px; }
.cc .bd-sl-tx { display: grid; gap: 3px; min-width: 0; }
.cc .bd-sl-tx b { color: #fff; font: 800 18px Outfit, Inter, sans-serif; }
.cc .bd-sl-tx em { color: #a1a1aa; font: 500 13.5px/1.5 Inter, sans-serif; font-style: normal; }
.cc .bd-sl-go { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: auto; border-radius: 999px; color: #bfdbfe; background: rgba(var(--bd), .14); }

/* Materials window (the page's own dialog) */
.bd-mnote { margin: 0 0 12px; color: #a1a1aa; font: 500 13.5px/1.5 Inter, sans-serif; }
.bd-mats { display: grid; gap: 8px; max-height: 52vh; margin-bottom: 12px; overflow: auto; }
.bd-mat { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px 14px; border-radius: 12px; overflow: hidden; background: #141419; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.bd-mn { color: #fff; font: 700 14px Inter, sans-serif; }
.bd-mat b { grid-row: 1 / 3; grid-column: 2; align-self: center; color: #c7d2fe; font: 700 13px var(--cc-mono, monospace); }
.bd-mq { color: #8a8d9b; font: 600 12px Inter, sans-serif; }
.bd-mat i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p); background: #60a5fa; }
.bd-mat.done i { background: #34d399; }
.bd-mat.done .bd-mq { color: #34d399; }

@media (max-width: 760px) {
  .cc .bd { gap: 30px; }
  .cc .bd-grid-list { grid-template-columns: 1fr; gap: 16px; }
  .cc .bd-how { flex-direction: column; gap: 18px; text-align: center; }
  .cc .bd-recipe { grid-template-columns: repeat(3, 70px); }
}
@media (prefers-reduced-motion: reduce) {
  .cc .bd-in, .cc .bd-pic img { transition: none; transform: none; }
}