/* Disable transitions on page load to prevent layout flash */
.no-transitions,
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
  transition: none !important;
}


html, body {
  height: 100%;
  margin: 0;
}
/* Overall container: use full width of viewport */
#deck-builder { 
  position: relative;
  width: 100%;
  height: 100vh;               /* full viewport height */
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 0;
  box-sizing: border-box;
  background-color: #121212;
  color: #e0e0e0;
  margin: 0;     
}

/* Smooth opacity transition between skeleton and real cards. Without this
   the cards snap from 0 → 1 instantly when the .loading class is removed,
   which feels abrupt on tab switches. The transition is fast enough
   (140ms) to not feel sluggish but smooths the swap noticeably. */
.builder-card {
  transition: opacity 140ms ease-out;
}

#available-cards.loading .builder-card {
  visibility: hidden;
  opacity: 0;
}

/* But keep your placeholder skeletons visible */
#available-cards.loading .builder-card.loading {
  visibility: visible;
  opacity: 1;
}
/* Two-column layout */
#deck-builder-columns {
  flex: 1;                      /* fill vertical space */
  display: flex;
  gap: 0;
  padding: 5px;
  overflow: hidden;
}

/* Left Column: Available Cards & Filters */
#available-cards-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #1e1e1e;
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}


#card-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background-color: #252525;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  transition: all 0.3s ease;
}

/* ===== Filter rows (flex) — replaces the old CSS grid layout ===== */
#card-filters .builder-frow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
#card-filters .builder-frow--search { flex-wrap: nowrap; } /* desktop: keep search + sort + alt-art + collection on ONE line */
#card-filters .builder-frow--search .search-input-wrapper { flex: 1 1 0; min-width: 200px; } /* stretch to fill the gap */
#card-filters .builder-frow--search .sort-wrapper { flex: 0 0 auto; }
#card-filters .builder-frow--filters { justify-content: center; } /* center Colors + the dropdowns on Row 2 */
#card-filters .builder-frow--filters .multi-select-dropdown { flex: 0 0 auto; width: 160px; position: relative; } /* position:relative anchors each dropdown's options popup directly beneath it */
#card-filters .builder-frow--filters #card-filter-types { flex: 0 0 auto; display: flex; }
#card-filters .builder-frow--filters #card-filter-colors { flex: 0 0 auto; }
#card-filters .builder-frow--sliders { gap: 8px 16px; }
#card-filters .builder-frow--meta { justify-content: flex-end; gap: 10px; }
#card-filters .builder-mobile-filters-toggle { display: none; } /* desktop: everything visible */
#card-filters .bfrow-break { display: none; }                   /* desktop: no row breaks */

/* Colour dots (moved out of the old inline <style> in the PHP) */
#card-filter-colors { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#card-filter-colors label { cursor: pointer; margin: 0; padding: 0; display: inline-flex; background: none; border: none; }
#card-filter-colors input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
#card-filter-colors .filter-color-dot { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); box-sizing: border-box; transition: border-color .15s, box-shadow .15s, transform .15s; }
#card-filter-colors label:hover .filter-color-dot { transform: scale(1.1); }
#card-filter-colors input[type="checkbox"]:checked + .filter-color-dot { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }

#card-filter-rarity-wrapper {
  position: relative;
  min-width: 0;
}

.alt-art-toggle {
  display: inline-flex;
  align-items: center;
}


#card-filters .sort-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Sort Direction Toggle - small button */
.sort-direction-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: #999;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .sort-direction-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
  }
}

.sort-direction-btn.desc {
  color: var(--ps-orange);
  border-color: rgba(255, 166, 0, 0.4);
}

.sort-direction-btn i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.sort-direction-btn.desc i {
  transform: scaleY(-1);
}
/* remove filter section maybe */
.filter-section {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .filter-section:hover {
    background-color: rgba(0, 159, 212, 0.05);
  }
}

.filter-section-header {
  color: var(--ps-gold);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .filter-section:hover .filter-section-header {
    color: var(--ps-gold-2);
    text-shadow: 0 0 5px rgba(0, 191, 255, 0.3);
  }
}
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.search-input-icon {
  position: absolute;
  left: 12px;
  color: #666;
  font-size: 0.85rem;
  pointer-events: none;
  z-index: 1;
}

.search-input-wrapper #card-filter {
  width: 100% !important;
  min-width: 0;
  padding: 10px 36px 10px 38px !important;
  border: 2px solid #444 !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  color: #fff !important;
  background: #1e1e1e !important;
  transition: border-color 0.2s ease;
  box-sizing: border-box !important;
}

.search-input-wrapper #card-filter:focus {
  outline: none !important;
  border-color: var(--ps-gold) !important;
}

.search-input-wrapper #card-filter::placeholder {
  color: #555 !important;
}

.search-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  background: #666;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .search-clear-btn:hover {
    background: #ef4444;
    transform: translateY(-50%) scale(1.1);
  }
}

.search-clear-btn.visible {
  display: flex;
}
/* The legacy native <select> is now a hidden source-of-truth — the visible
   UI is the custom #card-filter-sort-wrapper dropdown below. */
#card-filters #card-filter-order {
  display: none !important;
}

/* Custom Sort dropdown — matches Sets/Rarity styling but single-select.
   Lives inside .sort-wrapper next to the direction toggle button. */
#card-filter-sort-wrapper {
  flex: 0 0 160px;
  width: 160px;
  min-width: 0;
  position: relative;
}

/* Single-select option (no checkbox, just clickable rows) */
.single-select-option {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  color: #ddd;
  font-size: 0.9rem;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .single-select-option:hover {
    background: #3a3a3a;
    color: #fff;
  }
}

.single-select-option.active {
  background: rgba(255, 215, 0, 0.08);
  color: var(--ps-gold);
  font-weight: 600;
}

/* (old #card-filter-row / #card-filter-items grid rules removed — #card-filters is flex now) */

#card-filter-types {
  gap: 4px;
}

#card-filter-colors {
  gap: 8px;
}

#card-filter-cost {
  gap: 8px;
}

#card-filter-rarity {
  gap: 4px;
}

#card-filter-types label,
#card-filter-colors label,
#card-filter-cost label {
  margin: 0;
  cursor: pointer;
}

#card-filters input:not(#card-filter),
#card-filters select:not(#card-filter-order) {
  padding: 8px;
  font-size: 14px;
  background-color: #fff;
  color: #333;
  border: 1px solid #444;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* ============================================================
   MULTI-SELECT SET DROPDOWN
============================================================ */

#card-filter-set-wrapper {
  position: relative;
  min-width: 0;
}

/* Type multi-select dropdown (mirrors the Card List Type dropdown).
   Reuses the global .multi-select-* rules below; only needs a positioning
   context + a sensible trigger width inside the #card-filter-types flex cell. */
#builder-type-wrapper {
  position: relative;
  width: 160px;
  max-width: 100%;
  min-width: 0;
}

.multi-select-btn {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  height: 36px;
  padding: 0 12px;
  font-size: 0.9rem;
  background-color: #2a2a2a;
  color: #ddd;
  border: 1px solid #555;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
}

.multi-select-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .multi-select-btn:hover {
    background-color: #3a3a3a;
    border-color: var(--ps-gold);
  }
}

.multi-select-btn:focus,
.multi-select-dropdown.open .multi-select-btn {
  outline: none;
  border-color: var(--ps-gold);
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.25);
}

.multi-select-btn i {
  font-size: 12px;
  color: #aaa;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.multi-select-dropdown.open .multi-select-btn i {
  transform: rotate(180deg);
}


.multi-select-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #2a2a2a;
  border: 1px solid #555;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  padding: 6px 0;
}

.multi-select-dropdown.open .multi-select-options {
  display: block;
}

.multi-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  color: #ddd;
  font-size: 0.9rem;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .multi-select-option:hover {
    background: #3a3a3a;
    color: #fff;
  }
}

.multi-select-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ps-gold);
  cursor: pointer;
  flex-shrink: 0;
}

/* Icons inside dropdown options (e.g. rarity icons) — size them so SVGs
   don't render at their natural (often huge) intrinsic dimensions. */
.multi-select-option img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  object-fit: contain;
}

.multi-select-option span {
  flex: 1;
  user-select: none;
}

.multi-select-option:has(input:checked) {
  background: rgba(255, 215, 0, 0.08);
  color: var(--ps-gold);
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .multi-select-option:has(input:checked):hover {
    background: rgba(255, 215, 0, 0.15);
    color: var(--ps-gold);
  }
}

.multi-select-label .selected-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ps-gold-2);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  margin-left: 6px;
}

/* Color filter styling */
#card-filter-colors input[type="checkbox"] {
  display: none;
}

#card-filter-colors img {
  width: 40px;
  height: 40px;
  padding: 6px;
  box-sizing: border-box;
  object-fit: contain;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all 0.3s ease;
  filter: saturate(0.8);
  /* light default shadow on dark bg */
  box-shadow: 0 1px 3px rgba(255,255,255,0.12);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) #card-filter-colors label:hover img {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 159, 212, 0.3);
    border-color: rgba(0, 159, 212, 0.5);
    filter: saturate(1.2);
  }
}

#card-filter-colors input[type="checkbox"]:checked + img {
  border-color: var(--ps-gold);
  background-color: var(--ps-indigo);
  box-shadow: 0 0 10px rgba(0, 159, 212, 0.5);
  transform: scale(1.1);
  filter: saturate(1.5);
}

/* Cost / Power / Strike: dual-handle range sliders (mirror the card-list slider).
   High specificity (#card-filters …) so it beats the `#card-filters input:not(#card-filter)`
   white-field styling that would otherwise paint the range inputs as white boxes. */
#card-filters #card-filter-cost.cost-range-slider,
#card-filters #card-filter-power.cost-range-slider,
#card-filters #card-filter-strike.cost-range-slider {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 200px;
  gap: 4px;
  min-width: 200px;
  padding: 0 10px;
}
#card-filter-cost.cost-range-slider .cost-range-head,
#card-filter-cost.cost-range-slider .cost-range-track-wrap,
#card-filter-cost.cost-range-slider .cost-range-ticks,
#card-filter-power.cost-range-slider .cost-range-head,
#card-filter-power.cost-range-slider .cost-range-track-wrap,
#card-filter-power.cost-range-slider .cost-range-ticks,
#card-filter-strike.cost-range-slider .cost-range-head,
#card-filter-strike.cost-range-slider .cost-range-track-wrap,
#card-filter-strike.cost-range-slider .cost-range-ticks {
  width: 100%;
}
/* Neutralize the generic white form-input styling for the range handles. */
#card-filters #card-filter-cost .cost-range-input,
#card-filters #card-filter-power .cost-range-input,
#card-filters #card-filter-strike .cost-range-input {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  height: 16px;
}

.cost-range-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.2;
}
.cost-range-title {
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #d8d8d8;
}
.cost-range-value {
  font-weight: 600;
  color: var(--ps-amber);
}

.cost-range-track-wrap {
  position: relative;
  height: 16px;
  margin: 4px 0 2px;
}
.cost-range-rail,
.cost-range-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  border-radius: 4px;
  pointer-events: none;
}
.cost-range-rail {
  left: 0;
  right: 0;
  background: #3a3a3a;
}
.cost-range-fill {
  left: 0;
  width: 100%;
  background: var(--ps-amber);
}

.cost-range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 16px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.cost-range-input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: none;
  border: none;
  height: 16px;
}
.cost-range-input::-moz-range-track {
  background: none;
  border: none;
  height: 16px;
}
.cost-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ps-amber-light);
  border: 2px solid #1a1a1a;
  box-shadow: 0 0 0 1px var(--ps-amber);
  cursor: grab;
}
.cost-range-input::-webkit-slider-thumb:active { cursor: grabbing; }
.cost-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  background: var(--ps-amber-light);
  box-shadow: 0 0 0 1px var(--ps-amber);
  cursor: grab;
  -moz-appearance: none;
}

.cost-range-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #9aa0a6;
  padding: 0 1px;
}
/* Rarity Filter Container */
#card-filter-rarity {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}

/* Hide the native checkbox inputs */
#card-filter-rarity input[type="checkbox"] {
  display: none;
}

/* Label wrapper for each rarity icon */
#card-filter-rarity label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}

/* The rarity SVG icons — box-sizing keeps the visible size at 30px so the
   2px border doesn't blow up the bounding binder and break vertical alignment
   with the 30px cost circles next to it. */
#card-filter-rarity img {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: transform 0.2s, border-color 0.2s;
  display: block;
  vertical-align: middle;
}
/* Hover state: slightly enlarge icon */
@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) #card-filter-rarity label:hover img {
    transform: scale(1.1);
  }
}

/* Checked state: colored border + enlarge */
#card-filter-rarity input[type="checkbox"]:checked + img {
  border-color: var(--ps-gold-2);
  transform: scale(1.1);
}


/* container: holds the Type multi-select dropdown */
#card-filter-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}


/* Available cards grid */
#available-cards {
  flex: 1;                      /* consume the rest of left column */
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;    /* pack rows to top — prevents big gap between rows when grid isn't full */
  align-items: flex-start;
  gap: 8px;
  background-color: #252525;
  padding: 10px;
  border-radius: 6px;
  overflow-y: auto;
}
/* ─── Available-Cards Tabs ─── */
#available-tabs {
  width: 100%;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #444;
  padding-top: 8px;
  gap: 6px;
  position: relative;
}

#available-tabs button {
  flex: 1;              
  padding: 5px 0;          
  font-size: 0.9rem;
  line-height: 1;
  background: #2a2a2a;       
  color: #ccc;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) #available-tabs button:hover {
    background: #3d3d3d;
    color: #fff;
  }
}

#available-tabs button.active {
  background: var(--ps-indigo);
  color: #fff;
  border-color: var(--ps-gold-2);
}

#available-tabs button img,
#available-tabs button span[aria-hidden="true"] {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: middle;
  /* if you want the emoji a bit closer: */
  line-height: 1;
}

#available-tabs button svg {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: middle;
  fill: currentColor; /* inherits your tab text color */
}

/* ─── Column Adjustment Control ─── */
#builder-column-control {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* (old #filter-toggles-inline + .builder-mobile-collapsible desktop rules removed — superseded by the flex rows + the .more-open toggle; .builder-mobile-filters-toggle is hidden on desktop by the #card-filters-scoped rule above) */

#builder-column-control .builder-col-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #444;
  background: #2a2a2a;
  color: #aaa;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) #builder-column-control .builder-col-btn:hover {
    background: #3a3a3a;
    color: #fff;
    border-color: #555;
  }
}

#builder-column-control .builder-col-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Cards-per-row count between the - and + buttons. Sits inside the same
   flex row as the buttons and matches their height for a unified pill look. */
#builder-column-control .builder-col-count {
  min-width: 18px;
  height: 24px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #ddd;
  background: #1f1f1f;
  border: 1px solid #444;
  border-radius: 4px;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

#available-cards.loading .builder-card:not(.loading) {
  visibility: hidden;
}

/* make sure your placeholders (the .loading cards) are still visible & animated */
.builder-card.loading {
  visibility: visible;
}

.loading-more-cards {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ============================================================
   BATTLEFIELD TAB - HORIZONTAL CARD DISPLAY
   Cards are already landscape, just need proper container space
============================================================ */

/* When Battlefield tab is active, adjust the grid */
#available-cards.battlefield-view {
  gap: 4px;
}

#available-cards.battlefield-view .builder-card {
  /* Landscape aspect ratio for horizontal cards */
  aspect-ratio: 3.5 / 2.5;
  flex: 0 0 calc(25% - 3px);  /* 4 per row, smaller gap = bigger cards */
  max-width: calc(25% - 3px);
  min-height: 120px;
}

/* Image fits naturally without rotation */
#available-cards.battlefield-view .builder-card img.builder-card-image {
  object-fit: cover;
  object-position: center;
}

/* Adjust quantity controls position */
#available-cards.battlefield-view .quantity-controls.for-available {
  bottom: 6px;
}



/* Collection badge position */
#available-cards.battlefield-view .builder-collection-badge {
  top: 50%;
  transform: translateY(-50%);
}

/* ============================================================
   RESPONSIVE - TABLET
============================================================ */
@media (max-width: 1024px) {
  #available-cards.battlefield-view {
    gap: 4px;
  }
  
  #available-cards.battlefield-view .builder-card {
    flex: 0 0 calc(33.333% - 3px);  /* 3 per row */
    max-width: calc(33.333% - 3px);
  }
}

/* ============================================================
   RESPONSIVE - MOBILE
============================================================ */
@media (max-width: 768px) {
  #available-cards.battlefield-view {
    gap: 2px;
  }
  
  #available-cards.battlefield-view .builder-card {
    flex: 0 0 calc(50% - 1px);
    max-width: calc(50% - 1px);
    min-height: 100px;
  }
}

/* ============================================================
   LARGE SCREENS
============================================================ */
@media screen and (min-width: 1800px) {
  #available-cards.battlefield-view {
    gap: 4px;
  }
  
  #available-cards.battlefield-view .builder-card {
    flex: 0 0 calc(20% - 4px);  /* 5 per row on large screens */
    max-width: calc(20% - 4px);
    min-height: 140px;
  }
}

