/* ThiagoPiza DeFi 5.3.0 — the desktop artwork and layout remain unchanged. */
.mobile-tool-art,
.mobile-card-content { display: none; }

@media screen and (max-width: 1024px) {
  body.converter-page,
  body.downloads-page {
    --mobile-font: "TP Pixel Mono", "Lucida Console", monospace;
    font-family: var(--mobile-font);
    font-weight: 400;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.converter-page {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .converter-page .layout-frame { gap: 22px; }
  .converter-page .mobile-site-header,
  .converter-page .converter-overlay,
  .converter-page .sidebar-hotspots,
  .converter-page .card-hotspots,
  .converter-page .footer-hotspots,
  .converter-page .asset-select__menu {
    font-family: var(--mobile-font);
    font-weight: 400;
  }

  .converter-page button,
  .converter-page input,
  .converter-page output { font-weight: 400 !important; border-radius: 0; }

  .converter-page .mobile-site-header {
    padding: 16px 12px;
    border: 2px solid #c5234b;
    background: url("assets/padrao-quadriculado.png") repeat #030205;
    box-shadow: inset 0 0 0 3px #25000d, 4px 4px 0 #430e23;
  }
  .mobile-site-brand { gap: 12px; }
  .mobile-site-brand__logo {
    display: block;
    width: 68px;
    height: auto;
    flex: 0 0 68px;
    image-rendering: pixelated;
  }
  .mobile-site-brand__copy { flex: 1; }
  .mobile-site-brand__title {
    display: block;
    width: 100%;
    max-width: 430px;
    height: auto;
    image-rendering: pixelated;
  }
  .mobile-site-brand__copy > small {
    margin-top: 10px;
    color: #eee6b9;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
  .mobile-blockchain-divider { display: block; height: auto; margin: 12px 0 0; }
  .mobile-blockchain-divider::before { display: none; }
  .mobile-blockchain-divider svg { display: block; width: 100%; height: auto; }
  .mobile-blockchain-divider .blockchain-cube { filter: url(#mobileBlockchainPixelGlow); }
  .mobile-site-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mobile-site-badges span {
    display: grid;
    min-width: 0;
    min-height: 48px;
    padding: 8px 6px;
    border-width: 2px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    text-align: center;
    place-content: center;
    box-shadow: 3px 3px 0 #18051a;
  }

  .converter-page .converter-overlay {
    padding: 20px 12px;
    border: 2px solid var(--pixel-magenta);
    background: url("assets/padrao-quadriculado-conversoes.png") repeat #030005;
    box-shadow: inset 0 0 0 3px #350024, 4px 4px 0 #43082f;
    font-size: 1rem;
    line-height: 1.65;
  }
  .converter-page .converter-heading { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 16px; }
  .converter-page .converter-heading h1 {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
    text-shadow: none;
  }
  .converter-page .quote-status {
    align-self: flex-start;
    max-width: 100%;
    padding: 10px;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.6;
  }
  .converter-page .quote-status__dot { flex-shrink: 0; }
  .converter-page .converter-tabs { gap: 12px; margin-bottom: 20px; }
  .converter-page .converter-tab {
    min-height: 52px;
    padding: 12px 8px;
    border-width: 2px;
    color: #eee;
    background: #10000d;
    box-shadow: 3px 3px 0 #43082f;
    font-size: 0.875rem;
    letter-spacing: 0;
    line-height: 1.7;
  }
  .converter-page .converter-tab.is-active {
    color: #ff74d7;
    border-color: var(--pixel-magenta);
    background: #29001d;
    box-shadow: inset 0 0 0 2px #52003b, 3px 3px 0 #710052;
  }
  .converter-page .converter-body { gap: 16px; }
  .converter-page .conversion-side {
    height: auto;
    min-height: 0;
    padding: 16px 10px;
    border-width: 2px;
    background: #001015;
    box-shadow: 3px 3px 0 #07323a;
    font-size: 1rem;
    gap: 8px;
  }
  .converter-page .conversion-side--to { background: #190011; box-shadow: 3px 3px 0 #470732; }
  .converter-page .conversion-label {
    margin-bottom: 4px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.75;
  }
  .converter-page .conversion-token-label { margin-top: 8px; }
  .converter-page .asset-badge { width: 40px; height: 40px; font-size: 1rem; }
  .converter-page .conversion-value-shell { gap: 8px; }
  body.tpv4-page.converter-page .converter-overlay input[type="number"].conversion-value,
  .converter-page .conversion-result {
    min-height: 44px !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }
  .converter-page .conversion-result {
    height: auto;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .converter-page .asset-select__trigger {
    min-height: 48px;
    padding: 10px;
    border-width: 2px;
    font-size: 0.875rem;
    letter-spacing: 0;
    line-height: 1.6;
  }
  .converter-page .swap-assets {
    width: 48px;
    height: 48px;
    margin: 0;
    border-width: 2px;
    box-shadow: 3px 3px 0 #24044a;
    font-size: 1.35rem;
  }
  .converter-page .asset-select__menu { font-size: 0.875rem; line-height: 1.6; }
  .converter-page .asset-select__option { min-height: 48px; }
  .converter-page .converter-meta { margin-top: 18px; gap: 12px; }
  .converter-page .converter-meta__item { min-width: 0; }
  .converter-page .converter-meta__item span {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
  }
  .converter-page .converter-meta__item strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.7;
    overflow-wrap: anywhere;
    overflow: visible;
    white-space: normal;
  }
  .converter-page .converter-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .converter-page .converter-message { font-size: 0.875rem; line-height: 1.75; }
  .converter-page .refresh-quote { min-height: 52px; padding: 12px 8px; font-size: 0.875rem; line-height: 1.7; white-space: normal; }
  .converter-page .converter-disclaimer { font-size: 0.75rem; line-height: 1.8; }
  .converter-page .tool-coming-soon h1 { font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1.6; }

  .converter-page .sidebar-hotspots,
  .converter-page .card-hotspots { grid-template-columns: 1fr; gap: 14px; }
  .converter-page .sidebar-hotspots::before,
  .converter-page .card-hotspots::before { font-size: 0.875rem; font-weight: 400; letter-spacing: 0; line-height: 1.7; }
  .converter-page .sidebar-hotspot {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    min-height: 88px;
    padding: 14px;
    border: 2px solid #a11846;
    box-shadow: inset 0 0 0 3px #25000d, 4px 4px 0 #430e23;
    font-size: 0.875rem;
    line-height: 1.7;
  }
  .converter-page .sidebar-hotspot::before { display: none; }
  .converter-page .sidebar-hotspot::after { overflow-wrap: normal; }
  .mobile-tool-art { display: block; width: 56px; height: 56px; image-rendering: pixelated; }
  .converter-page .sidebar-hotspot[aria-current="page"] {
    border-color: #ad6aff;
    box-shadow: inset 0 0 0 3px #24044a, 4px 4px 0 #582691;
  }
  .converter-page .card-hotspot {
    display: block;
    min-height: 0;
    padding: 18px 16px;
    border-width: 2px;
    background: url("assets/padrao-quadriculado.png") repeat #030005;
    box-shadow: inset 0 0 0 3px #08050b, 4px 4px 0 rgba(var(--hotspot-color), .35);
  }
  .converter-page .card-hotspot::before,
  .converter-page .card-hotspot::after { display: none; }
  .mobile-card-content { display: flex; flex-direction: column; align-items: center; height: 100%; gap: 18px; }
  .mobile-card-title { font-size: 1rem; font-weight: 400; line-height: 1.7; text-transform: uppercase; }
  .mobile-card-art { display: block; width: 180px; max-width: 100%; height: 104px; image-rendering: pixelated; }
  .mobile-exchange-visual { display: flex; flex-direction: column; width: 180px; max-width: 100%; min-height: 104px; justify-content: center; gap: 8px; }
  .mobile-exchange-visual .mobile-card-art { width: 100%; height: auto; aspect-ratio: 213 / 73; overflow: hidden; }
  .mobile-exchange-labels { display: flex; justify-content: space-between; padding-inline: 5%; font-size: 0.875rem; line-height: 1.7; font-weight: 400; }
  .mobile-exchange-labels span:first-child { color: var(--pixel-magenta); }
  .mobile-exchange-labels span:last-child { color: var(--pixel-cyan); }
  .mobile-card-description { color: #fff; font-size: 0.875rem; font-weight: 400; line-height: 1.8; }
  .mobile-card-action {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding: 10px 8px;
    border: 2px solid currentColor;
    box-shadow: 3px 3px 0 rgba(var(--hotspot-color), .25);
    font-size: 0.875rem;
    line-height: 1.7;
    text-transform: uppercase;
  }
  .converter-page .footer-hotspots { padding: 14px 6px; gap: 8px 16px; }
  .converter-page .footer-hotspot { max-width: 100%; min-height: 48px; font-size: 0.75rem; line-height: 1.7; text-align: center; }
  .converter-page a:focus-visible,
  .converter-page button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

  /* Downloads: override fixed column minimums and the page's embedded sizes. */
  body.downloads-page { padding: 12px; }
  .downloads-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; min-height: 0; padding: 18px 12px; }
  .downloads-brand { gap: 12px; }
  .downloads-brand__logo { width: 68px; flex-basis: 68px; }
  .downloads-brand__copy { flex: 1; }
  .downloads-brand__copy p { font-size: 0.75rem; line-height: 1.7; white-space: normal; letter-spacing: 0; }
  .downloads-chain { display: block; width: 100%; max-width: 600px; padding: 0; }
  .downloads-title { min-width: 0; min-height: 0; gap: 12px; padding-top: 12px; border-top: 1px solid #351124; }
  .downloads-title h1 { font-size: clamp(1.2rem, 5.5vw, 2rem); line-height: 1.6; letter-spacing: 0; white-space: normal; }
  .downloads-title > span { flex: 0 0 3px; }
  .downloads-workspace,
  .downloads-details__body { grid-template-columns: minmax(0, 1fr); }
  .downloads-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.downloads-page .downloads-stats p { font-size: 0.75rem !important; min-width: 0; padding: 10px; line-height: 1.7; }
  .downloads-panel { min-width: 0; }
  .downloads-panel__header { margin: 18px 12px 14px; padding-right: 44px; }
  .downloads-panel__header p { font-size: 0.75rem; line-height: 1.7; }
  .downloads-panel__header h2 { font-size: 1rem; line-height: 1.7; letter-spacing: 0; overflow-wrap: anywhere; }
  .downloads-search { height: auto; min-height: 50px; padding: 10px; }
  body.downloads-page .downloads-search input { min-width: 0; font-size: 1rem !important; letter-spacing: 0; }
  .downloads-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.downloads-page .downloads-filters button { min-height: 48px; padding: 10px 4px !important; font-size: 0.875rem !important; line-height: 1.7; }
  .downloads-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .download-card { min-height: 110px; padding: 16px; }
  .download-card strong,
  body.downloads-page .download-card--published strong { max-width: 100%; font-size: 0.875rem; line-height: 1.8; letter-spacing: 0; }
  .downloads-search,
  .downloads-filters,
  .downloads-grid,
  .downloads-details__body,
  .downloads-safe-note { margin-inline: 12px; }
  body.downloads-page .downloads-catalog__footer { flex-wrap: wrap; gap: 10px; font-size: 0.75rem !important; line-height: 1.7; }
  .downloads-preview { min-height: 0; padding: 24px 20px; }
  .downloads-preview__screen { max-width: 100%; }
  .downloads-preview__screen strong { font-size: 1rem; line-height: 1.6; }
  .downloads-preview__screen small { font-size: 0.75rem; line-height: 1.7; }
  body.downloads-page .downloads-preview__screen span { font-size: 0.75rem !important; line-height: 1.7; overflow-wrap: anywhere; }
  .downloads-format { font-size: 0.75rem; }
  .downloads-description h3 { font-size: clamp(1rem, 4.6vw, 1.5rem); line-height: 1.7; letter-spacing: 0; overflow-wrap: anywhere; }
  .downloads-description > p { font-size: 0.875rem; line-height: 1.85; }
  .downloads-meta { grid-template-columns: minmax(0, 1fr); }
  body.downloads-page .downloads-meta dt,
  body.downloads-page .downloads-file span { font-size: 0.75rem !important; line-height: 1.7; }
  body.downloads-page .downloads-meta dd,
  body.downloads-page .downloads-file strong { font-size: 0.875rem !important; line-height: 1.7; overflow-wrap: anywhere; }
  body.downloads-page .downloads-button { min-height: 56px; font-size: 0.875rem !important; letter-spacing: 0; line-height: 1.8; white-space: normal; }
  body.downloads-page .downloads-action-status,
  body.downloads-page .downloads-description .downloads-description__note { font-size: 0.75rem !important; line-height: 1.8 !important; letter-spacing: 0; }
  .downloads-safe-note { flex-wrap: wrap; padding: 12px; }
  .downloads-safe-note p { min-width: 0; flex-basis: 180px; }
  body.downloads-page .downloads-safe-note p,
  body.downloads-page .downloads-safe-note strong,
  body.downloads-page .downloads-safe-note small { font-size: 0.75rem !important; line-height: 1.8; overflow-wrap: anywhere; }
  body.downloads-page .downloads-footer { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 10px; font-size: 0.75rem !important; line-height: 1.8; }
  .downloads-footer span,
  .downloads-footer span:nth-child(2),
  .downloads-footer a { text-align: center; overflow-wrap: anywhere; }
  .downloads-footer a { display: grid; min-height: 44px; align-items: center; }

  /* Secondary pages keep their contents, with the same pixel font on mobile. */
  body.legal-page,
  body.coming-soon-page { font-family: "TP Pixel Mono", "Lucida Console", monospace; }
  .legal-header { align-items: stretch; flex-direction: column; padding: 16px 12px; }
  .legal-brand__title { font-size: 1.1rem; line-height: 1.7; letter-spacing: 0; }
  .legal-brand__subtitle { font-size: 0.75rem; line-height: 1.7; }
  .legal-header .pixel-button { font-size: 0.875rem; line-height: 1.7; }
  .legal-panel { padding: 20px 14px; overflow-wrap: anywhere; }
  .legal-panel h1 { font-size: 1.25rem; line-height: 1.7; }
  .legal-panel h2 { font-size: 1rem; line-height: 1.7; color: #dd6385; }
  .legal-panel p,
  .legal-panel li { font-size: 0.875rem; line-height: 1.9; }
  .legal-nav a { min-height: 44px; padding: 8px 0; font-size: 0.75rem; line-height: 1.8; overflow-wrap: anywhere; }
  .coming-soon h1 { font-size: clamp(1.25rem, 6vw, 2.5rem); line-height: 1.7; }
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
  .converter-page .sidebar-hotspots,
  .converter-page .card-hotspots,
  .downloads-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-site-brand__logo,
  .downloads-brand__logo { width: 96px; flex-basis: 96px; }
  .converter-page .converter-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .converter-page .converter-tab { overflow-wrap: normal; }
  .downloads-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .downloads-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 799px) {
  .converter-page .converter-body,
  .converter-page .converter-meta { grid-template-columns: minmax(0, 1fr); }
  .converter-page .swap-assets { transform: rotate(90deg); }
  .converter-page .converter-meta__item + .converter-meta__item {
    padding-top: 12px; padding-left: 0; border-top: 1px solid #711038; border-left: 0;
  }
}

@media screen and (max-width: 359px) {
  .mobile-site-brand__logo,
  .downloads-brand__logo { width: 54px; flex-basis: 54px; }
  .mobile-site-brand__copy > small,
  .downloads-brand__copy p { font-size: 0.75rem; }
  .mobile-site-badges { grid-template-columns: minmax(0, 1fr); }
  .converter-page .sidebar-hotspot { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 12px 10px; }
  .mobile-tool-art { width: 44px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .blockchain-links { animation: none; }
}