/* Deck Builder — fantasy gold refresh.
   Kept in a dedicated layer so the editor can evolve without affecting other pages. */

#deckBuilderPanel {
  --deck-gold: #d6a545;
  --deck-gold-bright: #f3d889;
  --deck-gold-pale: #fff0bd;
  --deck-gold-deep: #6f4710;
  --deck-ink: #070a0b;
  --deck-surface: rgba(9, 13, 15, 0.92);
  --deck-surface-soft: rgba(17, 20, 19, 0.88);
  --deck-line: rgba(207, 157, 62, 0.48);
  --deck-line-soft: rgba(226, 187, 105, 0.18);
  color: #f7ecd1;
}

#deckBuilderPanel.deck-builder-page-wrapper {
  box-sizing: border-box;
  width: min(1280px, calc(100% - 24px));
  margin-inline: auto;
  padding: clamp(12px, 2vw, 24px);
  border: 1px solid rgba(194, 143, 48, 0.38);
  border-radius: 6px;
  background:
    radial-gradient(circle at 15% 0%, rgba(219, 168, 64, 0.12), transparent 30%),
    repeating-linear-gradient(115deg, rgba(255, 238, 195, 0.016) 0 1px, transparent 1px 8px),
    linear-gradient(155deg, rgba(13, 17, 18, 0.92), rgba(4, 7, 8, 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 153, 0.05),
    inset 0 0 48px rgba(0, 0, 0, 0.34),
    0 24px 70px rgba(0, 0, 0, 0.46);
}

#deckBuilderPanel .deck-builder-header {
  position: relative;
  margin-bottom: clamp(12px, 2vw, 20px);
  overflow: hidden;
  border: 1px solid var(--deck-line) !important;
  border-radius: 5px !important;
  background:
    linear-gradient(90deg, rgba(214, 165, 70, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(25, 25, 20, 0.96), rgba(8, 11, 12, 0.96)) !important;
  box-shadow: inset 0 0 0 3px rgba(3, 5, 5, 0.48), inset 0 0 0 4px rgba(238, 193, 101, 0.09);
}

#deckBuilderPanel .deck-builder-header::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(239, 201, 119, 0.1);
  pointer-events: none;
}

#deckBuilderPanel .page-panel-head {
  position: relative;
  z-index: 1;
}

#deckBuilderPanel .page-panel-head h2,
#deckBuilderPanel :is(.editor-collection-header, .fusion-list-head) h3,
#deckBuilderPanel .deck-use-dialog h3 {
  color: var(--deck-gold-bright);
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: 0.035em;
  text-shadow: 0 2px 2px #000, 0 0 18px rgba(215, 163, 58, 0.18);
}

#deckBuilderPanel .page-panel-head p,
#deckBuilderUnlockedCards {
  color: rgba(246, 233, 203, 0.72);
}

#deckBuilderUnlockedCards {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  padding: 4px 9px;
  border: 1px solid rgba(215, 166, 71, 0.25);
  border-radius: 999px;
  background: rgba(5, 7, 7, 0.52);
}

#deckBuilderPanel #deckBuilderBackHomeBtn,
#deckBuilderPanel #fusionListBackBtn {
  border-color: rgba(215, 166, 72, 0.5) !important;
  background: linear-gradient(180deg, rgba(40, 40, 34, 0.98), rgba(12, 15, 16, 0.98)) !important;
  color: #f5e2b4 !important;
}

/* Deck list */
#deckBuilderPanel .deck-list-actions {
  gap: 10px;
  margin-bottom: 16px;
}

#deckBuilderPanel .deck-list-actions .deck-fantasy-control {
  min-height: 46px;
  border-color: rgba(213, 165, 71, 0.68) !important;
}

#deckBuilderPanel .decks-grid {
  gap: clamp(12px, 1.6vw, 20px);
}

#deckBuilderPanel .deck-box {
  isolation: isolate;
  min-height: 184px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(188, 139, 51, 0.43) !important;
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(225, 177, 81, 0.08), transparent 38%),
    linear-gradient(160deg, rgba(18, 20, 19, 0.96), rgba(5, 8, 9, 0.96)) !important;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35), inset 0 0 0 4px rgba(231, 187, 94, 0.07), 0 14px 30px rgba(0, 0, 0, 0.32) !important;
}