@media (max-width: 1024px) {
  #available-cards .builder-card {
    flex: 0 0 calc(33.333% - 8px);
    max-width: calc(33.333% - 8px);
  }

  /* and just give the tabs a bit of breathing room */
  #available-tabs {
    width: 100% !important;
    margin-top: 8px !important;
  }

}
/* Mobile responsive filters - Keep Sort and Set on same line under search */
@media (max-width: 768px) {

  #available-cards {
    padding: 4px;
    gap: 3px;
    box-sizing: border-box;
  }

  #available-cards .builder-card {
    flex: 0 0 calc(50% - 3px);
    max-width: calc(50% - 3px);
    min-height: auto;
  }

#card-filters {
    gap: 5px !important;
    padding: 5px;
    background-color: #252525;
    border-radius: 6px;
  }

  /* Tighten dropdown buttons on mobile so the labels still fit at 33% width */
  #card-filters .multi-select-btn {
    padding: 0 10px 0 8px;
    font-size: 0.8rem;
  }
  #card-filters .multi-select-btn i {
    font-size: 10px;
  }

  /* (old mobile #card-filter-row / #card-filter-items / #filter-toggles-inline rules removed) */

  /* ── Mobile-only "More Filters" disclosure ─────────────────────────────
     Toggle is a small inline pill that flows on the same flex row as the
     type pills / column-control. When opened, the wrapper becomes a
     full-width drawer below — a single coherent panel containing the
     colors / cost / collection-mode rows, NOT loose items spread across
     the page (which is what made the previous version feel broken). */

  /* (legacy More-Filters toggle + badge styling removed — superseded by the #card-filters-scoped rules in the appended mobile block at EOF) */

  /* (old .builder-mobile-collapsible mobile drawer removed — replaced by the .more-open toggle in the appended mobile block at EOF) */

  /* Container grows with its content (filter bar + cards grid). The cards
     grid below caps its own height with internal scrolling, so the
     container ends up around filter-bar height + ~70vh. This is simpler
     than constraining the container itself with a height + flex
     distribution, and avoids the previous bug where the container
     collapsed to 0 height during card loading. */
  #available-cards-container {
    flex: none;
    padding: 3px;
  }
  #deck-builder-columns {
    padding: 2px;
  }

  /* Filter bar sticks to viewport top so users can change filters from
     anywhere in the cards list. z-index must beat
     `.quantity-controls.for-available` (z-index: 10). */
  #card-filters {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  /* Cards grid: FIXED height with internal scroll on mobile.
     CRITICAL: must override the desktop `flex: 1` (which is shorthand for
     `flex: 1 1 0%` and would overwrite the height with flex-basis: 0% in a
     flex column parent). `flex: none` means don't grow/shrink and keep
     explicit `height: 70vh`. Otherwise the pane was sized by flex-basis,
     not by height, and the cards spilled outside without scroll. */
  #available-cards {
    flex: none !important;
    height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  /* Search input - full width */
  #card-filter {
    padding: 10px 30px 10px 34px !important;
    font-size: 16px !important; /* prevent zoom */
  }

  /* (old #filter-toggles-inline alt-art mobile rules removed — that wrapper no longer exists; the alt-art button now uses its base size on the search row) */

  .sort-direction-btn {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .sort-direction-btn i {
    font-size: 11px;
  }

  /* Sort dropdown — match multi-select-btn height. Dark theme + yellow accent
     inherits from the desktop rules; only height/padding need overriding. */
  #card-filter-order {
    flex: 1;
    min-width: 0;
    padding: 0 24px 0 8px;
    font-size: 13px;
    height: 32px;
    box-sizing: border-box;
  }
  .multi-select-btn {
    height: 32px;
    font-size: 13px;
  }

  .multi-select-btn {
    padding: 6px 8px !important;
    font-size: 14px !important;
  }
  
  .multi-select-options {
    /* Open wider than the (narrow) trigger so long names like "Showcase"
       or full set names aren't truncated. Cap at viewport-minus-margin so
       the popup never falls off the screen. */
    min-width: 240px;
    max-width: calc(100vw - 16px);
    max-height: 220px;
  }

  /* Right-column dropdowns (Rarity = 2nd, Elements = 4th in the 2-per-row grid)
     anchor their options popup to the RIGHT edge so the wide popup extends LEFT
     into the page rather than off the right side of the screen. */
  #card-filter-rarity-wrapper .multi-select-options,
  #builder-element-wrapper .multi-select-options {
    left: auto;
    right: 0;
  }
  
  .multi-select-option {
    padding: 12px 14px;
  }

  /* Types - tighter container on mobile (dropdown picks up the shared
     #card-filters .multi-select-btn mobile sizing above) */
  #card-filter-types {
    gap: 3px;
  }

  /* Colors - smaller icons on mobile */
  #card-filter-colors img {
    width: 32px !important;
    height: 32px !important;
  }

  /* Cost/Power/Strike sliders - full width on mobile (overrides the fixed 200px desktop basis) */
  #card-filters #card-filter-cost.cost-range-slider,
  #card-filters #card-filter-power.cost-range-slider,
  #card-filters #card-filter-strike.cost-range-slider {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  /* Rarity - smaller on mobile */
  #card-filter-rarity {
    gap: 1px;
    padding-right: 2px !important;
  }
  #card-filter-rarity img {
    width: 24px !important;
    height: 24px !important;
  }

  /* Move +/- to far right on mobile */
  #builder-column-control {
    order: 99;
    margin-left: auto;
    padding-left: 2px !important;
    padding-right: 0 !important;
  }

  /* On mobile, when no filters are active, fully hide clear-filters (no
     reserved space) so the column-control sits flush against the right
     edge. The desktop default uses visibility:hidden to preserve layout
     stability, but on mobile users expect the +/- buttons hard against
     the right side. */
  #builder-clear-filters:not(.is-active) {
    display: none !important;
  }

  /* Tighter Clear Filters on mobile so it doesn't crowd the row */
  .builder-clear-filters {
    padding: 0 8px !important;
    font-size: 11px !important;
    height: 26px !important;
    margin-left: 4px !important;
  }

  /* Tabs at the bottom */
  #available-tabs {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #444;
    padding-top: 8px;
    gap: 6px;
  }
  #available-tabs button {
    flex: 1;
    padding: 5px 0;
    font-size: 0.70rem;
    background: #2a2a2a;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
  }
  #available-tabs button img,
  #available-tabs button svg {
    width: 15px;
    height: 15px;
    margin-right: 1px;
    vertical-align: middle;
  }
  @media (hover: hover) and (pointer: fine) {
    html:not(.is-touching) #available-tabs button:hover {
      background: #3d3d3d;
      color: #fff;
    }
  }
  #available-tabs button.active {
    background: var(--ps-indigo);
    color: #fff;
    border-color: var(--ps-gold-2);
  }
  
  #card-filter-rarity label:last-child img {
  margin-top: -7px;
}
}

/* Even tighter on narrow phones — Clear Filters shrinks further so the
   row (toggle + clear + col control + cards count) fits without wrap. */
@media (max-width: 480px) {
  .builder-clear-filters {
    padding: 0 5px !important;
    font-size: 10px !important;
    height: 24px !important;
    letter-spacing: 0;
  }
}


.builder-card {
  flex: 0 0 calc(20% - 8px);
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 2.5 / 3.5;  /* Maintains card ratio even when image is loading */
  min-height: 180px;  /* Fallback for browsers without aspect-ratio support */
  background: #2a2a2a;  /* Subtle background while loading */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.builder-card img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

/* Hover effect — gated by `(hover: hover)` so it only applies on devices
   with a true hover input (mouse/trackpad). On touch devices the browser
   doesn't fire mouseleave reliably, so :hover sticks after a tap and the
   card stays visually "lifted" until you tap something else. */
@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .builder-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 145, 48, 0.4);
  }
}

.builder-card img.builder-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  color: transparent;
}

.builder-card:not(.loading)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2a2a2a;
  border-radius: 8px;
  z-index: 0;
}

/* Prevent native touch callout/context menu on cards */
.builder-card,
.builder-card img {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Safari */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* Standard */
  touch-action: manipulation;  /* Disable double-tap zoom, allow pan/pinch */
}

/* ── Banned card indicator ── */
.builder-card.card-banned img.builder-card-image {
  filter: grayscale(60%);
}

.builder-card.card-banned:hover img.builder-card-image {
  filter: grayscale(30%);
}

.builder-card.card-banned .banned-badge {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  text-align: center;
  z-index: 5;
  background: linear-gradient(90deg, transparent, rgba(180, 30, 30, 0.92) 15%, rgba(200, 40, 40, 0.95) 50%, rgba(180, 30, 30, 0.92) 85%, transparent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 4px 0;
  pointer-events: none;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Prevent image dragging */
.builder-card img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* Let parent handle all touch/click events */
}

/* Column divider handle */
#column-divider {
  flex: 0 0 5px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 10;
  border-radius: 3px;
  transition: background 0.15s ease;
}
#column-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 40px;
  background: rgba(255,255,255,0.15);
  border-radius: 1px;
  transition: all 0.15s ease;
}
#column-divider:hover,
#column-divider.dragging {
  background: rgba(255,255,255,0.06);
}
#column-divider:hover::after,
#column-divider.dragging::after {
  height: 60px;
  background: rgba(255,255,255,0.35);
}

/* Right Column: Your Deck */
#deck-cards-container {
  flex: 0 0 32%;
  display: flex;
  flex-direction: column;
  background-color: #1e1e1e;
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

#deck-cards-container h2 {
  margin-bottom: 15px;
  color: var(--ps-gold-metal);
  border-bottom: 2px solid #333;
  padding-bottom: 8px;
}

/* Deck Info: header row with input and save button */
#deck-info {
  background-color: #252525;
  padding: 8px 13px;
  border-radius: 6px;
  margin-bottom: 5px;
}

.deck-header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

/* Toolbar: Save button left, action buttons right */
.deck-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

/* Status row: card count + casual toggle */
.deck-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Deck layout toggle + grid column control */
#deck-layout-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
#deck-layout-toggle {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 5px;
  padding: 2px;
}
.deck-layout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  background: transparent;
  border: none;
  color: #888;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.deck-layout-btn:hover {
  color: #ccc;
  background: rgba(255,255,255,0.08);
}
.deck-layout-btn.active {
  color: #f5f5f5;
  background: rgba(255,255,255,0.14);
}
#deck-grid-col-control {
  display: flex;
  align-items: center;
  gap: 4px;
}
.deck-grid-col-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  color: #ccc;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
}
.deck-grid-col-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.deck-grid-col-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
#deck-grid-col-count {
  font-size: 12px;
  color: #aaa;
  min-width: 12px;
  text-align: center;
}

/* ============ DECK GRID VIEW ============ */
.shared-cards-container.deck-grid-mode .deck-section-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
}
.shared-cards-container.deck-grid-mode .deck-card {
  width: auto;
  padding: 0 !important;
  margin-bottom: 0;
  background: none !important;
  border-radius: 8px;
  overflow: visible;
  position: relative;
}
.shared-cards-container.deck-grid-mode .deck-card:hover {
  background: none !important;
}
.shared-cards-container.deck-grid-mode .deck-card .deck-card-content {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.shared-cards-container.deck-grid-mode .deck-card .card-info {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
  display: block;
  padding: 0;
  margin: 0;
}
.shared-cards-container.deck-grid-mode .deck-card .card-info .card-cost,
.shared-cards-container.deck-grid-mode .deck-card .card-info .card-name {
  display: none !important;
}
/* hide card-type text in grid mode */
.shared-cards-container.deck-grid-mode .deck-card .card-info .card-type {
  font-size: 0 !important;
  color: transparent !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: visible !important;
}
.shared-cards-container.deck-grid-mode .deck-card .card-hover {
  display: none;
}
/* Thumb drives the card height in normal flow */
.shared-cards-container.deck-grid-mode .quantity-controls {
  display: block;
  margin: 0;
  padding: 0 !important;
  position: relative;
}
.shared-cards-container.deck-grid-mode .deck-card-thumb-inline {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 367 / 512;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  margin: 0 !important;
  border-radius: 8px;
  display: block !important;
}
/* Battlefield cards are landscape — override portrait aspect-ratio */
.deck-grid-mode #battlefield-section .deck-card-thumb-inline {
  aspect-ratio: 3.5 / 2.5;
}
/* Overlay the +/- buttons at bottom of image */
.shared-cards-container.deck-grid-mode .quantity-buttons {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  padding: 2px 6px;
  gap: 6px;
  z-index: 2;
}
.shared-cards-container.deck-grid-mode .quantity-controls button {
  width: 22px;
  height: 22px;
  line-height: 20px;
  font-size: 13px;
  background: rgba(255,255,255,0.15);
  border: none;
}
@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .shared-cards-container.deck-grid-mode .quantity-controls button:hover {
    background: rgba(255,255,255,0.3);
  }
}
.shared-cards-container.deck-grid-mode .quantity-controls button:active {
  background: rgba(255,255,255,0.35);
  transform: scale(0.92);
}
.shared-cards-container.deck-grid-mode .builder-card-quantity {
  font-size: 13px;
  font-weight: 700;
}

/* Grid mode: Legend + Runes share a centered row, others full-width */
.deck-grid-mode .deck-scroll-container {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: 6px;
}
/* Wrapper keeps legend+rune together, fluid but capped */
.deck-grid-mode #legend-section {
  order: 1;
  flex: 1 1 0;
  min-width: 0;
  max-width: 140px;
}
.deck-grid-mode #rune-section {
  order: 2;
  flex: 2 2 0;
  min-width: 0;
  max-width: 286px;
}
.deck-grid-mode #battlefield-section {
  order: 3;
  flex: 0 0 100%;
}
.deck-grid-mode #main-section {
  order: 4;
  flex: 0 0 100%;
}
/* Legend card: fills its section */
.deck-grid-mode #legend-section .deck-card {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
/* Rune cards: 2 per row within section, extras wrap */
.deck-grid-mode #rune-section .deck-card {
  flex: 0 0 calc(50% - 3px) !important;
  max-width: calc(50% - 3px) !important;
}
/* Battlefield cards: fill row evenly (max 3), not affected by +/- */
.deck-grid-mode #battlefield-section .deck-card {
  flex: 1 1 0 !important;
  max-width: calc(33.333% - 4px) !important;
}

#deck-view,
#selected-cards,
.deck-scroll-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;    /* allow growing AND shrinking */
  min-height: 0;  /* critical for overflow to work inside flex items */
}

/* now enable just the inner container to scroll */
.deck-scroll-container {
  overflow-y: auto;
}
/* keep your existing .card-info flex/align-items:center;gap:8px; */

.deck-card-thumb-inline {
  width: 40px;
  height: 30px;
  object-fit: cover;
  object-position: top center;
  border-radius: 3px;
  margin-right: 12px; 
  transform: scale(1.8);
  transform-origin: center center;
  flex-shrink: 0;
}
.card-hover {
  pointer-events: none;
}

#save-deck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--ps-gold-deep), var(--ps-gold-2));
  color: #000;
  border: 1px solid var(--ps-gold-2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#save-deck:hover {
  background: linear-gradient(135deg, var(--ps-gold-2), var(--ps-gold));
}

.deck-header #save-deck {
  flex: 0 0 auto !important;
  margin-left: auto;
  margin-right: auto;
}

.deck-toolbar #save-deck {
  flex: 0 0 auto;
}

#save-deck[data-logged-out="true"] {
  background: #2a2a2a;
  border-color: #444;
  color: #f5f5f5;
  font-weight: 400;
}

#save-deck[data-logged-out="true"]:hover {
  background: #3a3a3a;
  border-color: #666;
}

.viewability-toggle {
  display: flex;
  margin-left: 4px !important;
  align-items: center; /* you already have this */
  gap: 4px !important;
}

.viewability-toggle .switch {
  position: relative;
  display: inline-block;
  flex: 0 0 auto !important;   /* never let flex stretch/shrink the track */
  width: 36px !important;
  height: 20px !important;
}
.viewability-toggle .switch input {
  opacity: 0;
  width: 0 !important;
  height: 0 !important;
}

/* ————— Style the track ————— */
.viewability-toggle .switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #6B7280 !important;
  border-radius: 10px !important;
  transition: background-color .3s !important;
}

/* ————— The knob ————— */
.viewability-toggle .switch .slider::before {
  content: "" !important;
  position: absolute !important;
  width: 16px !important;
  height: 16px !important;
  left: 2px !important;
  top: 50% !important;
  background-color: #FFF !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
  transform: translateY(-50%) !important;   /* bulletproof vertical centering */
  transition: left .3s ease !important;
}

/* ————— Checked state = Private ————— */
.viewability-toggle .switch input:checked + .slider {
  background-color: var(--ps-orange)  !important; /* orange */
}
.viewability-toggle .switch input:checked + .slider::before {
  left: calc(100% - 18px) !important;   /* 16px knob + 2px right margin → always lands far-right */
  transform: translateY(-50%) !important;
}

/* ————— Tweak the label so it never repaints your Save button ————— */
#deck-viewability-label {
  position: relative;
  width: 45px;
  display: inline-block;
  text-align: center;
  top: -4px;
  margin-left: 4px;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  color: #e0e0e0;
}


