@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap");

/* Full-viewport, no-scroll layout: the app always fills exactly one screen,
   in any orientation or device size. */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none; /* no rubber-band bounce on touch devices */
  background: #061c30;
  font-family: 'Lato', sans-serif;
  color: white;
}

p {
  margin: 0;
}

/* Percentage heights need every ancestor sized; this wrapper was auto-height,
   collapsing #container and pinning the "centered" price to the top. */
#app {
  height: 100%;
}

#container {
  height: 100%;
  display: flex;            /* center price on screen */
  align-items: center;
  justify-content: center;
  text-align: center;
}

#price-wrap {
  /* Fluid size that fills most of the viewport width but stays sane in
     portrait; script.js shrinks it further if long digit counts overflow. */
  font-size: min(20vw, 25vh);
  font-weight: 100;
  line-height: 1;
}

#animatedPrice {
  white-space: nowrap; /* digits must never wrap */
}

.pump {
  animation: color-pump 3s;
}

.dump {
  animation: color-dump 3s;
}

@keyframes color-pump {
  0% { color: #19ff9f; }
  100% { color: #fff; }
}

@keyframes color-dump {
  0% { color: #ff00ad; }
  100% { color: #fff; }
}

#diffUp, #diffDown {
	font-size: .25em;
}

#diffUp {
	color: #19ff9f;
}

#diffDown {
	color: #ff00ad;
}

.hidden {
  display: none !important;
}

/* Currency label: pinned top-left on every device and orientation.
   safe-area insets keep it clear of notches/rounded corners. */
#currency-label {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  font-size: 1.5em;
  color: #fff;
}

#reconnecting {
  position: fixed;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  font-size: 1em;
  color: #ffc107;
}

/* Currency toggle: pinned top-right on every device and orientation.
   Dropdown opens on hover (desktop) or tap (.open class, mobile). */
#settings-icon:hover #currency-selector,
#settings-icon.open #currency-selector {
  display: block;
}

#settings-icon {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  font-size: 1.5em;
  cursor: pointer;
  color: #fff;
  z-index: 1000;
}

#currency-selector {
  display: none; /* shown via :hover (desktop) or .open class (tap/mobile) */
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #061c30;
  border: 1px solid #333;
  padding: 5px 0;
  min-width: 80px;
  text-align: center;
}

.currency-option {
  padding: 5px 10px;
  cursor: pointer;
}

.currency-option:hover,
.currency-option.active {
  background-color: #333;
}