/* === Collections === */
.brd-collection-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px;
}
.brd-collection-header {
  margin-bottom: 24px;
}
.brd-collection-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 4px;
}
.brd-collection-owner {
  color: var(--text-secondary, #666);
  font-size: 14px;
  margin: 0 0 8px;
}
.brd-collection-owner a {
  color: var(--accent, #10b981);
  text-decoration: none;
}
.brd-collection-count {
  font-size: 13px;
  color: var(--text-tertiary, #999);
}
.brd-collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.brd-collection-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border, #e5e7eb);
  text-decoration: none;
  transition: box-shadow .2s;
}
.brd-collection-link:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.brd-collection-link__title {
  font-weight: 600;
  color: var(--text-primary);
}
.brd-collection-link__count {
  font-size: 13px;
  color: var(--text-secondary);
}

/* === Cards Grid === */
.brd-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 280px));
  gap: 20px;
  justify-content: center;
}

/* === Single Collection Card (ccard) === */
.brd-ccard {
  position: relative;
  width: 100%;
  aspect-ratio: 5/7;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
  text-decoration: none;
  display: block;
}
.brd-ccard:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.brd-ccard__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brd-ccard__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: #fff;
  font-size: 14px;
}
.brd-ccard__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}
.brd-ccard__info {
  padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brd-ccard__title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.brd-ccard__price {
  color: #10b981;
  font-size: 16px;
  font-weight: 700;
}

/* === Tier Borders === */
.brd-ccard--common {
  border: 2px solid #c0c0c0;
}
.brd-ccard--rare {
  border: 2px solid #ffd700;
  box-shadow: 0 0 8px rgba(255,215,0,.3);
}
.brd-ccard--legendary {
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 16px rgba(255,100,200,.4);
}
.brd-ccard--legendary::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff6ec4, #7873f5, #4fd1c5, #f6e05e, #ff6ec4);
  background-size: 300% 300%;
  z-index: -1;
  animation: rainbow-border 4s linear infinite;
}

/* === Holographic Shimmer === */
.brd-ccard__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255,255,255,.15) 40%,
    rgba(255,255,255,.25) 50%,
    rgba(255,255,255,.15) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.brd-ccard:hover .brd-ccard__shimmer,
.brd-ccard-fullscreen .brd-ccard__shimmer {
  opacity: 1;
  animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes rainbow-border {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === Card Detail (Fullscreen) === */
.brd-ccard-detail {
  max-width: 500px;
  margin: 0 auto;
  padding: 24px 16px;
}
.brd-ccard-detail__back {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--text-secondary, #666);
  text-decoration: none;
  font-size: 14px;
}
.brd-ccard-detail__back:hover {
  color: var(--accent, #10b981);
}
.brd-ccard-fullscreen {
  position: relative;
  width: 100%;
  aspect-ratio: 5/7;
  border-radius: 20px;
  overflow: hidden;
  perspective: 1000px;
}
.brd-ccard-fullscreen .brd-ccard__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brd-ccard-detail__meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
  color: #fff;
}
.brd-ccard-detail__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}
.brd-ccard-detail__row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.brd-ccard-detail__price {
  font-size: 22px;
  font-weight: 700;
  color: #10b981;
}
.brd-ccard-detail__date {
  font-size: 13px;
  color: rgba(255,255,255,.7);
}
.brd-ccard-detail__tier {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.brd-ccard-detail__tier--common { background: #c0c0c0; color: #333; }
.brd-ccard-detail__tier--rare { background: #ffd700; color: #333; }
.brd-ccard-detail__tier--legendary { background: linear-gradient(135deg, #ff6ec4, #7873f5); color: #fff; }
.brd-ccard-detail__id {
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-tertiary, #999);
}

/* === Collection Actions === */
.brd-collection-actions {
  margin-top: 32px;
  text-align: center;
}

/* === Empty state === */
.brd-empty-state {
  padding: 48px;
  text-align: center;
  color: var(--text-secondary, #666);
}

/* === Collection Modal === */
.brd-collection-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brd-collection-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
}
.brd-collection-modal__body {
  position: relative;
  background: var(--bg-card, #1a1a2e);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 400px;
  margin: 16px;
}

/* === Icon button === */
.brd-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border, #333);
  background: transparent;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.brd-btn--icon:hover {
  background: var(--bg-hover, rgba(255,255,255,.08));
  color: var(--accent, #10b981);
}