/* Card type row */
.deck-card .card-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}






/* ------------------------------- */
/* ALT-ART TOGGLE BUTTON           */
/* ------------------------------- */
.alt-art-toggle {
  display: inline-flex;
  align-items: center;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 2px;
}

.alt-art-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 26px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #888;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .alt-art-segment:hover {
    color: #ccc;
    background: rgba(255, 255, 255, 0.05);
  }
}

.alt-art-segment.active {
  background: var(--ps-indigo-3);
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Tooltip on hover */
.alt-art-segment::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 9999;
  border: 1px solid #444;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .alt-art-segment:hover::after {
    opacity: 1;
    visibility: visible;
  }
}


/* ------------------------------- */
/* COLLECTION THREE-WAY SEGMENTED TOGGLE */
/* ------------------------------- */
.builder-collection-segmented {
  display: inline-flex;
  align-items: center;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.builder-collection-segmented .collection-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 26px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #888;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .builder-collection-segmented .collection-segment:hover {
    color: #ccc;
    background: rgba(255, 255, 255, 0.05);
  }
}

.builder-collection-segmented .collection-segment.active {
  background: var(--ps-indigo);
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Badges mode - green tint when active */
.builder-collection-segmented .collection-segment[data-mode="badges"].active {
  background: #10b981;
}

/* Owned only mode - orange tint when active */
.builder-collection-segmented .collection-segment[data-mode="owned"].active {
  background: var(--ps-orange-deep);
}

/* Tooltip on hover */
.builder-collection-segmented .collection-segment::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 9999;
  border: 1px solid #444;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .builder-collection-segmented .collection-segment:hover::after {
    opacity: 1;
    visibility: visible;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .builder-collection-segmented {
    padding: 1px;
    gap: 1px;
  }
  
  .builder-collection-segmented .collection-segment {
    width: 28px;
    height: 22px;
    font-size: 10px;
  }
  
  /* Hide tooltips on mobile - use touch instead */
  .builder-collection-segmented .collection-segment::after {
    display: none;
  }
}

/* ------------------------------- */
/* COLLECTION BADGE ON CARDS */
/* ------------------------------- */
.builder-collection-badge {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  background: var(--ps-orange); 
  color: #000; 
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: bold;
  z-index: 15;
  pointer-events: none;
  border: 2px solid #000; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s ease; 
}

/* Ensure parent card can show the badge */
.builder-card {
  position: relative;
}

.builder-collection-badge.has-playset {
  background: #10b981; 
}

/* Orange: one short of a full playset (3 of 4) */
.builder-collection-badge.almost-playset {
  background: #f59e0b;
}

/* Red background until you own a full playset (4) */
.builder-collection-badge.needs-more {
  background: #ef4444; 
}

.builder-collection-badge.builder-collection-zero {
  display: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .builder-collection-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
  }
}




/* ————— Keep everything centered vertically ————— */
.deck-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Deck counter styling */
#deck-counter {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ps-gold);
  font-weight: bold;
}

/* No Restriction / Casual Mode Toggle */
.no-restriction-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.no-restriction-toggle .switch {
  position: relative;
  display: block;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 0;
  font-size: 0;
}

.no-restriction-toggle .switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.no-restriction-toggle .switch .slider {
  position: absolute;
  inset: 0;
  background-color: #6B7280;
  border-radius: 9px;
  transition: background-color 0.3s;
}

.no-restriction-toggle .switch .slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  bottom: 2px;
  background-color: #FFF;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.no-restriction-toggle .switch input:checked + .slider {
  background-color: var(--ps-orange-deep);
}

.no-restriction-toggle .switch input:checked + .slider::before {
  transform: translateX(14px);
}

#no-restriction-label {
  font-size: 0.75rem;
  line-height: 1;
  color: #999;
  transition: color 0.3s ease;
}

.no-restriction-toggle:has(input:checked) #no-restriction-label {
  color: var(--ps-orange-deep);
  font-weight: 600;
}

/* Deck Sideboard tabs in deck‑info */
.deck-info-tabs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 6px;
  border-top: 1px solid #444;
}

.deck-info-tab {
  flex: 1;
  padding: 3px 0;
  background: #2a2a2a;
  color: #ccc;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.deck-info-tab:hover {
  background: #3d3d3d;
  color: #fff;
}

.deck-info-tab.active {
  background: var(--ps-indigo);
  color: #fff;
  border-color: var(--ps-gold-2);
}


#sideboard-view {
  display: flex;          /* let it behave like a flex column */
  flex-direction: column;
  flex: 1 1 0;            /* grow / shrink inside the right column */
  min-height: 0;          /* <‑‑ critical: enables overflow on children */
}

/* ── 2.  Main container that holds the card sections ── */
#sideboard-cards {
  display: flex;            /* ← make it flex so the scroll‐wrapper can fill */
  flex-direction: column;   /* ← stack the scroll wrapper vertically */
  flex: 1 1 0;              /* ← allow it to grow/shrink inside the right column */
  min-height: 0;            /* ← critical to allow its child to overflow */
  border: 1px solid #333;
  background: #252525;
  border-radius: 6px;
  padding: 10px;
}

#sideboard-section > .deck-section-title {
  display: inline-block !important;  /* make it size to its content */
  width: auto         !important;  
  align-self: flex-start !important; /* prevent flex from stretching it full‑width */
}

#sideboard-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;    /* critical so its children can overflow */
}

/* you already have this to make the inner container scrollable: */
#sideboard-cards .deck-scroll-container {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}


/* Selected cards area */
#selected-cards {
	flex: 1;  
  display: flex;
  flex-direction: column;
  border: 1px solid #333;
  padding: 5px 8px;
  background: #252525;
  border-radius: 6px;
}


.deck-scroll-container {
  flex: 1;                  
  overflow-y: auto;   
}

.deck-section-title {
  font-size: 0.75rem;           /* slightly smaller than body text */
  font-weight: 600;              /* semi‐bold for emphasis */
  text-transform: uppercase;     /* all caps */
  letter-spacing: 0.5px;         /* a bit of breathing room */
  color: #e0e0e0;                /* light grey on dark bg */
  margin-bottom: 4px;            /* tighten the gap to the cards below */
  padding: 2px 6px;              /* a bit of padding around the text */
  background: rgba(255,255,255,0.05); /* low-opacity highlight */
  border-radius: 4px;            /* soften the corners */
  display: inline-block;         /* shrink to fit the text */
}



.deck-section-title:hover {
  background: rgba(255,255,255,0.1);
}
/* Deck card styling */
.shared-cards-container .deck-card {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  border-radius: 6px;
  color: #fff;
  padding: 8px 12px;
  font-weight: bold;
  cursor: default;
  position: relative;
  z-index: 1;
  background-color: #333;
  transition: background-color 0.2s ease;
}

.shared-cards-container .deck-card.show-hover-top,
.shared-cards-container .deck-card:hover {
  z-index: 10;
}



.shared-cards-container .deck-card:hover {
  background-color: #3a3a3a;
}


.shared-cards-container .deck-card .deck-card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.shared-cards-container .deck-card .card-info {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "cost name"
    "cost type";
  gap: 0 8px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.shared-cards-container .quantity-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 12px;
}

.shared-cards-container .deck-card .card-cost {
  grid-area: cost;
}

.shared-cards-container .deck-card .card-name {
  grid-area: name;
  /* ensure it uses the full second column on row 1 */
}

.shared-cards-container .deck-card .card-type {
  grid-area: type;
  margin-top: 2px;
  font-size: 0.8rem;
  color: #ccc;
}

.shared-cards-container .deck-card .collection-count {
  display: inline-block;
  margin: 0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
}


.deck-card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.card-info .card-name {
  flex: 1 1 auto;               /* grow/shrink as needed */
  min-width: 0;                 /* allow it to actually shrink below its content width */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Editor Loader animation*/
#selected-cards {
  position: relative; /* make the overlay cover only this area */
}
#deck-loading-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
  color: #fff;
  font-size: 1rem;
  border-radius: 6px;
}

#deck-loading-overlay .spinner {
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top: 3px solid var(--ps-orange-deep);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 0 15px rgba(227, 129, 25, 0.3);
}

#deck-loading-overlay .loading-text {
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #e0e0e0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  animation: pulse-text 1.5s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-text {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.deck-card-content .card-name {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  color: #fff;
}

.deck-card-content .card-cost {
  display: inline-block;     
  width: 22px;
  height: 22px;
  line-height: 22px;         /* this vertically centers the glyph */
  font-size: 14px;
  font-weight: bold;
  text-align: center;

  border-radius: 50%;
  background-color: #fff;
  color: #000;

  box-shadow:
    0 0 0 2px #000;

  transition: transform 0.2s, box-shadow 0.3s;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 12px;
}

.quantity-buttons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 20px;
  padding: 2px 8px; 
  background: transparent;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.quantity-controls button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  color: #fff;
  width: 28px;
  height: 28px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .quantity-controls button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
  }
}

/* Tap feedback on touch devices (also fires on desktop click). */
.quantity-controls button:active {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0.92);
}

.deck-builder-card {
  position: relative;
}

.deck-builder-quantity {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.deck-builder-card.loaded .deck-builder-quantity {
  opacity: 1;
}

/* Collection warning - subtle red background only */
.quantity-controls.insufficient-collection .quantity-buttons {
  background: rgba(239, 68, 68, 0.25) !important;  /* Semi-transparent red background */
  border: 2px solid rgba(239, 68, 68, 0.5) !important;  /* Subtle red border */
}

/* Keep button text/controls white and normal */
.quantity-controls.insufficient-collection .quantity-buttons button {
  background: transparent !important;
  border: none !important;
  color: #fff !important;  /* Keep white text */
}

.quantity-controls.insufficient-collection .quantity-buttons .builder-card-quantity {
  color: #fff !important;  /* Keep white text */
  font-weight: 700;
}

/* Subtle hover effect */
@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .quantity-controls.insufficient-collection .quantity-buttons button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px;
  }
}

/* Thumbnail remains completely unaffected */
.deck-card-thumb-inline {
  width: 40px;
  height: 30px;
  object-fit: cover;
  object-position: top center;
  border-radius: 3px;
  margin-right: 12px;
  transform: scale(1.8);
  transform-origin: center center;
  flex-shrink: 0;
}

/* Hover image container for deck card */
.card-hover {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
  display: none;
  z-index: 100;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));
}

.deck-card .card-hover {
  top: 100%;
  bottom: auto;
  transform: translate(-50%,  4px);
}

/* flipped (above) */
.deck-card.show-hover-top .card-hover {
  top: auto;
  bottom: 100%;
  transform: translate(-50%, -4px);
}

.card-hover img {
  max-width: 200px;
  height: auto;
  border-radius: 8px;

}

/* Deck Actions Container */
.deck-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-left: auto;
}

.deck-actions-row {
  display: flex;
  gap: 8px;
}

/* Import Deck Button */
.import-deck-btn {
  background: #2a2a2a;
  border: 1px solid #444;
  color: #f5f5f5;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.import-deck-btn:hover {
  background: #3a3a3a;
  border-color: #666;
}


/* Copy button feedback styles */
#copy-tts-btn,
#copy-deckcode-btn,
#copy-cardnames-btn,
#copy-pixelborn-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

/* Hide Pixelborn export (disabled for now) */
[data-tab="pixelborn"],
#tab-pixelborn,
.deck-builder-pixel-button,
button[onclick*="CopyPixelborn"] {
  display: none !important;
}

/* Hide TTS import/export (disabled for now). The data-tab="tts" <li> is used
   by BOTH the import and the export modals, so this hides the tab in both;
   the panes (#import-tab-tts / #tab-tts) and the copy button are hidden too. */
[data-tab="tts"],
#import-tab-tts,
#tab-tts,
#copy-tts-btn {
  display: none !important;
}


#copy-tts-btn i,
#copy-deckcode-btn i,
#copy-cardnames-btn i {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.button.copied {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  color: white !important;
  transition: all 0.3s ease;
}

.button.copied i {
  transform: scale(1.1);
}

/* Success notification - matches your existing notification style */
.deck-success-notification {
  position: fixed;
  top: 60px; /* matches your other notifications */
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: clamp(0.85rem, 1vw + 0.1rem, 1rem);
  line-height: 1.2;
  max-width: 90vw;
  width: auto;
  box-sizing: border-box;
  background: #1e7e34; /* green success color - matches your deck-saved-notification */
  color: #fff;
  text-align: center;
  word-break: break-word;
  overflow-wrap: anywhere;
  z-index: 10000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: fadeInOut 3.5s ease-in-out forwards; /* uses your existing animation */
}

/* Stack multiple success notifications gracefully */
.deck-success-notification + .deck-success-notification {
  margin-top: 8px;
  top: calc(60px + 48px);
}

/* Mobile adjustments - matches your existing mobile styles */
@media (max-width: 768px) {
  .deck-success-notification {
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    max-width: 600px;
    padding: 10px 14px;
    font-size: clamp(0.9rem, 2.5vw, 1.05rem);
    border-radius: 8px;
    box-sizing: border-box;
  }
}

/* Preview Deck Button */
.preview-deck-btn {
  background: #1e3333;
  border: 1px solid #2a5555;
  color: #f5f5f5;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.preview-deck-btn:hover {
  background: #2a4444;
  border-color: #3a6666;
}
/* ============================================================
   DECK PREVIEW POPUP
============================================================ */

#deck-preview-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#deck-preview-popup.show {
  display: flex !important;
}

/* Modal Container */
#deck-preview-popup .preview-modal {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Vignette overlay effect */
#deck-preview-popup .preview-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Close Button */
#deck-preview-popup .deck-builder-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

#deck-preview-popup .deck-builder-popup-close:hover {
  background: rgba(227, 129, 25, 0.8);
  transform: scale(1.1);
}

/* Modal Body */
#deck-preview-popup .preview-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  z-index: 1;
}

/* Capture Image Button */
#deck-preview-popup .preview-capture-btn {
  position: absolute;
  top: 16px;
  right: 66px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

#deck-preview-popup .preview-capture-btn:hover {
  background: rgba(16, 185, 129, 0.8);
  border-color: rgba(16, 185, 129, 0.6);
  transform: scale(1.1);
}

#deck-preview-popup .preview-capture-btn:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

/* Deck Container */
.preview-deck-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Section Styles */
.preview-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.preview-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #e0e0e0;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.preview-section-count {
  font-size: 0.85rem;
  color: #888;
  font-weight: 500;
}

/* Card Grid */
.preview-section-cards {
  display: grid;
  gap: 10px;
}

/* Main Deck Cards — fixed 8-column grid to mirror the share-image layout (deck-og-image.php) */
.preview-main-cards {
  grid-template-columns: repeat(8, 1fr);
  justify-content: center;
}

/* Sideboard Cards */
.preview-sideboard-cards {
  grid-template-columns: repeat(8, 1fr);
  justify-content: center;
}

/* Palworld has no sideboard — hide the dead section in the preview */
#preview-sideboard-section { display: none !important; }

/* Structures: landscape cards in their own row (mirrors single-decks / image-gen) */
.preview-structures-cards {
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
}
.preview-card.is-horizontal {
  aspect-ratio: 3.5 / 2.5;
}

/* Preview reads as ONE deck — no "Main Deck" label, and no wall before Structures
   (they just flow at the bottom as landscape cards, part of the same deck). */
#preview-main-section .preview-section-header { display: none; }
#preview-structures-section .preview-separator,
#preview-structures-section .preview-section-header { display: none; }
.preview-deck-container { gap: 12px; }

/* Responsive: fewer columns on narrower screens so cards stay legible */
@media (max-width: 1000px) { .preview-main-cards, .preview-sideboard-cards { grid-template-columns: repeat(6, 1fr); } .preview-structures-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .preview-main-cards, .preview-sideboard-cards { grid-template-columns: repeat(4, 1fr); } .preview-structures-cards { grid-template-columns: repeat(2, 1fr); } }

/* Separator */
.preview-separator {
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 20%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 80%,
    transparent 100%
  );
  margin: 10px 0;
}

/* Individual Preview Card */
.preview-card {
  position: relative;
  border-radius: 8px;
  overflow: visible;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  aspect-ratio: 2.5 / 3.5;
}

.preview-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  z-index: 5;
}

.preview-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Quantity Badge */
.preview-card .preview-quantity-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  min-width: 28px;
  height: 28px;
  background: var(--ps-orange);
  color: #000;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  z-index: 2;
}


/* Card Controls (show on hover) */
.preview-card-controls {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 20px;
  padding: 4px 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3;
}

.preview-card:hover .preview-card-controls {
  opacity: 1;
}

.preview-card-controls button {
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.preview-card-controls button:hover {
  background: rgba(227, 129, 25, 0.8);
}

.preview-card-controls .preview-qty-display {
  min-width: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

/* Modal Footer */
#deck-preview-popup .preview-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
}

.preview-total-count {
  font-size: 1rem;
  font-weight: 600;
  color: #e0e0e0;
}

.preview-total-count .count-number {
  color: var(--ps-orange);
}

#preview-close-btn {
  padding: 10px 24px;
  background: #444;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

#preview-close-btn:hover {
  background: #555;
}