#deckBuilderPanel .deck-box::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7px;
  border: 1px solid rgba(240, 202, 120, 0.1);
  pointer-events: none;
}

#deckBuilderPanel .deck-box.active-deck {
  border-color: rgba(245, 202, 105, 0.86) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(236, 190, 91, 0.18), transparent 42%),
    linear-gradient(160deg, rgba(45, 35, 16, 0.96), rgba(8, 10, 10, 0.97)) !important;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 224, 145, 0.12), 0 16px 34px rgba(0, 0, 0, 0.38), 0 0 22px rgba(215, 158, 42, 0.13) !important;
}

#deckBuilderPanel .deck-box-info h3 {
  margin: 0 112px 5px 0;
  color: #f5d780;
  font-family: "Cinzel", Georgia, serif;
}

#deckBuilderPanel .deck-box-info p {
  color: rgba(245, 232, 200, 0.65);
}

#deckBuilderPanel .deck-icon-btn {
  border-color: rgba(211, 165, 76, 0.42);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(48, 45, 35, 0.94), rgba(14, 16, 16, 0.96));
  color: #f5ddb0;
}

#deckBuilderPanel .deck-icon-btn:hover {
  border-color: #eccb78;
  background: linear-gradient(180deg, #78561c, #352105);
  box-shadow: 0 0 16px rgba(222, 166, 53, 0.2);
}

/* Editor layout and engraved surfaces */
#deckBuilderPanel .deck-editor-layout {
  grid-template-columns: minmax(0, 1.9fr) minmax(310px, 0.82fr);
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}

#deckBuilderPanel .deck-editor-collection,
#deckBuilderPanel .deck-editor-sidebar {
  position: relative;
  height: min(78vh, 820px);
  min-height: 520px;
  max-height: none;
  padding: clamp(11px, 1.4vw, 17px);
  overflow: hidden;
  border: 1px solid var(--deck-line) !important;
  border-radius: 5px;
  background:
    radial-gradient(circle at 12% 0%, rgba(225, 175, 76, 0.1), transparent 31%),
    repeating-linear-gradient(115deg, rgba(255, 235, 187, 0.012) 0 1px, transparent 1px 8px),
    linear-gradient(160deg, rgba(18, 19, 17, 0.96), rgba(5, 8, 9, 0.97)) !important;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.34), inset 0 0 0 4px rgba(236, 194, 105, 0.06), 0 15px 35px rgba(0, 0, 0, 0.3);
}

#deckBuilderPanel .deck-editor-collection {
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

#deckBuilderPanel .editor-collection-header {
  flex: 0 0 auto;
  align-items: center;
  margin: 0 0 12px;
  padding: 2px 3px 11px;
  border-bottom: 1px solid rgba(211, 163, 70, 0.26);
}

#deckBuilderPanel .editor-collection-header h3 {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.28rem);
}

#deckBuilderPanel .deck-editor-filters-toggle {
  min-height: 40px;
  padding: 7px 12px;
  flex: 0 0 auto;
  border-color: rgba(221, 175, 81, 0.72) !important;
  background:
    radial-gradient(circle at 50% -40%, rgba(242, 207, 128, 0.16), transparent 50%),
    linear-gradient(180deg, rgba(54, 48, 34, 0.98), rgba(16, 17, 15, 0.98)) !important;
}

#deckBuilderPanel .deck-editor-filters-toggle.has-active-filters {
  border-color: var(--deck-gold-bright) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 229, 160, 0.12), 0 0 16px rgba(219, 165, 53, 0.18);
}

#deckBuilderPanel .deck-editor-active-filter-count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border: 1px solid rgba(255, 235, 183, 0.6);
  border-radius: 999px;
  background: linear-gradient(180deg, #c59335, #71480d);
  color: #fff4cc;
  font: 900 0.67rem/1 system-ui, sans-serif;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.42);
}

#deckBuilderPanel #deckEditorCardsGrid {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 8px 6px 14px;
  overflow: auto;
  align-content: start;
  scrollbar-gutter: stable;
}

/* Smart filter drawer, contained inside the collection surface. */
#deckBuilderPanel .deck-editor-filters-overlay {
  position: absolute;
  z-index: 900;
  inset: 0;
  display: block;
  background: rgba(1, 3, 3, 0.64);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
}

