/* Markets empty state: full-width panel with a perspective dot floor. */

/* The market grid is normally a narrow left column (and three columns on wide
   screens) so the cards sit beside the mascot art. The empty state is a single
   panel, so it takes the whole content width instead. */
#markets-view.active:has(.markets-empty) .market-grid {
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
}

#markets-view .markets-empty {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(640px, calc(100vh - 300px));
  padding: 96px 24px 40px;
  border: 1px solid #0f3228;
  border-radius: 14px;
  background: #040c0d;
  text-align: center;
}

#markets-view .markets-empty-body {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

#markets-view .markets-empty h2 {
  margin: 0;
  color: #f8f8f8;
  font: 800 clamp(32px, 4.6vw, 54px)/1.05 "Manrope", sans-serif;
  letter-spacing: -1.8px;
  text-transform: none;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

#markets-view .markets-empty h2::after {
  display: none;
}

#markets-view .markets-empty p {
  margin: 16px 0 0;
  color: #dfe4e2;
  font: 400 clamp(14px, 1.7vw, 19px)/1.5 "Manrope", sans-serif;
  letter-spacing: 0;
  text-shadow: none;
}

#markets-view .markets-empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  width: min(474px, 100%);
  min-height: 73px;
  margin-top: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: #60e9b2;
  box-shadow: none;
  clip-path: none;
  color: #04120e;
  font: 800 17px/1 "Manrope", sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-shadow: none;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}

#markets-view .markets-empty-cta i {
  font: 400 27px/1 "Manrope", sans-serif;
  font-style: normal;
}

#markets-view .markets-empty-cta:hover {
  background: #74efbf;
}

#markets-view .markets-empty-cta:active {
  transform: translateY(1px);
}

/* Dot grid laid flat and tilted away from the viewer, so the rows converge
   toward a horizon behind the copy. */
#markets-view .markets-empty-floor {
  position: absolute;
  z-index: 0;
  left: -45%;
  right: -45%;
  bottom: -48px;
  display: block;
  height: 300px;
  background-image: radial-gradient(circle at center, #9db0ab 1.1px, transparent 1.7px);
  background-size: 30px 26px;
  transform: perspective(300px) rotateX(64deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.45) 48%, transparent 88%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.45) 48%, transparent 88%);
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 820px) {
  #markets-view .markets-empty {
    min-height: 460px;
    padding: 56px 18px 32px;
  }

  #markets-view .markets-empty-cta {
    min-height: 62px;
    margin-top: 38px;
    gap: 18px;
    font-size: 15px;
  }

  #markets-view .markets-empty-floor {
    height: 210px;
  }
}