/* Empty State */
.preview-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.preview-empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.preview-empty-state p {
  font-size: 1.1rem;
  margin: 0;
}

/* Hide empty sections */
.preview-section:not(:has(.preview-card)) {
  display: none;
}

/* Fallback for browsers without :has() support */
.preview-section.empty-section {
  display: none;
}

/* ============================================================
   DECK PREVIEW - RESPONSIVE
============================================================ */

@media (max-width: 1024px) {
  #deck-preview-popup .preview-modal {
    max-width: 95%;
  }
  
  .preview-main-cards,
  .preview-sideboard-cards {
    grid-template-columns: repeat(auto-fill, minmax(90px, 110px));
  }
}

@media (max-width: 930px) {
  #deck-preview-popup {
    padding: 0px;
    align-items: flex-start;
  }
  
  #deck-preview-popup .preview-modal {
    max-height: 95vh;
    border-radius: 12px;
    margin-top: 10px;
  }
  
  #deck-preview-popup .preview-modal-body {
    padding: 5px;
  }
  
  .preview-main-cards,
  .preview-sideboard-cards {
    grid-template-columns: repeat(auto-fill, minmax(75px, 95px));
    gap: 2px;
  }
  
  .preview-section-title {
    font-size: 0.8rem;
    padding: 3px 10px;
  }
  
  .preview-card .preview-quantity-badge {
    min-width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }
  
  .preview-card-controls {
    padding: 3px 6px;
  }
  
  .preview-card-controls button {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
  
  #deck-preview-popup .preview-modal-footer {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
  }
  
  #preview-close-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .preview-main-cards,
  .preview-sideboard-cards {
    grid-template-columns: repeat(auto-fill, minmax(65px, 85px));
    gap: 2px;
  }
}

/* ============================================================
   DECK PREVIEW - LARGE SCREENS
============================================================ */

@media screen and (min-width: 1800px) {
  #deck-preview-popup .preview-modal {
    max-width: 1400px;
  }
  
    #deck-preview-popup .preview-capture-btn {
    top: 24px !important; /* Match close button's top position */
    right: 76px !important; /* Adjust spacing from close button */
    width: 44px !important; /* Slightly larger for better proportion */
    height: 44px !important;
    font-size: 18px !important;
  }
  
  /* Also update close button to match if needed */
  #deck-preview-popup .deck-builder-popup-close {
    top: 24px !important;
    right: 24px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 26px !important;
  }
  
  .preview-main-cards,
  .preview-sideboard-cards {
    grid-template-columns: repeat(auto-fill, minmax(120px, 140px));
  }
  
  .preview-section-title {
    font-size: 1rem;
    padding: 6px 16px;
  }
  
  .preview-card .preview-quantity-badge {
    min-width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}

/* Clear Deck Button - Red theme */
.clear-deck-btn {
  background: #352020;
  border: 1px solid #5a3333;
  color: #f5f5f5;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.clear-deck-btn:hover {
  background: #4a2a2a;
  border-color: #7a4444;
}

/* Deck action buttons - uniform width */
.deck-actions-row button {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

/* ============================================================
   CLEAR DECK CONFIRMATION POPUP - COMPLETE STYLES
============================================================ */

/* Overlay - covers full screen */
#clear-deck-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
}

/* Force flex centering when jQuery shows it with display:block */
#clear-deck-popup[style*="display: block"],
#clear-deck-popup[style*="display:block"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Modal container - wider but controlled max-width */
#clear-deck-popup .clear-modal {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  width: 90%;
  max-width: 420px; /* Reduced from 480px */
  background: #1e1e1e;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  margin: 0;
}

/* Header - tighter padding */
#clear-deck-popup .clear-modal-header {
  display: block !important;
  padding: 10px 16px 2px; /* Reduced bottom padding from 4px to 2px */
}

#clear-deck-popup .clear-modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2; /* Tighter line height */
}

/* Body - tighter padding and line-height */
#clear-deck-popup .clear-modal-body {
  display: block !important;
  padding: 2px 16px 8px; /* Reduced bottom padding from 10px to 8px */
}

#clear-deck-popup .clear-modal-body p {
  margin: 0;
  color: #999;
  font-size: 0.95rem;
  line-height: 1.2; /* Reduced from 1.3 to 1.2 for tighter spacing */
}

/* Footer - tighter padding */
#clear-deck-popup .clear-modal-footer {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 16px 10px; /* Reduced top padding from 8px to 6px */
  background: #161616;
  border-top: 1px solid #2a2a2a;
  border-radius: 0 0 10px 10px;
}

/* Buttons - compact */
#clear-deck-popup .clear-modal-footer .button {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s ease;
}

#clear-deck-popup #clear-deck-cancel {
  background: #3a3a3a;
  color: #ddd;
  border: 1px solid #555;
}

#clear-deck-popup #clear-deck-cancel:hover {
  background: #4a4a4a;
}

#clear-deck-popup #clear-deck-confirm,
#clear-deck-popup .button--danger {
  background: #ef4444 !important;
  color: #fff !important;
}

#clear-deck-popup #clear-deck-confirm:hover,
#clear-deck-popup .button--danger:hover {
  background: #dc2626 !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  #clear-deck-popup .clear-modal {
    width: 95%;
    max-width: none;
    margin: 0 10px;
  }
  
  #clear-deck-popup .clear-modal-header {
    padding: 8px 14px 2px; /* Tighter on mobile too */
  }
  
  #clear-deck-popup .clear-modal-body {
    padding: 2px 14px 6px; /* Reduced bottom padding */
  }
  
  #clear-deck-popup .clear-modal-body p {
    line-height: 1.15; /* Even tighter on mobile */
  }
  
  #clear-deck-popup .clear-modal-footer {
    padding: 6px 14px 8px; /* Reduced padding */
  }
  
  #clear-deck-popup .clear-modal-footer .button {
    padding: 6px 14px;
  }
}

/* Large screen adjustments - control width growth */
@media screen and (min-width: 1800px) {
  #clear-deck-popup .clear-modal {
    max-width: 650px !important; /* Prevent it from getting too wide */
  }
  
  #clear-deck-popup .clear-modal-header h3 {
    font-size: 1.3rem; /* Slightly larger but controlled */
  }
  
  #clear-deck-popup .clear-modal-body p {
    font-size: 1rem; /* Slightly larger but controlled */
  }
  
  #clear-deck-popup .clear-modal-footer .button {
    padding: 8px 18px; /* Slightly larger buttons but controlled */
    font-size: 0.9rem;
  }
}

@media screen and (min-width: 1800px) {
  #available-cards {
    gap: unset;
    row-gap: 12px;
    column-gap: 8px;
    align-content: start;
  }
  
  #available-cards .builder-card {
    flex: 0 0 calc((100% - 48px) / 6);
    max-width: calc((100% - 48px) / 6);
    aspect-ratio: 2.5 / 3.5;
  }

  
  .shared-cards-container .deck-card {
    padding: 8px 12px;
    margin-bottom: 8px;
  }
  
  .shared-cards-container .deck-card-content .card-name {
    font-size: 16px;
  }
  
  .shared-cards-container .deck-card .card-type {
    font-size: 0.8rem;
  }
  
.deck-card-thumb-inline {
  width: 40px;
  height: 30px;
  transform: scale(1.8);
  margin-right: 12px;
}
  
  .shared-cards-container .deck-card-content .card-cost {
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 14px;
  }
  
  .quantity-controls button {
    width: 28px;
    height: 28px;
    line-height: 26px;
  }
  
    .deck-builder-popup .deck-builder-popup-content {
    max-width: 1190px !important;
    gap: 31px !important;
    padding: 31px !important;
  }

  .deck-builder-popup .deck-builder-popup-image {
    padding: 17px !important;
  }

  .deck-builder-popup .deck-builder-popup-image img {
    max-width: 462px !important;
  }

  .deck-builder-popup .deck-builder-popup-details {
    padding: 13px 13px 20px 0 !important;
  }

  .deck-builder-popup .deck-builder-popup-header {
    gap: 14px !important;
    padding: 14px 17px !important;
    border-radius: 12px !important;
  }

  .deck-builder-popup #deckBuilderPopupCardId,
  .deck-builder-popup #deckBuilderPopupCardName {
    font-size: 20px !important;
    padding: 8px 13px !important;
  }

  .deck-builder-popup .deck-builder-popup-tab {
    padding: 8px 14px !important;
    font-size: 11px !important;
  }

  .deck-builder-popup .deck-builder-popup-tab-panel.active {
    gap: 10px !important;
  }

  .deck-builder-popup .deck-builder-popup-stat {
    padding: 10px 14px !important;
    border-radius: 8px !important;
  }

  .deck-builder-popup .deck-builder-popup-stat strong {
    font-size: 0.75rem !important;
  }

  .deck-builder-popup .deck-builder-popup-stat > span {
    font-size: 1.05rem !important;
  }

  .deck-builder-popup .deck-builder-popup-stats.triple-row {
    gap: 11px !important;
  }

  .deck-builder-popup .deck-builder-popup-stats.two-row {
    gap: 11px !important;
  }

  .deck-builder-popup .deck-builder-popup-stats.single-row {
    gap: 8px !important;
  }

  .deck-builder-popup .deck-builder-popup-stats.single-row .deck-builder-popup-stat.full {
    padding: 10px 14px !important;
  }

  .deck-builder-popup #deckBuilderPopupEffect {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
  }

  .deck-builder-popup .deck-builder-popup-details .keyword {
    font-size: 0.77rem !important;
    padding: 3px 8px !important;
  }

  .deck-builder-popup #deckBuilderPopupType .type-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .deck-builder-popup #deckBuilderPopupColor img {
    width: 21px !important;
    height: 21px !important;
  }

  .deck-builder-popup #deckBuilderPopupRarity img {
    width: 20px !important;
    height: 20px !important;
  }

  .deck-builder-popup .might-icon {
    width: 21px !important;
    height: 21px !important;
  }

  .deck-builder-popup .deck-builder-popup-details .effect-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .deck-builder-popup .effect-icon-number {
    width: 20px !important;
    height: 20px !important;
    font-size: 13px !important;
    line-height: 20px !important;
  }

  .deck-builder-popup .deck-builder-popup-link {
    padding: 8px 14px !important;
    font-size: 0.7rem !important;
    border-radius: 8px !important;
  }

  .deck-builder-popup .deck-builder-popup-close {
    width: 28px !important;
    height: 28px !important;
    font-size: 1rem !important;
    top: 14px !important;
    right: 14px !important;
  }

  .deck-builder-popup .dbp-price-table-row {
    font-size: 0.77rem !important;
  }

  .deck-builder-popup .dbp-market-row {
    padding: 10px 14px !important;
  }

  .deck-builder-popup .dbp-market-logo {
    height: 20px !important;
  }
  
    /* ===== Save Deck Modal - Large Screen Fixes ===== */
  #save-deck-popup .save-modal {
    max-width: 700px !important;
    padding: 0;
  }
  
  .save-modal-header {
    padding: 28px 32px 20px;
  }
  
  .save-modal-header h3 {
    font-size: 1.8rem;
  }
  
  .save-modal-body {
    padding: 28px 32px;
    gap: 20px;
  }
  
  #save-deck-popup .save-modal-body input[type="text"],
  #save-deck-popup .save-modal-body input[type="url"],
  #save-deck-popup .save-modal-body textarea {
    padding: 14px;
    font-size: 18px;
  }

  #save-deck-popup .save-modal-body textarea {
    min-height: 140px;
  }
  
  .save-modal-footer {
    padding: 16px 32px 28px;
  }
  
  .save-modal-footer .button {
    padding: 14px 28px;
    font-size: 1.1rem;
    border-radius: 6px;
  }
  
  /* Deck Tags pills larger */
  .deck-tag-pill span {
    padding: 8px 16px;
    font-size: 1rem;
  }
  
  /* Viewability toggle alignment */
  #save-deck-popup .viewability-toggle .switch {
    width: 44px !important;
    height: 24px !important;
  }
  
  #save-deck-popup #deck-viewability-label {
    font-size: 1rem;
    width: 55px;
  }
  
  /* ===== Export Deck Modal - Large Screen Fixes ===== */
  #export-deck-popup .export-modal {
    max-width: 800px !important;
  }
  
  .export-modal-header {
    padding: 28px 32px 12px;
  }
  
  .export-modal-header h3 {
    font-size: 1.8rem;
  }
  
  .export-modal-subtitle {
    font-size: 1.1rem;
    margin-top: 8px;
  }
  
  /* Export Tabs */
  .export-modal-tabs {
    padding: 6px;
    border-radius: 12px;
    gap: 0;
  }
  
  .export-modal-tabs li {
    padding: 14px 20px;
    font-size: 1rem;
  }
  
  .export-modal-tabs li i {
    font-size: 20px;
  }
  
  .export-modal-tabs li span {
    font-size: 1rem;
  }
  
  /* Export Body */
  .export-modal-body {
    padding: 16px 32px 24px;
  }
  
  .tab-pane textarea {
    height: 200px !important;
    font-size: 1rem;
    padding: 12px;
  }
  
  /* Export Image Tools */
  .export-image-tools {
    gap: 12px;
  }
  
  .export-image-tools .button,
  .export-image-tools #generate-export-image,
  .export-image-tools #download-export-image {
    padding: 10px 16px !important;
    font-size: 1rem !important;
  }
  
  #deck-export-canvas {
    max-width: 100%;
  }
  
  /* Export Footer */
  .export-modal-footer {
    padding: 4px 24px 16px;
  }
  
  .export-modal-footer .button {
    padding: 14px 28px;
    font-size: 1.1rem;
    border-radius: 6px;
  }
  
  /* Copy buttons in export tabs */
  .tab-pane .button--gold {
    padding: 12px 24px !important;
    font-size: 1rem !important;
  }
 
}

/* ─── Registration Sheet Form ─── */
.registration-subtitle {
  color: #999;
  font-size: 0.85rem;
  margin: 0 0 10px;
  font-style: italic;
}
.registration-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.registration-form label {
  display: block;
  font-size: 0.75rem;
  color: #aaa;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.registration-form input[type="text"],
.registration-form input[type="date"] {
  width: 100%;
  padding: 8px 10px;
  background: #252525;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.9rem;
  box-sizing: border-box;
}
.registration-form input[type="text"]:focus,
.registration-form input[type="date"]:focus {
  border-color: var(--ps-gold-2);
  outline: none;
}
.reg-form-row-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.registration-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.registration-buttons .button {
  flex: 1;
  min-width: 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (max-width: 640px) {
  .registration-buttons {
    flex-direction: column;
  }
  .registration-buttons .button {
    width: 100%;
  }
  .export-modal-tabs li span {
    font-size: 0.65rem;
  }
  .export-modal-tabs li {
    padding: 6px 5px;
    gap: 3px;
  }
  .export-modal-tabs li i {
    font-size: 13px;
  }
}

/* ============== Save-Deck Popup - Fixed Positioning ============== */

/* Save Deck Modal - Complete Styles */
#save-deck-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: none;                          /* hidden by default */
  justify-content: center;
  align-items: center;                    /* Centered on desktop by default */
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* center the overlay when opened */
#save-deck-popup.open {
  display: flex !important;
  justify-content: center;
  /* Don't override align-items here - let media queries handle it */
}

#save-deck-popup .save-modal {
  position: relative; /* Changed from absolute to fix mobile positioning */
  box-sizing: border-box;
  width: 100%;
  max-width: 500px;
  background: #1e1e1e;
  color: #f5f5f5;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0 auto; /* Center in flex container */
  /* Removed absolute positioning properties that were causing issues */
}

.save-modal-header {
  padding: 20px 24px 16px;
  text-align: center;
  border-bottom: 1px solid #333;
}

.save-modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: #fff;
}

/* === Desktop: ONE ROW: Deck Name (grows) + Viewability (compact) === */
.save-modal-body {
  padding: 20px 24px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name toggle"
	"youtube youtube"
    "desc desc"
    "tags tags";
  grid-auto-rows: auto;
  grid-auto-flow: dense; /* allow backfilling so order doesn't matter */
  gap: 16px;
  align-items: center;
  background: #1e1e1e;
}

/* Name input (compat with multiple IDs) */
#save-deck-popup .save-modal-body #deck-name,
#save-deck-popup .save-modal-body input[name="deck_title"],
#save-deck-popup .save-modal-body #save-deck-title,
#save-deck-popup .save-modal-body input[type="text"] {
  grid-area: name;
  width: 100%;
  box-sizing: border-box; /* Ensure padding doesn't overflow */
}

  /* Place the YouTube input + note into the youtube rows */
#save-deck-popup .save-modal-body #deck-youtube-link {
  grid-area: youtube;
  width: 100%;
  box-sizing: border-box;
}

/* Viewability toggle on same line, right side */
#save-deck-popup .save-modal-body .viewability-toggle {
  grid-area: toggle;
  justify-self: end;
  align-self: center !important;
  margin: 0 !important;
}

