/* ===========================================================================
   Asse — application layer.
   Sits on top of the 3D world. Reuses the shell's own type scale and palette
   so the market screens feel cut from the same cloth as the landscape.
   =========================================================================== */

#asse-root {
  --ink: var(--color-white, #fffbe7);
  --ink-dim: #fffbe7a8;
  --deep: var(--color-main, #456a4b);
  --sage: var(--color-black, #798d73);
  --gold: #d9ae7d;
  --up: #7fbf6a;
  --down: #e0785f;
  --panel: rgba(24, 38, 27, 0.82);
  --panel-solid: #1b2c1f;
  --edge: rgba(255, 251, 231, 0.16);
  --edge-soft: rgba(255, 251, 231, 0.08);

  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  font-family: var(--font-family-sans, "centra", sans-serif);
  color: var(--ink);
  font-size: 10px;
}
#asse-root * { box-sizing: border-box; }
#asse-root button { font-family: inherit; color: inherit; background-color: transparent; border: 0; cursor: pointer; }
#asse-root input, #asse-root select { font-family: inherit; color: inherit; }

.a-label {
  font-family: var(--font-family-sans, "centra", sans-serif);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.a-serif { font-family: var(--font-family-serif, "inferi", serif); }
.a-num { font-variant-numeric: tabular-nums; }

/* ── top navigation ─────────────────────────────────────────────────────── */
.a-nav {
  position: absolute;
  z-index: 3;
  bottom: 6.6rem;                 /* a starting point; measured at runtime */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem;
  border-radius: 999px;
  background: rgba(20, 32, 23, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--edge-soft);
  /* invisible must also mean intangible: while it is faded out the bar sits over
     the shell's own controls and would silently swallow their clicks */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.a-nav.is-on { opacity: 1; pointer-events: auto; }
/* over the landscape the bar sits low; with a panel open it rides to the top,
   where the wordmark is already covered and it stops shadowing the content */
.a-nav.is-top { bottom: auto; top: 2.2rem; }
.a-nav button {
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  font-size: 1.05rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}
.a-nav button:hover { color: var(--ink); }
#asse-root .a-nav button.is-active { background-color: var(--ink); color: var(--panel-solid); }

/* ── wallet pill (top right) ────────────────────────────────────────────── */
.a-wallet {
  position: absolute;
  z-index: 3;
  top: 2.2rem;
  right: 2.6rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.a-wallet.is-on { opacity: 1; pointer-events: auto; }
/* every control in the corner shares one height and one shape language */
.a-wallet .a-chain {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  height: 3.8rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--edge-soft);
  background: rgba(20, 32, 23, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 0.98rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}
.a-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
.a-dot.is-off { background: var(--down); box-shadow: none; }
#asse-root .a-connect {
  height: 3.8rem;
  padding: 0 2rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  font-size: 1.05rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: rgba(20, 32, 23, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.a-connect:hover { background: var(--ink); color: var(--panel-solid); border-color: var(--ink); }

/* ── panels ─────────────────────────────────────────────────────────────── */
.a-panel {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: none;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(16, 28, 18, 0.34) 0%, rgba(16, 28, 18, 0.78) 38%, rgba(16, 28, 18, 0.88) 100%);
  backdrop-filter: blur(10px) saturate(0.95);
  -webkit-backdrop-filter: blur(10px) saturate(0.95);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.a-panel.is-open { display: block; }
.a-panel.is-shown { opacity: 1; }
.a-panel-inner { max-width: 128rem; margin: 0 auto; padding: 11rem 3.2rem 12rem; }

.a-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-bottom: 3.2rem; }
.a-panel-title { font-family: var(--font-family-serif, "inferi", serif); font-size: 4.4rem; line-height: 1.05; letter-spacing: 0.01em; }
.a-panel-sub { font-size: 1.35rem; line-height: 1.5; color: var(--ink-dim); max-width: 46rem; margin-top: 1rem; }
.a-close {
  position: absolute; top: 2.4rem; right: 2.4rem;
  width: 4rem; height: 4rem; border-radius: 50%;
  border: 1px solid var(--edge); display: grid; place-items: center;
  font-size: 1.6rem; line-height: 1; color: var(--ink-dim);
  transition: color .2s ease, border-color .2s ease;
}
.a-close:hover { color: var(--ink); border-color: var(--ink); }

/* ── market stats strip ─────────────────────────────────────────────────── */
.a-stats { display: flex; flex-wrap: wrap; gap: 3.6rem; padding: 2rem 0 2.6rem; border-top: 1px solid var(--edge-soft); border-bottom: 1px solid var(--edge-soft); margin-bottom: 3rem; }
.a-stat-k { font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.a-stat-v { font-family: var(--font-family-serif, "inferi", serif); font-size: 2.4rem; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }

/* ── filters ────────────────────────────────────────────────────────────── */
.a-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 2.4rem; }
.a-chip {
  padding: 0.75rem 1.5rem; border-radius: 999px; border: 1px solid var(--edge-soft);
  font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim);
  transition: all 0.2s ease;
}
.a-chip:hover { color: var(--ink); border-color: var(--edge); }
#asse-root .a-chip.is-active { background-color: var(--ink); color: var(--panel-solid); border-color: var(--ink); }
.a-search {
  margin-left: auto; min-width: 22rem;
  background: transparent; border: 0; border-bottom: 1px solid var(--edge-soft);
  padding: 0.8rem 0.2rem; font-size: 1.3rem; letter-spacing: 0.04em; outline: none;
}
.a-search::placeholder { color: rgba(255, 251, 231, 0.4); }
.a-search:focus { border-bottom-color: var(--ink); }

/* the buy / sell switch shares the chip look but not the filter row's identity */
.a-side { display: flex; gap: 0.6rem; }

/* ── asset grid ─────────────────────────────────────────────────────────── */
.a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 1.2rem; }
#asse-root .a-card {
  position: relative; text-align: left; padding: 1.8rem;
  border: 1px solid var(--edge-soft); border-radius: 0.4rem;
  background: rgba(255, 251, 231, 0.03);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
#asse-root .a-card:hover { background-color: rgba(255, 251, 231, 0.07); border-color: var(--edge); transform: translateY(-2px); }
.a-card-top { display: flex; align-items: center; gap: 1.1rem; }
.a-logo { width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; background: rgba(255,251,231,.1); flex: none; }
.a-logo-fb { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255,251,231,.1); font-size: 1.1rem; letter-spacing: .04em; flex: none; }
.a-tkr { font-size: 1.5rem; letter-spacing: 0.08em; font-weight: 500; }
.a-nm { font-size: 1.1rem; color: var(--ink-dim); margin-top: 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15rem; }
.a-card-bot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 1.8rem; }
.a-price { font-family: var(--font-family-serif, "inferi", serif); font-size: 2.2rem; font-variant-numeric: tabular-nums; }
.a-badge { font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--edge-soft); border-radius: 999px; padding: 0.3rem 0.8rem; }

