/* ============================================================
   decks.css — Den of Cards · Deck List & Builder
   Obsidian Design System
   ============================================================ */

:root {
  --color-bg:      #0E0C0A;
  --color-surface: #1A1612;
  --color-accent:  #C8872A;
  --color-text:    #F0E8D5;
  --color-muted:   #A89880;
  --color-pop:     #FF6B3D;
  --color-danger:  #8C3A2E;
  --color-border:  rgba(200,135,42,0.18);
  --mtg:           #4A90D9;
  --pokemon:       #5CBB6A;
  --fab:           #E8922A;
  --sorcery:       #8B5CF6;
  --font-display:  'Bebas Neue', sans-serif;
  --font-accent:   'Cinzel', serif;
  --font-body:     'Inter', sans-serif;
}


/* ============================================================
   DECK LIST — INDEX PAGE
   ============================================================ */

.decks-page {
  padding: 2rem 1.5rem;
}

.decks-page-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.decks-page-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--color-text);
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
}

.decks-subtitle {
  font-family: var(--font-accent);
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: var(--color-accent);
  text-transform: uppercase;
  margin: 6px 0 0;
}

.btn-new-deck {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-display);
  letter-spacing: 2px;
  padding: 11px 22px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.2s, transform 0.1s;
  white-space: nowrap;
}

.btn-new-deck:hover {
  background: #E09830;
  transform: translateY(-1px);
}

/* Filter bar */
.deck-filter-bar {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  margin: 0 0 1.8rem;
  flex-wrap: wrap;
  align-items: center;
}

.filter-label {
  font-family: var(--font-accent);
  font-size: 0.68rem;
  letter-spacing: 2px;
  color: var(--color-muted);
  text-transform: uppercase;
  margin-right: 4px;
  flex-shrink: 0;
}

.filter-chip {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.filter-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filter-chip.active,
.filter-chip[data-active] {
  background: rgba(200,135,42,0.15);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.filter-chip.filter-mtg.active {
  border-color: var(--mtg);
  color: var(--mtg);
  background: rgba(74,144,217,0.12);
}

.filter-chip.filter-pokemon.active {
  border-color: var(--pokemon);
  color: var(--pokemon);
  background: rgba(92,187,106,0.12);
}

.filter-chip.filter-fab.active {
  border-color: var(--fab);
  color: var(--fab);
  background: rgba(232,146,42,0.12);
}

.filter-chip.filter-sorcery.active {
  border-color: var(--sorcery);
  color: var(--sorcery);
  background: rgba(139,92,246,0.12);
}

.sort-select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: var(--font-body);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.sort-select:focus {
  border-color: var(--color-accent);
}

/* Deck section grouping */
.deck-section {
  margin-bottom: 2.5rem;
}

.deck-section-label {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 2rem 0 1rem;
  display: flex;
  align-items: center;
  gap: 12px;
}

.deck-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.deck-section-label.game-mtg     { color: var(--mtg); }
.deck-section-label.game-pokemon { color: var(--pokemon); }
.deck-section-label.game-fab     { color: var(--fab); }
.deck-section-label.game-sorcery { color: var(--sorcery); }

/* Deck grid */
.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* ── Deck tiles in picker (Add-to-Deck sheet) ──────────────────────────────
   Picker tiles reuse the same component via SelectMode=true. Match the
   My Decks page layout — compact 2-column grid that scales with container
   width. Primary action is a colored "Add to Deck" button replacing the
   Share/Buy row. */
#atd-deck-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}
#atd-deck-list .deck-tile--select {
  margin: 0;
}
#atd-deck-list .deck-tile--select .deck-tile__desc { display: none; }
#atd-deck-list .btn-tile-action--primary {
  width: 100%;
  justify-content: center;
  color: var(--color-accent);
  font-weight: 600;
}
/* Desktop modal (>=720px wide) — give tiles a bit more room */
@media (min-width: 640px) {
  #atd-deck-list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* Deck tile */
.deck-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  color: inherit;
}

.deck-tile:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: 0 8px 32px rgba(200,135,42,0.18);
}

/* Game bar – 3px colored top strip (inside .deck-tile__fan, position absolute) */
.deck-tile__game-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 10;
  background: var(--color-border);
}

.deck-tile__game-bar.game-mtg     { background: var(--mtg); }
.deck-tile__game-bar.game-pokemon { background: var(--pokemon); }
.deck-tile__game-bar.game-fab     { background: var(--fab); }
.deck-tile__game-bar.game-sorcery { background: var(--sorcery); }

/* Fan art area */
.deck-tile__fan {
  height: 155px;
  position: relative;
  overflow: hidden;
  background: #0a0806;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck-tile__fan-img {
  position: absolute;
  width: 68px;
  height: 95px;
  object-fit: cover;
  object-position: center top;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  transition: transform 0.3s;
}

/* game-bar is child(1); fan images are child(2)+ */
.deck-tile__fan-img:nth-child(2) { left: 50%; transform: translateX(-95px) rotate(-12deg); z-index: 1; }
.deck-tile__fan-img:nth-child(3) { left: 50%; transform: translateX(-60px) rotate(-5deg);  z-index: 2; }
.deck-tile__fan-img:nth-child(4) { left: 50%; transform: translateX(-20px) rotate(2deg);   z-index: 3; }
.deck-tile__fan-img:nth-child(5) { left: 50%; transform: translateX(22px)  rotate(9deg);   z-index: 2; }
.deck-tile__fan-img:nth-child(6) { left: 50%; transform: translateX(58px)  rotate(16deg);  z-index: 1; }

.deck-tile:hover .deck-tile__fan-img:nth-child(2) { transform: translateX(-105px) rotate(-15deg); }
.deck-tile:hover .deck-tile__fan-img:nth-child(3) { transform: translateX(-65px)  rotate(-7deg);  }
.deck-tile:hover .deck-tile__fan-img:nth-child(5) { transform: translateX(30px)   rotate(11deg);  }
.deck-tile:hover .deck-tile__fan-img:nth-child(6) { transform: translateX(70px)   rotate(18deg);  }

.deck-tile__fan-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(200,135,42,0.25);
  font-size: 2rem;
}

/* Format badge (top-right of art strip) */
.deck-tile__format-badge {
  position: absolute;
  top: 8px; right: 10px;
  font-family: var(--font-accent);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--color-text);
  z-index: 10;
}

/* In-progress badge (bottom-left of art strip) */
.deck-tile__in-progress-badge {
  position: absolute;
  bottom: 8px; left: 10px;
  background: rgba(200,135,42,0.9);
  border-radius: 3px;
  padding: 2px 8px;
  font-family: var(--font-accent);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #0E0C0A;
  text-transform: uppercase;
  z-index: 10;
}

/* Tile body */
.deck-tile__body {
  padding: 14px 16px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.deck-tile__name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
}

/* Stats inline with the name — right side of the title row */
.deck-tile__name-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.deck-tile__name-stat {
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

.deck-tile__name-stat-label {
  font-size: 0.62rem;
  color: var(--color-muted);
  font-weight: 400;
  letter-spacing: 0.5px;
}

.deck-tile__name-stat--value {
  color: var(--color-accent);
}

.deck-tile__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-text);
  letter-spacing: 1.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.deck-tile__game-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-muted);
}
.deck-tile__game-dot.game-mtg     { background: var(--mtg); }
.deck-tile__game-dot.game-pokemon { background: var(--pokemon); }
.deck-tile__game-dot.game-fab     { background: var(--fab); }
.deck-tile__game-dot.game-sorcery { background: var(--sorcery); }

.deck-tile__desc {
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}

.deck-tile__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Badges */
.deck-tile__badge {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid;
}

.game-mtg {
  color: #4A90D9;
  border-color: #4A90D9;
  background: rgba(74,144,217,0.1);
}

.game-pokemon {
  color: #5CBB6A;
  border-color: #5CBB6A;
  background: rgba(92,187,106,0.1);
}

.game-fab {
  color: #E8922A;
  border-color: #E8922A;
  background: rgba(232,146,42,0.1);
}

.game-sorcery {
  color: #8B5CF6;
  border-color: #8B5CF6;
  background: rgba(139,92,246,0.1);
}

.game-mixed {
  color: var(--color-muted);
  border-color: rgba(168,152,128,0.3);
  background: transparent;
}

.deck-tile__format {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid;
  color: var(--color-muted);
  border-color: rgba(168,152,128,0.25);
  background: transparent;
}

.deck-tile__progress {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #F5A623;
  color: #F5A623;
  background: rgba(245,166,35,0.1);
}


/* Tile actions */
.deck-tile__actions {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--color-border);
}

.btn-tile-action {
  flex: 1;
  text-align: center;
  padding: 0.4rem 0;
  font-size: 0.8rem;
  font-family: var(--font-body);
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.btn-tile-action:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-tile-action.primary {
  background: var(--color-accent);
  color: #000;
  border-color: var(--color-accent);
  font-weight: 700;
}

.btn-tile-action.primary:hover {
  filter: brightness(1.1);
}

.btn-tile-action--danger {
  color: rgba(239, 83, 80, 0.75);
}

.btn-tile-action--danger:hover {
  border-color: rgba(239, 83, 80, 0.7);
  color: #ef5350;
}

/* Allow inline form to flex like other tile-action buttons */
.deck-tile__actions form {
  flex: 1;
  display: flex;
}

.deck-tile__actions form .btn-tile-action {
  width: 100%;
}

/* New deck CTA tile */
.deck-new-cta {
  border: 2px dashed rgba(200,135,42,0.25);
  border-radius: 10px;
  min-height: 238px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 10px;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.deck-new-cta:focus-visible {
  box-shadow: 0 0 0 2px var(--color-accent);
}

.deck-new-cta:hover {
  border-color: var(--color-accent);
  background: rgba(200,135,42,0.05);
}

.deck-new-cta__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: var(--color-accent);
  transition: transform 0.2s;
}

.deck-new-cta:hover .deck-new-cta__icon {
  transform: scale(1.1);
}

.deck-new-cta__text {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 2px;
  color: var(--color-accent);
}

.deck-new-cta__sub {
  font-size: 0.72rem;
  color: var(--color-muted);
  padding: 0 1rem;
}

/* Empty state */
.empty-decks {
  width: 100%;
  text-align: center;
  padding: 5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  color: var(--color-muted);
}

.empty-decks__icon {
  font-size: 4rem;
  color: #2a2520;
}

.empty-decks__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-muted);
  letter-spacing: 0.06em;
  margin: 0;
}

.empty-decks__body {
  font-size: 0.95rem;
  max-width: 400px;
  text-align: center;
  margin: 0;
}

/* ── Page subtitle ────────────────────────────────────────────────────────── */

.decks-page-sub {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin: 4px 0 0;
}

/* ── Alert ────────────────────────────────────────────────────────────────── */

.decks-alert {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.decks-alert--success {
  background: rgba(92,187,106,0.1);
  border: 1px solid rgba(92,187,106,0.3);
  color: #5CBB6A;
}

/* ── Stats bar ────────────────────────────────────────────────────────────── */

.decks-stats-bar {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem 1rem;
}

.dstat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(255,255,255,0.06);
}