/* Description below, full width (compat with multiple IDs/selectors) */
#save-deck-popup .save-modal-body #deck-description,
#save-deck-popup .save-modal-body textarea {
  grid-area: desc;
  min-height: 100px;
  max-height: 200px;
  resize: vertical;
  width: 100%;
  box-sizing: border-box; /* Ensure padding doesn't overflow */
}

#save-deck-popup .save-modal-body input[type="text"],
#save-deck-popup .save-modal-body input[type="url"],
#save-deck-popup .save-modal-body textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  background: #252525;
  color: #fff;
  border: 1px solid #444;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: inherit;
  height: auto;
  margin-bottom: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

#save-deck-popup .save-modal-body input[type="text"]:focus,
#save-deck-popup .save-modal-body input[type="url"]:focus,
#save-deck-popup .save-modal-body textarea:focus {
  outline: none;
  border-color: var(--ps-orange-deep);
  box-shadow: 0 0 0 2px rgba(227, 129, 25, 0.25);
}

#save-deck-popup .save-modal-body input[type="text"]::placeholder,
#save-deck-popup .save-modal-body input[type="url"]::placeholder,
#save-deck-popup .save-modal-body textarea::placeholder {
  color: #999;
}

#save-deck-popup .save-modal-body textarea {
  background: #111;
  border-color: #333;
  border-radius: 8px;
  line-height: 1.5;
}

/* Optional: tighten label next to toggle */
#save-deck-popup #deck-viewability-label {
  margin-left: 6px !important;
}

.save-modal-footer {
  background: #1e1e1e;
  padding: 12px 24px 20px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #333;
}

.save-modal-footer .button {
  padding: 10px 20px;
  font-size: 0.95rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.save-modal-footer #save-deck-cancel {
  background: #444;
  color: #eee;
}
.save-modal-footer #save-deck-cancel:hover {
  background: #555;
}

.save-modal-footer #save-deck-confirm {
  background: var(--ps-orange-deep);
  color: #111;
  font-weight: bold;
}
.save-modal-footer #save-deck-confirm:hover {
  background: #cc7416; /* slightly darker for hover */
}

/* Deck Tags Section in Save Modal */
.deck-tags-section {
  grid-area: tags;
  margin-top: 0; /* Remove margin since grid gap handles spacing */
}

.deck-tags-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #f5f5f5;
  font-size: 14px;
}

.deck-tags-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Hide the native checkbox */
.deck-tag-pill input[type="checkbox"] {
  display: none;
}

/* Pill styling - matches your type filter pills */
.deck-tag-pill span {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 0.85rem;
  background-color: #2a2a2a;
  color: #ddd;
  border: 2px solid #555;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.15s;
  user-select: none;
}

/* Hover state */
.deck-tag-pill span:hover {
  background-color: #3d3d3d;
  border-color: #ccc;
}

/* Active/checked state */
.deck-tag-pill input[type="checkbox"]:checked + span {
  background: var(--ps-indigo);
  color: #fff;
  border-color: var(--ps-gold);
  transform: scale(1.03);
}


/* Deck tags max selection styling */
.deck-tag-pill.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.deck-tag-pill.disabled input[type="checkbox"] {
  cursor: not-allowed;
}

.deck-tag-pill.disabled span {
  color: #999;
  cursor: not-allowed;
}

/* =============== DESKTOP - LOWER THE POPUP =============== */
@media (min-width: 769px) {
  #save-deck-popup {
    align-items: center !important; /* Force centering on desktop */
    padding: 20px;
    padding-top: 15vh !important; /* Lower it on desktop */
    padding-bottom: 5vh;
  }
}

/* =============== TABLET/LARGE MOBILE RESPONSIVE =============== */
@media (max-width: 768px) {
  /* KEEP CENTERED on tablets, just adjust spacing */
  #save-deck-popup {
    align-items: center !important; /* Force centering on tablets */
    padding: 15px;
    padding-top: 12vh; /* Add some top spacing but keep centered */
    padding-bottom: 8vh; /* Add bottom spacing too */
  }
  
  #save-deck-popup .save-modal {
    max-width: 95%;
    margin: 0 auto;
    max-height: 80vh; /* Prevent modal from being too tall */
    overflow-y: auto;
  }
  
  .save-modal-body {
    padding: 16px;
    /* Keep desktop grid for tablets */
  }
  
  .save-modal-footer {
    padding: 12px 16px;
  }

  .save-modal-footer .button {
    flex: 1;
    font-size: 16px; /* Prevent iOS zoom */
    padding: 12px 20px;
  }
}

/* =============== SMALL MOBILE - POSITION FROM TOP =============== */
@media (max-width: 480px) {
  /* THIS IS WHERE WE MOVE TO TOP POSITIONING */
  #save-deck-popup {
    align-items: flex-start !important; /* Override centering for small screens */
    padding: 5px;
    padding-top: 10vh !important; /* Position from top on small screens */
    padding-bottom: 5vh;
  }
  
  /* KEEP NAME + TOGGLE ON SAME LINE FOR MOBILE */
  #save-deck-popup .save-modal-body {
    display: grid !important;
    grid-template-columns: 1fr auto !important; /* Name takes space, toggle is compact */
    grid-template-areas:
      "name toggle"
	  "youtube youtube"
      "desc desc"
      "tags tags" !important;
    gap: 12px;
    padding: 12px 8px;
    align-items: center; /* Center items in each row */
  }
  
  /* Name input - takes most of the row */
  #save-deck-popup .save-modal-body #deck-name,
  #save-deck-popup .save-modal-body input[name="deck_title"],
  #save-deck-popup .save-modal-body #save-deck-title,
  #save-deck-popup .save-modal-body input[type="text"] {
    grid-area: name;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  
  /* Viewability toggle on mobile — stacked vertically (switch on top,
     "Public" / "Private" label underneath) so the whole control takes a
     narrow column instead of a wide horizontal row. Frees up more
     horizontal space for the deck-name input on the same line. */
  #save-deck-popup .save-modal-body .viewability-toggle {
    grid-area: toggle;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    flex-shrink: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  }
  #save-deck-popup .save-modal-body #deck-viewability-label {
    margin-left: 0 !important;
    font-size: 0.7rem;
    line-height: 1;
  }
  
  /* Description - full width on its own row */
  #save-deck-popup .save-modal-body #deck-description,
  #save-deck-popup .save-modal-body textarea {
    grid-area: desc;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  
  /* Tags - full width on its own row */
  .deck-tags-section {
    grid-area: tags;
  }
  
  .save-modal-header {
    padding: 16px 8px 12px;
  }
  .save-modal-footer {
    padding: 12px 8px 16px;
  }
  
  .save-modal-header h3 {
    font-size: 1.3rem;
  }
  
  /* Fix deck tags on mobile */
  .deck-tags-pills {
    gap: 4px;
    justify-content: center; /* Center the tags */
  }

  /* Tighter pills on mobile so the save-deck popup doesn't get crowded
     when there are many tags. Border thinned from 2px → 1px to compensate
     for the smaller padding. */
  .deck-tag-pill span {
    padding: 3px 9px;
    font-size: 0.72rem;
    border-width: 1px;
  }
}

/* Fix for iOS Safari viewport height issues */
@supports (-webkit-touch-callout: none) {
  #save-deck-popup {
    height: -webkit-fill-available;
  }
}

/* Prevent body scroll when popup is open */
body.save-popup-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ============================================================
   IMPORT DECK POPUP (Tabbed - Matches Export Style)
============================================================ */

#import-deck-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#import-deck-popup.open {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/* Modal binder */
#import-deck-popup .import-modal {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  background: #1e1e1e;
  color: #f5f5f5;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
  transform: none;
}

/* Header */
.import-modal-header {
  padding: 20px 24px 8px;
  text-align: center;
}

.import-modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: #fff;
}

.import-modal-subtitle {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: #aaa;
}

/* Tabs */
.import-modal-tabs {
  display: flex;
  gap: 8px;
  padding: 0 8px;
  margin: 0 auto;
  list-style: none;
  justify-content: center;
}

.import-modal-tabs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #2a2a2a;
  color: #ccc;
  cursor: pointer;
  user-select: none;
  transition: background .2s, border-color .2s, color .2s, transform .1s;
}

.import-modal-tabs li i {
  font-size: 16px;
  line-height: 1;
}

.import-modal-tabs li span {
  font-size: 0.9rem;
  line-height: 1.1;
  white-space: nowrap;
}

.import-modal-tabs li:hover {
  background: #3a3a3a;
  border-color: #555;
}

.import-modal-tabs li.active {
  background: var(--ps-indigo);
  color: #fff;
  border-color: var(--ps-gold-2);
}

/* Desktop: grouped strip style */
@media (min-width: 641px) {
  .import-modal-tabs {
    display: inline-flex;
    gap: 0;
    padding: 4px;
    border: 1px solid #444;
    border-radius: 10px;
    background: #2a2a2a;
    width: max-content;
    margin: 0 auto;
    justify-content: center;
  }
  
  .import-modal-tabs li {
    border: none;
    background: transparent;
    color: #ccc;
    padding: 10px 18px;
    border-radius: 0;
  }
  
  .import-modal-tabs li:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  
  .import-modal-tabs li:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  
  .import-modal-tabs li + li {
    border-left: 1px solid #3a3a3a;
  }
  
  .import-modal-tabs li.active {
    background: var(--ps-indigo);
    color: #fff;
  }
}

/* Body & Panes */
.import-modal-body {
  background: #1e1e1e;
  padding: 16px 24px;
}

.import-tab-pane {
  display: block;
}

.import-tab-pane.hidden {
  display: none;
}

.import-tab-pane textarea {
  width: 100%;
  height: 180px;
  margin-bottom: 8px;
  background: #252525;
  color: #fff;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 12px;
  resize: vertical;
  font-family: monospace;
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

.import-tab-pane textarea:focus {
  outline: none;
  border-color: var(--ps-orange-deep);
  box-shadow: 0 0 0 2px rgba(227, 129, 25, 0.25);
}

.import-format-hint {
  margin: 0;
  font-size: 0.8rem;
  color: #666;
  line-height: 1.4;
}

/* Footer */
.import-modal-footer {
  background: #1e1e1e;
  padding: 12px 24px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #333;
}

.import-modal-footer .button {
  padding: 10px 20px;
  font-size: 0.95rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.import-modal-footer #import-deck-cancel {
  background: #444;
  color: #eee;
}

.import-modal-footer #import-deck-cancel:hover {
  background: #555;
}

.import-modal-footer #import-deck-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Deck code input - single line */
#import-tab-deckcode input[type="text"] {
  width: 100%;
  height: 44px;
  margin-bottom: 8px;
  background: #252525;
  color: #fff;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 0 12px;
  font-family: monospace;
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

#import-tab-deckcode input[type="text"]:focus {
  outline: none;
  border-color: var(--ps-orange-deep);
  box-shadow: 0 0 0 2px rgba(227, 129, 25, 0.25);
}

/* Mobile layout */
@media (max-width: 640px) {
  #import-deck-popup .import-modal {
    max-width: 95%;
  }
  
  .import-modal .import-modal-header,
  .import-modal .import-modal-body,
  .import-modal .import-modal-footer {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  .import-modal-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
  }
  
  .import-modal-tabs li {
    padding: 8px 6px;
    border-radius: 6px;
    gap: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 54px;
    border: 1px solid #444;
    background: #2a2a2a;
  }
  
  .import-modal-tabs li i {
    font-size: 18px;
  }
  
  .import-modal-tabs li span {
    font-size: 11px;
    line-height: 1.1;
    white-space: normal;
    text-align: center;
  }
  
  .import-tab-pane textarea {
    height: 150px;
  }
  
  .import-modal-footer {
    flex-direction: row;
    gap: 8px;
  }
  
  .import-modal-footer .button {
    flex: 1;
    justify-content: center;
  }
}

/* Large screens */
@media screen and (min-width: 1800px) {
  #import-deck-popup .import-modal {
    max-width: 750px !important;
  }
  
  .import-modal-header h3 {
    font-size: 1.8rem;
  }
  
  .import-modal-subtitle {
    font-size: 1.1rem;
  }
  
  .import-modal-tabs li {
    padding: 12px 22px;
    font-size: 1rem;
  }
  
  .import-tab-pane textarea {
    height: 220px;
    font-size: 1rem;
    padding: 14px;
  }
  
  .import-format-hint {
    font-size: 0.9rem;
  }
  
  .import-modal-footer .button {
    padding: 14px 28px;
    font-size: 1.1rem;
  }
}

/* ============== Export-Deck Popup ============== */
#export-deck-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#export-deck-popup.open {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/* Modal binder */
#export-deck-popup .export-modal {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  background: #1e1e1e;
  color: #f5f5f5;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
  transform: none;
}

/* Header */
.export-modal-header {
  padding: 20px 24px 8px;
  text-align: center;
}
.export-modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: #fff;
}
.export-modal-subtitle {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: #aaa;
}

/* Tabs – base */
.export-modal-tabs {
  display: flex;
  gap: 8px;
  padding: 0 8px;
  margin: 0 auto;
  list-style: none;
  justify-content: center;
}
.export-modal-tabs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #2a2a2a;
  color: #ccc;
  cursor: pointer;
  user-select: none;
  transition: background .2s, border-color .2s, color .2s, transform .1s;
}
.export-modal-tabs li i {
  font-size: 16px;
  line-height: 1;
}
.export-modal-tabs li span {
  font-size: 0.9rem;
  line-height: 1.1;
  white-space: nowrap;
}
.export-modal-tabs li.active {
  background: var(--ps-indigo);
  color: #fff;
  border-color: var(--ps-gold-2);
}

/* Desktop: center as a single grouped strip */
@media (min-width: 641px) {
  .export-modal-tabs {
    display: inline-flex;
    gap: 0;
    padding: 4px;
    border: 1px solid #444;
    border-radius: 10px;
    background: #2a2a2a;
    width: max-content;
    margin: 0 auto;
    justify-content: center;
  }
  .export-modal-tabs li {
    border: none;
    background: transparent;
    color: #ccc;
    padding: 10px 14px;
    border-radius: 0; /* group handles rounding */
  }
  .export-modal-tabs li:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  .export-modal-tabs li:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .export-modal-tabs li + li {
    border-left: 1px solid #3a3a3a; /* inner dividers */
  }
  .export-modal-tabs li.active {
    background: var(--ps-indigo);
    color: #fff;
  }
}

/* Body & Panes */
.export-modal-body {
  background: #1e1e1e;
  padding: 8px 24px 4px 24px;
}
.tab-pane { display: none; }
.tab-pane:not(.hidden) { display: block; }
.tab-pane textarea {
  width: 100%;
  height: 150px;
  margin-bottom: 12px;
  background: #252525;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 8px;
  resize: none;
  font-family: monospace;
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}
.tab-pane textarea:focus {
  outline: none;
  border-color: var(--ps-gold-2);
  box-shadow: 0 0 0 2px rgba(218, 165, 32, 0.25);
}

/* Footer & Buttons */
.export-modal-footer {
  background: #1e1e1e;
  padding: 2px 24px 6px;
  text-align: right;
}
.export-modal-footer .button {
  background: #444;
  color: #eee;
}
.export-modal-footer .button:hover {
  background: #555;
}
.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 0.95rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.button--gold {
  background: var(--ps-gold-metal);
  color: #111;
  font-weight: bold;
  transition: background 0.2s;
}
.button--gold:hover { background: #c09c2f; }

/* Export trigger button (outside modal) */
.export-deck-btn {
  background: #2a2a2a;
  border: 1px solid #444;
  color: #f5f5f5;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.export-deck-btn:hover {
  background: #3a3a3a;
  border-color: #666;
}

/* Export image tab */
.export-image-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
#deck-export-canvas {
  background: #0e0e0f;
  max-width: 700px;
  width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.export-image-tools .button,
.export-image-tools #generate-export-image,
.export-image-tools #download-export-image {
  padding: 4px 6px;
  font-size: 0.9rem;
  line-height: 1;
  border-radius: 6px;
  gap: 6px;
  min-width: auto;
}
.export-image-tools .button i,
.export-image-tools #generate-export-image i,
.export-image-tools #download-export-image i {
  font-size: 0.9em;
}
.export-image-tools .button,
#generate-export-image,
#download-export-image {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.export-image-tools .button i,
#generate-export-image i,
#download-export-image i {
  display: inline-block;
  line-height: 1;
}

/* Mobile layout for export tabs */
@media (max-width: 640px) {
  .export-modal .export-modal-header,
  .export-modal .export-modal-body,
  .export-modal .export-modal-footer {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .export-modal-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 0;
    margin: 0;
    border: none;            /* undo desktop group border */
    background: transparent; /* undo desktop group bg */
  }
  .export-modal-tabs li {
    padding: 6px 4px;
    border-radius: 6px;
    gap: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 54px;
    border: 1px solid #444;  /* restore individual pills on mobile */
    background: #2a2a2a;
  }
  .export-modal-tabs li i { font-size: 18px; }
  .export-modal-tabs li span {
    font-size: 11px;
    line-height: 1.1;
    white-space: normal;
    text-align: center;
  }
}

/* Magnify Icon for Available Cards */
.builder-card {
  position: relative;
}


