/* NightKillerYT — DevEx Calculator (/tools/devex-calculator). Loaded after site.css and tools.css on this page only.
   Same language as the home page's game cards: see-through glass cards (glass fill, blur, a thin glass border,
   a soft shadow, round corners) with Sora titles; thin lines only inside them (tables, lists). Big white numbers,
   small uppercase labels, one pink accent. Green only means "enough to cash out", red only an error. Works from
   320 px phones up, touch targets 40 px or more.

   Inside a mode's panel (.dx-panel > .dx-grid): .dx-main (the main boxes), .dx-result (the answer, sticky on wide
   screens) and .dx-more (optional boxes). Phones show them in that order: type, see the answer, fine-tune. */

/* ---------- the top bar: modes and currency ---------- */
.dx-bar {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.dx-tabs {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.dx-tab {
  position: relative;
  z-index: 1;
}

/* The chosen mode's pill slides between the tabs (placed by the script; without it each tab draws its own). */
.dx-glider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--glider-w, 0);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 1px var(--glass-border-hover);
  transform: translateX(var(--glider-x, 0));
  transition:
    transform 380ms var(--ease-out),
    width 380ms var(--ease-out);
  pointer-events: none;
}

.dx-tabs.has-glider [role="tab"][aria-selected="true"] {
  background: transparent;
  box-shadow: none;
}

.dx-currency {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-height: 52px;
  max-width: 300px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  text-align: left;
  cursor: var(--nc-hand, pointer);
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--medium) var(--ease-out),
    background-color var(--medium) var(--ease-out);
}

.dx-currency:hover {
  border-color: var(--glass-border-hover);
  background: rgba(255, 255, 255, 0.05);
}

.dx-currency-text {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.dx-currency-kicker {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dx-currency-name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dx-currency-full {
  color: var(--text-2);
  font-weight: 500;
}

.dx-chevron {
  flex: none;
  margin-left: auto;
  color: var(--text-3);
}

.dx-lede {
  margin: 14px 2px 18px;
  color: var(--text-2);
  font-size: 15px;
}

/* ---------- a mode ---------- */
.dx-panel:not([hidden]) {
  animation: dx-panel-in 320ms var(--ease-out);
}

.dx-grid {
  display: grid;
  grid-template-areas:
    "main"
    "result"
    "more";
  gap: 18px;
  align-items: start;
}

.dx-main {
  grid-area: main;
}

.dx-result {
  grid-area: result;
}

.dx-more {
  grid-area: more;
}

/* The boxes and the optional boxes: see-through glass cards, like the home page's game cards. */
.dx-main,
.dx-more {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
}

.dx-more-title,
.dx-breakdown-title {
  color: var(--text-3);
  font: 650 12px/1.2 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dx-field {
  gap: 8px;
}

.dx-input .input {
  min-height: 48px;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The main amount of a mode: big and easy to hit. Long numbers shrink (data-len, set by the script). */
#dx-robux,
#dx-amount {
  min-height: 58px;
  font: 600 1.45rem/1 var(--font-display);
  letter-spacing: -0.01em;
  transition: font-size var(--fast) var(--ease-out);
}

#dx-robux[data-len="l"],
#dx-amount[data-len="l"] {
  font-size: 1.2rem;
}

#dx-robux[data-len="xl"],
#dx-amount[data-len="xl"] {
  font-size: 1.08rem;
}

#dx-robux[data-len="xxl"],
#dx-amount[data-len="xxl"] {
  font-size: 1rem; /* never under 16px: iPhones zoom into smaller boxes */
}

.dx-addon {
  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-3);
  font-size: 14px;
  font-weight: 600;
}

.dx-addon[data-out="cur-symbol"] {
  justify-content: center;
  min-width: 44px;
  color: var(--text-2);
  font: 600 15px/1 var(--font-display);
}

.dx-error {
  color: #ff8a8a;
  font-size: 13.5px;
  font-weight: 600;
}

