/* Ilmaversion lisäykset. Perustyylit tulevat main.css:stä; täällä on vain
   se mitä lentäminen ja musiikki tarvitsevat. */

/* ---------- Musiikkipainike ---------- */

.hud-btn .note {
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
}

.hud-btn.off { color: rgba(139, 155, 176, 0.45); }
.hud-btn.off .note { position: relative; }
.hud-btn.off .note::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  height: 1px;
  background: currentColor;
  transform: rotate(-24deg);
}

/* ---------- Nousu ja lasku kosketuksella ---------- */

.lift-pad {
  position: absolute;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(30px + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
}

.lift-btn {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(120, 190, 230, 0.22);
  background: radial-gradient(circle at 50% 40%, rgba(20, 34, 48, 0.45), rgba(8, 12, 18, 0.26));
  color: rgba(223, 233, 245, 0.75);
  font-size: 17px;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
  touch-action: none;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lift-btn.active,
.lift-btn:active {
  opacity: 1;
  color: #eaf9ff;
  border-color: rgba(69, 233, 255, 0.55);
  box-shadow: 0 0 18px rgba(69, 233, 255, 0.22);
}

@media (max-height: 460px) {
  .lift-btn { width: 46px; height: 46px; }
}