.quantity-controls.for-available {
  position: absolute;
  bottom: 6px;
  gap:2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 20px;            /* pill shape */
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  font-size: 0;                   /* hide any extra whitespace */
  z-index: 10;
}

.quantity-controls.for-available button {
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 18px;
  font-weight: bold;
  color: #e0e0e0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover/focus states — gated by (hover: hover) for the same reason as
   .builder-card:hover above (touch :hover sticks after tap). */
@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .quantity-controls.for-available button:hover {
    background: rgba(227, 129, 25, 0.8);
    transform: scale(1.05);
    border-radius: 50%;
    outline: none;
  }
}

/* :active tap feedback — fires during the press, clears immediately on
   release (no sticky-state issue like :hover has on touch). Provides the
   tactile "I clicked it" confirmation on mobile that we lost when gating
   :hover behind (hover: hover). */
.quantity-controls.for-available button:active {
  background: rgba(227, 129, 25, 0.85);
  transform: scale(0.92);
  border-radius: 50%;
  outline: none;
}

/* Disabled state */
.quantity-controls.for-available button:disabled {
  color: #777;
  cursor: default;
  transform: none;
}

/* Quantity display */
.quantity-controls.for-available .builder-card-quantity {
  min-width: 24px;
  margin: 0 6px;
  text-align: center;
  font-size: 14px;
  color: #fff;
}


/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #252525;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff9130;
}
/* ========== FORCE WRAP SELECTED CARD NAMES ON MOBILE ========== */
@media (max-width: 768px) {
  /* tighter card row padding — reclaim space on left & right */
  .shared-cards-container:not(.deck-grid-mode) .deck-card {
    padding-left: 8px !important;
    padding-right: 6px !important;
  }

  /* allow wrapping in both panes (list mode only) */
  .shared-cards-container:not(.deck-grid-mode) .deck-card .card-info {
    flex-wrap: wrap !important;
  }
  #selected-cards:not(.deck-grid-mode) .deck-card .card-info,
  #sideboard-cards:not(.deck-grid-mode) .deck-card .card-info {
    flex-wrap: wrap !important;
  }

  /* override ellipsis & nowrap in both panes (list mode only) */
  #selected-cards:not(.deck-grid-mode) .deck-card .card-name,
  #sideboard-cards:not(.deck-grid-mode) .deck-card .card-name {
    display: inline-block;
    max-width: 20ch;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* thumbnail spacing — tighter gap to quantity controls */
  .deck-card-thumb-inline {
    margin-right: 10px;
  }
  #selected-cards:not(.deck-grid-mode) .deck-card-thumb-inline,
  #sideboard-cards:not(.deck-grid-mode) .deck-card-thumb-inline {
    transform: scale(1.7) !important;
  }

  /* less gap between image and +/- controls (exclude grid mode) */
  #selected-cards:not(.deck-grid-mode) .quantity-controls,
  #sideboard-cards:not(.deck-grid-mode) .quantity-controls {
    gap: 4px !important;
    padding-left: 6px !important;
  }

  /* quantity‑control buttons */
  #selected-cards .quantity-controls button,
  #sideboard-cards .quantity-controls button {
    width: 24px !important;
    height: 24px !important;
    line-height: 22px !important;
    font-size: 14px !important;
    padding: 0 !important;
  }

  /* the big number label */
  #selected-cards .quantity-controls:not(.for-available) .builder-card-quantity,
  #sideboard-cards .quantity-controls:not(.for-available) .builder-card-quantity {
    font-size: 16px;
  }

  .shared-cards-container .deck-card .card-name {
    font-size: 0.8rem !important;
  }

}
@media (max-width: 480px) {
  /* shrink font on tiniest phones */
  .shared-cards-container .deck-card .card-name {
    font-size: 0.8rem !important;
  }
}

/* ============================================================
   STATS TAB STYLES
============================================================ */

#stats-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

#stats-cards {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  border: 1px solid #333;
  background: #252525;
  border-radius: 6px;
  padding: 10px;
}

#stats-cards .deck-scroll-container {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

/* Stats Color Icons */
.stats-color-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.stats-color-icons .color-icon-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}

.stats-color-icons .color-icon {
  width: 28px;
  height: 28px;
}

/* Color summary uses a CSS dot (matches single-decks) instead of pulling a color image */
.stats-color-icons .color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.stats-color-icons .color-count {
  position: static;
  bottom: auto;
  right: auto;
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #e0e0e0;
  line-height: normal;
}

/* Stats Sections — card-style containers */
.stats-section {
  margin-bottom: 8px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px 8px;
}

.stats-section .deck-section-title {
  display: block;
  background: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 0 5px 0;
  margin-bottom: 8px;
  font-size: 0.65rem;
  letter-spacing: 0.8px;
  color: #888;
}

.stats-section .deck-section-title:hover {
  background: none;
}

.stats-section canvas {
  background: transparent;
  border-radius: 4px;
  padding: 0;
  width: 100% !important;
}

/* Fixed heights for each chart to prevent resizing */
#builderEnergyCurveChart {
  height: 140px !important;
  max-height: 140px !important;
}

#builderTypeChart {
  height: 110px !important;
  max-height: 110px !important;
}

#builderPowerChart {
  height: 90px !important;
  max-height: 90px !important;
}

/* Stats Tab - Price Display */
#stats-price-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.stats-price-display {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(40, 40, 40, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.stats-price-display + .stats-price-display {
  margin-left: 8px;
}

.stats-price-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #aaa;
}

.stats-price-amount {
  font-size: 1rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Adjust stats color icons layout to accommodate price */
.stats-color-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* Stats Tab - Deck Value (green) */
.stats-price-value {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
  border-color: rgba(16, 185, 129, 0.3);
}

.stats-price-value .stats-price-label {
  color: #6ee7b7;
}

.stats-price-value .stats-price-amount {
  color: #10b981;
}

/* Stats Tab - Missing Price / Cost to Complete (red) */
.stats-price-missing {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.1) 100%);
  border-color: rgba(239, 68, 68, 0.3);
}

.stats-price-missing .stats-price-label {
  color: #f87171;
}

.stats-price-missing .stats-price-amount {
  color: #ef4444;
}

/* Stats Tab - Complete indicator (green) */
.stats-price-complete {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
  border-color: rgba(16, 185, 129, 0.3);
}

.stats-price-complete .stats-price-label {
  color: #10b981;
  font-weight: 600;
}

/* Mobile adjustments for stats */
@media (max-width: 768px) {
  .stats-color-icons {
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 4px;
  }
  
  .stats-color-icons .color-icon {
    width: 26px;
    height: 26px;
  }
  
  .stats-color-icons .color-icon-wrapper {
    gap: 2;
  }
  
  .stats-color-icons .color-count {
    font-size: 0.75rem;
  }
  
  .stats-section canvas {
    max-height: 100px;
  }
  
  #builderPowerChart {
    max-height: 60px !important;
  }
  
  /* Price container - keep everything on one line */
  #stats-price-container {
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: center;
    margin-bottom: 6px;
  }
  
  .stats-price-display {
    padding: 3px 6px;
    gap: 3px;
    flex-shrink: 1;
    min-width: 0;
  }
  
  .stats-price-display + .stats-price-display {
    margin-left: 4px;
  }
  
  .stats-price-label {
    font-size: 0.5rem;
  }
  
  .stats-price-amount {
    font-size: 0.75rem;
  }
  
  .stats-price-complete .stats-price-label {
    font-size: 0.55rem;
  }
}

/* Large screen adjustments */
@media screen and (min-width: 1800px) {
  .stats-price-display {
    padding: 8px 12px;
  }
  
  .stats-price-label {
    font-size: 0.85rem;
  }
  
  .stats-price-amount {
    font-size: 1.6rem;
  }
  
  .stats-price-breakdown {
    font-size: 0.8rem;
  }
  
    #builderEnergyCurveChart {
    height: 210px !important;
    max-height: 210px !important;
  }

  #builderTypeChart {
    height: 190px !important;
    max-height: 190px !important;
  }

  #builderPowerChart {
    height: 130px !important;
    max-height: 130px !important;
  }
  
}

/*------------------ Deck Viewer Plugin styles --------------*/
.deck-builder-viewer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0px;
}

.deck-builder-viewer-container {
  border: 1px solid #444;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25), 0 3px 6px rgba(125, 155, 155, 0.2);
  padding: 8px;
  background-color: #1f1f24;
  margin-top: 8px;
  color: #fff;
  transition: box-shadow 0.3s ease;
}

.deck-builder-viewer-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

@keyframes deck-card-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

.deck-builder-viewer-cards .deck-builder-card {
  position: relative;
  background-color: #2a2a2a;
  overflow: hidden;
  padding-top: 140%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: deck-card-pulse 1.8s ease-in-out infinite;
}

.deck-builder-viewer-cards .deck-builder-card.loaded {
  animation: none;
}

.deck-builder-viewer-cards .deck-builder-card-image {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.deck-builder-viewer-cards .deck-builder-card-image.loaded {
  opacity: 1;
}

.deck-builder-viewer-cards .deck-builder-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(255, 145, 48, 0.6);
  cursor: pointer;
  z-index: 10;
  position: relative;
}

.deck-builder-separator {
  margin: 16px 0 8px;
  padding-top: 8px;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: #ccc;
  text-align: left;
  border-top: 1px solid transparent;
  border-image: linear-gradient(
    to right,
    transparent 0%,
    #444 20%,
    #444 80%,
    transparent 100%
  ) 1;
}

#available-cards .builder-card.loading,
.builder-card.loading {
  position: relative;
  background-color: #2a2a2a;
  min-height: 180px;
  overflow: hidden;
  border-radius: 8px;
}

#available-cards.loading .builder-card.loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(68, 68, 68, 0.8) 0%,
    rgba(102, 102, 102, 0.6) 50%,
    rgba(68, 68, 68, 0.8) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  z-index: 1;
}

/* ============================================================
   LOAD MORE - SKELETON CARDS LOADING INDICATOR
============================================================ */

.loading-skeleton-row {
  display: contents;
}

.loading-skeleton-row .builder-card.loading {
  flex: 0 0 calc(20% - 8px);
  aspect-ratio: 2.5 / 3.5;
  min-height: 180px;
  background: #2a2a2a;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.loading-skeleton-row .builder-card.loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(68, 68, 68, 0.8) 0%,
    rgba(102, 102, 102, 0.6) 50%,
    rgba(68, 68, 68, 0.8) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  z-index: 1;
  border-radius: 8px;
}

.loading-more-cards {
  display: none !important;
}

@media (max-width: 1024px) {
  .loading-skeleton-row .builder-card.loading {
    flex: 0 0 calc(33.333% - 8px);
    max-width: calc(33.333% - 8px);
  }
}

@media (max-width: 768px) {
  .loading-skeleton-row .builder-card.loading {
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
  }
}

@media (min-width: 670px) and (max-width: 1000px) {
  .loading-skeleton-row .builder-card.loading {
    flex: 0 0 calc(25% - 8px);
    max-width: calc(25% - 8px);
  }
}

@media screen and (min-width: 1800px) {
  .loading-skeleton-row .builder-card.loading {
    flex: 0 0 calc((100% - 48px) / 6);
    max-width: calc((100% - 48px) / 6);
  }
}

@media (max-width: 1024px) {
  .deck-builder-viewer-cards {
    grid-template-columns: repeat(5, 1fr);
  }
}

.deck-builder-card-image {
  width: 100%;
  height: auto;
  max-width: 190px;
}

.deck-builder-missing-code {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border-radius: 5px;
}

.deck-export-footer {
  display: none !important;
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  text-align: center;
  color: #fff;
  margin-top: 6px;
  font-size: 14px;
}

/* Button wrapper */
.deck-builder-button-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 16px;
  position: relative;
  z-index: 100;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

/* Deck Code button */
.deck-builder-copy-button {
  background: hsl(212.02deg 100% 46.38%);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
}

.deck-builder-copy-button:hover {
  background: hsl(212.02deg 100% 52%);
}

/* Pixelborn button */
.deck-builder-pixel-button {
  background: #e74c3c;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 7px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
}

.deck-builder-pixel-button:hover {
  background: #c0392b;
}

/* TTS Code button */
.deck-builder-tts-button {
  background: #6f42c1;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 7px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
}

.deck-builder-tts-button:hover {
  background: #59359c;
}

/* Text export button */
.deck-builder-text-button {
  background: #17a2b8;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 7px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
}

.deck-builder-text-button:hover {
  background: #138496;
}

/* Download/Image button */
.deck-builder-download-button {
  background: #28a745;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 7px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
}

.deck-builder-download-button:hover {
  background: #218838;
}

/* Open in Builder button */
.deck-builder-open-button {
  background: #ff6b35;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 7px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.deck-builder-open-button:hover {
  background: #e55a2b;
}

.deck-builder-open-button i {
  font-size: 13px;
}

/* Total cards counter */
.deck-builder-total-cards {
  background: #f39c12;
  color: #000;
  text-shadow: 0 1px 1px rgba(255,255,255,0.5);
  padding: 6px 10px;
  border-radius: 5px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  font-size: 14px;
  margin-left: auto;
}

/* Export dropdown (hidden on desktop) */
.deck-export-dropdown {
  display: none;
  position: relative;
  z-index: 150;
}

.deck-export-toggle {
  background: var(--ps-indigo-3);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 7px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
}

.deck-export-toggle:hover {
  background: #5a52d5;
}

.deck-export-dropdown-menu {
  display: none;
}

.deck-export-dropdown-menu.show {
  display: block;
}

/* ============================================
   MOBILE STYLES
   ============================================ */
@media (max-width: 768px) {
  .deck-builder-viewer-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }
  
  .deck-builder-quantity {
    font-size: 18px;
    width: 28px;
    height: 28px;
  }
  
  .deck-builder-button-wrapper {
    padding: 12px 8px;
    gap: 5px;
  }

  .deck-builder-total-cards {
    font-size: 11px;
    padding: 8px 4px;
  }

  /* Hide individual code buttons on mobile */
  .deck-builder-copy-button,
  .deck-builder-tts-button,
  .deck-builder-pixel-button,
  .deck-builder-text-button {
    display: none !important;
  }

  /* Show export dropdown on mobile */
  .deck-export-dropdown {
    display: inline-flex !important;
    order: 1;
  }

  /* Button order on mobile */
  .deck-builder-download-button {
    order: 2;
    font-size: 12px;
    padding: 8px 10px;
  }
  
  .deck-builder-open-button {
    display: flex !important;
    order: 3;
    font-size: 12px;
    padding: 8px 10px;
  }
  
  .deck-builder-total-cards {
    order: 4;
    margin-left: auto;
  }

  /* Export dropdown menu styles */
  .deck-export-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    min-width: 140px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    overflow: hidden;
  }

  .deck-export-dropdown-menu button {
    display: block;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: #fff;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .deck-export-dropdown-menu button:last-child {
    border-bottom: none;
  }

  .deck-export-dropdown-menu button:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .deck-export-dropdown-menu button i {
    margin-right: 8px;
    width: 14px;
  }
}

/* ============================================
   POPUP STYLES
   ============================================ */
.deck-builder-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* On touch devices, suppress native long-press behaviors INSIDE the card
   popup — text selection (e.g. on TCG prices) and the image context menu
   ("Open image in new tab", "Save image"). The popup is itself opened by
   a long-press gesture, so any default long-press behavior on its
   contents would fire alongside our handler and feel buggy. The
   `.is-touching` class is set by the JS shim at the top of deck-builder.js
   on any touchstart, so desktop mouse users still get text-select and
   right-click menu inside the popup. */
html.is-touching .deck-builder-popup,
html.is-touching .deck-builder-popup * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html.is-touching .deck-builder-popup img {
  -webkit-user-drag: none;
  pointer-events: none;
}

#deckBuilderPopup {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity 0s !important;
  display: flex !important;
  pointer-events: none !important;
}

#deckBuilderPopup.show {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.12s ease-in !important;
}

/* Lift popup up on normal screens (not ultrawide or mobile) */
@media (min-width: 769px) and (max-width: 1799px) {
  .deck-builder-popup {
    padding-bottom: 4%;
  }
}

.deck-builder-popup-content {
  position: relative;
  background: #1a1a1a;
  color: #f5f5f5;
  width: 95%;
  max-width: 1100px;
  border-radius: 12px;
  display: flex;
  gap: 16px;
  padding: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  transform: translateZ(0);
  will-change: transform;
  contain: layout style paint;
}

.effect-icon, 
.effect-icon-might,
.type-icon {
  contain: layout;
  display: inline-block;
}

.deck-builder-popup-image {
  flex: 0 0 auto;
  padding: 10px;
}

.deck-builder-popup-image img {
  max-width: 400px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.deck-builder-popup-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 14px 0;
  gap: 0;
  overflow-x: hidden;
}

.deck-builder-popup-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 0;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  color: #fff;
  transition: background 0.2s ease;
  background: #333;
}

.deck-builder-popup-header span {
  white-space: nowrap;
}

#deckBuilderPopupCardId,
#deckBuilderPopupCardName {
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: bold;
  white-space: nowrap;
  font-size: 20px;
  line-height: 1.2;
}