/* ── detail drawer ──────────────────────────────────────────────────────── */
.a-drawer {
  position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; width: min(46rem, 100%);
  background: var(--panel-solid); border-left: 1px solid var(--edge-soft);
  transform: translateX(101%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto; overflow-y: auto; padding: 4.4rem 3rem 4rem;
}
.a-drawer.is-open { transform: translateX(0); }
.a-drawer-hero { display: flex; align-items: center; gap: 1.6rem; }
.a-drawer .a-logo, .a-drawer .a-logo-fb { width: 5.4rem; height: 5.4rem; font-size: 1.5rem; }
.a-kv { display: flex; justify-content: space-between; gap: 2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--edge-soft); font-size: 1.25rem; }
.a-kv span:first-child { color: var(--ink-dim); letter-spacing: 0.06em; }
.a-kv span:last-child { font-variant-numeric: tabular-nums; text-align: right; }

/* ── forms / swap ───────────────────────────────────────────────────────── */
.a-box { border: 1px solid var(--edge-soft); border-radius: 0.4rem; padding: 2rem; background: rgba(255,251,231,.03); }
.a-field { display: flex; align-items: center; gap: 1.2rem; }
.a-amount {
  flex: 1; background: transparent; border: 0; outline: none;
  font-family: var(--font-family-serif, "inferi", serif); font-size: 3.2rem;
  font-variant-numeric: tabular-nums; width: 100%;
}
.a-amount::placeholder { color: rgba(255,251,231,.28); }
.a-pct { display: flex; gap: 0.5rem; margin-top: 1.2rem; }
.a-pct button { font-size: 0.95rem; letter-spacing: .1em; padding: .4rem .9rem; border: 1px solid var(--edge-soft); border-radius: 999px; color: var(--ink-dim); }
.a-pct button:hover { color: var(--ink); border-color: var(--edge); }
#asse-root .a-cta {
  width: 100%; margin-top: 2rem; padding: 1.5rem;
  background: var(--ink); color: var(--panel-solid); border-radius: 0.3rem;
  font-size: 1.15rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  transition: opacity .2s ease;
}
#asse-root .a-cta:disabled { opacity: .35; cursor: not-allowed; }
#asse-root .a-cta.is-ghost { background: transparent; color: var(--ink); border: 1px solid var(--edge); }
.a-note { font-size: 1.1rem; color: var(--ink-dim); line-height: 1.5; margin-top: 1.2rem; }
.a-err { color: var(--down); }
.a-ok { color: var(--up); }

