.rb-catalog-tools { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(170px, .75fr)); gap: 10px; margin-top: 6px; }
.rb-catalog-tools input,
.rb-catalog-tools select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: rgba(20,20,25,.92);
  color: var(--text);
  font: 500 14px 'Archivo', sans-serif;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.rb-catalog-tools input::placeholder { color: var(--faint); }
.rb-catalog-tools input:focus,
.rb-catalog-tools select:focus { border-color: color-mix(in srgb, var(--accent) 76%, transparent); background: #17171d; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }

.rb-filter-set { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rb-filter-set button {
  cursor: pointer;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(255,255,255,.015);
  color: var(--muted);
  font: 600 10px 'IBM Plex Mono', monospace;
  letter-spacing: .045em;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.rb-filter-set button:hover { color: var(--text); border-color: rgba(255,255,255,.24); transform: translateY(-1px); }
.rb-filter-set button.on { color: #111; background: var(--text); border-color: var(--text); }
.rb-catalog-count { min-height: 15px; margin: 26px 0 0; color: var(--muted); font: 500 11px 'IBM Plex Mono', monospace; letter-spacing: .06em; }

.rb-card-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.rb-card-grid > .rb-empty { grid-column: 1 / -1; }
.rb-card-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-faction) 4%, transparent), transparent 48%), var(--rb-panel, #141419);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .3s ease, opacity .2s ease;
}
.rb-card-tile::after { content: ''; position: absolute; z-index: 2; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-faction) 9%, transparent); pointer-events: none; }
.rb-card-tile:hover { z-index: 2; transform: translateY(-5px); border-color: color-mix(in srgb, var(--card-faction) 65%, white); box-shadow: 0 20px 38px rgba(0,0,0,.32), 0 0 26px color-mix(in srgb, var(--card-faction) 10%, transparent); }
.rb-card-tile--selected { border-color: color-mix(in srgb, var(--card-faction) 70%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-faction) 35%, transparent); }
.rb-card-tile--selected .rb-card-art img { filter: saturate(.7) brightness(.72); }

.rb-card-open { appearance: none; display: block; width: 100%; cursor: pointer; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; }
.rb-card-art { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #101014; }
.rb-card-art::after { content: ''; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(9,9,12,.3)); pointer-events: none; }
.rb-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1), filter .3s ease; }
.rb-card-art i { position: absolute; z-index: 2; top: -20%; bottom: -20%; left: -65%; width: 42%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.18), transparent); transform: skewX(-17deg); transition: left .65s ease; pointer-events: none; }
.rb-card-tile:hover .rb-card-art img { transform: scale(1.025); }
.rb-card-tile:hover .rb-card-art i { left: 135%; }
.rb-card-open:focus-visible,
.rb-card-add:focus-visible,
.rb-detail-close button:focus-visible { outline: 2px solid var(--text); outline-offset: -3px; }