.dstat--total { border-left-color: var(--color-accent); }
.dstat--mtg   { border-left-color: var(--mtg); }
.dstat--pokemon { border-left-color: var(--pokemon); }
.dstat--fab   { border-left-color: var(--fab); }
.dstat--sorcery { border-left-color: var(--sorcery); }

.dstat__label {
  font-family: var(--font-accent);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.dstat__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text);
}

.dstat--total .dstat__value { color: var(--color-accent); }

.dstat__sub {
  font-size: 0.72rem;
  color: var(--color-muted);
}

/* Game pips */
.game-pip {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-muted);
}
.pip-mtg     { background: var(--mtg); }
.pip-pokemon { background: var(--pokemon); }
.pip-fab     { background: var(--fab); }
.pip-sorcery { background: var(--sorcery); }

/* ── Toolbar (search + chips + sort + view toggle) ────────────────────────── */

.decks-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}

/* Search input */
.decks-search-wrap {
  position: relative;
  flex: 1;
}

/* Header variant: right-aligned fixed-width search next to "My Decks" */
.decks-search-wrap--header {
  flex: 0 0 auto;
  width: 260px;
  max-width: 40vw;
}
@media (max-width: 768px) {
  /* Mobile uses the ActionBar search; hide the header variant */
  .decks-search-wrap--header { display: none; }
}

.decks-search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  font-size: 0.8rem;
  pointer-events: none;
}

.decks-search {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.15s;
}

.decks-search::placeholder { color: var(--color-muted); }
.decks-search:focus { border-color: var(--color-accent); }

/* Filter chips wrapper */
.deck-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 1;
}

/* Right side: sort + view toggle */
.decks-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Smaller New Deck variant for the toolbar */
.btn-new-deck--sm {
  padding: 7px 14px;
  font-size: 0.82rem;
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* View toggle */
.view-toggle {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
}

.view-toggle__btn {
  background: transparent;
  border: none;
  color: var(--color-muted);
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}

.view-toggle__btn.active,
.view-toggle__btn:hover {
  background: rgba(200,135,42,0.12);
  color: var(--color-accent);
}

/* ── List view mode ───────────────────────────────────────────────────────── */

.deck-grid.deck-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.deck-grid.deck-list .deck-tile {
  flex-direction: row;
  min-height: 0;
}

.deck-grid.deck-list .deck-tile__fan {
  width: 110px;
  height: auto;
  flex-shrink: 0;
  border-radius: 0;
}

.deck-grid.deck-list .deck-tile__fan-img {
  width: 50px;
  height: 70px;
}

.deck-grid.deck-list .deck-tile__fan-img:nth-child(2) { transform: translateX(-60px) rotate(-8deg); }
.deck-grid.deck-list .deck-tile__fan-img:nth-child(3) { transform: translateX(-30px) rotate(-2deg); }
.deck-grid.deck-list .deck-tile__fan-img:nth-child(4) { transform: translateX(5px) rotate(4deg); }
.deck-grid.deck-list .deck-tile__fan-img:nth-child(5) { transform: translateX(38px) rotate(10deg); }
.deck-grid.deck-list .deck-tile__fan-img:nth-child(6) { transform: translateX(65px) rotate(16deg); }

.deck-grid.deck-list .deck-tile__body {
  flex: 1;
  flex-direction: row;
  align-items: center;
  padding: 10px 14px;
  gap: 1rem;
  flex-wrap: wrap;
}

.deck-grid.deck-list .deck-tile__name-row {
  flex: 1;
  min-width: 160px;
  margin-bottom: 0;
}

.deck-grid.deck-list .deck-tile__stats {
  border-top: none;
  border-left: 1px solid rgba(255,255,255,0.06);
  padding-top: 0;
  padding-left: 1rem;
  margin: 0;
  display: flex;
  flex-direction: row;
}

.deck-grid.deck-list .deck-tile__desc { display: none; }

.deck-grid.deck-list .deck-tile__actions {
  border-top: none;
  border-left: 1px solid var(--color-border);
  padding: 0.5rem 0.8rem;
  flex-direction: column;
  width: auto;
  min-width: 90px;
}

.deck-grid.deck-list .deck-new-cta {
  min-height: 72px;
}

/* ── Mobile layout (decks-layout variant) ─────────────────────────────────── */

@media (max-width: 960px) {
  .page-card.decks-layout {
    margin: 0;
    border-radius: 0;
    border: none;
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  .page-card.decks-layout {
    min-height: auto;
    overflow-y: visible;
  }

  .decks-toolbar-bottom {
    flex-wrap: wrap;
  }

  .decks-toolbar-right {
    width: 100%;
    justify-content: flex-end;
  }

  .decks-stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .decks-page-title {
    font-size: 2rem;
  }

  .deck-grid {
    grid-template-columns: 1fr;
  }

  .deck-grid.deck-list .deck-tile__fan {
    width: 80px;
  }
}


/* ============================================================
   BUILDER PAGE
   ============================================================ */

.builder-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg);
}

/* Top bar */
.builder-topbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  gap: 1rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.builder-back {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-family: var(--font-body);
  transition: color 0.15s;
}

.builder-back:hover {
  color: var(--color-text);
}

.builder-deck-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.builder-deck-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-text);
  margin: 0;
}

/* Editable variant: subtle hover hint, gold ring + cursor on focus */
.builder-deck-name--editable {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 6px;
  border: 1px dashed transparent;
  cursor: text;
  transition: border-color 0.15s ease, background 0.15s ease;
  outline: none;
  white-space: nowrap;
  max-width: 100%;
  overflow-x: auto;
}

.builder-deck-name--editable:hover {
  border-color: rgba(200, 135, 42, 0.4);
  background: rgba(200, 135, 42, 0.05);
}

.builder-deck-name--editable:focus {
  border-color: rgba(200, 135, 42, 0.8);
  border-style: solid;
  background: rgba(200, 135, 42, 0.08);
}

.builder-deck-name-edit-hint {
  color: rgba(200, 135, 42, 0.5);
  font-size: 0.75rem;
  margin-left: -0.25rem;
  pointer-events: none;
  transition: color 0.15s ease;
}

.builder-deck-name--editable:hover + .builder-deck-name-edit-hint,
.builder-deck-name--editable:focus + .builder-deck-name-edit-hint {
  color: var(--color-accent);
}

.builder-topbar-actions {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.btn-builder {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  background: transparent;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.btn-builder:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-builder.danger:hover {
  border-color: var(--color-danger);
  color: #ef5350;
}

/* Primary filled variant — "Make a Copy" on shared-link view. */
.btn-builder--primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #1a1a1a;
  font-weight: 600;
}
.btn-builder--primary:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-hover, var(--color-accent));
  color: #1a1a1a;
  filter: brightness(1.08);
}

/* ── Top-bar Actions dropdown (Share / Copy / Delete) ──
   Single affordance replacing the old standalone Delete button. Panel is
   absolutely-positioned beneath the trigger; outside-click dismisses. */
.builder-actions-menu {
  position: relative;
  display: inline-block;
}
.builder-actions-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 180px;
  background: var(--color-bg-elev, #1d1d1f);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  z-index: 50;
}
.builder-actions-panel[hidden] { display: none; }
.builder-actions-panel form { margin: 0; }
.builder-actions-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--color-text);
  font-size: 0.85rem;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.builder-actions-item i { width: 1rem; color: var(--color-muted); }
.builder-actions-item:hover {
  background: rgba(200,135,42,0.12);
  color: var(--color-accent);
}
.builder-actions-item:hover i { color: var(--color-accent); }
.builder-actions-item--danger:hover {
  background: rgba(220,50,50,0.12);
  color: #ef5350;
}
.builder-actions-item--danger:hover i { color: #ef5350; }

/* Main layout */
.builder-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 340px;
  overflow: hidden;
}

/* Left panel */
.builder-left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--color-border);
}

/* Search bar */
.builder-search-bar {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  flex-shrink: 0;
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
}

.builder-search-browse-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  font-size: 0.85rem;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.builder-search-browse-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.builder-search-browse-btn i {
  font-size: 0.85rem;
}

.builder-search-input {
  flex: 1;
  min-width: 0;
  background: #0E0C0A;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.6rem 2.5rem 0.6rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: var(--font-body);
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.builder-search-input:focus {
  border-color: var(--color-accent);
  outline: none;
}

/* Search results dropdown — desktop grid of card tiles. Expanded max-height
   compared to the old list view so ~2 rows of 4-5 columns fit before scroll. */
.builder-search-results {
  position: absolute;
  top: 100%;
  left: 1rem;
  right: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  z-index: 50;
  max-height: 520px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 0.6rem;
}

/* ── Desktop search results grid ──
   Card-art tiles auto-fit as many columns as the panel width allows. Each
   tile is a button that opens the section picker on click. */
.bsr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.bsr-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.35rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--color-text);
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.bsr-tile:hover {
  background: rgba(200,135,42,0.08);
  border-color: rgba(200,135,42,0.35);
  transform: translateY(-1px);
}

.bsr-tile__art {
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 88;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.bsr-tile__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bsr-tile__name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bsr-tile__meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  color: var(--color-muted);
}
.bsr-tile__meta .bsr-set {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.bsr-tile__meta .bsr-rarity {
  flex-shrink: 0;
  font-size: 0.6rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
}

.bsr-price {
  position: absolute;
  left: 0.25rem;
  bottom: 0.25rem;
  background: rgba(0,0,0,0.78);
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-family: var(--font-accent);
}

.bsr-stock {
  position: absolute;
  right: 0.3rem;
  top: 0.3rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5CBB6A;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6);
  font-size: 0;
}

.search-result-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: background 0.12s;
}

.search-result-item:hover {
  background: rgba(200,135,42,0.08);
}

.search-result-img {
  width: 40px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.search-result-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.search-result-name {
  font-size: 0.9rem;
  color: var(--color-text);
  font-weight: 500;
  font-family: var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-meta {
  font-size: 0.75rem;
  color: var(--color-muted);
  font-family: var(--font-body);
}

.search-result-price {
  font-size: 0.85rem;
  color: var(--color-accent);
  font-weight: 600;
  font-family: var(--font-accent);
  margin-left: auto;
  flex-shrink: 0;
}

.search-in-stock {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5CBB6A;
  flex-shrink: 0;
}

/* Builder tabs */
.builder-tabs {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid var(--color-border);
  padding: 0 1rem;
  flex-shrink: 0;
}

/* FAB unified desktop layout — show every section stacked, hide tabs.
   Mobile keeps the ActionBar tab switcher (.mob-btab); .builder-tabs is
   already desktop-only via the @media block lower in this file. */
@media (min-width: 769px) {
  .builder-tabs--fab-mobile-only { display: none !important; }

  .builder-card-list--unified-fab .section-panel {
    display: block !important;
    margin-bottom: 1.25rem;
  }

  .builder-card-list--unified-fab .fab-unified-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0.25rem 0 0.5rem;
    padding: 0.4rem 0.6rem;
    background: linear-gradient(90deg, rgba(200,135,42,0.18), rgba(200,135,42,0.04));
    border-left: 3px solid var(--color-accent);
    border-radius: 4px;
  }

  .builder-card-list--unified-fab .fab-unified-header__title {
    font-family: var(--font-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.95rem;
    color: var(--color-accent);
  }

  .builder-card-list--unified-fab .fab-unified-header__count {
    font-size: 0.8rem;
    color: var(--color-muted);
  }
}

@media (max-width: 768px) {
  /* Hide unified headers on mobile — tab switcher already labels the section. */
  .fab-unified-header { display: none !important; }
}

.builder-tab {
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-family: var(--font-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: color 0.15s, border-bottom-color 0.15s;
}

.builder-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Card list */
.builder-card-list {
  flex: 1;
  overflow-y: auto;
  /* overflow-x must be visible so hover-zoomed cards can escape the panel */
  overflow-x: visible;
  padding: 0.75rem 1rem;
}

.card-section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0.4rem;
  margin: 0.5rem 0 0.25rem;
  border-bottom: 1px solid rgba(200,135,42,0.2);
}

.card-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-accent);
  letter-spacing: 0.06em;
  margin: 0;
}