#deckBuilderPopupCardName {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tabs ─────────────────────────────────────────────────────────── */

.deck-builder-popup-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #2a2a2a;
  margin: 10px 0 0;
}

.deck-builder-popup-tab {
  flex: 1;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  text-align: center;
}

.deck-builder-popup-tab:hover {
  color: #ccc;
}

.deck-builder-popup-tab.active {
  color: #fff;
  border-bottom-color: var(--ps-orange-burnt);
}

.deck-builder-popup-tab-panel {
  display: none;
}

.deck-builder-popup-tab-panel.active {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
}

/* ── Icons ────────────────────────────────────────────────────────── */

#deckBuilderPopupType .type-icon {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 4px;
  width: 20px;
  height: 20px;
}

#deckBuilderPopupColor img {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 4px;
}

#deckBuilderPopupRarity img {
  display: inline-block !important;
  vertical-align: middle !important;
  transform: translateY(-1px) !important;
}

.might-icon {
  filter: invert(1) brightness(2);
  margin-right: 4px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.effect-icon {
  vertical-align: middle;
  display: inline-block;
}

.effect-icon-might {
  filter: brightness(0) invert(1);
}

#deckBuilderPopupEffect {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 2;
}

#deckBuilderPopupEffect .effect-icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.effect-icon-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  line-height: 18px;
}

.type-icon {
  margin-right: 4px;
}

/* ── Stat Grid ───────────────────────────────────────────────────── */

.deck-builder-popup-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.deck-builder-popup-stat.tags {
  grid-column: 1 / -1;
}

.deck-builder-popup-stat:nth-child(5),
.deck-builder-popup-stat:nth-child(6) {
  grid-column: 1 / -1;
}

.deck-builder-popup-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #222;
  padding: 8px 12px;
  border-radius: 6px;
  min-width: 0;
}

.deck-builder-popup-stat strong {
  font-size: 0.75rem;
  color: #888;
  font-weight: 600;
  margin-right: 0;
}

.deck-builder-popup-stat > span {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ddd;
}

/* ── Prices Tab ──────────────────────────────────────────────────── */

.deck-builder-popup-prices-loading {
  text-align: center;
  padding: 24px;
  color: #888;
}

.deck-builder-popup-prices-empty {
  text-align: center;
  padding: 24px;
  color: #666;
}

.deck-builder-popup-prices-content .dbp-price-table {
  margin-bottom: 8px;
}

.deck-builder-popup-prices-content .dbp-price-table-row {
  display: grid;
  grid-template-columns: 56px 1fr 1fr 1fr;
  gap: 4px;
  margin-bottom: 2px;
}

.deck-builder-popup-prices-content .dbp-price-table-cell {
  padding: 6px 4px;
  text-align: center;
  border-radius: 4px;
}

.deck-builder-popup-prices-content .dbp-price-table-label {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #ccc;
  display: flex;
  align-items: center;
}

.deck-builder-popup-prices-content .dbp-price-table-label-foil {
  background: linear-gradient(90deg, var(--ps-indigo-light), var(--ps-gold-metal), var(--ps-indigo-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.deck-builder-popup-prices-content .dbp-price-table-col-label {
  font-size: 11px;
  color: #666;
  font-weight: 500;
}

.deck-builder-popup-prices-content .dbp-price-table-header .dbp-price-table-cell {
  padding-bottom: 2px;
}

.deck-builder-popup-prices-content .dbp-price-table-value {
  background: #222;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.deck-builder-popup-prices-content .dbp-market-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #222;
  border-radius: 8px;
  margin-bottom: 10px;
}

.deck-builder-popup-prices-content .dbp-market-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #ccc;
  transition: color 0.2s ease;
}

.deck-builder-popup-prices-content .dbp-market-link:hover {
  color: #fff;
}

.deck-builder-popup-prices-content .dbp-market-logo {
  height: 22px;
  width: auto;
  object-fit: contain;
}

.deck-builder-popup-prices-content .dbp-market-label {
  font-size: 0.85rem;
  font-weight: 500;
}

/* ── Price Historical Averages Label ──────────────────────────────── */

.dbp-price-hist-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 10px 0 4px;
}

/* ── Sparkline ───────────────────────────────────────────────────── */

.dbp-price-sparkline-wrap {
  position: relative;
  margin-top: 10px;
}

.dbp-price-sparkline {
  width: 100%;
  height: 80px;
  display: block;
}

.dbp-price-sparkline-tooltip {
  display: none;
  position: absolute;
  top: 4px;
  left: 0;
  background: rgba(30, 30, 30, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid #444;
}

.dbp-price-sparkline-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 4px 0 2px;
}

.dbp-price-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #888;
}

.dbp-price-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ── Price Change Indicators ──────────────────────────────────────── */

.dbp-price-changes {
  padding: 2px 0;
}

.dbp-price-change {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 0;
}

.dbp-price-change.dbp-price-up {
  color: #4caf50;
}

.dbp-price-change.dbp-price-down {
  color: #f44336;
}

/* View Card link */
.deck-builder-popup-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  align-self: flex-end;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--ps-orange-burnt) 0%, var(--ps-orange-burnt-2) 100%);
  border: 1px solid rgba(180, 90, 20, 0.3);
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.deck-builder-popup-link:hover {
  background: linear-gradient(135deg, var(--ps-orange-burnt-2) 0%, #b35818 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.deck-builder-popup-link:active {
  transform: translateY(0);
  background: linear-gradient(135deg, #b35818 0%, #a04810 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}


/* battlefield image condiition */

/* battlefield image: rotate + responsive bump */
#deckBuilderPopup .deck-builder-popup-image img.horizontal-card {
  transform: rotate(90deg);
  transform-origin: center center;
  max-width: 280px;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
}


@media (max-width: 1024px) {

  #deckBuilderPopup .deck-builder-popup-image img.horizontal-card {
    /* smaller bump + lower height cap */
    max-height: 70%;
  }
}
@media (max-width: 768px) {
  /* about 25% of the viewport height */
  #deckBuilderPopup .deck-builder-popup-image img.horizontal-card {
    max-width: 40vh;
  }
}

@media (max-width: 480px) {
  /* about 20% of the viewport height */
  #deckBuilderPopup .deck-builder-popup-image img.horizontal-card {
    max-width: 35vh;
  }
}




/* 3-col Cost/Might/Power */
.deck-builder-popup-stats.triple-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* full-width rows */
.deck-builder-popup-stats.single-row {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 4px;
}

.deck-builder-popup-stats.single-row .deck-builder-popup-stat.full {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.deck-builder-popup-stats.single-row .deck-builder-popup-stat.full > span {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1;
}

/* Equip Effect + Equip Might row */
.deck-builder-popup-stats.equip-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.deck-builder-popup-stats.equip-row .equip-effect-stat {
  min-width: 0;
}

.deck-builder-popup-stats.equip-row .equip-might-stat {
  min-width: 80px;
  text-align: center;
}

.deck-builder-popup-stats.equip-row .equip-effect-stat > span {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}

#deckBuilderPopupEEffect .effect-icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

#deckBuilderPopupEEffect .effect-icon-might {
  filter: brightness(0) invert(1);
}

#deckBuilderPopupEEffect .effect-icon-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  line-height: 18px;
}

/* 2-col Set / Rarity */
.deck-builder-popup-stats.two-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Close Button */
.deck-builder-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 50%;
  color: #999;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.deck-builder-popup-close:hover {
  background: #3a3a3a;
  color: #fff;
  border-color: #666;
}

.deck-builder-popup-close:active {
  transform: scale(0.95);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .deck-builder-popup {
    align-items: flex-start;
    padding: 16px;
  }

  .deck-builder-popup-stats {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 8px 0;
  }

  .deck-builder-popup-content {
    font-size: 14px;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .deck-builder-popup-image {
    text-align: center;
    padding: 8px;
  }

  .deck-builder-popup-image img {
    width: 100%;
    max-width: 400px;
    height: auto;
  }

  .deck-builder-popup-details {
    padding: 8px 0;
  }

  .deck-builder-popup-header {
    flex-direction: column !important;
    align-items: center;
    gap: 2px !important;
  }

  #deckBuilderPopupCardId,
  #deckBuilderPopupCardName {
    padding: 4px 6px !important;
    font-size: 16px;
  }

  .deck-builder-popup-tabs {
    margin-top: 8px;
  }

  .deck-builder-popup-tab {
    padding: 8px 12px;
    font-size: 12px;
  }

  .deck-builder-popup-stats.two-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .deck-builder-popup-stats.two-row .deck-builder-popup-stat {
    font-size: 12px;
    padding: 6px 8px;
  }

  .deck-builder-popup-stats.two-row .type-icon {
    width: 18px;
    height: 18px;
  }

  .deck-builder-popup-stats.triple-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .deck-builder-popup-stats.triple-row .deck-builder-popup-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .deck-builder-popup-stats.triple-row #deckBuilderPopupPower img {
    width: 22px !important;
    height: 22px !important;
  }

  .deck-builder-popup-stats.single-row
  .deck-builder-popup-stat.full:has(#deckBuilderPopupEffect) {
    display: block !important;
  }

  .deck-builder-popup-stats.single-row
  .deck-builder-popup-stat.full:has(#deckBuilderPopupEffect) > strong {
    display: block;
    margin-bottom: 0.5em;
  }

  .deck-builder-popup-prices-content .dbp-price-table-row {
    grid-template-columns: 50px 1fr 1fr 1fr;
    font-size: 12px;
  }
}

@media (max-width: 490px) {
  .deck-builder-popup-stats.triple-row #deckBuilderPopupPower img {
    width: 19px !important;
    height: 19px !important;
  }
}

@media (max-width: 370px) {
  .deck-builder-popup-stats.triple-row #deckBuilderPopupPower img {
    width: 15px !important;
    height: 15px !important;
  }
}

/* Palworld effect icons: inline {token} -> webp from uploads/Icons/ */
#deckBuilderPopupEffect .card-effect-icon {
  display: inline-block;
  vertical-align: middle;
  height: 1.4em;   /* scales with the effect text */
  width: auto;     /* preserve aspect ratio (badges may be wide) */
}

/* --- Add this to your deck-builder.css file --- */

.deck-login-notification {
  position: fixed; /* Keep fixed for viewport positioning */
  /* --- Changes for vertical centering --- */
  top: 50%;        /* Position the top edge at the vertical midpoint */
  /* --- Horizontal centering (same as before) --- */
  left: 50%;       /* Position the left edge at the horizontal midpoint */
  /* --- Adjustment for centering based on element size --- */
  transform: translate(-50%, -50%); /* Pull back left by 50% of width AND up by 50% of height */

  /* --- Appearance styles (unchanged) --- */
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 15px 25px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  font-size: 1em;
  opacity: 1;
  transition: opacity 0.5s ease-out; /* For the fade-out effect */
}

/* Optional: Style for fade-out (unchanged) */
.deck-login-notification.fade-out {
  opacity: 0;
}

/* Cards Grid Styles */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  justify-items: center;
  justify-content: center;
}
.cards-grid .card {
  max-width: 370px;
  text-align: center;
}
.cards-grid .card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  transition: transform 0.2s ease-in-out;
  margin-bottom: 1px;
}
.card:hover {
  box-shadow: 0 0 10px var(--ps-gold-metal);
  transition: box-shadow 0.3s ease-in-out;
  transform: scale(1.05);
  cursor: pointer;
}
@media (max-width: 1024px) {
.deck-builder-popup-header {
  gap: 2px;
  margin-bottom: 8px;
  padding: 10px;
}

.deck-builder-popup-content {
  gap: 10px;
  padding: 10px;

}

.deck-builder-popup-image {
  padding: 2px;
}
  .deck-builder-popup-image img {
    max-width: 300px;
  }
}
@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
    justify-content: center;
  }
    .deck-builder-popup-image img {
    max-width: 400px;
  }
}
@media (max-width: 480px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 10px;
    justify-content: center;
  }
  .cards-grid .card {
    max-width: 250px;
  }
}

/* Mobile-specific modifications for deck builder */
@media (min-width: 670px) and (max-width: 1000px) {
  #column-divider { display: none; }
  /* allow page to grow */
  #deck-builder {
    height: auto !important;
  }
  /* stack columns, stop clipping */
  #deck-builder-columns {
    flex-direction: column;
    overflow: visible !important;
  }
    #available-cards {
    max-height: 500px;        /* tweak to whatever “less height” you like */
    overflow-y: auto;
  }

  /* show 4 cards per row instead of 3 */
  #available-cards .builder-card {
    flex: 0 0 calc(25% - 8px);
    max-width: calc(25% - 8px);
  }

  #deck-builder-columns {
    flex-direction: column;
    overflow: visible !important;
  }

  /* 2) Turn right panel into a column flex container */
  #deck-cards-container {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 100%;
    height: 90vh;           /* total available height */
    min-height: 0;          /* allow children to overflow */
    overflow: hidden;
  }

  /* 3) Main‑deck pane */
  #deck-view {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  #selected-cards {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  /* Scroll container: explicit max-height + scroll on mobile, mirroring
     the same robust pattern used for #available-cards. Inheriting `flex: 1`
     from the desktop default would set flex-basis: 0% on this in a flex
     column parent, which (combined with the parent overflow: hidden)
     produced the "deck grows infinitely" bug. !important locks the cap. */
  #selected-cards .deck-scroll-container {
    flex: none !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 4) Sideboard pane */
  #sideboard-view {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #sideboard-cards {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  #sideboard-cards .deck-scroll-container {
    flex: none !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #sideboard-cards:not(.deck-grid-mode) #sideboard-section {
    flex: none;
  }

  /* 5) Stats pane */
  #stats-view {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #stats-cards {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  #stats-cards .deck-scroll-container {
    flex: none !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

}


/* 1. Convert two-column layout to one-column layout */
@media (max-width: 768px) {
  #column-divider { display: none; }
  /* 1) Make the whole builder grow, stack columns */
  #deck-builder {
    height: auto !important;
  }
  #deck-builder-columns {
    flex-direction: column;
    overflow: visible !important;
  }

  /* 2) Turn right panel into a column flex container */
  #deck-cards-container {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 100%;
    height: 90vh;           /* total available height */
    min-height: 0;          /* allow children to overflow */
    overflow: hidden;
  }

  /* 3) Main‑deck pane */
  #deck-view {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  #selected-cards {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  /* Scroll container: explicit max-height + scroll on mobile, mirroring
     the same robust pattern used for #available-cards. Inheriting `flex: 1`
     from the desktop default would set flex-basis: 0% on this in a flex
     column parent, which (combined with the parent overflow: hidden)
     produced the "deck grows infinitely" bug. !important locks the cap. */
  #selected-cards .deck-scroll-container {
    flex: none !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 4) Sideboard pane */
  #sideboard-view {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #sideboard-cards {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  #sideboard-cards .deck-scroll-container {
    flex: none !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #sideboard-cards:not(.deck-grid-mode) #sideboard-section {
    flex: none;
  }

  /* 5) Stats pane */
  #stats-view {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #stats-cards {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  #stats-cards .deck-scroll-container {
    flex: none !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}


/* 3. Tuning filters and controls for mobile */
@media (max-width: 768px) {
  #save-deck {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
    .viewability-toggle {
    gap: 2px !important;       /* shrink space between switch + label */
    margin-left: 20px !important;
  }
  #deck-viewability-label {
    margin-left: 2px !important; /* pull the text in closer */
    font-size: 0.75rem;          /* optional: make the label a bit smaller */
  }
    .viewability-toggle .switch {
    width: 28px !important;
    height: 16px !important;
  }

  /* shrink the knob */
  .viewability-toggle .switch .slider::before {
    width: 12px !important;
    height: 12px !important;
    /* reposition if needed (adjust the left/bottom offsets) */
    left: 2px !important;
    bottom: 2px !important;
  }

  /* optional: tighter rounding */
  .viewability-toggle .switch .slider {
    border-radius: 8px !important;
  }

  /* smaller card count + casual toggle on mobile */
  #deck-counter {
    font-size: 0.7rem !important;
  }
  .no-restriction-toggle .switch {
    width: 28px !important;
    height: 16px !important;
  }
  .no-restriction-toggle .switch .slider::before {
    width: 12px !important;
    height: 12px !important;
  }
  .no-restriction-toggle .switch input:checked + .slider::before {
    transform: translateX(12px) !important;
  }
  #no-restriction-label {
    font-size: 0.65rem !important;
  }
  .deck-status {
    gap: 8px !important;
  }
}
@media (max-width: 480px) {
  #card-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;      /* if you need wrapping on small screens */
  gap: 8px;  
  }
  #card-filters input:not(#card-filter),
  #card-filters select {
    padding: 8px;
    font-size: 16px;
  }
  #save-deck {
    padding: 8px 12px;
    font-size: 13px;
  }
    .viewability-toggle {
    gap: 1px !important;       /* shrink space between switch + label */
    margin-left: 1px !important;
	
  }
  #deck-viewability-label {
    margin-left: 1px !important; /* pull the text in closer */
    font-size: 0.75rem;  
  }
}