/* ── table ──────────────────────────────────────────────────────────────── */
.a-table { width: 100%; border-collapse: collapse; font-size: 1.25rem; }
.a-table th { text-align: left; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); font-weight: 400; padding: 1rem 1.2rem; border-bottom: 1px solid var(--edge-soft); }
.a-table td { padding: 1.4rem 1.2rem; border-bottom: 1px solid var(--edge-soft); font-variant-numeric: tabular-nums; }
.a-table tr:hover td { background: rgba(255, 251, 231, 0.03); }
.a-right { text-align: right; }

/* ── rebalancer ─────────────────────────────────────────────────────────── */
.a-weight { display: flex; align-items: center; gap: 1.4rem; padding: 1.2rem 0; border-bottom: 1px solid var(--edge-soft); }
/* the browser default renders as a lone dot on this background — draw the track */
.a-weight input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 2px; border-radius: 2px; background: rgba(255, 251, 231, 0.18); outline: none;
}
.a-weight input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%; background: var(--gold);
  border: 0; cursor: grab; box-shadow: 0 0 0 4px rgba(217, 174, 125, 0.16);
}
.a-weight input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: var(--gold);
  border: 0; cursor: grab;
}
.a-weight input[type="range"]::-moz-range-track { height: 2px; background: rgba(255, 251, 231, 0.18); }
.a-weight-val { width: 6rem; text-align: right; font-variant-numeric: tabular-nums; font-size: 1.4rem; }

/* ── contract bar ───────────────────────────────────────────────────────── */
.a-ca {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 1.8rem;
  padding: 1.15rem 2rem; background: rgba(14, 24, 16, 0.82);
  backdrop-filter: blur(12px); border-top: 1px solid var(--edge-soft);
  pointer-events: auto; font-size: 1.05rem; letter-spacing: 0.1em;
}
.a-ca-k { text-transform: uppercase; color: var(--ink-dim); }
.a-ca-v { font-variant-numeric: tabular-nums; cursor: pointer; border-bottom: 1px dashed var(--edge); padding-bottom: 1px; }
#asse-root .a-ca-x { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.2rem; border-radius: 999px; background: var(--ink); color: var(--panel-solid); text-transform: uppercase; text-decoration: none; font-weight: 500; }
.a-ca-x svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* ── loading / empty ────────────────────────────────────────────────────── */
.a-empty { padding: 6rem 0; text-align: center; color: var(--ink-dim); font-size: 1.35rem; }
.a-spin { display: inline-block; width: 1.4rem; height: 1.4rem; border: 2px solid var(--edge); border-top-color: var(--ink); border-radius: 50%; animation: a-spin 0.7s linear infinite; vertical-align: -0.25rem; }
@keyframes a-spin { to { transform: rotate(360deg); } }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .a-panel-inner { padding: 9rem 1.8rem 12rem; }
  .a-panel-title { font-size: 3.2rem; }
  .a-nav { bottom: 7.4rem; max-width: calc(100vw - 2.4rem); overflow-x: auto; }
  .a-nav.is-top { top: auto; bottom: 7.4rem; }
  .a-nav button { padding: 0.8rem 1.2rem; }
  .a-wallet { top: 1.6rem; right: 1.4rem; }
  .a-wallet .a-chain { display: none; }
  .a-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
  .a-drawer { width: 100%; padding: 4.4rem 1.8rem 10rem; }
  .a-stats { gap: 2rem; }
  .a-search { margin-left: 0; min-width: 100%; }
  .a-ca { flex-wrap: wrap; gap: 0.8rem; justify-content: center; text-align: center; }
}