#deckBuilderPanel .deck-editor-filters-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

#deckBuilderPanel .deck-editor-filters-drawer {
  position: absolute;
  z-index: 920;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  width: min(390px, 88%);
  min-width: min(320px, 100%);
  overflow: hidden;
  border: 1px solid rgba(225, 180, 86, 0.58);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  background:
    radial-gradient(circle at 25% 0%, rgba(228, 179, 79, 0.13), transparent 32%),
    repeating-linear-gradient(115deg, rgba(255, 233, 184, 0.015) 0 1px, transparent 1px 8px),
    linear-gradient(165deg, #171812, #090c0d 64%, #050708);
  box-shadow: 12px 0 38px rgba(0, 0, 0, 0.62), inset -1px 0 rgba(255, 221, 146, 0.08);
  transform: translateX(-104%);
  visibility: hidden;
  transition: transform 220ms ease, visibility 220ms ease;
}

#deckBuilderPanel .deck-editor-filters-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

#deckBuilderPanel .deck-editor-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(216, 166, 71, 0.34);
  background: rgba(4, 7, 7, 0.38);
}

#deckBuilderPanel .deck-editor-filters-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #b98b37;
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

#deckBuilderPanel .deck-editor-filters-head h4 {
  margin: 0;
  color: var(--deck-gold-bright);
  font-family: "Cinzel", Georgia, serif;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

#deckBuilderPanel .deck-editor-filters-close {
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(218, 171, 76, 0.52);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(54, 49, 37, 0.96), rgba(14, 16, 15, 0.96));
  color: #f4ddb0;
  font-size: 1.35rem;
  line-height: 1;
}

#deckBuilderPanel .deck-editor-filters-close:hover,
#deckBuilderPanel .deck-editor-filters-close:focus-visible {
  border-color: #f1d27f;
  background: linear-gradient(180deg, #79571c, #332004);
  box-shadow: 0 0 16px rgba(223, 167, 50, 0.22);
}

#deckBuilderPanel .deck-editor-filters-body {
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow-y: auto;
}

#deckBuilderPanel .deck-editor-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

#deckBuilderPanel .deck-editor-filter-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

#deckBuilderPanel .deck-editor-filter-group label {
  color: #e5c982;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#deckBuilderPanel .deck-editor-filter-group :is(input, select) {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(201, 150, 55, 0.62) !important;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(18, 23, 23, 0.98), rgba(5, 9, 10, 0.98));
  color: #f6e9c9;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 228, 161, 0.05);
}

#deckBuilderPanel .deck-editor-filter-group :is(input, select):focus {
  border-color: #f0cf79 !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(217, 167, 62, 0.16), 0 0 17px rgba(214, 158, 43, 0.13) !important;
}

#deckBuilderPanel .deck-editor-filters-body .sort-direction-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

#deckBuilderPanel .deck-editor-filters-body .sort-direction-btn {
  min-height: 40px;
  border: 1px solid rgba(204, 154, 59, 0.54) !important;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(42, 40, 32, 0.98), rgba(12, 15, 15, 0.98)) !important;
  color: #f0ddb1 !important;
}

#deckBuilderPanel .deck-editor-filters-body .sort-direction-btn span {
  color: var(--deck-gold-bright) !important;
  text-shadow: 0 0 10px rgba(221, 168, 59, 0.35);
}

#deckBuilderPanel .deck-editor-filters-body .sort-direction-btn.active {
  border-color: #f1d37e !important;
  background: linear-gradient(180deg, #a77722, #5d3a09) !important;
  color: #fff1c3 !important;
  box-shadow: inset 0 1px rgba(255, 243, 198, 0.3), 0 0 15px rgba(220, 163, 47, 0.18);
}

#deckBuilderPanel .deck-editor-filters-body .sort-direction-btn.active span {
  color: #fff4cb !important;
}

/* Cards and add/remove affordance */
#deckBuilderPanel .deck-editor-card:hover {
  filter: drop-shadow(0 9px 12px rgba(0, 0, 0, 0.52)) drop-shadow(0 0 8px rgba(226, 172, 62, 0.2));
}

#deckBuilderPanel .deck-editor-card-actions {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

