/*
  JANK DB THEME
  ------------------------------------------------------------------
  Main theme color tokens. Adjust these to retheme quickly.
  Palette (as requested):
  - Background: #050711
  - Primary Accent: #FFB400 (gold)
  - Secondary Accent: #4DD0E1 (teal)
  - Danger: #E53935 (red)
  - Text Primary: #F5F5F5
  - Text Muted: #B0BEC5
  - Panel BG: #111827
  - Card BG: #1F2937
  - Border: #374151
*/
:root {
  --bg: #050711;
  --panel: #111827;
  --card: #1F2937;
  --primary: #FFB400;
  --primary-900: #e6a300; /* darker gold */
  --primary-100: #ffd878; /* lighter gold for hover glow */
  --secondary: #4DD0E1;
  --secondary-900: #31b7c9;
  --danger: #E53935;
  --danger-900: #c62828;
  --text: #F5F5F5;
  --muted: #B0BEC5;
  --border: #374151;
  --shadow: rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/*
  TYPOGRAPHY
  ------------------------------------------------------------------
  Adjust font stack and sizes here if needed.
*/
body {
  margin: 0;
  font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    /* subtle noisy/texture feel via layered gradients, no external assets */
    radial-gradient(1200px 600px at 10% -10%, #0b0f1e 10%, transparent 60%),
    radial-gradient(1200px 800px at 110% 10%, #0a0d19 10%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 4px, rgba(0,0,0,0.02) 4px 8px),
    var(--bg);
}

/* Utility */
.hidden { display: none !important; }
body.no-scroll { overflow: hidden; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}

.header {
  position: relative;
  text-align: center;
  margin-bottom: 24px;
  padding: 16px 12px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.05)), var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 28px var(--shadow);
}
.header .header-top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header .logo {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.22em; /* big spaced-out, nerdy look */
  text-transform: uppercase;
  color: var(--primary);
  text-shadow: 0 0 18px rgba(255, 180, 0, 0.25);
}
.nav { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav .nav-link { color: var(--text); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.nav .nav-link:hover, .nav .nav-link.active { background: rgba(255,255,255,0.06); }
.nav .nav-spacer { flex: 1; }
.nav .nav-user { display: inline-flex; align-items: center; gap: 8px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.avatar.lg { width: 64px; height: 64px; }
.avatar.placeholder { background: linear-gradient(135deg, #2b3650, #172037); border: 1px dashed var(--border); }
.btn.small { padding: 4px 8px; font-size: 12px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: 0 8px 22px var(--shadow); }
.form { display: grid; gap: 10px; }
.form .actions { display: flex; gap: 10px; align-items: center; }
.list { list-style: none; padding: 0; margin: 10px 0 0; }
.list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.list .deck-name { font-weight: 600; }
.muted { color: var(--muted); font-size: 12px; }
.profile { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.header .subtitle {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* Small card thumbnail for deck editor and search results */
.card-thumb {
  width: 46px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #0b0f1e;
  box-shadow: 0 2px 8px var(--shadow);
}

/* Deck editor grid as small subsections of cards */
.deck-section { margin-top: 12px; }
.deck-section h3 { margin: 8px 0 10px; }
.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  /* Ensure there's always a visible drop area even when empty */
  min-height: 140px;
  padding: 10px;
}
.deck-card {
  position: relative;
  height: 170px;
  background-size: cover;
  background-position: center center;
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 6px 16px var(--shadow);
}
.deck-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 20%, rgba(0,0,0,0.55) 70%);
  pointer-events: none;
}
.deck-card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 6px; z-index: 1; }
.deck-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
/* Price badge shown in the upper-left corner of the deck tile */
.price-badge {
  background: rgba(77, 208, 225, 0.9);
  color: #041016;
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  box-shadow: 0 2px 8px var(--shadow);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.price-badge::before { content: '$'; opacity: 0.9; margin-right: 1px; }
.qty-badge {
  background: rgba(0,0,0,0.6);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  padding: 2px 8px;
  box-shadow: 0 2px 8px var(--shadow);
}
.deck-card-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.deck-card-bottom .name {
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  max-width: 60%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.deck-card-bottom .actions { display: inline-flex; gap: 4px; }
.tile-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(17, 24, 39, 0.85);
  color: var(--text);
  width: 28px; height: 28px;
  line-height: 24px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 2px 6px var(--shadow);
}
.tile-btn:hover { background: rgba(31, 41, 55, 0.9); }
.tile-btn.danger { background: rgba(229, 57, 53, 0.85); border-color: #a9322f; }
.tile-btn.danger:hover { background: rgba(198, 40, 40, 0.9); }

/* Drag & Drop highlight for board grids */
.deck-grid.drag-over {
  outline: 2px dashed var(--secondary);
  outline-offset: 4px;
  background: rgba(77, 208, 225, 0.06);
  border-radius: 10px;
}

/* Empty state styling for drop targets */
.deck-grid.empty {
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.deck-grid .drop-placeholder {
  align-self: center;
  justify-self: center;
  color: var(--muted);
  font-size: 13px;
  opacity: 0.8;
  pointer-events: none; /* let grid receive drag events */
}

/* Search form */
.search-form {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)), var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 30px var(--shadow);
  position: sticky;
  top: 10px;
  z-index: 5;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  outline: none;
  background: var(--panel);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(77,208,225,0.25);
}

.actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 14px;
}

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover { border-color: var(--secondary); box-shadow: 0 6px 18px var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--primary);
  border: 1px solid var(--primary-900);
  color: #050711;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  box-shadow: 0 6px 18px rgba(255, 180, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn.primary:hover { background: color-mix(in srgb, var(--primary) 90%, white 10%); box-shadow: 0 8px 24px rgba(255,180,0,0.35); }
.btn.primary:focus { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* Secondary / Reset (Danger) */
.btn.danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
  font-weight: 600;
}
.btn.danger:hover { background: var(--danger); color: #050711; border-color: var(--danger-900); }
.btn.danger:focus { outline: 2px solid var(--secondary); outline-offset: 2px; }

.btn.close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.close:hover { border-color: var(--secondary); }

/* Results */
.results-section { margin-top: 20px; }
.loading, .error, .empty {
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.error { border-color: #ff5c7c; color: #ffd7e0; }

.grid.results { grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 8px; }

.card-tile {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)), var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 26px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative; /* allow top-right color icons positioning */
}
.card-tile:hover { transform: translateY(-2px); border-color: var(--secondary); box-shadow: 0 14px 28px rgba(0,0,0,0.45), 0 0 0 2px rgba(77,208,225,0.12) inset; }

.card-image-wrap {
  width: 200px; /* Fixed width for card images */
  border-radius: 10px;
  overflow: hidden;
  background: #0e1130;
  box-shadow: 0 6px 18px var(--shadow);
  margin: 0 auto; /* Center the image within the card tile */
  position: relative; /* allow overlay badges like price in the top-left */
}

.card-image {
  display: block;
  width: 200px;  /* Fixed width for card images */
  height: auto;  /* Preserve aspect ratio */
}

/* Position price badge on search/similar card image top-left */
/* Position price badge on the outer card tile (top-left), not on the image */
.card-tile .price-badge {
  position: absolute;
  top: 6px;
  left: 6px;
}

.card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-name { font-weight: 700; font-size: 16px; }
.card-meta { color: var(--muted); font-size: 12px; }
/* Type + P/T row */
.card-type-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.card-type { font-size: 13px; color: #d2d7ff; }
.pt-badge {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.3);
  color: #081a12;               /* dark text */
  background: rgba(77, 225, 168, 0.9); /* mint/green to stand out */
  box-shadow: 0 2px 8px var(--shadow);
}
/* Add logical spacing between card type and rules text */
.card-text {
  opacity: .9;
  font-size: 13px;
  line-height: 1.35;
  margin-top: 8px; /* logical break from the type line */
}
.card-footer { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
/* Flavor text italicized as requested */
.card-footer .cf-flavor { font-style: italic; color: var(--muted); }
.card-footer .cf-flavor .flavor-name { opacity: 0.9; }

/* Parenthetical text inside card rules/text
   This styles any ( ... ) captured by the encoder as lighter and italic. */
.text-paren {
  font-style: italic;
  color: var(--muted);
}

/* Top-right color identity icons */
.card-colors-top {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  gap: 4px;
  padding: 2px 4px;
  border-radius: 8px;
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 4px 12px var(--shadow);
  pointer-events: none; /* purely decorative */
}

/* Inline mana/rules symbols (e.g., {T}, {U}, {1}) */
.sym { display: inline-block; vertical-align: text-bottom; line-height: 1; }

/* Tap symbol styled as a curved arrow in a circle */
.sym-tap {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0e1130;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.03) inset;
  margin: 0 2px;
}

/* Price pill + tooltip for search results */
.price-wrap { position: relative; display: inline-block; }
.price-pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(77, 208, 225, 0.12);
  border: 1px solid var(--secondary);
  color: #c9f5ff;
}
.price-tooltip {
  position: absolute;
  top: 120%;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 26px var(--shadow);
  min-width: 360px;
  z-index: 20;
  overflow: hidden;
}
.price-tooltip.hidden { display: none; }
.price-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.price-table thead { background: rgba(255,255,255,0.04); }
.price-table th, .price-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.price-table td:last-child { text-align: right; }

/* Mana symbol base and variants */
.ms {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  border: 1px solid var(--border);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.03) inset;
  margin: 0 2px;
}
.ms-w { background: rgb(248,231,185); color: #111; }
.ms-u { background: rgb(179,206,234); color: #052228; }
.ms-b { background: rgb(166,159,157); color: #111; }
.ms-r { background: rgb(235,159,130); color: #111; }
.ms-g { background: rgb(196,211,202); color: #111; }
.ms-num { background: #0e1130; color: var(--text); }

/* RARITY ICONS
   ------------------------------------------------------------------
   Small square rarity badges used in card headers. Adjust sizes/colors here.
   .rar      - base style (square)
   .rar-c    - common (white)
   .rar-u    - uncommon (grey)
   .rar-r    - rare (gold)
   .rar-m    - mythic (orange)
*/
.rar {
  width: 18px;
  height: 18px;
  /* Square shape (slight rounding optional) */
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  border: 1px solid var(--border);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.03) inset;
  margin: 0 4px 0 2px;
  text-transform: lowercase;
}
.rar-c { background: #ffffff; color: #111; }
.rar-u { background: #9e9e9e; color: #050711; }
.rar-r { background: #DCC17F; color: #050711; }
.rar-m { background: #fb8c00; color: #050711; }

/* Variations selector inside grouped cards */
.variant-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.variant-label {
  font-size: 12px;
  color: var(--muted);
}
.card-tile .variantSelect {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  outline: none;
}
.card-tile .variantSelect:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(77,208,225,0.25);
}

/* Mana dots next to the Color label (simple colored circles) */
.mana-dots { display: inline-flex; gap: 6px; margin-left: 2px; }
.mana-dots .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset, 0 0 6px rgba(0,0,0,0.25); }
.mana-dots .dot.w { background: rgb(248,231,185); }
.mana-dots .dot.u { background: rgb(179,206,234); }
.mana-dots .dot.b { background: rgb(166,159,157); }
.mana-dots .dot.r { background: rgb(235,159,130); }
.mana-dots .dot.g { background: rgb(196,211,202); }

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 50;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100vw - 40px, 1100px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  z-index: 60;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.modal-body {
  padding: 14px;
  overflow: auto;
}

/* Modal Filters (top of Similar Cards modal) */
.modal-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)), var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.filters-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.filters-group { display: flex; flex-direction: column; gap: 6px; }
.filters-label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.filters-inline { display: flex; align-items: center; gap: 6px; }
.filters-inline .sep { color: var(--muted); }
.modal-filters input[type="text"],
.modal-filters input[type="number"]{
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  outline: none;
  background: var(--panel);
  color: var(--text);
}
.modal-filters input:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(77,208,225,0.25); }
.filters-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Clickable chips for color filters */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .2s ease, background .15s ease, transform .06s ease;
}
.chip:hover { border-color: var(--secondary); box-shadow: 0 4px 12px var(--shadow); }
.chip:active { transform: translateY(1px); }
.chip.active { border-color: var(--primary); background: rgba(255,180,0,0.15); box-shadow: 0 0 0 2px rgba(255,180,0,0.15) inset; color: var(--primary); font-weight: 700; }

/* Responsive */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid.results { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .filters-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.results { grid-template-columns: 1fr; }
  .filters-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr; }
  .actions { justify-content: stretch; }
  .actions .btn { flex: 1; }
  .filters-row { grid-template-columns: 1fr; }
}