/* What a shorthand means while it is typed ("1.5k" -> "= 1,500 Robux"). */
.dx-understood {
  color: var(--text-2);
  font: 500 13px/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Quick amounts: real choices, so chips; the chosen one in the accent. */
.dx-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dx-chip {
  flex: 1 1 0;
  min-width: max-content;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: 600 13.5px/1 var(--font-mono);
  cursor: var(--nc-hand, pointer);
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--medium) var(--ease-out),
    background-color var(--medium) var(--ease-out),
    color var(--medium) var(--ease-out);
}

.dx-chip:hover {
  border-color: var(--glass-border-hover);
  color: var(--text);
}

.dx-chip:active {
  transform: scale(0.97);
}

.dx-chip.is-active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}

/* Shorthand keys (k, M, B) attached to the main boxes on touch screens. The unit after the box ("Robux", "USD")
   steps aside to make room: the label and the line under the box already say it. */
.dx-key {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 44px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: 600 16px/1 var(--font-mono);
  cursor: var(--nc-hand, pointer);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    background-color var(--fast) var(--ease-out),
    color var(--fast) var(--ease-out);
}

.dx-key:active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.dx-input.has-keys .dx-addon-unit {
  display: none;
}

/* The last visible key closes the box with round corners (the hidden unit after it is still the last child). */
.dx-input.has-keys .dx-key:is(.dx-key-b, .dx-key-m:nth-last-child(2)) {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.dx-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dx-fieldset {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.dx-fieldset legend {
  margin-bottom: 8px;
  padding: 0;
}

.dx-segmented label {
  flex: 1 1 0;
}

.dx-segmented span {
  min-height: 40px;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

/* A switch with a title and a hint (the shared switch styles every span inside it as the track, so the text uses
   strong and small). */
.dx-switch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  min-height: 44px;
}

.dx-switch-title {
  grid-column: 1;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 650;
}

.dx-switch-hint {
  grid-column: 1;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.dx-switch > span {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.dx-split {
  display: grid;
  gap: 14px;
  padding-top: 4px;
  animation: dx-panel-in 280ms var(--ease-out);
}

.dx-rest {
  color: var(--text-3);
  font-size: 13.5px;
}

.dx-line {
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.55;
}

.dx-keep {
  color: var(--text-3);
  font-size: 14px;
}

.dx-minimum {
  color: var(--text-3);
  font-size: 14px;
}

/* ---------- the answer: a glass card, a touch brighter than the others ---------- */
.dx-result {
  position: relative;
  container-type: inline-size;
  min-width: 0;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--radius-lg);
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
}

.dx-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.dx-rate {
  color: var(--text-3);
  font: 500 12.5px/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dx-big {
  margin-top: 14px;
  color: var(--text);
  font: 700 clamp(2.1rem, 9vw, 3.6rem) / 1.05 var(--font-display);
  font-size: clamp(2rem, 14cqi, 3.6rem);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dx-big[data-len="l"] {
  font-size: clamp(1.6rem, 10.5cqi, 3rem);
}

.dx-big[data-len="xl"] {
  font-size: clamp(1.3rem, 8cqi, 2.4rem);
  letter-spacing: -0.03em;
}

.dx-big.is-empty {
  color: var(--text-3);
}

.dx-unit {
  color: var(--text-3);
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: 0;
}

.dx-sub {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* How far from the 30,000 minimum: a thin line; green once it is enough. */
.dx-meter {
  margin-top: 20px;
}

.dx-meter-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--text-2);
  font-size: 14px;
}

.dx-meter-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.dx-meter-status.is-ready {
  color: var(--text);
}

.dx-meter-status .dx-when-ready {
  display: none;
  color: var(--ok);
}

.dx-meter-status.is-ready .dx-when-ready {
  display: block;
}

.dx-meter-num {
  color: var(--text-3);
  font: 500 12.5px/1.2 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.dx-progress {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
  -webkit-appearance: none;
  appearance: none;
}

.dx-progress::-webkit-progress-bar {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.dx-progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--accent));
  transition: width 500ms var(--ease-out);
}

.dx-progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--accent));
}