#deckBuilderPanel .deck-editor-card:hover .deck-editor-card-actions,
#deckBuilderPanel .deck-editor-card:focus-within .deck-editor-card-actions {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

#deckBuilderPanel .deck-editor-add-btn {
  border: 2px solid #f3d98f;
  background: radial-gradient(circle at 32% 24%, #f6db91, #ad7721 48%, #4c2c05 100%);
  color: #fff5cf;
  text-shadow: 0 2px 2px rgba(42, 22, 1, 0.9);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.55), 0 0 14px rgba(226, 169, 51, 0.45);
}

#deckBuilderPanel .deck-editor-card-actions .deck-editor-add-btn {
  position: static;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

#deckBuilderPanel .deck-editor-add-btn:hover {
  border-color: #fff0b8;
  background: radial-gradient(circle at 32% 24%, #fff2bc, #d39b39 48%, #6c420b 100%);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.62), 0 0 23px rgba(238, 187, 73, 0.7);
}

#deckBuilderPanel .deck-editor-card-actions .deck-editor-add-btn:hover {
  transform: scale(1.08) !important;
}

#deckBuilderPanel .deck-editor-card-actions .deck-editor-add-btn:active {
  transform: scale(0.96) !important;
}

#deckBuilderPanel .deck-editor-card-actions .deck-editor-add-btn:disabled,
#deckBuilderPanel .deck-editor-card-actions .deck-editor-add-btn.disabled {
  opacity: 0.48;
  transform: none !important;
  pointer-events: none;
}

#deckBuilderPanel .deck-editor-add-btn.remove-mode {
  border-color: #e6a17b;
  background: radial-gradient(circle at 32% 24%, #dc8c67, #87331f 52%, #35110b 100%);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.55), 0 0 13px rgba(176, 61, 34, 0.42);
}

/* Built deck sidebar */
#deckBuilderPanel .deck-editor-sidebar {
  display: flex;
  gap: 12px;
}

#deckBuilderPanel .editor-sidebar-header {
  flex: 0 0 auto;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(214, 164, 68, 0.27);
}

#deckBuilderPanel .deck-name-edit-wrapper {
  min-height: 42px;
  border: 1px solid rgba(204, 154, 60, 0.5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(31, 32, 27, 0.95), rgba(8, 11, 11, 0.96));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3);
}

#deckBuilderPanel .deck-name-edit-wrapper:focus-within {
  border-color: #efd17e;
  box-shadow: 0 0 0 2px rgba(218, 166, 60, 0.14), 0 0 15px rgba(218, 162, 48, 0.13);
}

#deckBuilderPanel .deck-name-label {
  color: #c9aa6a;
}

#deckBuilderPanel #deckEditorNameInput {
  color: #fff0c7;
}

#deckBuilderPanel .deck-count {
  min-width: 72px;
  padding: 8px 10px;
  border: 1px solid rgba(222, 176, 83, 0.55);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(57, 47, 26, 0.96), rgba(15, 15, 12, 0.96));
  color: #f6d986;
  font-family: "Cinzel", Georgia, serif;
  font-size: 1rem;
  text-align: center;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.28);
}

#deckBuilderPanel .editor-sidebar-cards {
  gap: 5px;
  padding: 2px 5px 2px 0;
}

#deckBuilderPanel .deck-row {
  min-height: 38px;
  padding: 5px 7px;
  border: 1px solid rgba(193, 143, 50, 0.3);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(215, 164, 62, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(24, 25, 22, 0.96), rgba(7, 10, 10, 0.96));
}

#deckBuilderPanel .deck-row:hover {
  border-color: rgba(237, 199, 116, 0.78);
  background: linear-gradient(90deg, rgba(213, 157, 47, 0.16), transparent 55%), rgba(10, 12, 11, 0.96);
  box-shadow: 0 0 12px rgba(214, 158, 45, 0.11);
}

#deckBuilderPanel .deck-row-cost {
  border: 1px solid rgba(246, 215, 145, 0.52);
  background: radial-gradient(circle at 35% 28%, #dfb75f, #745014 62%, #251602);
  color: #fff1c4;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

#deckBuilderPanel .deck-row-count {
  color: #f2cd72;
}

#deckBuilderPanel .editor-sidebar-actions {
  flex: 0 0 auto;
  gap: 8px;
  padding-top: 11px;
  border-top: 1px solid rgba(214, 164, 68, 0.27);
}

