@import url("./popup-motion.css?v=c3bc7d0e292f8050");
/* Shared game materials. Load after the scene styles; layout belongs to each scene. */
:root {
  --ui-brass: #ac9670;
  --ui-brass-edge: #b8a47a85;
  --ui-brass-soft: #b8a47a30;
  --ui-paper: #e9dec2;
  --ui-paper-muted: #c4c3c2;
  --ui-slate: #292827;
  --ui-deep: #1d1c1b;
  --ui-ease: cubic-bezier(.2,.8,.2,1);
}

/* Opaque, matte panels keep the arena visible around the sheet. */
dialog:not(.art-viewer) {
  border: 1px solid var(--ui-brass-edge);
  border-radius: 12px;
  color: var(--ui-paper);
  background:
    radial-gradient(ellipse at 4% 0%,#b4a0790d,transparent 45%),
    linear-gradient(145deg,#333231,#262524 58%,#21201f);
  box-shadow:
    inset 0 0 0 4px #222120,
    inset 0 0 0 5px #b8a47a24,
    inset 0 1px 0 #f2e5be25,
    0 18px 60px #0c0b0aad;
  scrollbar-color: #787776 #232221;
}
dialog:not(.art-viewer)::before,
dialog:not(.art-viewer)::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 13px;
  z-index: 6;
  pointer-events: none;
  background:
    linear-gradient(var(--ui-brass),var(--ui-brass)) left top / 13px 1px no-repeat,
    linear-gradient(var(--ui-brass),var(--ui-brass)) left top / 1px 13px no-repeat,
    linear-gradient(var(--ui-brass),var(--ui-brass)) right top / 13px 1px no-repeat,
    linear-gradient(var(--ui-brass),var(--ui-brass)) right top / 1px 13px no-repeat;
  opacity: .7;
}
dialog:not(.art-viewer)::before { top: 8px; }
dialog:not(.art-viewer)::after { bottom: 8px; transform: rotate(180deg); }
dialog:not(.art-viewer,.arena-dialog,.pvp-queue-overlay)[open] {
  animation: ui-sheet-enter 165ms var(--ui-ease);
}
dialog:not(.art-viewer)::backdrop {
  position: fixed;
  inset: 0;
  background: #0e0d0cbf;
  backdrop-filter: blur(4px);
  animation: ui-backdrop-enter 120ms ease-out both;
}
@keyframes ui-sheet-enter {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes ui-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Bevels are narrow material edges, without a bright glow or moving sheen. */
.primary-action,.secondary-action {
  min-height: 44px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.35;
  transition:
    transform 110ms var(--ui-ease),
    border-color 130ms ease,
    background-color 130ms ease,
    box-shadow 130ms ease;
}
.primary-action {
  border: 1px solid #d5c298;
  color: #302f2e;
  background: linear-gradient(165deg,#e8dfc5 0%,#d9ccac 49%,#c5b18b 100%);
  box-shadow:
    inset 0 1px 0 #fff4d599,
    inset 0 0 0 3px #d4c49e,
    inset 0 0 0 4px #7e704844,
    0 3px 0 #615a42,
    0 5px 10px #0f0e0d3d;
  text-shadow: 0 1px 0 #fff9df70;
}
.secondary-action {
  color: #e0d3b6;
  border: 1px solid #ab997170;
  background: linear-gradient(165deg,#3c3b3a,#292827 72%,#232221);
  box-shadow:
    inset 0 1px 0 #d9d7bb1c,
    inset 0 0 0 3px #292827,
    inset 0 0 0 4px #a49d7120,
    0 3px 0 #181716;
}
.primary-action:active:not(:disabled),
.secondary-action:active:not(:disabled) {
  transform: translateY(2px) scale(.99);
  box-shadow: inset 0 0 0 3px #38373624,inset 0 2px 4px #14131229,0 1px 0 #222120;
}
.primary-action:disabled,.secondary-action:disabled {
  opacity: .43;
  text-shadow: none;
}
.home-actions .primary-action,.home-actions .secondary-action,
.deck-sheet-footer .primary-action,.deck-sheet-footer .secondary-action {
  min-height: 48px;
}
.saved-deck-actions .secondary-action { min-height: 44px; }

.dialog-close,.icon-button,.auto-button,.speed-button {
  color: #dbc9a3;
  border: 1px solid #a997704f;
  background: linear-gradient(150deg,#3f3e3d,#252423 80%);
  box-shadow: inset 0 0 0 3px #242322,inset 0 0 0 4px #aa9f771c,0 2px 5px #0b0a093b;
  transition: transform 100ms var(--ui-ease),border-color 130ms ease;
}
.dialog-close {
  width: 44px;
  height: 44px;
  font-size: 28px;
  font-weight: 400;
  line-height: 40px;
}
.auto-button[aria-pressed=true] {
  color: #eee0bd;
  border-color: #c8b28b;
  background: linear-gradient(#596451,#3d3c3b);
  box-shadow: inset 0 0 0 3px #343332,inset 0 0 0 4px #c9b38542,0 2px 4px #0e0d0c40;
}

/* Sheet hierarchy: clear title, quiet dividers, controls directly under their labels. */
.sheet-title {
  color: #ede2c7;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.35;
  text-shadow: 0 1px 1px #11100f70;
}
.sheet-subtitle,.collection-tally,.collection-detail-meta { color: #b9b8b7; }

/* Menu, profile and history use the same centered, stationary top strip.
   Only the inner body scrolls, leaving the sibling close control in place. */
#settings-dialog,#log-dialog { padding: 0; overflow: hidden; }
#settings-body,#log-body {
  max-height: calc(100dvh - 34px);
  padding: 0 22px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
}
#settings-body>.sheet-title,#log-body>.sheet-title {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 64px;
  margin: 0 -22px 14px;
  padding: 17px 58px;
  text-align: center;
  font-size: 21px;
  word-break: keep-all;
  overflow-wrap: anywhere;
  background: linear-gradient(110deg,#393837,#2e2d2c);
  border-bottom: 1px solid #b8a47a45;
  box-shadow: inset 0 -1px 0 #1514138c;
}
@media(max-width:350px) {
  #settings-body>.sheet-title,#log-body>.sheet-title { font-size: 19px; }
}
#deck-body>.deck-sheet-header {
  background: linear-gradient(110deg,#393837,#2e2d2c);
  border-bottom-color: #b8a47a45;
  box-shadow: inset 0 -1px 0 #1514138c;
}
.deck-sheet-footer {
  background: linear-gradient(#333231,#272625);
  border-top-color: #b8a47a50;
  box-shadow: inset 0 1px 0 #d8c7a512,0 -6px 16px #12111038;
}
.deck-section-title { color: #d8c9a5; letter-spacing: .025em; }
.deck-info strong,.saved-deck-info>strong { color: #e8e1ce; }
.deck-info small,.saved-deck-info>small { color: #b9b8b7; }
.deck-row,.saved-deck,.collection-melt-row,.log-entry { border-bottom-color: #aeaa8426; }
.log-entry strong { color: #d6c6a1; }
.log-entry p { color: #bebdbc; }

.menu-row {
  position: relative;
  min-height: 48px;
  padding: 13px 20px 13px 8px;
  border-bottom: 1px solid #b5a27a26;
  color: #dedddc;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.45;
  transition: background-color 120ms ease,color 120ms ease;
}
.menu-row::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 7px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #baaa88;
  border-right: 1px solid #baaa88;
  transform: translateY(-50%) rotate(45deg);
  opacity: .65;
  pointer-events: none;
}
.menu-row[aria-pressed=true] { color: #e8d7ae; background: #b5a4730a; }
.menu-row[aria-pressed]::after {
  width: 7px;
  height: 7px;
  border: 1px solid #aca987;
  transform: translateY(-50%) rotate(45deg);
  background: #333231;
}
.menu-row[aria-pressed=true]::after { background: #c4b083; border-color: #d9c49a; opacity: 1; }
.text-button,.collection-back,.collection-reset { color: #c7c6c5; }
.match-options summary,.collection-filters summary { color: #d9cbae; }

/* Recessed fields and small choices use the same quiet brass rim. */
.match-options input,.match-options select,.deck-name-input,
.deck-gear-slots select,.collection-tools input,.collection-filter select {
  color: #e4e1d0;
  border: 1px solid #a4a07b52;
  border-radius: 6px;
  background: linear-gradient(#232221,#2a2928);
  box-shadow: inset 0 2px 4px #0f0e0d33,0 1px 0 #d7c9a00c;
}
.match-options input::placeholder,.deck-name-input::placeholder,
.collection-tools input::placeholder { color: #a09f9e; opacity: 1; }
.deck-hero-choice,.hero-edition,.hero-tab,
.collection-toggle,.collection-bulk-open,.pack-payment-option {
  border-radius: 6px;
  border-color: #a79c755c;
  color: #c7c6c5;
  background: linear-gradient(#343332,#282726);
  box-shadow: inset 0 1px 0 #dedac011;
  transition: border-color 120ms ease,background-color 120ms ease,transform 100ms var(--ui-ease);
}
.deck-hero-choice[aria-pressed=true],.hero-edition[aria-pressed=true],
.hero-tab[aria-pressed=true],.collection-toggle[aria-pressed=true],
.pack-payment-option[aria-pressed=true] {
  color: #eadab7;
  border-color: #bfad83b8;
  background: linear-gradient(150deg,#525150,#3f3e3d);
  box-shadow: inset 0 0 0 2px #363534,inset 0 0 0 3px #b5a16d25;
}
.quantity-button {
  color: #e3d1aa;
  border-radius: 5px;
  border-color: #b7a47962;
  background: linear-gradient(#41403f,#2a2928);
  box-shadow: inset 0 1px 0 #e9ddbb18,0 2px 0 #181716;
  font-weight: 600;
}
.collection-filters,.collection-forge { border-color: #b8a47a32; }
.collection-status { color: #dcca9f; }
.collection-melt-total { color: #e6d6b2; font-weight: 650; }
.collection-bulk-guide,.collection-readable-rules { color: #dddcdb; }

/* Booster controls keep their scene's existing geometry and rarity accents. */
.pack-skip {
  color: #e0d0ad;
  border-color: #a9936a8c;
  background: linear-gradient(#3a4439,#343332);
  box-shadow: inset 0 1px 0 #dfd3b112,inset 0 0 0 2px #23222140;
}
.pack-dismantle {
  color: #cebdd7;
  border-color: #9b899d62;
  background: linear-gradient(#3c3b3a,#302f2e);
}
.pack-note { color: #c0bfbe; }
.currency-chip {
  border-color: #b2a38044;
  background: linear-gradient(#3b3a39,#2b2a29);
  box-shadow: inset 0 1px 0 #e0d5b615,0 2px 4px #13121133;
}

/* Cost is a filled inlay with one diamond pointer; values keep their original layout. */
.deck-cost-label { color: #bab9b8; }
.deck-cost-value { color: #e3d4b1; }
.deck-cost-track {
  border-color: #b2a27c66;
  background: #1e1d1c;
  box-shadow: inset 0 2px 3px #0d0c0b66,0 1px 0 #e2d4b013;
}
.deck-cost-fill {
  background: linear-gradient(90deg,#777675,#adad88 75%,#c1b68f);
  box-shadow: inset 0 1px 0 #f1e4b830;
}
.deck-cost-thumb {
  border-color: #d9c9a3;
  background: linear-gradient(135deg,#e0d7b9,#a69b76);
  box-shadow: inset 0 0 0 1px #827d6138,0 1px 3px #12111080;
}
.deck-cost-meter.is-over-budget .deck-cost-value { color: #e0ae91; }
.deck-cost-meter.is-over-budget .deck-cost-fill { background: linear-gradient(90deg,#866950,#be9373); }
.deck-cost-meter.is-over-budget .deck-cost-thumb { background: #c69a79; border-color: #e0bd9e; }

@media (hover:hover) {
  .primary-action:hover:not(:disabled) { border-color: #efdfba; background: linear-gradient(165deg,#efe5cd,#dfd2b3 49%,#cebb95); }
  .secondary-action:hover:not(:disabled) { border-color: #baaa82; background: linear-gradient(165deg,#464544,#323130); }
  .dialog-close:hover,.icon-button:hover,.auto-button:hover:not(:disabled),.speed-button:hover:not(:disabled) { border-color: #c0ae87b5; }
  .menu-row:hover:not(:disabled) { color: #f0e4c5; background-color: #b1a7800e; }
  .deck-hero-choice:hover,.hero-edition:hover,.collection-toggle:hover,
  .collection-bulk-open:hover,.quantity-button:hover:not(:disabled) { border-color: #c6b58aaa; }
}
@media (prefers-reduced-motion:reduce) {
  dialog:not(.art-viewer)[open],dialog:not(.art-viewer)::backdrop { animation: none; }
  .primary-action,.secondary-action,.dialog-close,.icon-button,
  .auto-button,.speed-button,.menu-row,.deck-hero-choice,
  .hero-edition,.hero-tab,.collection-toggle,.collection-bulk-open,
  .pack-payment-option { transition: none; }
}
/* Use one SVG grid item: a hidden text glyph plus an in-flow pseudo-element
   creates a second grid row, shifting the close icon below the button center. */
.icon-button,.auto-button,.dialog-close{display:grid;place-items:center;padding:0;line-height:1}
.button-icon{display:block;width:22px;height:22px;fill:currentColor;flex:none;pointer-events:none}
.dialog-close{font-size:0;line-height:0}
.dialog-close .button-icon{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:0;transform:translate(-50%,-50%)}
/* Close glyphs have one source. Explicitly retire legacy generated X marks. */
.dialog-close::before,.dialog-close::after{content:none!important;display:none!important}
/* User requested no focus rings. Focus, keyboard activation and restoration
   remain functional; selected, locked, disabled and invalid states keep theirs. */
:where(button,a,input,select,textarea,summary,[tabindex],[role="button"]):focus,
:where(button,a,input,select,textarea,summary,[tabindex],[role="button"]):focus-visible{outline:none}