.dx-meter.is-ready .dx-progress::-webkit-progress-value {
  background: var(--ok);
}

.dx-meter.is-ready .dx-progress::-moz-progress-bar {
  background: var(--ok);
}

.dx-breakdown {
  margin-top: 22px;
}

.dx-breakdown-title {
  margin-bottom: 4px;
}

/* Small tables in the answer: thin lines only. */
.dx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.dx-table th,
.dx-table td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--glass-border);
  text-align: left;
  vertical-align: top;
}

.dx-table th:first-child,
.dx-table td:first-child {
  padding-left: 0;
}

.dx-table th:last-child,
.dx-table td:last-child {
  padding-right: 0;
}

.dx-table thead th {
  padding-top: 0;
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dx-table tbody th {
  color: var(--text-2);
  font-weight: 600;
}

.dx-table td {
  font-family: var(--font-mono);
  font-size: 13.5px;
}

.dx-table .is-num {
  text-align: right;
}

.dx-table tbody tr:last-child > * {
  border-bottom: 0;
}

.dx-table .dx-cell-sub {
  display: block;
  color: var(--text-3);
  font: 500 12px/1.4 var(--font-mono);
}

.dx-step-num {
  margin-right: 10px;
  color: var(--text-3);
  font: 600 12px/1 var(--font-mono);
}

.dx-periods {
  margin-top: 18px;
}

.dx-periods tr[data-period="month"] > * {
  color: var(--text);
}

.dx-compare {
  display: grid;
  margin-top: 16px;
  border-top: 1px solid var(--glass-border);
}

.dx-compare li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-2);
  font-size: 14px;
}

.dx-compare strong {
  color: var(--text);
  font: 500 13.5px/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dx-result .dx-line {
  margin-top: 14px;
}

.dx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.dx-actions .btn {
  min-height: 42px;
}

/* While a box holds something that is not a usable number, the last good answer stays, dimmed; it comes back to
   full strength as soon as the box is fixed (the message is under the box). */
.dx-result > * {
  transition: opacity var(--medium) var(--ease-out);
}

.dx-result.is-stale > :not(.dx-actions) {
  opacity: 0.4;
}

/* ---------- the notes at the bottom of the tool ---------- */
.dx-foot {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}

.dx-note {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

.dx-sources {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.55;
}

.dx-sources a,
.dx .field-hint a,
.dx-section a {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--border-hover);
  text-underline-offset: 3px;
  transition:
    color var(--medium) var(--ease-out),
    text-decoration-color var(--medium) var(--ease-out);
}

.dx-sources a:hover,
.dx .field-hint a:hover,
.dx-section a:hover {
  color: var(--text);
  text-decoration-color: var(--accent);
}

/* ---------- under the tool: a glass card each, thin lines inside ---------- */
.dx-extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(14px, 2vw, 22px);
  align-items: start;
  margin-top: clamp(18px, 3vw, 28px);
}

.dx-section {
  min-width: 0;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
}

.dx-counts-section {
  grid-column: 1 / -1;
}

.dx-section-head {
  margin-bottom: 18px;
}

.dx-section-lead {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 15px;
}

.dx-section-foot {
  margin-top: 14px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.55;
}

/* Quick reference: a thin-line table (one small block per amount on phones). */
.dx-ref-scroll {
  overflow-x: auto;
}

.dx-ref th,
.dx-ref td {
  padding: 12px 10px;
  white-space: nowrap;
}

.dx-ref th:first-child,
.dx-ref td:first-child {
  padding-left: 0;
}

.dx-ref th:last-child,
.dx-ref td:last-child {
  padding-right: 0;
}

.dx-ref thead th {
  vertical-align: bottom;
}

.dx-ref-rate {
  display: block;
  margin-top: 4px;
  color: var(--text-3);
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
}