#deckBuilderPanel .editor-sidebar-actions :is(#deckEditorAutoFillBtn, #deckEditorSaveBtn, #deckEditorCancelBtn) {
  position: relative;
  min-height: 43px;
  border: 1px solid rgba(215, 166, 73, 0.62) !important;
  border-radius: 4px;
  color: #f8e8bd !important;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 900;
  letter-spacing: 0.025em;
  text-shadow: 0 1px 2px #000;
  box-shadow: inset 0 1px rgba(255, 238, 191, 0.11), inset 0 -2px rgba(0, 0, 0, 0.42), 0 6px 14px rgba(0, 0, 0, 0.3);
}

#deckBuilderPanel #deckEditorAutoFillBtn {
  background:
    radial-gradient(circle at 50% -40%, rgba(238, 205, 131, 0.15), transparent 52%),
    linear-gradient(180deg, #39382f, #131717) !important;
}

#deckBuilderPanel #deckEditorSaveBtn:not(:disabled) {
  border-color: rgba(244, 207, 118, 0.88) !important;
  background:
    radial-gradient(circle at 50% -35%, rgba(255, 241, 177, 0.42), transparent 48%),
    linear-gradient(180deg, #b48229, #68420c 54%, #321d04) !important;
  color: #fff2c4 !important;
  box-shadow: inset 0 1px rgba(255, 247, 204, 0.36), inset 0 -2px rgba(47, 24, 1, 0.72), 0 7px 17px rgba(0, 0, 0, 0.38), 0 0 16px rgba(218, 159, 43, 0.15);
}

#deckBuilderPanel #deckEditorCancelBtn {
  background: linear-gradient(180deg, rgba(45, 40, 33, 0.98), rgba(12, 15, 15, 0.98)) !important;
  color: #d9c9a5 !important;
}

#deckBuilderPanel .editor-sidebar-actions button:hover:not(:disabled) {
  border-color: #f3d688 !important;
  filter: brightness(1.13) saturate(1.07);
  transform: translateY(-1px);
  box-shadow: inset 0 1px rgba(255, 244, 206, 0.2), 0 8px 18px rgba(0, 0, 0, 0.4), 0 0 18px rgba(220, 165, 51, 0.2);
}

#deckBuilderPanel #deckEditorSaveBtn:disabled {
  border-color: rgba(149, 126, 84, 0.25) !important;
  background: linear-gradient(180deg, rgba(39, 40, 37, 0.74), rgba(15, 17, 17, 0.78)) !important;
  color: rgba(218, 205, 177, 0.38) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

#deckBuilderPanel .warning-text {
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(196, 75, 58, 0.44);
  border-radius: 4px;
  background: rgba(90, 24, 16, 0.28);
  color: #f2b19c;
  text-align: center;
}

/* Fusion page and modal receive the same material language. */
#deckBuilderPanel .fusion-list-head,
#deckBuilderPanel .fusion-recipe-item,
#deckBuilderPanel .deck-use-dialog {
  border: 1px solid var(--deck-line) !important;
  border-radius: 5px;
  background:
    radial-gradient(circle at 12% 0%, rgba(220, 170, 70, 0.1), transparent 34%),
    linear-gradient(155deg, rgba(20, 21, 18, 0.98), rgba(5, 8, 9, 0.98)) !important;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.27), 0 13px 30px rgba(0, 0, 0, 0.3);
}

/* Fusion results use the creature frame but keep type="fusion", so they do
   not inherit the creature-only white stat tokens from the base card skin. */
#deckBuilderPanel .fusion-recipe-result .card.skin-creature-v2-test {
  --creature-stat-value-color: #fff;
  --creature-stat-value-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 3px rgba(0, 0, 0, 0.82);
}

#deckBuilderPanel .fusion-recipe-result .card.skin-creature-v2-test
  :is(.card-stat-atk, .card-stat-hp)::after {
  color: #fff !important;
  text-shadow: var(--creature-stat-value-shadow) !important;
}

#deckBuilderPanel .deck-use-modal-backdrop {
  background: rgba(2, 3, 3, 0.82);
  backdrop-filter: blur(7px);
}

