/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.5.4_@babel+core@7.25.9_@opentelemetry+api@1.9.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/.pnpm/next@15.5.4_@babel+core@7.25.9_@opentelemetry+api@1.9.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/cards/cards.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.cards-browse { padding: 2.5rem 0; max-width: 1400px; }

.cb-header {
  display: flex; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}

.cb-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--gold-dim), transparent 60%);
}

.cb-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 2px;
  color: var(--gold-bright);
  margin: 0.25rem 0 0;
  text-shadow: 0 0 18px rgba(242, 198, 109, 0.18);
}

.cb-total {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 13px;
}

.cb-filters {
  padding: 1.15rem 1.5rem;
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 1fr 110px 110px auto auto;
  grid-gap: 1rem;
  gap: 1rem; align-items: end;
}

.cb-clear {
  padding: 0.55rem 1.1rem;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  font-weight: 600;
  background: rgba(20, 9, 31, 0.55);
  color: var(--text);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 180ms ease;
}

.cb-clear:hover {
  border-color: var(--crimson);
  color: var(--crimson-bright);
  box-shadow: 0 0 12px rgba(226, 106, 106, 0.25);
}

.cb-exact {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: none; letter-spacing: normal;
  margin-top: 0.4rem;
  cursor: pointer;
}

.cb-exact input[type="checkbox"] { accent-color: var(--gold); }

.cb-color.cb-colorless.on {
  background: var(--parchment);
  color: var(--void-deep);
}

.cb-sentinel { height: 1px; width: 100%; }

.cb-end {
  font-family: var(--font-mono);
  color: var(--gold);
  text-align: center;
  margin: 2rem 0;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.cb-end::before, .cb-end::after {
  content: '\2726';
  margin: 0 0.75rem;
  color: var(--gold-dim);
  font-size: 0.85em;
}

.cb-loading {
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-serif); font-style: italic;
  margin: 1.5rem 0;
}

.cb-filters label {
  display: flex; flex-direction: column; gap: 0.35rem;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--gold); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-weight: 600;
}

.cb-filters input, .cb-filters select {
  padding: 0.55rem 0.85rem;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  background: var(--void-deep); color: var(--text-bright);
  border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.cb-filters input:focus, .cb-filters select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-dim), 0 0 14px var(--gold-glow);
}

/* Color mana buttons — MTG 5 colors + colorless */
.cb-colors { display: flex; flex-direction: column; gap: 0.35rem; }
.cb-colors > div { display: flex; gap: 0.35rem; }

.cb-color {
  width: 38px; height: 38px;
  border-radius: 50%;
  font-family: var(--font-mono); font-weight: 700;
  border: 1.5px solid var(--gold-dim);
  background: linear-gradient(145deg, #2A1A10, #140A18);
  cursor: pointer;
  color: var(--text-bright);
  transition: transform 180ms var(--ease-spring), box-shadow 200ms ease, border-color 180ms ease;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(242, 198, 109, 0.15), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.cb-color:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--gold);
  color: var(--text-bright);
}