.dx-ref tbody th {
  color: var(--text);
  font: 500 14px/1.3 var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
}

.dx-ref-short,
.dx-ref-unit {
  display: none;
}

.dx-ref-usd {
  color: var(--text);
  font: 500 14px/1.3 var(--font-mono);
}

.dx-ref-local {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font: 500 12px/1.3 var(--font-mono);
}

.dx-ref-tag {
  display: block;
  margin-top: 3px;
  color: var(--accent-ink);
  font: 650 10.5px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Rate history: thin-line rows with a hairline bar for what 30,000 Robux paid. */
.dx-timeline {
  display: grid;
  border-top: 1px solid var(--glass-border);
}

.dx-event {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--glass-border);
}

.dx-event-date {
  color: var(--text-3);
  font: 500 12.5px/1.6 var(--font-mono);
}

.dx-event-title {
  color: var(--text);
  font: 600 15px/1.35 var(--font-display);
  letter-spacing: -0.01em;
}

.dx-event-rate {
  margin-left: 6px;
  color: var(--text-3);
  font: 500 12.5px/1 var(--font-mono);
}

.dx-event-text {
  margin-top: 2px;
  color: var(--text-2);
  font-size: 14px;
}

.dx-event-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

.dx-bar-svg {
  display: block;
  overflow: visible;
}

.dx-bar-track {
  fill: rgba(255, 255, 255, 0.07);
}

.dx-bar-fill {
  fill: rgba(255, 255, 255, 0.32);
}

.dx-event.is-latest .dx-bar-fill {
  fill: var(--accent);
}

.dx-event-pay {
  min-width: 64px;
  color: var(--text);
  font: 500 13.5px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Which Robux count: two thin-line lists. */
.dx-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px clamp(28px, 5vw, 64px);
}

.dx-counts-title,
.dx-faq-list-title {
  color: var(--text-3);
  font: 650 12px/1.2 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dx-counts-title {
  margin-bottom: 10px;
}

.dx-faq-list-title {
  margin-top: 14px;
}

.dx-list {
  display: grid;
  border-top: 1px solid var(--glass-border);
}

.dx-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-2);
  font-size: 14.5px;
}

.faq-answer .dx-list {
  margin-top: 8px;
}