#deckBuilderPanel .deck-use-close {
  border: 1px solid rgba(218, 170, 73, 0.55);
  background: rgba(15, 17, 16, 0.94);
  color: #f3ddb0;
}

#deckBuilderPanel .deck-mode-toggle {
  border-color: rgba(193, 145, 54, 0.32);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(31, 32, 28, 0.94), rgba(9, 12, 12, 0.96));
}

#deckBuilderPanel .deck-mode-toggle.active {
  box-shadow: inset 0 0 0 1px rgba(255, 229, 163, 0.07), 0 0 15px rgba(0, 0, 0, 0.26);
}

#deckBuilderPanel .deck-use-cancel-btn {
  position: relative;
  isolation: isolate;
  min-height: 46px;
  padding: 9px 17px;
  overflow: hidden;
  border: 1px solid rgba(222, 82, 72, 0.82) !important;
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% -38%, rgba(238, 106, 91, 0.2), transparent 50%),
    linear-gradient(180deg, #56231f, #2c1110 54%, #130808) !important;
  color: #ffd7cd !important;
  -webkit-text-fill-color: #ffd7cd !important;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-shadow: 0 1px 2px #190302, 0 0 8px rgba(255, 104, 88, 0.2);
  box-shadow:
    inset 0 1px rgba(255, 213, 202, 0.16),
    inset 0 -2px rgba(18, 1, 1, 0.68),
    0 0 0 1px rgba(55, 7, 5, 0.76),
    0 7px 16px rgba(0, 0, 0, 0.34);
  transition: transform 160ms ease, filter 160ms ease, border-color 160ms ease, box-shadow 180ms ease;
}

#deckBuilderPanel .deck-use-cancel-btn::before,
#deckBuilderPanel .deck-use-cancel-btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

#deckBuilderPanel .deck-use-cancel-btn::before {
  inset: 3px;
  border: 1px solid rgba(255, 190, 175, 0.17);
  clip-path: polygon(0 0, 40% 0, 47% 6px, 53% 6px, 60% 0, 100% 0, 100% 100%, 60% 100%, 53% calc(100% - 6px), 47% calc(100% - 6px), 40% 100%, 0 100%);
}

#deckBuilderPanel .deck-use-cancel-btn::after {
  top: -55%;
  left: -42%;
  width: 34%;
  height: 210%;
  background: linear-gradient(90deg, transparent, rgba(255, 211, 199, 0.22), transparent);
  transform: rotate(18deg);
  transition: left 420ms ease;
}

#deckBuilderPanel .deck-use-cancel-btn:hover:not(:disabled),
#deckBuilderPanel .deck-use-cancel-btn:focus-visible {
  border-color: #ff8e7e !important;
  background:
    radial-gradient(circle at 50% -35%, rgba(255, 172, 150, 0.3), transparent 47%),
    linear-gradient(180deg, #8d3028, #501713 54%, #250909) !important;
  color: #fff0e9 !important;
  -webkit-text-fill-color: #fff0e9 !important;
  filter: brightness(1.1) saturate(1.08);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px rgba(255, 230, 221, 0.3),
    inset 0 -2px rgba(28, 1, 1, 0.72),
    0 0 0 1px rgba(92, 13, 9, 0.86),
    0 8px 19px rgba(0, 0, 0, 0.44),
    0 0 20px rgba(218, 52, 42, 0.3);
}

#deckBuilderPanel .deck-use-cancel-btn:hover:not(:disabled)::after,
#deckBuilderPanel .deck-use-cancel-btn:focus-visible::after {
  left: 112%;
}

#deckBuilderPanel .deck-use-cancel-btn:focus-visible {
  outline: 2px solid rgba(255, 123, 108, 0.72);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  #deckBuilderPanel.deck-builder-page-wrapper {
    width: min(100%, calc(100vw - 12px));
    max-width: min(100%, calc(100vw - 12px));
    padding: 10px;
  }

  #deckBuilderPanel .deck-editor-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #deckBuilderPanel .deck-editor-collection {
    height: min(62svh, 610px);
    min-height: 420px;
  }

  #deckBuilderPanel .deck-editor-sidebar {
    height: min(72svh, 640px);
    min-height: 470px;
  }
}