/* ===========================================================================
   Markers over the landscape.
   The shell paints its own discs inside the WebGL scene; ours are DOM chips
   positioned from the same world coordinates, so each place on the map can
   carry the real logo of the asset that stands there.
   =========================================================================== */
#asse-map {
  position: fixed;
  inset: 0;
  z-index: 55;                 /* above the canvas, below the app layer */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  font-family: var(--font-family-sans, "centra", sans-serif);
  font-size: 10px;
}
#asse-map.is-on { opacity: 1; }

.asse-marker {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: #fffbe7;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
}
.asse-marker .m-ring {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(20, 32, 23, 0.55);
  border: 1.5px solid rgba(255, 251, 231, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, background 0.25s ease;
}
.asse-marker .m-ring img { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; display: block; }
.asse-marker .m-ring b { font-size: 1.1rem; letter-spacing: 0.04em; font-weight: 500; }
.asse-marker .m-ring svg { width: 2rem; height: 2rem; fill: #d9ae7d; }
.asse-marker .m-plain { background: rgba(255, 251, 231, 0.9); border-color: rgba(255, 251, 231, 0.9); }
.asse-marker .m-label {
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.asse-marker .m-sub {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: rgba(255, 251, 231, 0.78);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.asse-marker.is-hover .m-ring { transform: scale(1.14); border-color: #fffbe7; background: rgba(20, 32, 23, 0.75); }
.asse-marker.is-app .m-ring {
  width: 5.4rem; height: 5.4rem;
  border-color: #d9ae7d;
  background: rgba(27, 44, 31, 0.82);
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(217, 174, 125, 0.14);
}
.asse-marker.is-app .m-label { color: #f0dcc2; }

/* ── the asset panel: cream, like the shell's own sheets ──────────────────── */
#asse-root .a-drawer {
  background: var(--color-white, #fffbe7);
  border-left: 0;
  padding: 0;
  color: #1b2c1f;
  box-shadow: -18px 0 46px rgba(0, 0, 0, 0.28);
}
.a-close-dark { border-color: rgba(27, 44, 31, 0.25); color: rgba(27, 44, 31, 0.65); background: rgba(255, 251, 231, 0.7); }
.a-close-dark:hover { color: #1b2c1f; border-color: #1b2c1f; }

.a-card {
  position: relative;
  height: 24rem;
  background-size: cover;
  background-position: center;
}
.a-card-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 28, 18, 0.12) 0%, rgba(16, 28, 18, 0.72) 100%); }
.a-card-body { position: absolute; left: 3rem; right: 3rem; bottom: 2.4rem; color: #fffbe7; }
.a-card-body .a-logo, .a-card-body .a-logo-fb { width: 4.4rem; height: 4.4rem; margin-bottom: 1.2rem; }
.a-card-tkr { font-size: 2.6rem; letter-spacing: 0.1em; font-weight: 500; line-height: 1; }
.a-card-nm { font-size: 1.25rem; color: rgba(255, 251, 231, 0.86); margin-top: 0.5rem; }

.a-sheet { padding: 3rem 3rem 4rem; }
.a-eyebrow { font-size: 1rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(27, 44, 31, 0.55); }
.a-sheet-title { font-family: var(--font-family-serif, "inferi", serif); font-size: 3rem; line-height: 1.1; margin: 1rem 0 0; }
.a-sheet-price { font-family: var(--font-family-serif, "inferi", serif); font-size: 4.2rem; line-height: 1; margin: 1.6rem 0 0.6rem; font-variant-numeric: tabular-nums; }
.a-sheet-note { font-size: 1.25rem; line-height: 1.55; color: rgba(27, 44, 31, 0.72); margin: 0 0 2.4rem; }
.a-sheet .a-kv { border-bottom-color: rgba(27, 44, 31, 0.12); }
.a-sheet .a-kv span:first-child { color: rgba(27, 44, 31, 0.55); }
.a-sheet .a-kv span:last-child { color: #1b2c1f; }
.a-sheet .a-kv a { color: inherit; }

#asse-root .a-cta-dark { background: #1b2c1f; color: var(--color-white, #fffbe7); }
#asse-root .a-cta.is-ghost.a-ghost-dark { background: transparent; color: #1b2c1f; border: 1px solid rgba(27, 44, 31, 0.28); margin-top: 1rem; }
#asse-root .a-cta.is-ghost.a-ghost-dark:hover { border-color: #1b2c1f; }

/* ── HUD additions ───────────────────────────────────────────────────────── */
#asse-root .a-icon-btn {
  width: 3.8rem; height: 3.8rem; flex: none;
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: rgba(20, 32, 23, 0.5);
  backdrop-filter: blur(14px);
  display: grid; place-items: center;
  color: var(--ink-dim);
  transition: color 0.2s ease, border-color 0.2s ease;
}
#asse-root .a-icon-btn svg { width: 1.7rem; height: 1.7rem; fill: currentColor; }
#asse-root .a-icon-btn:hover { color: var(--ink); border-color: var(--ink); }
#asse-root .a-icon-btn.is-on { color: var(--gold); border-color: rgba(217, 174, 125, 0.6); }
/* the same pill, but it is a link, so the anchor defaults have to go */
#asse-root a.a-icon-btn { text-decoration: none; }
#asse-root .a-x:hover { color: var(--ink); border-color: var(--ink); }
#asse-root .a-openapp { background: var(--ink); color: var(--panel-solid); border-color: var(--ink); }
#asse-root .a-openapp:hover { background: #ffffff; }

@media (max-width: 900px) {
  .a-card { height: 18rem; }
  .a-sheet { padding: 2.4rem 1.8rem 10rem; }
  .a-sheet-title { font-size: 2.4rem; }
  .a-sheet-price { font-size: 3.2rem; }
  #asse-root .a-openapp { display: none; }
  .asse-marker .m-ring { width: 3.4rem; height: 3.4rem; }
  .asse-marker .m-ring img { width: 2.1rem; height: 2.1rem; }
  .asse-marker.is-app .m-ring { width: 4.4rem; height: 4.4rem; }
  .asse-marker .m-sub { display: none; }
}

/* when two places nearly overlap on screen, the crowded one keeps only its ring */
.asse-marker.is-crowded .m-label,
.asse-marker.is-crowded .m-sub { opacity: 0; pointer-events: none; }
.asse-marker.is-crowded.is-hover .m-label,
.asse-marker.is-crowded.is-hover .m-sub { opacity: 1; }
.asse-marker .m-label, .asse-marker .m-sub { transition: opacity 0.2s ease; }

/* ── long-form copy on the About screen ──────────────────────────────────── */
.a-prose { max-width: 62rem; }
.a-prose h3 {
  font-family: var(--font-family-serif, "inferi", serif);
  font-size: 2rem; font-weight: 400; letter-spacing: .01em;
  margin: 3.2rem 0 1rem;
}
.a-prose h3:first-child { margin-top: 0; }
.a-prose p { font-size: 1.45rem; line-height: 1.65; color: var(--ink-dim); margin: 0; }
@media (max-width: 900px) {
  .a-prose h3 { font-size: 1.8rem; margin-top: 2.6rem; }
  .a-prose p { font-size: 1.35rem; }
}

/* a row of buttons that keeps its rhythm when it wraps */
.a-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 3.4rem; }
/* the shared button rule is full width; in a row they size to their content */
#asse-root .a-actions > * { flex: 0 1 auto; width: auto; min-width: 19rem; margin-top: 0; text-align: center; text-decoration: none; }
#asse-root .a-actions .a-cta { margin-top: 0; }
@media (max-width: 900px) {
  #asse-root .a-actions > * { flex: 1 1 100%; width: 100%; }
  .a-wallet { gap: 0.8rem; right: 1.4rem; }
  .a-wallet .a-chain { display: none; }
  #asse-root .a-connect { height: 3.4rem; padding: 0 1.4rem; font-size: 0.98rem; }
  #asse-root .a-icon-btn { width: 3.4rem; height: 3.4rem; }
}

/* ── native selects ───────────────────────────────────────────────────────
   A transparent select inherits our light text but the operating system draws
   the open list on its own white surface, which left the options invisible.
   Both states get an explicit surface of ours.
   ───────────────────────────────────────────────────────────────────────── */
#asse-root select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(20, 32, 23, 0.72);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23fffbe7' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 1rem;
  padding-right: 3rem !important;
  color: var(--ink);
  cursor: pointer;
}
#asse-root select:hover { background-color: rgba(20, 32, 23, 0.9); border-color: var(--edge); }
#asse-root select option,
#asse-root select optgroup {
  background-color: #1b2c1f;
  color: #fffbe7;
}
#asse-root select optgroup { font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; font-size: 1rem; }
#asse-root select option { padding: 0.6rem 0.4rem; letter-spacing: 0.06em; }