/* ---------- Shared notification base ---------- */
.deck-error-notification,
.deck-throttle-notification,
.deck-saved-notification {
  position: fixed;
  top: 60px; /* lowered slightly from very top */
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: clamp(0.85rem, 1vw + 0.1rem, 1rem);
  line-height: 1.2;
  max-width: 90vw;
  width: auto;
  box-sizing: border-box;
  background: #222; /* fallback, overridden by variants */
  color: #fff;
  text-align: center;
  word-break: break-word;
  overflow-wrap: anywhere;
  z-index: 10000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: fadeInOut 3.5s ease-in-out forwards;
}

/* stack multiple notifications gracefully */
.deck-error-notification + .deck-error-notification,
.deck-throttle-notification + .deck-throttle-notification,
.deck-saved-notification + .deck-saved-notification {
  margin-top: 8px;
  top: calc(60px + 48px);
}

/* ---------- Color variants (keep red for errors/throttle) ---------- */
.deck-error-notification,
.deck-throttle-notification {
  background: #b71c1c;
}

.deck-saved-notification {
  background: #1e7e34;
}

/* content/layout helpers */
.deck-error-notification .message,
.deck-throttle-notification .message,
.deck-saved-notification .message {
  flex: 1;
  text-align: center;
}

/* close button (doesn't push content) */
.deck-notification .close-btn,
.deck-error-notification .close-btn,
.deck-throttle-notification .close-btn,
.deck-saved-notification .close-btn {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1em;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  line-height: 1;
}

/* ---------- Animation ---------- */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translate(-50%, -5px);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -5px);
  }
}

/* ---------- Mobile adjustments ---------- */
@media (max-width: 768px) {
  .deck-error-notification,
  .deck-throttle-notification,
  .deck-saved-notification {
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;             /* use most of viewport */
    max-width: 600px;        /* but don’t get absurdly wide */
    padding: 10px 14px;
    font-size: clamp(0.9rem, 2.5vw, 1.05rem);
    border-radius: 8px;
    box-sizing: border-box;
  }
}


/* ===================== Delete Modal ===================== */
.udw-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
}
.udw-modal.is-open { display: block; }

.udw-modal__backdrop {
  position: absolute;
  inset: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.udw-modal__dialog {
  position: relative;
  max-width: 480px;
  margin: 10vh auto;
  padding: 0;
  background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  color: #fff;
  animation: udwModalPop .18s ease-out;
}
@keyframes udwModalPop {
  from { transform: translateY(10px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.udw-modal__header {
  padding: 16px 18px 8px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.udw-modal__title { margin: 0; font-size: 1.1rem; line-height: 1.3; }

.udw-modal__body { padding: 12px 18px 6px 18px; color: #e5e7eb; }
.udw-modal__desc { margin: 0 0 10px 0; }
.udw-modal__deckname {
  padding: 8px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  font-weight: 600;
  color: #fff;
  word-break: break-word;
}

.udw-modal__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 16px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.udw-modal__form {
  margin: 0;
  display: contents;
}

.udw-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  line-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  box-sizing: border-box;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.udw-btn::-moz-focus-inner { border: 0; padding: 0; }
.udw-btn:focus { outline: none; }
.udw-btn:focus-visible { outline: 2px solid var(--ps-gold-metal); outline-offset: 2px; }

.udw-modal__footer .udw-btn { min-width: 120px; text-align: center; }

.udw-btn--secondary {
  background: rgba(0,0,0,0.6);
  color: #fff;
}
.udw-btn--secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.28);
}
.udw-btn--danger {
  background: linear-gradient(135deg, rgba(231,76,60,0.95), rgba(192,57,43,0.95));
  border-color: #c0392b;
  color: #fff;
}
.udw-btn--danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(231,76,60,0.28);
}

#udw-delete-modal .udw-btn,
#udw-delete-modal button.udw-btn,
#udw-delete-modal button[type="submit"].udw-btn {
  height: 36px !important;
  line-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

.user-decks .udw-pill { cursor: pointer; }

/* === POPUP PRICE SECTION (Compact Inline) === */
.popup-price-row-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.4);
  border-radius: 6px;
  min-height: 34px; /* Reserve space to prevent layout shift */
}


.popup-market-link-inline {
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
  opacity: 0.9;
  flex-shrink: 0;
}

.popup-market-link-inline:hover {
  opacity: 1;
}

.popup-market-logo-inline {
  height: 22px !important;
  max-height: 22px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}

.popup-price-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
}

.popup-price-inline .price-label-inline {
  color: #aaa;
  font-weight: 500;
}

.popup-price-inline .price-value-inline {
  font-weight: bold;
  color: #4CAF50;
}

/* Responsive */
@media (max-width: 768px) {
  .popup-price-row-inline {
    gap: 8px;
    padding: 5px 10px;
  }
  
  .popup-market-logo-inline {
    height: 20px !important;
    max-height: 20px !important;
    max-width: 100px !important;
  }
  
  .popup-price-inline {
    font-size: 0.8rem;
  }
}

/* === POPUP PRICE LOADING STATE === */
.popup-price-loading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-skeleton {
  display: inline-block;
  width: 70px;
  height: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border-radius: 4px;
}

.price-skeleton.short {
  width: 50px;
}

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

/* Price content wrapper */
.popup-price-content {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

.popup-price-content.loaded {
  opacity: 1;
}

/* Keep space but hide content when no prices */
.popup-price-row-inline.no-prices {
  visibility: hidden;
}

/* === DECK CARD CONTEXT MENU === */
.deck-context-menu {
  position: fixed;
  z-index: 10000;
  background: #2a2a2a;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  min-width: 160px;
  padding: 4px 0;
  display: none;
}

.deck-context-menu.visible {
  display: block;
}

.deck-context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: #e0e0e0;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.deck-context-menu-item:hover {
  background: rgba(255,255,255,0.1);
}

.deck-context-menu-item i {
  width: 16px;
  text-align: center;
  color: #aaa;
}

.deck-context-menu-item:hover i {
  color: #fff;
}

.deck-context-menu-separator {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 4px 0;
}

/* ─── Floating Action Button (mobile section toggle) ─── */
#deck-builder-fab {
  display: none;
}

@media (max-width: 768px) {
  /* Pill-shaped FAB with icon + label. Clearer than a bare icon for users
     who haven't seen this control before. The label is updated by JS to
     mirror the icon ("Deck" / "Cards") depending on which section the user
     would jump to. */
  #deck-builder-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    height: 44px;
    padding: 0 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--ps-gold-deep), var(--ps-gold-2));
    color: #000;
    border: 1px solid var(--ps-gold-2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    z-index: 9998;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  #deck-builder-fab i {
    font-size: 16px;
  }

  .deck-builder-fab-label {
    line-height: 1;
  }

  #deck-builder-fab:active {
    background: linear-gradient(135deg, var(--ps-gold-2), var(--ps-gold));
    transform: scale(0.93);
  }
}

/* Result count display — sits inline next to the column +/- buttons inside
   #builder-column-control. Reserves a fixed-width slot so the row never
   shifts when the count text changes between values like "5 cards" and
   "1,234 cards", and uses visibility (not display) when empty so the slot
   is preserved even at zero results. */
.builder-result-count {
  margin-left: 8px;
  /* Tight min-width: fits "999 cards" without growth; longer counts let it
     expand naturally. The element sits at the right edge of the row via
     #builder-column-control's `margin-left: auto`, so any internal dead
     space would push the +/- buttons further from the count. text-align
     defaults to left so the text hugs the + button. */
  min-width: 55px;
  display: inline-block;
  color: #aaa;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
  align-self: center;
  font-variant-numeric: tabular-nums;
}

.builder-result-count[hidden] {
  visibility: hidden;
  /* Override the UA `display: none` from the [hidden] attribute so the slot
     keeps its reserved width (otherwise the row collapses on zero results). */
  display: inline-block !important;
}

/* Clear Filters button — sits at the right edge of the filter row.
   Reserves layout space always (visibility, not display) so the row
   doesn't shift when filters become active. Red treatment matches the
   destructive intent. */
.builder-clear-filters {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(244, 67, 54, 0.10);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.4);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  visibility: hidden;
  pointer-events: none;
  margin-left: 8px;
}

.builder-clear-filters.is-active {
  visibility: visible;
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touching) .builder-clear-filters:hover {
    background: rgba(244, 67, 54, 0.20);
    color: #ff5a4d;
    border-color: rgba(244, 67, 54, 0.7);
  }
}

/* No Results - Available Cards */
.builder-no-results {
  text-align: center;
  padding: 40px 20px;
  color: #888;
  width: 100%;
}


/* ============================================================================
   Slash-command UI (chips + suggestion menu) — mirrors card-list visually
   but scoped to deck-builder selectors.
============================================================================ */

/* The icon needs explicit vertical centering now that the wrapper has
   variable height (chips can wrap onto a second visual line). */
.search-input-wrapper > .search-input-icon {
    top: 50%;
    transform: translateY(-50%);
}

/* Convert the search-input-wrapper into the visible "input binder" itself, so
   chips and the real <input> can sit side-by-side inside it (same pattern
   card-list uses). The actual <input> becomes transparent + borderless. */
.search-input-wrapper {
    flex-wrap: wrap;
    gap: 6px;
    min-height: 36px;
    align-items: center;
    box-sizing: border-box;
    padding: 4px 36px 4px 38px;
    background: #1e1e1e;
    border: 2px solid #444;
    border-radius: 8px;
    transition: border-color 0.2s ease;
}

.search-input-wrapper:focus-within {
    border-color: var(--ps-gold);
}

.search-input-wrapper #card-filter {
    flex: 1;
    min-width: 80px;
    width: auto !important;
    height: 26px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    outline: none;
    font-size: 0.9rem !important;
    color: #fff !important;
}
.search-input-wrapper #card-filter:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
.search-input-wrapper #card-filter::placeholder {
    color: #555 !important;
}

/* ─── Chips ─── */
.builder-search-chips {
    display: contents; /* chips become direct flex children of the wrapper */
}
.builder-search-chips[hidden] { display: none; }

.builder-search-chip {
    display: inline-flex;
    align-items: stretch;
    height: 26px;
    background: #2a2a2a;
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-radius: 4px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    flex-shrink: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.builder-search-chip:focus-within {
    border-color: var(--ps-gold);
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.30);
}

.builder-search-chip-key {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    background: rgba(255, 215, 0, 0.15);
    color: var(--ps-gold);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

.builder-search-chip-sep {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: #888;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* Operator <select> for numeric chips */
.builder-search-chip .builder-search-chip-op {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    width: 22px;
    height: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    color: #aaa;
    border: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    text-align: center;
    text-align-last: center;
    text-indent: 0;
    vertical-align: middle;
}
.builder-search-chip .builder-search-chip-op:hover {
    color: var(--ps-gold);
    background-color: rgba(255, 215, 0, 0.10);
}
.builder-search-chip .builder-search-chip-op:focus {
    color: var(--ps-gold);
    background-color: rgba(255, 215, 0, 0.15);
}
.builder-search-chip-op option {
    background: #2a2a2a;
    color: #ddd;
    font-weight: 600;
}

/* Chip's value input — JS auto-fits via mirror span */
.builder-search-chip .builder-search-chip-input {
    align-self: stretch;
    box-sizing: content-box;
    min-width: 14px;
    width: 14px;
    height: auto;
    padding: 0 0 0 6px;
    margin: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    box-shadow: none;
}
.builder-search-chip .builder-search-chip-input:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.builder-search-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 215, 0, 0.20);
    color: #aaa;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.builder-search-chip-remove:hover {
    background: rgba(244, 67, 54, 0.30);
    color: #fff;
}

/* ─── Slash-command suggestion dropdown (minimal style) ─── */
.builder-search-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    z-index: 1100;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px 0;
}
.builder-search-suggestions[hidden] { display: none; }

.builder-search-suggestion {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 9px 18px;
    cursor: pointer;
    transition: background 0.12s ease;
    position: relative;
}
.builder-search-suggestion:hover,
.builder-search-suggestion.is-highlighted {
    background: rgba(255, 215, 0, 0.06);
}
.builder-search-suggestion.is-highlighted::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--ps-gold);
    border-radius: 0 2px 2px 0;
}
.builder-search-suggestion[hidden] { display: none; }

.builder-search-suggestion-cmd {
    display: inline-block;
    min-width: 64px;
    padding: 0;
    background: transparent;
    color: var(--ps-gold);
    border: none;
    border-radius: 0;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    flex-shrink: 0;
    letter-spacing: 0.2px;
}
.builder-search-suggestion-desc {
    color: #999;
    font-size: 13px;
    line-height: 1.3;
}
.builder-search-suggestion-empty {
    padding: 14px 18px;
    color: #777;
    font-size: 13px;
    font-style: italic;
}
.builder-search-suggestion-empty[hidden] { display: none; }

.builder-no-results i {
  display: block;
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.builder-no-results p {
  font-size: 1rem;
  margin: 0;
  color: #aaa;
}

/* ============================================================
   TODO(palworld-remove): HIDE-FOR-NOW, NOT a real removal.
   Palworld has no Sideboard, and the lone "Main Deck" pool tab is a
   redundant single tab. These are display:none'd here (markup + JS left
   intact) so they can be deleted cleanly later from deck-builder.php:
     - #available-tabs ......................... the "Main Deck" pool tab (~L812)
     - .deck-info-tab[data-target=sideboard-view] the Sideboard tab (~L952)
     - #sideboard-view ......................... the sideboard panel (~L976)
     - move-one / move-all context items + separator (~L500-508)
   When the deck-code refactor settles, remove those elements and this block.
   See memory: palsphere-deckbuilder-hidden-elements.
   ============================================================ */
#available-tabs { display: none !important; }
.deck-info-tab[data-target="sideboard-view"] { display: none !important; }
#deck-context-menu .deck-context-menu-item[data-action="move-one"],
#deck-context-menu .deck-context-menu-item[data-action="move-all"],
#deck-context-menu .deck-context-menu-separator { display: none !important; }

/* ============================================================
   Deck-builder filter bar — MOBILE (flex rows + "More Filters" drawer).
   Appended after the legacy mobile block so these rules win the cascade.
   Structure: #card-filters > .builder-frow--search / --filters / --sliders / --meta
   ============================================================ */
@media (max-width: 768px) {
  /* Row 1: search + alt-art on line 1; sort + collection drop to line 2 (via order + the break spacer) */
  #card-filters .builder-frow--search { flex-wrap: wrap; } /* mobile: allow the 2-line reflow */
  #card-filters .builder-frow--search .search-input-wrapper { flex: 1 1 0; min-width: 120px; order: 1; }
  #card-filters .builder-frow--search .alt-art-toggle { order: 2; flex: 0 0 auto; margin-left: 0; }
  #card-filters .builder-frow--search .bfrow-break { display: block; flex: 0 0 100%; height: 0; margin: 0; order: 3; }
  #card-filters .builder-frow--search .sort-wrapper { order: 4; flex: 1 1 auto; min-width: 0; width: auto; }
  #card-filters .builder-frow--search #card-filter-sort-wrapper { flex: 1 1 auto; width: auto; min-width: 0; } /* shrink sort-by so collection fits beside it on Row 2 */
  #card-filters .builder-frow--search .builder-collection-segmented { order: 5; flex: 0 0 auto; }

  /* Row 2: Colors + "More Filters" button share one row (left-aligned, no centering) */
  #card-filters .builder-frow--filters { justify-content: flex-start; }
  #card-filters .builder-frow--filters #card-filter-colors { flex: 0 0 auto; }
  #card-filters .builder-mobile-filters-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    flex: 1 1 auto; justify-content: center;
    height: 36px; padding: 0 12px; margin: 0;
    background: #2a2a2a; border: 1px solid #555; border-radius: 6px; color: #ddd; cursor: pointer; font-size: 14px;
  }
  #card-filters .builder-mobile-filters-toggle .builder-mobile-filters-chevron { transition: transform .2s ease; }
  #card-filters.more-open .builder-mobile-filters-toggle .builder-mobile-filters-chevron { transform: rotate(180deg); }
  #card-filters .builder-mobile-filters-badge { background: var(--ps-amber); color: #1a1206; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }

  /* When open, break to a fresh row so the dropdowns form their own 2-per-row grid below the colors + button row */
  #card-filters.more-open .builder-frow--filters .bfrow-break { display: block; flex: 0 0 100%; height: 0; }

  /* The four dropdowns: hidden when collapsed; 2-per-row when "More Filters" is open */
  #card-filters:not(.more-open) .builder-frow--filters > .multi-select-dropdown,
  #card-filters:not(.more-open) .builder-frow--filters > #card-filter-types { display: none; }
  #card-filters.more-open .builder-frow--filters > .multi-select-dropdown,
  #card-filters.more-open .builder-frow--filters > #card-filter-types { flex: 1 1 calc(50% - 6px); width: auto; min-width: 0; }
  #card-filters .builder-frow--filters #builder-type-wrapper { width: 100%; }
  #card-filters .builder-frow--filters .multi-select-btn { width: 100%; }

  /* Row 3 (sliders): hidden when collapsed; full-width each when open */
  #card-filters:not(.more-open) .builder-frow--sliders { display: none; }
  #card-filters.more-open .builder-frow--sliders .cost-range-slider { flex: 1 1 100%; }
}