@media (max-width: 600px) {
  #deckBuilderPanel.deck-builder-page-wrapper {
    position: relative;
    left: 50vw;
    margin-inline: 0;
    transform: translateX(-50%);
  }

  #deckBuilderPanel .page-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  #deckBuilderPanel .page-panel-head > div {
    min-width: 0;
  }

  #deckBuilderPanel .page-panel-head p {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #deckBuilderPanel .deck-builder-header {
    padding: 10px !important;
  }

  #deckBuilderPanel #deckBuilderBackHomeBtn {
    min-width: 48px !important;
    width: 48px !important;
    max-width: 48px !important;
    padding: 0 !important;
  }

  #deckBuilderPanel .editor-collection-header {
    flex-wrap: nowrap;
  }

  #deckBuilderPanel .editor-collection-header h3 {
    min-width: 0;
  }

  #deckBuilderPanel .deck-editor-filters-toggle {
    min-width: 44px;
    padding-inline: 10px;
  }

  #deckBuilderPanel #deckEditorCardsGrid {
    --deck-editor-card-width: 78px;
    --deck-editor-card-height: 120px;
    --deck-editor-card-scale: 0.629;
    justify-content: center;
  }

  #deckBuilderPanel .deck-editor-filters-drawer {
    width: 100%;
    min-width: 0;
    border-right: 0;
    border-radius: 0;
  }

  #deckBuilderPanel .deck-editor-filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #deckBuilderPanel .editor-sidebar-header {
    align-items: stretch;
    flex-direction: column;
  }

  #deckBuilderPanel .deck-count {
    align-self: flex-end;
  }
}

/* Keep the card footprint and the rendered 124x190 card on the same scale.
   The global mobile catalogue rules intentionally preserve the desktop card
   skin, so the deck editor must shrink the whole card instead of changing
   only its wrapper (which would make adjacent cards overlap). */
@media (max-width: 600px),
  (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  #deckBuilderPanel #deckEditorCardsGrid {
    grid-template-columns: repeat(auto-fit, minmax(var(--deck-editor-card-width), var(--deck-editor-card-width))) !important;
    gap: 7px !important;
    padding: 5px 3px 10px;
    overflow-x: hidden;
    scrollbar-gutter: auto;
  }

  #deckBuilderPanel #deckEditorCardsGrid .deck-editor-card {
    width: var(--deck-editor-card-width) !important;
    height: var(--deck-editor-card-height) !important;
    contain-intrinsic-size: var(--deck-editor-card-width) var(--deck-editor-card-height);
  }

  #deckBuilderPanel #deckEditorCardsGrid .deck-editor-card > .card {
    width: 124px !important;
    height: 190px !important;
    flex: 0 0 124px !important;
    transform: scale(var(--deck-editor-card-scale)) !important;
    transform-origin: top left !important;
  }

  #deckBuilderPanel #deckEditorCardsGrid .deck-editor-card .card-art {
    height: 125px !important;
  }

  #deckBuilderPanel .deck-editor-card-actions {
    gap: 4px;
    opacity: 0.94;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }

  #deckBuilderPanel .deck-editor-card-actions .deck-editor-add-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 1.25rem;
  }

  #deckBuilderPanel .deck-editor-card:hover {
    transform: none;
  }
}