.rb-card-cost { position: absolute; z-index: 3; top: 8px; left: 8px; display: grid; min-width: 29px; min-height: 29px; padding: 0 4px; place-items: center; border: 1px solid rgba(255,255,255,.52); border-radius: 50%; background: linear-gradient(145deg, #244aa5, #102c70); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.38); font: 700 12px 'IBM Plex Mono', monospace; }
.rb-card-cost--hero { background: linear-gradient(145deg, #c13b2e, #6e1712); font-family: 'Archivo', sans-serif; font-size: 16px; }
.rb-card-identity { display: block; min-width: 0; min-height: 58px; padding: 11px 11px 9px; }
.rb-card-identity b { display: block; overflow: hidden; font-size: 13px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.rb-card-identity i { display: block; margin-top: 6px; color: var(--muted); font: normal 8px 'IBM Plex Mono', monospace; letter-spacing: .09em; text-transform: uppercase; }
.rb-card-traits { display: flex; min-height: 30px; flex-wrap: wrap; gap: 4px; padding: 0 9px 10px; }
.rb-card-traits .rb-trait { padding: 4px 5px; font-size: 8px; }
.rb-card-traits .rb-trait img { display: none; }
.rb-card-add { width: calc(100% - 18px); margin: 0 9px 11px; padding: 9px 7px; cursor: pointer; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.055); color: var(--text); font: 600 9px 'IBM Plex Mono', monospace; letter-spacing: .055em; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.rb-card-add:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.13); }
.rb-card-add:disabled { cursor: not-allowed; border-color: color-mix(in srgb, var(--card-faction) 28%, transparent); background: color-mix(in srgb, var(--card-faction) 9%, transparent); color: var(--faint); }

.rb-card-dialog { width: min(1050px, calc(100vw - 28px)); max-height: min(830px, calc(100svh - 28px)); padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 15px; background: #111116; color: var(--text); box-shadow: 0 36px 130px rgba(0,0,0,.78); }
.rb-card-dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(7px); }
.rb-card-dialog[open] { display: grid; grid-template-columns: minmax(300px, .76fr) minmax(0, 1.24fr); animation: rb-dialog-in .28s cubic-bezier(.22,1,.36,1) both; }
@keyframes rb-dialog-in { from { opacity: 0; transform: translateY(14px) scale(.982); } to { opacity: 1; transform: none; } }
.rb-detail-close { position: absolute; z-index: 6; top: 11px; right: 11px; margin: 0; }
.rb-detail-close button { cursor: pointer; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(8,8,10,.83); color: var(--text); font-size: 25px; line-height: 1; transition: transform .2s ease, background .2s ease; }
.rb-detail-close button:hover { transform: rotate(5deg); background: var(--accent); color: var(--accent-ink); }
.rb-detail-art { position: sticky; top: 0; display: grid; height: min(830px, calc(100svh - 28px)); align-self: start; align-items: center; overflow: hidden; padding: 23px; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--detail-faction) 28%, transparent), transparent 64%), #0a0a0d; }
.rb-detail-art::after { content: ''; position: absolute; inset: 0; border-right: 1px solid rgba(255,255,255,.08); pointer-events: none; }
.rb-detail-art img { width: 100%; max-height: calc(100% - 10px); object-fit: contain; filter: drop-shadow(0 22px 30px rgba(0,0,0,.52)); }
.rb-detail-copy { min-width: 0; max-height: min(830px, calc(100svh - 28px)); padding: 48px 36px 38px; overflow-y: auto; scrollbar-color: rgba(255,255,255,.2) transparent; }
.rb-detail-kicker { color: var(--accent); font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: .13em; text-transform: uppercase; }
.rb-detail-copy h2 { margin: 9px 0 15px; font-size: clamp(35px, 4vw, 55px); line-height: .94; letter-spacing: -.047em; }
.rb-detail-traits { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-detail-cost { margin: 18px 0 0; color: var(--muted); font: 500 11px 'IBM Plex Mono', monospace; letter-spacing: .06em; }
.rb-detail-cost b { color: var(--text); }
.rb-detail-summary { color: var(--muted); font-size: 15px; line-height: 1.58; }
.rb-detail-links { display: flex; flex-wrap: wrap; gap: 16px; margin: 17px 0 0; }
.rb-detail-links a { color: var(--text); font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: .05em; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px; }
.rb-detail-section { margin-top: 22px; padding: 22px 0 0; border-top: 1px solid var(--line); }
.rb-detail-section h3 { margin-bottom: 14px; color: var(--text); font: 700 11px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.rb-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rb-stat-grid > div { min-width: 0; padding: 11px; border: 1px solid rgba(255,255,255,.06); border-radius: 7px; background: rgba(255,255,255,.04); }
.rb-stat-grid small { display: block; color: var(--muted); font: 500 8px 'IBM Plex Mono', monospace; letter-spacing: .05em; text-transform: uppercase; }
.rb-stat-grid b { display: block; margin-top: 5px; overflow-wrap: anywhere; font-size: 17px; }
.rb-detail-list { display: grid; gap: 8px; }
.rb-detail-list article { padding: 12px 13px; border: 1px solid rgba(255,255,255,.055); border-left: 2px solid var(--accent); border-radius: 0 7px 7px 0; background: rgba(255,255,255,.035); }
.rb-detail-list h4 { margin: 0; font-size: 13px; }
.rb-detail-list p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.54; }
.rb-detail-inline { margin: 0; color: var(--muted); font-size: 14px; }
.rb-detail-lore { position: relative; padding-left: 22px; }
.rb-detail-lore::before { content: '“'; position: absolute; top: 18px; left: 0; color: color-mix(in srgb, var(--detail-faction) 70%, white); font: 500 31px/1 Georgia, serif; opacity: .7; }
.rb-detail-lore p { margin: 0; color: #b9b6b2; font: italic 15px/1.68 Georgia, 'Times New Roman', serif; }

@media (max-width: 1100px) { .rb-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .rb-catalog-tools { grid-template-columns: minmax(220px, 1.2fr) 1fr 1fr; }
  .rb-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rb-card-dialog[open] { grid-template-columns: 1fr; overflow-y: auto; }
  .rb-detail-art { position: relative; height: min(430px, 47svh); padding: 20px; }
  .rb-detail-art::after { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .rb-detail-copy { max-height: none; padding: 32px 23px; overflow: visible; }
}
@media (max-width: 720px) {
  .rb-catalog-tools { grid-template-columns: 1fr; }
  .rb-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 560px) {
  .rb-filter-set { flex-wrap: nowrap; margin-inline: -20px; padding: 1px 20px 4px; overflow-x: auto; scrollbar-width: none; }
  .rb-filter-set::-webkit-scrollbar { display: none; }
  .rb-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .rb-card-dialog { width: calc(100vw - 14px); max-height: calc(100svh - 14px); border-radius: 11px; }
  .rb-card-dialog[open] { max-height: calc(100svh - 14px); }
  .rb-detail-art { height: 330px; }
  .rb-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-card-identity { min-height: 54px; padding-inline: 9px; }
  .rb-card-identity b { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .rb-card-tile, .rb-card-art img, .rb-card-art i, .rb-card-dialog[open], .rb-detail-close button { transition: none; animation: none; }
}