/* ---------- the currency picker ---------- */
.dx-picker {
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  max-height: min(680px, calc(100dvh - 48px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--radius-xl);
  background: rgba(20, 17, 28, 0.86);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}

.dx-picker[open] {
  display: flex;
  flex-direction: column;
  animation: dx-pop 240ms var(--ease-out);
}

.dx-picker::backdrop {
  background: rgba(5, 4, 8, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.dx-picker-box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.dx-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 14px 10px 22px;
}

.dx-picker-title {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.dx-picker-search {
  position: relative;
  padding: 0 14px 12px;
}

.dx-picker-search .input {
  min-height: 48px;
  padding-left: 42px;
  font-size: 16px;
}

.dx-picker-search-icon {
  position: absolute;
  top: 16px;
  left: 30px;
  color: var(--text-3);
  pointer-events: none;
}

.dx-picker-list {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 8px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--glass-border);
  scroll-padding-top: 40px; /* the sticky group title never covers the highlighted currency */
  scrollbar-color: var(--border-strong) transparent;
}

.dx-picker-list:focus {
  outline: none;
}

.dx-picker-group {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 14px 6px;
  background: rgba(20, 17, 28, 0.96);
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dx-option {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 14px;
  border-radius: 12px;
  cursor: var(--nc-hand, pointer);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--fast) var(--ease-out);
}

.dx-option:hover,
.dx-option.is-active {
  background: rgba(255, 255, 255, 0.05);
}

.dx-option[aria-selected="true"] {
  background: var(--accent-soft);
}

.dx-option-code {
  color: var(--text);
  font: 600 13.5px/1 var(--font-mono);
}

.dx-option-name {
  overflow: hidden;
  color: var(--text-2);
  font-size: 14.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dx-option-side {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font: 500 13px/1 var(--font-mono);
  white-space: nowrap;
}

.dx-option-side .icon {
  color: var(--accent-ink);
}

.dx-picker-empty {
  padding: 22px 20px 26px;
  color: var(--text-3);
  text-align: center;
}

/* ---------- motion ---------- */
@keyframes dx-panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes dx-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}

@keyframes dx-sheet {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dx-panel:not([hidden]),
  .dx-split,
  .dx-picker[open] {
    animation: none;
  }

  .dx-glider {
    transition: none;
  }
}

/* ---------- wide screens: boxes left, the answer right (it stays in view) ---------- */
@media (min-width: 961px) {
  .dx-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "main result"
      "more result";
    column-gap: clamp(24px, 3vw, 40px);
  }

  .dx-result {
    position: sticky;
    top: calc(var(--header-height) + 16px);
  }
}

/* ---------- tablets and phones ---------- */
@media (max-width: 760px) {
  .dx-bar {
    flex-direction: column;
  }

  .dx-currency {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .dx-lede {
    margin: 12px 2px 14px;
    font-size: 14px;
  }

  .dx-tabs .dx-tab {
    padding: 0 10px;
    font-size: 14px;
  }

  .dx-actions .btn {
    flex: 1 1 0;
    min-width: max-content;
  }

  .dx-input .input {
    font-size: 17px;
  }

  .dx-counts {
    grid-template-columns: minmax(0, 1fr);
  }

  .dx-event {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  /* The picker fills the screen, its search stays on top (never under the keyboard). */
  .dx-picker {
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    inset: 0;
    border: 0;
    border-radius: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .dx-picker[open] {
    animation-name: dx-sheet;
  }

  .dx-picker-head {
    padding-top: 12px;
  }

  /* Quick reference: one small block per amount, split by thin lines. */
  .dx-ref-scroll {
    overflow: visible;
  }

  .dx-ref,
  .dx-ref tbody,
  .dx-ref tr,
  .dx-ref th,
  .dx-ref td {
    display: block;
  }

  .dx-ref thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .dx-ref tr {
    padding: 6px 0 10px;
    border-top: 1px solid var(--glass-border);
  }

  .dx-ref tbody th {
    padding: 10px 0 4px;
    border: 0;
    font: 600 15px/1.3 var(--font-display);
    letter-spacing: -0.01em;
  }

  .dx-ref-unit {
    display: inline;
  }

  .dx-ref-tag {
    display: inline;
    margin-left: 10px;
  }

  .dx-ref td {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 2px 10px;
    padding: 5px 0;
    border: 0;
    text-align: right;
    white-space: normal;
  }

  .dx-ref td::before {
    content: attr(data-label);
    margin-right: auto;
    color: var(--text-3);
    font-size: 13px;
    text-align: left;
  }

  .dx-ref-local {
    display: inline;
    margin: 0;
  }

  .dx-ref-local:not([hidden])::before {
    content: "· ";
  }
}

/* Who earns from an avatar item sold in a game: one option per row when they would not fit side by side. */
@media (max-width: 480px) {
  .dx-roles {
    flex-direction: column;
  }

  .dx-roles label {
    flex: 0 0 auto;
  }

  .dx-roles span {
    justify-content: flex-start;
    text-align: left;
  }
}

@media (max-width: 400px) {
  .dx-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .dx-chip {
    padding: 0 10px;
  }
}

/* "B" only where it fits next to the money box. */
@media (max-width: 399px) {
  .dx-key-b {
    display: none;
  }

  .dx-input.has-keys .dx-key-m {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }
}

/* The smallest phones (320 px): the three modes still fit side by side. */
@media (max-width: 360px) {
  .dx-tabs {
    gap: 2px;
  }

  .dx-tabs .dx-tab {
    padding: 0 8px;
    font-size: 13.5px;
  }

  .dx-currency {
    padding-right: 10px;
  }

  .dx-chip {
    font-size: 13px;
  }
}