@media (pointer: coarse) and (orientation: portrait) and (max-width: 700px) {
  #deckBuilderPanel .deck-editor-collection {
    height: min(68svh, 620px) !important;
    min-height: 360px;
    overflow: hidden !important;
  }

  #deckBuilderPanel #deckEditorCardsGrid,
  #deckBuilderPanel .editor-sidebar-cards {
    min-height: 0;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }

  #deckBuilderPanel #deckEditorCardsGrid .deck-editor-card {
    touch-action: pan-y !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  #deckBuilderPanel.deck-builder-page-wrapper {
    width: min(calc(100vw - 8px), 1120px) !important;
    max-width: min(calc(100vw - 8px), 1120px) !important;
    margin: 4px auto !important;
    padding: 7px !important;
  }

  #deckBuilderPanel .deck-editor-layout {
    grid-template-columns: minmax(0, 1fr) clamp(172px, 26vw, 220px) !important;
    gap: 7px !important;
    padding: 0 !important;
  }

  #deckBuilderPanel .deck-editor-collection,
  #deckBuilderPanel .deck-editor-sidebar {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    height: calc(100svh - 102px) !important;
    min-height: 250px !important;
    max-height: calc(100svh - 102px) !important;
    padding: 6px !important;
  }

  #deckBuilderPanel #deckEditorCardsGrid {
    --deck-editor-card-width: 72px;
    --deck-editor-card-height: 111px;
    --deck-editor-card-scale: 0.58;
    justify-content: start;
  }

  #deckBuilderPanel .editor-collection-header {
    margin-bottom: 6px;
    padding-bottom: 6px;
  }

  #deckBuilderPanel .editor-collection-header h3 {
    font-size: clamp(0.76rem, 2vw, 0.94rem);
    white-space: nowrap;
  }

  #deckBuilderPanel .deck-editor-filters-toggle {
    min-height: 32px;
    padding: 4px 8px;
    font-size: 0.68rem;
  }

  #deckBuilderPanel .deck-editor-filters-toggle .deck-control-icon {
    width: 16px;
    height: 16px;
  }

  #deckBuilderPanel .deck-editor-filters-head {
    padding: 10px 12px;
  }

  #deckBuilderPanel .deck-editor-filters-body {
    gap: 8px;
    padding: 10px 12px;
  }

  #deckBuilderPanel .deck-editor-filter-group :is(input, select),
  #deckBuilderPanel .deck-editor-filters-body .sort-direction-btn {
    min-height: 32px !important;
    padding: 5px 7px !important;
    font-size: 0.7rem !important;
  }

  #deckBuilderPanel .deck-editor-filters-body {
    grid-template-columns: 1fr 1fr;
  }

  #deckBuilderPanel .deck-editor-search-row,
  #deckBuilderPanel .deck-editor-filters-body .sort-direction-group {
    grid-column: 1 / -1;
  }

  #deckBuilderPanel .deck-editor-filter-grid {
    gap: 7px;
  }

  #deckBuilderPanel .editor-sidebar-header {
    align-items: center;
    flex-direction: row;
    gap: 6px;
    padding-bottom: 6px;
  }

  #deckBuilderPanel .deck-editor-sidebar {
    gap: 6px;
  }

  #deckBuilderPanel .deck-name-edit-wrapper {
    min-width: 0;
    min-height: 32px;
    padding: 4px 7px;
  }

  #deckBuilderPanel #deckEditorNameInput {
    font-size: 0.76rem;
  }

  #deckBuilderPanel .deck-name-label {
    display: none;
  }

  #deckBuilderPanel .deck-count {
    min-width: 50px;
    padding: 5px;
    font-size: 0.68rem;
  }

  #deckBuilderPanel .editor-sidebar-cards {
    gap: 3px;
    padding-right: 3px;
    scrollbar-gutter: auto;
  }

  #deckBuilderPanel .deck-row {
    grid-template-columns: 25px minmax(0, 1fr) 25px;
    min-height: 28px;
    padding: 2px 3px;
  }

  #deckBuilderPanel .deck-row-cost {
    width: 20px;
    height: 20px;
    font-size: 0.66rem;
  }

  #deckBuilderPanel .deck-row-name,
  #deckBuilderPanel .deck-row-count {
    font-size: 0.68rem;
  }

  #deckBuilderPanel .deck-row-name {
    padding-left: 4px;
  }

  #deckBuilderPanel .editor-sidebar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
    padding-top: 6px;
  }

  #deckBuilderPanel .editor-sidebar-actions #deckEditorWarning,
  #deckBuilderPanel .editor-sidebar-actions #deckEditorAutoFillBtn {
    grid-column: 1 / -1;
  }

  #deckBuilderPanel .editor-sidebar-actions :is(#deckEditorAutoFillBtn, #deckEditorSaveBtn, #deckEditorCancelBtn) {
    width: 100%;
    min-width: 0;
    min-height: 29px;
    padding: 4px 5px;
    font-size: clamp(0.54rem, 1.45vw, 0.66rem);
    line-height: 1.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #deckBuilderPanel .deck-editor-filters-overlay,
  #deckBuilderPanel .deck-editor-filters-drawer,
  #deckBuilderPanel .deck-editor-filters-toggle,
  #deckBuilderPanel .editor-sidebar-actions button {
    transition: none !important;
  }
}