.cb-color.on {
  border-color: var(--gold-bright);
  color: var(--text-bright);
  box-shadow: 0 0 16px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* MTG mana colors */
.cb-W.on { background: radial-gradient(circle at 35% 30%, #FFF6D9 0%, #E8D9A3 70%, #C9B07A 100%); color: #3C2A10; }
.cb-U.on { background: radial-gradient(circle at 35% 30%, #C9E6FF 0%, #7BB8E8 70%, #4A88C2 100%); color: #0F2438; }
.cb-B.on { background: radial-gradient(circle at 35% 30%, #6B6463 0%, #2B2827 65%, #0A0808 100%); color: var(--text-bright); }
.cb-R.on { background: radial-gradient(circle at 35% 30%, #FFC2A6 0%, #E8825A 65%, #B24E2F 100%); color: #3B1508; }
.cb-G.on { background: radial-gradient(circle at 35% 30%, #C9ECD2 0%, #7FB88E 65%, #4A8C5C 100%); color: #0E2814; }

.cb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-gap: 1.1rem;
  gap: 1.1rem;
  margin-top: 1.5rem;
}

.cb-loading, .cb-empty {
  color: var(--text-muted);
  font-family: var(--font-serif); font-style: italic;
  grid-column: 1 / -1;
  text-align: center; padding: 2rem;
}

.cb-card {
  padding: 0; background: transparent; border: none;
  cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 0.4rem;
  perspective: 1000px;
}

.cb-card img {
  width: 100%;
  border-radius: var(--radius-card);
  display: block;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.35);
  transition: transform 260ms var(--ease-card), box-shadow 260ms ease, filter 260ms ease;
  will-change: transform;
}

.cb-card:hover img {
  transform: translateY(-6px) rotateX(3deg) scale(1.03);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.7),
    0 0 28px var(--gold-glow),
    0 0 0 1px var(--gold-dim);
  filter: brightness(1.05);
}

.cb-fallback {
  background: linear-gradient(145deg, #1C110A, #0F0718);
  border: 1px solid var(--glass-border);
  aspect-ratio: 5/7;
  border-radius: var(--radius-card);
  padding: 0.85rem;
  display: flex; flex-direction: column; gap: 0.35rem;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-bright);
  box-shadow: inset 0 1px 0 rgba(242, 198, 109, 0.1);
}

.cb-caption {
  display: flex; justify-content: space-between; gap: 0.5rem;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text);
}

.cb-cost { color: var(--gold-bright); }

/* Modal (card zoom) */
.cb-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  animation: cb-modal-in 220ms var(--ease-card);
}

@keyframes cb-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cb-modal-inner {
  max-width: 820px;
  display: grid; grid-template-columns: 360px 1fr; grid-gap: 1.75rem; gap: 1.75rem;
  background: linear-gradient(180deg, rgba(28, 17, 10, 0.75) 0%, rgba(20, 9, 31, 0.92) 100%);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 40px var(--gold-glow),
    inset 0 1px 0 rgba(242, 198, 109, 0.2);
  animation: cb-modal-pop 280ms var(--ease-spring);
}

@keyframes cb-modal-pop {
  from { transform: scale(0.94) translateY(8px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.cb-modal-inner img {
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.cb-modal-body h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px;
  color: var(--text-bright);
  margin: 0 0 0.3rem;
  display: flex; justify-content: space-between; gap: 0.5rem;
  letter-spacing: 0.5px;
}

.cb-modal-body h3 .cost {
  color: var(--gold-bright);
  font-family: var(--font-mono); font-weight: 500;
  font-size: 14px;
}

.cb-modal-body .t {
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-normal);
  font-weight: 600;
  margin: 0.2rem 0;
}

.cb-modal-body .o {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--text);
  margin: 0.6rem 0;
}

.cb-modal-body .pt {
  font-family: var(--font-display); font-weight: 700;
  color: var(--crimson-bright);
  margin: 0; font-size: 15px;
}

.cb-modal-body a {
  color: var(--gold-bright);
  font-family: var(--font-mono); font-size: var(--fs-xs);
}

.cb-modal-body .btn-ghost {
  align-self: flex-start;
  padding: 0.55rem 1.1rem;
  background: rgba(20, 9, 31, 0.6);
  color: var(--text);
  border: 1px solid var(--arcane-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  font-weight: 600;
  margin-top: 0.85rem;
  transition: all 180ms ease;
}

.cb-modal-body .btn-ghost:hover {
  border-color: var(--arcane);
  color: var(--text-bright);
  box-shadow: 0 0 14px var(--arcane-glow);
}

@media (max-width: 900px) {
  .cb-filters { grid-template-columns: 1fr; }
  .cb-modal-inner { grid-template-columns: 1fr; max-width: 100%; }
  .cb-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}