.card-section-count {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-family: var(--font-body);
}

/* Card row */
.card-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-bottom: 4px;
  transition: background 0.15s, border-color 0.15s;
}

.card-row:hover {
  background: rgba(200,135,42,0.06);
  border-color: rgba(200,135,42,0.3);
}

.card-row__thumb {
  width: 40px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.card-row__thumb-placeholder {
  width: 40px;
  height: 56px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(200,135,42,0.3);
  flex-shrink: 0;
}

.card-row__info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.card-row__name {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-row__meta {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

/* Mana symbol — official Scryfall SVG */
.mana-symbol {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1px;
  border-radius: 50%;
  box-shadow: -1px -1px 0 0 rgba(0,0,0,0.85) inset;
}
/* Larger variant in the Color Identity stat section */
.color-identity-pips .mana-symbol {
  width: 26px;
  height: 26px;
  margin-right: 0.25rem;
}
.color-pip-none {
  font-size: 0.78rem;
  color: var(--color-muted);
  font-style: italic;
}

/* Mana pips (legacy — kept for anything still using inline style) */
.mana-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: bold;
  flex-shrink: 0;
}

.mana-pip.W { background: linear-gradient(135deg, #F0E6D2 0%, #D4C8B8 100%); color: #333; }
.mana-pip.U { background: linear-gradient(135deg, #1565C0 0%, #0E47A1 100%); color: #fff; }
.mana-pip.B { background: linear-gradient(135deg, #424242 0%, #1A1A1A 100%); color: #BBA7D0; }
.mana-pip.R { background: linear-gradient(135deg, #E53935 0%, #D32F2F 100%); color: #fff; }
.mana-pip.G { background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%); color: #fff; }
.mana-pip.C { background: linear-gradient(135deg, #D5D6DE 0%, #c0c0c0 100%); color: #333; }

/* Pitch pips (FAB) */
.pitch-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: bold;
  flex-shrink: 0;
}

.pitch-pip.pitch-1 { background: #E8432D; color: #fff; }
.pitch-pip.pitch-2 { background: #F5A623; color: #000; }
.pitch-pip.pitch-3 { background: #3B82F6; color: #fff; }

/* Pokemon type icons */
.pokemon-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: bold;
  flex-shrink: 0;
}

.card-row__price {
  font-size: 0.8rem;
  color: var(--color-accent);
  font-weight: 600;
  font-family: var(--font-accent);
  flex-shrink: 0;
}

/* Quantity controls */
.card-row__qty {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(200,135,42,0.1);
  border: 1px solid rgba(200,135,42,0.2);
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.75rem;
  border-radius: 50%;
  transition: border-color 0.15s, color 0.15s;
  padding: 0;
}

.qty-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.qty-display {
  font-size: 0.85rem;
  color: var(--color-text);
  font-weight: 600;
  min-width: 1.5rem;
  text-align: center;
  font-family: var(--font-body);
}

/* Static qty — card cannot have more than one copy in this format
   (Commander non-basics, FAB hero, Brawl, etc). No +/- buttons. */
.qty-display--static {
  color: var(--color-muted);
  font-weight: 500;
  opacity: 0.7;
}

/* Disabled qty-btn (hit the format cap on + direction) */
.qty-btn[disabled],
.qty-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.card-row__remove {
  color: var(--color-muted);
  opacity: 0.4;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.2rem;
  transition: color 0.15s, opacity 0.15s;
  flex-shrink: 0;
}

.card-row__remove:hover {
  color: #ef5350;
  opacity: 1;
}

/* ── Card row helpers ─────────────────────────────────────────────────────── */

/* Set name label */
.card-row__set {
  font-size: 0.72rem;
  color: var(--color-muted);
  opacity: 0.6;
  font-family: var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* Pokémon HP */
.card-row__hp {
  font-size: 0.72rem;
  color: var(--color-muted);
  font-weight: 600;
  font-family: var(--font-body);
}
.card-row__hp small { font-size: 0.6rem; opacity: .7; margin-left: 1px; }

/* FAB cost/power/defense chips */
.fab-stat {
  font-size: 0.7rem;
  color: var(--color-muted);
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.fab-stat i { font-size: 0.65rem; opacity: .7; }

/* FAB pitch left-border colours on the card row */
.card-row.pitch-red    { border-left: 3px solid #E8432D; padding-left: calc(0.5rem - 3px); }
.card-row.pitch-yellow { border-left: 3px solid #F5A623; padding-left: calc(0.5rem - 3px); }
.card-row.pitch-blue   { border-left: 3px solid #3B82F6; padding-left: calc(0.5rem - 3px); }


/* ============================================================
   CARD STACK GRID — visual card view in deck builder
   ============================================================ */

.card-stack-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 0.85rem;
  padding: 0.75rem 0 1.25rem;
  /* Allow hover zoom to bleed outside the panel */
  overflow: visible;
}

.card-stack {
  position: relative;
  width: 176px;
  cursor: pointer;
  isolation: isolate;
  perspective: 1200px;
  transition: transform 0.18s ease, z-index 0s;
  z-index: 1;
}

.card-stack:hover {
  z-index: 50;
}

/* ── Card Context Menu ─────────────────────────────────────────────────── */
.card-ctx-overlay {
  position: fixed;
  inset: 0;
  z-index: 12350;
  background: rgba(0,0,0,0);
  transition: background 0.2s;
  pointer-events: none;
}
.card-ctx-overlay.is-open {
  background: rgba(0,0,0,0.55);
  pointer-events: all;
}

.card-ctx-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 12400;
  background: var(--color-surface);
  border-top: 2px solid var(--color-accent);
  border-radius: 18px 18px 0 0;
  padding: 0.5rem 1rem 1.25rem;
  box-shadow: 0 -8px 48px rgba(0,0,0,0.6);
  max-height: 70dvh;
  overflow-y: auto;
}
.card-ctx-menu[hidden] { display: none; }

.card-ctx-handle {
  width: 36px;
  height: 4px;
  background: rgba(200,135,42,0.25);
  border-radius: 2px;
  margin: 0 auto 0.5rem;
}
.card-ctx-header {
  font-family: var(--font-accent);
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
  text-align: center;
}
.ctx-group-label {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin: 0.6rem 0 0.25rem;
}
.ctx-action {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.5rem;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--color-text);
  font-size: 0.88rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
}
.ctx-action:hover { background: rgba(255,255,255,0.05); }
.ctx-action i { width: 18px; text-align: center; color: var(--color-muted); font-size: 0.8rem; }
.ctx-action--accent { color: var(--color-accent); }
.ctx-action--accent i { color: var(--color-accent); }
.ctx-action--danger { color: #ef5350; }
.ctx-action--danger i { color: #ef5350; }

.ctx-qty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 0;
}
.ctx-qty-val {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text);
  min-width: 2rem;
  text-align: center;
}

/* List view ⋯ menu button */
.card-row__menu {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0.3rem 0.4rem;
  font-size: 1rem;
  border-radius: 4px;
  transition: color 0.12s;
}
.card-row__menu:hover { color: var(--color-accent); }

/* Desktop: position as dropdown near click */
@media (min-width: 769px) {
  .card-ctx-menu {
    bottom: auto;
    left: auto;
    right: auto;
    width: 260px;
    border-radius: 12px;
    border-top: none;
    border: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem 0.75rem;
    box-shadow: 0 12px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,135,42,0.1);
    animation: fadeInScale 0.14s ease-out;
  }
  .card-ctx-handle { display: none; }

  /* Builder modal polish: subtle scale-fade on open instead of slide-up.
     Mobile keeps its slide-up animation; desktop reads as a true modal. */
  .sm-overlay .sm-dialog,
  .cdm-overlay .cdm-dialog {
    animation: fadeInScale 0.18s ease-out;
  }
  /* Drop the mobile drag-handle pseudo on desktop (no swipe-to-close there). */
  .cdm-overlay .cdm-dialog::before { content: none !important; }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Floating hover preview (positioned by JS, not subject to overflow clipping) */
#card-hover-preview {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  display: none;
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.85), 0 0 0 1px rgba(200,135,42,0.2);
  transition: opacity 0.1s ease;
}
#card-hover-preview img {
  width: 240px;
  border-radius: 12px;
  display: block;
}

/* Depth slices — Fabrary-style peek of the card's name banner, stacked above the face.
   Each slice is absolutely centered via left: 50% + translateX(-50%) so the stack is
   perfectly symmetric regardless of viewport width or container padding. */

.card-stack__depth {
  position: absolute;
  top: 28px;
  left: 50%;
  width: 92%;
  transform: translateX(-50%);
  height: 28px;
  border-radius: 8px 8px 0 0;
  background: #000;
  border-bottom: none;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.5);
  overflow: hidden;
  z-index: 1;
}
.card-stack__depth img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.card-stack__depth--2 {
  top: 0;
  width: 84%;
  z-index: 0;
}

/* The actual card face */
.card-stack__face {
  position: relative;
  z-index: 2;
  width: 176px;
}

.card-stack__face img {
  width: 176px;
  height: 246px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.card-stack__placeholder {
  width: 176px;
  aspect-ratio: 63 / 88;
  height: auto;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,135,42,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem;
  color: var(--color-muted);
  font-size: 1.2rem;
  text-align: center;
}
.card-stack__placeholder-name {
  font-family: var(--font-accent);
  font-size: 0.78rem;
  color: var(--color-text);
  letter-spacing: 0.04em;
  line-height: 1.25;
}

/* Quantity badge bottom-right corner */
.card-stack__qty {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.8);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 6px;
  line-height: 1.4;
  pointer-events: none;
}

/* ── Card flip (tap to reveal actions) ───────────────────────────── */
.card-stack__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.22, 0.72, 0.2, 1);
  transform-style: preserve-3d;
}
.card-stack.is-flipped .card-stack__inner {
  transform: rotateY(180deg);
}
.card-stack__face,
.card-stack__back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-stack__back {
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.6rem;
  gap: 0.55rem;
  overflow: hidden;
}
.card-stack__back-name {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-text);
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.1em;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(200,135,42,0.12);
}
.card-stack__back-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}
.cs-back-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.55rem 0.2rem;
  background: rgba(14,12,10,0.55);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 0.7rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cs-back-btn i { font-size: 0.95rem; color: var(--color-accent); }
.cs-back-btn:hover {
  background: rgba(200,135,42,0.08);
  border-color: rgba(200,135,42,0.35);
}
.cs-back-btn--primary {
  background: rgba(200,135,42,0.12);
  border-color: rgba(200,135,42,0.35);
}
.card-stack__back-qty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: auto;
}
.card-stack__back-qty .qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  background: rgba(14,12,10,0.55);
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.card-stack__back-qty .qty-btn:hover { background: rgba(200,135,42,0.15); }
.card-stack__back-qty-val {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  min-width: 1.4rem;
  text-align: center;
}
.card-stack__back-remove {
  padding: 0.4rem 0.5rem;
  background: none;
  border: 1px solid rgba(140,58,46,0.35);
  color: #d06b60;
  border-radius: 6px;
  font-size: 0.72rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: background 0.12s, color 0.12s;
}
.card-stack__back-remove:hover { background: rgba(140,58,46,0.15); color: #ef5350; }

/* Legacy +/- controls — no longer rendered in templates, kept for safety */
.card-stack__ctrl { display: none !important; }
.card-stack__remove { display: none !important; }

/* +/- controls — unused after flip refactor, kept in case of caller */
.card-stack__ctrl--legacy {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.card-stack:hover .card-stack__ctrl {
  opacity: 1;
  pointer-events: auto;
}

.card-stack__ctrl .qty-btn {
  width: 30px;
  height: 30px;
  font-size: 1.1rem;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.card-stack__ctrl .qty-btn:first-child {
  background: var(--color-accent);
  color: #000;
}

.card-stack__ctrl .qty-btn:last-child {
  background: rgba(140,58,46,0.85);
  color: #fff;
}

/* Remove button overlay */
.card-stack__remove {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(140,58,46,0.85);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.card-stack:hover .card-stack__remove {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   CARD DETAIL MODAL — printings table
   ============================================================ */

#card-detail-modal {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.cdm-card-image {
  flex-shrink: 0;
  width: 200px;
}

.cdm-card-image img {
  width: 200px;
  border-radius: 12px;
  display: block;
  border: 1px solid rgba(200,135,42,0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

.cdm-card-image-placeholder {
  width: 200px;
  height: 280px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 2rem;
}

.cdm-card-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cdm-card-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-text);
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1.1;
}

.cdm-card-meta {
  font-size: 0.82rem;
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.cdm-printings-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.cdm-printings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.cdm-printings-table th {
  text-align: left;
  padding: 0.35rem 0.5rem;
  color: var(--color-muted);
  font-weight: 600;
  border-bottom: 1px solid rgba(200,135,42,0.2);
  font-family: var(--font-body);
}

.cdm-printings-table td {
  padding: 0.4rem 0.5rem;
  color: var(--color-text);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}

.cdm-printings-table tr:hover td {
  background: rgba(200,135,42,0.05);
}

.cdm-printings-table tr.in-deck td {
  background: rgba(200,135,42,0.08);
}

.cdm-printing-badge {
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.cdm-printing-badge--deck {
  background: rgba(200,135,42,0.2);
  color: var(--color-accent);
  border: 1px solid rgba(200,135,42,0.3);
}

.cdm-printing-badge--edition {
  background: rgba(255,255,255,0.05);
  color: var(--color-muted);
  border: 1px solid rgba(255,255,255,0.08);
}

.cdm-printing-badge--foil {
  background: linear-gradient(135deg, rgba(200,135,42,0.3), rgba(232,168,74,0.3), rgba(155,211,174,0.3));
  color: #F0E8D5;
  border: 1px solid rgba(200,135,42,0.4);
}
.cdm-printing-badge--coldfoil {
  background: linear-gradient(135deg, rgba(180,200,220,0.25), rgba(220,220,240,0.25));
  color: #DAE8F5;
  border: 1px solid rgba(180,200,220,0.4);
}
.cdm-printing-badge--goldfoil {
  background: linear-gradient(135deg, #E8B94A, #FFC860);
  color: #1a1612;
  border: 1px solid #C8872A;
}
.cdm-printing-badge--etched {
  background: rgba(200,135,42,0.12);
  color: var(--color-accent);
  border: 1px solid rgba(200,135,42,0.3);
}
.cdm-printing-badge--holo {
  background: linear-gradient(135deg, rgba(130,200,255,0.2), rgba(255,200,130,0.2));
  color: #DAE8F5;
  border: 1px solid rgba(130,200,255,0.3);
}
.cdm-printing-badge--reverseholo {
  background: rgba(180,160,255,0.15);
  color: #C8A4FF;
  border: 1px solid rgba(180,160,255,0.3);
}

.cdm-use-btn {
  background: rgba(200,135,42,0.15);
  color: var(--color-accent);
  border: 1px solid rgba(200,135,42,0.3);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cdm-use-btn:hover {
  background: var(--color-accent);
  color: #1a1612;
}

/* ── Validation panel ──────────────────────────────────────────────────── */
.validation-ok {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #5CBB6A;
  padding: 0.35rem 0;
}
.validation-group {
  margin-top: 0.35rem;
}
.validation-group + .validation-group { margin-top: 0.7rem; }
.validation-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.validation-group--error .validation-header { color: #ef5350; }
.validation-group--warn  .validation-header { color: #F5A623; }
.validation-item {
  font-size: 0.76rem;
  padding: 0.25rem 0.5rem;
  margin: 0.15rem 0;
  border-radius: 4px;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.validation-group--error .validation-item:hover { background: rgba(239,83,80,0.08); color: #ef5350; }
.validation-group--warn  .validation-item:hover { background: rgba(245,166,35,0.08); color: #F5A623; }

.flash-highlight {
  animation: flashHighlight 1.4s ease;
}
@keyframes flashHighlight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,135,42,0); }
  40% { box-shadow: 0 0 0 3px rgba(200,135,42,0.6); }
}

/* ── Finish / featured indicators on cards ─────────────────────────────── */
.card-stack__finish {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  pointer-events: none;
  letter-spacing: 0.05em;
  z-index: 2;
}
.card-stack__finish--foil {
  background: linear-gradient(135deg, rgba(200,135,42,0.9), rgba(232,168,74,0.9), rgba(155,211,174,0.9));
  color: #1a1612;
}
.card-stack__finish--coldfoil {
  background: linear-gradient(135deg, rgba(180,200,220,0.95), rgba(220,230,240,0.95));
  color: #1a1612;
}
.card-stack__finish--goldfoil {
  background: linear-gradient(135deg, #E8B94A, #FFC860);
  color: #1a1612;
}
.card-stack__finish--etched {
  background: rgba(200,135,42,0.95);
  color: #1a1612;
}
.card-stack__finish--holo {
  background: linear-gradient(135deg, rgba(130,200,255,0.9), rgba(255,200,130,0.9));
  color: #1a1612;
}
.card-stack__finish--reverseholo {
  background: rgba(180,160,255,0.95);
  color: #1a1612;
}

.card-stack__featured {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #1a1612;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  z-index: 2;
}

.finish-chip {
  margin-left: 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.finish-chip--foil { background: linear-gradient(135deg, #C8872A, #E8A84A); color: #1a1612; }
.finish-chip--coldfoil { background: linear-gradient(135deg, #B4C8DC, #DAE8F5); color: #1a1612; }
.finish-chip--goldfoil { background: linear-gradient(135deg, #E8B94A, #FFC860); color: #1a1612; }
.finish-chip--etched { background: rgba(200,135,42,0.2); color: var(--color-accent); border: 1px solid rgba(200,135,42,0.4); }
.finish-chip--holo { background: linear-gradient(135deg, rgba(130,200,255,0.3), rgba(255,200,130,0.3)); color: #DAE8F5; }
.finish-chip--reverseholo { background: rgba(180,160,255,0.2); color: #C8A4FF; }

.featured-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #1a1612;
  font-size: 0.55rem;
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* Pokémon type colour dots */
.pokemon-type-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.poke-fire      { background: #fd7d24; }
.poke-water     { background: #4592c4; }
.poke-grass     { background: #9bcc50; }
.poke-lightning { background: #eed535; }
.poke-psychic   { background: #f366b9; }
.poke-fighting  { background: #d56723; }
.poke-darkness  { background: #707070; }
.poke-metal     { background: #9eb7b8; }
.poke-dragon    { background: #53a4cf; }
.poke-fairy     { background: #fdb9e9; }
.poke-colorless { background: #c0c0c0; }

/* Generic mana pip for numeric values */
.mana-pip.generic {
  background: #c0c0c0;
  color: #000;
  font-size: 8px;
  min-width: 14px;
  padding: 0 2px;
  border-radius: 7px;
}


/* ============================================================
   DESIGNATOR SPOTLIGHT — Commander / Hero / Avatar
   ============================================================ */

/* Designator spotlight — no container box, centered card image */
.desig-spotlight {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 1rem 0.5rem;
  margin: 0 1rem 0.5rem;
  text-align: center;
}
.desig-spotlight__label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}
.desig-spotlight__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.desig-spotlight__img {
  width: 180px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.55);
}
.desig-spotlight__info { text-align: center; }
.desig-spotlight__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}
.desig-spotlight__type {
  font-size: 0.73rem;
  color: var(--color-muted);
  margin-top: 0.1rem;
}
.desig-spotlight__remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0,0,0,0.5);
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0.3rem 0.45rem;
  font-size: 0.78rem;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.desig-spotlight__remove:hover {
  color: var(--color-danger);
  background: rgba(220,50,50,0.2);
}
.desig-spotlight__empty {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-style: italic;
  padding: 0.25rem 0;
}

/* ── Desktop: compact horizontal layout ──
   The spotlight is rendered twice (see Builder.cshtml): a `.--left` copy in
   the left column for mobile, and a `.--stats` copy at the top of the right
   stats panel for desktop. Swap visibility at the 768 breakpoint and make
   the stats copy stick while the panel scrolls. */
@media (min-width: 769px) {
  .desig-spotlight--left { display: none; }
  .desig-spotlight--stats {
    margin: -1rem -1rem 0.75rem;      /* bleed to the edges of .builder-stats padding */
    padding: 0.75rem 1rem 0.85rem;
    background: var(--color-bg, #161617);
    border-bottom: 1px solid var(--color-border);
    align-items: stretch;
    text-align: center;
    gap: 0.5rem;
  }
  .desig-spotlight--stats .desig-spotlight__label {
    align-self: flex-start;
    text-align: left;
  }
  .desig-spotlight--stats .desig-spotlight__card {
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
  }
  .desig-spotlight--stats .desig-spotlight__img { width: 176px; height: auto; object-fit: contain; border-radius: 10px; }
  .desig-spotlight--stats .desig-spotlight__info { text-align: center; }
}

@media (max-width: 768px) {
  /* On mobile the stats panel is tab-toggled; hide the stats copy entirely so
     it doesn't flash when the Stats tab is opened. */
  .desig-spotlight--stats { display: none; }
}

/* ── Legacy commander-zone (kept for graceful fallback) ── */
.commander-zone {
  background: rgba(200,135,42,0.06);
  border: 1px solid rgba(200,135,42,0.25);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.commander-zone__label {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-accent);
  letter-spacing: 0.06em;
}
.commander-card-thumb {
  width: 48px;
  height: 68px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}


/* ============================================================
   POKEMON — EVOLUTION CHAIN
   ============================================================ */

.evolution-chain {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0;
}

.evolution-arrow {
  color: var(--color-muted);
  font-size: 0.8rem;
}


/* ============================================================
   FAB — HERO PANEL & EQUIPMENT
   ============================================================ */

.hero-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.hero-card-thumb {
  width: 56px;
  height: 78px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(232,146,42,0.3);
  flex-shrink: 0;
}

.hero-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hero-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-text);
  margin: 0;
}

.hero-stats {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--color-muted);
  font-family: var(--font-body);
}

.equipment-strip {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  flex-shrink: 0;
}

.equipment-slot {
  width: 48px;
  height: 48px;
  border: 1px dashed rgba(200,135,42,0.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s;
  flex-shrink: 0;
}

.equipment-slot:hover {
  border-color: var(--color-accent);
}

.equipment-slot.filled {
  border-style: solid;
  background: rgba(200,135,42,0.05);
}

.equipment-slot__icon {
  font-size: 1rem;
  color: var(--color-muted);
}

.equipment-slot__label {
  font-size: 0.6rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-body);
}


/* ============================================================
   STATS PANEL (RIGHT COLUMN)
   ============================================================ */

.builder-stats {
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stat-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem;
}

/* Unified stats card — all sections divided by a thin rule */
.stat-card--unified {
  padding: 0;
}

/* Buy Missing Cards — single CTA button linking to the Price Tracker */
.btn-price-tracker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(135deg, rgba(200,135,42,0.15), rgba(232,168,74,0.1));
  border: 1px solid rgba(200,135,42,0.4);
  border-radius: 12px;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-body);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.btn-price-tracker:hover,
.btn-price-tracker:focus-visible {
  background: linear-gradient(135deg, rgba(200,135,42,0.25), rgba(232,168,74,0.2));
  border-color: var(--color-accent);
}
.btn-price-tracker:active { transform: scale(0.98); }
.btn-price-tracker__label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-accent);
}
.btn-price-tracker__label i { font-size: 1rem; }
.btn-price-tracker__meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8rem;
  color: var(--color-muted);
}
.btn-price-tracker__count {
  color: var(--color-muted);
}
.btn-price-tracker__total {
  color: var(--color-text);
  font-weight: 700;
}
.btn-price-tracker__meta i {
  color: var(--color-accent);
  font-size: 0.8rem;
}
.stat-card--unified .stat-section {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(200,135,42,0.1);
}
.stat-card--unified .stat-section:last-child {
  border-bottom: none;
}
.stat-section-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.stat-section-hint {
  font-size: 0.76rem;
  color: var(--color-muted);
  margin-top: 0.45rem;
  line-height: 1.4;
}

.stat-card-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-muted);
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

/* Legality */
.legality-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: var(--font-body);
  border: 1px solid transparent;
}

.legality-badge.legal {
  background: rgba(92,187,106,0.1);
  color: #5CBB6A;
  border-color: rgba(92,187,106,0.2);
}

.legality-badge.illegal {
  background: rgba(140,58,46,0.15);
  color: #ef5350;
  border-color: rgba(140,58,46,0.3);
}

/* Color identity pips (24px) */
.color-identity-pips {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.color-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: bold;
}

.color-pip.W { background: linear-gradient(135deg, #F0E6D2, #D4C8B8); color: #333; }
.color-pip.U { background: linear-gradient(135deg, #1565C0, #0E47A1); color: #fff; }
.color-pip.B { background: linear-gradient(135deg, #424242, #1A1A1A); color: #BBA7D0; }
.color-pip.R { background: linear-gradient(135deg, #E53935, #D32F2F); color: #fff; }
.color-pip.G { background: linear-gradient(135deg, #2E7D32, #1B5E20); color: #fff; }
.color-pip.C { background: linear-gradient(135deg, #D5D6DE, #c0c0c0); color: #333; }

/* Hex-shaped color identity pips for right-panel Color Identity section */
.color-pip-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-accent);
  letter-spacing: 0;
}

.color-pip-hex.W { background: linear-gradient(135deg, #F0E6D2, #D4C8B8); color: #333; }
.color-pip-hex.U { background: linear-gradient(135deg, #1565C0, #0E47A1); color: #fff; }
.color-pip-hex.B { background: linear-gradient(135deg, #424242, #1A1A1A); color: #BBA7D0; }
.color-pip-hex.R { background: linear-gradient(135deg, #E53935, #D32F2F); color: #fff; }
.color-pip-hex.G { background: linear-gradient(135deg, #2E7D32, #1B5E20); color: #fff; }
.color-pip-hex.C { background: linear-gradient(135deg, #D5D6DE, #c0c0c0); color: #333; }

/* Mana curve */
/* Mana curve — container for the inline SVG line chart. Width stretches,
   height fixed so the viewBox scales consistently across panels. */
.mana-curve {
  width: 100%;
  height: 110px;
  margin-top: 0.25rem;
}

.mana-curve-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Pitch curve (FAB) — segmented single bar */
.pitch-curve {
  margin-top: 0.25rem;
}

.pitch-segment-bar {
  display: flex;
  flex-direction: row;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  gap: 0;
}

.pitch-seg {
  height: 100%;
  min-width: 2px;
  transition: width 0.3s ease;
}

.pitch-seg--red    { background: #E8432D; }
.pitch-seg--yellow { background: #F5A623; }
.pitch-seg--blue   { background: #3B82F6; }

/* Legacy three-bar layout */
.pitch-curve-legacy {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.pitch-bar-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.25rem;
}

.pitch-bar-label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 0.8rem;
  font-family: var(--font-body);
  color: var(--color-muted);
}

.pitch-bar-track {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}

.pitch-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.pitch-bar-fill.red    { background: #E8432D; }
.pitch-bar-fill.yellow { background: #F5A623; }
.pitch-bar-fill.blue   { background: #3B82F6; }

/* Type breakdown */
.type-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.type-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-family: var(--font-body);
}

.type-label {
  color: var(--color-muted);
}

.type-count {
  color: var(--color-text);
  font-weight: 600;
}

/* Missing cards */
.missing-cards-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 180px;
  overflow-y: auto;
}

.missing-card-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-family: var(--font-body);
}

.missing-card-name {
  flex: 1;
  color: var(--color-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.missing-card-qty {
  color: var(--color-muted);
  flex-shrink: 0;
}

.missing-card-price {
  color: var(--color-accent);
  flex-shrink: 0;
}

.btn-add-to-cart-all {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #C8872A, #E8A84A);
  color: #000;
  font-weight: 700;
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  margin-top: 0.5rem;
  cursor: pointer;
  border: none;
  transition: filter 0.2s;
  text-align: center;
}

.btn-add-to-cart-all:hover {
  filter: brightness(1.1);
}

/* Consistency score */
.consistency-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.score-number {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--color-accent);
  line-height: 1;
}

.score-label {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-family: var(--font-body);
  margin-top: 0.25rem;
}

.score-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  margin: 0.5rem 0;
  width: 100%;
}

.score-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #5CBB6A 0%, #F5A623 60%, #ef5350 100%);
  transition: width 0.4s ease;
}


/* ============================================================
   RESPONSIVE — BUILDER
   ============================================================ */

@media (max-width: 900px) {
  .builder-layout {
    grid-template-columns: 1fr;
  }

  .builder-left {
    border-right: none;
  }

  .builder-stats {
    border-top: 1px solid var(--color-border);
    border-left: none;
  }
}


/* ============================================================
   CREATE DECK MODAL  (.cdm-*)
   ============================================================ */

.cdm-overlay {
  position: fixed;
  inset: 0;
  z-index: 12100;  /* above mob-nav (12000) so overlay covers the bottom nav on mobile */
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.cdm-overlay[hidden] {
  display: none;
}

.cdm-dialog {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 2rem;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,135,42,0.08);
  position: relative;
}

/* Close button sits absolute top-right, same as other modals */
.cdm-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.cdm-close:hover {
  color: var(--color-text);
  background: rgba(255,255,255,0.06);
}

/* ── Section picker modal (Add Card — shows full card image) ─────────── */
.sm-overlay {
  position: fixed;
  inset: 0;
  z-index: 11500;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.sm-overlay[hidden] { display: none; }
.sm-dialog {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  width: 100%;
  max-width: 380px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,135,42,0.08);
  position: relative;
}
.sm-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.sm-close:hover {
  color: var(--color-text);
  background: rgba(255,255,255,0.06);
}
.sm-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-text);
  margin: 0 0 0.65rem;
  letter-spacing: 0.04em;
  text-align: center;
}
.sm-card-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 0.6rem;
}
.sm-card-image {
  max-width: 240px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  display: block;
}
.sm-card-name {
  font-size: 0.9rem;
  color: var(--color-text);
  text-align: center;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sm-card-name strong { color: var(--color-text); font-weight: 700; }
.sm-field {
  margin-bottom: 0.8rem;
}
.sm-label {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  display: block;
  margin-bottom: 0.35rem;
}
.sm-select {
  width: 100%;
  background: #0E0C0A;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  padding: 0.55rem 0.8rem;
  font-size: 0.88rem;
}
.sm-qty {
  width: 90px;
  background: #0E0C0A;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  padding: 0.5rem 0.7rem;
  font-size: 0.88rem;
}
.sm-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.sm-btn-primary {
  flex: 1;
  background: linear-gradient(135deg, #C8872A, #E8A84A);
  color: #1a1612;
  font-weight: 700;
  padding: 0.6rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.sm-btn-primary:hover { filter: brightness(1.08); }
.sm-btn-cancel {
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.88rem;
}
.sm-btn-cancel:hover { color: var(--color-text); }

/* ── Stacked card-detail modal (image → details → printings) ─────────── */
.cdm-dialog--stacked {
  max-width: 460px;
  padding: 1.5rem 1.25rem 1.25rem;
}
.cdm-stacked {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cdm-image-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.cdm-preview-img {
  max-width: 260px;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  display: block;
}
.cdm-card-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-text);
  margin: 0.25rem 0 0;
  text-align: center;
  letter-spacing: 0.02em;
}
.cdm-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
  margin: 0.15rem 0 0.2rem;
}
.cdm-meta-chip {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  color: var(--color-muted);
  border: 1px solid rgba(255,255,255,0.06);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.cdm-meta-set-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
  filter: invert(85%) sepia(22%) saturate(1100%) hue-rotate(351deg) brightness(95%) contrast(88%);
}
.cdm-meta-chip--rarity {
  background: rgba(200,135,42,0.12);
  color: var(--color-accent);
  border-color: rgba(200,135,42,0.25);
}
.cdm-meta-chip--price {
  background: rgba(92,187,106,0.12);
  color: #5CBB6A;
  border-color: rgba(92,187,106,0.25);
}
.cdm-card-attrs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.85rem;
  padding: 0.6rem 0.75rem;
  background: rgba(14,12,10,0.35);
  border: 1px solid rgba(200,135,42,0.1);
  border-radius: 8px;
  font-size: 0.82rem;
}
.cdm-card-attrs:empty { display: none; }
.cdm-attr-row {
  display: contents;
}
.cdm-attr-label {
  color: var(--color-muted);
  font-family: var(--font-accent);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding-top: 1px;
}
.cdm-attr-value {
  color: var(--color-text);
  word-break: break-word;
}
.cdm-card-rules {
  font-size: 0.84rem;
  color: var(--color-text);
  padding: 0.7rem 0.85rem;
  background: rgba(14,12,10,0.35);
  border-radius: 8px;
  border-left: 3px solid rgba(200,135,42,0.3);
  line-height: 1.5;
}
.cdm-card-rules > * + * { margin-top: 0.45rem; }
.cdm-rules-line { white-space: pre-wrap; }
.cdm-flavor {
  font-style: italic;
  color: var(--color-muted);
  font-size: 0.78rem;
  padding-top: 0.35rem;
  border-top: 1px dashed rgba(200,135,42,0.15);
}
.cdm-pt {
  display: inline-block;
  padding: 2px 10px;
  background: rgba(200,135,42,0.15);
  color: var(--color-accent);
  border: 1px solid rgba(200,135,42,0.3);
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.82rem;
  margin-top: 0.4rem;
}
.cdm-ability {
  padding: 0.35rem 0.5rem;
  background: rgba(200,135,42,0.05);
  border-radius: 6px;
  border: 1px solid rgba(200,135,42,0.12);
}
.cdm-ability-type {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(200,135,42,0.12);
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 0.4rem;
  letter-spacing: 0.05em;
}
.cdm-ability-name { font-weight: 700; color: var(--color-text); }
.cdm-ability-text { margin-top: 0.25rem; font-size: 0.8rem; }
.cdm-attack {
  padding: 0.4rem 0.5rem;
  border-left: 2px solid rgba(200,135,42,0.25);
  background: rgba(14,12,10,0.45);
  border-radius: 4px;
}
.cdm-attack-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}
.cdm-attack-cost { display: inline-flex; gap: 2px; }
.poke-cost-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(200,135,42,0.25);
  color: var(--color-text);
  font-size: 0.6rem;
  font-weight: 700;
}
.cdm-attack-name { flex: 1; color: var(--color-text); font-size: 0.85rem; }
.cdm-attack-damage {
  font-weight: 700;
  color: var(--color-accent);
  font-size: 0.9rem;
}
.cdm-attack-text { margin-top: 0.25rem; font-size: 0.78rem; color: var(--color-muted); }

.cdm-printings-section {
  margin-top: 0.3rem;
}
.cdm-printings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
}
.cdm-printings-label {
  font-family: var(--font-accent);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Printings search bar — icon on right, clear button to its left */
.cdm-printings-search-wrap {
  position: relative;
  flex: 1;
  min-width: 140px;
  max-width: 240px;
}
.cdm-printings-search {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 0.8rem;
  padding: 0.4rem 2.6rem 0.4rem 0.65rem;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}
.cdm-printings-search::placeholder { color: var(--color-muted); }
.cdm-printings-search:focus { border-color: rgba(200,135,42,0.5); }
.cdm-printings-search::-webkit-search-cancel-button { display: none; }
.cdm-printings-icon {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  font-size: 0.72rem;
  pointer-events: none;
}
.cdm-printings-clear {
  position: absolute;
  right: 1.7rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  font-size: 0.72rem;
  border-radius: 3px;
}
.cdm-printings-clear:hover { color: var(--color-text); }
.cdm-printings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  padding: 0.25rem 0;
}

.cdm-printings-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1rem;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.cdm-tile {
  display: flex;
  flex-direction: column;
  background: rgba(14,12,10,0.55);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
}
.cdm-tile:hover {
  border-color: rgba(200,135,42,0.4);
  transform: translateY(-1px);
}
.cdm-tile.is-previewing {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent) inset;
}
.cdm-tile.is-indeck {
  border-color: rgba(92,187,106,0.45);
}
.cdm-tile-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 88;
  background: #0E0C0A;
  overflow: hidden;
}
.cdm-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cdm-tile-indeck {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(14,12,10,0.85);
  color: #5CBB6A;
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid rgba(92,187,106,0.35);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
}
.cdm-tile-info {
  padding: 0.4rem 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}
.cdm-tile-set {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}
.cdm-tile-set-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
  filter: invert(85%) sepia(22%) saturate(1100%) hue-rotate(351deg) brightness(95%) contrast(88%);
}
.cdm-tile-set-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.cdm-tile-cn {
  font-size: 0.62rem;
  color: var(--color-muted);
  font-family: 'Courier New', monospace;
}
.cdm-tile-edition {
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  color: var(--color-muted);
  font-weight: 500;
  flex-shrink: 0;
}
.cdm-tile-finish {
  display: flex;
}
.cdm-tile-finish .cdm-printing-badge {
  font-size: 0.64rem;
  padding: 1px 6px;
}
.cdm-tile-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-top: auto;
}
.cdm-tile-price {
  font-size: 0.82rem;
  font-weight: 700;
  color: #5CBB6A;
}
.cdm-tile-use {
  background: rgba(200,135,42,0.18);
  color: var(--color-accent);
  border: 1px solid rgba(200,135,42,0.35);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cdm-tile-use:hover {
  background: var(--color-accent);
  color: #1a1612;
}

/* Desktop: 3 columns */
@media (min-width: 640px) {
  .cdm-printings-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.cdm-stacked-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

/* Title / sub — reuses .create-title and .create-sub from decks.css */
.create-title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-text);
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
}

.create-sub {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-bottom: 1.75rem;
}

/* Reuse .btn-create and .btn-cancel from Create.cshtml styles — also in decks.css */
.btn-create {
  background: linear-gradient(135deg, #C8872A, #E8A84A);
  color: #000;
  font-weight: 700;
  padding: 0.7rem 1.75rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: filter 0.18s;
}

.btn-create:hover {
  filter: brightness(1.1);
}

.btn-cancel {
  color: var(--color-muted);
  background: none;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: color 0.15s;
}

.btn-cancel:hover {
  color: var(--color-text);
}

/* ── Game picker (shared: Create page + modal) ───────────────────────────── */
.game-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

.game-option {
  position: relative;
}

.game-option input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.game-option label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-muted);
  transition: all 0.2s;
  text-align: center;
  text-decoration: none !important;
  line-height: 1.3;
}

.game-option label i {
  font-size: 1.2rem;
}

.game-option input:checked + label {
  border-color: var(--color-accent);
  color: var(--color-text);
  background: rgba(200,135,42,0.06);
}

/* All game options use gold accent — consistent with Obsidian design */

/* ── Format pills (shared: Create page + modal) ──────────────────────────── */
.format-section {
  display: none;
}

.format-section.visible {
  display: block;
}

.format-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.format-pill {
  position: relative;
}

.format-pill input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.format-pill label {
  display: block;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.18s;
  font-family: var(--font-body);
  text-decoration: none !important;
}

.format-pill input:checked + label {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(200,135,42,0.08);
}

/* ── Shared form inputs (Create page + modal) ────────────────────────────── */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-family: var(--font-accent);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 0.45rem;
}

.form-input,
.form-textarea {
  width: 100%;
  background: #0E0C0A;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
  font-family: var(--font-body);
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--color-accent);
  outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #3a3530;
}

.form-textarea {
  resize: vertical;
  min-height: 90px;
}

.create-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.error-list {
  background: rgba(140,58,46,0.15);
  border: 1px solid rgba(140,58,46,0.3);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  color: #ef5350;
  font-size: 0.9rem;
}


/* ============================================================
   FABRARY IMPORT MODAL — Builder page
   ============================================================ */

/* Tab bar */
.fab-import-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.1rem;
}

.fab-tab {
  flex: 1;
  padding: 0.55rem 1rem;
  background: transparent;
  border: none;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: center;
}

.fab-tab + .fab-tab {
  border-left: 1px solid var(--color-border);
}

.fab-tab.active {
  background: rgba(200,135,42,0.10);
  color: var(--color-accent);
  font-weight: 600;
}

.fab-tab:hover:not(.active) {
  background: rgba(255,255,255,0.04);
  color: var(--color-text);
}

/* Tab content areas */
.fab-tab-content {
  /* shown/hidden via display:none in JS — no extra styles needed */
}

/* Preview list container */
.fab-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) transparent;
  margin-top: 0.5rem;
}

.fab-preview-list::-webkit-scrollbar { width: 4px; }
.fab-preview-list::-webkit-scrollbar-track { background: transparent; }
.fab-preview-list::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 4px; }

/* Individual preview row */
.fab-preview-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(200,135,42,0.10);
  border-radius: 8px;
  transition: background 0.15s;
}

.fab-preview-row:hover {
  background: rgba(200,135,42,0.06);
}

/* Card thumbnail */
.fab-preview-img {
  width: 36px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid rgba(200,135,42,0.2);
}

.fab-preview-img-placeholder {
  width: 36px;
  height: 50px;
  border-radius: 4px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* Card name & meta */
.fab-preview-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.fab-preview-name {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fab-preview-meta {
  font-size: 0.75rem;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quantity badge on the right */
.fab-preview-qty {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  min-width: 2rem;
  text-align: right;
}

/* Unmatched warning box */
#fab-unmatched-box {
  background: rgba(140,58,46,0.12);
  border: 1px solid rgba(140,58,46,0.28);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  font-size: 0.85rem;
}

#fab-unmatched-box strong {
  color: #ef9090;
}

/* Done screen checkmark */
#fab-step-done .fa-circle-check {
  font-size: 3rem;
  color: var(--pokemon, #5CBB6A);
  margin-bottom: 0.5rem;
  display: block;
}

/* Spinner inside parse button */
#fab-parse-btn .fa-spinner {
  animation: spin 0.7s linear infinite;
}

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


/* ============================================================
   DECKS ACTION BAR (mobile only)
   ============================================================ */

/* Hidden on desktop — existing toolbar handles layout */
.decks-action-bar { display: none; }

@media (max-width: 768px) {
  .decks-action-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface);
    border-top: 3px solid var(--color-accent);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.35);
    flex-shrink: 0;
  }

  .decks-search-wrap--bar {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .decks-search-wrap--bar .decks-search-icon {
    color: rgba(200,135,42,0.6);
    font-size: 0.85rem;
    flex-shrink: 0;
  }

  .decks-search-wrap--bar .decks-search {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0;
  }

  .decks-search-wrap--bar .decks-search::placeholder { color: rgba(200,135,42,0.45); }

  .decks-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-shrink: 0;
    height: 38px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: filter 0.15s;
  }

  .decks-bar-filters {
    width: 38px;
    background: rgba(200,135,42,0.1);
    border: 1px solid rgba(200,135,42,0.35);
    color: var(--color-accent);
  }

  .decks-bar-filters:active { filter: brightness(1.2); }

  .decks-bar-new {
    padding: 0 0.85rem;
    background: var(--color-accent);
    color: #000;
    font-weight: 700;
  }

  .decks-bar-new:active { filter: brightness(0.9); }

  /* ─────────────────────────────────────────────────────────
     NEW DECK FLOW — centered modal with 3D flip animation
     ───────────────────────────────────────────────────────── */
  .ndf-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 12400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, background 0.25s, visibility 0s 0.25s;
    pointer-events: none;
  }
  .ndf-overlay[hidden] { display: none; }
  .ndf-overlay.is-open {
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: opacity 0.25s, background 0.25s;
  }

  /* The card container — perspective wrapper */
  .ndf-card {
    width: 100%;
    max-width: 420px;
    height: min(86dvh, 720px);
    position: relative;
    perspective: 1600px;
  }

  #ndf-form {
    width: 100%;
    height: 100%;
  }

  /* Flipper — 3D inner that rotates 180deg to reveal back face */
  .ndf-flip {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.5, 0, 0.5, 1);
  }
  .ndf-flip.is-flipped { transform: rotateY(180deg); }

  /* Faces — two, stacked via backface-visibility */
  .ndf-face {
    position: absolute;
    inset: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 1.75rem 1.25rem 1.25rem;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,135,42,0.08);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow: hidden;   /* face itself doesn't scroll; scrollable children (grid, etc.) handle it */
    min-height: 0;
  }
  .ndf-face--back { transform: rotateY(180deg); }

  /* Close button — top right of each face */
  .ndf-close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(200,135,42,0.25);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    z-index: 2;
  }
  .ndf-close:hover { color: var(--color-accent); border-color: var(--color-accent); }

  .ndf-back {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.35rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .ndf-back:hover { color: var(--color-accent); }

  .ndf-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--color-text);
    margin: 0.25rem 0 0;
    letter-spacing: 0.04em;
  }
  .ndf-sub {
    color: var(--color-muted);
    font-size: 0.88rem;
    margin: 0 0 0.5rem;
  }

  /* Game tiles (step 1) — 2x2 large tappable tiles */
  .ndf-game-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
  }
  .ndf-game-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    min-height: 130px;
    background: rgba(14,12,10,0.55);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
  }
  .ndf-game-tile:active { transform: scale(0.97); }
  .ndf-game-tile__logo {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
    transition: filter 0.15s;
  }
  .ndf-game-tile.game-tile--mtg:hover     { border-color: #4A90D9; background: rgba(74,144,217,0.1); }
  .ndf-game-tile.game-tile--pokemon:hover { border-color: #5CBB6A; background: rgba(92,187,106,0.1); }
  .ndf-game-tile.game-tile--fab:hover     { border-color: #E8922A; background: rgba(232,146,42,0.1); }
  .ndf-game-tile.game-tile--sorcery:hover { border-color: #8B5CF6; background: rgba(139,92,246,0.1); }
  .ndf-game-tile:hover .ndf-game-tile__logo {
    filter: drop-shadow(0 2px 12px rgba(255,255,255,0.15));
  }

  /* Step 2 form fields */
  .ndf-field { display: flex; flex-direction: column; gap: 0.3rem; }
  .ndf-label {
    font-family: var(--font-accent);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
  .ndf-optional { opacity: 0.55; font-size: 0.72rem; }
  .ndf-input, .ndf-textarea {
    background: #0E0C0A;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    padding: 0.55rem 0.75rem;
    font-size: 0.88rem;
    outline: none;
    -webkit-appearance: none;
    font-family: var(--font-body);
  }
  .ndf-input:focus, .ndf-textarea:focus { border-color: rgba(200,135,42,0.5); }
  .ndf-textarea { resize: vertical; min-height: 70px; }

  .ndf-format-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .ndf-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--color-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .ndf-pill input { display: none; }
  .ndf-pill:has(input:checked) {
    background: rgba(200,135,42,0.15);
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  /* Scrollable mid-section for step 2 (format + name + description) */
  .ndf-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding-right: 0.15rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .ndf-actions {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 0.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  .ndf-btn-primary {
    background: linear-gradient(135deg, #C8872A, #E8A84A);
    color: #1a1612;
    font-weight: 700;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .ndf-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
  .ndf-btn-primary:disabled {
    background: rgba(160,140,100,0.25);
    color: rgba(240,232,213,0.5);
    cursor: not-allowed;
  }

  /* Step 3 designator picker */
  .ndf-desig-search-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .ndf-colors-select {
    flex-shrink: 0;
    background: #0E0C0A;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 0.78rem;
    padding: 0.4rem 0.55rem;
    max-width: 140px;
  }
  .ndf-desig-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: max-content;    /* tiles size to content, no vertical stretch */
    align-content: start;           /* rows pack to the top; don't spread to fill */
    gap: 0.45rem;
    flex: 1 1 auto;
    min-height: 0;                  /* allows flex child to shrink below content */
    overflow-y: auto;
    padding: 0.25rem 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .ndf-desig-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 1rem;
    color: var(--color-muted);
    font-size: 0.85rem;
  }
  .ndf-desig-tile {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    align-self: start;             /* do not stretch vertically */
    background: rgba(0,0,0,0.4);   /* solid fallback so alt-text stripes never show */
  }
  .ndf-desig-tile:active { transform: scale(0.97); }
  .ndf-desig-tile img {
    width: 100%;
    aspect-ratio: 63 / 88;
    object-fit: cover;
    display: block;
  }
  .ndf-desig-tile__name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.3rem 0.4rem;
    font-size: 0.62rem;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ndf-desig-tile.is-selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
  }

  /* Filter sheet sections */
  .deck-filter-sheet__section {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(200,135,42,0.1);
  }

  .deck-filter-sheet__label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
  }
  .deck-filter-sheet__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }
  .deck-filter-sheet__label-row .deck-filter-sheet__label { margin: 0; }
  .deck-filter-clear {
    font-size: 0.72rem;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
  }
  .deck-filter-clear:hover { text-decoration: underline; }

  /* 2x2 game filter tile grid */
  .game-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
  }
  .game-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 0.75rem;
    min-height: 72px;
    background: rgba(14,12,10,0.55);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
  .game-tile:active { transform: scale(0.97); }
  .game-tile__logo {
    max-width: 100%;
    max-height: 46px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
    opacity: 0.85;
    transition: opacity 0.15s, filter 0.15s;
  }
  .game-tile:hover .game-tile__logo,
  .game-tile.is-active .game-tile__logo {
    opacity: 1;
    filter: drop-shadow(0 2px 10px rgba(255,255,255,0.2));
  }
  .game-tile.is-active {
    border-color: var(--color-accent);
    background: rgba(200,135,42,0.12);
  }
  .game-tile--mtg.is-active     { border-color: #4A90D9; background: rgba(74,144,217,0.12); }
  .game-tile--pokemon.is-active { border-color: #5CBB6A; background: rgba(92,187,106,0.12); }
  .game-tile--fab.is-active     { border-color: #E8922A; background: rgba(232,146,42,0.12); }
  .game-tile--sorcery.is-active { border-color: #8B5CF6; background: rgba(139,92,246,0.12); }

  .deck-filter-chips--sheet {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .view-toggle--sheet {
    display: flex;
    gap: 0.5rem;
  }

  .view-toggle--sheet .view-toggle__btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(200,135,42,0.3);
    background: transparent;
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }

  .view-toggle--sheet .view-toggle__btn.active {
    background: rgba(200,135,42,0.15);
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

/* ============================================================
   NEW DECK FLOW — DESKTOP (>= 769px)
   Standalone: does not rely on the mobile .ndf-* block above.
   Layout swaps the 3D flip for a horizontal slide in a clipped card.
   ============================================================ */
@media (min-width: 769px) {
  .ndf-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 12400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, background 0.25s, visibility 0s 0.25s;
    pointer-events: none;
  }
  .ndf-overlay[hidden] { display: none; }
  .ndf-overlay.is-open {
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: opacity 0.25s, background 0.25s;
  }

  /* Card: the visible modal. Chrome lives here; overflow clips the slide track. */
  .ndf-card {
    width: 100%;
    max-width: 820px;
    height: min(82dvh, 680px);
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,135,42,0.08);
  }

  #ndf-form {
    width: 100%;
    height: 100%;
  }

  /* Horizontal two-pane slider (replaces the mobile 3D flip) */
  .ndf-flip {
    position: relative;
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .ndf-flip.is-flipped { transform: translateX(-50%); }

  .ndf-face {
    position: relative;
    flex: 0 0 50%;
    width: 50%;
    padding: 2rem 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow: hidden;
    min-height: 0;
  }

  .ndf-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(200,135,42,0.25);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    z-index: 2;
  }
  .ndf-close:hover { color: var(--color-accent); border-color: var(--color-accent); }

  .ndf-back {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.35rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .ndf-back:hover { color: var(--color-accent); }

  .ndf-title {
    font-family: var(--font-display);
    font-size: 1.85rem;
    color: var(--color-text);
    margin: 0.25rem 0 0;
    letter-spacing: 0.04em;
  }
  .ndf-sub {
    color: var(--color-muted);
    font-size: 0.92rem;
    margin: 0 0 0.5rem;
  }

  /* Step 1: 2x2 game grid with larger tiles */
  .ndf-game-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
  }
  .ndf-game-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.75rem 1.5rem;
    min-height: 170px;
    background: rgba(14,12,10,0.55);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
  }
  .ndf-game-tile:active { transform: scale(0.98); }
  .ndf-game-tile__logo {
    max-width: 80%;
    max-height: 110px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
    transition: filter 0.15s;
  }
  .ndf-game-tile.game-tile--mtg:hover     { border-color: #4A90D9; background: rgba(74,144,217,0.1); }
  .ndf-game-tile.game-tile--pokemon:hover { border-color: #5CBB6A; background: rgba(92,187,106,0.1); }
  .ndf-game-tile.game-tile--fab:hover     { border-color: #E8922A; background: rgba(232,146,42,0.1); }
  .ndf-game-tile.game-tile--sorcery:hover { border-color: #8B5CF6; background: rgba(139,92,246,0.1); }
  .ndf-game-tile:hover .ndf-game-tile__logo {
    filter: drop-shadow(0 2px 12px rgba(255,255,255,0.15));
  }

  /* Step 2 form fields */
  .ndf-field { display: flex; flex-direction: column; gap: 0.35rem; }
  .ndf-label {
    font-family: var(--font-accent);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
  .ndf-optional { opacity: 0.55; font-size: 0.72rem; }
  .ndf-input, .ndf-textarea {
    background: #0E0C0A;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    padding: 0.65rem 0.85rem;
    font-size: 0.92rem;
    outline: none;
    -webkit-appearance: none;
    font-family: var(--font-body);
  }
  .ndf-input:focus, .ndf-textarea:focus { border-color: rgba(200,135,42,0.5); }
  .ndf-textarea { resize: vertical; min-height: 80px; }

  /* Format selector: rectangular button grid (replaces rounded chips on desktop) */
  .ndf-format-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .ndf-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 0.75rem;
    background: rgba(14,12,10,0.4);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    text-align: center;
  }
  .ndf-pill input { display: none; }
  .ndf-pill:hover {
    border-color: rgba(200,135,42,0.4);
    color: var(--color-text);
  }
  .ndf-pill:has(input:checked) {
    background: rgba(200,135,42,0.15);
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .ndf-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 0.25rem;
    overscroll-behavior: contain;
  }

  .ndf-actions {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  .ndf-btn-primary {
    background: linear-gradient(135deg, #C8872A, #E8A84A);
    color: #1a1612;
    font-weight: 700;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .ndf-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
  .ndf-btn-primary:disabled {
    background: rgba(160,140,100,0.25);
    color: rgba(240,232,213,0.5);
    cursor: not-allowed;
  }

  /* Step 3 designator picker — 4-col grid, bigger card art */
  .ndf-desig-search-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .ndf-colors-select {
    flex-shrink: 0;
    background: #0E0C0A;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 0.82rem;
    padding: 0.5rem 0.65rem;
    max-width: 160px;
  }
  .ndf-desig-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem 0;
    overscroll-behavior: contain;
  }
  .ndf-desig-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 1rem;
    color: var(--color-muted);
    font-size: 0.88rem;
  }
  .ndf-desig-tile {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.1s;
    align-self: start;
    background: rgba(0,0,0,0.4);
  }
  .ndf-desig-tile:active { transform: scale(0.97); }
  .ndf-desig-tile img {
    width: 100%;
    aspect-ratio: 63 / 88;
    object-fit: cover;
    display: block;
  }
  .ndf-desig-tile__name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.4rem 0.55rem;
    font-size: 0.78rem;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ndf-desig-tile.is-selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
  }
}

/* ============================================================
   RESPONSIVE — INDEX & DETAIL
   ============================================================ */

@media (max-width: 768px) {
  /* ── Decks index page ── */
  .decks-page {
    padding: 1rem;
  }

  .decks-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .decks-page-title { font-size: clamp(1.8rem, 6vw, 2.8rem); }

  /* New deck button fills row */
  .decks-page-header .btn-new-deck,
  .decks-page-header > a,
  .decks-page-header > button {
    width: 100%;
    justify-content: center;
  }

  /* Filter chip bar: scroll horizontally */
  .deck-filter-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
  }
  .deck-filter-bar::-webkit-scrollbar { display: none; }

  /* Deck grid: 2-column on tablet */
  .deck-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .deck-tile__fan    { height: 120px; }
  .deck-tile__body   { padding: 10px 12px 10px; }
  .deck-tile__name   { font-size: 1.1rem; }
  .deck-tile__stats  { font-size: 0.78rem; gap: 0.5rem; }

  /* Stack name + stats vertically so nothing is hidden on small cards */
  .deck-tile__name-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .deck-tile__name-stats {
    flex-shrink: 1;
    flex-wrap: wrap;
  }

  .deck-tile__actions { gap: 0.3rem; }
  .btn-tile-action    { font-size: 0.78rem; padding: 0.4rem 0.3rem; }

  /* New deck CTA tile: hidden on mobile (ActionBar has the New Deck button) */
  .deck-new-cta { display: none; }

  /* Toolbar: hide on mobile — controls moved to ActionBar + filter sheet */
  .decks-toolbar { display: none; }

  /* ── Deck builder layout ── */
  @media (max-width: 768px) {
    .builder-layout { grid-template-columns: 1fr; }
    .builder-left   { border-right: none; }
    .builder-stats  { border-top: 1px solid var(--color-border); border-left: none; }
  }

  /* ── Create deck modal ── */
  .cdm-dialog {
    padding: 1.5rem 1.25rem;
    border-radius: 14px;
  }
}

@media (max-width: 480px) {
  /* Single column on very small phones */
  .deck-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  .deck-tile__fan   { height: 100px; }
  .deck-tile__name  { font-size: 1rem; }
  .btn-tile-action  { font-size: 0.75rem; }
}

/* ============================================================
   BUILDER MOBILE REDESIGN
   ============================================================ */

/* Default: mob-only elements hidden on desktop */
.mob-only { display: none !important; }

/* ── Mobile card search — slides up above nav bar ── */
.bms-screen {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 12300;   /* above .mob-nav (12000) and action sheets (12200) */
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}
.bms-screen[hidden] { display: none; }
.bms-screen.is-open {
  transform: translateY(0);
  pointer-events: all;
}

/* On mobile: sits above nav, leaves nav visible at bottom */
@media (max-width: 768px) {
  .bms-screen {
    top: auto;
    bottom: var(--nav-height, 64px);
    height: calc(100dvh - var(--nav-height, 64px));
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.5);
  }
}

/* On desktop: centered modal with backdrop, no slide-up */
@media (min-width: 769px) {
  .bms-screen {
    top: 5vh;
    bottom: 5vh;
    left: 50%;
    right: auto;
    width: min(1100px, 92vw);
    transform: translate(-50%, 20px);
    opacity: 0;
    border: 1px solid var(--color-border, rgba(200,135,42,0.25));
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.65), 0 0 0 100vmax rgba(0,0,0,0.55);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .bms-screen.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

/* Top bar: back button + active section label */
.bms-topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.bms-back {
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: 1.1rem;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}

.bms-active-section {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  flex: 1;
  padding: 0;
}

/* View toggle in topbar */
.bms-view-toggle {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.bms-view-btn {
  background: none;
  border: 1px solid rgba(200,135,42,0.15);
  color: var(--color-muted);
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.bms-view-btn.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(200,135,42,0.08);
}

/* Results — fills remaining space, scrollable */
.bms-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Grid layout for search results */
.bms-results--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  padding: 0.5rem;
  align-content: start;
}
.bms-card-tile {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.bms-card-tile img {
  width: 100%;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.bms-card-add {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #000;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.bms-card-tile:hover .bms-card-add,
.bms-card-tile:active .bms-card-add { opacity: 1; }
/* On touch devices always show the add button */
@media (hover: none) { .bms-card-add { opacity: 0.85; } }
.bms-card-add.added {
  background: #5CBB6A;
  opacity: 1;
}
.bms-card-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.3rem 0.35rem;
  font-size: 0.62rem;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  border-radius: 0 0 8px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Type filter chips row */
.bms-type-filters {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: var(--color-bg);
}
.bms-type-filters::-webkit-scrollbar { display: none; }

.bms-type-btn {
  flex-shrink: 0;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.04);
  color: var(--color-muted);
  font-size: 0.75rem;
  font-family: var(--font-accent);
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bms-type-btn.active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(200,135,42,0.1);
}

/* Search footer — input at bottom */
.bms-footer {
  flex-shrink: 0;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.bms-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.bms-input-icon {
  position: absolute;
  left: 0.85rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  pointer-events: none;
}
.bms-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-text);
  padding: 0.7rem 1rem 0.7rem 2.25rem;
  font-size: 0.95rem;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.bms-input:focus { border-color: var(--color-accent); }
.bms-input::-webkit-search-cancel-button { display: none; }

/* Toast notification */
.bms-toast {
  position: fixed;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30,25,18,0.95);
  border: 1px solid var(--color-accent);
  color: var(--color-text);
  font-size: 0.85rem;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  z-index: 600;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
}

.bms-toast.visible { opacity: 1; }

/* ── Mobile ActionBar for Builder ── */
.mob-builder-bar {
  display: flex;
  align-items: stretch;
  background: var(--color-surface);
  border-top: 3px solid var(--color-accent);
  padding: 0 0.5rem;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.35);
  min-height: 52px;
}

@media (min-width: 769px) {
  .mob-builder-bar { display: none !important; }
}

.mob-builder-tabs {
  display: flex;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  align-items: stretch;
}

.mob-builder-tabs::-webkit-scrollbar { display: none; }

.mob-btab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.45rem 0.9rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-family: var(--font-accent);
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.mob-btab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.mob-btab-count {
  font-size: 0.62rem;
  opacity: 0.65;
  font-family: var(--font-body);
}

.mob-builder-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: auto 0.1rem auto 0.5rem;
  background: var(--color-accent);
  color: #000;
  border: none;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.mob-builder-add:hover,
.mob-builder-add:active { background: #E09830; }

/* Stats tab — icon-only, sits at end of tab list */
.mob-stats-btn {
  padding: 0.45rem 0.75rem;
  border-left: 1px solid rgba(255,255,255,0.06);
  margin-left: 0.1rem;
  flex-shrink: 0;
  font-size: 0.85rem;
}

/* Hide stats panel on mobile by default; JS shows it when Stats tab active */
@media (max-width: 768px) {
  .builder-stats { display: none; }
}

/* ── View toggle (Grid / List) — mobile only ── */
.builder-view-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.25rem;
  align-items: center;
}

.builder-view-row .view-lbl {
  font-size: 0.7rem;
  font-family: var(--font-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-right: 0.25rem;
}

.view-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  padding: 0.3rem 0.65rem;
  border-radius: 7px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}

.view-btn.active {
  background: rgba(200,135,42,0.15);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ── Builder mobile overrides ── */
@media (max-width: 768px) {
  /* Show mob-only elements */
  .mob-only { display: flex !important; }

  /* Hide desktop search bar + tabs (replaced by ActionBar + bms-screen) */
  .builder-search-bar { display: none !important; }
  .builder-tabs       { display: none !important; }

  /* 2-column card stack grid — centered, equal side padding */
  .card-stack-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 0.5rem;
    padding: 0.5rem;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-items: stretch;
  }
  .builder-card-list {
    padding: 0.5rem 0.5rem 1rem;  /* equal left/right so the grid inside centers symmetrically */
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
  [data-section-panel] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .card-stack { width: 100%; }

  .card-stack__face img {
    width: 100%;
    height: auto;
    aspect-ratio: 63 / 88;
    object-fit: cover;
  }

  .card-stack__placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 63 / 88;
    min-height: unset;
  }

  .card-stack__depth {
    width: calc(100% - 8px);
  }

  /* Qty badge scale */
  .card-stack__qty {
    font-size: 0.9rem;
    padding: 2px 7px;
  }

  /* Extra padding so last cards aren't hidden behind ActionBar */
  .builder-card-list { padding-bottom: 1rem; }

  /* Stats panel: compact on mobile */
  .builder-stats { margin-top: 1rem; }
}

/* ============================================================
   MOBILE BOTTOM SHEET — drag handle indicator
   Shows a small pill handle at the top of modal dialogs on mobile
   to hint that the user can swipe down to close.
   ============================================================ */
@media (max-width: 768px) {
  .cdm-overlay .cdm-dialog::before,
  #section-modal > div::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(200,135,42,0.35);
    border-radius: 2px;
    margin: 0 auto 0.75rem;
  }

  /* Make the create-deck modal slide up from bottom on mobile */
  .cdm-overlay {
    align-items: flex-end;
  }
  .cdm-overlay .cdm-dialog {
    border-radius: 18px 18px 0 0;
    max-height: 90vh;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
    animation: slideUpSheet 0.28s ease-out;
  }
  @keyframes slideUpSheet {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}